release: update 4.3.0

.browserslistrc

@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11

.eslintignore

@@ -0,0 +1,11 @@
+public
+dist
+*.d.ts
+/src/assets
+package.json
+.eslintrc.js
+.prettierrc.js
+commitlint.config.js
+postcss.config.js
+tailwind.config.js
+stylelint.config.js

.eslintrc.js

@@ -0,0 +1,120 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  globals: {
+    // Ref sugar (take 2)
+    $: "readonly",
+    $$: "readonly",
+    $ref: "readonly",
+    $shallowRef: "readonly",
+    $computed: "readonly",
+
+    // index.d.ts
+    // global.d.ts
+    Fn: "readonly",
+    PromiseFn: "readonly",
+    RefType: "readonly",
+    LabelValueOptions: "readonly",
+    EmitType: "readonly",
+    TargetContext: "readonly",
+    ComponentElRef: "readonly",
+    ComponentRef: "readonly",
+    ElRef: "readonly",
+    global: "readonly",
+    ForDataType: "readonly",
+    ComponentRoutes: "readonly",
+
+    // script setup
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly"
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/eslint-config-typescript"
+  ],
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2020,
+    sourceType: "module",
+    jsxPragma: "React",
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  overrides: [
+    {
+      files: ["*.ts", "*.vue"],
+      rules: {
+        "no-undef": "off"
+      }
+    },
+    {
+      files: ["*.vue"],
+      parser: "vue-eslint-parser",
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".vue"],
+        ecmaVersion: "latest",
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      rules: {
+        "no-undef": "off"
+      }
+    }
+  ],
+  rules: {
+    "vue/no-v-html": "off",
+    "vue/require-default-prop": "off",
+    "vue/require-explicit-emits": "off",
+    "vue/multi-word-component-names": "off",
+    "@typescript-eslint/no-explicit-any": "off", // any
+    "no-debugger": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off", // setup()
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          void: "always",
+          normal: "always",
+          component: "always"
+        },
+        svg: "always",
+        math: "always"
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_"
+      }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_"
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        endOfLine: "auto"
+      }
+    ]
+  }
+};

.gitignore

@@ -4,8 +4,8 @@ dist
 dist-ssr
 *.local
 .eslintcache
+.stylelintcache
 report.html
-vite.config.*.timestamp*
 
 yarn.lock
 npm-debug.log*

.husky/commit-msg

@@ -3,6 +3,4 @@
 # shellcheck source=./_/husky.sh
 . "$(dirname "$0")/_/husky.sh"
 
-PATH="/usr/local/bin:$PATH"
-
 npx --no-install commitlint --edit "$1"

.husky/lintstagedrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
+  "{!(package)*.json}": ["prettier --write--parser json"],
+  "package.json": ["prettier --write"],
+  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
+  "*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],
+  "*.md": ["prettier --write"]
+};

.husky/pre-commit

@@ -4,7 +4,7 @@
 
 [ -n "$CI" ] && exit 0
 
-PATH="/usr/local/bin:$PATH"
+# Format and submit code according to lintstagedrc.js configuration
+npm run lint:lint-staged
 
-# Perform lint check on files in the staging area through .lintstagedrc configuration
-pnpm exec lint-staged
+npm run lint:pretty

.lintstagedrc

@@ -1,20 +0,0 @@
-{
-  "*.{js,jsx,ts,tsx}": [
-    "prettier --cache --ignore-unknown  --write",
-    "eslint --cache --fix"
-  ],
-  "{!(package)*.json,*.code-snippets,.!({browserslist,npm,nvm})*rc}": [
-    "prettier --cache --write--parser json"
-  ],
-  "package.json": ["prettier --cache --write"],
-  "*.vue": [
-    "prettier --write",
-    "eslint --cache --fix",
-    "stylelint --fix --allow-empty-input"
-  ],
-  "*.{css,scss,html}": [
-    "prettier --cache --ignore-unknown --write",
-    "stylelint --fix --allow-empty-input"
-  ],
-  "*.md": ["prettier --cache --ignore-unknown --write"]
-}

.npmrc

@@ -1,4 +1,3 @@
-shell-emulator=true
 shamefully-hoist=true
-enable-pre-post-scripts=false
 strict-peer-dependencies=false
+shell-emulator=true

.nvmrc

@@ -1 +0,0 @@
-v22.20.0

.prettierrc.js

@@ -1,7 +1,4 @@
-// @ts-check
-
-/** @type {import("prettier").Config} */
-export default {
+module.exports = {
   bracketSpacing: true,
   singleQuote: false,
   arrowParens: "avoid",

.vscode/extensions.json

@@ -1,15 +1,12 @@
 {
   "recommendations": [
     "christian-kohler.path-intellisense",
-    "warmthsea.vscode-custom-code-color",
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
-    "ms-azuretools.vscode-docker",
     "stylelint.vscode-stylelint",
     "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "lokalise.i18n-ally",
     "redhat.vscode-yaml",
     "csstools.postcss",
     "mikestead.dotenv",

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "tailwindCSS.experimental.configFile": "src/style/tailwind.css",
   "editor.formatOnType": true,
   "editor.formatOnSave": true,
   "[vue]": {
@@ -26,32 +25,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": true
   },
-  "i18n-ally.localesPaths": "locales",
-  "i18n-ally.keystyle": "nested",
-  "i18n-ally.sortKeys": true,
-  "i18n-ally.namespace": true,
-  "i18n-ally.enabledParsers": [
-    "yaml",
-    "js"
-  ],
-  "i18n-ally.sourceLanguage": "en",
-  "i18n-ally.displayLanguage": "zh-CN",
-  "i18n-ally.enabledFrameworks": [
-    "vue"
-  ],
-  "iconify.excludes": [
-    "el"
-  ],
-  "vscodeCustomCodeColor.highlightValue": [
-    "v-loading",
-    "v-auth",
-    "v-copy",
-    "v-longpress",
-    "v-optimize",
-    "v-perms",
-    "v-ripple"
-  ],
-  "vscodeCustomCodeColor.highlightValueColor": "#b392f0",
+  "iconify.excludes": ["el"]
 }

Dockerfile

@@ -1,8 +1,8 @@
-FROM node:20-alpine as build-stage
+FROM node:16-alpine as build-stage
 
 WORKDIR /app
 RUN corepack enable
-RUN corepack prepare pnpm@latest --activate
+RUN corepack prepare pnpm@7.32.1 --activate
 
 RUN npm config set registry https://registry.npmmirror.com
 

README.en-US.md

@@ -1,4 +1,4 @@
-<h1>vue-pure-admin Lite Edition（i18n version）</h1>
+<h1>vue-pure-admin Lite Edition（no i18n version）</h1>
 
 [![license](https://img.shields.io/github/license/pure-admin/vue-pure-admin.svg)](LICENSE)
 
@@ -8,23 +8,18 @@
 
 The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
 
-## Supporting video
+## Supporting Video
 
-[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)  
-[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
+- [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
+- [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
 
-## Nanny-level documents
+## Docs
 
-[Click me to view vue-pure-admin documentation](https://pure-admin.cn/)  
-[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
-
-## Premium service
-
-[Click me to view details](https://pure-admin.cn/pages/service/)
+- [documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
 
 ## Preview
 
-[Click me to view the preview station](https://pure-admin-thin.netlify.app/#/login)
+- [Click me to view the preview station](https://pure-admin-thin.netlify.app/#/login)
 
 ## Maintainer
 
@@ -32,8 +27,10 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
 
 ## ⚠️ Attention
 
-The Lite version does not accept any issues and prs. If you have any questions, please go to the full version [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) to mention, thank you!
+- The Lite version does not accept any issues and prs. If you have any questions, please go to the full version [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) to mention, thank you!
 
 ## License
 
+In principle, no fees and copyrights are charged, and it is commercially available, but if you need secondary open source (such as using this platform for secondary development and open source, the front-end code must be open source and free), please contact the author for permission! (Free, just take a record)
+
 [MIT © 2020-present, pure-admin](./LICENSE)

README.md

@@ -1,4 +1,4 @@
-<h1>vue-pure-admin精简版（国际化版本）</h1>
+<h1>vue-pure-admin精简版（非国际化版本）</h1>
 
 [![license](https://img.shields.io/github/license/pure-admin/vue-pure-admin.svg)](LICENSE)
 
@@ -10,25 +10,20 @@
 
 ## 版本选择
 
-当前是国际化版本，如果您需要非国际化版本 [请点击](https://github.com/pure-admin/pure-admin-thin)
+当前是非国际化版本，如果您需要国际化版本 [请点击](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
 
 ## 配套视频
 
-[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)  
-[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
+- [点我查看教程](https://www.bilibili.com/video/BV1kg411v7QT)
+- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
 
 ## 配套保姆级文档
 
-[点我查看 vue-pure-admin 文档](https://pure-admin.cn/)  
-[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
-
-## 高级服务
-
-[点我查看详情](https://pure-admin.cn/pages/service/)
+- [查看文档](https://yiming_chang.gitee.io/pure-admin-doc)
 
 ## 预览
 
-[查看预览](https://pure-admin-thin.netlify.app/#/login)
+- [查看预览](https://pure-admin-thin.netlify.app/#/login)
 
 ## 维护者
 
@@ -36,8 +31,10 @@
 
 ## ⚠️ 注意
 
-精简版不接受任何 `issues` 和 `pr`，如果有问题请到完整版 [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 去提，谢谢！
+- 精简版不接受任何 `issues` 和 `pr`，如果有问题请到完整版 [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 去提，谢谢！
 
 ## 许可证
 
+原则上不收取任何费用及版权，可商用，不过如需二次开源（比如用此平台二次开发并开源，要求前端代码必须开源免费）请联系作者获取许可！（免费，走个记录而已）
+
 [MIT © 2020-present, pure-admin](./LICENSE)

build/cdn.ts

@@ -3,6 +3,7 @@ import { Plugin as importToCDN } from "vite-plugin-cdn-import";
 /**
  * @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
  * 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
+ * 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求
  * 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
  */
 export const cdn = importToCDN({
@@ -19,11 +20,6 @@ export const cdn = importToCDN({
       var: "VueRouter",
       path: "vue-router.global.min.js"
     },
-    {
-      name: "vue-i18n",
-      var: "VueI18n",
-      path: "vue-i18n.runtime.global.prod.min.js"
-    },
     // 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77）
     {
       name: "vue-demi",

build/index.ts

@@ -0,0 +1,31 @@
+/** 处理环境变量 */
+const warpperEnv = (envConf: Recordable): ViteEnv => {
+  /** 此处为默认值 */
+  const ret: ViteEnv = {
+    VITE_PORT: 8848,
+    VITE_PUBLIC_PATH: "",
+    VITE_ROUTER_HISTORY: "",
+    VITE_CDN: false,
+    VITE_HIDE_HOME: "false",
+    VITE_COMPRESSION: "none"
+  };
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, "\n");
+    realName =
+      realName === "true" ? true : realName === "false" ? false : realName;
+
+    if (envName === "VITE_PORT") {
+      realName = Number(realName);
+    }
+    ret[envName] = realName;
+    if (typeof realName === "string") {
+      process.env[envName] = realName;
+    } else if (typeof realName === "object") {
+      process.env[envName] = JSON.stringify(realName);
+    }
+  }
+  return ret;
+};
+
+export { warpperEnv };

build/info.ts

@@ -1,21 +1,10 @@
 import type { Plugin } from "vite";
-import gradient from "gradient-string";
-import { getPackageSize } from "./utils";
-import dayjs, { type Dayjs } from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
+import utils from "@pureadmin/utils";
 import duration from "dayjs/plugin/duration";
-import boxen, { type Options as BoxenOptions } from "boxen";
+import { green, blue, bold } from "picocolors";
 dayjs.extend(duration);
 
-const welcomeMessage = gradient(["cyan", "magenta"]).multiline(
-  `您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://pure-admin.cn\nhttps://pure-admin-utils.netlify.app`
-);
-
-const boxenOptions: BoxenOptions = {
-  padding: 0.5,
-  borderColor: "cyan",
-  borderStyle: "round"
-};
-
 export function viteBuildInfo(): Plugin {
   let config: { command: string };
   let startTime: Dayjs;
@@ -28,7 +17,15 @@ export function viteBuildInfo(): Plugin {
       outDir = resolvedConfig.build?.outDir ?? "dist";
     },
     buildStart() {
-      console.log(boxen(welcomeMessage, boxenOptions));
+      console.log(
+        bold(
+          green(
+            `👏欢迎使用${blue(
+              "[vue-pure-admin]"
+            )}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/pure-admin/vue-pure-admin`
+          )
+        )
+      );
       if (config.command === "build") {
         startTime = dayjs(new Date());
       }
@@ -36,17 +33,16 @@ export function viteBuildInfo(): Plugin {
     closeBundle() {
       if (config.command === "build") {
         endTime = dayjs(new Date());
-        getPackageSize({
+        utils.getPackageSize({
           folder: outDir,
           callback: (size: string) => {
             console.log(
-              boxen(
-                gradient(["cyan", "magenta"]).multiline(
-                  `🎉 恭喜打包完成（总用时${dayjs
+              bold(
+                green(
+                  `🎉恭喜打包完成（总用时${dayjs
                     .duration(endTime.diff(startTime))
                     .format("mm分ss秒")}，打包后的大小为${size}）`
-                ),
-                boxenOptions
+                )
               )
             );
           }

build/optimize.ts

@@ -10,21 +10,22 @@ const include = [
   "dayjs",
   "axios",
   "pinia",
-  "vue-i18n",
-  "vue-types",
   "js-cookie",
-  "vue-tippy",
-  "pinyin-pro",
   "sortablejs",
   "@vueuse/core",
   "@pureadmin/utils",
-  "responsive-storage"
+  "responsive-storage",
+  "element-resize-detector"
 ];
 
 /**
  * 在预构建中强制排除的依赖项
- * 温馨提示：平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
+ * 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
  */
-const exclude = ["@iconify/json"];
+const exclude = [
+  "@iconify-icons/ep",
+  "@iconify-icons/ri",
+  "@pureadmin/theme/dist/browser-utils"
+];
 
 export { include, exclude };

build/plugins.ts

@@ -1,71 +1,56 @@
 import { cdn } from "./cdn";
 import vue from "@vitejs/plugin-vue";
-import { pathResolve } from "./utils";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
-import Icons from "unplugin-icons/vite";
-import type { PluginOption } from "vite";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import tailwindcss from "@tailwindcss/vite";
+import { viteMockServe } from "vite-plugin-mock";
 import { configCompressPlugin } from "./compress";
-import removeNoMatch from "vite-plugin-router-warn";
+// import ElementPlus from "unplugin-element-plus/vite";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
-import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
-import { codeInspectorPlugin } from "code-inspector-plugin";
-import { vitePluginFakeServer } from "vite-plugin-fake-server";
+import themePreprocessorPlugin from "@pureadmin/theme";
+import { genScssMultipleScopeVars } from "../src/layout/theme";
 
 export function getPluginsList(
+  command: string,
   VITE_CDN: boolean,
   VITE_COMPRESSION: ViteCompression
-): PluginOption[] {
+) {
+  const prodMock = true;
   const lifecycle = process.env.npm_lifecycle_event;
   return [
-    tailwindcss(),
     vue(),
     // jsx、tsx语法支持
     vueJsx(),
-    VueI18nPlugin({
-      include: [pathResolve("../locales/**")]
-    }),
-    /**
-     * 在页面上按住组合键时，鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息，点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置
-     * Mac 默认组合键 Option + Shift
-     * Windows 默认组合键 Alt + Shift
-     * 更多用法看 https://inspector.fe-dev.cn/guide/start.html
-     */
-    codeInspectorPlugin({
-      bundler: "vite",
-      hideConsole: true
-    }),
-    viteBuildInfo(),
-    /**
-     * 开发环境下移除非必要的vue-router动态路由警告No match found for location with path
-     * 非必要具体看 https://github.com/vuejs/router/issues/521 和 https://github.com/vuejs/router/issues/359
-     * vite-plugin-router-warn只在开发环境下启用，只处理vue-router文件并且只在服务启动或重启时运行一次，性能消耗可忽略不计
-     */
-    removeNoMatch(),
-    // mock支持
-    vitePluginFakeServer({
-      logger: false,
-      include: "mock",
-      infixName: false,
-      enableProd: true
-    }),
-    // svg组件化支持
-    svgLoader(),
-    // 自动按需加载图标
-    Icons({
-      compiler: "vue3",
-      scale: 1
-    }),
     VITE_CDN ? cdn : null,
     configCompressPlugin(VITE_COMPRESSION),
     // 线上环境删除console
     removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
+    viteBuildInfo(),
+    // 自定义主题
+    themePreprocessorPlugin({
+      scss: {
+        multipleScopeVars: genScssMultipleScopeVars(),
+        extract: true
+      }
+    }),
+    // svg组件化支持
+    svgLoader(),
+    // ElementPlus({}),
+    // mock支持
+    viteMockServe({
+      mockPath: "mock",
+      localEnabled: command === "serve",
+      prodEnabled: command !== "serve" && prodMock,
+      injectCode: `
+          import { setupProdMockServer } from './mockProdServer';
+          setupProdMockServer();
+        `,
+      logger: false
+    }),
     // 打包分析
     lifecycle === "report"
       ? visualizer({ open: true, brotliSize: true, filename: "report.html" })
-      : (null as any)
+      : null
   ];
 }

build/utils.ts

@@ -1,110 +0,0 @@
-import dayjs from "dayjs";
-import { readdir, stat } from "node:fs";
-import { fileURLToPath } from "node:url";
-import { dirname, resolve } from "node:path";
-import { sum, formatBytes } from "@pureadmin/utils";
-import {
-  name,
-  version,
-  engines,
-  dependencies,
-  devDependencies
-} from "../package.json";
-
-/** 启动`node`进程时所在工作目录的绝对路径 */
-const root: string = process.cwd();
-
-/**
- * @description 根据可选的路径片段生成一个新的绝对路径
- * @param dir 路径片段，默认`build`
- * @param metaUrl 模块的完整`url`，如果在`build`目录外调用必传`import.meta.url`
- */
-const pathResolve = (dir = ".", metaUrl = import.meta.url) => {
-  // 当前文件目录的绝对路径
-  const currentFileDir = dirname(fileURLToPath(metaUrl));
-  // build 目录的绝对路径
-  const buildDir = resolve(currentFileDir, "build");
-  // 解析的绝对路径
-  const resolvedPath = resolve(currentFileDir, dir);
-  // 检查解析的绝对路径是否在 build 目录内
-  if (resolvedPath.startsWith(buildDir)) {
-    // 在 build 目录内，返回当前文件路径
-    return fileURLToPath(metaUrl);
-  }
-  // 不在 build 目录内，返回解析后的绝对路径
-  return resolvedPath;
-};
-
-/** 设置别名 */
-const alias: Record<string, string> = {
-  "@": pathResolve("../src"),
-  "@build": pathResolve()
-};
-
-/** 平台的名称、版本、运行所需的`node`和`pnpm`版本、依赖、最后构建时间的类型提示 */
-const __APP_INFO__ = {
-  pkg: { name, version, engines, dependencies, devDependencies },
-  lastBuildTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
-};
-
-/** 处理环境变量 */
-const wrapperEnv = (envConf: Recordable): ViteEnv => {
-  // 默认值
-  const ret: ViteEnv = {
-    VITE_PORT: 8848,
-    VITE_PUBLIC_PATH: "",
-    VITE_ROUTER_HISTORY: "",
-    VITE_CDN: false,
-    VITE_HIDE_HOME: "false",
-    VITE_COMPRESSION: "none"
-  };
-
-  for (const envName of Object.keys(envConf)) {
-    let realName = envConf[envName].replace(/\\n/g, "\n");
-    realName =
-      realName === "true" ? true : realName === "false" ? false : realName;
-
-    if (envName === "VITE_PORT") {
-      realName = Number(realName);
-    }
-    ret[envName] = realName;
-    if (typeof realName === "string") {
-      process.env[envName] = realName;
-    } else if (typeof realName === "object") {
-      process.env[envName] = JSON.stringify(realName);
-    }
-  }
-  return ret;
-};
-
-const fileListTotal: number[] = [];
-
-/** 获取指定文件夹中所有文件的总大小 */
-const getPackageSize = options => {
-  const { folder = "dist", callback, format = true } = options;
-  readdir(folder, (err, files: string[]) => {
-    if (err) throw err;
-    let count = 0;
-    const checkEnd = () => {
-      ++count == files.length &&
-        callback(format ? formatBytes(sum(fileListTotal)) : sum(fileListTotal));
-    };
-    files.forEach((item: string) => {
-      stat(`${folder}/${item}`, async (err, stats) => {
-        if (err) throw err;
-        if (stats.isFile()) {
-          fileListTotal.push(stats.size);
-          checkEnd();
-        } else if (stats.isDirectory()) {
-          getPackageSize({
-            folder: `${folder}/${item}/`,
-            callback: checkEnd
-          });
-        }
-      });
-    });
-    files.length === 0 && callback(0);
-  });
-};
-
-export { root, pathResolve, alias, __APP_INFO__, wrapperEnv, getPackageSize };

commitlint.config.js

@@ -1,7 +1,4 @@
-// @ts-check
-
-/** @type {import("@commitlint/types").UserConfig} */
-export default {
+module.exports = {
   ignores: [commit => commit.includes("init")],
   extends: ["@commitlint/config-conventional"],
   rules: {

eslint.config.js

@@ -1,173 +0,0 @@
-import js from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginVue from "eslint-plugin-vue";
-import * as parserVue from "vue-eslint-parser";
-import configPrettier from "eslint-config-prettier";
-import pluginPrettier from "eslint-plugin-prettier";
-import { defineConfig, globalIgnores } from "eslint/config";
-
-export default defineConfig([
-  globalIgnores([
-    "**/.*",
-    "dist/*",
-    "*.d.ts",
-    "public/*",
-    "src/assets/**",
-    "src/**/iconfont/**"
-  ]),
-  {
-    ...js.configs.recommended,
-    languageOptions: {
-      globals: {
-        // types/index.d.ts
-        RefType: "readonly",
-        EmitType: "readonly",
-        TargetContext: "readonly",
-        ComponentRef: "readonly",
-        ElRef: "readonly",
-        ForDataType: "readonly",
-        AnyFunction: "readonly",
-        PropType: "readonly",
-        Writable: "readonly",
-        Nullable: "readonly",
-        NonNullable: "readonly",
-        Recordable: "readonly",
-        ReadonlyRecordable: "readonly",
-        Indexable: "readonly",
-        DeepPartial: "readonly",
-        Without: "readonly",
-        Exclusive: "readonly",
-        TimeoutHandle: "readonly",
-        IntervalHandle: "readonly",
-        Effect: "readonly",
-        ChangeEvent: "readonly",
-        WheelEvent: "readonly",
-        ImportMetaEnv: "readonly",
-        Fn: "readonly",
-        PromiseFn: "readonly",
-        ComponentElRef: "readonly",
-        parseInt: "readonly",
-        parseFloat: "readonly"
-      }
-    },
-    plugins: {
-      prettier: pluginPrettier
-    },
-    rules: {
-      ...configPrettier.rules,
-      ...pluginPrettier.configs.recommended.rules,
-      "no-debugger": "off",
-      "no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_"
-        }
-      ],
-      "prettier/prettier": [
-        "error",
-        {
-          endOfLine: "auto"
-        }
-      ]
-    }
-  },
-  ...tseslint.config({
-    extends: [...tseslint.configs.recommended],
-    files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
-    rules: {
-      "@typescript-eslint/no-redeclare": "error",
-      "@typescript-eslint/ban-ts-comment": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/prefer-as-const": "warn",
-      "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/no-non-null-assertion": "off",
-      "@typescript-eslint/no-unused-expressions": "off",
-      "@typescript-eslint/no-unsafe-function-type": "off",
-      "@typescript-eslint/no-import-type-side-effects": "error",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "@typescript-eslint/consistent-type-imports": [
-        "error",
-        { disallowTypeAnnotations: false, fixStyle: "inline-type-imports" }
-      ],
-      "@typescript-eslint/prefer-literal-enum-member": [
-        "error",
-        { allowBitwiseExpressions: true }
-      ],
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_"
-        }
-      ]
-    }
-  }),
-  {
-    files: ["**/*.d.ts"],
-    rules: {
-      "eslint-comments/no-unlimited-disable": "off",
-      "import/no-duplicates": "off",
-      "no-restricted-syntax": "off",
-      "unused-imports/no-unused-vars": "off"
-    }
-  },
-  {
-    files: ["**/*.?([cm])js"],
-    rules: {
-      "@typescript-eslint/no-require-imports": "off"
-    }
-  },
-  {
-    files: ["**/*.vue"],
-    languageOptions: {
-      globals: {
-        $: "readonly",
-        $$: "readonly",
-        $computed: "readonly",
-        $customRef: "readonly",
-        $ref: "readonly",
-        $shallowRef: "readonly",
-        $toRef: "readonly"
-      },
-      parser: parserVue,
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true
-        },
-        extraFileExtensions: [".vue"],
-        parser: tseslint.parser,
-        sourceType: "module"
-      }
-    },
-    plugins: {
-      "@typescript-eslint": tseslint.plugin,
-      vue: pluginVue
-    },
-    processor: pluginVue.processors[".vue"],
-    rules: {
-      ...pluginVue.configs.base.rules,
-      ...pluginVue.configs.essential.rules,
-      ...pluginVue.configs.recommended.rules,
-      "no-undef": "off",
-      "no-unused-vars": "off",
-      "vue/no-v-html": "off",
-      "vue/require-default-prop": "off",
-      "vue/require-explicit-emits": "off",
-      "vue/multi-word-component-names": "off",
-      "vue/no-setup-props-reactivity-loss": "off",
-      "vue/html-self-closing": [
-        "error",
-        {
-          html: {
-            void: "always",
-            normal: "always",
-            component: "always"
-          },
-          svg: "always",
-          math: "always"
-        }
-      ]
-    }
-  }
-]);

index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -10,6 +10,9 @@
     />
     <title>pure-admin-thin</title>
     <link rel="icon" href="/favicon.ico" />
+    <script>
+      window.process = {};
+    </script>
   </head>
 
   <body>

locales/en.yaml

@@ -1,91 +0,0 @@
-buttons:
-  pureLoginOut: LoginOut
-  pureLogin: Login
-  pureOpenSystemSet: Open System Configs
-  pureReload: Reload
-  pureCloseCurrentTab: Close CurrentTab
-  pureCloseLeftTabs: Close LeftTabs
-  pureCloseRightTabs: Close RightTabs
-  pureCloseOtherTabs: Close OtherTabs
-  pureCloseAllTabs: Close AllTabs
-  pureContentFullScreen: Content FullScreen
-  pureContentExitFullScreen: Content ExitFullScreen
-  pureClickCollapse: Collapse
-  pureClickExpand: Expand
-  pureConfirm: Confirm
-  pureSwitch: Switch
-  pureClose: Close
-  pureBackTop: BackTop
-  pureOpenText: Open
-  pureCloseText: Close
-search:
-  pureTotal: Total
-  pureHistory: History
-  pureCollect: Collect
-  pureDragSort: （Drag Sort）
-  pureEmpty: Empty
-  purePlaceholder: Search Menu
-panel:
-  pureSystemSet: System Configs
-  pureCloseSystemSet: Close System Configs
-  pureClearCacheAndToLogin: Clear cache and return to login page
-  pureClearCache: Clear Cache
-  pureOverallStyle: Overall Style
-  pureOverallStyleLight: Light
-  pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
-  pureOverallStyleDark: Dark
-  pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
-  pureOverallStyleSystem: Auto
-  pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
-  pureThemeColor: Theme Color
-  pureLayoutModel: Layout Model
-  pureVerticalTip: The menu on the left is familiar and friendly
-  pureHorizontalTip: Top menu, concise overview
-  pureMixTip: Mixed menu, flexible
-  pureStretch: Stretch Page
-  pureStretchFixed: Fixed
-  pureStretchFixedTip: Compact pages make it easy to find the information you need
-  pureStretchCustom: Custom
-  pureStretchCustomTip: Minimum 1280, maximum 1600
-  pureTagsStyle: Tags Style
-  pureTagsStyleSmart: Smart
-  pureTagsStyleSmartTip: Smart tags add fun and brilliance
-  pureTagsStyleCard: Card
-  pureTagsStyleCardTip: Card tags for efficient browsing
-  pureTagsStyleChrome: Chrome
-  pureTagsStyleChromeTip: Chrome style is classic and elegant
-  pureInterfaceDisplay: Interface Display
-  pureGreyModel: Grey Model
-  pureWeakModel: Weak Model
-  pureHiddenTags: Hidden Tags
-  pureHiddenFooter: Hidden Footer
-  pureMultiTagsCache: MultiTags Cache
-menus:
-  pureHome: Home
-  pureLogin: Login
-  pureAbnormal: Abnormal Page
-  purePageNotFound: "404"
-  pureAccessDenied: "403"
-  pureServerError: "500"
-  purePermission: Permission Manage
-  purePermissionPage: Page Permission
-  purePermissionButton: Button Permission
-  purePermissionButtonRouter: Route return button permission
-  purePermissionButtonLogin: Login interface return button permission
-status:
-  pureLoad: Loading...
-  pureMessage: Message
-  pureNotify: Notify
-  pureTodo: Todo
-  pureNoMessage: No Message
-  pureNoNotify: No Notify
-  pureNoTodo: No Todo
-login:
-  pureUsername: Username
-  purePassword: Password
-  pureLogin: Login
-  pureLoginSuccess: Login Success
-  pureLoginFail: Login Fail
-  pureUsernameReg: Please enter username
-  purePassWordReg: Please enter password
-  purePassWordRuleReg: The password format should be any combination of 8-18 digits

locales/zh-CN.yaml

@@ -1,91 +0,0 @@
-buttons:
-  pureLoginOut: 退出系统
-  pureLogin: 登录
-  pureOpenSystemSet: 打开系统配置
-  pureReload: 重新加载
-  pureCloseCurrentTab: 关闭当前标签页
-  pureCloseLeftTabs: 关闭左侧标签页
-  pureCloseRightTabs: 关闭右侧标签页
-  pureCloseOtherTabs: 关闭其他标签页
-  pureCloseAllTabs: 关闭全部标签页
-  pureContentFullScreen: 内容区全屏
-  pureContentExitFullScreen: 内容区退出全屏
-  pureClickCollapse: 点击折叠
-  pureClickExpand: 点击展开
-  pureConfirm: 确认
-  pureSwitch: 切换
-  pureClose: 关闭
-  pureBackTop: 回到顶部
-  pureOpenText: 开
-  pureCloseText: 关
-search:
-  pureTotal: 共
-  pureHistory: 搜索历史
-  pureCollect: 收藏
-  pureDragSort: （可拖拽排序）
-  pureEmpty: 暂无搜索结果
-  purePlaceholder: 搜索菜单（支持拼音搜索）
-panel:
-  pureSystemSet: 系统配置
-  pureCloseSystemSet: 关闭配置
-  pureClearCacheAndToLogin: 清空缓存并返回登录页
-  pureClearCache: 清空缓存
-  pureOverallStyle: 整体风格
-  pureOverallStyleLight: 浅色
-  pureOverallStyleLightTip: 清新启航，点亮舒适的工作界面
-  pureOverallStyleDark: 深色
-  pureOverallStyleDarkTip: 月光序曲，沉醉于夜的静谧雅致
-  pureOverallStyleSystem: 自动
-  pureOverallStyleSystemTip: 同步时光，界面随晨昏自然呼应
-  pureThemeColor: 主题色
-  pureLayoutModel: 导航模式
-  pureVerticalTip: 左侧菜单，亲切熟悉
-  pureHorizontalTip: 顶部菜单，简洁概览
-  pureMixTip: 混合菜单，灵活多变
-  pureStretch: 页宽
-  pureStretchFixed: 固定
-  pureStretchFixedTip: 紧凑页面，轻松找到所需信息
-  pureStretchCustom: 自定义
-  pureStretchCustomTip: 最小1280、最大1600
-  pureTagsStyle: 页签风格
-  pureTagsStyleSmart: 灵动
-  pureTagsStyleSmartTip: 灵动标签，添趣生辉
-  pureTagsStyleCard: 卡片
-  pureTagsStyleCardTip: 卡片标签，高效浏览
-  pureTagsStyleChrome: 谷歌
-  pureTagsStyleChromeTip: 谷歌风格，经典美观
-  pureInterfaceDisplay: 界面显示
-  pureGreyModel: 灰色模式
-  pureWeakModel: 色弱模式
-  pureHiddenTags: 隐藏标签页
-  pureHiddenFooter: 隐藏页脚
-  pureMultiTagsCache: 页签持久化
-menus:
-  pureHome: 首页
-  pureLogin: 登录
-  pureAbnormal: 异常页面
-  purePageNotFound: "404"
-  pureAccessDenied: "403"
-  pureServerError: "500"
-  purePermission: 权限管理
-  purePermissionPage: 页面权限
-  purePermissionButton: 按钮权限
-  purePermissionButtonRouter: 路由返回按钮权限
-  purePermissionButtonLogin: 登录接口返回按钮权限
-status:
-  pureLoad: 加载中...
-  pureMessage: 消息
-  pureNotify: 通知
-  pureTodo: 待办
-  pureNoMessage: 暂无消息
-  pureNoNotify: 暂无通知
-  pureNoTodo: 暂无待办
-login:
-  pureUsername: 账号
-  purePassword: 密码
-  pureLogin: 登录
-  pureLoginSuccess: 登录成功
-  pureLoginFail: 登录失败
-  pureUsernameReg: 请输入账号
-  purePassWordReg: 请输入密码
-  purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合

mock/asyncRoutes.ts

@@ -1,16 +1,17 @@
 // 模拟后端动态生成路由
-import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { MockMethod } from "vite-plugin-mock";
 
 /**
  * roles：页面级别权限，这里模拟二种 "admin"、"common"
  * admin：管理员角色
  * common：普通角色
  */
+
 const permissionRouter = {
   path: "/permission",
   meta: {
-    title: "menus.purePermission",
-    icon: "ep:lollipop",
+    title: "权限管理",
+    icon: "lollipop",
     rank: 10
   },
   children: [
@@ -18,46 +19,25 @@ const permissionRouter = {
       path: "/permission/page/index",
       name: "PermissionPage",
       meta: {
-        title: "menus.purePermissionPage",
+        title: "页面权限",
         roles: ["admin", "common"]
       }
     },
     {
-      path: "/permission/button",
+      path: "/permission/button/index",
+      name: "PermissionButton",
       meta: {
-        title: "menus.purePermissionButton",
-        roles: ["admin", "common"]
-      },
-      children: [
-        {
-          path: "/permission/button/router",
-          component: "permission/button/index",
-          name: "PermissionButtonRouter",
-          meta: {
-            title: "menus.purePermissionButtonRouter",
-            auths: [
-              "permission:btn:add",
-              "permission:btn:edit",
-              "permission:btn:delete"
-            ]
+        title: "按钮权限",
+        roles: ["admin", "common"],
+        auths: ["btn_add", "btn_edit", "btn_delete"]
       }
-        },
-        {
-          path: "/permission/button/login",
-          component: "permission/button/perms",
-          name: "PermissionButtonLogin",
-          meta: {
-            title: "menus.purePermissionButtonLogin"
-          }
-        }
-      ]
     }
   ]
 };
 
-export default defineFakeRoute([
+export default [
   {
-    url: "/get-async-routes",
+    url: "/getAsyncRoutes",
     method: "get",
     response: () => {
       return {
@@ -66,4 +46,4 @@ export default defineFakeRoute([
       };
     }
   }
-]);
+] as MockMethod[];

mock/login.ts

@@ -1,7 +1,7 @@
 // 根据角色动态生成路由
-import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { MockMethod } from "vite-plugin-mock";
 
-export default defineFakeRoute([
+export default [
   {
     url: "/login",
     method: "post",
@@ -10,33 +10,27 @@ export default defineFakeRoute([
         return {
           success: true,
           data: {
-            avatar: "https://avatars.githubusercontent.com/u/44761321",
             username: "admin",
-            nickname: "小铭",
             // 一个用户可能有多个角色
             roles: ["admin"],
-            // 按钮级别权限
-            permissions: ["*:*:*"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
-            expires: "2030/10/30 00:00:00"
+            expires: "2023/10/30 00:00:00"
           }
         };
       } else {
         return {
           success: true,
           data: {
-            avatar: "https://avatars.githubusercontent.com/u/52823142",
             username: "common",
-            nickname: "小林",
+            // 一个用户可能有多个角色
             roles: ["common"],
-            permissions: ["permission:btn:add", "permission:btn:edit"],
             accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
-            expires: "2030/10/30 00:00:00"
+            expires: "2023/10/30 00:00:00"
           }
         };
       }
     }
   }
-]);
+] as MockMethod[];

mock/refreshToken.ts

@@ -1,9 +1,9 @@
-import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { MockMethod } from "vite-plugin-mock";
 
 // 模拟刷新token接口
-export default defineFakeRoute([
+export default [
   {
-    url: "/refresh-token",
+    url: "/refreshToken",
     method: "post",
     response: ({ body }) => {
       if (body.refreshToken) {
@@ -13,7 +13,7 @@ export default defineFakeRoute([
             accessToken: "eyJhbGciOiJIUzUxMiJ9.newAdmin",
             refreshToken: "eyJhbGciOiJIUzUxMiJ9.newAdminRefresh",
             // `expires`选择这种日期格式是为了方便调试，后端直接设置时间戳或许更方便（每次都应该递增）。如果后端返回的是时间戳格式，前端开发请来到这个目录`src/utils/auth.ts`，把第`38`行的代码换成expires = data.expires即可。
-            expires: "2030/10/30 23:59:59"
+            expires: "2023/10/30 23:59:59"
           }
         };
       } else {
@@ -24,4 +24,4 @@ export default defineFakeRoute([
       }
     }
   }
-]);
+] as MockMethod[];

package.json

@@ -1,8 +1,7 @@
 {
   "name": "pure-admin-thin",
-  "version": "6.2.0",
+  "version": "4.3.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
     "serve": "pnpm dev",
@@ -12,153 +11,126 @@
     "preview": "vite preview",
     "preview:build": "pnpm build && vite preview",
     "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
-    "svgo": "svgo -f . -r",
-    "clean:cache": "rimraf .eslintcache && rimraf pnpm-lock.yaml && rimraf node_modules && pnpm store prune && pnpm install",
+    "svgo": "svgo -f src/assets/svg -o src/assets/svg",
+    "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
+    "clean:cache": "rimraf node_modules && rimraf .eslintcache && pnpm install",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
-    "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/",
+    "lint:stylelint": "stylelint \"**/*.{html,vue,css,scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
+    "lint:pretty": "pretty-quick --staged",
     "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
-    "prepare": "husky",
+    "prepare": "husky install",
     "preinstall": "npx only-allow pnpm"
   },
-  "keywords": [
-    "pure-admin-thin",
-    "vue-pure-admin",
-    "element-plus",
-    "tailwindcss",
-    "pure-admin",
-    "typescript",
-    "pinia",
-    "vue3",
-    "vite",
-    "esm"
+  "browserslist": [
+    "> 1%",
+    "not ie 11",
+    "not op_mini all"
   ],
-  "homepage": "https://github.com/pure-admin/pure-admin-thin/tree/i18n",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pure-admin/pure-admin-thin.git"
-  },
-  "bugs": {
-    "url": "https://github.com/pure-admin/vue-pure-admin/issues"
-  },
-  "license": "MIT",
-  "author": {
-    "name": "xiaoxian521",
-    "email": "pureadmin@163.com",
-    "url": "https://github.com/xiaoxian521"
-  },
   "dependencies": {
-    "@pureadmin/descriptions": "^1.2.1",
-    "@pureadmin/table": "^3.3.0",
-    "@pureadmin/utils": "^2.6.2",
-    "@vueuse/core": "^14.0.0",
-    "@vueuse/motion": "^3.0.3",
+    "@pureadmin/descriptions": "^1.1.1",
+    "@pureadmin/table": "^2.2.0",
+    "@pureadmin/utils": "^1.9.3",
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/motion": "^2.0.0",
     "animate.css": "^4.1.1",
-    "axios": "^1.12.2",
-    "dayjs": "^1.11.18",
-    "echarts": "^6.0.0",
-    "element-plus": "^2.11.5",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "echarts": "^5.4.2",
+    "element-plus": "^2.3.6",
+    "element-resize-detector": "^1.2.4",
     "js-cookie": "^3.0.5",
-    "localforage": "^1.10.0",
-    "mitt": "^3.0.1",
+    "mitt": "^3.0.0",
+    "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "path-browserify": "^1.0.1",
-    "pinia": "^3.0.3",
-    "pinyin-pro": "^3.27.0",
-    "qs": "^6.14.0",
+    "path": "^0.12.7",
+    "pinia": "^2.1.3",
+    "qs": "^6.11.2",
     "responsive-storage": "^2.2.0",
-    "sortablejs": "^1.15.6",
-    "vue": "^3.5.22",
-    "vue-i18n": "^11.1.12",
-    "vue-router": "^4.6.3",
-    "vue-tippy": "^6.7.1",
-    "vue-types": "^6.0.0"
+    "sortablejs": "^1.15.0",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.2",
+    "vue-types": "^5.0.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@commitlint/types": "^20.0.0",
-    "@eslint/js": "^9.38.0",
-    "@faker-js/faker": "^10.1.0",
-    "@iconify/json": "^2.2.400",
-    "@iconify/vue": "4.2.0",
-    "@intlify/unplugin-vue-i18n": "^11.0.1",
-    "@tailwindcss/vite": "^4.1.16",
-    "@types/js-cookie": "^3.0.6",
-    "@types/node": "^20.19.23",
-    "@types/nprogress": "^0.2.3",
-    "@types/path-browserify": "^1.0.3",
-    "@types/qs": "^6.14.0",
-    "@types/sortablejs": "^1.15.9",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vitejs/plugin-vue-jsx": "^5.1.1",
-    "boxen": "^8.0.1",
-    "code-inspector-plugin": "^1.2.10",
-    "cssnano": "^7.1.1",
-    "eslint": "^9.38.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-vue": "^10.5.1",
-    "gradient-string": "^3.0.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.6",
-    "postcss": "^8.5.6",
-    "postcss-html": "^1.8.0",
-    "postcss-load-config": "^6.0.1",
-    "postcss-scss": "^4.0.9",
-    "prettier": "^3.6.2",
-    "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.5",
-    "sass": "^1.93.2",
-    "stylelint": "^16.25.0",
-    "stylelint-config-recess-order": "^7.4.0",
-    "stylelint-config-recommended-vue": "^1.6.1",
-    "stylelint-config-standard-scss": "^14.0.0",
-    "stylelint-prettier": "^5.0.3",
-    "svgo": "^4.0.0",
-    "tailwindcss": "^4.1.16",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.2",
-    "unplugin-icons": "^22.5.0",
-    "vite": "^7.1.12",
-    "vite-plugin-cdn-import": "^1.0.1",
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
+    "@iconify-icons/ep": "^1.2.11",
+    "@iconify-icons/ri": "^1.2.8",
+    "@iconify/vue": "^4.1.1",
+    "@pureadmin/theme": "^3.0.0",
+    "@types/element-resize-detector": "1.1.3",
+    "@types/js-cookie": "^3.0.3",
+    "@types/mockjs": "^1.0.7",
+    "@types/node": "^20.2.5",
+    "@types/nprogress": "0.2.0",
+    "@types/qs": "^6.9.7",
+    "@types/sortablejs": "^1.15.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.8",
+    "@typescript-eslint/parser": "^5.59.8",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "autoprefixer": "^10.4.14",
+    "cloc": "^2.11.0",
+    "cssnano": "^6.0.1",
+    "eslint": "^8.42.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.14.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "picocolors": "^1.0.0",
+    "postcss": "^8.4.24",
+    "postcss-html": "^1.5.0",
+    "postcss-import": "^15.1.0",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "rimraf": "^5.0.1",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.3.1",
+    "stylelint": "^15.6.3",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-recommended": "^12.0.0",
+    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^3.0.0",
+    "stylelint-scss": "^5.0.0",
+    "svgo": "^3.0.2",
+    "tailwindcss": "^3.3.2",
+    "terser": "^5.17.7",
+    "typescript": "5.0.4",
+    "vite": "^4.3.9",
+    "vite-plugin-cdn-import": "^0.3.5",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-fake-server": "^2.2.0",
-    "vite-plugin-remove-console": "^2.2.0",
-    "vite-plugin-router-warn": "^1.0.0",
-    "vite-svg-loader": "^5.1.0",
-    "vue-eslint-parser": "^10.2.0",
-    "vue-tsc": "^3.1.2"
-  },
-  "engines": {
-    "node": "^20.19.0 || >=22.13.0",
-    "pnpm": ">=9"
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-remove-console": "^2.1.1",
+    "vite-svg-loader": "^4.0.0",
+    "vue-eslint-parser": "^9.3.0",
+    "vue-tsc": "^1.6.5"
   },
   "pnpm": {
-    "allowedDeprecatedVersions": {
-      "are-we-there-yet": "*",
-      "sourcemap-codec": "*",
-      "lodash.isequal": "*",
-      "domexception": "*",
-      "w3c-hr-time": "*",
-      "inflight": "*",
-      "npmlog": "*",
-      "rimraf": "*",
-      "stable": "*",
-      "gauge": "*",
-      "abab": "*",
-      "glob": "*"
-    },
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "core-js",
-      "es5-ext",
-      "esbuild",
-      "typeit",
-      "vue-demi"
-    ],
-    "ignoredBuiltDependencies": [
-      "@tailwindcss/oxide"
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "rollup",
+        "webpack",
+        "core-js"
       ]
+    },
+    "allowedDeprecatedVersions": {
+      "sourcemap-codec": "*",
+      "w3c-hr-time": "*",
+      "stable": "*"
     }
+  },
+  "repository": "git@github.com:pure-admin/pure-admin-thin.git",
+  "author": "xiaoxian521",
+  "license": "MIT"
 }

postcss.config.js

@@ -1,8 +1,9 @@
-// @ts-check
-
-/** @type {import('postcss-load-config').Config} */
-export default {
+module.exports = {
   plugins: {
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    tailwindcss: {},
+    autoprefixer: {},
     ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
   }
 };

public/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>

public/serverConfig.json

@@ -1,27 +1,22 @@
 {
-  "Version": "6.2.0",
+  "Version": "4.3.0",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,
   "MultiTagsCache": false,
   "KeepAlive": true,
-  "Locale": "zh",
   "Layout": "vertical",
-  "Theme": "light",
+  "Theme": "default",
   "DarkMode": false,
-  "OverallStyle": "light",
   "Grey": false,
   "Weak": false,
   "HideTabs": false,
-  "HideFooter": false,
-  "Stretch": false,
   "SidebarStatus": true,
   "EpThemeColor": "#409EFF",
   "ShowLogo": true,
   "ShowModel": "smart",
-  "MenuArrowIconNoTransition": false,
+  "MenuArrowIconNoTransition": true,
   "CachingAsyncRoutes": false,
   "TooltipEffect": "light",
-  "ResponsiveStorageNameSpace": "responsive-",
-  "MenuSearchHistory": 6
+  "ResponsiveStorageNameSpace": "responsive-"
 }

src/App.vue

@@ -8,10 +8,8 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { ElConfigProvider } from "element-plus";
+import zhCn from "element-plus/lib/locale/lang/zh-cn";
 import { ReDialog } from "@/components/ReDialog";
-import en from "element-plus/es/locale/lang/en";
-import zhCn from "element-plus/es/locale/lang/zh-cn";
-
 export default defineComponent({
   name: "app",
   components: {
@@ -20,7 +18,7 @@ export default defineComponent({
   },
   computed: {
     currentLocale() {
-      return this.$storage.locale?.locale === "zh" ? zhCn : en;
+      return zhCn;
     }
   }
 });

src/api/routes.ts

@@ -6,5 +6,5 @@ type Result = {
 };
 
 export const getAsyncRoutes = () => {
-  return http.request<Result>("get", "/get-async-routes");
+  return http.request<Result>("get", "/getAsyncRoutes");
 };

src/api/user.ts

@@ -3,16 +3,10 @@ import { http } from "@/utils/http";
 export type UserResult = {
   success: boolean;
   data: {
-    /** 头像 */
-    avatar: string;
     /** 用户名 */
     username: string;
-    /** 昵称 */
-    nickname: string;
-    /** 当前登录用户的角色 */
+    /** 当前登陆用户的角色 */
     roles: Array<string>;
-    /** 按钮级别权限 */
-    permissions: Array<string>;
     /** `token` */
     accessToken: string;
     /** 用于调用刷新`accessToken`的接口时所需的`token` */
@@ -39,7 +33,7 @@ export const getLogin = (data?: object) => {
   return http.request<UserResult>("post", "/login", { data });
 };
 
-/** 刷新`token` */
+/** 刷新token */
 export const refreshTokenApi = (data?: object) => {
-  return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
+  return http.request<RefreshTokenResult>("post", "/refreshToken", { data });
 };

src/assets/iconfont/iconfont.css

@@ -1,7 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src:
-    url("iconfont.woff2?t=1671895108120") format("woff2"),
+  src: url("iconfont.woff2?t=1671895108120") format("woff2"),
     url("iconfont.woff?t=1671895108120") format("woff"),
     url("iconfont.ttf?t=1671895108120") format("truetype");
 }

src/assets/login/avatar.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.1 323.1 0 0 1-107.769-242.852z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>

src/assets/svg/back_top.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.9 35.9 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0q.25.27.413.455a35.9 35.9 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44 44 0 0 1-6.584-.874m6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42 42 0 0 0 4.227-.454A33.9 33.9 0 0 0 12 4.09a33.9 33.9 0 0 0-6.649 12.387q2.093.334 4.227.454M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>

src/assets/svg/dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>

src/assets/svg/day.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>

src/assets/svg/enter_outlined.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"/></svg>

src/assets/svg/exit_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5zM13 3V1h-1v2.5l.5.5H15V3zm-1 9.5V15h1v-2h2v-1h-2.5zM1 12v1h2v2h1v-2.5l-.5-.5zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5zM10 7H6v2h4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>

src/assets/svg/full_screen.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>

src/assets/svg/globalization.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="globalization" viewBox="0 0 512 512"><path fill="currentColor" d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"/></svg>

src/assets/svg/keyboard_esc.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1V7m10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2Z"/></svg>

src/assets/svg/system.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="icon" viewBox="0 0 1024 1024"><path d="M554 849.574c0 23.365-18.635 42.307-42 42.307s-42-18.941-42-42.307V662.719c0-23.365 18.635-42.307 42-42.307v-7.051c23.365 0 42 25.993 42 49.358z"/><path d="M893 888.5c0 17.397-14.103 31.5-31.5 31.5h-700c-17.397 0-31.5-14.103-31.5-31.5s14.103-31.5 31.5-31.5h700c17.397 0 31.5 14.103 31.5 31.5m33-714.074C926 135.484 894.686 105 855.744 105H168.256C129.314 105 98 135.484 98 174.426V533h828zM98 630.988C98 669.931 129.314 702 168.256 702h687.488C894.686 702 926 669.931 926 630.988V596H98z"/></svg>

src/assets/table-bar/drag.svg

@@ -1 +0,0 @@
-<svg width="32" height="32" fill="currentColor" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97m0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0m0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0M300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0"/></svg>

src/assets/table-bar/settings.svg

@@ -1 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10 10 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A10 10 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 10 10 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A10 10 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 10 10 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 10 10 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10 10 0 0 1 3.34 17m5.66.196a5 5 0 0 1 2.25 2.77q.75.071 1.499.001A5 5 0 0 1 15 17.197a5 5 0 0 1 3.525-.565q.435-.614.748-1.298A5 5 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8 8 0 0 0-.75-1.298A5 5 0 0 1 15 6.804a5 5 0 0 1-2.25-2.77q-.75-.071-1.499-.001A5 5 0 0 1 9 6.803a5 5 0 0 1-3.525.565 8 8 0 0 0-.748 1.298A5 5 0 0 1 6 12a5 5 0 0 1-1.273 3.334 8 8 0 0 0 .75 1.298A5 5 0 0 1 9 17.196M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>

src/components/ReDialog/index.ts

@@ -27,13 +27,8 @@ const addDialog = (options: DialogOptions) => {
 
 /** 关闭弹框 */
 const closeDialog = (options: DialogOptions, index: number, args?: any) => {
-  dialogStore.value[index].visible = false;
-  options.closeCallBack && options.closeCallBack({ options, index, args });
-
-  const closeDelay = options?.closeDelay ?? 200;
-  useTimeoutFn(() => {
   dialogStore.value.splice(index, 1);
-  }, closeDelay);
+  options.closeCallBack && options.closeCallBack({ options, index, args });
 };
 
 /**
@@ -53,8 +48,8 @@ const closeAllDialog = () => {
 
 /** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
  * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L12
- * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
+ * https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L18
  */
 const ReDialog = withInstall(reDialog);
 

src/components/ReDialog/index.vue

@@ -1,21 +1,16 @@
 <script setup lang="ts">
 import {
+  closeDialog,
+  dialogStore,
   type EventType,
   type ButtonProps,
-  type DialogOptions,
-  closeDialog,
-  dialogStore
+  type DialogOptions
 } from "./index";
 import { ref, computed } from "vue";
 import { isFunction } from "@pureadmin/utils";
-import Fullscreen from "~icons/ri/fullscreen-fill";
-import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
+import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
+import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
 
-defineOptions({
-  name: "ReDialog"
-});
-
-const sureBtnMap = ref({});
 const fullscreen = ref(false);
 
 const footerButtons = computed(() => {
@@ -42,28 +37,11 @@ const footerButtons = computed(() => {
             type: "primary",
             text: true,
             bg: true,
-            popconfirm: options?.popconfirm,
             btnClick: ({ dialog: { options, index } }) => {
-              if (options?.sureBtnLoading) {
-                sureBtnMap.value[index] = Object.assign(
-                  {},
-                  sureBtnMap.value[index],
-                  {
-                    loading: true
-                  }
-                );
-              }
-              const closeLoading = () => {
-                if (options?.sureBtnLoading) {
-                  sureBtnMap.value[index].loading = false;
-                }
-              };
-              const done = () => {
-                closeLoading();
+              const done = () =>
                 closeDialog(options, index, { command: "sure" });
-              };
               if (options?.beforeSure && isFunction(options?.beforeSure)) {
-                options.beforeSure(done, { options, index, closeLoading });
+                options.beforeSure(done, { options, index });
               } else {
                 done();
               }
@@ -79,17 +57,16 @@ const fullscreenClass = computed(() => {
     "el-dialog__close",
     "-translate-x-2",
     "cursor-pointer",
-    "hover:text-[red]!"
+    "hover:!text-[red]"
   ];
 });
 
 function eventsCallBack(
   event: EventType,
   options: DialogOptions,
-  index: number,
-  isClickFullScreen = false
+  index: number
 ) {
-  if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
+  fullscreen.value = options?.fullscreen ?? false;
   if (options?.[event] && isFunction(options?.[event])) {
     return options?.[event]({ options, index });
   }
@@ -107,13 +84,13 @@ function handleClose(
 
 <template>
   <el-dialog
+    class="pure-dialog"
     v-for="(options, index) in dialogStore"
     :key="index"
     v-bind="options"
     v-model="options.visible"
-    class="pure-dialog"
     :fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
-    @closed="handleClose(options, index)"
+    @close="handleClose(options, index)"
     @opened="eventsCallBack('open', options, index)"
     @openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
     @closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
@@ -131,17 +108,7 @@ function handleClose(
         <i
           v-if="!options?.fullscreen"
           :class="fullscreenClass"
-          @click="
-            () => {
-              fullscreen = !fullscreen;
-              eventsCallBack(
-                'fullscreenCallBack',
-                { ...options, fullscreen },
-                index,
-                true
-              );
-            }
-          "
+          @click="fullscreen = !fullscreen"
         >
           <IconifyIconOffline
             class="pure-dialog-svg"
@@ -156,8 +123,8 @@ function handleClose(
         </i>
       </div>
       <component
-        :is="options?.headerRenderer({ close, titleId, titleClass })"
         v-else
+        :is="options?.headerRenderer({ close, titleId, titleClass })"
       />
     </template>
     <component
@@ -171,25 +138,10 @@ function handleClose(
         <component :is="options?.footerRenderer({ options, index })" />
       </template>
       <span v-else>
-        <template v-for="(btn, key) in footerButtons(options)" :key="key">
-          <el-popconfirm
-            v-if="btn.popconfirm"
-            v-bind="btn.popconfirm"
-            @confirm="
-              btn.btnClick({
-                dialog: { options, index },
-                button: { btn, index: key }
-              })
-            "
-          >
-            <template #reference>
-              <el-button v-bind="btn">{{ btn?.label }}</el-button>
-            </template>
-          </el-popconfirm>
         <el-button
-            v-else
+          v-for="(btn, key) in footerButtons(options)"
+          :key="key"
           v-bind="btn"
-            :loading="key === 1 && sureBtnMap[index]?.loading"
           @click="
             btn.btnClick({
               dialog: { options, index },
@@ -199,7 +151,6 @@ function handleClose(
         >
           {{ btn?.label }}
         </el-button>
-        </template>
       </span>
     </template>
   </el-dialog>

src/components/ReDialog/type.ts

@@ -1,23 +1,11 @@
 import type { CSSProperties, VNode, Component } from "vue";
 
 type DoneFn = (cancel?: boolean) => void;
-type EventType =
-  | "open"
-  | "close"
-  | "openAutoFocus"
-  | "closeAutoFocus"
-  | "fullscreenCallBack";
+type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
 type ArgsType = {
-  /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
+  /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或者空白页 */
   command: "cancel" | "sure" | "close";
 };
-type ButtonType =
-  | "primary"
-  | "success"
-  | "warning"
-  | "danger"
-  | "info"
-  | "text";
 
 /** https://element-plus.org/zh-CN/component/dialog.html#attributes */
 type DialogProps = {
@@ -65,34 +53,6 @@ type DialogProps = {
   destroyOnClose?: boolean;
 };
 
-//element-plus.org/zh-CN/component/popconfirm.html#attributes
-type Popconfirm = {
-  /** 标题 */
-  title?: string;
-  /** 确定按钮文字 */
-  confirmButtonText?: string;
-  /** 取消按钮文字 */
-  cancelButtonText?: string;
-  /** 确定按钮类型，默认 `primary` */
-  confirmButtonType?: ButtonType;
-  /** 取消按钮类型，默认 `text` */
-  cancelButtonType?: ButtonType;
-  /** 自定义图标，默认 `QuestionFilled` */
-  icon?: string | Component;
-  /** `Icon` 颜色，默认 `#f90` */
-  iconColor?: string;
-  /** 是否隐藏 `Icon`，默认 `false` */
-  hideIcon?: boolean;
-  /** 关闭时的延迟，默认 `200` */
-  hideAfter?: number;
-  /** 是否将 `popover` 的下拉列表插入至 `body` 元素，默认 `true` */
-  teleported?: boolean;
-  /** 当 `popover` 组件长时间不触发且 `persistent` 属性设置为 `false` 时, `popover` 将会被删除，默认 `false` */
-  persistent?: boolean;
-  /** 弹层宽度，最小宽度 `150px`，默认 `150` */
-  width?: string | number;
-};
-
 type BtnClickDialog = {
   options?: DialogOptions;
   index?: number;
@@ -121,8 +81,6 @@ type ButtonProps = {
   round?: boolean;
   /** 是否为圆形按钮，默认 `false` */
   circle?: boolean;
-  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
-  popconfirm?: Popconfirm;
   /** 是否为加载中状态，默认 `false` */
   loading?: boolean;
   /** 自定义加载中状态图标组件 */
@@ -160,10 +118,6 @@ interface DialogOptions extends DialogProps {
   props?: any;
   /** 是否隐藏 `Dialog` 按钮操作区的内容 */
   hideFooter?: boolean;
-  /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
-  popconfirm?: Popconfirm;
-  /** 点击确定按钮后是否开启 `loading` 加载动画 */
-  sureBtnLoading?: boolean;
   /**
    * @description 自定义对话框标题的内容渲染器
    * @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
@@ -203,7 +157,7 @@ interface DialogOptions extends DialogProps {
     options: DialogOptions;
     index: number;
   }) => void;
-  /** `Dialog` 关闭后的回调（只有点击右上角关闭按钮或空白页或按下了esc键关闭页面时才会触发） */
+  /** `Dialog` 关闭后的回调（只有点击右上角关闭按钮或者空白页关闭页面时才会触发） */
   close?: ({
     options,
     index
@@ -211,7 +165,7 @@ interface DialogOptions extends DialogProps {
     options: DialogOptions;
     index: number;
   }) => void;
-  /** `Dialog` 关闭后的回调。 `args` 返回的 `command` 值解析：`cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键  */
+  /** `Dialog` 关闭后的回调。 `args` 返回的 `command` 值解析：`cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或者空白页  */
   closeCallBack?: ({
     options,
     index,
@@ -221,14 +175,6 @@ interface DialogOptions extends DialogProps {
     index: number;
     args: any;
   }) => void;
-  /** 点击全屏按钮时的回调 */
-  fullscreenCallBack?: ({
-    options,
-    index
-  }: {
-    options: DialogOptions;
-    index: number;
-  }) => void;
   /** 输入焦点聚焦在 `Dialog` 内容时的回调 */
   openAutoFocus?: ({
     options,
@@ -261,13 +207,10 @@ interface DialogOptions extends DialogProps {
     done: Function,
     {
       options,
-      index,
-      closeLoading
+      index
     }: {
       options: DialogOptions;
       index: number;
-      /** 关闭确定按钮的 `loading` 加载动画 */
-      closeLoading: Function;
     }
   ) => void;
 }

src/components/ReIcon/index.ts

@@ -6,7 +6,7 @@ import fontIcon from "./src/iconfont";
 const IconifyIconOffline = iconifyIconOffline;
 /** 在线图标组件 */
 const IconifyIconOnline = iconifyIconOnline;
-/** `iconfont`组件 */
+/** iconfont组件 */
 const FontIcon = fontIcon;
 
 export { IconifyIconOffline, IconifyIconOnline, FontIcon };

src/components/ReIcon/src/hooks.ts

@@ -1,10 +1,10 @@
-import type { iconType } from "./types";
-import { h, defineComponent, type Component } from "vue";
-import { FontIcon, IconifyIconOnline, IconifyIconOffline } from "../index";
+import { iconType } from "./types";
+import { h, defineComponent, Component } from "vue";
+import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
 
 /**
  * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
- * @see 点击查看文档图标篇 {@link https://pure-admin.cn/pages/icon/}
+ * @see 点击查看文档图标篇 {@link https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/}
  * @param icon 必传 图标
  * @param attrs 可选 iconType 属性
  * @returns Component
@@ -33,7 +33,7 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
     });
   } else if (typeof icon === "function" || typeof icon?.render === "function") {
     // svg
-    return attrs ? h(icon, { ...attrs }) : icon;
+    return icon;
   } else if (typeof icon === "object") {
     return defineComponent({
       name: "OfflineIcon",
@@ -49,12 +49,10 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
     return defineComponent({
       name: "Icon",
       render() {
-        if (!icon) return;
-        const IconifyIcon = icon.includes(":")
-          ? IconifyIconOnline
-          : IconifyIconOffline;
+        const IconifyIcon =
+          icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
         return h(IconifyIcon, {
-          icon,
+          icon: icon,
           ...attrs
         });
       }

src/components/ReIcon/src/iconfont.ts

@@ -27,7 +27,8 @@ export default defineComponent({
       return h(
         "svg",
         {
-          class: "icon-svg"
+          class: "icon-svg",
+          "aria-hidden": true
         },
         {
           default: () => [

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -1,7 +1,7 @@
 import { h, defineComponent } from "vue";
 import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
 
-// Iconify Icon在Vue里本地使用（用于内网环境）
+// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({
   name: "IconifyIconOffline",
   components: { IconifyIcon },
@@ -13,12 +13,10 @@ export default defineComponent({
   render() {
     if (typeof this.icon === "object") addIcon(this.icon, this.icon);
     const attrs = this.$attrs;
-    if (typeof this.icon === "string") {
     return h(
       IconifyIcon,
       {
         icon: this.icon,
-          "aria-hidden": false,
         style: attrs?.style
           ? Object.assign(attrs.style, { outline: "none" })
           : { outline: "none" },
@@ -28,20 +26,5 @@ export default defineComponent({
         default: () => []
       }
     );
-    } else {
-      return h(
-        this.icon,
-        {
-          "aria-hidden": false,
-          style: attrs?.style
-            ? Object.assign(attrs.style, { outline: "none" })
-            : { outline: "none" },
-          ...attrs
-        },
-        {
-          default: () => []
-        }
-      );
-    }
   }
 });

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -17,7 +17,6 @@ export default defineComponent({
       IconifyIcon,
       {
         icon: `${this.icon}`,
-        "aria-hidden": false,
         style: attrs?.style
           ? Object.assign(attrs.style, { outline: "none" })
           : { outline: "none" },

src/components/ReIcon/src/offlineIcon.ts

@@ -1,23 +1,14 @@
-// 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
-import { getSvgInfo } from "@pureadmin/utils";
 import { addIcon } from "@iconify/vue/dist/offline";
 
-// https://icon-sets.iconify.design/ep/?keyword=ep
-import EpHomeFilled from "~icons/ep/home-filled?raw";
+/**
+ * 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+ */
 
-// https://icon-sets.iconify.design/ri/?keyword=ri
-import RiSearchLine from "~icons/ri/search-line?raw";
-import RiInformationLine from "~icons/ri/information-line?raw";
+// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import InformationLine from "@iconify-icons/ri/information-line";
+import Lollipop from "@iconify-icons/ep/lollipop";
 
-const icons = [
-  // Element Plus Icon: https://github.com/element-plus/element-plus-icons
-  ["ep/home-filled", EpHomeFilled],
-  // Remix Icon: https://github.com/Remix-Design/RemixIcon
-  ["ri/search-line", RiSearchLine],
-  ["ri/information-line", RiInformationLine]
-];
-
-// 本地菜单图标，后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
-icons.forEach(([name, icon]) => {
-  addIcon(name as string, getSvgInfo(icon as string));
-});
+addIcon("homeFilled", HomeFilled);
+addIcon("informationLine", InformationLine);
+addIcon("lollipop", Lollipop);

src/components/ReIcon/src/types.ts

@@ -13,8 +13,7 @@ export interface iconType {
   align?: string;
   onLoad?: Function;
   includes?: Function;
-  // svg 需要什么SVG属性自行添加
-  fill?: string;
+
   //  all icon
   style?: object;
 }

src/components/RePerms/index.ts

@@ -1,5 +0,0 @@
-import perms from "./src/perms";
-
-const Perms = perms;
-
-export { Perms };

src/components/RePerms/src/perms.tsx

@@ -1,20 +0,0 @@
-import { defineComponent, Fragment } from "vue";
-import { hasPerms } from "@/utils/auth";
-
-export default defineComponent({
-  name: "Perms",
-  props: {
-    value: {
-      type: undefined,
-      default: []
-    }
-  },
-  setup(props, { slots }) {
-    return () => {
-      if (!slots) return null;
-      return hasPerms(props.value) ? (
-        <Fragment>{slots.default?.()}</Fragment>
-      ) : null;
-    };
-  }
-});

src/components/RePureTableBar/src/bar.tsx

@@ -1,30 +1,13 @@
-import Sortable from "sortablejs";
-import { transformI18n } from "@/plugins/i18n";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
-import {
-  type PropType,
-  ref,
-  unref,
-  computed,
-  nextTick,
-  defineComponent,
-  getCurrentInstance
-} from "vue";
-import {
-  delay,
-  cloneDeep,
-  isBoolean,
-  isFunction,
-  getKeyList
-} from "@pureadmin/utils";
+import { delay, getKeyList, cloneDeep } from "@pureadmin/utils";
+import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
 
-import Fullscreen from "~icons/ri/fullscreen-fill";
-import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
-import DragIcon from "@/assets/table-bar/drag.svg?component";
-import ExpandIcon from "@/assets/table-bar/expand.svg?component";
-import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
-import SettingIcon from "@/assets/table-bar/settings.svg?component";
-import CollapseIcon from "@/assets/table-bar/collapse.svg?component";
+import Sortable from "sortablejs";
+import DragIcon from "./svg/drag.svg?component";
+import ExpandIcon from "./svg/expand.svg?component";
+import RefreshIcon from "./svg/refresh.svg?component";
+import SettingIcon from "./svg/settings.svg?component";
+import CollapseIcon from "./svg/collapse.svg?component";
 
 const props = {
   /** 头部最左边的标题 */
@@ -40,36 +23,22 @@ const props = {
   columns: {
     type: Array as PropType<TableColumnList>,
     default: () => []
-  },
-  isExpandAll: {
-    type: Boolean,
-    default: true
-  },
-  tableKey: {
-    type: [String, Number] as PropType<string | number>,
-    default: "0"
   }
 };
 
 export default defineComponent({
   name: "PureTableBar",
   props,
-  emits: ["refresh", "fullscreen"],
+  emits: ["refresh"],
   setup(props, { emit, slots, attrs }) {
+    const buttonRef = ref();
     const size = ref("default");
+    const isExpandAll = ref(true);
     const loading = ref(false);
     const checkAll = ref(true);
-    const isFullscreen = ref(false);
     const isIndeterminate = ref(false);
-    const instance = getCurrentInstance()!;
-    const isExpandAll = ref(props.isExpandAll);
-    const filterColumns = cloneDeep(props?.columns).filter(column =>
-      isBoolean(column?.hide)
-        ? !column.hide
-        : !(isFunction(column?.hide) && column?.hide())
-    );
     let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
-    const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
+    const checkedColumns = ref(checkColumnList);
     const dynamicColumns = ref(cloneDeep(props?.columns));
 
     const getDropdownItemStyle = computed(() => {
@@ -87,9 +56,9 @@ export default defineComponent({
         "text-black",
         "dark:text-white",
         "duration-100",
-        "hover:text-primary!",
+        "hover:!text-primary",
         "cursor-pointer",
-        "outline-hidden"
+        "outline-none"
       ];
     });
 
@@ -117,11 +86,6 @@ export default defineComponent({
       toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
     }
 
-    function onFullscreen() {
-      isFullscreen.value = !isFullscreen.value;
-      emit("fullscreen", isFullscreen.value);
-    }
-
     function toggleRowExpansionAll(data, isExpansion) {
       data.forEach(item => {
         props.tableRef.toggleRowExpansion(item, isExpansion);
@@ -140,7 +104,6 @@ export default defineComponent({
     }
 
     function handleCheckedColumnsChange(value: string[]) {
-      checkedColumns.value = value;
       const checkedCount = value.length;
       checkAll.value = checkedCount === checkColumnList.length;
       isIndeterminate.value =
@@ -148,9 +111,7 @@ export default defineComponent({
     }
 
     function handleCheckColumnListChange(val: boolean, label: string) {
-      dynamicColumns.value.filter(
-        item => transformI18n(item.label) === transformI18n(label)
-      )[0].hide = !val;
+      dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
     }
 
     async function onReset() {
@@ -159,7 +120,7 @@ export default defineComponent({
       dynamicColumns.value = cloneDeep(props?.columns);
       checkColumnList = [];
       checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
-      checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
+      checkedColumns.value = checkColumnList;
     }
 
     const dropdown = {
@@ -191,9 +152,9 @@ export default defineComponent({
     const rowDrop = (event: { preventDefault: () => void }) => {
       event.preventDefault();
       nextTick(() => {
-        const wrapper: HTMLElement = (
-          instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any
-        ).$el.firstElementChild;
+        const wrapper: HTMLElement = document.querySelector(
+          ".el-checkbox-group>div"
+        );
         Sortable.create(wrapper, {
           animation: 300,
           handle: ".drag-btn",
@@ -223,47 +184,23 @@ export default defineComponent({
     };
 
     const isFixedColumn = (label: string) => {
-      return dynamicColumns.value.filter(
-        item => transformI18n(item.label) === transformI18n(label)
-      )[0].fixed
+      return dynamicColumns.value.filter(item => item.label === label)[0].fixed
         ? true
         : false;
     };
 
-    const rendTippyProps = (content: string) => {
-      // https://vue-tippy.netlify.app/props
-      return {
-        content,
-        offset: [0, 18],
-        duration: [300, 0],
-        followCursor: true,
-        hideOnClick: "toggle"
-      };
-    };
-
     const reference = {
       reference: () => (
         <SettingIcon
           class={["w-[16px]", iconClass.value]}
-          v-tippy={rendTippyProps("列设置")}
+          onMouseover={e => (buttonRef.value = e.currentTarget)}
         />
       )
     };
 
     return () => (
       <>
-        <div
-          {...attrs}
-          class={[
-            "w-full",
-            "px-2",
-            "pb-2",
-            "bg-bg_color",
-            isFullscreen.value
-              ? ["h-full!", "z-2002", "fixed", "inset-0"]
-              : "mt-2"
-          ]}
-        >
+        <div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
           <div class="flex justify-between w-full h-[60px] p-4">
             {slots?.title ? (
               slots.title()
@@ -276,48 +213,50 @@ export default defineComponent({
               ) : null}
               {props.tableRef?.size ? (
                 <>
+                  <el-tooltip
+                    effect="dark"
+                    content={isExpandAll.value ? "折叠" : "展开"}
+                    placement="top"
+                  >
                     <ExpandIcon
                       class={["w-[16px]", iconClass.value]}
                       style={{
                         transform: isExpandAll.value ? "none" : "rotate(-90deg)"
                       }}
-                    v-tippy={rendTippyProps(
-                      isExpandAll.value ? "折叠" : "展开"
-                    )}
                       onClick={() => onExpand()}
                     />
+                  </el-tooltip>
                   <el-divider direction="vertical" />
                 </>
               ) : null}
+              <el-tooltip effect="dark" content="刷新" placement="top">
                 <RefreshIcon
                   class={[
                     "w-[16px]",
                     iconClass.value,
                     loading.value ? "animate-spin" : ""
                   ]}
-                v-tippy={rendTippyProps("刷新")}
                   onClick={() => onReFresh()}
                 />
+              </el-tooltip>
               <el-divider direction="vertical" />
-              <el-dropdown
-                v-slots={dropdown}
-                trigger="click"
-                v-tippy={rendTippyProps("密度")}
-              >
+              <el-tooltip effect="dark" content="密度" placement="top">
+                <el-dropdown v-slots={dropdown} trigger="click">
                   <CollapseIcon class={["w-[16px]", iconClass.value]} />
                 </el-dropdown>
+              </el-tooltip>
               <el-divider direction="vertical" />
 
               <el-popover
                 v-slots={reference}
                 placement="bottom-start"
                 popper-style={{ padding: 0 }}
-                width="200"
+                width="160"
                 trigger="click"
               >
                 <div class={[topClass.value]}>
                   <el-checkbox
-                    class="-mr-1!"
+                    class="!-mr-1"
                     label="列展示"
                     v-model={checkAll.value}
                     indeterminate={isIndeterminate.value}
@@ -329,10 +268,8 @@ export default defineComponent({
                 </div>
 
                 <div class="pt-[6px] pl-[11px]">
-                  <el-scrollbar max-height="36vh">
                   <el-checkbox-group
-                      ref={`GroupRef${unref(props.tableKey)}`}
-                      modelValue={checkedColumns.value}
+                    v-model={checkedColumns.value}
                     onChange={value => handleCheckedColumnsChange(value)}
                   >
                     <el-space
@@ -340,33 +277,32 @@ export default defineComponent({
                       alignment="flex-start"
                       size={0}
                     >
-                        {checkColumnList.map((item, index) => {
+                      {checkColumnList.map(item => {
                         return (
                           <div class="flex items-center">
                             <DragIcon
                               class={[
                                 "drag-btn w-[16px] mr-2",
                                 isFixedColumn(item)
-                                    ? "cursor-no-drop!"
-                                    : "cursor-grab!"
+                                  ? "!cursor-no-drop"
+                                  : "!cursor-grab"
                               ]}
                               onMouseenter={(event: {
                                 preventDefault: () => void;
                               }) => rowDrop(event)}
                             />
                             <el-checkbox
-                                key={index}
+                              key={item}
                               label={item}
-                                value={item}
                               onChange={value =>
                                 handleCheckColumnListChange(value, item)
                               }
                             >
                               <span
-                                  title={transformI18n(item)}
+                                title={item}
                                 class="inline-block w-[120px] truncate hover:text-text_color_primary"
                               >
-                                  {transformI18n(item)}
+                                {item}
                               </span>
                             </el-checkbox>
                           </div>
@@ -374,18 +310,28 @@ export default defineComponent({
                       })}
                     </el-space>
                   </el-checkbox-group>
-                  </el-scrollbar>
                 </div>
               </el-popover>
-              <el-divider direction="vertical" />
-
-              <iconifyIconOffline
-                class={["w-[16px]", iconClass.value]}
-                icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
-                v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
-                onClick={() => onFullscreen()}
-              />
             </div>
+
+            <el-tooltip
+              popper-options={{
+                modifiers: [
+                  {
+                    name: "computeStyles",
+                    options: {
+                      adaptive: false,
+                      enabled: false
+                    }
+                  }
+                ]
+              }}
+              placement="top"
+              virtual-ref={buttonRef.value}
+              virtual-triggering
+              trigger="hover"
+              content="列设置"
+            />
           </div>
           {slots.default({
             size: size.value,

src/components/RePureTableBar/src/svg/collapse.svg

@@ -1 +1 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2m10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2"/></svg>
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2Zm10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z"/></svg>

src/components/RePureTableBar/src/svg/drag.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zm0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0zM300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0z"/></svg>

src/components/RePureTableBar/src/svg/expand.svg

@@ -1 +1 @@
-<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4z"/></svg>
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>

src/components/RePureTableBar/src/svg/settings.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10.018 10.018 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A9.99 9.99 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 9.99 9.99 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A9.99 9.99 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 9.99 9.99 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 9.99 9.99 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10.018 10.018 0 0 1 3.34 17zm5.66.196a4.993 4.993 0 0 1 2.25 2.77c.499.047 1 .048 1.499.001A4.993 4.993 0 0 1 15 17.197a4.993 4.993 0 0 1 3.525-.565c.29-.408.54-.843.748-1.298A4.993 4.993 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8.126 8.126 0 0 0-.75-1.298A4.993 4.993 0 0 1 15 6.804a4.993 4.993 0 0 1-2.25-2.77c-.499-.047-1-.048-1.499-.001A4.993 4.993 0 0 1 9 6.803a4.993 4.993 0 0 1-3.525.565 7.99 7.99 0 0 0-.748 1.298A4.993 4.993 0 0 1 6 12a4.99 4.99 0 0 1-1.273 3.334 8.126 8.126 0 0 0 .75 1.298A4.993 4.993 0 0 1 9 17.196zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>

src/components/ReSegmented/index.ts

@@ -1,8 +0,0 @@
-import reSegmented from "./src/index";
-import { withInstall } from "@pureadmin/utils";
-
-/** 分段控制器组件 */
-export const ReSegmented = withInstall(reSegmented);
-
-export default ReSegmented;
-export type { OptionsType } from "./src/type";

src/components/ReSegmented/src/index.css

@@ -1,156 +0,0 @@
-.pure-segmented {
-  --pure-control-padding-horizontal: 12px;
-  --pure-control-padding-horizontal-sm: 8px;
-  --pure-segmented-track-padding: 2px;
-  --pure-segmented-line-width: 1px;
-
-  --pure-segmented-border-radius-small: 4px;
-  --pure-segmented-border-radius-base: 6px;
-  --pure-segmented-border-radius-large: 8px;
-
-  box-sizing: border-box;
-  display: inline-block;
-  padding: var(--pure-segmented-track-padding);
-  font-size: var(--el-font-size-base);
-  color: rgba(0, 0, 0, 0.65);
-  background-color: rgb(0 0 0 / 4%);
-  border-radius: var(--pure-segmented-border-radius-base);
-}
-
-.pure-segmented-block {
-  display: flex;
-}
-
-.pure-segmented-block .pure-segmented-item {
-  flex: 1;
-  min-width: 0;
-}
-
-.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* small */
-.pure-segmented.pure-segmented--small {
-  border-radius: var(--pure-segmented-border-radius-small);
-}
-.pure-segmented.pure-segmented--small .pure-segmented-item {
-  border-radius: var(--el-border-radius-small);
-}
-.pure-segmented.pure-segmented--small .pure-segmented-item > div {
-  min-height: calc(
-    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
-  );
-  line-height: calc(
-    var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
-  );
-  padding: 0
-    calc(
-      var(--pure-control-padding-horizontal-sm) -
-        var(--pure-segmented-line-width)
-    );
-}
-
-/* large */
-.pure-segmented.pure-segmented--large {
-  border-radius: var(--pure-segmented-border-radius-large);
-}
-.pure-segmented.pure-segmented--large .pure-segmented-item {
-  border-radius: calc(
-    var(--el-border-radius-base) + var(--el-border-radius-small)
-  );
-}
-.pure-segmented.pure-segmented--large .pure-segmented-item > div {
-  min-height: calc(
-    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
-  );
-  line-height: calc(
-    var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
-  );
-  padding: 0
-    calc(
-      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
-    );
-  font-size: var(--el-font-size-medium);
-}
-
-/* default */
-.pure-segmented-item {
-  position: relative;
-  text-align: center;
-  cursor: pointer;
-  border-radius: var(--el-border-radius-base);
-  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-}
-.pure-segmented .pure-segmented-item > div {
-  min-height: calc(
-    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
-  );
-  line-height: calc(
-    var(--el-component-size) - var(--pure-segmented-track-padding) * 2
-  );
-  padding: 0
-    calc(
-      var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
-    );
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.pure-segmented-group {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  justify-items: flex-start;
-  width: 100%;
-}
-
-.pure-segmented-item-selected {
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  display: none;
-  width: 0;
-  height: 100%;
-  padding: 4px 0;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow:
-    0 2px 8px -2px rgb(0 0 0 / 5%),
-    0 1px 4px -1px rgb(0 0 0 / 7%),
-    0 0 1px rgb(0 0 0 / 7%);
-  transition:
-    transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
-    width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
-  will-change: transform, width;
-}
-
-.pure-segmented-item > input {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.pure-segmented-item-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pure-segmented-item-icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-.pure-segmented-item-disabled {
-  color: rgba(0, 0, 0, 0.25);
-  cursor: not-allowed;
-}

src/components/ReSegmented/src/index.tsx

@@ -1,216 +0,0 @@
-import "./index.css";
-import type { OptionsType } from "./type";
-import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import {
-  useDark,
-  isNumber,
-  isFunction,
-  useResizeObserver
-} from "@pureadmin/utils";
-import {
-  type PropType,
-  h,
-  ref,
-  toRef,
-  watch,
-  nextTick,
-  defineComponent,
-  getCurrentInstance
-} from "vue";
-
-const props = {
-  options: {
-    type: Array<OptionsType>,
-    default: () => []
-  },
-  /** 默认选中，按照第一个索引为 `0` 的模式，可选（`modelValue`只有传`number`类型时才为响应式） */
-  modelValue: {
-    type: undefined,
-    require: false,
-    default: "0"
-  },
-  /** 将宽度调整为父元素宽度	 */
-  block: {
-    type: Boolean,
-    default: false
-  },
-  /** 控件尺寸 */
-  size: {
-    type: String as PropType<"small" | "default" | "large">
-  },
-  /** 是否全局禁用，默认 `false` */
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  /** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
-  resize: {
-    type: Boolean,
-    default: false
-  }
-};
-
-export default defineComponent({
-  name: "ReSegmented",
-  props,
-  emits: ["change", "update:modelValue"],
-  setup(props, { emit }) {
-    const width = ref(0);
-    const translateX = ref(0);
-    const { isDark } = useDark();
-    const initStatus = ref(false);
-    const curMouseActive = ref(-1);
-    const segmentedItembg = ref("");
-    const instance = getCurrentInstance()!;
-    const curIndex = isNumber(props.modelValue)
-      ? toRef(props, "modelValue")
-      : ref(0);
-
-    function handleChange({ option, index }, event: Event) {
-      if (props.disabled || option.disabled) return;
-      event.preventDefault();
-      isNumber(props.modelValue)
-        ? emit("update:modelValue", index)
-        : (curIndex.value = index);
-      segmentedItembg.value = "";
-      emit("change", { index, option });
-    }
-
-    function handleMouseenter({ option, index }, event: Event) {
-      if (props.disabled) return;
-      event.preventDefault();
-      curMouseActive.value = index;
-      if (option.disabled || curIndex.value === index) {
-        segmentedItembg.value = "";
-      } else {
-        segmentedItembg.value = isDark.value
-          ? "#1f1f1f"
-          : "rgba(0, 0, 0, 0.06)";
-      }
-    }
-
-    function handleMouseleave(_, event: Event) {
-      if (props.disabled) return;
-      event.preventDefault();
-      curMouseActive.value = -1;
-    }
-
-    function handleInit(index = curIndex.value) {
-      nextTick(() => {
-        const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
-        if (!curLabelRef) return;
-        width.value = curLabelRef.clientWidth;
-        translateX.value = curLabelRef.offsetLeft;
-        initStatus.value = true;
-      });
-    }
-
-    function handleResizeInit() {
-      useResizeObserver(".pure-segmented", () => {
-        nextTick(() => {
-          handleInit(curIndex.value);
-        });
-      });
-    }
-
-    (props.block || props.resize) && handleResizeInit();
-
-    watch(
-      () => curIndex.value,
-      index => {
-        nextTick(() => {
-          handleInit(index);
-        });
-      },
-      {
-        immediate: true
-      }
-    );
-
-    watch(() => props.size, handleResizeInit, {
-      immediate: true
-    });
-
-    const rendLabel = () => {
-      return props.options.map((option, index) => {
-        return (
-          <label
-            ref={`labelRef${index}`}
-            class={[
-              "pure-segmented-item",
-              (props.disabled || option?.disabled) &&
-                "pure-segmented-item-disabled"
-            ]}
-            style={{
-              background:
-                curMouseActive.value === index ? segmentedItembg.value : "",
-              color: props.disabled
-                ? null
-                : !option.disabled &&
-                    (curIndex.value === index || curMouseActive.value === index)
-                  ? isDark.value
-                    ? "rgba(255, 255, 255, 0.85)"
-                    : "rgba(0,0,0,.88)"
-                  : ""
-            }}
-            onMouseenter={event => handleMouseenter({ option, index }, event)}
-            onMouseleave={event => handleMouseleave({ option, index }, event)}
-            onClick={event => handleChange({ option, index }, event)}
-          >
-            <input type="radio" name="segmented" />
-            <div
-              class="pure-segmented-item-label"
-              v-tippy={{
-                content: option?.tip,
-                zIndex: 41000
-              }}
-            >
-              {option.icon && !isFunction(option.label) ? (
-                <span
-                  class="pure-segmented-item-icon"
-                  style={{ marginRight: option.label ? "6px" : 0 }}
-                >
-                  {h(
-                    useRenderIcon(option.icon, {
-                      ...option?.iconAttrs
-                    })
-                  )}
-                </span>
-              ) : null}
-              {option.label ? (
-                isFunction(option.label) ? (
-                  h(option.label)
-                ) : (
-                  <span>{option.label}</span>
-                )
-              ) : null}
-            </div>
-          </label>
-        );
-      });
-    };
-
-    return () => (
-      <div
-        class={{
-          "pure-segmented": true,
-          "pure-segmented-block": props.block,
-          "pure-segmented--large": props.size === "large",
-          "pure-segmented--small": props.size === "small"
-        }}
-      >
-        <div class="pure-segmented-group">
-          <div
-            class="pure-segmented-item-selected"
-            style={{
-              width: `${width.value}px`,
-              transform: `translateX(${translateX.value}px)`,
-              display: initStatus.value ? "block" : "none"
-            }}
-          ></div>
-          {rendLabel()}
-        </div>
-      </div>
-    );
-  }
-});

src/components/ReSegmented/src/type.ts

@@ -1,20 +0,0 @@
-import type { VNode, Component } from "vue";
-import type { iconType } from "@/components/ReIcon/src/types.ts";
-
-export interface OptionsType {
-  /** 文字 */
-  label?: string | (() => VNode | Component);
-  /**
-   * @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
-   * @see {@link 用法参考 https://pure-admin.cn/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
-   */
-  icon?: string | Component;
-  /** 图标属性、样式配置 */
-  iconAttrs?: iconType;
-  /** 值 */
-  value?: any;
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** `tooltip` 提示 */
-  tip?: string;
-}

src/components/ReText/index.ts

@@ -1,7 +0,0 @@
-import reText from "./src/index.vue";
-import { withInstall } from "@pureadmin/utils";
-
-/** 支持`Tooltip`提示的文本省略组件 */
-export const ReText = withInstall(reText);
-
-export default ReText;

src/components/ReText/src/index.vue

@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { h, onMounted, ref } from "vue";
-import { type TippyOptions, type TippyContent, useTippy } from "vue-tippy";
-
-defineOptions({
-  name: "ReText"
-});
-
-const props = defineProps({
-  // 行数
-  lineClamp: {
-    type: [String, Number]
-  },
-  tippyProps: {
-    type: Object as PropType<TippyOptions>,
-    default: () => ({})
-  }
-});
-
-const slots = defineSlots<{
-  content: () => TippyContent;
-  default: () => any;
-}>();
-
-const textRef = ref();
-const tippyFunc = ref();
-
-const isTextEllipsis = (el: HTMLElement) => {
-  if (!props.lineClamp) {
-    // 单行省略判断
-    return el.scrollWidth > el.clientWidth;
-  } else {
-    // 多行省略判断
-    return el.scrollHeight > el.clientHeight;
-  }
-};
-
-const getTippyProps = () => ({
-  content: h(slots.content || slots.default),
-  ...props.tippyProps
-});
-
-function handleHover(event: MouseEvent) {
-  if (isTextEllipsis(event.target as HTMLElement)) {
-    tippyFunc.value.setProps(getTippyProps());
-    tippyFunc.value.enable();
-  } else {
-    tippyFunc.value.disable();
-  }
-}
-
-onMounted(() => {
-  tippyFunc.value = useTippy(textRef.value?.$el, getTippyProps());
-});
-</script>
-
-<template>
-  <el-text
-    v-bind="{
-      truncated: !lineClamp,
-      lineClamp,
-      ...$attrs
-    }"
-    ref="textRef"
-    @mouseover.self="handleHover"
-  >
-    <slot />
-  </el-text>
-</template>

src/config/index.ts

@@ -1,5 +1,5 @@
+import { App } from "vue";
 import axios from "axios";
-import type { App } from "vue";
 
 let config: object = {};
 const { VITE_PUBLIC_PATH } = import.meta.env;
@@ -8,7 +8,7 @@ const setConfig = (cfg?: unknown) => {
   config = Object.assign(config, cfg);
 };
 
-const getConfig = (key?: string): PlatformConfigs => {
+const getConfig = (key?: string): ServerConfigs => {
   if (typeof key === "string") {
     const arr = key.split(".");
     if (arr && arr.length) {
@@ -27,15 +27,15 @@ const getConfig = (key?: string): PlatformConfigs => {
 };
 
 /** 获取项目动态全局配置 */
-export const getPlatformConfig = async (app: App): Promise<undefined> => {
+export const getServerConfig = async (app: App): Promise<undefined> => {
   app.config.globalProperties.$config = getConfig();
   return axios({
     method: "get",
-    url: `${VITE_PUBLIC_PATH}platform-config.json`
+    url: `${VITE_PUBLIC_PATH}serverConfig.json`
   })
     .then(({ data: config }) => {
       let $config = app.config.globalProperties.$config;
-      // 自动注入系统配置
+      // 自动注入项目配置
       if (app && $config && typeof config === "object") {
         $config = Object.assign($config, config);
         app.config.globalProperties.$config = $config;
@@ -45,7 +45,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
       return $config;
     })
     .catch(() => {
-      throw "请在public文件夹下添加platform-config.json配置文件";
+      throw "请在public文件夹下添加serverConfig.json配置文件";
     });
 };
 

src/directives/auth/index.ts

@@ -1,15 +1,13 @@
 import { hasAuth } from "@/router/utils";
-import type { Directive, DirectiveBinding } from "vue";
+import { Directive, type DirectiveBinding } from "vue";
 
 export const auth: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
     const { value } = binding;
     if (value) {
       !hasAuth(value) && el.parentNode?.removeChild(el);
     } else {
-      throw new Error(
-        "[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
-      );
+      throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"");
     }
   }
 };

src/directives/copy/index.ts

@@ -1,33 +0,0 @@
-import { message } from "@/utils/message";
-import { useEventListener } from "@vueuse/core";
-import { copyTextToClipboard } from "@pureadmin/utils";
-import type { Directive, DirectiveBinding } from "vue";
-
-export interface CopyEl extends HTMLElement {
-  copyValue: string;
-}
-
-/** 文本复制指令（默认双击复制） */
-export const copy: Directive = {
-  mounted(el: CopyEl, binding: DirectiveBinding<string>) {
-    const { value } = binding;
-    if (value) {
-      el.copyValue = value;
-      const arg = binding.arg ?? "dblclick";
-      // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
-      useEventListener(el, arg, () => {
-        const success = copyTextToClipboard(el.copyValue);
-        success
-          ? message("复制成功", { type: "success" })
-          : message("复制失败", { type: "error" });
-      });
-    } else {
-      throw new Error(
-        '[Directive: copy]: need value! Like v-copy="modelValue"'
-      );
-    }
-  },
-  updated(el: CopyEl, binding: DirectiveBinding) {
-    el.copyValue = binding.value;
-  }
-};

src/directives/elResizeDetector/index.ts

@@ -0,0 +1,27 @@
+import { Directive, type DirectiveBinding, type VNode } from "vue";
+import elementResizeDetectorMaker from "element-resize-detector";
+import type { Erd } from "element-resize-detector";
+import { emitter } from "@/utils/mitt";
+
+const erd: Erd = elementResizeDetectorMaker({
+  strategy: "scroll"
+});
+
+export const resize: Directive = {
+  mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
+    erd.listenTo(el, elem => {
+      const width = elem.offsetWidth;
+      const height = elem.offsetHeight;
+      if (binding?.instance) {
+        emitter.emit("resize", { detail: { width, height } });
+      } else {
+        vnode.el.dispatchEvent(
+          new CustomEvent("resize", { detail: { width, height } })
+        );
+      }
+    });
+  },
+  unmounted(el: HTMLElement) {
+    erd.uninstall(el);
+  }
+};

src/directives/index.ts

@@ -1,6 +1,2 @@
 export * from "./auth";
-export * from "./copy";
-export * from "./longpress";
-export * from "./optimize";
-export * from "./perms";
-export * from "./ripple";
+export * from "./elResizeDetector";

src/directives/longpress/index.ts

@@ -1,63 +0,0 @@
-import { useEventListener } from "@vueuse/core";
-import type { Directive, DirectiveBinding } from "vue";
-import { subBefore, subAfter, isFunction } from "@pureadmin/utils";
-
-export const longpress: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<Function>) {
-    const cb = binding.value;
-    if (cb && isFunction(cb)) {
-      let timer = null;
-      let interTimer = null;
-      let num = 500;
-      let interNum = null;
-      const isInter = binding?.arg?.includes(":") ?? false;
-
-      if (isInter) {
-        num = Number(subBefore(binding.arg, ":"));
-        interNum = Number(subAfter(binding.arg, ":"));
-      } else if (binding.arg) {
-        num = Number(binding.arg);
-      }
-
-      const clear = () => {
-        if (timer) {
-          clearTimeout(timer);
-          timer = null;
-        }
-        if (interTimer) {
-          clearInterval(interTimer);
-          interTimer = null;
-        }
-      };
-
-      const onDownInter = (ev: PointerEvent) => {
-        ev.preventDefault();
-        if (interTimer === null) {
-          interTimer = setInterval(() => cb(), interNum);
-        }
-      };
-
-      const onDown = (ev: PointerEvent) => {
-        clear();
-        ev.preventDefault();
-        if (timer === null) {
-          timer = isInter
-            ? setTimeout(() => {
-                cb();
-                onDownInter(ev);
-              }, num)
-            : setTimeout(() => cb(), num);
-        }
-      };
-
-      // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
-      useEventListener(el, "pointerdown", onDown);
-      useEventListener(el, "pointerup", clear);
-      useEventListener(el, "pointerleave", clear);
-    } else {
-      throw new Error(
-        '[Directive: longpress]: need callback and callback must be a function! Like v-longpress="callback"'
-      );
-    }
-  }
-};

src/directives/optimize/index.ts

@@ -1,68 +0,0 @@
-import {
-  isArray,
-  throttle,
-  debounce,
-  isObject,
-  isFunction
-} from "@pureadmin/utils";
-import { useEventListener } from "@vueuse/core";
-import type { Directive, DirectiveBinding } from "vue";
-
-export interface OptimizeOptions {
-  /** 事件名 */
-  event: string;
-  /** 事件触发的方法 */
-  fn: (...params: any) => any;
-  /** 是否立即执行 */
-  immediate?: boolean;
-  /** 防抖或节流的延迟时间（防抖默认：`200`毫秒、节流默认：`1000`毫秒） */
-  timeout?: number;
-  /** 传递的参数 */
-  params?: any;
-}
-
-/** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
-export const optimize: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<OptimizeOptions>) {
-    const { value } = binding;
-    const optimizeType = binding.arg ?? "debounce";
-    const type = ["debounce", "throttle"].find(t => t === optimizeType);
-    if (type) {
-      if (value && value.event && isFunction(value.fn)) {
-        let params = value?.params;
-        if (params) {
-          if (isArray(params) || isObject(params)) {
-            params = isObject(params) ? Array.of(params) : params;
-          } else {
-            throw new Error(
-              "[Directive: optimize]: `params` must be an array or object"
-            );
-          }
-        }
-        // Register using addEventListener on mounted, and removeEventListener automatically on unmounted
-        useEventListener(
-          el,
-          value.event,
-          type === "debounce"
-            ? debounce(
-                params ? () => value.fn(...params) : value.fn,
-                value?.timeout ?? 200,
-                value?.immediate ?? false
-              )
-            : throttle(
-                params ? () => value.fn(...params) : value.fn,
-                value?.timeout ?? 1000
-              )
-        );
-      } else {
-        throw new Error(
-          "[Directive: optimize]: `event` and `fn` are required, and `fn` must be a function"
-        );
-      }
-    } else {
-      throw new Error(
-        "[Directive: optimize]: only `debounce` and `throttle` are supported"
-      );
-    }
-  }
-};

src/directives/perms/index.ts

@@ -1,15 +0,0 @@
-import { hasPerms } from "@/utils/auth";
-import type { Directive, DirectiveBinding } from "vue";
-
-export const perms: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<string | Array<string>>) {
-    const { value } = binding;
-    if (value) {
-      !hasPerms(value) && el.parentNode?.removeChild(el);
-    } else {
-      throw new Error(
-        "[Directive: perms]: need perms! Like v-perms=\"['btn.add','btn.edit']\""
-      );
-    }
-  }
-};

src/directives/ripple/index.scss

@@ -1,48 +0,0 @@
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-$ripple-animation-transition-in:
-  transform 0.4s cubic-bezier(0, 0, 0.2, 1),
-  opacity 0.2s cubic-bezier(0, 0, 0.2, 1) !default;
-$ripple-animation-transition-out: opacity 0.5s cubic-bezier(0, 0, 0.2, 1) !default;
-$ripple-animation-visible-opacity: 0.25 !default;
-
-.v-ripple {
-  &__container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    width: 100%;
-    height: 100%;
-    contain: strict;
-    overflow: hidden;
-    pointer-events: none;
-    border-radius: inherit;
-  }
-
-  &__animation {
-    position: absolute;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-    pointer-events: none;
-    background: currentcolor;
-    border-radius: 50%;
-    opacity: 0;
-    will-change: transform, opacity;
-
-    &--enter {
-      opacity: 0;
-      transition: none;
-    }
-
-    &--in {
-      opacity: $ripple-animation-visible-opacity;
-      transition: $ripple-animation-transition-in;
-    }
-
-    &--out {
-      opacity: 0;
-      transition: $ripple-animation-transition-out;
-    }
-  }
-}

src/directives/ripple/index.ts

@@ -1,229 +0,0 @@
-import "./index.scss";
-import { isObject } from "@pureadmin/utils";
-import type { Directive, DirectiveBinding } from "vue";
-
-export interface RippleOptions {
-  /** 自定义`ripple`颜色，支持`tailwindcss` */
-  class?: string;
-  /** 是否从中心扩散 */
-  center?: boolean;
-  circle?: boolean;
-}
-
-export interface RippleDirectiveBinding
-  extends Omit<DirectiveBinding, "modifiers" | "value"> {
-  value?: boolean | { class: string };
-  modifiers: {
-    center?: boolean;
-    circle?: boolean;
-  };
-}
-
-function transform(el: HTMLElement, value: string) {
-  el.style.transform = value;
-  el.style.webkitTransform = value;
-}
-
-const calculate = (
-  e: PointerEvent,
-  el: HTMLElement,
-  value: RippleOptions = {}
-) => {
-  const offset = el.getBoundingClientRect();
-
-  // 获取点击位置距离 el 的垂直和水平距离
-  const localX = e.clientX - offset.left;
-  const localY = e.clientY - offset.top;
-
-  let radius = 0;
-  let scale = 0.3;
-  // 计算点击位置到 el 顶点最远距离，即为圆的最大半径（勾股定理）
-  if (el._ripple?.circle) {
-    scale = 0.15;
-    radius = el.clientWidth / 2;
-    radius = value.center
-      ? radius
-      : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4;
-  } else {
-    radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2;
-  }
-
-  // 中心点坐标
-  const centerX = `${(el.clientWidth - radius * 2) / 2}px`;
-  const centerY = `${(el.clientHeight - radius * 2) / 2}px`;
-
-  // 点击位置坐标
-  const x = value.center ? centerX : `${localX - radius}px`;
-  const y = value.center ? centerY : `${localY - radius}px`;
-
-  return { radius, scale, x, y, centerX, centerY };
-};
-
-const ripples = {
-  show(e: PointerEvent, el: HTMLElement, value: RippleOptions = {}) {
-    if (!el?._ripple?.enabled) {
-      return;
-    }
-
-    // 创建 ripple 元素和 ripple 父元素
-    const container = document.createElement("span");
-    const animation = document.createElement("span");
-
-    container.appendChild(animation);
-    container.className = "v-ripple__container";
-
-    if (value.class) {
-      container.className += ` ${value.class}`;
-    }
-
-    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value);
-
-    // ripple 圆大小
-    const size = `${radius * 2}px`;
-
-    animation.className = "v-ripple__animation";
-    animation.style.width = size;
-    animation.style.height = size;
-
-    el.appendChild(container);
-
-    // 获取目标元素样式表
-    const computed = window.getComputedStyle(el);
-    // 防止 position 被覆盖导致 ripple 位置有问题
-    if (computed && computed.position === "static") {
-      el.style.position = "relative";
-      el.dataset.previousPosition = "static";
-    }
-
-    animation.classList.add("v-ripple__animation--enter");
-    animation.classList.add("v-ripple__animation--visible");
-    transform(
-      animation,
-      `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`
-    );
-    animation.dataset.activated = String(performance.now());
-
-    setTimeout(() => {
-      animation.classList.remove("v-ripple__animation--enter");
-      animation.classList.add("v-ripple__animation--in");
-      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`);
-    }, 0);
-  },
-
-  hide(el: HTMLElement | null) {
-    if (!el?._ripple?.enabled) return;
-
-    const ripples = el.getElementsByClassName("v-ripple__animation");
-
-    if (ripples.length === 0) return;
-    const animation = ripples[ripples.length - 1] as HTMLElement;
-
-    if (animation.dataset.isHiding) return;
-    else animation.dataset.isHiding = "true";
-
-    const diff = performance.now() - Number(animation.dataset.activated);
-    const delay = Math.max(250 - diff, 0);
-
-    setTimeout(() => {
-      animation.classList.remove("v-ripple__animation--in");
-      animation.classList.add("v-ripple__animation--out");
-
-      setTimeout(() => {
-        const ripples = el.getElementsByClassName("v-ripple__animation");
-        if (ripples.length === 1 && el.dataset.previousPosition) {
-          el.style.position = el.dataset.previousPosition;
-          delete el.dataset.previousPosition;
-        }
-
-        if (animation.parentNode?.parentNode === el)
-          el.removeChild(animation.parentNode);
-      }, 300);
-    }, delay);
-  }
-};
-
-function isRippleEnabled(value: any): value is true {
-  return typeof value === "undefined" || !!value;
-}
-
-function rippleShow(e: PointerEvent) {
-  const value: RippleOptions = {};
-  const element = e.currentTarget as HTMLElement | undefined;
-
-  if (!element?._ripple || element._ripple.touched) return;
-
-  value.center = element._ripple.centered;
-  if (element._ripple.class) {
-    value.class = element._ripple.class;
-  }
-
-  ripples.show(e, element, value);
-}
-
-function rippleHide(e: Event) {
-  const element = e.currentTarget as HTMLElement | null;
-  if (!element?._ripple) return;
-
-  window.setTimeout(() => {
-    if (element._ripple) {
-      element._ripple.touched = false;
-    }
-  });
-  ripples.hide(element);
-}
-
-function updateRipple(
-  el: HTMLElement,
-  binding: RippleDirectiveBinding,
-  wasEnabled: boolean
-) {
-  const { value, modifiers } = binding;
-  const enabled = isRippleEnabled(value);
-  if (!enabled) {
-    ripples.hide(el);
-  }
-
-  el._ripple = el._ripple ?? {};
-  el._ripple.enabled = enabled;
-  el._ripple.centered = modifiers.center;
-  el._ripple.circle = modifiers.circle;
-  if (isObject(value) && value.class) {
-    el._ripple.class = value.class;
-  }
-
-  if (enabled && !wasEnabled) {
-    el.addEventListener("pointerdown", rippleShow);
-    el.addEventListener("pointerup", rippleHide);
-  } else if (!enabled && wasEnabled) {
-    removeListeners(el);
-  }
-}
-
-function removeListeners(el: HTMLElement) {
-  el.removeEventListener("pointerdown", rippleShow);
-  el.removeEventListener("pointerup", rippleHide);
-}
-
-function mounted(el: HTMLElement, binding: RippleDirectiveBinding) {
-  updateRipple(el, binding, false);
-}
-
-function unmounted(el: HTMLElement) {
-  delete el._ripple;
-  removeListeners(el);
-}
-
-function updated(el: HTMLElement, binding: RippleDirectiveBinding) {
-  if (binding.value === binding.oldValue) {
-    return;
-  }
-
-  const wasEnabled = isRippleEnabled(binding.oldValue);
-  updateRipple(el, binding, wasEnabled);
-}
-
-export const Ripple: Directive = {
-  mounted,
-  unmounted,
-  updated
-};

src/layout/components/appMain.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { useGlobal } from "@pureadmin/utils";
+import backTop from "@/assets/svg/back_top.svg?component";
+import { h, computed, Transition, defineComponent } from "vue";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+
+const props = defineProps({
+  fixedHeader: Boolean
+});
+
+const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
+
+const keepAlive = computed(() => {
+  return $config?.KeepAlive;
+});
+
+const transitions = computed(() => {
+  return route => {
+    return route.meta.transition;
+  };
+});
+
+const hideTabs = computed(() => {
+  return $storage?.configure.hideTabs;
+});
+
+const layout = computed(() => {
+  return $storage?.layout.layout === "vertical";
+});
+
+const getSectionStyle = computed(() => {
+  return [
+    hideTabs.value && layout ? "padding-top: 48px;" : "",
+    !hideTabs.value && layout ? "padding-top: 85px;" : "",
+    hideTabs.value && !layout.value ? "padding-top: 48px" : "",
+    !hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
+    props.fixedHeader ? "" : "padding-top: 0;"
+  ];
+});
+
+const transitionMain = defineComponent({
+  render() {
+    return h(
+      Transition,
+      {
+        name:
+          transitions.value(this.route) &&
+          this.route.meta.transition.enterTransition
+            ? "pure-classes-transition"
+            : (transitions.value(this.route) &&
+                this.route.meta.transition.name) ||
+              "fade-transform",
+        enterActiveClass:
+          transitions.value(this.route) &&
+          `animate__animated ${this.route.meta.transition.enterTransition}`,
+        leaveActiveClass:
+          transitions.value(this.route) &&
+          `animate__animated ${this.route.meta.transition.leaveTransition}`,
+        mode: "out-in",
+        appear: true
+      },
+      {
+        default: () => [this.$slots.default()]
+      }
+    );
+  },
+  props: {
+    route: {
+      type: undefined,
+      required: true
+    }
+  }
+});
+</script>
+
+<template>
+  <section
+    :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
+    :style="getSectionStyle"
+  >
+    <router-view>
+      <template #default="{ Component, route }">
+        <el-scrollbar v-if="props.fixedHeader">
+          <el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
+            <backTop />
+          </el-backtop>
+          <transitionMain :route="route">
+            <keep-alive
+              v-if="keepAlive"
+              :include="usePermissionStoreHook().cachePageList"
+            >
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
+            </keep-alive>
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
+          </transitionMain>
+        </el-scrollbar>
+        <div v-else>
+          <transitionMain :route="route">
+            <keep-alive
+              v-if="keepAlive"
+              :include="usePermissionStoreHook().cachePageList"
+            >
+              <component
+                :is="Component"
+                :key="route.fullPath"
+                class="main-content"
+              />
+            </keep-alive>
+            <component
+              v-else
+              :is="Component"
+              :key="route.fullPath"
+              class="main-content"
+            />
+          </transitionMain>
+        </div>
+      </template>
+    </router-view>
+  </section>
+</template>
+
+<style scoped>
+.app-main {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.app-main-nofixed-header {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.main-content {
+  margin: 24px;
+}
+</style>

src/layout/components/lay-content/index.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import LayFrame from "../lay-frame/index.vue";
-import LayFooter from "../lay-footer/index.vue";
-import { useTags } from "@/layout/hooks/useTag";
-import { useGlobal, isNumber } from "@pureadmin/utils";
-import BackTopIcon from "@/assets/svg/back_top.svg?component";
-import { h, computed, Transition, defineComponent } from "vue";
-import { usePermissionStoreHook } from "@/store/modules/permission";
-
-const props = defineProps({
-  fixedHeader: Boolean
-});
-
-const { t } = useI18n();
-const { showModel } = useTags();
-const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
-
-const isKeepAlive = computed(() => {
-  return $config?.KeepAlive;
-});
-
-const transitions = computed(() => {
-  return route => {
-    return route.meta.transition;
-  };
-});
-
-const hideTabs = computed(() => {
-  return $storage?.configure.hideTabs;
-});
-
-const hideFooter = computed(() => {
-  return $storage?.configure.hideFooter;
-});
-
-const stretch = computed(() => {
-  return $storage?.configure.stretch;
-});
-
-const layout = computed(() => {
-  return $storage?.layout.layout === "vertical";
-});
-
-const getMainWidth = computed(() => {
-  return isNumber(stretch.value)
-    ? stretch.value + "px"
-    : stretch.value
-      ? "1440px"
-      : "100%";
-});
-
-const getSectionStyle = computed(() => {
-  return [
-    hideTabs.value && layout ? "padding-top: 48px;" : "",
-    !hideTabs.value && layout
-      ? showModel.value == "chrome"
-        ? "padding-top: 85px;"
-        : "padding-top: 81px;"
-      : "",
-    hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
-    !hideTabs.value && !layout.value
-      ? showModel.value == "chrome"
-        ? "padding-top: 85px;"
-        : "padding-top: 81px;"
-      : "",
-    props.fixedHeader
-      ? ""
-      : `padding-top: 0;${
-          hideTabs.value
-            ? "min-height: calc(100vh - 48px);"
-            : "min-height: calc(100vh - 86px);"
-        }`
-  ];
-});
-
-const transitionMain = defineComponent({
-  props: {
-    route: {
-      type: undefined,
-      required: true
-    }
-  },
-  render() {
-    const transitionName =
-      transitions.value(this.route)?.name || "fade-transform";
-    const enterTransition = transitions.value(this.route)?.enterTransition;
-    const leaveTransition = transitions.value(this.route)?.leaveTransition;
-    return h(
-      Transition,
-      {
-        name: enterTransition ? "pure-classes-transition" : transitionName,
-        enterActiveClass: enterTransition
-          ? `animate__animated ${enterTransition}`
-          : undefined,
-        leaveActiveClass: leaveTransition
-          ? `animate__animated ${leaveTransition}`
-          : undefined,
-        mode: "out-in",
-        appear: true
-      },
-      {
-        default: () => [this.$slots.default()]
-      }
-    );
-  }
-});
-</script>
-
-<template>
-  <section
-    :class="[fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
-    :style="getSectionStyle"
-  >
-    <router-view>
-      <template #default="{ Component, route }">
-        <LayFrame :currComp="Component" :currRoute="route">
-          <template #default="{ Comp, fullPath, frameInfo }">
-            <el-scrollbar
-              v-if="fixedHeader"
-              :wrap-style="{
-                display: 'flex',
-                'flex-wrap': 'wrap',
-                'max-width': getMainWidth,
-                margin: '0 auto',
-                transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
-              }"
-              :view-style="{
-                display: 'flex',
-                flex: 'auto',
-                overflow: 'hidden',
-                'flex-direction': 'column'
-              }"
-            >
-              <el-backtop
-                :title="t('buttons.pureBackTop')"
-                target=".app-main .el-scrollbar__wrap"
-              >
-                <BackTopIcon />
-              </el-backtop>
-              <div class="grow">
-                <transitionMain :route="route">
-                  <keep-alive
-                    v-if="isKeepAlive"
-                    :include="usePermissionStoreHook().cachePageList"
-                  >
-                    <component
-                      :is="Comp"
-                      :key="fullPath"
-                      :frameInfo="frameInfo"
-                      class="main-content"
-                    />
-                  </keep-alive>
-                  <component
-                    :is="Comp"
-                    v-else
-                    :key="fullPath"
-                    :frameInfo="frameInfo"
-                    class="main-content"
-                  />
-                </transitionMain>
-              </div>
-              <LayFooter v-if="!hideFooter" />
-            </el-scrollbar>
-            <div v-else class="grow">
-              <transitionMain :route="route">
-                <keep-alive
-                  v-if="isKeepAlive"
-                  :include="usePermissionStoreHook().cachePageList"
-                >
-                  <component
-                    :is="Comp"
-                    :key="fullPath"
-                    :frameInfo="frameInfo"
-                    class="main-content"
-                  />
-                </keep-alive>
-                <component
-                  :is="Comp"
-                  v-else
-                  :key="fullPath"
-                  :frameInfo="frameInfo"
-                  class="main-content"
-                />
-              </transitionMain>
-            </div>
-          </template>
-        </LayFrame>
-      </template>
-    </router-view>
-
-    <!-- 页脚 -->
-    <LayFooter v-if="!hideFooter && !fixedHeader" />
-  </section>
-</template>
-
-<style scoped>
-.app-main {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  overflow-x: hidden;
-}
-
-.app-main-nofixed-header {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.main-content {
-  margin: 24px;
-}
-</style>

src/layout/components/lay-footer/index.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { getConfig } from "@/config";
-
-const TITLE = getConfig("Title");
-</script>
-
-<template>
-  <footer
-    class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
-  >
-    Copyright © 2020-present
-    <a
-      class="hover:text-primary!"
-      href="https://github.com/pure-admin"
-      target="_blank"
-    >
-      &nbsp;{{ TITLE }}
-    </a>
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-.layout-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 0 0 8px;
-  font-size: 14px;
-}
-</style>

src/layout/components/lay-frame/index.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { getConfig } from "@/config";
-import { useMultiFrame } from "@/layout/hooks/useMultiFrame";
-import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { type Component, shallowRef, watch, computed } from "vue";
-import { type RouteRecordRaw, RouteLocationNormalizedLoaded } from "vue-router";
-
-const props = defineProps<{
-  currRoute: RouteLocationNormalizedLoaded;
-  currComp: Component;
-}>();
-
-const compList = shallowRef([]);
-const { setMap, getMap, MAP, delMap } = useMultiFrame();
-
-const keep = computed(() => {
-  return (
-    getConfig().KeepAlive &&
-    props.currRoute.meta?.keepAlive &&
-    !!props.currRoute.meta?.frameSrc
-  );
-});
-// 避免重新渲染 LayFrame
-const normalComp = computed(() => !keep.value && props.currComp);
-
-watch(useMultiTagsStoreHook().multiTags, (tags: any) => {
-  if (!Array.isArray(tags) || !keep.value) {
-    return;
-  }
-  const iframeTags = tags.filter(i => i.meta?.frameSrc);
-  // tags必须是小于MAP，才是做了关闭动作，因为MAP插入的顺序在tags变化后发生
-  if (iframeTags.length < MAP.size) {
-    for (const i of MAP.keys()) {
-      if (!tags.some(s => s.path === i)) {
-        delMap(i);
-        compList.value = getMap();
-      }
-    }
-  }
-});
-
-watch(
-  () => props.currRoute.fullPath,
-  path => {
-    const multiTags = useMultiTagsStoreHook().multiTags as RouteRecordRaw[];
-    const iframeTags = multiTags.filter(i => i.meta?.frameSrc);
-    if (keep.value) {
-      if (iframeTags.length !== MAP.size) {
-        const sameKey = [...MAP.keys()].find(i => path === i);
-        if (!sameKey) {
-          // 添加缓存
-          setMap(path, props.currComp);
-        }
-      }
-    }
-
-    if (MAP.size > 0) {
-      compList.value = getMap();
-    }
-  },
-  {
-    immediate: true
-  }
-);
-</script>
-<template>
-  <template v-for="[fullPath, Comp] in compList" :key="fullPath">
-    <div v-show="fullPath === currRoute.fullPath" class="w-full h-full">
-      <slot
-        :fullPath="fullPath"
-        :Comp="Comp"
-        :frameInfo="{ frameSrc: currRoute.meta?.frameSrc, fullPath }"
-      />
-    </div>
-  </template>
-  <div v-show="!keep" class="w-full h-full">
-    <slot :Comp="normalComp" :fullPath="currRoute.fullPath" frameInfo />
-  </div>
-</template>

src/layout/components/lay-navbar/index.vue

@@ -1,190 +0,0 @@
-<script setup lang="ts">
-import { useNav } from "@/layout/hooks/useNav";
-import LaySearch from "../lay-search/index.vue";
-import LayNotice from "../lay-notice/index.vue";
-import LayNavMix from "../lay-sidebar/NavMix.vue";
-import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
-import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
-import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vue";
-import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
-
-import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
-import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
-import Setting from "~icons/ri/settings-3-line";
-import Check from "~icons/ep/check";
-
-const {
-  layout,
-  device,
-  logout,
-  onPanel,
-  pureApp,
-  username,
-  userAvatar,
-  avatarsStyle,
-  toggleSideBar,
-  getDropdownItemStyle,
-  getDropdownItemClass
-} = useNav();
-
-const { t, locale, translationCh, translationEn } = useTranslationLang();
-</script>
-
-<template>
-  <div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
-    <LaySidebarTopCollapse
-      v-if="device === 'mobile'"
-      class="hamburger-container"
-      :is-active="pureApp.sidebar.opened"
-      @toggleClick="toggleSideBar"
-    />
-
-    <LaySidebarBreadCrumb
-      v-if="layout !== 'mix' && device !== 'mobile'"
-      class="breadcrumb-container"
-    />
-
-    <LayNavMix v-if="layout === 'mix'" />
-
-    <div v-if="layout === 'vertical'" class="vertical-header-right">
-      <!-- 菜单搜索 -->
-      <LaySearch id="header-search" />
-      <!-- 国际化 -->
-      <el-dropdown id="header-translation" trigger="click">
-        <GlobalizationIcon
-          class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
-        />
-        <template #dropdown>
-          <el-dropdown-menu class="translation">
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'zh')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
-              @click="translationCh"
-            >
-              <IconifyIconOffline
-                v-show="locale === 'zh'"
-                class="check-zh"
-                :icon="Check"
-              />
-              简体中文
-            </el-dropdown-item>
-            <el-dropdown-item
-              :style="getDropdownItemStyle(locale, 'en')"
-              :class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
-              @click="translationEn"
-            >
-              <span v-show="locale === 'en'" class="check-en">
-                <IconifyIconOffline :icon="Check" />
-              </span>
-              English
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <!-- 全屏 -->
-      <LaySidebarFullScreen id="full-screen" />
-      <!-- 消息通知 -->
-      <LayNotice id="header-notice" />
-      <!-- 退出登录 -->
-      <el-dropdown trigger="click">
-        <span class="el-dropdown-link navbar-bg-hover select-none">
-          <img :src="userAvatar" :style="avatarsStyle" />
-          <p v-if="username" class="dark:text-white">{{ username }}</p>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu class="logout">
-            <el-dropdown-item @click="logout">
-              <IconifyIconOffline
-                :icon="LogoutCircleRLine"
-                style="margin: 5px"
-              />
-              {{ t("buttons.pureLoginOut") }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      <span
-        class="set-icon navbar-bg-hover"
-        :title="t('buttons.pureOpenSystemSet')"
-        @click="onPanel"
-      >
-        <IconifyIconOffline :icon="Setting" />
-      </span>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.navbar {
-  width: 100%;
-  height: 48px;
-  overflow: hidden;
-
-  .hamburger-container {
-    float: left;
-    height: 100%;
-    line-height: 48px;
-    cursor: pointer;
-  }
-
-  .vertical-header-right {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    min-width: 280px;
-    height: 48px;
-    color: #000000d9;
-
-    .el-dropdown-link {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      height: 48px;
-      padding: 10px;
-      color: #000000d9;
-      cursor: pointer;
-
-      p {
-        font-size: 14px;
-      }
-
-      img {
-        width: 22px;
-        height: 22px;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-    margin-left: 16px;
-  }
-}
-
-.translation {
-  ::v-deep(.el-dropdown-menu__item) {
-    padding: 5px 40px;
-  }
-
-  .check-zh {
-    position: absolute;
-    left: 20px;
-  }
-
-  .check-en {
-    position: absolute;
-    left: 20px;
-  }
-}
-
-.logout {
-  width: 120px;
-
-  ::v-deep(.el-dropdown-menu__item) {
-    display: inline-flex;
-    flex-wrap: wrap;
-    min-width: 100%;
-  }
-}
-</style>

src/layout/components/lay-notice/components/NoticeList.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { PropType } from "vue";
-import { ListItem } from "../data";
-import NoticeItem from "./NoticeItem.vue";
-import { transformI18n } from "@/plugins/i18n";
-
-defineProps({
-  list: {
-    type: Array as PropType<Array<ListItem>>,
-    default: () => []
-  },
-  emptyText: {
-    type: String,
-    default: ""
-  }
-});
-</script>
-
-<template>
-  <div v-if="list.length">
-    <NoticeItem v-for="(item, index) in list" :key="index" :noticeItem="item" />
-  </div>
-  <el-empty v-else :description="transformI18n(emptyText)" />
-</template>

src/layout/components/lay-notice/data.ts

@@ -1,99 +0,0 @@
-import { $t } from "@/plugins/i18n";
-
-export interface ListItem {
-  avatar: string;
-  title: string;
-  datetime: string;
-  type: string;
-  description: string;
-  status?: "primary" | "success" | "warning" | "info" | "danger";
-  extra?: string;
-}
-
-export interface TabItem {
-  key: string;
-  name: string;
-  list: ListItem[];
-  emptyText: string;
-}
-
-export const noticesData: TabItem[] = [
-  {
-    key: "1",
-    name: $t("status.pureNotify"),
-    list: [],
-    emptyText: $t("status.pureNoNotify")
-  },
-  {
-    key: "2",
-    name: $t("status.pureMessage"),
-    list: [
-      {
-        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile1.svg",
-        title: "小铭 评论了你",
-        description: "诚在于心，信在于行，诚信在于心行合一。",
-        datetime: "今天",
-        type: "2"
-      },
-      {
-        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile2.svg",
-        title: "李白 回复了你",
-        description: "长风破浪会有时，直挂云帆济沧海。",
-        datetime: "昨天",
-        type: "2"
-      },
-      {
-        avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile5.svg",
-        title: "标题",
-        description:
-          "请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
-        datetime: "时间",
-        type: "2"
-      }
-    ],
-    emptyText: $t("status.pureNoMessage")
-  },
-  {
-    key: "3",
-    name: $t("status.pureTodo"),
-    list: [
-      {
-        avatar: "",
-        title: "第三方紧急代码变更",
-        description:
-          "小林提交于 2024-05-10，需在 2024-05-11 前完成代码变更任务",
-        datetime: "",
-        extra: "马上到期",
-        status: "danger",
-        type: "3"
-      },
-      {
-        avatar: "",
-        title: "版本发布",
-        description: "指派小铭于 2024-06-18 前完成更新并发布",
-        datetime: "",
-        extra: "已耗时 8 天",
-        status: "warning",
-        type: "3"
-      },
-      {
-        avatar: "",
-        title: "新功能开发",
-        description: "开发多租户管理",
-        datetime: "",
-        extra: "进行中",
-        type: "3"
-      },
-      {
-        avatar: "",
-        title: "任务名称",
-        description: "任务需要在 2030-10-30 10:00 前启动",
-        datetime: "",
-        extra: "未开始",
-        status: "info",
-        type: "3"
-      }
-    ],
-    emptyText: $t("status.pureNoTodo")
-  }
-];

src/layout/components/lay-notice/index.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { ref, computed } from "vue";
-import { noticesData } from "./data";
-import NoticeList from "./components/NoticeList.vue";
-import BellIcon from "~icons/ep/bell";
-
-const { t } = useI18n();
-const noticesNum = ref(0);
-const notices = ref(noticesData);
-const activeKey = ref(noticesData[0]?.key);
-
-notices.value.map(v => (noticesNum.value += v.list.length));
-
-const getLabel = computed(
-  () => item =>
-    t(item.name) + (item.list.length > 0 ? `(${item.list.length})` : "")
-);
-</script>
-
-<template>
-  <el-dropdown trigger="click" placement="bottom-end">
-    <span
-      :class="[
-        'dropdown-badge',
-        'navbar-bg-hover',
-        'select-none',
-        Number(noticesNum) !== 0 && 'mr-[10px]'
-      ]"
-    >
-      <el-badge :value="Number(noticesNum) === 0 ? '' : noticesNum" :max="99">
-        <span class="header-notice-icon">
-          <IconifyIconOffline :icon="BellIcon" />
-        </span>
-      </el-badge>
-    </span>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-tabs
-          v-model="activeKey"
-          :stretch="true"
-          class="dropdown-tabs"
-          :style="{ width: notices.length === 0 ? '200px' : '330px' }"
-        >
-          <el-empty
-            v-if="notices.length === 0"
-            :description="t('status.pureNoMessage')"
-            :image-size="60"
-          />
-          <span v-else>
-            <template v-for="item in notices" :key="item.key">
-              <el-tab-pane :label="getLabel(item)" :name="`${item.key}`">
-                <el-scrollbar max-height="330px">
-                  <div class="noticeList-container">
-                    <NoticeList :list="item.list" :emptyText="item.emptyText" />
-                  </div>
-                </el-scrollbar>
-              </el-tab-pane>
-            </template>
-          </span>
-        </el-tabs>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
-</template>
-
-<style lang="scss" scoped>
-.dropdown-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 48px;
-  cursor: pointer;
-
-  .header-notice-icon {
-    font-size: 18px;
-  }
-}
-
-.dropdown-tabs {
-  .noticeList-container {
-    padding: 15px 24px 0;
-  }
-
-  :deep(.el-tabs__header) {
-    margin: 0;
-  }
-
-  :deep(.el-tabs__nav-wrap)::after {
-    height: 1px;
-  }
-
-  :deep(.el-tabs__nav-wrap) {
-    padding: 0 36px;
-  }
-}
-</style>

src/layout/components/lay-panel/index.vue

@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { emitter } from "@/utils/mitt";
-import { onClickOutside } from "@vueuse/core";
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
-import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
-import CloseIcon from "~icons/ep/close";
-
-const target = ref(null);
-const show = ref<Boolean>(false);
-
-const iconClass = computed(() => {
-  return [
-    "w-[22px]",
-    "h-[22px]",
-    "flex",
-    "justify-center",
-    "items-center",
-    "outline-hidden",
-    "rounded-[4px]",
-    "cursor-pointer",
-    "transition-colors",
-    "hover:bg-[#0000000f]",
-    "dark:hover:bg-[#ffffff1f]",
-    "dark:hover:text-[#ffffffd9]"
-  ];
-});
-
-const { t } = useI18n();
-const { onReset } = useDataThemeChange();
-
-onClickOutside(target, (event: any) => {
-  if (event.clientX > target.value.offsetLeft) return;
-  show.value = false;
-});
-
-onMounted(() => {
-  emitter.on("openPanel", () => {
-    show.value = true;
-  });
-});
-
-onBeforeUnmount(() => {
-  // 解绑`openPanel`公共事件，防止多次触发
-  emitter.off("openPanel");
-});
-</script>
-
-<template>
-  <div :class="{ show }">
-    <div class="right-panel-background" />
-    <div ref="target" class="right-panel bg-bg_color">
-      <div
-        class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
-      >
-        <h4 class="dark:text-white">
-          {{ t("panel.pureSystemSet") }}
-        </h4>
-        <span
-          v-tippy="{
-            content: t('panel.pureCloseSystemSet'),
-            placement: 'bottom-start',
-            zIndex: 41000
-          }"
-          :class="iconClass"
-        >
-          <IconifyIconOffline
-            class="dark:text-white"
-            width="18px"
-            height="18px"
-            :icon="CloseIcon"
-            @click="show = !show"
-          />
-        </span>
-      </div>
-      <el-scrollbar>
-        <slot />
-      </el-scrollbar>
-
-      <div
-        class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
-      >
-        <el-button
-          v-tippy="{
-            content: t('panel.pureClearCacheAndToLogin'),
-            placement: 'left-start',
-            zIndex: 41000
-          }"
-          type="danger"
-          text
-          bg
-          @click="onReset"
-        >
-          {{ t("panel.pureClearCache") }}
-        </el-button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-scrollbar) {
-  height: calc(100vh - 110px);
-}
-
-.right-panel-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  background: rgb(0 0 0 / 20%);
-  opacity: 0;
-  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-}
-
-.right-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 40000;
-  width: 100%;
-  max-width: 280px;
-  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
-  transform: translate(100%);
-  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
-}
-
-.show {
-  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
-
-  .right-panel-background {
-    z-index: 20000;
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-  }
-
-  .right-panel {
-    transform: translate(0);
-  }
-}
-
-.project-configuration {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
-}
-</style>

src/layout/components/lay-search/components/SearchHistory.vue

@@ -1,204 +0,0 @@
-<script setup lang="ts">
-import Sortable from "sortablejs";
-import { useI18n } from "vue-i18n";
-import SearchHistoryItem from "./SearchHistoryItem.vue";
-import type { optionsItem, dragItem, Props } from "../types";
-import { useEpThemeStoreHook } from "@/store/modules/epTheme";
-import { useResizeObserver, isArray, delay } from "@pureadmin/utils";
-import { ref, watch, nextTick, computed, getCurrentInstance } from "vue";
-
-interface Emits {
-  (e: "update:value", val: string): void;
-  (e: "enter"): void;
-  (e: "collect", val: optionsItem): void;
-  (e: "delete", val: optionsItem): void;
-  (e: "drag", val: dragItem): void;
-}
-
-const historyRef = ref();
-const innerHeight = ref();
-/** 判断是否停止鼠标移入事件处理 */
-const stopMouseEvent = ref(false);
-
-const { t } = useI18n();
-const emit = defineEmits<Emits>();
-const instance = getCurrentInstance()!;
-const props = withDefaults(defineProps<Props>(), {});
-
-const itemStyle = computed(() => {
-  return item => {
-    return {
-      background:
-        item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
-      color: item.path === active.value ? "#fff" : "",
-      fontSize: item.path === active.value ? "16px" : "14px"
-    };
-  };
-});
-
-const titleStyle = computed(() => {
-  return {
-    color: useEpThemeStoreHook().epThemeColor,
-    fontWeight: 500
-  };
-});
-
-const active = computed({
-  get() {
-    return props.value;
-  },
-  set(val: string) {
-    emit("update:value", val);
-  }
-});
-
-watch(
-  () => props.value,
-  newValue => {
-    if (newValue) {
-      if (stopMouseEvent.value) {
-        delay(100).then(() => (stopMouseEvent.value = false));
-      }
-    }
-  }
-);
-
-const historyList = computed(() => {
-  return props.options.filter(item => item.type === "history");
-});
-
-const collectList = computed(() => {
-  return props.options.filter(item => item.type === "collect");
-});
-
-function handleCollect(item) {
-  emit("collect", item);
-}
-
-function handleDelete(item) {
-  stopMouseEvent.value = true;
-  emit("delete", item);
-}
-
-/** 鼠标移入 */
-async function handleMouse(item) {
-  if (!stopMouseEvent.value) active.value = item.path;
-}
-
-function handleTo() {
-  emit("enter");
-}
-
-function resizeResult() {
-  // el-scrollbar max-height="calc(90vh - 140px)"
-  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
-}
-
-useResizeObserver(historyRef, resizeResult);
-
-function handleScroll(index: number) {
-  const curInstance = instance?.proxy?.$refs[`historyItemRef${index}`];
-  if (!curInstance) return 0;
-  const curRef = isArray(curInstance)
-    ? (curInstance[0] as ElRef)
-    : (curInstance as ElRef);
-  const scrollTop = curRef.offsetTop + 128; // 128 两个history-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
-  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
-}
-
-const handleChangeIndex = (evt): void => {
-  emit("drag", { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
-};
-
-let sortableInstance = null;
-
-watch(
-  collectList,
-  val => {
-    if (val.length > 1) {
-      nextTick(() => {
-        const wrapper: HTMLElement =
-          document.querySelector(".collect-container");
-        if (!wrapper || sortableInstance) return;
-        sortableInstance = Sortable.create(wrapper, {
-          animation: 160,
-          onStart: event => {
-            event.item.style.cursor = "move";
-          },
-          onEnd: event => {
-            event.item.style.cursor = "pointer";
-          },
-          onUpdate: handleChangeIndex
-        });
-        resizeResult();
-      });
-    }
-  },
-  { deep: true, immediate: true }
-);
-
-defineExpose({ handleScroll });
-</script>
-
-<template>
-  <div ref="historyRef" class="history">
-    <template v-if="historyList.length">
-      <div :style="titleStyle">
-        {{ t("search.pureHistory") }}
-      </div>
-      <div
-        v-for="(item, index) in historyList"
-        :key="item.path"
-        :ref="'historyItemRef' + index"
-        class="history-item dark:bg-[#1d1d1d]"
-        :style="itemStyle(item)"
-        @click="handleTo"
-        @mouseenter="handleMouse(item)"
-      >
-        <SearchHistoryItem
-          :item="item"
-          @delete-item="handleDelete"
-          @collect-item="handleCollect"
-        />
-      </div>
-    </template>
-    <template v-if="collectList.length">
-      <div :style="titleStyle">
-        {{
-          `${t("search.pureCollect")}${collectList.length > 1 ? t("search.pureDragSort") : ""}`
-        }}
-      </div>
-      <div class="collect-container">
-        <div
-          v-for="(item, index) in collectList"
-          :key="item.path"
-          :ref="'historyItemRef' + (index + historyList.length)"
-          class="history-item dark:bg-[#1d1d1d]"
-          :style="itemStyle(item)"
-          @click="handleTo"
-          @mouseenter="handleMouse(item)"
-        >
-          <SearchHistoryItem :item="item" @delete-item="handleDelete" />
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.history {
-  padding-bottom: 12px;
-
-  &-item {
-    display: flex;
-    align-items: center;
-    height: 56px;
-    padding: 14px;
-    margin: 8px auto 10px;
-    cursor: pointer;
-    border: 0.1px solid #ccc;
-    border-radius: 4px;
-    transition: font-size 0.16s;
-  }
-}
-</style>