From 77ee7ba1af08b857a8e0f1231a2d9d72ac1ba35c Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Thu, 18 Apr 2024 00:24:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=EF=BC=8C=E5=85=B3=E8=81=94tags=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Main/index.vue     |  66 +++---
 src/layout/components/Menu/index.vue     |  18 +-
 src/layout/components/Menu/menu-item.vue |   2 +-
 src/layout/components/Tabs/index.vue     | 251 ++++++++++++-----------
 src/router/route-output.ts               |   2 +-
 src/router/route.ts                      |  19 +-
 src/store/route-list.ts                  |  15 +-
 7 files changed, 197 insertions(+), 176 deletions(-)

diff --git a/src/layout/components/Main/index.vue b/src/layout/components/Main/index.vue
index 4c4e8e8..5e75534 100644
--- a/src/layout/components/Main/index.vue
+++ b/src/layout/components/Main/index.vue
@@ -1,35 +1,31 @@
-<template>
-  <a-layout-content class="content">
-    <Tabs />
-    <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
-      <div class="main">
-        <div class="main_box"></div>
-      </div>
-    </a-scrollbar>
-  </a-layout-content>
-</template>
-
-<script setup lang="ts">
-import Tabs from "@/layout/components/Tabs/index.vue";
-</script>
-
-<style lang="scss" scoped>
-.content {
-  height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
-}
-.scrollbar {
-  height: calc(100% - 40px);
-}
-.main {
-  padding: $padding;
-  .main_box {
-    height: 1000px;
-    background: #eee;
-  }
-}
-// 修改左侧滚动条宽度
-:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
-  width: 4px;
-  margin-left: 8px;
-}
-</style>
+<template>
+  <a-layout-content class="content">
+    <Tabs />
+    <a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
+      <div class="main">
+        <router-view />
+      </div>
+    </a-scrollbar>
+  </a-layout-content>
+</template>
+
+<script setup lang="ts">
+import Tabs from "@/layout/components/Tabs/index.vue";
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: calc(100vh - 60px - 30px); // 动态切类名-去掉footer
+}
+.scrollbar {
+  height: calc(100% - 40px);
+}
+.main {
+  padding: $padding;
+}
+// 修改左侧滚动条宽度
+:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
+  width: 4px;
+  margin-left: 8px;
+}
+</style>
diff --git a/src/layout/components/Menu/index.vue b/src/layout/components/Menu/index.vue
index 8fa6e71..a04d72f 100644
--- a/src/layout/components/Menu/index.vue
+++ b/src/layout/components/Menu/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-menu breakpoint="xl" :collapsed="collapsed">
+  <a-menu breakpoint="xl" :collapsed="collapsed" @menu-item-click="onMenuItem">
     <MenuItem :route-tree="routeTree" />
   </a-menu>
 </template>
@@ -9,13 +9,25 @@ import MenuItem from "@/layout/components/Menu/menu-item.vue";
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/theme-config";
 import { useRoutesListStore } from "@/store/route-list";
-
+import { useRouter } from "vue-router";
+const router = useRouter();
 const routerStore = useRoutesListStore();
-const { routeTree } = storeToRefs(routerStore);
+const { routeTree, routeList } = storeToRefs(routerStore);
 const themeStore = useThemeConfig();
 const { collapsed } = storeToRefs(themeStore);
 
 console.log("路由树", routeTree.value);
+
+const onMenuItem = (key: string) => {
+  let find = routeList.value.find((item: Menu.MenuOptions) => item.name === key);
+  console.log("当前", find);
+  if (find) {
+    routerStore.setTagsList(find);
+    router.push(find.path);
+  } else {
+    router.push("/404");
+  }
+};
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/layout/components/Menu/menu-item.vue b/src/layout/components/Menu/menu-item.vue
index e48cb57..0276f47 100644
--- a/src/layout/components/Menu/menu-item.vue
+++ b/src/layout/components/Menu/menu-item.vue
@@ -7,7 +7,7 @@
       <template #title>{{ item.meta.title }}</template>
       <MenuItem :route-tree="item.children" />
     </a-sub-menu>
-    <a-menu-item v-else :key="item.name">
+    <a-menu-item v-else :key="item?.name">
       <template #icon v-if="item.meta.svgIcon || item.meta.icon">
         <IconCommon :svg-icon="item.meta.svgIcon" :icon="item.meta.icon" />
       </template>
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 1f620ea..26dfc5b 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -1,122 +1,129 @@
-<template>
-  <div class="tabs">
-    <a-tabs
-      :editable="true"
-      :hide-content="true"
-      size="medium"
-      type="line"
-      show-add-button
-      @add="handleAdd"
-      @delete="handleDelete"
-    >
-      <a-tab-pane v-for="(item, index) of data" :key="item.key" :title="item.title" :closable="index !== 2" />
-    </a-tabs>
-    <div class="tabs_setting">
-      <a-dropdown trigger="hover">
-        <div class="setting"><icon-loop :size="18" /></div>
-        <template #content>
-          <a-doption>
-            <template #icon><icon-refresh /></template>
-            <template #default>刷新</template>
-          </a-doption>
-          <a-doption>
-            <template #icon><icon-left /></template>
-            <template #default>关闭左侧</template>
-          </a-doption>
-          <a-doption>
-            <template #icon><icon-right /></template>
-            <template #default>关闭右侧</template>
-          </a-doption>
-          <a-doption>
-            <template #icon><icon-close /></template>
-            <template #default>关闭其它</template>
-          </a-doption>
-          <a-doption>
-            <template #icon><icon-close-circle /></template>
-            <template #default>全部关闭</template>
-          </a-doption>
-        </template>
-      </a-dropdown>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-let count = 5;
-const data = ref([
-  {
-    key: "1",
-    title: "Tab 1",
-    content: "Content of Tab Panel 1"
-  },
-  {
-    key: "2",
-    title: "Tab 2",
-    content: "Content of Tab Panel 2"
-  },
-  {
-    key: "3",
-    title: "Tab 3",
-    content: "Content of Tab Panel 3"
-  },
-  {
-    key: "4",
-    title: "Tab 4",
-    content: "Content of Tab Panel 4"
-  }
-]);
-
-const handleAdd = () => {
-  const number = count++;
-  data.value = data.value.concat({
-    key: `${number}`,
-    title: `New Tab ${number}`,
-    content: `Content of New Tab Panel ${number}`
-  });
-};
-const handleDelete = (key: any) => {
-  data.value = data.value.filter(item => item.key !== key);
-};
-</script>
-
-<style lang="scss" scoped>
-.tabs {
-  height: 40px;
-  box-sizing: border-box;
-  border-bottom: $border-1 solid $color-border-2;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .tabs_setting {
-    margin: 0 0 0 $margin;
-    .setting {
-      margin-right: $margin;
-      color: $color-text-2;
-    }
-  }
-}
-:deep(.arco-tabs-nav-tab) {
-  // 移入展示关闭icon
-  .arco-tabs-tab-closable {
-    svg {
-      width: 0px;
-      transition: all 0.2s;
-    }
-    &:hover {
-      svg {
-        width: 1em;
-      }
-    }
-  }
-  // 消除tab移入的背景色
-  &:hover .arco-tabs-tab-title::before {
-    background: unset;
-  }
-}
-// 消除tabs底部边线
-:deep(.arco-tabs-nav) {
-  &::before {
-    background: unset;
-  }
-}
-</style>
+<template>
+  <div class="tabs">
+    <a-tabs :editable="true" :hide-content="true" size="medium" type="line" @delete="handleDelete">
+      <a-tab-pane v-for="item of tagsList" :key="item.name" :title="item.meta.title" :closable="!item.meta.isAffix" />
+    </a-tabs>
+    <div class="tabs_setting">
+      <a-dropdown trigger="hover">
+        <div class="setting"><icon-loop :size="18" /></div>
+        <template #content>
+          <a-doption>
+            <template #icon><icon-refresh /></template>
+            <template #default>刷新</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-left /></template>
+            <template #default>关闭左侧</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-right /></template>
+            <template #default>关闭右侧</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-close /></template>
+            <template #default>关闭其它</template>
+          </a-doption>
+          <a-doption>
+            <template #icon><icon-close-circle /></template>
+            <template #default>全部关闭</template>
+          </a-doption>
+        </template>
+      </a-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { useRoutesListStore } from "@/store/route-list";
+const routerStore = useRoutesListStore();
+const { tagsList } = storeToRefs(routerStore);
+
+watch(
+  tagsList.value,
+  newV => {
+    console.log("tagsList", newV);
+  },
+  { flush: "post" }
+);
+
+// let count = 5;
+// const data = ref([
+//   {
+//     key: "1",
+//     title: "Tab 1",
+//     content: "Content of Tab Panel 1"
+//   },
+//   {
+//     key: "2",
+//     title: "Tab 2",
+//     content: "Content of Tab Panel 2"
+//   },
+//   {
+//     key: "3",
+//     title: "Tab 3",
+//     content: "Content of Tab Panel 3"
+//   },
+//   {
+//     key: "4",
+//     title: "Tab 4",
+//     content: "Content of Tab Panel 4"
+//   }
+// ]);
+
+// const handleAdd = () => {
+//   const number = count++;
+//   data.value = data.value.concat({
+//     key: `${number}`,
+//     title: `New Tab ${number}`,
+//     content: `Content of New Tab Panel ${number}`
+//   });
+// };
+const handleDelete = (key: any) => {
+  console.log("关闭tags", key);
+
+  // data.value = data.value.filter(item => item.key !== key);
+};
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  height: 40px;
+  box-sizing: border-box;
+  border-bottom: $border-1 solid $color-border-2;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tabs_setting {
+    margin: 0 0 0 $margin;
+    .setting {
+      margin-right: $margin;
+      color: $color-text-2;
+    }
+  }
+}
+:deep(.arco-tabs-nav-tab) {
+  // 移入展示关闭icon
+  .arco-tabs-tab-closable {
+    svg {
+      width: 0px;
+      transition: all 0.2s;
+    }
+    &:hover {
+      svg {
+        width: 1em;
+      }
+    }
+  }
+  // 消除tab移入的背景色
+  &:hover .arco-tabs-tab-title::before {
+    background: unset;
+  }
+}
+// 消除tabs底部边线
+:deep(.arco-tabs-nav) {
+  &::before {
+    background: unset;
+  }
+}
+</style>
diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index 26f4ef3..9266f3e 100644
--- a/src/router/route-output.ts
+++ b/src/router/route-output.ts
@@ -39,7 +39,7 @@ export async function initSetRouter() {
 export function setCacheName(flattenedArray: any) {
   const store = useRoutesListStore(pinia);
   const cacheName = flattenedArray.map((item: any) => item.name);
-  store.setrouteNames(cacheName); // 缓存路由name
+  store.setRouteNames(cacheName); // 缓存路由name
   store.setRouteList(flattenedArray); // 缓存路由
 }
 
diff --git a/src/router/route.ts b/src/router/route.ts
index a5768e7..e71ffda 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -191,16 +191,6 @@ export const staticRoutes = [
  * @link 参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#netlify
  */
 export const notFoundAndNoPower = [
-  // 未找到页面的时候跳转该页面
-  {
-    path: "/:path(.*)*",
-    name: "notFound",
-    component: () => import("@/views/error/404.vue"),
-    meta: {
-      title: "notFound",
-      isHide: true
-    }
-  },
   {
     path: "/401",
     name: "noPower",
@@ -209,5 +199,14 @@ export const notFoundAndNoPower = [
       title: "notFound",
       isHide: true
     }
+  },
+  {
+    path: "/:path(.*)*", // 匹配任意路由，兜底，未找到页面的时候跳转该页面
+    name: "notFound",
+    component: () => import("@/views/error/404.vue"),
+    meta: {
+      title: "notFound",
+      isHide: true
+    }
   }
 ];
diff --git a/src/store/route-list.ts b/src/store/route-list.ts
index 35b8bee..2f89ceb 100644
--- a/src/store/route-list.ts
+++ b/src/store/route-list.ts
@@ -4,13 +4,14 @@ import { defineStore } from "pinia";
  * 路由列表
  * @methods setRouteTree  设置路由树
  * @methods setRoutesList 设置路由一维数据
- * @methods setrouteNames 设置路由名称集合
+ * @methods setRouteNames 设置路由名称集合
  */
 export const useRoutesListStore = defineStore("routeList", {
   state: (): any => ({
     routeTree: [], // 路由树
-    routeList: [], // 路由数据
-    routeNames: [] // 路由名称
+    routeList: [], // 路由数据-一维
+    routeNames: [], // 路由名称
+    tagsList: [] // 标签页数据
   }),
   actions: {
     setRouteTree(data: any) {
@@ -19,8 +20,14 @@ export const useRoutesListStore = defineStore("routeList", {
     setRouteList(data: any) {
       this.routeList = data;
     },
-    setrouteNames(data: Array<string>) {
+    setRouteNames(data: Array<string>) {
       this.routeNames = data;
+    },
+    setTagsList(data: Menu.MenuOptions) {
+      let isExist = this.tagsList.some((item: Menu.MenuOptions) => item.name === data.name);
+      if (!isExist) {
+        this.tagsList.push(data);
+      }
     }
   }
 });