From ad23a085fdec5233064829fb0b709efac15c7b94 Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Sun, 15 Jan 2023 19:26:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9nav=E5=AD=98=E5=8F=96?= =?UTF-8?q?=E8=A7=84=E5=88=99=EF=BC=8C=E6=B7=BB=E5=8A=A0=E7=BD=91=E7=AB=99?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E9=98=B2=E6=AD=A2=E8=8E=B7=E5=8F=96=E6=97=A7?= =?UTF-8?q?=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routers/layout/nav/index.tsx | 8 ++- src/routers/layout/nav/tools.ts | 93 ++++++++++++++++++++++---------- src/routers/layout/tools.ts | 37 +++++++++---- src/utils/index.ts | 5 ++ src/vite-env.d.ts | 1 + vite.config.ts | 3 ++ 6 files changed, 108 insertions(+), 39 deletions(-) diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx index 6bf1885..721bf40 100644 --- a/src/routers/layout/nav/index.tsx +++ b/src/routers/layout/nav/index.tsx @@ -18,9 +18,10 @@ import styles from "./nav.module.less"; import { FC, useMemo, memo } from "react"; import { Flipped } from "react-flip-toolkit"; import { NavQueryItemType, useNavList } from "./tools"; -import { setLocalstorage } from "../tools"; +import { NavStorage } from "./tools"; import { useAppSelector, useAppDispatch } from "@store/hooks"; import { changeNavMoreShowed, selectNavMoreShowed } from "@store/device/index"; +import { getVersion } from "../../../utils/index"; import { handerAddTag, handerDeleteTag, @@ -55,7 +56,10 @@ export default function Header_Nav() { const oldIndex = items.findIndex((item) => item.id === active.id), newIndex = items.findIndex((item) => item.id === over.id), newLists = arrayMove(items, oldIndex, newIndex); - setLocalstorage("navTagLists", newLists); + NavStorage.setLocalstorage({ + version: getVersion(), + res: newLists, + }); return newLists; }); } diff --git a/src/routers/layout/nav/tools.ts b/src/routers/layout/nav/tools.ts index 374f9c7..b921168 100644 --- a/src/routers/layout/nav/tools.ts +++ b/src/routers/layout/nav/tools.ts @@ -1,17 +1,29 @@ import { nanoid } from "nanoid"; import { useMemo, useState } from "react"; -import { getLocalStorage } from "../tools"; +import { Storage } from "../tools"; +import { getVersion } from "@utils/index"; + +interface DnavStorage { + version: string; + res: NavQueryItemType[]; +} + +export const NavStorage = new Storage("navTagLists"); + export function useNavList(): [ NavQueryItemType[], React.Dispatch> ] { const nav_ok_lists = useMemo(() => { - const local_lists = getLocalStorage( - "navTagLists", - [] as NavQueryItemType[] - ); - if (PassNavList(local_lists)) { - return local_lists; + const local_lists = NavStorage.getLocalStorage({ + version: getVersion(), + res: [], + } as DnavStorage); + if (parseFloat(local_lists.version) < parseFloat(getVersion())) { + return query_nav_list; + } + if (PassNavList(local_lists.res)) { + return local_lists.res; } return query_nav_list; }, []); @@ -90,22 +102,12 @@ export type NavQueryItemType = { id: string; type: "query"; query: string; - queryType: "q" | "tname" | "copyright"; + queryType: "q" | "tname" | "copyright" | "order"; queryString: string; cancelable: boolean; }; export type NavListItemType = NavQueryItemType | NavRouterItemType; -const nav_tag_list = [ - { - type: "router", - pathname: "photo", - name: "图片", - }, - { - type: "router", - pathname: "video", - name: "视频", - }, +const nav_tag_list_no_id: Omit[] = [ { type: "query", query: "露早", @@ -166,16 +168,51 @@ const nav_tag_list = [ queryType: "tname", queryString: "guichu", }, - ].map((item) => ({ + { + type: "query", + query: "原创", + queryType: "copyright", + queryString: "1", + }, + { + type: "query", + query: "转载", + queryType: "copyright", + queryString: "2", + }, + { + type: "query", + query: "最新发布", + queryType: "order", + queryString: "pubdate", + }, + { + type: "query", + query: "最多播放", + queryType: "order", + queryString: "view", + }, + ], + query_nav_list = nav_tag_list_no_id.map((item) => ({ ...item, id: nanoid(3), cancelable: false, - })) as NavListItemType[], - query_nav_list = nav_tag_list.filter( - (item) => item.type === "query" - ) as NavQueryItemType[]; - -export const router_nav_list = nav_tag_list.filter( - (item) => item.type === "router" -) as NavRouterItemType[]; + })) as NavQueryItemType[]; +const router_list: Omit[] = [ + { + type: "router", + pathname: "photo", + name: "图片", + }, + { + type: "router", + pathname: "video", + name: "视频", + }, +]; +export const router_nav_list = router_list.map((item) => ({ + ...item, + id: nanoid(3), + cancelable: false, +})) as NavRouterItemType[]; //todo 增加新的tag diff --git a/src/routers/layout/tools.ts b/src/routers/layout/tools.ts index ecbd197..6a3dfb3 100644 --- a/src/routers/layout/tools.ts +++ b/src/routers/layout/tools.ts @@ -1,12 +1,31 @@ -export function getLocalStorage(searchName: string, defaultRes: T): T { - if (!localStorage) { - return defaultRes; +export class Storage { + itemName: string; + constructor(itemName: string) { + this.itemName = itemName; } - if (!localStorage.getItem(searchName)) { - localStorage.setItem(searchName, JSON.stringify(defaultRes)); + private getStorage(Storagename: globalThis.Storage, defaultRes: T): T { + if (!Storagename) { + return Storagename; + } + if (!Storagename.getItem(this.itemName)) { + Storagename.setItem(this.itemName, JSON.stringify(defaultRes)); + } + return JSON.parse(Storagename.getItem(this.itemName) as string); + } + private setStorage(Storagename: globalThis.Storage, targetRes: T): void { + if (Storagename) + Storagename.setItem(this.itemName, JSON.stringify(targetRes)); + } + getLocalStorage(defaultRes: T): T { + return this.getStorage(localStorage, defaultRes); + } + getSessionStorage(defaultRes: T): T { + return this.getStorage(sessionStorage, defaultRes); + } + setLocalstorage(targetRes: T): void { + this.setStorage(localStorage, targetRes); + } + setSessionStorage(targetRes: T): void { + this.setStorage(sessionStorage, targetRes); } - return JSON.parse(localStorage.getItem(searchName) as string); -} -export function setLocalstorage(itemName: string, targetRes: unknown): void { - if (localStorage) localStorage.setItem(itemName, JSON.stringify(targetRes)); } diff --git a/src/utils/index.ts b/src/utils/index.ts index ed03249..7c98c6b 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -158,3 +158,8 @@ export function thorttleFn any>( } }; } + +/** + * @description 获取当前版本 + */ +export const getVersion = () => __APP_VERSION__; diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..d5337f4 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,2 @@ /// +declare const __APP_VERSION__: string; diff --git a/vite.config.ts b/vite.config.ts index 828cc10..90a263c 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,6 +9,9 @@ import viteCompression from "vite-plugin-compression"; import legacy from "@vitejs/plugin-legacy"; // https://vitejs.dev/config/ export default defineConfig({ + define: { + __APP_VERSION__: "0.1", + }, resolve: { alias: { "@utils": path.resolve(__dirname, "src/utils"),