chore: release v5.3.0

将原先多级路由拍平成二级路由的模式，调整为将中间层级的component移除，保持原有数据结构

.commitlintrc.js

@@ -1,6 +1,5 @@
-// .commitlintrc.js
 /** @type {import('cz-git').UserConfig} */
-module.exports = {
+export default {
   rules: {
     // @see: https://commitlint.js.org/#/reference-rules
   },
@@ -16,7 +15,7 @@ module.exports = {
       footerPrefixsSelect: '选择关联issue前缀（可选）:',
       customFooterPrefixs: '输入自定义issue前缀 :',
       footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
-      confirmCommit: '是否提交或修改commit ?'
+      confirmCommit: '是否提交或修改commit ?',
     },
     types: [
       { value: 'feat', name: 'feat:     ✨  新增功能 | A new feature', emoji: ':sparkles:' },
@@ -49,7 +48,7 @@ module.exports = {
     issuePrefixs: [
       // 如果使用 gitee 作为开发管理
       { value: 'link', name: 'link:     链接 ISSUES 进行中' },
-      { value: 'closed', name: 'closed:   标记 ISSUES 已完成' }
+      { value: 'closed', name: 'closed:   标记 ISSUES 已完成' },
     ],
     customIssuePrefixsAlign: 'top',
     emptyIssuePrefixsAlias: 'skip',
@@ -57,13 +56,13 @@ module.exports = {
     allowCustomIssuePrefixs: true,
     allowEmptyIssuePrefixs: true,
     confirmColorize: true,
-    maxHeaderLength: Infinity,
-    maxSubjectLength: Infinity,
+    maxHeaderLength: Number.POSITIVE_INFINITY,
+    maxSubjectLength: Number.POSITIVE_INFINITY,
     minSubjectLength: 0,
     scopeOverrides: undefined,
     defaultBody: '',
     defaultIssues: '',
     defaultScope: '',
-    defaultSubject: ''
-  }
+    defaultSubject: '',
+  },
 }

.cursor/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "EditorConfig.EditorConfig",
+    "mikestead.dotenv",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "Vue.volar",
+    "antfu.unocss"
+  ]
+}

.cursor/settings.json

@@ -0,0 +1,29 @@
+{
+  "eslint.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "scss",
+    "vue"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

.env.development

@@ -1,9 +1,15 @@
+# 应用配置面板
+VITE_APP_SETTING = true
 # 页面标题
 VITE_APP_TITLE = Fantastic-admin 基础版
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
 
 # 是否开启代理
-VITE_OPEN_PROXY = true
+VITE_OPEN_PROXY = false
+# 是否开启开发者工具
+VITE_OPEN_DEVTOOLS = false

.env.production

@@ -1,9 +1,13 @@
+# 应用配置面板
+VITE_APP_SETTING = false
 # 页面标题
-VITE_APP_TITLE = 页面标题
+VITE_APP_TITLE = Fantastic-admin 基础版
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
 
 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = false
@@ -11,3 +15,5 @@ VITE_BUILD_MOCK = false
 VITE_BUILD_SOURCEMAP = false
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip,brotli
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =

.env.test

@@ -1,9 +1,13 @@
+# 应用配置面板
+VITE_APP_SETTING = false
 # 页面标题
-VITE_APP_TITLE = 页面标题(test)
+VITE_APP_TITLE = Fantastic-admin 基础版
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
 
 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = true
@@ -11,3 +15,5 @@ VITE_BUILD_MOCK = true
 VITE_BUILD_SOURCEMAP = true
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS =
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =

.eslintignore

@@ -1,2 +0,0 @@
-dist
-node_modules

.eslintrc

@@ -1,10 +0,0 @@
-{
-  "extends": "@antfu",
-  "rules": {
-    "eslint-comments/no-unlimited-disable": "off",
-    "curly": ["error", "all"],
-    "vue/component-tags-order": ["error", {
-      "order": ["route", "script", "template", "style"]
-    }]
-  }
-}

.github/workflows/release.yml

@@ -9,13 +9,13 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 22
 
       - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
         env:
@@ -25,7 +25,7 @@ jobs:
     needs: release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -40,7 +40,7 @@ jobs:
       - name: Create Archive
         uses: thedoctor0/zip-release@main
         with:
-          type: 'zip'
+          type: zip
           filename: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip
           exclusions: '/.git/* /.github/*'
 
@@ -57,7 +57,7 @@ jobs:
     needs: release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: example
@@ -73,9 +73,9 @@ jobs:
       - name: Create Archive
         uses: thedoctor0/zip-release@main
         with:
-          type: 'zip'
+          type: zip
           filename: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip
-          exclusions: '/.git/* /.github/*'
+          exclusions: '/.git/* /.github/* /public/.github/* /public/.nojekyll'
 
       - name: Upload Archive To Release
         uses: xresloader/upload-to-github-release@v1

.github/workflows/repo-sync.yml

@@ -1,9 +1,9 @@
 name: repo-sync
 
 on:
-  # 每天自动同步
+  # 每天 00:05 自动同步
   schedule:
-    - cron: '0 0 * * *'
+    - cron: '5 0 * * *'
   # 手动触发部署
   workflow_dispatch:
 
@@ -18,6 +18,6 @@ jobs:
           SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
         with:
           # 注意替换为你的 GitHub 源仓库地址
-          source-repo: git@github.com:hooray/fantastic-admin.git
+          source-repo: git@github.com:fantastic-admin/basic.git
           # 注意替换为你的 Gitee 目标仓库地址
-          destination-repo: git@gitee.com:hooray/fantastic-admin.git
+          destination-repo: git@gitee.com:fantastic-admin/basic.git

.gitignore

@@ -5,6 +5,3 @@ dist-ssr
 *.local
 .eslintcache
 .stylelintcache
-src/assets/sprites/*.*
-!src/assets/sprites/.gitkeep
-public/icons

.lintstagedrc

@@ -1,4 +1,4 @@
 {
-  "*.{ts,tsx,vue}": "eslint --cache --fix --no-ignore --no-error-on-unmatched-pattern --ext .ts,.tsx,.vue src/",
-  "*.{css,scss,vue}": "stylelint src/**/*.{css,scss,vue} --cache --fix --allow-empty-input"
+  "*.{ts,tsx,vue}": "eslint --cache --fix",
+  "*.{css,scss,vue}": "stylelint --cache --fix"
 }

.node-version

@@ -0,0 +1 @@
+22

.npmrc

@@ -1,2 +1,4 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+engine-strict=true
+verify-deps-before-run=prompt

.stylelintignore

@@ -1,3 +0,0 @@
-dist
-node_modules
-src/assets/sprites

.stylelintrc

@@ -1,27 +0,0 @@
-{
-  "extends": [
-    "stylelint-stylistic/config",
-    "stylelint-config-standard",
-    "stylelint-config-standard-scss",
-    "stylelint-config-standard-vue/scss"
-  ],
-  "plugins": [
-    "stylelint-scss"
-  ],
-  "rules": {
-    "stylistic/max-line-length": null,
-    "stylistic/block-closing-brace-newline-after": [
-      "always",
-      {
-        "ignoreAtRules": ["if", "else"]
-      }
-    ],
-    "at-rule-no-unknown": null,
-    "no-descending-specificity": null,
-    "property-no-unknown": null,
-    "font-family-no-missing-generic-family-keyword": null,
-    "selector-class-pattern": null,
-    "scss/double-slash-comment-empty-line-before": null,
-    "scss/no-global-function-names": null
-  }
-}

.vscode/extensions.json

@@ -5,6 +5,6 @@
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
+    "antfu.unocss"
   ]
 }

.vscode/settings.json

@@ -1,7 +1,29 @@
 {
+  "eslint.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
   },
-  "stylelint.validate": ["css", "scss", "vue"]
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "scss",
+    "vue"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 fantastic-template
+Copyright (c) 2020 fantastic-admin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,34 +1,27 @@
 <p align="center">
-  <img src="https://hooray.gitee.io/fantastic-admin/logo.png" width="200" height="200" />
+  <img src="https://fantastic-admin.hurui.me/logo.svg" width="200" height="200" />
 </p>
 
 <h1 align="center">Fantastic-admin</h1>
 
-<p align="center">一款<b>开箱即用</b>的 Vue 中后台管理系统框架</p>
+<p align="center">一款<b>开箱即用</b>的 Vue3 中后台管理系统框架</p>
 
 <p align="center">
-  <a href="https://hooray.gitee.io/fantastic-admin" target="_blank">官网</a>
-  ( <a href="https://hooray.github.io/fantastic-admin" target="_blank">备用</a> )
+  <a href="https://fantastic-admin.hurui.me" target="_blank">官网</a>
   <span>&nbsp;|&nbsp;</span>
-  演示
-  ( <a href="https://hooray.gitee.io/fantastic-admin-example" target="_blank">基础版</a>
-  <a href="https://hooray.gitee.io/fantastic-admin-pro-example" target="_blank">专业版</a> )
-  <span>&nbsp;|&nbsp;</span>
-  <a href="https://hooray.gitee.io/fantastic-admin/support.html" target="_blank">技术支持</a>
-  <span>&nbsp;|&nbsp;</span>
-  <a href="https://hooray.gitee.io/fantastic-admin/buy.html" target="_blank">购买</a>
+  <a href="https://fantastic-admin.pages.dev" target="_blank">备用地址</a>
 <p>
 
 <p align="center">
-  <a href="###"><img src="https://img.shields.io/github/license/hooray/fantastic-admin?label=%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE&style=flat-square" /></a>
-  <a href="https://github.com/hooray/fantastic-admin/releases" target="_blank"><img src="https://img.shields.io/github/v/release/hooray/fantastic-admin?label=%E5%BD%93%E5%89%8D%E7%89%88%E6%9C%AC&style=flat-square" /></a>
+  <a href="###"><img src="https://img.shields.io/github/license/fantastic-admin/basic?label=%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE&style=flat-square" /></a>
+  <a href="https://github.com/fantastic-admin/basic/releases" target="_blank"><img src="https://img.shields.io/github/v/release/fantastic-admin/basic?label=%E5%BD%93%E5%89%8D%E7%89%88%E6%9C%AC&style=flat-square" /></a>
 </p>
 
 ## 特点
 
+- 可自由替换 UI 组件库，默认使用 Element Plus
 - 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端
 - 提供系统配置文件，轻松实现个性化定制
-- 精心设计的动效，让每一处的动画都干净利落
 - 根据路由配置自动生成导航栏
 - 基于文件系统的路由
 - 支持全方位权限验证
@@ -36,29 +29,31 @@
 - 轻松实现国际化多语言适配
 - 提供接近于浏览器原生标签栏操作体验的标签页功能
 
-## 分支说明
+## 下载
 
-- `master` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
+> 本仓库为基础版
+
+**直接拉取源码可能会包含未发布的内容，推荐去 [Github Releases](https://github.com/fantastic-admin/basic/releases) 页面下载稳定版本的压缩包**。如果确定需要拉取源码，请参考下列分支说明：
+
+- `main` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
 - `example` Vue3 版本演示源码分支，同线上演示站，包含大量示例，可用于参考学习
 - `vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发（停止维护）
 - `vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习（停止维护）
 
-如果你更注重使用时的稳定性，推荐去 [Github Releases](https://github.com/hooray/fantastic-admin/releases) 页面下载最新稳定版本的压缩包。
-
 ## 预览
 
 > 预览截图为 Vue3 专业版
 
 <table>
   <tr>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview1.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview2.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview3.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview1.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview2.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview3.png" /></td>
   </tr>
   <tr>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview4.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview5.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview6.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview4.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview5.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview6.png" /></td>
   </tr>
 </table>
 
@@ -66,21 +61,27 @@
 
 如果觉得 Fantastic-admin 这个框架不错，或者已经在使用了，希望你可以在 **Github** 或者 **Gitee(码云)** 帮我点个 ⭐ ，这将对我是极大的鼓励。
 
-[![star](https://img.shields.io/github/stars/hooray/fantastic-admin?style=social)](https://github.com/hooray/fantastic-admin/stargazers)
+[![star](https://img.shields.io/github/stars/fantastic-admin/basic?style=social)](https://github.com/fantastic-admin/basic)
 
-[![star](https://gitee.com/hooray/fantastic-admin/badge/star.svg?theme=dark)](https://gitee.com/hooray/fantastic-admin/stargazers)
+[![star](https://gitee.com/fantastic-admin/basic/badge/star.svg?theme=dark)](https://gitee.com/fantastic-admin/basic)
+
+<details>
+<summary>Github Stars 曲线</summary>
+
+[![Stargazers over time](https://starchart.cc/fantastic-admin/basic.svg)](https://starchart.cc/fantastic-admin/basic)
+</details>
 
 ## 生态
 
 <table>
   <tr>
     <th colspan="3" align="center">
-      <a href="https://hooray.gitee.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
+      <a href="https://hooray.github.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
     </th>
   </tr>
   <tr>
     <th colspan="3" align="center">
-      一款开箱即用的 Vue 项目启动套件
+      一款简单好用的 Vue3 项目启动套件
     </th>
   </tr>
 </table>
@@ -88,7 +89,7 @@
 <table>
   <tr>
     <th colspan="3" align="center">
-      <a href="https://hooray.gitee.io/one-step-admin/" target="_blank">One-step-admin</a>
+      <a href="https://one-step-admin.hurui.me" target="_blank">One-step-admin</a>
     </th>
   </tr>
   <tr>
@@ -97,13 +98,32 @@
     </th>
   </tr>
   <tr>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview1.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview2.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview3.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview1.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview2.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview3.png" /></td>
   </tr>
   <tr>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview4.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview5.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview6.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview4.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview5.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview6.png" /></td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <th colspan="4" align="center">
+      <a href="https://fantastic-mobile.hurui.me" target="_blank">Fantastic-mobile</a>
+    </th>
+  </tr>
+  <tr>
+    <th colspan="4" align="center">
+      一款自成一派的移动端 H5 框架
+    </th>
+  </tr>
+  <tr>
+    <td><img src="https://fantastic-mobile.hurui.me/preview1.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview2.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview3.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview4.png" /></td>
   </tr>
 </table>

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/assets/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/ui/shadcn",
+    "utils": "@/utils",
+    "lib": "@/utils"
+  }
+}

eslint.config.js

@@ -0,0 +1,32 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    unocss: true,
+    ignores: [
+      'public',
+      'dist*',
+      'src/ui/shadcn/ui',
+    ],
+  },
+  {
+    rules: {
+      'eslint-comments/no-unlimited-disable': 'off',
+      'curly': ['error', 'all'],
+      'ts/no-unused-expressions': ['error', {
+        allowShortCircuit: true,
+        allowTernary: true,
+      }],
+    },
+  },
+  {
+    files: [
+      'src/**/*.vue',
+    ],
+    rules: {
+      'vue/block-order': ['error', {
+        order: ['route', 'script', 'template', 'style'],
+      }],
+    },
+  },
+)

index.html

@@ -2,29 +2,23 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/loading.css" />
+    <link rel="icon" href="/favicon.svg" />
     <link rel="stylesheet" href="/browser_upgrade/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
     <title>%VITE_APP_TITLE%</title>
   </head>
   <body>
     <div id="app">
-      <div class="fantastic-admin-home">
-        <div class="loading">
-          <div class="square"></div>
-          <div class="square"></div>
-          <div class="square"></div>
-          <div class="square"></div>
-        </div>
-        <div class="text">载入中</div>
-      </div>
       <div id="browser-upgrade">
         <div class="title">为了您的体验，推荐使用以下浏览器</div>
         <div class="browsers">
           <a href="https://www.microsoft.com/edge" target="_blank" class="browser">
             <img class="browser-icon" src="/browser_upgrade/edge.png" />
-            <div class="browser-name">Mircosoft Edge</div>
+            <div class="browser-name">Microsoft Edge</div>
           </a>
           <a href="https://www.google.cn/chrome/" target="_blank" class="browser">
             <img class="browser-icon" src="/browser_upgrade/chrome.png" />

loading.html

@@ -0,0 +1,204 @@
+<style>
+@keyframes rainbow {
+  0% { --rainbow-color: #00a98e; }
+  1.25% { --rainbow-color: #00a996; }
+  2.5% { --rainbow-color: #00a99f; }
+  3.75% { --rainbow-color: #00a9a7; }
+  5% { --rainbow-color: #00a9b0; }
+  6.25% { --rainbow-color: #00a9b8; }
+  7.5% { --rainbow-color: #00a9c0; }
+  8.75% { --rainbow-color: #00a8c7; }
+  10% { --rainbow-color: #00a8cf; }
+  11.25% { --rainbow-color: #00a7d5; }
+  12.5% { --rainbow-color: #00a6dc; }
+  13.75% { --rainbow-color: #00a6e2; }
+  15% { --rainbow-color: #00a4e7; }
+  16.25% { --rainbow-color: #00a3ec; }
+  17.5% { --rainbow-color: #00a2f1; }
+  18.75% { --rainbow-color: #00a0f4; }
+  20% { --rainbow-color: #009ff7; }
+  21.25% { --rainbow-color: #009dfa; }
+  22.5% { --rainbow-color: #009bfc; }
+  23.75% { --rainbow-color: #0098fd; }
+  25% { --rainbow-color: #0096fd; }
+  26.25% { --rainbow-color: #0093fd; }
+  27.5% { --rainbow-color: #2e90fc; }
+  28.75% { --rainbow-color: #4d8dfa; }
+  30% { --rainbow-color: #638af8; }
+  31.25% { --rainbow-color: #7587f5; }
+  32.5% { --rainbow-color: #8583f1; }
+  33.75% { --rainbow-color: #9280ed; }
+  35% { --rainbow-color: #9f7ce9; }
+  36.25% { --rainbow-color: #aa78e3; }
+  37.5% { --rainbow-color: #b574dd; }
+  38.75% { --rainbow-color: #be71d7; }
+  40% { --rainbow-color: #c76dd1; }
+  41.25% { --rainbow-color: #cf69c9; }
+  42.5% { --rainbow-color: #d566c2; }
+  43.75% { --rainbow-color: #dc63ba; }
+  45% { --rainbow-color: #e160b3; }
+  46.25% { --rainbow-color: #e65eab; }
+  47.5% { --rainbow-color: #e95ca2; }
+  48.75% { --rainbow-color: #ed5a9a; }
+  50% { --rainbow-color: #ef5992; }
+  51.25% { --rainbow-color: #f15989; }
+  52.5% { --rainbow-color: #f25981; }
+  53.75% { --rainbow-color: #f25a79; }
+  55% { --rainbow-color: #f25c71; }
+  56.25% { --rainbow-color: #f15e69; }
+  57.5% { --rainbow-color: #ef6061; }
+  58.75% { --rainbow-color: #ed635a; }
+  60% { --rainbow-color: #eb6552; }
+  61.25% { --rainbow-color: #e8694b; }
+  62.5% { --rainbow-color: #e46c44; }
+  63.75% { --rainbow-color: #e06f3d; }
+  65% { --rainbow-color: #db7336; }
+  66.25% { --rainbow-color: #d77630; }
+  67.5% { --rainbow-color: #d17a2a; }
+  68.75% { --rainbow-color: #cc7d24; }
+  70% { --rainbow-color: #c6811e; }
+  71.25% { --rainbow-color: #bf8418; }
+  72.5% { --rainbow-color: #b98713; }
+  73.75% { --rainbow-color: #b28a0f; }
+  75% { --rainbow-color: #ab8d0c; }
+  76.25% { --rainbow-color: #a3900b; }
+  77.5% { --rainbow-color: #9c920d; }
+  78.75% { --rainbow-color: #949510; }
+  80% { --rainbow-color: #8b9715; }
+  81.25% { --rainbow-color: #83991b; }
+  82.5% { --rainbow-color: #7a9b21; }
+  83.75% { --rainbow-color: #719d27; }
+  85% { --rainbow-color: #679e2e; }
+  86.25% { --rainbow-color: #5da035; }
+  87.5% { --rainbow-color: #51a13c; }
+  88.75% { --rainbow-color: #44a244; }
+  90% { --rainbow-color: #34a44b; }
+  91.25% { --rainbow-color: #1ba553; }
+  92.5% { --rainbow-color: #00a65b; }
+  93.75% { --rainbow-color: #00a663; }
+  95% { --rainbow-color: #00a76c; }
+  96.25% { --rainbow-color: #00a874; }
+  97.5% { --rainbow-color: #00a87d; }
+  98.75% { --rainbow-color: #00a985; }
+  100% { --rainbow-color: #00a98e; }
+}
+
+:root {
+  --rainbow-color: #00a98e;
+  animation: rainbow 20s linear infinite;
+}
+
+.loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--rainbow-color);
+  user-select: none;
+  background-color: snow;
+}
+
+.loading-container *::before,
+.loading-container *::after {
+  box-sizing: content-box;
+}
+
+.loading-container .loading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.loading-container .loading .square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.loading-container .loading .square::before {
+  width: 10px;
+  height: 10px;
+  content: "";
+  border: 3px solid var(--rainbow-color);
+  border-radius: 15%;
+  animation: square-to-dot-animation 2s linear infinite;
+}
+
+.loading-container .loading .square:nth-child(1)::before {
+  animation-delay: calc(150ms * 1);
+}
+
+.loading-container .loading .square:nth-child(2)::before {
+  animation-delay: calc(150ms * 2);
+}
+
+.loading-container .loading .square:nth-child(3)::before {
+  animation-delay: calc(150ms * 3);
+}
+
+.loading-container .loading .square:nth-child(4)::before {
+  animation-delay: calc(150ms * 4);
+}
+
+@keyframes square-to-dot-animation {
+  15%,
+  25% {
+    width: 0;
+    height: 0;
+    margin: 5px;
+    border-width: 5px;
+    border-radius: 100%;
+  }
+
+  40% {
+    width: 10px;
+    height: 10px;
+    margin: initial;
+    border-width: 3px;
+    border-radius: 15%;
+  }
+}
+
+.loading-container .name {
+  position: relative;
+  margin-top: 20px;
+  font-size: 24px;
+  line-height: 1.5;
+}
+
+.loading-container .tips {
+  position: relative;
+  margin-top: 10px;
+  font-size: 16px;
+  opacity: 0.5;
+  line-height: 1.5;
+}
+
+.loading-container .tips::after {
+  position: absolute;
+  padding-left: 5px;
+  content: "…";
+}
+</style>
+
+<div class="loading-container">
+  <div class="loading">
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+  </div>
+  <div class="name">%VITE_APP_TITLE%</div>
+  <div class="tips">载入中</div>
+</div>

package.json

@@ -1,86 +1,118 @@
 {
-  "version": "2.11.0",
+  "type": "module",
+  "version": "5.3.0",
+  "engines": {
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+  },
   "scripts": {
     "dev": "vite",
-    "build:test": "vue-tsc --noEmit && vite build --mode test",
-    "build": "vue-tsc --noEmit && vite build",
-    "serve:test": "http-server ./dist-test -o",
+    "build": "vue-tsc -b && vite build",
+    "build:test": "vue-tsc -b && vite build --mode test",
     "serve": "http-server ./dist -o",
+    "serve:test": "http-server ./dist-test -o",
     "svgo": "svgo -f src/assets/icons",
     "new": "plop",
+    "generate:icons": "esno ./scripts/generate.icons.ts",
     "lint": "npm-run-all -s lint:tsc lint:eslint lint:stylelint",
-    "lint:tsc": "vue-tsc --noEmit",
-    "lint:eslint": "eslint --cache --fix --no-ignore --no-error-on-unmatched-pattern --ext .ts,.tsx,.vue src/",
-    "lint:stylelint": "stylelint src/**/*.{css,scss,vue} --cache --fix --allow-empty-input",
-    "postinstall": "simple-git-hooks && esno scripts/prepare.js",
+    "lint:tsc": "vue-tsc -b",
+    "lint:eslint": "eslint . --cache --fix",
+    "lint:stylelint": "stylelint \"src/**/*.{css,scss,vue}\" --cache --fix",
     "preinstall": "npx only-allow pnpm",
+    "postinstall": "simple-git-hooks",
+    "taze": "taze minor -wIr",
     "commit": "git cz",
     "release": "bumpp"
   },
   "dependencies": {
-    "@vueuse/core": "^9.13.0",
-    "@vueuse/integrations": "^9.13.0",
-    "axios": "^1.3.5",
-    "dayjs": "^1.11.7",
-    "element-plus": "^2.3.3",
-    "eruda": "^3.0.0",
-    "hotkeys-js": "^3.10.2",
-    "lodash-es": "^4.17.21",
-    "mitt": "^3.0.0",
-    "mockjs": "^1.1.0",
+    "@vee-validate/zod": "^4.15.0",
+    "@vueuse/components": "^13.1.0",
+    "@vueuse/core": "^13.1.0",
+    "@vueuse/integrations": "^13.1.0",
+    "axios": "^1.9.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "defu": "^6.1.4",
+    "disable-devtool": "^0.3.8",
+    "element-plus": "^2.9.9",
+    "eruda": "^3.4.1",
+    "es-toolkit": "^1.36.0",
+    "hotkeys-js": "^3.13.9",
+    "lucide-vue-next": "^0.503.0",
+    "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.1",
-    "pinia": "^2.0.34",
-    "qs": "^6.11.1",
-    "vconsole": "^3.15.0",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "path-to-regexp": "^8.2.0",
+    "pinia": "^3.0.2",
+    "qs": "^6.14.0",
+    "reka-ui": "^2.2.0",
+    "scule": "^1.3.0",
+    "tailwind-merge": "^3.2.0",
+    "ua-parser-js": "^2.0.3",
+    "vconsole": "^3.15.1",
+    "vee-validate": "^4.15.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1",
+    "vue-sonner": "^1.3.2",
+    "zod": "^3.24.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.4",
-    "@iconify-json/ep": "^1.1.10",
-    "@iconify/vue": "^4.1.1",
-    "@types/nprogress": "^0.2.0",
-    "@types/path-browserify": "^1.0.0",
-    "@types/qs": "^6.9.7",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "autoprefixer": "^10.4.14",
-    "bumpp": "^9.1.0",
-    "cz-git": "^1.6.1",
-    "eslint": "^8.38.0",
-    "esno": "^0.16.3",
-    "fs-extra": "^11.1.1",
+    "@antfu/eslint-config": "4.3.0",
+    "@faker-js/faker": "^9.7.0",
+    "@iconify/json": "^2.2.333",
+    "@iconify/vue": "^4.3.0",
+    "@stylistic/stylelint-config": "^2.0.0",
+    "@types/nprogress": "^0.2.3",
+    "@types/path-browserify": "^1.0.3",
+    "@types/qs": "^6.9.18",
+    "@unocss/eslint-plugin": "^66.0.0",
+    "@unocss/preset-legacy-compat": "^66.0.0",
+    "@vitejs/plugin-legacy": "^6.1.1",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.21",
+    "boxen": "^8.0.1",
+    "bumpp": "^10.1.0",
+    "cz-git": "^1.11.1",
+    "eslint": "^9.25.1",
+    "esno": "^4.8.0",
+    "fs-extra": "^11.3.0",
     "http-server": "^14.1.1",
-    "lint-staged": "^13.2.1",
-    "npm-run-all": "^4.1.5",
-    "plop": "^3.1.2",
-    "postcss-html": "^1.5.0",
-    "sass": "^1.62.0",
-    "simple-git-hooks": "^2.8.1",
-    "stylelint": "^15.4.0",
-    "stylelint-config-standard": "^32.0.0",
-    "stylelint-config-standard-scss": "^8.0.0",
+    "inquirer": "^12.6.0",
+    "lint-staged": "^15.5.1",
+    "npm-run-all2": "^7.0.2",
+    "picocolors": "^1.1.1",
+    "plop": "^4.0.1",
+    "postcss": "^8.5.3",
+    "postcss-nested": "^7.0.2",
+    "sass-embedded": "^1.87.0",
+    "simple-git-hooks": "^2.13.0",
+    "stylelint": "^16.19.1",
+    "stylelint-config-recess-order": "^6.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-scss": "^4.6.0",
-    "stylelint-stylistic": "^0.4.0",
-    "svgo": "^3.0.2",
-    "terser": "^5.16.9",
-    "typescript": "^5.0.4",
-    "unplugin-auto-import": "^0.15.2",
-    "unplugin-vue-components": "^0.24.1",
-    "unplugin-vue-setup-extend-plus": "^1.0.0",
-    "vite": "^4.2.1",
-    "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-pages": "^0.29.0",
-    "vite-plugin-spritesmith": "^0.1.1",
+    "stylelint-scss": "^6.11.1",
+    "svgo": "^3.3.2",
+    "taze": "^19.0.4",
+    "typescript": "^5.8.3",
+    "unocss": "^66.0.0",
+    "unocss-preset-animations": "^1.2.1",
+    "unplugin-auto-import": "^19.1.2",
+    "unplugin-turbo-console": "^2.1.3",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.2.7",
+    "vite-plugin-app-loading": "^0.3.1",
+    "vite-plugin-archiver": "^0.1.2",
+    "vite-plugin-banner": "^0.8.1",
+    "vite-plugin-compression2": "^1.3.3",
+    "vite-plugin-env-parse": "^1.0.15",
+    "vite-plugin-fake-server": "^2.2.0",
+    "vite-plugin-pages": "^0.33.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-inspector": "^3.4.0",
-    "vite-plugin-vue-meta-layouts": "^0.2.2",
-    "vue-tsc": "^1.2.0"
+    "vite-plugin-vue-devtools": "^7.7.6",
+    "vite-plugin-vue-meta-layouts": "^0.5.1",
+    "vue-tsc": "^2.2.10"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

plop-templates/component/index.hbs

@@ -1,5 +1,9 @@
-<script lang="ts" setup{{#if isGlobal}} name="{{ properCase name }}"{{/if}}>
-// 逻辑代码
+<script setup lang="ts">
+{{#if isGlobal}}
+defineOptions({
+  name: '{{ properCase name }}',
+})
+{{/if}}
 </script>
 
 <template>
@@ -8,6 +12,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

plop-templates/component/prompt.js

@@ -1,4 +1,4 @@
-const fs = require('fs')
+import fs from 'node:fs'
 
 function getFolder(path) {
   const components = []
@@ -13,7 +13,7 @@ function getFolder(path) {
   return components
 }
 
-module.exports = {
+export default {
   description: '创建组件',
   prompts: [
     {

plop-templates/mock/mock.hbs

@@ -0,0 +1,85 @@
+import { faker } from '@faker-js/faker'
+import { defineFakeRoute } from 'vite-plugin-fake-server/client'
+
+const AllList: any[] = []
+for (let i = 0; i < 50; i++) {
+  AllList.push({
+    id: i + 1,
+    title: faker.color.human(),
+  })
+}
+
+export default defineFakeRoute([
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/list',
+    method: 'get',
+    response: ({ query }) => {
+      const { title, from, limit } = query
+      const list = AllList.filter((item) => {
+        return title ? item.title.includes(title) : true
+      })
+      const pageList = list.filter((item, index) => {
+        return index >= ~~from && index < (~~from + ~~limit)
+      })
+      return {
+        error: '',
+        status: 1,
+        data: {
+          list: pageList,
+          total: list.length,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/detail',
+    method: 'get',
+    response: ({ query }) => {
+      const info = AllList.filter(item => item.id === query.id)
+      return {
+        error: '',
+        status: 1,
+        data: info[0],
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/create',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/edit',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/delete',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+])

plop-templates/mock/prompt.js

@@ -0,0 +1,43 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+function getFolder(path) {
+  const components = []
+  const files = fs.readdirSync(path)
+  files.forEach((item) => {
+    const stat = fs.lstatSync(`${path}/${item}`)
+    if (stat.isDirectory() === true && item !== 'components') {
+      components.push(`${path}/${item}`)
+      components.push(...getFolder(`${path}/${item}`))
+    }
+  })
+  return components
+}
+
+export default {
+  description: '创建标准模块 Mock',
+  prompts: [
+    {
+      type: 'list',
+      name: 'path',
+      message: '请选择模块目录',
+      choices: getFolder('src/views'),
+    },
+  ],
+  actions: (data) => {
+    const pathArr = path.relative('src/views', data.path).split('\\')
+    const moduleName = pathArr.pop()
+    const relativePath = pathArr.join('/')
+    const actions = []
+    actions.push({
+      type: 'add',
+      path: pathArr.length === 0 ? 'src/mock/{{moduleName}}.ts' : `src/mock/${pathArr.join('.')}.{{moduleName}}.ts`,
+      templateFile: 'plop-templates/mock/mock.hbs',
+      data: {
+        relativePath,
+        moduleName,
+      },
+    })
+    return actions
+  },
+}

plop-templates/page/index.hbs

@@ -3,10 +3,12 @@
 meta:
   title: 页面标题
 </route>
-{{/if}}
 
-<script lang="ts" setup name="{{ properCase componentName }}">
-// 逻辑代码
+{{/if}}
+<script setup lang="ts">
+defineOptions({
+  name: '{{ properCase componentName }}',
+})
 </script>
 
 <template>
@@ -15,6 +17,6 @@ meta:
   </div>
 </template>
 
-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>

plop-templates/page/prompt.js

@@ -1,5 +1,5 @@
-const path = require('path')
-const fs = require('fs')
+import fs from 'node:fs'
+import path from 'node:path'
 
 function getFolder(path) {
   const components = []
@@ -14,7 +14,7 @@ function getFolder(path) {
   return components
 }
 
-module.exports = {
+export default {
   description: '创建页面',
   prompts: [
     {

plop-templates/store/index.hbs

@@ -1,10 +1,12 @@
 const use{{ properCase name }}Store = defineStore(
   // 唯一ID
   '{{ camelCase name }}',
-  {
-    state: () => ({}),
-    getters: {},
-    actions: {},
+  () => {
+    const someThing = ref(0)
+
+    return {
+      someThing,
+    }
   },
 )
 

plop-templates/store/prompt.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   description: '创建全局状态',
   prompts: [
     {

plopfile.js

@@ -1,6 +1,13 @@
-module.exports = function (plop) {
+import { promises as fs } from 'node:fs'
+
+export default async function (plop) {
   plop.setWelcomeMessage('请选择需要创建的模式：')
-  plop.setGenerator('page', require('./plop-templates/page/prompt'))
-  plop.setGenerator('component', require('./plop-templates/component/prompt'))
-  plop.setGenerator('store', require('./plop-templates/store/prompt'))
+  const items = await fs.readdir('./plop-templates')
+  for (const item of items) {
+    const stat = await fs.lstat(`./plop-templates/${item}`)
+    if (stat.isDirectory()) {
+      const prompt = await import(`./plop-templates/${item}/prompt.js`)
+      plop.setGenerator(item, prompt.default)
+    }
+  }
 }

postcss.config.js

@@ -1,5 +1,6 @@
-module.exports = {
+export default {
   plugins: {
-    autoprefixer: {},
+    'autoprefixer': {},
+    'postcss-nested': {},
   },
 }

public/browser_upgrade/index.css

@@ -1,20 +1,20 @@
 #browser-upgrade {
   position: absolute;
-  z-index: 10001;
   top: 0;
   left: 0;
-  height: 100%;
-  width: 100%;
+  z-index: 10001;
   display: none;
-  user-select: none;
+  width: 100%;
+  height: 100%;
   color: #736477;
+  user-select: none;
   background-color: snow;
 }
 
 #browser-upgrade .title {
   margin: 40px 0;
-  text-align: center;
   font-size: 24px;
+  text-align: center;
 }
 
 #browser-upgrade .browsers {
@@ -24,8 +24,8 @@
 #browser-upgrade .browsers .browser {
   display: inline-block;
   margin: 0 20px;
-  cursor: pointer;
   text-decoration: none;
+  cursor: pointer;
 }
 
 #browser-upgrade .browsers .browser .browser-icon {
@@ -37,10 +37,10 @@
 }
 
 #browser-upgrade .browsers .browser .browser-name {
-  text-align: center;
-  margin-top: 10px;
   padding-bottom: 2px;
+  margin-top: 10px;
   color: #736477;
+  text-align: center;
   border-bottom: 1px solid transparent;
 }
 

public/favicon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -21 206 206" xml:space="preserve">
+  <path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
+	c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
+	c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
+	c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
+	c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
+	c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#42b883" />
+  <path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
+	c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
+	c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
+	c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
+	c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
+	c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
+</svg>

public/loading.css

@@ -1,92 +0,0 @@
-#app {
-  height: 100%;
-}
-
-.fantastic-admin-home {
-  position: absolute;
-  z-index: 10000;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  user-select: none;
-  color: #736477;
-  background-color: snow;
-}
-
-.fantastic-admin-home .loading {
-  height: 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.fantastic-admin-home .loading .square {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 20px;
-  width: 20px;
-}
-
-.fantastic-admin-home .loading .square::before {
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-radius: 15%;
-  border: 3px solid #8c858f;
-  animation: square-to-dot-animation 2s linear infinite;
-}
-
-.fantastic-admin-home .loading .square:nth-child(1)::before {
-  animation-delay: calc(150ms * 1);
-}
-
-.fantastic-admin-home .loading .square:nth-child(2)::before {
-  animation-delay: calc(150ms * 2);
-}
-
-.fantastic-admin-home .loading .square:nth-child(3)::before {
-  animation-delay: calc(150ms * 3);
-}
-
-.fantastic-admin-home .loading .square:nth-child(4)::before {
-  animation-delay: calc(150ms * 4);
-}
-
-@keyframes square-to-dot-animation {
-  15%,
-  25% {
-    border-radius: 100%;
-    width: 0;
-    height: 0;
-    margin: 5px;
-    border-width: 5px;
-  }
-
-  40% {
-    border-radius: 15%;
-    width: 10px;
-    height: 10px;
-    margin: initial;
-    border-width: 3px;
-  }
-}
-
-.fantastic-admin-home .text {
-  position: relative;
-  font-size: 24px;
-  margin-top: 20px;
-}
-
-.fantastic-admin-home .text::after {
-  content: '…';
-  position: absolute;
-  padding-left: 5px;
-}

scripts/generate.icons.ts

@@ -0,0 +1,75 @@
+import { exec } from 'node:child_process'
+import path from 'node:path'
+import process from 'node:process'
+import { lookupCollection, lookupCollections } from '@iconify/json'
+import { checkbox, confirm } from '@inquirer/prompts'
+import fs from 'fs-extra'
+
+// 拿到全部图标集的原始数据
+const raw = await lookupCollections()
+
+let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
+lastChoose = JSON.parse(lastChoose)
+
+// 取出可使用的图标集数据用于 inquirer 选择，并按名称排序
+const collections = Object.entries(raw).map(([id, item]) => ({
+  ...item,
+  id,
+})).sort((a, b) => a.name.localeCompare(b.name))
+
+/**
+ * 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
+ * (1) src/iconify/index.json    记录用户 inquirer 的交互信息
+ * (2) src/iconify/data.json     包含多个图标集数据，仅记录图标名
+ * (3) public/icons/*-raw.json   多个图标集的原始数据，独立存放，用于离线使用
+ */
+const answers = {
+  collections: await checkbox({
+    message: '请选择需要生成的图标集',
+    choices: collections.map(item => ({
+      name: `${item.name} (${item.total} icons)`,
+      value: item.id,
+      checked: lastChoose.collections.includes(item.id),
+    })),
+  }),
+  isOfflineUse: await confirm({
+    message: '是否需要离线使用',
+    default: false,
+  }),
+}
+
+await fs.writeJSON(
+  path.resolve(process.cwd(), 'src/iconify/index.json'),
+  {
+    collections: answers.collections,
+    isOfflineUse: answers.isOfflineUse,
+  },
+)
+
+const outputDir = path.resolve(process.cwd(), 'public/icons')
+await fs.ensureDir(outputDir)
+await fs.emptyDir(outputDir)
+
+const collectionsMeta: object[] = []
+for (const info of answers.collections) {
+  const setData = await lookupCollection(info)
+
+  collectionsMeta.push({
+    prefix: setData.prefix,
+    info: setData.info,
+    icons: Object.keys(setData.icons),
+  })
+
+  const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
+
+  if (answers.isOfflineUse) {
+    await fs.writeJSON(offlineFilePath, setData)
+  }
+}
+
+await fs.writeJSON(
+  path.resolve(process.cwd(), 'src/iconify/data.json'),
+  collectionsMeta,
+)
+
+exec('eslint src/iconify/data.json src/iconify/index.json --cache --fix')

scripts/prepare.js

@@ -1,15 +0,0 @@
-import path from 'node:path'
-import fs from 'fs-extra'
-import { icons } from '@iconify-json/ep'
-
-async function prepare() {
-  const outputDir = path.resolve(process.cwd(), 'public/icons')
-  await fs.ensureDir(outputDir)
-  await fs.emptyDir(outputDir)
-  await fs.writeJSON(
-    path.resolve(outputDir, 'icons.json'),
-    icons,
-  )
-}
-
-prepare()

scss.template.hbs

@@ -1,66 +0,0 @@
-{
-  // Default options
-  'functions': true,
-  'variableNameTransforms': ['dasherize']
-}
-
-{{#block "sprites"}}
-{{#each sprites}}
-${{../spritesheet_info.strings.name}}-sprite-{{strings.name}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}', '{{name}}');
-{{/each}}
-
-${{spritesheet_info.strings.name}}-sprites: (
-{{#each sprites}}
-	{{strings.name}}: ${{../spritesheet_info.strings.name}}-sprite-{{strings.name}},
-{{/each}}
-);
-{{/block}}
-
-{{#block "sprite-functions"}}
-{{#if options.functions}}
-@mixin {{spritesheet_info.strings.name}}-sprite-width($sprite) {
-  width: nth($sprite, 5);
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-height($sprite) {
-  height: nth($sprite, 6);
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-position($sprite) {
-  $sprite-offset-x: nth($sprite, 3);
-  $sprite-offset-y: nth($sprite, 4);
-  background-position: $sprite-offset-x $sprite-offset-y;
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-size($sprite) {
-  background-size: nth($sprite, 7) nth($sprite, 8);
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-image($sprite) {
-  $sprite-image: nth($sprite, 9);
-  background-image: url(#{$sprite-image});
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite($name) {
-  @include {{spritesheet_info.strings.name}}-sprite-image(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-position(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-size(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-width(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-height(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  background-repeat: no-repeat;
-}
-{{/if}}
-{{/block}}
-
-{{#block "spritesheet-functions"}}
-{{#if options.functions}}
-@mixin all-{{spritesheet_info.strings.name}}-sprites() {
-  @each $key, $val in ${{spritesheet_info.strings.name}}-sprites {
-    $sprite-name: nth($val, 10);
-    .{{spritesheet_info.strings.name}}-#{$sprite-name}-sprites {
-      @include {{spritesheet_info.strings.name}}-sprite($key);
-    }
-  }
-}
-{{/if}}
-{{/block}}

src/App.vue

@@ -1,36 +1,22 @@
-<script lang="ts" setup>
-import eruda from 'eruda'
-import VConsole from 'vconsole'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import hotkeys from 'hotkeys-js'
-import eventBus from './utils/eventBus'
+<script setup lang="ts">
 import useSettingsStore from '@/store/modules/settings'
+import { ua } from '@/utils/ua'
+import Provider from './ui/provider/index.vue'
+
+const route = useRoute()
 
 const settingsStore = useSettingsStore()
 const { auth } = useAuth()
 
-const buttonConfig = ref({
-  autoInsertSpace: true,
-})
+document.body.setAttribute('data-os', ua.getOS().name || '')
 
-// 侧边栏主导航当前实际宽度
-const mainSidebarActualWidth = computed(() => {
-  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (['head', 'single'].includes(settingsStore.settings.menu.menuMode)) {
-    actualWidth = 0
-  }
-  return `${actualWidth}px`
-})
-
-// 侧边栏次导航当前实际宽度
-const subSidebarActualWidth = computed(() => {
-  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
-  if (settingsStore.settings.menu.subMenuCollapse) {
-    actualWidth = 64
-  }
-  return `${actualWidth}px`
+const isAuth = computed(() => {
+  return route.matched.every((item) => {
+    return auth(item.meta.auth ?? '')
+  })
 })
 
+// 设置网页 title
 watch([
   () => settingsStore.settings.app.enableDynamicTitle,
   () => settingsStore.title,
@@ -44,34 +30,26 @@ watch([
   }
 }, {
   immediate: true,
+  deep: true,
 })
 
 onMounted(() => {
   settingsStore.setMode(document.documentElement.clientWidth)
-  window.onresize = () => {
+  window.addEventListener('resize', () => {
     settingsStore.setMode(document.documentElement.clientWidth)
-  }
-  hotkeys('alt+i', () => {
-    eventBus.emit('global-system-info-toggle')
   })
 })
-
-import.meta.env.VITE_APP_DEBUG_TOOL === 'eruda' && eruda.init()
-import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
 </script>
 
 <template>
-  <el-config-provider :locale="zhCn" :size="settingsStore.settings.app.elementSize" :button="buttonConfig">
-    <RouterView
-      v-slot="{ Component, route }"
-      :style="{
-        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
-        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
-      }"
-    >
-      <component :is="Component" v-if="auth(route.meta.auth ?? '')" />
-      <not-allowed v-else />
+  <Provider>
+    <RouterView v-slot="{ Component }">
+      <component :is="Component" v-if="isAuth" />
+      <FaNotAllowed v-else />
     </RouterView>
-    <system-info />
-  </el-config-provider>
+    <FaBackToTop />
+    <FaToast />
+    <FaNotification />
+    <FaSystemInfo />
+  </Provider>
 </template>

src/api/index.ts

@@ -1,35 +1,23 @@
+import useUserStore from '@/store/modules/user'
 import axios from 'axios'
 // import qs from 'qs'
-import { ElMessage } from 'element-plus'
-import router from '@/router/index'
-import useUserStore from '@/store/modules/user'
-
-function toLogin() {
-  useUserStore().logout().then(() => {
-    router.push({
-      path: '/login',
-      query: {
-        redirect: router.currentRoute.value.path !== '/login' ? router.currentRoute.value.fullPath : undefined,
-      },
-    })
-  })
-}
+import { toast } from 'vue-sonner'
 
 const api = axios.create({
-  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY) ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
   timeout: 1000 * 60,
   responseType: 'json',
 })
 
 api.interceptors.request.use(
   (request) => {
+    // 全局拦截请求发送前提交的参数
     const userStore = useUserStore()
-    /**
-     * 全局拦截请求发送前提交的参数
-     * 以下代码为示例，在请求头里带上 token 信息
-     */
-    if (userStore.isLogin && request.headers) {
-      request.headers.Token = userStore.token
+    // 设置请求头
+    if (request.headers) {
+      if (userStore.isLogin) {
+        request.headers.Token = userStore.token
+      }
     }
     // 是否将 POST 请求参数进行字符串化处理
     if (request.method === 'post') {
@@ -45,23 +33,28 @@ api.interceptors.response.use(
   (response) => {
     /**
      * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
-     * 假设返回数据格式为：{ status: 1, error: '', data: '' }
+     * 假设返回数据格式为：{ status: 1, error: '', data: {} }
      * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
      * 请求出错时 error 会返回错误信息
      */
     if (response.data.status === 1) {
       if (response.data.error !== '') {
-        // 这里做错误提示，如果使用了 element plus 则可以使用 Message 进行提示
-        // ElMessage.error(options)
+        toast.warning('Warning', {
+          description: response.data.error,
+        })
         return Promise.reject(response.data)
       }
     }
     else {
-      toLogin()
+      useUserStore().requestLogout()
     }
     return Promise.resolve(response.data)
   },
   (error) => {
+    if (error.status === 401) {
+      useUserStore().requestLogout()
+      throw error
+    }
     let message = error.message
     if (message === 'Network Error') {
       message = '后端网络故障'
@@ -72,9 +65,8 @@ api.interceptors.response.use(
     else if (message.includes('Request failed with status code')) {
       message = `接口${message.substr(message.length - 3)}异常`
     }
-    ElMessage({
-      message,
-      type: 'error',
+    toast.error('Error', {
+      description: message,
     })
     return Promise.reject(error)
   },

src/api/modules/app.ts

@@ -0,0 +1,13 @@
+import api from '../index'
+
+export default {
+  // 后端获取路由数据
+  routeList: () => api.get('app/route/list', {
+    baseURL: '/mock/',
+  }),
+
+  // 基于文件系统路由模式下，后端获取导航菜单数据
+  menuList: () => api.get('app/menu/list', {
+    baseURL: '/mock/',
+  }),
+}

src/api/modules/user.ts

@@ -0,0 +1,24 @@
+import api from '../index'
+
+export default {
+  // 登录
+  login: (data: {
+    account: string
+    password: string
+  }) => api.post('user/login', data, {
+    baseURL: '/mock/',
+  }),
+
+  // 获取权限
+  permission: () => api.get('user/permission', {
+    baseURL: '/mock/',
+  }),
+
+  // 修改密码
+  passwordEdit: (data: {
+    password: string
+    newPassword: string
+  }) => api.post('user/password/edit', data, {
+    baseURL: '/mock/',
+  }),
+}

src/assets/icons/fullscreen-exit.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M768 298.667h170.667V384h-256V128H768v170.667zM341.333 384h-256v-85.333H256V128h85.333v256zM768 725.333V896h-85.333V640h256v85.333H768zM341.333 640v256H256V725.333H85.333V640h256z"/></svg>

src/assets/icons/fullscreen.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M682.667 128h256v256h-85.334V213.333H682.667V128zm-597.334 0h256v85.333H170.667V384H85.333V128zm768 682.667V640h85.334v256h-256v-85.333h170.666zm-682.666 0h170.666V896h-256V640h85.334v170.667z"/></svg>

src/assets/icons/image-load-fail.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M704 328a72 72 0 1 0 144 0 72 72 0 1 0-144 0z"/><path d="M999.904 116.608a32 32 0 0 0-21.952-10.912L521.76 73.792a31.552 31.552 0 0 0-27.2 11.904l-92.192 114.848a32 32 0 0 0 .672 40.896l146.144 169.952-147.456 194.656 36.48-173.376a32 32 0 0 0-11.136-31.424L235.616 245.504l79.616-125.696a32 32 0 0 0-29.28-49.024L45.76 87.552a32 32 0 0 0-29.696 34.176l55.808 798.016a32.064 32.064 0 0 0 34.304 29.696l176.512-13.184c17.632-1.312 30.848-16.672 29.504-34.272s-16.576-31.04-34.304-29.536L133.44 883.232l-6.432-92.512 125.312-12.576a32 32 0 0 0 28.672-35.04 32.16 32.16 0 0 0-35.04-28.672L122.56 726.848 82.144 149.184l145.152-10.144-60.96 96.224a32 32 0 0 0 6.848 41.952l198.4 161.344-58.752 279.296a30.912 30.912 0 0 0 .736 14.752 31.68 31.68 0 0 0 1.408 11.04l51.52 154.56a31.968 31.968 0 0 0 27.456 21.76l523.104 47.552a32.064 32.064 0 0 0 34.848-29.632l55.776-798.048a32.064 32.064 0 0 0-7.776-23.232zm-98.912 630.848-412.576-39.648a31.52 31.52 0 0 0-34.912 28.768 32 32 0 0 0 28.8 34.912l414.24 39.808-6.272 89.536-469.728-42.72-39.584-118.72 234.816-310.016a31.936 31.936 0 0 0-1.248-40.192L468.896 219.84l65.088-81.056 407.584 28.48-40.576 580.192z"/></svg>

src/assets/icons/search-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M512.213 958.99 63.595 510.93l84.025-84.023 300.584 302.222V63.546h127.94V729.13l299.652-302.222 84.01 84.024-447.593 448.058z"/></svg>

src/assets/icons/search-enter.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M916.21 242.526v215.58H204.8l194.021-194.022-75.453-75.452L0 512l323.368 323.368 75.453-75.452L204.8 565.895H1024V242.526z"/></svg>

src/assets/icons/search-up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m959.804 511.604-84.009 84.024-299.652-302.222V958.99h-127.94V293.406L147.62 595.63l-84.025-84.024L512.213 63.546l447.591 448.058z"/></svg>

src/assets/icons/sidebar-breadcrumb.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M165.415 827.077c-11.815 0-19.692-7.877-19.692-19.692V214.646c0-11.815 7.877-19.692 19.692-19.692h159.508c7.877 0 17.723 3.938 23.63 9.846l228.432 287.508c7.877 9.846 7.877 25.6 0 37.415l-230.4 287.508c-5.908 7.877-15.754 11.815-25.6 11.815l-155.57-1.97zm706.954-334.77L641.97 206.77c-9.846-11.815-27.569-15.754-41.354-3.938l-45.292 37.415c-13.785 9.846-15.754 29.539-3.938 41.354L738.462 512 551.385 744.37c-9.847 11.815-7.877 31.507 3.938 41.353l45.292 37.415c13.785 9.847 29.539 7.877 41.354-3.938l230.4-287.508c7.877-15.754 7.877-29.538 0-39.384z"/></svg>

src/assets/icons/sidebar-default.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M487 71.425a75 75 0 0 1 72.575 0l335.7 185.5a75 75 0 0 1 38.75 65.65V690.85a75 75 0 0 1-38.75 65.625l-335.7 185.55a75 75 0 0 1-72.55 0l-335.7-185.5a75 75 0 0 1-38.75-65.675V322.6a75 75 0 0 1 38.75-65.6L487 71.4v.025zM859 322.6 523.275 137.1l-335.7 185.5v368.25l335.7 185.5 335.75-185.5V322.6zm-601.75 37.1A37.5 37.5 0 0 1 308.2 345l215.1 118.875L738.45 345a37.5 37.5 0 0 1 36.25 65.625l-213.9 118.25V764.55a37.5 37.5 0 0 1-75 0v-235.7l-213.9-118.2a37.5 37.5 0 0 1-14.65-51v.05z"/></svg>

src/assets/icons/sidebar-menu.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M913.6 135.2H380.2c-26.7 0-44.4 17.8-44.4 44.4V224c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zm-755.6 0h-44.4c-22.2 0-44.4 22.2-44.4 44.4V224c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm0 311.1h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zM158 757.4h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4z"/></svg>

src/assets/images/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -46 256 256" xml:space="preserve">
+  <path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
+	c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
+	c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
+	c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
+	c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
+	c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#35495e" />
+  <path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
+	c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
+	c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
+	c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
+	c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
+	c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
+</svg>

src/assets/styles/element-plus/dark.scss

@@ -1,9 +0,0 @@
-// 暗黑模式
-@forward "element-plus/theme-chalk/src/dark/var.scss" with (
-  $bg-color: (
-    "page": #0a0a0a,
-    "": #141414,
-    "overlay": #1d1e1f,
-  )
-);
-@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

src/assets/styles/element-plus/index.scss

@@ -1,9 +0,0 @@
-// @forward "element-plus/theme-chalk/src/common/var.scss" with (
-//   $colors: (
-//     "primary": (
-//       "base": green
-//     )
-//   )
-// );
-@use "element-plus/theme-chalk/src/index.scss" as *;
-@use "./dark.scss";

src/assets/styles/globals.css

@@ -0,0 +1,80 @@
+/* 页面布局 CSS 变量 */
+:root {
+  /* 头部高度 */
+  --g-header-height: 60px;
+
+  /* 侧边栏宽度 */
+  --g-main-sidebar-width: 80px;
+  --g-sub-sidebar-width: 220px;
+  --g-sub-sidebar-collapse-width: 64px;
+
+  /* 侧边栏 Logo 区域高度 */
+  --g-sidebar-logo-height: 50px;
+
+  /* 标签栏高度 */
+  --g-tabbar-height: 50px;
+
+  /* 工具栏高度 */
+  --g-toolbar-height: 50px;
+}
+
+/* 明暗模式 CSS 变量 */
+/* stylelint-disable-next-line no-duplicate-selectors */
+:root {
+  color-scheme: light;
+
+  &::view-transition-old(root),
+  &::view-transition-new(root) {
+    mix-blend-mode: normal;
+    animation: none;
+  }
+
+  &::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  &::view-transition-new(root) {
+    z-index: 9999;
+  }
+
+  &.dark {
+    color-scheme: dark;
+
+    &::view-transition-old(root) {
+      z-index: 9999;
+    }
+
+    &::view-transition-new(root) {
+      z-index: 1;
+    }
+  }
+}
+
+* {
+  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-width: thin;
+  border-color: hsl(var(--border));
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--font-family);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  -webkit-tap-highlight-color: transparent;
+}
+
+#app {
+  height: 100%;
+}
+
+/* textarea 字体跟随系统 */
+textarea {
+  font-family: inherit;
+}

src/assets/styles/globals.scss

@@ -1,88 +0,0 @@
-@use "./themes.scss";
-@use "./element-plus/index.scss";
-
-// 全局变量
-:root {
-  // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
-  --g-header-width: 100%;
-  // 头部高度
-  --g-header-height: 70px;
-  // 侧边栏宽度
-  --g-main-sidebar-width: 70px;
-  --g-sub-sidebar-width: 220px;
-  // 侧边栏Logo高度
-  --g-sidebar-logo-height: 50px;
-  // 顶栏高度
-  --g-topbar-height: 50px;
-}
-// 全局样式
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgb(0 0 0 / 40%);
-  background-clip: padding-box;
-  border: 3px solid transparent;
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  box-sizing: border-box;
-  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
-  -webkit-tap-highlight-color: transparent;
-
-  &.overflow-hidden {
-    overflow: hidden;
-  }
-}
-
-* {
-  box-sizing: inherit;
-}
-// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
-[data-fixed-calc-width] {
-  position: fixed;
-  left: 50%;
-  right: 0;
-  width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
-  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
-}
-
-[data-mode="mobile"] {
-  [data-fixed-calc-width] {
-    width: 100% !important;
-    transform: translateX(-50%) !important;
-  }
-}
-// textarea 字体跟随系统
-textarea {
-  font-family: inherit;
-}
-// 列表页全局样式
-.el-table.list-table {
-  margin: 20px 0;
-
-  .el-button + .el-dropdown {
-    margin-left: 10px;
-  }
-}
-
-.el-loading-mask {
-  z-index: 900 !important;
-}

src/assets/styles/nprogress.css

@@ -3,48 +3,48 @@
 
   .bar {
     position: fixed;
-    z-index: 1031;
     top: 0;
     left: 0;
+    z-index: 3000;
     width: 100%;
     height: 2px;
-    background: var(--g-nprogress-color);
+    background: hsl(var(--primary));
   }
 
   .peg {
-    display: block;
     position: absolute;
     right: 0;
+    display: block;
     width: 100px;
     height: 100%;
+    box-shadow: 0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary));
     opacity: 1;
     transform: rotate(3deg) translate(0, -4px);
-    box-shadow: 0 0 10px var(--g-nprogress-color), 0 0 5px var(--g-nprogress-color);
   }
 
   .spinner {
-    display: block;
     position: fixed;
-    z-index: 1031;
     top: 11px;
     right: 14px;
+    z-index: 2000;
+    display: block;
 
     .spinner-icon {
+      box-sizing: border-box;
       width: 18px;
       height: 18px;
-      box-sizing: border-box;
       border: solid 2px transparent;
+      border-top-color: hsl(var(--primary));
+      border-left-color: hsl(var(--primary));
       border-radius: 50%;
       animation: nprogress-spinner 400ms linear infinite;
-      border-top-color: var(--g-nprogress-color);
-      border-left-color: var(--g-nprogress-color);
     }
   }
 }
 
 .nprogress-custom-parent {
-  overflow: hidden;
   position: relative;
+  overflow: hidden;
 
   #nprogress .spinner,
   #nprogress .bar {

src/assets/styles/resources/utils.scss

@@ -7,9 +7,9 @@
   } @else {
     /* stylelint-disable-next-line value-no-vendor-prefix */
     display: -webkit-box;
+    overflow: hidden;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: $line;
-    overflow: hidden;
   }
 }
 
@@ -28,8 +28,8 @@
   }
 
   @if $type == xy {
-    left: 50%;
     top: 50%;
+    left: 50%;
     transform: translateX(-50%) translateY(-50%);
   }
 }
@@ -46,8 +46,8 @@
 
   &::before,
   &::after {
-    content: "";
-    display: block;
     clear: both;
+    display: block;
+    content: "";
   }
 }

src/assets/styles/themes.scss

@@ -1,124 +0,0 @@
-:root {
-  --g-box-shadow-color: rgb(0 0 0 / 12%);
-
-  /* ----- 应用 ----- */
-  // 应用背景色
-  --g-app-bg: var(--el-bg-color);
-  // 主区域背景色
-  --g-main-bg: var(--el-bg-color-page);
-
-  /* ----- 顶部 ----- */
-  // 背景色
-  --g-header-bg: #222b45;
-  // 文字颜色
-  --g-header-color: #fff;
-  // 导航文字颜色
-  --g-header-menu-color: #fff;
-  // 导航鼠标悬浮文字颜色
-  --g-header-menu-hover-color: #fff;
-  // 导航鼠标悬浮背景色
-  --g-header-menu-hover-bg: #334067;
-  // 导航选中文字颜色
-  --g-header-menu-active-color: #fff;
-  // 导航选中背景色
-  --g-header-menu-active-bg: #334067;
-
-  /* ----- 主导航 ----- */
-  // 背景色
-  --g-main-sidebar-bg: #222b45;
-  // 菜单文字颜色
-  --g-main-sidebar-menu-color: #eee;
-  // 菜单鼠标悬浮文字颜色
-  --g-main-sidebar-menu-hover-color: #fff;
-  // 菜单鼠标悬浮背景色
-  --g-main-sidebar-menu-hover-bg: #334067;
-  // 菜单选中文字颜色
-  --g-main-sidebar-menu-active-color: #fff;
-  // 菜单选中背景色
-  --g-main-sidebar-menu-active-bg: #334067;
-
-  /* ----- 次导航 ----- */
-  // 背景色
-  --g-sub-sidebar-bg: #fff;
-  // 菜单背景色
-  --g-sub-sidebar-menu-bg: #e8e8e8;
-  // 菜单文字颜色
-  --g-sub-sidebar-menu-color: var(--el-text-color-primary);
-  // 菜单鼠标悬浮文字颜色
-  --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
-  // 菜单鼠标悬浮背景色
-  --g-sub-sidebar-menu-hover-bg: #e1e1e1;
-  // 菜单选中文字颜色
-  --g-sub-sidebar-menu-active-color: #fff;
-  // 菜单选中背景色
-  --g-sub-sidebar-menu-active-bg: var(--el-color-primary);
-
-  /* ----- 顶栏 ----- */
-  --g-toolbar-bg: var(--el-bg-color);
-
-  /* ----- 进度条 ----- */
-  --g-nprogress-color: var(--el-color-primary);
-
-  /* ----- 暗黑模式 ----- */
-  &.dark {
-    --g-box-shadow-color: rgb(0 0 0 / 72%);
-
-    /* ----- 应用 ----- */
-    // 应用背景色
-    --g-app-bg: var(--el-bg-color);
-    // 主区域背景色
-    --g-main-bg: var(--el-bg-color-page);
-
-    /* ----- 顶部 ----- */
-    // 背景色
-    --g-header-bg: var(--el-bg-color);
-    // 文字颜色
-    --g-header-color: #fff;
-    // 导航文字颜色
-    --g-header-menu-color: #ccc;
-    // 导航鼠标悬浮文字颜色
-    --g-header-menu-hover-color: #fff;
-    // 导航鼠标悬浮背景色
-    --g-header-menu-hover-bg: var(--el-color-primary-light-5);
-    // 导航选中文字颜色
-    --g-header-menu-active-color: #fff;
-    // 导航选中背景色
-    --g-header-menu-active-bg: var(--el-color-primary-light-3);
-
-    /* ----- 主导航 ----- */
-    // 背景色
-    --g-main-sidebar-bg: var(--el-bg-color);
-    // 菜单文字颜色
-    --g-main-sidebar-menu-color: #ccc;
-    // 菜单鼠标悬浮文字颜色
-    --g-main-sidebar-menu-hover-color: #fff;
-    // 菜单鼠标悬浮背景色
-    --g-main-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
-    // 菜单选中文字颜色
-    --g-main-sidebar-menu-active-color: #fff;
-    // 菜单选中背景色
-    --g-main-sidebar-menu-active-bg: var(--el-color-primary-light-3);
-
-    /* ----- 次导航 ----- */
-    // 背景色
-    --g-sub-sidebar-bg: var(--el-bg-color-page);
-    // 菜单背景色
-    --g-sub-sidebar-menu-bg: var(--el-bg-color);
-    // 菜单文字颜色
-    --g-sub-sidebar-menu-color: var(--el-text-color-secondary);
-    // 菜单鼠标悬浮文字颜色
-    --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
-    // 菜单鼠标悬浮背景色
-    --g-sub-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
-    // 菜单选中文字颜色
-    --g-sub-sidebar-menu-active-color: var(--el-text-color-primary);
-    // 菜单选中背景色
-    --g-sub-sidebar-menu-active-bg: var(--el-color-primary-light-3);
-
-    /* ----- 顶栏 ----- */
-    --g-toolbar-bg: var(--el-bg-color);
-
-    /* ----- 进度条 ----- */
-    --g-nprogress-color: var(--el-color-primary);
-  }
-}

src/components/AccountButton/index.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import useSettingsStore from '@/store/modules/settings'
+import useUserStore from '@/store/modules/user'
+import { cn } from '@/utils'
+import eventBus from '@/utils/eventBus'
+import Profile from './profile.vue'
+
+const props = withDefaults(defineProps<{
+  onlyAvatar?: boolean
+  dropdownAlign?: 'start' | 'center' | 'end'
+  dropdownSide?: 'left' | 'right' | 'top' | 'bottom'
+  buttonVariant?: 'secondary' | 'ghost'
+  class?: HTMLAttributes['class']
+}>(), {
+  dropdownAlign: 'end',
+  dropdownSide: 'right',
+  buttonVariant: 'ghost',
+})
+
+const router = useRouter()
+
+const settingsStore = useSettingsStore()
+const userStore = useUserStore()
+
+const isProfileShow = ref(false)
+</script>
+
+<template>
+  <FaDropdown
+    :align="dropdownAlign" :side="dropdownSide" :items="[
+      [
+        { label: settingsStore.settings.home.title, icon: 'i-mdi:home', handle: () => router.push({ path: settingsStore.settings.home.fullPath }), hide: !settingsStore.settings.home.enable },
+        { label: '个人设置', icon: 'i-mdi:account', handle: () => isProfileShow = true },
+      ],
+      [
+        { label: '快捷键介绍', icon: 'i-mdi:keyboard', handle: () => eventBus.emit('global-hotkeys-intro-toggle'), hide: settingsStore.mode !== 'pc' },
+      ],
+      [
+        { label: '退出登录', icon: 'i-mdi:logout', handle: () => userStore.logout(settingsStore.settings.home.fullPath) },
+      ],
+    ]" class="flex-center"
+  >
+    <template #label>
+      <div class="space-y-2">
+        <div class="text-xs text-secondary-foreground/50 font-light">
+          当前登录账号
+        </div>
+        <div class="flex-center-start gap-2">
+          <FaAvatar :src="userStore.avatar" :fallback="userStore.account.slice(0, 5)" shape="square" />
+          <div class="space-y-1">
+            <div class="text-base lh-none">
+              {{ userStore.account }}
+            </div>
+            <div class="text-xs text-secondary-foreground/50 font-normal">
+              [ 这里可以显示邮箱 ]
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <FaButton
+      :variant="buttonVariant" :class="cn('flex-center gap-1 p-2', {
+        'size-8 p-1': onlyAvatar,
+      }, props.class)"
+    >
+      <FaAvatar :src="userStore.avatar" :class="cn('size-6', { 'size-full': onlyAvatar })">
+        <FaIcon name="i-carbon:user-avatar-filled" class="size-6 text-secondary-foreground/50" />
+      </FaAvatar>
+      <div v-if="settingsStore.mode === 'pc' && !onlyAvatar" class="min-w-0 flex-center-between flex-1 gap-2">
+        <div class="flex-1 truncate text-start">
+          {{ userStore.account }}
+        </div>
+        <FaIcon name="i-material-symbols:expand-all-rounded" />
+      </div>
+    </FaButton>
+  </FaDropdown>
+  <FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px min-w-600px overflow-hidden" content-class="min-h-full p-0 flex">
+    <Profile />
+  </FaModal>
+</template>

src/components/AccountButton/profile.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import EditPasswordForm from '@/components/AccountForm/EditPasswordForm.vue'
+
+const active = ref(0)
+const tabs = ref([
+  {
+    title: '基本设置',
+    description: '账号的基本信息，头像、昵称等',
+  },
+  {
+    title: '安全设置',
+    description: '定期修改密码可以提高帐号安全性',
+  },
+])
+</script>
+
+<template>
+  <div class="min-h-full w-full">
+    <div class="fixed inset-s-0 bottom-0 top-0 h-full w-40 border-e">
+      <div v-for="(tab, index) in tabs" :key="index" class="cursor-pointer px-4 py-3 transition-background-color space-y-2 hover-bg-accent/50" :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="active = index">
+        <div class="text-base text-accent-foreground leading-tight">
+          {{ tab.title }}
+        </div>
+        <div class="text-xs text-accent-foreground/50">
+          {{ tab.description }}
+        </div>
+      </div>
+    </div>
+    <div class="ms-40 min-h-full flex-col-center p-10">
+      <div v-if="active === 0">
+        请开发者自行扩展
+      </div>
+      <EditPasswordForm v-if="active === 1" />
+    </div>
+  </div>
+</template>

src/components/AccountForm/EditPasswordForm.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import useUserStore from '@/store/modules/user'
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { toast } from 'vue-sonner'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'EditPasswordForm',
+})
+
+const userStore = useUserStore()
+
+const loading = ref(false)
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    z.object({
+      password: z.string().min(1, '请输入原密码'),
+      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+      checkPassword: z.string().min(1, '请确认新密码'),
+    }).refine(data => data.newPassword === data.checkPassword, {
+      message: '两次输入的密码不一致',
+      path: ['checkPassword'],
+    }),
+  ),
+  initialValues: {
+    password: '',
+    newPassword: '',
+    checkPassword: '',
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  userStore.editPassword(values).then(async () => {
+    toast.success('模拟修改成功，请重新登录')
+    userStore.logout()
+  }).finally(() => {
+    loading.value = false
+  })
+})
+</script>
+
+<template>
+  <div class="w-full flex-col-stretch-center">
+    <div class="mb-6 space-y-2">
+      <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+        修改密码
+      </h3>
+      <p class="text-sm text-muted-foreground lg:text-base">
+        请输入原密码、新密码和确认密码
+      </p>
+    </div>
+    <form @submit="onSubmit">
+      <FormField v-slot="{ componentField, errors }" name="password">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入原密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="newPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="checkPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请确认新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
+        保存
+      </FaButton>
+    </form>
+  </div>
+</template>

src/components/AccountForm/LoginForm.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import useUserStore from '@/store/modules/user'
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'LoginForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onRegister: [account?: string]
+  onResetPassword: [account?: string]
+}>()
+
+const userStore = useUserStore()
+
+const title = import.meta.env.VITE_APP_TITLE
+const loading = ref(false)
+
+// 登录方式，default 账号密码登录，qrcode 扫码登录
+const type = ref<'default' | 'qrcode'>('default')
+
+const form = useForm({
+  validationSchema: toTypedSchema(z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码'),
+    remember: z.boolean(),
+  })),
+  initialValues: {
+    account: props.account ?? localStorage.getItem('login_account') ?? '',
+    password: '',
+    remember: !!localStorage.getItem('login_account'),
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  userStore.login(values).then(() => {
+    if (values.remember) {
+      localStorage.setItem('login_account', values.account)
+    }
+    else {
+      localStorage.removeItem('login_account')
+    }
+    emits('onLogin', values.account)
+  }).finally(() => {
+    loading.value = false
+  })
+})
+
+function testAccount(account: string) {
+  form.setFieldValue('account', account)
+  form.setFieldValue('password', '123456')
+  onSubmit()
+}
+</script>
+
+<template>
+  <div class="min-h-500px w-full flex-col-stretch-center p-12">
+    <div class="mb-6 space-y-2">
+      <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+        欢迎使用 👋🏻
+      </h3>
+      <p class="text-sm text-muted-foreground lg:text-base">
+        {{ title }}
+      </p>
+    </div>
+    <div class="mb-4">
+      <FaTabs
+        v-model="type" :list="[
+          { label: '账号密码登录', value: 'default' },
+          { label: '扫码登录', value: 'qrcode' },
+        ]" class="inline-flex"
+      />
+    </div>
+    <div v-show="type === 'default'">
+      <form @submit="onSubmit">
+        <FormField v-slot="{ componentField, errors }" name="account">
+          <FormItem class="relative pb-6 space-y-0">
+            <FormControl>
+              <FaInput type="text" placeholder="请输入用户名" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+            </FormControl>
+            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+              <FormMessage class="absolute bottom-1 text-xs" />
+            </Transition>
+          </FormItem>
+        </FormField>
+        <FormField v-slot="{ componentField, errors }" name="password">
+          <FormItem class="relative pb-6 space-y-0">
+            <FormControl>
+              <FaInput type="password" placeholder="请输入密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+            </FormControl>
+            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+              <FormMessage class="absolute bottom-1 text-xs" />
+            </Transition>
+          </FormItem>
+        </FormField>
+        <div class="mb-4 flex-center-between">
+          <div class="flex-center-start">
+            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
+              <FormItem>
+                <FormControl>
+                  <FaCheckbox v-bind="componentField">
+                    记住我
+                  </FaCheckbox>
+                </FormControl>
+              </FormItem>
+            </FormField>
+          </div>
+          <FaButton variant="link" class="h-auto p-0" type="button" @click="emits('onResetPassword', form.values.account)">
+            忘记密码了?
+          </FaButton>
+        </div>
+        <FaButton :loading="loading" size="lg" class="w-full" type="submit">
+          登录
+        </FaButton>
+        <div class="mt-4 flex-center gap-2 text-sm">
+          <span class="text-secondary-foreground op-50">还没有帐号?</span>
+          <FaButton variant="link" class="h-auto p-0" type="button" @click="emits('onRegister', form.values.account)">
+            注册新帐号
+          </FaButton>
+        </div>
+      </form>
+      <div class="mt-4 text-center -mb-4">
+        <FaDivider>演示账号一键登录</FaDivider>
+        <div class="space-x-2">
+          <FaButton variant="default" size="sm" plain @click="testAccount('admin')">
+            admin
+          </FaButton>
+          <FaButton variant="outline" size="sm" plain @click="testAccount('test')">
+            test
+          </FaButton>
+        </div>
+      </div>
+    </div>
+    <div v-show="type === 'qrcode'">
+      <div class="flex-col-center">
+        <img src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]">
+        <div class="mt-2 text-sm text-secondary-foreground op-50">
+          请使用微信扫码登录
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/AccountForm/RegisterForm.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'RegisterForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onRegister: [account?: string]
+}>()
+
+const loading = ref(false)
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    z.object({
+      account: z.string().min(1, '请输入用户名'),
+      captcha: z.string().min(6, '请输入验证码'),
+      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+      checkPassword: z.string().min(1, '请再次输入密码'),
+    }).refine(data => data.password === data.checkPassword, {
+      message: '两次输入的密码不一致',
+      path: ['checkPassword'],
+    }),
+  ),
+  initialValues: {
+    account: props.account ?? '',
+    captcha: '',
+    password: '',
+    checkPassword: '',
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  emits('onRegister', values.account)
+})
+</script>
+
+<template>
+  <div class="min-h-500px w-full flex-col-stretch-center p-12">
+    <form @submit="onSubmit">
+      <div class="mb-8 space-y-2">
+        <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+          探索从这里开始 🚀
+        </h3>
+        <p class="text-sm text-muted-foreground lg:text-base">
+          演示系统未提供该功能
+        </p>
+      </div>
+      <FormField v-slot="{ componentField, errors }" name="account">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="text" placeholder="请输入用户名" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, value, errors }" name="password">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <FormDescription>
+            <FaPasswordStrength :password="value" class="mt-2" />
+          </FormDescription>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="checkPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请再次输入密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
+        注册
+      </FaButton>
+      <div class="mt-4 flex-center gap-2 text-sm">
+        <span class="text-secondary-foreground op-50">已经有帐号?</span>
+        <FaButton variant="link" class="h-auto p-0" @click="emits('onLogin', form.values.account)">
+          去登录
+        </FaButton>
+      </div>
+    </form>
+  </div>
+</template>

src/components/AccountForm/ResetPasswordForm.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'ResetPasswordForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onResetPassword: [account?: string]
+}>()
+
+const loading = ref(false)
+
+const form = useForm({
+  validationSchema: toTypedSchema(z.object({
+    account: z.string().min(1, '请输入用户名'),
+    captcha: z.string().min(6, '请输入验证码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+  })),
+  initialValues: {
+    account: props.account ?? '',
+    captcha: '',
+    newPassword: '',
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  emits('onResetPassword', values.account)
+})
+
+const countdown = ref(0)
+const countdownInterval = ref(Number.NaN)
+function handleSendCaptcha() {
+  countdown.value = 60
+  countdownInterval.value = window.setInterval(() => {
+    countdown.value--
+    if (countdown.value === 0) {
+      clearInterval(countdownInterval.value)
+    }
+  }, 1000)
+}
+</script>
+
+<template>
+  <div class="min-h-500px w-full flex-col-stretch-center p-12">
+    <form @submit="onSubmit">
+      <div class="mb-8 space-y-2">
+        <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+          忘记密码了? 🔒
+        </h3>
+        <p class="text-sm text-muted-foreground lg:text-base">
+          演示系统未提供该功能
+        </p>
+      </div>
+      <FormField v-slot="{ componentField, errors }" name="account">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="text" placeholder="请输入用户名" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <div class="flex-start-between gap-2">
+        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
+          <FormItem class="relative pb-6 space-y-0">
+            <FormControl>
+              <FaPinInput :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
+            </FormControl>
+            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+              <FormMessage class="absolute bottom-1 text-xs" />
+            </Transition>
+          </FormItem>
+        </FormField>
+        <FaButton variant="outline" size="lg" :disabled="countdown > 0" class="flex-1 px-4" @click="handleSendCaptcha">
+          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后可重新发送` }}
+        </FaButton>
+      </div>
+      <FormField v-slot="{ componentField, errors }" name="newPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
+        确认
+      </FaButton>
+      <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
+        <FaButton variant="link" class="h-auto p-0" @click="emits('onLogin', form.values.account)">
+          去登录
+        </FaButton>
+      </div>
+    </form>
+  </div>
+</template>

src/components/Auth/index.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup name="Auth">
-const props = defineProps<{
-  value: string | string[]
-}>()
-
-function check() {
-  return useAuth().auth(props.value)
-}
-</script>
-
-<template>
-  <div>
-    <slot v-if="check()" />
-    <slot v-else name="no-auth" />
-  </div>
-</template>

src/components/AuthAll/index.vue

@@ -1,16 +0,0 @@
-<script lang="ts" setup name="AuthAll">
-const props = defineProps<{
-  value: string[]
-}>()
-
-function check() {
-  return useAuth().authAll(props.value)
-}
-</script>
-
-<template>
-  <div>
-    <slot v-if="check()" />
-    <slot v-else name="no-auth" />
-  </div>
-</template>

src/components/BatchActionBar/index.vue

@@ -1,82 +0,0 @@
-<script lang="ts" setup name="BatchActionBar">
-const props = defineProps({
-  data: {
-    type: Array,
-    default: () => [],
-  },
-  selectionData: {
-    type: Array,
-    default: () => [],
-  },
-})
-
-const emit = defineEmits(['checkAll', 'checkNull'])
-
-const checkAll = computed({
-  get() {
-    let flag = false
-    if (props.data.length !== 0 && props.data.length === props.selectionData.length) {
-      flag = true
-    }
-    return flag
-  },
-  set(newVal) {
-    newVal ? emit('checkAll') : emit('checkNull')
-  },
-})
-
-const isIndeterminate = computed(() => {
-  let flag = false
-  if (props.selectionData.length > 0 && props.selectionData.length < props.data.length) {
-    flag = true
-  }
-  return flag
-})
-</script>
-
-<template>
-  <div class="batch-action-bar">
-    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" :disabled="!data.length">
-      当页全选
-    </el-checkbox>
-    <div v-if="selectionData.length" class="tips">
-      已选 {{ selectionData.length }} 项
-    </div>
-    <el-form :disabled="!selectionData.length">
-      <slot />
-    </el-form>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.batch-action-bar {
-  display: flex;
-  align-items: center;
-  margin: 20px 0;
-  padding: 0 10px;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  .el-checkbox {
-    margin-right: 20px;
-  }
-
-  .tips {
-    margin-right: 20px;
-    color: #909399;
-    font-size: 13px;
-  }
-
-  :deep(.el-form) {
-    > .el-button {
-      margin-right: 10px;
-    }
-
-    > .el-button-group {
-      margin-right: 10px;
-    }
-  }
-}
-</style>

src/components/Copyright/index.vue

@@ -1,50 +0,0 @@
-<script lang="ts" setup name="Copyright">
-import useSettingsStore from '@/store/modules/settings'
-
-const route = useRoute()
-const settingsStore = useSettingsStore()
-</script>
-
-<template>
-  <footer v-if="route.meta.copyright ?? settingsStore.settings.copyright.enable" class="copyright">
-    <span>Copyright</span>
-    <span class="icon">©</span>
-    <span v-if="settingsStore.settings.copyright.dates">{{ settingsStore.settings.copyright.dates }}</span>
-    <template v-if="settingsStore.settings.copyright.company">
-      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.company }}</a>
-      <span v-else>{{ settingsStore.settings.copyright.company }}</span>
-    </template>
-    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.beian }}</a>
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 40px 0 20px;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-
-  span,
-  a {
-    padding: 0 5px;
-  }
-
-  a {
-    text-decoration: none;
-    color: var(--el-text-color-secondary);
-    transition: var(--el-transition-color);
-
-    &:hover {
-      color: var(--el-text-color-primary);
-    }
-  }
-
-  .icon {
-    padding: 0;
-    font-size: 18px;
-  }
-}
-</style>

src/components/FileUpload/index.vue

@@ -1,51 +1,49 @@
-<script lang="ts" setup name="FileUpload">
-import { ElMessage } from 'element-plus'
+<script setup lang="ts">
 import type { UploadProps, UploadUserFile } from 'element-plus'
+import { ElMessage } from 'element-plus'
 
-const props = defineProps({
-  action: {
-    type: String,
-    required: true,
-  },
-  headers: {
-    type: Object,
-    default: () => {},
-  },
-  data: {
-    type: Object,
-    default: () => {},
-  },
-  name: {
-    type: String,
-    default: 'file',
-  },
-  size: {
-    type: Number,
-    default: 2,
-  },
-  max: {
-    type: Number,
-    default: 3,
-  },
-  files: {
-    type: Array,
-    default: () => [],
-  },
-  notip: {
-    type: Boolean,
-    default: false,
-  },
-  ext: {
-    type: Array,
-    default: () => ['zip', 'rar'],
-  },
+defineOptions({
+  name: 'FileUpload',
 })
 
-const emit = defineEmits(['onSuccess'])
+const props = withDefaults(
+  defineProps<{
+    action: UploadProps['action']
+    headers?: UploadProps['headers']
+    data?: UploadProps['data']
+    name?: UploadProps['name']
+    size?: number
+    max?: number
+    files?: UploadUserFile[]
+    notip?: boolean
+    ext?: string[]
+    httpRequest?: UploadProps['httpRequest']
+  }>(),
+  {
+    name: 'file',
+    size: 2,
+    max: 3,
+    files: () => [],
+    notip: false,
+    ext: () => ['zip', 'rar'],
+  },
+)
+
+const emits = defineEmits<{
+  onSuccess: [
+    res: any,
+    file: UploadUserFile,
+    fileList: UploadUserFile[],
+  ]
+  onRemove: [
+    file: UploadUserFile,
+    fileList: UploadUserFile[],
+  ]
+}>()
 
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1)
+  const fileExt = fileName.at(-1) ?? ''
   const isTypeOk = props.ext.includes(fileExt)
   const isSizeOk = file.size / 1024 / 1024 < props.size
   if (!isTypeOk) {
@@ -62,12 +60,39 @@ const onExceed: UploadProps['onExceed'] = () => {
 }
 
 const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
-  emit('onSuccess', res, file, fileList)
+  emits('onSuccess', res, file, fileList)
+}
+
+const onRemove: UploadProps['onRemove'] = (file, fileList) => {
+  emits('onRemove', file, fileList)
+}
+
+const onPreview: UploadProps['onPreview'] = (e) => {
+  const getBlob = (url: string) => new Promise((resolve) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', url, true)
+    xhr.responseType = 'blob'
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        resolve(xhr.response)
+      }
+    }
+    xhr.send()
+  })
+  getBlob(e.url!).then((blob: any) => {
+    const a = document.createElement('a')
+    const url = window.URL.createObjectURL(blob)
+    const event = new MouseEvent('click')
+    a.target = '_blank'
+    a.download = e.name
+    a.href = url
+    a.dispatchEvent(event)
+  })
 }
 </script>
 
 <template>
-  <el-upload
+  <ElUpload
     :headers="headers"
     :action="action"
     :data="data"
@@ -75,14 +100,15 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
     :before-upload="beforeUpload"
     :on-exceed="onExceed"
     :on-success="onSuccess"
-    :file-list="files as UploadUserFile[]"
+    :on-remove="onRemove"
+    :on-preview="onPreview"
+    :http-request="httpRequest"
+    :file-list="files"
     :limit="max"
     drag
   >
     <div class="slot">
-      <el-icon class="el-icon--upload">
-        <svg-icon name="ep:upload-filled" />
-      </el-icon>
+      <FaIcon name="i-ep:upload-filled" class="el-icon--upload" />
       <div class="el-upload__text">
         将文件拖到此处，或<em>点击上传</em>
       </div>
@@ -90,14 +116,14 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
     <template #tip>
       <div v-if="!notip" class="el-upload__tip">
         <div style="display: inline-block;">
-          <el-alert :title="`上传文件支持 ${ext.join(' / ')} 格式，单个文件大小不超过 ${size}MB，且文件数量不超过 ${max} 个`" type="info" show-icon :closable="false" />
+          <ElAlert :title="`上传文件支持 ${ext.join(' / ')} 格式，单个文件大小不超过 ${size}MB，且文件数量不超过 ${max} 个`" type="info" show-icon :closable="false" />
         </div>
       </div>
     </template>
-  </el-upload>
+  </ElUpload>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep(.el-upload.is-drag) {
   display: inline-block;
 

src/components/FixedActionBar/index.vue

@@ -1,49 +0,0 @@
-<script lang="ts" setup name="FixedActionBar">
-const isBottom = ref(false)
-
-onMounted(() => {
-  onScroll()
-  window.addEventListener('scroll', onScroll)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll)
-})
-
-function onScroll() {
-  // 变量scrollTop是滚动条滚动时，滚动条上端距离顶部的距离
-  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-  // 变量windowHeight是可视区的高度
-  const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
-  // 变量scrollHeight是滚动条的总高度（当前可滚动的页面的总高度）
-  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
-  // 滚动条到底部
-  isBottom.value = Math.ceil(scrollTop + windowHeight) >= scrollHeight
-}
-</script>
-
-<template>
-  <div class="actionbar" :class="{ shadow: !isBottom }" data-fixed-calc-width>
-    <slot />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.actionbar {
-  z-index: 4;
-  bottom: 0;
-  padding: 20px;
-  text-align: center;
-  background-color: var(--g-app-bg);
-  box-shadow: 0 0 1px 0 var(--g-box-shadow-color);
-  transition: all 0.3s, var(--el-transition-box-shadow);
-
-  &.shadow {
-    box-shadow: 0 -10px 10px -10px var(--g-box-shadow-color);
-  }
-}
-
-:deep(.el-form-item) {
-  margin-bottom: 0;
-}
-</style>

src/components/ImagePreview/index.vue

@@ -1,19 +1,20 @@
-<script lang="ts" setup name="ImagePreview">
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  width: {
-    type: [Number, String],
-    default: '',
-  },
-  height: {
-    type: [Number, String],
-    default: '',
-  },
+<script setup lang="ts">
+defineOptions({
+  name: 'ImagePreview',
 })
 
+const props = withDefaults(
+  defineProps<{
+    src: string
+    width?: number | string
+    height?: number | string
+  }>(),
+  {
+    width: 200,
+    height: 200,
+  },
+)
+
 const realWidth = computed(() => {
   return typeof props.width === 'string' ? props.width : `${props.width}px`
 })
@@ -24,27 +25,25 @@ const realHeight = computed(() => {
 </script>
 
 <template>
-  <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
+  <ElImage :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
     <template #error>
       <div class="image-slot">
-        <el-icon>
-          <svg-icon name="image-load-fail" />
-        </el-icon>
+        <FaIcon name="i-ph:image-broken-duotone" />
       </div>
     </template>
-  </el-image>
+  </ElImage>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .el-image {
-  border-radius: 5px;
   background-color: var(--el-fill-color);
+  border-radius: 5px;
   box-shadow: var(--el-box-shadow-light);
   transition: background-color 0.3s, var(--el-transition-box-shadow);
 
   :deep(.el-image__inner) {
-    transition: all 0.3s;
     cursor: pointer;
+    transition: all 0.3s;
 
     &:hover {
       transform: scale(1.2);
@@ -53,12 +52,12 @@ const realHeight = computed(() => {
 
   :deep(.image-slot) {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
-    color: #909399;
     font-size: 30px;
+    color: #909399;
   }
 }
 </style>

src/components/ImageUpload/index.vue

@@ -1,55 +1,45 @@
-<script lang="ts" setup name="ImageUpload">
+<script setup lang="ts">
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
-const props = defineProps({
-  action: {
-    type: String,
-    required: true,
-  },
-  headers: {
-    type: Object,
-    default: () => {},
-  },
-  data: {
-    type: Object,
-    default: () => {},
-  },
-  name: {
-    type: String,
-    default: 'file',
-  },
-  url: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: Number,
-    default: 2,
-  },
-  width: {
-    type: Number,
-    default: 150,
-  },
-  height: {
-    type: Number,
-    default: 150,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  notip: {
-    type: Boolean,
-    default: false,
-  },
-  ext: {
-    type: Array,
-    default: () => ['jpg', 'png', 'gif', 'bmp'],
-  },
+defineOptions({
+  name: 'ImageUpload',
 })
 
-const emit = defineEmits(['update:url', 'onSuccess'])
+const props = withDefaults(
+  defineProps<{
+    action: UploadProps['action']
+    headers?: UploadProps['headers']
+    data?: UploadProps['data']
+    name?: UploadProps['name']
+    size?: number
+    width?: number
+    height?: number
+    placeholder?: string
+    notip?: boolean
+    ext?: string[]
+    httpRequest?: UploadProps['httpRequest']
+  }>(),
+  {
+    name: 'file',
+    size: 2,
+    width: 150,
+    height: 150,
+    placeholder: '',
+    notip: false,
+    ext: () => ['jpg', 'png', 'gif', 'bmp'],
+  },
+)
+
+const emits = defineEmits<{
+  onSuccess: [
+    res: any,
+  ]
+}>()
+
+const url = defineModel<string>({
+  default: '',
+})
 
 const uploadData = ref({
   imageViewerVisible: false,
@@ -69,11 +59,11 @@ function previewClose() {
 }
 // 移除
 function remove() {
-  emit('update:url', '')
+  url.value = ''
 }
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1)
+  const fileExt = fileName.at(-1) ?? ''
   const isTypeOk = props.ext.includes(fileExt)
   const isSizeOk = file.size / 1024 / 1024 < props.size
   if (!isTypeOk) {
@@ -93,13 +83,13 @@ const onProgress: UploadProps['onProgress'] = (file) => {
 const onSuccess: UploadProps['onSuccess'] = (res) => {
   uploadData.value.progress.preview = ''
   uploadData.value.progress.percent = 0
-  emit('onSuccess', res)
+  emits('onSuccess', res)
 }
 </script>
 
 <template>
   <div class="upload-container">
-    <el-upload
+    <ElUpload
       :show-file-list="false"
       :headers="headers"
       :action="action"
@@ -108,50 +98,45 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       :before-upload="beforeUpload"
       :on-progress="onProgress"
       :on-success="onSuccess"
+      :http-request="httpRequest"
       drag
       class="image-upload"
     >
-      <el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
+      <ElImage v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
         <template #error>
           <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-            <el-icon>
-              <svg-icon name="ep:plus" />
-            </el-icon>
+            <FaIcon name="i-ep:plus" class="icon" />
           </div>
         </template>
-      </el-image>
+      </ElImage>
       <div v-else class="image">
-        <el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <ElImage :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
         <div class="mask">
           <div class="actions">
-            <span title="预览" @click.stop="preview">
-              <el-icon>
-                <svg-icon name="ep:zoom-in" />
-              </el-icon>
+            <span @click.stop="preview">
+              <FaIcon name="i-ep:zoom-in" class="icon" />
             </span>
-            <span title="移除" @click.stop="remove">
-              <el-icon>
-                <svg-icon name="ep:delete" />
-              </el-icon>
+            <span @click.stop="remove">
+              <FaIcon name="i-ep:delete" class="icon" />
             </span>
           </div>
         </div>
       </div>
       <div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
+        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
       </div>
-    </el-upload>
+    </ElUpload>
     <div v-if="!notip" class="el-upload__tip">
       <div style="display: inline-block;">
-        <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
+        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
+    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
   line-height: initial;
 }
@@ -162,40 +147,42 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 
 .image {
   position: relative;
-  border-radius: 6px;
   overflow: hidden;
+  border-radius: 6px;
 
   .mask {
-    opacity: 0;
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--el-overlay-color-lighter);
+    opacity: 0;
     transition: opacity 0.3s;
 
     .actions {
-      width: 100px;
-      height: 100px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
-
-      @include position-center(xy);
+      width: 100px;
+      height: 100px;
+      transform: translateX(-50%) translateY(-50%);
 
       span {
         width: 50%;
+        color: var(--el-color-white);
         text-align: center;
         cursor: pointer;
-        color: var(--el-color-white);
         transition: color 0.1s, transform 0.1s;
 
         &:hover {
           transform: scale(1.5);
         }
 
-        .el-icon {
+        .icon {
           font-size: 24px;
         }
       }
@@ -223,14 +210,14 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 
     .image-slot {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
       color: var(--el-text-color-placeholder);
       background-color: transparent;
 
-      i {
+      .icon {
         font-size: 30px;
       }
     }
@@ -240,19 +227,21 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       top: 0;
 
       &::after {
-        content: "";
         position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-        left: 0;
-        top: 0;
+        content: "";
         background-color: var(--el-overlay-color-lighter);
       }
 
       .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
         z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);
 
         .el-progress__text {
           color: var(--el-text-color-placeholder);

src/components/ImagesUpload/index.vue

@@ -1,59 +1,47 @@
-<script lang="ts" setup name="ImagesUpload">
+<script setup lang="ts">
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
-const props = defineProps({
-  action: {
-    type: String,
-    required: true,
-  },
-  headers: {
-    type: Object,
-    default: () => {},
-  },
-  data: {
-    type: Object,
-    default: () => {},
-  },
-  name: {
-    type: String,
-    default: 'file',
-  },
-  url: {
-    type: Array,
-    default: () => [],
-  },
-  max: {
-    type: Number,
-    default: 3,
-  },
-  size: {
-    type: Number,
-    default: 2,
-  },
-  width: {
-    type: Number,
-    default: 150,
-  },
-  height: {
-    type: Number,
-    default: 150,
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  notip: {
-    type: Boolean,
-    default: false,
-  },
-  ext: {
-    type: Array,
-    default: () => ['jpg', 'png', 'gif', 'bmp'],
-  },
+defineOptions({
+  name: 'ImagesUpload',
 })
 
-const emit = defineEmits(['update:url', 'onSuccess'])
+const props = withDefaults(
+  defineProps<{
+    action: UploadProps['action']
+    headers?: UploadProps['headers']
+    data?: UploadProps['data']
+    name?: UploadProps['name']
+    size?: number
+    max?: number
+    width?: number
+    height?: number
+    placeholder?: string
+    notip?: boolean
+    ext?: string[]
+    httpRequest?: UploadProps['httpRequest']
+  }>(),
+  {
+    name: 'file',
+    size: 2,
+    max: 3,
+    width: 150,
+    height: 150,
+    placeholder: '',
+    notip: false,
+    ext: () => ['jpg', 'png', 'gif', 'bmp'],
+  },
+)
+
+const emits = defineEmits<{
+  onSuccess: [
+    res: any,
+  ]
+}>()
+
+const url = defineModel<string[]>({
+  default: [],
+})
 
 const uploadData = ref({
   dialogImageIndex: 0,
@@ -75,25 +63,21 @@ function previewClose() {
 }
 // 移除
 function remove(index: number) {
-  const url = props.url
-  url.splice(index, 1)
-  emit('update:url', url)
+  url.value.splice(index, 1)
 }
 // 移动
 function move(index: number, type: 'left' | 'right') {
-  const url = props.url
   if (type === 'left' && index !== 0) {
-    url[index] = url.splice(index - 1, 1, url[index])[0]
+    url.value[index] = url.value.splice(index - 1, 1, url.value[index])[0]
   }
-  if (type === 'right' && index !== url.length - 1) {
-    url[index] = url.splice(index + 1, 1, url[index])[0]
+  if (type === 'right' && index !== url.value.length - 1) {
+    url.value[index] = url.value.splice(index + 1, 1, url.value[index])[0]
   }
-  emit('update:url', url)
 }
 
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   const fileName = file.name.split('.')
-  const fileExt = fileName.at(-1)
+  const fileExt = fileName.at(-1) ?? ''
   const isTypeOk = props.ext.includes(fileExt)
   const isSizeOk = file.size / 1024 / 1024 < props.size
   if (!isTypeOk) {
@@ -113,40 +97,32 @@ const onProgress: UploadProps['onProgress'] = (file) => {
 const onSuccess: UploadProps['onSuccess'] = (res) => {
   uploadData.value.progress.preview = ''
   uploadData.value.progress.percent = 0
-  emit('onSuccess', res)
+  emits('onSuccess', res)
 }
 </script>
 
 <template>
   <div class="upload-container">
     <div v-for="(item, index) in (url as string[])" :key="index" class="images">
-      <el-image v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
+      <ElImage v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
       <div class="mask">
         <div class="actions">
-          <span title="预览" @click="preview(index)">
-            <el-icon>
-              <svg-icon name="ep:zoom-in" />
-            </el-icon>
+          <span @click="preview(index)">
+            <FaIcon name="i-ep:zoom-in" class="icon" />
           </span>
-          <span title="移除" @click="remove(index)">
-            <el-icon>
-              <svg-icon name="ep:delete" />
-            </el-icon>
+          <span @click="remove(index)">
+            <FaIcon name="i-ep:delete" class="icon" />
           </span>
-          <span v-show="url.length > 1" title="左移" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
-            <el-icon>
-              <svg-icon name="ep:back" />
-            </el-icon>
+          <span v-show="url.length > 1" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
+            <FaIcon name="i-ep:back" class="icon" />
           </span>
-          <span v-show="url.length > 1" title="右移" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
-            <el-icon>
-              <svg-icon name="ep:right" />
-            </el-icon>
+          <span v-show="url.length > 1" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
+            <FaIcon name="i-ep:right" class="icon" />
           </span>
         </div>
       </div>
     </div>
-    <el-upload
+    <ElUpload
       v-show="url.length < max"
       :show-file-list="false"
       :headers="headers"
@@ -156,29 +132,28 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       :before-upload="beforeUpload"
       :on-progress="onProgress"
       :on-success="onSuccess"
+      :http-request="httpRequest"
       drag
       class="images-upload"
     >
       <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-        <el-icon>
-          <svg-icon name="ep:plus" />
-        </el-icon>
+        <FaIcon name="i-ep:plus" class="icon" />
       </div>
       <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
+        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
       </div>
-    </el-upload>
+    </ElUpload>
     <div v-if="!notip" class="el-upload__tip">
       <div style="display: inline-block;">
-        <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
+        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
+    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
   line-height: initial;
 }
@@ -190,35 +165,37 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 .images {
   position: relative;
   display: inline-block;
-  margin-right: 10px;
+  margin-inline-end: 10px;
+  overflow: hidden;
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
-  overflow: hidden;
 
   .mask {
-    opacity: 0;
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--el-overlay-color-lighter);
+    opacity: 0;
     transition: opacity 0.3s;
 
     .actions {
-      width: 100px;
-      height: 100px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
-
-      @include position-center(xy);
+      width: 100px;
+      height: 100px;
+      transform: translateX(-50%) translateY(-50%);
 
       span {
         width: 50%;
+        color: var(--el-color-white);
         text-align: center;
         cursor: pointer;
-        color: var(--el-color-white);
         transition: color 0.1s, transform 0.1s;
 
         &.disabled {
@@ -230,7 +207,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
           transform: scale(1.5);
         }
 
-        .el-icon {
+        .icon {
           font-size: 24px;
         }
       }
@@ -258,14 +235,14 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 
     .image-slot {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
       color: var(--el-text-color-placeholder);
       background-color: transparent;
 
-      i {
+      .icon {
         font-size: 30px;
       }
     }
@@ -275,19 +252,21 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       top: 0;
 
       &::after {
-        content: "";
         position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-        left: 0;
-        top: 0;
+        content: "";
         background-color: var(--el-overlay-color-lighter);
       }
 
       .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
         z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);
 
         .el-progress__text {
           color: var(--el-text-color-placeholder);

src/components/NotAllowed/index.vue

@@ -1,71 +0,0 @@
-<script lang="ts" setup>
-const router = useRouter()
-
-const data = ref({
-  inter: NaN,
-  countdown: 5,
-})
-
-onUnmounted(() => {
-  data.value.inter && window.clearInterval(data.value.inter)
-})
-
-onMounted(() => {
-  data.value.inter = window.setInterval(() => {
-    data.value.countdown--
-    if (data.value.countdown === 0) {
-      data.value.inter && window.clearInterval(data.value.inter)
-      goBack()
-    }
-  }, 1000)
-})
-
-function goBack() {
-  router.push('/')
-}
-</script>
-
-<template>
-  <div class="notallowed">
-    <svg-icon name="403" class="icon" />
-    <div class="content">
-      <h1>403</h1>
-      <div class="desc">
-        抱歉，你无权访问该页面
-      </div>
-      <el-button type="primary" @click="goBack">
-        {{ data.countdown }} 秒后，返回首页
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.notallowed {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
-
-  @include position-center(xy);
-
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
-    }
-
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
-    }
-  }
-}
-</style>

src/components/PageHeader/index.vue

@@ -1,81 +0,0 @@
-<script lang="ts" setup name="PageHeader">
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  content: {
-    type: String,
-    default: '',
-  },
-})
-
-const slots = useSlots()
-</script>
-
-<template>
-  <div class="header">
-    <div class="main">
-      <div class="title">
-        {{ title }}
-      </div>
-      <div class="content">
-        <slot name="content">
-          {{ content }}
-        </slot>
-      </div>
-    </div>
-    <div v-if="slots.default" class="sub">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
-  padding: 16px 20px;
-  background-color: var(--g-app-bg);
-  transition: background-color 0.3s;
-
-  .main {
-    flex: 1;
-    margin-right: 20px;
-
-    .title {
-      font-size: 22px;
-      color: var(--el-text-color-primary);
-      transition: var(--el-transition-color);
-    }
-
-    .content {
-      margin-top: 10px;
-      font-size: 14px;
-      color: var(--el-text-color-secondary);
-      transition: var(--el-transition-color);
-
-      &:empty {
-        display: none;
-      }
-    }
-  }
-
-  .sub {
-    flex: none;
-  }
-}
-
-[data-mode="mobile"] {
-  .header {
-    flex-direction: column;
-
-    .main {
-      margin-right: auto;
-      margin-bottom: 20px;
-    }
-  }
-}
-</style>

src/components/PageMain/index.vue

@@ -1,89 +0,0 @@
-<script lang="ts" setup name="PageMain">
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  collaspe: {
-    type: Boolean,
-    default: false,
-  },
-  height: {
-    type: String,
-    default: '',
-  },
-})
-
-const titleSlot = !!useSlots().title
-
-const collaspeData = ref(props.collaspe)
-function unCollaspe() {
-  collaspeData.value = false
-}
-</script>
-
-<template>
-  <div
-    class="page-main" :class="{
-      'is-collaspe': collaspeData,
-    }" :style="{
-      height: collaspeData ? height : '',
-    }"
-  >
-    <div v-if="titleSlot || title" class="title-container">
-      <slot v-if="titleSlot" name="title" />
-      <template v-else>
-        {{ title }}
-      </template>
-    </div>
-    <slot />
-    <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
-      <el-icon>
-        <svg-icon name="ep:arrow-down" />
-      </el-icon>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.page-main {
-  position: relative;
-  margin: 20px;
-  padding: 20px;
-  background-color: var(--g-app-bg);
-  transition: background-color 0.3s;
-
-  &.is-collaspe {
-    overflow: hidden;
-
-    .collaspe {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      padding: 40px 0 10px;
-      text-align: center;
-      font-size: 24px;
-      color: var(--el-text-color-primary);
-      text-shadow: 0 0 1px var(--el-text-color-primary);
-      background: linear-gradient(to bottom, transparent, var(--g-app-bg));
-      transition: background 0.3s, var(--el-transition-color);
-      cursor: pointer;
-
-      &:hover {
-        color: var(--el-text-color-secondary);
-      }
-    }
-  }
-
-  .title-container {
-    width: calc(100% + 40px);
-    padding: 14px 20px;
-    margin-left: -20px;
-    margin-top: -20px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    transition: var(--el-transition-border);
-  }
-}
-</style>

src/components/PcasCascader/index.vue

@@ -1,140 +0,0 @@
-<script lang="ts" setup name="PcasCascader">
-// 行政区划数据来源于 https://github.com/modood/Administrative-divisions-of-China
-import pcasRaw from './pcas-code.json'
-
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: () => [],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String as () => 'pc' | 'pca' | 'pcas',
-    default: 'pca',
-  },
-  format: {
-    type: String as () => 'code' | 'name' | 'both',
-    default: 'code',
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-interface pcasItem {
-  code: string
-  name: string
-  children?: pcasItem[]
-}
-
-const pcasData = computed(() => {
-  const data: pcasItem[] = []
-  // 省份
-  pcasRaw.forEach((p) => {
-    const tempP: pcasItem = {
-      code: p.code,
-      name: p.name,
-    }
-    const tempChildrenC: pcasItem[] = []
-    // 城市
-    p.children.forEach((c) => {
-      const tempC: pcasItem = {
-        code: c.code,
-        name: c.name,
-      }
-      if (['pca', 'pcas'].includes(props.type)) {
-        const tempChildrenA: pcasItem[] = []
-        // 区县
-        c.children.forEach((a) => {
-          const tempA: pcasItem = {
-            code: a.code,
-            name: a.name,
-          }
-          if (props.type === 'pcas') {
-            const tempChildrenS: pcasItem[] = []
-            // 街道
-            a.children.forEach((s) => {
-              const tempS: pcasItem = {
-                code: s.code,
-                name: s.name,
-              }
-              tempChildrenS.push(tempS)
-            })
-            tempA.children = tempChildrenS
-          }
-          tempChildrenA.push(tempA)
-        })
-        tempC.children = tempChildrenA
-      }
-      tempChildrenC.push(tempC)
-    })
-    tempP.children = tempChildrenC
-    data.push(tempP)
-  })
-  return data
-})
-
-const myValue = computed({
-  // 将入参数据转成 code 码
-  get: () => {
-    return anyToCode(props.modelValue)
-  },
-  // 将 code 码转成出参数据
-  set: (value) => {
-    emit('update:modelValue', value ? codeToAny(value) : [])
-  },
-})
-
-function anyToCode(value: any[], dictionarie: any[] = pcasData.value) {
-  const input: string[] = []
-  if (value.length > 0) {
-    const findItem = dictionarie.find((item) => {
-      if (props.format === 'code') {
-        return item.code === value[0]
-      }
-      else if (props.format === 'name') {
-        return item.name === value[0]
-      }
-      else {
-        return item.name === value[0].name && item.code === value[0].code
-      }
-    })
-    input.push(findItem.code)
-    if (findItem.children) {
-      input.push(...anyToCode(value.slice(1 - value.length), findItem.children))
-    }
-  }
-  return input
-}
-
-function codeToAny(codes: string[], dictionarie: any[] = pcasData.value): any {
-  const output = []
-  const findItem = dictionarie.find(item => item.code === codes[0])
-  if (findItem) {
-    switch (props.format) {
-      case 'code':
-        output.push(findItem.code)
-        break
-      case 'name':
-        output.push(findItem.name)
-        break
-      case 'both':
-        output.push({
-          code: findItem.code,
-          name: findItem.name,
-        })
-    }
-    const newCodes = codes.slice(1 - codes.length)
-    if (newCodes.length > 0 && findItem.children) {
-      output.push(...codeToAny(newCodes, findItem.children))
-    }
-  }
-  return output
-}
-</script>
-
-<template>
-  <el-cascader v-model="myValue" :options="pcasData as any[]" :props="{ value: 'code', label: 'name' }" :disabled="disabled" clearable filterable />
-</template>

src/components/SearchBar/index.vue

@@ -1,77 +0,0 @@
-<script lang="ts" setup name="SearchBar">
-const props = defineProps({
-  showMore: {
-    type: Boolean,
-    default: false,
-  },
-  unfold: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['toggle'])
-
-const isUnfold = ref(!props.unfold)
-
-watch(() => props.unfold, () => toggle(), {
-  immediate: true,
-})
-
-function toggle() {
-  isUnfold.value = !isUnfold.value
-  emit('toggle', isUnfold.value)
-}
-</script>
-
-<template>
-  <div class="search-container">
-    <slot />
-    <div v-if="showMore" class="more">
-      <el-button text size="small" @click="toggle">
-        <template #icon>
-          <el-icon>
-            <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
-          </el-icon>
-        </template>
-        {{ isUnfold ? '收起' : '展开' }}
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-container {
-  position: relative;
-  margin: 20px 0;
-  padding: 20px;
-  background-color: var(--el-fill-color-lighter);
-  transition: background-color 0.3s;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  :deep(.el-form) {
-    margin-bottom: -10px;
-
-    .el-select {
-      width: 100%;
-    }
-
-    .el-date-editor {
-      width: 100%;
-    }
-  }
-
-  .more {
-    position: relative;
-    text-align: center;
-    margin-bottom: -10px;
-  }
-}
-</style>

src/components/SvgIcon/index.vue

@@ -1,47 +0,0 @@
-<script lang="ts" setup name="SvgIcon">
-import { Icon } from '@iconify/vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  flip: {
-    type: String as () => 'horizontal' | 'vertical' | 'both' | '',
-    default: '',
-  },
-  rotate: {
-    type: Number,
-    default: 0,
-  },
-})
-
-const transformStyle = computed(() => {
-  const style = []
-  if (props.flip !== '') {
-    switch (props.flip) {
-      case 'horizontal':
-        style.push('rotateY(180deg)')
-        break
-      case 'vertical':
-        style.push('rotateX(180deg)')
-        break
-      case 'both':
-        style.push('rotateX(180deg)')
-        style.push('rotateY(180deg)')
-        break
-    }
-  }
-  if (props.rotate !== 0) {
-    style.push(`rotate(${props.rotate}deg)`)
-  }
-  return `transform: ${style.join(' ')};`
-})
-</script>
-
-<template>
-  <Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
-  <svg v-else :style="transformStyle" aria-hidden="true">
-    <use :xlink:href="`#icon-${name}`" />
-  </svg>
-</template>

src/components/SystemInfo/index.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import eventBus from '@/utils/eventBus'
-
-const isShow = ref(false)
-
-const { pkg, lastBuildTime } = __SYSTEM_INFO__
-
-onMounted(() => {
-  eventBus.on('global-system-info-toggle', () => {
-    isShow.value = !isShow.value
-  })
-})
-</script>
-
-<template>
-  <div>
-    <el-drawer v-model="isShow" title="系统信息" direction="rtl" :size="360">
-      <el-descriptions direction="vertical" :column="1" border>
-        <el-descriptions-item label="版本号" align="center">
-          {{ pkg.version }}
-        </el-descriptions-item>
-        <el-descriptions-item label="最后编译时间" align="center">
-          {{ lastBuildTime }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions title="生产环境依赖" :column="1" size="small" border>
-        <el-descriptions-item v-for="(val, key) in (pkg.dependencies as object)" :key="key" :label="key">
-          {{ val }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions title="开发环境依赖" :column="1" size="small" border>
-        <el-descriptions-item v-for="(val, key) in (pkg.devDependencies as object)" :key="key" :label="key">
-          {{ val }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-drawer>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.el-drawer__header) {
-  margin-bottom: initial;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--el-border-color);
-  transition: var(--el-transition-border);
-}
-
-:deep(.el-descriptions) {
-  margin-bottom: 20px;
-}
-</style>

src/components/Trend/index.vue

@@ -1,68 +0,0 @@
-<script lang="ts" setup name="Trend">
-const props = defineProps({
-  value: {
-    type: String,
-    required: true,
-  },
-  type: {
-    type: String as () => 'up' | 'down',
-    default: 'up',
-  },
-  prefix: {
-    type: String,
-    default: '',
-  },
-  suffix: {
-    type: String,
-    default: '',
-  },
-  reverse: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const isUp = computed(() => {
-  let isUp = props.type === 'up'
-  if (props.reverse) {
-    isUp = !isUp
-  }
-  return isUp
-})
-</script>
-
-<template>
-  <div :class="`trend ${isUp ? 'up' : 'down'}`">
-    <span v-if="prefix" class="prefix">{{ prefix }}</span>
-    <span class="text">{{ value }}</span>
-    <span v-if="suffix" class="suffix">{{ suffix }}</span>
-    <el-icon>
-      <svg-icon name="ep:caret-top" />
-    </el-icon>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.trend {
-  display: flex;
-  align-items: center;
-  transition: var(--el-transition-color);
-
-  &.up {
-    color: var(--el-color-success);
-  }
-
-  &.down {
-    color: var(--el-color-danger);
-
-    .el-icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  .el-icon {
-    margin-left: 5px;
-    transition: transform 0.3s;
-  }
-}
-</style>

src/iconify-ep/index.ts

@@ -1,6 +0,0 @@
-import { addCollection } from '@iconify/vue'
-
-export async function downloadAndInstall() {
-  const data = Object.freeze(await fetch('./icons/icons.json').then(r => r.json()))
-  addCollection(data)
-}