perf: 同步完整版代码

docs: update
refactor: use unocss replace windicss
2025-12-14 14:20:31 +08:00 · 2022-05-11 16:43:56 +08:00 · 2022-05-11 16:18:53 +08:00 · 2022-05-07 11:50:06 +08:00 · 2022-05-01 08:34:33 +08:00 · 2022-04-25 22:42:55 +08:00
80 changed files with 3911 additions and 2132 deletions
--- a/.env.staging
+++ b/.env.staging
@@ -0,0 +1,14 @@
+# 预发布也需要生产环境的行为
+# https://cn.vitejs.dev/guide/env-and-mode.html#modes
+NODE_ENV=production
+
+VITE_PUBLIC_PATH = /
+
+# 线上环境路由历史模式
+VITE_ROUTER_HISTORY = "hash"
+
+# 线上环境后端地址
+VITE_PROXY_DOMAIN_REAL = ""
+
+# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
+VITE_LEGACY = false
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,5 @@
 {
  "recommendations": [
-    "voorjaar.windicss-intellisense",
    "vscode-icons-team.vscode-icons",
    "davidanson.vscode-markdownlint",
    "stylelint.vscode-stylelint",
@@ -10,6 +9,7 @@
    "lokalise.i18n-ally",
    "mikestead.dotenv",
    "eamodio.gitlens",
-    "antfu.iconify"
+    "antfu.iconify",
+    "antfu.unocss"
  ]
 }
--- a/README.en-US.md
+++ b/README.en-US.md
@@ -6,7 +6,7 @@

 ## introduce

-The lite version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains the main functions and is more suitable for actual project development, the packaged size is only more than `2MB`
+The lite version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains the main functions and is more suitable for actual project development, the packaged size is only more than `3MB`

 ## Supporting Video

@@ -37,9 +37,10 @@ I think you should fork the project first to develop, so that you can pull the u

 bilibili: https://www.bilibili.com/video/BV1534y1S7HV/

-## ⚠️ Note
+## ⚠️ Attention

-The lite version does not accept any issues and prs. If you have any questions, please go to the full version https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose to mention it, thank you! ! !
+- The Lite version does not accept any issues and prs. If you have any questions, please go to the full version https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose to mention, thank you! ! !
+- Don't use the `delete-i18n` branch code, this branch is just for you to completely delete the internationalized references, it won't sync the code! ! ! [Completely remove the internationalization tutorial](https://www.bilibili.com/video/BV1Ru411B7k3/), please be sure to use the code from the `main` branch! ! !

 ## License

--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@

 ## 介绍

-精简版是基于[vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin)提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小仅 `2MB`多
+精简版是基于[vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin)提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小仅 `3MB`多

 ## 配套视频

@@ -51,7 +51,8 @@ pnpm remove 包名

 ## ⚠️ 注意

-精简版不接受任何 issues 和 pr，如果有问题请到完整版 https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose 去提，谢谢！！！
+- 精简版不接受任何 issues 和 pr，如果有问题请到完整版 https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose 去提，谢谢！！！
+- 不要使用`delete-i18n`分支代码，这个分支只是给你们完全删除国际化的参考，不会同步代码的！！！[完全删除国际化教程](https://www.bilibili.com/video/BV1Ru411B7k3/)，请务必使用`main`分支的代码！！！

 ## 许可证

--- a/build/plugins.ts
+++ b/build/plugins.ts
@@ -1,17 +1,17 @@
 import { resolve } from "path";
+import Unocss from "unocss/vite";
 import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import WindiCSS from "vite-plugin-windicss";
 import { viteMockServe } from "vite-plugin-mock";
-import liveReload from "vite-plugin-live-reload";
 import VueI18n from "@intlify/vite-plugin-vue-i18n";
-import ElementPlus from "unplugin-element-plus/vite";
+// import ElementPlus from "unplugin-element-plus/vite";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
+import { genScssMultipleScopeVars } from "/@/layout/theme";

 export function getPluginsList(command, VITE_LEGACY) {
  const prodMock = true;
@@ -26,72 +26,27 @@ export function getPluginsList(command, VITE_LEGACY) {
    }),
    // jsx、tsx语法支持
    vueJsx(),
-    WindiCSS(),
+    Unocss(),
    // 线上环境删除console
    removeConsole(),
    viteBuildInfo(),
-    // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
-    liveReload(["src/layout/**/*", "src/router/**/*"]),
    // 自定义主题
    themePreprocessorPlugin({
      scss: {
-        multipleScopeVars: [
-          {
-            scopeName: "layout-theme-default",
-            path: "src/layout/theme/default-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-light",
-            path: "src/layout/theme/light-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-dusk",
-            path: "src/layout/theme/dusk-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-volcano",
-            path: "src/layout/theme/volcano-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-yellow",
-            path: "src/layout/theme/yellow-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-mingQing",
-            path: "src/layout/theme/mingQing-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-auroraGreen",
-            path: "src/layout/theme/auroraGreen-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-pink",
-            path: "src/layout/theme/pink-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-saucePurple",
-            path: "src/layout/theme/saucePurple-vars.scss"
-          }
-        ],
-        // 默认取 multipleScopeVars[0].scopeName
-        defaultScopeName: "",
+        multipleScopeVars: genScssMultipleScopeVars(),
        // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
        extract: true,
-        // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
-        outputDir: "",
        // 会选取defaultScopeName对应的主题css文件在html添加link
        themeLinkTagId: "head",
        // "head"||"head-prepend" || "body" ||"body-prepend"
        themeLinkTagInjectTo: "head",
        // 是否对抽取的css文件内对应scopeName的权重类名移除
-        removeCssScopeName: false,
-        // 可以自定义css文件名称的函数
-        customThemeCssFileName: scopeName => scopeName
+        removeCssScopeName: false
      }
    }),
    // svg组件化支持
    svgLoader(),
-    ElementPlus({}),
+    // ElementPlus({}),
    // mock支持
    viteMockServe({
      mockPath: "mock",
@@ -101,7 +56,7 @@ export function getPluginsList(command, VITE_LEGACY) {
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,
-      logger: true
+      logger: false
    }),
    // 是否为打包后的文件提供传统浏览器兼容性支持
    VITE_LEGACY
--- a/locales/en.yaml
+++ b/locales/en.yaml
@@ -28,3 +28,5 @@ menus:
  permission: Permission Manage
  permissionPage: Page Permission
  permissionButton: Button Permission
+status:
+  hsLoad: Loading...
--- a/locales/zh-CN.yaml
+++ b/locales/zh-CN.yaml
@@ -28,3 +28,5 @@ menus:
  permission: 权限管理
  permissionPage: 页面权限
  permissionButton: 按钮权限
+status:
+  hsLoad: 加载中...
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -7,7 +7,6 @@ const permissionRouter = {
  meta: {
    title: "menus.permission",
    icon: "lollipop",
-    i18n: true,
    rank: 7
  },
  children: [
@@ -15,8 +14,7 @@ const permissionRouter = {
      path: "/permission/page/index",
      name: "permissionPage",
      meta: {
-        title: "menus.permissionPage",
-        i18n: true
+        title: "menus.permissionPage"
      }
    },
    {
@@ -24,7 +22,6 @@ const permissionRouter = {
      name: "permissionButton",
      meta: {
        title: "menus.permissionButton",
-        i18n: true,
        authority: []
      }
    }
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
  "name": "pure-admin-thin",
-  "version": "3.2.0",
+  "version": "3.3.0",
  "private": true,
  "scripts": {
    "dev": "cross-env --max_old_space_size=4096 vite",
    "serve": "pnpm dev",
    "build": "rimraf dist && cross-env vite build",
+    "build:staging": "rimraf dist && cross-env vite build --mode staging",
    "report": "rimraf dist && cross-env vite build",
    "preview": "vite preview",
    "preview:build": "pnpm build && vite preview",
@@ -25,16 +26,16 @@
    "not op_mini all"
  ],
  "dependencies": {
-    "@ctrl/tinycolor": "^3.4.0",
-    "@pureadmin/components": "^1.0.2",
-    "@vueuse/core": "^8.0.1",
-    "@vueuse/motion": "^2.0.0-beta.9",
-    "@vueuse/shared": "^8.0.1",
+    "@ctrl/tinycolor": "^3.4.1",
+    "@pureadmin/components": "^1.0.6",
+    "@vueuse/core": "^8.4.2",
+    "@vueuse/motion": "^2.0.0-beta.12",
+    "@vueuse/shared": "^8.4.2",
    "animate.css": "^4.1.1",
-    "axios": "^0.26.1",
+    "axios": "^0.27.2",
    "css-color-function": "^1.3.3",
-    "dayjs": "^1.11.0",
-    "element-plus": "^2.1.4",
+    "dayjs": "^1.11.2",
+    "element-plus": "2.1.11",
    "element-resize-detector": "^1.2.3",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
@@ -44,26 +45,25 @@
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path": "^0.12.7",
-    "pinia": "^2.0.12",
+    "pinia": "^2.0.14",
+    "qrcode": "^1.5.0",
    "qs": "^6.10.2",
    "resize-observer-polyfill": "^1.5.1",
    "responsive-storage": "^1.0.11",
    "rgb-hex": "^4.0.0",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.32",
-    "vue-router": "^4.0.14",
+    "vue": "^3.2.33",
+    "vue-i18n": "^9.2.0-beta.35",
+    "vue-router": "^4.0.15",
    "vue-types": "^4.1.1"
  },
  "devDependencies": {
    "@commitlint/cli": "13.1.0",
    "@commitlint/config-conventional": "13.1.0",
-    "@iconify-icons/ep": "^1.1.3",
-    "@iconify-icons/fa": "^1.1.1",
-    "@iconify-icons/fa-solid": "^1.1.2",
-    "@iconify-icons/ri": "^1.1.1",
-    "@iconify/vue": "^3.1.4",
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@pureadmin/theme": "^0.0.1",
+    "@iconify-icons/ep": "^1.2.4",
+    "@iconify-icons/ri": "^1.2.1",
+    "@iconify/vue": "^3.2.0",
+    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
+    "@pureadmin/theme": "^1.1.0",
    "@types/element-resize-detector": "1.1.3",
    "@types/js-cookie": "^3.0.1",
    "@types/lodash": "^4.14.180",
@@ -71,15 +71,16 @@
    "@types/mockjs": "1.0.3",
    "@types/node": "14.14.14",
    "@types/nprogress": "0.2.0",
+    "@types/qrcode": "^1.4.2",
    "@types/qs": "^6.9.7",
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-legacy": "^1.7.1",
-    "@vitejs/plugin-vue": "^2.2.4",
-    "@vitejs/plugin-vue-jsx": "^1.3.8",
+    "@vitejs/plugin-legacy": "^1.8.2",
+    "@vitejs/plugin-vue": "^2.3.2",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.5",
    "cross-env": "7.0.3",
    "eslint": "^8.8.0",
    "eslint-plugin-prettier": "^4.0.0",
@@ -96,24 +97,20 @@
    "rimraf": "3.0.2",
    "rollup": "^2.70.1",
    "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.49.9",
+    "sass": "^1.51.0",
    "stylelint": "^14.3.0",
    "stylelint-config-html": "^1.0.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recommended": "^6.0.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-order": "^5.0.0",
-    "typescript": "^4.6.2",
-    "unplugin-element-plus": "^0.3.2",
-    "vite": "^2.9.0-beta.4",
-    "vite-plugin-live-reload": "^2.1.0",
+    "typescript": "^4.6.3",
+    "unocss": "^0.33.2",
+    "vite": "^2.9.8",
    "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-remove-console": "^0.0.6",
-    "vite-plugin-style-import": "1.4.1",
-    "vite-plugin-windicss": "^1.8.3",
-    "vite-svg-loader": "2.2.0",
-    "vue-eslint-parser": "^8.2.0",
-    "windicss": "^3.5.1"
+    "vite-plugin-remove-console": "^0.0.7",
+    "vite-svg-loader": "^3.3.0",
+    "vue-eslint-parser": "^8.2.0"
  },
  "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
  "author": "xiaoxian521",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/serverConfig.json
+++ b/public/serverConfig.json
@@ -1,5 +1,5 @@
 {
-  "Version": "3.2.0",
+  "Version": "3.3.0",
  "Title": "PureAdmin",
  "FixedHeader": true,
  "HiddenSideBar": false,
--- a/src/components/ReIcon/src/iconifyIconOffline.ts
+++ b/src/components/ReIcon/src/iconifyIconOffline.ts
@@ -3,91 +3,43 @@ import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";

 // element-plus icon
 import Check from "@iconify-icons/ep/check";
-import Menu from "@iconify-icons/ep/menu";
 import HomeFilled from "@iconify-icons/ep/home-filled";
-import SetUp from "@iconify-icons/ep/set-up";
-import Edit from "@iconify-icons/ep/edit";
 import Setting from "@iconify-icons/ep/setting";
 import Lollipop from "@iconify-icons/ep/lollipop";
-import Link from "@iconify-icons/ep/link";
-import Position from "@iconify-icons/ep/position";
-import Histogram from "@iconify-icons/ep/histogram";
 import RefreshRight from "@iconify-icons/ep/refresh-right";
 import ArrowDown from "@iconify-icons/ep/arrow-down";
-import Close from "@iconify-icons/ep/close";
 import CloseBold from "@iconify-icons/ep/close-bold";
 import Bell from "@iconify-icons/ep/bell";
-import Guide from "@iconify-icons/ep/guide";
-import User from "@iconify-icons/ep/user";
-import Iphone from "@iconify-icons/ep/iphone";
-import Location from "@iconify-icons/ep/location";
-import Tickets from "@iconify-icons/ep/tickets";
-import OfficeBuilding from "@iconify-icons/ep/office-building";
-import Notebook from "@iconify-icons/ep/notebook";
-import Rank from "@iconify-icons/ep/rank";
-import videoPlay from "@iconify-icons/ep/video-play";
-import Monitor from "@iconify-icons/ep/monitor";
 import Search from "@iconify-icons/ep/search";
 addIcon("check", Check);
-addIcon("menu", Menu);
 addIcon("home-filled", HomeFilled);
-addIcon("set-up", SetUp);
-addIcon("edit", Edit);
 addIcon("setting", Setting);
 addIcon("lollipop", Lollipop);
-addIcon("link", Link);
-addIcon("position", Position);
-addIcon("histogram", Histogram);
 addIcon("refresh-right", RefreshRight);
 addIcon("arrow-down", ArrowDown);
-addIcon("close", Close);
 addIcon("close-bold", CloseBold);
 addIcon("bell", Bell);
-addIcon("guide", Guide);
-addIcon("user", User);
-addIcon("iphone", Iphone);
-addIcon("location", Location);
-addIcon("tickets", Tickets);
-addIcon("office-building", OfficeBuilding);
-addIcon("notebook", Notebook);
-addIcon("video-play", videoPlay);
-addIcon("rank", Rank);
-addIcon("monitor", Monitor);
 addIcon("search", Search);

 // remixicon
-import arrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
-import arrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
-import logoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-import nodeTree from "@iconify-icons/ri/node-tree";
-import ubuntuFill from "@iconify-icons/ri/ubuntu-fill";
-import questionLine from "@iconify-icons/ri/question-line";
-import checkboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
-import informationLine from "@iconify-icons/ri/information-line";
-import closeCircleLine from "@iconify-icons/ri/close-circle-line";
-import arrowUpLine from "@iconify-icons/ri/arrow-up-line";
-import arrowDownLine from "@iconify-icons/ri/arrow-down-line";
-import bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
-addIcon("arrow-right-s-line", arrowRightSLine);
-addIcon("arrow-left-s-line", arrowLeftSLine);
-addIcon("logout-circle-r-line", logoutCircleRLine);
-addIcon("node-tree", nodeTree);
-addIcon("ubuntu-fill", ubuntuFill);
-addIcon("question-line", questionLine);
-addIcon("checkbox-circle-line", checkboxCircleLine);
-addIcon("information-line", informationLine);
-addIcon("close-circle-line", closeCircleLine);
-addIcon("arrow-up-line", arrowUpLine);
-addIcon("arrow-down-line", arrowDownLine);
-addIcon("bookmark-2-line", bookmark2Line);
-
-// Font Awesome 4
-import faUser from "@iconify-icons/fa/user";
-import faLock from "@iconify-icons/fa/lock";
-import faSignOut from "@iconify-icons/fa/sign-out";
-addIcon("fa-user", faUser);
-addIcon("fa-lock", faLock);
-addIcon("fa-sign-out", faSignOut);
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import InformationLine from "@iconify-icons/ri/information-line";
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+import Bookmark from "@iconify-icons/ri/bookmark-2-line";
+import User from "@iconify-icons/ri/user-3-fill";
+import Lock from "@iconify-icons/ri/lock-fill";
+addIcon("arrow-right-s-line", ArrowRightSLine);
+addIcon("arrow-left-s-line", ArrowLeftSLine);
+addIcon("logout-circle-r-line", LogoutCircleRLine);
+addIcon("information-line", InformationLine);
+addIcon("arrow-up-line", ArrowUpLine);
+addIcon("arrow-down-line", ArrowDownLine);
+addIcon("bookmark", Bookmark);
+addIcon("user", User);
+addIcon("lock", Lock);

 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
--- a/src/components/ReIcon/src/iconifyIconOnline.ts
+++ b/src/components/ReIcon/src/iconifyIconOnline.ts
@@ -9,11 +9,6 @@ export default defineComponent({
    icon: {
      type: String,
      default: ""
-    },
-    // default element plus icon
-    type: {
-      type: String,
-      default: "ep:"
    }
  },
  render() {
@@ -21,7 +16,7 @@ export default defineComponent({
    return h(
      IconifyIcon,
      {
-        icon: `${this.type}${this.icon}`,
+        icon: `${this.icon}`,
        ...attrs
      },
      {
--- a/src/components/ReImageVerify/index.ts
+++ b/src/components/ReImageVerify/index.ts
@@ -0,0 +1,12 @@
+import { App } from "vue";
+import reImageVerify from "./src/index.vue";
+
+export const ReImageVerify = Object.assign(reImageVerify, {
+  install(app: App) {
+    app.component(reImageVerify.name, reImageVerify);
+  }
+});
+
+export default {
+  ReImageVerify
+};
--- a/src/components/ReImageVerify/src/hooks.ts
+++ b/src/components/ReImageVerify/src/hooks.ts
@@ -0,0 +1,85 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export const useImageVerify = (width = 120, height = 40) => {
+  const domRef = ref<HTMLCanvasElement>();
+  const imgCode = ref("");
+
+  function setImgCode(code: string) {
+    imgCode.value = code;
+  }
+
+  function getImgCode() {
+    if (!domRef.value) return;
+    imgCode.value = draw(domRef.value, width, height);
+  }
+
+  onMounted(() => {
+    getImgCode();
+  });
+
+  return {
+    domRef,
+    imgCode,
+    setImgCode,
+    getImgCode
+  };
+};
+
+function randomNum(min: number, max: number) {
+  const num = Math.floor(Math.random() * (max - min) + min);
+  return num;
+}
+
+function randomColor(min: number, max: number) {
+  const r = randomNum(min, max);
+  const g = randomNum(min, max);
+  const b = randomNum(min, max);
+  return `rgb(${r},${g},${b})`;
+}
+
+function draw(dom: HTMLCanvasElement, width: number, height: number) {
+  let imgCode = "";
+
+  const NUMBER_STRING = "0123456789";
+
+  const ctx = dom.getContext("2d");
+  if (!ctx) return imgCode;
+
+  ctx.fillStyle = randomColor(180, 230);
+  ctx.fillRect(0, 0, width, height);
+  for (let i = 0; i < 4; i += 1) {
+    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
+    imgCode += text;
+    const fontSize = randomNum(18, 41);
+    const deg = randomNum(-30, 30);
+    ctx.font = `${fontSize}px Simhei`;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = randomColor(80, 150);
+    ctx.save();
+    ctx.translate(30 * i + 15, 15);
+    ctx.rotate((deg * Math.PI) / 180);
+    ctx.fillText(text, -15 + 5, -15);
+    ctx.restore();
+  }
+  for (let i = 0; i < 5; i += 1) {
+    ctx.beginPath();
+    ctx.moveTo(randomNum(0, width), randomNum(0, height));
+    ctx.lineTo(randomNum(0, width), randomNum(0, height));
+    ctx.strokeStyle = randomColor(180, 230);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  for (let i = 0; i < 41; i += 1) {
+    ctx.beginPath();
+    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.fillStyle = randomColor(150, 200);
+    ctx.fill();
+  }
+  return imgCode;
+}
--- a/src/components/ReImageVerify/src/index.vue
+++ b/src/components/ReImageVerify/src/index.vue
@@ -0,0 +1,48 @@
+<script lang="ts">
+export default {
+  name: "ReImageVerify"
+};
+</script>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { useImageVerify } from "./hooks";
+
+interface Props {
+  code?: string;
+}
+
+interface Emits {
+  (e: "update:code", code: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ""
+});
+
+const emit = defineEmits<Emits>();
+
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue);
+  }
+);
+watch(imgCode, newValue => {
+  emit("update:code", newValue);
+});
+
+defineExpose({ getImgCode });
+</script>
+
+<template>
+  <canvas
+    ref="domRef"
+    width="120"
+    height="40"
+    class="cursor-pointer"
+    @click="getImgCode"
+  />
+</template>
--- a/src/components/ReQrcode/index.ts
+++ b/src/components/ReQrcode/index.ts
@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reQrcode from "./src/index";
+
+export const ReQrcode = Object.assign(reQrcode, {
+  install(app: App) {
+    app.component(reQrcode.name, reQrcode);
+  }
+});
+
+export default ReQrcode;
--- a/src/components/ReQrcode/src/index.scss
+++ b/src/components/ReQrcode/src/index.scss
@@ -0,0 +1,8 @@
+.qrcode {
+  &--disabled {
+    background: rgba(255, 255, 255, 0.95);
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}
--- a/src/components/ReQrcode/src/index.tsx
+++ b/src/components/ReQrcode/src/index.tsx
@@ -0,0 +1,262 @@
+import {
+  ref,
+  unref,
+  watch,
+  nextTick,
+  computed,
+  PropType,
+  defineComponent
+} from "vue";
+import "./index.scss";
+import { isString } from "/@/utils/is";
+import { cloneDeep } from "lodash-unified";
+import { propTypes } from "/@/utils/propTypes";
+import { IconifyIconOffline } from "../../ReIcon";
+import QRCode, { QRCodeRenderersOptions } from "qrcode";
+
+interface QrcodeLogo {
+  src?: string;
+  logoSize?: number;
+  bgColor?: string;
+  borderSize?: number;
+  crossOrigin?: string;
+  borderRadius?: number;
+  logoRadius?: number;
+}
+
+const props = {
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string
+    .validate((v: string) => ["canvas", "img"].includes(v))
+    .def("canvas"),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: (): QRCodeRenderersOptions => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: (): QrcodeLogo | string => ""
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def("")
+};
+
+export default defineComponent({
+  name: "ReQrcode",
+  props,
+  emits: ["done", "click", "disabled-click"],
+  setup(props, { emit }) {
+    const { toCanvas, toDataURL } = QRCode;
+    const loading = ref(true);
+    const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null);
+    const renderText = computed(() => String(props.text));
+    const wrapStyle = computed(() => {
+      return {
+        width: props.width + "px",
+        height: props.width + "px"
+      };
+    });
+    const initQrcode = async () => {
+      await nextTick();
+      const options = cloneDeep(props.options || {});
+      if (props.tag === "canvas") {
+        // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+        options.errorCorrectionLevel =
+          options.errorCorrectionLevel ||
+          getErrorCorrectionLevel(unref(renderText));
+        const _width: number = await getOriginWidth(unref(renderText), options);
+        options.scale =
+          props.width === 0 ? undefined : (props.width / _width) * 4;
+        const canvasRef: HTMLCanvasElement = await toCanvas(
+          unref(wrapRef) as HTMLCanvasElement,
+          unref(renderText),
+          options
+        );
+        if (props.logo) {
+          const url = await createLogoCode(canvasRef);
+          emit("done", url);
+          loading.value = false;
+        } else {
+          emit("done", canvasRef.toDataURL());
+          loading.value = false;
+        }
+      } else {
+        const url = await toDataURL(renderText.value, {
+          errorCorrectionLevel: "H",
+          width: props.width,
+          ...options
+        });
+        (unref(wrapRef) as HTMLImageElement).src = url;
+        emit("done", url);
+        loading.value = false;
+      }
+    };
+    watch(
+      () => renderText.value,
+      val => {
+        if (!val) return;
+        initQrcode();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+      const canvasWidth = canvasRef.width;
+      const logoOptions: QrcodeLogo = Object.assign(
+        {
+          logoSize: 0.15,
+          bgColor: "#ffffff",
+          borderSize: 0.05,
+          crossOrigin: "anonymous",
+          borderRadius: 8,
+          logoRadius: 0
+        },
+        isString(props.logo) ? {} : props.logo
+      );
+      const {
+        logoSize = 0.15,
+        bgColor = "#ffffff",
+        borderSize = 0.05,
+        crossOrigin = "anonymous",
+        borderRadius = 8,
+        logoRadius = 0
+      } = logoOptions;
+      const logoSrc = isString(props.logo) ? props.logo : props.logo.src;
+      const logoWidth = canvasWidth * logoSize;
+      const logoXY = (canvasWidth * (1 - logoSize)) / 2;
+      const logoBgWidth = canvasWidth * (logoSize + borderSize);
+      const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
+      const ctx = canvasRef.getContext("2d");
+      if (!ctx) return;
+      // logo 底色
+      canvasRoundRect(ctx)(
+        logoBgXY,
+        logoBgXY,
+        logoBgWidth,
+        logoBgWidth,
+        borderRadius
+      );
+      ctx.fillStyle = bgColor;
+      ctx.fill();
+      // logo
+      const image = new Image();
+      if (crossOrigin || logoRadius) {
+        image.setAttribute("crossOrigin", crossOrigin);
+      }
+      (image as any).src = logoSrc;
+      // 使用image绘制可以避免某些跨域情况
+      const drawLogoWithImage = (image: HTMLImageElement) => {
+        ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+      };
+      // 使用canvas绘制以获得更多的功能
+      const drawLogoWithCanvas = (image: HTMLImageElement) => {
+        const canvasImage = document.createElement("canvas");
+        canvasImage.width = logoXY + logoWidth;
+        canvasImage.height = logoXY + logoWidth;
+        const imageCanvas = canvasImage.getContext("2d");
+        if (!imageCanvas || !ctx) return;
+        imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+        canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
+        if (!ctx) return;
+        const fillStyle = ctx.createPattern(canvasImage, "no-repeat");
+        if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fill();
+        }
+      };
+      // 将 logo绘制到 canvas上
+      return new Promise((resolve: any) => {
+        image.onload = () => {
+          logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
+          resolve(canvasRef.toDataURL());
+        };
+      });
+    };
+    // 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+    const getOriginWidth = async (
+      content: string,
+      options: QRCodeRenderersOptions
+    ) => {
+      const _canvas = document.createElement("canvas");
+      await toCanvas(_canvas, content, options);
+      return _canvas.width;
+    };
+    // 对于内容少的QrCode，增大容错率
+    const getErrorCorrectionLevel = (content: string) => {
+      if (content.length > 36) {
+        return "M";
+      } else if (content.length > 16) {
+        return "Q";
+      } else {
+        return "H";
+      }
+    };
+    // 用于绘制圆角
+    const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+      return (x: number, y: number, w: number, h: number, r: number) => {
+        const minSize = Math.min(w, h);
+        if (r > minSize / 2) {
+          r = minSize / 2;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        return ctx;
+      };
+    };
+    const clickCode = () => {
+      emit("click");
+    };
+    const disabledClick = () => {
+      emit("disabled-click");
+    };
+    return () => (
+      <>
+        <div
+          v-loading={unref(loading)}
+          class="qrcode relative inline-block"
+          style={unref(wrapStyle)}
+        >
+          {props.tag === "canvas" ? (
+            <canvas ref={wrapRef} onClick={clickCode}></canvas>
+          ) : (
+            <img ref={wrapRef} onClick={clickCode}></img>
+          )}
+          {props.disabled && (
+            <div
+              class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
+              onClick={disabledClick}
+            >
+              <div class="absolute top-[50%] left-[50%] font-bold">
+                <IconifyIconOffline
+                  class="cursor-pointer outline-none"
+                  icon="refresh-right"
+                  width="30"
+                  color="var(--el-color-primary)"
+                />
+                <div>{props.disabledText}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+});
--- a/src/layout/components/navbar.vue
+++ b/src/layout/components/navbar.vue
@@ -23,7 +23,8 @@ const {
  changeTitle,
  toggleSideBar,
  pureApp,
-  usename,
+  username,
+  avatarsStyle,
  getDropdownItemStyle
 } = useNav();

@@ -93,8 +94,8 @@ function translationEn() {
      <!-- 退出登陆 -->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ usename }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
@@ -169,7 +170,6 @@ function translationEn() {
    }

    .el-dropdown-link {
-      width: 100px;
      height: 48px;
      padding: 10px;
      display: flex;
--- a/src/layout/components/panel/index.vue
+++ b/src/layout/components/panel/index.vue
@@ -23,7 +23,7 @@ emitter.on("openPanel", () => {
        <div class="project-configuration">
          <h3>项目配置</h3>
          <el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
-            <IconifyIconOffline icon="close" />
+            <IconifyIconOffline icon="close-bold" />
          </el-icon>
        </div>
        <div style="border-bottom: 1px solid #dcdfe6" />
@@ -54,7 +54,7 @@ emitter.on("openPanel", () => {

 .right-panel {
  width: 100%;
-  max-width: 300px;
+  max-width: 315px;
  height: 100vh;
  position: fixed;
  top: 0;
@@ -105,8 +105,8 @@ emitter.on("openPanel", () => {

 .right-panel-items {
  margin-top: 60px;
-  height: 100vh;
-  overflow: auto;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
 }

 .project-configuration {
@@ -120,7 +120,7 @@ emitter.on("openPanel", () => {
  margin-left: 10px;

  i {
-    font-size: 20px;
+    font-size: 16px;
    margin-right: 20px;

    &:hover {
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -68,7 +68,7 @@ function search() {
  resultOptions.value = flatMenusData.filter(
    menu =>
      keyword.value &&
-      transformI18n(menu.meta?.title, menu.meta?.i18n)
+      transformI18n(menu.meta?.title)
        .toLocaleLowerCase()
        .includes(keyword.value.toLocaleLowerCase().trim())
  );
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -11,7 +11,7 @@
        @click="handleTo"
        @mouseenter="handleMouse(item)"
      >
-        <component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" />
+        <component :is="useRenderIcon(item.meta?.icon ?? 'bookmark')" />
        <span class="result-item-title">{{ t(item.meta?.title) }}</span>
        <enterOutlined />
      </div>
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -9,7 +9,6 @@ import {
  useCssModule,
  getCurrentInstance
 } from "vue";
-import rgbHex from "rgb-hex";
 import { find } from "lodash-unified";
 import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
@@ -40,23 +39,23 @@ const instanceConfig =

 let themeColors = ref<Array<themeColorsType>>([
  // 道奇蓝（默认）
-  { rgb: "27, 42, 71", themeColor: "default" },
+  { color: "#1b2a47", themeColor: "default" },
  // 亮白色
-  { rgb: "255, 255, 255", themeColor: "light" },
+  { color: "#ffffff", themeColor: "light" },
  // 猩红色
-  { rgb: "245, 34, 45", themeColor: "dusk" },
+  { color: "#f5222d", themeColor: "dusk" },
  // 橙红色
-  { rgb: "250, 84, 28", themeColor: "volcano" },
+  { color: "#fa541c", themeColor: "volcano" },
  // 金色
-  { rgb: "250, 219, 20", themeColor: "yellow" },
+  { color: "#fadb14", themeColor: "yellow" },
  // 绿宝石
-  { rgb: "19, 194, 194", themeColor: "mingQing" },
+  { color: "#13c2c2", themeColor: "mingQing" },
  // 酸橙绿
-  { rgb: "82, 196, 26", themeColor: "auroraGreen" },
+  { color: "#52c41a", themeColor: "auroraGreen" },
  // 深粉色
-  { rgb: "235, 47, 150", themeColor: "pink" },
+  { color: "#eb2f96", themeColor: "pink" },
  // 深紫罗兰色
-  { rgb: "114, 46, 209", themeColor: "saucePurple" }
+  { color: "#722ed1", themeColor: "saucePurple" }
 ]);

 const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
@@ -97,8 +96,8 @@ const settings = reactive({
 });

 const getThemeColorStyle = computed(() => {
-  return rgb => {
-    return { background: `rgb(${rgb})` };
+  return color => {
+    return { background: color };
  };
 });

@@ -158,8 +157,7 @@ function onReset() {
      parentPath: "/",
      meta: {
        title: "menus.hshome",
-        icon: "home-filled",
-        i18n: true
+        icon: "home-filled"
      }
    }
  ]);
@@ -261,13 +259,13 @@ function setLayoutThemeColor(theme: string) {
    setEpThemeColor(getConfig().EpThemeColor);
  } else {
    const colors = find(themeColors.value, { themeColor: theme });
-    const color = "#" + rgbHex(colors.rgb);
-    setEpThemeColor(color);
+    setEpThemeColor(colors.color);
  }
 }

 // 设置ep主题色
 const setEpThemeColor = (color: string) => {
+  // @ts-expect-error
  writeNewStyle(createNewStyle(color));
  useEpThemeStoreHook().setEpThemeColor(color);
  body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
@@ -300,7 +298,7 @@ nextTick(() => {
  settings.weakVal &&
    document.querySelector("html")?.setAttribute("class", "html-weakness");
  settings.tabsVal && tagsChange();
-
+  // @ts-expect-error
  writeNewStyle(createNewStyle(epThemeColor.value));
  dataThemeChange();
 });
@@ -359,7 +357,7 @@ nextTick(() => {
      <li
        v-for="(item, index) in themeColors"
        :key="index"
-        :style="getThemeColorStyle(item.rgb)"
+        :style="getThemeColorStyle(item.color)"
        @click="setLayoutThemeColor(item.themeColor)"
      >
        <el-icon
@@ -448,7 +446,7 @@ nextTick(() => {
      @click="onReset"
    >
      <IconifyIconOffline
-        icon="fa-sign-out"
+        icon="logout-circle-r-line"
        width="15"
        height="15"
        style="margin-right: 4px"
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -65,7 +65,7 @@ const getBreadcrumb = (): void => {
      {
        path: "/welcome",
        parentPath: "/",
-        meta: { title: "menus.hshome", i18n: true }
+        meta: { title: "menus.hshome" }
      } as unknown as RouteLocationMatched
    ].concat(matched);
  }
@@ -104,10 +104,10 @@ const handleLink = (item: RouteLocationMatched): any => {
        <span
          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
          class="no-redirect"
-          >{{ transformI18n(item.meta.title, item.meta.i18n) }}</span
+          >{{ transformI18n(item.meta.title) }}</span
        >
        <a v-else @click.prevent="handleLink(item)">
-          {{ transformI18n(item.meta.title, item.meta.i18n) }}
+          {{ transformI18n(item.meta.title) }}
        </a>
      </el-breadcrumb-item>
    </transition-group>
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -29,7 +29,8 @@ const {
  changeTitle,
  handleResize,
  menuSelect,
-  usename,
+  username,
+  avatarsStyle,
  getDropdownItemStyle
 } = useNav();

@@ -121,8 +122,8 @@ function translationEn() {
      <!-- 退出登陆 -->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ usename }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
--- a/src/layout/components/sidebar/mixNav.vue
+++ b/src/layout/components/sidebar/mixNav.vue
@@ -32,7 +32,8 @@ const {
  menuSelect,
  resolvePath,
  pureApp,
-  usename,
+  username,
+  avatarsStyle,
  getDropdownItemStyle
 } = useNav();

@@ -122,7 +123,7 @@ function translationEn() {
          <div v-show="route.meta.icon" :class="['el-icon', route.meta.icon]">
            <component :is="useRenderIcon(route.meta && route.meta.icon)" />
          </div>
-          <span>{{ transformI18n(route.meta.title, route.meta.i18n) }}</span>
+          <span>{{ transformI18n(route.meta.title) }}</span>
          <FontIcon
            v-if="route.meta.extraIcon"
            width="30px"
@@ -166,8 +167,8 @@ function translationEn() {
      <!-- 退出登陆 -->
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ usename }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="logout">
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 import path from "path";
 import { useNav } from "../../hooks/nav";
 import { childrenType } from "../../types";
 import { transformI18n } from "/@/plugins/i18n";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { ref, PropType, nextTick, computed, CSSProperties } from "vue";

 const { pureApp } = useNav();
 const menuMode = ["vertical", "mix"].includes(pureApp.layout);
@@ -148,7 +148,7 @@ function resolvePath(routePath) {
      :class="{ 'submenu-title-noDropdown': !isNest }"
      :style="getNoDropdownStyle"
    >
-      <div class="el-icon" v-show="props.item.meta.icon">
+      <div class="sub-menu-icon" v-show="props.item.meta.icon">
        <component
          :is="
            useRenderIcon(
@@ -167,13 +167,13 @@ function resolvePath(routePath) {
        :style="getDivStyle"
      >
        <span :style="getMenuTextStyle">
-          {{ transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n) }}
+          {{ transformI18n(onlyOneChild.meta.title) }}
        </span>
      </div>
      <template #title>
        <div :style="getDivStyle">
          <span v-if="!menuMode">{{
-            transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+            transformI18n(onlyOneChild.meta.title)
          }}</span>
          <el-tooltip
            v-else
@@ -182,18 +182,14 @@ function resolvePath(routePath) {
            :disabled="!onlyOneChild.showTooltip"
          >
            <template #content>
-              {{
-                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
-              }}
+              {{ transformI18n(onlyOneChild.meta.title) }}
            </template>
            <span
              ref="menuTextRef"
              :style="getMenuTextStyle"
              @mouseover="hoverMenu(onlyOneChild)"
            >
-              {{
-                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
-              }}
+              {{ transformI18n(onlyOneChild.meta.title) }}
            </span>
          </el-tooltip>
          <FontIcon
@@ -216,17 +212,12 @@ function resolvePath(routePath) {
    popper-append-to-body
  >
    <template #title>
-      <div
-        v-show="props.item.meta.icon"
-        :class="['el-icon', props.item.meta.icon]"
-      >
+      <div v-show="props.item.meta.icon" class="sub-menu-icon">
        <component
          :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
        />
      </div>
-      <span v-if="!menuMode">{{
-        transformI18n(props.item.meta.title, props.item.meta.i18n)
-      }}</span>
+      <span v-if="!menuMode">{{ transformI18n(props.item.meta.title) }}</span>
      <el-tooltip
        v-else
        placement="top"
@@ -234,7 +225,7 @@ function resolvePath(routePath) {
        :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
      >
        <template #content>
-          {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
+          {{ transformI18n(props.item.meta.title) }}
        </template>
        <div
          ref="menuTextRef"
@@ -242,7 +233,7 @@ function resolvePath(routePath) {
          @mouseover="hoverMenu(props.item)"
        >
          <span :style="getSpanStyle">
-            {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
+            {{ transformI18n(props.item.meta.title) }}
          </span>
        </div>
      </el-tooltip>
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -3,6 +3,7 @@ import {
  ref,
  watch,
  unref,
+  toRaw,
  reactive,
  nextTick,
  computed,
@@ -318,7 +319,6 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
          parentPath: "/",
          meta: {
            title: "menus.hshome",
-            i18n: true,
            icon: "home-filled"
          }
        },
@@ -662,7 +662,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
          @click="tagOnClick(item)"
        >
          <router-link :to="item.path"
-            >{{ transformI18n(item.meta.title, item.meta.i18n) }}
+            >{{ transformI18n(item.meta.title) }}
          </router-link>
          <span
            v-if="
@@ -702,7 +702,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
          style="display: flex; align-items: center"
        >
          <li v-if="item.show" @click="selectTag(key, item)">
-            <component :is="item.icon" :key="key" />
+            <component :is="toRaw(item.icon)" :key="key" />
            {{ t(item.text) }}
          </li>
        </div>
@@ -736,7 +736,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
                :disabled="item.disabled"
              >
                <component
-                  :is="item.icon"
+                  :is="toRaw(item.icon)"
                  :key="key"
                  style="margin-right: 6px"
                />
--- a/src/layout/frameView.vue
+++ b/src/layout/frameView.vue
@@ -1,12 +1,19 @@
 <template>
-  <div class="frame" v-loading="loading">
+  <div
+    class="frame"
+    v-loading="loading"
+    :element-loading-text="t('status.hsLoad')"
+  >
    <iframe :src="frameSrc" class="frame-iframe" ref="frameRef" />
  </div>
 </template>
+
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { ref, unref, onMounted, nextTick } from "vue";

+const { t } = useI18n();
 const loading = ref(false);
 const currentRoute = useRoute();
 const frameSrc = ref<string>("");
@@ -45,7 +52,7 @@ onMounted(() => {

 <style lang="scss" scoped>
 .frame {
-  height: 100vh;
+  height: calc(100vh - 88px);
  z-index: 998;

  .frame-iframe {
@@ -58,6 +65,6 @@ onMounted(() => {
 }

 .main-content {
-  margin: 0 !important;
+  margin: 2px 0 0 !important;
 }
 </style>
--- a/src/layout/hooks/nav.ts
+++ b/src/layout/hooks/nav.ts
@@ -3,16 +3,18 @@ import { router } from "/@/router";
 import { getConfig } from "/@/config";
 import { emitter } from "/@/utils/mitt";
 import { routeMetaType } from "../types";
+import { remainingPaths } from "/@/router";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageSession } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { remainingPaths } from "/@/router/modules/index";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";

+const errorInfo = "当前路由配置不正确，请检查配置";
+
 export function useNav() {
  const pureApp = useAppStoreHook();
  // 用户名
-  const usename: string = storageSession.getItem("info")?.username;
+  const username: string = storageSession.getItem("info")?.username;

  // 设置国际化选中后的样式
  const getDropdownItemStyle = computed(() => {
@@ -24,6 +26,10 @@ export function useNav() {
    };
  });

+  const avatarsStyle = computed(() => {
+    return username ? { marginRight: "10px" } : "";
+  });
+
  const isCollapse = computed(() => {
    return !pureApp.getSidebarStatus;
  });
@@ -31,9 +37,8 @@ export function useNav() {
  // 动态title
  function changeTitle(meta: routeMetaType) {
    const Title = getConfig().Title;
-    if (Title)
-      document.title = `${transformI18n(meta.title, meta.i18n)} | ${Title}`;
-    else document.title = transformI18n(meta.title, meta.i18n);
+    if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`;
+    else document.title = transformI18n(meta.title);
  }

  // 退出登录
@@ -59,6 +64,7 @@ export function useNav() {
  }

  function resolvePath(route) {
+    if (!route.children) return console.error(errorInfo);
    const httpReg = /^http(s?):\/\//;
    const routeChildPath = route.children[0]?.path;
    if (httpReg.test(routeChildPath)) {
@@ -77,6 +83,7 @@ export function useNav() {
    }
    // 找到当前路由的信息
    function findCurrentRoute(indexPath: string, routes) {
+      if (!routes) return console.error(errorInfo);
      return routes.map(item => {
        if (item.path === indexPath) {
          if (item.redirect) {
@@ -112,7 +119,8 @@ export function useNav() {
    resolvePath,
    isCollapse,
    pureApp,
-    usename,
+    username,
+    avatarsStyle,
    getDropdownItemStyle
  };
 }
--- a/src/layout/theme/auroraGreen-vars.scss
+++ b/src/layout/theme/auroraGreen-vars.scss
@@ -1,11 +0,0 @@
-/* 酸橙绿 */
-$subMenuActiveText: #fff;
-$menuBg: #0b1e15;
-$menuHover: #60ac80;
-$subMenuBg: #000;
-$subMenuActiveBg: #60ac80;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #112f21;
-$menuTitleHover: #fff;
-$menuActiveBefore: #60ac80;
--- a/src/layout/theme/default-vars.scss
+++ b/src/layout/theme/default-vars.scss
@@ -1,29 +0,0 @@
-/**
- * 道奇蓝（默认）
- * 此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升
- * 同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default
-*/
-
-/* 菜单选中后字体样式 */
-$subMenuActiveText: #fff !default;
-
-/* 菜单背景 */
-$menuBg: #001529 !default;
-
-/* 鼠标覆盖到菜单时的背景 */
-$menuHover: #4091f7 !default;
-
-/* 子菜单背景 */
-$subMenuBg: #0f0303 !default;
-
-/* 有无子集的激活菜单背景 */
-$subMenuActiveBg: #4091f7 !default;
-$navTextColor: #fff !default;
-$menuText: rgb(254 254 254 / 65%) !default;
-
-/* logo背景颜色 */
-$sidebarLogo: #002140 !default;
-
-/* 鼠标覆盖到菜单时的字体颜色 */
-$menuTitleHover: #fff !default;
-$menuActiveBefore: #4091f7 !default;
--- a/src/layout/theme/dusk-vars.scss
+++ b/src/layout/theme/dusk-vars.scss
@@ -1,11 +0,0 @@
-/* 猩红色 */
-$subMenuActiveText: #fff;
-$menuBg: #2a0608;
-$menuHover: #e13c39;
-$subMenuBg: #000;
-$subMenuActiveBg: #e13c39;
-$navTextColor: red;
-$menuText: rgb(254 254 254 / 65.1%);
-$sidebarLogo: #42090c;
-$menuTitleHover: #fff;
-$menuActiveBefore: #e13c39;
--- a/src/layout/theme/element-plus.ts
+++ b/src/layout/theme/element-plus.ts
@@ -26,7 +26,9 @@ export const writeNewStyle = (newStyle: string): void => {
 };

 // 根据主题色，生成最新的样式表
-export const createNewStyle = (primaryStyle: string): string => {
+export const createNewStyle = (
+  primaryStyle: Record<string, any>
+): Record<string, any> => {
  // 根据主色生成色值表
  const colors = createColors(primaryStyle);
  // 在当前ep的默认样式表中标记需要替换的色值
@@ -41,7 +43,9 @@ export const createNewStyle = (primaryStyle: string): string => {
  return cssText;
 };

-export const createColors = (primary: string) => {
+export const createColors = (
+  primary: Record<string, any>
+): Record<string, any> => {
  if (!primary) return;
  const colors = {
    primary
@@ -53,7 +57,7 @@ export const createColors = (primary: string) => {
  return colors;
 };

-const getStyleTemplate = (data: string): string => {
+const getStyleTemplate = (data: Record<string, any>): Record<string, any> => {
  const colorMap = {
    "#3a8ee6": "shade-1",
    "#409eff": "primary",
--- a/src/layout/theme/index.ts
+++ b/src/layout/theme/index.ts
@@ -0,0 +1,136 @@
+const themeColors = {
+  default: {
+    color: "#409EFF",
+    subMenuActiveText: "#fff",
+    menuBg: "#001529",
+    menuHover: "#4091f7",
+    subMenuBg: "#0f0303",
+    subMenuActiveBg: "#4091f7",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#002140",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#4091f7"
+  },
+  light: {
+    color: "#409EFF",
+    subMenuActiveText: "#409eff",
+    menuBg: "#fff",
+    menuHover: "#e0ebf6",
+    subMenuBg: "#fff",
+    subMenuActiveBg: "#e0ebf6",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#fff",
+    menuTitleHover: "#000",
+    menuActiveBefore: "#4091f7"
+  },
+  dusk: {
+    color: "#f5222d",
+    subMenuActiveText: "#fff",
+    menuBg: "#2a0608",
+    menuHover: "#e13c39",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#e13c39",
+    navTextColor: "#red",
+    menuText: "rgb(254 254 254 / 65.1%)",
+    sidebarLogo: "#42090c",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e13c39"
+  },
+  volcano: {
+    color: "#fa541c",
+    subMenuActiveText: "#fff",
+    menuBg: "#2b0e05",
+    menuHover: "#e85f33",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#e85f33",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#441708",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e85f33"
+  },
+  yellow: {
+    color: "#fadb14",
+    subMenuActiveText: "#d25f00",
+    menuBg: "#2b2503",
+    menuHover: "#f6da4d",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#f6da4d",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#443b05",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#f6da4d"
+  },
+  mingQing: {
+    color: "#13c2c2",
+    subMenuActiveText: "#fff",
+    menuBg: "#032121",
+    menuHover: "#59bfc1",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#59bfc1",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#053434",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#59bfc1"
+  },
+  auroraGreen: {
+    color: "#52c41a",
+    subMenuActiveText: "#fff",
+    menuBg: "#0b1e15",
+    menuHover: "#60ac80",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#60ac80",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#112f21",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#60ac80"
+  },
+  pink: {
+    color: "#eb2f96",
+    subMenuActiveText: "#fff",
+    menuBg: "#28081a",
+    menuHover: "#d84493",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#d84493",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#3f0d29",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#d84493"
+  },
+  saucePurple: {
+    color: "#722ed1",
+    subMenuActiveText: "#fff",
+    menuBg: "#130824",
+    menuHover: "#693ac9",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#693ac9",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#1f0c38",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#693ac9"
+  }
+};
+
+type MultipleScopeVarsItem = {
+  scopeName: string;
+  path: string;
+  varsContent: string;
+};
+
+export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
+  const result = [] as MultipleScopeVarsItem[];
+  Object.keys(themeColors).forEach(key => {
+    result.push({
+      scopeName: `layout-theme-${key}`,
+      varsContent: `$primary-color: ${themeColors[key].color} !default;$vxe-primary-color: $primary-color;$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;$navTextColor: ${themeColors[key].navTextColor} !default;$menuText: ${themeColors[key].menuText} !default;$sidebarLogo: ${themeColors[key].sidebarLogo} !default;$menuTitleHover: ${themeColors[key].menuTitleHover} !default;$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;`
+    } as MultipleScopeVarsItem);
+  });
+  return result;
+}
--- a/src/layout/theme/light-vars.scss
+++ b/src/layout/theme/light-vars.scss
@@ -1,11 +0,0 @@
-/* 亮白色 */
-$subMenuActiveText: #409eff;
-$menuBg: #fff;
-$menuHover: #e0ebf6;
-$subMenuBg: #fff;
-$subMenuActiveBg: #e0ebf6;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #fff;
-$menuTitleHover: #000;
-$menuActiveBefore: #4091f7;
--- a/src/layout/theme/mingQing-vars.scss
+++ b/src/layout/theme/mingQing-vars.scss
@@ -1,11 +0,0 @@
-/* 绿宝石 */
-$subMenuActiveText: #fff;
-$menuBg: #032121;
-$menuHover: #59bfc1;
-$subMenuBg: #000;
-$subMenuActiveBg: #59bfc1;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #053434;
-$menuTitleHover: #fff;
-$menuActiveBefore: #59bfc1;
--- a/src/layout/theme/pink-vars.scss
+++ b/src/layout/theme/pink-vars.scss
@@ -1,11 +0,0 @@
-/* 深粉色 */
-$subMenuActiveText: #fff;
-$menuBg: #28081a;
-$menuHover: #d84493;
-$subMenuBg: #000;
-$subMenuActiveBg: #d84493;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #3f0d29;
-$menuTitleHover: #fff;
-$menuActiveBefore: #d84493;
--- a/src/layout/theme/saucePurple-vars.scss
+++ b/src/layout/theme/saucePurple-vars.scss
@@ -1,11 +0,0 @@
-/* 深紫罗兰色 */
-$subMenuActiveText: #fff;
-$menuBg: #130824;
-$menuHover: #693ac9;
-$subMenuBg: #000;
-$subMenuActiveBg: #693ac9;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #1f0c38;
-$menuTitleHover: #fff;
-$menuActiveBefore: #693ac9;
--- a/src/layout/theme/volcano-vars.scss
+++ b/src/layout/theme/volcano-vars.scss
@@ -1,11 +0,0 @@
-/* 橙红色 */
-$subMenuActiveText: #fff;
-$menuBg: #2b0e05;
-$menuHover: #e85f33;
-$subMenuBg: #0f0603;
-$subMenuActiveBg: #e85f33;
-$navTextColor: #fff;
-$menuText: rgb(254 254 254 / 65%);
-$sidebarLogo: #441708;
-$menuTitleHover: #fff;
-$menuActiveBefore: #e85f33;
--- a/src/layout/theme/yellow-vars.scss
+++ b/src/layout/theme/yellow-vars.scss
@@ -1,11 +0,0 @@
-/* 金色 */
-$subMenuActiveText: #d25f00;
-$menuBg: #2b2503;
-$menuHover: #f6da4d;
-$subMenuBg: #0f0603;
-$subMenuActiveBg: #f6da4d;
-$navTextColor: #fff;
-$menuText: rgb(254 254 254 / 65%);
-$sidebarLogo: #443b05;
-$menuTitleHover: #fff;
-$menuActiveBefore: #f6da4d;
--- a/src/layout/types.ts
+++ b/src/layout/types.ts
@@ -5,7 +5,6 @@ export const routerArrays: Array<RouteConfigs> = [
    parentPath: "/",
    meta: {
      title: "menus.hshome",
-      i18n: true,
      icon: "home-filled"
    }
  }
@@ -79,7 +78,7 @@ export type childrenType = {
 };

 export type themeColorsType = {
-  rgb: string;
+  color: string;
  themeColor: string;
 };

--- a/src/main.ts
+++ b/src/main.ts
@@ -1,17 +1,20 @@
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "/@/store";
+import ElementPlus from "element-plus";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { useI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
-import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";

+import "uno.css";
 import "animate.css";
-import "virtual:windi.css";
+// 引入重置样式
+import "./style/reset.scss";
 // 导入公共样式
 import "./style/index.scss";
+import "element-plus/dist/index.css";
 import "@pureadmin/components/dist/index.css";
 import "@pureadmin/components/dist/theme.css";
 // 导入字体图标
@@ -41,6 +44,6 @@ getServerConfig(app).then(async config => {
  await router.isReady();
  injectResponsiveStorage(app, config);
  setupStore(app);
-  app.use(MotionPlugin).use(useI18n).use(useElementPlus);
+  app.use(MotionPlugin).use(useI18n).use(ElementPlus);
  app.mount("#app");
 });
--- a/src/mockProdServer.ts
+++ b/src/mockProdServer.ts
@@ -1,7 +1,11 @@
 import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
-import asyncRoutesMock from "../mock/asyncRoutes";

-export const mockModules = [...asyncRoutesMock];
+const modules = import.meta.globEager("../mock/*.ts");
+const mockModules = [];
+
+Object.keys(modules).forEach(key => {
+  mockModules.push(...modules[key].default);
+});

 export function setupProdMockServer() {
  createProdMockServer(mockModules);
--- a/src/plugins/i18n.ts
+++ b/src/plugins/i18n.ts
@@ -30,15 +30,11 @@ export const localesConfigs = {
 };

 /**
- * 国际化转换工具函数
+ * 国际化转换工具函数（自动读取根目录locales文件夹下文件进行国际化匹配）
 * @param message message
- * @param isI18n  如果true,获取对应的消息,否则返回本身
- * @returns message
+ * @returns 转化后的message
 */
-export function transformI18n(
-  message: string | unknown | object = "",
-  isI18n: boolean | unknown = false
-) {
+export function transformI18n(message: any = "") {
  if (!message) {
    return "";
  }
@@ -50,7 +46,11 @@ export function transformI18n(
    return message[locale?.value];
  }

-  if (isI18n) {
+  const key = message.match(/(\S*)\./)?.[1];
+  if (key && Object.keys(siphonI18n("zh-CN")).includes(key)) {
+    return i18n.global.t.call(i18n.global.locale, message);
+  } else if (!key && Object.keys(siphonI18n("zh-CN")).includes(message)) {
+    // 兼容非嵌套形式的国际化写法
    return i18n.global.t.call(i18n.global.locale, message);
  } else {
    return message;
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,22 +3,53 @@ import { getConfig } from "/@/config";
 import { toRouteType } from "./types";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
-import { constantRoutes } from "./modules";
 import { findIndex } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
-import remainingRouter from "./modules/remaining";
 import { storageSession } from "/@/utils/storage";
+import { buildHierarchyTree } from "/@/utils/tree";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { Router, RouteMeta, createRouter, RouteRecordName } from "vue-router";
 import {
+  Router,
+  RouteMeta,
+  createRouter,
+  RouteRecordRaw,
+  RouteComponent,
+  RouteRecordName
+} from "vue-router";
+import {
+  ascending,
  initRouter,
  getHistoryMode,
  getParentPaths,
  findRouteByPath,
-  handleAliveRoute
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
 } from "./utils";

+import homeRouter from "./modules/home";
+import errorRouter from "./modules/error";
+import remainingRouter from "./modules/remaining";
+
+// 原始静态路由（未做任何处理）
+const routes = [homeRouter, errorRouter];
+
+// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
+export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+);
+
+// 用于渲染菜单，保持原始层级
+export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
+  ...remainingRouter
+);
+
+// 不参与菜单的路由
+export const remainingPaths = Object.keys(remainingRouter).map(v => {
+  return remainingRouter[v].path;
+});
+
 // 创建路由实例
 export const router: Router = createRouter({
  history: getHistoryMode(),
@@ -59,11 +90,8 @@ router.beforeEach((to: toRouteType, _from, next) => {
      if (!item.meta.title) return "";
      const Title = getConfig().Title;
      if (Title)
-        document.title = `${transformI18n(
-          item.meta.title,
-          item.meta?.i18n
-        )} | ${Title}`;
-      else document.title = transformI18n(item.meta.title, item.meta?.i18n);
+        document.title = `${transformI18n(item.meta.title)} | ${Title}`;
+      else document.title = transformI18n(item.meta.title);
    });
  if (name) {
    if (_from?.name) {
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -8,7 +8,6 @@ const errorRouter = {
  meta: {
    icon: "information-line",
    title: $t("menus.hserror"),
-    i18n: true,
    rank: 9
  },
  children: [
@@ -17,8 +16,7 @@ const errorRouter = {
      name: "403",
      component: () => import("/@/views/error/403.vue"),
      meta: {
-        title: $t("menus.hsfourZeroOne"),
-        i18n: true
+        title: $t("menus.hsfourZeroOne")
      }
    },
    {
@@ -26,8 +24,7 @@ const errorRouter = {
      name: "404",
      component: () => import("/@/views/error/404.vue"),
      meta: {
-        title: $t("menus.hsfourZeroFour"),
-        i18n: true
+        title: $t("menus.hsfourZeroFour")
      }
    },
    {
@@ -35,8 +32,7 @@ const errorRouter = {
      name: "500",
      component: () => import("/@/views/error/500.vue"),
      meta: {
-        title: $t("menus.hsFive"),
-        i18n: true
+        title: $t("menus.hsFive")
      }
    }
  ]
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -9,7 +9,6 @@ const homeRouter = {
  meta: {
    icon: "home-filled",
    title: $t("menus.hshome"),
-    i18n: true,
    rank: 0
  },
  children: [
@@ -18,8 +17,7 @@ const homeRouter = {
      name: "welcome",
      component: () => import("/@/views/welcome.vue"),
      meta: {
-        title: $t("menus.hshome"),
-        i18n: true
+        title: $t("menus.hshome")
      }
    }
  ]
--- a/src/router/modules/index.ts
+++ b/src/router/modules/index.ts
@@ -1,30 +0,0 @@
-// 静态路由
-import homeRouter from "./home";
-import errorRouter from "./error";
-import remainingRouter from "./remaining";
-import { RouteRecordRaw, RouteComponent } from "vue-router";
-
-import {
-  ascending,
-  formatTwoStageRoutes,
-  formatFlatteningRoutes
-} from "../utils";
-import { buildHierarchyTree } from "/@/utils/tree";
-
-// 原始静态路由（未做任何处理）
-const routes = [homeRouter, errorRouter];
-
-// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
-export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
-  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
-);
-
-// 用于渲染菜单，保持原始层级
-export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
-  ...remainingRouter
-);
-
-// 不参与菜单的路由
-export const remainingPaths = Object.keys(remainingRouter).map(v => {
-  return remainingRouter[v].path;
-});
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -5,11 +5,10 @@ const remainingRouter = [
  {
    path: "/login",
    name: "login",
-    component: () => import("/@/views/login.vue"),
+    component: () => import("/@/views/login/index.vue"),
    meta: {
      title: $t("menus.hslogin"),
      showLink: false,
-      i18n: true,
      rank: 101
    }
  },
@@ -19,7 +18,6 @@ const remainingRouter = [
    meta: {
      icon: "home-filled",
      title: $t("menus.hshome"),
-      i18n: true,
      showLink: false,
      rank: 104
    },
--- a/src/router/utils.ts
+++ b/src/router/utils.ts
@@ -234,7 +234,11 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
    } else if (v.meta?.frameSrc) {
      v.component = IFrame;
    } else {
-      const index = modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
+      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会根path保持一致）
+      const index = v?.component
+        ? // @ts-expect-error
+          modulesRoutesKeys.findIndex(ev => ev.includes(v.component))
+        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
      v.component = modulesRoutes[modulesRoutesKeys[index]];
    }
    if (v.children) {
--- a/src/store/modules/multiTags.ts
+++ b/src/store/modules/multiTags.ts
@@ -17,8 +17,7 @@ export const useMultiTagsStore = defineStore({
            parentPath: "/",
            meta: {
              title: "menus.hshome",
-              icon: "home-filled",
-              i18n: true
+              icon: "home-filled"
            }
          }
        ],
@@ -89,7 +88,13 @@ export const useMultiTagsStore = defineStore({
          }
          break;
        case "splice":
-          this.multiTags.splice(position?.startIndex, position?.length);
+          if (!position) {
+            const index = this.multiTags.findIndex(v => v.path === value);
+            if (index === -1) return;
+            this.multiTags.splice(index, 1);
+          } else {
+            this.multiTags.splice(position?.startIndex, position?.length);
+          }
          this.tagsCache(this.multiTags);
          return this.multiTags;
        case "slice":
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { cacheType } from "./types";
+import { constantMenus } from "/@/router";
 import { cloneDeep } from "lodash-unified";
 import { RouteConfigs } from "/@/layout/types";
-import { constantMenus } from "/@/router/modules";
 import { ascending, filterTree } from "/@/router/utils";

 export const usePermissionStore = defineStore({
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -38,4 +38,6 @@ export type setType = {
 export type userType = {
  token: string;
  name?: string;
+  verifyCode?: string;
+  currentPage?: number;
 };
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { userType } from "./types";
 import { router } from "/@/router";
+import { storageSession } from "/@/utils/storage";
 import { getLogin, refreshToken } from "/@/api/user";
-import { storageLocal, storageSession } from "/@/utils/storage";
 import { getToken, setToken, removeToken } from "/@/utils/auth";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";

@@ -22,7 +22,11 @@ export const useUserStore = defineStore({
  id: "pure-user",
  state: (): userType => ({
    token,
-    name
+    name,
+    // 前端生成的验证码（按实际需求替换）
+    verifyCode: "",
+    // 登陆显示组件判断 0：登陆 1：手机登陆 2：二维码登陆 3：注册 4：忘记密码，默认0：登陆
+    currentPage: 0
  }),
  actions: {
    SET_TOKEN(token) {
@@ -31,6 +35,12 @@ export const useUserStore = defineStore({
    SET_NAME(name) {
      this.name = name;
    },
+    SET_VERIFYCODE(verifyCode) {
+      this.verifyCode = verifyCode;
+    },
+    SET_CURRENTPAGE(value) {
+      this.currentPage = value;
+    },
    // 登入
    async loginByUsername(data) {
      return new Promise<void>((resolve, reject) => {
@@ -51,7 +61,6 @@ export const useUserStore = defineStore({
      this.token = "";
      this.name = "";
      removeToken();
-      storageLocal.clear();
      storageSession.clear();
      useMultiTagsStoreHook().handleTags("equal", [
        {
@@ -59,8 +68,7 @@ export const useUserStore = defineStore({
          parentPath: "/",
          meta: {
            title: "menus.hshome",
-            icon: "home-filled",
-            i18n: true
+            icon: "home-filled"
          }
        }
      ]);
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -36,18 +36,18 @@
  z-index: 99999 !important;
 }

-// 自定义popover的类名
+/* 重置button中icon的margin */
+.reset-margin [class*="el-icon"] + span {
+  margin-left: 2px !important;
+}
+
+/* 自定义popover的类名 */
 .pure-popper {
  padding: 0 !important;
 }

 /* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
-.el-button--primary {
-  --el-button-active-bg-color: var(--el-color-primary-active) !important;
-  --el-button-active-border-color: var(--el-color-primary-active) !important;
-}
-
-/* button--primary plain */
+.el-button--primary,
 .el-button--primary.is-plain {
  --el-button-active-bg-color: var(--el-color-primary) !important;
  --el-button-active-border-color: var(--el-color-primary) !important;
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -7,8 +7,6 @@
 body {
  width: 100%;
  height: 100%;
-  margin: 0;
-  padding: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
@@ -27,50 +25,6 @@ html {
  height: 100%;
 }

-label {
-  font-weight: 700;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-a:focus,
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-
-div:focus {
-  outline: none;
-}
-
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.clearfix {
-  &::after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-}
-
 /* 头部用户信息样式重置 */
 .hidden {
  display: none !important;
--- a/src/style/login.css
+++ b/src/style/login.css
@@ -47,148 +47,11 @@
  font: bold 200% Consolas, Monaco, monospace;
 }

-.input-group {
-  position: relative;
-  display: grid;
-  grid-template-columns: 7% 93%;
-  margin: 25px 0;
-  padding: 5px 0;
-  border-bottom: 2px solid #d9d9d9;
-}
-
-.input-group:nth-child(1) {
-  margin-bottom: 4px;
-}
-
-.input-group::before,
-.input-group::after {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  width: 0;
-  height: 2px;
-  background-color: #c5d3f7;
-  transition: 0.5s;
-}
-
-.input-group::after {
-  right: 50%;
-}
-
-.input-group::before {
-  left: 50%;
-}
-
-.icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.icon svg {
-  color: #d9d9d9;
-  transition: 0.5s;
-}
-
-.input-group > div {
-  position: relative;
-  height: 45px;
-}
-
-.input-group > div > h5 {
-  position: absolute;
-  left: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: #d9d9d9;
-  font-size: 18px;
-  transition: 0.3s;
-  margin: 0;
-  padding: 0;
-}
-
-.input-group.focus .icon svg {
-  color: #5392f0;
-}
-
-.input-group.focus div h5 {
-  top: -5px;
-  font-size: 15px;
-}
-
-.input-group.focus::after,
-.input-group.focus::before {
-  width: 50%;
-}
-
-.input {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border: none;
-  outline: none;
-  background: none;
-  padding: 0.5rem 0.7rem;
-  font-size: 1.2rem;
-  color: #555;
-  font-family: "Roboto", sans-serif;
-}
-
-a {
-  display: block;
-  text-align: right;
-  text-decoration: none;
-  color: #999;
-  font-size: 0.9rem;
-  transition: 0.3s;
-}
-
-a:hover {
-  color: #5392f0;
-}
-
-.btn {
-  display: block;
-  width: 100%;
-  height: 50px;
-  border-radius: 25px;
-  margin: 1rem 0;
-  font-size: 1.2rem;
-  outline: none;
-  border: none;
-  background-image: linear-gradient(to right, #567dbe, #5392f0, #567dbe);
-  cursor: pointer;
-  color: #fff;
-  text-transform: uppercase;
-  font-family: "Roboto", sans-serif;
-  background-size: 200%;
-  transition: 0.5s;
-}
-
-.btn:hover {
-  background-position: right;
-}
-
-.copyright {
-  position: absolute;
-  width: 100%;
-  height: 50px;
-  bottom: 2px;
-  color: #5392f0;
-  text-align: center;
-  font-size: 18px;
-  font-family: "Roboto", sans-serif;
-}
-
-@media screen and (max-width: 1080px) {
+@media screen and (max-width: 1180px) {
  .login-container {
    grid-gap: 9rem;
  }
-}

-@media screen and (max-width: 1024px) {
  .login-form {
    width: 290px;
  }
@@ -208,7 +71,7 @@ a:hover {
  }
 }

-@media screen and (max-width: 768px) {
+@media screen and (max-width: 968px) {
  .wave {
    display: none;
  }
--- a/src/style/reset.scss
+++ b/src/style/reset.scss
@@ -0,0 +1,406 @@
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  tab-size: 4; /* 3 */
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+Ensure the default browser behavior of the `hidden` attribute.
+*/
+
+[hidden] {
+  display: none;
+}
+
+.dark {
+  color-scheme: dark;
+}
+
+label {
+  font-weight: 700;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &::after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -1,5 +1,3 @@
-@import "../layout/theme/default-vars.scss";
-
@mixin merge-style(
  /* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth
 ) {
@@ -16,13 +14,27 @@
    }
  }

+  .sub-menu-icon {
+    vertical-align: middle;
+    margin-right: 5px;
+    font-size: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
  .main-container {
    height: 100vh;
    min-height: 100%;
-    transition: margin-left 0.28s;
+    transition: margin-left 0.1s;
    margin-left: $sideBarWidth;
    position: relative;
    background: #f0f2f5;
+
+    .el-scrollbar__wrap {
+      overflow: auto;
+      height: 100%;
+    }
  }

  .fixed-header {
@@ -31,7 +43,7 @@
    right: 0;
    z-index: 998;
    width: calc(100% - 210px);
-    transition: width 0.28s;
+    transition: width 0.1s;
  }

  .main-hidden {
@@ -51,7 +63,7 @@
  }

  .sidebar-container {
-    transition: width 0.28s;
+    transition: width 0.1s;
    width: $sideBarWidth !important;
    background: $menuBg;
    height: 100%;
@@ -243,7 +255,6 @@
      }

      .el-dropdown-link {
-        width: 100px;
        height: 48px;
        padding: 10px;
        display: flex;
@@ -477,11 +488,6 @@
    }
  }

-  .el-scrollbar__wrap {
-    overflow: auto;
-    height: 100%;
-  }
-
  .el-menu--collapse .el-menu .el-sub-menu {
    min-width: $sideBarWidth !important;
  }
@@ -492,8 +498,8 @@
    > .el-sub-menu__title::before {
    position: absolute;
    top: 0;
-    left: 0;
-    width: 3px;
+    left: 2px;
+    width: 2px;
    height: 100%;
    background-color: $menuActiveBefore;
    content: "";
@@ -506,7 +512,7 @@
  .el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
    position: absolute;
    top: 0;
-    width: 3px;
+    width: 2px;
    height: 100%;
    background-color: $menuActiveBefore;
    content: "";
@@ -530,7 +536,7 @@
  .mobile {
    .fixed-header {
      width: 100% !important;
-      transition: width 0.28s;
+      transition: width 0.1s;
    }

    .main-container {
@@ -538,7 +544,7 @@
    }

    .sidebar-container {
-      transition: transform 0.28s;
+      transition: transform 0.1s;
      width: $sideBarWidth;
    }

@@ -575,7 +581,7 @@ body[layout="vertical"] {
  .hideSidebar {
    .fixed-header {
      width: calc(100% - 54px);
-      transition: width 0.28s;
+      transition: width 0.1s;
    }

    .sidebar-container {
@@ -609,17 +615,25 @@ body[layout="vertical"] {
        }
      }

-      /* 有无子菜单 */
-      .el-sub-menu__title,
-      .el-menu-item [class^="el-icon"] {
-        right: 5px;
-      }
-
      .submenu-title-noDropdown {
        background: transparent !important;
      }
+
+      /* 有无子菜单 */
+      .el-sub-menu__title,
+      .el-menu-item [class^="el-icon"] {
+        right: 2px;
+      }
+
+      .el-menu-tooltip__trigger {
+        padding: 0 18px;
+      }
    }
  }
+
+  .sub-menu-icon {
+    width: 24px;
+  }
 }

 body[layout="horizontal"] {
@@ -643,7 +657,7 @@ body[layout="mix"] {
  .hideSidebar {
    .fixed-header {
      width: calc(100% - 54px);
-      transition: width 0.28s;
+      transition: width 0.1s;
    }

    .sidebar-container {
--- a/src/utils/debounce/index.ts
+++ b/src/utils/debounce/index.ts
@@ -1,12 +1,39 @@
+import { unref } from "vue";
+import type { Ref } from "vue";
+
+type FunctionArgs<Args extends any[] = any[], Return = void> = (
+  ...args: Args
+) => Return;
+
+type MaybeRef<T> = T | Ref<T>;
+
 // 延迟函数
 export const delay = (timeout: number) =>
  new Promise(resolve => setTimeout(resolve, timeout));

-// 防抖函数
-export const debounce = (fn: () => Fn, timeout: number) => {
+/**
+ * 防抖函数
+ * @param fn 函数
+ * @param timeout 延迟时间
+ * @param immediate 是否立即执行
+ * @returns
+ */
+export const debounce = <T extends FunctionArgs>(
+  fn: T,
+  timeout: MaybeRef<number> = 200,
+  immediate = false
+) => {
  let timmer: TimeoutHandle;
+  const wait = unref(timeout);
  return () => {
-    timmer ? clearTimeout(timmer) : null;
-    timmer = setTimeout(fn, timeout);
+    timmer && clearTimeout(timmer);
+    if (immediate) {
+      if (!timmer) {
+        fn();
+      }
+      timmer = setTimeout(() => (timmer = null), wait);
+    } else {
+      timmer = setTimeout(fn, wait);
+    }
  };
 };
--- a/src/utils/is.ts
+++ b/src/utils/is.ts
@@ -1,4 +1,3 @@
-/* eslint-disable */
 const toString = Object.prototype.toString;

 export function is(val: unknown, type: string) {
@@ -94,9 +93,26 @@ export const isServer = typeof window === "undefined";

 export const isClient = !isServer;

-export function isUrl<T>(path: T): boolean {
+/** url链接正则 */
+export function isUrl<T>(value: T): boolean {
  const reg =
+    // eslint-disable-next-line no-useless-escape
    /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
  // @ts-expect-error
-  return reg.test(path);
+  return reg.test(value);
+}
+
+/** 手机号码正则 */
+export function isPhone<T>(value: T): boolean {
+  const reg =
+    /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
+  // @ts-expect-error
+  return reg.test(value);
+}
+
+/** 邮箱正则 */
+export function isEmail<T>(value: T): boolean {
+  const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
+  // @ts-expect-error
+  return reg.test(value);
 }
--- a/src/utils/storage/responsive.ts
+++ b/src/utils/storage/responsive.ts
@@ -46,7 +46,6 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
                parentPath: "/",
                meta: {
                  title: "menus.hshome",
-                  i18n: true,
                  icon: "home-filled"
                }
              }
--- a/src/utils/tree.ts
+++ b/src/utils/tree.ts
@@ -65,3 +65,111 @@ export function buildHierarchyTree(menuTree, pathList = []) {
  }
  return menuTree;
 }
+
+/**
+ * 广度优先遍历算法，找当前节点
+ * @param {Array} tree 原始树，数组
+ * @param {Number|String} uniqueId 唯一uniqueId
+ * @return {Object} node
+ */
+export function getNodeByUniqueId(menuTree, uniqueId) {
+  if (!Array.isArray(menuTree)) {
+    console.warn("menuTree must be an array");
+    return;
+  }
+  if (!menuTree || menuTree.length === 0) return;
+  const item = menuTree.find(node => node.uniqueId === uniqueId);
+  if (item) return item;
+  const childrenList = menuTree
+    .filter(node => node.children)
+    .map(i => i.children)
+    .flat(1);
+  return getNodeByUniqueId(childrenList, uniqueId);
+}
+
+/**
+ * 向当前唯一uniqueId节点追加字段
+ * @param {Array} {menuTree 菜单树}
+ * @param {Number|String} uniqueId 唯一uniqueId
+ * @param {Object} fields 唯一uniqueId
+ * @return {menuTree} 追加字段后的树
+ */
+export function appendFieldByUniqueId(
+  menuTree: Array<any>,
+  uniqueId: Number | String,
+  fields: Object
+) {
+  if (!Array.isArray(menuTree)) {
+    console.warn("menuTree must be an array");
+    return;
+  }
+  if (!menuTree || menuTree.length === 0) return {};
+  for (const node of menuTree) {
+    const hasChildren = node.children && node.children.length > 0;
+    if (
+      node.uniqueId === uniqueId &&
+      Object.prototype.toString.call(fields) === "[object Object]"
+    )
+      Object.assign(node, fields);
+    if (hasChildren) {
+      appendFieldByUniqueId(node.children, uniqueId, fields);
+    }
+  }
+  return menuTree;
+}
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export function handleTree(
+  data,
+  id?: string,
+  parentId?: string,
+  children?: string
+) {
+  const config = {
+    id: id || "id",
+    parentId: parentId || "parentId",
+    childrenList: children || "children"
+  };
+
+  const childrenListMap = {};
+  const nodeIds = {};
+  const tree = [];
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+}
--- a/src/utils/useComponent.ts
+++ b/src/utils/useComponent.ts
@@ -0,0 +1,4 @@
+import { h, resolveComponent } from "vue";
+
+export const dynamicComponent = (component: string) =>
+  h(resolveComponent(component));
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,152 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useRouter } from "vue-router";
-import { initRouter } from "/@/router/utils";
-import { storageSession } from "/@/utils/storage";
-import { addClass, removeClass } from "/@/utils/operate";
-import bg from "/@/assets/login/bg.png";
-import avatar from "/@/assets/login/avatar.svg?component";
-import illustration from "/@/assets/login/illustration.svg?component";
-
-const router = useRouter();
-
-let user = ref("admin");
-let pwd = ref("123456");
-
-const onLogin = (): void => {
-  storageSession.setItem("info", {
-    username: "admin",
-    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-  });
-  initRouter("admin").then(() => {});
-  router.push("/");
-};
-
-function onUserFocus() {
-  addClass(document.querySelector(".user"), "focus");
-}
-
-function onUserBlur() {
-  if (user.value.length === 0)
-    removeClass(document.querySelector(".user"), "focus");
-}
-
-function onPwdFocus() {
-  addClass(document.querySelector(".pwd"), "focus");
-}
-
-function onPwdBlur() {
-  if (pwd.value.length === 0)
-    removeClass(document.querySelector(".pwd"), "focus");
-}
-</script>
-
-<template>
-  <img :src="bg" class="wave" />
-  <div class="login-container">
-    <div class="img">
-      <illustration />
-    </div>
-    <div class="login-box">
-      <div class="login-form">
-        <avatar class="avatar" />
-        <h2
-          v-motion
-          :initial="{
-            opacity: 0,
-            y: 100
-          }"
-          :enter="{
-            opacity: 1,
-            y: 0,
-            transition: {
-              delay: 100
-            }
-          }"
-        >
-          Pure Admin
-        </h2>
-        <div
-          class="input-group user focus"
-          v-motion
-          :initial="{
-            opacity: 0,
-            y: 100
-          }"
-          :enter="{
-            opacity: 1,
-            y: 0,
-            transition: {
-              delay: 200
-            }
-          }"
-        >
-          <div class="icon">
-            <IconifyIconOffline icon="fa-user" width="14" height="14" />
-          </div>
-          <div>
-            <h5>用户名</h5>
-            <input
-              type="text"
-              class="input"
-              v-model="user"
-              @focus="onUserFocus"
-              @blur="onUserBlur"
-            />
-          </div>
-        </div>
-        <div
-          class="input-group pwd focus"
-          v-motion
-          :initial="{
-            opacity: 0,
-            y: 100
-          }"
-          :enter="{
-            opacity: 1,
-            y: 0,
-            transition: {
-              delay: 300
-            }
-          }"
-        >
-          <div class="icon">
-            <IconifyIconOffline icon="fa-lock" width="14" height="14" />
-          </div>
-          <div>
-            <h5>密码</h5>
-            <input
-              type="password"
-              class="input"
-              v-model="pwd"
-              @focus="onPwdFocus"
-              @blur="onPwdBlur"
-            />
-          </div>
-        </div>
-        <button
-          class="btn"
-          v-motion
-          :initial="{
-            opacity: 0,
-            y: 10
-          }"
-          :enter="{
-            opacity: 1,
-            y: 0,
-            transition: {
-              delay: 400
-            }
-          }"
-          @click="onLogin"
-        >
-          登录
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@import url("/@/style/login.css");
-</style>
--- a/src/views/login/components/phone.vue
+++ b/src/views/login/components/phone.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { phoneRules } from "../utils/rule";
+import { message } from "@pureadmin/components";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { useUserStoreHook } from "/@/store/modules/user";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+
+const loading = ref(false);
+const ruleForm = reactive({
+  phone: "",
+  verifyCode: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+
+const onLogin = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 模拟登陆请求，需根据实际开发进行修改
+      setTimeout(() => {
+        message.success("登陆成功");
+        loading.value = false;
+      }, 2000);
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
+    <Motion>
+      <el-form-item prop="phone">
+        <el-input
+          clearable
+          v-model="ruleForm.phone"
+          placeholder="手机号码"
+          :prefix-icon="useRenderIcon('iphone')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            clearable
+            v-model="ruleForm.verifyCode"
+            placeholder="短信验证码"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{ text }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onLogin(ruleFormRef)"
+        >
+          登陆
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          返回
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>
--- a/src/views/login/components/qrCode.vue
+++ b/src/views/login/components/qrCode.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Motion from "../utils/motion";
+import ReQrcode from "/@/components/ReQrcode";
+import { useUserStoreHook } from "/@/store/modules/user";
+</script>
+
+<template>
+  <Motion class="-mt-2 -mb-2"> <ReQrcode text="模拟测试" /> </Motion>
+  <Motion :delay="100">
+    <el-divider>
+      <p class="text-gray-500 text-xs">扫码后点击"确认"，即可完成登录</p>
+    </el-divider>
+  </Motion>
+  <Motion :delay="150">
+    <el-button
+      class="w-full mt-4"
+      @click="useUserStoreHook().SET_CURRENTPAGE(0)"
+    >
+      返回
+    </el-button>
+  </Motion>
+</template>
--- a/src/views/login/components/regist.vue
+++ b/src/views/login/components/regist.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { updateRules } from "../utils/rule";
+import { message } from "@pureadmin/components";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { useUserStoreHook } from "/@/store/modules/user";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+
+const checked = ref(false);
+const loading = ref(false);
+const ruleForm = reactive({
+  username: "",
+  phone: "",
+  verifyCode: "",
+  password: "",
+  repeatPassword: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+const repeatPasswordRule = [
+  {
+    validator: (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入确认密码"));
+      } else if (ruleForm.password !== value) {
+        callback(new Error("两次密码不一致!"));
+      } else {
+        callback();
+      }
+    },
+    trigger: "blur"
+  }
+];
+
+const onUpdate = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (checked.value) {
+        // 模拟请求，需根据实际开发进行修改
+        setTimeout(() => {
+          message.success("注册成功");
+          loading.value = false;
+        }, 2000);
+      } else {
+        loading.value = false;
+        message.warning("请勾选隐私政策");
+      }
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="updateRules"
+    size="large"
+  >
+    <Motion>
+      <el-form-item
+        :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]"
+        prop="username"
+      >
+        <el-input
+          clearable
+          v-model="ruleForm.username"
+          placeholder="账号"
+          :prefix-icon="useRenderIcon('user')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="phone">
+        <el-input
+          clearable
+          v-model="ruleForm.phone"
+          placeholder="手机号码"
+          :prefix-icon="useRenderIcon('iphone')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            clearable
+            v-model="ruleForm.verifyCode"
+            placeholder="短信验证码"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{ text }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item prop="password">
+        <el-input
+          clearable
+          show-password
+          v-model="ruleForm.password"
+          placeholder="密码"
+          :prefix-icon="useRenderIcon('lock')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="250">
+      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
+        <el-input
+          clearable
+          show-password
+          v-model="ruleForm.repeatPassword"
+          placeholder="确认密码"
+          :prefix-icon="useRenderIcon('lock')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="300">
+      <el-form-item>
+        <el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
+        <el-button type="text"> 《隐私政策》 </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="350">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onUpdate(ruleFormRef)"
+        >
+          确定
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="400">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          返回
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>
--- a/src/views/login/components/update.vue
+++ b/src/views/login/components/update.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { updateRules } from "../utils/rule";
+import { message } from "@pureadmin/components";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { useUserStoreHook } from "/@/store/modules/user";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+
+const loading = ref(false);
+const ruleForm = reactive({
+  phone: "",
+  verifyCode: "",
+  password: "",
+  repeatPassword: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+const repeatPasswordRule = [
+  {
+    validator: (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入确认密码"));
+      } else if (ruleForm.password !== value) {
+        callback(new Error("两次密码不一致!"));
+      } else {
+        callback();
+      }
+    },
+    trigger: "blur"
+  }
+];
+
+const onUpdate = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 模拟请求，需根据实际开发进行修改
+      setTimeout(() => {
+        message.success("修改密码成功");
+        loading.value = false;
+      }, 2000);
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="updateRules"
+    size="large"
+  >
+    <Motion>
+      <el-form-item prop="phone">
+        <el-input
+          clearable
+          v-model="ruleForm.phone"
+          placeholder="手机号码"
+          :prefix-icon="useRenderIcon('iphone')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            clearable
+            v-model="ruleForm.verifyCode"
+            placeholder="短信验证码"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{ text }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item prop="password">
+        <el-input
+          clearable
+          show-password
+          v-model="ruleForm.password"
+          placeholder="密码"
+          :prefix-icon="useRenderIcon('lock')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
+        <el-input
+          clearable
+          show-password
+          v-model="ruleForm.repeatPassword"
+          placeholder="确认密码"
+          :prefix-icon="useRenderIcon('lock')"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="250">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onUpdate(ruleFormRef)"
+        >
+          确定
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="300">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          返回
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import Motion from "./utils/motion";
+import { useRouter } from "vue-router";
+import { loginRules } from "./utils/rule";
+import phone from "./components/phone.vue";
+import qrCode from "./components/qrCode.vue";
+import regist from "./components/regist.vue";
+import update from "./components/update.vue";
+import { initRouter } from "/@/router/utils";
+import { message } from "@pureadmin/components";
+import type { FormInstance } from "element-plus";
+import { storageSession } from "/@/utils/storage";
+import { ref, reactive, watch, computed } from "vue";
+import { operates, thirdParty } from "./utils/enums";
+import { useUserStoreHook } from "/@/store/modules/user";
+import { bg, avatar, currentWeek } from "./utils/static";
+import { ReImageVerify } from "/@/components/ReImageVerify";
+import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+
+const imgCode = ref("");
+const router = useRouter();
+const loading = ref(false);
+const checked = ref(false);
+const ruleFormRef = ref<FormInstance>();
+const currentPage = computed(() => {
+  return useUserStoreHook().currentPage;
+});
+
+const ruleForm = reactive({
+  username: "admin",
+  password: "admin123",
+  verifyCode: ""
+});
+
+const onLogin = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 模拟请求，需根据实际开发进行修改
+      setTimeout(() => {
+        loading.value = false;
+        storageSession.setItem("info", {
+          username: "admin",
+          accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+        });
+        initRouter("admin").then(() => {});
+        message.success("登陆成功");
+        router.push("/");
+      }, 2000);
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onHandle(value) {
+  useUserStoreHook().SET_CURRENTPAGE(value);
+}
+
+watch(imgCode, value => {
+  useUserStoreHook().SET_VERIFYCODE(value);
+});
+</script>
+
+<template>
+  <img :src="bg" class="wave" />
+  <div class="login-container">
+    <div class="img">
+      <component :is="currentWeek" />
+    </div>
+    <div class="login-box">
+      <div class="login-form">
+        <avatar class="avatar" />
+        <Motion>
+          <h2>Pure Admin</h2>
+        </Motion>
+
+        <el-form
+          v-if="currentPage === 0"
+          ref="ruleFormRef"
+          :model="ruleForm"
+          :rules="loginRules"
+          size="large"
+          @keyup.enter="onLogin(ruleFormRef)"
+        >
+          <Motion :delay="100">
+            <el-form-item prop="username">
+              <el-input
+                clearable
+                :input-style="{ 'user-select': 'none' }"
+                v-model="ruleForm.username"
+                placeholder="账号"
+                :prefix-icon="useRenderIcon('user')"
+              />
+            </el-form-item>
+          </Motion>
+
+          <Motion :delay="150">
+            <el-form-item prop="password">
+              <el-input
+                clearable
+                :input-style="{ 'user-select': 'none' }"
+                show-password
+                v-model="ruleForm.password"
+                placeholder="密码"
+                :prefix-icon="useRenderIcon('lock')"
+              />
+            </el-form-item>
+          </Motion>
+
+          <Motion :delay="200">
+            <el-form-item prop="verifyCode">
+              <el-input
+                clearable
+                :input-style="{ 'user-select': 'none' }"
+                v-model="ruleForm.verifyCode"
+                placeholder="验证码"
+              >
+                <template v-slot:append>
+                  <ReImageVerify v-model:code="imgCode" />
+                </template>
+              </el-input>
+            </el-form-item>
+          </Motion>
+
+          <Motion :delay="250">
+            <el-form-item>
+              <div class="w-full h-20px flex justify-between items-center">
+                <el-checkbox v-model="checked">记住密码</el-checkbox>
+                <el-button
+                  type="text"
+                  @click="useUserStoreHook().SET_CURRENTPAGE(4)"
+                >
+                  忘记密码?
+                </el-button>
+              </div>
+              <el-button
+                class="w-full mt-4"
+                size="default"
+                type="primary"
+                :loading="loading"
+                @click="onLogin(ruleFormRef)"
+              >
+                登录
+              </el-button>
+            </el-form-item>
+          </Motion>
+
+          <Motion :delay="300">
+            <el-form-item>
+              <div class="w-full h-20px flex justify-between items-center">
+                <el-button
+                  v-for="(item, index) in operates"
+                  :key="index"
+                  class="w-full mt-4"
+                  size="default"
+                  @click="onHandle(index + 1)"
+                >
+                  {{ item.title }}
+                </el-button>
+              </div>
+            </el-form-item>
+          </Motion>
+        </el-form>
+
+        <Motion v-if="currentPage === 0" :delay="350">
+          <el-form-item>
+            <el-divider>
+              <p class="text-gray-500 text-xs">第三方登录</p>
+            </el-divider>
+            <div class="w-full flex justify-evenly">
+              <span
+                v-for="(item, index) in thirdParty"
+                :key="index"
+                :title="`${item.title}登陆`"
+              >
+                <IconifyIconOnline
+                  :icon="`ri:${item.icon}-fill`"
+                  width="20"
+                  class="cursor-pointer text-gray-500 hover:text-blue-400"
+                />
+              </span>
+            </div>
+          </el-form-item>
+        </Motion>
+        <!-- 手机号登陆 -->
+        <phone v-if="currentPage === 1" />
+        <!-- 二维码登陆 -->
+        <qrCode v-if="currentPage === 2" />
+        <!-- 注册 -->
+        <regist v-if="currentPage === 3" />
+        <!-- 忘记密码 -->
+        <update v-if="currentPage === 4" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url("/@/style/login.css");
+</style>
+
+<style lang="scss" scoped>
+:deep(.el-input-group__append, .el-input-group__prepend) {
+  padding: 0;
+}
+</style>
--- a/src/views/login/utils/enums.ts
+++ b/src/views/login/utils/enums.ts
@@ -0,0 +1,32 @@
+const operates = [
+  {
+    title: "手机登录"
+  },
+  {
+    title: "二维码登录"
+  },
+  {
+    title: "注册"
+  }
+];
+
+const thirdParty = [
+  {
+    title: "微信",
+    icon: "wechat"
+  },
+  {
+    title: "支付宝",
+    icon: "alipay"
+  },
+  {
+    title: "QQ",
+    icon: "qq"
+  },
+  {
+    title: "微博",
+    icon: "weibo"
+  }
+];
+
+export { operates, thirdParty };
--- a/src/views/login/utils/motion.ts
+++ b/src/views/login/utils/motion.ts
@@ -0,0 +1,40 @@
+import { h, defineComponent, withDirectives, resolveDirective } from "vue";
+
+// 封装@vueuse/motion动画库中的自定义指令v-motion
+export default defineComponent({
+  name: "Motion",
+  props: {
+    delay: {
+      type: Number,
+      default: 50
+    }
+  },
+  render() {
+    const { delay } = this;
+    const motion = resolveDirective("motion");
+    return withDirectives(
+      h(
+        "div",
+        {},
+        {
+          default: () => [this.$slots.default()]
+        }
+      ),
+      [
+        [
+          motion,
+          {
+            initial: { opacity: 0, y: 100 },
+            enter: {
+              opacity: 1,
+              y: 0,
+              transition: {
+                delay
+              }
+            }
+          }
+        ]
+      ]
+    );
+  }
+});
--- a/src/views/login/utils/rule.ts
+++ b/src/views/login/utils/rule.ts
@@ -0,0 +1,128 @@
+import { reactive } from "vue";
+import { isPhone } from "/@/utils/is";
+import type { FormRules } from "element-plus";
+import { useUserStoreHook } from "/@/store/modules/user";
+
+/** 6位数字验证码正则 */
+export const REGEXP_SIX = /^\d{6}$/;
+
+/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
+export const REGEXP_PWD =
+  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+
+/** 登陆校验 */
+const loginRules = reactive(<FormRules>{
+  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
+  password: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入密码"));
+        } else if (!REGEXP_PWD.test(value)) {
+          callback(
+            new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
+          );
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入验证码"));
+        } else if (useUserStoreHook().verifyCode !== value) {
+          callback(new Error("请输入正确的验证码"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+/** 手机登陆校验 */
+const phoneRules = reactive(<FormRules>{
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入手机号码"));
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入验证码"));
+        } else if (!REGEXP_SIX.test(value)) {
+          callback(new Error("请输入6位数字验证码"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+/** 忘记密码校验 */
+const updateRules = reactive(<FormRules>{
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入手机号码"));
+        } else if (!isPhone(value)) {
+          callback(new Error("请输入正确的手机号码格式"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入验证码"));
+        } else if (!REGEXP_SIX.test(value)) {
+          callback(new Error("请输入6位数字验证码"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  password: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error("请输入密码"));
+        } else if (!REGEXP_PWD.test(value)) {
+          callback(
+            new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
+          );
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+export { loginRules, phoneRules, updateRules };
--- a/src/views/login/utils/static.ts
+++ b/src/views/login/utils/static.ts
@@ -0,0 +1,10 @@
+import { computed } from "vue";
+import bg from "/@/assets/login/bg.png";
+import avatar from "/@/assets/login/avatar.svg?component";
+import illustration from "/@/assets/login/illustration.svg?component";
+
+const currentWeek = computed(() => {
+  return illustration;
+});
+
+export { bg, avatar, currentWeek };
--- a/src/views/login/utils/verifyCode.ts
+++ b/src/views/login/utils/verifyCode.ts
@@ -0,0 +1,50 @@
+import type { FormInstance, FormItemProp } from "element-plus";
+import { cloneDeep } from "lodash-unified";
+import { ref } from "vue";
+
+const isDisabled = ref(false);
+const TEXT = "获取验证码";
+const timer = ref(null);
+const text = ref(TEXT);
+
+export const useVerifyCode = () => {
+  const start = async (
+    formEl: FormInstance | undefined,
+    props: FormItemProp,
+    time = 60
+  ) => {
+    if (!formEl) return;
+    const initTime = cloneDeep(time);
+    await formEl.validateField(props, isValid => {
+      if (isValid) {
+        clearInterval(timer.value);
+        timer.value = setInterval(() => {
+          if (time > 0) {
+            text.value = `${time}秒后重新获取`;
+            isDisabled.value = true;
+            time -= 1;
+          } else {
+            text.value = TEXT;
+            isDisabled.value = false;
+            clearInterval(timer.value);
+            time = initTime;
+          }
+        }, 1000);
+      }
+    });
+  };
+
+  const end = () => {
+    text.value = TEXT;
+    isDisabled.value = false;
+    clearInterval(timer.value);
+  };
+
+  return {
+    isDisabled,
+    timer,
+    text,
+    start,
+    end
+  };
+};
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -0,0 +1,21 @@
+import {
+  transformerVariantGroup,
+  transformerDirectives,
+  presetAttributify,
+  defineConfig,
+  presetMini,
+  presetUno
+} from "unocss";
+
+// https://github.com/unocss/unocss#readme
+export default defineConfig({
+  presets: [presetMini({ dark: "class" }), presetAttributify(), presetUno()],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+  exclude: [`${__dirname}/node_modules/**/*`],
+  shortcuts: {
+    "wh-full": "w-full h-full",
+    "flex-ac": "flex justify-around items-center",
+    "flex-bc": "flex justify-between items-center"
+  },
+  theme: {}
+});
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -39,23 +39,6 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
    resolve: {
      alias
    },
-    css: {
-      // https://github.com/vitejs/vite/issues/5833
-      postcss: {
-        plugins: [
-          {
-            postcssPlugin: "internal:charset-removal",
-            AtRule: {
-              charset: atRule => {
-                if (atRule.name === "charset") {
-                  atRule.remove();
-                }
-              }
-            }
-          }
-        ]
-      }
-    },
    // 服务端渲染
    server: {
      // 是否开启 https
@@ -78,22 +61,14 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
    },
    plugins: getPluginsList(command, VITE_LEGACY),
    optimizeDeps: {
-      include: [
-        "pinia",
-        "vue-i18n",
-        "lodash-es",
-        "@vueuse/core",
-        "@iconify/vue",
-        "element-plus/lib/locale/lang/en",
-        "element-plus/lib/locale/lang/zh-cn"
-      ],
+      include: ["pinia", "vue-i18n", "lodash-es", "@vueuse/core"],
      exclude: ["@pureadmin/theme/dist/browser-utils"]
    },
    build: {
      sourcemap: false,
      brotliSize: false,
      // 消除打包大小超过500kb警告
-      chunkSizeWarningLimit: 2000
+      chunkSizeWarningLimit: 4000
    },
    define: {
      __INTLIFY_PROD_DEVTOOLS__: false,
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -1,50 +0,0 @@
-// https://cn.windicss.org/ 中文文档
-import { defineConfig } from "windicss/helpers";
-import colors from "windicss/colors";
-import typography from "windicss/plugin/typography";
-
-export default defineConfig({
-  darkMode: "class",
-  attributify: true,
-  plugins: [typography()],
-  theme: {
-    extend: {
-      zIndex: {
-        "-1": "-1"
-      },
-      screens: {
-        sm: "576px",
-        md: "768px",
-        lg: "992px",
-        xl: "1200px",
-        "2xl": "1600px"
-      },
-      typography: {
-        DEFAULT: {
-          css: {
-            maxWidth: "65ch",
-            color: "inherit",
-            a: {
-              color: "inherit",
-              opacity: 0.75,
-              fontWeight: "500",
-              textDecoration: "underline",
-              "&:hover": {
-                opacity: 1,
-                color: colors.teal[600]
-              }
-            },
-            b: { color: "inherit" },
-            strong: { color: "inherit" },
-            em: { color: "inherit" },
-            h1: { color: "inherit" },
-            h2: { color: "inherit" },
-            h3: { color: "inherit" },
-            h4: { color: "inherit" },
-            code: { color: "inherit" }
-          }
-        }
-      }
-    }
-  }
-});
Author	SHA1	Message	Date
xiaoxian521	d9b62a9e62	perf: 同步完整版代码	2022-05-11 16:43:56 +08:00
xiaoxian521	6911688ba6	docs: update	2022-05-11 16:18:53 +08:00
xiaoxian521	45c08d779d	refactor: use `unocss` replace `windicss`	2022-05-07 11:50:06 +08:00
xiaoxian521	41b35588c5	perf: 同步完整版代码	2022-05-01 08:34:33 +08:00
xiaoxian521	0a9eb30549	perf: update	2022-04-25 22:42:55 +08:00
xiaoxian521	a7119c1cbe	perf: icon	2022-04-25 19:37:23 +08:00
xiaoxian521	5a463ccfe7	docs: update	2022-04-25 18:54:38 +08:00
xiaoxian521	73e98814e2	perf: 同步完整版代码	2022-04-25 18:46:25 +08:00
xiaoxian521	77049fdbd7	perf: 同步完整版代码	2022-04-18 11:15:46 +08:00
xiaoxian521	736f1c27cd	perf: 同步完整版代码	2022-04-10 21:22:05 +08:00
xiaoxian521	2bac78478c	perf: 同步完整版代码	2022-04-08 12:05:46 +08:00
xiaoxian521	bc8a0f3b35	perf: 同步完整版代码	2022-04-06 13:42:49 +08:00
xiaoxian521	53e19f7971	chore: update	2022-03-29 09:56:49 +08:00
xiaoxian521	abc43dad6e	chore: update	2022-03-26 17:36:05 +08:00