From 5efbfab47bdf693a23f473a3cf780a4725f3b2ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com> Date: Tue, 18 Apr 2023 23:16:13 +0800 Subject: [PATCH] =?UTF-8?q?style:=20:lipstick:=20=E4=BB=A3=E7=A2=BC?= =?UTF-8?q?=E7=B5=B1=E4=B8=80=E6=A0=BC=E5=BC=8F=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 7639f722803b80a3e1391f9652430d8e759e1a64 --- src/permission.ts | 22 ++++++------ src/router/index.ts | 54 ++++++++++++++-------------- src/settings.ts | 10 +++--- src/store/modules/app.ts | 36 +++++++++---------- src/store/modules/permission.ts | 26 +++++++------- src/store/modules/settings.ts | 24 ++++++------- src/store/modules/tagsView.ts | 62 ++++++++++++++++++--------------- 7 files changed, 119 insertions(+), 115 deletions(-) diff --git a/src/permission.ts b/src/permission.ts index 7dfc225e..6b1203e1 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -1,23 +1,23 @@ -import router from '@/router'; -import { useUserStoreHook } from '@/store/modules/user'; -import { usePermissionStoreHook } from '@/store/modules/permission'; +import router from "@/router"; +import { useUserStoreHook } from "@/store/modules/user"; +import { usePermissionStoreHook } from "@/store/modules/permission"; -import NProgress from 'nprogress'; -import 'nprogress/nprogress.css'; +import NProgress from "nprogress"; +import "nprogress/nprogress.css"; NProgress.configure({ showSpinner: false }); // 进度条 const permissionStore = usePermissionStoreHook(); // 白名单路由 -const whiteList = ['/login']; +const whiteList = ["/login"]; router.beforeEach(async (to, from, next) => { NProgress.start(); - const hasToken = localStorage.getItem('accessToken'); + const hasToken = localStorage.getItem("accessToken"); if (hasToken) { - if (to.path === '/login') { + if (to.path === "/login") { // 如果已登录，跳转首页 - next({ path: '/' }); + next({ path: "/" }); NProgress.done(); } else { const userStore = useUserStoreHook(); @@ -25,7 +25,7 @@ router.beforeEach(async (to, from, next) => { if (hasRoles) { // 未匹配到任何路由，跳转404 if (to.matched.length === 0) { - from.name ? next({ name: from.name }) : next('/404'); + from.name ? next({ name: from.name }) : next("/404"); } else { next(); } @@ -33,7 +33,7 @@ router.beforeEach(async (to, from, next) => { try { const { roles } = await userStore.getInfo(); const accessRoutes = await permissionStore.generateRoutes(roles); - accessRoutes.forEach(route => { + accessRoutes.forEach((route) => { router.addRoute(route); }); next({ ...to, replace: true }); diff --git a/src/router/index.ts b/src/router/index.ts index 90a8b724..55e86fa7 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,50 +1,50 @@ -import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; +import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; -export const Layout = () => import('@/layout/index.vue'); +export const Layout = () => import("@/layout/index.vue"); // 静态路由 export const constantRoutes: RouteRecordRaw[] = [ { - path: '/redirect', + path: "/redirect", component: Layout, meta: { hidden: true }, children: [ { - path: '/redirect/:path(.*)', - component: () => import('@/views/redirect/index.vue') - } - ] + path: "/redirect/:path(.*)", + component: () => import("@/views/redirect/index.vue"), + }, + ], }, { - path: '/login', - component: () => import('@/views/login/index.vue'), - meta: { hidden: true } + path: "/login", + component: () => import("@/views/login/index.vue"), + meta: { hidden: true }, }, { - path: '/', + path: "/", component: Layout, - redirect: '/dashboard', + redirect: "/dashboard", children: [ { - path: 'dashboard', - component: () => import('@/views/dashboard/index.vue'), - name: 'Dashboard', - meta: { title: 'dashboard', icon: 'homepage', affix: true } + path: "dashboard", + component: () => import("@/views/dashboard/index.vue"), + name: "Dashboard", + meta: { title: "dashboard", icon: "homepage", affix: true }, }, { - path: '401', - component: () => import('@/views/error-page/401.vue'), - meta: { hidden: true } + path: "401", + component: () => import("@/views/error-page/401.vue"), + meta: { hidden: true }, }, { - path: '404', - component: () => import('@/views/error-page/404.vue'), - meta: { hidden: true } - } - ] - } + path: "404", + component: () => import("@/views/error-page/404.vue"), + meta: { hidden: true }, + }, + ], + }, // 外部链接 /*{ @@ -106,14 +106,14 @@ const router = createRouter({ history: createWebHashHistory(), routes: constantRoutes as RouteRecordRaw[], // 刷新时，滚动条位置还原 - scrollBehavior: () => ({ left: 0, top: 0 }) + scrollBehavior: () => ({ left: 0, top: 0 }), }); /** * 重置路由 */ export function resetRouter() { - router.replace({ path: '/login' }); + router.replace({ path: "/login" }); location.reload(); } diff --git a/src/settings.ts b/src/settings.ts index 89758bee..e5ed4d78 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -42,21 +42,21 @@ interface DefaultSettings { } const defaultSettings: DefaultSettings = { - title: 'vue3-element-admin', + title: "vue3-element-admin", showSettings: true, tagsView: true, fixedHeader: false, sidebarLogo: true, - layout: 'left', + layout: "left", /** * 主题模式 * * dark:暗黑模式 * light: 明亮模式 */ - theme: 'dark', - size: 'default', // default |large |small - language: 'zh-cn' // zh-cn| en + theme: "dark", + size: "default", // default |large |small + language: "zh-cn", // zh-cn| en }; export default defaultSettings; diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index 2b0bfd2c..cd1c1860 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -1,29 +1,29 @@ -import { defineStore } from 'pinia'; -import { useStorage } from '@vueuse/core'; -import defaultSettings from '@/settings'; +import { defineStore } from "pinia"; +import { useStorage } from "@vueuse/core"; +import defaultSettings from "@/settings"; // 导入 Element Plus 中英文语言包 -import zhCn from 'element-plus/es/locale/lang/zh-cn'; -import en from 'element-plus/es/locale/lang/en'; +import zhCn from "element-plus/es/locale/lang/zh-cn"; +import en from "element-plus/es/locale/lang/en"; // setup -export const useAppStore = defineStore('app', () => { +export const useAppStore = defineStore("app", () => { // state - const device = useStorage('device', 'desktop'); - const size = useStorage('size', defaultSettings.size); - const language = useStorage('language', defaultSettings.language); + const device = useStorage("device", "desktop"); + const size = useStorage("size", defaultSettings.size); + const language = useStorage("language", defaultSettings.language); - const sidebarStatus = useStorage('sidebarStatus', 'closed'); + const sidebarStatus = useStorage("sidebarStatus", "closed"); const sidebar = reactive({ - opened: sidebarStatus.value !== 'closed', - withoutAnimation: false + opened: sidebarStatus.value !== "closed", + withoutAnimation: false, }); /** * 根据语言标识读取对应的语言包 */ const locale = computed(() => { - if (language?.value == 'en') { + if (language?.value == "en") { return en; } else { return zhCn; @@ -35,22 +35,22 @@ export const useAppStore = defineStore('app', () => { sidebar.opened = !sidebar.opened; sidebar.withoutAnimation = withoutAnimation; if (sidebar.opened) { - sidebarStatus.value = 'opened'; + sidebarStatus.value = "opened"; } else { - sidebarStatus.value = 'closed'; + sidebarStatus.value = "closed"; } } function closeSideBar(withoutAnimation: boolean) { sidebar.opened = false; sidebar.withoutAnimation = withoutAnimation; - sidebarStatus.value = 'closed'; + sidebarStatus.value = "closed"; } function openSideBar(withoutAnimation: boolean) { sidebar.opened = true; sidebar.withoutAnimation = withoutAnimation; - sidebarStatus.value = 'opened'; + sidebarStatus.value = "opened"; } function toggleDevice(val: string) { @@ -80,6 +80,6 @@ export const useAppStore = defineStore('app', () => { changeLanguage, toggleSidebar, closeSideBar, - openSideBar + openSideBar, }; }); diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 4be0519b..8a69655d 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -1,11 +1,11 @@ -import { RouteRecordRaw } from 'vue-router'; -import { defineStore } from 'pinia'; -import { constantRoutes } from '@/router'; -import { store } from '@/store'; -import { listRoutes } from '@/api/menu'; +import { RouteRecordRaw } from "vue-router"; +import { defineStore } from "pinia"; +import { constantRoutes } from "@/router"; +import { store } from "@/store"; +import { listRoutes } from "@/api/menu"; -const modules = import.meta.glob('../../views/**/**.vue'); -const Layout = () => import('@/layout/index.vue'); +const modules = import.meta.glob("../../views/**/**.vue"); +const Layout = () => import("@/layout/index.vue"); /** * Use meta.role to determine if the current user has permission @@ -17,10 +17,10 @@ const Layout = () => import('@/layout/index.vue'); const hasPermission = (roles: string[], route: RouteRecordRaw) => { if (route.meta && route.meta.roles) { // 角色【超级管理员】拥有所有权限，忽略校验 - if (roles.includes('ROOT')) { + if (roles.includes("ROOT")) { return true; } - return roles.some(role => { + return roles.some((role) => { if (route.meta?.roles !== undefined) { return (route.meta.roles as string[]).includes(role); } @@ -39,12 +39,12 @@ const hasPermission = (roles: string[], route: RouteRecordRaw) => { const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => { const asyncRoutes: RouteRecordRaw[] = []; - routes.forEach(route => { + routes.forEach((route) => { const tmpRoute = { ...route }; // ES6扩展运算符复制新对象 // 判断用户(角色)是否有该路由的访问权限 if (hasPermission(roles, tmpRoute)) { - if (tmpRoute.component?.toString() == 'Layout') { + if (tmpRoute.component?.toString() == "Layout") { tmpRoute.component = Layout; console.log(); } else { @@ -68,7 +68,7 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => { }; // setup -export const usePermissionStore = defineStore('permission', () => { +export const usePermissionStore = defineStore("permission", () => { // state const routes = ref([]); @@ -92,7 +92,7 @@ export const usePermissionStore = defineStore('permission', () => { setRoutes(accessedRoutes); resolve(accessedRoutes); }) - .catch(error => { + .catch((error) => { reject(error); }); }); diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts index f87aa415..908359c3 100644 --- a/src/store/modules/settings.ts +++ b/src/store/modules/settings.ts @@ -1,34 +1,34 @@ -import { defineStore } from 'pinia'; -import defaultSettings from '@/settings'; -import { useStorage } from '@vueuse/core'; +import { defineStore } from "pinia"; +import defaultSettings from "@/settings"; +import { useStorage } from "@vueuse/core"; -export const useSettingsStore = defineStore('setting', () => { +export const useSettingsStore = defineStore("setting", () => { // state - const tagsView = useStorage('tagsView', defaultSettings.tagsView); + const tagsView = useStorage("tagsView", defaultSettings.tagsView); const showSettings = ref(defaultSettings.showSettings); const fixedHeader = ref(defaultSettings.fixedHeader); const sidebarLogo = ref(defaultSettings.sidebarLogo); - const layout = useStorage('layout', defaultSettings.layout); + const layout = useStorage("layout", defaultSettings.layout); // actions function changeSetting(param: { key: string; value: any }) { const { key, value } = param; switch (key) { - case 'showSettings': + case "showSettings": showSettings.value = value; break; - case 'fixedHeader': + case "fixedHeader": fixedHeader.value = value; break; - case 'tagsView': + case "tagsView": tagsView.value = value; break; - case 'sidevarLogo': + case "sidevarLogo": sidebarLogo.value = value; break; - case 'layout': + case "layout": layout.value = value; break; default: @@ -42,6 +42,6 @@ export const useSettingsStore = defineStore('setting', () => { fixedHeader, sidebarLogo, layout, - changeSetting + changeSetting, }; }); diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts index f8a69a23..93c09a56 100644 --- a/src/store/modules/tagsView.ts +++ b/src/store/modules/tagsView.ts @@ -1,30 +1,30 @@ -import { defineStore } from 'pinia'; -import { ref } from 'vue'; -import { RouteLocationNormalized } from 'vue-router'; +import { defineStore } from "pinia"; +import { ref } from "vue"; +import { RouteLocationNormalized } from "vue-router"; export interface TagView extends Partial { title?: string; } // setup -export const useTagsViewStore = defineStore('tagsView', () => { +export const useTagsViewStore = defineStore("tagsView", () => { // state const visitedViews = ref([]); const cachedViews = ref([]); // actions function addVisitedView(view: TagView) { - if (visitedViews.value.some(v => v.path === view.path)) return; + if (visitedViews.value.some((v) => v.path === view.path)) return; if (view.meta && view.meta.affix) { visitedViews.value.unshift( Object.assign({}, view, { - title: view.meta?.title || 'no-name' + title: view.meta?.title || "no-name", }) ); } else { visitedViews.value.push( Object.assign({}, view, { - title: view.meta?.title || 'no-name' + title: view.meta?.title || "no-name", }) ); } @@ -39,7 +39,7 @@ export const useTagsViewStore = defineStore('tagsView', () => { } function delVisitedView(view: TagView) { - return new Promise(resolve => { + return new Promise((resolve) => { for (const [i, v] of visitedViews.value.entries()) { if (v.path === view.path) { visitedViews.value.splice(i, 1); @@ -52,7 +52,7 @@ export const useTagsViewStore = defineStore('tagsView', () => { function delCachedView(view: TagView) { const viewName = view.name as string; - return new Promise(resolve => { + return new Promise((resolve) => { const index = cachedViews.value.indexOf(viewName); index > -1 && cachedViews.value.splice(index, 1); resolve([...cachedViews.value]); @@ -60,8 +60,8 @@ export const useTagsViewStore = defineStore('tagsView', () => { } function delOtherVisitedViews(view: TagView) { - return new Promise(resolve => { - visitedViews.value = visitedViews.value.filter(v => { + return new Promise((resolve) => { + visitedViews.value = visitedViews.value.filter((v) => { return v.meta?.affix || v.path === view.path; }); resolve([...visitedViews.value]); @@ -70,7 +70,7 @@ export const useTagsViewStore = defineStore('tagsView', () => { function delOtherCachedViews(view: TagView) { const viewName = view.name as string; - return new Promise(resolve => { + return new Promise((resolve) => { const index = cachedViews.value.indexOf(viewName); if (index > -1) { cachedViews.value = cachedViews.value.slice(index, index + 1); @@ -97,30 +97,32 @@ export const useTagsViewStore = defineStore('tagsView', () => { } function delView(view: TagView) { - return new Promise(resolve => { + return new Promise((resolve) => { delVisitedView(view); delCachedView(view); resolve({ visitedViews: [...visitedViews.value], - cachedViews: [...cachedViews.value] + cachedViews: [...cachedViews.value], }); }); } function delOtherViews(view: TagView) { - return new Promise(resolve => { + return new Promise((resolve) => { delOtherVisitedViews(view); delOtherCachedViews(view); resolve({ visitedViews: [...visitedViews.value], - cachedViews: [...cachedViews.value] + cachedViews: [...cachedViews.value], }); }); } function delLeftViews(view: TagView) { - return new Promise(resolve => { - const currIndex = visitedViews.value.findIndex(v => v.path === view.path); + return new Promise((resolve) => { + const currIndex = visitedViews.value.findIndex( + (v) => v.path === view.path + ); if (currIndex === -1) { return; } @@ -137,13 +139,15 @@ export const useTagsViewStore = defineStore('tagsView', () => { return false; }); resolve({ - visitedViews: [...visitedViews.value] + visitedViews: [...visitedViews.value], }); }); } function delRightViews(view: TagView) { - return new Promise(resolve => { - const currIndex = visitedViews.value.findIndex(v => v.path === view.path); + return new Promise((resolve) => { + const currIndex = visitedViews.value.findIndex( + (v) => v.path === view.path + ); if (currIndex === -1) { return; } @@ -160,33 +164,33 @@ export const useTagsViewStore = defineStore('tagsView', () => { return false; }); resolve({ - visitedViews: [...visitedViews.value] + visitedViews: [...visitedViews.value], }); }); } function delAllViews() { - return new Promise(resolve => { - const affixTags = visitedViews.value.filter(tag => tag.meta?.affix); + return new Promise((resolve) => { + const affixTags = visitedViews.value.filter((tag) => tag.meta?.affix); visitedViews.value = affixTags; cachedViews.value = []; resolve({ visitedViews: [...visitedViews.value], - cachedViews: [...cachedViews.value] + cachedViews: [...cachedViews.value], }); }); } function delAllVisitedViews() { - return new Promise(resolve => { - const affixTags = visitedViews.value.filter(tag => tag.meta?.affix); + return new Promise((resolve) => { + const affixTags = visitedViews.value.filter((tag) => tag.meta?.affix); visitedViews.value = affixTags; resolve([...visitedViews.value]); }); } function delAllCachedViews() { - return new Promise(resolve => { + return new Promise((resolve) => { cachedViews.value = []; resolve([...cachedViews.value]); }); @@ -209,6 +213,6 @@ export const useTagsViewStore = defineStore('tagsView', () => { delRightViews, delAllViews, delAllVisitedViews, - delAllCachedViews + delAllCachedViews, }; });