-
-
+ return tags
+}
+const initTags = () => {
+ let routesNew = routes.value
+ let affixTag = (affixTags.value = filterAffixTags(routesNew))
+ for (const tag of affixTag) {
+ if (tag.name) {
+ TagsViewStore.addVisitedView(tag)
+ }
+ }
+}
+onMounted(()=>{
+ initTags()
+ addTags()
+})
+watch(route, () => {
+ addTags()
+})
+let tabIndex = 2
+const activeTabsValue = computed({
+ get: () => {
+ return TagsViewStore.activeTabsValue;
+ },
+ set: val => {
+ TagsViewStore.setTabsMenuValue(val);
+ }
+});
+function toLastView(activeTabPath) {
+ let index = visitedViews.value.findIndex(item=>item.path===activeTabPath)
+ const nextTab = visitedViews.value[index + 1] || visitedViews.value[index - 1];
+ if (!nextTab) return;
+ router.push(nextTab.path);
+ TagsViewStore.addVisitedView(nextTab)
+}
+// Tab Click
+const tabClick = (tabItem: TabsPaneContext) => {
+ let path = tabItem.props.name as string;
+ router.push(path);
+};
+const isActive = (path) => {
+ return path === route.path
+}
+const removeTab = async (activeTabPath: string) => {
+ if (isActive(activeTabPath)) {
+ toLastView(activeTabPath)
+ }
+ await TagsViewStore.delView(activeTabPath)
+}
+
diff --git a/src/layout/index.vue b/src/layout/index.vue
index fccf469..064a9bd 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -8,7 +8,7 @@
hideSliderLayout: mode === 'horizontal',
}"
>
-
+
diff --git a/src/permission.ts b/src/permission.ts
index e779905..b2bc702 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -17,7 +17,7 @@ router.beforeEach(async(to, from, next) => {
if(typeof(to.meta.title) === 'string'){
document.title = to.meta.title ||'vue-admin-perfect'
}
- const UserStore = useUserStore();
+ const UserStore = useUserStore();
// 确定用户是否已登录过，存在Token
const hasToken = UserStore.token
if (hasToken) {
@@ -46,7 +46,6 @@ router.beforeEach(async(to, from, next) => {
next()
} else {
next(`/login?redirect=${to.path}`)
-
}
}
})
diff --git a/src/router/index.ts b/src/router/index.ts
index 9bb436f..60238a5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,12 +1,10 @@
import { createRouter, createWebHistory, RouteRecordRaw,createWebHashHistory,Router } from 'vue-router'
import Layout from "@/layout/index.vue";
-
// 扩展继承属性
interface extendRoute {
hidden?:boolean
}
-
-// 引入组件
+//
import tableRouter from './modules/table'
import dataScreenRouter from './modules/dataScreen'
import errorRouter from './modules/error'
@@ -21,22 +19,21 @@ import formRouter from './modules/from'
import zipRoutes from './modules/zip'
import clipboardTable from './modules/clipboard'
-
// 异步组件
export const asyncRoutes = [
- dataScreenRouter,
- chartsRouter,
- tableRouter,
- formRouter,
- chatRouter,
- othersRouter,
- nestedRouter,
- excelRouter,
- zipRoutes,
- errorRouter,
- externalLink,
- clipboardTable,
- systemRouter,
+ ...dataScreenRouter,
+ ...chartsRouter,
+ ...tableRouter,
+ ...formRouter,
+ ...chatRouter,
+ ...othersRouter,
+ ...nestedRouter,
+ ...excelRouter,
+ ...zipRoutes,
+ ...errorRouter,
+ ...externalLink,
+ ...clipboardTable,
+ ...systemRouter,
{
path: '/:pathMatch(.*)',
redirect: '/error/404'
@@ -82,9 +79,6 @@ export const constantRoutes: Array = [
},
]
-
-
-
const router = createRouter({
// history: createWebHistory(process.env.BASE_URL), // history
history: createWebHashHistory(), // hash
diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
index 0452245..b6c8797 100644
--- a/src/router/modules/charts.ts
+++ b/src/router/modules/charts.ts
@@ -2,7 +2,7 @@
import Layout from "@/layout/index.vue";
-const chartsRouter = {
+const chartsRouter = [{
path: '/charts',
component: Layout,
redirect: '/charts/migration',
@@ -31,13 +31,13 @@ const chartsRouter = {
name: 'charts-complex',
meta: { title: '复杂图表', roles:['other'] , icon: 'MenuIcon'}
},
- {
- path: 'animation',
- component: () => import('@/views/charts/animation.vue'),
- name: 'charts-animation',
- meta: { title: '动画', roles:['other'],icon: 'MenuIcon' }
- },
+ // {
+ // path: 'animation',
+ // component: () => import('@/views/charts/animation.vue'),
+ // name: 'charts-animation',
+ // meta: { title: '动画', roles:['other'],icon: 'MenuIcon' }
+ // },
]
-}
+}]
export default chartsRouter
diff --git a/src/router/modules/chat.ts b/src/router/modules/chat.ts
index f9bccbb..3ea3fe2 100644
--- a/src/router/modules/chat.ts
+++ b/src/router/modules/chat.ts
@@ -2,7 +2,7 @@
import Layout from "@/layout/index.vue";
-const chartsRouter = {
+const chartsRouter = [{
path: '/chat',
component: Layout,
redirect: '/charts/index',
@@ -19,6 +19,6 @@ const chartsRouter = {
meta: { title: '聊天框', icon: 'chat-square' }
},
]
-}
+}]
export default chartsRouter
diff --git a/src/router/modules/clipboard.ts b/src/router/modules/clipboard.ts
index 9edf65a..76eb60e 100644
--- a/src/router/modules/clipboard.ts
+++ b/src/router/modules/clipboard.ts
@@ -1,6 +1,6 @@
import Layout from '@/layout/index.vue'
-const clipboardTable = {
+const clipboardTable = [{
path: '/clipboard',
component: Layout,
redirect: '/clipboard/index',
@@ -19,5 +19,5 @@ const clipboardTable = {
},
]
-}
+}]
export default clipboardTable
diff --git a/src/router/modules/dataScreen.ts b/src/router/modules/dataScreen.ts
index f35ed1f..23a7bc3 100644
--- a/src/router/modules/dataScreen.ts
+++ b/src/router/modules/dataScreen.ts
@@ -1,4 +1,4 @@
-const dataScreenRouter= {
+const dataScreenRouter= [{
path: "/dataScreen",
name: "dataScreen",
meta: {
@@ -6,7 +6,7 @@ const dataScreenRouter= {
icon:'Histogram'
},
component: () => import("@/views/dataScreen/index.vue")
- }
+ }]
;
export default dataScreenRouter;
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index 645461b..4771f7a 100644
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -4,7 +4,7 @@
import Layout from "@/layout/index.vue";
-const errorRouter = {
+const errorRouter = [{
path: '/error',
component: Layout,
redirect: '/error/404',
@@ -27,6 +27,6 @@ const errorRouter = {
meta: { title: '401', icon: 'MenuIcon'}
},
]
-}
+}]
export default errorRouter
diff --git a/src/router/modules/excel.ts b/src/router/modules/excel.ts
index d5f9808..a6c5f1b 100644
--- a/src/router/modules/excel.ts
+++ b/src/router/modules/excel.ts
@@ -4,7 +4,7 @@
import Layout from "@/layout/index.vue";
-const excelRouter = {
+const excelRouter = [{
path: '/excel',
component: Layout,
redirect: '/excel/export-excel',
@@ -39,6 +39,6 @@ const excelRouter = {
meta: { title: '自定义样式导出 Excel', icon: 'MenuIcon' }
},
]
-}
+}]
export default excelRouter
diff --git a/src/router/modules/externalLink.ts b/src/router/modules/externalLink.ts
index 379b014..e655fb0 100644
--- a/src/router/modules/externalLink.ts
+++ b/src/router/modules/externalLink.ts
@@ -2,7 +2,7 @@
import Layout from "@/layout/index.vue";
-const externalLink = {
+const externalLink = [{
path: '/external-link',
component: Layout,
redirect: 'noRedirect',
@@ -14,6 +14,6 @@ const externalLink = {
meta: { title: 'Github地址', icon: 'link' }
},
]
-}
+}]
export default externalLink
diff --git a/src/router/modules/from.ts b/src/router/modules/from.ts
index 293d575..f8929ad 100644
--- a/src/router/modules/from.ts
+++ b/src/router/modules/from.ts
@@ -3,7 +3,7 @@
import Layout from "@/layout/index.vue";
-const formRouter = {
+const formRouter = [{
path: '/form',
component: Layout,
redirect: '/form/validateForm',
@@ -27,6 +27,6 @@ const formRouter = {
meta: { title: '可收缩 Form', keepAlive: true , icon: 'MenuIcon'}
},
]
-}
+}]
export default formRouter
diff --git a/src/router/modules/nested.ts b/src/router/modules/nested.ts
index 37bfdca..d558da2 100644
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -4,7 +4,7 @@
import Layout from "@/layout/index.vue";
-const nestedRouter = {
+const nestedRouter = [{
path: '/nested',
component: Layout,
redirect: '/form/menu1',
@@ -64,6 +64,6 @@ const nestedRouter = {
},
]
-}
+}]
export default nestedRouter
diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts
index d99c2d6..bd39345 100644
--- a/src/router/modules/other.ts
+++ b/src/router/modules/other.ts
@@ -2,7 +2,7 @@
import Layout from '@/layout/index.vue'
-const othersRouter = {
+const othersRouter = [{
path: '/other',
component: Layout,
redirect: '/other/editor',
@@ -85,6 +85,6 @@ const othersRouter = {
meta: { title: '数字自增长', icon: 'MenuIcon' }
}
]
-}
+}]
export default othersRouter
diff --git a/src/router/modules/system.ts b/src/router/modules/system.ts
index ed777ef..4e67e10 100644
--- a/src/router/modules/system.ts
+++ b/src/router/modules/system.ts
@@ -2,7 +2,7 @@
import Layout from '@/layout/index.vue'
-const systemRouter = {
+const systemRouter = [{
path: '/system',
component: Layout,
redirect: '/system/page',
@@ -37,6 +37,6 @@ const systemRouter = {
meta: { title: '菜单管理', roles: ['other'] , icon: 'MenuIcon'}
},
]
-}
+}]
export default systemRouter
diff --git a/src/router/modules/table.ts b/src/router/modules/table.ts
index def470e..a0cfc80 100644
--- a/src/router/modules/table.ts
+++ b/src/router/modules/table.ts
@@ -3,7 +3,7 @@
import Layout from "@/layout/index.vue";
-const tableRouter = {
+const tableRouter = [{
path: '/table',
component: Layout,
redirect: '/table/comprehensive',
@@ -38,6 +38,6 @@ const tableRouter = {
// meta: { title: '虚拟表格', keepAlive: true , icon: 'MenuIcon'}
// },
]
-}
+}]
export default tableRouter
diff --git a/src/router/modules/zip.ts b/src/router/modules/zip.ts
index 044dcac..41f1786 100644
--- a/src/router/modules/zip.ts
+++ b/src/router/modules/zip.ts
@@ -1,6 +1,6 @@
import Layout from '@/layout/index.vue'
-const zipRoutes = {
+const zipRoutes = [{
path: '/zip',
component: Layout,
isShow:true,
@@ -21,7 +21,7 @@ const zipRoutes = {
},
]
-}
+}]
export default zipRoutes
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 79c6d78..5c1a1df 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,5 +1,5 @@
import {defineStore} from 'pinia'
-import { asyncRoutes, constantRoutes } from '@/router/index'
+import { asyncRoutes, constantRoutes,routerArray } from '@/router/index'
import {hasPermission,filterAsyncRoutes} from "@/utils/routers"
import {filterKeepAlive} from "../../utils/routers";
export const usePermissionStore = defineStore({
@@ -24,7 +24,6 @@ export const usePermissionStore = defineStore({
// 生成路由
generateRoutes(roles){
return new Promise(resolve => {
- this.getCacheRoutes()
// 在这判断是否有权限，哪些角色拥有哪些权限
let accessedRoutes
if (roles&&roles.length&&!roles.includes('admin')) {
@@ -45,6 +44,7 @@ export const usePermissionStore = defineStore({
},
getCacheRoutes(){
this.cacheRoutes = filterKeepAlive(asyncRoutes)
+ return this.cacheRoutes
}
},
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index be72bbd..e9d3729 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -1,11 +1,13 @@
import {defineStore} from 'pinia'
-
+import { useRouter } from "vue-router";
+const router = useRouter()
export const useTagsViewStore = defineStore({
// id: 必须的，在所有 Store 中唯一
id:'tagsViewState',
// state: 返回对象的函数
state: ()=>({
+ activeTabsValue:'/home',
visitedViews:[],
cachedViews:[],
@@ -13,6 +15,9 @@ export const useTagsViewStore = defineStore({
getters: {},
// 可以同步 也可以异步
actions:{
+ setTabsMenuValue(val){
+ this.activeTabsValue = val
+ },
addView(view){
this.addVisitedView(view)
},
@@ -23,7 +28,9 @@ export const useTagsViewStore = defineStore({
})
},
addVisitedView(view){
+ this.setTabsMenuValue(view.path);
if (this.visitedViews.some(v => v.path === view.path)) return
+
this.visitedViews.push(
Object.assign({}, view, {
title: view.meta.title || 'no-name'
@@ -32,11 +39,12 @@ export const useTagsViewStore = defineStore({
if (view.meta.keepAlive) {
this.cachedViews.push(view.name)
}
+
},
- delView(view){
+ delView(activeTabPath){
return new Promise(resolve => {
- this.delVisitedView(view)
- this.delCachedView(view)
+ this.delVisitedView(activeTabPath)
+ this.delCachedView(activeTabPath)
resolve({
visitedViews: [...this.visitedViews],
cachedViews: [...this.cachedViews]
@@ -44,13 +52,13 @@ export const useTagsViewStore = defineStore({
})
},
- delVisitedView(view){
+ delVisitedView(path){
return new Promise(resolve => {
this.visitedViews = this.visitedViews.filter(v=>{
- return (v.path !== view.path||v.meta.affix)
+ return (v.path !== path||v.meta.affix)
})
this.cachedViews = this.cachedViews.filter(v=>{
- return (v.path !== view.path||v.meta.affix)
+ return (v.path !== path||v.meta.affix)
})
resolve([...this.visitedViews])
})
@@ -74,6 +82,10 @@ export const useTagsViewStore = defineStore({
resolve([...this.visitedViews])
})
},
+ async goHome() {
+ router.push('/home');
+ this.activeTabsValue = '/home';
+ },
updateVisitedView(view){
for (let v of this.visitedViews) {
if (v.path === view.path) {
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index 0192f9a..0000000
--- a/src/style.css
+++ /dev/null
@@ -1,81 +0,0 @@
-:root {
- font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
- font-size: 16px;
- line-height: 24px;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-text-size-adjust: 100%;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
- padding: 2em;
-}
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 00eab2e..73a1720 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -47,46 +47,5 @@
.breadcrumb-enter-from,
.breadcrumb-leave-active {
opacity: 0;
- transform: translateX(30px) skewX(-50deg);
-}
-/* 面包屑动画 方案2 */
-//.breadcrumb-enter-active,
-//.breadcrumb-leave-active {
-// transition: all 0.2s ease;
-//}
-//.breadcrumb-enter-from,
-//.breadcrumb-leave-active {
-// opacity: 0;
-// transform: translateX(10px);
-//}
-//.breadcrumb-leave-active {
-// position: absolute;
-// z-index: -1;
-//}
-.breadcrumb-enter-active,
-.breadcrumb-leave-active {
- transition: all 0.2s ease;
-}
-.breadcrumb-enter-from,
-.breadcrumb-leave-active {
- opacity: 0;
- transform: translateX(10px);
-}
-.breadcrumb-leave-active {
- position: absolute;
- z-index: -1;
-}
-
-
-.fade-transform-leave-active,
-.fade-transform-enter-active {
- transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), border 0s;
-}
-
-.fade-transform-enter-from {
- opacity: 0;
-}
-
-.fade-transform-leave-to {
- opacity: 0;
+ transform: translateX(10px) skewX(-10deg);
}
diff --git a/src/views/charts/animation.vue b/src/views/charts/animation.vue
index 734a6bc..cb73468 100644
--- a/src/views/charts/animation.vue
+++ b/src/views/charts/animation.vue
@@ -34,7 +34,7 @@