From fef3426276637c22b2f0cbc87ee999467ad6b1a5 Mon Sep 17 00:00:00 2001
From: Sophea Vann <msophea99@gmail.com>
Date: Thu, 29 Sep 2022 10:48:30 +0700
Subject: [PATCH] improve tags

---
 src/components/tags.vue | 231 +++++++++++++++++--------------
 src/router/index.ts     | 299 ++++++++++++++++++++++------------------
 src/store/tags.ts       | 104 +++++++-------
 3 files changed, 348 insertions(+), 286 deletions(-)

diff --git a/src/components/tags.vue b/src/components/tags.vue
index 79a4887..eda02aa 100644
--- a/src/components/tags.vue
+++ b/src/components/tags.vue
@@ -1,91 +1,110 @@
 <template>
-	<div class="tags" v-if="tags.show">
-		<ul>
-			<li
-				class="tags-li"
-				v-for="(item, index) in tags.list"
-				:class="{ active: isActive(item.path) }"
-				:key="index"
-			>
-				<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link>
-				<el-icon @click="closeTags(index)"><Close /></el-icon>
-			</li>
-		</ul>
-		<div class="tags-close-box">
-			<el-dropdown @command="handleTags">
-				<el-button size="small" type="primary">
-					标签选项
-					<el-icon class="el-icon--right">
-						<arrow-down />
-					</el-icon>
-				</el-button>
-				<template #dropdown>
-					<el-dropdown-menu size="small">
-						<el-dropdown-item command="other">关闭其他</el-dropdown-item>
-						<el-dropdown-item command="all">关闭所有</el-dropdown-item>
-					</el-dropdown-menu>
-				</template>
-			</el-dropdown>
-		</div>
-	</div>
+  <div class="tags" v-if="tags.show">
+    <ul>
+      <li
+        class="tags-li"
+        v-for="(item, index) in tags.list"
+        :class="{ active: isActive(item.path) }"
+        :key="index"
+      >
+        <router-link :to="item.path" class="tags-li-title">{{
+          item.title
+        }}</router-link>
+        <el-icon v-if="item.title != '系统首页'" @click="closeTags(index)"
+          ><Close
+        /></el-icon>
+      </li>
+    </ul>
+    <div class="tags-close-box">
+      <el-dropdown @command="handleTags">
+        <el-button size="small" type="primary">
+          标签选项
+          <el-icon class="el-icon--right">
+            <arrow-down />
+          </el-icon>
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu size="small">
+            <el-dropdown-item command="other">关闭其他</el-dropdown-item>
+            <el-dropdown-item command="all">关闭所有</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { useTagsStore } from '../store/tags';
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import { useTagsStore } from "../store/tags";
+import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
 const router = useRouter();
 const isActive = (path: string) => {
-	return path === route.fullPath;
+  return path === route.fullPath;
 };
 
 const tags = useTagsStore();
 // 关闭单个标签
 const closeTags = (index: number) => {
-	const delItem = tags.list[index];
-	tags.delTagsItem(index);
-	const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
-	if (item) {
-		delItem.path === route.fullPath && router.push(item.path);
-	} else {
-		router.push('/');
-	}
+  const delItem = tags.list[index];
+  tags.delTagsItem(index);
+  const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
+  if (item) {
+    delItem.path === route.fullPath && router.push(item.path);
+  } else {
+    router.push("/");
+  }
 };
 
 // 设置标签
 const setTags = (route: any) => {
-	const isExist = tags.list.some(item => {
-		return item.path === route.fullPath;
-	});
-	if (!isExist) {
-		if (tags.list.length >= 8) tags.delTagsItem(0);
-		tags.setTagsItem({
-			name: route.name,
-			title: route.meta.title,
-			path: route.fullPath
-		});
-	}
+  const isExist = tags.list.some((item) => {
+    return item.path === route.fullPath;
+  });
+  const isDashboard = tags.list.some((item) => item.path === "/dashboard");
+  if (!isExist) {
+    if (!isDashboard) {
+      if (route.fullPath !== "/dashboard") {
+        tags.setTagsItem({
+          name: "dashboard",
+          title: "系统首页",
+          path: "/dashboard",
+        });
+      }
+    }
+    if (tags.list.length >= 8) tags.delTagsItem(1);
+    tags.setTagsItem({
+      name: route.name,
+      title: route.meta.title,
+      path: route.fullPath,
+    });
+  }
 };
 setTags(route);
-onBeforeRouteUpdate(to => {
-	setTags(to);
+onBeforeRouteUpdate((to) => {
+  setTags(to);
 });
 
 // 关闭全部标签
 const closeAll = () => {
-	tags.clearTags();
-	router.push('/');
+  tags.clearTags();
+  tags.setTagsItem({
+    name: "dashboard",
+    title: "系统首页",
+    path: "/dashboard",
+  });
+  router.push("/");
 };
 // 关闭其他标签
 const closeOther = () => {
-	const curItem = tags.list.filter(item => {
-		return item.path === route.fullPath;
-	});
-	tags.closeTagsOther(curItem);
+  const curItem = tags.list.filter((item) => {
+    return item.path === route.fullPath;
+  });
+  tags.closeTagsOther(curItem);
 };
 const handleTags = (command: string) => {
-	command === 'other' ? closeOther() : closeAll();
+  command === "other" ? closeOther() : closeAll();
 };
 
 // 关闭当前页面的标签页
@@ -97,72 +116,72 @@ const handleTags = (command: string) => {
 
 <style>
 .tags {
-	position: relative;
-	height: 30px;
-	overflow: hidden;
-	background: #fff;
-	padding-right: 120px;
-	box-shadow: 0 5px 10px #ddd;
+  position: relative;
+  height: 30px;
+  overflow: hidden;
+  background: #fff;
+  padding-right: 120px;
+  box-shadow: 0 5px 10px #ddd;
 }
 
 .tags ul {
-	box-sizing: border-box;
-	width: 100%;
-	height: 100%;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
 }
 
 .tags-li {
-	display: flex;
-	align-items: center;
-	float: left;
-	margin: 3px 5px 2px 3px;
-	border-radius: 3px;
-	font-size: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	height: 23px;
-	border: 1px solid #e9eaec;
-	background: #fff;
-	padding: 0 5px 0 12px;
-	color: #666;
-	-webkit-transition: all 0.3s ease-in;
-	-moz-transition: all 0.3s ease-in;
-	transition: all 0.3s ease-in;
+  display: flex;
+  align-items: center;
+  float: left;
+  margin: 3px 5px 2px 3px;
+  border-radius: 3px;
+  font-size: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  height: 23px;
+  border: 1px solid #e9eaec;
+  background: #fff;
+  padding: 0 5px 0 12px;
+  color: #666;
+  -webkit-transition: all 0.3s ease-in;
+  -moz-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
 }
 
 .tags-li:not(.active):hover {
-	background: #f8f8f8;
+  background: #f8f8f8;
 }
 
 .tags-li.active {
-	color: #fff;
+  color: #fff;
 }
 
 .tags-li-title {
-	float: left;
-	max-width: 80px;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	margin-right: 5px;
-	color: #666;
+  float: left;
+  max-width: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 5px;
+  color: #666;
 }
 
 .tags-li.active .tags-li-title {
-	color: #fff;
+  color: #fff;
 }
 
 .tags-close-box {
-	position: absolute;
-	right: 0;
-	top: 0;
-	box-sizing: border-box;
-	padding-top: 1px;
-	text-align: center;
-	width: 110px;
-	height: 30px;
-	background: #fff;
-	box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
-	z-index: 10;
+  position: absolute;
+  right: 0;
+  top: 0;
+  box-sizing: border-box;
+  padding-top: 1px;
+  text-align: center;
+  width: 110px;
+  height: 30px;
+  background: #fff;
+  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
+  z-index: 10;
 }
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 3e06500..8093299 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,147 +1,182 @@
-import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
-import { usePermissStore } from '../store/permiss'
+import {
+  createRouter,
+  //   createWebHashHistory,
+  RouteRecordRaw,
+  createWebHistory,
+} from "vue-router";
+import { usePermissStore } from "../store/permiss";
 import Home from "../views/home.vue";
 
-const routes:RouteRecordRaw[] = [
-    {
-        path: '/',
-        redirect: '/dashboard'
-    }, {
-        path: "/",
-        name: "Home",
-        component: Home,
-        children: [
-            {
-                path: "/dashboard",
-                name: "dashboard",
-                meta: {
-                    title: '系统首页',
-                    permiss: '1'
-                },
-                component: () => import ( /* webpackChunkName: "dashboard" */ "../views/dashboard.vue")
-            }, {
-                path: "/table",
-                name: "basetable",
-                meta: {
-                    title: '表格',
-                    permiss: '2'
-                },
-                component: () => import ( /* webpackChunkName: "table" */ "../views/table.vue")
-            }, {
-                path: "/charts",
-                name: "basecharts",
-                meta: {
-                    title: '图表',
-                    permiss: '11'
-                },
-                component: () => import ( /* webpackChunkName: "charts" */ "../views/charts.vue")
-            }, {
-                path: "/form",
-                name: "baseform",
-                meta: {
-                    title: '表单',
-                    permiss: '5'
-                },
-                component: () => import ( /* webpackChunkName: "form" */ "../views/form.vue")
-            }, {
-                path: "/tabs",
-                name: "tabs",
-                meta: {
-                    title: 'tab标签',
-                    permiss: '3'
-                },
-                component: () => import ( /* webpackChunkName: "tabs" */ "../views/tabs.vue")
-            }, {
-                path: "/donate",
-                name: "donate",
-                meta: {
-                    title: '鼓励作者',
-                    permiss: '14'
-                },
-                component: () => import ( /* webpackChunkName: "donate" */ "../views/donate.vue")
-            }, {
-                path: "/permission",
-                name: "permission",
-                meta: {
-                    title: '权限管理',
-                    permiss: '13'
-                },
-                component: () => import ( /* webpackChunkName: "permission" */ "../views/permission.vue")
-            }, {
-                path: "/upload",
-                name: "upload",
-                meta: {
-                    title: '上传插件',
-                    permiss: '6'
-                },
-                component: () => import ( /* webpackChunkName: "upload" */ "../views/upload.vue")
-            }, {
-                path: "/icon",
-                name: "icon",
-                meta: {
-                    title: '自定义图标',
-                    permiss: '10'
-                },
-                component: () => import ( /* webpackChunkName: "icon" */ "../views/icon.vue")
-            },  {
-                path: '/user',
-                name: 'user',
-                meta: {
-                    title: '个人中心'
-                },
-                component: () => import (/* webpackChunkName: "user" */ '../views/user.vue')
-            }, {
-                path: '/editor',
-                name: 'editor',
-                meta: {
-                    title: '富文本编辑器',
-                    permiss: '8'
-                },
-                component: () => import (/* webpackChunkName: "editor" */ '../views/editor.vue')
-            }, {
-                path: '/markdown',
-                name: 'markdown',
-                meta: {
-                    title: 'markdown编辑器',
-                    permiss: '9'
-                },
-                component: () => import (/* webpackChunkName: "markdown" */ '../views/markdown.vue')
-            }
-        ]
-    }, {
-        path: "/login",
-        name: "Login",
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    redirect: "/dashboard",
+  },
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+    children: [
+      {
+        path: "/dashboard",
+        name: "dashboard",
         meta: {
-            title: '登录'
+          title: "系统首页",
+          permiss: "1",
         },
-        component: () => import ( /* webpackChunkName: "login" */ "../views/login.vue")
-    }, {
-        path: '/403',
-        name: '403',
+        component: () =>
+          import(/* webpackChunkName: "dashboard" */ "../views/dashboard.vue"),
+      },
+      {
+        path: "/table",
+        name: "basetable",
         meta: {
-            title: '没有权限'
+          title: "表格",
+          permiss: "2",
         },
-        component: () => import (/* webpackChunkName: "403" */ '../views/403.vue')
+        component: () =>
+          import(/* webpackChunkName: "table" */ "../views/table.vue"),
+      },
+      {
+        path: "/charts",
+        name: "basecharts",
+        meta: {
+          title: "图表",
+          permiss: "11",
+        },
+        component: () =>
+          import(/* webpackChunkName: "charts" */ "../views/charts.vue"),
+      },
+      {
+        path: "/form",
+        name: "baseform",
+        meta: {
+          title: "表单",
+          permiss: "5",
+        },
+        component: () =>
+          import(/* webpackChunkName: "form" */ "../views/form.vue"),
+      },
+      {
+        path: "/tabs",
+        name: "tabs",
+        meta: {
+          title: "tab标签",
+          permiss: "3",
+        },
+        component: () =>
+          import(/* webpackChunkName: "tabs" */ "../views/tabs.vue"),
+      },
+      {
+        path: "/donate",
+        name: "donate",
+        meta: {
+          title: "鼓励作者",
+          permiss: "14",
+        },
+        component: () =>
+          import(/* webpackChunkName: "donate" */ "../views/donate.vue"),
+      },
+      {
+        path: "/permission",
+        name: "permission",
+        meta: {
+          title: "权限管理",
+          permiss: "13",
+        },
+        component: () =>
+          import(
+            /* webpackChunkName: "permission" */ "../views/permission.vue"
+          ),
+      },
+      {
+        path: "/upload",
+        name: "upload",
+        meta: {
+          title: "上传插件",
+          permiss: "6",
+        },
+        component: () =>
+          import(/* webpackChunkName: "upload" */ "../views/upload.vue"),
+      },
+      {
+        path: "/icon",
+        name: "icon",
+        meta: {
+          title: "自定义图标",
+          permiss: "10",
+        },
+        component: () =>
+          import(/* webpackChunkName: "icon" */ "../views/icon.vue"),
+      },
+      {
+        path: "/user",
+        name: "user",
+        meta: {
+          title: "个人中心",
+        },
+        component: () =>
+          import(/* webpackChunkName: "user" */ "../views/user.vue"),
+      },
+      {
+        path: "/editor",
+        name: "editor",
+        meta: {
+          title: "富文本编辑器",
+          permiss: "8",
+        },
+        component: () =>
+          import(/* webpackChunkName: "editor" */ "../views/editor.vue"),
+      },
+      {
+        path: "/markdown",
+        name: "markdown",
+        meta: {
+          title: "markdown编辑器",
+          permiss: "9",
+        },
+        component: () =>
+          import(/* webpackChunkName: "markdown" */ "../views/markdown.vue"),
+      },
+    ],
+  },
+  {
+    path: "/login",
+    name: "Login",
+    meta: {
+      title: "登录",
     },
+    component: () =>
+      import(/* webpackChunkName: "login" */ "../views/login.vue"),
+  },
+  {
+    path: "/403",
+    name: "403",
+    meta: {
+      title: "没有权限",
+    },
+    component: () => import(/* webpackChunkName: "403" */ "../views/403.vue"),
+  },
 ];
 
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes
+  // history: createWebHashHistory(),
+  history: createWebHistory(),
+  routes,
 });
 
 router.beforeEach((to, from, next) => {
-    document.title = `${to.meta.title} | vue-manage-system`;
-    const role = localStorage.getItem('ms_username');
-    const permiss = usePermissStore();
-    if (!role && to.path !== '/login') {
-        next('/login');
-    } else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
-        // 如果没有权限，则进入403
-        next('/403');
-    } else {
-        next();
-    }
+  document.title = `${to.meta.title} | vue-manage-system`;
+  const role = localStorage.getItem("ms_username");
+  const permiss = usePermissStore();
+  if (!role && to.path !== "/login") {
+    next("/login");
+  } else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
+    // 如果没有权限，则进入403
+    next("/403");
+  } else {
+    next();
+  }
 });
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/store/tags.ts b/src/store/tags.ts
index 7f8ff18..a288ff7 100644
--- a/src/store/tags.ts
+++ b/src/store/tags.ts
@@ -1,53 +1,61 @@
-import { defineStore } from 'pinia';
+import { defineStore } from "pinia";
 
 interface ListItem {
-	name: string;
-	path: string;
-	title: string;
+  name: string;
+  path: string;
+  title: string;
 }
 
-export const useTagsStore = defineStore('tags', {
-	state: () => {
-		return {
-			list: <ListItem[]>[]
-		};
-	},
-	getters: {
-		show: state => {
-			return state.list.length > 0;
-		},
-		nameList: state => {
-			return state.list.map(item => item.name);
-		}
-	},
-	actions: {
-		delTagsItem(index: number) {
-			this.list.splice(index, 1);
-		},
-		setTagsItem(data: ListItem) {
-			this.list.push(data);
-		},
-		clearTags() {
-			this.list = [];
-		},
-		closeTagsOther(data: ListItem[]) {
-			this.list = data;
-		},
-		closeCurrentTag(data: any) {
-			for (let i = 0, len = this.list.length; i < len; i++) {
-				const item = this.list[i];
-				if (item.path === data.$route.fullPath) {
-					if (i < len - 1) {
-						data.$router.push(this.list[i + 1].path);
-					} else if (i > 0) {
-						data.$router.push(this.list[i - 1].path);
-					} else {
-						data.$router.push('/');
-					}
-					this.list.splice(i, 1);
-					break;
-				}
-			}
-		}
-	}
+export const useTagsStore = defineStore("tags", {
+  state: () => {
+    return {
+      list: <ListItem[]>[],
+    };
+  },
+  getters: {
+    show: (state) => {
+      return state.list.length > 0;
+    },
+    nameList: (state) => {
+      return state.list.map((item) => item.name);
+    },
+  },
+  actions: {
+    delTagsItem(index: number) {
+      this.list.splice(index, 1);
+    },
+    setTagsItem(data: ListItem) {
+      this.list.push(data);
+    },
+    clearTags() {
+      this.list = [];
+    },
+    closeTagsOther(data: ListItem[]) {
+      this.list = data;
+      const isExist = data.find((ele) => ele.path === "/dashboard");
+      if (!isExist) {
+        this.list.unshift({
+          name: "dashboard",
+          title: "系统首页",
+          path: "/dashboard",
+        });
+      }
+    },
+    closeCurrentTag(data: any) {
+      for (let i = 0, len = this.list.length; i < len; i++) {
+        const item = this.list[i];
+        if (item.path === data.$route.fullPath) {
+          if (i < len - 1) {
+            data.$router.push(this.list[i + 1].path);
+          } else if (i > 0) {
+            data.$router.push(this.list[i - 1].path);
+          } else {
+            data.$router.push("/");
+          }
+          this.list.splice(i, 1);
+          break;
+        }
+      }
+    },
+  },
 });