refactor: 升级vite至v6版本，升级sass至最新版，重构主题写法，弃用@pureadmin/theme (#1188)

* refactor: 升级`vite`至`v6`版本，升级`sass`至最新版，重构主题写法，删除`@pureadmin/theme`
2025-11-09 13:53:38 +08:00 · 2024-12-10 14:10:47 +08:00
parent 66f5d6d423
commit 21ff69b10e
31 changed files with 2356 additions and 3458 deletions
--- a/src/components/ReIcon/src/hooks.ts
+++ b/src/components/ReIcon/src/hooks.ts
@@ -4,7 +4,7 @@ import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";

 /**
 * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
- * @see 点击查看文档图标篇 {@link https://pure-admin.github.io/pure-admin-doc/pages/icon/}
+ * @see 点击查看文档图标篇 {@link https://pure-admin.cn/pages/icon/}
 * @param icon 必传 图标
 * @param attrs 可选 iconType 属性
 * @returns Component
--- a/src/components/ReSegmented/src/type.ts
+++ b/src/components/ReSegmented/src/type.ts
@@ -6,7 +6,7 @@ export interface OptionsType {
  label?: string | (() => VNode | Component);
  /**
   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
-   * @see {@link 用法参考 https://pure-admin.github.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
+   * @see {@link 用法参考 https://pure-admin.cn/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
   */
  icon?: string | Component;
  /** 图标属性、样式配置 */
--- a/src/layout/components/lay-setting/index.vue
+++ b/src/layout/components/lay-setting/index.vue
@@ -14,7 +14,6 @@ import { emitter } from "@/utils/mitt";
 import LayPanel from "../lay-panel/index.vue";
 import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
-import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
@@ -50,9 +49,7 @@ const {
 if (unref(layoutTheme)) {
  const layout = unref(layoutTheme).layout;
  const theme = unref(layoutTheme).theme;
-  toggleTheme({
-    scopeName: `layout-theme-${theme}`
-  });
+  document.documentElement.setAttribute("data-theme", theme);
  setLayoutModel(layout);
 }

--- a/src/layout/components/lay-sidebar/components/SidebarItem.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import path from "path";
 import { getConfig } from "@/config";
+import { posix } from "path-browserify";
 import { menuType } from "@/layout/types";
 import { ReText } from "@/components/ReText";
 import { useNav } from "@/layout/hooks/useNav";
@@ -99,8 +99,7 @@ function resolvePath(routePath) {
  if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
    return routePath || props.basePath;
  } else {
-    // 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
-    return path.posix.resolve(props.basePath, routePath);
+    return posix.resolve(props.basePath, routePath);
  }
 }
 </script>
--- a/src/layout/components/lay-sidebar/components/SidebarLogo.vue
+++ b/src/layout/components/lay-sidebar/components/SidebarLogo.vue
@@ -63,7 +63,7 @@ const { title, getLogo } = useNav();
      font-size: 18px;
      font-weight: 600;
      line-height: 32px;
-      color: $subMenuActiveText;
+      color: var(--pure-theme-sub-menu-active-text);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
--- a/src/layout/hooks/useDataThemeChange.ts
+++ b/src/layout/hooks/useDataThemeChange.ts
@@ -6,14 +6,9 @@ import { routerArrays } from "@/layout/types";
 import { router, resetRouter } from "@/router";
 import type { themeColorsType } from "../types";
 import { useAppStoreHook } from "@/store/modules/app";
-import { useGlobal, storageLocal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import {
-  darken,
-  lighten,
-  toggleTheme
-} from "@pureadmin/theme/dist/browser-utils";
+import { darken, lighten, useGlobal, storageLocal } from "@pureadmin/utils";

 export function useDataThemeChange() {
  const { layoutTheme, layout } = useLayout();
@@ -54,9 +49,7 @@ export function useDataThemeChange() {
    isClick = true
  ) {
    layoutTheme.value.theme = theme;
-    toggleTheme({
-      scopeName: `layout-theme-${theme}`
-    });
+    document.documentElement.setAttribute("data-theme", theme);
    // 如果非isClick，保留之前的themeColor
    const storageThemeColor = $storage.layout.themeColor;
    $storage.layout = {
--- a/src/layout/theme/index.ts
+++ b/src/layout/theme/index.ts
@@ -1,129 +0,0 @@
-/**
- * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
- */
-
-import type { multipleScopeVarsOptions } from "@pureadmin/theme";
-
-/** 预设主题色 */
-const themeColors = {
-  /* 亮白色 */
-  light: {
-    subMenuActiveText: "#000000d9",
-    menuBg: "#fff",
-    menuHover: "#f6f6f6",
-    subMenuBg: "#fff",
-    subMenuActiveBg: "#e0ebf6",
-    menuText: "rgb(0 0 0 / 60%)",
-    sidebarLogo: "#fff",
-    menuTitleHover: "#000",
-    menuActiveBefore: "#4091f7"
-  },
-  /* 道奇蓝 */
-  default: {
-    subMenuActiveText: "#fff",
-    menuBg: "#001529",
-    menuHover: "rgb(64 145 247 / 15%)",
-    subMenuBg: "#0f0303",
-    subMenuActiveBg: "#4091f7",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#002140",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#4091f7"
-  },
-  /* 深紫罗兰色 */
-  saucePurple: {
-    subMenuActiveText: "#fff",
-    menuBg: "#130824",
-    menuHover: "rgb(105 58 201 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#693ac9",
-    menuText: "#7a80b4",
-    sidebarLogo: "#1f0c38",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#693ac9"
-  },
-  /* 深粉色 */
-  pink: {
-    subMenuActiveText: "#fff",
-    menuBg: "#28081a",
-    menuHover: "rgb(216 68 147 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#d84493",
-    menuText: "#7a80b4",
-    sidebarLogo: "#3f0d29",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#d84493"
-  },
-  /* 猩红色 */
-  dusk: {
-    subMenuActiveText: "#fff",
-    menuBg: "#2a0608",
-    menuHover: "rgb(225 60 57 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#e13c39",
-    menuText: "rgb(254 254 254 / 65.1%)",
-    sidebarLogo: "#42090c",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e13c39"
-  },
-  /* 橙红色 */
-  volcano: {
-    subMenuActiveText: "#fff",
-    menuBg: "#2b0e05",
-    menuHover: "rgb(232 95 51 / 15%)",
-    subMenuBg: "#0f0603",
-    subMenuActiveBg: "#e85f33",
-    menuText: "rgb(254 254 254 / 65%)",
-    sidebarLogo: "#441708",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#e85f33"
-  },
-  /* 绿宝石 */
-  mingQing: {
-    subMenuActiveText: "#fff",
-    menuBg: "#032121",
-    menuHover: "rgb(89 191 193 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#59bfc1",
-    menuText: "#7a80b4",
-    sidebarLogo: "#053434",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#59bfc1"
-  },
-  /* 酸橙绿 */
-  auroraGreen: {
-    subMenuActiveText: "#fff",
-    menuBg: "#0b1e15",
-    menuHover: "rgb(96 172 128 / 15%)",
-    subMenuBg: "#000",
-    subMenuActiveBg: "#60ac80",
-    menuText: "#7a80b4",
-    sidebarLogo: "#112f21",
-    menuTitleHover: "#fff",
-    menuActiveBefore: "#60ac80"
-  }
-};
-
-/**
- * @description 将预设主题色处理成主题插件所需格式
- */
-export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
-  const result = [] as multipleScopeVarsOptions[];
-  Object.keys(themeColors).forEach(key => {
-    result.push({
-      scopeName: `layout-theme-${key}`,
-      varsContent: `
-        $subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
-        $menuBg: ${themeColors[key].menuBg} !default;
-        $menuHover: ${themeColors[key].menuHover} !default;
-        $subMenuBg: ${themeColors[key].subMenuBg} !default;
-        $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
-        $menuText: ${themeColors[key].menuText} !default;
-        $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
-        $menuTitleHover: ${themeColors[key].menuTitleHover} !default;
-        $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
-      `
-    } as multipleScopeVarsOptions);
-  });
-  return result;
-};
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,7 +1,8 @@
-@import "./transition";
-@import "./element-plus";
-@import "./sidebar";
-@import "./dark";
+@use "theme";
+@use "transition";
+@use "element-plus";
+@use "sidebar";
+@use "dark";

 /* 自定义全局 CssVar */
 :root {
@@ -13,6 +14,16 @@

  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #a6a6a6;
+
+  /** 主题色 */
+  --pure-theme-sub-menu-active-text: initial;
+  --pure-theme-menu-bg: none;
+  --pure-theme-menu-hover: none;
+  --pure-theme-sub-menu-bg: transparent;
+  --pure-theme-menu-text: initial;
+  --pure-theme-sidebar-logo: none;
+  --pure-theme-menu-title-hover: initial;
+  --pure-theme-menu-active-before: transparent;
 }

 /* 灰色模式 */
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -94,7 +94,7 @@
    height: 100%;
    overflow: visible;
    font-size: 0;
-    background: $menuBg;
+    background: var(--pure-theme-menu-bg);
    border-right: 1px solid var(--pure-border-color);

    /* 展开动画 */
@@ -150,11 +150,11 @@
    .el-menu-item,
    .el-sub-menu__title {
      height: 50px;
-      color: $menuText;
+      color: var(--pure-theme-menu-text);
      background-color: transparent !important;

      &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
      }

      div,
@@ -173,15 +173,15 @@

    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;

      i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
      }
    }

    .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
      transition: color 0.3s;
    }

@@ -204,7 +204,7 @@
    & .el-sub-menu .el-menu-item {
      min-width: $sideBarWidth !important;
      font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
    }

    /* 有子集的激活菜单左侧小竖条 */
@@ -218,7 +218,7 @@
      height: 100%;
      clear: both;
      content: "";
-      background-color: $menuActiveBefore;
+      background-color: var(--pure-theme-menu-active-before);
      transition: all var(--pure-transition-duration) ease-in-out;
      transform: translateY(0);
    }
@@ -253,7 +253,7 @@
  /* vertical 菜单折叠 */
  .el-menu--vertical {
    .el-menu--popup {
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;

      .el-menu-item {
        span {
@@ -271,10 +271,10 @@

    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;

      i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
      }
    }

@@ -282,23 +282,23 @@
    .el-menu .el-sub-menu__title {
      min-width: $sideBarWidth !important;
      font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;
    }

    .el-menu-item,
    .el-sub-menu__title {
      height: 50px;
      line-height: 50px;
-      color: $menuText;
-      background-color: $subMenuBg;
+      color: var(--pure-theme-menu-text);
+      background-color: var(--pure-theme-sub-menu-bg);

      &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
      }
    }

    .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
      transition: color 0.3s;
    }

@@ -342,15 +342,15 @@
    }

    .el-menu--popup {
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;

      a > .is-active.submenu-title-noDropdown {
        border-bottom: none;
      }

      .el-menu-item {
-        color: $menuText;
-        background-color: $subMenuBg;
+        color: var(--pure-theme-menu-text);
+        background-color: var(--pure-theme-sub-menu-bg);

        span {
          font-size: 14px;
@@ -358,7 +358,7 @@
      }

      .el-sub-menu__title {
-        color: $menuText;
+        color: var(--pure-theme-menu-text);
      }
    }

@@ -366,31 +366,31 @@
    .el-menu .el-sub-menu__title {
      min-width: $sideBarWidth !important;
      font-size: 14px;
-      background-color: $subMenuBg !important;
+      background-color: var(--pure-theme-sub-menu-bg) !important;

      &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
      }
    }

    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;

      i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
      }
    }

    .nest-menu .el-sub-menu > .el-sub-menu__title,
    .el-menu-item {
      &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
      }
    }

    .el-menu-item.is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
      transition: color 0.3s;
    }

@@ -415,7 +415,7 @@
    justify-content: space-around;
    width: 100%;
    height: 48px;
-    background: $menuBg;
+    background: var(--pure-theme-menu-bg);

    .horizontal-header-left {
      display: flex;
@@ -440,7 +440,7 @@
        font-size: 18px;
        font-weight: 600;
        line-height: 32px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
        text-overflow: ellipsis;
        white-space: nowrap;
      }
@@ -458,7 +458,7 @@
      align-items: center;
      justify-content: flex-end;
      min-width: 340px;
-      color: $subMenuActiveText;
+      color: var(--pure-theme-sub-menu-active-text);

      /* 搜索 */
      .search-container,
@@ -473,20 +473,20 @@
      /* 设置 */
      .set-icon {
        &:hover {
-          background: $menuHover;
+          background: var(--pure-theme-menu-hover);
        }
      }

      .dropdown-badge {
        height: 48px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
      }

      .globalization {
        width: 40px;
        height: 48px;
        padding: 11px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
        cursor: pointer;
        outline: none;
      }
@@ -497,7 +497,7 @@
        justify-content: space-around;
        height: 48px;
        padding: 10px;
-        color: $subMenuActiveText;
+        color: var(--pure-theme-sub-menu-active-text);
        cursor: pointer;

        p {
@@ -522,10 +522,10 @@
    .el-menu-item,
    .el-sub-menu__title {
      padding-right: var(--el-menu-base-level-padding);
-      color: $menuText;
+      color: var(--pure-theme-menu-text);

      &:hover {
-        color: $menuTitleHover !important;
+        color: var(--pure-theme-menu-title-hover) !important;
      }
    }

@@ -533,7 +533,7 @@
    .el-sub-menu__title {
      height: 48px;
      line-height: 48px;
-      background: $menuBg;
+      background: var(--pure-theme-menu-bg);

      svg {
        position: static !important;
@@ -542,15 +542,15 @@

    .is-active > .el-sub-menu__title,
    .is-active.submenu-title-noDropdown {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;

      i {
-        color: $subMenuActiveText !important;
+        color: var(--pure-theme-sub-menu-active-text) !important;
      }
    }

    .is-active {
-      color: $subMenuActiveText !important;
+      color: var(--pure-theme-sub-menu-active-text) !important;
      transition: color 0.3s;
    }
  }
@@ -596,7 +596,7 @@ body[layout="vertical"] {
  }

  .sidebar-logo-container {
-    background: $sidebarLogo;
+    background: var(--pure-theme-sidebar-logo);
  }

  .hideSidebar {
--- a/src/style/theme.scss
+++ b/src/style/theme.scss
@@ -0,0 +1,95 @@
+/* 亮白色 */
+html[data-theme="light"] {
+  --pure-theme-sub-menu-active-text: #000000d9;
+  --pure-theme-menu-bg: #fff;
+  --pure-theme-menu-hover: #f6f6f6;
+  --pure-theme-sub-menu-bg: #fff;
+  --pure-theme-menu-text: rgb(0 0 0 / 60%);
+  --pure-theme-sidebar-logo: #fff;
+  --pure-theme-menu-title-hover: #000;
+  --pure-theme-menu-active-before: #4091f7;
+}
+
+/* 道奇蓝 */
+html[data-theme="default"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #001529;
+  --pure-theme-menu-hover: rgb(64 145 247 / 15%);
+  --pure-theme-sub-menu-bg: #0f0303;
+  --pure-theme-menu-text: rgb(254 254 254 / 65%);
+  --pure-theme-sidebar-logo: #002140;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #4091f7;
+}
+
+/* 深紫罗兰色 */
+html[data-theme="saucePurple"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #130824;
+  --pure-theme-menu-hover: rgb(105 58 201 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #1f0c38;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #693ac9;
+}
+
+/* 深粉色 */
+html[data-theme="pink"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #28081a;
+  --pure-theme-menu-hover: rgb(216 68 147 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #3f0d29;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #d84493;
+}
+
+/* 猩红色 */
+html[data-theme="dusk"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #2a0608;
+  --pure-theme-menu-hover: rgb(225 60 57 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: rgb(254 254 254 / 65.1%);
+  --pure-theme-sidebar-logo: #42090c;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #e13c39;
+}
+
+/* 橙红色 */
+html[data-theme="volcano"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #2b0e05;
+  --pure-theme-menu-hover: rgb(232 95 51 / 15%);
+  --pure-theme-sub-menu-bg: #0f0603;
+  --pure-theme-menu-text: rgb(254 254 254 / 65%);
+  --pure-theme-sidebar-logo: #441708;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #e85f33;
+}
+
+/* 绿宝石 */
+html[data-theme="mingQing"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #032121;
+  --pure-theme-menu-hover: rgb(89 191 193 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #053434;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #59bfc1;
+}
+
+/* 酸橙绿 */
+html[data-theme="auroraGreen"] {
+  --pure-theme-sub-menu-active-text: #fff;
+  --pure-theme-menu-bg: #0b1e15;
+  --pure-theme-menu-hover: rgb(96 172 128 / 15%);
+  --pure-theme-sub-menu-bg: #000;
+  --pure-theme-menu-text: #7a80b4;
+  --pure-theme-sidebar-logo: #112f21;
+  --pure-theme-menu-title-hover: #fff;
+  --pure-theme-menu-active-before: #60ac80;
+}
--- a/src/utils/print.ts
+++ b/src/utils/print.ts
@@ -172,7 +172,7 @@ Print.prototype = {
          if (!frameWindow.document.execCommand("print", false, null)) {
            frameWindow.print();
          }
-        } catch (e) {
+        } catch {
          frameWindow.print();
        }
        frameWindow.close();
--- a/src/views/about/columns.tsx
+++ b/src/views/about/columns.tsx
@@ -82,7 +82,7 @@ export function useColumns() {
      className: "pure-version",
      cellRenderer: () => {
        return (
-          <a href="https://pure-admin.github.io/pure-admin-doc" target="_blank">
+          <a href="https://pure-admin.cn/" target="_blank">
            <span style="color: var(--el-color-primary)">文档链接</span>
          </a>
        );
--- a/src/views/account-settings/index.vue
+++ b/src/views/account-settings/index.vue
@@ -131,7 +131,7 @@ getMine().then(res => {

 <style lang="scss">
 .pure-account-settings {
-  background: $menuBg;
+  background: var(--pure-theme-menu-bg);
 }

 .pure-account-settings-menu {
@@ -140,12 +140,12 @@ getMine().then(res => {

  .el-menu-item {
    height: 48px !important;
-    color: $menuText;
+    color: var(--pure-theme-menu-text);
    background-color: transparent !important;
    transition: color 0.2s;

    &:hover {
-      color: $menuTitleHover !important;
+      color: var(--pure-theme-menu-title-hover) !important;
    }

    &.is-active {
--- a/src/views/system/menu/README.md
+++ b/src/views/system/menu/README.md
@@ -8,7 +8,7 @@
 | `name`            | 路由名称（必须唯一并且和当前路由`component`字段对应的页面里用`defineOptions`包起来的`name`保持一致） |
 | `path`            | 路由路径                                                     |
 | `component`       | 组件路径（传`component`组件路径，那么`path`可以随便写，如果不传，`component`组件路径会跟`path`保持一致） |
-| `rank`            | 菜单排序（平台规定只有`home`路由的`rank`才能为`0`，所以后端在返回`rank`的时候需要从非`0`开始 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E8%8F%9C%E5%8D%95%E6%8E%92%E5%BA%8F-rank)） |
+| `rank`            | 菜单排序（平台规定只有`home`路由的`rank`才能为`0`，所以后端在返回`rank`的时候需要从非`0`开始 [点击查看更多](https://pure-admin.cn/pages/routerMenu/#%E8%8F%9C%E5%8D%95%E6%8E%92%E5%BA%8F-rank)） |
 | `redirect`        | 路由重定向                                                   |
 | `icon`            | 菜单图标                                                     |
 | `extraIcon`       | 右侧图标                                                     |
@@ -22,5 +22,5 @@
 | `hiddenTag`       | 标签页（当前菜单名称或自定义信息禁止添加到标签页）           |
 | `fixedTag`        | 固定标签页（当前菜单名称是否固定显示在标签页且不可关闭）           |
 | `showLink`        | 菜单（是否显示该菜单）                                       |
-| `showParent`      | 父级菜单（是否显示父级菜单 [点击查看更多](https://pure-admin.github.io/pure-admin-doc/pages/routerMenu/#%E7%AC%AC%E4%B8%80%E7%A7%8D-%E8%AF%A5%E6%A8%A1%E5%BC%8F%E9%92%88%E5%AF%B9%E7%88%B6%E7%BA%A7%E8%8F%9C%E5%8D%95%E4%B8%8B%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84%E6%83%85%E5%86%B5-%E5%9C%A8%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84-meta-%E5%B1%9E%E6%80%A7%E4%B8%AD%E5%8A%A0%E4%B8%8A-showparent-true-%E5%8D%B3%E5%8F%AF)） |
+| `showParent`      | 父级菜单（是否显示父级菜单 [点击查看更多](https://pure-admin.cn/pages/routerMenu/#%E7%AC%AC%E4%B8%80%E7%A7%8D-%E8%AF%A5%E6%A8%A1%E5%BC%8F%E9%92%88%E5%AF%B9%E7%88%B6%E7%BA%A7%E8%8F%9C%E5%8D%95%E4%B8%8B%E5%8F%AA%E6%9C%89%E4%B8%80%E4%B8%AA%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84%E6%83%85%E5%86%B5-%E5%9C%A8%E5%AD%90%E8%8F%9C%E5%8D%95%E7%9A%84-meta-%E5%B1%9E%E6%80%A7%E4%B8%AD%E5%8A%A0%E4%B8%8A-showparent-true-%E5%8D%B3%E5%8F%AF)） |

--- a/src/views/table/base/imgPreview.vue
+++ b/src/views/table/base/imgPreview.vue
@@ -28,9 +28,15 @@ const columns: TableColumnList = [
 <template>
  <pure-table :data="tableDataImage" :columns="columns">
    <template #video>
-      <video width="180" height="180" controls>
+      <video
+        width="180"
+        height="180"
+        controls
+        muted
+        poster="http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg"
+      >
        <source
-          src="https://pure-admin.github.io/pure-admin-doc/video/url.mov"
+          src="http://lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4"
          type="video/mp4"
        />
      </video>