feat: 优化登录页背景和卡片样式

2026-06-25 00:09:34 +08:00
parent 8f9b18f16e
commit 4baf7a7b55
14 changed files with 599 additions and 597 deletions
--- a/src/api/system/menu/types.ts
+++ b/src/api/system/menu/types.ts
@@ -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 */
--- a/src/components/AppLink/index.vue
+++ b/src/components/AppLink/index.vue
@@ -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 {
--- a/src/enums/business.ts
+++ b/src/enums/business.ts
@@ -15,14 +15,6 @@ export enum MenuTypeEnum {
  BUTTON = "B", // 按钮
 }

-/**
- * 外链打开方式枚举
- */
-export enum ExternalOpenModeEnum {
-  NEW_TAB = 1, // 新标签页
-  EMBEDDED = 2, // 系统内嵌
-}
-
 /**
 * 菜单范围枚举
 */
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -12,7 +12,7 @@ export const constantRoutes: RouteRecordRaw[] = [
    children: [
      {
        path: "/redirect/:path(.*)",
-        component: () => import("@/views/common/redirect.vue"),
+        component: () => import("@/views/redirect.vue"),
      },
    ],
  },
--- a/src/stores/permission.ts
+++ b/src/stores/permission.ts
@@ -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);
 }
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -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 || "权限不足"));
    }
--- a/src/views/common/iframe.vue
+++ b/src/views/common/iframe.vue
--- a/src/views/common/redirect.vue
+++ b/src/views/common/redirect.vue
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -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;
  }