tab

src/views/website/detail/PageTabs.2.tsx

@@ -0,0 +1,79 @@
+import { css } from "@linaria/core";
+
+import { defineComponent } from "vue";
+import { useRouter } from "vue-router";
+import { any, string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    data: any(),
+    activeKey: string(),
+  },
+  setup(props) {
+    const router = useRouter();
+    return () => {
+      return (
+        <div class={page}>
+          {props.data &&
+            props.data.map((e: CategoryItem) => {
+              return (
+                <div
+                  class={["tabs_item", e._id == props.activeKey ? "cur" : ""]}
+                  key={e._id}
+                  onClick={() => {
+                    router.push(`/detail/${e._id}`);
+                  }}
+                >
+                  {e.name}
+                </div>
+              );
+            })}
+        </div>
+      );
+    };
+  },
+});
+const page = css`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-x: auto;
+  .tabs_item {
+    position: relative;
+    margin: 0 30px;
+    height: 64px;
+    line-height: 64px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #666666;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.2s ease-in-out;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      border-bottom: 2px solid var(--vt-c-primary);
+      transition: width 0.2s ease-in-out;
+    }
+    &.cur {
+      font-weight: 500;
+      color: #333;
+      &::after {
+        width: 48px;
+      }
+    }
+  }
+  @media screen and (max-width: 1200px) {
+    justify-content: flex-start;
+  }
+  @media screen and (max-width: 750px) {
+    .tabs_item {
+      margin: 0 20px;
+    }
+  }
+`;

src/views/website/detail/PageTabs.tsx

@@ -1,4 +1,5 @@
 import { css } from "@linaria/core";
+import { Tabs } from "ant-design-vue";
 
 import { defineComponent } from "vue";
 import { useRouter } from "vue-router";
@@ -6,74 +7,67 @@ import { any, string } from "vue-types";
 
 export default defineComponent({
   props: {
-    data: any(),
+    data: any().def([]),
     activeKey: string(),
   },
   setup(props) {
     const router = useRouter();
+
     return () => {
+      const { activeKey, data } = props;
       return (
-        <div class={page}>
-          {props.data &&
-            props.data.map((e: CategoryItem) => {
-              return (
-                <div
-                  class={["tabs_item", e._id == props.activeKey ? "cur" : ""]}
-                  key={e._id}
-                  onClick={() => {
-                    router.push(`/detail/${e._id}`);
-                  }}
-                >
-                  {e.name}
-                </div>
-              );
-            })}
-        </div>
+        <Tabs
+          size="large"
+          centered={true}
+          class={tabStyles}
+          activeKey={activeKey}
+          onChange={(v) => router.push(`/detail/${v}`)}
+        >
+          {data.map((d: CategoryItem) => (
+            <Tabs.TabPane key={d._id} tab={d.name} />
+          ))}
+        </Tabs>
       );
     };
   },
 });
-const page = css`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow-x: auto;
-  .tabs_item {
-    position: relative;
-    margin: 0 30px;
-    height: 64px;
-    line-height: 64px;
-    font-size: 16px;
-    font-weight: 400;
-    color: #666666;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: all 0.2s ease-in-out;
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 0;
-      border-bottom: 2px solid var(--vt-c-primary);
-      transition: width 0.2s ease-in-out;
+
+const tabStyles = css`
+  .ant-tabs-nav {
+    margin-bottom: 0;
+    &::before {
+      border: none;
     }
-    &.cur {
-      font-weight: 500;
-      color: #333;
+    .ant-tabs-tab {
+      padding: 20px 0;
+      color: #666;
+      + .ant-tabs-tab {
+        margin-left: 60px;
+      }
       &::after {
-        width: 48px;
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        border-bottom: 2px solid var(--vt-c-primary);
+        transition: width 0.2s ease-in-out;
       }
     }
-  }
-  @media screen and (max-width: 1200px) {
-    justify-content: flex-start;
-  }
-  @media screen and (max-width: 750px) {
-    .tabs_item {
-      margin: 0 20px;
+    .ant-tabs-tab-active {
+      &::after {
+        min-width: 50px;
+        width: 50%;
+      }
+      .ant-tabs-tab-btn {
+        font-weight: 500;
+        color: #333;
+        text-shadow: none;
+      }
+    }
+    .ant-tabs-ink-bar {
+      opacity: 0;
     }
   }
 `;

src/views/website/detail/article.tsx

@@ -3,6 +3,7 @@ import { css } from "@linaria/core";
 import { Empty, message } from "ant-design-vue";
 import { defineComponent, onMounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+
 import PageTabs from "./PageTabs";
 
 export default defineComponent({
@@ -76,6 +77,7 @@ export default defineComponent({
         state.currTree = t;
         return;
       }
+      state.currMid = t;
       state.currTree = categoryStore.categoryTree.find((e) => {
         return e._id == t?.pid;
       });

src/views/website/detail/index.tsx

@@ -1,14 +1,13 @@
 import { useCategory } from "@/modules";
 import { css } from "@linaria/core";
-
 import { defineComponent, onMounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import PageTabs from "./PageTabs";
 
 import DetailPage from "./DetailPage";
-import PageTabsLow from "./PageTabsLow";
-import ListPage from "./ListPage";
 import DownloadPage from "./DownloadPage";
+import ListPage from "./ListPage";
+import PageTabs from "./PageTabs";
+import PageTabsLow from "./PageTabsLow";
 
 export default defineComponent({
   setup() {