feat: 优化登录页背景和卡片样式
This commit is contained in:
Ray.Hao
@@ -6,8 +6,8 @@ VITE_APP_TITLE=vue3-element-admin
|
||||
VITE_APP_BASE_API=/dev-api
|
||||
|
||||
# 接口地址
|
||||
# VITE_APP_API_URL=https://api.youlai.tech # 线上
|
||||
VITE_APP_API_URL=https://api.youlai.tech/v2 # 线上(多租户)
|
||||
VITE_APP_API_URL=https://api.youlai.tech # 线上
|
||||
# VITE_APP_API_URL=https://api.youlai.tech/v2 # 线上(多租户)
|
||||
# VITE_APP_API_URL=http://localhost:8000 # 本地
|
||||
|
||||
|
||||
|
||||
@@ -190,7 +190,6 @@ export default defineMock([
|
||||
alwaysShow: false,
|
||||
externalUrl:
|
||||
"https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5",
|
||||
openMode: 2,
|
||||
params: null,
|
||||
},
|
||||
},
|
||||
@@ -211,7 +210,7 @@ export default defineMock([
|
||||
children: [
|
||||
{
|
||||
path: "internal-doc",
|
||||
component: null,
|
||||
component: "iframe",
|
||||
name: "InternalDoc",
|
||||
meta: {
|
||||
title: "平台文档(内嵌)",
|
||||
@@ -221,7 +220,6 @@ export default defineMock([
|
||||
keepAlive: true,
|
||||
alwaysShow: false,
|
||||
externalUrl: "https://juejin.cn/post/7228990409909108793",
|
||||
openMode: 2,
|
||||
params: null,
|
||||
},
|
||||
},
|
||||
@@ -235,7 +233,6 @@ export default defineMock([
|
||||
hidden: false,
|
||||
alwaysShow: false,
|
||||
externalUrl: "https://juejin.cn/post/7228990409909108793",
|
||||
openMode: 1,
|
||||
params: null,
|
||||
},
|
||||
},
|
||||
@@ -1255,10 +1252,9 @@ export default defineMock([
|
||||
type: "E",
|
||||
routeName: "Apifox",
|
||||
routePath: "apifox",
|
||||
component: null,
|
||||
component: "iframe",
|
||||
externalUrl:
|
||||
"https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5",
|
||||
openMode: 2,
|
||||
sort: 1,
|
||||
visible: 1,
|
||||
icon: "api",
|
||||
@@ -1291,9 +1287,8 @@ export default defineMock([
|
||||
type: "E",
|
||||
routeName: "InternalDoc",
|
||||
routePath: "internal-doc",
|
||||
component: null,
|
||||
component: "iframe",
|
||||
externalUrl: "https://juejin.cn/post/7228990409909108793",
|
||||
openMode: 2,
|
||||
sort: 1,
|
||||
visible: 1,
|
||||
icon: "document",
|
||||
@@ -1312,7 +1307,6 @@ export default defineMock([
|
||||
routePath: "",
|
||||
component: null,
|
||||
externalUrl: "https://juejin.cn/post/7228990409909108793",
|
||||
openMode: 1,
|
||||
sort: 2,
|
||||
visible: 1,
|
||||
icon: "link",
|
||||
@@ -2246,9 +2240,8 @@ const menuMap: Record<string, any> = {
|
||||
type: "E",
|
||||
routeName: "Apifox",
|
||||
routePath: "apifox",
|
||||
component: null,
|
||||
component: "iframe",
|
||||
externalUrl: "https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5",
|
||||
openMode: 2,
|
||||
perm: null,
|
||||
visible: 1,
|
||||
sort: 1,
|
||||
@@ -2265,9 +2258,8 @@ const menuMap: Record<string, any> = {
|
||||
type: "E",
|
||||
routeName: "InternalDoc",
|
||||
routePath: "internal-doc",
|
||||
component: null,
|
||||
component: "iframe",
|
||||
externalUrl: "https://juejin.cn/post/7228990409909108793",
|
||||
openMode: 2,
|
||||
perm: null,
|
||||
visible: 1,
|
||||
sort: 1,
|
||||
@@ -2286,7 +2278,6 @@ const menuMap: Record<string, any> = {
|
||||
routePath: "",
|
||||
component: null,
|
||||
externalUrl: "https://juejin.cn/post/7228990409909108793",
|
||||
openMode: 1,
|
||||
perm: null,
|
||||
visible: 1,
|
||||
sort: 2,
|
||||
|
||||
84
package.json
84
package.json
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "vue3-element-admin",
|
||||
"description": "Vue3 + Vite + TypeScript + Element-Plus 的后台管理模板，vue-element-admin 的 Vue3 版本",
|
||||
"version": "4.7.0",
|
||||
"version": "4.7.1",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -48,75 +48,75 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@vueuse/core": "^14.2.1",
|
||||
"@wangeditor-next/editor": "^5.6.49",
|
||||
"@vueuse/core": "^14.3.0",
|
||||
"@wangeditor-next/editor": "^5.7.12",
|
||||
"@wangeditor-next/editor-for-vue": "^5.1.14",
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^1.13.6",
|
||||
"codemirror": "^5.65.16",
|
||||
"axios": "^1.18.0",
|
||||
"codemirror": "^5.65.21",
|
||||
"codemirror-editor-vue3": "^2.8.0",
|
||||
"echarts": "^6.0.0",
|
||||
"element-plus": "^2.13.6",
|
||||
"echarts": "^6.1.0",
|
||||
"element-plus": "^2.14.2",
|
||||
"exceljs": "^4.4.0",
|
||||
"lodash-es": "^4.17.23",
|
||||
"lodash-es": "^4.18.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"path-to-regexp": "^8.3.0",
|
||||
"path-to-regexp": "^8.4.2",
|
||||
"pinia": "^3.0.4",
|
||||
"qs": "^6.15.0",
|
||||
"qs": "^6.15.2",
|
||||
"sortablejs": "^1.15.7",
|
||||
"vue": "^3.5.30",
|
||||
"vue": "^3.5.38",
|
||||
"vue-draggable-plus": "^0.6.1",
|
||||
"vue-i18n": "^11.3.0",
|
||||
"vue-router": "^5.0.3",
|
||||
"vue-i18n": "^11.4.6",
|
||||
"vue-router": "^5.1.0",
|
||||
"vxe-table": "~4.6.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^20.5.0",
|
||||
"@commitlint/config-conventional": "^20.5.0",
|
||||
"@commitlint/cli": "^20.5.3",
|
||||
"@commitlint/config-conventional": "^20.5.3",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@iconify/utils": "^3.1.0",
|
||||
"@iconify/utils": "^3.1.3",
|
||||
"@types/codemirror": "^5.60.17",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/node": "^25.5.0",
|
||||
"@types/node": "^26.0.0",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/path-browserify": "^1.0.3",
|
||||
"@types/qs": "^6.15.0",
|
||||
"@types/qs": "^6.15.1",
|
||||
"@types/sortablejs": "^1.15.9",
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"autoprefixer": "^10.4.27",
|
||||
"commitizen": "^4.3.1",
|
||||
"cz-git": "^1.12.0",
|
||||
"eslint": "^10.0.3",
|
||||
"@vitejs/plugin-vue": "^6.0.7",
|
||||
"autoprefixer": "^10.5.0",
|
||||
"commitizen": "^4.3.2",
|
||||
"cz-git": "^1.13.1",
|
||||
"eslint": "^10.5.0",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-prettier": "^5.5.5",
|
||||
"eslint-plugin-vue": "^10.8.0",
|
||||
"globals": "^17.4.0",
|
||||
"eslint-plugin-prettier": "^5.5.6",
|
||||
"eslint-plugin-vue": "^10.9.2",
|
||||
"globals": "^17.6.0",
|
||||
"husky": "^9.1.7",
|
||||
"jiti": "^2.6.1",
|
||||
"lint-staged": "^17.0.3",
|
||||
"postcss": "^8.5.8",
|
||||
"jiti": "^2.7.0",
|
||||
"lint-staged": "^17.0.8",
|
||||
"postcss": "^8.5.15",
|
||||
"postcss-html": "^1.8.1",
|
||||
"postcss-scss": "^4.0.9",
|
||||
"prettier": "^3.8.1",
|
||||
"sass": "^1.98.0",
|
||||
"stylelint": "^17.4.0",
|
||||
"prettier": "^3.8.4",
|
||||
"sass": "^1.101.0",
|
||||
"stylelint": "^17.13.0",
|
||||
"stylelint-config-html": "^1.1.0",
|
||||
"stylelint-config-recess-order": "^7.6.1",
|
||||
"stylelint-config-recess-order": "^7.7.0",
|
||||
"stylelint-config-recommended": "^18.0.0",
|
||||
"stylelint-config-recommended-scss": "^17.0.0",
|
||||
"stylelint-config-recommended-scss": "^17.0.1",
|
||||
"stylelint-config-recommended-vue": "^1.6.1",
|
||||
"stylelint-prettier": "^5.0.3",
|
||||
"terser": "^5.46.0",
|
||||
"terser": "^5.48.0",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.57.2",
|
||||
"unocss": "^66.6.6",
|
||||
"typescript-eslint": "^8.61.1",
|
||||
"unocss": "^66.7.2",
|
||||
"unplugin-auto-import": "^21.0.0",
|
||||
"unplugin-vue-components": "^32.0.0",
|
||||
"vite": "^8.0.0",
|
||||
"vite-plugin-mock-dev-server": "^2.1.1",
|
||||
"vue-eslint-parser": "^10.4.0",
|
||||
"vue-tsc": "^3.2.5"
|
||||
"unplugin-vue-components": "^32.1.0",
|
||||
"vite": "^8.0.16",
|
||||
"vite-plugin-mock-dev-server": "^2.4.1",
|
||||
"vue-eslint-parser": "^10.4.1",
|
||||
"vue-tsc": "^3.3.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
|
||||
841
pnpm-lock.yaml
generated
841
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -32,8 +32,6 @@ export interface MenuItem {
|
||||
path?: string;
|
||||
/** 按钮权限标识 */
|
||||
perm?: string;
|
||||
/** 外链打开方式(1-新标签页 2-系统内嵌) */
|
||||
openMode?: number;
|
||||
/** 跳转路径 */
|
||||
redirect?: string;
|
||||
/** 是否始终显示 */
|
||||
@@ -84,8 +82,6 @@ export interface MenuForm {
|
||||
scope?: number;
|
||||
/** 按钮权限标识 */
|
||||
perm?: string;
|
||||
/** 外链打开方式(1-新标签页 2-系统内嵌) */
|
||||
openMode?: number;
|
||||
/** 路由参数（用于表单编辑 params） */
|
||||
params?: { key?: string; value?: string }[];
|
||||
/** 是否始终显示（仅对目录生效） */
|
||||
@@ -126,14 +122,10 @@ export interface Meta {
|
||||
icon?: string;
|
||||
/** 【菜单】是否开启页面缓存 */
|
||||
keepAlive?: boolean;
|
||||
/** 菜单类型 */
|
||||
type?: string;
|
||||
/** 路由参数 */
|
||||
params?: Record<string, unknown>;
|
||||
/** 外链地址 */
|
||||
externalUrl?: string;
|
||||
/** 外链打开方式(1-新标签页 2-系统内嵌) */
|
||||
openMode?: number;
|
||||
/** 角色集合 */
|
||||
roles?: string[];
|
||||
/** 路由title */
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ExternalOpenModeEnum } from "@/enums";
|
||||
import { isExternal } from "@/utils/index";
|
||||
|
||||
defineOptions({
|
||||
@@ -17,7 +16,6 @@ interface AppLinkTo {
|
||||
path: string;
|
||||
meta?: {
|
||||
externalUrl?: string;
|
||||
openMode?: number;
|
||||
type?: string;
|
||||
};
|
||||
query?: Record<string, unknown> | null;
|
||||
@@ -27,20 +25,16 @@ const props = defineProps<{
|
||||
to: AppLinkTo;
|
||||
}>();
|
||||
|
||||
const externalUrl = computed(() => {
|
||||
return isExternal(props.to.path || "") ? props.to.path : "";
|
||||
});
|
||||
|
||||
const isExternalLink = computed(() => {
|
||||
return Boolean(externalUrl.value);
|
||||
});
|
||||
|
||||
const linkType = computed(() => (isExternalLink.value ? "a" : "router-link"));
|
||||
|
||||
const externalUrl = computed(() => {
|
||||
if (props.to.meta?.openMode === ExternalOpenModeEnum.NEW_TAB && props.to.meta.externalUrl) {
|
||||
return props.to.meta.externalUrl;
|
||||
}
|
||||
|
||||
return isExternal(props.to.path || "") ? props.to.path : "";
|
||||
});
|
||||
|
||||
const linkProps = (to: AppLinkTo) => {
|
||||
if (isExternalLink.value) {
|
||||
return {
|
||||
|
||||
@@ -15,14 +15,6 @@ export enum MenuTypeEnum {
|
||||
BUTTON = "B", // 按钮
|
||||
}
|
||||
|
||||
/**
|
||||
* 外链打开方式枚举
|
||||
*/
|
||||
export enum ExternalOpenModeEnum {
|
||||
NEW_TAB = 1, // 新标签页
|
||||
EMBEDDED = 2, // 系统内嵌
|
||||
}
|
||||
|
||||
/**
|
||||
* 菜单范围枚举
|
||||
*/
|
||||
|
||||
@@ -12,7 +12,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
children: [
|
||||
{
|
||||
path: "/redirect/:path(.*)",
|
||||
component: () => import("@/views/common/redirect.vue"),
|
||||
component: () => import("@/views/redirect.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -4,78 +4,71 @@ import { store } from "@/stores";
|
||||
import router from "@/router";
|
||||
import { useUserStoreHook } from "@/stores/user";
|
||||
import { isExternal } from "@/utils";
|
||||
import { ExternalOpenModeEnum, MenuTypeEnum } from "@/enums";
|
||||
|
||||
import MenuAPI from "@/api/system/menu";
|
||||
import type { RouteItem } from "@/api/system/menu";
|
||||
const modules = import.meta.glob("../views/**/**.vue");
|
||||
const modules = import.meta.glob("../views/**/*.vue");
|
||||
const Layout = () => import("../layouts/index.vue");
|
||||
const LAYOUT_COMPONENT = "Layout";
|
||||
const IFRAME_COMPONENT = "common/iframe";
|
||||
|
||||
export const usePermissionStore = defineStore("permission", () => {
|
||||
// 所有路由（静态路由 + 动态路由）
|
||||
const routes = ref<RouteRecordRaw[]>([]);
|
||||
// 混合布局的左侧菜单路由
|
||||
const mixLayoutSideMenus = ref<RouteRecordRaw[]>([]);
|
||||
// 动态路由是否已生成
|
||||
const isRouteGenerated = ref(false);
|
||||
|
||||
/** 生成动态路由 */
|
||||
/**
|
||||
* 生成动态路由
|
||||
*/
|
||||
async function generateRoutes(): Promise<RouteRecordRaw[]> {
|
||||
try {
|
||||
const data = await MenuAPI.getRoutes(); // 获取当前登录人的菜单路由
|
||||
const menuRoutes = transformRoutes(data);
|
||||
const dynamicRoutes = filterRouterRoutes(menuRoutes);
|
||||
const routeData = await MenuAPI.getRoutes();
|
||||
const menuRoutes = transformRoutes(routeData);
|
||||
const registerRoutes = filterRoutes(menuRoutes);
|
||||
|
||||
routes.value = [...constantRoutes, ...menuRoutes];
|
||||
isRouteGenerated.value = true;
|
||||
|
||||
return dynamicRoutes;
|
||||
return registerRoutes;
|
||||
} catch (error) {
|
||||
// 路由生成失败，重置状态
|
||||
isRouteGenerated.value = false;
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/** 设置混合布局左侧菜单 */
|
||||
/**
|
||||
* 设置混合布局左侧菜单
|
||||
*/
|
||||
const setMixLayoutSideMenus = (parentPath: string) => {
|
||||
const parentMenu = routes.value.find((item: RouteRecordRaw) => item.path === parentPath);
|
||||
mixLayoutSideMenus.value = parentMenu?.children || [];
|
||||
};
|
||||
|
||||
/** 重置路由状态 */
|
||||
/**
|
||||
* 重置路由状态
|
||||
*/
|
||||
const resetRouter = () => {
|
||||
// 移除动态添加的路由
|
||||
const constantRouteNames = new Set(constantRoutes.map((route) => route.name).filter(Boolean));
|
||||
const constantNames = new Set(constantRoutes.map((route) => route.name).filter(Boolean));
|
||||
routes.value.forEach((route: RouteRecordRaw) => {
|
||||
if (route.name && !constantRouteNames.has(route.name)) {
|
||||
if (route.name && !constantNames.has(route.name)) {
|
||||
router.removeRoute(route.name);
|
||||
}
|
||||
});
|
||||
|
||||
// 重置所有状态
|
||||
routes.value = [...constantRoutes];
|
||||
mixLayoutSideMenus.value = [];
|
||||
isRouteGenerated.value = false;
|
||||
};
|
||||
|
||||
let reloadPromise: Promise<RouteRecordRaw[]> | null = null;
|
||||
let pendingReload: Promise<RouteRecordRaw[]> | null = null;
|
||||
|
||||
/**
|
||||
* 重新加载动态路由（单飞）。
|
||||
* 重新加载动态路由
|
||||
*
|
||||
* 典型场景：后端权限变更导致接口返回权限不足（A0301），前端需要刷新路由和菜单以同步最新权限。
|
||||
*
|
||||
* - 会先清理已注册的动态路由（resetRouter）
|
||||
* - 重新从后端拉取路由（generateRoutes）
|
||||
* - 将动态路由注册到 vue-router（router.addRoute）
|
||||
* 同一时刻只允许一个请求进行中
|
||||
*/
|
||||
async function reloadDynamicRoutesOnce(): Promise<RouteRecordRaw[]> {
|
||||
if (reloadPromise) return reloadPromise;
|
||||
async function reloadRoutes(): Promise<RouteRecordRaw[]> {
|
||||
if (pendingReload) return pendingReload;
|
||||
|
||||
reloadPromise = (async () => {
|
||||
pendingReload = (async () => {
|
||||
try {
|
||||
resetRouter();
|
||||
const dynamicRoutes = await generateRoutes();
|
||||
@@ -84,35 +77,34 @@ export const usePermissionStore = defineStore("permission", () => {
|
||||
});
|
||||
return dynamicRoutes;
|
||||
} finally {
|
||||
reloadPromise = null;
|
||||
pendingReload = null;
|
||||
}
|
||||
})();
|
||||
|
||||
return reloadPromise;
|
||||
return pendingReload;
|
||||
}
|
||||
|
||||
let snapshotPromise: Promise<void> | null = null;
|
||||
let pendingPermissionRefresh: Promise<void> | null = null;
|
||||
|
||||
/**
|
||||
* 刷新权限快照（单飞）。
|
||||
* 刷新权限
|
||||
*
|
||||
* - 刷新用户信息（包含 perms/roles 等）
|
||||
* - 重新加载动态路由
|
||||
* 重新拉取用户信息后重建动态路由
|
||||
*/
|
||||
async function reloadPermissionSnapshotOnce(): Promise<void> {
|
||||
if (snapshotPromise) return snapshotPromise;
|
||||
async function refreshPermissions(): Promise<void> {
|
||||
if (pendingPermissionRefresh) return pendingPermissionRefresh;
|
||||
|
||||
snapshotPromise = (async () => {
|
||||
pendingPermissionRefresh = (async () => {
|
||||
try {
|
||||
const userStore = useUserStoreHook();
|
||||
await userStore.getUserInfo();
|
||||
await reloadDynamicRoutesOnce();
|
||||
await reloadRoutes();
|
||||
} finally {
|
||||
snapshotPromise = null;
|
||||
pendingPermissionRefresh = null;
|
||||
}
|
||||
})();
|
||||
|
||||
return snapshotPromise;
|
||||
return pendingPermissionRefresh;
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -122,37 +114,31 @@ export const usePermissionStore = defineStore("permission", () => {
|
||||
generateRoutes,
|
||||
setMixLayoutSideMenus,
|
||||
resetRouter,
|
||||
reloadDynamicRoutesOnce,
|
||||
reloadPermissionSnapshotOnce,
|
||||
reloadRoutes,
|
||||
refreshPermissions,
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* 转换后端路由数据为 Vue Router 配置。
|
||||
*
|
||||
* 处理组件路径映射和 Layout 层级嵌套。
|
||||
* 将后端路由数据转为 Vue Router 配置
|
||||
*/
|
||||
const transformRoutes = (routes: RouteItem[], isTopLevel: boolean = true): RouteRecordRaw[] => {
|
||||
return routes.map((route) => {
|
||||
const { children, ...args } = route;
|
||||
const componentPath = getRouteComponentPath(route);
|
||||
const componentPath = route.component;
|
||||
|
||||
// 处理组件：顶层或非Layout保留组件，中间层Layout设为undefined
|
||||
const processedComponent =
|
||||
isTopLevel || componentPath !== LAYOUT_COMPONENT ? componentPath : undefined;
|
||||
// 非顶层目录壳去掉 Layout 组件，仅保留路由结构
|
||||
const resolvedComponent = isTopLevel || componentPath !== "Layout" ? componentPath : undefined;
|
||||
|
||||
const normalizedRoute = { ...args } as RouteRecordRaw;
|
||||
|
||||
if (!processedComponent) {
|
||||
// 多级菜单的父级菜单，不需要组件
|
||||
if (!resolvedComponent) {
|
||||
normalizedRoute.component = undefined;
|
||||
} else {
|
||||
// 动态导入组件，Layout特殊处理，找不到组件时返回404
|
||||
normalizedRoute.component =
|
||||
processedComponent === LAYOUT_COMPONENT ? Layout : resolveViewComponent(processedComponent);
|
||||
resolvedComponent === "Layout" ? Layout : resolveComponent(resolvedComponent);
|
||||
}
|
||||
|
||||
// 递归处理子路由
|
||||
if (children && children.length > 0) {
|
||||
normalizedRoute.children = transformRoutes(children, false);
|
||||
}
|
||||
@@ -162,11 +148,11 @@ const transformRoutes = (routes: RouteItem[], isTopLevel: boolean = true): Route
|
||||
};
|
||||
|
||||
/**
|
||||
* 解析路由组件路径。
|
||||
* 解析组件
|
||||
*
|
||||
* 支持 `xxx.vue` 与 `xxx/index.vue` 两种写法，未命中时回退到 404。
|
||||
* 支持 xxx.vue 与 xxx/index.vue 两种写法，未命中时回退到 404
|
||||
*/
|
||||
function resolveViewComponent(componentPath: string) {
|
||||
function resolveComponent(componentPath: string) {
|
||||
const normalized = componentPath
|
||||
.trim()
|
||||
.replace(/^\/+/, "")
|
||||
@@ -179,58 +165,29 @@ function resolveViewComponent(componentPath: string) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断路由是否为系统内嵌外链。
|
||||
* 过滤掉不注册为 Vue Router 路由的外链
|
||||
*/
|
||||
function isEmbeddedExternalRoute(route: RouteItem): boolean {
|
||||
return (
|
||||
route.meta?.type === MenuTypeEnum.EXTERNAL &&
|
||||
route.meta?.openMode === ExternalOpenModeEnum.EMBEDDED
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取路由最终使用的组件路径。
|
||||
*
|
||||
* 系统内嵌外链统一渲染 iframe 页面。
|
||||
*/
|
||||
function getRouteComponentPath(route: RouteItem): string | undefined {
|
||||
if (isEmbeddedExternalRoute(route)) {
|
||||
return IFRAME_COMPONENT;
|
||||
}
|
||||
return route.component;
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤需要注册到 Vue Router 的路由。
|
||||
*
|
||||
* 新标签页外链只参与菜单渲染，不注册为前端路由。
|
||||
*/
|
||||
function filterRouterRoutes(routes: RouteRecordRaw[]): RouteRecordRaw[] {
|
||||
function filterRoutes(routes: RouteRecordRaw[]): RouteRecordRaw[] {
|
||||
return routes.reduce<RouteRecordRaw[]>((result, route) => {
|
||||
if (
|
||||
route.meta?.type === MenuTypeEnum.EXTERNAL &&
|
||||
route.meta?.openMode === ExternalOpenModeEnum.NEW_TAB
|
||||
) {
|
||||
return result;
|
||||
}
|
||||
|
||||
if (isExternal(route.path)) return result;
|
||||
|
||||
const routerRoute = { ...route };
|
||||
const children = route.children ? filterRouterRoutes(route.children) : [];
|
||||
const filtered = { ...route };
|
||||
const children = route.children ? filterRoutes(route.children) : [];
|
||||
|
||||
if (children.length > 0) {
|
||||
routerRoute.children = children;
|
||||
filtered.children = children;
|
||||
} else {
|
||||
delete routerRoute.children;
|
||||
delete filtered.children;
|
||||
}
|
||||
|
||||
result.push(routerRoute);
|
||||
result.push(filtered);
|
||||
return result;
|
||||
}, []);
|
||||
}
|
||||
|
||||
/** 非组件环境使用权限store */
|
||||
/**
|
||||
* 非组件环境获取 permission store
|
||||
*/
|
||||
export function usePermissionStoreHook() {
|
||||
return usePermissionStore(store);
|
||||
}
|
||||
|
||||
@@ -1,27 +1,28 @@
|
||||
import axios, { type InternalAxiosRequestConfig, type AxiosResponse } from "axios";
|
||||
import qs from "qs";
|
||||
|
||||
import { ApiCodeEnum } from "@/enums/api";
|
||||
import { useUserStoreHook } from "@/stores/user";
|
||||
import { usePermissionStoreHook } from "@/stores/permission";
|
||||
import { AuthStorage, redirectToLogin } from "@/utils/auth";
|
||||
import type { ApiResult } from "@/api/common";
|
||||
|
||||
// 记录已重试的请求，防止无限循环
|
||||
const retriedConfigs = new WeakSet<InternalAxiosRequestConfig>();
|
||||
// 防止同一请求在 token 刷新后重复进入重试，导致死循环
|
||||
const retriedRequests = new WeakSet<InternalAxiosRequestConfig>();
|
||||
|
||||
// HTTP 请求实例
|
||||
const http = axios.create({
|
||||
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||
timeout: 50000,
|
||||
headers: { "Content-Type": "application/json;charset=utf-8" },
|
||||
// 数组参数序列化为 ids=1&ids=2，而非 ids[]=1&ids[]=2
|
||||
paramsSerializer: (params) => qs.stringify(params, { arrayFormat: "repeat" }),
|
||||
});
|
||||
|
||||
// 请求拦截器
|
||||
http.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
const token = AuthStorage.getAccessToken();
|
||||
|
||||
// 约定：调用方设置 Authorization 为 "no-auth" 即跳过 token 注入
|
||||
if (config.headers.Authorization === "no-auth") {
|
||||
delete config.headers.Authorization;
|
||||
} else if (token) {
|
||||
@@ -33,12 +34,11 @@ http.interceptors.request.use(
|
||||
(error) => Promise.reject(error)
|
||||
);
|
||||
|
||||
// 响应拦截器
|
||||
http.interceptors.response.use(
|
||||
(response: AxiosResponse<ApiResult>): any => {
|
||||
(response: AxiosResponse<ApiResult>): AxiosResponse | any => {
|
||||
const { responseType } = response.config;
|
||||
|
||||
// 二进制数据直接返回
|
||||
// 二进制数据直接透传
|
||||
if (responseType === "blob" || responseType === "arraybuffer") {
|
||||
return response;
|
||||
}
|
||||
@@ -63,15 +63,14 @@ http.interceptors.response.use(
|
||||
|
||||
const { code, msg } = response.data as ApiResult;
|
||||
|
||||
// Token 过期：尝试刷新 token 后自动重试一次
|
||||
// Token 过期
|
||||
if (code === ApiCodeEnum.ACCESS_TOKEN_INVALID) {
|
||||
// config 不存在时无法重试，直接跳登录
|
||||
if (!config || retriedConfigs.has(config)) {
|
||||
if (!config || retriedRequests.has(config)) {
|
||||
await redirectToLogin("登录已过期，请重新登录");
|
||||
return Promise.reject(new Error("Token Invalid"));
|
||||
}
|
||||
|
||||
retriedConfigs.add(config);
|
||||
retriedRequests.add(config);
|
||||
|
||||
try {
|
||||
const userStore = useUserStoreHook();
|
||||
@@ -89,16 +88,16 @@ http.interceptors.response.use(
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh token 失效：无法续期，跳转登录
|
||||
// Refresh token 失效
|
||||
if (code === ApiCodeEnum.REFRESH_TOKEN_INVALID) {
|
||||
await redirectToLogin("登录已过期，请重新登录", false);
|
||||
return Promise.reject(new Error("Token Invalid"));
|
||||
}
|
||||
|
||||
// 权限不足：刷新权限快照后提示
|
||||
// 权限不足
|
||||
if (code === ApiCodeEnum.PERMISSION_DENIED) {
|
||||
const permissionStore = usePermissionStoreHook();
|
||||
await permissionStore.reloadPermissionSnapshotOnce();
|
||||
await permissionStore.refreshPermissions();
|
||||
ElMessage.error(msg || "权限不足");
|
||||
return Promise.reject(new Error(msg || "权限不足"));
|
||||
}
|
||||
|
||||
@@ -263,10 +263,10 @@
|
||||
<el-input v-model="formData.externalUrl" placeholder="https://example.com" clearable />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="打开方式" prop="openMode">
|
||||
<el-radio-group v-model="formData.openMode" @change="handleOpenModeChange">
|
||||
<el-radio :value="ExternalOpenModeEnum.NEW_TAB">新标签页</el-radio>
|
||||
<el-radio :value="ExternalOpenModeEnum.EMBEDDED">系统内嵌</el-radio>
|
||||
<el-form-item label="打开方式" prop="component">
|
||||
<el-radio-group v-model="formData.component" @change="handleComponentChange">
|
||||
<el-radio value="">新标签页</el-radio>
|
||||
<el-radio value="iframe">系统内嵌</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
@@ -434,7 +434,7 @@ import MenuAPI from "@/api/system/menu";
|
||||
import type { MenuForm, MenuItem, MenuQueryParams } from "@/api/system/menu";
|
||||
import type { OptionItem } from "@/api/common";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { CommonStatus, ExternalOpenModeEnum, MenuScopeEnum, MenuTypeEnum } from "@/enums";
|
||||
import { CommonStatus, MenuScopeEnum, MenuTypeEnum } from "@/enums";
|
||||
import { DeviceEnum } from "@/enums/settings";
|
||||
import { isTenantEnabled } from "@/utils/tenant";
|
||||
import { isValidURL } from "@/utils";
|
||||
@@ -470,7 +470,6 @@ const initialFormData: MenuForm = {
|
||||
scope: MenuScopeEnum.TENANT,
|
||||
sort: 1,
|
||||
type: MenuTypeEnum.MENU,
|
||||
openMode: ExternalOpenModeEnum.NEW_TAB,
|
||||
alwaysShow: 0,
|
||||
keepAlive: 1,
|
||||
params: [],
|
||||
@@ -495,8 +494,7 @@ const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600
|
||||
|
||||
// 系统内嵌外链需要一个内部路由承载 iframe 页面。
|
||||
const isEmbeddedExternal = computed(
|
||||
() =>
|
||||
formData.type === MenuTypeEnum.EXTERNAL && formData.openMode === ExternalOpenModeEnum.EMBEDDED
|
||||
() => formData.type === MenuTypeEnum.EXTERNAL && formData.component === "iframe"
|
||||
);
|
||||
|
||||
const showCatalogConfig = computed(() => formData.type === MenuTypeEnum.CATALOG);
|
||||
@@ -583,7 +581,7 @@ function createMenuTypeDrafts(): Record<MenuTypeEnum, Partial<MenuForm>> {
|
||||
[MenuTypeEnum.EXTERNAL]: {
|
||||
externalUrl: "",
|
||||
icon: "",
|
||||
openMode: ExternalOpenModeEnum.NEW_TAB,
|
||||
component: "",
|
||||
routeName: "",
|
||||
routePath: "",
|
||||
keepAlive: 1,
|
||||
@@ -658,7 +656,7 @@ const rules: FormRules<MenuForm> = {
|
||||
{ required: true, message: "请输入外链地址", validator: validateExternalUrl, trigger: "blur" },
|
||||
],
|
||||
perm: [{ required: true, message: "请输入权限标识", validator: validatePerm, trigger: "blur" }],
|
||||
openMode: [{ required: true, message: "请选择打开方式", trigger: "change" }],
|
||||
|
||||
visible: [{ required: true, message: "请选择显示状态", trigger: "change" }],
|
||||
scope: [{ required: true, message: "请选择菜单范围", trigger: "change" }],
|
||||
};
|
||||
@@ -754,7 +752,6 @@ function normalizeMenuPayload(): MenuForm {
|
||||
payload.routeName = undefined;
|
||||
payload.component = undefined;
|
||||
payload.externalUrl = undefined;
|
||||
payload.openMode = undefined;
|
||||
payload.perm = undefined;
|
||||
payload.keepAlive = undefined;
|
||||
payload.params = [];
|
||||
@@ -762,7 +759,6 @@ function normalizeMenuPayload(): MenuForm {
|
||||
|
||||
if (payload.type === MenuTypeEnum.MENU) {
|
||||
payload.externalUrl = undefined;
|
||||
payload.openMode = undefined;
|
||||
payload.redirect = undefined;
|
||||
payload.perm = undefined;
|
||||
payload.alwaysShow = undefined;
|
||||
@@ -779,7 +775,7 @@ function normalizeMenuPayload(): MenuForm {
|
||||
payload.alwaysShow = undefined;
|
||||
payload.params = [];
|
||||
|
||||
if (payload.openMode === ExternalOpenModeEnum.NEW_TAB) {
|
||||
if (!payload.component) {
|
||||
payload.routeName = undefined;
|
||||
payload.routePath = undefined;
|
||||
payload.keepAlive = undefined;
|
||||
@@ -793,7 +789,6 @@ function normalizeMenuPayload(): MenuForm {
|
||||
payload.routePath = undefined;
|
||||
payload.component = undefined;
|
||||
payload.externalUrl = undefined;
|
||||
payload.openMode = undefined;
|
||||
payload.redirect = undefined;
|
||||
payload.icon = undefined;
|
||||
payload.keepAlive = undefined;
|
||||
@@ -815,7 +810,6 @@ function saveMenuTypeDraft(type: MenuTypeEnum): void {
|
||||
component: formData.component,
|
||||
externalUrl: formData.externalUrl,
|
||||
icon: formData.icon,
|
||||
openMode: formData.openMode,
|
||||
redirect: formData.redirect,
|
||||
perm: formData.perm,
|
||||
alwaysShow: formData.alwaysShow,
|
||||
@@ -840,7 +834,6 @@ function restoreMenuTypeDraft(type: MenuTypeEnum): void {
|
||||
component: undefined,
|
||||
externalUrl: undefined,
|
||||
icon: undefined,
|
||||
openMode: undefined,
|
||||
redirect: undefined,
|
||||
perm: undefined,
|
||||
alwaysShow: undefined,
|
||||
@@ -917,11 +910,13 @@ function applyMenuTypeDefaults(): void {
|
||||
}
|
||||
|
||||
if (formData.type === MenuTypeEnum.EXTERNAL) {
|
||||
formData.openMode ??= ExternalOpenModeEnum.NEW_TAB;
|
||||
formData.component = undefined;
|
||||
formData.params = [];
|
||||
}
|
||||
|
||||
if (formData.type === MenuTypeEnum.EXTERNAL && formData.component === "iframe") {
|
||||
formData.keepAlive ??= 1;
|
||||
}
|
||||
|
||||
if (formData.type === MenuTypeEnum.BUTTON) {
|
||||
formData.icon = undefined;
|
||||
}
|
||||
@@ -942,10 +937,10 @@ function handleMenuTypeChange(): void {
|
||||
}
|
||||
|
||||
/**
|
||||
* 外链打开方式切换事件
|
||||
* 外链组件切换事件（新标签页 → 系统内嵌）
|
||||
*/
|
||||
function handleOpenModeChange(): void {
|
||||
if (formData.openMode === ExternalOpenModeEnum.EMBEDDED) {
|
||||
function handleComponentChange(): void {
|
||||
if (formData.component === "iframe") {
|
||||
formData.keepAlive ??= 1;
|
||||
}
|
||||
|
||||
|
||||
1
types/router.d.ts
vendored
1
types/router.d.ts
vendored
@@ -16,7 +16,6 @@ declare module "vue-router" {
|
||||
activeMenu?: string;
|
||||
params?: Record<string, unknown>;
|
||||
externalUrl?: string;
|
||||
openMode?: number;
|
||||
roles?: string[];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user