修改nav存取规则，添加网站版本防止获取旧信息

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;
       });
     }

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<DnavStorage>("navTagLists");
+
 export function useNavList(): [
   NavQueryItemType[],
   React.Dispatch<React.SetStateAction<NavQueryItemType[]>>
 ] {
   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<NavQueryItemType, "id" | "cancelable">[] = [
     {
       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<NavRouterItemType, "id" | "cancelable">[] = [
+  {
+    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

src/routers/layout/tools.ts

@@ -1,12 +1,31 @@
-export function getLocalStorage<T>(searchName: string, defaultRes: T): T {
-  if (!localStorage) {
-    return defaultRes;
+export class Storage<T> {
+  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));
 }

src/utils/index.ts

@@ -158,3 +158,8 @@ export function thorttleFn<T extends (...args: any) => any>(
     }
   };
 }
+
+/**
+ * @description 获取当前版本
+ */
+export const getVersion = () => __APP_VERSION__;

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare const __APP_VERSION__: string;

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"),