From 1fbc5afe75516b3d6d08c7dbeb2d47642d7ce30d Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期一, 15 四月 2024 13:33:11 +0800
Subject: [PATCH] update 优化暗黑模式，增加vxe的暗黑模式
---
src/store/modules/permission.ts | 264 +++++++++++++++++++++++++++++-----------------------
1 files changed, 145 insertions(+), 119 deletions(-)
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 271518e..cf12a73 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -2,143 +2,169 @@
import router, { constantRoutes, dynamicRoutes } from '@/router';
import store from '@/store';
import { getRouters } from '@/api/menu';
+import auth from '@/plugins/auth';
+import { RouteRecordRaw } from 'vue-router';
+
import Layout from '@/layout/index.vue';
import ParentView from '@/components/ParentView/index.vue';
import InnerLink from '@/layout/components/InnerLink/index.vue';
-import auth from '@/plugins/auth';
-import { RouteOption } from 'vue-router';
+
// 鍖归厤views閲岄潰鎵�鏈夌殑.vue鏂囦欢
const modules = import.meta.glob('./../../views/**/*.vue');
-
export const usePermissionStore = defineStore('permission', () => {
- const routes = ref<RouteOption[]>([]);
- const addRoutes = ref<RouteOption[]>([]);
- const defaultRoutes = ref<RouteOption[]>([]);
- const topbarRouters = ref<RouteOption[]>([]);
- const sidebarRouters = ref<RouteOption[]>([]);
+ const routes = ref<RouteRecordRaw[]>([]);
+ const addRoutes = ref<RouteRecordRaw[]>([]);
+ const defaultRoutes = ref<RouteRecordRaw[]>([]);
+ const topbarRouters = ref<RouteRecordRaw[]>([]);
+ const sidebarRouters = ref<RouteRecordRaw[]>([]);
- const setRoutes = (newRoutes: RouteOption[]): void => {
- addRoutes.value = newRoutes;
- routes.value = constantRoutes.concat(newRoutes);
- };
- const setDefaultRoutes = (routes: RouteOption[]): void => {
- defaultRoutes.value = constantRoutes.concat(routes);
- };
- const setTopbarRoutes = (routes: RouteOption[]): void => {
- topbarRouters.value = routes;
- };
- const setSidebarRouters = (routes: RouteOption[]): void => {
- sidebarRouters.value = routes;
- };
- const generateRoutes = async (): Promise<RouteOption[]> => {
- const res = await getRouters();
- const { data } = res;
- const sdata = JSON.parse(JSON.stringify(data));
- const rdata = JSON.parse(JSON.stringify(data));
- const defaultData = JSON.parse(JSON.stringify(data));
- const sidebarRoutes = filterAsyncRouter(sdata);
- const rewriteRoutes = filterAsyncRouter(rdata, undefined, true);
- const defaultRoutes = filterAsyncRouter(defaultData);
- const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
- asyncRoutes.forEach((route) => {
- router.addRoute(route);
- });
- setRoutes(rewriteRoutes);
- setSidebarRouters(constantRoutes.concat(sidebarRoutes));
- setDefaultRoutes(sidebarRoutes);
- setTopbarRoutes(defaultRoutes);
- return new Promise<RouteOption[]>((resolve) => resolve(rewriteRoutes));
- };
+ const getRoutes = (): RouteRecordRaw[] => {
+ return routes.value;
+ };
+ const getSidebarRoutes = (): RouteRecordRaw[] => {
+ return sidebarRouters.value;
+ };
+ const getTopbarRoutes = (): RouteRecordRaw[] => {
+ return topbarRouters.value;
+ };
- /**
- * 閬嶅巻鍚庡彴浼犳潵鐨勮矾鐢卞瓧绗︿覆锛岃浆鎹负缁勪欢瀵硅薄
- * @param asyncRouterMap 鍚庡彴浼犳潵鐨勮矾鐢卞瓧绗︿覆
- * @param lastRouter 涓婁竴绾ц矾鐢�
- * @param type 鏄惁鏄噸鍐欒矾鐢�
- */
- const filterAsyncRouter = (asyncRouterMap: RouteOption[], lastRouter?: RouteOption, type = false): RouteOption[] => {
- return asyncRouterMap.filter((route) => {
- if (type && route.children) {
- route.children = filterChildren(route.children, undefined);
- }
- if (route.component) {
- // Layout ParentView 缁勪欢鐗规畩澶勭悊
- if (route.component === 'Layout') {
- route.component = Layout;
- } else if (route.component === 'ParentView') {
- route.component = ParentView;
- } else if (route.component === 'InnerLink') {
- route.component = InnerLink;
- } else {
- route.component = loadView(route.component);
- }
- }
- if (route.children != null && route.children && route.children.length) {
- route.children = filterAsyncRouter(route.children, route, type);
- } else {
- delete route.children;
- delete route.redirect;
- }
- return true;
- });
- };
- const filterChildren = (childrenMap: RouteOption[], lastRouter?: RouteOption): RouteOption[] => {
- let children: RouteOption[] = [];
- childrenMap.forEach((el) => {
- if (el.children && el.children.length) {
- if (el.component === 'ParentView' && !lastRouter) {
- el.children.forEach((c) => {
- c.path = el.path + '/' + c.path;
- if (c.children && c.children.length) {
- children = children.concat(filterChildren(c.children, c));
- return;
- }
- children.push(c);
- });
- return;
- }
- }
- if (lastRouter) {
- el.path = lastRouter.path + '/' + el.path;
- }
- children = children.concat(el);
- });
- return children;
- };
- return { routes, setRoutes, generateRoutes, setSidebarRouters, topbarRouters, sidebarRouters, defaultRoutes };
+ const setRoutes = (newRoutes: RouteRecordRaw[]): void => {
+ addRoutes.value = newRoutes;
+ routes.value = constantRoutes.concat(newRoutes);
+ };
+ const setDefaultRoutes = (routes: RouteRecordRaw[]): void => {
+ defaultRoutes.value = constantRoutes.concat(routes);
+ };
+ const setTopbarRoutes = (routes: RouteRecordRaw[]): void => {
+ topbarRouters.value = routes;
+ };
+ const setSidebarRouters = (routes: RouteRecordRaw[]): void => {
+ sidebarRouters.value = routes;
+ };
+ const generateRoutes = async (): Promise<RouteRecordRaw[]> => {
+ const res = await getRouters();
+ const { data } = res;
+ const sdata = JSON.parse(JSON.stringify(data));
+ const rdata = JSON.parse(JSON.stringify(data));
+ const defaultData = JSON.parse(JSON.stringify(data));
+ const sidebarRoutes = filterAsyncRouter(sdata);
+ const rewriteRoutes = filterAsyncRouter(rdata, undefined, true);
+ const defaultRoutes = filterAsyncRouter(defaultData);
+ const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
+ asyncRoutes.forEach((route) => {
+ router.addRoute(route);
+ });
+ setRoutes(rewriteRoutes);
+ setSidebarRouters(constantRoutes.concat(sidebarRoutes));
+ setDefaultRoutes(sidebarRoutes);
+ setTopbarRoutes(defaultRoutes);
+ return new Promise<RouteRecordRaw[]>((resolve) => resolve(rewriteRoutes));
+ };
+
+ /**
+ * 閬嶅巻鍚庡彴浼犳潵鐨勮矾鐢卞瓧绗︿覆锛岃浆鎹负缁勪欢瀵硅薄
+ * @param asyncRouterMap 鍚庡彴浼犳潵鐨勮矾鐢卞瓧绗︿覆
+ * @param lastRouter 涓婁竴绾ц矾鐢�
+ * @param type 鏄惁鏄噸鍐欒矾鐢�
+ */
+ const filterAsyncRouter = (asyncRouterMap: RouteRecordRaw[], lastRouter?: RouteRecordRaw, type = false): RouteRecordRaw[] => {
+ return asyncRouterMap.filter((route) => {
+ if (type && route.children) {
+ route.children = filterChildren(route.children, undefined);
+ }
+ // Layout ParentView 缁勪欢鐗规畩澶勭悊
+ if (route.component?.toString() === 'Layout') {
+ route.component = Layout;
+ } else if (route.component?.toString() === 'ParentView') {
+ route.component = ParentView;
+ } else if (route.component?.toString() === 'InnerLink') {
+ route.component = InnerLink;
+ } else {
+ route.component = loadView(route.component);
+ }
+ if (route.children != null && route.children && route.children.length) {
+ route.children = filterAsyncRouter(route.children, route, type);
+ } else {
+ delete route.children;
+ delete route.redirect;
+ }
+ return true;
+ });
+ };
+ const filterChildren = (childrenMap: RouteRecordRaw[], lastRouter?: RouteRecordRaw): RouteRecordRaw[] => {
+ let children: RouteRecordRaw[] = [];
+ childrenMap.forEach((el) => {
+ if (el.children && el.children.length) {
+ if (el.component?.toString() === 'ParentView' && !lastRouter) {
+ el.children.forEach((c) => {
+ c.path = el.path + '/' + c.path;
+ if (c.children && c.children.length) {
+ children = children.concat(filterChildren(c.children, c));
+ return;
+ }
+ children.push(c);
+ });
+ return;
+ }
+ }
+ if (lastRouter) {
+ el.path = lastRouter.path + '/' + el.path;
+ if (el.children && el.children.length) {
+ children = children.concat(filterChildren(el.children, el));
+ return;
+ }
+ }
+ children = children.concat(el);
+ });
+ return children;
+ };
+ return {
+ routes,
+ topbarRouters,
+ sidebarRouters,
+ defaultRoutes,
+
+ getRoutes,
+ getSidebarRoutes,
+ getTopbarRoutes,
+
+ setRoutes,
+ generateRoutes,
+ setSidebarRouters
+ };
});
// 鍔ㄦ�佽矾鐢遍亶鍘嗭紝楠岃瘉鏄惁鍏峰鏉冮檺
-export const filterDynamicRoutes = (routes: RouteOption[]) => {
- const res: RouteOption[] = [];
- routes.forEach((route) => {
- if (route.permissions) {
- if (auth.hasPermiOr(route.permissions)) {
- res.push(route);
- }
- } else if (route.roles) {
- if (auth.hasRoleOr(route.roles)) {
- res.push(route);
- }
- }
- });
- return res;
+export const filterDynamicRoutes = (routes: RouteRecordRaw[]) => {
+ const res: RouteRecordRaw[] = [];
+ routes.forEach((route) => {
+ if (route.permissions) {
+ if (auth.hasPermiOr(route.permissions)) {
+ res.push(route);
+ }
+ } else if (route.roles) {
+ if (auth.hasRoleOr(route.roles)) {
+ res.push(route);
+ }
+ }
+ });
+ return res;
};
export const loadView = (view: any) => {
- let res;
- for (const path in modules) {
- const dir = path.split('views/')[1].split('.vue')[0];
- if (dir === view) {
- res = () => modules[path]();
- }
- }
- return res;
+ let res;
+ for (const path in modules) {
+ const dir = path.split('views/')[1].split('.vue')[0];
+ if (dir === view) {
+ res = () => modules[path]();
+ }
+ }
+ return res;
};
// 闈瀞etup
export const usePermissionStoreHook = () => {
- return usePermissionStore(store);
+ return usePermissionStore(store);
};
export default usePermissionStore;
--
Gitblit v1.9.3