🐛 fix(custom): 修复tab栏在搜索页面出现的bug，修改图片页tag栏默认顺序，增加当前页提示

EOEFANS · Mar 4, 2023 · aec33cc · aec33cc
1 parent 4a02535
commit aec33cc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 17 deletions.
diff --git a/config/vite.dev.config.ts b/config/vite.dev.config.ts
@@ -6,7 +6,7 @@ export const addProjectPath = (originPath: string) => `../${originPath}`;
 import { createHtmlPlugin } from "vite-plugin-html";
 export default defineConfig({
   define: {
-    __APP_VERSION__: "0.01",
+    __APP_VERSION__: "0.02",
     isdev: true,
     isrelease: false,
   },

diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx
@@ -27,9 +27,7 @@ export default function Layout() {
           <ImportTantInfo />
         </div>
         <Header />
-        <div className='p-2 flex justify-center'>
-          <Header_Nav />
-        </div>
+        <FixedNav />
         <Flipped flipId={"container"} spring={"veryGentle"}>
           <main className='feedContainer'>
             <Outlet />
@@ -39,6 +37,23 @@ export default function Layout() {
     </>
   );
 }
+
+const useMatchUrls = (urls: string[]) => urls.map((item) => useMatch(item));
+
+const FixedNav = () => {
+  const urls = useMatchUrls(["/", "/video", "/photo"]),
+    shouldShowNav = urls.some((item) => item !== null);
+  return (
+    <>
+      {shouldShowNav && (
+        <div className='p-2 flex justify-center'>
+          <Header_Nav />
+        </div>
+      )}
+    </>
+  );
+};
+
 export const ImportTantInfo = () => (
   <>
     <Link

diff --git a/src/routers/layout/logo/index.tsx b/src/routers/layout/logo/index.tsx
@@ -107,15 +107,32 @@ export const AboutUSButton = () => {
   );
 };
 
+const useRouterMatchWithDefaultRouter = (urls: string[]) => {
+  const lists = urls.map((item) => useMatch(item));
+  return lists.some((item) => item !== null);
+};
 const RouterListAndQA = () => {
+  const isVideoPage = useRouterMatchWithDefaultRouter(["/", "/video"]),
+    isPhotoPage = useRouterMatchWithDefaultRouter(["/photo"]),
+    isActive = (label: string) => {
+      if (
+        (label === "视频" && isVideoPage) ||
+        (label === "图片" && isPhotoPage)
+      ) {
+        return true;
+      }
+      return false;
+    };
   return (
     <div className='pl-2'>
       {RouterList.slice(0, 2).map((item) => (
         <Button
           key={item.label}
           startIcon={item.startICon}
           title={`前往${item.label}页`}
-          className='bg-white text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm'
+          className={` text-gray-800 transition-all duration-300 hover:bg-gray-200 rounded-sm ${
+            isActive(item.label) ? "bg-gray-300" : "bg-white"
+          }`}
         >
           <Link to={item.to} className=''>
             {item.label}

diff --git a/src/routers/layout/nav/VideoTools.ts b/src/routers/layout/nav/VideoTools.ts
@@ -112,6 +112,18 @@ export type VideoNavQueryItemType = {
 };
 export type NavListItemType = VideoNavQueryItemType | NavRouterItemType;
 const nav_tag_list_no_id: Omit<VideoNavQueryItemType, "id" | "cancelable">[] = [
+    {
+      type: "query",
+      query: "最新发布",
+      queryType: "order",
+      queryString: "pubdate",
+    },
+    {
+      type: "query",
+      query: "最多播放",
+      queryType: "order",
+      queryString: "view",
+    },
     {
       type: "query",
       query: "露早",
@@ -184,18 +196,6 @@ const nav_tag_list_no_id: Omit<VideoNavQueryItemType, "id" | "cancelable">[] = [
       queryType: "copyright",
       queryString: "2",
     },
-    {
-      type: "query",
-      query: "最新发布",
-      queryType: "order",
-      queryString: "pubdate",
-    },
-    {
-      type: "query",
-      query: "最多播放",
-      queryType: "order",
-      queryString: "view",
-    },
   ],
   video_query_nav_list = nav_tag_list_no_id.map((item) => ({
     ...item,