Merge branch 'master' into master

This commit is contained in:
Ray Hao
2025-02-19 13:43:33 +08:00
committed by GitHub
78 changed files with 1906 additions and 2145 deletions

View File

@@ -8,22 +8,24 @@ const modules = import.meta.glob("../../views/**/**.vue");
const Layout = () => import("@/layout/index.vue");
export const usePermissionStore = defineStore("permission", () => {
// 所有路由,包括静态和动态路由
// 所有路由,包括静态路由和动态路由
const routes = ref<RouteRecordRaw[]>([]);
// 混合模式左侧菜单
const mixLeftMenus = ref<RouteRecordRaw[]>([]);
// 路由是否加载
// 混合模式左侧菜单路由
const mixedLayoutLeftRoutes = ref<RouteRecordRaw[]>([]);
// 路由是否加载完成
const isRoutesLoaded = ref(false);
/**
* 生成动态路由
* 获取后台动态路由数据,解析并注册到全局路由
*
* @returns Promise<RouteRecordRaw[]> 解析后的动态路由列表
*/
function generateRoutes() {
return new Promise<RouteRecordRaw[]>((resolve, reject) => {
MenuAPI.getRoutes()
.then((data) => {
const dynamicRoutes = transformRoutes(data);
routes.value = constantRoutes.concat(dynamicRoutes);
const dynamicRoutes = parseDynamicRoutes(data);
routes.value = [...constantRoutes, ...dynamicRoutes];
isRoutesLoaded.value = true;
resolve(dynamicRoutes);
})
@@ -34,14 +36,14 @@ export const usePermissionStore = defineStore("permission", () => {
}
/**
* 混合模式菜单下根据顶部菜单路径设置左侧菜单
* 根据父菜单路径设置混合模式左侧菜单
*
* @param topMenuPath - 顶部菜单路径
* @param parentPath 菜单路径,用于查找对应的菜单项
*/
const setMixLeftMenus = (topMenuPath: string) => {
const matchedItem = routes.value.find((item) => item.path === topMenuPath);
const setMixedLayoutLeftRoutes = (parentPath: string) => {
const matchedItem = routes.value.find((item) => item.path === parentPath);
if (matchedItem && matchedItem.children) {
mixLeftMenus.value = matchedItem.children;
mixedLayoutLeftRoutes.value = matchedItem.children;
}
};
@@ -49,59 +51,63 @@ export const usePermissionStore = defineStore("permission", () => {
* 重置路由
*/
const resetRouter = () => {
// 删除动态路由,保留静态路由
// 从 router 实例中移除动态路由
routes.value.forEach((route) => {
if (route.name && !constantRoutes.find((r) => r.name === route.name)) {
// 从 router 实例中移除动态路由
router.removeRoute(route.name);
}
});
// 清空本地存储的路由和菜单数据
routes.value = [];
mixLeftMenus.value = [];
mixedLayoutLeftRoutes.value = [];
isRoutesLoaded.value = false;
};
return {
routes,
generateRoutes,
mixLeftMenus,
setMixLeftMenus,
mixedLayoutLeftRoutes,
isRoutesLoaded,
generateRoutes,
setMixedLayoutLeftRoutes,
resetRouter,
};
});
/**
* 转换路由数据为组件
* 解析后端返回的路由数据并转换为 Vue Router 兼容的路由配置
*
* 1. 遍历 `rawRoutes` 并转换为 `RouteRecordRaw` 格式。
* 2. 若 `component` 为 `"Layout"`,则替换为 `Layout` 组件。
* 3. 若 `component` 为字符串路径,则动态加载对应的 Vue 组件,找不到则默认 `404.vue`。
* 4. 递归解析 `children`,确保子路由也被正确转换。
*
* @param rawRoutes 后端返回的原始路由数据
* @returns 解析后的路由配置数组
*/
const transformRoutes = (routes: RouteVO[]) => {
const asyncRoutes: RouteRecordRaw[] = [];
routes.forEach((route) => {
const tmpRoute = { ...route } as RouteRecordRaw;
// 顶级目录,替换为 Layout 组件
if (tmpRoute.component?.toString() == "Layout") {
tmpRoute.component = Layout;
} else {
// 其他菜单,根据组件路径动态加载组件
const component = modules[`../../views/${tmpRoute.component}.vue`];
if (component) {
tmpRoute.component = component;
} else {
tmpRoute.component = modules["../../views/error-page/404.vue"];
}
const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
const parsedRoutes: RouteRecordRaw[] = [];
rawRoutes.forEach((route) => {
const normalizedRoute = { ...route } as RouteRecordRaw;
// 处理组件路径
normalizedRoute.component =
normalizedRoute.component?.toString() === "Layout"
? Layout
: modules[`../../views/${normalizedRoute.component}.vue`] ||
modules["../../views/error-page/404.vue"];
// 递归解析子路由
if (normalizedRoute.children) {
normalizedRoute.children = parseDynamicRoutes(route.children);
}
if (tmpRoute.children) {
tmpRoute.children = transformRoutes(route.children);
}
asyncRoutes.push(tmpRoute);
parsedRoutes.push(normalizedRoute);
});
return asyncRoutes;
return parsedRoutes;
};
/**
* 在组件外使用 Pinia store 实例 @see https://pinia.vuejs.org/core-concepts/outside-component-usage.html
*/

View File

@@ -5,7 +5,7 @@ import { useDictStoreHook } from "@/store/modules/dict";
import AuthAPI, { type LoginFormData } from "@/api/auth";
import UserAPI, { type UserInfo } from "@/api/system/user";
import { setToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth";
import { setAccessToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth";
export const useUserStore = defineStore("user", () => {
const userInfo = useStorage<UserInfo>("userInfo", {} as UserInfo);
@@ -20,8 +20,8 @@ export const useUserStore = defineStore("user", () => {
return new Promise<void>((resolve, reject) => {
AuthAPI.login(LoginFormData)
.then((data) => {
const { tokenType, accessToken, refreshToken } = data;
setToken(tokenType + " " + accessToken); // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
const { accessToken, refreshToken } = data;
setAccessToken(accessToken); // eyJhbGciOiJIUzI1NiJ9.xxx.xxx
setRefreshToken(refreshToken);
resolve();
})
@@ -77,8 +77,8 @@ export const useUserStore = defineStore("user", () => {
return new Promise<void>((resolve, reject) => {
AuthAPI.refreshToken(refreshToken)
.then((data) => {
const { tokenType, accessToken, refreshToken } = data;
setToken(tokenType + " " + accessToken);
const { accessToken, refreshToken } = data;
setAccessToken(accessToken);
setRefreshToken(refreshToken);
resolve();
})