diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..dd765724
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+# 表示所有文件适用
+[*]
+charset = utf-8 # 设置文件字符集为 utf-8
+end_of_line = lf # 控制换行类型(lf | cr | crlf)
+indent_style = tab # 缩进风格（tab | space）
+insert_final_newline = true # 始终在文件末尾插入一个新行
+
+# 表示仅 md 文件适用以下规则
+[*.md]
+max_line_length = off # 关闭最大行长度限制
+trim_trailing_whitespace = false # 关闭末尾空格修剪
diff --git a/.env.production b/.env.production
index bc89fec3..fbcbed58 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,4 @@
 ## 生产环境
-NODE_ENV='production'
 
 VITE_APP_TITLE = 'vue3-element-admin'
 VITE_APP_PORT = 3000
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..43af40f4
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,14 @@
+dist
+node_modules
+public
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
+
+.eslintrc.cjs
+.prettierrc.cjs
+.stylelintrc.cjs
diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
new file mode 100644
index 00000000..9f369423
--- /dev/null
+++ b/.eslintrc-auto-import.json
@@ -0,0 +1,269 @@
+{
+  "globals": {
+    "EffectScope": true,
+    "ElForm": true,
+    "ElMessage": true,
+    "ElMessageBox": true,
+    "ElTree": true,
+    "asyncComputed": true,
+    "autoResetRef": true,
+    "computed": true,
+    "computedAsync": true,
+    "computedEager": true,
+    "computedInject": true,
+    "computedWithControl": true,
+    "controlledComputed": true,
+    "controlledRef": true,
+    "createApp": true,
+    "createEventHook": true,
+    "createGlobalState": true,
+    "createInjectionState": true,
+    "createReactiveFn": true,
+    "createSharedComposable": true,
+    "createUnrefFn": true,
+    "customRef": true,
+    "debouncedRef": true,
+    "debouncedWatch": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "eagerComputed": true,
+    "effectScope": true,
+    "extendRef": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "ignorableWatch": true,
+    "inject": true,
+    "isDefined": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "makeDestructurable": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onClickOutside": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onKeyStroke": true,
+    "onLongPress": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onStartTyping": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "pausableWatch": true,
+    "provide": true,
+    "reactify": true,
+    "reactifyObject": true,
+    "reactive": true,
+    "reactiveComputed": true,
+    "reactiveOmit": true,
+    "reactivePick": true,
+    "readonly": true,
+    "ref": true,
+    "refAutoReset": true,
+    "refDebounced": true,
+    "refDefault": true,
+    "refThrottled": true,
+    "refWithControl": true,
+    "resolveComponent": true,
+    "resolveDirective": true,
+    "resolveRef": true,
+    "resolveUnref": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "syncRef": true,
+    "syncRefs": true,
+    "templateRef": true,
+    "throttledRef": true,
+    "throttledWatch": true,
+    "toRaw": true,
+    "toReactive": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
+    "tryOnBeforeMount": true,
+    "tryOnBeforeUnmount": true,
+    "tryOnMounted": true,
+    "tryOnScopeDispose": true,
+    "tryOnUnmounted": true,
+    "unref": true,
+    "unrefElement": true,
+    "until": true,
+    "useActiveElement": true,
+    "useArrayEvery": true,
+    "useArrayFilter": true,
+    "useArrayFind": true,
+    "useArrayFindIndex": true,
+    "useArrayFindLast": true,
+    "useArrayJoin": true,
+    "useArrayMap": true,
+    "useArrayReduce": true,
+    "useArraySome": true,
+    "useArrayUnique": true,
+    "useAsyncQueue": true,
+    "useAsyncState": true,
+    "useAttrs": true,
+    "useBase64": true,
+    "useBattery": true,
+    "useBluetooth": true,
+    "useBreakpoints": true,
+    "useBroadcastChannel": true,
+    "useBrowserLocation": true,
+    "useCached": true,
+    "useClipboard": true,
+    "useCloned": true,
+    "useColorMode": true,
+    "useConfirmDialog": true,
+    "useCounter": true,
+    "useCssModule": true,
+    "useCssVar": true,
+    "useCssVars": true,
+    "useCurrentElement": true,
+    "useCycleList": true,
+    "useDark": true,
+    "useDateFormat": true,
+    "useDebounce": true,
+    "useDebounceFn": true,
+    "useDebouncedRefHistory": true,
+    "useDeviceMotion": true,
+    "useDeviceOrientation": true,
+    "useDevicePixelRatio": true,
+    "useDevicesList": true,
+    "useDisplayMedia": true,
+    "useDocumentVisibility": true,
+    "useDraggable": true,
+    "useDropZone": true,
+    "useElementBounding": true,
+    "useElementByPoint": true,
+    "useElementHover": true,
+    "useElementSize": true,
+    "useElementVisibility": true,
+    "useEventBus": true,
+    "useEventListener": true,
+    "useEventSource": true,
+    "useEyeDropper": true,
+    "useFavicon": true,
+    "useFetch": true,
+    "useFileDialog": true,
+    "useFileSystemAccess": true,
+    "useFocus": true,
+    "useFocusWithin": true,
+    "useFps": true,
+    "useFullscreen": true,
+    "useGamepad": true,
+    "useGeolocation": true,
+    "useIdle": true,
+    "useImage": true,
+    "useInfiniteScroll": true,
+    "useIntersectionObserver": true,
+    "useInterval": true,
+    "useIntervalFn": true,
+    "useKeyModifier": true,
+    "useLastChanged": true,
+    "useLocalStorage": true,
+    "useMagicKeys": true,
+    "useManualRefHistory": true,
+    "useMediaControls": true,
+    "useMediaQuery": true,
+    "useMemoize": true,
+    "useMemory": true,
+    "useMounted": true,
+    "useMouse": true,
+    "useMouseInElement": true,
+    "useMousePressed": true,
+    "useMutationObserver": true,
+    "useNavigatorLanguage": true,
+    "useNetwork": true,
+    "useNow": true,
+    "useObjectUrl": true,
+    "useOffsetPagination": true,
+    "useOnline": true,
+    "usePageLeave": true,
+    "useParallax": true,
+    "usePermission": true,
+    "usePointer": true,
+    "usePointerLock": true,
+    "usePointerSwipe": true,
+    "usePreferredColorScheme": true,
+    "usePreferredContrast": true,
+    "usePreferredDark": true,
+    "usePreferredLanguages": true,
+    "usePreferredReducedMotion": true,
+    "usePrevious": true,
+    "useRafFn": true,
+    "useRefHistory": true,
+    "useResizeObserver": true,
+    "useScreenOrientation": true,
+    "useScreenSafeArea": true,
+    "useScriptTag": true,
+    "useScroll": true,
+    "useScrollLock": true,
+    "useSessionStorage": true,
+    "useShare": true,
+    "useSlots": true,
+    "useSorted": true,
+    "useSpeechRecognition": true,
+    "useSpeechSynthesis": true,
+    "useStepper": true,
+    "useStorage": true,
+    "useStorageAsync": true,
+    "useStyleTag": true,
+    "useSupported": true,
+    "useSwipe": true,
+    "useTemplateRefsList": true,
+    "useTextDirection": true,
+    "useTextSelection": true,
+    "useTextareaAutosize": true,
+    "useThrottle": true,
+    "useThrottleFn": true,
+    "useThrottledRefHistory": true,
+    "useTimeAgo": true,
+    "useTimeout": true,
+    "useTimeoutFn": true,
+    "useTimeoutPoll": true,
+    "useTimestamp": true,
+    "useTitle": true,
+    "useToNumber": true,
+    "useToString": true,
+    "useToggle": true,
+    "useTransition": true,
+    "useUrlSearchParams": true,
+    "useUserMedia": true,
+    "useVModel": true,
+    "useVModels": true,
+    "useVibrate": true,
+    "useVirtualList": true,
+    "useWakeLock": true,
+    "useWebNotification": true,
+    "useWebSocket": true,
+    "useWebWorker": true,
+    "useWebWorkerFn": true,
+    "useWindowFocus": true,
+    "useWindowScroll": true,
+    "useWindowSize": true,
+    "watch": true,
+    "watchArray": true,
+    "watchAtMost": true,
+    "watchDebounced": true,
+    "watchEffect": true,
+    "watchIgnorable": true,
+    "watchOnce": true,
+    "watchPausable": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
+    "watchThrottled": true,
+    "watchTriggerable": true,
+    "watchWithFilter": true,
+    "whenever": true
+  }
+}
\ No newline at end of file
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 00000000..007ecfa2
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,39 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  parser: "vue-eslint-parser",
+  extends: [
+    // 参考vuejs官方的eslint配置： https://eslint.vuejs.org/user-guide/#usage
+    "plugin:vue/vue3-recommended",
+    "./.eslintrc-auto-import.json",
+    "prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parser: "@typescript-eslint/parser",
+  },
+  plugins: ["vue", "@typescript-eslint"],
+  rules: {
+    "vue/multi-word-component-names": "off", // 关闭组件名必须多字： https://eslint.vuejs.org/rules/multi-word-component-names.html
+    "@typescript-eslint/no-empty-function": "off", // 关闭空方法检查
+    "@typescript-eslint/no-explicit-any": "off", // 关闭any类型的警告
+    "vue/no-v-model-argument": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+  },
+  // eslint不能对html文件生效
+  overrides: [
+    {
+      files: ["*.html"],
+      processor: "vue/.vue",
+    },
+  ],
+  // https://eslint.org/docs/latest/use/configure/language-options#specifying-globals
+  globals: {
+    DialogOption: "readonly",
+    OptionType: "readonly",
+  },
+};
diff --git a/.gitignore b/.gitignore
index 1da66c1e..d5c3e837 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,4 @@ dist-ssr
 *.local
 
 package-lock.json
-yarn.lock
\ No newline at end of file
+pnpm-lock.yaml
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100755
index 00000000..e8511eae
--- /dev/null
+++ b/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 00000000..37568d10
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint:lint-staged
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..d751f74a
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,10 @@
+dist
+node_modules
+public
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 00000000..d39f28c0
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,36 @@
+module.exports = {
+  // (x)=>{},单个参数箭头函数是否显示小括号。(always:始终显示;avoid:省略括号。默认:always)
+  arrowParens: "always",
+  // 开始标签的右尖括号是否跟随在最后一行属性末尾，默认false
+  bracketSameLine: false,
+  // 对象字面量的括号之间打印空格 (true - Example: { foo: bar } ; false - Example: {foo:bar})
+  bracketSpacing: true,
+  // 是否格式化一些文件中被嵌入的代码片段的风格(auto|off;默认auto)
+  embeddedLanguageFormatting: "auto",
+  // 指定 HTML 文件的空格敏感度 (css|strict|ignore;默认css)
+  htmlWhitespaceSensitivity: "css",
+  // 当文件已经被 Prettier 格式化之后，是否会在文件顶部插入一个特殊的 @format 标记，默认false
+  insertPragma: false,
+  // 在 JSX 中使用单引号替代双引号，默认false
+  jsxSingleQuote: false,
+  // 每行最多字符数量，超出换行(默认80)
+  printWidth: 80,
+  // 超出打印宽度 (always | never | preserve )
+  proseWrap: "preserve",
+  // 对象属性是否使用引号(as-needed | consistent | preserve;默认as-needed:对象的属性需要加引号才添加;)
+  quoteProps: "as-needed",
+  // 是否只格式化在文件顶部包含特定注释(@prettier| @format)的文件，默认false
+  requirePragma: false,
+  // 结尾添加分号
+  semi: true,
+  // 使用单引号 (true:单引号;false:双引号)
+  singleQuote: false,
+  // 缩进空格数，默认2个空格
+  tabWidth: 2,
+  // 元素末尾是否加逗号，默认es5: ES5中的 objects, arrays 等会添加逗号，TypeScript 中的 type 后不加逗号
+  trailingComma: "es5",
+  // 指定缩进方式，空格或tab，默认false，即使用空格
+  useTabs: false,
+  // vue 文件中是否缩进 <style> 和 <script> 标签，默认 false
+  vueIndentScriptAndStyle: false,
+};
diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 00000000..d751f74a
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1,10 @@
+dist
+node_modules
+public
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
new file mode 100644
index 00000000..06ed90d5
--- /dev/null
+++ b/.stylelintrc.cjs
@@ -0,0 +1,43 @@
+module.exports = {
+  // 继承推荐规范配置
+  extends: [
+    "stylelint-config-standard",
+    "stylelint-config-recommended-scss",
+    "stylelint-config-recommended-vue/scss",
+    "stylelint-config-html/vue",
+    "stylelint-config-recess-order",
+  ],
+  // 指定不同文件对应的解析器
+  overrides: [
+    {
+      files: ["**/*.{vue,html}"],
+      customSyntax: "postcss-html",
+    },
+    {
+      files: ["**/*.{css,scss}"],
+      customSyntax: "postcss-scss",
+    },
+  ],
+  // 自定义规则
+  rules: {
+    "import-notation": "string", // 指定导入CSS文件的方式("string"|"url")
+    "selector-class-pattern": null, // 选择器类名命名规则
+    "custom-property-pattern": null, // 自定义属性命名规则
+    "keyframes-name-pattern": null, // 动画帧节点样式命名规则
+    "no-descending-specificity": null, // 允许无降序特异性
+    // 允许 global 、export 、deep伪类
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global", "export", "deep"],
+      },
+    ],
+    // 允许未知属性
+    "property-no-unknown": [
+      true,
+      {
+        ignoreProperties: ["menuBg", "menuText", "menuActiveText"],
+      },
+    ],
+  },
+};
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..b64c5b5a
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,62 @@
+# 2.4.1 (2023/7/20)
+
+### ✨ feat
+- 整合 vite-plugin-compression 插件打包优化(3.66MB → 1.58MB) （author by [april-tong](https://april-tong.com/)）
+- 字典组件封装（author by [haoxr](https://juejin.cn/user/4187394044331261/posts)）
+
+### 🐛 fix
+- 分页组件hidden无效 
+- 签名无法保存至后端
+- Git 提交 stylelint 校验部分机器报错
+
+# 2.4.0 (2023/6/17)
+
+### ✨ feat
+- 新增组件标签输入框（author by [april-tong](https://april-tong.com/)）
+- 新增组件签名（author by [april-tong](https://april-tong.com/)）
+- 新增组件表格（author by [april-tong](https://april-tong.com/)）
+- Echarts 图表添加下载功能 author by [april-tong](https://april-tong.com/)）
+
+### 🔄 refactor
+- 限制包管理器为 pnpm 和 node 版本16+
+- 自定义组件自动导入配置
+- 搜索框样式写法优化
+
+### 🐛 fix
+- 用户导入的部门回显成数字问题修复
+
+### ⬆️ chore
+- element-plus 版本升级 2.3.5 → 2.3.6
+
+# 2.3.1 (2023/5/21)
+
+### 🔄 refactor
+- 组件示例文件名称优化
+
+# 2.2.2 (2023/5/11)
+
+### ✨ feat
+- 组件封装示例添加源码地址
+- 角色、菜单、部门、字段按钮添加权限控制
+
+
+# 2.3.0 (2023/5/12)
+
+### ⬆️ chore
+- vue 版本升级 3.2.45 → 3.3.1 ([CHANGELOG](https://github.com/vuejs/core/blob/main/CHANGELOG.md))
+- vite 版本升级 4.3.1 → 4.3.5
+
+### 🔄 refactor
+- 使用 vue 3.3 版本新特性 `defineOptions` 在 `setup` 定义组件名称，移除重复的 `script` 标签
+
+# 2.2.2 (2023/5/11)
+
+### ✨ feat
+-  用户新增提交添加 `vueUse` 的 `useDebounceFn` 函数实现按钮防抖节流
+
+
+# 2.2.1 (2023/4/25)
+
+### 🐛 fix
+- 图标选择器组件使用 `onClickOutside` 未排除下拉弹出框元素导致无法输入搜索。
+
diff --git a/LICENSE b/LICENSE
index c4c9813d..9825cba0 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2022 有来开源组织
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2021-present 有来开源组织
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index 1807eb2f..63e929d6 100644
--- a/README.md
+++ b/README.md
@@ -1,137 +1,177 @@
 <p align="center">
-    <img src="https://img.shields.io/badge/Vue-3.2.16-brightgreen.svg"/>
-    <img src="https://img.shields.io/badge/Vite-2.6.4-green.svg"/>
-    <img src="https://img.shields.io/badge/Element Plus-2.1.0-blue.svg"/>
-    <a src="https://github.com/hxrui" target="_blank">
-        <img src="https://img.shields.io/github/stars/youlaitech/youlai-mall.svg?style=social&label=Stars"/>
-    </a>
-    <a href="https://gitee.com/youlaitech/youlai-mall" target="_blank">
-        <img src="https://gitee.com/youlaitech/youlai-mall/badge/star.svg"/>
-    </a> 
-    <br/>
-    <img src="https://img.shields.io/badge/license-Apache%20License%202.0-blue.svg"/>
+    <img src="https://img.shields.io/badge/Vue-3.3.1-brightgreen.svg"/>
+    <img src="https://img.shields.io/badge/Vite-4.3.5-green.svg"/>
+    <img src="https://img.shields.io/badge/Element Plus-2.3.6-blue.svg"/>
+    <img src="https://img.shields.io/badge/license-MIT-green.svg"/>
     <a href="https://gitee.com/youlaiorg" target="_blank">
         <img src="https://img.shields.io/badge/Author-有来开源组织-orange.svg"/>
     </a>
 </p>
 <p align="center">
-<strong>在线预览：</strong><a target="_blank" href="http://www.youlai.tech">www.youlai.tech</a> 
-
+ <a target="_blank" href="https://juejin.cn/post/7228990409909108793">vue3-element-admin官方文档</a> |  <a target="_blank" href="http://vue3.youlai.tech">在线预览</a> 
 </p>
 
-<p align="center">
-<strong>官方文档：</strong><a target="_blank" href="http://youlaitech.gitee.io/youlai-mall/#/vue3-element-admin/">youlaitech.gitee.io/vue3-element-admin</a> 
-</p>
 
 ## 项目介绍
 
-[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 Vue3 版本后台管理前端解决方案；使用前端主流技术栈 Vue3 + Vite2 + TypeScript + Vue Router +  Pinia + Volar + Element Plus 等；实现功能包括不限于动态权限路由、按钮权限控制、国际化、主题大小切换等；基于此模板开发了有来商城管理系统，也是有来开源组织的另一项开源力作。 
-
-## 项目优势
+[vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 Vue3 + Vite4+ TypeScript5 + Element-Plus + Pinia 等最新主流技术栈构建的后台管理前端模板（配套后端源码）。
 
-- 基于 vue-element-admin 升级的Vue3版本 ，极易上手，减少学习成本；
-- 一套完整适配的微服务权限系统线上接口，企业级真实前后端接入场景，非Mock数据；
-- 功能全面：国际化、动态路由、按钮权限、主题大小切换、Echart、wangEditor；
-- TypeScript 全面支持，包括组件和API调用层面；
-- 主流 Vue3 生态和前端技术栈，常用组件极简封装；
-- 从0到1的项目文档支持；
-- 全栈技术支持: 微服务接口、Vue3管理前端、uni-app移动端和K8S持续集成交付；
+项目有以下特性：
 
+- 基于 vue-element-admin 升级到 vue3 版本，无自定义封装，易上手，减少学习成本。
+- 提供了配套的 Java 后端接口，真实的接口数据，而非使用 Mock 数据。您可以访问在[线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5)查看接口详情。
+- 权限系统功能齐全，包括用户管理、角色管理、菜单管理、字典管理和部门管理等，以满足您对权限管理的需求。
+- 项目还提供了基础设施支持，包括动态路由、按钮级别的权限控制、国际化支持、代码规范、Git 提交规范以及常用组件的封装，以便开发人员更高效地开发和维护项目。
 
-## 技术栈
+## 项目预览
 
+- **在线预览**： [https://vue3.youlai.tech/](https://vue3.youlai.tech/)
 
-| 技术栈   | 描述 | 官网                           |
-| ---- | ---- | ---- |
-| Vue3         | 渐进式 JavaScript 框架   | https://v3.cn.vuejs.org/             |
-| TypeScript  | JavaScript 的一个超集  | https://www.tslang.cn/               
-| Vite2        | 前端开发与构建工具  | https://cn.vitejs.dev/               |
-| Element Plus | 基于 Vue 3，面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/|
-| Pinia        |   新一代状态管理工具 |  https://pinia.vuejs.org/
-| Vue Router  | Vue.js 的官方路由 |https://router.vuejs.org/zh/                                
+- **控制台**
 
+  ![暗黑模式](https://foruda.gitee.com/images/1687755822903300961/a4d63e22_716974.png)
 
+- **接口文档**
 
-## 项目预览
+  ![接口文档](https://foruda.gitee.com/images/1687755822857820115/96054330_716974.png)
+ 
 
-在线预览地址: [www.youlai.tech](http://www.youlai.tech)
 
-| ![控制台](https://s2.loli.net/2022/04/07/fIEDs3GeSb8rxlt.png) | ![国际化](https://s2.loli.net/2022/04/07/lt6u2jMefpTJvkh.gif) |
-| ----| ----|
-|![菜单管理](https://s2.loli.net/2022/04/07/quTeB3pNIyQ4alG.png) | ![角色管理](https://s2.loli.net/2022/04/07/dmh5MYtuONGRJZn.png) |
-|![商品管理](https://s2.loli.net/2022/04/07/5XgYfMqBxhtdcG2.png) | ![库存设置](https://s2.loli.net/2022/04/07/s9IJeP7vRxq2WSL.png) |
+- **权限管理系统**
 
+  |![在这里插入图片描述](https://foruda.gitee.com/images/1687755822816437081/b7620905_716974.png) | ![角色管理](https://foruda.gitee.com/images/1687755822852085747/c13a4d19_716974.png) |
+  | ------------------------------------------------------ | ------------------------------------------------------ |
+  | ![菜单管理](https://foruda.gitee.com/images/1687755822966247550/4d4f8118_716974.png) | ![在这里插入图片描述](https://foruda.gitee.com/images/1687755822828758939/8035a91f_716974.png)
 
 ## 项目地址
 
-|      |Gitee| Github| GitCode |
-| ---- | ----| ---- | ---- |
-| 开源组织  | [有来开源组织](https://gitee.com/youlaiorg)  | [有来开源组织](https://github.com/youlaitech) | [有来开源组织](https://gitcode.net/youlai)  |
-| 技术团队  | [有来技术团队](https://gitee.com/youlaitech)  | [有来技术团队](https://github.com/youlaitech) | -  |
-| 商城后端 | [youlai-mall](https://gitee.com/youlaiorg/youlai-mall)| [youlai-mall](https://github.com/youlaitech/youlai-mall) | [youlai-mall](https://gitcode.net/youlai/youlai-mall)  |
-| 商城管理前端(Vue3)| [mall-admin-web](https://gitee.com/youlaiorg/mall-admin-web) | [mall-admin-web](https://github.com/youlaitech/mall-admin-web) | [mall-admin-web](https://gitcode.net/youlai/mall-admin-web) |
-| 商城管理前端(Vue2)| [mall-admin-web](https://gitee.com/youlaitech/youlai-mall-admin/tree/vue2/) | [mall-admin-web](https://github.com/youlaitech/mall-admin-web/tree/vue2/) | - |
-| 小程序/H5/移动端 | [mall-app](https://gitee.com/youlaiorg/mall-app)| [mall-app](https://github.com/youlaitech/mall-app) | [mall-app](https://gitcode.net/youlai/mall-app) |
-| vue3-element-admin| [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) |-|
+| 项目 | Gitee                                                        | Github                                                       | GitCode                                                      |
+| ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| 前端 | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | [vue3-element-admin](https://gitcode.net/youlai/vue3-element-admin) |
+| 后端 | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot)       | [youlai-boot](https://github.com/haoxianrui/youlai-boot.git) | [youlai-boot](https://gitcode.net/youlai/youlai-boot)        |
 
-## 启动部署
+## 环境准备
 
-### 环境准备
+| 环境                 | 名称版本                                                     | 备注                                                         |
+| -------------------- | :----------------------------------------------------------- | ------------------------------------------------------------ |
+| **开发工具**         | VSCode                                                       | [下载地址](https://code.visualstudio.com/Download)           |
+| **运行环境**         | Node 16+                                                     | [下载地址](http://nodejs.cn/download)                        |
+| **VSCode插件(必装)** | 1. `Vue Language Features (Volar) ` <br/> 2. `TypeScript Vue Plugin (Volar) `  <br/>3. 禁用 Vetur | ![vscode-plugin](https://foruda.gitee.com/images/1687755823108948048/d0198b2d_716974.png) |
 
-- 安装 Node
 
-    版本：v14 或 v16 
+## 项目启动
 
-- 开发工具
+```bash
+# 克隆代码
+git clone https://gitee.com/youlaiorg/vue3-element-admin.git
 
-    推荐 VSCode
+# 切换目录
+cd vue3-element-admin
 
-- 必装插件
+# 安装 pnpm
+npm install pnpm -g
 
-    VSCode 插件市场搜索并安装 Volar, 且一定要禁用 Vetur，不然代码会出现组件使用了但编译器还报组件未使用的警告信息，另外尤大也在Vue3生态话题说过 Volar 将会替代 Vetur 作为 Vue 的官方插件。
+# 安装依赖
+pnpm install
 
-### 项目启动
+# 启动运行
+pnpm run dev
+```
+
+## 项目部署
+
+```bash
+# 项目打包
+pnpm run build:prod
+
+# 上传文件至远程服务器
+将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录
+
+# nginx.cofig 配置
+server {
+	listen     80;
+	server_name  localhost;
+	location / {
+			root /usr/share/nginx/html;
+			index index.html index.htm;
+	}
+	# 反向代理配置
+	location /prod-api/ {
+			proxy_pass http://vapi.youlai.tech/; # vapi.youlai.tech替换成你的后端API地址
+	}
+}
+```
+
+
+
+## 注意事项
+
+- **自动导入插件自动生成默认关闭**
+
+  模板项目的组件类型声明已自动生成。如果添加和使用新的组件，请按照图示方法开启自动生成。在自动生成完成后，记得将其设置为 `false`，避免重复执行引发冲突。
+
+  ![](https://foruda.gitee.com/images/1687755823137387608/412ea803_716974.png)
+
+- **项目启动浏览器访问空白**
+
+  请升级浏览器尝试，低版本浏览器内核可能不支持某些新的 JavaScript 语法，比如可选链操作符 `?.`。
+
+- **项目同步仓库更新升级**
+
+  项目同步仓库更新升级之后，建议 `pnpm install` 安装更新依赖之后启动 。
+
+- **项目组件、函数和引用爆红**
+
+	重启 VSCode 尝试
+
+- **其他问题**
+
+  如果有其他问题或者建议，建议 [ISSUE](https://gitee.com/youlaiorg/vue3-element-admin/issues/new)
+
+## 接口支持
+
+- **接口调用地址**：[https://vapi.youlai.tech](https://vapi.youlai.tech)
+
+- **接口文档地址**：[在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5)
+
+- **OpenAPI文档地址**：[http://vapi.youlai.tech/v3/api-docs](http://vapi.youlai.tech/v3/api-docs)
+
+- **本地接口**：默认使用线上接口，你可以通过以下步骤完成本地接口环境搭建：
+
+  > 1. 获取基于 `Java 、SpringBoot` 开发的后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git) 源码 ;
+  > 2. 根据后端工程说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动; 
+  > 3. 替换 [vite.config.ts](vite.config.ts) 的代理目标地址 `vapi.youlai.tech` 为本地的 `localhost:8989`
+
+
+
+## 项目文档
+
+- [基于 Vue3 + Vite4 + TypeScript + Element-Plus 从0到1搭建后台管理系统](https://blog.csdn.net/u013737132/article/details/130191394)
+
+- [ESLint+Prettier+Stylelint+EditorConfig 约束和统一前端代码规范](https://blog.csdn.net/u013737132/article/details/130190788)
+- [Husky + Lint-staged + Commitlint + Commitizen + cz-git 配置 Git 提交规范](https://blog.csdn.net/u013737132/article/details/130191363)
 
-1. npm install
-2. npm run dev
-3. 浏览器访问 http://localhost:3000
 
 
-### 项目部署
- 
--  本地打包
 
-    ```
-    npm run build:prod
-    ```
-    生成的静态文件位于项目根目录 dist 文件夹下
+## 提交规范
 
-- nginx.cofig 配置
+执行 `pnpm run commit` 唤起 git commit 交互，根据提示完成信息的输入和选择。
 
-    ```
-    server {
-        listen     80;
-        server_name  localhost;
+![](https://foruda.gitee.com/images/1687755823165218215/c1705416_716974.png)
 
-        location / {
-            root /usr/share/nginx/html/web;
-            index index.html index.htm;
-        }
 
-        # 代理转发请求至网关，prod-api标识解决跨域问题
-        location /prod-api/ {
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_pass http://www.youlai.tech:9999/;
-        }
-    }
 
-    ```
+## 交流群🚀
 
-## 联系信息
+> 关注「有来技术」公众号，获取交流群二维码。
+>
+> 如果交流群的二维码过期，加我微信，备注「前端」、「后端」或「全栈」即可。
+>
+> 为了避免营销广告人群混入，此举无奈，望理解！
 
-> 欢迎添加开发者微信，备注「有来」进群
 
+| 公众号                                                       | 交流群                                                       |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| <img src="https://foruda.gitee.com/images/1687689212187063809/3c69eaee_716974.png" height="180px"/> | <img src="https://foruda.gitee.com/images/1687689212139273561/6a65ef69_716974.png" height="180px"/> |
 
-| ![郝先瑞](https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg) |![张川](https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg) |
-| ---- |  ---- |
\ No newline at end of file
diff --git a/commitlint.config.cjs b/commitlint.config.cjs
new file mode 100644
index 00000000..c07a6318
--- /dev/null
+++ b/commitlint.config.cjs
@@ -0,0 +1,93 @@
+module.exports = {
+  // 继承的规则
+  extends: ["@commitlint/config-conventional"],
+  // 自定义规则
+  rules: {
+    // @see https://commitlint.js.org/#/reference-rules
+
+    // 提交类型枚举，git提交type必须是以下类型
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat", // 新增功能
+        "fix", // 修复缺陷
+        "docs", // 文档变更
+        "style", // 代码格式（不影响功能，例如空格、分号等格式修正）
+        "refactor", // 代码重构（不包括 bug 修复、功能新增）
+        "perf", // 性能优化
+        "test", // 添加疏漏测试或已有测试改动
+        "build", // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
+        "ci", // 修改 CI 配置、脚本
+        "revert", // 回滚 commit
+        "chore", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
+      ],
+    ],
+    "subject-case": [0], // subject大小写不做校验
+  },
+
+  prompt: {
+    messages: {
+      type: "选择你要提交的类型 :",
+      scope: "选择一个提交范围（可选）:",
+      customScope: "请输入自定义的提交范围 :",
+      subject: "填写简短精炼的变更描述 :\n",
+      body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
+      breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
+      footerPrefixesSelect: "选择关联issue前缀（可选）:",
+      customFooterPrefix: "输入自定义issue前缀 :",
+      footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
+      generatingByAI: "正在通过 AI 生成你的提交简短描述...",
+      generatedSelectByAI: "选择一个 AI 生成的简短描述:",
+      confirmCommit: "是否提交或修改commit ?",
+    },
+    // prettier-ignore
+    types: [
+      { value: "feat",     name: "特性:     ✨  新增功能", emoji: ":sparkles:" },
+      { value: "fix",      name: "修复:     🐛  修复缺陷", emoji: ":bug:" },
+      { value: "docs",     name: "文档:     📝  文档变更", emoji: ":memo:" },
+      { value: "style",    name: "格式:     🌈  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: ":lipstick:" },
+      { value: "refactor", name: "重构:     🔄  代码重构（不包括 bug 修复、功能新增）", emoji: ":recycle:" },
+      { value: "perf",     name: "性能:     🚀  性能优化", emoji: ":zap:" },
+      { value: "test",     name: "测试:     🧪  添加疏漏测试或已有测试改动", emoji: ":white_check_mark:"},
+      { value: "build",    name: "构建:     📦️  构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）", emoji: ":package:"},
+      { value: "ci",       name: "集成:     ⚙️  修改 CI 配置、脚本",  emoji: ":ferris_wheel:"},
+      { value: "revert",   name: "回退:     ↩️  回滚 commit",emoji: ":rewind:"},
+      { value: "chore",    name: "其他:     🛠️  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:"},
+    ],
+    useEmoji: true,
+    emojiAlign: "center",
+    useAI: false,
+    aiNumber: 1,
+    themeColorCode: "",
+    scopes: [],
+    allowCustomScopes: true,
+    allowEmptyScopes: true,
+    customScopesAlign: "bottom",
+    customScopesAlias: "custom",
+    emptyScopesAlias: "empty",
+    upperCaseSubject: false,
+    markBreakingChangeMode: false,
+    allowBreakingChanges: ["feat", "fix"],
+    breaklineNumber: 100,
+    breaklineChar: "|",
+    skipQuestions: [],
+    issuePrefixes: [
+      { value: "closed", name: "closed:   ISSUES has been processed" },
+    ],
+    customIssuePrefixAlign: "top",
+    emptyIssuePrefixAlias: "skip",
+    customIssuePrefixAlias: "custom",
+    allowCustomIssuePrefix: true,
+    allowEmptyIssuePrefix: true,
+    confirmColorize: true,
+    maxHeaderLength: Infinity,
+    maxSubjectLength: Infinity,
+    minSubjectLength: 0,
+    scopeOverrides: undefined,
+    defaultBody: "",
+    defaultIssues: "",
+    defaultScope: "",
+    defaultSubject: "",
+  },
+};
diff --git a/index.html b/index.html
index 753e4046..94f5272f 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="vue-element-admin的vue3版本" />
+    <meta name="keywords" content="vue-element-admin,vue3-element-admin" />
     <title>vue3-element-admin</title>
   </head>
+
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
diff --git a/licenses/vue-element-admin/LICENSE b/licenses/vue-element-admin/LICENSE
new file mode 100644
index 00000000..3fce3848
--- /dev/null
+++ b/licenses/vue-element-admin/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017-present PanJiaChen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/licenses/vue3-element-admin/LICENSE b/licenses/vue3-element-admin/LICENSE
new file mode 100644
index 00000000..9825cba0
--- /dev/null
+++ b/licenses/vue3-element-admin/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present 有来开源组织
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/package.json b/package.json
index 851e3328..2aab06c5 100644
--- a/package.json
+++ b/package.json
@@ -1,39 +1,112 @@
 {
   "name": "vue3-element-admin",
-  "version": "0.0.0",
+  "private": true,
+  "version": "2.4.1",
+  "type": "module",
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "dev": "vite serve --mode development",
-    "build:prod": "vue-tsc --noEmit && vite build --mode production",
-    "serve": "vite preview"
+    "build:prod": "vite build --mode production &&vue-tsc --noEmit",
+    "prepare": "husky install",
+    "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
+    "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix",
+    "lint:lint-staged": "lint-staged",
+    "commit": "git-cz"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git"
+    }
+  },
+  "lint-staged": {
+    "*.{js,ts}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{cjs,json}": [
+      "prettier --write"
+    ],
+    "*.{vue,html}": [
+      "eslint --fix",
+      "prettier --write",
+      "stylelint --fix"
+    ],
+    "*.{scss,css}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.md": [
+      "prettier --write"
+    ]
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^1.0.0",
-    "@wangeditor/editor": "^5.0.0",
-    "@wangeditor/editor-for-vue": "^5.1.10",
-    "axios": "^0.24.0",
-    "better-scroll": "^2.4.2",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vueuse/core": "^10.1.2",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "5.1.10",
+    "axios": "^1.4.0",
+    "codemirror": "^5.65.13",
     "echarts": "^5.2.2",
-    "element-plus": "^2.1.0",
+    "element-plus": "^2.3.7",
+    "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.0",
-    "pinia": "^2.0.12",
+    "pinia": "^2.0.33",
     "screenfull": "^6.0.0",
-    "sortablejs": "^1.14.0",
-    "vue": "^3.2.16",
-    "vue-i18n": "^9.1.9",
-    "vue-router": "^4.0.12"
+    "vue": "^3.3.4",
+    "vue-i18n": "9.2.2",
+    "vue-router": "^4.2.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@types/node": "^16.11.7",
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "@iconify-json/ep": "^1.1.10",
+    "@types/codemirror": "^5.60.7",
+    "@types/lodash": "^4.14.195",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
-    "@vitejs/plugin-vue": "^1.9.3",
+    "@types/xlsx": "^0.0.36",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
+    "autoprefixer": "^10.4.14",
+    "commitizen": "^4.3.0",
+    "cz-git": "^1.6.1",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.13.0",
     "fast-glob": "^3.2.11",
-    "sass": "^1.43.4",
-    "typescript": "^4.4.3",
-    "vite": "^2.6.4",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "postcss": "^8.4.23",
+    "postcss-html": "^1.5.0",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.8",
+    "sass": "^1.58.3",
+    "stylelint": "^15.7.0",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-recommended-scss": "11.0.0 ",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "typescript": "^5.0.4",
+    "unocss": "^0.51.13",
+    "unplugin-auto-import": "^0.15.3",
+    "unplugin-icons": "^0.16.1",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.4.2",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^0.3.0"
+    "vue-tsc": "^1.6.5 "
+  },
+  "repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
+  "author": "有来开源组织",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index fa232262..9fb00e08 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,44 +1,11 @@
+<script setup lang="ts">
+import { ElConfigProvider } from 'element-plus';
+import { useAppStore } from '@/store/modules/app';
+const appStore = useAppStore();
+</script>
+
 <template>
-  <el-config-provider :locale="locale">
+  <el-config-provider :locale="appStore.locale" :size="appStore.size">
     <router-view />
   </el-config-provider>
 </template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
-import { ElConfigProvider } from "element-plus";
-
-import { localStorage } from "@/utils/storage";
-import useStore from "@/store";
-
-// 导入 Element Plus 语言包
-import zhCn from "element-plus/es/locale/lang/zh-cn";
-import en from "element-plus/es/locale/lang/en";
-
-const { app } = useStore();
-
-const language = computed(() => app.language);
-
-const locale = ref();
-
-watch(
-  language,
-  (value) => {
-    if (value == "en") {
-      locale.value = en;
-    } else {
-      locale.value = zhCn;
-    }
-  },
-  {
-    // 初始化立即执行
-    immediate: true
-  }
-);
-
-onMounted(() => {
-  const style = localStorage.get("style");
-  document.documentElement.style.cssText = style as string;
-});
-</script>
-
diff --git a/src/api/auth/index.ts b/src/api/auth/index.ts
new file mode 100644
index 00000000..92663750
--- /dev/null
+++ b/src/api/auth/index.ts
@@ -0,0 +1,45 @@
+import request from "@/utils/request";
+import { AxiosPromise } from "axios";
+import { CaptchaResult, LoginData, LoginResult } from "./types";
+
+/**
+ * 登录API
+ *
+ * @param data {LoginData}
+ * @returns
+ */
+export function loginApi(data: LoginData): AxiosPromise<LoginResult> {
+  const formData = new FormData();
+  formData.append("username", data.username);
+  formData.append("password", data.password);
+  formData.append("verifyCodeKey", data.verifyCodeKey || "");
+  formData.append("verifyCode", data.verifyCode || "");
+  return request({
+    url: "/api/v1/auth/login",
+    method: "post",
+    data: formData,
+    headers: {
+      "Content-Type": "multipart/form-data",
+    },
+  });
+}
+
+/**
+ * 注销API
+ */
+export function logoutApi() {
+  return request({
+    url: "/api/v1/auth/logout",
+    method: "delete",
+  });
+}
+
+/**
+ * 获取验证码
+ */
+export function getCaptchaApi(): AxiosPromise<CaptchaResult> {
+  return request({
+    url: "/api/v1/auth/captcha",
+    method: "get",
+  });
+}
diff --git a/src/api/auth/types.ts b/src/api/auth/types.ts
new file mode 100644
index 00000000..858f1d9e
--- /dev/null
+++ b/src/api/auth/types.ts
@@ -0,0 +1,59 @@
+/**
+ * 登录请求参数
+ */
+export interface LoginData {
+  /**
+   * 用户名
+   */
+  username: string;
+  /**
+   * 密码
+   */
+  password: string;
+
+  /**
+   * 验证码缓存key
+   */
+  verifyCodeKey?: string;
+
+  /**
+   * 验证码
+   */
+  verifyCode?: string;
+}
+
+/**
+ * 登录响应
+ */
+export interface LoginResult {
+  /**
+   * 访问token
+   */
+  accessToken?: string;
+  /**
+   * 过期时间(单位：毫秒)
+   */
+  expires?: number;
+  /**
+   * 刷新token
+   */
+  refreshToken?: string;
+  /**
+   * token 类型
+   */
+  tokenType?: string;
+}
+
+/**
+ * 验证码响应
+ */
+export interface CaptchaResult {
+  /**
+   * 验证码缓存key
+   */
+  verifyCodeKey: string;
+  /**
+   * 验证码图片Base64字符串
+   */
+  verifyCodeBase64: string;
+}
diff --git a/src/api/dept/index.ts b/src/api/dept/index.ts
new file mode 100644
index 00000000..2ba1e202
--- /dev/null
+++ b/src/api/dept/index.ts
@@ -0,0 +1,77 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { DeptForm, DeptQuery, DeptVO } from './types';
+
+/**
+ * 部门树形表格
+ *
+ * @param queryParams
+ */
+export function listDepts(queryParams?: DeptQuery): AxiosPromise<DeptVO[]> {
+  return request({
+    url: '/api/v1/dept',
+    method: 'get',
+    params: queryParams
+  });
+}
+
+/**
+ * 部门下拉列表
+ */
+export function listDeptOptions(): AxiosPromise<[]> {
+  return request({
+    url: '/api/v1/dept/options',
+    method: 'get'
+  });
+}
+
+/**
+ * 获取部门详情
+ *
+ * @param id
+ */
+export function getDeptForm(id: number): AxiosPromise<DeptForm> {
+  return request({
+    url: '/api/v1/dept/' + id + '/form',
+    method: 'get'
+  });
+}
+
+/**
+ * 新增部门
+ *
+ * @param data
+ */
+export function addDept(data: DeptForm) {
+  return request({
+    url: '/api/v1/dept',
+    method: 'post',
+    data: data
+  });
+}
+
+/**
+ *  修改部门
+ *
+ * @param id
+ * @param data
+ */
+export function updateDept(id: number, data: DeptForm) {
+  return request({
+    url: '/api/v1/dept/' + id,
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 删除部门
+ *
+ * @param ids
+ */
+export function deleteDept(ids: string) {
+  return request({
+    url: '/api/v1/dept/' + ids,
+    method: 'delete'
+  });
+}
diff --git a/src/api/dept/types.ts b/src/api/dept/types.ts
new file mode 100644
index 00000000..408c39c4
--- /dev/null
+++ b/src/api/dept/types.ts
@@ -0,0 +1,71 @@
+/**
+ * 部门查询参数
+ */
+export interface DeptQuery {
+  keywords?: string;
+  status?: number;
+}
+
+/**
+ * 部门类型
+ */
+export interface DeptVO {
+  /**
+   * 子部门
+   */
+  children?: DeptVO[];
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+  /**
+   * 部门ID
+   */
+  id?: number;
+  /**
+   * 部门名称
+   */
+  name?: string;
+  /**
+   * 父部门ID
+   */
+  parentId?: number;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态(1:启用；0:禁用)
+   */
+  status?: number;
+  /**
+   * 修改时间
+   */
+  updateTime?: Date;
+}
+
+/**
+ * 部门表单类型
+ */
+export interface DeptForm {
+  /**
+   * 部门ID(新增不填)
+   */
+  id?: number;
+  /**
+   * 部门名称
+   */
+  name?: string;
+  /**
+   * 父部门ID
+   */
+  parentId: number;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态(1:启用；0：禁用)
+   */
+  status?: number;
+}
diff --git a/src/api/dict/index.ts b/src/api/dict/index.ts
new file mode 100644
index 00000000..635297eb
--- /dev/null
+++ b/src/api/dict/index.ts
@@ -0,0 +1,150 @@
+import request from "@/utils/request";
+import { AxiosPromise } from "axios";
+import {
+  DictTypeQuery,
+  DictTypePageResult,
+  DictTypeForm,
+  DictQuery,
+  DictForm,
+  DictPageResult,
+} from "./types";
+
+/**
+ * 字典类型分页列表
+ *
+ * @param queryParams
+ */
+export function getDictTypePage(
+  queryParams: DictTypeQuery
+): AxiosPromise<DictTypePageResult> {
+  return request({
+    url: "/api/v1/dict/types/page",
+    method: "get",
+    params: queryParams,
+  });
+}
+
+/**
+ * 字典类型表单数据
+ *
+ * @param id
+ */
+export function getDictTypeForm(id: number): AxiosPromise<DictTypeForm> {
+  return request({
+    url: "/api/v1/dict/types/" + id + "/form",
+    method: "get",
+  });
+}
+
+/**
+ * 新增字典类型
+ *
+ * @param data
+ */
+export function addDictType(data: DictTypeForm) {
+  return request({
+    url: "/api/v1/dict/types",
+    method: "post",
+    data: data,
+  });
+}
+
+/**
+ * 修改字典类型
+ *
+ * @param id
+ * @param data
+ */
+export function updateDictType(id: number, data: DictTypeForm) {
+  return request({
+    url: "/api/v1/dict/types/" + id,
+    method: "put",
+    data: data,
+  });
+}
+
+/**
+ * 删除字典类型
+ */
+export function deleteDictTypes(ids: string) {
+  return request({
+    url: "/api/v1/dict/types/" + ids,
+    method: "delete",
+  });
+}
+
+/**
+ * 获取字典类型的数据项
+ *
+ * @param typeCode 字典类型编码
+ */
+export function getDictOptions(typeCode: string): AxiosPromise<OptionType[]> {
+  return request({
+    url: "/api/v1/dict/" + typeCode + "/options",
+    method: "get",
+  });
+}
+
+/**
+ * 字典分页列表
+ */
+export function getDictPage(
+  queryParams: DictQuery
+): AxiosPromise<DictPageResult> {
+  return request({
+    url: "/api/v1/dict/page",
+    method: "get",
+    params: queryParams,
+  });
+}
+
+/**
+ * 获取字典表单数据
+ *
+ * @param id
+ */
+export function getDictFormData(id: number): AxiosPromise<DictForm> {
+  return request({
+    url: "/api/v1/dict/" + id + "/form",
+    method: "get",
+  });
+}
+
+/**
+ * 新增字典
+ *
+ * @param data
+ */
+export function addDict(data: DictForm) {
+  return request({
+    url: "/api/v1/dict",
+    method: "post",
+    data: data,
+  });
+}
+
+/**
+ * 修改字典项
+ *
+ * @param id
+ * @param data
+ */
+export function updateDict(id: number, data: DictForm) {
+  return request({
+    url: "/api/v1/dict/" + id,
+    method: "put",
+    data: data,
+  });
+}
+
+/**
+ * 删除字典
+ *
+ * @param ids 字典项ID，多个以英文逗号(,)分割
+ */
+export function deleteDict(ids: string) {
+  return request({
+    url: "/api/v1/dict/" + ids,
+    method: "delete",
+  });
+}
diff --git a/src/api/dict/types.ts b/src/api/dict/types.ts
new file mode 100644
index 00000000..315da6d7
--- /dev/null
+++ b/src/api/dict/types.ts
@@ -0,0 +1,142 @@
+/**
+ * 字典类型查询参数
+ */
+export interface DictTypeQuery extends PageQuery {
+  /**
+   * 关键字(字典类型名称/编码)
+   */
+  keywords?: string;
+}
+
+/**
+ * 字典类型分页对象
+ */
+export interface DictTypePageVO {
+  /**
+   * 字典类型ID
+   */
+  id: number;
+  /**
+   * 类型编码
+   */
+  code: string;
+  /**
+   * 类型名称
+   */
+  name: string;
+  /**
+   * 状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 备注
+   */
+  remark?: string;
+}
+
+/**
+ * 字典分页项类型声明
+ */
+export type DictTypePageResult = PageResult<DictTypePageVO[]>;
+
+/**
+ * 字典表单类型声明
+ */
+export interface DictTypeForm {
+  /**
+   * 字典类型ID
+   */
+  id?: number;
+  /**
+   * 类型名称
+   */
+  name?: string;
+  /**
+   * 类型编码
+   */
+  code?: string;
+  /**
+   * 类型状态：1:启用;0:禁用
+   */
+  status: number;
+  /**
+   * 备注
+   */
+  remark?: string;
+}
+
+/**
+ * 字典查询参数
+ */
+export interface DictQuery extends PageQuery {
+  /**
+   * 字典项名称
+   */
+  name?: string;
+  /**
+   * 字典类型编码
+   */
+  typeCode?: string;
+}
+
+/**
+ * 字典分页对象
+ */
+export interface DictPageVO {
+  /**
+   * 字典ID
+   */
+  id?: number;
+  /**
+   * 字典名称
+   */
+  name?: string;
+  /**
+   * 状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 字典值
+   */
+  value?: string;
+}
+
+/**
+ * 字典分页
+ */
+export type DictPageResult = PageResult<DictPageVO[]>;
+
+/**
+ * 字典表单
+ */
+export interface DictForm {
+  /**
+   * 字典ID
+   */
+  id?: number;
+  /**
+   * 字典名称
+   */
+  name?: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 类型编码
+   */
+  typeCode?: string;
+  /**
+   * 值
+   */
+  value?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+}
diff --git a/src/api/file/index.ts b/src/api/file/index.ts
new file mode 100644
index 00000000..350ce7df
--- /dev/null
+++ b/src/api/file/index.ts
@@ -0,0 +1,34 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { FileInfo } from './types';
+
+/**
+ * 上传文件
+ *
+ * @param file
+ */
+export function uploadFileApi(file: File): AxiosPromise<FileInfo> {
+  const formData = new FormData();
+  formData.append('file', file);
+  return request({
+    url: '/api/v1/files',
+    method: 'post',
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+}
+
+/**
+ * 删除文件
+ *
+ * @param filePath 文件完整路径
+ */
+export function deleteFileApi(filePath?: string) {
+  return request({
+    url: '/api/v1/files',
+    method: 'delete',
+    params: { filePath: filePath }
+  });
+}
diff --git a/src/api/file/types.ts b/src/api/file/types.ts
new file mode 100644
index 00000000..22b2be55
--- /dev/null
+++ b/src/api/file/types.ts
@@ -0,0 +1,7 @@
+/**
+ * 文件API类型声明
+ */
+export interface FileInfo {
+  name: string;
+  url: string;
+}
diff --git a/src/api/login/index.ts b/src/api/login/index.ts
deleted file mode 100644
index 77e48567..00000000
--- a/src/api/login/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Captcha, LoginFormData, LoginResponseData } from "@/types";
-import request from "@/utils/request";
-import { AxiosPromise } from "axios";
-
-/**
- * 登录
- * @param data
- */
-export function login(data: LoginFormData): AxiosPromise<LoginResponseData> {
-    return request({
-        url: '/youlai-auth/oauth/token',
-        method: 'post',
-        params: data,
-        headers: {
-            'Authorization': 'Basic bWFsbC1hZG1pbi13ZWI6MTIzNDU2' // 客户端信息Base64明文：mall-admin-web:123456
-        }
-    })
-}
-
-/**
- * 注销
- */
-export function logout() {
-    return request({
-        url: '/youlai-auth/oauth/logout',
-        method: 'delete'
-    })
-}
-
-/**
- * 获取图片验证码
- */
-export function getCaptcha(): AxiosPromise<Captcha> {
-    return request({
-        url: '/captcha?t=' + (new Date()).getTime().toString(),
-        method: 'get'
-    })
-}
\ No newline at end of file
diff --git a/src/api/menu/index.ts b/src/api/menu/index.ts
new file mode 100644
index 00000000..78761fcd
--- /dev/null
+++ b/src/api/menu/index.ts
@@ -0,0 +1,87 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { MenuQuery, MenuVO, MenuForm } from './types';
+
+/**
+ * 获取路由列表
+ */
+export function listRoutes() {
+  return request({
+    url: '/api/v1/menus/routes',
+    method: 'get'
+  });
+}
+
+/**
+ * 获取菜单树形列表
+ *
+ * @param queryParams
+ */
+export function listMenus(queryParams: MenuQuery): AxiosPromise<MenuVO[]> {
+  return request({
+    url: '/api/v1/menus',
+    method: 'get',
+    params: queryParams
+  });
+}
+
+/**
+ * 获取菜单下拉树形列表
+ */
+export function listMenuOptions(): AxiosPromise<OptionType[]> {
+  return request({
+    url: '/api/v1/menus/options',
+    method: 'get'
+  });
+}
+
+/**
+ * 获取菜单表单数据
+ *
+ * @param id
+ */
+export function getMenuForm(id: number): AxiosPromise<MenuForm> {
+  return request({
+    url: '/api/v1/menus/' + id + '/form',
+    method: 'get'
+  });
+}
+
+/**
+ * 添加菜单
+ *
+ * @param data
+ */
+export function addMenu(data: MenuForm) {
+  return request({
+    url: '/api/v1/menus',
+    method: 'post',
+    data: data
+  });
+}
+
+/**
+ * 修改菜单
+ *
+ * @param id
+ * @param data
+ */
+export function updateMenu(id: string, data: MenuForm) {
+  return request({
+    url: '/api/v1/menus/' + id,
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 删除菜单
+ *
+ * @param id 菜单ID
+ */
+export function deleteMenu(id: number) {
+  return request({
+    url: '/api/v1/menus/' + id,
+    method: 'delete'
+  });
+}
diff --git a/src/api/menu/types.ts b/src/api/menu/types.ts
new file mode 100644
index 00000000..7cbd05e3
--- /dev/null
+++ b/src/api/menu/types.ts
@@ -0,0 +1,115 @@
+import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
+
+/**
+ * 菜单查询参数类型
+ */
+export interface MenuQuery {
+  keywords?: string;
+}
+
+/**
+ * 菜单视图对象类型
+ */
+export interface MenuVO {
+  /**
+   * 子菜单
+   */
+  children?: MenuVO[];
+  /**
+   * 组件路径
+   */
+  component?: string;
+  /**
+   * ICON
+   */
+  icon?: string;
+  /**
+   * 菜单ID
+   */
+  id?: number;
+  /**
+   * 菜单名称
+   */
+  name?: string;
+  /**
+   * 父菜单ID
+   */
+  parentId?: number;
+  /**
+   * 按钮权限标识
+   */
+  perm?: string;
+  /**
+   * 跳转路径
+   */
+  redirect?: string;
+  /**
+   * 路由名称
+   */
+  routeName?: string;
+  /**
+   * 路由相对路径
+   */
+  routePath?: string;
+  /**
+   * 菜单排序(数字越小排名越靠前)
+   */
+  sort?: number;
+  /**
+   * 菜单类型
+   */
+  type?: MenuTypeEnum;
+  /**
+   * 菜单是否可见(1:显示;0:隐藏)
+   */
+  visible?: number;
+}
+
+/**
+ * 菜单表单对象类型
+ */
+export interface MenuForm {
+  /**
+   * 菜单ID
+   */
+  id?: string;
+  /**
+   * 父菜单ID
+   */
+  parentId?: number;
+  /**
+   * 菜单名称
+   */
+  name?: string;
+  /**
+   * 菜单是否可见(1:是;0:否;)
+   */
+  visible: number;
+  icon?: string;
+  /**
+   * 排序
+   */
+  sort: number;
+  /**
+   * 组件路径
+   */
+  component?: string;
+  /**
+   * 路由路径
+   */
+  path?: string;
+  /**
+   * 跳转路由路径
+   */
+  redirect?: string;
+
+  /**
+   * 菜单类型
+   */
+  type: MenuTypeEnum;
+
+  /**
+   * 权限标识
+   */
+  perm?: string;
+}
diff --git a/src/api/oms/order.ts b/src/api/oms/order.ts
deleted file mode 100644
index 3a9f53a6..00000000
--- a/src/api/oms/order.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { OrderPageResult, OrderQueryParam } from '@/types'
-import request from '@/utils/request'
-import {  AxiosPromise } from 'axios'
-
-/**
- * 获取订单分页列表
- *
- * @param queryParams
- */
-export function listOrderPages(queryParams: OrderQueryParam): AxiosPromise<OrderPageResult> {
-    return request({
-        url: '/mall-oms/api/v1/orders',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-
-/**
- * 获取订单详情
- *
- * @param orderId
- */
-export function getOrderDetail(orderId: number){
-    return request({
-        url: '/mall-oms/api/v1/orders/' + orderId,
-        method: 'get'
-    })
-}
\ No newline at end of file
diff --git a/src/api/pms/attribute.ts b/src/api/pms/attribute.ts
deleted file mode 100644
index e81db3dc..00000000
--- a/src/api/pms/attribute.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import request from '@/utils/request'
-
-/**
- * 获取商品属性列表
- *
- * @param params
- */
-export function listAttributes(params:object) {
-    return request({
-        url: '/mall-pms/api/v1/attributes',
-        method: 'get',
-        params: params
-    })
-}
-
-
-/**
- * 批量修改商品属性
- *
- * @param data
- */
-export function saveAttributeBatch(data:object) {
-    return request({
-        url: '/mall-pms/api/v1/attributes/batch',
-        method: 'post',
-        data: data
-    })
-}
-
-
diff --git a/src/api/pms/brand.ts b/src/api/pms/brand.ts
deleted file mode 100644
index 1123f846..00000000
--- a/src/api/pms/brand.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import { BrandFormData, BrandItem, BrandPageResult, BrandQueryParam } from '@/types'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-/**
- * 获取品牌分页列表
- *
- * @param queryParams
- */
-export function listBrandPages(queryParams: BrandQueryParam):AxiosPromise<BrandPageResult> {
-    return request({
-        url: '/mall-pms/api/v1/brands/page',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取品牌列表
- *
- * @param queryParams
- */
-export function listBrands(queryParams?: BrandQueryParam):AxiosPromise<BrandItem[]> {
-    return request({
-        url: '/mall-pms/api/v1/brands',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取品牌详情
- *
- * @param id
- */
-export function getBrandFormDetail(id: number):AxiosPromise<BrandFormData> {
-    return request({
-        url: '/mall-pms/api/v1/brands/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加品牌
- *
- * @param data
- */
-export function addBrand(data: BrandFormData) {
-    return request({
-        url: '/mall-pms/api/v1/brands',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改品牌
- *
- * @param id
- * @param data
- */
-export function updateBrand(id:number, data:BrandFormData) {
-    return request({
-        url: '/mall-pms/api/v1/brands/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 删除品牌
- *
- * @param ids
- */
-export function deleteBrands(ids: string) {
-    return request({
-        url: '/mall-pms/api/v1/brands/' + ids,
-        method: 'delete'
-    })
-}
\ No newline at end of file
diff --git a/src/api/pms/category.ts b/src/api/pms/category.ts
deleted file mode 100644
index 1a53322a..00000000
--- a/src/api/pms/category.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import request from "@/utils/request";
-
-/**
- * 获取商品分类列表
- *
- * @param queryParams
- */
-export function listCategories(queryParams:object){
-    return request({
-        url: '/mall-pms/api/v1/categories',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取商品分类级联器树形列表
- *
- * @param queryParams
- */
-export function listCascadeCategories(queryParams:object) {
-    return request({
-        url: '/mall-pms/api/v1/categories/cascade',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取商品分类详情
- *
- * @param id
- */
-export function getCategoryDetail(id:number){
-    return request({
-        url: '/mall-pms/api/v1/categories/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加商品分类
- *
- * @param data
- */
-export function addCategory(data:object){
-    return request({
-        url: '/mall-pms/api/v1/categories',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改商品分类
- *
- * @param id
- * @param data
- */
-export function updateCategory(id:number, data:object) {
-    return request({
-        url: '/mall-pms/api/v1/categories/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 删除商品分类
- *
- * @param ids
- */
-export function deleteCategories(ids:string) {
-    return request({
-        url: '/mall-pms/api/v1/categories/' + ids,
-        method: 'delete'
-    })
-}
-
-/**
- * 选择性修改商品分类
- *
- * @param id
- * @param data
- */
-export function updateCategoryPart(id:number, data:object) {
-    return request({
-        url: '/mall-pms/api/v1/categories/' + id,
-        method: 'patch',
-        data: data
-    })
-}
diff --git a/src/api/pms/goods.ts b/src/api/pms/goods.ts
deleted file mode 100644
index 16b1dd18..00000000
--- a/src/api/pms/goods.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { GoodsPageResult, GoodsQueryParam } from '@/types'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-/**
- * 获取商品分页列表
- *
- * @param queryParams
- */
-export function listGoodsPages(queryParams: GoodsQueryParam):AxiosPromise<GoodsPageResult> {
-    return request({
-        url: '/mall-pms/api/v1/goods/page',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取商品详情
- *
- * @param id
- */
-export function getGoodsFormDetail(id: number) {
-    return request({
-        url: '/mall-pms/api/v1/goods/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加商品
- *
- * @param data
- */
-export function addGoods(data: object) {
-    return request({
-        url: '/mall-pms/api/v1/goods',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改商品
- *
- * @param id
- * @param data
- */
-export function updateGoods(id: number, data: object) {
-    return request({
-        url: '/mall-pms/api/v1/goods/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 删除商品
- *
- * @param ids
- */
-export function deleteGoods(ids: string) {
-    return request({
-        url: '/mall-pms/api/v1/goods/' + ids,
-        method: 'delete'
-    })
-}
diff --git a/src/api/role/index.ts b/src/api/role/index.ts
new file mode 100644
index 00000000..e0171d61
--- /dev/null
+++ b/src/api/role/index.ts
@@ -0,0 +1,112 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { RoleQuery, RolePageResult, RoleForm } from './types';
+
+/**
+ * 获取角色分页数据
+ *
+ * @param queryParams
+ */
+export function getRolePage(
+  queryParams?: RoleQuery
+): AxiosPromise<RolePageResult> {
+  return request({
+    url: '/api/v1/roles/page',
+    method: 'get',
+    params: queryParams
+  });
+}
+
+/**
+ * 获取角色下拉数据
+ *
+ * @param queryParams
+ */
+export function listRoleOptions(
+  queryParams?: RoleQuery
+): AxiosPromise<OptionType[]> {
+  return request({
+    url: '/api/v1/roles/options',
+    method: 'get',
+    params: queryParams
+  });
+}
+
+/**
+ * 获取角色的菜单ID集合
+ *
+ * @param queryParams
+ */
+export function getRoleMenuIds(roleId: number): AxiosPromise<number[]> {
+  return request({
+    url: '/api/v1/roles/' + roleId + '/menuIds',
+    method: 'get'
+  });
+}
+
+/**
+ * 分配菜单权限给角色
+ *
+ * @param queryParams
+ */
+export function updateRoleMenus(
+  roleId: number,
+  data: number[]
+): AxiosPromise<any> {
+  return request({
+    url: '/api/v1/roles/' + roleId + '/menus',
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 获取角色详情
+ *
+ * @param id
+ */
+export function getRoleForm(id: number): AxiosPromise<RoleForm> {
+  return request({
+    url: '/api/v1/roles/' + id + '/form',
+    method: 'get'
+  });
+}
+
+/**
+ * 添加角色
+ *
+ * @param data
+ */
+export function addRole(data: RoleForm) {
+  return request({
+    url: '/api/v1/roles',
+    method: 'post',
+    data: data
+  });
+}
+
+/**
+ * 更新角色
+ *
+ * @param id
+ * @param data
+ */
+export function updateRole(id: number, data: RoleForm) {
+  return request({
+    url: '/api/v1/roles/' + id,
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 批量删除角色，多个以英文逗号(,)分割
+ *
+ * @param ids
+ */
+export function deleteRoles(ids: string) {
+  return request({
+    url: '/api/v1/roles/' + ids,
+    method: 'delete'
+  });
+}
diff --git a/src/api/role/types.ts b/src/api/role/types.ts
new file mode 100644
index 00000000..2d259c7f
--- /dev/null
+++ b/src/api/role/types.ts
@@ -0,0 +1,78 @@
+/**
+ * 角色查询参数
+ */
+export interface RoleQuery extends PageQuery {
+  keywords?: string;
+}
+
+/**
+ * 角色分页对象
+ */
+export interface RolePageVO {
+  /**
+   * 角色编码
+   */
+  code?: string;
+
+  /**
+   * 角色ID
+   */
+  id?: number;
+  /**
+   * 角色名称
+   */
+  name?: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 角色状态
+   */
+  status?: number;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+  /**
+   * 修改时间
+   */
+  updateTime?: Date;
+}
+
+/**
+ * 角色分页
+ */
+export type RolePageResult = PageResult<RolePageVO[]>;
+
+/**
+ * 角色表单对象
+ */
+export interface RoleForm {
+  /**
+   * 角色ID
+   */
+  id?: number;
+
+  /**
+   * 角色编码
+   */
+  code: string;
+  /**
+   * 数据权限
+   */
+  dataScope?: number;
+
+  /**
+   * 角色名称
+   */
+  name: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 角色状态(1-正常；0-停用)
+   */
+  status?: number;
+}
diff --git a/src/api/sms/advert.ts b/src/api/sms/advert.ts
deleted file mode 100644
index d284c9f7..00000000
--- a/src/api/sms/advert.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { AdvertFormData, AdvertPageResult, AdvertQueryParam } from '@/types'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-/**
- * 获取广告分页列表
- *
- * @param queryParams
- */
-export function listAdvertPages(queryParams: AdvertQueryParam):AxiosPromise<AdvertPageResult> {
-    return request({
-        url: '/mall-sms/api/v1/adverts',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取广告详情
- *
- * @param id
- */
-export function getAdvertFormDetail(id:number):AxiosPromise<AdvertFormData> {
-    return request({
-        url: '/mall-sms/api/v1/adverts/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加广告
- *
- * @param data
- */
-export function addAdvert(data: AdvertFormData) {
-    return request({
-        url: '/mall-sms/api/v1/adverts',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改广告
- *
- * @param id
- * @param data
- */
-export function updateAdvert(id: number, data: AdvertFormData) {
-    return request({
-        url: '/mall-sms/api/v1/adverts/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 删除广告
- *
- * @param ids
- */
-export function deleteAdverts(ids:string) {
-    return request({
-        url: '/mall-sms/api/v1/adverts/' + ids,
-        method: 'delete'
-    })
-}
diff --git a/src/api/system/client.ts b/src/api/system/client.ts
deleted file mode 100644
index e1266fb1..00000000
--- a/src/api/system/client.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ClientFormData, ClientPageResult, ClientQueryParam } from '@/types/api/system/client'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-export function listClientPages(queryParams:ClientQueryParam):AxiosPromise<ClientPageResult> {
-    return request({
-        url: '/youlai-admin/api/v1/oauth-clients',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-export function getClientFormDetial(id:number):AxiosPromise<ClientFormData> {
-    return request({
-        url: '/youlai-admin/api/v1/oauth-clients/' + id,
-        method: 'get'
-    })
-}
-
-export function addClient(data:ClientFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/oauth-clients',
-        method: 'post',
-        data: data
-    })
-}
-
-export function updateClient(id:string, data:ClientFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/oauth-clients/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-export function deleteClients(ids:string) {
-    return request({
-        url: '/youlai-admin/api/v1/oauth-clients/'+ids,
-        method: 'delete'
-    })
-}
-
-export function updateClientPart(id:number, data:object) {
-    return request({
-        url: '/youlai-admin/api/v1/oauth-clients/' + id,
-        method: 'patch',
-        data: data
-    })
-}
diff --git a/src/api/system/dept.ts b/src/api/system/dept.ts
deleted file mode 100644
index f68f240d..00000000
--- a/src/api/system/dept.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { DeptFormData, DeptItem, DeptQueryParam, Option } from '@/types'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-/**
- * 部门树形表格
- *
- * @param queryParams
- */
-export function listTableDepartments(queryParams?: DeptQueryParam): AxiosPromise<DeptItem[]> {
-    return request({
-        url: '/youlai-admin/api/v1/depts/table',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 部门下拉列表
- */
-export function listSelectDepartments(): AxiosPromise<Option[]> {
-    return request({
-        url: '/youlai-admin/api/v1/depts/select',
-        method: 'get'
-    })
-}
-
-/**
- * 获取部门详情
- *
- * @param id
- */
-export function getDeptFormDetail(id: number): AxiosPromise<DeptFormData> {
-    return request({
-        url: '/youlai-admin/api/v1/depts/' + id,
-        method: 'get'
-    })
-}
-
-
-/**
- * 新增部门
- *
- * @param data
- */
-export function addDept(data: DeptFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/depts',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- *  修改部门
- *
- * @param id
- * @param data
- */
-export function updateDept(id: number, data: DeptFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/depts/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 删除部门
- *
- * @param ids
- */
-export function deleteDept(ids: string) {
-    return request({
-        url: '/youlai-admin/api/v1/depts/' + ids,
-        method: 'delete',
-    })
-}
-
diff --git a/src/api/system/dict.ts b/src/api/system/dict.ts
deleted file mode 100644
index bf4b9320..00000000
--- a/src/api/system/dict.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { DictFormData, DictItemFormData, DictItemPageResult, DictItemQueryParam, DictPageResult, DictQueryParam, Option } from "@/types";
-import request from "@/utils/request";
-import { AxiosPromise } from "axios";
-
-/**
- * 获取字典分页列表
- *
- * @param queryParams
- */
-export function listDictPages(queryParams: DictQueryParam): AxiosPromise<DictPageResult> {
-    return request({
-        url: '/youlai-admin/api/v2/dict/page',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取字典详情
- *
- * @param id
- */
-export function getDictFormDetail(id: number): AxiosPromise<DictFormData> {
-    return request({
-        url: '/youlai-admin/api/v2/dict/' + id,
-        method: 'get'
-    })
-}
-
-
-/**
- * 新增字典
- *
- * @param data
- */
-export function addDict(data: DictFormData) {
-    return request({
-        url: '/youlai-admin/api/v2/dict',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改字典
- *
- * @param id
- * @param data
- */
-export function updateDict(id: number, data: DictFormData) {
-    return request({
-        url: '/youlai-admin/api/v2/dict/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 批量删除字典
- * @param ids 字典ID，多个以英文逗号(,)分割
- */
-export function deleteDict(ids: string) {
-    return request({
-        url: '/youlai-admin/api/v2/dict/' + ids,
-        method: 'delete',
-    })
-}
-
-/**
- * 获取字典项分页列表
- *
- * @param queryParams
- */
-export function listDictItemPages(queryParams: DictItemQueryParam): AxiosPromise<DictItemPageResult> {
-    return request({
-        url: '/youlai-admin/api/v2/dict/items/page',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-
-/**
- * 根据字典编码获取字典项列表
- *
- * @param dictCode
- */
-export function listDictsByCode(dictCode: string): AxiosPromise<Option[]> {
-    return request({
-        url: '/youlai-admin/api/v2/dict/items',
-        method: 'get',
-        params: { dictCode: dictCode }
-    })
-}
-
-/**
- * 获取字典项详情
- *
- * @param id
- */
-export function getDictItemDetail(id: number): AxiosPromise<DictItemFormData> {
-    return request({
-        url: '/youlai-admin/api/v2/dict/items/' + id,
-        method: 'get'
-    })
-}
-
-
-
-/**
- * 新增字典项
- *
- * @param data
- */
-export function addDictItem(data: DictFormData) {
-    return request({
-        url: '/youlai-admin/api/v2/dict/items',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改字典项
- *
- * @param id
- * @param data
- */
-export function updateDictItem(id: number, data: DictFormData) {
-    return request({
-        url: '/youlai-admin/api/v2/dict/items/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 批量删除字典项
- * @param ids 字典项ID，多个以英文逗号(,)分割
- */
-export function deleteDictItem(ids: string) {
-    return request({
-        url: '/youlai-admin/api/v2/dict/items/' + ids,
-        method: 'delete',
-    })
-}
diff --git a/src/api/system/file.ts b/src/api/system/file.ts
deleted file mode 100644
index eae58f3c..00000000
--- a/src/api/system/file.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import request from '@/utils/request'
-
-/**
- * 上传文件
- *
- * @param file
- */
-export function uploadFile(file: File) {
-    let formData = new FormData()
-    formData.append('file', file)
-    return request(
-        {
-            url: '/youlai-admin/api/v1/files',
-            method: 'post',
-            data: formData,
-            headers: {
-                'Content-Type': 'multipart/form-data'
-            },
-        })
-}
-
-/**
- * 删除文件
- *
- * @param path
- */
-export function deleteFile(path?: string) {
-    return request({
-        url: '/youlai-admin/api/v1/files',
-        method: 'delete',
-        params: {path: path}
-    })
-}
diff --git a/src/api/system/menu.ts b/src/api/system/menu.ts
deleted file mode 100644
index c6932310..00000000
--- a/src/api/system/menu.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { MenuFormData, MenuItem, MenuQueryParam, Option } from '@/types'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-/**
- * 获取路由列表
- */
-export function listRoutes() {
-    return request({
-        url: '/youlai-admin/api/v2/menus/route',
-        method: 'get'
-    })
-}
-
-/**
- * 获取菜单表格列表
- *
- * @param queryParams
- */
-export function listTableMenus(queryParams: MenuQueryParam): AxiosPromise<MenuItem[]> {
-    return request({
-        url: '/youlai-admin/api/v1/menus/table',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取菜单下拉列表
- */
-export function listSelectMenus(): AxiosPromise<Option[]> {
-    return request({
-        url: '/youlai-admin/api/v1/menus/select',
-        method: 'get'
-    })
-}
-
-
-/**
- * 获取菜单详情
- * @param id
- */
-export function getMenuFormDetail(id: number): AxiosPromise<MenuFormData> {
-    return request({
-        url: '/youlai-admin/api/v1/menus/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加菜单
- *
- * @param data
- */
-export function addMenu(data: MenuFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/menus',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改菜单
- *
- * @param id
- * @param data
- */
-export function updateMenu(id: number, data: MenuFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/menus/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 批量删除菜单
- *
- * @param ids 菜单ID，多个以英文逗号(,)分割
- */
-export function deleteMenus(ids: string) {
-    return request({
-        url: '/youlai-admin/api/v1/menus/' + ids,
-        method: 'delete'
-    })
-}
diff --git a/src/api/system/perm.ts b/src/api/system/perm.ts
deleted file mode 100644
index 3b7a9ea3..00000000
--- a/src/api/system/perm.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { PermFormData, PermItem, PermPageResult, PermQueryParam } from '@/types'
-import request from '@/utils/request'
-import {  AxiosPromise } from 'axios'
-
-/**
- * 获取权限分页列表
- *
- * @param queryParams
- */
-export function listPermPages(queryParams: PermQueryParam): AxiosPromise<PermPageResult> {
-    return request({
-        url: '/youlai-admin/api/v1/permissions/page',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取权限列表
- *
- * @param queryParams
- */
-export function listPerms(queryParams: PermQueryParam): AxiosPromise<PermItem[]> {
-    return request({
-        url: '/youlai-admin/api/v1/permissions',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取权限详情
- *
- * @param id
- */
-export function getPermFormDetail(id: number): AxiosPromise<PermFormData> {
-    return request({
-        url: '/youlai-admin/api/v1/permissions/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加权限
- *
- * @param data
- */
-export function addPerm(data: PermFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/permissions',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 更新权限
- *
- * @param id
- * @param data
- */
-export function updatePerm(id: number, data: PermFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/permissions/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 批量删除权限，多个以英文逗号(,)分割
- *
- * @param ids
- */
-export function deletePerms(ids: string) {
-    return request({
-        url: '/youlai-admin/api/v1/permissions/' + ids,
-        method: 'delete'
-    })
-}
-
diff --git a/src/api/system/role.ts b/src/api/system/role.ts
deleted file mode 100644
index cece5f3c..00000000
--- a/src/api/system/role.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import { RoleFormData, RoleItem, RolePageResult, RoleQueryParam } from '@/types'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-/**
- * 获取角色分页列表
- *
- * @param queryParams
- */
-export function listRolePages(queryParams?: RoleQueryParam):AxiosPromise<RolePageResult> {
-    return request({
-        url: '/youlai-admin/api/v1/roles/page',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取角色列表
- *
- * @param queryParams
- */
-export function listRoles(queryParams?: RoleQueryParam):AxiosPromise<RoleItem[]> {
-    return request({
-        url: '/youlai-admin/api/v1/roles',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取角色详情
- *
- * @param id
- */
-export function getRoleFormDetail(id: number):AxiosPromise<RoleFormData> {
-    return request({
-        url: '/youlai-admin/api/v1/roles/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加角色
- *
- * @param data
- */
-export function addRole(data: RoleFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/roles',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 更新角色
- *
- * @param id
- * @param data
- */
-export function updateRole(id: number, data: RoleFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/roles/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 批量删除角色，多个以英文逗号(,)分割
- *
- * @param ids
- */
-export function deleteRoles(ids: string) {
-    return request({
-        url: '/youlai-admin/api/v1/roles/' + ids,
-        method: 'delete'
-    })
-}
-
-
-/**
- * 获取角色的菜单列表
- *
- * @param roleId
- */
-export function listRoleMenuIds(roleId: number):AxiosPromise<number[]> {
-    return request({
-        url: '/youlai-admin/api/v1/roles/' + roleId + '/menu_ids',
-        method: 'get',
-    })
-}
-
-/**
- * 修改角色的菜单
- *
- * @param roleId
- * @param menuIds
- */
-export function updateRoleMenu(roleId: number, menuIds: Array<Number>) {
-    return request({
-        url: '/youlai-admin/api/v1/roles/' + roleId + '/menus',
-        method: 'put',
-        data: {menuIds: menuIds}
-    })
-}
-
-
-/**
- * 获取角色的权限列表
- *
- * @param roleId
- */
-export function listRolePerms(roleId: number, menuId: number) {
-    return request({
-        url: '/youlai-admin/api/v1/roles/' + roleId + '/permissions',
-        method: 'get',
-        params: {menuId: menuId}
-    })
-}
-
-/**
- * 保存角色权限
- *
- * @param menuId 菜单ID，归类权限
- * @param roleId
- * @param permIds
- */
-export function saveRolePerms(roleId: number, menuId: number, permIds: Array<number>) {
-    return request({
-        url: '/youlai-admin/api/v1/roles/' + roleId + '/permissions',
-        method: 'put',
-        data: {menuId: menuId, permIds: permIds}
-    })
-}
diff --git a/src/api/system/user.ts b/src/api/system/user.ts
deleted file mode 100644
index 973d788c..00000000
--- a/src/api/system/user.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import request from "@/utils/request";
-import { AxiosPromise } from "axios";
-import { UserFormData, UserImportFormData, UserInfo, UserPageResult, UserQueryParam } from "@/types";
-
-/**
- * 登录成功后获取用户信息（昵称、头像、权限集合和角色集合）
- */
-export function getUserInfo(): AxiosPromise<UserInfo> {
-    return request({
-        url: '/youlai-admin/api/v1/users/me',
-        method: 'get'
-    })
-}
-
-/**
- * 获取用户分页列表
- *
- * @param queryParams
- */
-export function listUsersPage(queryParams: UserQueryParam): AxiosPromise<UserPageResult> {
-    return request({
-        url: '/youlai-admin/api/v1/users/page',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取用户表单详情
- *
- * @param userId
- */
-export function getUserDetail(userId: number): AxiosPromise<UserFormData> {
-    return request({
-        url: '/youlai-admin/api/v1/users/' + userId,
-        method: 'get'
-    })
-}
-
-/**
- * 添加用户
- *
- * @param data
- */
-export function addUser(data: any) {
-    return request({
-        url: '/youlai-admin/api/v1/users',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 修改用户
- *
- * @param id
- * @param data
- */
-export function updateUser(id: number, data: UserFormData) {
-    return request({
-        url: '/youlai-admin/api/v1/users/' + id,
-        method: 'put',
-        data: data
-    })
-}
-
-/**
- * 选择性修改用户
- *
- * @param id
- * @param data
- */
-export function updateUserPart(id: number, data: any) {
-    return request({
-        url: '/youlai-admin/api/v1/users/' + id,
-        method: 'patch',
-        data: data
-    })
-}
-
-/**
- * 删除用户
- * 
- * @param ids
- */
-export function deleteUsers(ids: string) {
-    return request({
-        url: '/youlai-admin/api/v1/users/' + ids,
-        method: 'delete',
-    })
-}
-
-/**
- * 下载用户导入模板
- * 
- * @returns 
- */
-export function downloadTemplate() {
-    return request({
-        url: '/youlai-admin/api/v1/users/template',
-        method: 'get',
-        responseType: "arraybuffer"
-    })
-}
-
-/**
- * 导出用户
- * 
- * @param queryParams 
- * @returns 
- */
-export function exportUser(queryParams: UserQueryParam) {
-    return request({
-        url: '/youlai-admin/api/v1/users/_export',
-        method: 'get',
-        responseType: "arraybuffer"
-    })
-}
-
-/**
- * 导入用户
- *
- * @param file
- */
-export function importUser(deptId: number, roleIds: string, file: File) {
-    let formData = new FormData()
-    formData.append('file', file)
-    formData.append('deptId',deptId.toString())
-    formData.append('roleIds',roleIds)
-    return request(
-        {
-            url: '/youlai-admin/api/v1/users/_import',
-            method: 'post',
-            data:formData,
-            headers: {
-                'Content-Type': 'multipart/form-data'
-            }
-        })
-}
\ No newline at end of file
diff --git a/src/api/ums/member.ts b/src/api/ums/member.ts
deleted file mode 100644
index a997a3fd..00000000
--- a/src/api/ums/member.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { MemberPageResult, MemberQueryParam } from '@/types'
-import request from '@/utils/request'
-import { AxiosPromise } from 'axios'
-
-/**
- * 获取会员分页列表
- *
- * @param queryParams
- */
-export function listMemeberPages(queryParams: MemberQueryParam): AxiosPromise<MemberPageResult> {
-    return request({
-        url: '/mall-ums/api/v1/members',
-        method: 'get',
-        params: queryParams
-    })
-}
-
-/**
- * 获取会员详情
- *
- * @param id
- */
-export function getMemberFormDetail(id: number) {
-    return request({
-        url: '/mall-ums/api/v1/members/' + id,
-        method: 'get'
-    })
-}
-
-/**
- * 添加会员
- *
- * @param data
- */
-export function addMember(data: object) {
-    return request({
-        url: '/mall-ums/api/v1/members',
-        method: 'post',
-        data: data
-    })
-}
-
-/**
- * 添加会员
- *
- * @param id
- * @param data
- */
-export function updateMember(id: number, data: object) {
-    return request({
-        url: '/mall-ums/api/v1/members/' + id,
-        method: 'put',
-        data: data
-    })
-}
\ No newline at end of file
diff --git a/src/api/user/index.ts b/src/api/user/index.ts
new file mode 100644
index 00000000..637ab014
--- /dev/null
+++ b/src/api/user/index.ts
@@ -0,0 +1,154 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { UserForm, UserInfo, UserPageVO, UserQuery } from './types';
+
+/**
+ * 登录成功后获取用户信息（昵称、头像、权限集合和角色集合）
+ */
+export function getUserInfo(): AxiosPromise<UserInfo> {
+  return request({
+    url: '/api/v1/users/me',
+    method: 'get'
+  });
+}
+
+/**
+ * 获取用户分页列表
+ *
+ * @param queryParams
+ */
+export function getUserPage(
+  queryParams: UserQuery
+): AxiosPromise<PageResult<UserPageVO[]>> {
+  return request({
+    url: '/api/v1/users/page',
+    method: 'get',
+    params: queryParams
+  });
+}
+
+/**
+ * 获取用户表单详情
+ *
+ * @param userId
+ */
+export function getUserForm(userId: number): AxiosPromise<UserForm> {
+  return request({
+    url: '/api/v1/users/' + userId + '/form',
+    method: 'get'
+  });
+}
+
+/**
+ * 添加用户
+ *
+ * @param data
+ */
+export function addUser(data: any) {
+  return request({
+    url: '/api/v1/users',
+    method: 'post',
+    data: data
+  });
+}
+
+/**
+ * 修改用户
+ *
+ * @param id
+ * @param data
+ */
+export function updateUser(id: number, data: UserForm) {
+  return request({
+    url: '/api/v1/users/' + id,
+    method: 'put',
+    data: data
+  });
+}
+
+/**
+ * 修改用户状态
+ *
+ * @param id
+ * @param status
+ */
+export function updateUserStatus(id: number, status: number) {
+  return request({
+    url: '/api/v1/users/' + id + '/status',
+    method: 'patch',
+    params: { status: status }
+  });
+}
+
+/**
+ * 修改用户密码
+ *
+ * @param id
+ * @param password
+ */
+export function updateUserPassword(id: number, password: string) {
+  return request({
+    url: '/api/v1/users/' + id + '/password',
+    method: 'patch',
+    params: { password: password }
+  });
+}
+
+/**
+ * 删除用户
+ *
+ * @param ids
+ */
+export function deleteUsers(ids: string) {
+  return request({
+    url: '/api/v1/users/' + ids,
+    method: 'delete'
+  });
+}
+
+/**
+ * 下载用户导入模板
+ *
+ * @returns
+ */
+export function downloadTemplateApi() {
+  return request({
+    url: '/api/v1/users/template',
+    method: 'get',
+    responseType: 'arraybuffer'
+  });
+}
+
+/**
+ * 导出用户
+ *
+ * @param queryParams
+ * @returns
+ */
+export function exportUser(queryParams: UserQuery) {
+  return request({
+    url: '/api/v1/users/_export',
+    method: 'get',
+    params: queryParams,
+    responseType: 'arraybuffer'
+  });
+}
+
+/**
+ * 导入用户
+ *
+ * @param file
+ */
+export function importUser(deptId: number, file: File) {
+  const formData = new FormData();
+  formData.append('file', file);
+  return request({
+    url: '/api/v1/users/_import',
+    method: 'post',
+    params: { deptId: deptId },
+    data: formData,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  });
+}
diff --git a/src/api/user/types.ts b/src/api/user/types.ts
new file mode 100644
index 00000000..057be5f3
--- /dev/null
+++ b/src/api/user/types.ts
@@ -0,0 +1,112 @@
+/**
+ * 登录用户信息
+ */
+export interface UserInfo {
+  userId: number;
+  nickname: string;
+  avatar: string;
+  roles: string[];
+  perms: string[];
+}
+
+/**
+ * 用户查询对象类型
+ */
+export interface UserQuery extends PageQuery {
+  keywords?: string;
+  status?: number;
+  deptId?: number;
+}
+
+/**
+ * 用户分页对象
+ */
+export interface UserPageVO {
+  /**
+   * 用户头像地址
+   */
+  avatar?: string;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+  /**
+   * 部门名称
+   */
+  deptName?: string;
+  /**
+   * 用户邮箱
+   */
+  email?: string;
+  /**
+   * 性别
+   */
+  genderLabel?: string;
+  /**
+   * 用户ID
+   */
+  id?: number;
+  /**
+   * 手机号
+   */
+  mobile?: string;
+  /**
+   * 用户昵称
+   */
+  nickname?: string;
+  /**
+   * 角色名称，多个使用英文逗号(,)分割
+   */
+  roleNames?: string;
+  /**
+   * 用户状态(1:启用;0:禁用)
+   */
+  status?: number;
+  /**
+   * 用户名
+   */
+  username?: string;
+}
+
+/**
+ * 用户表单类型
+ */
+export interface UserForm {
+  /**
+   * 用户头像
+   */
+  avatar?: string;
+  /**
+   * 部门ID
+   */
+  deptId?: number;
+  /**
+   * 邮箱
+   */
+  email?: string;
+  /**
+   * 性别
+   */
+  gender?: number;
+  /**
+   * 用户ID
+   */
+  id?: number;
+  mobile?: string;
+  /**
+   * 昵称
+   */
+  nickname?: string;
+  /**
+   * 角色ID集合
+   */
+  roleIds?: number[];
+  /**
+   * 用户状态(1:正常;0:禁用)
+   */
+  status?: number;
+  /**
+   * 用户名
+   */
+  username?: string;
+}
diff --git a/src/api/websocket/index.ts b/src/api/websocket/index.ts
new file mode 100644
index 00000000..867a2a23
--- /dev/null
+++ b/src/api/websocket/index.ts
@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+/**
+ * 发送消息给所有人
+ *
+ * @param file
+ */
+export function sendToAll(message: string) {
+  return request({
+    url: "/websocket/sendToAll",
+    method: "post",
+    params: { message: message },
+  });
+}
+
+/**
+ * 发送消息给指定用户
+ *
+ * @param
+ */
+export function sendToUser(userId: number, message: string) {
+  return request({
+    url: "/websocket/sendToUser/" + userId,
+    method: "post",
+    params: { message: message },
+  });
+}
diff --git a/src/assets/icons/404.svg b/src/assets/icons/404.svg
deleted file mode 100644
index 6df50190..00000000
--- a/src/assets/icons/404.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M121.718 73.272v9.953c3.957-7.584 6.199-16.05 6.199-24.995C127.917 26.079 99.273 0 63.958 0 28.644 0 0 26.079 0 58.23c0 .403.028.806.028 1.21l22.97-25.953h13.34l-19.76 27.187h6.42V53.77l13.728-19.477v49.361H22.998V73.272H2.158c5.951 20.284 23.608 36.208 45.998 41.399-1.44 3.3-5.618 11.263-12.565 12.674-8.607 1.764 23.358.428 46.163-13.178 17.519-4.611 31.938-15.849 39.77-30.513h-13.506V73.272H85.02V59.464l22.998-25.977h13.008l-19.429 27.187h6.421v-7.433l13.727-19.402v39.433h-.027zm-78.24 2.822a10.516 10.516 0 0 1-.996-4.535V44.548c0-1.613.332-3.124.996-4.535a11.66 11.66 0 0 1 2.713-3.68c1.134-1.032 2.49-1.864 4.04-2.468 1.55-.605 3.21-.908 4.982-.908h11.292c1.77 0 3.431.303 4.981.908 1.522.604 2.85 1.41 3.986 2.418l-12.26 16.303v-2.898a1.96 1.96 0 0 0-.665-1.512c-.443-.403-.996-.604-1.66-.604-.665 0-1.218.201-1.661.604a1.96 1.96 0 0 0-.664 1.512v9.071L44.364 77.606a10.556 10.556 0 0 1-.886-1.512zm35.73-4.535c0 1.613-.332 3.124-.997 4.535a11.66 11.66 0 0 1-2.712 3.68c-1.134 1.032-2.49 1.864-4.04 2.469-1.55.604-3.21.907-4.982.907H55.185c-1.77 0-3.431-.303-4.981-.907-1.55-.605-2.906-1.437-4.041-2.47a12.49 12.49 0 0 1-1.384-1.512l13.727-18.217v6.375c0 .605.222 1.109.665 1.512.442.403.996.604 1.66.604.664 0 1.218-.201 1.66-.604a1.96 1.96 0 0 0 .665-1.512V53.87L75.97 36.838c.913.932 1.66 1.99 2.214 3.175.664 1.41.996 2.922.996 4.535v27.011h.028z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/advert.svg b/src/assets/icons/advert.svg
new file mode 100644
index 00000000..5adcf437
--- /dev/null
+++ b/src/assets/icons/advert.svg
@@ -0,0 +1 @@
+<svg t="1650329991210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13818" width="200" height="200"><path d="M992 160v576H32V160h960m0-32H32c-17.6 0-32 14.4-32 32v576c0 17.6 14.4 32 32 32h960c17.6 0 32-14.4 32-32V160c0-17.6-14.4-32-32-32z" fill="" p-id="13819"></path><path d="M112 880h800c9.6 0 16 6.4 16 16s-6.4 16-16 16H112c-9.6 0-16-6.4-16-16s6.4-16 16-16z" fill="" p-id="13820"></path><path d="M334.4 275.2l171.2 382.4h-40l-57.6-124.8h-158.4L192 657.6H152l172.8-382.4h9.6z m-4.8 81.6l-62.4 137.6h124.8l-62.4-137.6zM563.2 657.6v-368H640c52.8 0 91.2 3.2 115.2 11.2 24 8 44.8 19.2 64 36.8 17.6 16 32 36.8 41.6 60.8 9.6 24 14.4 51.2 14.4 83.2s-8 62.4-22.4 89.6-35.2 49.6-60.8 64c-25.6 14.4-62.4 20.8-110.4 20.8h-118.4z m35.2-35.2H640c44.8 0 76.8-1.6 96-6.4s36.8-12.8 52.8-25.6c14.4-12.8 27.2-28.8 33.6-48 8-19.2 11.2-40 11.2-64s-4.8-46.4-12.8-67.2c-9.6-20.8-22.4-36.8-38.4-51.2s-36.8-22.4-59.2-27.2c-22.4-4.8-56-6.4-100.8-6.4h-25.6l1.6 296z" fill="" p-id="13821"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/api.svg b/src/assets/icons/api.svg
new file mode 100644
index 00000000..2753743d
--- /dev/null
+++ b/src/assets/icons/api.svg
@@ -0,0 +1 @@
+<svg t="1675604204039" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9667" width="200" height="200"><path d="M499.2 671.232v-261.12h102.4c16.384 0 28.672 1.024 37.888 2.56 13.312 2.048 24.576 6.656 34.816 13.312 9.728 6.656 17.92 16.384 23.552 28.16 6.144 12.288 8.704 25.6 8.192 38.4 0 23.552-7.68 44.032-23.04 59.904-15.36 16.896-40.96 25.088-78.848 25.088h-43.52V670.72l-61.44 0.512z m281.6 0h-61.952v-261.12h61.952v261.12z m-287.744 0H423.936l-27.136-69.632H323.072l-25.088 69.632h-66.56l100.352-261.12h54.272l107.008 261.12z m-149.504-125.952h32.256l-15.872-42.496c0-0.512-0.512-1.024-0.512-1.536l-15.872 44.032z m217.6-26.112h43.52c20.48 0 28.16-4.608 31.232-7.168 4.608-4.096 7.168-10.752 7.168-18.944 0-6.656-1.536-11.776-4.096-15.36-2.56-3.584-6.144-6.144-10.752-7.68-1.536-0.512-6.656-1.536-24.064-1.536h-43.008v50.688z" p-id="9668"></path><path d="M747.52 842.752h-235.52c-8.704 0-16.384-3.584-22.016-9.728-6.144-6.144-9.216-14.336-8.704-22.528 0.512-16.896 14.336-30.72 31.232-31.232H747.52c115.712 0 209.408-94.208 209.408-209.408 0-104.96-78.848-194.56-183.296-207.872l-22.528-3.072-4.608-22.016c-21.504-104.96-114.688-180.736-222.208-180.736-124.928 0-226.304 101.376-226.304 226.304v8.704l1.536 36.352-36.352-4.096c-6.144-1.024-12.288-1.024-18.432-1.024-98.304 0-178.176 79.872-178.176 178.176 0 98.304 79.872 178.176 178.176 178.176h63.488c8.704 0 16.384 3.584 22.016 9.728 6.144 6.144 9.216 14.336 8.704 22.528-0.512 16.896-14.336 30.72-31.232 31.232H244.736h-1.024c-64 0-123.904-25.088-169.472-70.144C28.16 726.528 3.072 665.6 3.072 601.088 3.072 471.552 107.008 364.544 235.52 359.936c12.288-157.184 149.504-276.48 307.2-266.24 59.904 3.584 118.784 27.136 165.888 65.536 45.568 37.376 77.824 87.04 94.208 143.872 125.952 26.112 217.088 137.728 217.088 266.752 0.512 151.04-121.856 272.896-272.384 272.896z" p-id="9669"></path><path d="M572.416 930.816c-8.192 0-15.872-3.072-21.504-8.704l-119.296-109.568 113.152-117.76c6.144-6.144 13.824-9.216 22.528-9.216 8.704 0 16.384 3.072 22.528 9.216 11.776 11.776 12.288 31.232 1.024 44.032L522.24 809.472l71.68 66.048c6.144 5.632 9.728 13.312 10.24 22.016 0.512 8.704-2.56 16.384-8.192 23.04-6.656 6.656-14.848 10.24-23.552 10.24z" p-id="9670"></path></svg>
diff --git a/src/assets/icons/await.svg b/src/assets/icons/await.svg
deleted file mode 100644
index fcec2ecb..00000000
--- a/src/assets/icons/await.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1622989701398" class="icon" viewBox="0 0 1229 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3840" width="200" height="200"><path d="M1119.908346 651.504198H645.95437c-11.466272-3.824198-22.932543-15.29679-22.932543-30.58726 0-11.472593 7.645235-22.945185 19.111506-30.590419h240.798025c19.111506 0 30.577778-15.29363 30.577778-30.58726 0-19.120988-15.287309-30.587259-30.577778-30.587259h-110.844839c-11.466272-3.824198-19.108346-15.29679-19.108346-30.59042s11.466272-26.763062 22.932543-30.587259h194.932938c19.111506 0 30.577778-15.29679 30.577778-30.587259 0-19.120988-15.290469-30.59042-30.577778-30.59042H405.156346c-11.469432-3.824198-19.111506-15.29363-19.111506-30.587259 0-15.29679 11.466272-26.766222 22.932543-30.58726h653.599605c19.111506 0 30.577778-15.29679 30.577777-30.590419 0-19.117827-15.290469-30.587259-30.577777-30.58726H194.932938c-19.111506 0-30.577778 15.29679-30.577778 30.58726 0 11.472593 15.290469 26.766222 30.577778 26.766222h42.04405c15.290469 3.824198 22.932543 15.29363 22.932543 30.587259 0 11.472593-7.642074 22.942025-19.108346 30.587259H30.577778c-19.111506 0-30.577778 15.29679-30.577778 30.59042 0 19.117827 15.287309 30.587259 30.577778 30.587259h611.555555c15.287309 3.824198 22.932543 15.29679 22.932544 30.58726 0 11.472593-7.645235 22.945185-19.111507 30.590419h-179.642469c-19.111506 0-30.577778 15.29363-30.577778 30.58726 0 19.120988 15.287309 30.587259 30.577778 30.587259h68.79763c11.466272 3.824198 19.111506 15.29679 19.111506 30.59042s-7.645235 26.763062-22.932543 30.587259H152.888889c-19.111506 0-30.577778 15.29679-30.577778 30.587259 0 19.120988 15.287309 30.59042 30.577778 30.59042h236.976988c11.466272 3.824198 19.111506 15.29363 19.111506 30.587259 0 11.472593-7.645235 22.942025-19.111506 30.58726H294.311506c-19.111506 0-30.577778 15.29679-30.577778 30.590419 0 19.117827 15.287309 30.587259 30.577778 30.58726h282.842074c19.111506 0 30.577778-15.29679 30.577778-30.58726 0-19.120988-15.287309-30.59042-30.577778-30.590419H485.420247c-11.466272-3.824198-19.108346-15.29363-19.108346-30.58726 0-11.472593 7.642074-22.942025 19.108346-30.587259h630.667062c19.111506 0 30.577778-15.29679 30.577777-30.59042 3.824198-11.469432-11.466272-26.763062-26.75674-26.763061z" fill="#E6EFFF" p-id="3841"></path><path d="M880.200691 450.522074H593.224691l-11.478913-38.200889c-7.654716-15.280988-15.306272-26.740938-30.612543-26.740938l-252.54242 7.638913c-15.306272 3.824198-26.785185 15.280988-26.785185 26.740939V824.888889h631.356049V477.263012c3.827358-15.280988-7.651556-26.740938-22.957827-26.740938z" fill="#FFFFFF" p-id="3842"></path><path d="M910.222222 828.049383H271.802469V417.618173c0-15.344198 11.469432-30.688395 30.584099-30.688395L550.870914 379.259259c15.29363 0 26.759901 11.507358 34.408296 26.851556l11.466271 38.355753h282.895803c15.290469 0 30.580938 11.510519 30.580938 30.688395V828.049383z m-634.595555-7.670519h626.94716V475.154963c0-11.507358-11.466272-23.014716-22.935704-23.014716h-290.537876l-11.469432-42.192593c-3.824198-7.673679-11.466272-23.017877-26.759901-23.017876l-248.484346 7.673679c-11.472593 0-22.938864 11.504198-22.938864 23.014716v402.760691h-3.824198z" fill="#A2ADC2" p-id="3843"></path><path d="M325.530864 993.975309c0 10.726716 50.299259 20.638025 131.950617 26.001382s182.249877 5.363358 263.901235 0S853.333333 1004.702025 853.333333 993.975309c0-16.583111-118.151901-30.024691-263.901234-30.024692s-263.901235 13.44158-263.901235 30.024692zM1167.802469 799.604938s3.877926 0 0 0c3.877926 3.877926 7.759012 27.148642 11.636938 31.029729 7.755852 7.759012 31.029728 3.877926 31.029729 11.636938s-23.273877 7.759012-31.029729 11.636938c-7.759012 7.755852-3.877926 31.029728-11.636938 31.029729s-3.877926-23.273877-11.636938-31.029729c-7.755852-7.759012-31.029728-7.759012-31.029729-15.518024 0-7.755852 23.273877-3.877926 31.029729-11.633778 7.759012-3.877926 3.877926-27.151802 11.636938-27.151803z" fill="#E6EFFF" p-id="3844"></path><path d="M29.253531 733.370469s3.824198 0 0 0c3.824198 0 3.824198 15.312593 7.645234 19.139951 3.824198 3.830519 19.111506 0 19.111507 7.657876 0 3.824198-11.466272 3.824198-19.111507 7.654716-3.824198 3.827358-3.824198 19.139951-7.645234 19.139951-3.824198 0 0-11.485235-7.645235-19.139951C17.787259 760.168296 6.320988 763.995654 6.320988 756.340938c0-7.657877 11.466272 0 19.111506-7.657876 3.824198-3.827358 0-15.312593 3.824197-15.312593zM866.322963 170.666667s3.824198 0 0 0c3.824198 0 3.824198 15.312593 7.648395 19.13995 3.821037 3.827358 19.108346 0 19.108346 7.654716 0 3.827358-15.287309 3.827358-19.111506 7.657877-3.824198 3.824198 0 22.967309-7.645235 22.967309-3.821037 0 0-15.312593-7.642074-19.139951-3.824198-3.827358-19.111506-3.827358-19.111506-7.657877 0-3.824198 15.287309 0 19.111506-7.654716C866.319802 185.979259 862.498765 170.666667 866.319802 170.666667z m340.179753 321.548642c-11.466272 0-22.935704 11.482074-22.935704 22.964148 0 11.485235 7.648395 19.139951 22.935704 19.13995 11.466272 0 22.932543-11.482074 22.932543-22.967308 0-11.485235-11.466272-19.139951-22.932543-19.139951z m0 34.449382c-7.645235 0-11.466272-7.657877-11.466272-11.485234 0-3.827358 7.642074-11.482074 11.466272-11.482074s11.466272 7.654716 11.466272 11.482074c0 3.827358-7.645235 11.485235-11.466272 11.485234z" fill="#E6E6E6" p-id="3845"></path><path d="M263.901235 0C248.888889 0 233.876543 15.012346 233.876543 30.024691s15.012346 30.024691 30.024692 30.024692S293.925926 45.037037 293.925926 30.024691 282.665086 0 263.901235 0z m0 48.791704c-11.257679 0-18.767012-7.509333-18.767013-18.767013s7.509333-18.763852 18.767013-18.763851c11.26084 0 18.767012 7.506173 18.767012 18.763851 0 11.26084-7.509333 18.767012-18.767012 18.767013z" fill="#E6EFFF" p-id="3846"></path><path d="M786.229728 616.542815c3.824198 19.13363-7.642074 38.264099-26.744098 42.091457l-340.059655 61.225086c-19.105185 3.824198-38.21037-7.651556-42.028247-26.785185L300.973827 245.368099c-3.817877-19.130469 7.645235-38.264099 26.747259-42.091457L572.261136 161.185185c42.031407 26.785185 95.522765 61.225086 152.83516 95.661827l61.133432 359.695803z" fill="#FFFFFF" p-id="3847"></path><path d="M405.741037 720.592593c-7.626272 0-15.252543-3.824198-22.878815-7.645235-7.626272-7.645235-15.252543-15.290469-15.252543-26.756741L291.353284 238.958617c-3.811556-15.290469 11.440988-38.223012 30.501926-42.04721L565.880099 154.864198c15.252543 7.645235 30.501926 19.111506 45.754469 30.580938 30.501926 19.111506 68.633284 45.868247 106.761481 64.979753l64.818568 363.140741c3.811556 19.108346-11.440988 42.044049-30.501926 45.868247L413.360988 720.592593h-7.623111z m160.142222-558.083161l-244.028049 42.04721c-19.064099 3.824198-30.498765 19.111506-26.68721 38.226173l76.256395 447.228839c0 7.648395 7.626272 15.290469 11.440988 19.114667 7.623111 3.824198 15.249383 7.645235 22.875654 3.824198l339.342222-61.161877c7.629432 0 15.252543-7.648395 19.06726-11.469432 3.811556-7.645235 7.626272-15.287309 3.811555-22.932543l-64.818568-363.140741c-38.128198-22.932543-72.44484-45.868247-106.761481-64.979753-3.811556-7.645235-19.064099-19.111506-30.498766-26.756741z" fill="#A2ADC2" p-id="3848"></path><path d="M648.612346 220.773136l-283.806025 49.863111c-3.83684 0-7.670519-3.83684-7.670519-7.670519 0-3.83684 3.833679-7.670519 7.670519-7.670518L648.612346 205.432099c3.833679 0 7.670519 3.83684 7.670518 7.670518 0 3.83684-3.83684 7.670519-7.670518 7.670519z m15.341037 92.055704l-283.806025 49.85995c-3.83684 0-7.670519-3.833679-7.670518-7.670518 0-3.833679 3.833679-7.670519 7.670518-7.670519l283.806025-49.863111c3.833679 0 7.670519 3.83684 7.670518 7.670518 0 3.83684 0 7.673679-7.670518 7.67368z m26.845234 237.801876L406.992593 600.493827c-3.833679 0-7.670519-3.83684-7.670519-7.670518 0-3.83684 3.83684-7.670519 7.670519-7.670519l283.806024-49.863111c3.83684 0 7.670519 3.83684 7.670519 7.670519 0 3.83684-3.833679 7.670519-7.670519 7.670518z" fill="#E6EFFF" p-id="3849"></path><path d="M761.931852 657.59763l-237.580642-65.074568c-42.151506-11.482074-65.144099-53.586173-53.649383-95.693432l84.303013-313.874963c11.497877-42.104099 53.649383-65.074568 95.800888-53.589334l237.583803 65.074568c42.151506 11.482074 65.144099 53.586173 53.649383 95.693432l-84.303013 313.874963c-11.497877 42.104099-53.649383 65.074568-95.800889 53.589334z" fill="#FFFFFF" p-id="3850"></path><path d="M823.058963 679.506173h-3.824198l-351.981037-95.927309c-3.824198 0-11.475753-3.83684-11.475753-11.510518-3.827358-3.83684-3.827358-11.513679-3.827358-15.350519l114.776494-429.754469c3.824198-11.510519 15.303111-19.184198 26.778864-15.347358l351.981037 95.927309c3.824198 0 11.475753 3.83684 11.475753 11.510518C960.790123 222.890667 960.790123 230.564346 960.790123 234.401185l-114.776493 429.75763c0 3.83684-3.824198 11.510519-11.475753 11.510518-3.824198 3.83684-7.651556 3.83684-11.478914 3.83684zM585.85442 119.289679c-7.648395 0-11.475753 3.83684-15.303111 11.510519l-114.773334 429.754469v11.513679c3.824198 3.83684 3.824198 7.673679 7.648395 7.673679L815.407407 675.669333h11.478914c3.824198-3.83684 7.648395-3.83684 7.648395-7.673679L949.31437 238.238025v-11.513679c0-3.83684-3.824198-7.673679-7.648395-7.673679l-355.808395-99.764148c3.824198 0 3.824198 0 0 0z" fill="#A2ADC2" p-id="3851"></path><path d="M812.227951 589.422617l-297.987161-80.605234c-3.817877 0-7.638914-3.83684-3.817876-7.673679 0-3.84 3.817877-7.68 7.638913-3.84l297.984 80.605234c3.824198 0 7.642074 3.83684 3.824198 7.67684 3.817877 3.83684-3.824198 7.673679-7.642074 3.836839z m15.280987-53.734716l-297.984-80.605234c-3.824198 0-7.642074-3.83684-3.824197-7.67684 0-3.83684 3.824198-7.67684 7.642074-3.836839l297.984 80.602074c3.824198 0 7.642074 3.84 3.824197 7.68 0 3.83684-3.824198 7.673679-7.642074 3.836839z m15.280988-53.737876L544.805926 401.351111c-3.824198 0-7.642074-3.84-3.824198-7.68 0-3.83684 3.824198-7.673679 7.642074-3.836839l297.984 80.605234c3.824198 0 7.642074 3.83684 3.824198 7.67684 0 3.83684-3.824198 3.83684-7.642074 3.836839z m-15.280988-61.408395l-229.221136-61.414716c-26.740938-7.67684-42.021926-34.544198-34.383012-61.411556l3.824198-11.516839c7.638914-26.864198 34.379852-42.221037 61.12395-34.544198l229.217976 61.411556c26.740938 7.68 42.021926 34.544198 34.383012 61.414716l-7.642074 11.513679c-7.638914 26.867358-34.383012 42.221037-57.302914 34.544197z" fill="#E6EFFF" p-id="3852"></path><path d="M854.385778 189.62963L831.209877 277.361778l50.217086-19.07358L908.464988 300.246914 935.506173 208.700049z" fill="#E6EFFF" p-id="3853"></path><path d="M909.195062 297.08642l-30.90963-37.925926-46.370765 18.962963H828.049383v-3.792593l23.185382-87.229629 3.862124-3.792593 81.148839 22.755556h3.865284c3.862123 0 0 0 0 3.792592L909.195062 297.08642c3.865284 0 3.865284 0 0 0 3.865284 0 0 0 0 0z m-27.047506-45.511111l27.047506 34.133333 23.185382-75.851852-73.418271-18.962963-23.185383 75.851852 46.370766-15.17037c-3.865284 0-3.865284 0 0 0z" fill="#A2ADC2" p-id="3854"></path><path d="M252.839506 483.555556c0 68.955654 57.464099 126.419753 126.419753 126.419753s126.419753-57.464099 126.419753-126.419753-57.464099-126.419753-126.419753-126.419754c-72.786173 3.830519-126.419753 57.464099-126.419753 126.419754z" fill="#FFFFFF" p-id="3855"></path><path d="M376.098765 613.135802c-68.955654 0-126.419753-57.464099-126.419753-126.419753s57.464099-126.419753 126.419753-126.419753 126.419753 57.464099 126.419754 126.419753-57.464099 126.419753-126.419754 126.419753z m0-249.008987c-65.125136 0-122.589235 53.63358-122.589234 122.589234 0 65.125136 53.63358 122.589235 122.589234 122.589235 65.125136 0 122.589235-53.63358 122.589235-122.589235 0-68.955654-53.63358-122.589235-122.589235-122.589234z" fill="#A2ADC2" p-id="3856"></path><path d="M274.962963 481.975309c0 53.608296 45.947259 99.555556 99.555556 99.555555s99.555556-45.947259 99.555555-99.555555-45.947259-99.555556-99.555555-99.555556c-53.608296 3.830519-99.555556 45.947259-99.555556 99.555556z" fill="#E6EFFF" p-id="3857"></path><path d="M374.518519 584.691358c-57.065877 0-102.716049-45.650173-102.71605-102.716049 0.657383-56.452741 46.263309-102.058667 102.71605-102.71605 57.065877 0 102.716049 45.650173 102.716049 102.71605 0 57.065877-45.650173 102.716049-102.716049 102.716049z m0-197.82479c-26.630321 0-49.455407 11.415704-68.47842 26.630321-19.019852 19.023012-26.630321 41.848099-26.630321 68.47842h-3.802074 3.802074c0 53.260642 41.848099 95.108741 95.108741 95.10874s95.108741-41.848099 95.10874-95.10874c0-26.630321-11.415704-49.455407-26.630321-68.47842-19.023012-15.214617-41.848099-26.630321-68.478419-26.630321z" fill="#E6EFFF" p-id="3858"></path><path d="M309.728395 591.012346l-25.283951 41.086419" fill="#FFFFFF" p-id="3859"></path><path d="M283.401481 638.419753c-3.732543 0-3.732543 0 0 0-3.732543-3.90637-7.465086-3.90637-3.732543-7.815901l26.118321-42.982716c0-3.90637 3.729383-3.90637 7.465087 0 3.729383 0 3.729383 3.909531 0 7.815901L287.130864 638.419753h-3.729383z" fill="#A2ADC2" p-id="3860"></path><path d="M467.753086 632.098765l-25.28395-41.086419" fill="#FFFFFF" p-id="3861"></path><path d="M467.787852 635.259259s-3.792593 0-3.792593-3.814716l-26.557629-41.971358v-7.632592h7.585185l26.557629 41.971358c3.792593 7.632593 3.792593 11.447309-3.792592 11.447308 3.792593 0 3.792593 0 0 0z m-91.053827-270.917531c-3.795753 0-3.795753-3.814716-3.795753-3.814716v-34.341926c0-3.814716 0-3.814716 3.792592-3.814716s3.792593 3.814716 3.792593 3.814716v34.341926l-3.792593 3.814716z" fill="#A2ADC2" p-id="3862"></path><path d="M335.012346 303.407407h79.012345v18.962963h-79.012345z" fill="#E6EFFF" p-id="3863"></path><path d="M418.670617 325.530864h-83.045136S331.851852 325.530864 331.851852 321.91842v-18.059062S331.851852 300.246914 335.625481 300.246914h79.265186s3.77679 0 3.77679 3.612444V325.530864c3.77679 0 0 0 0 0z m-79.268345-7.224889h71.717926v-14.446617h-71.717926v14.446617z" fill="#A2ADC2" p-id="3864"></path><path d="M372.938272 483.555556c0 3.160494 3.160494 3.160494 3.160493 3.160493l3.160494-3.160493c0-3.160494-3.160494-3.160494-3.160494-3.160494l-3.160493 3.160494z" fill="#FFFFFF" p-id="3865"></path><path d="M374.518519 493.037037c-3.688296 0-11.061728-3.688296-11.061729-11.061728s3.688296-11.061728 11.061729-11.061729 11.061728 3.688296 11.061728 11.061729-7.373432 11.061728-11.061728 11.061728z" fill="#A2ADC2" p-id="3866"></path><path d="M376.730864 489.876543c-3.792593 0-3.792593-3.83684-3.792592-3.836839v-99.783111c0-3.83684 0-3.83684 3.792592-3.83684s3.792593 3.83684 3.792593 3.83684v99.783111L376.730864 489.876543z m87.22963-3.836839h-79.644445c-3.792593 0-3.792593 0-3.792592-3.84 0-3.83684 3.792593-3.83684 3.792592-3.83684h79.644445c3.792593 0 3.792593 0 3.792592 3.83684 0 3.84 0 3.84-3.792592 3.84z" fill="#A2ADC2" p-id="3867"></path><path d="M300.246914 363.045926c-7.525136-11.545284-18.811259-15.391605-33.861531-15.391605C240.045827 347.654321 221.234568 366.892247 221.234568 393.825975c0 15.391605 7.525136 30.780049 22.575407 42.322173 11.286123-30.78321 30.100543-57.710617 56.436939-73.102222z" fill="#E6EFFF" p-id="3868"></path><path d="M244.805531 439.308642C225.712988 427.930864 218.074074 412.760494 218.074074 393.797531c0-26.548148 22.91358-49.303704 49.645037-49.303704 15.277827 0 26.734617 7.585185 38.191408 15.170371L309.728395 363.45679l-3.817876 3.792593c-26.734617 15.17037-45.82716 37.925926-57.283951 68.266666l-3.821037 3.792593z m19.095704-87.22963c-22.91358 0-42.009284 18.962963-42.009284 41.718519 0 15.17037 7.638914 26.548148 19.095703 34.133333 11.45679-26.548148 30.552494-49.303704 53.466074-64.474074-7.638914-7.585185-19.095704-11.377778-30.552493-11.377778z" fill="#A2ADC2" p-id="3869"></path><path d="M451.950617 363.045926c7.525136-11.545284 18.811259-15.391605 33.861531-15.391605 26.339556 0 45.150815 19.237926 45.150815 46.171654 0 15.391605-7.525136 30.780049-22.575407 42.322173-11.286123-30.78321-30.100543-57.710617-56.436939-73.102222z" fill="#E6EFFF" p-id="3870"></path><path d="M506.731457 439.308642v-3.792593c-7.635753-30.340741-30.549333-53.096296-57.283951-68.266666L445.62963 363.45679l3.817876-3.792592c7.638914-11.377778 22.91358-15.17037 38.191408-15.170371 26.731457 0 49.645037 22.755556 49.645037 49.303704 0 18.962963-11.45679 34.133333-30.552494 45.511111z m-49.645037-75.851852c26.731457 15.17037 45.82716 37.925926 53.466074 64.474074 11.45679-7.585185 19.092543-22.755556 19.092543-34.133333 0-22.755556-19.092543-41.718519-42.006123-41.718519-11.45679 0-22.91358 3.792593-30.552494 11.377778z" fill="#A2ADC2" p-id="3871"></path><path d="M919.924938 556.246914h-96.774321c-3.871605 0-7.74321-3.811556-7.74321-7.623112v-114.334024c0-3.811556 3.871605-7.623111 7.74321-7.623111h96.774321c3.871605 0 7.74321 3.811556 7.74321 7.623111v114.334024c3.868444 3.811556 0 7.623111-7.74321 7.623112z" fill="#E6EFFF" p-id="3872"></path><path d="M919.798519 559.407407h-96.028445c-7.68 0-11.52316-7.724247-11.52316-11.58953v-115.882667c0-7.727407 7.68-11.589531 11.52316-11.589531h96.031605c7.68 0 11.52316 7.724247 11.523161 11.589531v115.882667c3.84 3.865284-3.84316 11.589531-11.523161 11.58953z m-92.185284-135.199605c-3.84316 0-7.68316 3.862123-7.683161 7.727408v115.882667c0 3.865284 3.84 7.727407 7.68 7.727407h96.031605c3.84 0 7.68-3.862123 7.68-7.727407v-115.882667c0-3.865284-3.84-7.727407-7.68-7.727408h-96.028444z m-11.526321 42.49284h115.237926-115.237926z" fill="#A2ADC2" p-id="3873"></path><path d="M815.407407 464.592593h113.777778v6.320987h-113.777778z" fill="#A2ADC2" p-id="3874"></path><path d="M929.185185 470.91358h-113.777778v-39.506173c0-3.950617 3.792593-7.901235 7.585186-7.901234h94.814814c3.792593 0 7.585185 3.950617 7.585186 7.901234v31.604939c3.792593 3.950617 3.792593 3.950617 3.792592 7.901234z" fill="#FFFFFF" p-id="3875"></path><path d="M935.506173 474.074074h-120.098766V431.859358c0-7.67684 7.749531-11.513679 11.621136-11.513679h96.856494c7.74637 0 11.621136 7.67684 11.621136 11.513679V474.074074z m-116.224-7.676839h108.474469V428.025679c0-3.84-3.871605-7.67684-7.74637-7.676839h-96.853334c-3.874765 0-7.749531 3.83684-7.749531 7.676839v30.701037c3.874765 3.83684 3.874765 3.83684 3.874766 7.673679z" fill="#A2ADC2" p-id="3876"></path><path d="M296.406914 843.851852c-15.299951 0-26.775704-11.447309-26.775704-26.709333L227.555556 557.669136c0-15.262025 11.472593-26.709333 26.775703-26.709334h692.325136c15.299951 0 26.775704 11.447309 26.775704 26.709334l-45.899852 259.470222c0 15.262025-11.472593 26.709333-26.775704 26.709333H296.406914z" fill="#E6EFFF" p-id="3877"></path><path d="M900.228741 847.012346H296.941037c-15.271506 0-30.546173-15.350519-30.546173-30.701037L224.395062 555.343012c0-19.187358 15.271506-30.701037 30.546173-30.701037h691.105185c15.274667 0 30.546173 15.350519 30.546173 30.701037l-45.817679 260.968297c0 15.350519-15.274667 30.701037-30.546173 30.701037zM254.941235 528.478815c-11.45363 0-22.91042 11.513679-22.91042 23.027358l42.002963 264.805136c0 11.513679 7.635753 23.024198 22.907259 23.024197h603.287704c11.45363 0 22.907259-11.510519 22.907259-23.024197l45.82084-260.968297c0-11.513679-11.45679-23.024198-22.91042-23.024197H254.941235v-3.84z" fill="#A2ADC2" p-id="3878"></path><path d="M723.753086 466.17284c0 75.927704 61.553778 137.481481 137.481482 137.481481s137.481481-61.553778 137.481481-137.481481-61.553778-137.481481-137.481481-137.481482-137.481481 61.553778-137.481482 137.481482z" fill="#FFFFFF" p-id="3879"></path><path d="M862.814815 606.814815c-76.875852 0-142.222222-61.50321-142.222222-142.222222 0-76.875852 61.50321-142.222222 142.222222-142.222223s142.222222 61.50321 142.222222 142.222223-65.34637 142.222222-142.222222 142.222222z m0-272.911803c-73.032691 0-134.535901 61.50321-134.535901 134.532741 0 73.032691 61.50321 134.535901 134.535901 134.535901 73.032691 0 134.535901-61.50321 134.535901-134.535901 0-73.032691-61.50321-134.532741-134.535901-134.532741z" fill="#A2ADC2" p-id="3880"></path><path d="M957.62963 441.565235L831.93679 518.320988 809.08642 476.106272 938.584494 410.864198z" fill="#E6EFFF" p-id="3881"></path><path d="M826.469136 524.641975l-26.864198-50.362469L937.762765 404.54321 960.790123 443.284543 826.469136 524.641975z m-15.350519-50.362469l19.187358 34.866568 118.970469-73.607901-15.350518-23.245432-122.807309 61.986765z" fill="#A2ADC2" p-id="3882"></path><path d="M824.888889 469.285926l6.712889-3.625086 20.328296 36.393086L845.179259 505.679012 824.888889 469.285926z m93.05758-48.475654l6.712889-3.625087L944.987654 453.578272l-6.712889 3.625086-20.328296-36.393086z" fill="#A2ADC2" p-id="3883"></path><path d="M780.641975 487.063704l23.472988-12.98963L828.049383 517.973333l-23.472988 12.98963z" fill="#E6EFFF" p-id="3884"></path><path d="M807.506173 537.283951l-30.024692-54.07921 30.024692-15.451655 30.024691 54.07921-30.024691 15.451655z m-18.767013-50.217087l18.767013 38.627556 15.012346-7.724247-18.767013-38.627556-15.012346 7.724247z" fill="#A2ADC2" p-id="3885"></path><path d="M786.330864 534.123457l-15.17037-26.548148 22.755555-11.377778 15.170371 26.548148-22.755556 11.377778z m-3.792592-22.755556l7.585185 15.170371 7.585185-3.792593-7.585185-15.17037-7.585185 3.792592z" fill="#A2ADC2" p-id="3886"></path><path d="M444.280099 655.322074v8.871506H440.888889v3.783111h-10.416988v-3.783111h-7.098469v4.089679h-10.492839v-4.089679h-4.089679v-8.871506h4.089679v-4.399407h10.492839v4.399407h7.098469v-4.089679h10.416988v4.089679h3.39437z m-29.319901 14.117926h9.876543l-1.001877 2.23763h20.214519v40.432197h2.468345c1.697185 0 3.473383-2.338765 5.325432-7.019457l4.08968-9.490963-10.416988-22.14558h11.725432l4.171852 8.950519 5.477136-12.964346h12.344888l-11.65274 26.159407 6.251457 13.195062c0.821728 2.003753 1.801481 3.00879 2.932938 3.00879h2.465185v9.260247h-8.947358c-1.697185 0-3.113086-1.264198-4.244543-3.783111l-4.165531-8.795654-3.242667 7.253333c-1.592889 3.549235-3.470222 5.322272-5.632 5.322272H444.049383v-8.100346c0 5.401284-3.113086 8.100346-9.336099 8.100346h-23.457185v-8.950519h20.062815c1.491753 0 2.23763-0.64158 2.237629-1.927901v-29.62963h-14.045234c-1.182025 2.262914-2.983506 3.39437-5.401284 3.394371h-5.322272v-7.945482h1.618173c0.979753 0 1.700346-0.51516 2.161778-1.545481l2.392494-5.015704z m-4.551112 16.128h20.059655v18.520494c0 3.65037-1.336889 5.477136-4.013827 5.477136h-16.048988v-23.99763z m11.339852 16.665284c0.410864 0 0.619457-0.461432 0.619457-1.387457v-7.948642h-4.013827v9.336099h3.39437z m30.245926-51.620346h11.807605l-1.542321 4.089679h16.971852v9.490963h-20.754963l-0.537284 1.545482c-1.185185 3.290074-3.267951 4.936691-6.251457 4.936691h-6.172444v-9.566815h1.852049c1.02716 0 1.801481-0.799605 2.313482-2.392494l2.316642-8.103506z m62.634667 0.309729h11.033284v15.432691h-11.033284v-15.432691z m-4.709136 20.062814h14.895407v38.886717c0 1.080889 0.360296 1.621333 1.077729 1.621333h3.476543v9.260247h-10.496c-2.828642 0-4.244543-1.466469-4.244543-4.399408v-35.492345h-4.709136v-9.876544z m68.519506-18.134913v7.948642h-19.133629v2.161778h17.976888v8.024493h-17.976888v2.158618h21.064691v8.722963h-51.004049v-8.722963h19.753086v-2.158618h-17.515457v-8.027654h17.515457v-2.158617h-18.827062v-7.948642h18.827062v-3.39437h10.186272v3.39437h19.133629z m0 31.481679v30.245926c0 4.73442-3.084642 7.10163-9.260247 7.101629h-12.651456V714.271605h10.262123c1.182025 0 1.773037-0.436148 1.773037-1.311605v-1.466469h-26.772543v9.876543H531.911111v-37.037827h46.52563z m-36.649086 20.062815h26.772543v-2.468346h-26.772543v2.468346z m0-9.566815h26.772543v-2.471506h-26.772543v2.471506z m105.380345-39.199605v9.260247h-2.781234v32.331852h4.092839v9.260247h-37.733135v-9.260247h4.013827v-32.331852h-2.702222v-9.260247h2.702222v-5.941728h9.876543v5.941728h10.262123v-5.941728h9.490963v5.941728h2.778074z m-22.53432 41.592099h10.265283v-5.170568h-10.262123v5.167407z m0-13.580642h10.265283v-5.170568h-10.262123v5.170568z m0-13.580642h10.265283v-5.170568h-10.262123v5.170568z m-8.871507 38.349432h10.802568l-5.015703 9.721679c-1.02716 2.158617-2.74963 3.239506-5.170568 3.239506h-5.632v-8.100346h1.621333c0.720593 0 1.232593-0.360296 1.542321-1.080888l1.852049-3.779951z m14.737383 0h10.49284l1.159901 3.549234c0.256 0.666864 0.695309 1.001877 1.311605 1.001877h2.853926v8.100346h-8.027655c-1.488593 0-2.774914-1.052444-3.855802-3.160494l-3.934815-9.490963z m20.062815-57.795951h30.941234v62.347062c0 5.401284-2.983506 8.100346-8.950518 8.100346h-6.251457v-9.260247h2.857087c1.438025 0 2.158617-0.742716 2.158617-2.234469v-11.033284h-10.87842v12.651456c0 6.586469-3.293235 9.876543-9.876543 9.876544h-2.392494v-9.260247h0.309728c1.387457 0 2.082765-0.948148 2.082766-2.853926v-58.333235z m9.876543 38.889877h10.87842v-9.566815h-10.87842v9.566815z m0-18.520494h10.87842v-10.799407h-10.87842v10.802567z m61.010173-20.675951h11.112296l-6.788741 15.508544c-0.670025 1.852049-1.801481 2.778074-3.39753 2.778074h8.950518l-4.551111 10.571852v41.895506h-9.876543V687.344198h-4.709136v-9.487803h2.471506c1.336889 0 2.288198-0.720593 2.853926-2.161778l3.087803-7.098469h-8.410075v-9.260247h4.396247c0.568889 0 1.005037-0.410864 1.311605-1.232592l3.549235-7.793778z m59.878716 5.015704v9.260247h-16.975012v7.095309h18.902913v9.184395h-51.310617v-9.184395h21.680988v-7.09847h-19.753087v-9.260246h19.753087v-5.012544h10.726716v5.015704h16.971851z m1.311605 30.555654v9.260247h-5.325432v16.665284c0 2.778074-0.900741 5.12-2.699062 7.019457-1.390617 1.700346-3.473383 2.547358-6.251457 2.547358h-10.802568v-8.100346h-12.961185c-3.397531 0-5.556148-1.621333-6.482173-4.860839l-2.778074-10.802568h11.497877l0.847012 4.320395c0.360296 1.643457 1.210469 2.468346 2.547358 2.468346h7.638914v8.25521h6.479012c1.494914 0 2.24079-1.311605 2.24079-3.934815v-13.580642h-34.645333v-9.260247h34.645333v-3.700938h10.723556v3.704098h5.325432z" fill="#A2ADC2" p-id="3887"></path></svg>
diff --git a/src/assets/icons/brand.svg b/src/assets/icons/brand.svg
new file mode 100644
index 00000000..e4b7ceee
--- /dev/null
+++ b/src/assets/icons/brand.svg
@@ -0,0 +1 @@
+<svg t="1650625061372" class="icon" viewBox="0 0 1068 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28067" width="200" height="200"><path d="M520.557634 4.710624c18.292924-6.168675 39.008456-4.755487 56.21345 4.06011 5.820986 3.039474 11.462519 6.415422 17.193779 9.634348 98.867032 56.269529 197.734064 112.527842 296.58988 168.797371 19.60517 10.206353 33.075312 30.327448 36.866243 51.91781 45.872508 167.3954 91.924469 334.734721 137.830624 502.13012 4.531172 16.038554 4.665761 33.299628 0.257963 49.383045-8.322103 32.121972-35.273604 58.288368-67.54138 65.926309-118.943264 32.660329-237.897744 65.28701-356.818576 98.003417 21.657656-21.085652 42.608719-42.911544 64.333669-63.907469 10.24-3.544184 20.917415-5.843417 31.325652-8.916539 80.080613-21.982913 160.150011-43.977043 240.230624-65.959957 9.73529-2.669354 20.065016-4.777919 28.050646-11.384008 15.186156-11.271851 22.240876-32.054677 17.182563-50.257875-46.029529-167.731873-92.115137-335.45253-138.167097-503.173188-1.312245-5.720044-2.355312-11.731698-6.056517-16.487185-2.725433-4.048894-6.751895-6.942563-11.069968-9.084775-102.702826-58.422957-205.38322-116.890778-308.07483-175.324951-7.077152-4.284425-15.982475-5.51816-23.867163-2.893669-7.054721 2.209507-13.066375 7.290252-16.599343 13.761752-6.953779 12.270055-13.986068 24.495246-20.894983 36.787733-12.348565-8.64736-26.816911-15.017919-42.036714-15.724513 0.448631-2.523549 1.985192-4.632114 3.20771-6.819189 7.211742-12.595312 14.333757-25.246703 21.556715-37.8308 8.894107-15.287097 23.474611-27.142169 40.287053-32.637897z" p-id="28068"></path><path d="M26.099102 152.870975c13.07759-11.54103 30.394743-18.180767 47.846484-18.203198 119.302169-0.022432 238.593122 0.022432 357.89529-0.022432 21.971698-0.79632 43.472333 9.94839 57.413538 26.693538 120.479825 120.636846 241.105455 241.127886 361.630142 361.708653 5.59667 5.619102 11.417656 11.081183 16.083418 17.530252 12.875706 17.249858 19.369639 39.098182 18.057393 60.576385-1.031851 18.629398-7.918335 36.866243-19.39207 51.570121-4.463877 5.854633-9.903527 10.845652-15.073998 16.072201-109.936999 109.914567-219.806703 219.873998-329.788565 329.743702-15.915181 15.231019-37.393384 24.226068-59.342651 25.459803h-8.748302c-18.248061-1.031851-36.215728-7.245389-50.885958-18.191982-7.133231-5.136824-13.021512-11.686835-19.257481-17.810647L31.527536 636.988565c-5.742475-5.877065-11.978445-11.372793-16.733932-18.124688C5.73126 606.324644 0.852399 590.858094 0.986988 575.391544c0.011216-119.257306 0-238.525827 0-357.783132 0.033647-6.034085-0.2131-12.101818 0.515925-18.102256 2.041271-17.877941 11.013888-34.824973 24.596189-46.635181m44.840657 26.87299c-13.672026 1.469266-25.033604 13.974852-25.056035 27.74782-0.07851 122.240701 0.011216 244.492618-0.044863 366.733319-0.773888 10.206353 4.755487 19.549091 12.314918 25.953297 121.71356 121.691128 243.404688 243.393472 365.107032 365.0846 11.126046 11.126046 28.016999 16.218007 43.416254 12.853275 9.555838-2.018839 18.472377-6.942563 25.190624-14.053363 111.563286-111.619365 223.193866-223.182651 334.768368-334.802015 13.447711-13.436495 17.541468-35.127798 9.746506-52.501029-2.83759-6.718248-7.436057-12.528018-12.70747-17.496605-122.274348-122.263133-244.548697-244.515049-366.789397-366.789398-5.540591-6.987426-13.470142-12.954217-22.745586-12.954216-117.395487 0.011216-234.790975 0-352.186463 0.011215-3.678773 0.022432-7.357547-0.157021-11.013888 0.2131zM615.85805 215.522278c36.406396-0.50471 72.308083 18.169551 93.124557 47.992289 13.604732 19.156539 20.85012 42.619934 20.894983 66.094546-37.942957-38.088762-76.03172-76.042935-114.01954-114.086835z" p-id="28069"></path><path d="M247.262913 281.190624c25.616824-3.723636 52.444951 1.637503 74.584885 15.051567 22.083855 13.189748 39.434655 34.095947 48.227821 58.265936 9.982037 26.917853 9.196933 57.649069-2.209507 84.006134-11.103614 26.200044-32.514524 47.779189-58.557547 59.219277-23.014765 10.262432-49.472771 12.393428-73.878291 6.213538-29.116145-7.256605-54.901205-26.682322-70.031282-52.57954-13.772968-23.194217-18.752771-51.4131-13.862694-77.927186 4.026462-22.667076 15.231019-43.977043 31.583614-60.183833 17.171347-17.227426 40.040307-28.701161 64.143001-32.065893m3.398379 44.907952c-27.714173 4.867645-50.818664 28.398335-55.136736 56.21345-2.882453 16.834874 0.807536 34.690383 10.217569 48.956846 8.93897 13.750537 22.925038 24.169989 38.716845 28.633866 17.070405 4.946156 36.047492 2.904885 51.637416-5.641533 13.997284-7.570646 25.235487-20.121095 31.134983-34.914699 6.920131-17.014326 6.550011-36.82138-0.986988-53.566528-6.561227-14.827251-18.562103-27.130953-33.18747-34.118379-13.055159-6.31448-28.151588-8.266024-42.395619-5.563023zM597.239869 466.206002c18.046177-2.815159 37.225148 3.084337 50.470974 15.67965 8.266024 8.198729 17.3508 16.105849 22.28574 26.917853 11.126046 22.173582 6.639737 50.930821-10.845652 68.573231-66.857218 66.946944-133.804162 133.815378-200.695027 200.728675-7.77253 7.615509-15.006703 16.173143-24.91023 21.119299-21.590361 11.742913-50.168149 8.400613-68.404995-8.097788-9.163286-8.86046-19.134107-17.563899-24.293362-29.519912-10.475531-22.22966-5.484513-50.470975 11.978444-67.75448 70.098576-70.132223 140.2308-140.2308 210.340592-210.351807 9.118423-9.230581 21.231457-15.421687 34.073516-17.294721m6.415421 44.403242c-3.63391 0.538357-6.841621 2.557196-9.342738 5.181687-69.739671 69.773319-139.524206 139.51299-209.275093 209.286309-6.594874 6.078949-6.213538 17.50782 0.58322 23.295159 4.912508 4.295641 8.703439 10.520394 15.287098 12.415859 5.820986 1.738445 12.281271-0.392552 16.285301-4.845213 69.706024-69.750887 139.445696-139.445696 209.151719-209.185367 5.652749-5.22655 6.505148-14.659014 1.80574-20.760394-3.039474-3.678773-6.662169-6.819189-9.94839-10.251216-3.63391-3.981599-9.196933-6.10138-14.546857-5.136824z" p-id="28070"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/build.svg b/src/assets/icons/build.svg
deleted file mode 100644
index 97c46886..00000000
--- a/src/assets/icons/build.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568899741379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2054" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M960 591.424V368.96c0-0.288 0.16-0.512 0.16-0.768S960 367.68 960 367.424V192a32 32 0 0 0-32-32H96a32 32 0 0 0-32 32v175.424c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768v222.464c0 0.288-0.16 0.512-0.16 0.768s0.16 0.48 0.16 0.768V864a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32v-271.04c0-0.288 0.16-0.512 0.16-0.768S960 591.68 960 591.424z m-560-31.232v-160H608v160h-208z m208 64V832h-208v-207.808H608z m-480-224h208v160H128v-160z m544 0h224v160h-224v-160zM896 224v112.192H128V224h768zM128 624.192h208V832H128v-207.808zM672 832v-207.808h224V832h-224z" p-id="2055"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/checkbox.svg b/src/assets/icons/checkbox.svg
deleted file mode 100644
index 013fd3a2..00000000
--- a/src/assets/icons/checkbox.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575982282951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="902" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M828.40625 90.125H195.59375C137.375 90.125 90.125 137.375 90.125 195.59375v632.8125c0 58.21875 47.25 105.46875 105.46875 105.46875h632.8125c58.21875 0 105.46875-47.25 105.46875-105.46875V195.59375c0-58.21875-47.25-105.46875-105.46875-105.46875z m52.734375 738.28125c0 29.16-23.57015625 52.734375-52.734375 52.734375H195.59375c-29.109375 0-52.734375-23.574375-52.734375-52.734375V195.59375c0-29.109375 23.625-52.734375 52.734375-52.734375h632.8125c29.16 0 52.734375 23.625 52.734375 52.734375v632.8125z" p-id="903"></path><path d="M421.52890625 709.55984375a36.28125 36.28125 0 0 1-27.55265625-12.66890625L205.17453125 476.613125a36.28546875 36.28546875 0 0 1 55.10109375-47.22890625l164.986875 192.4846875 342.16171875-298.48078125a36.2896875 36.2896875 0 0 1 47.70984375 54.68765625L445.3859375 700.6203125a36.3234375 36.3234375 0 0 1-23.85703125 8.93953125z" p-id="904"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/client.svg b/src/assets/icons/client.svg
new file mode 100644
index 00000000..ad4bc15a
--- /dev/null
+++ b/src/assets/icons/client.svg
@@ -0,0 +1 @@
+<svg t="1650328614187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5090" width="200" height="200"><path d="M962.184 55.874H61.818C27.732 55.874 0 83.606 0 117.692v621.64c0 34.086 27.732 61.818 61.818 61.818h308.52v44.98c0 41.234-33.547 74.782-74.781 74.782h-67.995c-13.036 0-23.606 10.568-23.606 23.606 0 13.038 10.57 23.606 23.606 23.606h568.874c13.036 0 23.606-10.568 23.606-23.606 0-13.038-10.57-23.606-23.606-23.606h-67.997c-41.234 0-74.782-33.548-74.782-74.782v-44.978h308.52c34.087 0 61.821-27.732 61.821-61.819v-621.64c0.004-34.087-27.728-61.819-61.814-61.819zM391.84 920.916c16.092-20.672 25.714-46.616 25.714-74.782v-44.98h188.894v44.98c0 28.166 9.622 54.112 25.714 74.782H391.841zM976.79 739.333c0 8.054-6.552 14.608-14.608 14.608H61.818c-8.054 0-14.608-6.552-14.608-14.608V615.267h929.58v124.066z m0-171.28H47.212v-450.36c0-8.055 6.552-14.609 14.608-14.609h900.362c8.054 0 14.61 6.552 14.61 14.608v450.361z" fill="" p-id="5091"></path><path d="M486.531 684.611a25.476 25.476 0 1 0 50.952 0 25.476 25.476 0 1 0-50.952 0zM552.477 218.508c-9.22-9.218-24.162-9.218-33.386 0L352.263 385.337c-9.218 9.218-9.218 24.166 0 33.386a23.534 23.534 0 0 0 16.694 6.914 23.526 23.526 0 0 0 16.692-6.914l166.828-166.829c9.218-9.218 9.218-24.166 0-33.386z m98.88 96.679c-9.216-9.218-24.158-9.218-33.384-0.002l-66.46 66.456c-9.218 9.22-9.218 24.168 0 33.386a23.53 23.53 0 0 0 16.692 6.914c6.04 0 12.082-2.304 16.692-6.914l66.46-66.456c9.218-9.218 9.218-24.166 0-33.384z" fill="" p-id="5092"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/clipboard.svg b/src/assets/icons/clipboard.svg
deleted file mode 100644
index 90923ff6..00000000
--- a/src/assets/icons/clipboard.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.857 118.857h64V73.143H89.143c-1.902 0-3.52-.668-4.855-2.002-1.335-1.335-2.002-2.954-2.002-4.855V36.57H54.857v82.286zM73.143 16v-4.571a2.2 2.2 0 0 0-.677-1.61 2.198 2.198 0 0 0-1.609-.676H20.571c-.621 0-1.158.225-1.609.676a2.198 2.198 0 0 0-.676 1.61V16a2.2 2.2 0 0 0 .676 1.61c.451.45.988.676 1.61.676h50.285c.622 0 1.158-.226 1.61-.677.45-.45.676-.987.676-1.609zm18.286 48h21.357L91.43 42.642V64zM128 73.143v48c0 1.902-.667 3.52-2.002 4.855-1.335 1.335-2.953 2.002-4.855 2.002H52.57c-1.901 0-3.52-.667-4.854-2.002-1.335-1.335-2.003-2.953-2.003-4.855v-11.429H6.857c-1.902 0-3.52-.667-4.855-2.002C.667 106.377 0 104.759 0 102.857v-96c0-1.902.667-3.52 2.002-4.855C3.337.667 4.955 0 6.857 0h77.714c1.902 0 3.52.667 4.855 2.002 1.335 1.335 2.003 2.953 2.003 4.855V30.29c1 .622 1.856 1.29 2.569 2.003l29.147 29.147c1.335 1.335 2.478 3.145 3.429 5.43.95 2.287 1.426 4.383 1.426 6.291v-.018z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
new file mode 100644
index 00000000..5b5057f2
--- /dev/null
+++ b/src/assets/icons/close.svg
@@ -0,0 +1 @@
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M19.41 18l8.29-8.29a1 1 0 0 0-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 0 0-1.42 1.42l8.3 8.29l-8.3 8.29A1 1 0 1 0 9.7 27.7l8.3-8.29l8.29 8.29a1 1 0 0 0 1.41-1.41z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/close_all.svg b/src/assets/icons/close_all.svg
new file mode 100644
index 00000000..aa13cd75
--- /dev/null
+++ b/src/assets/icons/close_all.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M26 17H10a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/close_left.svg b/src/assets/icons/close_left.svg
new file mode 100644
index 00000000..e5708ea5
--- /dev/null
+++ b/src/assets/icons/close_left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" ></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/close_other.svg b/src/assets/icons/close_other.svg
new file mode 100644
index 00000000..212e6c28
--- /dev/null
+++ b/src/assets/icons/close_other.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z" fill="currentColor"></path></svg>
diff --git a/src/assets/icons/close_right.svg b/src/assets/icons/close_right.svg
new file mode 100644
index 00000000..14d3cf39
--- /dev/null
+++ b/src/assets/icons/close_right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="translate(24 0) scale(-1 1)"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/code.svg b/src/assets/icons/code.svg
deleted file mode 100644
index ed4d23cf..00000000
--- a/src/assets/icons/code.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1546567861908" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M318.577778 819.2L17.066667 512l301.511111-307.2 45.511111 45.511111L96.711111 512l267.377778 261.688889zM705.422222 819.2l-45.511111-45.511111L927.288889 512l-267.377778-261.688889 45.511111-45.511111L1006.933333 512zM540.785778 221.866667l55.751111 11.150222L483.157333 802.133333l-55.751111-11.093333z" fill="#bfbfbf" p-id="2423"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/color.svg b/src/assets/icons/color.svg
deleted file mode 100644
index 44a81aab..00000000
--- a/src/assets/icons/color.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577252187056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2508" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M747.59340925 691.12859384c11.51396329 0.25305413 22.43746719-0.21087818 40.74171707-1.51832482 29.35428085-2.10878421 35.84933734-2.36183835 46.47761114-0.8856895 24.71495444 3.37405491 41.12129828 21.76265671 32.47528161 47.95376084-85.57447632 258.19957947-442.00123984 249.76444099-628.67084683 50.73735554-153.47733892-159.33976008-153.09775772-414.41833795 0.92786545-573.42069196 159.71934128-162.67163983 424.03439521-166.59397897 565.78689185 0.63263534 80.38686649 94.81095318 108.34934958 169.16669549 89.11723508 230.57450162-15.01454608 47.99593598-50.61082928 77.68762207-119.77896259 114.63352789-4.89237973 2.65706845-29.35428085 15.52065436-35.84933652 19.02123633-46.94154346 25.30541465-63.51659033 41.20565021-62.20914449 58.45550757 2.95229856 39.13904114 24.16667102 52.7196135 70.98168823 53.81618115z m44.41100207 50.10472101c-19.82257471 1.43397372-32.05352527 1.940082-45.63409763 1.6448519-70.34905207-1.60267593-115.98314969-30.91478165-121.38163769-101.64341492-3.45840683-46.05585397 24.7571304-73.13264758 89.24376132-107.96976837 6.7902866-3.66928501 31.37871396-16.57504688 36.06021551-19.06341229 57.69634516-30.83042972 85.15271997-53.73183005 94.76877722-84.47790866 12.77923398-40.78389304-9.10994898-98.94417051-79.24812286-181.6507002-121.17075953-142.97559219-350.14258521-139.60153647-489.2380134 2.06660824-134.49827774 138.84237405-134.79350784 362.12048163-0.42175717 501.637667 158.53842169 168.99799328 451.9968783 181.18676788 534.57688175-11.80919339-4.68150156 0.2952301-10.71262573 0.67481131-18.72600705 1.26527069z" p-id="2509"></path><path d="M346.03865637 637.18588562a78.82636652 78.82636652 0 0 0 78.32025825-79.29029883c0-43.69401562-35.005823-79.29029883-78.32025825-79.29029882a78.82636652 78.82636652 0 0 0-78.36243338 79.29029882c0 43.69401562 35.005823 79.29029883 78.36243338 79.29029883z m0-51.7495729a27.07679361 27.07679361 0 0 1-26.5706845-27.54072593c0-15.30977536 11.97789643-27.54072593 26.5706845-27.54072592 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072592a27.07679361 27.07679361 0 0 1-26.57068533 27.54072593zM475.7289063 807.11174353a78.82636652 78.82636652 0 0 0 78.3624334-79.29029882c0-43.69401562-34.96364785-79.29029883-78.32025825-79.29029883a78.82636652 78.82636652 0 0 0-78.32025742 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029882z m0-51.74957208a27.07679361 27.07679361 0 0 1-26.57068532-27.54072674c0-15.30977536 12.06224753-27.54072593 26.57068532-27.54072593 14.59278892 0 26.57068533 12.23095057 26.57068453 27.54072593a27.07679361 27.07679361 0 0 1-26.57068453 27.54072674zM601.24376214 377.21492718a78.82636652 78.82636652 0 0 0 78.32025742-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025742-79.29029882a78.82636652 78.82636652 0 0 0-78.32025823 79.29029883c0 43.69401562 34.96364785 79.29029883 78.32025824 79.29029883z m1e-8-51.74957208a27.07679361 27.07679361 0 0 1-26.57068534-27.54072675c0-15.30977536 11.97789643-27.54072593 26.57068534-27.54072591 14.55061295 0 26.57068533 12.23095057 26.57068451 27.54072592a27.07679361 27.07679361 0 0 1-26.57068451 27.54072674zM378.80916809 433.85687983a78.82636652 78.82636652 0 0 0 78.32025824-79.29029883c0-43.69401562-34.96364785-79.29029883-78.32025824-79.29029802a78.82636652 78.82636652 0 0 0-78.32025742 79.29029802c0 43.69401562 34.96364785 79.29029883 78.32025742 79.29029883z m0-51.74957209a27.07679361 27.07679361 0 0 1-26.57068451-27.54072674c0-15.30977536 11.97789643-27.54072593 26.57068451-27.54072593 14.55061295 0 26.57068533 12.23095057 26.57068533 27.54072593a27.07679361 27.07679361 0 0 1-26.57068533 27.54072674z" p-id="2510"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/component.svg b/src/assets/icons/component.svg
deleted file mode 100644
index 29c34580..00000000
--- a/src/assets/icons/component.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575804206892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M826.56 470.016c-32.896 0-64.384 12.288-89.984 35.52l0-104.96c0-62.208-50.496-112.832-112.64-113.088L623.936 287.04 519.552 287.104C541.824 262.72 554.56 230.72 554.56 197.12c0-73.536-59.904-133.44-133.504-133.44-73.472 0-133.376 59.904-133.376 133.44 0 32.896 12.224 64.256 35.52 89.984L175.232 287.104l0 0.576C113.728 288.704 64 338.88 64 400.576l0.32 0 0.32 116.48C60.864 544.896 70.592 577.728 100.8 588.48c12.736 4.608 37.632 7.488 60.864-25.28 12.992-18.368 34.24-29.248 56.64-29.248 38.336 0 69.504 31.104 69.504 69.312 0 38.4-31.168 69.504-69.504 69.504-22.656 0-44.032-11.264-57.344-30.4C138.688 610.112 112.576 615.36 102.464 619.136c-29.824 10.752-39.104 43.776-38.144 67.392l0 160.384L64 846.912C64 909.248 114.752 960 177.216 960l446.272 0c62.4 0 113.152-50.752 113.152-113.152l0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.536 0 133.44-59.904 133.44-133.504C960 529.92 900.096 470.016 826.56 470.016zM826.56 672.896c-22.72 0-44.032-11.264-57.344-30.4-22.272-32.384-48.448-27.136-58.56-23.36-29.824 10.752-39.04 43.776-38.08 67.392l0 160.384c0 27.136-22.016 49.152-49.152 49.152L177.216 896.064C150.08 896 128 873.984 128 846.848l0.32 0 0-145.024c24.384 22.272 56.384 35.008 89.984 35.008 73.6 0 133.504-59.904 133.504-133.504 0-73.472-59.904-133.376-133.504-133.376-32.896 0-64.32 12.288-89.984 35.52l0-104.96L128 400.512c0-27.072 22.08-49.152 49.216-49.152L177.216 351.04 334.656 350.72c3.776 0.512 7.616 0.832 11.52 0.832 24.896 0 50.752-10.816 60.032-37.056 4.544-12.736 7.424-37.568-25.344-60.736C362.624 240.768 351.68 219.52 351.68 197.12c0-38.272 31.104-69.44 69.376-69.44 38.336 0 69.504 31.168 69.504 69.44 0 22.72-11.264 44.032-30.528 57.472C427.968 276.736 433.088 302.784 436.8 313.024c10.752 29.888 43.072 39.232 67.392 38.08l119.232 0 0 0.384c27.136 0 49.152 22.08 49.152 49.152l0.256 116.48c-3.776 27.84 6.016 60.736 36.224 71.488 12.736 4.608 37.632 7.488 60.8-25.28 13.056-18.368 34.24-29.248 56.704-29.248C864.832 534.016 896 565.12 896 603.392 896 641.728 864.832 672.896 826.56 672.896z" p-id="3146"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/coupon.svg b/src/assets/icons/coupon.svg
new file mode 100644
index 00000000..2f952b24
--- /dev/null
+++ b/src/assets/icons/coupon.svg
@@ -0,0 +1 @@
+<svg t="1656952898982" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1483" width="200" height="200"><path d="M896 170.666667a85.333333 85.333333 0 0 1 85.333333 85.333333v170.666667h-85.333333l-6.4 0.213333a85.333333 85.333333 0 0 0 0 170.24L896 597.333333h85.333333v170.666667a85.333333 85.333333 0 0 1-85.333333 85.333333H128a85.333333 85.333333 0 0 1-85.333333-85.333333v-170.666667h85.333333a85.333333 85.333333 0 0 0 6.4-170.453333L128 426.666667H42.666667V256a85.333333 85.333333 0 0 1 85.333333-85.333333h768z m0 42.666666H128a42.666667 42.666667 0 0 0-42.368 37.674667L85.333333 256v128h44.245334l7.936 0.341333a128 128 0 0 1-2.005334 255.445334L128 640H85.333333v128a42.666667 42.666667 0 0 0 37.674667 42.368L128 810.666667h192v-42.666667h42.666667v42.666667H896a42.666667 42.666667 0 0 0 42.368-37.674667L938.666667 768v-128h-44.245334l-7.936-0.341333A128 128 0 0 1 768 512a128.213333 128.213333 0 0 1 112.554667-126.976l7.509333-0.768L896 384h42.666667V256a42.666667 42.666667 0 0 0-37.674667-42.368L896 213.333333zM362.666667 682.666667v42.666666h-42.666667v-42.666666h42.666667z m160.938666-327.082667l2.474667 2.816 1.962667 3.328 47.914666 100.096 48-100.096a21.333333 21.333333 0 0 1 39.850667 14.805333l-1.365333 3.626667-52.608 109.696 55.04 0.042667a21.333333 21.333333 0 0 1 3.84 42.325333l-3.84 0.341333L597.333333 532.522667v43.050666l67.541334 0.042667a21.333333 21.333333 0 0 1 3.84 42.325333l-3.84 0.341334L597.333333 618.24V682.666667a21.333333 21.333333 0 0 1-42.325333 3.84L554.666667 682.666667v-64.426667l-67.541334 0.042667a21.333333 21.333333 0 0 1-3.84-42.325334l3.84-0.341333L554.666667 575.573333v-43.050666l-67.541334 0.042666a21.333333 21.333333 0 0 1-3.84-42.325333l3.84-0.341333 54.997334-0.042667-52.565334-109.696a21.333333 21.333333 0 0 1 34.048-24.576zM362.666667 597.333333v42.666667h-42.666667v-42.666667h42.666667z m0-85.333333v42.666667h-42.666667v-42.666667h42.666667z m0-85.333333v42.666666h-42.666667v-42.666666h42.666667z m0-85.333334v42.666667h-42.666667V341.333333h42.666667z m0-85.333333v42.666667h-42.666667V256h42.666667z" p-id="1484"></path></svg>
diff --git a/src/assets/icons/date-range.svg b/src/assets/icons/date-range.svg
deleted file mode 100644
index fda571e7..00000000
--- a/src/assets/icons/date-range.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579774833889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1376" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M887.466667 192.853333h-100.693334V119.466667c0-10.24-6.826667-17.066667-17.066666-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H303.786667V119.466667c0-10.24-6.826667-17.066667-17.066667-17.066667s-17.066667 6.826667-17.066667 17.066667v73.386666H168.96c-46.08 0-85.333333 37.546667-85.333333 85.333334V836.266667c0 46.08 37.546667 85.333333 85.333333 85.333333H887.466667c46.08 0 85.333333-37.546667 85.333333-85.333333V278.186667c0-47.786667-37.546667-85.333333-85.333333-85.333334z m-718.506667 34.133334h100.693333v66.56c0 10.24 6.826667 17.066667 17.066667 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56h450.56v66.56c0 10.24 6.826667 17.066667 17.066666 17.066666s17.066667-6.826667 17.066667-17.066666v-66.56H887.466667c27.306667 0 51.2 22.186667 51.2 51.2v88.746666H117.76v-88.746666c0-29.013333 22.186667-51.2 51.2-51.2zM887.466667 887.466667H168.96c-27.306667 0-51.2-22.186667-51.2-51.2V401.066667H938.666667V836.266667c0 27.306667-22.186667 51.2-51.2 51.2z" p-id="1377"></path><path d="M858.453333 493.226667H327.68c-10.24 0-17.066667 6.826667-17.066667 17.066666v114.346667h-116.053333c-10.24 0-17.066667 6.826667-17.066667 17.066667v133.12c0 10.24 6.826667 17.066667 17.066667 17.066666H460.8c10.24 0 17.066667-6.826667 17.066667-17.066666v-114.346667h380.586666c10.24 0 17.066667-6.826667 17.066667-17.066667v-133.12c0-10.24-6.826667-17.066667-17.066667-17.066666z m-413.013333 34.133333v97.28h-98.986667v-97.28h98.986667z m-230.4 131.413333h98.986667v98.986667h-98.986667v-98.986667z m131.413333 97.28v-97.28h98.986667v97.28h-98.986667z m133.12-228.693333h97.28v98.986667h-97.28v-98.986667z m131.413334 0h98.986666v98.986667h-98.986666v-98.986667z m230.4 97.28h-98.986667v-98.986667h98.986667v98.986667z" p-id="1378"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/date.svg b/src/assets/icons/date.svg
deleted file mode 100644
index 52dc73ee..00000000
--- a/src/assets/icons/date.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577186573535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1068" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M479.85714249 608.42857168h64.28571502c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285751s-12.85714249-32.14285751-32.14285664-32.14285664h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285662s12.85714249 32.14285751 32.14285664 32.14285753z m-2e-8 122.14285665h64.28571504c19.28571417 0 32.14285751-12.85714249 32.14285664-32.14285665s-12.85714249-32.14285751-32.14285664-32.14285751h-64.28571504c-19.28571417 0-32.14285751 12.85714249-32.14285664 32.14285751s12.85714249 32.14285751 32.14285664 32.14285664z m353.57142921-559.28571416h-128.57142921v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285664-32.14285753s-32.14285751 12.85714249-32.14285751 32.14285753v32.14285664h-257.14285665v-32.14285664c0-19.28571417-12.85714249-32.14285751-32.14285752-32.14285753s-32.14285751 12.85714249-32.14285664 32.14285753v32.14285664h-128.57142919c-70.71428585 0-128.57142832 57.85714249-128.57142832 122.14285751v501.42857081c0 70.71428585 57.85714249 128.57142832 128.57142832 122.14285751h642.85714335c70.71428585 0 128.57142832-57.85714249 128.57142833-122.14285751v-501.42857081c0-70.71428585-57.85714249-122.14285753-128.57142833-122.14285751z m64.28571415 623.57142832c0 32.14285751-32.14285751 64.28571415-64.28571416 64.28571504h-642.85714335c-32.14285751 0-64.28571415-25.71428583-64.28571417-64.28571504v-372.85714249h771.42857168v372.85714249z m0-437.14285664h-771.42857168v-64.28571417c0-32.14285751 32.14285751-64.28571415 64.28571417-64.28571415h128.57142919v32.14285664c0 19.28571417 12.85714249 32.14285751 32.14285664 32.14285751s32.14285751-12.85714249 32.14285753-32.14285751v-32.14285664h257.14285665v32.14285664c0 19.28571417 12.85714249 32.14285751 32.1428575 32.14285751s32.14285751-12.85714249 32.14285664-32.14285751v-32.14285664h128.57142921c32.14285751 0 64.28571415 25.71428583 64.28571415 64.28571415v64.28571417z m-610.71428583 372.85714247h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285664s-12.85714249-32.14285751-32.14285753-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285751s12.85714249 32.14285751 32.14285751 32.14285665z m385.71428583-122.14285664h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285751s-12.85714249-32.14285751-32.14285751-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285664s12.85714249 32.14285751 32.14285753 32.14285751z m-385.71428583 0h64.28571415c19.28571417 0 32.14285751-12.85714249 32.14285753-32.14285751s-12.85714249-32.14285751-32.14285753-32.14285664h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285751 32.14285664s12.85714249 32.14285751 32.14285751 32.14285751z m385.71428583 122.14285665h64.28571417c19.28571417 0 32.14285751-12.85714249 32.14285751-32.14285665s-12.85714249-32.14285751-32.14285751-32.14285751h-64.28571415c-19.28571417 0-32.14285751 12.85714249-32.14285753 32.14285751s12.85714249 32.14285751 32.14285753 32.14285665z" p-id="1069"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dict.svg b/src/assets/icons/dict.svg
index 48493773..22a82781 100644
--- a/src/assets/icons/dict.svg
+++ b/src/assets/icons/dict.svg
@@ -1 +1,18 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566035680909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3601" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1002.0848 744.672l-33.568 10.368c0.96 7.264 2.144 14.304 2.144 21.76 0 7.328-1.184 14.432-2.368 21.568l33.792 10.56c7.936 2.24 14.496 7.616 18.336 14.752 3.84 7.328 4.672 15.808 1.952 23.552-5.376 16-23.168 24.672-39.936 19.68l-34.176-10.624c-7.136 12.8-15.776 24.672-26.208 35.2l20.8 27.488a28.96 28.96 0 0 1 5.824 22.816 29.696 29.696 0 0 1-12.704 19.616 32.544 32.544 0 0 1-44.416-6.752l-20.8-27.552c-13.696 6.56-28.192 11.2-43.008 13.888v33.632c0 16.736-14.112 30.432-31.648 30.432-17.6 0-31.872-13.696-31.872-30.432v-33.632a167.616 167.616 0 0 1-42.88-13.888l-20.928 27.552c-10.72 13.76-30.08 16.64-44.288 6.752a29.632 29.632 0 0 1-12.704-19.616 29.28 29.28 0 0 1 5.696-22.816l20.896-27.808a166.72 166.72 0 0 1-27.008-34.688l-33.376 10.432c-16.8 5.184-34.56-3.552-39.936-19.616a29.824 29.824 0 0 1 20.224-38.24l33.472-10.432c-0.8-7.264-2.016-14.304-2.016-21.824 0-7.36 1.184-14.496 2.304-21.632l-33.792-10.368c-16.672-5.376-25.632-22.496-20.224-38.432 5.376-16 23.136-24.672 39.936-19.68l34.016 10.752c7.328-12.672 15.84-24.8 26.336-35.328l-20.8-27.552a29.44 29.44 0 0 1 6.944-42.432 32.704 32.704 0 0 1 44.384 6.752l20.832 27.616c13.696-6.432 28.224-11.2 43.104-13.952v-33.568c0-16.736 14.048-30.432 31.648-30.432 17.536 0 31.808 13.568 31.808 30.432v33.504c15.072 2.688 29.344 7.808 42.848 14.016l20.992-27.616a32.48 32.48 0 0 1 44.224-6.752 29.568 29.568 0 0 1 7.136 42.432l-21.024 27.808c10.432 10.432 19.872 21.888 27.04 34.752l33.376-10.432c16.768-5.12 34.56 3.68 39.936 19.68 5.536 15.936-3.712 33.056-20.32 38.304z m-206.016-74.432c-61.344 0-111.136 47.808-111.136 106.56 0 58.88 49.792 106.496 111.136 106.496 61.312 0 111.104-47.616 111.104-106.496 0-58.752-49.792-106.56-111.104-106.56z" p-id="3602"></path><path d="M802.7888 57.152h-76.448c0-22.08-21.024-38.24-42.848-38.24H39.3968a39.68 39.68 0 0 0-39.36 40.032v795.616s41.888 120.192 110.752 120.192H673.2848a227.488 227.488 0 0 1-107.04-97.44H117.6368s-40.608-13.696-40.608-41.248l470.304-0.256 1.664 3.36a227.68 227.68 0 0 1-12.64-73.632c0-60.576 24-118.624 66.88-161.44a228.352 228.352 0 0 1 123.552-63.392l-3.2 0.288 2.144-424.672h38.208l0.576 421.024c27.04 0 52.672 4.8 76.64 13.344V101.536c0.032 0-6.304-44.384-38.368-44.384zM149.7648 514.336H72.3888v-77.408H149.7648v77.408z m0-144.32H72.3888v-77.44H149.7648v77.44z m0-137.248H72.3888v-77.44H149.7648v77.44z m501.856 281.568H206.0848v-77.408h445.536v77.408z m0-144.32H206.0848v-77.44h445.536v77.44z m0-137.248H206.0848v-77.44h445.536v77.44z" p-id="3603"></path></svg>
\ No newline at end of file
+<svg t="1655030231175" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3473"
+  width="200" height="200">
+  <path
+    d="M449.6 116.2H303.8c-14.2 0-25.7-11.5-25.7-25.7s11.5-25.7 25.7-25.7h145.8c14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7z m0 0"
+    p-id="3474"></path>
+  <path
+    d="M160.1 859.3c-14.2 0-25.7-11.5-25.7-25.7V167.4c0-56.6 46-102.6 102.6-102.6h66.8c14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7H237c-28.2 0-51.1 22.9-51.1 51.1v666.2c-0.1 14.3-11.6 25.8-25.8 25.8z m0 0M533.6 346.7c-6.3 0-12.4-1.3-17.6-3.5-13.5-5.8-21.9-17.9-21.9-31.6v-221c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v189l27.7-26.6c14.1-13.5 36.1-13.5 50.1 0l22.1 21.3V90.5c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v219.6c0 14.5-8.6 27.5-22 33.2-13.3 5.7-28.7 2.9-39.2-7.2l-37.5-36-37.5 36c-7.6 7.6-17.5 10.6-27 10.6z m0 0"
+    p-id="3475"></path>
+  <path
+    d="M846.1 958.9H236.9c-56.6 0-102.6-46-102.6-102.6v-22.8c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v22.8c0 28.2 22.9 51.1 51.1 51.1H846c14.2 0 25.7 11.5 25.7 25.7 0.1 14.3-11.4 25.8-25.6 25.8z m0 0"
+    p-id="3476"></path>
+  <path
+    d="M160.1 876h-0.9c-14.2-0.5-25.3-12.4-24.8-26.6 1-28.2 6.3-48.5 16.7-63.6 13.8-20.1 35.4-30.3 64.3-30.3h615c3.2-2.7 6.4-6.1 8.6-8.6V133.1c-1.8-5.1-11.7-15-16.8-16.8H449.6c-14.2 0-25.7-11.5-25.7-25.7s11.5-25.7 25.7-25.7h373.6c19.8 0 36.7 13.9 45 22.2 8.3 8.3 22.2 25.2 22.2 45v621.6c0 10.8-6.2 19.6-12.3 26.7-4.6 5.4-10.3 11-15.6 15.4-1 0.9-2.1 1.7-3.2 2.5-5.4 4.1-12.9 8.8-22.3 8.8H215.3c-15 0-28 0-29.5 44.2-0.5 13.8-11.9 24.7-25.7 24.7z m0 0"
+    p-id="3477"></path>
+  <path
+    d="M284.4 806.4c-14.2 0-25.7-11.5-25.7-25.7V90.5c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v690.1c0 14.3-11.5 25.8-25.7 25.8z m0 0M844.9 959h-1.6c-6.6-0.3-30-2.3-52.2-16.9-19.5-12.7-42.6-38-42.6-86.3 0-62.3 35.7-101 93.1-101 14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7c-12.5 0-41.7 0-41.7 49.6 0 21 6.6 35.3 20.1 43.8 10.6 6.6 22.1 7.8 25 8 1.4-0.1 2.9 0 4.4 0.2 13.7 1.7 23.6 14 22.5 27.7-0.9 9.5-8.8 23.5-27 23.5z m-1.8-51.3c-1.1 0.1-2.3 0.3-3.4 0.6 1.1-0.3 2.2-0.5 3.4-0.6z m0 0"
+    p-id="3478"></path>
+</svg>
diff --git a/src/assets/icons/dict_item.svg b/src/assets/icons/dict_item.svg
new file mode 100644
index 00000000..903109a7
--- /dev/null
+++ b/src/assets/icons/dict_item.svg
@@ -0,0 +1,12 @@
+<svg t="1655022848495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2190"
+  width="200" height="200">
+  <path d="M239.9 492.6m-42 0a42 42 0 1 0 84 0 42 42 0 1 0-84 0Z" p-id="2191"></path>
+  <path d="M826 513.5H378.5c-11.6 0-21-9.4-21-21s9.4-21 21-21H826c11.6 0 21 9.4 21 21s-9.4 21-21 21z" p-id="2192">
+  </path>
+  <path d="M239.9 632.4m-42 0a42 42 0 1 0 84 0 42 42 0 1 0-84 0Z" p-id="2193"></path>
+  <path d="M826 653.4H378.5c-11.6 0-21-9.4-21-21s9.4-21 21-21H826c11.6 0 21 9.4 21 21s-9.4 21-21 21z" p-id="2194">
+  </path>
+  <path
+    d="M882.6 234.9H531.2l-29-46.3c-6.9-11.7-35-54.7-77.8-54.7h-304c-30.9 0-55.9 25-55.9 55.9v623.3c0 42.4 34.5 76.9 76.9 76.9h741.2c42.4 0 76.9-34.5 76.9-76.9V311.8c0-42.4-34.5-76.9-76.9-76.9z m34.9 578.2c0 19.3-15.7 35-35 35H141.4c-19.3 0-35-15.7-35-35V311.8c0-19.3 15.7-35 35-35h741.2c19.3 0 35 15.7 35 35v501.3z"
+    p-id="2195"></path>
+</svg>
diff --git a/src/assets/icons/document.svg b/src/assets/icons/document.svg
new file mode 100644
index 00000000..918ae33d
--- /dev/null
+++ b/src/assets/icons/document.svg
@@ -0,0 +1 @@
+<svg t="1675604765384" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21161" width="200" height="200"><path d="M832.1 185.1H609.4l-17.1-62c-9.6-34.6-40.5-58.8-75.3-58.8H196c-43.2 0-78.3 36.4-78.3 81.1V897c0 35.3 28.7 64 64 64H832c35.3 0 64-28.7 64-64V249c0.1-35.2-28.6-63.9-63.9-63.9z m-644.4-39.7c0-6.6 4.4-11.1 8.3-11.1h321c3.4 0 6.6 3.1 7.8 7.4l12 43.4H187.7v-39.7z m638.4 745.8H187.7V255.1h638.4v636.1z" p-id="21162"></path><path d="M346.1 415.1m-35 0a35 35 0 1 0 70 0 35 35 0 1 0-70 0Z" p-id="21163"></path><path d="M462.3 380.1h257.8v70H462.3z" p-id="21164"></path><path d="M346.1 582.3m-35 0a35 35 0 1 0 70 0 35 35 0 1 0-70 0Z" p-id="21165"></path><path d="M462.3 547.3h257.8v70H462.3z" p-id="21166"></path><path d="M346.1 749.5m-35 0a35 35 0 1 0 70 0 35 35 0 1 0-70 0Z" p-id="21167"></path><path d="M462.3 714.5h257.8v70H462.3z" p-id="21168"></path></svg>
diff --git a/src/assets/icons/documentation.svg b/src/assets/icons/documentation.svg
deleted file mode 100644
index 70431228..00000000
--- a/src/assets/icons/documentation.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M71.984 44.815H115.9L71.984 9.642v35.173zM16.094.05h63.875l47.906 38.37v76.74c0 3.392-1.682 6.645-4.677 9.044-2.995 2.399-7.056 3.746-11.292 3.746H16.094c-4.236 0-8.297-1.347-11.292-3.746-2.995-2.399-4.677-5.652-4.677-9.044V12.84C.125 5.742 7.23.05 16.094.05zm71.86 102.32V89.58h-71.86v12.79h71.86zm23.952-25.58V64H16.094v12.79h95.812z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg
index c8969513..61ec1f9f 100644
--- a/src/assets/icons/download.svg
+++ b/src/assets/icons/download.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569915748289" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3062" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M768.35456 416a256 256 0 1 0-512 0 192 192 0 1 0 0 384v64a256 256 0 0 1-58.88-505.216 320.128 320.128 0 0 1 629.76 0A256.128 256.128 0 0 1 768.35456 864v-64a192 192 0 0 0 0-384z m-512 384h64v64H256.35456v-64z m448 0h64v64h-64v-64z" fill="#333333" p-id="3063"></path><path d="M539.04256 845.248V512.192a32.448 32.448 0 0 0-32-32.192c-17.664 0-32 14.912-32 32.192v333.056l-36.096-36.096a32.192 32.192 0 0 0-45.056 0.192 31.616 31.616 0 0 0-0.192 45.056l90.88 90.944a31.36 31.36 0 0 0 22.528 9.088 30.08 30.08 0 0 0 22.4-9.088l90.88-90.88a32.192 32.192 0 0 0-0.192-45.12 31.616 31.616 0 0 0-45.056-0.192l-36.096 36.096z" fill="#333333" p-id="3064"></path></svg>
\ No newline at end of file
+<svg t="1675606213335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17495" width="200" height="200"><path d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7c3.2 4.1 9.4 4.1 12.6 0l112-141.7c4.1-5.2 0.4-12.9-6.3-12.9z" p-id="17496"></path><path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6 0.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4 14.9-19.2 32.6-35.9 52.4-49.9 41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7-23.4 23.4-54.5 36.3-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z" p-id="17497"></path></svg>
diff --git a/src/assets/icons/druid.svg b/src/assets/icons/druid.svg
deleted file mode 100644
index a2b4b4ed..00000000
--- a/src/assets/icons/druid.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036347051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M832 128H192a64.19 64.19 0 0 0-64 64v640a64.19 64.19 0 0 0 64 64h640a64.19 64.19 0 0 0 64-64V192a64.19 64.19 0 0 0-64-64z m0 703.89l-0.11 0.11H192.11l-0.11-0.11V768h640zM832 544H720L605.6 696.54 442.18 435.07 333.25 544H192v-64h114.75l147.07-147.07L610.4 583.46 688 480h144z m0-288H192v-63.89l0.11-0.11h639.78l0.11 0.11z" p-id="5854"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/education.svg b/src/assets/icons/education.svg
deleted file mode 100644
index 7bfb01d1..00000000
--- a/src/assets/icons/education.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M88.883 119.565c-7.284 0-19.434 2.495-21.333 8.25v.127c-4.232.13-5.222 0-7.108 0-1.895-5.76-14.045-8.256-21.333-8.256H0V0h42.523c9.179 0 17.109 5.47 21.47 13.551C68.352 5.475 76.295 0 85.478 0H128v119.57l-39.113-.005h-.004zM60.442 24.763c0-9.651-8.978-16.507-17.777-16.507H7.108V111.43H39.11c7.054-.14 18.177.082 21.333 6.12v-4.628c-.134-5.722-.004-13.522 0-13.832V27.413l.004-2.655-.004.005zm60.442-16.517h-35.55c-8.802 0-17.78 6.856-17.78 16.493v74.259c.004.32.138 8.115 0 13.813v4.627c3.155-6.022 14.279-6.26 21.333-6.114h32V8.25l-.003-.005z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/email.svg b/src/assets/icons/email.svg
deleted file mode 100644
index 74d25e21..00000000
--- a/src/assets/icons/email.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="96" xmlns="http://www.w3.org/2000/svg"><path d="M64.125 56.975L120.188.912A12.476 12.476 0 0 0 115.5 0h-103c-1.588 0-3.113.3-4.513.838l56.138 56.137z"/><path d="M64.125 68.287l-62.3-62.3A12.42 12.42 0 0 0 0 12.5v71C0 90.4 5.6 96 12.5 96h103c6.9 0 12.5-5.6 12.5-12.5v-71a12.47 12.47 0 0 0-1.737-6.35L64.125 68.287z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/example.svg b/src/assets/icons/example.svg
deleted file mode 100644
index 46f42b53..00000000
--- a/src/assets/icons/example.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/excel.svg b/src/assets/icons/excel.svg
deleted file mode 100644
index 74d97b80..00000000
--- a/src/assets/icons/excel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.208 16.576v8.384h38.72v5.376h-38.72v8.704h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.576h38.72v5.376h-38.72v8.512h38.72v5.376h-38.72v11.136H128v-94.72H78.208zM0 114.368L72.128 128V0L0 13.632v100.736z"/><path d="M28.672 82.56h-11.2l14.784-23.488-14.08-22.592h11.52l8.192 14.976 8.448-14.976h11.136l-14.08 22.208L58.368 82.56H46.656l-8.768-15.68z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/form.svg b/src/assets/icons/form.svg
deleted file mode 100644
index 9ab55a03..00000000
--- a/src/assets/icons/form.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1612248825727" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2133" width="128" height="128"><path d="M219.274 937.929c-55.89 0-101.359-45.502-101.359-101.427V251.879c0-57.479 46.708-106.035 101.996-106.035h396.04v56.951H219.91c-23.74 0-45.359 23.392-45.359 49.084v584.623c0 24.686 20.064 44.77 44.722 44.77h584.26c25.918 0 49.515-21.604 49.515-45.332V439.9h56.958v396.04c0 54.329-49.755 101.989-106.473 101.989h-584.26z m17.556-90.656c-9.038 0-17.174-4.225-22.316-11.593-6.02-8.628-7.114-19.995-3-31.177l105.543-213.708c1.945-10.565 6.485-19.543 13.23-26.288l378.709-378.955c9.95-9.95 23.172-15.428 37.237-15.428 14.052 0 27.281 5.478 37.245 15.421l86.067 86.144c9.943 9.943 15.42 23.18 15.42 37.258s-5.477 27.308-15.427 37.244L490.823 725.166c-6.888 6.902-15.804 11.34-27.26 13.572L251.396 843.835c-4.91 2.274-9.82 3.438-14.566 3.438z m28.453-68.798c-1.41 2.87-1.267 6.06 0.328 8.642 1.541 2.493 4.24 3.985 7.21 3.985 1.487 0 3.02-0.363 4.555-1.081l126.928-76.892-61.958-62.047-77.063 127.393z m107.864-176.703l80.432 80.507 269.79-269.961-81.015-79.932-269.207 269.386z m373.079-364.883c-5.43 0-10.546 2.123-14.394 5.985l-47.646 47.631 79.323 81.679 48.769-48.823c7.937-7.937 7.937-20.872-0.007-28.836l-51.617-51.651c-3.869-3.862-8.991-5.985-14.428-5.985zM534.497 790.903v-56.952h252.986v56.952H534.497z m122.518-98.017v-56.952h130.468v56.952H657.015zM240.44 447.844v-56.959h130.467v56.959H240.44z m0-98.024v-56.952h252.985v56.952H240.44z" p-id="2134" fill="#666666"></path></svg>
diff --git a/src/assets/icons/goods-list.svg b/src/assets/icons/goods-list.svg
new file mode 100644
index 00000000..fcb971ed
--- /dev/null
+++ b/src/assets/icons/goods-list.svg
@@ -0,0 +1 @@
+<svg t="1650624175386" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12087" width="200" height="200"><path d="M879.2064 234.7008l-89.8048 0L789.4016 197.632c0-6.2464-0.6144-12.3904-1.6384-18.3296-2.1504-11.776-6.3488-22.8352-12.1856-32.5632-11.6736-19.3536-29.696-33.4848-50.7904-38.4-5.2224-1.2288-10.6496-1.8432-16.2816-1.8432L144.7936 106.496c-5.5296 0-10.9568 0.6144-16.2816 1.8432-20.992 4.9152-39.1168 18.944-50.7904 38.4-5.8368 9.728-10.0352 20.6848-12.1856 32.5632-1.1264 5.9392-1.6384 11.9808-1.6384 18.3296l0 457.9328c0 6.2464 0.6144 12.3904 1.6384 18.3296 2.1504 11.776 6.3488 22.8352 12.1856 32.4608 11.6736 19.3536 29.696 33.4848 50.7904 38.4 5.2224 1.2288 10.6496 1.8432 16.2816 1.8432l47.2064 0L192 826.368c0 50.0736 36.352 91.0336 80.7936 91.0336l606.3104 0c44.4416 0 80.7936-40.96 80.7936-91.0336L959.8976 426.7008l0 0c0 0 0 0 0 0l0-100.9664C960 275.6608 923.648 234.7008 879.2064 234.7008zM192 325.7344l0 378.2656-47.2064 0c-20.6848 0-38.1952-22.1184-38.1952-48.3328L106.5984 197.632c0-26.2144 17.5104-48.3328 38.1952-48.3328l563.6096 0c20.6848 0 38.1952 22.1184 38.1952 48.3328l0 36.9664-85.2992 0L490.7008 234.5984 272.896 234.5984C228.352 234.7008 192 275.6608 192 325.7344zM661.2992 277.2992l0 378.9824-66.2528-33.0752-19.0464-9.5232-19.0464 9.5232-66.2528 33.0752L490.7008 426.7008l0 0c0 0 0 0 0 0L490.7008 277.2992 661.2992 277.2992zM448 277.2992l0 128L234.7008 405.2992l0-79.6672c0-26.2144 17.5104-48.3328 38.1952-48.3328L448 277.2992zM917.2992 826.368c0 26.2144-17.5104 48.3328-38.1952 48.3328L272.896 874.7008c-20.6848 0-38.1952-22.1184-38.1952-48.3328L234.7008 448l213.2992 0 0 213.2992c0 23.4496 19.2512 42.7008 42.7008 42.7008l85.2992-42.7008 85.2992 42.7008c23.4496 0 42.7008-19.1488 42.7008-42.7008L704 448l213.2992 0L917.2992 826.368zM917.2992 405.2992 704 405.2992l0-128 175.2064 0c20.6848 0 38.1952 22.1184 38.1952 48.3328L917.4016 405.2992z" p-id="12088"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/goods.svg b/src/assets/icons/goods.svg
new file mode 100644
index 00000000..60c1c734
--- /dev/null
+++ b/src/assets/icons/goods.svg
@@ -0,0 +1 @@
+<svg t="1650329871849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10813" width="200" height="200"><path d="M909.7 219.4l-6.1-3.2V87.5c0-4.6-1.8-8.7-4.2-12.2-0.3-0.4-0.5-0.8-0.8-1.2-1.1-1.3-2.2-2.5-3.6-3.5-0.7-0.6-1.5-1.1-2.3-1.5-1.2-0.7-2.4-1.4-3.8-1.9-1.8-0.7-3.8-1-5.8-1.2-0.5 0-0.9-0.3-1.4-0.3H139.9c-9.7 0-18.2 6.3-20.9 15.6-1.4 4.6-1.2 9.4 0.4 13.7-0.7 2.1-1.3 4.2-1.3 6.5v114.7l-6.4 3.2c-9 1.2-15.7 5.3-15.7 15.1v690.2l2 1.9c2.4 18.1 16.9 32 35.3 33.1l0.5 0.4h752.4c20.4 0 36.6-15.9 38-35.9l1-0.9V234.6c0.1-9.9-6.5-13.9-15.5-15.2z m-88.3-110.1l-58.6 37.5c-5.6 4.3-8.8 11.1-8.5 18.1 0.3 7.1 3.9 13.6 9.8 17.4l66.3 36.5H194.8l73-37.8c6.3-3.9 10.2-10.8 10.4-18.3 0.1-7.5-3.6-14.5-9.9-18.5l-64.7-34.9h617.8z m38.6 17.3v66.7l-57.9-30.5 57.9-36.2z m-698.2-1.3l63.4 36.7-63.4 32.1v-68.8z m719.9 791.3h-742V262.5h741.9v654.1zM340.1 423.2c15.9 86.5 78.5 143.9 163.2 143.9 84.6 0 147.2-57.2 163.2-143.6 13.3-7 22.5-20.8 22.5-36.8 0-23-18.7-41.8-41.8-41.8-23 0-41.8 18.7-41.8 41.8 0 13.6 6.6 25.6 16.7 33.2C610 476 572.2 523.5 503.2 523.5c-68.9 0-106.6-47.3-118.8-103.3 10.3-7.6 17.1-19.7 17.1-33.5 0-23-18.8-41.8-41.8-41.8-23 0-41.7 18.7-41.7 41.8 0.1 15.8 9.1 29.5 22.1 36.5z" p-id="10814"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/homepage.svg b/src/assets/icons/homepage.svg
new file mode 100644
index 00000000..48f4e249
--- /dev/null
+++ b/src/assets/icons/homepage.svg
@@ -0,0 +1 @@
+<svg t="1650814907622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="52318" width="200" height="200"><path d="M958.400956 451.54921c-0.058328-5.760191-2.597151-11.215436-6.965645-14.97097L524.345166 69.511143c-7.498788-6.445806-18.581194-6.445806-26.079982 0L309.582871 231.6755l0-102.017488c0-11.04966-8.901741-19.532869-19.951401-19.532869l-88.034009 0c-11.048637 0-19.928888 8.482185-19.928888 19.532869l0 211.954343L71.176063 436.57824c-4.423753 3.800559-6.967692 9.341762-6.967692 15.173584l0 105.500822c0 7.819083 4.554736 14.921851 11.660574 18.183128 2.670829 1.226944 5.51562 1.824555 8.343015 1.824555 4.699022 0 9.346879-1.654686 13.048177-4.836145l53.29788-45.825698 0 324.100516c0 60.677964 49.364291 110.042255 110.042255 110.042255L764.792447 960.741257c60.677964 0 110.042255-49.364291 110.042255-110.042255L874.834702 527.026228l51.585889 44.335764c5.955642 5.119601 14.356986 6.282077 21.481244 2.965541 7.122211-3.313465 11.645225-10.488889 11.565407-18.342764L958.400956 451.54921zM221.578538 150.034085l48.095391 0 0 115.941616-48.095391 41.336454L221.578538 150.034085zM570.718333 920.725892 436.666244 920.725892 436.666244 700.642404c0-11.031241 8.976442-20.007683 20.007683-20.007683l94.0357 0c11.031241 0 20.007683 8.976442 20.007683 20.007683L570.71731 920.725892zM834.818313 495.895207l0 354.803795c0 38.612413-31.414477 70.02689-70.02689 70.02689l-154.058748 0L610.732675 700.642404c0-33.096792-26.926256-60.023048-60.023048-60.023048l-94.0357 0c-33.096792 0-60.023048 26.926256-60.023048 60.023048l0 220.084511L260.59925 920.726915c-38.612413 0-70.02689-31.414477-70.02689-70.02689L190.57236 495.895207c0-1.172709-0.121773-2.314719-0.315178-3.432169l322.113255-276.958846 322.70268 277.348726C834.921667 493.848595 834.818313 494.858598 834.818313 495.895207zM525.411451 173.947727c-7.502881-6.445806-18.587334-6.446829-26.086122 0.00307L104.223736 513.663896l0-52.726875 407.081439-349.870436 407.176606 349.9523 0.521886 51.205219L525.411451 173.947727z" p-id="52319"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/icon.svg b/src/assets/icons/icon.svg
deleted file mode 100644
index 82be8eee..00000000
--- a/src/assets/icons/icon.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 0 1 4.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 0 1 2.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/input.svg b/src/assets/icons/input.svg
deleted file mode 100644
index ab91381e..00000000
--- a/src/assets/icons/input.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802859706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3102" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 224H128c-35.2 0-64 28.8-64 64v448c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z m0 480c0 19.2-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V320c0-19.2 12.8-32 32-32h704c19.2 0 32 12.8 32 32v384z" p-id="3103"></path><path d="M224 352c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V384c0-16-12.8-32-32-32z" p-id="3104"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/international.svg b/src/assets/icons/international.svg
deleted file mode 100644
index e9b56eee..00000000
--- a/src/assets/icons/international.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/ip.svg b/src/assets/icons/ip.svg
deleted file mode 100644
index e59f29b3..00000000
--- a/src/assets/icons/ip.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1615363536977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16426" width="256" height="256"><path d="M938.688 341.312v519.808c0 42.816-34.752 77.568-77.568 77.568H162.88c-42.816 0-77.568-34.752-77.568-77.568V341.312h853.376zM402.112 483.584H389.12a32.32 32.32 0 0 0-31.808 26.496l-0.512 5.76v215.424c0 15.808 11.392 29.056 26.496 31.744l5.76 0.576h12.992a32.32 32.32 0 0 0 31.808-26.56l0.512-5.76V515.84a32.32 32.32 0 0 0-32.32-32.32z m232.704 0H563.84a50.88 50.88 0 0 0-10.88 1.152 32.384 32.384 0 0 0-40.32 25.344L512 515.84v215.424a32.32 32.32 0 0 0 64.128 5.76l0.512-5.76v-74.368h58.24c46.336 0 83.968-38.784 83.968-86.656 0-47.872-37.632-86.656-84.032-86.656z m0 66.624l3.904 0.448a19.84 19.84 0 0 1 15.488 19.584 19.84 19.84 0 0 1-14.912 19.456l-4.48 0.512H576.64v-40h58.24z m226.304-464.896c42.816 0 77.568 34.752 77.568 77.568v121.6H85.312v-121.6c0-42.816 34.752-77.568 77.568-77.568h698.24z" p-id="16427"></path></svg>
diff --git a/src/assets/icons/job.svg b/src/assets/icons/job.svg
deleted file mode 100644
index 2a93a251..00000000
--- a/src/assets/icons/job.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036191400" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5472" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M934.912 1016.832H192c-14.336 0-25.6-11.264-25.6-25.6v-189.44c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v163.84h691.712V64H217.6v148.48c0 14.336-11.264 25.6-25.6 25.6s-25.6-11.264-25.6-25.6v-174.08c0-14.336 11.264-25.6 25.6-25.6h742.912c14.336 0 25.6 11.264 25.6 25.6v952.832c0 14.336-11.264 25.6-25.6 25.6z" p-id="5473"></path><path d="M232.96 371.2h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 540.16h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM232.96 698.88h-117.76c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h117.76c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6zM574.464 762.88c-134.144 0-243.2-109.056-243.2-243.2S440.32 276.48 574.464 276.48s243.2 109.056 243.2 243.2-109.056 243.2-243.2 243.2z m0-435.2c-105.984 0-192 86.016-192 192S468.48 711.68 574.464 711.68s192-86.016 192-192S680.448 327.68 574.464 327.68z" p-id="5474"></path><path d="M663.04 545.28h-87.04c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h87.04c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6z" p-id="5475"></path><path d="M576 545.28c-14.336 0-25.6-11.264-25.6-25.6v-87.04c0-14.336 11.264-25.6 25.6-25.6s25.6 11.264 25.6 25.6v87.04c0 14.336-11.264 25.6-25.6 25.6z" p-id="5476"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/lab.svg b/src/assets/icons/lab.svg
new file mode 100644
index 00000000..d4d60aac
--- /dev/null
+++ b/src/assets/icons/lab.svg
@@ -0,0 +1 @@
+<svg t="1650329183188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3135" width="200" height="200"><path d="M958.88 1022.5H64.63C29.37 1022.46 0.79 993.89 0.75 958.62V64.38C0.79 29.11 29.36 0.54 64.63 0.5h894.25c35.26 0.04 63.84 28.62 63.88 63.88v894.25c-0.05 35.26-28.62 63.83-63.88 63.87zM64.63 51.6c-7.06 0-12.78 5.72-12.78 12.78v894.25c0 7.05 5.72 12.78 12.78 12.78h894.25c7.05 0 12.78-5.72 12.78-12.78V64.38c0-7.06-5.72-12.78-12.78-12.78H64.63z m0 0" p-id="3136"></path><path d="M593.5 752.12l-27.29-32.76 240.21-256.59 32.76 32.76L593.5 752.12c5.46 0 5.46 0 0 0zM282.32 255.31l87.35-92.81-32.76-32.76-87.35 92.81 32.76 32.76z m442.21 616.92c0 5.46 0 10.92-5.46 16.38-5.46 5.46-10.92 5.46-16.38 5.46h-496.8c-10.92 0-21.84-10.92-21.84-21.84s10.92-21.84 21.84-21.84h185.62c-5.46-5.46-16.38-10.92-21.84-16.38-92.81-98.27-92.81-251.14 0-349.4-5.46-21.84-10.92-43.68-5.46-65.51l-65.51-70.97c-16.38-16.38-16.38-49.14 0-65.51l92.81-98.27c16.38-16.38 49.13-16.38 65.51 0l256.6 272.97c16.38 16.38 16.38 49.14 0 65.51L620.8 621.1c-16.38 16.38-49.13 16.38-65.51 0L446.1 506.45c-5.46 0-10.92 5.46-16.38 5.46-5.46 0-10.92 0-16.37-5.46l-5.46 5.46c-70.97 76.43-70.97 202 0 278.43 27.29 27.3 54.59 43.68 92.81 54.6h207.46c10.91-0.01 16.37 10.91 16.37 27.29zM446.1 424.56c-5.46-5.46-10.92-10.92-16.38-10.92-5.46 0-10.92 0-16.37 5.46-5.46 10.92-5.46 27.3 0 38.22 10.92 10.92 21.83 10.92 32.75 0 5.46-10.93 5.46-27.31 0-32.76z m-54.59-43.68c10.92-10.92 27.3-10.92 38.21-10.92 16.38 0 32.76 5.46 49.14 21.84 21.84 21.84 21.84 60.05 5.46 87.35l103.73 109.19 92.81-98.27-256.6-272.97-92.81 92.81 60.06 70.97z m0 0" p-id="3137"></path><path d="M593.5 752.12l-27.29-32.76 240.21-256.59 32.76 32.76L593.5 752.12c5.46 0 5.46 0 0 0zM282.32 255.31l87.35-92.81-32.76-32.76-87.35 92.81 32.76 32.76z m442.21 616.92c0 5.46 0 10.92-5.46 16.38-5.46 5.46-10.92 5.46-16.38 5.46h-496.8c-10.92 0-21.84-10.92-21.84-21.84s10.92-21.84 21.84-21.84h185.62c-5.46-5.46-16.38-10.92-21.84-16.38-92.81-98.27-92.81-251.14 0-349.4-5.46-21.84-10.92-43.68-5.46-65.51l-65.51-70.97c-16.38-16.38-16.38-49.14 0-65.51l92.81-98.27c16.38-16.38 49.13-16.38 65.51 0l256.6 272.97c16.38 16.38 16.38 49.14 0 65.51L620.8 621.1c-16.38 16.38-49.13 16.38-65.51 0L446.1 506.45c-5.46 0-10.92 5.46-16.38 5.46-5.46 0-10.92 0-16.37-5.46l-5.46 5.46c-70.97 76.43-70.97 202 0 278.43 27.29 27.3 54.59 43.68 92.81 54.6h207.46c10.91-0.01 16.37 10.91 16.37 27.29zM446.1 424.56c-5.46-5.46-10.92-10.92-16.38-10.92-5.46 0-10.92 0-16.37 5.46-5.46 10.92-5.46 27.3 0 38.22 10.92 10.92 21.83 10.92 32.75 0 5.46-10.93 5.46-27.31 0-32.76z m-54.59-43.68c10.92-10.92 27.3-10.92 38.21-10.92 16.38 0 32.76 5.46 49.14 21.84 21.84 21.84 21.84 60.05 5.46 87.35l103.73 109.19 92.81-98.27-256.6-272.97-92.81 92.81 60.06 70.97z m0 0" p-id="3138"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/language.svg b/src/assets/icons/language.svg
index 0082b577..d2dd693d 100644
--- a/src/assets/icons/language.svg
+++ b/src/assets/icons/language.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.742 36.8c2.398 7.2 5.595 12.8 11.19 18.4 4.795-4.8 7.992-11.2 10.39-18.4h-21.58zm-52.748 40h20.78l-10.39-28-10.39 28z"/><path d="M111.916 0H16.009C7.218 0 .025 7.2.025 16v96c0 8.8 7.193 16 15.984 16h95.907c8.791 0 15.984-7.2 15.984-16V16c0-8.8-6.394-16-15.984-16zM72.754 103.2c-1.598 1.6-3.197 1.6-4.795 1.6-.8 0-2.398 0-3.197-.8-.8-.8-1.599 0-1.599-.8s-.799-1.6-1.598-3.2c-.8-1.6-.8-2.4-1.599-4l-3.196-8.8H28.797L25.6 96c-1.598 3.2-2.398 5.6-3.197 7.2-.8 1.6-2.398 1.6-4.795 1.6-1.599 0-3.197-.8-4.796-1.6-1.598-1.6-2.397-2.4-2.397-4 0-.8 0-1.6.799-3.2.8-1.6.8-2.4 1.598-4l17.583-44.8c.8-1.6.8-3.2 1.599-4.8.799-1.6 1.598-3.2 2.397-4 .8-.8 1.599-2.4 3.197-3.2 1.599-.8 3.197-.8 4.796-.8 1.598 0 3.196 0 4.795.8 1.598.8 2.398 1.6 3.197 3.2.799.8 1.598 2.4 2.397 4 .8 1.6 1.599 3.2 2.398 5.6l17.583 44c1.598 3.2 2.398 5.6 2.398 7.2-.8.8-1.599 2.4-2.398 4zM116.711 72c-8.791-3.2-15.185-7.2-20.78-12-5.594 5.6-12.787 9.6-21.579 12l-2.397-4c8.791-2.4 15.984-5.6 21.579-11.2C87.939 51.2 83.144 44 81.545 36h-7.992v-3.2h21.58c-1.6-2.4-3.198-5.6-4.796-8l2.397-.8c1.599 2.4 3.997 5.6 5.595 8.8h19.98v4h-7.992c-2.397 8-6.393 15.2-11.189 20 5.595 4.8 11.988 8.8 20.78 11.2l-3.197 4z"/></svg>
\ No newline at end of file
+<svg t="1675576810577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1553" width="200" height="200"><path d="M379.392 460.8l114.688 114.688-42.496 102.4L307.2 532.48l-168.96 168.96-71.68-72.704L234.496 460.8l-45.056-45.056c-27.136-27.136-51.2-66.56-66.56-108.544h112.64c7.68 14.336 16.896 27.136 26.112 35.84l45.568 46.08 45.056-45.056C382.976 312.32 409.6 247.808 409.6 204.8H0V102.4h256V0h102.4v102.4h256v102.4h-102.4c0 70.144-37.888 161.28-87.04 210.944L378.88 460.8z m196.608 409.6L512 1024H409.6l256-614.4h102.4l256 614.4h-102.4l-64-153.6h-281.6z m42.496-102.4h196.608L716.8 532.48 618.496 768z" p-id="1554" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path></svg>
diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg
index 48197ba4..9748d530 100644
--- a/src/assets/icons/link.svg
+++ b/src/assets/icons/link.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
\ No newline at end of file
+<svg t="1675604734873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20095" width="200" height="200"><path d="M611.2 368l-294.4 294.4c-6.4 6.4-9.6 16-9.6 22.4s3.2 16 9.6 22.4 16 9.6 22.4 9.6 16-3.2 22.4-9.6l294.4-294.4c6.4-6.4 9.6-16 9.6-22.4s-3.2-16-9.6-22.4c-12.8-12.8-32-12.8-44.8 0z" p-id="20096"></path><path d="M608 755.2l-99.2 99.2c-96 96-249.6 96-342.4 3.2-92.8-92.8-92.8-246.4 3.2-342.4L268.8 416c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0l-99.2 99.2C3.2 592 3.2 784 121.6 902.4 179.2 960 259.2 992 336 992c80 0 156.8-28.8 217.6-89.6l99.2-99.2c12.8-12.8 12.8-32 0-44.8s-32-16-44.8-3.2zM902.4 121.6c-57.6-57.6-131.2-86.4-214.4-86.4h-3.2c-83.2 0-160 35.2-217.6 92.8l-96 96c-12.8 12.8-12.8 32 0 44.8s32 12.8 44.8 0l96-96c48-48 108.8-73.6 172.8-73.6h3.2c64 0 121.6 25.6 166.4 70.4 92.8 92.8 92.8 246.4-3.2 345.6l-96 96c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 16 9.6 22.4 9.6s16-3.2 22.4-9.6l96-96c121.6-124.8 124.8-320 6.4-438.4z" p-id="20097"></path></svg>
diff --git a/src/assets/icons/list.svg b/src/assets/icons/list.svg
deleted file mode 100644
index 20259edd..00000000
--- a/src/assets/icons/list.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M1.585 12.087c0 6.616 3.974 11.98 8.877 11.98 4.902 0 8.877-5.364 8.877-11.98 0-6.616-3.975-11.98-8.877-11.98-4.903 0-8.877 5.364-8.877 11.98zM125.86.107H35.613c-1.268 0-2.114 1.426-2.114 2.852v18.255c0 1.712 1.057 2.853 2.114 2.853h90.247c1.268 0 2.114-1.426 2.114-2.853V2.96c0-1.711-1.057-2.852-2.114-2.852zM.106 62.86c0 6.615 3.974 11.979 8.876 11.979 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zM124.17 50.88H33.921c-1.268 0-2.114 1.425-2.114 2.851v18.256c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852V53.73c0-1.426-.846-2.852-2.114-2.852zM.106 115.913c0 6.616 3.974 11.98 8.876 11.98 4.903 0 8.877-5.364 8.877-11.98 0-6.616-3.974-11.98-8.877-11.98-4.902 0-8.876 5.364-8.876 11.98zm124.064-11.98H33.921c-1.268 0-2.114 1.426-2.114 2.853v18.255c0 1.711 1.057 2.852 2.114 2.852h90.247c1.268 0 2.114-1.426 2.114-2.852v-18.255c0-1.427-.846-2.853-2.114-2.853z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/lock.svg b/src/assets/icons/lock.svg
deleted file mode 100644
index 74fee543..00000000
--- a/src/assets/icons/lock.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M119.88 49.674h-7.987V39.52C111.893 17.738 90.45.08 63.996.08 37.543.08 16.1 17.738 16.1 39.52v10.154H8.113c-4.408 0-7.987 2.94-7.987 6.577v65.13c0 3.637 3.57 6.577 7.987 6.577H119.88c4.407 0 7.987-2.94 7.987-6.577v-65.13c-.008-3.636-3.58-6.577-7.987-6.577zm-23.953 0H32.065V39.52c0-14.524 14.301-26.295 31.931-26.295 17.63 0 31.932 11.777 31.932 26.295v10.153z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/log.svg b/src/assets/icons/log.svg
deleted file mode 100644
index d879d33b..00000000
--- a/src/assets/icons/log.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566035943711" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4805" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M208.736 566.336H64.384v59.328h144.352v-59.328z m0-336.096H165.44V74.592c0-7.968 4.896-14.848 10.464-14.848h502.016V0.448H175.936c-38.72 1.248-69.248 34.368-68.192 74.144v155.648H64.384V289.6h144.352V230.24z m0 168.096H64.384v59.328h144.352v-59.328z m714.656 76.576h-57.76v474.496c0 7.936-4.896 14.848-10.464 14.848H175.936c-5.568 0-10.464-6.912-10.464-14.848v-155.68h43.296v-59.296H64.384v59.296h43.328v155.68c-1.024 39.776 29.472 72.896 68.192 74.144h679.232c38.72-1.184 69.248-34.368 68.256-74.144V474.912z m14.944-290.336l-83.072-85.312a71.264 71.264 0 0 0-52.544-21.728 71.52 71.52 0 0 0-51.616 23.872L386.528 507.264a30.496 30.496 0 0 0-6.176 10.72L308.16 740.512a30.016 30.016 0 0 0 6.976 30.24c7.712 7.968 19.2 10.752 29.568 7.2l216.544-74.112a28.736 28.736 0 0 0 12.128-7.936L940.448 287.456a75.552 75.552 0 0 0-2.112-102.88z m-557.12 518.272l39.104-120.64 78.336 80.416-117.44 40.224z m170.048-70.016l-103.552-106.016 200.16-222.4 103.52 106.304-200.128 222.112zM897.952 247.072l-0.256 0.224-107.136 119.168-103.52-106.528 106.432-118.624a14.144 14.144 0 0 1 10.304-4.736 13.44 13.44 0 0 1 10.464 4.288l83.264 85.696c5.472 5.6 5.664 14.72 0.448 20.512z" p-id="4806"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/logininfor.svg b/src/assets/icons/logininfor.svg
deleted file mode 100644
index 267f8447..00000000
--- a/src/assets/icons/logininfor.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036016814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5261" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 128h-85.333333a42.666667 42.666667 0 0 0 0 85.333333h42.666666v640H170.666667V213.333333h42.666666a42.666667 42.666667 0 0 0 0-85.333333H128a42.666667 42.666667 0 0 0-42.666667 42.666667v725.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h768a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z" p-id="5262"></path><path d="M341.333333 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666666 42.666667zM512 298.666667a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM682.666667 298.666667a42.666667 42.666667 0 0 0 42.666666-42.666667V128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 0 42.666667 42.666667zM341.333333 768a42.666667 42.666667 0 0 0 42.666667-42.666667 128 128 0 0 1 256 0 42.666667 42.666667 0 0 0 85.333333 0 213.333333 213.333333 0 0 0-107.52-184.32A128 128 0 0 0 640 469.333333a128 128 0 0 0-256 0 128 128 0 0 0 22.186667 71.68A213.333333 213.333333 0 0 0 298.666667 725.333333a42.666667 42.666667 0 0 0 42.666666 42.666667z m128-298.666667a42.666667 42.666667 0 1 1 42.666667 42.666667 42.666667 42.666667 0 0 1-42.666667-42.666667z" p-id="5263"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg
index 719c78dc..92c364c2 100644
--- a/src/assets/icons/menu.svg
+++ b/src/assets/icons/menu.svg
@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1612240746070" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2134" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M344.832 474.112H98.048a61.632 61.632 0 0 1-61.44-61.44V165.888c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296a61.632 61.632 0 0 1-61.952 60.928zM98.048 165.888v247.296h247.296V165.888H98.048z m609.792 359.424a60.8 60.8 0 0 1-43.52-17.92L489.728 332.8a60.8 60.8 0 0 1-17.92-43.52 60.8 60.8 0 0 1 17.92-43.52L664.32 71.168a60.8 60.8 0 0 1 43.52-17.92 60.8 60.8 0 0 1 43.52 17.92l174.592 174.592a60.8 60.8 0 0 1 17.92 43.52 60.8 60.8 0 0 1-17.92 43.52L751.36 507.392a60.8 60.8 0 0 1-43.52 17.92z m0-411.136L533.248 288.768 707.84 463.36l174.592-174.592-174.592-174.592zM344.832 960.512H98.048a61.632 61.632 0 0 1-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296a61.76 61.76 0 0 1-61.952 61.44z m-246.784-308.224v247.296h247.296v-247.296H98.048z m733.184 308.224H583.936a61.632 61.632 0 0 1-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c0 34.304-27.136 61.44-61.44 61.44z m-246.784-308.224v247.296h247.296v-247.296H584.448z" fill="#666666" p-id="2135"></path></svg>
\ No newline at end of file
+<svg t="1650624092030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11056" width="200" height="200"><path d="M374.272 440.832H127.488c-33.792 0-61.44-27.648-61.44-61.44V132.608c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 33.792-27.648 60.928-61.952 60.928zM127.488 132.608v247.296h247.296V132.608H127.488zM762.88 492.032c-16.384 0-31.744-6.144-43.52-17.92l-174.592-174.592c-11.776-11.776-17.92-27.136-17.92-43.52s6.144-31.744 17.92-43.52l174.592-174.592c11.776-11.776 27.136-17.92 43.52-17.92s31.744 6.144 43.52 17.92l174.592 174.592c11.776 11.776 17.92 27.136 17.92 43.52s-6.144 31.744-17.92 43.52l-174.592 174.592c-11.776 11.776-27.136 17.92-43.52 17.92z m0-410.624L588.288 256 762.88 430.592 937.472 256 762.88 81.408zM374.272 952.832H127.488c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 34.304-27.648 61.44-61.952 61.44z m-246.784-308.224v247.296h247.296v-247.296H127.488zM886.272 952.832h-247.296c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c0 34.304-27.136 61.44-61.44 61.44z m-246.784-308.224v247.296h247.296v-247.296h-247.296z" p-id="11057"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/message.svg b/src/assets/icons/message.svg
index 14ca8172..ea1ddef1 100644
--- a/src/assets/icons/message.svg
+++ b/src/assets/icons/message.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>
\ No newline at end of file
+<svg t="1651250049265" class="icon" viewBox="0 0 1146 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12503" width="200" height="200"><path d="M1091.555481 293.125035l-0.029028-0.152398-0.123369-0.123369C999.485831 119.76239 802.044436 0 573.238256 0c-316.53614 0-573.223741 229.292399-573.223741 512.039914 0 90.22637 47.947047 182.143624 93.869388 255.736933l-21.771021 172.861911c0 8.352815 3.461592 16.458892 10.471861 22.808774 6.451479 5.682237 14.862351 8.686638 23.382077 9.100287v0.166911h2.148074l215.083179-21.132405c75.545445 32.816187 160.372602 72.345105 250.04744 72.345105 316.53614 0 573.223741-229.205315 573.223741-511.974601 0.021771-78.295851-19.731803-152.462464-54.913773-218.827794z m-773.306687 270.265461a51.423153 51.423153 0 1 1 0-102.853563 51.43041 51.43041 0 0 1 0 102.853563z m252.630935 0a51.437667 51.437667 0 0 1 0-102.853563 51.43041 51.43041 0 1 1 0 102.853563z m252.638191 0a51.43041 51.43041 0 1 1-0.014514-102.846306 51.43041 51.43041 0 0 1 0.014514 102.846306z" fill="" p-id="12504"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/money.svg b/src/assets/icons/money.svg
index c1580de1..60f7acf4 100644
--- a/src/assets/icons/money.svg
+++ b/src/assets/icons/money.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M54.122 127.892v-28.68H7.513V87.274h46.609v-12.4H7.513v-12.86h38.003L.099 0h22.6l32.556 45.07c3.617 5.144 6.44 9.611 8.487 13.385 1.788-3.05 4.89-7.779 9.301-14.186L103.93 0h24.01L82.385 62.013h38.34v12.862h-46.41v12.4h46.41v11.937h-46.41v28.68H54.123z"/></svg>
\ No newline at end of file
+<svg t="1651249944904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8089" width="200" height="200"><path d="M688 316.8C726.4 278.4 768 220.8 768 160c0-35.2-9.6-64-32-86.4C694.4 32 620.8 32 537.6 32l-22.4 0c-12.8 0-25.6 0-38.4 0C396.8 32 332.8 32 291.2 70.4c-22.4 22.4-32 51.2-32 89.6 0 64 41.6 118.4 76.8 156.8-140.8 73.6-236.8 220.8-236.8 371.2 0 278.4 281.6 278.4 416 278.4s416 0 416-278.4C931.2 534.4 832 390.4 688 316.8zM611.2 579.2c19.2 0 32 12.8 32 32s-12.8 32-32 32l-64 0 0 32 64 0c19.2 0 32 12.8 32 32s-12.8 32-32 32l-64 0 0 67.2c0 19.2-12.8 32-32 32s-32-12.8-32-32l0-67.2-64 0c-19.2 0-32-12.8-32-32s12.8-32 32-32l64 0 0-32-64 0c-19.2 0-32-12.8-32-32s12.8-32 32-32l64 0 0-19.2-89.6-86.4c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0l80 76.8 80-76.8c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-96 92.8 0 12.8L611.2 579.2z" p-id="8090"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/multi_level.svg b/src/assets/icons/multi_level.svg
new file mode 100644
index 00000000..a1a27921
--- /dev/null
+++ b/src/assets/icons/multi_level.svg
@@ -0,0 +1 @@
+<svg t="1675604603623" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1216" width="200" height="200"><path d="M832.128 768c33.194667 0 60.501333 25.173333 63.573333 57.813333L896 832a64 64 0 0 1-63.872 64h-298.922667A63.786667 63.786667 0 0 1 469.333333 832a64 64 0 0 1 63.872-64h298.922667zM213.333333 874.666667c-23.722667 0-42.666667-19.072-42.666666-42.624V362.666667A42.666667 42.666667 0 0 1 213.333333 320l4.992 0.298667c21.333333 2.432 37.674667 20.48 37.674667 42.325333L255.957333 490.666667h128.298667c21.248 0 39.594667 16.469333 42.112 37.674666L426.666667 533.333333l-0.298667 4.992a42.368 42.368 0 0 1-42.112 37.674667H256l0.042667 213.333333h128.256c22.869333 0 42.410667 19.114667 42.410666 42.666667l-0.298666 4.992a42.368 42.368 0 0 1-42.112 37.674667zM832.128 469.333333c33.194667 0 60.501333 25.173333 63.573333 57.813334L896 533.333333a64 64 0 0 1-63.872 64h-298.922667A63.786667 63.786667 0 0 1 469.333333 533.333333a64 64 0 0 1 63.872-64h298.922667z m-255.957333-341.333333c33.194667 0 60.458667 25.173333 63.573333 57.813333L640 192c0 35.328-29.013333 64-63.829333 64H191.829333A63.744 63.744 0 0 1 128 192C128 156.672 157.013333 128 191.829333 128h384.341334z" fill="#000000" p-id="1217"></path></svg>
diff --git a/src/assets/icons/offline.svg b/src/assets/icons/offline.svg
deleted file mode 100644
index d09cb16c..00000000
--- a/src/assets/icons/offline.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1615365233977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31529" width="256" height="256"><path d="M375.466667 614.4V341.333333c0-40.96 27.306667-68.266667 68.266666-68.266666h136.533334c40.96 0 68.266667 27.306667 68.266666 68.266666v273.066667h191.146667c6.826667 0 20.48 6.826667 27.306667 6.826667 13.653333 13.653333 13.653333 34.133333 0 47.786666l-327.68 327.68c-13.653333 13.653333-34.133333 13.653333-47.786667 0L163.84 675.84c-6.826667-6.826667-13.653333-20.48-13.653333-27.306667 0-20.48 13.653333-34.133333 34.133333-34.133333H375.466667z m34.133333-477.866667h204.8c20.48 0 34.133333 13.653333 34.133333 34.133334s-13.653333 34.133333-34.133333 34.133333h-204.8c-20.48 0-34.133333-13.653333-34.133333-34.133333s13.653333-34.133333 34.133333-34.133334z m0-136.533333h204.8c20.48 0 34.133333 13.653333 34.133333 34.133333s-13.653333 34.133333-34.133333 34.133334h-204.8C389.12 68.266667 375.466667 54.613333 375.466667 34.133333s13.653333-34.133333 34.133333-34.133333z" p-id="31530"></path></svg>
diff --git a/src/assets/icons/online.svg b/src/assets/icons/online.svg
deleted file mode 100644
index 330a2029..00000000
--- a/src/assets/icons/online.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568899557259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="535" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M356.246145 681.56286c-68.156286-41.949414-107.246583-103.84102-107.246583-169.805384 0-65.966411 39.090297-127.860063 107.246583-169.809477 12.046361-7.414877 15.800871-23.190165 8.385994-35.236526-7.413853-12.046361-23.191188-15.801894-35.236526-8.387018-39.640836 24.399713-72.539106 56.044434-95.137801 91.515297-23.86657 37.461193-36.481889 79.620385-36.481889 121.917724 0 42.297338 12.615319 84.454484 36.481889 121.914654 22.598694 35.469839 55.496965 67.11456 95.137801 91.51325 4.185322 2.576685 8.821923 3.804652 13.400195 3.804652 8.598842 0 16.998139-4.329609 21.836331-12.190647C372.047016 704.752002 368.291482 688.976714 356.246145 681.56286zM263.943926 754.580874c-92.603071-61.111846-145.713686-149.623739-145.713686-242.840794 0-93.195565 53.094242-181.682899 145.667637-242.774279 11.805884-7.79043 15.061021-23.677259 7.269567-35.483142-7.79043-11.805884-23.677259-15.062044-35.483142-7.269567C128.487861 296.954249 67.006602 401.024489 67.006602 511.74008c0 110.73708 61.496609 214.830857 168.721703 285.593504 4.343935 2.867304 9.240455 4.238534 14.08274 4.238534 8.317433 0 16.476253-4.046153 21.400403-11.507078C279.003923 778.258133 275.748786 762.372328 263.943926 754.580874zM788.660552 226.213092c-11.80486-7.791453-27.692712-4.536316-35.483142 7.269567-7.79043 11.805884-4.536316 27.692712 7.269567 35.483142 92.575442 61.092403 145.670707 149.579737 145.670707 242.774279 0 93.216032-53.111638 181.727924-145.715733 242.840794-11.805884 7.79043-15.059997 23.678282-7.269567 35.484166 4.925173 7.461949 13.081946 11.507078 21.400403 11.507078 4.841262 0 9.739828-1.37123 14.083763-4.238534 107.22714-70.761624 168.724773-174.857447 168.724773-285.593504C957.341323 401.025513 895.860063 296.955272 788.660552 226.213092zM790.090111 633.67213c23.865547-37.459147 36.480866-79.617315 36.480866-121.914654 0-42.298362-12.615319-84.45653-36.480866-121.917724-22.598694-35.470863-55.496965-67.115584-95.139847-91.515297-12.047384-7.413853-27.821649-3.659343-35.236526 8.387018-7.414877 12.045337-3.659343 27.821649 8.385994 35.236526 68.156286 41.949414 107.247606 103.842043 107.247606 169.809477 0 65.964364-39.090297 127.85597-107.247606 169.804361-12.045337 7.414877-15.800871 23.190165-8.385994 35.237549 4.838192 7.861038 13.236466 12.190647 21.835308 12.190647 4.579295 0 9.215896-1.227967 13.400195-3.804652C734.591099 700.786691 767.490394 669.142993 790.090111 633.67213zM567.129086 518.274914c24.12342-17.150612 39.887452-45.305859 39.887452-77.07133 0-52.128241-42.452881-94.538143-94.634334-94.538143-52.18043 0-94.633311 42.408879-94.633311 94.538143 0 31.695886 15.696494 59.797921 39.730886 76.958766-49.875944 21.128203-84.917018 70.234621-84.917018 127.301338 0 2.366907 0.061398 4.762467 0.182149 7.119141l1.249457 24.296359 276.373515 0 1.238201-24.308639c0.119727-2.358721 0.181125-4.750187 0.181125-7.106862C651.786185 588.497255 616.865861 539.465538 567.129086 518.274914zM512.381182 397.889079c23.937179 0 43.411719 19.430538 43.411719 43.314505 0 23.882943-19.47454 43.313481-43.411719 43.313481-23.936155 0-43.409672-19.430538-43.409672-43.313481C468.971509 417.320641 488.445026 397.889079 512.381182 397.889079zM426.08884 625.656573c9.119705-38.542828 44.254923-67.337641 86.085634-67.337641s76.966952 28.794813 86.085634 67.337641L426.08884 625.656573z" p-id="536"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/order.svg b/src/assets/icons/order.svg
new file mode 100644
index 00000000..8f2107ec
--- /dev/null
+++ b/src/assets/icons/order.svg
@@ -0,0 +1 @@
+<svg t="1650329913223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11785" width="200" height="200"><path d="M875.4 101.1H155c-37.9 0-73.4 30.8-73.4 68.7 0 37.9 35.5 68.7 73.4 68.7h5v689.7l25.5-25.5h2.8l74.5-74.5 81.2 81.2 1.4-1.4 2.5 2.5 81.1-81.1 81.1 81.1 2.5-2.5 2.5 2.5 81.1-81.1 81.1 81.1 2.5-2.5 1.4 1.4 81.2-81.2 74.5 74.5h2.8l25.5 25.5V238.5h10.3c37.9 0 68.7-30.8 68.7-68.7 0-37.9-30.9-68.7-68.8-68.7z m5.9 97.6h-16.2v-57.6h-39v63.6h-0.1v629l-62.2-62.2-1.4 1.4-1.4-1.4-81.2 81.2-81.1-81.2-2.5 2.5-2.5-2.5-81.1 81.1-81.1-81.1-2.5 2.5-2.5-2.5-81.1 81.2-81.2-81.2-1.4 1.4-1.4-1.4-62.2 62.2 0.2-692.6H160v57.6h-14.7c-15.9 0-28.8-12.9-28.8-28.9 0-15.9 12.9-28.8 28.8-28.8h736c15.9 0 28.9 12.9 28.9 28.8-0.1 16-13 28.9-28.9 28.9zM288.6 451.2h209.3c10.3 0 18.6-8.3 18.6-18.6s-8.3-18.6-18.6-18.6H288.6c-10.3 0-18.6 8.3-18.6 18.6s8.4 18.6 18.6 18.6z m0-117.5h326.8c10.3 0 18.6-8.3 18.6-18.6s-8.3-18.6-18.6-18.6H288.6c-10.3 0-18.6 8.3-18.6 18.6s8.4 18.6 18.6 18.6zM635 531.5H288.6c-10.3 0-18.6 8.3-18.6 18.6s8.3 18.6 18.6 18.6H635c10.3 0 18.6-8.3 18.6-18.6s-8.3-18.6-18.6-18.6zM595.9 649H288.6c-10.3 0-18.6 8.3-18.6 18.6s8.3 18.6 18.6 18.6h307.2c10.3 0 18.6-8.3 18.6-18.6 0.1-10.3-8.3-18.6-18.5-18.6z" p-id="11786"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/pdf.svg b/src/assets/icons/pdf.svg
deleted file mode 100644
index 957aa0cc..00000000
--- a/src/assets/icons/pdf.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M869.073 277.307H657.111V65.344l211.962 211.963zm-238.232 26.27V65.344l-476.498-.054v416.957h714.73v-178.67H630.841zm-335.836 360.57c-5.07-3.064-10.944-5.133-17.61-6.201-6.67-1.064-13.603-1.6-20.81-1.6h-48.821v85.641h48.822c7.206 0 14.14-.532 20.81-1.6 6.665-1.065 12.54-3.133 17.609-6.202 5.064-3.063 9.134-7.406 12.208-13.007 3.065-5.602 4.6-12.937 4.6-22.011 0-9.07-1.535-16.408-4.6-22.01-3.074-5.603-7.144-9.94-12.208-13.01zM35.82 541.805v416.904h952.358V541.805H35.821zm331.421 191.179c-3.6 11.071-9.343 20.879-17.209 29.413-7.874 8.542-18.078 15.408-30.617 20.61-12.544 5.206-27.747 7.807-45.621 7.807h-66.036v102.45h-62.831V607.517h128.867c17.874 0 33.077 2.6 45.62 7.802 12.541 5.207 22.745 12.076 30.618 20.615 7.866 8.538 13.604 18.277 17.21 29.212 3.6 10.943 5.401 22.278 5.401 34.018 0 11.477-1.8 22.752-5.402 33.819zM644.9 806.417c-5.343 17.61-13.408 32.818-24.212 45.627-10.807 12.803-24.283 22.879-40.423 30.213-16.146 7.343-35.155 11.007-57.03 11.007h-123.26V607.518h123.26c18.41 0 35.552 2.941 51.428 8.808 15.873 5.869 29.618 14.671 41.22 26.412 11.608 11.744 20.674 26.411 27.217 44.02 6.535 17.61 9.803 38.288 9.803 62.035 0 20.81-2.67 40.02-8.003 57.624zm245.362-146.07h-138.07v66.03h119.66v48.829h-119.66v118.058h-62.83V607.518h200.9v52.829h-.001zm-318.2 25.611c-6.402-8.266-14.877-14.604-25.412-19.01-10.544-4.402-23.551-6.602-39.019-6.602h-44.825v180.088h56.029c9.07 0 17.872-1.463 26.415-4.401 8.535-2.932 16.14-7.802 22.812-14.609 6.665-6.8 12.007-15.667 16.007-26.61 4.003-10.94 6.003-24.275 6.003-40.021 0-14.408-1.4-27.416-4.202-39.019-2.8-11.607-7.406-21.542-13.808-29.816zm0 0"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/people.svg b/src/assets/icons/people.svg
deleted file mode 100644
index 2bd54aeb..00000000
--- a/src/assets/icons/people.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M104.185 95.254c8.161 7.574 13.145 17.441 13.145 28.28 0 1.508-.098 2.998-.285 4.466h-10.784c.238-1.465.403-2.948.403-4.465 0-8.983-4.36-17.115-11.419-23.216C86 104.66 75.355 107.162 64 107.162c-11.344 0-21.98-2.495-31.22-6.83-7.064 6.099-11.444 14.218-11.444 23.203 0 1.517.165 3 .403 4.465H10.955a35.444 35.444 0 0 1-.285-4.465c0-10.838 4.974-20.713 13.127-28.291C9.294 85.42.003 70.417.003 53.58.003 23.99 28.656.001 64 .001s63.997 23.988 63.997 53.58c0 16.842-9.299 31.85-23.812 41.673zM64 36.867c-29.454 0-53.33-10.077-53.33 15.342 0 25.418 23.876 46.023 53.33 46.023 29.454 0 53.33-20.605 53.33-46.023 0-25.419-23.876-15.342-53.33-15.342zm24.888 25.644c-3.927 0-7.111-2.665-7.111-5.953 0-3.288 3.184-5.954 7.11-5.954 3.928 0 7.111 2.666 7.111 5.954s-3.183 5.953-7.11 5.953zm-3.556 16.372c0 4.11-9.55 7.442-21.332 7.442-11.781 0-21.332-3.332-21.332-7.442 0-1.06.656-2.064 1.8-2.976 3.295 2.626 10.79 4.465 19.532 4.465 8.743 0 16.237-1.84 19.531-4.465 1.145.912 1.801 1.916 1.801 2.976zm-46.22-16.372c-3.927 0-7.11-2.665-7.11-5.953 0-3.288 3.183-5.954 7.11-5.954 3.927 0 7.111 2.666 7.111 5.954s-3.184 5.953-7.11 5.953z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/peoples.svg b/src/assets/icons/peoples.svg
index 907404cd..383b82d2 100644
--- a/src/assets/icons/peoples.svg
+++ b/src/assets/icons/peoples.svg
@@ -1 +1 @@
-<svg t="1615363824084" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20947" width="256" height="256"><path d="M662.3 596.1c-42.7 35.9-96.1 55.5-152.5 55.5-56.4 0-109.8-19.6-152.4-55.5-123 53.6-208.5 169.6-208.5 304.1 0 15.4 12.4 27.8 27.8 27.8 1 0 2-0.1 3-0.2H840c1 0.1 2 0.2 3 0.2s2-0.1 3-0.2h3.3v-0.6a27.79 27.79 0 0 0 21.4-27.1c0.1-134.4-85.4-250.4-208.4-304zM277.3 365.3c9.3-45.1 31.4-86.5 64.7-119.8 24.9-24.9 54.3-43.6 86.4-55.3-17.6-54.7-68.7-94.2-129-94.2-74.7 0-135.3 60.7-135.3 135.5 0 67.4 49 123.2 113.2 133.8zM272.4 413.7c0-9.6 0.6-19.2 1.7-28.6h-0.1c-27.5-4.5-53.2-16.5-74.4-34.4C119.6 385.8 64 461.4 64 548.9c0 10 8.1 18.1 18.1 18.1 0.7 0 1.3 0 2-0.1h244.1c-36.1-42.8-55.8-96.5-55.8-153.2zM960 548.9c0-87.6-55.6-163.2-135.6-198.2-22.3 18.8-49.6 31-78.7 35 1.1 9.2 1.6 18.5 1.6 28 0 56.7-19.7 110.4-55.8 153.3h248.4c0.6 0.1 1.3 0.1 2 0.1s1.3 0 2-0.1h2.2v-0.4c7.9-1.9 13.9-9.1 13.9-17.7zM742.5 365.9c66.2-8.8 117.3-65.6 117.3-134.3 0-74.9-60.6-135.5-135.3-135.5-60.8 0-112.3 40.2-129.3 95.5 30.6 11.8 58.7 30 82.6 53.9 33.3 33.4 55.6 75.1 64.7 120.4z" p-id="20948"></path><path d="M302.4 413.7a207.4 207.8 0 1 0 414.8 0 207.4 207.8 0 1 0-414.8 0Z" p-id="20949"></path></svg>
+<svg t="1650623852152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7510" width="200" height="200"><path d="M520.23466666 504.57706667c51.3056-33.51253333 85.2544-91.47733333 85.2544-157.30133334 0-103.4848-84.27306667-187.7568-187.75786666-187.7568S229.9744 243.79093333 229.9744 347.27466667c0 65.7152 33.9488 123.68 85.2544 157.30133333-47.26613333 15.71946667-90.60266667 42.24533333-126.8448 78.4864-61.23946667 61.23946667-94.97066667 142.67413333-94.97066667 229.2384 0 13.3184 10.69866667 24.016 24.016 24.016s24.01493333-10.69866667 24.01493333-24.016c0-152.27946667 123.89866667-276.17706667 276.17813334-276.17706667S693.80053333 660.02133333 693.80053333 812.30186667c0 13.3184 10.6976 24.016 24.01493333 24.016s24.016-10.69866667 24.016-24.016c0-86.56426667-33.7312-167.99893333-94.97066666-229.23733334-36.02346667-36.13333333-79.36-62.768-126.6272-78.48746666zM278.00533333 347.38453333c0-77.06666667 62.65813333-139.72586667 139.72586667-139.72586666s139.72693333 62.65813333 139.72693333 139.72586666-62.6592 139.72693333-139.72693333 139.72693334c-76.95786667 0-139.72586667-62.6592-139.72586667-139.72693334z" p-id="7511"></path><path d="M871.40586666 599.0016a323.7312 323.7312 0 0 0-150.6432-119.8592c27.072-40.28053333 41.4816-87.76533333 41.04533334-136.77866667-0.43733333-59.60213333-22.70613333-116.69333333-62.54933334-160.79466666-8.95146667-9.824-24.1248-10.5888-33.94986666-1.63733334-9.824 8.95146667-10.58773333 24.1248-1.63733334 33.9488 66.69866667 73.57546667 67.13493333 185.13813333 0.9824 259.47733334-1.52746667 1.74613333-2.83733333 3.71093333-3.712 5.67466666-1.2 1.856-2.0736 3.93066667-2.72853333 6.22293334-3.49226667 12.77226667 4.14933333 25.9808 16.92053333 29.47306666 131.97546667 35.36853333 217.23093333 159.59466667 202.93013334 295.17226667-1.41866667 13.20853333 8.18773333 24.9984 21.39626666 26.41706667 0.87253333 0.1088 1.74613333 0.1088 2.50986667 0.1088 12.11733333 0 22.59733333-9.16906667 23.9072-21.504 7.968-75.86773333-11.3536-152.608-54.47146667-215.92106667z" p-id="7512"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/perm.svg b/src/assets/icons/perm.svg
index 8ed624b9..b38d0657 100644
--- a/src/assets/icons/perm.svg
+++ b/src/assets/icons/perm.svg
@@ -1 +1 @@
-<svg t="1639233044571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2374" width="200" height="200"><path d="M101.888 985.088l-20.48-130.56 270.336-371.712a278.2208 278.2208 0 0 1 16.896-304.128 279.3472 279.3472 0 0 1 183.808-112.64c74.24-11.776 148.48 6.144 209.408 50.176s100.864 109.568 112.64 183.808c11.776 74.24-6.144 148.48-50.176 209.408a279.3472 279.3472 0 0 1-183.808 112.64c-43.52 6.656-88.064 3.584-130.048-9.728l-15.36 20.992 1.024 94.208-98.816 39.936-151.552 208.896-143.872 8.704z m33.28-117.248l10.24 63.488 73.728-4.608 146.432-201.216 79.872-32.256-1.024-76.288 48.128-66.56 18.432 7.68c38.4 15.36 80.384 19.968 121.856 13.824 60.928-9.728 114.176-42.496 150.528-92.16 36.352-49.664 50.688-110.592 40.96-171.52-9.728-60.928-42.496-114.176-92.16-150.528s-110.592-50.688-171.52-40.96c-60.928 9.216-114.688 41.984-150.528 92.16-36.352 49.664-51.2 110.592-41.472 171.008 5.12 32.256 16.896 62.976 34.816 90.112l9.728 14.848-278.016 382.976z" p-id="2375"></path><path d="M685.568 372.736c-5.12 0-10.752-1.536-14.848-5.12l-136.704-99.328a25.8048 25.8048 0 0 1-9.728-28.16c12.288-42.496 48.64-74.24 92.672-81.408 30.72-4.608 60.928 2.56 85.504 20.48 25.088 17.92 41.472 45.056 46.08 75.264 6.656 43.52-12.288 88.064-48.64 113.152a21.504 21.504 0 0 1-14.336 5.12z m-104.96-133.632l103.424 75.264a64.0512 64.0512 0 0 0-11.264-93.184c-13.824-10.24-30.72-13.824-47.616-11.264-18.432 3.072-34.816 13.824-44.544 29.184z" p-id="2376"></path><path d="M851.968 972.8h-226.816c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h226.816c14.336 0 25.6 11.264 25.6 25.6s-11.264 25.6-25.6 25.6z" p-id="2377"></path><path d="M763.392 870.4h-134.144c-14.336 0-25.6-11.264-25.6-25.6s11.264-25.6 25.6-25.6h134.144c14.336 0 25.6 11.264 25.6 25.6s-11.776 25.6-25.6 25.6z" p-id="2378"></path></svg>
\ No newline at end of file
+<svg t="1653975130734" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2343" width="200" height="200"><path d="M768 416.914c43.886-43.885 43.886-109.714 0-153.6C724.114 219.43 650.971 219.43 607.086 256s-43.886 109.714 0 153.6S724.114 460.8 768 416.914z m-109.714-51.2c-14.629-14.628-14.629-36.571 0-51.2 14.628-14.628 36.571-14.628 51.2 0 14.628 14.629 14.628 36.572 0 51.2s-36.572 14.629-51.2 0z m-512 563.2c-14.629 14.629-36.572 14.629-51.2 0s-14.629-36.571 0-51.2l387.657-387.657-14.629-21.943C409.6 365.714 424.23 241.371 504.686 153.6c102.4-102.4 263.314-102.4 358.4 0s102.4 263.314 0 358.4c-80.457 87.771-204.8 102.4-307.2 43.886l-21.943-14.629-160.914 160.914 80.457 80.458c14.628 14.628 36.571 14.628 51.2 0 14.628-14.629 14.628-36.572 0-51.2l-21.943-29.258 65.828-65.828c124.343 58.514 277.943 36.571 373.029-65.829 131.657-131.657 131.657-336.457 0-468.114s-336.457-124.343-468.114 0C358.4 204.8 329.143 351.086 387.657 475.429L36.571 826.514c-43.885 43.886-43.885 109.715 0 153.6 43.886 43.886 109.715 43.886 153.6 0l80.458-80.457-51.2-43.886-73.143 73.143z m307.2-51.2L321.829 746.057l-51.2 58.514L402.286 936.23c14.628 14.628 36.571 14.628 51.2 0 14.628-21.943 14.628-43.886 0-58.515z" p-id="2344"></path></svg>
diff --git a/src/assets/icons/phone.svg b/src/assets/icons/phone.svg
deleted file mode 100644
index ab8e8c4e..00000000
--- a/src/assets/icons/phone.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567417214476" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M761.503029 2.90619 242.121921 2.90619c-32.405037 0-58.932204 26.060539-58.932204 58.527998l0 902.302287c0 32.156374 26.217105 58.216913 58.932204 58.216913l519.381108 0c32.344662 0 58.591443-26.060539 58.591443-58.216913L820.094472 61.123103C820.094472 28.966729 793.847691 2.90619 761.503029 2.90619M452.878996 61.123103l98.147344 0c6.780427 0 12.31549 5.536087 12.31549 12.253068 0 6.748704-5.535063 12.253068-12.31549 12.253068l-98.147344 0c-6.779404 0-12.345166-5.504364-12.345166-12.253068C440.532807 66.659189 446.099592 61.123103 452.878996 61.123103M501.641583 980.593398c-29.636994 0-53.987588-23.946388-53.987588-53.677527 0-29.356608 24.039509-53.614082 53.987588-53.614082 29.91738 0 53.987588 23.883967 53.987588 53.614082C555.629171 956.647009 531.559986 980.593398 501.641583 980.593398M766.35657 803.142893c0 16.23373-13.186324 29.107945-29.233811 29.107945l-470.618521 0c-16.35755 0-29.325909-13.186324-29.325909-29.107945L237.178329 163.500794c0-16.232706 13.279445-29.138644 29.325909-29.138644l470.246037 0c16.420995 0 29.357632 13.1853 29.357632 29.138644l0 639.642099L766.35657 803.142893zM766.35657 803.142893" p-id="2267"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/post.svg b/src/assets/icons/post.svg
deleted file mode 100644
index 2922c613..00000000
--- a/src/assets/icons/post.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566035724641" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3998" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M136.4 434.3h77.7c21.5 0 38.9-17.4 38.9-38.9s-17.4-38.9-38.9-38.9h-77.7c-21.5 0-38.9 17.4-38.9 38.9s17.4 38.9 38.9 38.9zM252.9 628.6c0-21.5-17.4-38.9-38.9-38.9h-77.7c-21.5 0-38.9 17.4-38.9 38.9s17.4 38.9 38.9 38.9H214c21.5-0.1 38.9-17.5 38.9-38.9z" p-id="3999"></path><path d="M874.7 97.5H227c-28.6 0-51.8 23.2-51.8 51.8v194.3h38.9c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8h-38.9v129.5h38.9c28.6 0 51.8 23.2 51.8 51.8 0 28.6-23.2 51.8-51.8 51.8h-38.9v194.3c0 28.6 23.2 51.8 51.8 51.8h647.7c28.6 0 51.8-23.2 51.8-51.8V149.3c0-28.6-23.2-51.8-51.8-51.8z m-311.3 723c-15.6 0-146.7-71.6-146.7-91 0-19.4 102-368.6 102-368.6l-83.6-104s-12.3-23.1 24.6-23.1h208.9c36.9 0 18.4 23.1 18.4 23.1l-79 104s102 351.3 102 368.6c0.1 17.3-131 91-146.6 91z m169.2-253.6l-27.9 40.2-74.5-240 103.4 171.7c4.6 7.9 4.2 20.6-1 28.1z" p-id="4000"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/publish.svg b/src/assets/icons/publish.svg
new file mode 100644
index 00000000..e9b489c3
--- /dev/null
+++ b/src/assets/icons/publish.svg
@@ -0,0 +1 @@
+<svg t="1650624655184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22328" width="200" height="200"><path d="M924.145781 233.089709l0-3.215228-0.642636-0.642636 0-2.571568-0.642636-0.642636 0-0.642636-0.642636-0.642636-0.642636 0-0.642636-0.642636 0-0.642636-1.928932-1.928932 0-0.642636-0.642636-0.642636 0-1.286296-1.928932 0-0.642636-0.642636-1.286296 0-0.642636-0.642636 0-0.642636-0.642636 0 0-0.642636-0.642636 0-0.642636-0.642636-0.642636 0 0-0.642636-2.571568 0 0-0.642636-5.14416 0-0.642636 0.642636-0.642636 0 0 0.642636-1.286296 0-0.642636 0.642636-1.286296 0L112.707968 515.999081c-10.287297 3.857864-15.431457 14.788821-11.573593 25.718755 2.571568 5.786797 7.073092 9.644661 12.216229 11.573593l235.972363 94.517677 24.433482 135.667889c1.928932 10.930957 12.216229 17.36039 22.50455 16.074094 4.500501-0.642636 8.358365-3.215228 10.930957-6.429433l87.444585-87.444585 178.104397 71.370491c10.287297 3.857864 21.218254-0.642636 25.718755-10.287297l223.756133-523.383258 0.642636-0.642636 0-0.642636 0-1.286296 0-5.14416L924.145781 233.089709 924.145781 233.089709zM364.112812 610.516758 364.112812 610.516758l-190.32165-75.870991 604.39841-230.829226L364.112812 610.516758 364.112812 610.516758zM405.263024 738.468918 405.263024 738.468918l-12.859889-74.585719 62.368466 25.076118L405.263024 738.468918 405.263024 738.468918zM670.169369 733.325781 670.169369 733.325781 406.54932 627.877147l452.012767-334.347904L670.169369 733.325781 670.169369 733.325781z" p-id="22329"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/qq.svg b/src/assets/icons/qq.svg
deleted file mode 100644
index ee13d4ec..00000000
--- a/src/assets/icons/qq.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M18.448 57.545l-.244-.744-.198-.968-.132-.53v-2.181l.236-.859.24-.908.317-.953.428-1.06.561-1.103.794-1.104v-.773l.077-.724.123-.984.34-1.106.313-1.194.25-.548.289-.511.371-.569.405-.423v-2.73l.234-1.407.236-1.633.42-1.955.577-2.035.43-1.118.426-1.217.468-1.135.559-1.216.57-1.332.655-1.247.737-1.331.929-1.33.43-.762.457-.624.995-1.406 1.025-1.403 1.163-1.444 1.246-1.405 1.352-1.384 1.41-1.423 1.708-1.536 1.083-.934 1.322-1.008 1.34-.89 1.448-.855 1.392-.76 1.57-.63 1.667-.775 1.657-.532 1.653-.552 1.787-.548 1.785-.417 1.876-.347L59.128.68l1.879-.245 1.876-.252 2.002-.106h5.912l1.97.243 1.981.231 2.019.207 1.874.441 1.979.413 1.857.475 2.035.53 1.862.646 1.782.738 1.904.78 1.736.853 1.689.95 1.655 1.044 1.425.971.662.548.693.401 1.323 1.1 1.115 1.064 1.112 1.1 1.083 1.214.894 1.178 1.064 1.217.74 1.306.752 1.162.798 1.352.661 1.175 1.113 2.489.546 1.286.428 1.192.428 1.294.384 1.217.267 1.047.347 1.231.607 2.198.388 1.924.253 1.861.217 1.497.342 2.28.077.362.274.41.737 1.18.473.8.42.832.534.892.472 1.07.307 1.093.334 1.2.252 1.232.115.605.106.746v.648l-.106.643v.8l-.192.774-.35 1.5-.403.76-.299.852v.213l.142.264.4.623 1.746 2.53 1.377 1.9.66 1.267.889 1.389.774 1.52.893 1.627.894 1.828 1.006 2.069.567 1.268.518 1.239.447 1.307.44 1.175.336 1.235.342 1.16.432 2.261.343 2.31.235 2.05v2.891l-.158 1.025-.226 1.768-.308 1.59-.48 1.44-.18.588-.336.707-.28.493-.375.607-.33.383-.42.494-.375.4-.401.34-.48.207-.432.207-.355.114h-.543l-.346-.114-.66-.32-.302-.212-.317-.223-.347-.304-.35-.342-.579-.63-.684-.89-.539-.917-.538-.734-.526-.855-.741-1.517-.833-1.579-.098-.055h-.138l-.338.247-.196.415-.326.516-.567 1.533-.856 2.182-1.096 2.626-.824 1.308-.864 1.366-1.027 1.536-1.09 1.503-.557.68-.676.743-1.555 1.497.136.135.21.214.777.446 3.235 1.524 1.41.779 1.347.756 1.332.953 1.187.982.574.443.432.511.445.593.367.643.198.533.242.64.105.554.115.647-.115.433v.44l-.105.454-.242.415-.092.325-.22.394-.587.784-.543.627-.42.47-.35.348-.893.638-1.01.556-1.077.532-1.155.511-1.287.495-.693.207-.608.167-1.496.342-1.545.325-1.552.323-1.689.27-1.74.072-1.785.21h-5.539l-1.998-.114-1.86-.168-2.005-.27-1.99-.209-2.095-.286-2.03-.495-1.981-.374-1.968-.552-2.019-.707-1.98-.585-1.044-.342-.927-.323-.586-.223-.582-.12h-1.647l-1.904-.131-.962-.096-1.24-.135-.795.705-1.085.665-1.471.701-1.628.875-.99.475-1.033.376-2.281.914-1.24.305-1.3.343-1.803.344-1.13.086-1.193.1-1.246.135-1.45.053h-5.926l-3.346-.053-3.25-.321-1.644-.23-1.589-.23-1.546-.227-1.547-.305-1.442-.456-1.434-.325-1.294-.51-1.223-.474-1.142-.533-.99-.583-.984-.71-.336-.343-.44-.415-.334-.362-.3-.417-.278-.415-.215-.42-.311-.89-.109-.46-.138-.51v-.473l.138-.533v-.53l.109-.53v-1.069l.052-.564.259-.647.215-.646.39-.779.286-.3.236-.348.615-.738.49-.38.464-.266.428-.338.676-.21.543-.324.676-.341.77-.227.775-.231.897-.192.85-.11 1.008-.13 1.093-.081.284-.092h.063l.137-.115v-.13l-.2-.266-.58-.27-1.45-1.231-.975-.761-1.127-.967-1.136-1.082-1.181-1.382-1.36-1.558-.508-.843-.672-.87-.58-1.007-.522-1.1-.704-1.047-.459-1.194-.547-1.192-.546-1.33-.397-1.273-.378-1.575-.112-.057h-.115l-.059-.113h-.14l-.23.113-.114.057-.158.264-.057.321-.119.286-.206.477-.664 1.157-.345.701-.546.612-.58.736-.641.816-.677.724-.795.701-.734.658-.814.524-.89.546-.855.325-1.008.247-.99.095h-.233l-.228-.095-.18-.384-.29-.188-.38-.912-.237-.493-.255-.707-.21-.734-.113-.724-.313-1.648-.12-.972v-3.185l.12-2.379.196-1.214.23-1.252.21-1.347.374-1.254.42-1.443.431-1.407.578-1.448.545-1.38.754-1.4.699-1.52.855-1.425 1.006-1.538 1.023-1.382 1.069-1.538.891-1.071 1.142-1.227 1.202-1.237.56-.59.678-.662.985-.836 1.012-.853 1.647-1.446 1.242-.889z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/question.svg b/src/assets/icons/question.svg
deleted file mode 100644
index cf75bd4b..00000000
--- a/src/assets/icons/question.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1581238842264" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1409" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0C229.233778 0 0 229.233778 0 512s229.233778 512 512 512 512-229.233778 512-512A512 512 0 0 0 512 0z m0 938.666667C276.366222 938.666667 85.333333 747.633778 85.333333 512 85.333333 276.366222 276.366222 85.333333 512 85.333333c235.633778 0 426.666667 191.032889 426.666667 426.666667a426.666667 426.666667 0 0 1-426.666667 426.666667z m0-717.653334a170.666667 170.666667 0 0 0-170.666667 170.666667 42.666667 42.666667 0 0 0 85.333334 0 85.333333 85.333333 0 1 1 85.333333 85.333333 42.666667 42.666667 0 0 0-42.666667 42.666667v111.36a42.666667 42.666667 0 0 0 85.333334 0v-74.24A170.666667 170.666667 0 0 0 512 221.013333z m-42.666667 542.293334a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 0 0-85.333334 0z" p-id="1410"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/rabbitmq.svg b/src/assets/icons/rabbitmq.svg
new file mode 100644
index 00000000..65aa1985
--- /dev/null
+++ b/src/assets/icons/rabbitmq.svg
@@ -0,0 +1 @@
+<svg t="1650625601015" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38305" width="200" height="200"><path d="M192 128h-128v768h896V384h-384V128h-128v256h-256V128zM384 320v-256h256v256h384v640H0V64h256v256h128z" p-id="38306"></path><path d="M640 576v128h128v-128H640zM576 512h256v256h-256V512z" p-id="38307"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/radio.svg b/src/assets/icons/radio.svg
deleted file mode 100644
index 0cde3452..00000000
--- a/src/assets/icons/radio.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575966775973" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="879" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M507.39346659 71.84873358c241.53533667 0 437.39770766 195.85422109 437.39770767 437.37442191 0 241.53766571-195.86237099 437.38955776-437.39770767 437.38955776-241.50040803 0-437.34997219-195.85189205-437.34997219-437.38955776C70.0434944 267.70295467 265.89189347 71.84873358 507.39346659 71.84873358L507.39346659 71.84873358zM507.39346659 282.81899805c-125.00686734 0-226.37039389 101.38914133-226.37039388 226.41813048 0 125.01268821 101.36352768 226.39717262 226.37039388 226.39717262 125.04295993 0 226.42395136-101.38448441 226.42395136-226.39717262C733.81625401 384.20813938 632.43642653 282.81899805 507.39346659 282.81899805L507.39346659 282.81899805zM507.39346659 120.78172615c-214.46664192 0-388.42047261 173.95150279-388.4204726 388.44026539 0 214.51204949 173.95499463 388.46122325 388.4204726 388.46122325 214.52369237 0 388.46005817-173.94800981 388.46005818-388.46122325C895.85236082 294.73322894 721.91715897 120.78172615 507.39346659 120.78172615z" p-id="880"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/refresh.svg b/src/assets/icons/refresh.svg
new file mode 100644
index 00000000..1f549f1a
--- /dev/null
+++ b/src/assets/icons/refresh.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M400 148l-21.12-24.57A191.43 191.43 0 0 0 240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 0 0 181.07-128" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"></path><path d="M464 68.45V220a4 4 0 0 1-4 4H308.45a4 4 0 0 1-2.83-6.83L457.17 65.62a4 4 0 0 1 6.83 2.83z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/route.svg b/src/assets/icons/route.svg
deleted file mode 100644
index b2071244..00000000
--- a/src/assets/icons/route.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg t="1612242856287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5203" width="128" height="128"><path d="M422.4 395.392l-27.2-327.68L256.768 194.88 114.688 64 65.472 109.12 207.616 240 69.184 367.168 422.4 395.392zM960 66.752 604.096 91.776l138.112 127.488L600.064 350.08l49.216 45.312 142.016-130.88 138.112 127.552L960 66.752zM423.936 675.392 374.848 630.016l-142.144 130.88L94.592 633.344 64 958.656l355.84-25.024-138.112-127.488L423.936 675.392zM958.528 914.88l-142.016-130.88 138.368-127.104L601.472 628.608l27.328 327.744 138.432-127.232L909.248 960 958.528 914.88z" p-id="5204" fill="#666666"></path></svg>
diff --git a/src/assets/icons/row.svg b/src/assets/icons/row.svg
deleted file mode 100644
index 07809922..00000000
--- a/src/assets/icons/row.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579339929870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1182" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M152 854.856875h325.7146875V237.715625H134.856875v600q0 6.99375 5.0746875 12.0684375T152 854.856875z m737.143125-17.1421875v-600H546.284375v617.1421875H872q6.99375 0 12.0684375-5.07375t5.0746875-12.0684375z m68.5715625-651.429375V837.715625q0 35.3821875-25.16625 60.5484375T872 923.4284375H152q-35.383125 0-60.5484375-25.1653125T66.284375 837.7146875V186.284375q0-35.3821875 25.16625-60.5484375T152 100.5715625h720q35.383125 0 60.5484375 25.1653125t25.16625 60.5484375z" p-id="1183"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg
deleted file mode 100644
index 84233dda..00000000
--- a/src/assets/icons/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/security.svg b/src/assets/icons/security.svg
new file mode 100644
index 00000000..bcd9d2e6
--- /dev/null
+++ b/src/assets/icons/security.svg
@@ -0,0 +1 @@
+<svg t="1650625555592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36820" width="200" height="200"><path d="M586.666667 494.933333l-8.533334 40.533334-44.8-119.466667-19.2 2.133333-29.866666 57.6H448l-8.533333 19.2-25.6 51.2-29.866667-72.533333-17.066667 6.4 38.4 93.866667h17.066667l38.4-78.933334H497.066667l27.733333-51.2 46.933333 125.866667h19.2l14.933334-74.666667h51.2v-19.2h-66.133334l-4.266666 19.2zM512 283.733333c-117.333333 0-213.333333 96-213.333333 213.333334s96 213.333333 213.333333 213.333333 213.333333-96 213.333333-213.333333c0-119.466667-96-213.333333-213.333333-213.333334z m0 401.066667c-104.533333 0-189.866667-85.333333-189.866667-189.866667s85.333333-189.866667 189.866667-189.866666 189.866667 85.333333 189.866667 189.866666-85.333333 189.866667-189.866667 189.866667z m381.866667-460.8c-44.8-14.933333-134.4-44.8-179.2-66.133333-89.6-44.8-123.733333-74.666667-157.866667-100.266667-12.8-10.666667-27.733333-14.933333-44.8-14.933333s-32 4.266667-44.8 12.8c-34.133333 25.6-68.266667 55.466667-157.866667 100.266666-44.8 21.333333-134.4 51.2-179.2 66.133334-29.866667 10.666667-46.933333 36.266667-44.8 66.133333 8.533333 98.133333 32 288 89.6 405.333333 68.266667 134.4 236.8 238.933333 302.933334 279.466667 10.666667 6.4 21.333333 8.533333 34.133333 8.533333s23.466667-2.133333 34.133333-8.533333c66.133333-40.533333 234.666667-145.066667 302.933334-279.466667 57.6-117.333333 81.066667-307.2 89.6-401.066666 2.133333-32-17.066667-59.733333-44.8-68.266667zM810.666667 674.133333c-42.666667 85.333333-138.666667 172.8-285.866667 262.4-4.266667 0-8.533333 2.133333-12.8 2.133334s-8.533333-2.133333-10.666667-4.266667c-149.333333-87.466667-245.333333-177.066667-288-260.266667C153.6 554.666667 132.266667 347.733333 128 288c-2.133333-14.933333 12.8-21.333333 17.066667-23.466667l17.066666-6.4c49.066667-17.066667 125.866667-42.666667 168.533334-64 81.066667-40.533333 119.466667-70.4 151.466666-93.866666 4.266667-4.266667 8.533333-6.4 12.8-10.666667 0-2.133333 6.4-4.266667 14.933334-4.266667h4.266666c8.533333 0 14.933333 2.133333 17.066667 4.266667 4.266667 4.266667 8.533333 6.4 12.8 10.666667 29.866667 23.466667 68.266667 53.333333 151.466667 93.866666 42.666667 21.333333 117.333333 46.933333 168.533333 64l17.066667 6.4c4.266667 2.133333 17.066667 6.4 17.066666 23.466667-6.4 59.733333-27.733333 266.666667-87.466666 386.133333z" p-id="36821"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/select.svg b/src/assets/icons/select.svg
deleted file mode 100644
index d6283828..00000000
--- a/src/assets/icons/select.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575803481213" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="804" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M62 511.97954521C62 263.86590869 263.90681826 62 511.97954521 62s449.97954521 201.825 449.97954521 449.97954521c0 248.19545479-201.90681826 449.97954521-449.97954521 449.97954521C263.90681826 962 62 760.175 62 511.97954521M901.98636348 511.97954521c0-215.24318174-175.00909131-390.41590869-390.00681827-390.41590869-215.03863652 0-389.96590869 175.17272695-389.96590868 390.41590869 0 215.28409131 175.00909131 390.45681826 389.96590868 390.45681826C727.01818174 902.47727305 901.98636348 727.30454521 901.98636348 511.97954521M264.17272695 430.28409131c0-5.76818174 2.12727305-11.51590869 6.64772696-15.87272696 8.71363652-8.75454521 22.88863652-8.75454521 31.725 0l209.4340913 208.22727305L721.45454521 414.53409131c8.75454521-8.71363652 22.97045479-8.71363652 31.90909132 0 8.71363652 8.75454521 8.71363652 22.88863652 0 31.60227304L511.97954521 685.74090869 270.71818174 446.01363653C266.27954521 441.77954521 264.17272695 436.05227305 264.17272695 430.28409131" p-id="805"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/server.svg b/src/assets/icons/server.svg
deleted file mode 100644
index ca37b001..00000000
--- a/src/assets/icons/server.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547360688278" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M890 120H134a70 70 0 0 0-70 70v500a70 70 0 0 0 70 70h756a70 70 0 0 0 70-70V190a70 70 0 0 0-70-70z m-10 520a40 40 0 0 1-40 40H712V448a40 40 0 0 0-80 0v232h-80V368a40 40 0 0 0-80 0v312h-80V512a40 40 0 0 0-80 0v168H184a40 40 0 0 1-40-40V240a40 40 0 0 1 40-40h656a40 40 0 0 1 40 40zM696 824H328a40 40 0 0 0 0 80h368a40 40 0 0 0 0-80z" fill="#bfbfbf" p-id="6718"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/shopping.svg b/src/assets/icons/shopping.svg
index 87513e7c..8d2b4bf9 100644
--- a/src/assets/icons/shopping.svg
+++ b/src/assets/icons/shopping.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M42.913 101.36c1.642 0 3.198.332 4.667.996a12.28 12.28 0 0 1 3.89 2.772c1.123 1.184 1.987 2.582 2.592 4.193.605 1.612.908 3.318.908 5.118 0 1.8-.303 3.507-.908 5.118-.605 1.611-1.469 3.01-2.593 4.194a13.3 13.3 0 0 1-3.889 2.843 10.582 10.582 0 0 1-4.667 1.066c-1.729 0-3.306-.355-4.732-1.066a13.604 13.604 0 0 1-3.825-2.843c-1.123-1.185-1.988-2.583-2.593-4.194a14.437 14.437 0 0 1-.907-5.118c0-1.8.302-3.506.907-5.118.605-1.61 1.47-3.009 2.593-4.193a12.515 12.515 0 0 1 3.825-2.772c1.426-.664 3.003-.996 4.732-.996zm53.932.285c1.643 0 3.22.331 4.733.995a11.386 11.386 0 0 1 3.889 2.772c1.08 1.185 1.945 2.583 2.593 4.194.648 1.61.972 3.317.972 5.118 0 1.8-.324 3.506-.972 5.117-.648 1.611-1.513 3.01-2.593 4.194a12.253 12.253 0 0 1-3.89 2.843 11 11 0 0 1-4.732 1.066 10.58 10.58 0 0 1-4.667-1.066 12.478 12.478 0 0 1-3.824-2.843c-1.08-1.185-1.945-2.583-2.593-4.194a13.581 13.581 0 0 1-.973-5.117c0-1.801.325-3.507.973-5.118.648-1.611 1.512-3.01 2.593-4.194a11.559 11.559 0 0 1 3.824-2.772 11.212 11.212 0 0 1 4.667-.995zm21.781-80.747c2.42 0 4.3.355 5.64 1.066 1.34.71 2.29 1.587 2.852 2.63a6.427 6.427 0 0 1 .778 3.34c-.044 1.185-.195 2.204-.454 3.057-.26.853-.8 2.606-1.62 5.26a589.268 589.268 0 0 1-2.788 8.743 1236.373 1236.373 0 0 0-3.047 9.453c-.994 3.128-1.75 5.592-2.269 7.393-1.123 3.79-2.55 6.42-4.278 7.89-1.728 1.469-3.846 2.203-6.352 2.203H39.023l1.945 12.795h65.342c4.148 0 6.223 1.943 6.223 5.828 0 1.896-.41 3.53-1.232 4.905-.821 1.374-2.442 2.061-4.862 2.061H38.505c-1.729 0-3.176-.426-4.343-1.28-1.167-.852-2.14-1.966-2.917-3.34a21.277 21.277 0 0 1-1.88-4.478 44.128 44.128 0 0 1-1.102-4.55c-.087-.568-.324-1.942-.713-4.122-.39-2.18-.865-4.904-1.426-8.174l-1.88-10.947c-.692-4.027-1.383-8.079-2.075-12.154-1.642-9.572-3.5-20.234-5.574-31.986H6.87c-1.296 0-2.377-.356-3.24-1.067a9.024 9.024 0 0 1-2.14-2.558 10.416 10.416 0 0 1-1.167-3.2C.108 8.53 0 7.488 0 6.54c0-1.896.583-3.46 1.75-4.69C2.917.615 4.494 0 6.482 0h13.095c1.728 0 3.111.284 4.148.853 1.037.569 1.858 1.28 2.463 2.132a8.548 8.548 0 0 1 1.297 2.701c.26.948.475 1.754.648 2.417.173.758.346 1.825.519 3.199.173 1.374.345 2.772.518 4.193.26 1.706.519 3.507.778 5.403h88.678z"/></svg>
\ No newline at end of file
+<svg t="1650814514935" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42619" width="200" height="200"><path d="M346.112 806.912q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM772.096 808.96q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM944.128 227.328q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.328t-38.4 14.848l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-13.312l21.504 0 21.504 0 25.6 0 34.816 0q20.48 0 32.768 6.144t19.456 15.36 10.24 19.456 5.12 17.408q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM867.328 194.56l-374.784 0 135.168-135.168q23.552-23.552 51.712-24.064t51.712 23.04z" p-id="42620"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/slider.svg b/src/assets/icons/slider.svg
deleted file mode 100644
index fbe4f39f..00000000
--- a/src/assets/icons/slider.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577185310368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1238" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M951.453125 476.84375H523.671875a131.8359375 131.8359375 0 0 0-254.1796875 0H72.546875v70.3125h196.9453125a131.8359375 131.8359375 0 0 0 254.1796875 0H951.453125z" p-id="1239"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg
deleted file mode 100644
index 6cf86e66..00000000
--- a/src/assets/icons/star.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M70.66 4.328l14.01 29.693c1.088 2.29 3.177 3.882 5.603 4.25l31.347 4.76c6.087.926 8.528 8.756 4.117 13.247L103.05 79.395c-1.75 1.78-2.544 4.352-2.132 6.867l5.352 32.641c1.043 6.337-5.33 11.182-10.778 8.19l-28.039-15.409a7.13 7.13 0 0 0-6.91 0l-28.039 15.41c-5.448 2.99-11.821-1.854-10.777-8.19l5.352-32.642c.415-2.515-.387-5.088-2.136-6.867L2.264 56.278C-2.146 51.787.286 43.957 6.38 43.031l31.343-4.76c2.419-.368 4.51-1.96 5.595-4.25L57.334 4.328c2.728-5.77 10.605-5.77 13.325 0z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/swagger.svg b/src/assets/icons/swagger.svg
deleted file mode 100644
index 05d4e7bc..00000000
--- a/src/assets/icons/swagger.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1566036776944" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6463" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M64 223.995345h168.001164v47.997673c0 26.428509 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.569164 41.984-47.997673v-47.997673h504.003491a32.004655 32.004655 0 0 0 0-64.009309H455.996509V111.988364c0-26.428509-18.878836-47.997673-41.984-47.997673H273.985164c-23.095855 0-41.984 21.569164-41.984 47.997673v47.997672H64a32.004655 32.004655 0 0 0 0 64.009309zM288.004655 128h111.997672V256H288.004655V128zM960 479.995345H791.998836v-47.997672c0-26.372655-18.878836-47.997673-41.984-47.997673H609.978182c-23.095855 0-41.984 21.634327-41.984 47.997673v47.997672H64a32.004655 32.004655 0 0 0 0 64.00931h504.003491v47.997672c0 26.363345 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.634327 41.984-47.997673v-47.997672h168.001164a32.004655 32.004655 0 1 0-0.009309-64.00931zM735.995345 576H623.997673v-128h111.997672v128zM960 800.293236v-0.288581H455.996509v-47.997673c0-26.363345-18.878836-47.997673-41.984-47.997673H274.050327c-23.105164 0-41.984 21.634327-41.984 47.997673v47.997673H64v0.288581a32.004655 32.004655 0 0 0 0 64.009309c0.986764 0 1.917673-0.195491 2.885818-0.288581h165.115346v47.997672c0 26.363345 18.878836 47.997673 41.984 47.997673h140.036654c23.095855 0 41.984-21.634327 41.984-47.997673v-47.997672h501.108364c0.968145 0.093091 1.899055 0.288582 2.895127 0.288581a32.004655 32.004655 0 1 0-0.009309-64.009309zM400.002327 896H288.004655V768h111.997672v128z" fill="" p-id="6464"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/switch.svg b/src/assets/icons/switch.svg
deleted file mode 100644
index 0ba61e38..00000000
--- a/src/assets/icons/switch.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1576042673958" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1110" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M692 792H332c-150 0-270-120-270-270s120-270 270-270h360c150 0 270 120 270 270 0 147-120 270-270 270zM332 312c-117 0-210 93-210 210s93 210 210 210h360c117 0 210-93 210-210s-93-210-210-210H332z" p-id="1111"></path><path d="M341 522m-150 0a150 150 0 1 0 300 0 150 150 0 1 0-300 0Z" p-id="1112"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/system.svg b/src/assets/icons/system.svg
index dba28cf6..e3b7e2d4 100644
--- a/src/assets/icons/system.svg
+++ b/src/assets/icons/system.svg
@@ -1,2 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827724451" class="icon" style="" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10233" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.71875" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
-</style></defs><path d="M1080.09609 434.500756c-4.216302-23.731757-26.9241-47.945376-50.595623-53.185637l-17.648235-4.095836a175.940257 175.940257 0 0 1-101.612877-80.832531 177.807476 177.807476 0 0 1-18.732427-129.801867l5.541425-16.684509c7.10748-23.129428-2.108151-54.992624-20.599646-70.833873 0 0-16.624276-14.094495-63.244529-41.199293-46.800951-26.984332-66.858502-34.513443-66.858502-34.513443-22.76803-8.372371-54.631227-0.361397-71.255503 17.407304l-12.287509 13.251234a173.470708 173.470708 0 0 1-120.465769 48.065842A174.13327 174.13327 0 0 1 421.329029 33.590675L409.583617 20.761071C393.140039 2.99237 361.096144-4.898138 338.267881 3.353767c0 0-20.358715 7.529111-67.099434 34.513443-46.800951 27.34573-63.244529 41.440225-63.244529 41.440225-18.431263 15.66055-27.646894 47.222582-20.539413 70.592941l5.059562 16.865207a178.048407 178.048407 0 0 1-18.672194 129.621169 174.916297 174.916297 0 0 1-102.275439 81.073463l-17.045906 3.854904c-23.310126 5.42096-46.258856 29.333415-50.595623 53.185637 0 0-3.854905 21.382674-3.854905 75.712737 0 54.330062 3.854905 75.712736 3.854905 75.712736 4.216302 23.972688 26.9241 47.945376 50.595623 53.185637l16.624276 3.854905a174.253736 174.253736 0 0 1 102.395904 81.314394c23.310126 40.837896 28.911785 87.337683 18.732427 129.801867l-4.81863 16.443578c-7.10748 23.129428 2.108151 54.992624 20.599646 70.833872 0 0 16.624276 14.094495 63.244529 41.199293 46.800951 27.104798 66.918735 34.513443 66.918735 34.513443 22.707798 8.372371 54.631227 0.361397 71.255503-17.407303l11.624947-12.588673a175.096996 175.096996 0 0 1 242.256662 0.120465l11.624947 12.648906c16.383345 17.708468 48.427239 25.598976 71.255503 17.347071 0 0 20.358715-7.529111 67.159666-34.513443 46.740719-27.104798 63.124063-41.199293 63.124064-41.199293 18.491496-15.600317 27.707127-47.463513 20.599646-70.833873l-5.059562-17.106139a176.723284 176.723284 0 0 1 18.672194-129.139305 176.060722 176.060722 0 0 1 102.395904-81.314394l16.68451-3.854905c23.310126-5.42096 46.258856-29.333415 50.595623-53.185637 0 0 3.854905-21.382674 3.854904-75.712737-0.240932-54.330062-4.095836-75.833202-4.095836-75.833202z m-537.819428 293.334149c-119.261112 0-216.175824-97.336342-216.175824-217.621412a216.657687 216.657687 0 0 1 216.236057-217.320249c119.200879 0 216.115591 97.276109 216.11559 217.56118-0.240932 120.044139-96.974945 217.320248-216.175823 217.320249z" p-id="10234" fill="#bfbfbf"></path></svg>
\ No newline at end of file
+<svg t="1675605231338" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12660" width="200" height="200"><path d="M139 669.6V164.3c0-12.7 10.3-23.1 23.1-23.1h694.4c12.7 0 23.1 10.4 23.1 23.1v248.5h70V164.3c0-51.3-41.8-93.1-93.1-93.1H162c-51.3 0.1-93 41.8-93 93.1v505.3c0 51.3 41.8 93.1 93.1 93.1h224.7v-70H162c-12.7 0-23-10.4-23-23.1zM104.7 800.6h282v70h-282z" p-id="12661"></path><path d="M954.9 599.4l-5.1-15c-11.5-33.9-29.4-64.9-53.2-91.9l-10.5-11.9h-83.2l-41.7-72.2-15.6-3.1c-34.8-6.9-71.3-6.9-106.1 0l-15.6 3.1-41.7 72.2H499l-10.5 11.9c-23.8 27.1-41.7 58-53.2 91.9l-5.1 15 41.7 72.2-41.7 72.2 5.1 15c11.5 33.9 29.4 64.9 53.2 91.9l10.5 11.9h83.2l41.7 72.2 15.6 3.1c17.4 3.5 35.3 5.2 53.1 5.2s35.6-1.8 53.1-5.2l15.6-3.1 41.7-72.2h83.2l10.5-11.9c23.8-27.1 41.7-58 53.2-91.9l5.1-15-41.7-72.2 41.6-72.2z m-76.8 151.2c-6.4 14.9-14.5 29-24.3 42h-91.2l-45.6 79c-16.1 1.9-32.4 1.9-48.5 0l-45.6-79h-91.2c-9.8-13-17.9-27-24.3-42l45.6-79.1-45.6-79.1c6.4-14.9 14.5-29 24.3-42h91.2l45.6-79c16.1-1.9 32.4-1.9 48.5 0l45.6 79h91.2c9.8 13 17.9 27 24.3 42l-45.6 79.1 45.6 79.1z" p-id="12662"></path><path d="M692.7 560.2c-61.4 0-111.3 49.9-111.3 111.3s49.9 111.3 111.3 111.3S804 732.9 804 671.5c0-61.3-49.9-111.3-111.3-111.3z m0 152.7c-22.8 0-41.3-18.5-41.3-41.3s18.5-41.3 41.3-41.3 41.3 18.5 41.3 41.3-18.5 41.3-41.3 41.3z" p-id="12663"></path></svg>
diff --git a/src/assets/icons/tab.svg b/src/assets/icons/tab.svg
deleted file mode 100644
index b4b48e48..00000000
--- a/src/assets/icons/tab.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.921.052H49.08c-1.865 0-3.198 1.599-3.198 3.464v6.661c0 1.865 1.6 3.464 3.198 3.464h29.84c1.865 0 3.198-1.599 3.198-3.464V3.516C82.385 1.65 80.786.052 78.92.052zm45.563 0H94.642c-1.865 0-3.464 1.599-3.464 3.464v6.661c0 1.865 1.599 3.464 3.464 3.464h29.842c1.865-.266 3.464-1.599 3.464-3.464V3.516c0-1.865-1.599-3.464-3.464-3.464zm0 22.382H40.02c-1.866 0-3.464-1.599-3.464-3.464V3.516c0-1.865-1.599-3.464-3.464-3.464H3.516C1.65.052.052 1.651.052 3.516V124.75c0 1.598 1.599 3.197 3.464 3.197h120.968c1.865 0 3.464-1.599 3.464-3.464V25.898c0-1.865-1.599-3.464-3.464-3.464z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/table.svg b/src/assets/icons/table.svg
deleted file mode 100644
index 0e3dc9de..00000000
--- a/src/assets/icons/table.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/textarea.svg b/src/assets/icons/textarea.svg
deleted file mode 100644
index 2709f292..00000000
--- a/src/assets/icons/textarea.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802855098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2984" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M896 160H128c-35.2 0-64 28.8-64 64v576c0 35.2 28.8 64 64 64h768c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64z m0 608c0 16-12.8 32-32 32H160c-19.2 0-32-12.8-32-32V256c0-16 12.8-32 32-32h704c19.2 0 32 12.8 32 32v512z" p-id="2985"></path><path d="M224 288c-19.2 0-32 12.8-32 32v256c0 16 12.8 32 32 32s32-12.8 32-32V320c0-16-12.8-32-32-32z m608 480c19.2 0 32-12.8 32-32V608L704 768h128z" p-id="2986"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/time-range.svg b/src/assets/icons/time-range.svg
deleted file mode 100644
index 13c1202b..00000000
--- a/src/assets/icons/time-range.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1579774825624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1248" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M498.595712 482.290351 345.420077 482.290351l0 57.307194 210.477712 0L555.897789 274.196942l-57.301054 0L498.596735 482.290351zM498.595712 482.290351" p-id="1249"></path><path d="M577.685002 644.98478l379.879913 0 0 57.302077L577.685002 702.286858 577.685002 644.98478 577.685002 644.98478zM577.685002 644.98478" p-id="1250"></path><path d="M577.685002 773.764795l379.879913 0 0 57.307194L577.685002 831.071989 577.685002 773.764795 577.685002 773.764795zM577.685002 773.764795" p-id="1251"></path><path d="M577.685002 902.549927l379.879913 0 0 57.307194L577.685002 959.857121 577.685002 902.549927 577.685002 902.549927zM577.685002 902.549927" p-id="1252"></path><path d="M102.523001 382.290823c4.450359 2.615571 9.470699 3.954055 14.530948 3.954055 2.969635 0 5.952572-0.461511 8.836249-1.394766l190.809767-61.886489c15.052834-4.882194 23.297612-21.040199 18.415418-36.08894-4.882194-15.052834-21.040199-23.297612-36.093033-18.415418L175.676092 308.458257c15.994276-26.115797 35.170011-50.537 57.370639-72.743768 73.767074-73.767074 171.845857-114.388237 276.16783-114.388237 104.32095 0 202.39564 40.622186 276.16169 114.388237s114.393353 171.845857 114.393353 276.16783c0 26.427906-2.615571 52.449559-7.709589 77.780481l58.302871 0c4.464685-25.499767 6.708795-51.470255 6.708795-77.780481 0-60.449767-11.845793-119.102608-35.204803-174.336584-22.559808-53.334719-54.850236-101.226472-95.968725-142.349055-41.122583-41.122583-89.017406-73.408917-142.348032-95.968725C628.317169 75.866898 569.659211 64.021106 509.215584 64.021106c-60.448744 0-119.106702 11.845793-174.336584 35.207873-53.334719 22.559808-101.230566 54.846142-142.349055 95.968725-23.980157 23.980157-44.934398 50.278103-62.727647 78.601172l-20.738323-105.655342c-3.043313-15.527648-18.105357-25.642007-33.631982-22.599717-15.527648 3.048429-25.64303 18.105357-22.599717 33.637098l36.102243 183.932126C90.51348 371.153158 95.460142 378.13313 102.523001 382.290823L102.523001 382.290823zM102.523001 382.290823" p-id="1253"></path><path d="M126.020158 587.9416 67.768453 587.9416c5.759167 33.679054 15.368012 66.544579 28.789697 98.278327 22.559808 53.333696 54.850236 101.225449 95.971795 142.348032 41.122583 41.122583 89.014336 73.408917 142.349055 95.968725 54.112432 22.88829 111.517863 34.71157 170.668031 35.18229L505.547031 902.395408c-102.94972-0.941442-199.594851-41.445948-272.499277-114.349351C177.545672 732.543975 140.810003 663.275355 126.020158 587.9416L126.020158 587.9416zM126.020158 587.9416" p-id="1254"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/time.svg b/src/assets/icons/time.svg
deleted file mode 100644
index b376e32a..00000000
--- a/src/assets/icons/time.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577099827399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1008" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><defs><style type="text/css"></style></defs><path d="M520 559h204c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H488c-17.673 0-32-14.327-32-32 0-0.167 0.001-0.334 0.004-0.5a32.65 32.65 0 0 1-0.004-0.5V277c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v282z m-8 401C264.576 960 64 759.424 64 512S264.576 64 512 64s448 200.576 448 448-200.576 448-448 448z m0-64c212.077 0 384-171.923 384-384S724.077 128 512 128 128 299.923 128 512s171.923 384 384 384z" p-id="1009"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/tool.svg b/src/assets/icons/tool.svg
deleted file mode 100644
index c813067e..00000000
--- a/src/assets/icons/tool.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1553828490559" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1684" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M898.831744 900.517641 103.816972 900.517641c-36.002982 0-65.363683-29.286-65.363683-65.313541l0-554.949184c0-36.041868 29.361725-65.326844 65.363683-65.326844l795.015795 0c36.002982 0 65.198931 29.284977 65.198931 65.326844l0 554.949184C964.030675 871.231641 934.834726 900.517641 898.831744 900.517641L898.831744 900.517641zM103.816972 255.593236c-13.576203 0-24.711821 11.085476-24.711821 24.662703l0 554.949184c0 13.576203 11.136641 24.662703 24.711821 24.662703l795.015795 0c13.577227 0 24.547069-11.086499 24.547069-24.662703l0-554.949184c0-13.577227-10.970866-24.662703-24.547069-24.662703L103.816972 255.593236 103.816972 255.593236zM664.346245 251.774257c-11.161201 0-20.332071-9.080819-20.332071-20.332071l0-101.278661c0-13.576203-11.047614-24.623817-24.699542-24.623817L383.181611 105.539708c-13.576203 0-24.712845 11.04659-24.712845 24.623817l0 101.278661c0 11.252275-9.041934 20.332071-20.332071 20.332071-11.20111 0-20.319791-9.080819-20.319791-20.332071l0-101.278661c0-35.989679 29.323862-65.275679 65.364707-65.275679l236.133022 0c36.06745 0 65.402569 29.284977 65.402569 65.275679l0 101.278661C684.717202 242.694461 675.636383 251.774257 664.346245 251.774257L664.346245 251.774257zM413.233044 521.725502 75.694471 521.725502c-11.163247 0-20.333094-9.117658-20.333094-20.35663 0-11.252275 9.169847-20.332071 20.333094-20.332071l337.538573 0c11.277858 0 20.319791 9.080819 20.319791 20.332071C433.552835 512.607844 424.510902 521.725502 413.233044 521.725502L413.233044 521.725502zM912.894018 521.725502 575.367725 521.725502c-11.213389 0-20.332071-9.117658-20.332071-20.35663 0-11.252275 9.118682-20.332071 20.332071-20.332071l337.526293 0c11.290137 0 20.332071 9.080819 20.332071 20.332071C933.226089 512.607844 924.184155 521.725502 912.894018 521.725502L912.894018 521.725502zM557.56322 634.217552 445.085496 634.217552c-11.213389 0-20.332071-9.079796-20.332071-20.331048l0-168.763658c0-11.251252 9.118682-20.332071 20.332071-20.332071l112.478747 0c11.290137 0 20.370956 9.080819 20.370956 20.332071l0 168.763658C577.934177 625.137757 568.853357 634.217552 557.56322 634.217552L557.56322 634.217552zM465.417567 593.514525l71.827909 0L537.245476 465.454918l-71.827909 0L465.417567 593.514525 465.417567 593.514525z" p-id="1685" fill="#bfbfbf"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/tree-table.svg b/src/assets/icons/tree-table.svg
deleted file mode 100644
index 8aafdb82..00000000
--- a/src/assets/icons/tree-table.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M44.8 0h79.543C126.78 0 128 1.422 128 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H44.8c-2.438 0-3.657-1.422-3.657-4.267V4.267C41.143 1.422 42.362 0 44.8 0zm22.857 48h56.686c2.438 0 3.657 1.422 3.657 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H67.657C65.22 80 64 78.578 64 75.733V52.267C64 49.422 65.219 48 67.657 48zm0 48h56.686c2.438 0 3.657 1.422 3.657 4.267v23.466c0 2.845-1.219 4.267-3.657 4.267H67.657C65.22 128 64 126.578 64 123.733v-23.466C64 97.422 65.219 96 67.657 96zM50.286 68.267c2.02 0 3.657-1.91 3.657-4.267 0-2.356-1.638-4.267-3.657-4.267H17.37V32h6.4c2.02 0 3.658-1.91 3.658-4.267V4.267C27.429 1.91 25.79 0 23.77 0H3.657C1.637 0 0 1.91 0 4.267v23.466C0 30.09 1.637 32 3.657 32h6.4v80c0 2.356 1.638 4.267 3.657 4.267h36.572c2.02 0 3.657-1.91 3.657-4.267 0-2.356-1.638-4.267-3.657-4.267H17.37V68.267h32.915z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/tree.svg b/src/assets/icons/tree.svg
index dd4b7dd2..d40a414d 100644
--- a/src/assets/icons/tree.svg
+++ b/src/assets/icons/tree.svg
@@ -1 +1 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>
\ No newline at end of file
+<svg t="1650623941490" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9166" width="200" height="200"><path d="M977.454545 558.545455h-34.90909v-104.727273c0-44.218182-37.236364-81.454545-81.454546-81.454546H546.909091v-93.090909H744.727273c25.6 0 46.545455-20.945455 46.545454-46.545454V93.090909c0-25.6-20.945455-46.545455-46.545454-46.545454H279.272727c-25.6 0-46.545455 20.945455-46.545454 46.545454v139.636364c0 25.6 20.945455 46.545455 46.545454 46.545454h197.818182v93.090909H162.909091c-44.218182 0-81.454545 37.236364-81.454546 81.454546V558.545455H46.545455c-25.6 0-46.545455 20.945455-46.545455 46.545454v325.818182c0 25.6 20.945455 46.545455 46.545455 46.545454h139.636363c25.6 0 46.545455-20.945455 46.545455-46.545454V605.090909c0-25.6-20.945455-46.545455-46.545455-46.545454H151.272727v-104.727273c0-6.981818 4.654545-11.636364 11.636364-11.636364h314.181818v116.363637H442.181818c-25.6 0-46.545455 20.945455-46.545454 46.545454v325.818182c0 25.6 20.945455 46.545455 46.545454 46.545454h139.636364c25.6 0 46.545455-20.945455 46.545454-46.545454V605.090909c0-25.6-20.945455-46.545455-46.545454-46.545454h-34.909091v-116.363637H861.090909c6.981818 0 11.636364 4.654545 11.636364 11.636364V558.545455H837.818182c-25.6 0-46.545455 20.945455-46.545455 46.545454v325.818182c0 25.6 20.945455 46.545455 46.545455 46.545454h139.636363c25.6 0 46.545455-20.945455 46.545455-46.545454V605.090909c0-25.6-20.945455-46.545455-46.545455-46.545454zM162.909091 628.363636v279.272728H69.818182V628.363636h93.090909z m395.636364 0v279.272728h-93.09091V628.363636h93.09091zM302.545455 209.454545V116.363636h418.90909v93.090909H302.545455z m651.636363 698.181819h-93.090909V628.363636h93.090909v279.272728z" p-id="9167"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
deleted file mode 100644
index bae49c0a..00000000
--- a/src/assets/icons/upload.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1577540289643" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7922" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M530.944 458.24l4.8 3.456 122.176 106.816a32 32 0 0 1-37.44 51.584l-4.672-3.392L546.56 556.16v280.704a32 32 0 0 1-26.24 31.488l-5.76 0.512a32 32 0 0 1-31.424-26.24l-0.512-5.76-0.064-280.704-69.12 60.48a32 32 0 0 1-40.96 0.896l-4.16-3.968a32 32 0 0 1-0.96-40.96l4.032-4.16 122.176-106.816a32 32 0 0 1 37.312-3.456zM497.92 128c128.128 0 239.168 82.304 275.52 199.04 123.968 11.264 221.312 113.088 221.312 237.44 0 128.128-103.68 232.96-234.88 238.272h-5.888l-35.52 0.192a32 32 0 0 1-0.192-64l35.264-0.128 4.672-0.064c96.384-3.84 172.544-80.896 172.544-174.272 0-96.128-80.512-174.464-179.584-174.464h-1.984a32 32 0 0 1-32-25.28C695.872 264.96 604.736 192 497.92 192 381.824 192 285.44 277.76 274.816 388.48a32 32 0 0 1-28.352 28.8c-83.968 9.152-147.84 78.208-147.84 159.552l0.192 7.936c3.84 85.76 77.056 154.112 166.592 154.112h45.632a32 32 0 0 1 0 64h-45.632C142.016 802.944 40.32 708.032 34.88 586.88l-0.192-9.28c0-106.88 76.352-197.184 179.968-219.904C239.488 226.112 357.76 128 497.856 128z" p-id="7923"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg
index 0ba0716a..e4c7b389 100644
--- a/src/assets/icons/user.svg
+++ b/src/assets/icons/user.svg
@@ -1 +1 @@
-<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
\ No newline at end of file
+<svg t="1650622753800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4947" width="200" height="200"><path d="M599.378 958.454H424.62c-165.805 0-296.769 0-296.769-86.024v-17.178c0-161.188 133.115-292.258 296.77-292.258h174.756c163.619 0 296.769 131.102 296.769 292.258v17.178c0 86.024-137.557 86.024-296.768 86.024z m-176.39-346.981c-137.625 0-249.608 109.935-249.608 245.098v17.491c0 35.046 144.255 35.046 249.608 35.046h177.985c87.207 0 249.645 0 249.645-35.046v-17.491c0-135.163-112.018-245.098-249.645-245.098H422.988z m80.266-83.526c-129.923 0-235.555-104.14-235.555-232.12 0-128.015 105.632-232.119 235.555-232.119s235.554 104.104 235.554 232.12c0 127.978-105.7 232.12-235.554 232.12zM316.246 295.098c0 101.224 83.91 183.572 187.008 183.572 103.133 0 187.042-82.348 187.042-183.572 0-101.19-83.909-183.502-187.042-183.502-103.134 0-187.008 82.311-187.008 183.502z m0 17.767" fill="" p-id="4948"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/uv.svg b/src/assets/icons/uv.svg
new file mode 100644
index 00000000..ca4c3012
--- /dev/null
+++ b/src/assets/icons/uv.svg
@@ -0,0 +1 @@
+<svg t="1650813729189" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3256" width="200" height="200"><path d="M504.29 576.68c-150.17 0-272.35-122.93-272.35-274.03C231.95 153.42 354.12 32 504.29 32s272.33 121.42 272.33 270.65c0.01 151.1-122.16 274.03-272.33 274.03z m0-476.18c-112.4 0-203.84 90.69-203.84 202.15 0 113.33 91.45 205.53 203.84 205.53s203.83-92.19 203.83-205.53c0-111.46-91.43-202.15-203.83-202.15z" p-id="3257"></path><path d="M410.8 988.38H96.13c-18.92 0-34.25-15.33-34.25-34.25 0-245.82 198.46-445.81 442.4-445.81 18.92 0 34.25 15.33 34.25 34.25s-15.33 34.25-34.25 34.25c-194.72 0-355.16 151-372.37 343.05H410.8c18.92 0 34.25 15.33 34.25 34.25s-15.33 34.26-34.25 34.26z" p-id="3258"></path><path d="M756.99 637.76c-97.82 0-177.12 79.3-177.12 177.12S659.17 992 756.99 992s177.12-79.3 177.12-177.12H756.99V637.76z" p-id="3259"></path><path d="M785 609.76v177.12h177.12c0-97.82-79.3-177.12-177.12-177.12z" p-id="3260"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/validCode.svg b/src/assets/icons/validCode.svg
deleted file mode 100644
index cfb10214..00000000
--- a/src/assets/icons/validCode.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569580729849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940"></path><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/valid_code.svg b/src/assets/icons/valid_code.svg
new file mode 100644
index 00000000..39bf4783
--- /dev/null
+++ b/src/assets/icons/valid_code.svg
@@ -0,0 +1,9 @@
+<svg t="1655050462467" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2131"
+  width="200" height="200">
+  <path
+    d="M917.6 267.2c-36.1-2.5-72.4-9.3-103.6-19.3-10.1-3-20.2-6.4-30.3-10-21.4-6.3-50.5-18.8-83.6-36.6-0.4-0.2-0.7-0.4-1.1-0.6-7.8-4.2-15.7-8.7-23.8-13.4-10.9-6.3-21.7-12.9-32.5-19.9-0.4-0.3-0.8-0.5-1.2-0.8-7.7-5-15.5-10.2-23.1-15.5-5-3.4-10-7.1-15-10.7-3.8-2.8-7.5-5.3-11.3-8.2-27.4-20.5-54.5-43.5-79.9-68.3-25.4 24.8-52.5 47.8-79.9 68.3-3.7 2.8-7.5 5.4-11.3 8.2-5 3.6-10 7.3-15 10.7-7.7 5.4-15.4 10.5-23.1 15.5-0.4 0.3-0.8 0.5-1.2 0.8-10.8 6.9-21.6 13.6-32.5 19.9-8.1 4.7-16 9.2-23.8 13.4-0.3 0.2-0.7 0.4-1 0.6-33 17.8-62.2 30.3-83.6 36.6-10.1 3.6-20.2 7-30.3 10-31.1 10-67.4 16.8-103.6 19.3h0.1c1.1 16.2 2.1 37.7 3.4 60.9h0.7c6.1 86.8 23.5 210.2 49.7 282.8 1.2 3.2 2.2 6.5 3.3 9.6 0.6 1.5 1.2 2.8 1.8 4.3 62.8 162.1 171.9 280.1 303 323.4v0.4c17.3 5.7 31.9 9.3 43.5 11.5 11.5-2.2 26.1-5.8 43.5-11.5v-0.4C687 905 796.1 787 858.9 624.8c0.6-1.5 1.2-2.8 1.8-4.3 1.2-3.1 2.2-6.4 3.3-9.6 26.2-72.5 43.6-196 49.7-282.8h0.7c1.1-23.3 2.2-44.7 3.2-60.9z m-47.4 41.9l-0.5 9.5c-0.5 2.2-0.9 4.4-1 6.6C863 406 847 525.7 821.3 596.7c-0.7 1.9-1.4 3.9-2 5.8-0.4 1.2-0.8 2.5-1.4 4.1-0.5 1.2-1 2.5-1.4 3.4C758.1 760.8 657.7 869.3 541 907.8c-1.9 0.6-3.7 1.4-5.5 2.2-7.9 2.5-15.7 4.6-23.2 6.3-7.5-1.7-15.2-3.8-23.1-6.3-1.8-0.9-3.6-1.6-5.5-2.2-116.7-38.5-217.1-147-275.4-297.5-0.5-1.2-0.9-2.4-1.7-4.1-0.4-1.2-0.8-2.4-1.3-3.6-0.7-2-1.3-3.9-1.9-5.6-25.8-71.2-41.7-191-47.4-271.7-0.2-2.3-0.5-4.5-1-6.6l-0.5-9.3c-0.1-1.5-0.2-3-0.2-4.5 24.6-3.8 48.4-9.3 70-16.2 10.1-3 20.4-6.4 31.4-10.4 25.2-7.6 56.5-21.2 90.5-39.6 0.6-0.3 1.2-0.6 1.7-0.9 8.2-4.4 16.7-9.2 24.8-14 10.7-6.1 22-13 34.5-21.1 0.4-0.2 1-0.6 1.3-0.8 8.2-5.3 16.4-10.8 24.1-16.2 4.5-3.1 9.1-6.4 13.7-9.7l2.4-1.8 4-2.9c2.6-1.9 5.2-3.7 7.5-5.5 17.9-13.4 35.3-27.5 52-42.1 16.7 14.7 34 28.7 51.8 42 2.6 1.9 5.1 3.8 7.7 5.6l4.3 3.1 1.5 1.1c4.8 3.5 9.6 6.9 14 9.9 8.1 5.7 16.3 11.2 23.7 16l2.1 1.3c12.4 8 23.7 14.9 34.1 20.8 8.6 5 17 9.8 25 14.1 0.4 0.2 1 0.5 1.5 0.8 34.2 18.4 65.6 32.1 90.9 39.7 11 3.9 21.3 7.3 30.6 10.1 22.1 7.1 46.1 12.6 70.8 16.5 0.1 1.5 0.1 3 0 4.4z"
+    p-id="2132"></path>
+  <path
+    d="M710.6 411.2L476.1 651.6l-120-123c-8.3-8.5-21.8-8.5-30.1 0s-8.3 22.3 0 30.9L461.1 698c4.2 4.3 9.6 6.4 15.1 6.4 5.4 0 10.9-2.1 15-6.4l249.5-255.7c8.3-8.5 8.3-22.3 0-30.9-8.3-8.7-21.8-8.7-30.1-0.2z"
+    p-id="2133"></path>
+</svg>
diff --git a/src/assets/icons/verify_code.svg b/src/assets/icons/verify_code.svg
new file mode 100644
index 00000000..39bf4783
--- /dev/null
+++ b/src/assets/icons/verify_code.svg
@@ -0,0 +1,9 @@
+<svg t="1655050462467" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2131"
+  width="200" height="200">
+  <path
+    d="M917.6 267.2c-36.1-2.5-72.4-9.3-103.6-19.3-10.1-3-20.2-6.4-30.3-10-21.4-6.3-50.5-18.8-83.6-36.6-0.4-0.2-0.7-0.4-1.1-0.6-7.8-4.2-15.7-8.7-23.8-13.4-10.9-6.3-21.7-12.9-32.5-19.9-0.4-0.3-0.8-0.5-1.2-0.8-7.7-5-15.5-10.2-23.1-15.5-5-3.4-10-7.1-15-10.7-3.8-2.8-7.5-5.3-11.3-8.2-27.4-20.5-54.5-43.5-79.9-68.3-25.4 24.8-52.5 47.8-79.9 68.3-3.7 2.8-7.5 5.4-11.3 8.2-5 3.6-10 7.3-15 10.7-7.7 5.4-15.4 10.5-23.1 15.5-0.4 0.3-0.8 0.5-1.2 0.8-10.8 6.9-21.6 13.6-32.5 19.9-8.1 4.7-16 9.2-23.8 13.4-0.3 0.2-0.7 0.4-1 0.6-33 17.8-62.2 30.3-83.6 36.6-10.1 3.6-20.2 7-30.3 10-31.1 10-67.4 16.8-103.6 19.3h0.1c1.1 16.2 2.1 37.7 3.4 60.9h0.7c6.1 86.8 23.5 210.2 49.7 282.8 1.2 3.2 2.2 6.5 3.3 9.6 0.6 1.5 1.2 2.8 1.8 4.3 62.8 162.1 171.9 280.1 303 323.4v0.4c17.3 5.7 31.9 9.3 43.5 11.5 11.5-2.2 26.1-5.8 43.5-11.5v-0.4C687 905 796.1 787 858.9 624.8c0.6-1.5 1.2-2.8 1.8-4.3 1.2-3.1 2.2-6.4 3.3-9.6 26.2-72.5 43.6-196 49.7-282.8h0.7c1.1-23.3 2.2-44.7 3.2-60.9z m-47.4 41.9l-0.5 9.5c-0.5 2.2-0.9 4.4-1 6.6C863 406 847 525.7 821.3 596.7c-0.7 1.9-1.4 3.9-2 5.8-0.4 1.2-0.8 2.5-1.4 4.1-0.5 1.2-1 2.5-1.4 3.4C758.1 760.8 657.7 869.3 541 907.8c-1.9 0.6-3.7 1.4-5.5 2.2-7.9 2.5-15.7 4.6-23.2 6.3-7.5-1.7-15.2-3.8-23.1-6.3-1.8-0.9-3.6-1.6-5.5-2.2-116.7-38.5-217.1-147-275.4-297.5-0.5-1.2-0.9-2.4-1.7-4.1-0.4-1.2-0.8-2.4-1.3-3.6-0.7-2-1.3-3.9-1.9-5.6-25.8-71.2-41.7-191-47.4-271.7-0.2-2.3-0.5-4.5-1-6.6l-0.5-9.3c-0.1-1.5-0.2-3-0.2-4.5 24.6-3.8 48.4-9.3 70-16.2 10.1-3 20.4-6.4 31.4-10.4 25.2-7.6 56.5-21.2 90.5-39.6 0.6-0.3 1.2-0.6 1.7-0.9 8.2-4.4 16.7-9.2 24.8-14 10.7-6.1 22-13 34.5-21.1 0.4-0.2 1-0.6 1.3-0.8 8.2-5.3 16.4-10.8 24.1-16.2 4.5-3.1 9.1-6.4 13.7-9.7l2.4-1.8 4-2.9c2.6-1.9 5.2-3.7 7.5-5.5 17.9-13.4 35.3-27.5 52-42.1 16.7 14.7 34 28.7 51.8 42 2.6 1.9 5.1 3.8 7.7 5.6l4.3 3.1 1.5 1.1c4.8 3.5 9.6 6.9 14 9.9 8.1 5.7 16.3 11.2 23.7 16l2.1 1.3c12.4 8 23.7 14.9 34.1 20.8 8.6 5 17 9.8 25 14.1 0.4 0.2 1 0.5 1.5 0.8 34.2 18.4 65.6 32.1 90.9 39.7 11 3.9 21.3 7.3 30.6 10.1 22.1 7.1 46.1 12.6 70.8 16.5 0.1 1.5 0.1 3 0 4.4z"
+    p-id="2132"></path>
+  <path
+    d="M710.6 411.2L476.1 651.6l-120-123c-8.3-8.5-21.8-8.5-30.1 0s-8.3 22.3 0 30.9L461.1 698c4.2 4.3 9.6 6.4 15.1 6.4 5.4 0 10.9-2.1 15-6.4l249.5-255.7c8.3-8.5 8.3-22.3 0-30.9-8.3-8.7-21.8-8.7-30.1-0.2z"
+    p-id="2133"></path>
+</svg>
diff --git a/src/assets/icons/wechat.svg b/src/assets/icons/wechat.svg
deleted file mode 100644
index c586e551..00000000
--- a/src/assets/icons/wechat.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="110" xmlns="http://www.w3.org/2000/svg"><path d="M86.635 33.334c1.467 0 2.917.113 4.358.283C87.078 14.392 67.58.111 45.321.111 20.44.111.055 17.987.055 40.687c0 13.104 6.781 23.863 18.115 32.209l-4.527 14.352 15.82-8.364c5.666 1.182 10.207 2.395 15.858 2.395 1.42 0 2.829-.073 4.227-.189-.886-3.19-1.398-6.53-1.398-9.996 0-20.845 16.98-37.76 38.485-37.76zm-24.34-12.936c3.407 0 5.665 2.363 5.665 5.954 0 3.576-2.258 5.97-5.666 5.97-3.392 0-6.795-2.395-6.795-5.97 0-3.591 3.403-5.954 6.795-5.954zM30.616 32.323c-3.393 0-6.818-2.395-6.818-5.971 0-3.591 3.425-5.954 6.818-5.954 3.392 0 5.65 2.363 5.65 5.954 0 3.576-2.258 5.97-5.65 5.97z"/><path d="M127.945 70.52c0-19.075-18.108-34.623-38.448-34.623-21.537 0-38.5 15.548-38.5 34.623 0 19.108 16.963 34.622 38.5 34.622 4.508 0 9.058-1.2 13.584-2.395l12.414 7.167-3.404-11.923c9.087-7.184 15.854-16.712 15.854-27.471zm-50.928-5.97c-2.254 0-4.53-2.362-4.53-4.773 0-2.378 2.276-4.771 4.53-4.771 3.422 0 5.665 2.393 5.665 4.771 0 2.41-2.243 4.773-5.665 4.773zm24.897 0c-2.24 0-4.498-2.362-4.498-4.773 0-2.378 2.258-4.771 4.498-4.771 3.392 0 5.665 2.393 5.665 4.771 0 2.41-2.273 4.773-5.665 4.773z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/zip.svg b/src/assets/icons/zip.svg
deleted file mode 100644
index f806fc48..00000000
--- a/src/assets/icons/zip.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M78.527 116.793c.178.008.348.024.527.024h40.233c4.711-.005 8.53-3.677 8.534-8.21V18.895c-.004-4.532-3.823-8.204-8.534-8.209H79.054c-.179 0-.353.016-.527.024V0L0 10.082v107.406l78.527 10.342v-11.037zm0-101.362c.174-.024.348-.052.527-.052h40.233c2.018 0 3.659 1.578 3.659 3.52v89.713c-.003 1.942-1.64 3.517-3.659 3.519H79.054c-.179 0-.353-.028-.527-.052V15.431zM30.262 75.757l-18.721-.46V72.37l11.3-16.673v-.148l-10.266.164v-4.51l17.504-.44v3.264L18.696 70.76v.144l11.566.176v4.678zm9.419.231l-5.823-.144V50.671l5.823-.144v25.461zm22.255-11.632c-2.168 1.922-5.353 2.76-9.02 2.736-.702.004-1.402-.04-2.097-.131v9.303l-5.997-.148V50.743c1.852-.352 4.473-.647 8.218-.743 3.838-.096 6.608.539 8.48 1.913 1.807 1.306 3.032 3.5 3.032 6.112s-.926 4.833-2.612 6.331h-.004zM53.36 54.45c-.856-.01-1.71.083-2.541.275v7.682c.523.116 1.167.152 2.06.152 3.301-.004 5.36-1.614 5.36-4.314 0-2.425-1.772-3.843-4.875-3.791l-.004-.004zm39.847-37.066h9.564v3.795h-9.564v-3.795zm-9.568 5.68h9.564v3.8h-9.564v-3.8zm9.568 6.216h9.564v3.799h-9.564V29.28zm0 12h9.564v3.794h-9.564V41.28zm-9.568-6.096h9.564v3.795h-9.564v-3.795zm9.472 47.064c2.512 0 4.921-.96 6.697-2.67 1.776-1.708 2.773-4.026 2.772-6.442l-1.748-15.263c0-5.033-2.492-9.112-7.725-9.112-5.232 0-7.72 4.079-7.72 9.112l-1.752 15.263c-.001 2.417.996 4.735 2.773 6.444 1.777 1.71 4.187 2.669 6.7 2.668h.003zm-3.135-16.75h6.27v12.743h-6.27V65.5z"/></svg>
\ No newline at end of file
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 2c5e158b..a17fc3f0 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,19 +1,16 @@
 <template>
-  <el-breadcrumb
-      class="app-breadcrumb"
-      separator-class="el-icon-arrow-right"
-  >
+  <el-breadcrumb class="h-[50px] flex items-center">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item
-          v-for="(item, index) in breadcrumbs"
-          :key="item.path"
-      >
+      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span
-            v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
-            class="no-redirect"
-        >{{ generateTitle(item.meta.title) }}</span>
+          v-if="
+            item.redirect === 'noredirect' || index === breadcrumbs.length - 1
+          "
+          class="text-[var(--el-disabled-text-color)]"
+          >{{ translateRouteTitleI18n(item.meta.title) }}</span
+        >
         <a v-else @click.prevent="handleLink(item)">
-          {{ generateTitle(item.meta.title) }}
+          {{ translateRouteTitleI18n(item.meta.title) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>
@@ -21,81 +18,86 @@
 </template>
 
 <script setup lang="ts">
-import {onBeforeMount, ref, watch} from 'vue'
-import {useRoute, RouteLocationMatched} from 'vue-router'
-import {compile} from 'path-to-regexp'
-import router from '@/router'
-import {generateTitle} from '@/utils/i18n'
+import { onBeforeMount, ref, watch } from "vue";
+import { useRoute, RouteLocationMatched } from "vue-router";
+import { compile } from "path-to-regexp";
+import router from "@/router";
+import { translateRouteTitleI18n } from "@/utils/i18n";
 
-const currentRoute = useRoute()
+const currentRoute = useRoute();
 const pathCompile = (path: string) => {
-  const {params} = currentRoute
-  const toPath = compile(path)
-  return toPath(params)
-}
+  const { params } = currentRoute;
+  const toPath = compile(path);
+  return toPath(params);
+};
 
-const breadcrumbs = ref([] as Array<RouteLocationMatched>)
+const breadcrumbs = ref([] as Array<RouteLocationMatched>);
 
 function getBreadcrumb() {
-  let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title)
-  const first = matched[0]
+  let matched = currentRoute.matched.filter(
+    (item) => item.meta && item.meta.title
+  );
+  const first = matched[0];
   if (!isDashboard(first)) {
-    matched = [{path: '/dashboard', meta: {title: 'dashboard'}} as any].concat(matched)
+    matched = [
+      { path: "/dashboard", meta: { title: "dashboard" } } as any,
+    ].concat(matched);
   }
   breadcrumbs.value = matched.filter((item) => {
-    return item.meta && item.meta.title && item.meta.breadcrumb !== false
-  })
+    return item.meta && item.meta.title && item.meta.breadcrumb !== false;
+  });
 }
 
 function isDashboard(route: RouteLocationMatched) {
-  const name = route && route.name
+  const name = route && route.name;
   if (!name) {
-    return false
+    return false;
   }
-  return name.toString().trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+  return (
+    name.toString().trim().toLocaleLowerCase() ===
+    "Dashboard".toLocaleLowerCase()
+  );
 }
 
 function handleLink(item: any) {
-  const {redirect, path} = item
+  const { redirect, path } = item;
   if (redirect) {
     router.push(redirect).catch((err) => {
-      console.warn(err)
-    })
-    return
+      console.warn(err);
+    });
+    return;
   }
   router.push(pathCompile(path)).catch((err) => {
-    console.warn(err)
-  })
+    console.warn(err);
+  });
 }
 
-watch(() => currentRoute.path, (path) => {
-  if (path.startsWith('/redirect/')) {
-    return
+watch(
+  () => currentRoute.path,
+  (path) => {
+    if (path.startsWith("/redirect/")) {
+      return;
+    }
+    getBreadcrumb();
   }
-  getBreadcrumb()
-})
+);
 
 onBeforeMount(() => {
-  getBreadcrumb()
-})
-
+  getBreadcrumb();
+});
 </script>
 
 <style lang="scss" scoped>
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
+  margin-left: 8px;
   font-size: 14px;
   line-height: 50px;
-  margin-left: 8px;
+}
 
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
+// 覆盖 element-plus 的样式
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Dictionary/index.vue b/src/components/Dictionary/index.vue
new file mode 100644
index 00000000..892cc642
--- /dev/null
+++ b/src/components/Dictionary/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-select
+      v-model="selectedValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      clearable
+    >
+      <el-option
+        v-for="option in options"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      ></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getDictOptions } from "@/api/dict";
+
+const props = defineProps({
+  typeCode: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const selectedValue = useVModel(props, "modelValue", emits);
+
+const options: Ref<OptionType[]> = ref([]);
+
+onBeforeMount(() => {
+  // 根据字典类型编码(typeCode)获取字典选项
+  getDictOptions(props.typeCode).then((response) => {
+    options.value = response.data;
+  });
+});
+</script>
diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue
index 2f507ca4..4b0bba98 100644
--- a/src/components/GithubCorner/index.vue
+++ b/src/components/GithubCorner/index.vue
@@ -1,17 +1,22 @@
 <template>
-  <a href="https://github.com/hxrui" target="_blank" class="github-corner" aria-label="View source on Github">
+  <a
+    href="https://github.com/haoxianrui"
+    target="_blank"
+    class="github-corner"
+    aria-label="View source on Github"
+  >
     <svg
       width="80"
       height="80"
       viewBox="0 0 250 250"
-      style="fill:#40c9c6; color:#fff;"
+      style="color: #fff; fill: #40c9c6"
       aria-hidden="true"
     >
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
       <path
         d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
         fill="currentColor"
-        style="transform-origin: 130px 106px;"
+        style="transform-origin: 130px 106px"
         class="octo-arm"
       />
       <path
@@ -25,30 +30,33 @@
 
 <style scoped>
 .github-corner:hover .octo-arm {
-  animation: octocat-wave 560ms ease-in-out
+  animation: octocat-wave 560ms ease-in-out;
 }
 
 @keyframes octocat-wave {
   0%,
   100% {
-    transform: rotate(0)
+    transform: rotate(0);
   }
+
   20%,
   60% {
-    transform: rotate(-25deg)
+    transform: rotate(-25deg);
   }
+
   40%,
   80% {
-    transform: rotate(10deg)
+    transform: rotate(10deg);
   }
 }
 
-@media (max-width:500px) {
-  .github-corner:hover .octo-arm {
-    animation: none
-  }
+@media (width <= 500px) {
   .github-corner .octo-arm {
-    animation: octocat-wave 560ms ease-in-out
+    animation: octocat-wave 560ms ease-in-out;
+  }
+
+  .github-corner:hover .octo-arm {
+    animation: none;
   }
 }
 </style>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 368b0021..d98a4aa7 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -1,44 +1,46 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div
+    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] dark:hover:bg-[var(--el-fill-color-light)]"
+    @click="toggleClick"
+  >
     <svg
-      :class="{'is-active':isActive}"
+      :class="{ 'is-active': isActive }"
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
+      style="color: #fff !important"
     >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+      <path
+        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
+      />
     </svg>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Hamburger',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
+<script setup lang="ts">
+defineProps({
+  isActive: {
+    required: true,
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    toggleClick() {
-      this.$emit('toggleClick')
-    }
-  }
+});
+
+const emit = defineEmits(["toggleClick"]);
+
+function toggleClick() {
+  emit("toggleClick");
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .hamburger {
-  display: inline-block;
-  vertical-align: middle;
   width: 20px;
   height: 20px;
-}
+  vertical-align: -4px;
 
-.hamburger.is-active {
-  transform: rotate(180deg);
+  &.is-active {
+    transform: rotate(180deg);
+  }
 }
 </style>
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index f4be7071..bea826d1 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,83 +1,165 @@
-<template>
-  <div class="icon-body">
-    <el-input
-      v-model="iconName"
-      style="position: relative;"
-      clearable
-      placeholder="请输入图标名称"
-      @clear="filterIcons"
-      @input="filterIcons"
-    >
-      <template #suffix><i class="el-icon-search el-input__icon" /></template>
-    </el-input>
-    <div class="icon-list">
-      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
-        <svg-icon color="#999" :icon-class="item" style="height: 30px;width: 16px;margin-right: 5px" />
-        <span>{{ item }}</span>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: String,
+    require: false,
+    default: "",
+  },
+});
 
-<script setup>
-import { ref} from "vue";
-import SvgIcon from '@/components/SvgIcon/index.vue';
+const emit = defineEmits(["update:modelValue"]);
+const inputValue = toRef(props, "modelValue");
 
-let icons = []
-const modules = import.meta.glob('../../assets/icons/svg/*.svg');
-for (const path in modules) {
-  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
-  icons.push(p);
-}
-const iconList = ref(icons);
+const visible = ref(false); // 弹窗显示状态
 
-const iconName = ref('');
+const allIconNames: string[] = []; // 所有的图标名称集合
 
-const emit = defineEmits(['selected']);
+const filterValue = ref(""); // 筛选的值
+const filterIconNames = ref<string[]>([]); // 过滤后的图标名称集合
 
-function filterIcons() {
-  iconList.value = icons
-  if (iconName.value) {
-    iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
+const iconSelectorRef = ref();
+const iconSelectorDialogRef = ref();
+/**
+ * icon 加载
+ */
+function loadIcons() {
+  const icons = import.meta.glob("../../assets/icons/*.svg");
+  for (const icon in icons) {
+    const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
+    allIconNames.push(iconName);
   }
+  filterIconNames.value = allIconNames;
 }
 
-function selectedIcon(name) {
-  emit('selected', name)
-  document.body.click()
+/**
+ * icon 筛选
+ */
+function handleFilter() {
+  if (filterValue.value) {
+    filterIconNames.value = allIconNames.filter((iconName) =>
+      iconName.includes(filterValue.value)
+    );
+  } else {
+    filterIconNames.value = allIconNames;
+  }
 }
 
-function reset() {
-  iconName.value = ''
-  iconList.value = icons
+/**
+ * icon 选择
+ */
+function handleSelect(iconName: string) {
+  emit("update:modelValue", iconName);
+  visible.value = false;
 }
 
-defineExpose({
-  reset
-})
+/**
+ * 点击容器外的区域关闭弹窗 VueUse onClickOutside
+ */
+onClickOutside(iconSelectorRef, () => (visible.value = false), {
+  ignore: [iconSelectorDialogRef],
+});
+
+onMounted(() => {
+  loadIcons();
+});
 </script>
 
-<style lang='scss' scoped>
-.icon-body {
-  width: 100%;
-  padding: 10px;
-  .icon-list {
-    height: 200px;
-    overflow-y: scroll;
-    div {
-      height: 30px;
-      line-height: 30px;
-      margin-bottom: -5px;
-      cursor: pointer;
-      width: 33%;
-      float: left;
-    }
-    span {
-      display: inline-block;
-      vertical-align: -0.15em;
-      fill: currentColor;
-      overflow: hidden;
+<template>
+  <div ref="iconSelectorRef" class="iconselect-container">
+    <el-input
+      v-model="inputValue"
+      readonly
+      placeholder="点击选择图标"
+      @click="visible = !visible"
+    >
+      <template #prepend>
+        <svg-icon :icon-class="inputValue" />
+      </template>
+    </el-input>
+
+    <el-popover
+      shadow="none"
+      :visible="visible"
+      placement="bottom-end"
+      trigger="click"
+      width="400"
+    >
+      <template #reference>
+        <div
+          class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"
+          @click="visible = !visible"
+        >
+          <i-ep-caret-top v-show="visible"></i-ep-caret-top>
+          <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
+        </div>
+      </template>
+
+      <!-- 下拉选择弹窗 -->
+      <div ref="iconSelectorDialogRef">
+        <el-input
+          v-model="filterValue"
+          class="p-2"
+          placeholder="搜索图标"
+          clearable
+          @input="handleFilter"
+        />
+        <el-divider border-style="dashed" />
+
+        <el-scrollbar height="300px">
+          <ul class="icon-list">
+            <li
+              v-for="(iconName, index) in filterIconNames"
+              :key="index"
+              class="icon-item"
+              @click="handleSelect(iconName)"
+            >
+              <el-tooltip :content="iconName" placement="bottom" effect="light">
+                <svg-icon
+                  color="var(--el-text-color-regular)"
+                  :icon-class="iconName"
+                />
+              </el-tooltip>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.el-divider--horizontal {
+  margin: 10px auto !important;
+}
+
+.iconselect-container {
+  position: relative;
+  width: 400px;
+}
+
+.icon-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 10px;
+  margin-top: 10px;
+
+  .icon-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: center;
+    width: 10%;
+    padding: 5px;
+    margin: 0 10px 10px 0;
+    cursor: pointer;
+    border: 1px solid #ccc;
+
+    &:hover {
+      color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
+      transition: all 0.2s;
+      transform: scaleX(1.1);
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/LangSelect/index.vue b/src/components/LangSelect/index.vue
index b94de2fb..b4a63ead 100644
--- a/src/components/LangSelect/index.vue
+++ b/src/components/LangSelect/index.vue
@@ -1,49 +1,39 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import { useAppStore } from "@/store/modules/app";
+
+const appStore = useAppStore();
+const { locale } = useI18n();
+
+function handleLanguageChange(lang: string) {
+  locale.value = lang;
+  appStore.changeLanguage(lang);
+  if (lang == "en") {
+    ElMessage.success("Switch Language Successful!");
+  } else {
+    ElMessage.success("切换语言成功！");
+  }
+}
+</script>
+
 <template>
-  <el-dropdown class="lang-select" trigger="click" @command="handleSetLanguage">
-    <div class="lang-select__icon">
-      <svg-icon class-name="international-icon" icon-class="language"/>
+  <el-dropdown trigger="click" @command="handleLanguageChange">
+    <div>
+      <svg-icon icon-class="language" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item :disabled="language==='zh-cn'" command="zh-cn">
+        <el-dropdown-item
+          :disabled="appStore.language === 'zh-cn'"
+          command="zh-cn"
+        >
           中文
         </el-dropdown-item>
-        <el-dropdown-item :disabled="language==='en'" command="en">
+        <el-dropdown-item :disabled="appStore.language === 'en'" command="en">
           English
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
 </template>
-
-<script setup lang="ts">
-
-import {computed} from "vue";
-import useStore from "@/store";
-
-const {app}=useStore()
-const language = computed(() => app.language)
-
-import {useI18n} from 'vue-i18n'
-import {ElMessage} from 'element-plus'
-import SvgIcon from '@/components/SvgIcon/index.vue'
-
-const {locale} = useI18n()
-
-function handleSetLanguage(lang: string) {
-  locale.value = lang
-  app.setLanguage(lang)
-  if (lang == 'en') {
-    ElMessage.success('Switch Language Successful!')
-  } else {
-    ElMessage.success('切换语言成功！')
-  }
-}
-
-</script>
-
-<style lang='scss' scoped>
-.lang-select__icon {
-  line-height: 50px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index e0f85f21..84e8f3e0 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,102 +1,88 @@
 <template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
+  <div :class="{ hidden: hidden }" class="pagination">
     <el-pagination
-        :background="background"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :layout="layout"
-        :page-sizes="pageSizes"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :background="background"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
     />
   </div>
 </template>
 
-<script setup>
-import {computed} from "vue";
-import {scrollTo} from '@/utils/scroll-to'
+<script setup lang="ts">
+import { PropType } from "vue";
+import { scrollTo } from "@/utils/scroll-to";
 
 const props = defineProps({
   total: {
     required: true,
-    type: Number,
-    default: 0
+    type: Number as PropType<number>,
+    default: 0,
   },
   page: {
     type: Number,
-    default: 1
+    default: 1,
   },
   limit: {
     type: Number,
-    default: 20
+    default: 20,
   },
   pageSizes: {
-    type: Array,
+    type: Array as PropType<number[]>,
     default() {
-      return [10, 20, 30, 50]
-    }
+      return [10, 20, 30, 50];
+    },
   },
   layout: {
     type: String,
-    default: 'total, sizes, prev, pager, next, jumper'
+    default: "total, sizes, prev, pager, next, jumper",
   },
   background: {
     type: Boolean,
-    default: true
+    default: true,
   },
   autoScroll: {
     type: Boolean,
-    default: true
+    default: true,
   },
   hidden: {
     type: Boolean,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 
-const emit = defineEmits();
+const emit = defineEmits(["pagination", "update:page", "update:limit"]);
 
-const currentPage = computed({
-  get() {
-    return props.page
-  },
-  set(val) {
-    emit('update:page', val)
-  }
-})
+const currentPage = useVModel(props, "page", emit);
 
-const pageSize = computed({
-  get() {
-    return props.limit
-  },
-  set(val) {
-    emit('update:limit', val)
-  }
-})
+const pageSize = useVModel(props, "limit", emit);
 
-function handleSizeChange(val) {
-  emit('pagination', {page: currentPage, limit: val})
+function handleSizeChange(val: number) {
+  emit("pagination", { page: currentPage, limit: val });
   if (props.autoScroll) {
-    scrollTo(0, 800)
+    scrollTo(0, 800);
   }
 }
 
-function handleCurrentChange(val) {
-  emit('pagination', {page: val, limit: props.pageSizes})
+function handleCurrentChange(val: number) {
+  currentPage.value = val;
+  emit("pagination", { page: val, limit: props.limit });
   if (props.autoScroll) {
-    scrollTo(0, 800)
+    scrollTo(0, 800);
   }
 }
 </script>
 
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
+<style lang="scss" scoped>
+.pagination {
+  padding: 12px;
 
-.pagination-container.hidden {
-  display: none;
+  &.hidden {
+    display: none;
+  }
 }
 </style>
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 41e2786d..01eb464e 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -1,155 +1,136 @@
-<template>
-  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
-    <div class="rightPanel-background"/>
-    <div class="rightPanel">
-      <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
-        <Close style="width: 1em; height: 1em;vertical-align: middle " v-show="show"/>
-        <Setting style="width:1em; height:1em;vertical-align: middle " v-show="!show"/>
-      </div>
-      <div class="rightPanel-items">
-        <slot/>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import {computed, onBeforeUnmount, onMounted, ref, watch} from "vue";
-
-import {addClass, removeClass} from '@/utils/index'
-
-import useStore from "@/store";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-// 图标依赖
-import {Close, Setting} from '@element-plus/icons-vue'
-import {ElColorPicker} from "element-plus";
+import { addClass, removeClass } from "@/utils/index";
 
-const {setting} =useStore()
+const show = ref(false);
 
-const props = defineProps({
+defineProps({
   buttonTop: {
     default: 250,
-    type: Number
-  }
-})
-
-const theme = computed(() =>setting.theme)
-
-const show = ref(false)
+    type: Number,
+  },
+});
 
 watch(show, (value) => {
   if (value) {
-    addEventClick()
+    addEventClick();
   }
   if (value) {
-    addClass(document.body, 'showRightPanel')
+    addClass(document.body, "showRightPanel");
   } else {
-    removeClass(document.body, 'showRightPanel')
+    removeClass(document.body, "showRightPanel");
   }
-})
+});
 
 function addEventClick() {
-  window.addEventListener('click', closeSidebar)
+  window.addEventListener("click", closeSidebar, { passive: true });
 }
 
 function closeSidebar(evt: any) {
-
   // 主题选择点击不关闭
-  let parent = evt.target.closest('.theme-picker-dropdown')
-  if (parent) {
-    return
-  }
-
-  parent = evt.target.closest('.rightPanel')
+  let parent = evt.target.closest(".right-panel-container");
   if (!parent) {
-    show.value = false
-    window.removeEventListener('click', closeSidebar)
+    show.value = false;
+    window.removeEventListener("click", closeSidebar);
   }
 }
 
-const rightPanel = ref(ElColorPicker)
+const rightPanel = ref();
 
 function insertToBody() {
-  const elx = rightPanel.value as any
-  const body = document.querySelector('body') as any
-  body.insertBefore(elx, body.firstChild)
+  const body = document.querySelector("body") as any;
+  body.insertBefore(rightPanel.value, body.firstChild);
 }
 
 onMounted(() => {
-  insertToBody()
-})
+  insertToBody();
+});
 
 onBeforeUnmount(() => {
-  const elx = rightPanel.value as any
-  elx.remove()
-})
+  rightPanel.value.remove();
+});
 </script>
 
-<style>
+<template>
+  <div ref="rightPanel" :class="{ show: show }">
+    <div class="right-panel-overlay" />
+    <div class="right-panel-container">
+      <div
+        class="right-panel-btn"
+        :style="{
+          top: buttonTop + 'px',
+        }"
+        @click="show = !show"
+      >
+        <i-ep-close v-show="show" />
+        <i-ep-setting v-show="!show" />
+      </div>
+      <div>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
 .showRightPanel {
-  overflow: hidden;
   position: relative;
   width: calc(100% - 15px);
+  overflow: hidden;
 }
-</style>
 
-<style lang="scss" scoped>
-.rightPanel-background {
+.right-panel-overlay {
   position: fixed;
   top: 0;
   left: 0;
-  opacity: 0;
-  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-  background: rgba(0, 0, 0, .2);
-  z-index: -1;
+  background: rgb(0 0 0 / 20%);
 }
 
-.rightPanel {
-  width: 100%;
-  max-width: 260px;
-  height: 100vh;
+.right-panel-container {
   position: fixed;
   top: 0;
   right: 0;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  z-index: 999;
+  width: 100%;
+  max-width: 300px;
+  height: 100vh;
+  background-color: var(--el-bg-color-overlay);
+  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
+  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  background: #fff;
-  z-index: 40000;
 }
 
 .show {
-  transition: all .3s cubic-bezier(.7, .3, .1, 1);
+  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 
-  .rightPanel-background {
-    z-index: 20000;
-    opacity: 1;
+  .right-panel-overlay {
+    z-index: 99;
     width: 100%;
     height: 100%;
+    opacity: 1;
   }
 
-  .rightPanel {
+  .right-panel-container {
     transform: translate(0);
   }
 }
 
-.handle-button {
-  width: 48px;
-  height: 48px;
+.right-panel-btn {
   position: absolute;
-  left: -48px;
+  left: -36px;
+  width: 36px;
+  height: 36px;
+  color: var(--el-color-white);
   text-align: center;
-  font-size: 24px;
-  border-radius: 6px 0 0 6px !important;
-  z-index: 0;
-  pointer-events: auto;
   cursor: pointer;
-  color: #fff;
-  line-height: 48px;
+  background-color: var(--el-color-primary);
+  border-radius: 6px 0 0 6px;
 
-  i {
-    font-size: 24px;
-    line-height: 48px;
+  svg {
+    width: 20px;
+    height: 20px;
+    vertical-align: -10px;
   }
 }
 </style>
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
deleted file mode 100644
index b5b86973..00000000
--- a/src/components/Screenfull/index.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div>
-    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle"/>
-  </div>
-</template>
-
-<script setup>
-import {useFullscreen} from '@vueuse/core'
-import SvgIcon from '@/components/SvgIcon/index.vue'
-
-const {isFullscreen, enter, toggle} = useFullscreen();
-</script>
\ No newline at end of file
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 32040a5a..a48f9148 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -1,14 +1,31 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
+
+const appStore = useAppStore();
+
+const sizeOptions = ref([
+  { label: '默认', value: 'default' },
+  { label: '大型', value: 'large' },
+  { label: '小型', value: 'small' }
+]);
+
+function handleSizeChange(size: string) {
+  appStore.changeSize(size);
+  ElMessage.success('切换布局大小成功');
+}
+</script>
+
 <template>
-  <el-dropdown class="size-select" trigger="click" @command="handleSetSize">
-    <div class="size-select__icon">
-      <svg-icon class-name="size-icon" icon-class="size" />
+  <el-dropdown trigger="click" @command="handleSizeChange">
+    <div>
+      <svg-icon icon-class="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item
           v-for="item of sizeOptions"
           :key="item.value"
-          :disabled="(size || 'default') == item.value"
+          :disabled="appStore.size == item.value"
           :command="item.value"
         >
           {{ item.label }}
@@ -17,34 +34,3 @@
     </template>
   </el-dropdown>
 </template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
-
-import { ElMessage } from "element-plus";
-
-import useStore from "@/store";
-import SvgIcon from "@/components/SvgIcon/index.vue";
-
-const { app } = useStore();
-const size = computed(() => app.size);
-
-const sizeOptions = ref([
-  { label: "默认", value: "default" },
-  { label: "大型", value: "large" },
-  { label: "小型", value: "small" },
-]);
-
-function handleSetSize(size: string) {
-  app.setSize(size);
-  window.location.reload();
-  ElMessage.success("切换布局大小成功");
-}
-</script>
-
-<style lang='scss' scoped>
-.size-select__icon {
-  line-height: 50px;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 05cc3cde..07b65e8d 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,36 +1,45 @@
 <template>
-  <svg aria-hidden="true" class="svg-icon">
+  <svg
+    aria-hidden="true"
+    class="svg-icon"
+    :style="'width:' + size + ';height:' + size"
+  >
     <use :xlink:href="symbolId" :fill="color" />
   </svg>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-const props=defineProps({
+const props = defineProps({
   prefix: {
     type: String,
-    default: 'icon',
+    default: "icon",
   },
   iconClass: {
     type: String,
-    required: true,
+    required: false,
+    default: "",
   },
   color: {
     type: String,
-    default: ''
-  }
-})
+    default: "",
+  },
+  size: {
+    type: String,
+    default: "1em",
+  },
+});
 
 const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
 </script>
 
 <style scoped>
 .svg-icon {
+  display: inline-block;
   width: 1em;
   height: 1em;
-  vertical-align: -0.15em;
   overflow: hidden;
-  fill: currentColor;
+  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
+  outline: none;
+  fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/TagInput/index.vue b/src/components/TagInput/index.vue
new file mode 100644
index 00000000..92b4129b
--- /dev/null
+++ b/src/components/TagInput/index.vue
@@ -0,0 +1,510 @@
+<template>
+  <div :class="['tagInputarea', className]">
+    <div
+      ref="cmEle"
+      :class="[
+        'tagInputareaIuput',
+        'ThemeBorderColor3',
+        !!readonly ? 'readonlyBg' : '',
+      ]"
+    ></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import CodeMirror from "codemirror";
+import "codemirror/lib/codemirror.css";
+import { getRePosFromStr, MODE } from "./util";
+
+const props = defineProps({
+  mode: {
+    type: Number,
+    default: MODE.TEXT,
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  defaultValue: {
+    type: String,
+    default: "",
+    required: true,
+  },
+  renderTag: {
+    type: Function,
+    required: true,
+  },
+  minHeight: {
+    type: Number,
+    default: 20,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  noCursor: {
+    type: Boolean,
+    default: false,
+  },
+  operatorsSetMargin: {
+    type: Boolean,
+    default: false,
+  },
+  autoComma: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用复制
+  disabledCopy: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+const emit = defineEmits(["onChange", "onBlur", "onFocus"]);
+//编辑器挂载dom节点
+const cmEle = ref();
+
+//编辑器实例
+let cmInstance: any = null;
+
+onMounted(() => {
+  if (cmEle.value) {
+    //编辑器初始化
+    cmInstance = CodeMirror(cmEle.value, {
+      value: props.defaultValue,
+      mode: "",
+      lineWrapping: true,
+      cursorHeight: props.noCursor || props.readonly ? 0 : 1,
+    });
+    //最小高度初始化
+    if (props.minHeight) {
+      let height =
+        typeof props.minHeight === "number"
+          ? `${props.minHeight}px`
+          : props.minHeight;
+      //编辑器高度
+      cmInstance.setSize("100%", height);
+      //编辑内容高度
+      let codeEle = cmEle.value.getElementsByClassName("CodeMirror-code")[0];
+      codeEle && codeEle.setAttribute("style", `min-height:${height}`);
+    }
+    //默认值初始化
+    if (props.defaultValue) {
+      updateTextareaView();
+      cmInstance.execCommand("goDocEnd");
+    }
+    //监听 value change
+    cmInstance.on("change", cmChange);
+    //监听 value beforeChange
+    cmInstance.on("beforeChange", cmBeforeChange);
+    //监听表单聚焦
+    cmInstance.on("focus", () => {
+      cmEle.value.classList.add("active");
+      cmFocus();
+    });
+
+    //监听表单失焦
+    cmInstance.on("blur", () => {
+      if (cmEle.value) {
+        cmEle.value.classList.remove("active");
+      }
+      cmBlur();
+    });
+    if (props.disabledCopy) {
+      // 禁止复制，防止tag复制的是id
+      cmInstance.on("copy", (cm: any, e: Event) => {
+        e.preventDefault();
+      });
+    }
+  }
+});
+
+//编辑器change
+const cmChange = (cm: any, obj: any): void => {
+  let value = cm.getValue();
+  if (obj.origin !== "setValue") {
+    emit("onChange", null, value, obj);
+  }
+
+  updateTextareaView();
+};
+
+//编辑器beforeChange
+const cmBeforeChange = (cm: any, obj: any): any => {
+  let { text } = obj;
+  // 如果是自定义公式，只能允许数字+、-、*、/、( \ ) , .,大写字符
+  if (
+    props.mode === MODE.FORMULA &&
+    (obj.origin === "paste" ||
+      obj.origin === "+input" ||
+      obj.origin === "*compose")
+  ) {
+    text = text.map((t: string) =>
+      t.replace(/[^+\-*\/0-9/a-z/A-Z\(\)\,\.]/gm, "").toUpperCase()
+    );
+    // 最大输入10000字符
+    if (text.map((t: string) => t).join("").length > 10000) {
+      text = text
+        .map((t: string) => t)
+        .join("")
+        .slice(0, 10000)
+        .split(",");
+      obj.update(obj.from, obj.to, text);
+      obj.cancel();
+    }
+  }
+
+  if (obj.origin === "undo" || obj.origin === "redo") {
+    return;
+  }
+  // 事件内，mode只能从每次props取，不然取不到最新
+  if (
+    props.readonly ||
+    (props.mode === MODE.ONLYTAG &&
+      obj.origin !== "+delete" &&
+      obj.origin !== "inserttag" &&
+      obj.origin !== "setValue")
+  ) {
+    obj.cancel();
+  }
+
+  // 事件内，mode只能从每次props取，不然取不到最新
+  if (
+    props.mode === MODE.FORMULA &&
+    obj.origin !== "+delete" &&
+    obj.origin !== "inserttag" &&
+    obj.origin !== "setValue"
+  ) {
+    text = text.map((t: any) =>
+      t
+        .toUpperCase()
+        .split("")
+        .filter((t: any) =>
+          (obj.origin === "paste"
+            ? /[0-9A-Z\+\-\*\/\(\)\,\.\$]/
+            : /[0-9A-Z\+\-\*\/\(\)\,\.]/
+          ).test(t)
+        )
+        .join("")
+    );
+  }
+  if (
+    props.mode === MODE.DATE &&
+    obj.origin !== "+delete" &&
+    obj.origin !== "inserttag" &&
+    obj.origin !== "setValue"
+  ) {
+    text = text.map((t: any) =>
+      t
+        .split("")
+        .filter((t: any) =>
+          (obj.origin === "paste" ? /[0-9YMdhm\+\-\$]/ : /[0-9YMdhm\+\-]/).test(
+            t
+          )
+        )
+        .join("")
+    );
+  }
+  obj.update(obj.from, obj.to, text);
+};
+
+//编辑器 foucus
+const cmFocus = (): void => {
+  emit("onFocus");
+};
+
+//编辑器 blur
+const cmBlur = (): void => {
+  emit("onBlur");
+};
+
+//设置 value
+const setValue = (value: string): void => {
+  // const position = cmInstance.getCursor()
+  cmInstance.setValue(value || "");
+  // const newPosition = {
+  //     line: position.line,
+  //     ch: position.ch + value.length - 2,
+  // }
+
+  // cmInstance.focus()
+  // cmInstance.setCursor(newPosition)
+  // cmInstance.execCommand('goDocEnd')
+};
+const getValue = () => {
+  return cmInstance.getValue();
+};
+//回显，更新渲染
+let markers: any = null;
+const updateTextareaView = () => {
+  const { mode, operatorsSetMargin } = props;
+  const value = cmInstance.getValue();
+  if (markers) {
+    markers.forEach((marker: any) => marker.clear());
+  }
+  markers = [];
+  markColumns(markers, value);
+  if (mode === MODE.FORMULA || operatorsSetMargin) {
+    markOperators(markers, value);
+  }
+};
+
+//光标行
+const markColumns = (markers: any, value: any) => {
+  const poss = getRePosFromStr(value);
+  poss.forEach((pos: any, i: number) => {
+    renderColumnTag(pos.tag, { isLast: i === poss.length - 1 }, (node: any) => {
+      markers.push(
+        cmInstance.markText(
+          { line: pos.line, ch: pos.start },
+          { line: pos.line, ch: pos.stop },
+          { replacedWith: node, handleMouseEvents: true }
+        )
+      );
+    });
+  });
+};
+
+//光标操作
+const markOperators = (markers: any, value: any) => {
+  const poss = getRePosFromStr(value, /\+|\-|\*|\/|\(|\)|,/g);
+  poss.forEach((pos: any, i: number) => {
+    const operatorEle = document.createElement("span");
+    operatorEle.classList.add("operator");
+    operatorEle.innerHTML = pos.tag;
+    markers.push(
+      cmInstance.markText(
+        { line: pos.line, ch: pos.start },
+        { line: pos.line, ch: pos.stop },
+        { replacedWith: operatorEle, handleMouseEvents: true }
+      )
+    );
+  });
+};
+
+//渲染 tag
+const renderColumnTag = (id: any, options: any, cb: any) => {
+  const node = document.createElement("div");
+  node.classList.add("columnTagCon");
+  //自定义渲染tag
+  if (props.renderTag) {
+    const tag = props.renderTag(id, options);
+    if (tag instanceof HTMLElement) {
+      node.appendChild(tag);
+      cb(node);
+      return;
+    }
+  }
+  node.append(id);
+  cb(node);
+  return;
+};
+
+//插入 tag
+const insertColumnTag = (id: string) => {
+  const { mode, autoComma } = props;
+  const position = cmInstance.getCursor();
+  const editorValue = cmInstance.getValue();
+
+  cmInstance.replaceRange(
+    `${
+      mode === MODE.FORMULA && autoComma && editorValue[position.ch - 1] === "$"
+        ? ","
+        : ""
+    }$${id}$`,
+    position,
+    undefined,
+    "inserttag"
+  );
+  cmInstance.focus();
+  cmInstance.execCommand("goDocEnd");
+  if (cmEle.value) {
+    cmEle.value.scrollTop = cmEle.value.scrollHeight - cmEle.value.clientHeight;
+  }
+};
+// 获取光标位置
+const getCursor = () => {
+  return cmInstance.getCursor();
+};
+// 设置光标位置
+const setCustomCursor = (position: { line: number; ch: number }) => {
+  cmInstance.setCursor(position);
+};
+// 插入公式
+const insertFormula = (value: string) => {
+  const { mode, autoComma } = props;
+  const position = cmInstance.getCursor();
+
+  cmInstance.replaceRange(value, position, undefined, "insertFormula");
+  setTimeout(() => {
+    const newPosition = {
+      line: position.line,
+      ch: position.ch + value.length - 2,
+    };
+
+    cmInstance.focus();
+    cmInstance.setCursor(newPosition);
+    // cmInstance.execCommand('goDocEnd')
+  }, 0);
+  if (cmEle.value) {
+    cmEle.value.scrollTop = cmEle.value.scrollHeight - cmEle.value.clientHeight;
+  }
+};
+defineExpose({
+  insertColumnTag,
+});
+</script>
+
+<style lang="scss" scoped>
+.tagInputarea {
+  min-width: 0;
+
+  :deep {
+    .tagInputareaIuput {
+      overflow: auto;
+      border: 1px solid #409eff;
+      border-radius: 3px;
+
+      &:not(.active) {
+        border-color: #ccc !important;
+      }
+      // &.hasRightIcon {
+      //   border-radius: 3px 0 0 3px;
+      // }
+      &.readonlyBg {
+        .CodeMirror {
+          background-color: #eee !important;
+        }
+      }
+    }
+    // .rightIcon {
+    //   background-color: #f5f5f5;
+    //   font-size: 20px;
+    //   color: #757575;
+    //   height: 34px;
+    //   line-height: 33px;
+    //   padding: 0 7px;
+    //   border: 1px solid #ccc;
+    //   border-left: none;
+    //   border-radius: 0 3px 3px 0;
+    // }
+    .CodeMirror {
+      box-sizing: border-box;
+      height: auto !important;
+      font-family: inherit !important;
+
+      .CodeMirror-vscrollbar {
+        display: none !important;
+      }
+
+      // .CodeMirror-scroll {
+      //     height: auto;
+      //     overflow-y: hidden;
+      //     overflow-x: auto;
+      // }
+
+      .CodeMirror-lines {
+        min-height: 35px;
+        padding: 6px 0;
+      }
+
+      .CodeMirror-line {
+        padding: 0 10px;
+      }
+
+      .columnTagCon {
+        position: relative;
+        display: inline-flex;
+        // box-sizing: border-box;
+        // padding: 2px 4px;
+        // max-width: 100%;
+        // background: #d8eeff;
+        // color: #174c76;
+        // border: 1px solid #bbd6ea;
+        // border-radius: 5px;
+      }
+
+      .columnTag {
+        position: relative;
+        box-sizing: border-box;
+        display: inline-flex;
+        height: 24px;
+        font-size: 12px;
+        cursor: pointer;
+        border: 1px solid #90caf9;
+        border-radius: 24px;
+
+        .columnName,
+        .columnValue {
+          display: inline-block;
+          height: 22px;
+          padding: 0 10px;
+          overflow: hidden;
+          line-height: 22px;
+        }
+
+        .columnName {
+          color: #2196f3;
+          background-color: rgb(33 150 243 / 6%);
+        }
+
+        .columnValue {
+          color: #fff;
+          background-color: #249eff;
+          border-radius: 0 22px 22px 0;
+
+          .ellipsis {
+            max-width: 9em;
+          }
+        }
+
+        &.onlytag {
+          margin-right: 6px;
+
+          &::after {
+            position: absolute;
+            top: 6px;
+            right: -6px;
+            content: ",";
+          }
+        }
+
+        &.deleted {
+          border-color: #f44336;
+
+          .columnName {
+            color: #f44336;
+            background-color: rgb(244 67 54 / 6%);
+          }
+
+          &:hover {
+            border-color: #f44336;
+
+            .columnName {
+              color: #f44336;
+              background-color: rgb(244 67 54 / 12%);
+            }
+          }
+        }
+
+        &:hover {
+          border-color: #ddd;
+
+          .columnName {
+            color: #9e9e9e;
+            background-color: rgb(158 158 158 / 6%);
+          }
+
+          .columnValue {
+            background-color: #bdbdbd;
+          }
+        }
+      }
+
+      .operator {
+        margin: 0 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/TagInput/util.ts b/src/components/TagInput/util.ts
new file mode 100644
index 00000000..3328db75
--- /dev/null
+++ b/src/components/TagInput/util.ts
@@ -0,0 +1,34 @@
+/**
+ * getRePosFromStr 正则匹配字段返回位置信息
+ * */
+export function getRePosFromStr(text: any = '', re: any = /\$.+?\$/g) {
+    const lines = text.split('\n')
+    const positions: any = []
+    let m
+    for (let i = 0; i < lines.length; i++) {
+        const l = lines[i]
+        while ((m = re.exec(l)) !== null) {
+            var tag = m[0].substring(1, m[0].length - 1)
+            positions.push({
+                line: i,
+                start: m.index,
+                stop: m.index + m[0].length,
+                tag,
+            })
+        }
+    }
+    return positions
+}
+/**
+ * 输入框模式
+ */
+export enum MODE {
+    // 文本
+    TEXT = 1,
+    // 公式
+    FORMULA,
+    // 只允许选择tag
+    ONLYTAG,
+    // 日期
+    DATE
+}
\ No newline at end of file
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
deleted file mode 100644
index 0bfb2fa0..00000000
--- a/src/components/ThemePicker/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <el-color-picker
-      v-model="theme"
-      :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d' ]"
-      class="theme-picker"
-      popper-class="theme-picker-dropdown"
-  />
-</template>
-
-<script setup lang="ts">
-import {computed, nextTick, watch} from "vue";
-import useStore from "@/store";
-import {useRoute, useRouter} from "vue-router";
-import {localStorage} from "@/utils/storage";
-
-// 参考连接:https://juejin.cn/post/7024025899813044232#heading-1
-import {mix} from "@/utils";
-// 白色混合色
-const mixWhite = "#ffffff";
-// 黑色混合色
-const mixBlack = "#000000";
-
-const node = document.documentElement;
-
-const {setting} =useStore()
-const theme = computed(() => setting.theme)
-
-watch(theme, (color: string) => {
-  node.style.setProperty("--el-color-primary", color);
-  localStorage.set("theme", color)
-
-  for (let i = 1; i < 10; i += 1) {
-    node.style.setProperty(`--el-color-primary-light-${i}`, mix(color, mixWhite, i * 0.1));
-  }
-  node.style.setProperty("--el-color-primary-dark", mix(color, mixBlack, 0.1));
-
-  localStorage.set("style", node.style.cssText);
-})
-
-</script>
-
-<style>
-.theme-message,
-.theme-picker-dropdown {
-  z-index: 99999 !important;
-}
-
-.theme-picker .el-color-picker__trigger {
-  height: 26px !important;
-  width: 26px !important;
-  padding: 2px;
-}
-
-.theme-picker-dropdown .el-color-dropdown__link-btn {
-  display: none;
-}
-</style>
diff --git a/src/components/TreeSelect/index.vue b/src/components/TreeSelect/index.vue
deleted file mode 100644
index 18c99e40..00000000
--- a/src/components/TreeSelect/index.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-  <div class="el-tree-select">
-    <el-select
-      style="width: 100%"
-      v-model="modelValue"
-      ref="treeSelect"
-      :filterable="true"
-      :clearable="true"
-      @clear="clearHandle"
-      :filter-method="selectFilterData"
-      :placeholder="placeholder"
-    >
-      <el-option :value="modelValue" :label="valueTitle">
-        <el-tree
-          id="tree-option"
-          ref="selectTree"
-          :accordion="accordion"
-          :data="options"
-          :props="state.props"
-          :node-key="state.props.value"
-          :expand-on-click-node="false"
-          :default-expanded-keys="defaultExpandedKey"
-          :filter-node-method="filterNode"
-          @node-click="handleNodeClick"
-        ></el-tree>
-      </el-option>
-    </el-select>
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  getCurrentInstance,
-  nextTick,
-  onMounted,
-  computed,
-  watch,
-} from "vue";
-
-const { proxy } = getCurrentInstance();
-
-const state = defineProps({
-  // 配置项
-  props: {
-    type: Object,
-    default: () => {
-      return {
-        value: "value", // 值
-        label: "label", // 名
-        children: "children", // 子级
-      };
-    },
-  },
-  // 自动收起
-  accordion: {
-    type: Boolean,
-    default: () => {
-      return false;
-    },
-  },
-  // v-model 绑定的值
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-  // 数据源
-  options: {
-    type: Array,
-    default: [],
-  },
-  // 提示文字
-  placeholder: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const modelValue = computed({
-  get: () => {
-    return state.modelValue;
-  },
-  set: (val) => {
-    emit("update:modelValue", val);
-  },
-});
-const valueTitle = ref("");
-const defaultExpandedKey = ref([]);
-
-function handleNodeClick(node) {
-  valueTitle.value = node[state.props.label];
-  modelValue.value = node[state.props.value];
-  defaultExpandedKey.value = [];
-  proxy.$refs.treeSelect.blur();
-  selectFilterData("");
-}
-
-function selectFilterData(val) {
-  proxy.$refs.selectTree.filter(val);
-}
-
-function filterNode(value, data) {
-  if (!value) return true;
-  return data[state.props["label"]].indexOf(value) !== -1;
-}
-
-function clearHandle() {
-  valueTitle.value = "";
-  modelValue.value = "";
-  defaultExpandedKey.value = [];
-  clearSelected();
-}
-
-function clearSelected() {
-  const allNode = document.querySelectorAll("#tree-option .el-tree-node");
-  allNode.forEach((element) => element.classList.remove("is-current"));
-}
-
-function initHandle() {
-  nextTick(() => {
-    const selectedValue = modelValue.value;
-    if (selectedValue !== null && typeof selectedValue !== "undefined") {
-      const node = proxy.$refs.selectTree.getNode(selectedValue);
-      if (node) {
-        valueTitle.value = node.data[state.props.label];
-        proxy.$refs.selectTree.setCurrentKey(selectedValue); // 设置默认选中
-        defaultExpandedKey.value = [selectedValue]; // 设置默认展开
-      } else {
-        clearHandle();
-      }
-    }
-  });
-}
-
-onMounted(() => {
-  initHandle();
-});
-
-watch(modelValue, () => {
-  initHandle();
-});
-</script>
-
-<style lang='scss' scoped>
-.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
-  padding: 0;
-  background-color: #fff;
-  height: auto;
-}
-
-.el-select-dropdown__item.selected {
-  font-weight: normal;
-}
-
-ul li .el-tree .el-tree-node__content {
-  height: auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
-:deep(.el-tree-node__content:hover),
-:deep(.el-tree-node__content:active),
-:deep(.is-current > div:first-child),
-:deep(.el-tree-node__content:focus) {
-  background-color: mix(#fff, #409eff, 90%);
-  color: #409eff;
-}
-</style>
diff --git a/src/components/Upload/MultiUpload.vue b/src/components/Upload/MultiUpload.vue
new file mode 100644
index 00000000..0da012af
--- /dev/null
+++ b/src/components/Upload/MultiUpload.vue
@@ -0,0 +1,139 @@
+<!--
+  多图上传组件
+  @author: youlaitech
+  @date 2022/11/20
+-->
+
+<template>
+  <el-upload
+    v-model:file-list="fileList"
+    list-type="picture-card"
+    :before-upload="handleBeforeUpload"
+    :http-request="handleUpload"
+    :on-remove="handleRemove"
+    :on-preview="previewImg"
+    :limit="props.limit"
+  >
+    <i-ep-plus />
+  </el-upload>
+
+  <el-dialog v-model="dialogVisible">
+    <img w-full :src="previewImgUrl" alt="Preview Image" />
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  UploadRawFile,
+  UploadRequestOptions,
+  UploadUserFile,
+  UploadFile,
+  UploadProps,
+} from "element-plus";
+import { uploadFileApi, deleteFileApi } from "@/api/file";
+
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
+  /**
+   * 文件路径集合
+   */
+  modelValue: {
+    type: Array<string>,
+    default: [] as Array<string>,
+  },
+  /**
+   * 文件上传数量限制
+   */
+  limit: {
+    type: Number,
+    default: 10,
+  },
+});
+
+const previewImgUrl = ref("");
+const dialogVisible = ref(false);
+
+const fileList = ref([] as UploadUserFile[]);
+watch(
+  () => props.modelValue,
+  (newVal: string[]) => {
+    const filePaths = fileList.value.map((file) => file.url);
+    // 监听modelValue文件集合值未变化时，跳过赋值
+    if (
+      filePaths.length > 0 &&
+      filePaths.length === newVal.length &&
+      filePaths.every((x) => newVal.some((y) => y === x)) &&
+      newVal.every((y) => filePaths.some((x) => x === y))
+    ) {
+      return;
+    }
+
+    fileList.value = newVal.map((filePath) => {
+      return { url: filePath } as UploadUserFile;
+    });
+  },
+  { immediate: true }
+);
+
+/**
+ * 自定义图片上传
+ *
+ * @param params
+ */
+async function handleUpload(options: UploadRequestOptions): Promise<any> {
+  // 上传API调用
+  const { data: fileInfo } = await uploadFileApi(options.file);
+
+  // 上传成功需手动替换文件路径为远程URL，否则图片地址为预览地址 blob:http://
+  const fileIndex = fileList.value.findIndex(
+    (file) => file.uid == (options.file as any).uid
+  );
+
+  fileList.value.splice(fileIndex, 1, {
+    name: fileInfo.name,
+    url: fileInfo.url,
+  } as UploadUserFile);
+
+  emit(
+    "update:modelValue",
+    fileList.value.map((file) => file.url)
+  );
+}
+
+/**
+ * 删除图片
+ */
+function handleRemove(removeFile: UploadFile) {
+  const filePath = removeFile.url;
+
+  if (filePath) {
+    deleteFileApi(filePath).then(() => {
+      // 删除成功回调
+      emit(
+        "update:modelValue",
+        fileList.value.map((file) => file.url)
+      );
+    });
+  }
+}
+
+/**
+ * 限制用户上传文件的格式和大小
+ */
+function handleBeforeUpload(file: UploadRawFile) {
+  if (file.size > 2 * 1048 * 1048) {
+    ElMessage.warning("上传图片不能大于2M");
+    return false;
+  }
+  return true;
+}
+
+/**
+ * 预览图片
+ */
+const previewImg: UploadProps["onPreview"] = (uploadFile) => {
+  previewImgUrl.value = uploadFile.url!;
+  dialogVisible.value = true;
+};
+</script>
diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index 9a81fb5b..4038c72b 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -1,142 +1,81 @@
 <template>
-  <div>
-    <!-- 上传组件 -->
-    <el-upload
-      ref="singleUploadRef"
-      action=""
-      class="single-uploader"
-      :show-file-list="false"
-      :before-upload="handleBeforeUpload"
-      :http-request="uploadImage"
-    >
-      <img v-if="imgUrl" :src="imgUrl" class="single-uploader__image" />
-
-      <el-icon v-else class="single-uploader__plus">
-        <Plus />
-      </el-icon>
-
-      <!-- 删除图标 -->
-      <el-icon
-        v-if="props.showClose && imgUrl"
-        class="single-uploader__remove"
-        @click.stop="handleRemove(imgUrl)"
-      >
-        <Close />
-      </el-icon>
-    </el-upload>
-  </div>
+  <!-- 上传组件 -->
+  <el-upload
+    v-model="imgUrl"
+    class="single-uploader"
+    :show-file-list="false"
+    list-type="picture-card"
+    :before-upload="handleBeforeUpload"
+    :http-request="uploadFile"
+  >
+    <img v-if="imgUrl" :src="imgUrl" class="single" />
+    <el-icon v-else class="single-uploader-icon"><i-ep-plus /></el-icon>
+  </el-upload>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { Plus, Close } from "@element-plus/icons-vue";
-import {
-  ElMessage,
-  ElUpload,
-  UploadFile,
-  UploadRawFile,
-  UploadRequestOptions,
-} from "element-plus";
-import { uploadFile, deleteFile } from "@/api/system/file";
-
-const uploadRef = ref(ElUpload);
-const emit = defineEmits(["update:modelValue"]);
+import { UploadRawFile, UploadRequestOptions } from "element-plus";
+import { uploadFileApi } from "@/api/file";
 
 const props = defineProps({
   modelValue: {
     type: String,
     default: "",
   },
-  /**
-   * 是否显示右上角的删除图片按钮
-   */
-  showClose: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const imgUrl = computed<string | undefined>({
-  get() {
-    return props.modelValue;
-  },
-  set(val) {
-    // imgUrl改变时触发修改父组件绑定的v-model的值
-    emit("update:modelValue", val);
-  },
-});
+const emit = defineEmits(["update:modelValue"]);
+const imgUrl = useVModel(props, "modelValue", emit);
 
 /**
  * 自定义图片上传
  *
- * @param params
+ * @param options
  */
-async function uploadImage(options: UploadRequestOptions): Promise<any> {
-  const response = await uploadFile(options.file);
-  imgUrl.value = response.data;
+async function uploadFile(options: UploadRequestOptions): Promise<any> {
+  const { data: fileInfo } = await uploadFileApi(options.file);
+  imgUrl.value = fileInfo.url;
 }
 
 /**
- * 删除图片
- *
- * @param fileUrl
- */
-function handleRemove(fileUrl?: string) {
-  if (fileUrl) {
-    deleteFile(fileUrl);
-    imgUrl.value = undefined; // 这里会触发imgUrl的computed的set方法
-  }
-}
-/**
- * 在 before-upload 钩子中限制用户上传文件的格式和大小
- *
+ * 限制用户上传文件的格式和大小
  */
 function handleBeforeUpload(file: UploadRawFile) {
-  const isJPG = file.type === "image/jpeg";
-  const isLt2M = file.size / 1024 / 1024 < 2;
-
-  if (!isLt2M) {
+  if (file.size > 2 * 1048 * 1048) {
     ElMessage.warning("上传图片不能大于2M");
+    return false;
   }
   return true;
 }
 </script>
 
-<style lang="scss" scoped>
-.single-uploader {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
+<style scoped>
+.single-uploader .single {
+  display: block;
+  width: 178px;
+  height: 178px;
+}
+</style>
+
+<style>
+.single-uploader .el-upload {
   position: relative;
   overflow: hidden;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
   transition: var(--el-transition-duration-fast);
-  text-align: center;
-  &:hover {
-    border-color: var(--el-color-primary);
-  }
-
-  &__image {
-    width: 146px;
-    height: 146px;
-    display: block;
-  }
+}
 
-  &__plus {
-     width: 146px;
-    height: 157px;
-    font-size: 28px;
-    color: #8c939d;
-    text-align: center;
-  }
+.single-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
 
-  &__remove {
-    font-size: 12px;
-    color: #ff4d51 !important;
-    margin-top: 0px !important;
-    position: absolute;
-    right: 0;
-    top: 0;
-    color: #409eff;
-  }
+.el-icon.single-uploader-icon {
+  width: 178px;
+  height: 178px;
+  font-size: 28px;
+  color: #8c939d;
+  text-align: center;
 }
 </style>
diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue
index bd53bae2..cdd6deca 100644
--- a/src/components/WangEditor/index.vue
+++ b/src/components/WangEditor/index.vue
@@ -1,73 +1,74 @@
 <template>
-  <div style="border: 1px solid #ccc">
+  <div class="editor-wrapper">
     <!-- 工具栏 -->
     <Toolbar
-        :editorId="editorId"
-        :defaultConfig="toolbarConfig"
-        style="border-bottom: 1px solid #ccc"
+      id="toolbar-container"
+      :editor="editorRef"
+      :default-config="toolbarConfig"
+      :mode="mode"
     />
     <!-- 编辑器 -->
     <Editor
-        :editorId="editorId"
-        :defaultConfig="editorConfig"
-        :defaultHtml="defaultHtml"
-        @onChange="handleChange"
-        style="height: 500px; overflow-y: hidden;"
+      id="editor-container"
+      v-model="modelValue"
+      :default-config="editorConfig"
+      :mode="mode"
+      @on-change="handleChange"
+      @on-created="handleCreated"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import {computed, onBeforeUnmount, reactive, toRefs} from 'vue'
-import {Editor, Toolbar, getEditor, removeEditor} from '@wangeditor/editor-for-vue'
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
 
 // API 引用
-import {uploadFile} from "@/api/system/file";
+import { uploadFileApi } from "@/api/file";
 
 const props = defineProps({
   modelValue: {
     type: [String],
-    default: ''
+    default: "",
   },
-})
+});
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 
-const state = reactive({
-  editorId: `w-e-${Math.random().toString().slice(-5)}`, //【注意】编辑器 id ，要全局唯一
-  toolbarConfig: {},
-  editorConfig: {
-    placeholder: '请输入内容...',
-    MENU_CONF: {
-      uploadImage: {
-        // 自定义图片上传
-        // @link https://www.wangeditor.com/v5/guide/menu-config.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%9F%E8%83%BD
-        async customUpload(file:any, insertFn:any) {
-          uploadFile(file).then(response => {
-            const url = response.data
-            insertFn(url)
-          })
-        }
-      }
-    }
+const modelValue = useVModel(props, "modelValue", emit);
+
+const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
+const mode = ref("default"); // 编辑器模式
+const toolbarConfig = ref({}); // 工具条配置
+// 编辑器配置
+const editorConfig = ref({
+  placeholder: "请输入内容...",
+  MENU_CONF: {
+    uploadImage: {
+      // 自定义图片上传
+      async customUpload(file: any, insertFn: any) {
+        uploadFileApi(file).then((response) => {
+          const url = response.data.url;
+          insertFn(url);
+        });
+      },
+    },
   },
-  defaultHtml: props.modelValue
-})
+});
 
-const {editorId, toolbarConfig, editorConfig,defaultHtml} = toRefs(state)
+const handleCreated = (editor: any) => {
+  editorRef.value = editor; // 记录 editor 实例，重要！
+};
 
-function handleChange(editor:any) {
-  emit('update:modelValue', editor.getHtml())
+function handleChange(editor: any) {
+  modelValue.value = editor.getHtml();
 }
 
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
-  const editor = getEditor(state.editorId)
-  if (editor == null) return
-  editor.destroy()
-  removeEditor(state.editorId)
-})
-
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
 </script>
 
 <style src="@wangeditor/editor/dist/css/style.css"></style>
\ No newline at end of file
diff --git a/src/directive/index.ts b/src/directive/index.ts
index 984b4016..960fa44f 100644
--- a/src/directive/index.ts
+++ b/src/directive/index.ts
@@ -1 +1,9 @@
-export {hasPerm,hasRole} from "./permission";
\ No newline at end of file
+import type { App } from 'vue';
+
+import { hasPerm } from './permission';
+
+// 全局注册 directive
+export function setupDirective(app: App<Element>) {
+  // 使 v-hasPerm 在所有组件中都可用
+  app.directive('hasPerm', hasPerm);
+}
diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts
index 7b278b7b..b8d0dee8 100644
--- a/src/directive/permission/index.ts
+++ b/src/directive/permission/index.ts
@@ -1,55 +1,55 @@
-import useStore from "@/store";
-import { Directive, DirectiveBinding } from "vue";
+import { useUserStoreHook } from '@/store/modules/user';
+import { Directive, DirectiveBinding } from 'vue';
 
 /**
- * 按钮权限校验
+ * 按钮权限
  */
 export const hasPerm: Directive = {
-    mounted(el: HTMLElement, binding: DirectiveBinding) {
-        // 「超级管理员」拥有所有的按钮权限
-        const { user } = useStore()
-        const roles = user.roles;
-        if (roles.includes('ROOT')) {
-            return true
-        }
-        // 「其他角色」按钮权限校验
-        const { value } = binding;
-        if (value) {
-            const requiredPerms = value; // DOM绑定需要的按钮权限标识
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    // 「超级管理员」拥有所有的按钮权限
+    const { roles, perms } = useUserStoreHook();
+    if (roles.includes('ROOT')) {
+      return true;
+    }
+    // 「其他角色」按钮权限校验
+    const { value } = binding;
+    if (value) {
+      const requiredPerms = value; // DOM绑定需要的按钮权限标识
 
-            const hasPerm = user.perms.some(perm => {
-                return requiredPerms.includes(perm)
-            })
+      const hasPerm = perms?.some(perm => {
+        return requiredPerms.includes(perm);
+      });
 
-            if (!hasPerm) {
-                el.parentNode && el.parentNode.removeChild(el);
-            }
-        } else {
-            throw new Error("need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\"");
-        }
+      if (!hasPerm) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    } else {
+      throw new Error(
+        "need perms! Like v-has-perm=\"['sys:user:add','sys:user:edit']\""
+      );
     }
+  }
 };
 
 /**
- * 角色权限校验
+ * 角色权限
  */
 export const hasRole: Directive = {
-    mounted(el: HTMLElement, binding: DirectiveBinding) {
-        const { value } = binding;
-        
-        if (value) {
-            const requiredRoles = value; // DOM绑定需要的角色编码
-            const { user } = useStore()
-            const hasRole = user.roles.some(perm => {
-                return requiredRoles.includes(perm)
-            })
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const { value } = binding;
+
+    if (value) {
+      const requiredRoles = value; // DOM绑定需要的角色编码
+      const { roles } = useUserStoreHook();
+      const hasRole = roles.some(perm => {
+        return requiredRoles.includes(perm);
+      });
 
-            if (!hasRole) {
-                el.parentNode && el.parentNode.removeChild(el);
-            }
-        } else {
-            throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
-        }
+      if (!hasRole) {
+        el.parentNode && el.parentNode.removeChild(el);
+      }
+    } else {
+      throw new Error("need roles! Like v-has-role=\"['admin','test']\"");
     }
+  }
 };
-
diff --git a/src/enums/MenuTypeEnum.ts b/src/enums/MenuTypeEnum.ts
new file mode 100644
index 00000000..96c612e4
--- /dev/null
+++ b/src/enums/MenuTypeEnum.ts
@@ -0,0 +1,19 @@
+export enum MenuTypeEnum {
+  /**
+   * 目录
+   */
+  CATALOG = 'CATALOG',
+  /**
+   * 菜单
+   */
+  MENU = 'MENU',
+
+  /**
+   * 按钮
+   */
+  BUTTON = 'BUTTON',
+  /**
+   * 外链
+   */
+  EXTLINK = 'EXTLINK'
+}
diff --git a/src/env.d.ts b/src/env.d.ts
deleted file mode 100644
index 272014dc..00000000
--- a/src/env.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-// 环境变量 TypeScript的智能提示
-interface ImportMetaEnv {
-    VITE_APP_TITLE: string,
-    VITE_APP_PORT: string,
-    VITE_APP_BASE_API: string
-}
-
-interface ImportMeta {
-    readonly env: ImportMetaEnv
-}
\ No newline at end of file
diff --git a/src/lang/en.ts b/src/lang/en.ts
deleted file mode 100644
index 535a45ba..00000000
--- a/src/lang/en.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export default {
-    // 路由国际化
-    route: {
-        dashboard: 'Dashboard',
-        document: 'Document'
-    },
-    // 登录页面国际化
-    login: {
-        title: 'vue3-element-admin',
-        username: 'Username',
-        password: 'Password',
-        login: 'Login',
-        code: 'Verification Code',
-        copyright: '',
-        icp: ''
-    },
-    // 导航栏国际化
-    navbar:{
-        dashboard: 'Dashboard',
-        logout:'Logout',
-        document:'Document',
-        gitee:'Gitee'
-    }
-}
\ No newline at end of file
diff --git a/src/lang/index.ts b/src/lang/index.ts
index b56f979d..7f3ad89c 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -1,46 +1,25 @@
+import { createI18n } from 'vue-i18n';
+import { useAppStore } from '@/store/modules/app';
 
-// 自定义国际化配置
-import {createI18n} from 'vue-i18n'
-import {localStorage} from '@/utils/storage'
-
+const appStore = useAppStore();
 // 本地语言包
-import enLocale from './en'
-import zhCnLocale from './zh-cn'
+import enLocale from './package/en';
+import zhCnLocale from './package/zh-cn';
 
 const messages = {
-    'zh-cn': {
-        ...zhCnLocale
-    },
-    en: {
-        ...enLocale
-    }
-}
-
-/**
- * 获取当前系统使用语言字符串
- * 
- * @returns zh-cn|en ...
- */
-export const getLanguage = () => {
-    // 本地缓存获取
-    let language = localStorage.get('language')
-    if (language) {
-        return language
-    }
-     // 浏览器使用语言
-    language = navigator.language.toLowerCase()
-    const locales = Object.keys(messages)
-    for (const locale of locales) {
-        if (language.indexOf(locale) > -1) {
-            return locale
-        }
-    }
-    return 'zh-cn'
-}
+  'zh-cn': {
+    ...zhCnLocale
+  },
+  en: {
+    ...enLocale
+  }
+};
 
 const i18n = createI18n({
-    locale: getLanguage(),
-    messages: messages
-})
+  legacy: false,
+  locale: appStore.language,
+  messages: messages,
+  globalInjection: true
+});
 
-export default i18n
\ No newline at end of file
+export default i18n;
diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts
new file mode 100644
index 00000000..6213eb2e
--- /dev/null
+++ b/src/lang/package/en.ts
@@ -0,0 +1,22 @@
+export default {
+  // 路由国际化
+  route: {
+    dashboard: 'Dashboard',
+    document: 'Document'
+  },
+  // 登录页面国际化
+  login: {
+    title: 'vue3-element-admin',
+    username: 'Username',
+    password: 'Password',
+    login: 'Login',
+    verifyCode: 'Verify Code',
+  },
+  // 导航栏国际化
+  navbar: {
+    dashboard: 'Dashboard',
+    logout: 'Logout',
+    document: 'Document',
+    gitee: 'Gitee'
+  }
+};
diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts
new file mode 100644
index 00000000..3d235d5e
--- /dev/null
+++ b/src/lang/package/zh-cn.ts
@@ -0,0 +1,22 @@
+export default {
+  // 路由国际化
+  route: {
+    dashboard: '首页',
+    document: '项目文档'
+  },
+  // 登录页面国际化
+  login: {
+    title: 'vue3-element-admin',
+    username: '用户名',
+    password: '密码',
+    login: '登 录',
+    verifyCode: '验证码'
+  },
+  // 导航栏国际化
+  navbar: {
+    dashboard: '首页',
+    logout: '注销',
+    document: '项目文档',
+    gitee: '码云'
+  }
+};
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
deleted file mode 100644
index f0b0017e..00000000
--- a/src/lang/zh-cn.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-    // 路由国际化
-    route: {
-        dashboard: '首页',
-        document: '项目文档'
-    },
-    // 登录页面国际化
-    login:{
-        title: 'vue3-element-admin',
-        username:'用户名',
-        password:'密码',
-        login:'登 录',
-        code:'请输入验证码',
-        copyright:'',
-        icp:''
-    },
-    navbar:{
-        dashboard: '首页',
-        logout:'注销',
-        document:'项目文档',
-        gitee:'码云'
-    }
-}
\ No newline at end of file
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index b5ec9bc2..0de8378a 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,32 +1,30 @@
+<script setup lang="ts">
+import { useTagsViewStore } from "@/store/modules/tagsView";
+
+const tagsViewStore = useTagsViewStore();
+</script>
+
 <template>
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
       <transition name="router-fade" mode="out-in">
-        <keep-alive :include="cachedViews">
-          <component :is="Component" :key="route.path" />
+        <keep-alive :include="tagsViewStore.cachedViews">
+          <component :is="Component" :key="route.fullPath" />
         </keep-alive>
       </transition>
     </router-view>
   </section>
 </template>
 
-
-<script setup lang="ts">
-import { computed } from "vue";
-import useStore from "@/store";
-
-const { tagsView } = useStore();
-
-const cachedViews = computed(() => tagsView.cachedViews);
-</script>
-
 <style lang="scss" scoped>
 .app-main {
+  position: relative;
+  width: 100%;
+
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
-  width: 100%;
-  position: relative;
   overflow: hidden;
+  background-color: var(--el-bg-color-page);
 }
 
 .fixed-header + .app-main {
@@ -40,16 +38,8 @@ const cachedViews = computed(() => tagsView.cachedViews);
   }
 
   .fixed-header + .app-main {
+    min-height: 100vh;
     padding-top: 84px;
   }
 }
 </style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
-}
-</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 3e4780db..d6217dff 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,46 +1,106 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/store/modules/app";
+import { useTagsViewStore } from "@/store/modules/tagsView";
+import { useUserStore } from "@/store/modules/user";
+
+const appStore = useAppStore();
+const tagsViewStore = useTagsViewStore();
+const userStore = useUserStore();
+
+const route = useRoute();
+const router = useRouter();
+
+const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
+
+/**
+ * 左侧菜单栏显示/隐藏
+ */
+function toggleSideBar() {
+  appStore.toggleSidebar(true);
+}
+
+/**
+ * vueUse 全屏
+ */
+const { isFullscreen, toggle } = useFullscreen();
+
+/**
+ * 注销
+ */
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    userStore
+      .logout()
+      .then(() => {
+        tagsViewStore.delAllViews();
+      })
+      .then(() => {
+        router.push(`/login?redirect=${route.fullPath}`);
+      });
+  });
+}
+</script>
+
 <template>
+  <!-- 顶部导航栏 -->
   <div class="navbar">
-    <hamburger
-      id="hamburger-container"
-      :is-active="sidebar.opened"
-      class="hamburger-container"
-      @toggleClick="toggleSideBar"
-    />
-
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <!-- 左侧面包屑 -->
+    <div class="flex">
+      <hamburger
+        :is-active="appStore.sidebar.opened"
+        @toggle-click="toggleSideBar"
+      />
+      <breadcrumb />
+    </div>
 
-    <div class="right-menu">
-      <template v-if="device !== 'mobile'">
-        <!--        <search id="header-search" class="right-menu-item" />
-                <error-log class="errLog-container right-menu-item hover-effect" />-->
-        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+    <!-- 右侧导航设置 -->
+    <div class="flex">
+      <!-- 导航栏设置(窄屏隐藏)-->
+      <div v-if="device !== 'mobile'" class="setting-container">
+        <!--全屏 -->
+        <div class="setting-item" @click="toggle">
+          <svg-icon
+            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+          />
+        </div>
+        <!-- 布局大小 -->
         <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
+          <size-select class="setting-item" />
         </el-tooltip>
-        <lang-select class="right-menu-item hover-effect" />
-      </template>
-
-      <el-dropdown
-        class="avatar-container right-menu-item hover-effect"
-        trigger="click"
-      >
-        <div class="avatar-wrapper">
-          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
-          <CaretBottom style="width: 0.6em; height: 0.6em; margin-left: 5px" />
+        <!--语言选择-->
+        <lang-select class="setting-item" />
+      </div>
+
+      <!-- 用户头像 -->
+      <el-dropdown trigger="click">
+        <div class="avatar-container">
+          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
+          <i-ep-caret-bottom class="w-3 h-3" />
         </div>
-
         <template #dropdown>
           <el-dropdown-menu>
             <router-link to="/">
               <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
             </router-link>
-            <a target="_blank" href="https://github.com/hxrui">
+            <a
+              target="_blank"
+              href="https://github.com/youlaitech/vue3-element-admin"
+            >
               <el-dropdown-item>Github</el-dropdown-item>
             </a>
             <a target="_blank" href="https://gitee.com/haoxr">
               <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
             </a>
-            <a target="_blank" href="https://www.cnblogs.com/haoxianrui/">
+            <a
+              target="_blank"
+              href="https://juejin.cn/post/7228990409909108793"
+            >
               <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
             </a>
             <el-dropdown-item divided @click="logout">
@@ -52,129 +112,46 @@
     </div>
   </div>
 </template>
-<script setup lang="ts">
-import { computed } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { ElMessageBox } from "element-plus";
-
-import useStore from "@/store";
-
-// 组件依赖
-import Breadcrumb from "@/components/Breadcrumb/index.vue";
-import Hamburger from "@/components/Hamburger/index.vue";
-import Screenfull from "@/components/Screenfull/index.vue";
-import SizeSelect from "@/components/SizeSelect/index.vue";
-import LangSelect from "@/components/LangSelect/index.vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
-
-// 图标依赖
-import { CaretBottom } from "@element-plus/icons-vue";
-
-const { app, user } = useStore();
-
-const route = useRoute();
-const router = useRouter();
-
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-const avatar = computed(() => user.avatar);
-
-function toggleSideBar() {
-  app.toggleSidebar();
-}
-
-function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(() => {
-    user.logout().then(() => {
-      router.push(`/login?redirect=${route.fullPath}`);
-    });
-  });
-}
-</script>
 
 <style lang="scss" scoped>
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
 .navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   height: 50px;
-  overflow: hidden;
-  position: relative;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background 0.3s;
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
-  }
+  background-color: #fff;
+  box-shadow: 0 0 1px #0003;
 
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
+  .setting-container {
+    display: flex;
+    align-items: center;
 
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
+    .setting-item {
       display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
+      width: 30px;
+      height: 50px;
+      line-height: 50px;
       color: #5a5e66;
-      vertical-align: text-bottom;
+      text-align: center;
+      cursor: pointer;
 
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
+      &:hover {
+        background: rgb(249 250 251 / 100%);
       }
     }
+  }
 
-    .avatar-container {
-      margin-right: 30px;
-
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
+  .avatar-container {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    margin: 0 5px;
+    cursor: pointer;
 
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
+    img {
+      width: 40px;
+      height: 40px;
+      border-radius: 5px;
     }
   }
 }
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 5e5f5588..c1a04514 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,103 +1,199 @@
+<script setup lang="ts">
+import { useSettingsStore } from "@/store/modules/settings";
+
+import IconEpSunny from "~icons/ep/sunny";
+import IconEpMoon from "~icons/ep/moon";
+
+/**
+ * 暗黑模式
+ */
+const settingsStore = useSettingsStore();
+const isDark = useDark();
+const toggleDark = () => useToggle(isDark);
+
+/**
+ * 切换布局
+ */
+function changeLayout(layout: string) {
+  settingsStore.changeSetting({ key: "layout", value: layout });
+  window.document.body.setAttribute("layout", settingsStore.layout);
+}
+
+// 主题颜色
+const themeColors = ref<string[]>([
+  "#409EFF",
+  "#304156",
+  "#11a983",
+  "#13c2c2",
+  "#6959CD",
+  "#f5222d",
+]);
+
+/**
+ * 切换主题颜色
+ */
+function changeThemeColor(color: string) {
+  document.documentElement.style.setProperty("--el-color-primary", color);
+  settingsStore.changeSetting({ key: "layout", value: color });
+}
+
+onMounted(() => {
+  window.document.body.setAttribute("layout", settingsStore.layout);
+});
+</script>
+
 <template>
-  <div class="drawer-container">
-    <h3 class="drawer-title">系统布局配置</h3>
-    <div class="drawer-item">
-      <span>主题颜色</span>
-      <div style="float: right; height: 26px; margin: -3px 8px 0 0">
-        <theme-picker @change="themeChange" />
-      </div>
+  <div class="settings-container">
+    <h3 class="text-base font-bold">项目配置</h3>
+    <el-divider>主题</el-divider>
+
+    <div class="flex justify-center" @click.stop>
+      <el-switch
+        v-model="isDark"
+        inline-prompt
+        :active-icon="IconEpMoon"
+        :inactive-icon="IconEpSunny"
+        active-color="var(--el-fill-color-dark)"
+        inactive-color="var(--el-color-primary)"
+        @change="toggleDark"
+      />
     </div>
 
-    <div class="drawer-item">
-      <span>开启 Tags-View</span>
-      <el-switch v-model="tagsView" class="drawer-switch" />
+    <el-divider>界面设置</el-divider>
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">开启 Tags-View</span>
+      <el-switch v-model="settingsStore.tagsView" />
     </div>
 
-    <div class="drawer-item">
-      <span>固定 Header</span>
-      <el-switch v-model="fixedHeader" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">固定 Header</span>
+      <el-switch v-model="settingsStore.fixedHeader" />
     </div>
 
-    <div class="drawer-item">
-      <span>侧边栏 Logo</span>
-      <el-switch v-model="sidebarLogo" class="drawer-switch" />
+    <div class="py-[8px] flex justify-between">
+      <span class="text-xs">侧边栏 Logo</span>
+      <el-switch v-model="settingsStore.sidebarLogo" />
     </div>
+
+    <el-divider>主题颜色</el-divider>
+
+    <ul class="w-full space-x-2 flex justify-center py-2">
+      <li
+        v-for="(color, index) in themeColors"
+        :key="index"
+        class="inline-block w-[30px] h-[30px] cursor-pointer"
+        :style="{ background: color }"
+        @click="changeThemeColor(color)"
+      />
+    </ul>
+
+    <el-divider>导航设置</el-divider>
+
+    <ul class="layout">
+      <el-tooltip content="左侧模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-left ' +
+            (settingsStore.layout == 'left' ? 'is-active' : '')
+          "
+          @click="changeLayout('left')"
+        >
+          <div />
+          <div />
+        </li>
+      </el-tooltip>
+      <el-tooltip content="顶部模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-top ' +
+            (settingsStore.layout == 'top' ? 'is-active' : '')
+          "
+          @click="changeLayout('top')"
+        >
+          <div />
+          <div />
+        </li>
+      </el-tooltip>
+      <el-tooltip content="混合模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-mix ' +
+            (settingsStore.layout == 'mix' ? 'is-active' : '')
+          "
+          @click="changeLayout('mix')"
+        >
+          <div />
+          <div />
+        </li>
+      </el-tooltip>
+    </ul>
   </div>
 </template>
 
-<script setup lang="ts">
-import { reactive, toRefs, watch } from "vue";
-
-import ThemePicker from "@/components/ThemePicker/index.vue";
-
-import useStore from "@/store";
-
-const { setting } = useStore();
-
-const state = reactive({
-  fixedHeader: setting.fixedHeader,
-  tagsView: setting.tagsView,
-  sidebarLogo: setting.sidebarLogo,
-});
-
-const { fixedHeader, tagsView, sidebarLogo } = toRefs(state);
-
-function themeChange(val: any) {
-  setting.changeSetting({ key: "theme", value: val });
-}
-
-watch(
-  () => state.fixedHeader,
-  (value) => {
-    setting.changeSetting({ key: "fixedHeader", value: value });
-  }
-);
-
-watch(
-  () => state.tagsView,
-  (value) => {
-    setting.changeSetting({ key: "tagsView", value: value });
-  }
-);
-
-watch(
-  () => state.sidebarLogo,
-  (value) => {
-    setting.changeSetting({ key: "sidebarLogo", value: value });
-  }
-);
-</script>
-
 <style lang="scss" scoped>
-.drawer-container {
-  padding: 24px;
-  font-size: 14px;
-  line-height: 1.5;
-  word-wrap: break-word;
-
-  .drawer-title {
-    margin-bottom: 12px;
-    color: rgba(0, 0, 0, 0.85);
-    font-size: 14px;
-    line-height: 22px;
-  }
-
-  .drawer-item {
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .drawer-switch {
-    float: right;
-  }
+.settings-container {
+  padding: 16px;
 
-  .job-link {
-    display: block;
-    position: absolute;
+  .layout {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
     width: 100%;
-    left: 0;
-    bottom: 0;
+    height: 50px;
+
+    &-item {
+      position: relative;
+      width: 18%;
+      height: 45px;
+      overflow: hidden;
+      cursor: pointer;
+      background: #f0f2f5;
+      border-radius: 4px;
+    }
+
+    &-item.is-active {
+      border: 2px solid var(--el-color-primary);
+    }
+
+    &-mix div:nth-child(1) {
+      width: 100%;
+      height: 30%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
+    }
+
+    &-mix div:nth-child(2) {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 30%;
+      height: 70%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
+    }
+
+    &-top div:nth-child(1) {
+      width: 100%;
+      height: 30%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
+    }
+
+    &-left div:nth-child(1) {
+      width: 30%;
+      height: 100%;
+      background: #1b2a47;
+    }
+
+    &-left div:nth-child(2) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 70%;
+      height: 30%;
+      background: #fff;
+      box-shadow: 0 0 1px #888;
+    }
   }
 }
 </style>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index 0254b59a..8e9337c1 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -1,53 +1,37 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { isExternal } from '@/utils/index';
+import { useRouter } from 'vue-router';
+
+import { useAppStore } from '@/store/modules/app';
+const appStore = useAppStore();
+
+const sidebar = computed(() => appStore.sidebar);
+const device = computed(() => appStore.device);
+
+const props = defineProps({
+  to: {
+    type: String,
+    required: true
+  }
+});
+
+const router = useRouter();
+function push() {
+  if (device.value === 'mobile' && sidebar.value.opened == true) {
+    appStore.closeSideBar(false);
+  }
+  router.push(props.to).catch(err => {
+    console.error(err);
+  });
+}
+</script>
+
 <template>
-  <a
-      v-if="isExternal(to)"
-      :href="to"
-      target="_blank"
-      rel="noopener"
-  >
+  <a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
     <slot />
   </a>
-  <div
-      v-else
-      @click="push"
-  >
+  <div v-else @click="push">
     <slot />
   </div>
 </template>
-
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
-import { isExternal } from '@/utils/validate'
-import { useRouter } from 'vue-router'
-
-import useStore from "@/store";
-
-const {app}=useStore()
-
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-
-export default defineComponent({
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  setup(props) {
-    const router = useRouter()
-    const push = () => {
-      if (device.value === 'mobile' && sidebar.value.opened == true) {
-        app.closeSideBar(false)
-      }
-      router.push(props.to).catch((err) => {
-        console.log(err)
-      })
-    }
-    return {
-      push,
-      isExternal
-    }
-  }
-})
-</script>
\ No newline at end of file
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index b22edb95..864ab62c 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,77 +1,57 @@
+<script lang="ts" setup>
+import { useSettingsStore } from '@/store/modules/settings';
+
+const settingsStore = useSettingsStore();
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
+</script>
+
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
+  <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        class="h-full w-full flex items-center justify-center"
+        to="/"
+      >
+        <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+        <span v-else class="ml-3 text-white text-sm font-bold"
+          >vue3-element-admin</span
+        >
       </router-link>
-      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
+
+      <router-link
+        v-else
+        key="expand"
+        class="h-full w-full flex items-center justify-center"
+        to="/"
+      >
+        <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+        <span class="ml-3 text-white text-sm font-bold"
+          >vue3-element-admin</span
+        >
       </router-link>
     </transition>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const props = defineProps({
-  collapse: {
-      type: Boolean,
-      required: true
-    }
-})
-
-const title=ref("vue3-element-admin")
-const logo=ref("https://s2.loli.net/2022/04/07/hyquWXELOoYvlP6.png")
-
-</script>
-
 <style lang="scss" scoped>
+// https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component
 .sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
+  transition: opacity 2s;
 }
-.sidebarLogoFade-enter,
+
+.sidebarLogoFade-leave-active,
+.sidebarLogoFade-enter-from,
 .sidebarLogoFade-leave-to {
   opacity: 0;
 }
-.sidebar-logo-container {
-  position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
-  text-align: center;
-  overflow: hidden;
-
-  & .sidebar-logo-link {
-    height: 100%;
-    width: 100%;
-
-    & .sidebar-logo {
-      width: 32px;
-      height: 32px;
-      vertical-align: middle;
-      margin-right: 12px;
-    }
-
-    & .sidebar-title {
-      display: inline-block;
-      margin: 0;
-      color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
-    }
-  }
-
-  &.collapse {
-    .sidebar-logo {
-      margin-right: 0px;
-    }
-  }
-}
 </style>
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 2e48bb45..ebb6e2d2 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,102 +1,121 @@
-<template>
-  <div v-if="!item.meta || !item.meta.hidden">
-    <template
-        v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&(!item.meta|| !item.meta.alwaysShow)"
-    >
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
-          <template #title>
-            {{ generateTitle(onlyOneChild.meta.title ) }}
-          </template>
-        </el-menu-item>
-      </app-link>
-    </template>
-    <el-sub-menu v-else :index="resolvePath(item.path)" popper-append-to-body>
-      <!-- popper-append-to-body -->
-      <template #title>
-        <svg-icon v-if="item.meta && item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-        <span v-if="item.meta && item.meta.title">{{generateTitle(item.meta.title) }}</span>
-      </template>
-
-      <sidebar-item
-          v-for="child in item.children"
-          :key="child.path"
-          :item="child"
-          :is-nest="true"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu"
-      />
-    </el-sub-menu>
-  </div>
-</template>
-
 <script setup lang="ts">
-import path from 'path-browserify'
-import { ref} from "vue";
-import {isExternal} from '@/utils/validate'
-import AppLink from './Link.vue'
+import path from 'path-browserify';
+import { isExternal } from '@/utils/index';
+import AppLink from './Link.vue';
 
-import { generateTitle } from '@/utils/i18n'
+import { translateRouteTitleI18n } from '@/utils/i18n';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
 const props = defineProps({
+  /**
+   * 路由(eg:level_3_1)
+   */
   item: {
     type: Object,
     required: true
   },
-  isNest: {
-    type: Boolean,
-    required: false
-  },
+
+  /**
+   * 父层级完整路由路径(eg:/level/level_3/level_3_1)
+   */
   basePath: {
     type: String,
     required: true
   }
-})
+});
 
-const onlyOneChild = ref();
+const onlyOneChild = ref(); // 临时变量，唯一子路由
 
-function hasOneShowingChild(children = [] as any, parent: any) {
-  if (!children) {
-    children = [];
-  }
+/**
+ * 判断当前路由是否只有一个子路由
+ *
+ * 1：如果只有一个子路由： 返回 true
+ * 2：如果无子路由 ：返回 true
+ *
+ * @param children 子路由数组
+ * @param parent 当前路由
+ */
+function hasOneShowingChild(children = [], parent: any) {
+  // 需要显示的子路由数组
   const showingChildren = children.filter((item: any) => {
-    if (item.mata && item.mata.hidden) {
-      return false
+    if (item.meta?.hidden) {
+      return false; // 过滤不显示的子路由
     } else {
-      // Temp set(will be used if only has one showing child)
-      onlyOneChild.value = item
-      return true
+      onlyOneChild.value = item; // 唯一子路由赋值（多个子路由情况 onlyOneChild 变量是用不上的）
+      return true;
     }
-  })
+  });
 
-  // When there is only one child router, the child router is displayed by default
+  // 1：如果只有一个子路由, 返回 true
   if (showingChildren.length === 1) {
-    return true
+    return true;
   }
 
-  // Show parent if there are no child router to display
+  // 2：如果无子路由, 复制当前路由信息作为其子路由，满足只拥有一个子路由的条件，所以返回 true
   if (showingChildren.length === 0) {
-    onlyOneChild.value = {...parent, path: '', noShowingChildren: true}
-    return true
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
+    return true;
   }
+  return false;
+}
 
-  return false
-};
-
+/**
+ * 解析路径
+ *
+ * @param routePath 路由路径
+ */
 function resolvePath(routePath: string) {
   if (isExternal(routePath)) {
-    return routePath
+    return routePath;
   }
   if (isExternal(props.basePath)) {
-    return props.basePath
+    return props.basePath;
   }
-  return path.resolve(props.basePath, routePath)
+  // 完整路径 = 父级路径(/level/level_3) + 路由路径
+  const fullPath = path.resolve(props.basePath, routePath); // 相对路径 → 绝对路径
+  return fullPath;
 }
-
 </script>
+<template>
+  <div v-if="!item.meta || !item.meta.hidden">
+    <!-- 只包含一个子路由节点的路由，显示其【唯一子路由】 -->
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren)
+      "
+    >
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
+          <svg-icon
+            v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
+            :icon-class="onlyOneChild.meta.icon"
+          />
+          <template #title>
+            {{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
+          </template>
+        </el-menu-item>
+      </app-link>
+    </template>
 
-<style lang="scss" scoped>
+    <!-- 包含多个子路由  -->
+    <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
+      <template #title>
+        <svg-icon
+          v-if="item.meta && item.meta.icon"
+          :icon-class="item.meta.icon"
+        />
+        <span v-if="item.meta && item.meta.title">{{
+          translateRouteTitleI18n(item.meta.title)
+        }}</span>
+      </template>
 
-</style>
\ No newline at end of file
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+      />
+    </el-sub-menu>
+  </div>
+</template>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 5609acb7..c76bed9b 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,51 +1,43 @@
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import SidebarItem from "./SidebarItem.vue";
+import Logo from "./Logo.vue";
+
+import { useSettingsStore } from "@/store/modules/settings";
+import { usePermissionStore } from "@/store/modules/permission";
+import { useAppStore } from "@/store/modules/app";
+import { storeToRefs } from "pinia";
+import variables from "@/styles/variables.module.scss";
+
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const appStore = useAppStore();
+const currRoute = useRoute();
+const { sidebarLogo } = storeToRefs(settingsStore);
+</script>
+
 <template>
-  <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse"/>
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+  <div :class="{ 'has-logo': sidebarLogo }">
+    <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+    <el-scrollbar>
       <el-menu
-          :default-active="activeMenu"
-          :collapse="isCollapse"
-          :background-color="variables.menuBg"
-          :text-color="variables.menuText"
-          :active-text-color="variables.menuActiveText"
-          :unique-opened="false"
-          :collapse-transition="false"
-          mode="vertical">
+        :default-active="currRoute.path"
+        :collapse="!appStore.sidebar.opened"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :active-text-color="variables.menuActiveText"
+        :unique-opened="false"
+        :collapse-transition="false"
+        mode="vertical"
+      >
         <sidebar-item
-            v-for="route in routes"
-            :item="route"
-            :key="route.path"
-            :base-path="route.path"
-            :is-collapse="isCollapse"
+          v-for="route in permissionStore.routes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+          :is-collapse="!appStore.sidebar.opened"
         />
       </el-menu>
     </el-scrollbar>
   </div>
 </template>
-
-<script setup lang="ts">
-
-import {computed, defineComponent} from "vue";
-import {useRoute} from 'vue-router'
-
-import SidebarItem from './SidebarItem.vue'
-import Logo from './Logo.vue'
-import variables from '@/styles/variables.module.scss'
-import useStore from "@/store";
-
-const {permission,setting,app} =useStore();
-
-const route =useRoute()
-const routes =computed(() => permission.routes)
-const showLogo = computed(() => setting.sidebarLogo)
-const isCollapse = computed(() => !app.sidebar.opened)
-
-const activeMenu = computed(() => {
-  const {meta, path} = route
-  // if set path, the sidebar will highlight the path you set
-  if (meta.activeMenu) {
-    return meta.activeMenu
-  }
-  return path
-})
-</script>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 44207c1e..f2b7e7aa 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,49 +1,25 @@
-<template>
-  <el-scrollbar
-    ref="scrollContainerRef"
-    :vertical="false"
-    class="scroll-container"
-    @wheel.prevent="handleScroll"
-  >
-    <slot />
-  </el-scrollbar>
-</template>
-
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  getCurrentInstance,
-} from "vue";
-import { TagView } from "@/types";
-import useStore from "@/store";
-
-const emits = defineEmits();
+import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
 
 const tagAndTagSpacing = ref(4);
-const scrollContainerRef = ref(null);
-
-const { tagsView } = useStore();
-
-const visitedViews = computed(() => tagsView.visitedViews);
+const { proxy } = getCurrentInstance() as any;
 
+const emits = defineEmits(["scroll"]);
 const emitScroll = () => {
-  (emits as any)("scroll");
+  emits("scroll");
 };
 
-const { ctx } = getCurrentInstance() as any;
-const scrollWrapper = computed(() => {
-  return (scrollContainerRef.value as any).$refs.wrap as HTMLElement;
-});
+const tagsViewStore = useTagsViewStore();
+
+const scrollWrapper = computed(
+  () => proxy?.$refs.scrollContainer.$refs.wrapRef
+);
 
 onMounted(() => {
-  //scrollWrapper.value.addEventListener('scroll', emitScroll, true);
+  scrollWrapper.value.addEventListener("scroll", emitScroll, true);
 });
-
 onBeforeUnmount(() => {
-  // scrollWrapper.value.removeEventListener('scroll', emitScroll);
+  scrollWrapper.value.removeEventListener("scroll", emitScroll);
 });
 
 function handleScroll(e: WheelEvent) {
@@ -53,7 +29,7 @@ function handleScroll(e: WheelEvent) {
 }
 
 function moveToTarget(currentTag: TagView) {
-  const $container = ctx.$refs.scrollContainer.$el;
+  const $container = proxy.$refs.scrollContainer.$el;
   const $containerWidth = $container.offsetWidth;
   const $scrollWrapper = scrollWrapper.value;
 
@@ -61,9 +37,9 @@ function moveToTarget(currentTag: TagView) {
   let lastTag = null;
 
   // find first tag and last tag
-  if (visitedViews.value.length > 0) {
-    firstTag = visitedViews.value[0];
-    lastTag = visitedViews.value[visitedViews.value.length - 1];
+  if (tagsViewStore.visitedViews.length > 0) {
+    firstTag = tagsViewStore.visitedViews[0];
+    lastTag = tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1];
   }
 
   if (firstTag === currentTag) {
@@ -71,8 +47,8 @@ function moveToTarget(currentTag: TagView) {
   } else if (lastTag === currentTag) {
     $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth;
   } else {
-    const tagListDom = document.getElementsByClassName("tags-view-item");
-    const currentIndex = visitedViews.value.findIndex(
+    const tagListDom = document.getElementsByClassName("tags-item");
+    const currentIndex = tagsViewStore.visitedViews.findIndex(
       (item) => item === currentTag
     );
     let prevTag = null;
@@ -81,13 +57,13 @@ function moveToTarget(currentTag: TagView) {
       if (k !== "length" && Object.hasOwnProperty.call(tagListDom, k)) {
         if (
           (tagListDom[k] as any).dataset.path ===
-          visitedViews.value[currentIndex - 1].path
+          tagsViewStore.visitedViews[currentIndex - 1].path
         ) {
           prevTag = tagListDom[k];
         }
         if (
           (tagListDom[k] as any).dataset.path ===
-          visitedViews.value[currentIndex + 1].path
+          tagsViewStore.visitedViews[currentIndex + 1].path
         ) {
           nextTag = tagListDom[k];
         }
@@ -116,21 +92,30 @@ defineExpose({
 });
 </script>
 
+<template>
+  <el-scrollbar
+    ref="scrollContainer"
+    class="scroll-container"
+    :vertical="false"
+    @wheel.prevent="handleScroll"
+  >
+    <slot />
+  </el-scrollbar>
+</template>
+
 <style lang="scss" scoped>
 .scroll-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+
   .el-scrollbar__bar {
-    bottom: 0px;
+    bottom: 0;
   }
 
   .el-scrollbar__wrap {
     height: 49px;
   }
 }
-
-.scroll-container {
-  white-space: nowrap;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
 </style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index f59b966d..58104704 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,122 +1,61 @@
-<template>
-  <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane
-      ref="scrollPaneRef"
-      class="tags-view-wrapper"
-      @scroll="handleScroll"
-    >
-      <router-link
-        v-for="tag in visitedViews"
-        :key="tag.path"
-        :class="isActive(tag) ? 'active' : ''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        class="tags-view-item"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)"
-      >
-        {{ generateTitle(tag.meta.title) }}
-        <span
-          v-if="!isAffix(tag)"
-          class="el-icon-close"
-          @click.prevent.stop="closeSelectedTag(tag)"
-        >
-          <close
-            class="el-icon-close"
-            style="width: 1em; height: 1em; vertical-align: middle"
-          />
-        </span>
-      </router-link>
-    </scroll-pane>
-    <ul
-      v-show="visible"
-      :style="{ left: left + 'px', top: top + 'px' }"
-      class="contextmenu"
-    >
-      <li @click="refreshSelectedTag(selectedTag)">
-        <refresh-right style="width: 1em; height: 1em" />
-        刷新
-      </li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        <close style="width: 1em; height: 1em" />
-        关闭
-      </li>
-      <li @click="closeOtherTags">
-        <circle-close style="width: 1em; height: 1em" />
-        关闭其它
-      </li>
-      <li v-if="!isFirstView()" @click="closeLeftTags">
-        <back style="width: 1em; height: 1em" />
-        关闭左侧
-      </li>
-      <li v-if="!isLastView()" @click="closeRightTags">
-        <right style="width: 1em; height: 1em" />
-        关闭右侧
-      </li>
-      <li @click="closeAllTags(selectedTag)">
-        <circle-close style="width: 1em; height: 1em" />
-        关闭所有
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts" >
+<script setup lang="ts">
 import {
-  computed,
   getCurrentInstance,
   nextTick,
   ref,
   watch,
   onMounted,
-ComponentInternalInstance,
+  ComponentInternalInstance,
 } from "vue";
+import { storeToRefs } from "pinia";
 
 import path from "path-browserify";
 
-import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
-import { TagView } from "@/types";
+import { useRoute, useRouter } from "vue-router";
 
+import { translateRouteTitleI18n } from "@/utils/i18n";
+
+import { usePermissionStore } from "@/store/modules/permission";
+import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
 import ScrollPane from "./ScrollPane.vue";
-import {
-  Close,
-  RefreshRight,
-  CircleClose,
-  Back,
-  Right,
-} from "@element-plus/icons-vue";
-import { generateTitle } from "@/utils/i18n";
-import useStore from "@/store";
-
-const { tagsView, permission } = useStore();
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance; // 获取当前组件实例
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const router = useRouter();
 const route = useRoute();
 
-const visitedViews = computed<any>(() => tagsView.visitedViews);
-const routes = computed<any>(() => permission.routes);
+const permissionStore = usePermissionStore();
+const tagsViewStore = useTagsViewStore();
+
+const { visitedViews } = storeToRefs(tagsViewStore);
 
-const affixTags = ref([]);
-const visible = ref(false);
 const selectedTag = ref({});
 const scrollPaneRef = ref();
 const left = ref(0);
 const top = ref(0);
+const affixTags = ref<TagView[]>([]);
 
-watch(route, () => {
-  addTags();
-  moveToCurrentTag();
-});
+watch(
+  route,
+  () => {
+    addTags();
+    moveToCurrentTag();
+  },
+  {
+    //初始化立即执行
+    immediate: true,
+  }
+);
 
-watch(visible, (value) => {
+const tagMenuVisible = ref(false); // 标签操作菜单显示状态
+watch(tagMenuVisible, (value) => {
   if (value) {
-    document.body.addEventListener("click", closeMenu);
+    document.body.addEventListener("click", closeTagMenu);
   } else {
-    document.body.removeEventListener("click", closeMenu);
+    document.body.removeEventListener("click", closeTagMenu);
   }
 });
 
-function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
+function filterAffixTags(routes: any[], basePath = "/") {
   let tags: TagView[] = [];
 
   routes.forEach((route) => {
@@ -141,35 +80,30 @@ function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
 }
 
 function initTags() {
-  const res = filterAffixTags(routes.value) as [];
-  affixTags.value = res;
-  for (const tag of res) {
+  const tags: TagView[] = filterAffixTags(permissionStore.routes);
+  affixTags.value = tags;
+  for (const tag of tags) {
     // Must have tag name
-    if ((tag as TagView).name) {
-      tagsView.addVisitedView(tag);
+    if (tag.name) {
+      tagsViewStore.addVisitedView(tag);
     }
   }
 }
 
 function addTags() {
   if (route.name) {
-    tagsView.addView(route);
+    tagsViewStore.addView(route);
   }
-  return false;
 }
 
 function moveToCurrentTag() {
-  const tags = getCurrentInstance()?.refs.tag as any[];
   nextTick(() => {
-    if (tags === null || tags === undefined || !Array.isArray(tags)) {
-      return;
-    }
-    for (const tag of tags) {
-      if ((tag.to as TagView).path === route.path) {
-        (scrollPaneRef.value as any).value.moveToTarget(tag);
+    for (const r of tagsViewStore.visitedViews) {
+      if (r.path === route.path) {
+        scrollPaneRef.value.moveToTarget(r);
         // when query is different then update
-        if ((tag.to as TagView).fullPath !== route.fullPath) {
-          tagsView.updateVisitedView(route);
+        if (r.fullPath !== route.fullPath) {
+          tagsViewStore.updateVisitedView(route);
         }
       }
     }
@@ -188,7 +122,7 @@ function isFirstView() {
   try {
     return (
       (selectedTag.value as TagView).fullPath ===
-        visitedViews.value[1].fullPath ||
+        tagsViewStore.visitedViews[1].fullPath ||
       (selectedTag.value as TagView).fullPath === "/index"
     );
   } catch (err) {
@@ -200,7 +134,7 @@ function isLastView() {
   try {
     return (
       (selectedTag.value as TagView).fullPath ===
-      visitedViews.value[visitedViews.value.length - 1].fullPath
+      tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1].fullPath
     );
   } catch (err) {
     return false;
@@ -208,7 +142,7 @@ function isLastView() {
 }
 
 function refreshSelectedTag(view: TagView) {
-  tagsView.delCachedView(view);
+  tagsViewStore.delCachedView(view);
   const { fullPath } = view;
   nextTick(() => {
     router.replace({ path: "/redirect" + fullPath }).catch((err) => {
@@ -234,7 +168,7 @@ function toLastView(visitedViews: TagView[], view?: any) {
 }
 
 function closeSelectedTag(view: TagView) {
-  tagsView.delView(view).then((res: any) => {
+  tagsViewStore.delView(view).then((res: any) => {
     if (isActive(view)) {
       toLastView(res.visitedViews, view);
     }
@@ -242,7 +176,7 @@ function closeSelectedTag(view: TagView) {
 }
 
 function closeLeftTags() {
-  tagsView.delLeftViews(selectedTag.value).then((res: any) => {
+  tagsViewStore.delLeftViews(selectedTag.value).then((res: any) => {
     if (
       !res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
     ) {
@@ -251,7 +185,7 @@ function closeLeftTags() {
   });
 }
 function closeRightTags() {
-  tagsView.delRightViews(selectedTag.value).then((res: any) => {
+  tagsViewStore.delRightViews(selectedTag.value).then((res: any) => {
     if (
       !res.visitedViews.find((item: any) => item.fullPath === route.fullPath)
     ) {
@@ -261,22 +195,23 @@ function closeRightTags() {
 }
 
 function closeOtherTags() {
-  tagsView.delOtherViews(selectedTag.value).then(() => {
+  router.push(selectedTag.value);
+  tagsViewStore.delOtherViews(selectedTag.value).then(() => {
     moveToCurrentTag();
   });
 }
 
 function closeAllTags(view: TagView) {
-  tagsView.delRightViews(selectedTag.value).then((res: any) => {
-    if (affixTags.value.some((tag: any) => tag.path === route.path)) {
-      return;
-    }
+  tagsViewStore.delAllViews().then((res: any) => {
     toLastView(res.visitedViews, view);
   });
 }
 
-function openMenu(tag: TagView, e: MouseEvent) {
+function openTagMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
+
+  console.log("test", proxy?.$el);
+
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
   const maxLeft = offsetWidth - menuMinWidth; // left boundary
@@ -289,126 +224,150 @@ function openMenu(tag: TagView, e: MouseEvent) {
   }
 
   top.value = e.clientY;
-  visible.value = true;
+  tagMenuVisible.value = true;
   selectedTag.value = tag;
 }
 
-function closeMenu() {
-  visible.value = false;
+function closeTagMenu() {
+  tagMenuVisible.value = false;
 }
 
 function handleScroll() {
-  closeMenu();
+  closeTagMenu();
 }
 
 onMounted(() => {
   initTags();
-  addTags();
 });
 </script>
 
-<style lang='scss' scoped>
-.tags-view-container {
-  height: 34px;
+<template>
+  <div class="tags-container">
+    <scroll-pane ref="scrollPaneRef" @scroll="handleScroll">
+      <router-link
+        v-for="tag in visitedViews"
+        :key="tag.path"
+        :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
+        :data-path="tag.path"
+        :to="{ path: tag.path, query: tag.query }"
+        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+        @contextmenu.prevent="openTagMenu(tag, $event)"
+      >
+        {{ translateRouteTitleI18n(tag.meta?.title) }}
+        <span
+          v-if="!isAffix(tag)"
+          class="tags-item-close"
+          @click.prevent.stop="closeSelectedTag(tag)"
+        >
+          <i-ep-close class="text-[10px]" />
+        </span>
+      </router-link>
+    </scroll-pane>
+
+    <!-- tag标签操作菜单 -->
+    <ul
+      v-show="tagMenuVisible"
+      class="tag-menu"
+      :style="{ left: left + 'px', top: top + 'px' }"
+    >
+      <li @click="refreshSelectedTag(selectedTag)">
+        <svg-icon icon-class="refresh" />
+        刷新
+      </li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <svg-icon icon-class="close" />
+        关闭
+      </li>
+      <li @click="closeOtherTags">
+        <svg-icon icon-class="close_other" />
+        关闭其它
+      </li>
+      <li v-if="!isFirstView()" @click="closeLeftTags">
+        <svg-icon icon-class="close_left" />
+        关闭左侧
+      </li>
+      <li v-if="!isLastView()" @click="closeRightTags">
+        <svg-icon icon-class="close_right" />
+        关闭右侧
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        <svg-icon icon-class="close_all" />
+        关闭所有
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tags-container {
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-
-  .tags-view-wrapper {
-    .tags-view-item {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
-      background: #fff;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
-
-      &:first-of-type {
-        margin-left: 15px;
-      }
+  height: 34px;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  box-shadow: 0 1px 1px var(--el-box-shadow-light);
+
+  .tags-item {
+    display: inline-block;
+    padding: 3px 8px;
+    margin: 4px 0 0 5px;
+    font-size: 12px;
+    cursor: pointer;
+    border: 1px solid var(--el-border-color-light);
 
-      &:last-of-type {
-        margin-right: 15px;
-      }
+    &:first-of-type {
+      margin-left: 15px;
+    }
 
-      &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
-
-        &::before {
-          content: "";
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 2px;
-        }
-      }
+    &:last-of-type {
+      margin-right: 15px;
     }
-  }
 
-  .contextmenu {
-    margin: 0;
-    background: #fff;
-    z-index: 3000;
-    position: absolute;
-    list-style-type: none;
-    padding: 5px 0;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+    &:hover {
+      color: var(--el-color-primary);
+    }
 
-    li {
-      margin: 0;
-      padding: 7px 16px;
-      cursor: pointer;
+    &.active {
+      color: #fff;
+      background-color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
 
-      &:hover {
-        background: #eee;
+      &::before {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin-right: 5px;
+        content: "";
+        background: #fff;
+        border-radius: 50%;
       }
     }
-  }
-}
-</style>
 
-<style lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
-  .tags-view-item {
-    .el-icon-close {
-      width: 16px;
-      height: 16px;
-      vertical-align: 0px;
-      border-radius: 50%;
-      text-align: center;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-      transform-origin: 100% 50%;
-
-      &:before {
-        transform: scale(0.6);
-        display: inline-block;
-        vertical-align: -3px;
-      }
+    &-close {
+      border-radius: 100%;
 
       &:hover {
-        background-color: #b4bccc;
         color: #fff;
-        width: 12px !important;
-        height: 12px !important;
+        background: rgb(0 0 0 / 16%);
       }
     }
   }
 }
-</style>
\ No newline at end of file
+
+.tag-menu {
+  position: absolute;
+  z-index: 99;
+  font-size: 12px;
+  background: var(--el-bg-color-overlay);
+  border-radius: 4px;
+  box-shadow: var(--el-box-shadow-light);
+
+  li {
+    padding: 8px 16px;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--el-fill-color-light);
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/index.ts b/src/layout/components/index.ts
index 6fea3b87..4dca96ed 100644
--- a/src/layout/components/index.ts
+++ b/src/layout/components/index.ts
@@ -1,4 +1,4 @@
-export { default as Navbar } from './Navbar.vue'
-export { default as AppMain } from './AppMain.vue'
-export { default as Settings } from './Settings/index.vue'
-export { default as TagsView } from './TagsView/index.vue'
+export { default as Navbar } from './Navbar.vue';
+export { default as AppMain } from './AppMain.vue';
+export { default as Settings } from './Settings/index.vue';
+export { default as TagsView } from './TagsView/index.vue';
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 54f727f8..dda75b38 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,24 +1,3 @@
-<template>
-  <div :class="classObj" class="app-wrapper">
-    <div
-      v-if="device === 'mobile' && sidebar.opened"
-      class="drawer-bg"
-      @click="handleClickOutside"
-    />
-    <sidebar class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView }" class="main-container">
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar />
-        <tags-view v-if="needTagsView" />
-      </div>
-      <app-main />
-      <right-panel v-if="showSettings">
-        <settings />
-      </right-panel>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { computed, watchEffect } from "vue";
 import { useWindowSize } from "@vueuse/core";
@@ -26,49 +5,94 @@ import { AppMain, Navbar, Settings, TagsView } from "./components/index";
 import Sidebar from "./components/Sidebar/index.vue";
 import RightPanel from "@/components/RightPanel/index.vue";
 
-import useStore from "@/store";
+import { useAppStore } from "@/store/modules/app";
+import { useSettingsStore } from "@/store/modules/settings";
+
+const { width } = useWindowSize();
 
-const { width, height } = useWindowSize();
+/**
+ * 响应式布局容器固定宽度
+ *
+ * 大屏（>=1200px）
+ * 中屏（>=992px）
+ * 小屏（>=768px）
+ */
 const WIDTH = 992;
 
-const { app, setting } = useStore();
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
 
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
-const needTagsView = computed(() => setting.tagsView);
-const fixedHeader = computed(() => setting.fixedHeader);
-const showSettings = computed(() => setting.showSettings);
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+const showTagsView = computed(() => settingsStore.tagsView);
+const showSettings = computed(() => settingsStore.showSettings);
 
 const classObj = computed(() => ({
-  hideSidebar: !sidebar.value.opened,
-  openSidebar: sidebar.value.opened,
-  withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === "mobile",
+  hideSidebar: !appStore.sidebar.opened,
+  openSidebar: appStore.sidebar.opened,
+  withoutAnimation: appStore.sidebar.withoutAnimation,
+  mobile: appStore.device === "mobile",
 }));
 
 watchEffect(() => {
   if (width.value < WIDTH) {
-    app.toggleDevice("mobile");
-    app.closeSideBar(true);
+    appStore.toggleDevice("mobile");
+    appStore.closeSideBar(true);
   } else {
-    app.toggleDevice("desktop");
+    appStore.toggleDevice("desktop");
+
+    if (width.value >= 1200) {
+      //大屏
+      appStore.openSideBar(true);
+    } else {
+      appStore.closeSideBar(true);
+    }
   }
 });
 
-function handleClickOutside() {
-  app.closeSideBar(false);
+function handleOutsideClick() {
+  appStore.closeSideBar(false);
 }
 </script>
 
-<style lang="scss" scoped>
-@import "@/styles/mixin.scss";
-@import "@/styles/variables.module.scss";
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <!-- 手机设备侧边栏打开遮罩层 -->
+    <div
+      v-if="classObj.mobile && classObj.openSidebar"
+      class="drawer-bg"
+      @click="handleOutsideClick"
+    ></div>
+
+    <Sidebar class="sidebar-container" />
+
+    <div :class="{ hasTagsView: showTagsView }" class="main-container">
+      <div :class="{ 'fixed-header': fixedHeader }">
+        <navbar />
+        <tags-view v-if="showTagsView" />
+      </div>
 
+      <!--主页面-->
+      <app-main />
+
+      <!-- 设置面板 -->
+      <RightPanel v-if="showSettings">
+        <settings />
+      </RightPanel>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
 .app-wrapper {
-  @include clearfix;
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
   position: relative;
-  height: 100%;
   width: 100%;
+  height: 100%;
 
   &.mobile.openSidebar {
     position: fixed;
@@ -76,16 +100,6 @@ function handleClickOutside() {
   }
 }
 
-.drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
-
 .fixed-header {
   position: fixed;
   top: 0;
@@ -102,4 +116,14 @@ function handleClickOutside() {
 .mobile .fixed-header {
   width: 100%;
 }
+
+.drawer-bg {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.3;
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
index e5c254a1..1d10f2f0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,43 +1,26 @@
-import {createApp, Directive} from 'vue'
-import App from './App.vue'
-import router from "@/router";
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from '@/router';
+import { setupStore } from '@/store';
+import { setupDirective } from '@/directive';
 
-import { createPinia } from "pinia"
-import {localStorage} from "@/utils/storage";
+import '@/permission';
 
-import ElementPlus from 'element-plus'
-import 'element-plus/theme-chalk/index.css'
-import Pagination from '@/components/Pagination/index.vue'
-import '@/permission'
-
-// 引入svg注册脚本
+// 本地SVG图标
 import 'virtual:svg-icons-register';
 
 // 国际化
-import i18n from "@/lang/index";
-
-// 自定义样式
-import '@/styles/index.scss'
-
-// 全局方法
-import {listDictsByCode} from '@/api/system/dict'
-
-const app = createApp(App)
-
-// 自定义指令
-import * as directive from "@/directive";
+import i18n from '@/lang/index';
 
-Object.keys(directive).forEach(key => {
-    app.directive(key, (directive as { [key: string]: Directive })[key]);
-});
+// 样式
+import 'element-plus/theme-chalk/dark/css-vars.css';
+import '@/styles/index.scss';
+import 'uno.css';
 
-// 全局方法
-app.config.globalProperties.$listDictsByCode = listDictsByCode
+const app = createApp(App);
+// 全局注册 自定义指令(directive)
+setupDirective(app);
+// 全局注册 状态管理(store)
+setupStore(app);
 
-// 注册全局组件
-app.component('Pagination', Pagination)
-    .use(createPinia())
-    .use(router)
-    .use(ElementPlus, {size: localStorage.get('size') || 'default'})
-    .use(i18n)
-    .mount('#app')
+app.use(router).use(i18n).mount('#app');
diff --git a/src/permission.ts b/src/permission.ts
index 10ffbdee..6b1203e1 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -1,56 +1,61 @@
 import router from "@/router";
-import { ElMessage } from "element-plus";
-import useStore from "@/store";
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css'
-NProgress.configure({ showSpinner: false }) // 进度环显示/隐藏
+import { useUserStoreHook } from "@/store/modules/user";
+import { usePermissionStoreHook } from "@/store/modules/permission";
 
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+NProgress.configure({ showSpinner: false }); // 进度条
+
+const permissionStore = usePermissionStoreHook();
 
 // 白名单路由
-const whiteList = ['/login', '/auth-redirect']
+const whiteList = ["/login"];
 
-router.beforeEach(async (to, form, next) => {
-    NProgress.start()
-    const { user, permission } = useStore()
-    const hasToken = user.token
-    if (hasToken) {
-        // 登录成功，跳转到首页
-        if (to.path === '/login') {
-            next({ path: '/' })
-            NProgress.done()
-        } else {
-            const hasGetUserInfo = user.roles.length > 0
-            if (hasGetUserInfo) {
-                next()
-            } else {
-                try {
-                    await user.getUserInfo()
-                    const roles = user.roles
-                    const accessRoutes: any = await permission.generateRoutes(roles)
-                    accessRoutes.forEach((route: any) => {
-                        router.addRoute(route)
-                    })
-                    next({ ...to, replace: true })
-                } catch (error) {
-                    // 移除 token 并跳转登录页
-                    await user.resetToken()
-                    ElMessage.error(error as any || 'Has Error')
-                    next(`/login?redirect=${to.path}`)
-                    NProgress.done()
-                }
-            }
-        }
+router.beforeEach(async (to, from, next) => {
+  NProgress.start();
+  const hasToken = localStorage.getItem("accessToken");
+  if (hasToken) {
+    if (to.path === "/login") {
+      // 如果已登录，跳转首页
+      next({ path: "/" });
+      NProgress.done();
     } else {
-        // 未登录可以访问白名单页面(登录页面)
-        if (whiteList.indexOf(to.path) !== -1) {
-            next()
+      const userStore = useUserStoreHook();
+      const hasRoles = userStore.roles && userStore.roles.length > 0;
+      if (hasRoles) {
+        // 未匹配到任何路由，跳转404
+        if (to.matched.length === 0) {
+          from.name ? next({ name: from.name }) : next("/404");
         } else {
-            next(`/login?redirect=${to.path}`)
-            NProgress.done()
+          next();
         }
+      } else {
+        try {
+          const { roles } = await userStore.getInfo();
+          const accessRoutes = await permissionStore.generateRoutes(roles);
+          accessRoutes.forEach((route) => {
+            router.addRoute(route);
+          });
+          next({ ...to, replace: true });
+        } catch (error) {
+          // 移除 token 并跳转登录页
+          await userStore.resetToken();
+          next(`/login?redirect=${to.path}`);
+          NProgress.done();
+        }
+      }
+    }
+  } else {
+    // 未登录可以访问白名单页面
+    if (whiteList.indexOf(to.path) !== -1) {
+      next();
+    } else {
+      next(`/login?redirect=${to.path}`);
+      NProgress.done();
     }
-})
+  }
+});
 
 router.afterEach(() => {
-    NProgress.done()
-})
+  NProgress.done();
+});
diff --git a/src/router/index.ts b/src/router/index.ts
index 730fbbef..c8801941 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,53 +1,53 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import useStore from "@/store";
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 
-export const Layout = () => import('@/layout/index.vue')
+export const Layout = () => import("@/layout/index.vue");
 
-// 参数说明: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 // 静态路由
-export const constantRoutes: Array<RouteRecordRaw> = [
-    {
-        path: '/redirect',
-        component: Layout,
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: "/redirect",
+    component: Layout,
+    meta: { hidden: true },
+    children: [
+      {
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect/index.vue"),
+      },
+    ],
+  },
+
+  {
+    path: "/login",
+    component: () => import("@/views/login/index.vue"),
+    meta: { hidden: true },
+  },
+
+  {
+    path: "/",
+    component: Layout,
+    redirect: "/dashboard",
+    children: [
+      {
+        path: "dashboard",
+        component: () => import("@/views/dashboard/index.vue"),
+        name: "Dashboard",
+        meta: { title: "dashboard", icon: "homepage", affix: true },
+      },
+      {
+        path: "401",
+        component: () => import("@/views/error-page/401.vue"),
         meta: { hidden: true },
-        children: [
-            {
-                path: '/redirect/:path(.*)',
-                component: () => import('@/views/redirect/index.vue')
-            }
-        ]
-    },
-    {
-        path: '/login',
-        component: () => import('@/views/login/index.vue'),
-        meta: { hidden: true }
-    },
-    {
-        path: '/404',
-        component: () => import('@/views/error-page/404.vue'),
-        meta: { hidden: true }
-    },
-    {
-        path: '/401',
-        component: () => import('@/views/error-page/401.vue'),
-        meta: { hidden: true }
-    },
-    {
-        path: '/',
-        component: Layout,
-        redirect: '/dashboard',
-        children: [
-            {
-                path: 'dashboard',
-                component: () => import('@/views/dashboard/index.vue'),
-                name: 'Dashboard',
-                meta: { title: 'dashboard', icon: 'dashboard', affix: true }
-            }
-        ]
-    }
+      },
+      {
+        path: "404",
+        component: () => import("@/views/error-page/404.vue"),
+        meta: { hidden: true },
+      },
+    ],
+  },
 
-    // 外部链接
-    /*{
+  // 外部链接
+  /*{
         path: '/external-link',
         component: Layout,
         children: [
@@ -57,8 +57,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
             }
         ]
     }*/
-    // 多级嵌套路由
-    /* {
+  // 多级嵌套路由
+  /* {
          path: '/nested',
          component: Layout,
          redirect: '/nested/level1/level2',
@@ -97,25 +97,23 @@ export const constantRoutes: Array<RouteRecordRaw> = [
              },
          ]
      }*/
-]
+];
 
-// 创建路由
+/**
+ * 创建路由
+ */
 const router = createRouter({
-    history: createWebHashHistory(),
-    routes: constantRoutes as RouteRecordRaw[],
-    // 刷新时，滚动条位置还原
-    scrollBehavior: () => ({ left: 0, top: 0 })
-})
+  history: createWebHashHistory(),
+  routes: constantRoutes as RouteRecordRaw[],
+  // 刷新时，滚动条位置还原
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
 
-// 重置路由
+/**
+ * 重置路由
+ */
 export function resetRouter() {
-    const { permission } = useStore()
-    permission.routes.forEach((route) => {
-        const name = route.name
-        if (name && router.hasRoute(name)) {
-            router.removeRoute(name)
-        }
-    })
+  router.replace({ path: "/login" });
 }
 
-export default router
\ No newline at end of file
+export default router;
diff --git a/src/settings.ts b/src/settings.ts
index cbff21f2..e5ed4d78 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,21 +1,62 @@
+// 系统设置
 interface DefaultSettings {
-    title: string,
-    showSettings: boolean,
-    tagsView: boolean,
-    fixedHeader: boolean,
-    sidebarLogo: boolean,
-    errorLog: string
-}
+  /**
+   * 系统title
+   */
+  title: string;
 
+  /**
+   * 是否显示设置
+   */
+  showSettings: boolean;
+  /**
+   * 是否显示多标签导航
+   */
+  tagsView: boolean;
+  /**
+   *是否固定头部
+   */
+  fixedHeader: boolean;
+  /**
+   * 是否显示侧边栏Logo
+   */
+  sidebarLogo: boolean;
+  /**
+   * 导航栏布局
+   */
+  layout: string;
+  /**
+   * 主题模式
+   */
+  theme: string;
 
-const defaultSettings: DefaultSettings = {
-    title: 'vue3-element-admin',
-    showSettings: true,
-    tagsView: true,
-    fixedHeader: false,
-    // 是否显示Logo
-    sidebarLogo: true,
-    errorLog: 'production'
+  /**
+   * 布局大小
+   */
+  size: string;
+
+  /**
+   * 语言
+   */
+  language: string;
 }
 
-export default defaultSettings
\ No newline at end of file
+const defaultSettings: DefaultSettings = {
+  title: "vue3-element-admin",
+  showSettings: true,
+  tagsView: true,
+  fixedHeader: false,
+  sidebarLogo: true,
+  layout: "left",
+  /**
+   *  主题模式
+   *
+   * dark:暗黑模式
+   * light: 明亮模式
+   */
+  theme: "dark",
+  size: "default", // default |large |small
+  language: "zh-cn", // zh-cn| en
+};
+
+export default defaultSettings;
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 00000000..1be3a223
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1 @@
+declare module 'xlsx/xlsx.mjs'
diff --git a/src/store/index.ts b/src/store/index.ts
index 184ebbdc..ceb4219d 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,15 +1,11 @@
-import useUserStore from './modules/user'
-import useAppStore from './modules/app'
-import usePermissionStore from './modules/permission'
-import useSettingStore from './modules/settings'
-import useTagsViewStore from './modules/tagsView'
+import type { App } from 'vue';
+import { createPinia } from 'pinia';
 
-const useStore = () => ({
-    user: useUserStore(),
-    app: useAppStore(),
-    permission: usePermissionStore(),
-    setting: useSettingStore(),
-    tagsView: useTagsViewStore()
-})
+const store = createPinia();
 
-export default useStore
\ No newline at end of file
+// 全局注册 store
+export function setupStore(app: App<Element>) {
+  app.use(store);
+}
+
+export { store };
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index c4f53207..cd1c1860 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,46 +1,85 @@
-import { AppState } from "@/types";
-import { localStorage } from "@/utils/storage";
 import { defineStore } from "pinia";
-import { getLanguage } from '@/lang/index'
-
-const useAppStore = defineStore({
-    id: "app",
-    state: (): AppState => ({
-        device: 'desktop',
-        sidebar: {
-            opened: localStorage.get('sidebarStatus') ? !!+localStorage.get('sidebarStatus') : true,
-            withoutAnimation: false
-        },
-        language: getLanguage(),
-        size: localStorage.get('size') || 'default'
-    }),
-    actions: {
-        toggleSidebar() {
-            this.sidebar.opened = !this.sidebar.opened
-            this.sidebar.withoutAnimation = false
-            if (this.sidebar.opened) {
-                localStorage.set('sidebarStatus', 1)
-            } else {
-                localStorage.set('sidebarStatus', 0)
-            }
-        },
-        closeSideBar(withoutAnimation: any) {
-            localStorage.set('sidebarStatus', 0)
-            this.sidebar.opened = false
-            this.sidebar.withoutAnimation = withoutAnimation
-        },
-        toggleDevice(device: string) {
-            this.device = device
-        },
-        setSize(size: string) {
-            this.size = size
-            localStorage.set('size', size)
-        },
-        setLanguage(language: string) {
-            this.language = language
-            localStorage.set('language', language)
-        }
+import { useStorage } from "@vueuse/core";
+import defaultSettings from "@/settings";
+
+// 导入 Element Plus 中英文语言包
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import en from "element-plus/es/locale/lang/en";
+
+// setup
+export const useAppStore = defineStore("app", () => {
+  // state
+  const device = useStorage("device", "desktop");
+  const size = useStorage<any>("size", defaultSettings.size);
+  const language = useStorage("language", defaultSettings.language);
+
+  const sidebarStatus = useStorage("sidebarStatus", "closed");
+  const sidebar = reactive({
+    opened: sidebarStatus.value !== "closed",
+    withoutAnimation: false,
+  });
+
+  /**
+   * 根据语言标识读取对应的语言包
+   */
+  const locale = computed(() => {
+    if (language?.value == "en") {
+      return en;
+    } else {
+      return zhCn;
+    }
+  });
+
+  // actions
+  function toggleSidebar(withoutAnimation: boolean) {
+    sidebar.opened = !sidebar.opened;
+    sidebar.withoutAnimation = withoutAnimation;
+    if (sidebar.opened) {
+      sidebarStatus.value = "opened";
+    } else {
+      sidebarStatus.value = "closed";
     }
-})
+  }
+
+  function closeSideBar(withoutAnimation: boolean) {
+    sidebar.opened = false;
+    sidebar.withoutAnimation = withoutAnimation;
+    sidebarStatus.value = "closed";
+  }
+
+  function openSideBar(withoutAnimation: boolean) {
+    sidebar.opened = true;
+    sidebar.withoutAnimation = withoutAnimation;
+    sidebarStatus.value = "opened";
+  }
+
+  function toggleDevice(val: string) {
+    device.value = val;
+  }
+
+  function changeSize(val: string) {
+    size.value = val;
+  }
+  /**
+   * 切换语言
+   *
+   * @param val
+   */
+  function changeLanguage(val: string) {
+    language.value = val;
+  }
 
-export default useAppStore;
\ No newline at end of file
+  return {
+    device,
+    sidebar,
+    language,
+    locale,
+    size,
+    toggleDevice,
+    changeSize,
+    changeLanguage,
+    toggleSidebar,
+    closeSideBar,
+    openSideBar,
+  };
+});
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 2a4ece30..8a69655d 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,76 +1,106 @@
-import { PermissionState } from "@/types";
-import { RouteRecordRaw } from 'vue-router'
+import { RouteRecordRaw } from "vue-router";
 import { defineStore } from "pinia";
-import { constantRoutes } from '@/router'
-import { listRoutes } from "@/api/system/menu";
+import { constantRoutes } from "@/router";
+import { store } from "@/store";
+import { listRoutes } from "@/api/menu";
 
 const modules = import.meta.glob("../../views/**/**.vue");
-export const Layout = () => import('@/layout/index.vue')
+const Layout = () => import("@/layout/index.vue");
 
+/**
+ * Use meta.role to determine if the current user has permission
+ *
+ * @param roles 用户角色集合
+ * @param route 路由
+ * @returns
+ */
 const hasPermission = (roles: string[], route: RouteRecordRaw) => {
-    if (route.meta && route.meta.roles) {
-        if (roles.includes('ROOT')) {
-            return true
-        }
-        return roles.some(role => {
-            if (route.meta?.roles !== undefined) {
-                return (route.meta.roles as string[]).includes(role);
-            }
-        })
+  if (route.meta && route.meta.roles) {
+    // 角色【超级管理员】拥有所有权限，忽略校验
+    if (roles.includes("ROOT")) {
+      return true;
     }
-    return false
-}
+    return roles.some((role) => {
+      if (route.meta?.roles !== undefined) {
+        return (route.meta.roles as string[]).includes(role);
+      }
+    });
+  }
+  return false;
+};
 
-export const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
-    const res: RouteRecordRaw[] = []
-    routes.forEach(route => {
-        const tmp = { ...route } as any
-        if (hasPermission(roles, tmp)) {
-            if (tmp.component == 'Layout') {
-                tmp.component = Layout
-            } else {
-                const component = modules[`../../views/${tmp.component}.vue`] as any;
-                if (component) {
-                    tmp.component = modules[`../../views/${tmp.component}.vue`];
-                } else {
-                    tmp.component = modules[`../../views/error-page/404.vue`];
-                }
-            }
-            res.push(tmp)
+/**
+ * 递归过滤有权限的异步(动态)路由
+ *
+ * @param routes 接口返回的异步(动态)路由
+ * @param roles 用户角色集合
+ * @returns 返回用户有权限的异步(动态)路由
+ */
+const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
+  const asyncRoutes: RouteRecordRaw[] = [];
 
-            if (tmp.children) {
-                tmp.children = filterAsyncRoutes(tmp.children, roles)
-            }
+  routes.forEach((route) => {
+    const tmpRoute = { ...route }; // ES6扩展运算符复制新对象
+
+    // 判断用户(角色)是否有该路由的访问权限
+    if (hasPermission(roles, tmpRoute)) {
+      if (tmpRoute.component?.toString() == "Layout") {
+        tmpRoute.component = Layout;
+        console.log();
+      } else {
+        const component = modules[`../../views/${tmpRoute.component}.vue`];
+        if (component) {
+          tmpRoute.component = component;
+        } else {
+          tmpRoute.component = modules[`../../views/error-page/404.vue`];
         }
-    })
-    return res
-}
+      }
 
+      if (tmpRoute.children) {
+        tmpRoute.children = filterAsyncRoutes(tmpRoute.children, roles);
+      }
 
-const usePermissionStore = defineStore({
-    id: "permission",
-    state: (): PermissionState => ({
-        routes: [],
-        addRoutes: []
-    }),
-    actions: {
-        setRoutes(routes: RouteRecordRaw[]) {
-            this.addRoutes = routes
-            this.routes = constantRoutes.concat(routes)
-        },
-        generateRoutes(roles: string[]) {
-            return new Promise((resolve, reject) => {
-                listRoutes().then(response => {
-                    const asyncRoutes = response.data
-                    let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
-                    this.setRoutes(accessedRoutes)
-                    resolve(accessedRoutes)
-                }).catch(error => {
-                    reject(error)
-                })
-            })
-        }
+      asyncRoutes.push(tmpRoute);
     }
-})
+  });
 
-export default usePermissionStore;
+  return asyncRoutes;
+};
+
+// setup
+export const usePermissionStore = defineStore("permission", () => {
+  // state
+  const routes = ref<RouteRecordRaw[]>([]);
+
+  // actions
+  function setRoutes(newRoutes: RouteRecordRaw[]) {
+    routes.value = constantRoutes.concat(newRoutes);
+  }
+  /**
+   * 生成动态路由
+   *
+   * @param roles 用户角色集合
+   * @returns
+   */
+  function generateRoutes(roles: string[]) {
+    return new Promise<RouteRecordRaw[]>((resolve, reject) => {
+      // 接口获取所有路由
+      listRoutes()
+        .then(({ data: asyncRoutes }) => {
+          // 根据角色获取有访问权限的路由
+          const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
+          setRoutes(accessedRoutes);
+          resolve(accessedRoutes);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+  return { routes, setRoutes, generateRoutes };
+});
+
+// 非setup
+export function usePermissionStoreHook() {
+  return usePermissionStore(store);
+}
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 069c75ca..908359c3 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,45 +1,47 @@
 import { defineStore } from "pinia";
-import { SettingState } from "@/types";
-import defaultSettings from '../../settings'
-import { localStorage } from "@/utils/storage";
+import defaultSettings from "@/settings";
+import { useStorage } from "@vueuse/core";
 
-const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
-import variables from '@/styles/element-variables.module.scss'
+export const useSettingsStore = defineStore("setting", () => {
+  // state
+  const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
 
-export const useSettingStore = defineStore({
-    id: "setting",
-    state: (): SettingState => ({
-        theme: localStorage.get("theme") || variables.theme,
-        showSettings: showSettings,
-        tagsView: localStorage.get("tagsView") != null ? localStorage.get("tagsView") : tagsView,
-        fixedHeader: fixedHeader,
-        sidebarLogo: sidebarLogo,
-    }),
-    actions: {
-        async changeSetting(payload: { key: string, value: any }) {
-            const { key, value } = payload
-            switch (key) {
-                case 'theme':
-                    this.theme = value
-                    break
-                case 'showSettings':
-                    this.showSettings = value
-                    break
-                case 'fixedHeader':
-                    this.fixedHeader = value
-                    break
-                case 'tagsView':
-                    this.tagsView = value
-                    localStorage.set("tagsView", value)
-                    break
-                case 'sidebarLogo':
-                    this.sidebarLogo = value
-                    break
-                default:
-                    break
-            }
-        }
+  const showSettings = ref<boolean>(defaultSettings.showSettings);
+  const fixedHeader = ref<boolean>(defaultSettings.fixedHeader);
+  const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);
+
+  const layout = useStorage<string>("layout", defaultSettings.layout);
+
+  // actions
+  function changeSetting(param: { key: string; value: any }) {
+    const { key, value } = param;
+    switch (key) {
+      case "showSettings":
+        showSettings.value = value;
+        break;
+      case "fixedHeader":
+        fixedHeader.value = value;
+        break;
+      case "tagsView":
+        tagsView.value = value;
+        break;
+      case "sidevarLogo":
+        sidebarLogo.value = value;
+        break;
+      case "layout":
+        layout.value = value;
+        break;
+      default:
+        break;
     }
-})
+  }
 
-export default useSettingStore;
+  return {
+    showSettings,
+    tagsView,
+    fixedHeader,
+    sidebarLogo,
+    layout,
+    changeSetting,
+  };
+});
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index d40849cc..971e6a74 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -1,175 +1,217 @@
 import { defineStore } from "pinia";
-import { TagsViewState } from "@/types";
-
-const useTagsViewStore = defineStore({
-    id: "tagsView",
-    state: (): TagsViewState => ({
-        visitedViews: [],
-        cachedViews: []
-    }),
-    actions: {
-        addVisitedView(view: any) {
-            if (this.visitedViews.some(v => v.path === view.path)) return
-            this.visitedViews.push(
-                Object.assign({}, view, {
-                    title: view.meta?.title || 'no-name'
-                })
-            )
-        },
-        addCachedView(view: any) {
-            if (this.cachedViews.includes(view.name)) return
-            if (!view.meta.noCache) {
-                this.cachedViews.push(view.name)
-            }
-        },
-
-        delVisitedView(view: any) {
-            return new Promise(resolve => {
-                for (const [i, v] of this.visitedViews.entries()) {
-                    if (v.path === view.path) {
-                        this.visitedViews.splice(i, 1)
-                        break
-                    }
-                }
-                resolve([...this.visitedViews])
-            })
-
-        },
-        delCachedView(view: any) {
-            return new Promise(resolve => {
-                const index = this.cachedViews.indexOf(view.name)
-                index > -1 && this.cachedViews.splice(index, 1)
-                resolve([...this.cachedViews])
-            })
-
-        },
-
-        delOtherVisitedViews(view: any) {
-            return new Promise(resolve => {
-                this.visitedViews = this.visitedViews.filter(v => {
-                    return v.meta?.affix || v.path === view.path
-                })
-                resolve([...this.visitedViews])
-            })
-
-        },
-        delOtherCachedViews(view: any) {
-            return new Promise(resolve => {
-                const index = this.cachedViews.indexOf(view.name)
-                if (index > -1) {
-                    this.cachedViews = this.cachedViews.slice(index, index + 1)
-                } else {
-                    // if index = -1, there is no cached tags
-                    this.cachedViews = []
-                }
-                resolve([...this.cachedViews])
-            })
-
-        },
-
-        updateVisitedView(view: any) {
-            for (let v of this.visitedViews) {
-                if (v.path === view.path) {
-                    v = Object.assign(v, view)
-                    break
-                }
-            }
-        },
-        addView(view: any) {
-            this.addVisitedView(view)
-            this.addCachedView(view)
-        },
-        delView(view: any) {
-            return new Promise(resolve => {
-                this.delVisitedView(view)
-                this.delCachedView(view)
-                resolve({
-                    visitedViews: [...this.visitedViews],
-                    cachedViews: [...this.cachedViews]
-                })
-            })
-        },
-        delOtherViews(view: any) {
-            return new Promise(resolve => {
-                this.delOtherVisitedViews(view)
-                this.delOtherCachedViews(view)
-                resolve({
-                    visitedViews: [...this.visitedViews],
-                    cachedViews: [...this.cachedViews]
-                })
-            })
-        },
-        delLeftViews(view: any) {
-            return new Promise(resolve => {
-                const currIndex = this.visitedViews.findIndex(v => v.path === view.path)
-                if (currIndex === -1) {
-                    return
-                }
-                this.visitedViews = this.visitedViews.filter((item, index) => {
-                    // affix:true 固定tag，例如“首页”
-                    if (index >= currIndex || (item.meta && item.meta.affix)) {
-                        return true
-                    }
-
-                    const cacheIndex = this.cachedViews.indexOf(item.name as string)
-                    if (cacheIndex > -1) {
-                        this.cachedViews.splice(cacheIndex, 1)
-                    }
-                    return false
-                })
-                resolve({
-                    visitedViews: [...this.visitedViews]
-                })
-            })
-        },
-        delRightViews(view: any) {
-            return new Promise(resolve => {
-                const currIndex = this.visitedViews.findIndex(v => v.path === view.path)
-                if (currIndex === -1) {
-                    return
-                }
-                this.visitedViews = this.visitedViews.filter((item, index) => {
-                    // affix:true 固定tag，例如“首页”
-                    if (index <= currIndex || (item.meta && item.meta.affix)) {
-                        return true
-                    }
-
-                    const cacheIndex = this.cachedViews.indexOf(item.name as string)
-                    if (cacheIndex > -1) {
-                        this.cachedViews.splice(cacheIndex, 1)
-                    }
-                    return false
-                })
-                resolve({
-                    visitedViews: [...this.visitedViews]
-                })
-            })
-        },
-        delAllViews(view: any) {
-            return new Promise(resolve => {
-                const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
-                this.visitedViews = affixTags
-                this.cachedViews = []
-                resolve({
-                    visitedViews: [...this.visitedViews],
-                    cachedViews: [...this.cachedViews]
-                })
-            })
-        },
-        delAllVisitedViews() {
-            return new Promise(resolve => {
-                const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
-                this.visitedViews = affixTags
-                resolve([...this.visitedViews])
-            })
-        },
-        delAllCachedViews() {
-            return new Promise(resolve => {
-                this.cachedViews = []
-                resolve([...this.cachedViews])
-            })
-        },
+import { RouteLocationNormalized } from "vue-router";
+
+export interface TagView extends Partial<RouteLocationNormalized> {
+  title?: string;
+}
+
+// setup
+export const useTagsViewStore = defineStore("tagsView", () => {
+  // state
+  const visitedViews = ref<TagView[]>([]);
+  const cachedViews = ref<string[]>([]);
+
+  // actions
+  function addVisitedView(view: TagView) {
+    if (visitedViews.value.some((v) => v.path === view.path)) return;
+    if (view.meta && view.meta.affix) {
+      visitedViews.value.unshift(
+        Object.assign({}, view, {
+          title: view.meta?.title || "no-name",
+        })
+      );
+    } else {
+      visitedViews.value.push(
+        Object.assign({}, view, {
+          title: view.meta?.title || "no-name",
+        })
+      );
+    }
+  }
+
+  function addCachedView(view: TagView) {
+    const viewName = view.name as string;
+    if (cachedViews.value.includes(viewName)) return;
+    if (view.meta?.keepAlive) {
+      cachedViews.value.push(viewName);
+    }
+  }
+
+  function delVisitedView(view: TagView) {
+    return new Promise((resolve) => {
+      for (const [i, v] of visitedViews.value.entries()) {
+        if (v.path === view.path) {
+          visitedViews.value.splice(i, 1);
+          break;
+        }
+      }
+      resolve([...visitedViews.value]);
+    });
+  }
+
+  function delCachedView(view: TagView) {
+    const viewName = view.name as string;
+    return new Promise((resolve) => {
+      const index = cachedViews.value.indexOf(viewName);
+      index > -1 && cachedViews.value.splice(index, 1);
+      resolve([...cachedViews.value]);
+    });
+  }
+
+  function delOtherVisitedViews(view: TagView) {
+    return new Promise((resolve) => {
+      visitedViews.value = visitedViews.value.filter((v) => {
+        return v.meta?.affix || v.path === view.path;
+      });
+      resolve([...visitedViews.value]);
+    });
+  }
+
+  function delOtherCachedViews(view: TagView) {
+    const viewName = view.name as string;
+    return new Promise((resolve) => {
+      const index = cachedViews.value.indexOf(viewName);
+      if (index > -1) {
+        cachedViews.value = cachedViews.value.slice(index, index + 1);
+      } else {
+        // if index = -1, there is no cached tags
+        cachedViews.value = [];
+      }
+      resolve([...cachedViews.value]);
+    });
+  }
+
+  function updateVisitedView(view: TagView) {
+    for (let v of visitedViews.value) {
+      if (v.path === view.path) {
+        v = Object.assign(v, view);
+        break;
+      }
     }
-})
+  }
+
+  function addView(view: TagView) {
+    addVisitedView(view);
+    addCachedView(view);
+  }
+
+  function delView(view: TagView) {
+    return new Promise((resolve) => {
+      delVisitedView(view);
+      delCachedView(view);
+      resolve({
+        visitedViews: [...visitedViews.value],
+        cachedViews: [...cachedViews.value],
+      });
+    });
+  }
+
+  function delOtherViews(view: TagView) {
+    return new Promise((resolve) => {
+      delOtherVisitedViews(view);
+      delOtherCachedViews(view);
+      resolve({
+        visitedViews: [...visitedViews.value],
+        cachedViews: [...cachedViews.value],
+      });
+    });
+  }
+
+  function delLeftViews(view: TagView) {
+    return new Promise((resolve) => {
+      const currIndex = visitedViews.value.findIndex(
+        (v) => v.path === view.path
+      );
+      if (currIndex === -1) {
+        return;
+      }
+      visitedViews.value = visitedViews.value.filter((item, index) => {
+        // affix:true 固定tag，例如“首页”
+        if (index >= currIndex || (item.meta && item.meta.affix)) {
+          return true;
+        }
+
+        const cacheIndex = cachedViews.value.indexOf(item.name as string);
+        if (cacheIndex > -1) {
+          cachedViews.value.splice(cacheIndex, 1);
+        }
+        return false;
+      });
+      resolve({
+        visitedViews: [...visitedViews.value],
+      });
+    });
+  }
+  function delRightViews(view: TagView) {
+    return new Promise((resolve) => {
+      const currIndex = visitedViews.value.findIndex(
+        (v) => v.path === view.path
+      );
+      if (currIndex === -1) {
+        return;
+      }
+      visitedViews.value = visitedViews.value.filter((item, index) => {
+        // affix:true 固定tag，例如“首页”
+        if (index <= currIndex || (item.meta && item.meta.affix)) {
+          return true;
+        }
+
+        const cacheIndex = cachedViews.value.indexOf(item.name as string);
+        if (cacheIndex > -1) {
+          cachedViews.value.splice(cacheIndex, 1);
+        }
+        return false;
+      });
+      resolve({
+        visitedViews: [...visitedViews.value],
+      });
+    });
+  }
+
+  function delAllViews() {
+    return new Promise((resolve) => {
+      const affixTags = visitedViews.value.filter((tag) => tag.meta?.affix);
+      visitedViews.value = affixTags;
+      cachedViews.value = [];
+      resolve({
+        visitedViews: [...visitedViews.value],
+        cachedViews: [...cachedViews.value],
+      });
+    });
+  }
+
+  function delAllVisitedViews() {
+    return new Promise((resolve) => {
+      const affixTags = visitedViews.value.filter((tag) => tag.meta?.affix);
+      visitedViews.value = affixTags;
+      resolve([...visitedViews.value]);
+    });
+  }
+
+  function delAllCachedViews() {
+    return new Promise((resolve) => {
+      cachedViews.value = [];
+      resolve([...cachedViews.value]);
+    });
+  }
 
-export default useTagsViewStore;
+  return {
+    visitedViews,
+    cachedViews,
+    addVisitedView,
+    addCachedView,
+    delVisitedView,
+    delCachedView,
+    delOtherVisitedViews,
+    delOtherCachedViews,
+    updateVisitedView,
+    addView,
+    delView,
+    delOtherViews,
+    delLeftViews,
+    delRightViews,
+    delAllViews,
+    delAllVisitedViews,
+    delAllCachedViews,
+  };
+});
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 4b5f9556..d30fee09 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,105 +1,110 @@
 import { defineStore } from "pinia";
-import { LoginFormData, UserState } from "@/types";
-import { localStorage } from "@/utils/storage";
-import { login, logout } from "@/api/login";
-import { getUserInfo } from "@/api/system/user";
+
+import { loginApi, logoutApi } from "@/api/auth";
+import { getUserInfo } from "@/api/user";
 import { resetRouter } from "@/router";
+import { store } from "@/store";
+
+import { LoginData } from "@/api/auth/types";
+import { UserInfo } from "@/api/user/types";
+
+import { useStorage } from "@vueuse/core";
+
+export const useUserStore = defineStore("user", () => {
+  // state
+  const userId = ref();
+  const token = useStorage("accessToken", "");
+  const nickname = ref("");
+  const avatar = ref("");
+  const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
+  const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
+
+  /**
+   * 登录调用
+   *
+   * @param {LoginData}
+   * @returns
+   */
+  function login(loginData: LoginData) {
+    return new Promise<void>((resolve, reject) => {
+      loginApi(loginData)
+        .then((response) => {
+          const { tokenType, accessToken } = response.data;
+          token.value = tokenType + " " + accessToken; // Bearer eyJhbGciOiJIUzI1NiJ9.xxx.xxx
+          resolve();
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
 
-const useUserStore = defineStore({
-    id: "user",
-    state: (): UserState => ({
-        token: localStorage.get('token') || '',
-        nickname: '',
-        avatar: '',
-        roles: [],
-        perms: []
-    }),
-    actions: {
-        async RESET_STATE() {
-            this.$reset()
-        },
-        /**
-         * 用户登录请求
-         * @param userInfo 登录用户信息
-         *  username: 用户名
-         *  password: 密码
-         *  code: 验证码
-         *  uuid: 匹配正确验证码的 key
-         */
-        login(userInfo: LoginFormData) {
-            const { username, password, code, uuid } = userInfo
-            return new Promise((resolve, reject) => {
-                login(
-                    {
-                        username: username.trim(),
-                        password: password,
-                        grant_type: 'captcha',
-                        code: code,
-                        uuid: uuid
-                    }
-                ).then(response => {
-                    const { access_token, token_type } = response.data
-                    const accessToken = token_type + " " + access_token
-                    localStorage.set("token", accessToken)
-                    this.token = accessToken
-                    resolve(access_token)
-                }).catch(error => {
-                    reject(error)
-                })
-            })
-        },
-        /**
-         *  获取用户信息（昵称、头像、角色集合、权限集合）
-         */
-        getUserInfo() {
-            return new Promise(((resolve, reject) => {
-                getUserInfo().then(({data}) => {
-                    if (!data) {
-                        return reject('Verification failed, please Login again.')
-                    }
-                    const { nickname, avatar, roles, perms } = data
-                    if (!roles || roles.length <= 0) {
-                        reject('getUserInfo: roles must be a non-null array!')
-                    }
-                    this.nickname = nickname
-                    this.avatar = avatar
-                    this.roles = roles
-                    this.perms = perms
-                    resolve(data)
-                }).catch(error => {
-                    reject(error)
-                })
-            })
-            )
-        },
+  // 获取信息(用户昵称、头像、角色集合、权限集合)
+  function getInfo() {
+    return new Promise<UserInfo>((resolve, reject) => {
+      getUserInfo()
+        .then(({ data }) => {
+          if (!data) {
+            return reject("Verification failed, please Login again.");
+          }
+          if (!data.roles || data.roles.length <= 0) {
+            reject("getUserInfo: roles must be a non-null array!");
+          }
+          userId.value = data.userId;
+          nickname.value = data.nickname;
+          avatar.value = data.avatar;
+          roles.value = data.roles;
+          perms.value = data.perms;
+          resolve(data);
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
 
-        /**
-         *  注销
-         */
-        logout() {
-            return new Promise(((resolve, reject) => {
-                logout().then(() => {
-                    localStorage.remove('token')
-                    this.RESET_STATE()
-                    resetRouter()
-                    resolve(null)
-                }).catch(error => {
-                    reject(error)
-                })
-            }))
-        },
+  // 注销
+  function logout() {
+    return new Promise<void>((resolve, reject) => {
+      logoutApi()
+        .then(() => {
+          resetRouter();
+          resetToken();
+          location.reload(); // 清空路由
+          resolve();
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
 
-        /**
-         * 清除 Token
-         */
-        resetToken() {
-            return new Promise(resolve => {
-                localStorage.remove('token')
-                this.RESET_STATE()
-                resolve(null)
-            })
-        }
-    }
-})
+  // 重置
+  function resetToken() {
+    token.value = "";
+    nickname.value = "";
+    avatar.value = "";
+    roles.value = [];
+    perms.value = [];
+  }
+  return {
+    token,
+    nickname,
+    avatar,
+    roles,
+    perms,
+    login,
+    getInfo,
+    logout,
+    resetToken,
+    /**
+     * 当前登录用户ID
+     */
+    userId,
+  };
+});
 
-export default useUserStore;
\ No newline at end of file
+// 非setup
+export function useUserStoreHook() {
+  return useUserStore(store);
+}
diff --git a/src/styles/dark.scss b/src/styles/dark.scss
new file mode 100644
index 00000000..ae8dc9c0
--- /dev/null
+++ b/src/styles/dark.scss
@@ -0,0 +1,52 @@
+html.dark {
+  --menuBg: var(--el-bg-color-overlay);
+  --menuText: #fff;
+  --menuActiveText: var(--el-menu-active-color);
+  --menuHover: rgb(0 0 0 / 20%);
+  --subMenuBg: var(--el-menu-bg-color);
+  --subMenuActiveText: var(--el-menu-active-color);
+  --subMenuHover: rgb(0 0 0 / 20%);
+
+  // wang-editor toolbar
+  --w-e-toolbar-bg-color: var(--el-bg-color-overlay);
+  --w-e-toolbar-color: var(--el-text-color-regulary);
+  --w-e-toolbar-active-bg-color: var(--el-bg-color-page);
+  --w-e-toolbar-active-color: var(--el-color-info-dark-2);
+  --w-e-toolbar-disabled-color: var(--el-disabled-text-color);
+  --w-e-toolbar-border-color: var(--el-color-info-light-8);
+
+  // wang-editor textarea
+  --w-e-textarea-bg-color: var(--el-bg-color-overlay);
+  --w-e-textarea-color: var(--el-text-color-regulary);
+  --w-e-textarea-slight-border-color: var(--el-color-primary);
+  --w-e-textarea-slight-bg-color: rgba(var(--el-color-primary-rgb), .1);
+  --w-e-textarea-selected-border-color: var(--el-color-primary);
+  --w-e-textarea-border-color: var(--el-color-info-light-5);
+
+  // // wang-editor modal
+  --w-e-modal-button-bg-color: var(--el-button-bg-color);
+  --w-e-modal-button-border-color: var(--el-color-info-light-3);
+
+  .navbar {
+    background-color: var(--el-bg-color);
+
+    .setting-container .setting-item:hover {
+      background: var(--el-fill-color-light);
+    }
+  }
+
+  .right-panel-btn {
+    background-color: var(--el-color-primary-dark);
+  }
+
+  .svg-icon,
+  svg {
+    fill: var(--el-text-color-regular);
+  }
+
+  .sidebar-container {
+    .el-menu-item.is-active .svg-icon {
+      fill: var(--el-color-primary);
+    }
+  }
+}
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
deleted file mode 100644
index a6ca2a9b..00000000
--- a/src/styles/element-plus.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-:root {
-  // 这里可以设置你自定义的颜色变量
-  // 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
-  --el-color-primary-dark: #0d84ff;
-  // element plus 2.1.0 禁用文本色值和正常文本色值无法区分问题
-  --el-text-color-disabled: #ccc;
-}
-
-/* 核心组件的变量，下面这些样式是必须要写的 */
-
-.el-link.el-link--primary:hover {
-  color: var(--el-color-primary-light-2) !important;
-}
-
-.el-tag {
-  --el-tag-bg-color: var(--el-color-primary-light-9);
-  --el-tag-border-color: var(--el-color-primary-light-8);
-  --el-tag-text-color: var(--el-color-primary);
-  --el-tag-hover-color: var(--el-color-primary);
-}
-
-.el-button--primary {
-  --el-button-text-color: var(--el-color-white) !important;
-  --el-button-bg-color: var(--el-color-primary) !important;
-  --el-button-border-color: var(--el-color-primary) !important;
-  --el-button-hover-bg-color: var(--el-color-primary-light-2) !important;
-  --el-button-hover-border-color: var(--el-color-primary-light-2) !important;
-  --el-button-active-bg-color: var(--el-color-primary-dark) !important;
-  --el-button-active-border-color: var(--el-color-primary-dark) !important;
-}
-
-.el-button--primary.is-plain{
-    --el-button-text-color: var(--el-color-primary)!important;
-    --el-button-bg-color: var(--el-color-primary-light-9)!important;
-    --el-button-border-color: var(--el-color-primary-light-5)!important;
-    --el-button-hover-text-color: var(--el-color-white)!important;
-    --el-button-hover-bg-color: var(--el-color-primary)!important;
-    --el-button-hover-border-color: var(--el-color-primary)!important;
-    --el-button-active-text-color: var(--el-color-white)!important;
-    --el-button-active-border-color: var(--el-color-primary)!important;
-}
-
-// 覆盖 element-plus 的样式
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
-}
-
-.el-upload__input {
-  display: none;
-}
-
-
-// refine element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
-}
-
-// dropdown
-.el-dropdown-menu {
-  a {
-    display: block
-  }
-}
-
-// to fix el-date-picker css style
-.el-range-separator {
-  box-sizing: content-box;
-}
-
-// 选中行背景色值
-.el-table__body tr.current-row td {
-  background-color: #e1f3d8b5 !important;
-}
-
-// card 的header统一高度
-.el-card__header{
-  height: 60px!important;
-}
-
-// 表格表头和表体未对齐
-.el-table__header col[name="gutter"] {
-  display: table-cell !important;
-}
\ No newline at end of file
diff --git a/src/styles/element-variables.module.scss b/src/styles/element-variables.module.scss
deleted file mode 100644
index 2fe9a2b5..00000000
--- a/src/styles/element-variables.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
-* I think element default theme color is too light for long-term use.
-* So I modified the default color and you can modify it to your liking.
-* https://vitejs.cn/guide/features.html#postcss
-**/
-
-/* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
-
-$--button-font-weight: 400;
-
-// $--color-text-regular: #1f2d3d;
-
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
-
-$--table-border: 1px solid #dfe6ec;
-
-$--font-path: "~element-plus/theme-chalk/fonts";
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  theme: $--color-primary;
-}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1416e9dc..cccbd99f 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,67 +1,16 @@
-@import 'src/styles/variables.module';
-@import './mixin.scss';
-@import './transition.scss';
-@import 'src/styles/element-plus';
-@import './sidebar.scss';
+@import "./sidebar";
+@import "./reset";
+@import "./dark";
 
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-}
-
-label {
-  font-weight: 700;
-}
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-
-#app {
-  height: 100%;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-a:focus,
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-
-div:focus {
-  outline: none;
-}
-
-.clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
+.app-container {
+  padding: 10px;
 }
 
-// main-container global css
-.app-container {
-  padding: 20px;
+.search-container {
+  padding: 18px 0 0 10px;
+  margin-bottom: 10px;
+  background-color: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  box-shadow: var(--el-box-shadow-light);
 }
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
deleted file mode 100644
index 36b74bbd..00000000
--- a/src/styles/mixin.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@mixin clearfix {
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin scrollBar {
-  &::-webkit-scrollbar-track-piece {
-    background: #d3dce6;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #99a9bf;
-    border-radius: 20px;
-  }
-}
-
-@mixin relative {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 00000000..9b19e4c4
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,75 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-color: currentcolor;
+  border-style: solid;
+  border-width: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  line-height: 1.5;
+  tab-size: 4;
+  text-size-adjust: 100%;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  line-height: inherit;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+img,
+svg {
+  display: inline-block;
+}
+
+svg {
+  vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
+}
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a,
+a:focus,
+a:hover {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a:focus,
+a:active,
+div:focus {
+  outline: none;
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index b53e82c0..efaa4e97 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,27 +1,27 @@
 #app {
   .main-container {
+    position: relative;
     min-height: 100%;
-    transition: margin-left .28s;
     margin-left: $sideBarWidth;
-    position: relative;
+    transition: margin-left 0.28s;
   }
 
   .sidebar-container {
-    transition: width 0.28s;
-    width: $sideBarWidth !important;
-    background-color: $menuBg;
-    height: 100%;
     position: fixed;
-    font-size: 0px;
     top: 0;
     bottom: 0;
     left: 0;
     z-index: 1001;
+    width: $sideBarWidth !important;
+    height: 100%;
     overflow: hidden;
+    background-color: $menuBg;
+    transition: width 0.28s;
 
     // reset element-ui css
     .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
     }
 
     .scrollbar-wrapper {
@@ -29,7 +29,7 @@
     }
 
     .el-scrollbar__bar.is-vertical {
-      right: 0px;
+      right: 0;
     }
 
     .el-scrollbar {
@@ -46,12 +46,6 @@
       display: none;
     }
 
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
-
     .svg-icon {
       margin-right: 16px;
     }
@@ -62,24 +56,23 @@
     }
 
     .el-menu {
-      border: none;
-      height: 100%;
       width: 100% !important;
+      height: 100%;
+      border: none;
     }
 
     // menu hover
-    .submenu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
         background-color: $menuHover !important;
       }
     }
 
-    .is-active>.el-sub-menu__title {
+    .is-active > .el-sub-menu__title {
       color: $subMenuActiveText !important;
     }
 
-    & .nest-menu .el-sub-menu>.el-sub-menu__title,
+    & .nest-menu .el-sub-menu > .el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $sideBarWidth !important;
       background-color: $subMenuBg !important;
@@ -93,8 +86,9 @@
   .hideSidebar {
     .sidebar-container {
       width: 54px !important;
+
       .svg-icon {
-        margin-right: 0px;
+        margin-right: 0;
       }
     }
 
@@ -102,27 +96,10 @@
       margin-left: 54px;
     }
 
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
-        padding: 0 !important;
-
-        .svg-icon {
-          margin-left: 20px;
-        }
-
-        .sub-el-icon {
-          margin-left: 19px;
-        }
-      }
-    }
-
     .el-sub-menu {
       overflow: hidden;
 
-      &>.el-sub-menu__title {
+      & > .el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -141,13 +118,13 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        &>.el-sub-menu__title {
-          &>span {
-            height: 0;
+        & > .el-sub-menu__title {
+          & > span {
+            display: inline-block;
             width: 0;
+            height: 0;
             overflow: hidden;
             visibility: hidden;
-            display: inline-block;
           }
         }
       }
@@ -161,12 +138,12 @@
   // mobile responsive
   .mobile {
     .main-container {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .sidebar-container {
-      transition: transform .28s;
       width: $sideBarWidth !important;
+      transition: transform 0.28s;
     }
 
     &.hideSidebar {
@@ -179,7 +156,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -189,17 +165,18 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
+
     .sub-el-icon {
       margin-right: 12px;
       margin-left: -2px;
     }
   }
 
-  .nest-menu .el-sub-menu>.el-sub-menu__title,
+  .nest-menu .el-sub-menu > .el-sub-menu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -208,7 +185,7 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
deleted file mode 100644
index 4cb27cc8..00000000
--- a/src/styles/transition.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// global transition css
-
-/* fade */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.28s;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-/* fade-transform */
-.fade-transform-leave-active,
-.fade-transform-enter-active {
-  transition: all .5s;
-}
-
-.fade-transform-enter {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.fade-transform-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-/* breadcrumb transition */
-.breadcrumb-enter-active,
-.breadcrumb-leave-active {
-  transition: all .5s;
-}
-
-.breadcrumb-enter,
-.breadcrumb-leave-active {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-.breadcrumb-move {
-  transition: all .5s;
-}
-
-.breadcrumb-leave-active {
-  position: absolute;
-}
diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss
index be557726..cbc114ae 100644
--- a/src/styles/variables.module.scss
+++ b/src/styles/variables.module.scss
@@ -1,25 +1,6 @@
-// sidebar
-$menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
-
-$menuBg:#304156;
-$menuHover:#263445;
-
-$subMenuBg:#1f2d3d;
-$subMenuHover:#001528;
-
-$sideBarWidth: 210px;
-
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+// 导出 variables.module.scss 变量提供给TypeScript使用
 :export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-}
+    menuBg: $menuBg;
+    menuText: $menuText;
+    menuActiveText: $menuActiveText
+}
\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 00000000..7cfc2194
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,27 @@
+// 全局SCSS变量
+
+:root {
+  --menuBg: #304156;
+  --menuText: #bfcbd9;
+  --menuActiveText: #409eff;
+  --menuHover: #263445;
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #f4f4f5;
+  --subMenuHover: #001528;
+
+  // wang-editor textarea
+  --w-e-textarea-slight-border-color: var(--el-color-primary);
+  --w-e-textarea-slight-bg-color: rgba(var(--el-color-primary-rgb), .1);
+  --w-e-textarea-selected-border-color: var(--el-color-primary);
+}
+
+$menuBg: var(--menuBg);
+$menuText: var(--menuText);
+$menuActiveText: var(--menuActiveText);
+$menuHover: var(--menuHover);
+
+$subMenuBg: var(--subMenuBg);
+$subMenuActiveText: var(--subMenuActiveText);
+$subMenuHover: var(--subMenuHover);
+
+$sideBarWidth: 210px;
diff --git a/src/types/api/base.d.ts b/src/types/api/base.d.ts
deleted file mode 100644
index d934383c..00000000
--- a/src/types/api/base.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-
-export interface PageQueryParam {
-    pageNum: number,
-    pageSize: number
-}
-
-export interface PageResult<T> {
-    list: T,
-    total: number
-}
-
diff --git a/src/types/api/oms/order.d.ts b/src/types/api/oms/order.d.ts
deleted file mode 100644
index 98432373..00000000
--- a/src/types/api/oms/order.d.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 订单查询参数类型声明
- */
-export interface OrderQueryParam extends PageQueryParam {
-	orderSn: string | undefined;
-	status: number | undefined;
-}
-
-/**
- * 订单分页列表项声明
- */
-export interface Order {
-	id: string;
-	orderSn: string;
-	totalAmount: string;
-	payAmount: string;
-	payType: number;
-	status: number;
-	totalQuantity: number;
-	gmtCreate: string;
-	memberId: string;
-	sourceType: number;
-	orderItems: OrderItem[];
-}
-export interface OrderItem {
-	id: string;
-	orderId: string;
-	skuId: string;
-	skuName: string;
-	picUrl: string;
-	price: string;
-	count: number;
-	totalAmount: number;
-}
-
-/**
- * 订单分页项类型声明
- */
-export interface OrderPageResult extends PageResult<Order[]> {
-
-}
-
-/**
- * 订单表单类型声明
- */
-export interface OrderDetail {
-	id: number | undefined;
-	title: string;
-	picUrl: string;
-	beginTime: string;
-	endTime: string;
-	status: number;
-	sort: number;
-	url: string;
-	remark: string;
-}
\ No newline at end of file
diff --git a/src/types/api/pms/brand.d.ts b/src/types/api/pms/brand.d.ts
deleted file mode 100644
index d9730cad..00000000
--- a/src/types/api/pms/brand.d.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 品牌查询参数类型声明
- */
-export interface BrandQueryParam extends PageQueryParam {
-    name: String | undefined
-}
-
-
-/**
- * 品牌分页列表项声明
- */
-export interface BrandItem {
-    id: string;
-    name: string;
-    logoUrl: string;
-    sort: number;
-}
-
-/**
- * 品牌分页项类型声明
- */
-export interface BrandPageResult extends PageResult<BrandItem[]> {
-
-}
-
-/**
- * 品牌表单类型声明
- */
-export interface BrandFormData {
-    id: number | undefined,
-    name: string,
-    logoUrl: string,
-    sort: number
-}
\ No newline at end of file
diff --git a/src/types/api/pms/goods.d.ts b/src/types/api/pms/goods.d.ts
deleted file mode 100644
index 39ef7501..00000000
--- a/src/types/api/pms/goods.d.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-
-/**
- * 商品查询参数类型声明
- */
-export interface GoodsQueryParam extends PageQueryParam {
-    name: stirng | undefined,
-    categoryId: number | undefined
-}
-
-/**
- * 商品列表项类型声明
- */
-export interface GoodsItem {
-	id: string;
-	name: string;
-	categoryId?: any;
-	brandId?: any;
-	originPrice: string;
-	price: string;
-	sales: number;
-	picUrl?: any;
-	album?: any;
-	unit?: any;
-	description: string;
-	detail: string;
-	status?: any;
-	categoryName: string;
-	brandName: string;
-	skuList: SkuItem[];
-}
-
-/**
- * 商品规格项类型声明
- */
-export interface SkuItem {
-	id: string;
-	skuSn?: any;
-	name: string;
-	spuId?: any;
-	specIds: string;
-	price: string;
-	stockNum: number;
-	lockedStockNum?: any;
-	picUrl?: any;
-}
-
-/**
- * 商品分页项类型声明
- */
-export interface GoodsPageResult extends PageResult<GoodsItem[]> {
-
-}
-
-/**
- * 商品表单数据类型声明
- */
-export interface GoodsFormData {
-    id: number|undefined,
-    deptId: number,
-    username: string,
-    nickname: string,
-    password: string,
-    mobile: string,
-    email: string,
-    gender: number,
-    status: number,
-    remark: string,
-    roleIds: number[]
-}
-
-
diff --git a/src/types/api/sms/advert.d.ts b/src/types/api/sms/advert.d.ts
deleted file mode 100644
index 1b23eb45..00000000
--- a/src/types/api/sms/advert.d.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 广告查询参数类型声明
- */
-export interface AdvertQueryParam extends PageQueryParam {
-    title: String | undefined
-}
-
-/**
- * 广告分页列表项声明
- */
-export interface AdvertItem {
-    id: string;
-    name: string;
-    logoUrl: string;
-    sort: number;
-}
-
-/**
- * 广告分页项类型声明
- */
-export interface AdvertPageResult extends PageResult<AdvertItem[]> {
-
-}
-
-/**
- * 广告表单类型声明
- */
-export interface AdvertFormData {
-    id: number | undefined;
-    title: string;
-    picUrl: string;
-    beginTime: string;
-    endTime: string;
-    status: number;
-    sort: number;
-    url: string;
-    remark: string;
-}
\ No newline at end of file
diff --git a/src/types/api/system/client.d.ts b/src/types/api/system/client.d.ts
deleted file mode 100644
index efd4ca0c..00000000
--- a/src/types/api/system/client.d.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 客户端查询参数类型声明
- */
-export interface ClientQueryParam extends PageQueryParam {
-    /**
-     * 客户端名称
-     */
-    clientId: string | undefined
-}
-
-
-/**
- * 客户端分页列表项声明
- */
-export interface ClientItem {
-    clientId: string;
-	clientSecret: string;
-	resourceIds: string;
-	scope: string;
-	authorizedGrantTypes: string;
-	webServerRedirectUri?: any;
-	authorities?: any;
-	accessTokenValidity: number;
-	refreshTokenValidity: number;
-	additionalInformation?: any;
-	autoapprove: string;
-}
-
-/**
- * 客户端分页项类型声明
- */
-export interface ClientPageResult extends PageResult<ClientItem[]> {
-
-}
-
-/**
- * 客户端表单类型声明
- */
-export interface ClientFormData {
-    authorizedGrantTypes: string;
-    clientId: string;
-    clientSecret: string;
-    accessTokenValidity: string;
-    refreshTokenValidity: string;
-    webServerRedirectUri: string;
-    authorities: string;
-    additionalInformation: string;
-    autoapprove: string;
-    scope:string;
-}
\ No newline at end of file
diff --git a/src/types/api/system/dept.d.ts b/src/types/api/system/dept.d.ts
deleted file mode 100644
index ae0bf3e3..00000000
--- a/src/types/api/system/dept.d.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-
-/**
- * 部门查询参数类型声明
- */
-export interface DeptQueryParam {
-    name: string | undefined,
-    status: number | undefined
-}
-
-/**
- * 部门列表项声明
- */
-
-export interface DeptItem {
-    id: number;
-    name: string;
-    parentId: number;
-    treePath: string;
-    sort: number;
-    status: number;
-    leader?: string;
-    mobile?: string;
-    email?: string;
-    children: DeptItem[];
-}
-
-/**
- * 部门表单类型声明
- */
-export interface DeptFormData {
-    id: number|undefined,
-    parentId: number,
-    name: string,
-    sort: number,
-    status: number
-}
\ No newline at end of file
diff --git a/src/types/api/system/dict.d.ts b/src/types/api/system/dict.d.ts
deleted file mode 100644
index e5b48e79..00000000
--- a/src/types/api/system/dict.d.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 字典查询参数类型声明
- */
-export interface DictQueryParam extends PageQueryParam {
-    /**
-     * 字典名称
-     */
-    name: string | undefined
-}
-
-
-/**
- * 字典分页列表项声明
- */
-export interface Dict {
-    id: number;
-    code: string;
-    name: string;
-    status: number;
-    remark: string;
-}
-
-/**
- * 字典分页项类型声明
- */
-export interface DictPageResult extends PageResult<Dict[]> {
-
-}
-
-/**
- * 字典表单类型声明
- */
-export interface DictFormData {
-    id: number | undefined,
-    name: string,
-    code: string,
-    status: number,
-    remark: string
-}
-
-/**
- * 字典项查询参数类型声明
- */
-export interface DictItemQueryParam extends PageQueryParam {
-    /**
-     * 字典项名称
-     */
-    name: string | undefined;
-    /**
-     * 字典编码
-     */
-    dictCode: string | undefined;
-}
-
-/**
- * 字典分页列表项声明
- */
-export interface DictItem {
-    id: number;
-    name: string;
-    value: string;
-    dictCode: string;
-    sort: number;
-    status: number;
-    defaulted: number;
-    remark?: string;
-}
-
-/**
- * 字典分页项类型声明
- */
-export interface DictItemPageResult extends PageResult<DictItem[]> {
-
-}
-
-/**
- * 字典表单类型声明
- */
-export interface DictItemFormData {
-    id: number | undefined;
-    dictCode:string,
-    name: string;
-    code: string;
-    value: string;
-    status: number;
-    sort: number;
-    remark: string;
-}
\ No newline at end of file
diff --git a/src/types/api/system/login.d.ts b/src/types/api/system/login.d.ts
deleted file mode 100644
index bbc3a33c..00000000
--- a/src/types/api/system/login.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 登录表单类型声明
- */
-export interface LoginFormData {
-    username: string,
-    password: string,
-    grant_type: string,
-    code: string,
-    uuid: string,
-}
-
-/**
- * 登录响应类型声明
- */
-export interface LoginResponseData {
-    access_token: string,
-    token_type: string
-}
-
-/**
- * 验证码类型声明
- */
-export interface Captcha {
-    img: string,
-    uuid: string
-}
-
diff --git a/src/types/api/system/menu.ts b/src/types/api/system/menu.ts
deleted file mode 100644
index ed97a249..00000000
--- a/src/types/api/system/menu.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-
-/**
- * 菜单查询参数类型声明
- */
-export interface MenuQueryParam {
-    name: String | undefined
-}
-
-/**
- * 菜单分页列表项声明
- */
-
-export interface MenuItem {
-    id: number;
-    parentId: number;
-    gmtCreate: string;
-    gmtModified: string;
-    name: string;
-    icon: string;
-    component: string;
-    sort: number;
-    visible: number;
-    children: MenuItem[];
-}
-
-/**
- * 菜单表单类型声明
- */
-export interface MenuFormData {
-    /**
-     * 菜单ID
-     */
-    id: number | undefined,
-    /**
-     * 父菜单ID
-     */
-    parentId: number,
-    /**
-     * 菜单名称
-     */
-    name: string,
-    /**
-     * 菜单是否可见(1:是;0:否;)
-     */
-    visible: number,
-    icon: string,
-    /**
-     * 排序
-     */
-    sort: number,
-    /**
-     * 组件路径
-     */
-    component: string,
-    /**
-     * 路由路径
-     */
-    path: string,
-    /**
-     * 跳转路由路径
-     */
-    redirect: string,
-}
\ No newline at end of file
diff --git a/src/types/api/system/perm.d.ts b/src/types/api/system/perm.d.ts
deleted file mode 100644
index 36d5da6f..00000000
--- a/src/types/api/system/perm.d.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 权限查询参数类型声明
- */
-export interface PermQueryParam extends PageQueryParam {
-    menuId: any;
-    name: string | undefined;
-}
-
-/**
- * 权限分页列表项声明
- */
-export interface PermItem {
-    id: number;
-    name: string;
-    menuId: string;
-    urlPerm: string;
-    btnPerm: string;
-    roles?: string[];
-}
-
-/**
- * 权限分页项类型声明
- */
-export interface PermPageResult extends PageResult<PermItem[]> {
-
-}
-
-/**
- * 权限表单类型声明
- */
-export interface PermFormData {
-    id: number|undefined,
-    name: string,
-    urlPerm: string,
-    btnPerm: string,
-    menuId: string
-}
\ No newline at end of file
diff --git a/src/types/api/system/role.d.ts b/src/types/api/system/role.d.ts
deleted file mode 100644
index 8585628e..00000000
--- a/src/types/api/system/role.d.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 角色查询参数类型声明
- */
-export interface RoleQueryParam extends PageQueryParam {
-    name: String | undefined
-}
-
-/**
- * 角色分页列表项声明
- */
-export interface RoleItem {
-    id: string;
-	name: string;
-	code: string;
-	sort: number;
-	status: number;
-	deleted: number;
-	menuIds?: any;
-	permissionIds?: any;
-}
-
-
-/**
- * 角色分页项类型声明
- */
-export interface RolePageResult extends PageResult<RoleItem[]> {
-
-}
-
-/**
- * 角色表单类型声明
- */
-export interface RoleFormData {
-    id: number|undefined,
-    name: string,
-    code: string,
-    sort: number,
-    status: number
-}
\ No newline at end of file
diff --git a/src/types/api/system/user.d.ts b/src/types/api/system/user.d.ts
deleted file mode 100644
index 337eef02..00000000
--- a/src/types/api/system/user.d.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 登录用户类型声明
- */
-export interface UserInfo {
-    nickname: string,
-    avatar: string,
-    roles: string[],
-    perms: string[]
-}
-
-/**
- * 用户查询参数类型声明
- */
-export interface UserQueryParam extends PageQueryParam {
-    keywords: String | undefined,
-    status: number | undefined,
-    deptId: number | undefined
-}
-
-/**
- * 用户分页列表项声明
- */
-export interface UserItem {
-    id: string;
-    username: string;
-    nickname: string;
-    mobile: string;
-    gender: number;
-    avatar: string;
-    email: string;
-    status: number;
-    deptName: string;
-    roleNames: string;
-    gmtCreate: string;
-}
-
-/**
- * 用户分页项类型声明
- */
-export interface UserPageResult extends PageResult<UserItem[]> {
-
-}
-
-/**
- * 用户表单类型声明
- */
-export interface UserFormData {
-    id: number | undefined,
-    deptId: number,
-    username: string,
-    nickname: string,
-    password: string,
-    mobile: string,
-    email: string,
-    gender: number,
-    status: number,
-    remark: string,
-    roleIds: number[]
-}
-
-
-/**
- * 用户导入表单类型声明 
- */
- export interface UserImportFormData {
-    deptId: number,
-    roleIds: number[]
-}
\ No newline at end of file
diff --git a/src/types/api/ums/member.d.ts b/src/types/api/ums/member.d.ts
deleted file mode 100644
index dc1ca6ce..00000000
--- a/src/types/api/ums/member.d.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { PageQueryParam, PageResult } from "../base"
-
-/**
- * 会员查询参数类型声明
- */
-export interface MemberQueryParam extends PageQueryParam {
-    nickName: String | undefined
-}
-
-/**
- * 会员分页列表项声明
- */
-export interface MemberItem {
-	id: string;
-	gender: number;
-	nickName: string;
-	mobile: string;
-	birthday?: any;
-	avatarUrl: string;
-	openid: string;
-	sessionKey?: any;
-	city: string;
-	country: string;
-	language: string;
-	province: string;
-	status: number;
-	balance: string;
-	deleted: number;
-	point: number;
-	addressList: AddressItem[];
-}
-
-export interface AddressItem {
-	id: string;
-	memberId: string;
-	consigneeName: string;
-	consigneeMobile: string;
-	province: string;
-	city: string;
-	area: string;
-	detailAddress: string;
-	zipCode?: any;
-	defaulted: number;
-}
-
-/**
- * 会员分页项类型声明
- */
-export interface MemberPageResult extends PageResult<MemberItem[]> {
-
-}
-
-/**
- * 会员表单类型声明
- */
-export interface MemberFormData {
-    id: number | undefined;
-    title: string;
-    picUrl: string;
-    beginTime: string;
-    endTime: string;
-    status: number;
-    sort: number;
-    url: string;
-    remark: string;
-}
\ No newline at end of file
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
new file mode 100644
index 00000000..fd4e5fd8
--- /dev/null
+++ b/src/types/auto-imports.d.ts
@@ -0,0 +1,1588 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import("vue")["EffectScope"];
+  const ElForm: typeof import("element-plus/es")["ElForm"];
+  const ElMessage: typeof import("element-plus/es")["ElMessage"];
+  const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"];
+  const ElTree: typeof import("element-plus/es")["ElTree"];
+  const asyncComputed: typeof import("@vueuse/core")["asyncComputed"];
+  const autoResetRef: typeof import("@vueuse/core")["autoResetRef"];
+  const computed: typeof import("vue")["computed"];
+  const computedAsync: typeof import("@vueuse/core")["computedAsync"];
+  const computedEager: typeof import("@vueuse/core")["computedEager"];
+  const computedInject: typeof import("@vueuse/core")["computedInject"];
+  const computedWithControl: typeof import("@vueuse/core")["computedWithControl"];
+  const controlledComputed: typeof import("@vueuse/core")["controlledComputed"];
+  const controlledRef: typeof import("@vueuse/core")["controlledRef"];
+  const createApp: typeof import("vue")["createApp"];
+  const createEventHook: typeof import("@vueuse/core")["createEventHook"];
+  const createGlobalState: typeof import("@vueuse/core")["createGlobalState"];
+  const createInjectionState: typeof import("@vueuse/core")["createInjectionState"];
+  const createReactiveFn: typeof import("@vueuse/core")["createReactiveFn"];
+  const createReusableTemplate: typeof import("@vueuse/core")["createReusableTemplate"];
+  const createSharedComposable: typeof import("@vueuse/core")["createSharedComposable"];
+  const createTemplatePromise: typeof import("@vueuse/core")["createTemplatePromise"];
+  const createUnrefFn: typeof import("@vueuse/core")["createUnrefFn"];
+  const customRef: typeof import("vue")["customRef"];
+  const debouncedRef: typeof import("@vueuse/core")["debouncedRef"];
+  const debouncedWatch: typeof import("@vueuse/core")["debouncedWatch"];
+  const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"];
+  const defineComponent: typeof import("vue")["defineComponent"];
+  const eagerComputed: typeof import("@vueuse/core")["eagerComputed"];
+  const effectScope: typeof import("vue")["effectScope"];
+  const extendRef: typeof import("@vueuse/core")["extendRef"];
+  const getCurrentInstance: typeof import("vue")["getCurrentInstance"];
+  const getCurrentScope: typeof import("vue")["getCurrentScope"];
+  const h: typeof import("vue")["h"];
+  const ignorableWatch: typeof import("@vueuse/core")["ignorableWatch"];
+  const inject: typeof import("vue")["inject"];
+  const isDefined: typeof import("@vueuse/core")["isDefined"];
+  const isProxy: typeof import("vue")["isProxy"];
+  const isReactive: typeof import("vue")["isReactive"];
+  const isReadonly: typeof import("vue")["isReadonly"];
+  const isRef: typeof import("vue")["isRef"];
+  const makeDestructurable: typeof import("@vueuse/core")["makeDestructurable"];
+  const markRaw: typeof import("vue")["markRaw"];
+  const nextTick: typeof import("vue")["nextTick"];
+  const onActivated: typeof import("vue")["onActivated"];
+  const onBeforeMount: typeof import("vue")["onBeforeMount"];
+  const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"];
+  const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"];
+  const onClickOutside: typeof import("@vueuse/core")["onClickOutside"];
+  const onDeactivated: typeof import("vue")["onDeactivated"];
+  const onErrorCaptured: typeof import("vue")["onErrorCaptured"];
+  const onKeyStroke: typeof import("@vueuse/core")["onKeyStroke"];
+  const onLongPress: typeof import("@vueuse/core")["onLongPress"];
+  const onMounted: typeof import("vue")["onMounted"];
+  const onRenderTracked: typeof import("vue")["onRenderTracked"];
+  const onRenderTriggered: typeof import("vue")["onRenderTriggered"];
+  const onScopeDispose: typeof import("vue")["onScopeDispose"];
+  const onServerPrefetch: typeof import("vue")["onServerPrefetch"];
+  const onStartTyping: typeof import("@vueuse/core")["onStartTyping"];
+  const onUnmounted: typeof import("vue")["onUnmounted"];
+  const onUpdated: typeof import("vue")["onUpdated"];
+  const pausableWatch: typeof import("@vueuse/core")["pausableWatch"];
+  const provide: typeof import("vue")["provide"];
+  const reactify: typeof import("@vueuse/core")["reactify"];
+  const reactifyObject: typeof import("@vueuse/core")["reactifyObject"];
+  const reactive: typeof import("vue")["reactive"];
+  const reactiveComputed: typeof import("@vueuse/core")["reactiveComputed"];
+  const reactiveOmit: typeof import("@vueuse/core")["reactiveOmit"];
+  const reactivePick: typeof import("@vueuse/core")["reactivePick"];
+  const readonly: typeof import("vue")["readonly"];
+  const ref: typeof import("vue")["ref"];
+  const refAutoReset: typeof import("@vueuse/core")["refAutoReset"];
+  const refDebounced: typeof import("@vueuse/core")["refDebounced"];
+  const refDefault: typeof import("@vueuse/core")["refDefault"];
+  const refThrottled: typeof import("@vueuse/core")["refThrottled"];
+  const refWithControl: typeof import("@vueuse/core")["refWithControl"];
+  const resolveComponent: typeof import("vue")["resolveComponent"];
+  const resolveRef: typeof import("@vueuse/core")["resolveRef"];
+  const resolveUnref: typeof import("@vueuse/core")["resolveUnref"];
+  const shallowReactive: typeof import("vue")["shallowReactive"];
+  const shallowReadonly: typeof import("vue")["shallowReadonly"];
+  const shallowRef: typeof import("vue")["shallowRef"];
+  const syncRef: typeof import("@vueuse/core")["syncRef"];
+  const syncRefs: typeof import("@vueuse/core")["syncRefs"];
+  const templateRef: typeof import("@vueuse/core")["templateRef"];
+  const throttledRef: typeof import("@vueuse/core")["throttledRef"];
+  const throttledWatch: typeof import("@vueuse/core")["throttledWatch"];
+  const toRaw: typeof import("vue")["toRaw"];
+  const toReactive: typeof import("@vueuse/core")["toReactive"];
+  const toRef: typeof import("vue")["toRef"];
+  const toRefs: typeof import("vue")["toRefs"];
+  const toValue: typeof import("vue")["toValue"];
+  const triggerRef: typeof import("vue")["triggerRef"];
+  const tryOnBeforeMount: typeof import("@vueuse/core")["tryOnBeforeMount"];
+  const tryOnBeforeUnmount: typeof import("@vueuse/core")["tryOnBeforeUnmount"];
+  const tryOnMounted: typeof import("@vueuse/core")["tryOnMounted"];
+  const tryOnScopeDispose: typeof import("@vueuse/core")["tryOnScopeDispose"];
+  const tryOnUnmounted: typeof import("@vueuse/core")["tryOnUnmounted"];
+  const unref: typeof import("vue")["unref"];
+  const unrefElement: typeof import("@vueuse/core")["unrefElement"];
+  const until: typeof import("@vueuse/core")["until"];
+  const useActiveElement: typeof import("@vueuse/core")["useActiveElement"];
+  const useAnimate: typeof import("@vueuse/core")["useAnimate"];
+  const useArrayDifference: typeof import("@vueuse/core")["useArrayDifference"];
+  const useArrayEvery: typeof import("@vueuse/core")["useArrayEvery"];
+  const useArrayFilter: typeof import("@vueuse/core")["useArrayFilter"];
+  const useArrayFind: typeof import("@vueuse/core")["useArrayFind"];
+  const useArrayFindIndex: typeof import("@vueuse/core")["useArrayFindIndex"];
+  const useArrayFindLast: typeof import("@vueuse/core")["useArrayFindLast"];
+  const useArrayIncludes: typeof import("@vueuse/core")["useArrayIncludes"];
+  const useArrayJoin: typeof import("@vueuse/core")["useArrayJoin"];
+  const useArrayMap: typeof import("@vueuse/core")["useArrayMap"];
+  const useArrayReduce: typeof import("@vueuse/core")["useArrayReduce"];
+  const useArraySome: typeof import("@vueuse/core")["useArraySome"];
+  const useArrayUnique: typeof import("@vueuse/core")["useArrayUnique"];
+  const useAsyncQueue: typeof import("@vueuse/core")["useAsyncQueue"];
+  const useAsyncState: typeof import("@vueuse/core")["useAsyncState"];
+  const useAttrs: typeof import("vue")["useAttrs"];
+  const useBase64: typeof import("@vueuse/core")["useBase64"];
+  const useBattery: typeof import("@vueuse/core")["useBattery"];
+  const useBluetooth: typeof import("@vueuse/core")["useBluetooth"];
+  const useBreakpoints: typeof import("@vueuse/core")["useBreakpoints"];
+  const useBroadcastChannel: typeof import("@vueuse/core")["useBroadcastChannel"];
+  const useBrowserLocation: typeof import("@vueuse/core")["useBrowserLocation"];
+  const useCached: typeof import("@vueuse/core")["useCached"];
+  const useClipboard: typeof import("@vueuse/core")["useClipboard"];
+  const useCloned: typeof import("@vueuse/core")["useCloned"];
+  const useColorMode: typeof import("@vueuse/core")["useColorMode"];
+  const useConfirmDialog: typeof import("@vueuse/core")["useConfirmDialog"];
+  const useCounter: typeof import("@vueuse/core")["useCounter"];
+  const useCssModule: typeof import("vue")["useCssModule"];
+  const useCssVar: typeof import("@vueuse/core")["useCssVar"];
+  const useCssVars: typeof import("vue")["useCssVars"];
+  const useCurrentElement: typeof import("@vueuse/core")["useCurrentElement"];
+  const useCycleList: typeof import("@vueuse/core")["useCycleList"];
+  const useDark: typeof import("@vueuse/core")["useDark"];
+  const useDateFormat: typeof import("@vueuse/core")["useDateFormat"];
+  const useDebounce: typeof import("@vueuse/core")["useDebounce"];
+  const useDebounceFn: typeof import("@vueuse/core")["useDebounceFn"];
+  const useDebouncedRefHistory: typeof import("@vueuse/core")["useDebouncedRefHistory"];
+  const useDeviceMotion: typeof import("@vueuse/core")["useDeviceMotion"];
+  const useDeviceOrientation: typeof import("@vueuse/core")["useDeviceOrientation"];
+  const useDevicePixelRatio: typeof import("@vueuse/core")["useDevicePixelRatio"];
+  const useDevicesList: typeof import("@vueuse/core")["useDevicesList"];
+  const useDisplayMedia: typeof import("@vueuse/core")["useDisplayMedia"];
+  const useDocumentVisibility: typeof import("@vueuse/core")["useDocumentVisibility"];
+  const useDraggable: typeof import("@vueuse/core")["useDraggable"];
+  const useDropZone: typeof import("@vueuse/core")["useDropZone"];
+  const useElementBounding: typeof import("@vueuse/core")["useElementBounding"];
+  const useElementByPoint: typeof import("@vueuse/core")["useElementByPoint"];
+  const useElementHover: typeof import("@vueuse/core")["useElementHover"];
+  const useElementSize: typeof import("@vueuse/core")["useElementSize"];
+  const useElementVisibility: typeof import("@vueuse/core")["useElementVisibility"];
+  const useEventBus: typeof import("@vueuse/core")["useEventBus"];
+  const useEventListener: typeof import("@vueuse/core")["useEventListener"];
+  const useEventSource: typeof import("@vueuse/core")["useEventSource"];
+  const useEyeDropper: typeof import("@vueuse/core")["useEyeDropper"];
+  const useFavicon: typeof import("@vueuse/core")["useFavicon"];
+  const useFetch: typeof import("@vueuse/core")["useFetch"];
+  const useFileDialog: typeof import("@vueuse/core")["useFileDialog"];
+  const useFileSystemAccess: typeof import("@vueuse/core")["useFileSystemAccess"];
+  const useFocus: typeof import("@vueuse/core")["useFocus"];
+  const useFocusWithin: typeof import("@vueuse/core")["useFocusWithin"];
+  const useFps: typeof import("@vueuse/core")["useFps"];
+  const useFullscreen: typeof import("@vueuse/core")["useFullscreen"];
+  const useGamepad: typeof import("@vueuse/core")["useGamepad"];
+  const useGeolocation: typeof import("@vueuse/core")["useGeolocation"];
+  const useIdle: typeof import("@vueuse/core")["useIdle"];
+  const useImage: typeof import("@vueuse/core")["useImage"];
+  const useInfiniteScroll: typeof import("@vueuse/core")["useInfiniteScroll"];
+  const useIntersectionObserver: typeof import("@vueuse/core")["useIntersectionObserver"];
+  const useInterval: typeof import("@vueuse/core")["useInterval"];
+  const useIntervalFn: typeof import("@vueuse/core")["useIntervalFn"];
+  const useKeyModifier: typeof import("@vueuse/core")["useKeyModifier"];
+  const useLastChanged: typeof import("@vueuse/core")["useLastChanged"];
+  const useLocalStorage: typeof import("@vueuse/core")["useLocalStorage"];
+  const useMagicKeys: typeof import("@vueuse/core")["useMagicKeys"];
+  const useManualRefHistory: typeof import("@vueuse/core")["useManualRefHistory"];
+  const useMediaControls: typeof import("@vueuse/core")["useMediaControls"];
+  const useMediaQuery: typeof import("@vueuse/core")["useMediaQuery"];
+  const useMemoize: typeof import("@vueuse/core")["useMemoize"];
+  const useMemory: typeof import("@vueuse/core")["useMemory"];
+  const useMounted: typeof import("@vueuse/core")["useMounted"];
+  const useMouse: typeof import("@vueuse/core")["useMouse"];
+  const useMouseInElement: typeof import("@vueuse/core")["useMouseInElement"];
+  const useMousePressed: typeof import("@vueuse/core")["useMousePressed"];
+  const useMutationObserver: typeof import("@vueuse/core")["useMutationObserver"];
+  const useNavigatorLanguage: typeof import("@vueuse/core")["useNavigatorLanguage"];
+  const useNetwork: typeof import("@vueuse/core")["useNetwork"];
+  const useNow: typeof import("@vueuse/core")["useNow"];
+  const useObjectUrl: typeof import("@vueuse/core")["useObjectUrl"];
+  const useOffsetPagination: typeof import("@vueuse/core")["useOffsetPagination"];
+  const useOnline: typeof import("@vueuse/core")["useOnline"];
+  const usePageLeave: typeof import("@vueuse/core")["usePageLeave"];
+  const useParallax: typeof import("@vueuse/core")["useParallax"];
+  const useParentElement: typeof import("@vueuse/core")["useParentElement"];
+  const usePerformanceObserver: typeof import("@vueuse/core")["usePerformanceObserver"];
+  const usePermission: typeof import("@vueuse/core")["usePermission"];
+  const usePointer: typeof import("@vueuse/core")["usePointer"];
+  const usePointerLock: typeof import("@vueuse/core")["usePointerLock"];
+  const usePointerSwipe: typeof import("@vueuse/core")["usePointerSwipe"];
+  const usePreferredColorScheme: typeof import("@vueuse/core")["usePreferredColorScheme"];
+  const usePreferredContrast: typeof import("@vueuse/core")["usePreferredContrast"];
+  const usePreferredDark: typeof import("@vueuse/core")["usePreferredDark"];
+  const usePreferredLanguages: typeof import("@vueuse/core")["usePreferredLanguages"];
+  const usePreferredReducedMotion: typeof import("@vueuse/core")["usePreferredReducedMotion"];
+  const usePrevious: typeof import("@vueuse/core")["usePrevious"];
+  const useRafFn: typeof import("@vueuse/core")["useRafFn"];
+  const useRefHistory: typeof import("@vueuse/core")["useRefHistory"];
+  const useResizeObserver: typeof import("@vueuse/core")["useResizeObserver"];
+  const useScreenOrientation: typeof import("@vueuse/core")["useScreenOrientation"];
+  const useScreenSafeArea: typeof import("@vueuse/core")["useScreenSafeArea"];
+  const useScriptTag: typeof import("@vueuse/core")["useScriptTag"];
+  const useScroll: typeof import("@vueuse/core")["useScroll"];
+  const useScrollLock: typeof import("@vueuse/core")["useScrollLock"];
+  const useSessionStorage: typeof import("@vueuse/core")["useSessionStorage"];
+  const useShare: typeof import("@vueuse/core")["useShare"];
+  const useSlots: typeof import("vue")["useSlots"];
+  const useSorted: typeof import("@vueuse/core")["useSorted"];
+  const useSpeechRecognition: typeof import("@vueuse/core")["useSpeechRecognition"];
+  const useSpeechSynthesis: typeof import("@vueuse/core")["useSpeechSynthesis"];
+  const useStepper: typeof import("@vueuse/core")["useStepper"];
+  const useStorage: typeof import("@vueuse/core")["useStorage"];
+  const useStorageAsync: typeof import("@vueuse/core")["useStorageAsync"];
+  const useStyleTag: typeof import("@vueuse/core")["useStyleTag"];
+  const useSupported: typeof import("@vueuse/core")["useSupported"];
+  const useSwipe: typeof import("@vueuse/core")["useSwipe"];
+  const useTemplateRefsList: typeof import("@vueuse/core")["useTemplateRefsList"];
+  const useTextDirection: typeof import("@vueuse/core")["useTextDirection"];
+  const useTextSelection: typeof import("@vueuse/core")["useTextSelection"];
+  const useTextareaAutosize: typeof import("@vueuse/core")["useTextareaAutosize"];
+  const useThrottle: typeof import("@vueuse/core")["useThrottle"];
+  const useThrottleFn: typeof import("@vueuse/core")["useThrottleFn"];
+  const useThrottledRefHistory: typeof import("@vueuse/core")["useThrottledRefHistory"];
+  const useTimeAgo: typeof import("@vueuse/core")["useTimeAgo"];
+  const useTimeout: typeof import("@vueuse/core")["useTimeout"];
+  const useTimeoutFn: typeof import("@vueuse/core")["useTimeoutFn"];
+  const useTimeoutPoll: typeof import("@vueuse/core")["useTimeoutPoll"];
+  const useTimestamp: typeof import("@vueuse/core")["useTimestamp"];
+  const useTitle: typeof import("@vueuse/core")["useTitle"];
+  const useToNumber: typeof import("@vueuse/core")["useToNumber"];
+  const useToString: typeof import("@vueuse/core")["useToString"];
+  const useToggle: typeof import("@vueuse/core")["useToggle"];
+  const useTransition: typeof import("@vueuse/core")["useTransition"];
+  const useUrlSearchParams: typeof import("@vueuse/core")["useUrlSearchParams"];
+  const useUserMedia: typeof import("@vueuse/core")["useUserMedia"];
+  const useVModel: typeof import("@vueuse/core")["useVModel"];
+  const useVModels: typeof import("@vueuse/core")["useVModels"];
+  const useVibrate: typeof import("@vueuse/core")["useVibrate"];
+  const useVirtualList: typeof import("@vueuse/core")["useVirtualList"];
+  const useWakeLock: typeof import("@vueuse/core")["useWakeLock"];
+  const useWebNotification: typeof import("@vueuse/core")["useWebNotification"];
+  const useWebSocket: typeof import("@vueuse/core")["useWebSocket"];
+  const useWebWorker: typeof import("@vueuse/core")["useWebWorker"];
+  const useWebWorkerFn: typeof import("@vueuse/core")["useWebWorkerFn"];
+  const useWindowFocus: typeof import("@vueuse/core")["useWindowFocus"];
+  const useWindowScroll: typeof import("@vueuse/core")["useWindowScroll"];
+  const useWindowSize: typeof import("@vueuse/core")["useWindowSize"];
+  const watch: typeof import("vue")["watch"];
+  const watchArray: typeof import("@vueuse/core")["watchArray"];
+  const watchAtMost: typeof import("@vueuse/core")["watchAtMost"];
+  const watchDebounced: typeof import("@vueuse/core")["watchDebounced"];
+  const watchDeep: typeof import("@vueuse/core")["watchDeep"];
+  const watchEffect: typeof import("vue")["watchEffect"];
+  const watchIgnorable: typeof import("@vueuse/core")["watchIgnorable"];
+  const watchImmediate: typeof import("@vueuse/core")["watchImmediate"];
+  const watchOnce: typeof import("@vueuse/core")["watchOnce"];
+  const watchPausable: typeof import("@vueuse/core")["watchPausable"];
+  const watchPostEffect: typeof import("vue")["watchPostEffect"];
+  const watchSyncEffect: typeof import("vue")["watchSyncEffect"];
+  const watchThrottled: typeof import("@vueuse/core")["watchThrottled"];
+  const watchTriggerable: typeof import("@vueuse/core")["watchTriggerable"];
+  const watchWithFilter: typeof import("@vueuse/core")["watchWithFilter"];
+  const whenever: typeof import("@vueuse/core")["whenever"];
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+  } from "vue";
+}
+// for vue template auto import
+import { UnwrapRef } from "vue";
+declare module "vue" {
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import("vue")["EffectScope"]>;
+    readonly ElForm: UnwrapRef<typeof import("element-plus/es")["ElForm"]>;
+    readonly ElMessage: UnwrapRef<
+      typeof import("element-plus/es")["ElMessage"]
+    >;
+    readonly ElMessageBox: UnwrapRef<
+      typeof import("element-plus/es")["ElMessageBox"]
+    >;
+    readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>;
+    readonly asyncComputed: UnwrapRef<
+      typeof import("@vueuse/core")["asyncComputed"]
+    >;
+    readonly autoResetRef: UnwrapRef<
+      typeof import("@vueuse/core")["autoResetRef"]
+    >;
+    readonly computed: UnwrapRef<typeof import("vue")["computed"]>;
+    readonly computedAsync: UnwrapRef<
+      typeof import("@vueuse/core")["computedAsync"]
+    >;
+    readonly computedEager: UnwrapRef<
+      typeof import("@vueuse/core")["computedEager"]
+    >;
+    readonly computedInject: UnwrapRef<
+      typeof import("@vueuse/core")["computedInject"]
+    >;
+    readonly computedWithControl: UnwrapRef<
+      typeof import("@vueuse/core")["computedWithControl"]
+    >;
+    readonly controlledComputed: UnwrapRef<
+      typeof import("@vueuse/core")["controlledComputed"]
+    >;
+    readonly controlledRef: UnwrapRef<
+      typeof import("@vueuse/core")["controlledRef"]
+    >;
+    readonly createApp: UnwrapRef<typeof import("vue")["createApp"]>;
+    readonly createEventHook: UnwrapRef<
+      typeof import("@vueuse/core")["createEventHook"]
+    >;
+    readonly createGlobalState: UnwrapRef<
+      typeof import("@vueuse/core")["createGlobalState"]
+    >;
+    readonly createInjectionState: UnwrapRef<
+      typeof import("@vueuse/core")["createInjectionState"]
+    >;
+    readonly createReactiveFn: UnwrapRef<
+      typeof import("@vueuse/core")["createReactiveFn"]
+    >;
+    readonly createReusableTemplate: UnwrapRef<
+      typeof import("@vueuse/core")["createReusableTemplate"]
+    >;
+    readonly createSharedComposable: UnwrapRef<
+      typeof import("@vueuse/core")["createSharedComposable"]
+    >;
+    readonly createTemplatePromise: UnwrapRef<
+      typeof import("@vueuse/core")["createTemplatePromise"]
+    >;
+    readonly createUnrefFn: UnwrapRef<
+      typeof import("@vueuse/core")["createUnrefFn"]
+    >;
+    readonly customRef: UnwrapRef<typeof import("vue")["customRef"]>;
+    readonly debouncedRef: UnwrapRef<
+      typeof import("@vueuse/core")["debouncedRef"]
+    >;
+    readonly debouncedWatch: UnwrapRef<
+      typeof import("@vueuse/core")["debouncedWatch"]
+    >;
+    readonly defineAsyncComponent: UnwrapRef<
+      typeof import("vue")["defineAsyncComponent"]
+    >;
+    readonly defineComponent: UnwrapRef<
+      typeof import("vue")["defineComponent"]
+    >;
+    readonly eagerComputed: UnwrapRef<
+      typeof import("@vueuse/core")["eagerComputed"]
+    >;
+    readonly effectScope: UnwrapRef<typeof import("vue")["effectScope"]>;
+    readonly extendRef: UnwrapRef<typeof import("@vueuse/core")["extendRef"]>;
+    readonly getCurrentInstance: UnwrapRef<
+      typeof import("vue")["getCurrentInstance"]
+    >;
+    readonly getCurrentScope: UnwrapRef<
+      typeof import("vue")["getCurrentScope"]
+    >;
+    readonly h: UnwrapRef<typeof import("vue")["h"]>;
+    readonly ignorableWatch: UnwrapRef<
+      typeof import("@vueuse/core")["ignorableWatch"]
+    >;
+    readonly inject: UnwrapRef<typeof import("vue")["inject"]>;
+    readonly isDefined: UnwrapRef<typeof import("@vueuse/core")["isDefined"]>;
+    readonly isProxy: UnwrapRef<typeof import("vue")["isProxy"]>;
+    readonly isReactive: UnwrapRef<typeof import("vue")["isReactive"]>;
+    readonly isReadonly: UnwrapRef<typeof import("vue")["isReadonly"]>;
+    readonly isRef: UnwrapRef<typeof import("vue")["isRef"]>;
+    readonly makeDestructurable: UnwrapRef<
+      typeof import("@vueuse/core")["makeDestructurable"]
+    >;
+    readonly markRaw: UnwrapRef<typeof import("vue")["markRaw"]>;
+    readonly nextTick: UnwrapRef<typeof import("vue")["nextTick"]>;
+    readonly onActivated: UnwrapRef<typeof import("vue")["onActivated"]>;
+    readonly onBeforeMount: UnwrapRef<typeof import("vue")["onBeforeMount"]>;
+    readonly onBeforeUnmount: UnwrapRef<
+      typeof import("vue")["onBeforeUnmount"]
+    >;
+    readonly onBeforeUpdate: UnwrapRef<typeof import("vue")["onBeforeUpdate"]>;
+    readonly onClickOutside: UnwrapRef<
+      typeof import("@vueuse/core")["onClickOutside"]
+    >;
+    readonly onDeactivated: UnwrapRef<typeof import("vue")["onDeactivated"]>;
+    readonly onErrorCaptured: UnwrapRef<
+      typeof import("vue")["onErrorCaptured"]
+    >;
+    readonly onKeyStroke: UnwrapRef<
+      typeof import("@vueuse/core")["onKeyStroke"]
+    >;
+    readonly onLongPress: UnwrapRef<
+      typeof import("@vueuse/core")["onLongPress"]
+    >;
+    readonly onMounted: UnwrapRef<typeof import("vue")["onMounted"]>;
+    readonly onRenderTracked: UnwrapRef<
+      typeof import("vue")["onRenderTracked"]
+    >;
+    readonly onRenderTriggered: UnwrapRef<
+      typeof import("vue")["onRenderTriggered"]
+    >;
+    readonly onScopeDispose: UnwrapRef<typeof import("vue")["onScopeDispose"]>;
+    readonly onServerPrefetch: UnwrapRef<
+      typeof import("vue")["onServerPrefetch"]
+    >;
+    readonly onStartTyping: UnwrapRef<
+      typeof import("@vueuse/core")["onStartTyping"]
+    >;
+    readonly onUnmounted: UnwrapRef<typeof import("vue")["onUnmounted"]>;
+    readonly onUpdated: UnwrapRef<typeof import("vue")["onUpdated"]>;
+    readonly pausableWatch: UnwrapRef<
+      typeof import("@vueuse/core")["pausableWatch"]
+    >;
+    readonly provide: UnwrapRef<typeof import("vue")["provide"]>;
+    readonly reactify: UnwrapRef<typeof import("@vueuse/core")["reactify"]>;
+    readonly reactifyObject: UnwrapRef<
+      typeof import("@vueuse/core")["reactifyObject"]
+    >;
+    readonly reactive: UnwrapRef<typeof import("vue")["reactive"]>;
+    readonly reactiveComputed: UnwrapRef<
+      typeof import("@vueuse/core")["reactiveComputed"]
+    >;
+    readonly reactiveOmit: UnwrapRef<
+      typeof import("@vueuse/core")["reactiveOmit"]
+    >;
+    readonly reactivePick: UnwrapRef<
+      typeof import("@vueuse/core")["reactivePick"]
+    >;
+    readonly readonly: UnwrapRef<typeof import("vue")["readonly"]>;
+    readonly ref: UnwrapRef<typeof import("vue")["ref"]>;
+    readonly refAutoReset: UnwrapRef<
+      typeof import("@vueuse/core")["refAutoReset"]
+    >;
+    readonly refDebounced: UnwrapRef<
+      typeof import("@vueuse/core")["refDebounced"]
+    >;
+    readonly refDefault: UnwrapRef<typeof import("@vueuse/core")["refDefault"]>;
+    readonly refThrottled: UnwrapRef<
+      typeof import("@vueuse/core")["refThrottled"]
+    >;
+    readonly refWithControl: UnwrapRef<
+      typeof import("@vueuse/core")["refWithControl"]
+    >;
+    readonly resolveComponent: UnwrapRef<
+      typeof import("vue")["resolveComponent"]
+    >;
+    readonly resolveRef: UnwrapRef<typeof import("@vueuse/core")["resolveRef"]>;
+    readonly resolveUnref: UnwrapRef<
+      typeof import("@vueuse/core")["resolveUnref"]
+    >;
+    readonly shallowReactive: UnwrapRef<
+      typeof import("vue")["shallowReactive"]
+    >;
+    readonly shallowReadonly: UnwrapRef<
+      typeof import("vue")["shallowReadonly"]
+    >;
+    readonly shallowRef: UnwrapRef<typeof import("vue")["shallowRef"]>;
+    readonly syncRef: UnwrapRef<typeof import("@vueuse/core")["syncRef"]>;
+    readonly syncRefs: UnwrapRef<typeof import("@vueuse/core")["syncRefs"]>;
+    readonly templateRef: UnwrapRef<
+      typeof import("@vueuse/core")["templateRef"]
+    >;
+    readonly throttledRef: UnwrapRef<
+      typeof import("@vueuse/core")["throttledRef"]
+    >;
+    readonly throttledWatch: UnwrapRef<
+      typeof import("@vueuse/core")["throttledWatch"]
+    >;
+    readonly toRaw: UnwrapRef<typeof import("vue")["toRaw"]>;
+    readonly toReactive: UnwrapRef<typeof import("@vueuse/core")["toReactive"]>;
+    readonly toRef: UnwrapRef<typeof import("vue")["toRef"]>;
+    readonly toRefs: UnwrapRef<typeof import("vue")["toRefs"]>;
+    readonly toValue: UnwrapRef<typeof import("vue")["toValue"]>;
+    readonly triggerRef: UnwrapRef<typeof import("vue")["triggerRef"]>;
+    readonly tryOnBeforeMount: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnBeforeMount"]
+    >;
+    readonly tryOnBeforeUnmount: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnBeforeUnmount"]
+    >;
+    readonly tryOnMounted: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnMounted"]
+    >;
+    readonly tryOnScopeDispose: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnScopeDispose"]
+    >;
+    readonly tryOnUnmounted: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnUnmounted"]
+    >;
+    readonly unref: UnwrapRef<typeof import("vue")["unref"]>;
+    readonly unrefElement: UnwrapRef<
+      typeof import("@vueuse/core")["unrefElement"]
+    >;
+    readonly until: UnwrapRef<typeof import("@vueuse/core")["until"]>;
+    readonly useActiveElement: UnwrapRef<
+      typeof import("@vueuse/core")["useActiveElement"]
+    >;
+    readonly useAnimate: UnwrapRef<typeof import("@vueuse/core")["useAnimate"]>;
+    readonly useArrayDifference: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayDifference"]
+    >;
+    readonly useArrayEvery: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayEvery"]
+    >;
+    readonly useArrayFilter: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFilter"]
+    >;
+    readonly useArrayFind: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFind"]
+    >;
+    readonly useArrayFindIndex: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFindIndex"]
+    >;
+    readonly useArrayFindLast: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFindLast"]
+    >;
+    readonly useArrayIncludes: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayIncludes"]
+    >;
+    readonly useArrayJoin: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayJoin"]
+    >;
+    readonly useArrayMap: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayMap"]
+    >;
+    readonly useArrayReduce: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayReduce"]
+    >;
+    readonly useArraySome: UnwrapRef<
+      typeof import("@vueuse/core")["useArraySome"]
+    >;
+    readonly useArrayUnique: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayUnique"]
+    >;
+    readonly useAsyncQueue: UnwrapRef<
+      typeof import("@vueuse/core")["useAsyncQueue"]
+    >;
+    readonly useAsyncState: UnwrapRef<
+      typeof import("@vueuse/core")["useAsyncState"]
+    >;
+    readonly useAttrs: UnwrapRef<typeof import("vue")["useAttrs"]>;
+    readonly useBase64: UnwrapRef<typeof import("@vueuse/core")["useBase64"]>;
+    readonly useBattery: UnwrapRef<typeof import("@vueuse/core")["useBattery"]>;
+    readonly useBluetooth: UnwrapRef<
+      typeof import("@vueuse/core")["useBluetooth"]
+    >;
+    readonly useBreakpoints: UnwrapRef<
+      typeof import("@vueuse/core")["useBreakpoints"]
+    >;
+    readonly useBroadcastChannel: UnwrapRef<
+      typeof import("@vueuse/core")["useBroadcastChannel"]
+    >;
+    readonly useBrowserLocation: UnwrapRef<
+      typeof import("@vueuse/core")["useBrowserLocation"]
+    >;
+    readonly useCached: UnwrapRef<typeof import("@vueuse/core")["useCached"]>;
+    readonly useClipboard: UnwrapRef<
+      typeof import("@vueuse/core")["useClipboard"]
+    >;
+    readonly useCloned: UnwrapRef<typeof import("@vueuse/core")["useCloned"]>;
+    readonly useColorMode: UnwrapRef<
+      typeof import("@vueuse/core")["useColorMode"]
+    >;
+    readonly useConfirmDialog: UnwrapRef<
+      typeof import("@vueuse/core")["useConfirmDialog"]
+    >;
+    readonly useCounter: UnwrapRef<typeof import("@vueuse/core")["useCounter"]>;
+    readonly useCssModule: UnwrapRef<typeof import("vue")["useCssModule"]>;
+    readonly useCssVar: UnwrapRef<typeof import("@vueuse/core")["useCssVar"]>;
+    readonly useCssVars: UnwrapRef<typeof import("vue")["useCssVars"]>;
+    readonly useCurrentElement: UnwrapRef<
+      typeof import("@vueuse/core")["useCurrentElement"]
+    >;
+    readonly useCycleList: UnwrapRef<
+      typeof import("@vueuse/core")["useCycleList"]
+    >;
+    readonly useDark: UnwrapRef<typeof import("@vueuse/core")["useDark"]>;
+    readonly useDateFormat: UnwrapRef<
+      typeof import("@vueuse/core")["useDateFormat"]
+    >;
+    readonly useDebounce: UnwrapRef<
+      typeof import("@vueuse/core")["useDebounce"]
+    >;
+    readonly useDebounceFn: UnwrapRef<
+      typeof import("@vueuse/core")["useDebounceFn"]
+    >;
+    readonly useDebouncedRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useDebouncedRefHistory"]
+    >;
+    readonly useDeviceMotion: UnwrapRef<
+      typeof import("@vueuse/core")["useDeviceMotion"]
+    >;
+    readonly useDeviceOrientation: UnwrapRef<
+      typeof import("@vueuse/core")["useDeviceOrientation"]
+    >;
+    readonly useDevicePixelRatio: UnwrapRef<
+      typeof import("@vueuse/core")["useDevicePixelRatio"]
+    >;
+    readonly useDevicesList: UnwrapRef<
+      typeof import("@vueuse/core")["useDevicesList"]
+    >;
+    readonly useDisplayMedia: UnwrapRef<
+      typeof import("@vueuse/core")["useDisplayMedia"]
+    >;
+    readonly useDocumentVisibility: UnwrapRef<
+      typeof import("@vueuse/core")["useDocumentVisibility"]
+    >;
+    readonly useDraggable: UnwrapRef<
+      typeof import("@vueuse/core")["useDraggable"]
+    >;
+    readonly useDropZone: UnwrapRef<
+      typeof import("@vueuse/core")["useDropZone"]
+    >;
+    readonly useElementBounding: UnwrapRef<
+      typeof import("@vueuse/core")["useElementBounding"]
+    >;
+    readonly useElementByPoint: UnwrapRef<
+      typeof import("@vueuse/core")["useElementByPoint"]
+    >;
+    readonly useElementHover: UnwrapRef<
+      typeof import("@vueuse/core")["useElementHover"]
+    >;
+    readonly useElementSize: UnwrapRef<
+      typeof import("@vueuse/core")["useElementSize"]
+    >;
+    readonly useElementVisibility: UnwrapRef<
+      typeof import("@vueuse/core")["useElementVisibility"]
+    >;
+    readonly useEventBus: UnwrapRef<
+      typeof import("@vueuse/core")["useEventBus"]
+    >;
+    readonly useEventListener: UnwrapRef<
+      typeof import("@vueuse/core")["useEventListener"]
+    >;
+    readonly useEventSource: UnwrapRef<
+      typeof import("@vueuse/core")["useEventSource"]
+    >;
+    readonly useEyeDropper: UnwrapRef<
+      typeof import("@vueuse/core")["useEyeDropper"]
+    >;
+    readonly useFavicon: UnwrapRef<typeof import("@vueuse/core")["useFavicon"]>;
+    readonly useFetch: UnwrapRef<typeof import("@vueuse/core")["useFetch"]>;
+    readonly useFileDialog: UnwrapRef<
+      typeof import("@vueuse/core")["useFileDialog"]
+    >;
+    readonly useFileSystemAccess: UnwrapRef<
+      typeof import("@vueuse/core")["useFileSystemAccess"]
+    >;
+    readonly useFocus: UnwrapRef<typeof import("@vueuse/core")["useFocus"]>;
+    readonly useFocusWithin: UnwrapRef<
+      typeof import("@vueuse/core")["useFocusWithin"]
+    >;
+    readonly useFps: UnwrapRef<typeof import("@vueuse/core")["useFps"]>;
+    readonly useFullscreen: UnwrapRef<
+      typeof import("@vueuse/core")["useFullscreen"]
+    >;
+    readonly useGamepad: UnwrapRef<typeof import("@vueuse/core")["useGamepad"]>;
+    readonly useGeolocation: UnwrapRef<
+      typeof import("@vueuse/core")["useGeolocation"]
+    >;
+    readonly useIdle: UnwrapRef<typeof import("@vueuse/core")["useIdle"]>;
+    readonly useImage: UnwrapRef<typeof import("@vueuse/core")["useImage"]>;
+    readonly useInfiniteScroll: UnwrapRef<
+      typeof import("@vueuse/core")["useInfiniteScroll"]
+    >;
+    readonly useIntersectionObserver: UnwrapRef<
+      typeof import("@vueuse/core")["useIntersectionObserver"]
+    >;
+    readonly useInterval: UnwrapRef<
+      typeof import("@vueuse/core")["useInterval"]
+    >;
+    readonly useIntervalFn: UnwrapRef<
+      typeof import("@vueuse/core")["useIntervalFn"]
+    >;
+    readonly useKeyModifier: UnwrapRef<
+      typeof import("@vueuse/core")["useKeyModifier"]
+    >;
+    readonly useLastChanged: UnwrapRef<
+      typeof import("@vueuse/core")["useLastChanged"]
+    >;
+    readonly useLocalStorage: UnwrapRef<
+      typeof import("@vueuse/core")["useLocalStorage"]
+    >;
+    readonly useMagicKeys: UnwrapRef<
+      typeof import("@vueuse/core")["useMagicKeys"]
+    >;
+    readonly useManualRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useManualRefHistory"]
+    >;
+    readonly useMediaControls: UnwrapRef<
+      typeof import("@vueuse/core")["useMediaControls"]
+    >;
+    readonly useMediaQuery: UnwrapRef<
+      typeof import("@vueuse/core")["useMediaQuery"]
+    >;
+    readonly useMemoize: UnwrapRef<typeof import("@vueuse/core")["useMemoize"]>;
+    readonly useMemory: UnwrapRef<typeof import("@vueuse/core")["useMemory"]>;
+    readonly useMounted: UnwrapRef<typeof import("@vueuse/core")["useMounted"]>;
+    readonly useMouse: UnwrapRef<typeof import("@vueuse/core")["useMouse"]>;
+    readonly useMouseInElement: UnwrapRef<
+      typeof import("@vueuse/core")["useMouseInElement"]
+    >;
+    readonly useMousePressed: UnwrapRef<
+      typeof import("@vueuse/core")["useMousePressed"]
+    >;
+    readonly useMutationObserver: UnwrapRef<
+      typeof import("@vueuse/core")["useMutationObserver"]
+    >;
+    readonly useNavigatorLanguage: UnwrapRef<
+      typeof import("@vueuse/core")["useNavigatorLanguage"]
+    >;
+    readonly useNetwork: UnwrapRef<typeof import("@vueuse/core")["useNetwork"]>;
+    readonly useNow: UnwrapRef<typeof import("@vueuse/core")["useNow"]>;
+    readonly useObjectUrl: UnwrapRef<
+      typeof import("@vueuse/core")["useObjectUrl"]
+    >;
+    readonly useOffsetPagination: UnwrapRef<
+      typeof import("@vueuse/core")["useOffsetPagination"]
+    >;
+    readonly useOnline: UnwrapRef<typeof import("@vueuse/core")["useOnline"]>;
+    readonly usePageLeave: UnwrapRef<
+      typeof import("@vueuse/core")["usePageLeave"]
+    >;
+    readonly useParallax: UnwrapRef<
+      typeof import("@vueuse/core")["useParallax"]
+    >;
+    readonly useParentElement: UnwrapRef<
+      typeof import("@vueuse/core")["useParentElement"]
+    >;
+    readonly usePerformanceObserver: UnwrapRef<
+      typeof import("@vueuse/core")["usePerformanceObserver"]
+    >;
+    readonly usePermission: UnwrapRef<
+      typeof import("@vueuse/core")["usePermission"]
+    >;
+    readonly usePointer: UnwrapRef<typeof import("@vueuse/core")["usePointer"]>;
+    readonly usePointerLock: UnwrapRef<
+      typeof import("@vueuse/core")["usePointerLock"]
+    >;
+    readonly usePointerSwipe: UnwrapRef<
+      typeof import("@vueuse/core")["usePointerSwipe"]
+    >;
+    readonly usePreferredColorScheme: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredColorScheme"]
+    >;
+    readonly usePreferredContrast: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredContrast"]
+    >;
+    readonly usePreferredDark: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredDark"]
+    >;
+    readonly usePreferredLanguages: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredLanguages"]
+    >;
+    readonly usePreferredReducedMotion: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredReducedMotion"]
+    >;
+    readonly usePrevious: UnwrapRef<
+      typeof import("@vueuse/core")["usePrevious"]
+    >;
+    readonly useRafFn: UnwrapRef<typeof import("@vueuse/core")["useRafFn"]>;
+    readonly useRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useRefHistory"]
+    >;
+    readonly useResizeObserver: UnwrapRef<
+      typeof import("@vueuse/core")["useResizeObserver"]
+    >;
+    readonly useScreenOrientation: UnwrapRef<
+      typeof import("@vueuse/core")["useScreenOrientation"]
+    >;
+    readonly useScreenSafeArea: UnwrapRef<
+      typeof import("@vueuse/core")["useScreenSafeArea"]
+    >;
+    readonly useScriptTag: UnwrapRef<
+      typeof import("@vueuse/core")["useScriptTag"]
+    >;
+    readonly useScroll: UnwrapRef<typeof import("@vueuse/core")["useScroll"]>;
+    readonly useScrollLock: UnwrapRef<
+      typeof import("@vueuse/core")["useScrollLock"]
+    >;
+    readonly useSessionStorage: UnwrapRef<
+      typeof import("@vueuse/core")["useSessionStorage"]
+    >;
+    readonly useShare: UnwrapRef<typeof import("@vueuse/core")["useShare"]>;
+    readonly useSlots: UnwrapRef<typeof import("vue")["useSlots"]>;
+    readonly useSorted: UnwrapRef<typeof import("@vueuse/core")["useSorted"]>;
+    readonly useSpeechRecognition: UnwrapRef<
+      typeof import("@vueuse/core")["useSpeechRecognition"]
+    >;
+    readonly useSpeechSynthesis: UnwrapRef<
+      typeof import("@vueuse/core")["useSpeechSynthesis"]
+    >;
+    readonly useStepper: UnwrapRef<typeof import("@vueuse/core")["useStepper"]>;
+    readonly useStorage: UnwrapRef<typeof import("@vueuse/core")["useStorage"]>;
+    readonly useStorageAsync: UnwrapRef<
+      typeof import("@vueuse/core")["useStorageAsync"]
+    >;
+    readonly useStyleTag: UnwrapRef<
+      typeof import("@vueuse/core")["useStyleTag"]
+    >;
+    readonly useSupported: UnwrapRef<
+      typeof import("@vueuse/core")["useSupported"]
+    >;
+    readonly useSwipe: UnwrapRef<typeof import("@vueuse/core")["useSwipe"]>;
+    readonly useTemplateRefsList: UnwrapRef<
+      typeof import("@vueuse/core")["useTemplateRefsList"]
+    >;
+    readonly useTextDirection: UnwrapRef<
+      typeof import("@vueuse/core")["useTextDirection"]
+    >;
+    readonly useTextSelection: UnwrapRef<
+      typeof import("@vueuse/core")["useTextSelection"]
+    >;
+    readonly useTextareaAutosize: UnwrapRef<
+      typeof import("@vueuse/core")["useTextareaAutosize"]
+    >;
+    readonly useThrottle: UnwrapRef<
+      typeof import("@vueuse/core")["useThrottle"]
+    >;
+    readonly useThrottleFn: UnwrapRef<
+      typeof import("@vueuse/core")["useThrottleFn"]
+    >;
+    readonly useThrottledRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useThrottledRefHistory"]
+    >;
+    readonly useTimeAgo: UnwrapRef<typeof import("@vueuse/core")["useTimeAgo"]>;
+    readonly useTimeout: UnwrapRef<typeof import("@vueuse/core")["useTimeout"]>;
+    readonly useTimeoutFn: UnwrapRef<
+      typeof import("@vueuse/core")["useTimeoutFn"]
+    >;
+    readonly useTimeoutPoll: UnwrapRef<
+      typeof import("@vueuse/core")["useTimeoutPoll"]
+    >;
+    readonly useTimestamp: UnwrapRef<
+      typeof import("@vueuse/core")["useTimestamp"]
+    >;
+    readonly useTitle: UnwrapRef<typeof import("@vueuse/core")["useTitle"]>;
+    readonly useToNumber: UnwrapRef<
+      typeof import("@vueuse/core")["useToNumber"]
+    >;
+    readonly useToString: UnwrapRef<
+      typeof import("@vueuse/core")["useToString"]
+    >;
+    readonly useToggle: UnwrapRef<typeof import("@vueuse/core")["useToggle"]>;
+    readonly useTransition: UnwrapRef<
+      typeof import("@vueuse/core")["useTransition"]
+    >;
+    readonly useUrlSearchParams: UnwrapRef<
+      typeof import("@vueuse/core")["useUrlSearchParams"]
+    >;
+    readonly useUserMedia: UnwrapRef<
+      typeof import("@vueuse/core")["useUserMedia"]
+    >;
+    readonly useVModel: UnwrapRef<typeof import("@vueuse/core")["useVModel"]>;
+    readonly useVModels: UnwrapRef<typeof import("@vueuse/core")["useVModels"]>;
+    readonly useVibrate: UnwrapRef<typeof import("@vueuse/core")["useVibrate"]>;
+    readonly useVirtualList: UnwrapRef<
+      typeof import("@vueuse/core")["useVirtualList"]
+    >;
+    readonly useWakeLock: UnwrapRef<
+      typeof import("@vueuse/core")["useWakeLock"]
+    >;
+    readonly useWebNotification: UnwrapRef<
+      typeof import("@vueuse/core")["useWebNotification"]
+    >;
+    readonly useWebSocket: UnwrapRef<
+      typeof import("@vueuse/core")["useWebSocket"]
+    >;
+    readonly useWebWorker: UnwrapRef<
+      typeof import("@vueuse/core")["useWebWorker"]
+    >;
+    readonly useWebWorkerFn: UnwrapRef<
+      typeof import("@vueuse/core")["useWebWorkerFn"]
+    >;
+    readonly useWindowFocus: UnwrapRef<
+      typeof import("@vueuse/core")["useWindowFocus"]
+    >;
+    readonly useWindowScroll: UnwrapRef<
+      typeof import("@vueuse/core")["useWindowScroll"]
+    >;
+    readonly useWindowSize: UnwrapRef<
+      typeof import("@vueuse/core")["useWindowSize"]
+    >;
+    readonly watch: UnwrapRef<typeof import("vue")["watch"]>;
+    readonly watchArray: UnwrapRef<typeof import("@vueuse/core")["watchArray"]>;
+    readonly watchAtMost: UnwrapRef<
+      typeof import("@vueuse/core")["watchAtMost"]
+    >;
+    readonly watchDebounced: UnwrapRef<
+      typeof import("@vueuse/core")["watchDebounced"]
+    >;
+    readonly watchDeep: UnwrapRef<typeof import("@vueuse/core")["watchDeep"]>;
+    readonly watchEffect: UnwrapRef<typeof import("vue")["watchEffect"]>;
+    readonly watchIgnorable: UnwrapRef<
+      typeof import("@vueuse/core")["watchIgnorable"]
+    >;
+    readonly watchImmediate: UnwrapRef<
+      typeof import("@vueuse/core")["watchImmediate"]
+    >;
+    readonly watchOnce: UnwrapRef<typeof import("@vueuse/core")["watchOnce"]>;
+    readonly watchPausable: UnwrapRef<
+      typeof import("@vueuse/core")["watchPausable"]
+    >;
+    readonly watchPostEffect: UnwrapRef<
+      typeof import("vue")["watchPostEffect"]
+    >;
+    readonly watchSyncEffect: UnwrapRef<
+      typeof import("vue")["watchSyncEffect"]
+    >;
+    readonly watchThrottled: UnwrapRef<
+      typeof import("@vueuse/core")["watchThrottled"]
+    >;
+    readonly watchTriggerable: UnwrapRef<
+      typeof import("@vueuse/core")["watchTriggerable"]
+    >;
+    readonly watchWithFilter: UnwrapRef<
+      typeof import("@vueuse/core")["watchWithFilter"]
+    >;
+    readonly whenever: UnwrapRef<typeof import("@vueuse/core")["whenever"]>;
+  }
+}
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import("vue")["EffectScope"]>;
+    readonly ElForm: UnwrapRef<typeof import("element-plus/es")["ElForm"]>;
+    readonly ElMessage: UnwrapRef<
+      typeof import("element-plus/es")["ElMessage"]
+    >;
+    readonly ElMessageBox: UnwrapRef<
+      typeof import("element-plus/es")["ElMessageBox"]
+    >;
+    readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>;
+    readonly asyncComputed: UnwrapRef<
+      typeof import("@vueuse/core")["asyncComputed"]
+    >;
+    readonly autoResetRef: UnwrapRef<
+      typeof import("@vueuse/core")["autoResetRef"]
+    >;
+    readonly computed: UnwrapRef<typeof import("vue")["computed"]>;
+    readonly computedAsync: UnwrapRef<
+      typeof import("@vueuse/core")["computedAsync"]
+    >;
+    readonly computedEager: UnwrapRef<
+      typeof import("@vueuse/core")["computedEager"]
+    >;
+    readonly computedInject: UnwrapRef<
+      typeof import("@vueuse/core")["computedInject"]
+    >;
+    readonly computedWithControl: UnwrapRef<
+      typeof import("@vueuse/core")["computedWithControl"]
+    >;
+    readonly controlledComputed: UnwrapRef<
+      typeof import("@vueuse/core")["controlledComputed"]
+    >;
+    readonly controlledRef: UnwrapRef<
+      typeof import("@vueuse/core")["controlledRef"]
+    >;
+    readonly createApp: UnwrapRef<typeof import("vue")["createApp"]>;
+    readonly createEventHook: UnwrapRef<
+      typeof import("@vueuse/core")["createEventHook"]
+    >;
+    readonly createGlobalState: UnwrapRef<
+      typeof import("@vueuse/core")["createGlobalState"]
+    >;
+    readonly createInjectionState: UnwrapRef<
+      typeof import("@vueuse/core")["createInjectionState"]
+    >;
+    readonly createReactiveFn: UnwrapRef<
+      typeof import("@vueuse/core")["createReactiveFn"]
+    >;
+    readonly createReusableTemplate: UnwrapRef<
+      typeof import("@vueuse/core")["createReusableTemplate"]
+    >;
+    readonly createSharedComposable: UnwrapRef<
+      typeof import("@vueuse/core")["createSharedComposable"]
+    >;
+    readonly createTemplatePromise: UnwrapRef<
+      typeof import("@vueuse/core")["createTemplatePromise"]
+    >;
+    readonly createUnrefFn: UnwrapRef<
+      typeof import("@vueuse/core")["createUnrefFn"]
+    >;
+    readonly customRef: UnwrapRef<typeof import("vue")["customRef"]>;
+    readonly debouncedRef: UnwrapRef<
+      typeof import("@vueuse/core")["debouncedRef"]
+    >;
+    readonly debouncedWatch: UnwrapRef<
+      typeof import("@vueuse/core")["debouncedWatch"]
+    >;
+    readonly defineAsyncComponent: UnwrapRef<
+      typeof import("vue")["defineAsyncComponent"]
+    >;
+    readonly defineComponent: UnwrapRef<
+      typeof import("vue")["defineComponent"]
+    >;
+    readonly eagerComputed: UnwrapRef<
+      typeof import("@vueuse/core")["eagerComputed"]
+    >;
+    readonly effectScope: UnwrapRef<typeof import("vue")["effectScope"]>;
+    readonly extendRef: UnwrapRef<typeof import("@vueuse/core")["extendRef"]>;
+    readonly getCurrentInstance: UnwrapRef<
+      typeof import("vue")["getCurrentInstance"]
+    >;
+    readonly getCurrentScope: UnwrapRef<
+      typeof import("vue")["getCurrentScope"]
+    >;
+    readonly h: UnwrapRef<typeof import("vue")["h"]>;
+    readonly ignorableWatch: UnwrapRef<
+      typeof import("@vueuse/core")["ignorableWatch"]
+    >;
+    readonly inject: UnwrapRef<typeof import("vue")["inject"]>;
+    readonly isDefined: UnwrapRef<typeof import("@vueuse/core")["isDefined"]>;
+    readonly isProxy: UnwrapRef<typeof import("vue")["isProxy"]>;
+    readonly isReactive: UnwrapRef<typeof import("vue")["isReactive"]>;
+    readonly isReadonly: UnwrapRef<typeof import("vue")["isReadonly"]>;
+    readonly isRef: UnwrapRef<typeof import("vue")["isRef"]>;
+    readonly makeDestructurable: UnwrapRef<
+      typeof import("@vueuse/core")["makeDestructurable"]
+    >;
+    readonly markRaw: UnwrapRef<typeof import("vue")["markRaw"]>;
+    readonly nextTick: UnwrapRef<typeof import("vue")["nextTick"]>;
+    readonly onActivated: UnwrapRef<typeof import("vue")["onActivated"]>;
+    readonly onBeforeMount: UnwrapRef<typeof import("vue")["onBeforeMount"]>;
+    readonly onBeforeUnmount: UnwrapRef<
+      typeof import("vue")["onBeforeUnmount"]
+    >;
+    readonly onBeforeUpdate: UnwrapRef<typeof import("vue")["onBeforeUpdate"]>;
+    readonly onClickOutside: UnwrapRef<
+      typeof import("@vueuse/core")["onClickOutside"]
+    >;
+    readonly onDeactivated: UnwrapRef<typeof import("vue")["onDeactivated"]>;
+    readonly onErrorCaptured: UnwrapRef<
+      typeof import("vue")["onErrorCaptured"]
+    >;
+    readonly onKeyStroke: UnwrapRef<
+      typeof import("@vueuse/core")["onKeyStroke"]
+    >;
+    readonly onLongPress: UnwrapRef<
+      typeof import("@vueuse/core")["onLongPress"]
+    >;
+    readonly onMounted: UnwrapRef<typeof import("vue")["onMounted"]>;
+    readonly onRenderTracked: UnwrapRef<
+      typeof import("vue")["onRenderTracked"]
+    >;
+    readonly onRenderTriggered: UnwrapRef<
+      typeof import("vue")["onRenderTriggered"]
+    >;
+    readonly onScopeDispose: UnwrapRef<typeof import("vue")["onScopeDispose"]>;
+    readonly onServerPrefetch: UnwrapRef<
+      typeof import("vue")["onServerPrefetch"]
+    >;
+    readonly onStartTyping: UnwrapRef<
+      typeof import("@vueuse/core")["onStartTyping"]
+    >;
+    readonly onUnmounted: UnwrapRef<typeof import("vue")["onUnmounted"]>;
+    readonly onUpdated: UnwrapRef<typeof import("vue")["onUpdated"]>;
+    readonly pausableWatch: UnwrapRef<
+      typeof import("@vueuse/core")["pausableWatch"]
+    >;
+    readonly provide: UnwrapRef<typeof import("vue")["provide"]>;
+    readonly reactify: UnwrapRef<typeof import("@vueuse/core")["reactify"]>;
+    readonly reactifyObject: UnwrapRef<
+      typeof import("@vueuse/core")["reactifyObject"]
+    >;
+    readonly reactive: UnwrapRef<typeof import("vue")["reactive"]>;
+    readonly reactiveComputed: UnwrapRef<
+      typeof import("@vueuse/core")["reactiveComputed"]
+    >;
+    readonly reactiveOmit: UnwrapRef<
+      typeof import("@vueuse/core")["reactiveOmit"]
+    >;
+    readonly reactivePick: UnwrapRef<
+      typeof import("@vueuse/core")["reactivePick"]
+    >;
+    readonly readonly: UnwrapRef<typeof import("vue")["readonly"]>;
+    readonly ref: UnwrapRef<typeof import("vue")["ref"]>;
+    readonly refAutoReset: UnwrapRef<
+      typeof import("@vueuse/core")["refAutoReset"]
+    >;
+    readonly refDebounced: UnwrapRef<
+      typeof import("@vueuse/core")["refDebounced"]
+    >;
+    readonly refDefault: UnwrapRef<typeof import("@vueuse/core")["refDefault"]>;
+    readonly refThrottled: UnwrapRef<
+      typeof import("@vueuse/core")["refThrottled"]
+    >;
+    readonly refWithControl: UnwrapRef<
+      typeof import("@vueuse/core")["refWithControl"]
+    >;
+    readonly resolveComponent: UnwrapRef<
+      typeof import("vue")["resolveComponent"]
+    >;
+    readonly resolveRef: UnwrapRef<typeof import("@vueuse/core")["resolveRef"]>;
+    readonly resolveUnref: UnwrapRef<
+      typeof import("@vueuse/core")["resolveUnref"]
+    >;
+    readonly shallowReactive: UnwrapRef<
+      typeof import("vue")["shallowReactive"]
+    >;
+    readonly shallowReadonly: UnwrapRef<
+      typeof import("vue")["shallowReadonly"]
+    >;
+    readonly shallowRef: UnwrapRef<typeof import("vue")["shallowRef"]>;
+    readonly syncRef: UnwrapRef<typeof import("@vueuse/core")["syncRef"]>;
+    readonly syncRefs: UnwrapRef<typeof import("@vueuse/core")["syncRefs"]>;
+    readonly templateRef: UnwrapRef<
+      typeof import("@vueuse/core")["templateRef"]
+    >;
+    readonly throttledRef: UnwrapRef<
+      typeof import("@vueuse/core")["throttledRef"]
+    >;
+    readonly throttledWatch: UnwrapRef<
+      typeof import("@vueuse/core")["throttledWatch"]
+    >;
+    readonly toRaw: UnwrapRef<typeof import("vue")["toRaw"]>;
+    readonly toReactive: UnwrapRef<typeof import("@vueuse/core")["toReactive"]>;
+    readonly toRef: UnwrapRef<typeof import("vue")["toRef"]>;
+    readonly toRefs: UnwrapRef<typeof import("vue")["toRefs"]>;
+    readonly toValue: UnwrapRef<typeof import("vue")["toValue"]>;
+    readonly triggerRef: UnwrapRef<typeof import("vue")["triggerRef"]>;
+    readonly tryOnBeforeMount: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnBeforeMount"]
+    >;
+    readonly tryOnBeforeUnmount: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnBeforeUnmount"]
+    >;
+    readonly tryOnMounted: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnMounted"]
+    >;
+    readonly tryOnScopeDispose: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnScopeDispose"]
+    >;
+    readonly tryOnUnmounted: UnwrapRef<
+      typeof import("@vueuse/core")["tryOnUnmounted"]
+    >;
+    readonly unref: UnwrapRef<typeof import("vue")["unref"]>;
+    readonly unrefElement: UnwrapRef<
+      typeof import("@vueuse/core")["unrefElement"]
+    >;
+    readonly until: UnwrapRef<typeof import("@vueuse/core")["until"]>;
+    readonly useActiveElement: UnwrapRef<
+      typeof import("@vueuse/core")["useActiveElement"]
+    >;
+    readonly useAnimate: UnwrapRef<typeof import("@vueuse/core")["useAnimate"]>;
+    readonly useArrayDifference: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayDifference"]
+    >;
+    readonly useArrayEvery: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayEvery"]
+    >;
+    readonly useArrayFilter: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFilter"]
+    >;
+    readonly useArrayFind: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFind"]
+    >;
+    readonly useArrayFindIndex: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFindIndex"]
+    >;
+    readonly useArrayFindLast: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayFindLast"]
+    >;
+    readonly useArrayIncludes: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayIncludes"]
+    >;
+    readonly useArrayJoin: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayJoin"]
+    >;
+    readonly useArrayMap: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayMap"]
+    >;
+    readonly useArrayReduce: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayReduce"]
+    >;
+    readonly useArraySome: UnwrapRef<
+      typeof import("@vueuse/core")["useArraySome"]
+    >;
+    readonly useArrayUnique: UnwrapRef<
+      typeof import("@vueuse/core")["useArrayUnique"]
+    >;
+    readonly useAsyncQueue: UnwrapRef<
+      typeof import("@vueuse/core")["useAsyncQueue"]
+    >;
+    readonly useAsyncState: UnwrapRef<
+      typeof import("@vueuse/core")["useAsyncState"]
+    >;
+    readonly useAttrs: UnwrapRef<typeof import("vue")["useAttrs"]>;
+    readonly useBase64: UnwrapRef<typeof import("@vueuse/core")["useBase64"]>;
+    readonly useBattery: UnwrapRef<typeof import("@vueuse/core")["useBattery"]>;
+    readonly useBluetooth: UnwrapRef<
+      typeof import("@vueuse/core")["useBluetooth"]
+    >;
+    readonly useBreakpoints: UnwrapRef<
+      typeof import("@vueuse/core")["useBreakpoints"]
+    >;
+    readonly useBroadcastChannel: UnwrapRef<
+      typeof import("@vueuse/core")["useBroadcastChannel"]
+    >;
+    readonly useBrowserLocation: UnwrapRef<
+      typeof import("@vueuse/core")["useBrowserLocation"]
+    >;
+    readonly useCached: UnwrapRef<typeof import("@vueuse/core")["useCached"]>;
+    readonly useClipboard: UnwrapRef<
+      typeof import("@vueuse/core")["useClipboard"]
+    >;
+    readonly useCloned: UnwrapRef<typeof import("@vueuse/core")["useCloned"]>;
+    readonly useColorMode: UnwrapRef<
+      typeof import("@vueuse/core")["useColorMode"]
+    >;
+    readonly useConfirmDialog: UnwrapRef<
+      typeof import("@vueuse/core")["useConfirmDialog"]
+    >;
+    readonly useCounter: UnwrapRef<typeof import("@vueuse/core")["useCounter"]>;
+    readonly useCssModule: UnwrapRef<typeof import("vue")["useCssModule"]>;
+    readonly useCssVar: UnwrapRef<typeof import("@vueuse/core")["useCssVar"]>;
+    readonly useCssVars: UnwrapRef<typeof import("vue")["useCssVars"]>;
+    readonly useCurrentElement: UnwrapRef<
+      typeof import("@vueuse/core")["useCurrentElement"]
+    >;
+    readonly useCycleList: UnwrapRef<
+      typeof import("@vueuse/core")["useCycleList"]
+    >;
+    readonly useDark: UnwrapRef<typeof import("@vueuse/core")["useDark"]>;
+    readonly useDateFormat: UnwrapRef<
+      typeof import("@vueuse/core")["useDateFormat"]
+    >;
+    readonly useDebounce: UnwrapRef<
+      typeof import("@vueuse/core")["useDebounce"]
+    >;
+    readonly useDebounceFn: UnwrapRef<
+      typeof import("@vueuse/core")["useDebounceFn"]
+    >;
+    readonly useDebouncedRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useDebouncedRefHistory"]
+    >;
+    readonly useDeviceMotion: UnwrapRef<
+      typeof import("@vueuse/core")["useDeviceMotion"]
+    >;
+    readonly useDeviceOrientation: UnwrapRef<
+      typeof import("@vueuse/core")["useDeviceOrientation"]
+    >;
+    readonly useDevicePixelRatio: UnwrapRef<
+      typeof import("@vueuse/core")["useDevicePixelRatio"]
+    >;
+    readonly useDevicesList: UnwrapRef<
+      typeof import("@vueuse/core")["useDevicesList"]
+    >;
+    readonly useDisplayMedia: UnwrapRef<
+      typeof import("@vueuse/core")["useDisplayMedia"]
+    >;
+    readonly useDocumentVisibility: UnwrapRef<
+      typeof import("@vueuse/core")["useDocumentVisibility"]
+    >;
+    readonly useDraggable: UnwrapRef<
+      typeof import("@vueuse/core")["useDraggable"]
+    >;
+    readonly useDropZone: UnwrapRef<
+      typeof import("@vueuse/core")["useDropZone"]
+    >;
+    readonly useElementBounding: UnwrapRef<
+      typeof import("@vueuse/core")["useElementBounding"]
+    >;
+    readonly useElementByPoint: UnwrapRef<
+      typeof import("@vueuse/core")["useElementByPoint"]
+    >;
+    readonly useElementHover: UnwrapRef<
+      typeof import("@vueuse/core")["useElementHover"]
+    >;
+    readonly useElementSize: UnwrapRef<
+      typeof import("@vueuse/core")["useElementSize"]
+    >;
+    readonly useElementVisibility: UnwrapRef<
+      typeof import("@vueuse/core")["useElementVisibility"]
+    >;
+    readonly useEventBus: UnwrapRef<
+      typeof import("@vueuse/core")["useEventBus"]
+    >;
+    readonly useEventListener: UnwrapRef<
+      typeof import("@vueuse/core")["useEventListener"]
+    >;
+    readonly useEventSource: UnwrapRef<
+      typeof import("@vueuse/core")["useEventSource"]
+    >;
+    readonly useEyeDropper: UnwrapRef<
+      typeof import("@vueuse/core")["useEyeDropper"]
+    >;
+    readonly useFavicon: UnwrapRef<typeof import("@vueuse/core")["useFavicon"]>;
+    readonly useFetch: UnwrapRef<typeof import("@vueuse/core")["useFetch"]>;
+    readonly useFileDialog: UnwrapRef<
+      typeof import("@vueuse/core")["useFileDialog"]
+    >;
+    readonly useFileSystemAccess: UnwrapRef<
+      typeof import("@vueuse/core")["useFileSystemAccess"]
+    >;
+    readonly useFocus: UnwrapRef<typeof import("@vueuse/core")["useFocus"]>;
+    readonly useFocusWithin: UnwrapRef<
+      typeof import("@vueuse/core")["useFocusWithin"]
+    >;
+    readonly useFps: UnwrapRef<typeof import("@vueuse/core")["useFps"]>;
+    readonly useFullscreen: UnwrapRef<
+      typeof import("@vueuse/core")["useFullscreen"]
+    >;
+    readonly useGamepad: UnwrapRef<typeof import("@vueuse/core")["useGamepad"]>;
+    readonly useGeolocation: UnwrapRef<
+      typeof import("@vueuse/core")["useGeolocation"]
+    >;
+    readonly useIdle: UnwrapRef<typeof import("@vueuse/core")["useIdle"]>;
+    readonly useImage: UnwrapRef<typeof import("@vueuse/core")["useImage"]>;
+    readonly useInfiniteScroll: UnwrapRef<
+      typeof import("@vueuse/core")["useInfiniteScroll"]
+    >;
+    readonly useIntersectionObserver: UnwrapRef<
+      typeof import("@vueuse/core")["useIntersectionObserver"]
+    >;
+    readonly useInterval: UnwrapRef<
+      typeof import("@vueuse/core")["useInterval"]
+    >;
+    readonly useIntervalFn: UnwrapRef<
+      typeof import("@vueuse/core")["useIntervalFn"]
+    >;
+    readonly useKeyModifier: UnwrapRef<
+      typeof import("@vueuse/core")["useKeyModifier"]
+    >;
+    readonly useLastChanged: UnwrapRef<
+      typeof import("@vueuse/core")["useLastChanged"]
+    >;
+    readonly useLocalStorage: UnwrapRef<
+      typeof import("@vueuse/core")["useLocalStorage"]
+    >;
+    readonly useMagicKeys: UnwrapRef<
+      typeof import("@vueuse/core")["useMagicKeys"]
+    >;
+    readonly useManualRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useManualRefHistory"]
+    >;
+    readonly useMediaControls: UnwrapRef<
+      typeof import("@vueuse/core")["useMediaControls"]
+    >;
+    readonly useMediaQuery: UnwrapRef<
+      typeof import("@vueuse/core")["useMediaQuery"]
+    >;
+    readonly useMemoize: UnwrapRef<typeof import("@vueuse/core")["useMemoize"]>;
+    readonly useMemory: UnwrapRef<typeof import("@vueuse/core")["useMemory"]>;
+    readonly useMounted: UnwrapRef<typeof import("@vueuse/core")["useMounted"]>;
+    readonly useMouse: UnwrapRef<typeof import("@vueuse/core")["useMouse"]>;
+    readonly useMouseInElement: UnwrapRef<
+      typeof import("@vueuse/core")["useMouseInElement"]
+    >;
+    readonly useMousePressed: UnwrapRef<
+      typeof import("@vueuse/core")["useMousePressed"]
+    >;
+    readonly useMutationObserver: UnwrapRef<
+      typeof import("@vueuse/core")["useMutationObserver"]
+    >;
+    readonly useNavigatorLanguage: UnwrapRef<
+      typeof import("@vueuse/core")["useNavigatorLanguage"]
+    >;
+    readonly useNetwork: UnwrapRef<typeof import("@vueuse/core")["useNetwork"]>;
+    readonly useNow: UnwrapRef<typeof import("@vueuse/core")["useNow"]>;
+    readonly useObjectUrl: UnwrapRef<
+      typeof import("@vueuse/core")["useObjectUrl"]
+    >;
+    readonly useOffsetPagination: UnwrapRef<
+      typeof import("@vueuse/core")["useOffsetPagination"]
+    >;
+    readonly useOnline: UnwrapRef<typeof import("@vueuse/core")["useOnline"]>;
+    readonly usePageLeave: UnwrapRef<
+      typeof import("@vueuse/core")["usePageLeave"]
+    >;
+    readonly useParallax: UnwrapRef<
+      typeof import("@vueuse/core")["useParallax"]
+    >;
+    readonly useParentElement: UnwrapRef<
+      typeof import("@vueuse/core")["useParentElement"]
+    >;
+    readonly usePerformanceObserver: UnwrapRef<
+      typeof import("@vueuse/core")["usePerformanceObserver"]
+    >;
+    readonly usePermission: UnwrapRef<
+      typeof import("@vueuse/core")["usePermission"]
+    >;
+    readonly usePointer: UnwrapRef<typeof import("@vueuse/core")["usePointer"]>;
+    readonly usePointerLock: UnwrapRef<
+      typeof import("@vueuse/core")["usePointerLock"]
+    >;
+    readonly usePointerSwipe: UnwrapRef<
+      typeof import("@vueuse/core")["usePointerSwipe"]
+    >;
+    readonly usePreferredColorScheme: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredColorScheme"]
+    >;
+    readonly usePreferredContrast: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredContrast"]
+    >;
+    readonly usePreferredDark: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredDark"]
+    >;
+    readonly usePreferredLanguages: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredLanguages"]
+    >;
+    readonly usePreferredReducedMotion: UnwrapRef<
+      typeof import("@vueuse/core")["usePreferredReducedMotion"]
+    >;
+    readonly usePrevious: UnwrapRef<
+      typeof import("@vueuse/core")["usePrevious"]
+    >;
+    readonly useRafFn: UnwrapRef<typeof import("@vueuse/core")["useRafFn"]>;
+    readonly useRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useRefHistory"]
+    >;
+    readonly useResizeObserver: UnwrapRef<
+      typeof import("@vueuse/core")["useResizeObserver"]
+    >;
+    readonly useScreenOrientation: UnwrapRef<
+      typeof import("@vueuse/core")["useScreenOrientation"]
+    >;
+    readonly useScreenSafeArea: UnwrapRef<
+      typeof import("@vueuse/core")["useScreenSafeArea"]
+    >;
+    readonly useScriptTag: UnwrapRef<
+      typeof import("@vueuse/core")["useScriptTag"]
+    >;
+    readonly useScroll: UnwrapRef<typeof import("@vueuse/core")["useScroll"]>;
+    readonly useScrollLock: UnwrapRef<
+      typeof import("@vueuse/core")["useScrollLock"]
+    >;
+    readonly useSessionStorage: UnwrapRef<
+      typeof import("@vueuse/core")["useSessionStorage"]
+    >;
+    readonly useShare: UnwrapRef<typeof import("@vueuse/core")["useShare"]>;
+    readonly useSlots: UnwrapRef<typeof import("vue")["useSlots"]>;
+    readonly useSorted: UnwrapRef<typeof import("@vueuse/core")["useSorted"]>;
+    readonly useSpeechRecognition: UnwrapRef<
+      typeof import("@vueuse/core")["useSpeechRecognition"]
+    >;
+    readonly useSpeechSynthesis: UnwrapRef<
+      typeof import("@vueuse/core")["useSpeechSynthesis"]
+    >;
+    readonly useStepper: UnwrapRef<typeof import("@vueuse/core")["useStepper"]>;
+    readonly useStorage: UnwrapRef<typeof import("@vueuse/core")["useStorage"]>;
+    readonly useStorageAsync: UnwrapRef<
+      typeof import("@vueuse/core")["useStorageAsync"]
+    >;
+    readonly useStyleTag: UnwrapRef<
+      typeof import("@vueuse/core")["useStyleTag"]
+    >;
+    readonly useSupported: UnwrapRef<
+      typeof import("@vueuse/core")["useSupported"]
+    >;
+    readonly useSwipe: UnwrapRef<typeof import("@vueuse/core")["useSwipe"]>;
+    readonly useTemplateRefsList: UnwrapRef<
+      typeof import("@vueuse/core")["useTemplateRefsList"]
+    >;
+    readonly useTextDirection: UnwrapRef<
+      typeof import("@vueuse/core")["useTextDirection"]
+    >;
+    readonly useTextSelection: UnwrapRef<
+      typeof import("@vueuse/core")["useTextSelection"]
+    >;
+    readonly useTextareaAutosize: UnwrapRef<
+      typeof import("@vueuse/core")["useTextareaAutosize"]
+    >;
+    readonly useThrottle: UnwrapRef<
+      typeof import("@vueuse/core")["useThrottle"]
+    >;
+    readonly useThrottleFn: UnwrapRef<
+      typeof import("@vueuse/core")["useThrottleFn"]
+    >;
+    readonly useThrottledRefHistory: UnwrapRef<
+      typeof import("@vueuse/core")["useThrottledRefHistory"]
+    >;
+    readonly useTimeAgo: UnwrapRef<typeof import("@vueuse/core")["useTimeAgo"]>;
+    readonly useTimeout: UnwrapRef<typeof import("@vueuse/core")["useTimeout"]>;
+    readonly useTimeoutFn: UnwrapRef<
+      typeof import("@vueuse/core")["useTimeoutFn"]
+    >;
+    readonly useTimeoutPoll: UnwrapRef<
+      typeof import("@vueuse/core")["useTimeoutPoll"]
+    >;
+    readonly useTimestamp: UnwrapRef<
+      typeof import("@vueuse/core")["useTimestamp"]
+    >;
+    readonly useTitle: UnwrapRef<typeof import("@vueuse/core")["useTitle"]>;
+    readonly useToNumber: UnwrapRef<
+      typeof import("@vueuse/core")["useToNumber"]
+    >;
+    readonly useToString: UnwrapRef<
+      typeof import("@vueuse/core")["useToString"]
+    >;
+    readonly useToggle: UnwrapRef<typeof import("@vueuse/core")["useToggle"]>;
+    readonly useTransition: UnwrapRef<
+      typeof import("@vueuse/core")["useTransition"]
+    >;
+    readonly useUrlSearchParams: UnwrapRef<
+      typeof import("@vueuse/core")["useUrlSearchParams"]
+    >;
+    readonly useUserMedia: UnwrapRef<
+      typeof import("@vueuse/core")["useUserMedia"]
+    >;
+    readonly useVModel: UnwrapRef<typeof import("@vueuse/core")["useVModel"]>;
+    readonly useVModels: UnwrapRef<typeof import("@vueuse/core")["useVModels"]>;
+    readonly useVibrate: UnwrapRef<typeof import("@vueuse/core")["useVibrate"]>;
+    readonly useVirtualList: UnwrapRef<
+      typeof import("@vueuse/core")["useVirtualList"]
+    >;
+    readonly useWakeLock: UnwrapRef<
+      typeof import("@vueuse/core")["useWakeLock"]
+    >;
+    readonly useWebNotification: UnwrapRef<
+      typeof import("@vueuse/core")["useWebNotification"]
+    >;
+    readonly useWebSocket: UnwrapRef<
+      typeof import("@vueuse/core")["useWebSocket"]
+    >;
+    readonly useWebWorker: UnwrapRef<
+      typeof import("@vueuse/core")["useWebWorker"]
+    >;
+    readonly useWebWorkerFn: UnwrapRef<
+      typeof import("@vueuse/core")["useWebWorkerFn"]
+    >;
+    readonly useWindowFocus: UnwrapRef<
+      typeof import("@vueuse/core")["useWindowFocus"]
+    >;
+    readonly useWindowScroll: UnwrapRef<
+      typeof import("@vueuse/core")["useWindowScroll"]
+    >;
+    readonly useWindowSize: UnwrapRef<
+      typeof import("@vueuse/core")["useWindowSize"]
+    >;
+    readonly watch: UnwrapRef<typeof import("vue")["watch"]>;
+    readonly watchArray: UnwrapRef<typeof import("@vueuse/core")["watchArray"]>;
+    readonly watchAtMost: UnwrapRef<
+      typeof import("@vueuse/core")["watchAtMost"]
+    >;
+    readonly watchDebounced: UnwrapRef<
+      typeof import("@vueuse/core")["watchDebounced"]
+    >;
+    readonly watchDeep: UnwrapRef<typeof import("@vueuse/core")["watchDeep"]>;
+    readonly watchEffect: UnwrapRef<typeof import("vue")["watchEffect"]>;
+    readonly watchIgnorable: UnwrapRef<
+      typeof import("@vueuse/core")["watchIgnorable"]
+    >;
+    readonly watchImmediate: UnwrapRef<
+      typeof import("@vueuse/core")["watchImmediate"]
+    >;
+    readonly watchOnce: UnwrapRef<typeof import("@vueuse/core")["watchOnce"]>;
+    readonly watchPausable: UnwrapRef<
+      typeof import("@vueuse/core")["watchPausable"]
+    >;
+    readonly watchPostEffect: UnwrapRef<
+      typeof import("vue")["watchPostEffect"]
+    >;
+    readonly watchSyncEffect: UnwrapRef<
+      typeof import("vue")["watchSyncEffect"]
+    >;
+    readonly watchThrottled: UnwrapRef<
+      typeof import("@vueuse/core")["watchThrottled"]
+    >;
+    readonly watchTriggerable: UnwrapRef<
+      typeof import("@vueuse/core")["watchTriggerable"]
+    >;
+    readonly watchWithFilter: UnwrapRef<
+      typeof import("@vueuse/core")["watchWithFilter"]
+    >;
+    readonly whenever: UnwrapRef<typeof import("@vueuse/core")["whenever"]>;
+  }
+}
diff --git a/src/types/common.d.ts b/src/types/common.d.ts
deleted file mode 100644
index 1aeff93f..00000000
--- a/src/types/common.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * 组件类型声明
- */
-
-/**
- * 弹窗属性类型声明
- */
-export interface Dialog {
-    title: string,
-    visible: boolean
-}
-
-/**
- * 通用组件选择项类型声明
- */
-export interface Option {
-    value: string,
-    label: string
-    children?: Option[]
-}
-
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
new file mode 100644
index 00000000..d2439624
--- /dev/null
+++ b/src/types/components.d.ts
@@ -0,0 +1,99 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {};
+
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    AppMain: typeof import("./../layout/components/AppMain.vue")["default"];
+    BarChart: typeof import("./../views/dashboard/components/BarChart.vue")["default"];
+    Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
+    ElAlert: typeof import("element-plus/es")["ElAlert"];
+    ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
+    ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
+    ElButton: typeof import("element-plus/es")["ElButton"];
+    ElCard: typeof import("element-plus/es")["ElCard"];
+    ElCol: typeof import("element-plus/es")["ElCol"];
+    ElDialog: typeof import("element-plus/es")["ElDialog"];
+    ElDivider: typeof import("element-plus/es")["ElDivider"];
+    ElDropdown: typeof import("element-plus/es")["ElDropdown"];
+    ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
+    ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
+    ElForm: typeof import("element-plus/es")["ElForm"];
+    ElFormItem: typeof import("element-plus/es")["ElFormItem"];
+    ElIcon: typeof import("element-plus/es")["ElIcon"];
+    ElInput: typeof import("element-plus/es")["ElInput"];
+    ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
+    ElLink: typeof import("element-plus/es")["ElLink"];
+    ElMenu: typeof import("element-plus/es")["ElMenu"];
+    ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
+    ElOption: typeof import("element-plus/es")["ElOption"];
+    ElPagination: typeof import("element-plus/es")["ElPagination"];
+    ElPopover: typeof import("element-plus/es")["ElPopover"];
+    ElRadio: typeof import("element-plus/es")["ElRadio"];
+    ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
+    ElRow: typeof import("element-plus/es")["ElRow"];
+    ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
+    ElSelect: typeof import("element-plus/es")["ElSelect"];
+    ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
+    ElSwitch: typeof import("element-plus/es")["ElSwitch"];
+    ElTable: typeof import("element-plus/es")["ElTable"];
+    ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
+    ElTag: typeof import("element-plus/es")["ElTag"];
+    ElTooltip: typeof import("element-plus/es")["ElTooltip"];
+    ElTree: typeof import("element-plus/es")["ElTree"];
+    ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
+    ElUpload: typeof import("element-plus/es")["ElUpload"];
+    FunnelChart: typeof import("./../views/dashboard/components/FunnelChart.vue")["default"];
+    GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"];
+    Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
+    IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
+    IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
+    IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
+    IEpCaretTop: typeof import("~icons/ep/caret-top")["default"];
+    IEpClose: typeof import("~icons/ep/close")["default"];
+    IEpCollection: typeof import("~icons/ep/collection")["default"];
+    IEpDelete: typeof import("~icons/ep/delete")["default"];
+    IEpDownload: typeof import("~icons/ep/download")["default"];
+    IEpEdit: typeof import("~icons/ep/edit")["default"];
+    IEpPlus: typeof import("~icons/ep/plus")["default"];
+    IEpPosition: typeof import("~icons/ep/position")["default"];
+    IEpRefresh: typeof import("~icons/ep/refresh")["default"];
+    IEpRefreshLeft: typeof import("~icons/ep/refresh-left")["default"];
+    IEpSearch: typeof import("~icons/ep/search")["default"];
+    IEpSetting: typeof import("~icons/ep/setting")["default"];
+    IEpSortDown: typeof import("~icons/ep/sort-down")["default"];
+    IEpSortUp: typeof import("~icons/ep/sort-up")["default"];
+    IEpTop: typeof import("~icons/ep/top")["default"];
+    IEpUploadFilled: typeof import("~icons/ep/upload-filled")["default"];
+    LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
+    Link: typeof import("./../layout/components/Sidebar/Link.vue")["default"];
+    Logo: typeof import("./../layout/components/Sidebar/Logo.vue")["default"];
+    MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"];
+    Navbar: typeof import("./../layout/components/Navbar.vue")["default"];
+    Pagination: typeof import("./../components/Pagination/index.vue")["default"];
+    PieChart: typeof import("./../views/dashboard/components/PieChart.vue")["default"];
+    RadarChart: typeof import("./../views/dashboard/components/RadarChart.vue")["default"];
+    RightPanel: typeof import("./../components/RightPanel/index.vue")["default"];
+    RouterLink: typeof import("vue-router")["RouterLink"];
+    RouterView: typeof import("vue-router")["RouterView"];
+    ScrollPane: typeof import("./../layout/components/TagsView/ScrollPane.vue")["default"];
+    Settings: typeof import("./../layout/components/Settings/index.vue")["default"];
+    Sidebar: typeof import("./../layout/components/Sidebar/index.vue")["default"];
+    SidebarItem: typeof import("./../layout/components/Sidebar/SidebarItem.vue")["default"];
+    SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"];
+    SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
+    SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
+    TagInput: typeof import("./../components/TagInput/index.vue")["default"];
+    TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
+    WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
+    Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import("element-plus/es")["ElLoadingDirective"];
+  }
+}
diff --git a/src/types/env.d.ts b/src/types/env.d.ts
new file mode 100644
index 00000000..d9cdd46b
--- /dev/null
+++ b/src/types/env.d.ts
@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+// 环境变量 TypeScript的智能提示
+interface ImportMetaEnv {
+  VITE_APP_TITLE: string;
+  VITE_APP_PORT: string;
+  VITE_APP_BASE_API: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare module "lodash-es";
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 00000000..ad7b72b9
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1,55 @@
+declare global {
+  /**
+   * 分页查询参数
+   */
+  interface PageQuery {
+    pageNum: number;
+    pageSize: number;
+  }
+
+  /**
+   * 分页响应对象
+   */
+  interface PageResult<T> {
+    /**
+     * 数据列表
+     */
+    list: T;
+    /**
+     * 数据总数
+     */
+    total: number;
+  }
+
+  /**
+   * 弹窗属性
+   */
+  interface DialogOption {
+    /**
+     * 弹窗标题
+     */
+    title?: string;
+    /**
+     * 是否显示
+     */
+    visible: boolean;
+  }
+  /**
+   * 组件数据源
+   */
+  interface OptionType {
+    /**
+     * 值
+     */
+    value: number;
+    /**
+     * 文本
+     */
+    label: string;
+    /**
+     * 子列表
+     */
+    children?: OptionType[];
+  }
+}
+export {};
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
deleted file mode 100644
index c5840fad..00000000
--- a/src/types/index.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-
-export * from './api/system/login'
-export * from './api/system/user'
-export * from './api/system/role'
-export * from './api/system/menu'
-export * from './api/system/dept'
-export * from './api/system/dict'
-export * from './api/system/perm'
-export * from './api/system/client'
-
-
-export * from './api/pms/goods'
-export * from './api/pms/brand'
-export * from './api/sms/advert'
-export * from './api/oms/order'
-export * from './api/ums/member'
-
-export * from './store'
-
-export * from './common'
-
diff --git a/src/types/store.d.ts b/src/types/store.d.ts
deleted file mode 100644
index 5ac33d67..00000000
--- a/src/types/store.d.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-
-import {RouteRecordRaw,RouteLocationNormalized} from "vue-router";
-/**
- * 用户状态类型声明
- */
- export interface AppState {
-    device: string,
-    sidebar: {
-        opened: boolean,
-        withoutAnimation: boolean
-    },
-    language:string,
-    size:string
-}
-
-
-/**
- * 权限类型声明
- */
-export interface PermissionState{
-    routes:RouteRecordRaw[]
-    addRoutes: RouteRecordRaw[]
-}
-
-/**
- * 设置状态类型声明
- */
- export interface SettingState {
-    theme: string,
-    tagsView: boolean,
-    fixedHeader: boolean,
-    showSettings: boolean,
-    sidebarLogo: boolean
-}
-
-/**
- * 标签状态类型声明
- */
- export interface TagView extends Partial<RouteLocationNormalized> {
-    title?: string
-}
-
-export interface TagsViewState{
-    visitedViews: TagView[],
-    cachedViews: (string)[]
-}
-
-/**
- * 用户状态类型声明
- */
- export interface UserState {
-    token: string,
-    nickname: string,
-    avatar: string,
-    roles: string[],
-    perms: string[]
-}
diff --git a/src/utils/filter.ts b/src/utils/filter.ts
deleted file mode 100644
index b5c9871b..00000000
--- a/src/utils/filter.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-
-/**
- * Show plural label if time is plural number
- * @param {number} time
- * @param {string} label
- * @return {string}
- */
-function pluralize(time:number, label:string) {
-  if (time === 1) {
-    return time + label
-  }
-  return time + label + 's'
-}
-
-/**
- * @param {number} time
- */
-export function timeAgo(time:number) {
-  const between = Date.now() / 1000 - Number(time)
-  if (between < 3600) {
-    return pluralize(~~(between / 60), ' minute')
-  } else if (between < 86400) {
-    return pluralize(~~(between / 3600), ' hour')
-  } else {
-    return pluralize(~~(between / 86400), ' day')
-  }
-}
-
-/**
- * Number formatting
- * like 10000 => 10k
- * @param {number} num
- * @param {number} digits
- */
-export function numberFormatter(num:number, digits:number) {
-  const si = [
-    {value: 1E18, symbol: 'E'},
-    {value: 1E15, symbol: 'P'},
-    {value: 1E12, symbol: 'T'},
-    {value: 1E9, symbol: 'G'},
-    {value: 1E6, symbol: 'M'},
-    {value: 1E3, symbol: 'k'}
-  ]
-  for (let i = 0; i < si.length; i++) {
-    if (num >= si[i].value) {
-      return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol
-    }
-  }
-  return num.toString()
-}
-
-/**
- * 10000 => "10,000"
- * @param {number} num
- */
-export function toThousandFilter(num:number) {
-  return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
-}
-
-/**
- * Upper case first char
- * @param {String} string
- */
-export function uppercaseFirst(string:string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
-
-
-/**
- * 金额转换（分->元）
- * 100 => 1
- * @param {number} num
- */
-export function moneyFormatter(num:number) {
-  return '¥'+(isNaN(num) ? 0.00 : parseFloat((num / 100).toFixed(2)))
-}
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index 06d8dede..c081ede6 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -1,12 +1,12 @@
 // translate router.meta.title, be used in breadcrumb sidebar tagsview
-import i18n from "@/lang/index";
+import i18n from '@/lang/index';
 
-export function generateTitle(title: any) {
-    // 判断是否存在国际化配置，如果没有原生返回
-    const hasKey = i18n.global.te('route.' + title)
-    if (hasKey) {
-        const translatedTitle = i18n.global.t('route.' + title)
-        return translatedTitle
-    }
-    return title
-}
\ No newline at end of file
+export function translateRouteTitleI18n(title: any) {
+  // 判断是否存在国际化配置，如果没有原生返回
+  const hasKey = i18n.global.te('route.' + title);
+  if (hasKey) {
+    const translatedTitle = i18n.global.t('route.' + title);
+    return translatedTitle;
+  }
+  return title;
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index a29e5006..0d626608 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,47 +1,39 @@
 /**
  * Check if an element has a class
- * @param {HTMLElement} elm
+ * @param {HTMLElement} ele
  * @param {string} cls
  * @returns {boolean}
  */
 export function hasClass(ele: HTMLElement, cls: string) {
-    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
 }
 
 /**
  * Add class to element
- * @param {HTMLElement} elm
+ * @param {HTMLElement} ele
  * @param {string} cls
  */
 export function addClass(ele: HTMLElement, cls: string) {
-    if (!hasClass(ele, cls)) ele.className += ' ' + cls
+  if (!hasClass(ele, cls)) ele.className += " " + cls;
 }
 
 /**
  * Remove class from element
- * @param {HTMLElement} elm
+ * @param {HTMLElement} ele
  * @param {string} cls
  */
 export function removeClass(ele: HTMLElement, cls: string) {
-    if (hasClass(ele, cls)) {
-        const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
-        ele.className = ele.className.replace(reg, ' ')
-    }
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+    ele.className = ele.className.replace(reg, " ");
+  }
 }
 
-export function mix(color1: string, color2: string, weight: number) {
-    weight = Math.max(Math.min(Number(weight), 1), 0);
-    let r1 = parseInt(color1.substring(1, 3), 16);
-    let g1 = parseInt(color1.substring(3, 5), 16);
-    let b1 = parseInt(color1.substring(5, 7), 16);
-    let r2 = parseInt(color2.substring(1, 3), 16);
-    let g2 = parseInt(color2.substring(3, 5), 16);
-    let b2 = parseInt(color2.substring(5, 7), 16);
-    let r = Math.round(r1 * (1 - weight) + r2 * weight);
-    let g = Math.round(g1 * (1 - weight) + g2 * weight);
-    let b = Math.round(b1 * (1 - weight) + b2 * weight);
-    const rStr = ("0" + (r || 0).toString(16)).slice(-2);
-    const gStr = ("0" + (g || 0).toString(16)).slice(-2);
-    const bStr = ("0" + (b || 0).toString(16)).slice(-2);
-    return "#" + rStr + gStr + bStr;
-};
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path: string) {
+  const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path);
+  return isExternal;
+}
diff --git a/src/utils/request.ts b/src/utils/request.ts
index edf75d05..5c7a95bb 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -1,70 +1,61 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { localStorage } from "@/utils/storage";
-import useStore from "@/store";
+import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
+import { useUserStoreHook } from '@/store/modules/user';
 
 // 创建 axios 实例
 const service = axios.create({
-    baseURL: import.meta.env.VITE_APP_BASE_API,
-    timeout: 50000,
-    headers: { 'Content-Type': 'application/json;charset=utf-8' }
-})
+  baseURL: import.meta.env.VITE_APP_BASE_API,
+  timeout: 50000,
+  headers: { 'Content-Type': 'application/json;charset=utf-8' }
+});
 
 // 请求拦截器
 service.interceptors.request.use(
-    (config: AxiosRequestConfig) => {
-        if (!config.headers) {
-            throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
-        }
-        const { user } = useStore()
-        if (user.token) {
-            config.headers.Authorization = `${localStorage.get('token')}`;
-        }
-        return config
-    }, (error) => {
-        return Promise.reject(error);
+  (config: InternalAxiosRequestConfig) => {
+    const userStore = useUserStoreHook();
+    if (userStore.token) {
+      config.headers.Authorization = userStore.token;
     }
-)
+    return config;
+  },
+  (error: any) => {
+    return Promise.reject(error);
+  }
+);
 
 // 响应拦截器
 service.interceptors.response.use(
-    (response: AxiosResponse) => {
-        const { code, msg } = response.data;
-        if (code === '00000') {
-            return response.data;
-        } else {
-
-             // 响应数据为二进制流处理(Excel导出)
-             if (response.data instanceof ArrayBuffer) {
-                return response
-            }
+  (response: AxiosResponse) => {
+    const { code, msg } = response.data;
+    if (code === '00000') {
+      return response.data;
+    }
+    // 响应数据为二进制流处理(Excel导出)
+    if (response.data instanceof ArrayBuffer) {
+      return response;
+    }
 
-            ElMessage({
-                message: msg || '系统出错',
-                type: 'error'
-            })
-            return Promise.reject(new Error(msg || 'Error'))
-        }
-    },
-    (error) => {
-        const { code, msg } = error.response.data
-        if (code === 'A0230') {  // token 过期
-            localStorage.clear(); // 清除浏览器全部缓存
-            window.location.href = '/'; // 跳转登录页
-            ElMessageBox.alert('当前页面已失效，请重新登录', '提示', {})
-                .then(() => {
-                })
-                .catch(() => {
-                });
-        } else {
-            ElMessage({
-                message: msg || '系统出错',
-                type: 'error'
-            })
-        }
-        return Promise.reject(new Error(msg || 'Error'))
+    ElMessage.error(msg || '系统出错');
+    return Promise.reject(new Error(msg || 'Error'));
+  },
+  (error: any) => {
+    if (error.response.data) {
+      const { code, msg } = error.response.data;
+      // token 过期,重新登录
+      if (code === 'A0230') {
+        ElMessageBox.confirm('当前页面已失效，请重新登录', '提示', {
+          confirmButtonText: '确定',
+          type: 'warning'
+        }).then(() => {
+          localStorage.clear();
+          window.location.href = '/';
+        });
+      } else {
+        ElMessage.error(msg || '系统出错');
+      }
     }
+    return Promise.reject(error.message);
+  }
 );
 
 // 导出 axios 实例
-export default service
+export default service;
diff --git a/src/utils/resize.ts b/src/utils/resize.ts
deleted file mode 100644
index 7b87e539..00000000
--- a/src/utils/resize.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-
-import { ref } from 'vue'
-export default function() {
-    const chart = ref<any>()
-    const sidebarElm = ref<Element>()
-
-    const chartResizeHandler = () => {
-        if (chart.value) {
-            chart.value.resize()
-        }
-    }
-
-    const sidebarResizeHandler = (e: TransitionEvent) => {
-        if (e.propertyName === 'width') {
-            chartResizeHandler()
-        }
-    }
-
-    const initResizeEvent = () => {
-        window.addEventListener('resize', chartResizeHandler)
-    }
-
-    const destroyResizeEvent = () => {
-        window.removeEventListener('resize', chartResizeHandler)
-    }
-
-    const initSidebarResizeEvent = () => {
-        sidebarElm.value = document.getElementsByClassName('sidebar-container')[0]
-        if (sidebarElm.value) {
-            sidebarElm.value.addEventListener('transitionend', sidebarResizeHandler as EventListener)
-        }
-    }
-
-    const destroySidebarResizeEvent = () => {
-        if (sidebarElm.value) {
-            sidebarElm.value.removeEventListener('transitionend', sidebarResizeHandler as EventListener)
-        }
-    }
-
-    const mounted = () => {
-        initResizeEvent()
-        initSidebarResizeEvent()
-    }
-
-    const beforeDestroy = () => {
-        destroyResizeEvent()
-        destroySidebarResizeEvent()
-    }
-
-    const activated = () => {
-        initResizeEvent()
-        initSidebarResizeEvent()
-    }
-
-    const deactivated = () => {
-        destroyResizeEvent()
-        destroySidebarResizeEvent()
-    }
-
-    return {
-        chart,
-        mounted,
-        beforeDestroy,
-        activated,
-        deactivated
-    }
-}
diff --git a/src/utils/scroll-to.ts b/src/utils/scroll-to.ts
index 9c24d8d9..591e3ec0 100644
--- a/src/utils/scroll-to.ts
+++ b/src/utils/scroll-to.ts
@@ -1,61 +1,69 @@
 const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
-    t /= d / 2
-    if (t < 1) {
-        return c / 2 * t * t + b
-    }
-    t--
-    return -c / 2 * (t * (t - 2) - 1) + b
-}
-
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t * t + b;
+  }
+  t--;
+  return (-c / 2) * (t * (t - 2) - 1) + b;
+};
 
 // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
 const requestAnimFrame = (function () {
-    return window.requestAnimationFrame || (window as any).webkitRequestAnimationFrame || (window as any).mozRequestAnimationFrame || function (callback) {
-        window.setTimeout(callback, 1000 / 60)
+  return (
+    window.requestAnimationFrame ||
+    (window as any).webkitRequestAnimationFrame ||
+    (window as any).mozRequestAnimationFrame ||
+    function (callback) {
+      window.setTimeout(callback, 1000 / 60);
     }
-})()
+  );
+})();
 
 /**
  * Because it's so fucking difficult to detect the scrolling element, just move them all
  * @param {number} amount
  */
 const move = (amount: number) => {
-    document.documentElement.scrollTop = amount;
-    (document.body.parentNode as HTMLElement).scrollTop = amount
-    document.body.scrollTop = amount
-}
+  document.documentElement.scrollTop = amount;
+  (document.body.parentNode as HTMLElement).scrollTop = amount;
+  document.body.scrollTop = amount;
+};
 
 const position = () => {
-    return document.documentElement.scrollTop || (document.body.parentNode as HTMLElement).scrollTop || document.body.scrollTop
-}
+  return (
+    document.documentElement.scrollTop ||
+    (document.body.parentNode as HTMLElement).scrollTop ||
+    document.body.scrollTop
+  );
+};
 
 /**
  * @param {number} to
  * @param {number} duration
  * @param {Function} callback
  */
-export const scrollTo = (to: number, duration: number, callback?: Function) => {
-    const start = position()
-    const change = to - start
-    const increment = 20
-    let currentTime = 0
-    duration = (typeof (duration) === 'undefined') ? 500 : duration
-    const animateScroll = function () {
-        // increment the time
-        currentTime += increment
-        // find the value with the quadratic in-out easing function
-        const val = easeInOutQuad(currentTime, start, change, duration)
-        // move the document.body
-        move(val)
-        // do the animation unless its over
-        if (currentTime < duration) {
-            requestAnimFrame(animateScroll)
-        } else {
-            if (callback && typeof (callback) === 'function') {
-                // the animation is done so lets callback
-                callback()
-            }
-        }
+export const scrollTo = (to: number, duration: number, callback?: any) => {
+  const start = position();
+  const change = to - start;
+  const increment = 20;
+  let currentTime = 0;
+  duration = typeof duration === 'undefined' ? 500 : duration;
+  const animateScroll = function () {
+    // increment the time
+    currentTime += increment;
+    // find the value with the quadratic in-out easing function
+    const val = easeInOutQuad(currentTime, start, change, duration);
+    // move the document.body
+    move(val);
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll);
+    } else {
+      if (callback && typeof callback === 'function') {
+        // the animation is done so lets callback
+        callback();
+      }
     }
-    animateScroll()
-}
+  };
+  animateScroll();
+};
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
deleted file mode 100644
index 29aac5fe..00000000
--- a/src/utils/storage.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * window.localStorage 浏览器永久缓存
- */
-export const localStorage = {
-    // 设置永久缓存
-    set(key: string, val: any) {
-        window.localStorage.setItem(key, JSON.stringify(val));
-    },
-    // 获取永久缓存
-    get(key: string) {
-        let json: any = window.localStorage.getItem(key);
-        return JSON.parse(json);
-    },
-    // 移除永久缓存
-    remove(key: string) {
-        window.localStorage.removeItem(key);
-    },
-    // 移除全部永久缓存
-    clear() {
-        window.localStorage.clear();
-    }
-};
-
-/**
- * window.sessionStorage 浏览器临时缓存
- */
-export const sessionStorage = {
-    // 设置临时缓存
-    set(key: string, val: any) {
-        window.sessionStorage.setItem(key, JSON.stringify(val));
-    },
-    // 获取临时缓存
-    get(key: string) {
-        let json: any = window.sessionStorage.getItem(key);
-        return JSON.parse(json);
-    },
-    // 移除临时缓存
-    remove(key: string) {
-        window.sessionStorage.removeItem(key);
-    },
-    // 移除全部临时缓存
-    clear() {
-        window.sessionStorage.clear();
-    }
-};
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
deleted file mode 100644
index 19e07050..00000000
--- a/src/utils/validate.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Created by PanJiaChen on 16/11/18.
- */
-
-/**
- * @param {string} path
- * @returns {Boolean}
- */
-export function isExternal(path: string) {
-    const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path)
-    return isExternal
-}
-
diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
new file mode 100644
index 00000000..fa581bfc
--- /dev/null
+++ b/src/views/dashboard/components/BarChart.vue
@@ -0,0 +1,197 @@
+<!--  线 + 柱混合图 -->
+<template>
+  <el-card>
+    <template #header>
+      <div class="title">
+        业绩柱状图
+        <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
+          <i-ep-download
+            class="download"
+            @click="downloadEchart"
+          ></i-ep-download>
+        </el-tooltip>
+      </div>
+    </template>
+
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import * as echarts from "echarts";
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: "barChart",
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "200px",
+    required: true,
+  },
+  height: {
+    type: String,
+    default: "200px",
+    required: true,
+  },
+});
+
+const options = {
+  grid: {
+    left: "2%",
+    right: "2%",
+    bottom: "10%",
+    containLabel: true,
+  },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "cross",
+      crossStyle: {
+        color: "#999",
+      },
+    },
+  },
+  legend: {
+    x: "center",
+    y: "bottom",
+    data: ["收入", "毛利润", "收入增长率", "利润增长率"],
+    textStyle: {
+      color: "#999",
+    },
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: ["浙江", "北京", "上海", "广东", "深圳"],
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      min: 0,
+      max: 10000,
+      interval: 2000,
+      axisLabel: {
+        formatter: "{value} ",
+      },
+    },
+    {
+      type: "value",
+      min: 0,
+      max: 100,
+      interval: 20,
+      axisLabel: {
+        formatter: "{value}%",
+      },
+    },
+  ],
+  series: [
+    {
+      name: "收入",
+      type: "bar",
+      data: [7000, 7100, 7200, 7300, 7400],
+      barWidth: 20,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#83bff6" },
+          { offset: 0.5, color: "#188df0" },
+          { offset: 1, color: "#188df0" },
+        ]),
+      },
+    },
+    {
+      name: "毛利润",
+      type: "bar",
+      data: [8000, 8200, 8400, 8600, 8800],
+      barWidth: 20,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: "#25d73c" },
+          { offset: 0.5, color: "#1bc23d" },
+          { offset: 1, color: "#179e61" },
+        ]),
+      },
+    },
+    {
+      name: "收入增长率",
+      type: "line",
+      yAxisIndex: 1,
+      data: [60, 65, 70, 75, 80],
+      itemStyle: {
+        color: "#67C23A",
+      },
+    },
+    {
+      name: "利润增长率",
+      type: "line",
+      yAxisIndex: 1,
+      data: [70, 75, 80, 85, 90],
+      itemStyle: {
+        color: "#409EFF",
+      },
+    },
+  ],
+};
+const chart = ref<any>("");
+onMounted(() => {
+  // 图表初始化
+  chart.value = markRaw(
+    echarts.init(document.getElementById(props.id) as HTMLDivElement)
+  );
+
+  chart.value.setOption(options);
+
+  // 大小自适应
+  window.addEventListener("resize", () => {
+    chart.value.resize();
+  });
+});
+const downloadEchart = () => {
+  // 获取画布图表地址信息
+  const img = new Image();
+  img.src = chart.value.getDataURL({
+    type: "png",
+    pixelRatio: 1,
+    backgroundColor: "#fff",
+  });
+  // 当图片加载完成后，生成 URL 并下载
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.drawImage(img, 0, 0, img.width, img.height);
+      const link = document.createElement("a");
+      link.download = `业绩柱状图.png`;
+      link.href = canvas.toDataURL("image/png", 0.9);
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+    }
+  };
+};
+</script>
+<style lang="scss" scoped>
+.title {
+  display: flex;
+  justify-content: space-between;
+
+  .download {
+    cursor: pointer;
+
+    &:hover {
+      color: #409eff;
+    }
+  }
+}
+</style>
diff --git a/src/views/dashboard/components/Chart/BarChart.vue b/src/views/dashboard/components/Chart/BarChart.vue
deleted file mode 100644
index 29634fd1..00000000
--- a/src/views/dashboard/components/Chart/BarChart.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<!--  线 + 柱混合图 -->
-<template>
-  <div
-      :id="id"
-      :class="className"
-      :style="{height, width}"
-  />
-</template>
-
-<script setup lang="ts">
-import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
-import {init, EChartsOption} from 'echarts'
-import * as echarts from 'echarts';
-import resize from '@/utils/resize'
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: 'barChart'
-  },
-  className: {
-    type: String,
-    default: ''
-  },
-  width: {
-    type: String,
-    default: '200px',
-    required: true
-  },
-  height: {
-    type: String,
-    default: '200px',
-    required: true
-  }
-})
-
-const {
-  mounted,
-  chart,
-  beforeDestroy,
-  activated,
-  deactivated
-} = resize()
-
-function initChart() {
-  const barChart = init(document.getElementById(props.id) as HTMLDivElement)
-
-  barChart.setOption({
-    title: {
-      show: true,
-      text: '业绩总览(2021年)',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'cross',
-        crossStyle: {
-          color: '#999'
-        }
-      }
-    },
-    legend: {
-      x: 'center',
-      y: 'bottom',
-      data: ['收入', '毛利润', '收入增长率', '利润增长率']
-    },
-    xAxis: [
-      {
-        type: 'category',
-        data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽'],
-        axisPointer: {
-          type: 'shadow'
-        }
-      }
-    ],
-    yAxis: [
-      {
-        type: 'value',
-        min: 0,
-        max: 10000,
-        interval: 2000,
-        axisLabel: {
-          formatter: '{value} '
-        }
-      },
-      {
-        type: 'value',
-        min: 0,
-        max: 100,
-        interval: 20,
-        axisLabel: {
-          formatter: '{value}%'
-        }
-      }
-    ],
-    series: [
-      {
-        name: '收入',
-        type: 'bar',
-        data: [
-          8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800,
-        ],
-        barWidth: 20,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#83bff6' },
-            { offset: 0.5, color: '#188df0' },
-            { offset: 1, color: '#188df0' }
-          ])
-        }
-      },
-      {
-        name: '毛利润',
-        type: 'bar',
-        data: [
-          6700, 6800, 6300, 5213, 4500, 4200, 4200, 3800
-        ],
-        barWidth: 20,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#25d73c' },
-            { offset: 0.5, color: '#1bc23d' },
-            { offset: 1, color: '#179e61' }
-          ])
-        }
-      },
-      {
-        name: '收入增长率',
-        type: 'line',
-        yAxisIndex: 1,
-        data: [65, 67, 65, 53, 47, 45, 43, 42, 41],
-        itemStyle: {
-          color: '#67C23A'
-        }
-      },
-      {
-        name: '利润增长率',
-        type: 'line',
-        yAxisIndex: 1,
-        data: [80, 81, 78, 67, 65, 60, 56,51, 45 ],
-        itemStyle: {
-          color: '#409EFF'
-        }
-      }
-    ]
-  } as EChartsOption)
-  chart.value = barChart
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy()
-})
-
-onActivated(() => {
-  activated()
-})
-
-onDeactivated(() => {
-  deactivated()
-})
-
-onMounted(() => {
-  mounted()
-  nextTick(() => {
-    initChart()
-  })
-})
-
-</script>
\ No newline at end of file
diff --git a/src/views/dashboard/components/Chart/FunnelChart.vue b/src/views/dashboard/components/Chart/FunnelChart.vue
deleted file mode 100644
index 3234d992..00000000
--- a/src/views/dashboard/components/Chart/FunnelChart.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!-- 漏斗图 -->
-<template>
-  <div
-      :id="id"
-      :class="className"
-      :style="{height, width}"
-  />
-</template>
-
-<script setup lang="ts">
-import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
-import {init, EChartsOption} from 'echarts'
-import resize from '@/utils/resize'
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: 'funnelChart'
-  },
-  className: {
-    type: String,
-    default: ''
-  },
-  width: {
-    type: String,
-    default: '200px',
-    required: true
-  },
-  height: {
-    type: String,
-    default: '200px',
-    required: true
-  }
-})
-
-const {
-  mounted,
-  chart,
-  beforeDestroy,
-  activated,
-  deactivated
-} = resize()
-
-function initChart() {
-  const funnelChart = init(document.getElementById(props.id) as HTMLDivElement)
-
-  funnelChart.setOption({
-    title: {
-      show: true,
-      text: '订单线索转化漏斗图',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color:'#337ecc'
-      }
-    },
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    legend: {
-      x: 'center',
-      y: 'bottom',
-      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
-    },
-
-    series: [
-      {
-        name: 'Funnel',
-        type: 'funnel',
-        left: '20%',
-        top: 60,
-        bottom: 60,
-        width: '60%',
-        min: 0,
-        max: 100,
-        minSize: '0%',
-        maxSize: '100%',
-        sort: 'descending',
-        gap: 2,
-        label: {
-          show: true,
-          position: 'inside'
-        },
-        labelLine: {
-          length: 10,
-          lineStyle: {
-            width: 1,
-            type: 'solid'
-          }
-        },
-        itemStyle: {
-          borderColor: '#fff',
-          borderWidth: 1
-        },
-        emphasis: {
-          label: {
-            fontSize: 20
-          }
-        },
-        data: [
-          { value: 60, name: 'Visit' },
-          { value: 40, name: 'Inquiry' },
-          { value: 20, name: 'Order' },
-          { value: 80, name: 'Click' },
-          { value: 100, name: 'Show' }
-        ]
-      }
-    ]
-  } as EChartsOption)
-  chart.value = funnelChart
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy()
-})
-
-onActivated(() => {
-  activated()
-})
-
-onDeactivated(() => {
-  deactivated()
-})
-
-onMounted(() => {
-  mounted()
-  nextTick(() => {
-    initChart()
-  })
-})
-
-</script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/Chart/PieChart.vue b/src/views/dashboard/components/Chart/PieChart.vue
deleted file mode 100644
index d648d393..00000000
--- a/src/views/dashboard/components/Chart/PieChart.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<!-- 饼图 -->
-<template>
-  <div
-      :id="id"
-      :class="className"
-      :style="{height, width}"
-  />
-</template>
-
-<script setup lang="ts">
-import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
-import {init, EChartsOption} from 'echarts'
-import resize from "@/utils/resize";
-import * as echarts from "echarts";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: 'pieChart'
-  },
-  className: {
-    type: String,
-    default: ''
-  },
-  width: {
-    type: String,
-    default: '200px',
-    required: true
-  },
-  height: {
-    type: String,
-    default: '200px',
-    required: true
-  }
-})
-
-const {
-  mounted,
-  chart,
-  beforeDestroy,
-  activated,
-  deactivated
-} = resize()
-
-function initChart() {
-  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
-
-  pieChart.setOption({
-    title: {
-      show: true,
-      text: '产品分类总览南丁格尔饼图',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color: '#337ecc'
-      }
-    },
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    legend: {
-      top: 'bottom'
-    },
-    series: [
-      {
-        name: 'Nightingale Chart',
-        type: 'pie',
-        radius: [50, 130],
-        center: ['50%', '50%'],
-        roseType: 'area',
-        itemStyle: {
-          borderRadius: 6,
-          normal: {
-            color: function (params: any) {
-              //自定义颜色
-              const colorList = [
-                '#409EFF', '#67C23A', '#E6A23C', '#F56C6C'
-              ];
-              return colorList[params.dataIndex]
-            }
-          }
-        },
-        data: [
-          {value: 26, name: '家用电器'},
-          {value: 27, name: '户外运动'},
-          {value: 24, name: '汽车用品'},
-          {value: 23, name: '手机数码'}
-        ]
-      }
-    ]
-  } as EChartsOption)
-
-  chart.value = pieChart
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy()
-})
-
-onActivated(() => {
-  activated()
-})
-
-onDeactivated(() => {
-  deactivated()
-})
-
-onMounted(() => {
-  mounted()
-  nextTick(() => {
-    initChart()
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/Chart/RadarChart.vue b/src/views/dashboard/components/Chart/RadarChart.vue
deleted file mode 100644
index a4937215..00000000
--- a/src/views/dashboard/components/Chart/RadarChart.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<!-- 雷达图 -->
-<template>
-  <div
-      :id="id"
-      :class="className"
-      :style="{height, width}"
-  />
-</template>
-
-<script setup lang="ts">
-import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
-import {init, EChartsOption} from 'echarts'
-import resize from "@/utils/resize";
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: 'radarChart'
-  },
-  className: {
-    type: String,
-    default: ''
-  },
-  width: {
-    type: String,
-    default: '200px',
-    required: true
-  },
-  height: {
-    type: String,
-    default: '200px',
-    required: true
-  }
-})
-
-const {
-  mounted,
-  chart,
-  beforeDestroy,
-  activated,
-  deactivated
-} = resize()
-
-function initChart() {
-  const radarChart = init(document.getElementById(props.id) as HTMLDivElement)
-
-  radarChart.setOption({
-    title: {
-      show: true,
-      text: '订单状态总雷达图',
-      x: 'center',
-      padding: 15,
-      textStyle: {
-        fontSize: 18,
-        fontStyle: 'normal',
-        fontWeight: 'bold',
-        color:'#337ecc'
-      }
-    },
-    grid: {
-      left: '2%',
-      right: '2%',
-      bottom: '10%',
-      containLabel: true
-    },
-    legend: {
-      x: 'center',
-      y: 'bottom',
-      data: ['预定数量', '下单数量','发货数量']
-    },
-    radar: {
-      // shape: 'circle',
-      radius: '60%',
-      indicator: [
-        { name: '家用电器', max: 6500 },
-        { name: '服装箱包', max: 16000 },
-        { name: '运动户外', max: 30000 },
-        { name: '手机数码', max: 38000 },
-        { name: '汽车用品', max: 52000 },
-        { name: '家具厨具', max: 25000 }
-      ]
-    },
-    series: [
-      {
-        name: 'Budget vs spending',
-        type: 'radar',
-        itemStyle: {
-          borderRadius: 6,
-          normal: {
-            color: function (params: any) {
-              //自定义颜色
-              const colorList = [
-                '#409EFF', '#67C23A', '#E6A23C', '#F56C6C'
-              ];
-              return colorList[params.dataIndex]
-            }
-          }
-        },
-        data: [
-          {
-            value: [4200, 10000, 20000, 35000, 50000, 18000],
-            name: '预定数量'
-          },
-          {
-            value: [5000, 14000, 28000, 26000, 42000, 21000],
-            name: '下单数量'
-          },
-          {
-            value: [5000, 12000, 23000, 18000, 31000, 11000],
-            name: '发货数量'
-          }
-        ]
-      }
-    ]
-  } as EChartsOption)
-
-  chart.value = radarChart
-}
-
-onBeforeUnmount(() => {
-  beforeDestroy()
-})
-
-onActivated(() => {
-  activated()
-})
-
-onDeactivated(() => {
-  deactivated()
-})
-
-onMounted(() => {
-  mounted()
-  nextTick(() => {
-    initChart()
-  })
-})
-</script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/FunnelChart.vue b/src/views/dashboard/components/FunnelChart.vue
new file mode 100644
index 00000000..3903d3a7
--- /dev/null
+++ b/src/views/dashboard/components/FunnelChart.vue
@@ -0,0 +1,106 @@
+<!-- 漏斗图 -->
+<template>
+  <div :id="id" :class="className" :style="{ height, width }" />
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'funnelChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+});
+
+const options = {
+  title: {
+    show: true,
+    text: '订单线索转化漏斗图',
+    x: 'center',
+    padding: 15,
+    textStyle: {
+      fontSize: 18,
+      fontStyle: 'normal',
+      fontWeight: 'bold',
+      color: '#337ecc'
+    }
+  },
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '10%',
+    containLabel: true
+  },
+  legend: {
+    x: 'center',
+    y: 'bottom',
+    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+  },
+
+  series: [
+    {
+      name: 'Funnel',
+      type: 'funnel',
+      left: '20%',
+      top: 60,
+      bottom: 60,
+      width: '60%',
+      sort: 'descending',
+      gap: 2,
+      label: {
+        show: true,
+        position: 'inside'
+      },
+      labelLine: {
+        length: 10,
+        lineStyle: {
+          width: 1,
+          type: 'solid'
+        }
+      },
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      emphasis: {
+        label: {
+          fontSize: 20
+        }
+      },
+      data: [
+        { value: 60, name: 'Visit' },
+        { value: 40, name: 'Inquiry' },
+        { value: 20, name: 'Order' },
+        { value: 80, name: 'Click' },
+        { value: 100, name: 'Show' }
+      ]
+    }
+  ]
+};
+
+onMounted(() => {
+  const chart = echarts.init(
+    document.getElementById(props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+</script>
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
new file mode 100644
index 00000000..0f71ba50
--- /dev/null
+++ b/src/views/dashboard/components/PieChart.vue
@@ -0,0 +1,79 @@
+<!-- 饼图 -->
+<template>
+  <el-card>
+    <template #header> 产品分类饼图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'pieChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+});
+const options = {
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '10%',
+    containLabel: true
+  },
+  legend: {
+    top: 'bottom',
+    textStyle: {
+      color: '#999'
+    }
+  },
+  series: [
+    {
+      name: 'Nightingale Chart',
+      type: 'pie',
+      radius: [50, 130],
+      center: ['50%', '50%'],
+      roseType: 'area',
+      itemStyle: {
+        borderRadius: 1,
+        color: function (params: any) {
+          //自定义颜色
+          const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
+          return colorList[params.dataIndex];
+        }
+      },
+      data: [
+        { value: 26, name: '家用电器' },
+        { value: 27, name: '户外运动' },
+        { value: 24, name: '汽车用品' },
+        { value: 23, name: '手机数码' }
+      ]
+    }
+  ]
+};
+
+onMounted(() => {
+  const chart = echarts.init(
+    document.getElementById(props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+</script>
diff --git a/src/views/dashboard/components/Project/index.vue b/src/views/dashboard/components/Project/index.vue
deleted file mode 100644
index 6d5598f7..00000000
--- a/src/views/dashboard/components/Project/index.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <div class="component-container">
-    <el-card class="project-card">
-      <template #header>
-        <span class="fw-b">有来项目简介</span>
-      </template>
-      <div class="project-card__main">
-        <!-- 项目简介 -->
-        <el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
-          youlai-mall
-        </el-link>
-        是基于Spring Boot 2.6、Spring Cloud 2021 &
-        Alibaba 2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
-        涉及
-        <el-link target="_blank" type="primary" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
-        、
-        <el-link target="_blank" type="success" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
-        、
-        <el-link target="_blank" type="warning" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序
-        </el-link>
-        和
-        <el-link target="_blank" type="danger" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
-        等多端的开发。
-        <el-divider/>
-
-        <!-- 源码地址 -->
-        <el-row :gutter="10">
-          <el-col :span="6">
-            <el-badge value="免费开源" class="fw-b">
-              项目地址
-            </el-badge>
-          </el-col>
-          <el-col :span="6">
-            <el-link target="_blank" type="warning" href="http://youlaitech.gitee.io/youlai-mall">官方文档(完善中..)</el-link>
-          </el-col>
-          <el-col :span="6">
-            <el-link target="_blank" type="primary" href="https://github.com/youlaitech">Github</el-link>
-          </el-col>
-          <el-col :span="6">
-            <el-link target="_blank" type="success" href="https://gitee.com/youlaiorg">码云</el-link>
-          </el-col>
-        </el-row>
-        <el-divider/>
-        <!-- 技术栈 -->
-        <el-row :gutter="10">
-          <el-col :span="6" class="fw-b">
-            后端技术栈
-          </el-col>
-          <el-col :span="18">
-            Spring Boot、Spring Cloud & Alibaba、Spring Security
-            OAuth2、JWT、Elastic Stack 、K8s...
-          </el-col>
-        </el-row>
-        <el-divider/>
-        <el-row :gutter="10">
-          <el-col :span="6" class="fw-b">
-            前端技术栈
-          </el-col>
-          <el-col :span="18">
-            Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
-          </el-col>
-        </el-row>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "index"
-}
-</script>
-
-<style lang="scss" scoped>
-
-.component-container {
-  .project-card {
-    font-size: 14px;
-
-    &__main {
-      line-height: 28px;
-      height: 320px;
-      overflow-y: auto;
-      overflow-x: hidden;
-    }
-  }
-
-  .fw-b {
-    font-weight: bold;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/src/views/dashboard/components/RadarChart.vue b/src/views/dashboard/components/RadarChart.vue
new file mode 100644
index 00000000..f9350369
--- /dev/null
+++ b/src/views/dashboard/components/RadarChart.vue
@@ -0,0 +1,100 @@
+<!-- 雷达图 -->
+<template>
+  <el-card>
+    <template #header> 订单状态雷达图 </template>
+    <div :id="id" :class="className" :style="{ height, width }" />
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'radarChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+});
+
+const options = {
+  grid: {
+    left: '2%',
+    right: '2%',
+    bottom: '10%',
+    containLabel: true
+  },
+  legend: {
+    x: 'center',
+    y: 'bottom',
+    data: ['预定数量', '下单数量', '发货数量'],
+    textStyle: {
+      color: '#999'
+    }
+  },
+  radar: {
+    // shape: 'circle',
+    radius: '60%',
+    indicator: [
+      { name: '家用电器' },
+      { name: '服装箱包' },
+      { name: '运动户外' },
+      { name: '手机数码' },
+      { name: '汽车用品' },
+      { name: '家具厨具' }
+    ]
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      itemStyle: {
+        borderRadius: 6,
+        color: function (params: any) {
+          //自定义颜色
+          const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
+          return colorList[params.dataIndex];
+        }
+      },
+      data: [
+        {
+          value: [400, 400, 400, 400, 400, 400],
+          name: '预定数量'
+        },
+        {
+          value: [300, 300, 300, 300, 300, 300],
+          name: '下单数量'
+        },
+        {
+          value: [200, 200, 200, 200, 200, 200],
+          name: '发货数量'
+        }
+      ]
+    }
+  ]
+};
+
+onMounted(() => {
+  const chart = echarts.init(
+    document.getElementById(props.id) as HTMLDivElement
+  );
+  chart.setOption(options);
+
+  window.addEventListener('resize', () => {
+    chart.resize();
+  });
+});
+</script>
diff --git a/src/views/dashboard/components/Team/index.vue b/src/views/dashboard/components/Team/index.vue
deleted file mode 100644
index 1cf120c5..00000000
--- a/src/views/dashboard/components/Team/index.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<!-- 团队介绍 -->
-<template>
-  <div class="component-container">
-    <el-card class="team-card">
-      <template #header>
-        <span class="fw-b">有来开源组织 & 技术团队</span>
-      </template>
-      <el-tabs v-model="teamActiveName">
-        <el-tab-pane label="开发者「无回」" name="developer">
-          <div class="developer" ref="dev_wapper">
-            <ul class="developer__container">
-              <li class="developer__item" v-for="(item, index) in developers" :key="index">
-                <div class="developer__inner">
-                  <el-image
-                    class="developer__img"
-                    :src="item.imgUrl"
-                    :preview-src-list="[item.imgUrl]"
-                  ></el-image>
-                  <div class="developer__info">
-                    <span class="developer__nickname">{{ item.nickname }}</span>
-                    <div class="developer__position">
-                      <el-tag
-                        v-for="(position, i) in item.positions"
-                        :type="colors[i % colors.length]"
-                        :class="i !== 0 ? 'f-ml' : ''"
-                        size="small"
-                      >{{ position }}</el-tag>
-                    </div>
-                    <div class="developer__homepage">
-                      <a :href="item.homepage" target="_blank">个人主页</a>
-                    </div>
-                  </div>
-                </div>
-              </li>
-            </ul>
-            <el-image class="developer__indicator" :src="indicatorImgUrl" />
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="交流群「有来」" name="2">
-          <div class="group">
-            <el-image
-              class="group-img"
-              src="https://cdn.youlai.tech/youlaiqun.png"
-              :preview-src-list="['https://cdn.youlai.tech/youlaiqun.png']"
-            />
-            <div class="group-tip">群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。</div>
-          </div>
-        </el-tab-pane>
-
-        <el-tab-pane label="加入我们" name="3">
-          <div class="join">
-            <p>1. 人品良好、善于思考、执行力强；</p>
-            <p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
-            <p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
-            <p>4. 过分优秀者我们会主动联系您...</p>
-            <div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from "vue";
-import BScroll from "better-scroll";
-
-const state = reactive({
-  teamActiveName: "developer",
-  developers: [
-    {
-      imgUrl: "https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg",
-      nickname: "郝先瑞",
-      positions: ["Vue3", "Java", "文档"],
-      homepage: "https://www.cnblogs.com/haoxianrui/",
-    },
-    {
-      imgUrl: "https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg",
-      nickname: "张川",
-      positions: ["Vue3", "Java"],
-      homepage: "https://blog.csdn.net/qq_41595149",
-    },
-    {
-      imgUrl: "https://s2.loli.net/2022/04/07/2IiOYBHnRGKgCSd.jpg",
-      nickname: "张加林",
-      positions: ["DevOps"],
-      homepage: "https://gitee.com/ximy",
-    }
-  ],
-  colors: ["", "success", "warning", "danger"],
-  indicatorImgUrl: new URL(
-    `../../../../assets/index/indicator.png`,
-    import.meta.url
-  ).href,
-});
-
-const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
-
-let bScroll = reactive({})
-
-const dev_wapper = ref<HTMLElement | any>(null)
-
-onMounted(() => {
-  bScroll = new BScroll(dev_wapper.value, {
-    mouseWheel: true,//开启鼠标滚轮
-    disableMouse: false,//启用鼠标拖动
-    scrollX: true,  //X轴滚动启用 
-  })
-})
-
-watchEffect(() => {
-  nextTick(() => {
-    bScroll && (bScroll as any).refresh()
-  })
-})
-
-
-
-// let bScroll = reactive({})
-
-// onMounted(() => {
-//   bScroll = new BScroll(document.querySelector('.developer-wrapper') as any, {
-//     startX: 0,
-//     click: true,
-//     scrollX: true,
-//     scrollY: false,
-//     eventPassthrough: "vertical" // 横向滚动，保留纵向原生滚动
-//   })
-// })
-
-// watchEffect(() => {
-//   nextTick(() => {
-//     bScroll && (bScroll as any).refresh()
-//   })
-// })
-</script>
-
-<style lang="scss" scoped>
-.component-container {
-  .team-card {
-    font-size: 14px;
-
-    .el-tabs__content {
-      .el-tab-pane {
-        height: 265px;
-      }
-    }
-
-    .developer {
-      width: 100%;
-      overflow: hidden;
-
-      &__container {
-        display: inline-flex;
-        overflow: hidden;
-        justify-content: flex-start;
-        padding: 10px;
-
-        .developer__item {
-          &:not(:first-child) {
-            margin-left: 20px;
-          }
-
-          align-items: center;
-          list-style: none;
-          width: 180px;
-          min-width: 180px;
-
-          .developer__inner {
-            border: 1px solid #cccccc;
-            border-radius: 5px;
-            box-shadow: 6px 6px 6px #aaa;
-            padding: 8px;
-            text-align: center;
-
-            .developer__img {
-              height: 100px;
-              width: 100px;
-            }
-
-            .developer__info {
-              padding: 6px;
-              font-size: 14px;
-
-              .developer__position {
-                margin-top: 10px;
-              }
-
-              .developer__homepage {
-                margin-top: 16px;
-
-                a {
-                  display: inline-block;
-                  padding: 4px 10px;
-                  color: #409eff;
-                  border: 1px solid #409eff;
-                  border-radius: 5px;
-                  background: #ecf5ff;
-
-                  &:hover {
-                    background: #409eff;
-                    color: #ffffff;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &__indicator {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        width: 120px;
-        height: 100px;
-      }
-    }
-
-    .join {
-      height: 240px;
-
-      p {
-        font-weight: bold;
-      }
-
-      &__desc {
-        margin-top: 20px;
-        color: #409eff;
-        font-weight: bold;
-      }
-    }
-
-    .group {
-      height: 254px;
-
-      &-img {
-        height: 200px;
-        width: 200px;
-      }
-    }
-  }
-
-  .fw-b {
-    font-weight: bold;
-  }
-
-  .f-ml {
-    margin-left: 5px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index ea3d08fa..417e372c 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,307 +1,246 @@
+<script setup lang="ts">
+defineOptions({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Dashboard",
+  inheritAttrs: false,
+});
+
+import { useUserStore } from "@/store/modules/user";
+import { useTransition, TransitionPresets } from "@vueuse/core";
+
+const userStore = useUserStore();
+
+const date: Date = new Date();
+
+const greetings = computed(() => {
+  if (date.getHours() >= 6 && date.getHours() < 8) {
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
+  } else if (date.getHours() >= 8 && date.getHours() < 12) {
+    return "上午好🌞！";
+  } else if (date.getHours() >= 12 && date.getHours() < 18) {
+    return "下午好☕！";
+  } else if (date.getHours() >= 18 && date.getHours() < 24) {
+    return "晚上好🌃！";
+  } else if (date.getHours() >= 0 && date.getHours() < 6) {
+    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
+  }
+});
+
+const duration = 5000;
+
+// 收入金额
+const amount = ref(0);
+const amountOutput = useTransition(amount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+amount.value = 2000;
+
+// 访问数
+const visitCount = ref(0);
+const visitCountOutput = useTransition(visitCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+visitCount.value = 2000;
+
+//消息数
+const messageCount = ref(0);
+const messageCountOutput = useTransition(messageCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+messageCount.value = 2000;
+
+// 订单数
+const orderCount = ref(0);
+const orderCountOutput = useTransition(orderCount, {
+  duration: duration,
+  transition: TransitionPresets.easeOutExpo,
+});
+orderCount.value = 2000;
+</script>
+
 <template>
   <div class="dashboard-container">
+    <!-- github角标 -->
     <github-corner class="github-corner" />
 
-    <!-- 数据 -->
-    <el-row :gutter="40" class="card-panel-col">
-      <!--      <el-col :xs="24" :lg="6" class="card-panel-col">
-        <div class="card-panel">
-          <div class="card-panel-icon-wrapper" style="margin-top: -10px">
-            <el-image style="width:200px; height: 100px"
-                      src="https://gitee.com/haoxr/image/raw/master/20210606213932.png"/>
+    <!-- 用户信息 -->
+    <el-row class="mb-8">
+      <el-card class="w-full">
+        <div class="flex justify-between flex-wrap">
+          <div class="flex items-center">
+            <img
+              class="user-avatar"
+              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+            />
+            <span class="ml-[10px] text-[16px]">
+              {{ userStore.nickname }}
+            </span>
           </div>
-          <div class="card-panel-description">
-            <div class="card-panel-text">
-              {{ nickname }}
-            </div>
-            <div class="card-panel-text">
-              <el-tag size="mini" type="danger">莫得感情</el-tag>
-              <el-tag size="mini" type="success" style="margin-left: 5px">打工人</el-tag>
-            </div>
+
+          <div class="leading-[40px]">
+            {{ greetings }}
+          </div>
+
+          <div class="space-x-2 flex items-center justify-end">
+            <el-link
+              target="_blank"
+              type="danger"
+              href="https://blog.csdn.net/u013737132/article/details/130191394"
+              >💥官方从零到一文档</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="success"
+              href="https://gitee.com/youlaiorg"
+              >Gitee</el-link
+            >
+            <el-divider direction="vertical" />
+            <el-link
+              target="_blank"
+              type="primary"
+              href="https://github.com/youlaitech"
+              >GitHub
+            </el-link>
           </div>
         </div>
-      </el-col>-->
+      </el-card>
+    </el-row>
 
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
-        <div class="card-panel">
-          <div class="card-panel-icon-wrapper icon-people">
-            <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+    <!-- 数据卡片 -->
+    <el-row :gutter="40" class="mb-4">
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded"
+          >
+            <svg-icon icon-class="uv" size="3em" />
           </div>
-          <div class="card-panel-description">
-            <div class="card-panel-text">访问数</div>
-            <div class="card-panel-num">1000</div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">访问数</div>
+            <div class="text-lg text-right">
+              {{ Math.round(visitCountOutput) }}
+            </div>
           </div>
         </div>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
-        <div class="card-panel">
-          <div class="card-panel-icon-wrapper icon-message">
-            <svg-icon icon-class="message" class-name="card-panel-icon" />
+      <!--消息数-->
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded"
+          >
+            <svg-icon icon-class="message" size="3em" />
           </div>
-          <div class="card-panel-description">
-            <div class="card-panel-text">消息数</div>
-            <div class="card-panel-num">1000</div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">消息数</div>
+            <div class="text-lg text-right">
+              {{ Math.round(messageCountOutput) }}
+            </div>
           </div>
         </div>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
-        <div class="card-panel">
-          <div class="card-panel-icon-wrapper icon-money">
-            <svg-icon icon-class="money" class-name="card-panel-icon" />
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+        <div class="data-box">
+          <div
+            class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded"
+          >
+            <svg-icon icon-class="money" size="3em" />
           </div>
-          <div class="card-panel-description">
-            <div class="card-panel-text">支付金额</div>
-            <div class="card-panel-num">1000</div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">收入金额</div>
+            <div class="text-lg text-right">
+              {{ Math.round(amountOutput) }}
+            </div>
           </div>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
-        <div class="card-panel">
-          <div class="card-panel-icon-wrapper icon-shopping">
-            <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+      <el-col :xs="24" :sm="12" :lg="6" class="mb-2">
+        <div class="data-box">
+          <div
+            class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded"
+          >
+            <svg-icon icon-class="shopping" size="3em" />
           </div>
-          <div class="card-panel-description">
-            <div class="card-panel-text">订单数</div>
-            <div class="card-panel-num">1000</div>
+          <div class="flex flex-col space-y-3">
+            <div class="text-[var(--el-text-color-secondary)]">订单数</div>
+            <div class="text-lg text-right">
+              {{ Math.round(orderCountOutput) }}
+            </div>
           </div>
         </div>
       </el-col>
     </el-row>
 
-    <!-- 项目 + 团队成员介绍 -->
-    <el-row :gutter="40">
-      <!-- 项目介绍 -->
-      <el-col :md="12" :lg="12" class="card-panel-col">
-        <Project />
-      </el-col>
-
-      <!-- 团队介绍 -->
-      <el-col :md="12" :lg="12" class="card-panel-col">
-        <Team />
-      </el-col>
-    </el-row>
-
     <!-- Echarts 图表 -->
-    <el-row :gutter="40" style="margin-top: 20px">
-      <el-col :sm="24" :lg="8" class="card-panel-col">
+    <el-row :gutter="40">
+      <el-col :sm="24" :lg="8" class="mb-4">
         <BarChart
           id="barChart"
           height="400px"
           width="100%"
-          class="chart-container"
+          class="bg-[var(--el-bg-color-overlay)]"
         />
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
         <PieChart
           id="pieChart"
           height="400px"
           width="100%"
-          class="chart-container"
+          class="bg-[var(--el-bg-color-overlay)]"
         />
-        <!--订单漏斗图-->
-        <!--<FunnelChart id="funnelChart" height="400px" width="100%" class="chart-container"/>-->
       </el-col>
 
-      <el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
+      <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
         <RadarChart
           id="radarChart"
           height="400px"
           width="100%"
-          class="chart-container"
+          class="bg-[var(--el-bg-color-overlay)]"
         />
       </el-col>
     </el-row>
   </div>
 </template>
 
-<script setup lang="ts">
-// Vue引用
-import {
-  computed,
-  nextTick,
-  onMounted,
-  reactive,
-  toRefs,
-  watchEffect,
-} from "vue";
-
-// 组件引用
-import GithubCorner from "@/components/GithubCorner/index.vue";
-import SvgIcon from "@/components/SvgIcon/index.vue";
-import BarChart from "./components/Chart/BarChart.vue";
-import PieChart from "./components/Chart/PieChart.vue";
-import RadarChart from "./components/Chart/RadarChart.vue";
-import FunnelChart from "./components/Chart/FunnelChart.vue";
-
-import Project from "./components/Project/index.vue";
-import Team from "./components/Team/index.vue";
-
-import BScroll from "better-scroll";
-
-import useStore from "@/store";
-
-const { user } = useStore();
-
-const roles = computed(() => user.roles);
-const avatar = computed(() => user.avatar);
-const nickname = computed(() => user.nickname);
-</script>
-
-
 <style lang="scss" scoped>
 .dashboard-container {
-  padding: 24px;
-  background-color: rgb(240, 242, 245);
   position: relative;
+  padding: 24px;
+
+  .user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
 
   .github-corner {
     position: absolute;
-    top: 0px;
-    border: 0;
+    top: 0;
     right: 0;
     z-index: 99;
+    border: 0;
   }
 
-  .box-center {
-    margin: 0 auto;
-    display: table;
-  }
-
-  .user-profile {
-    .user-name {
-    }
-
-    .box-center {
-      padding-top: 10px;
-    }
-
-    .user-role {
-      padding-top: 10px;
-      font-weight: 400;
-      font-size: 14px;
-    }
-
-    .box-social {
-      padding-top: 30px;
-
-      .el-table {
-        border-top: 1px solid #dfe6ec;
-      }
-    }
-
-    .user-follow {
-      padding-top: 20px;
-    }
-  }
-
-  .card-panel-col {
-    margin-bottom: 12px;
-  }
-
-  .card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
-    border-color: rgba(0, 0, 0, 0.05);
-
-    &:hover {
-      .card-panel-icon-wrapper {
-        color: #fff;
-      }
-
-      .icon-user {
-        background: #e77541;
-      }
-
-      .icon-people {
-        background: #40c9c6;
-      }
-
-      .icon-message {
-        background: #36a3f7;
-      }
-
-      .icon-money {
-        background: #f4516c;
-      }
-
-      .icon-shopping {
-        background: #34bfa3;
-      }
-    }
-
-    .icon-people {
-      color: #40c9c6;
-
-      .svg-icon {
-        width: 4em !important;
-        height: 4em !important;
-      }
-    }
-
-    .icon-message {
-      color: #36a3f7;
-
-      .svg-icon {
-        width: 4em !important;
-        height: 4em !important;
-      }
-    }
-
-    .icon-money {
-      color: #f4516c;
-
-      .svg-icon {
-        width: 4em !important;
-        height: 4em !important;
-      }
-    }
-
-    .icon-shopping {
-      color: #34bfa3;
-
-      .svg-icon {
-        width: 4em !important;
-        height: 4em !important;
-      }
-    }
-
-    .card-panel-icon-wrapper {
-      float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
-      transition: all 0.38s ease-out;
-      border-radius: 6px;
-    }
-
-    .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px 20px 0;
-
-      .card-panel-text {
-        line-height: 18px;
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
-      }
-
-      .card-panel-num {
-        font-size: 20px;
-      }
-    }
+  .data-box {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    font-weight: bold;
+    color: var(--el-text-color-regular);
+    background: var(--el-bg-color-overlay);
+    border-color: var(--el-border-color);
+    box-shadow: var(--el-box-shadow-dark);
   }
 
-  .chart-container {
-    background: #ffffff;
+  .svg-icon {
+    fill: currentcolor !important;
   }
 }
 </style>
diff --git a/src/views/demo/api-doc.vue b/src/views/demo/api-doc.vue
new file mode 100644
index 00000000..d9071833
--- /dev/null
+++ b/src/views/demo/api-doc.vue
@@ -0,0 +1,27 @@
+<!-- 接口文档 -->
+<template>
+  <div class="app-container">
+    <iframe
+      src="https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5"
+      width="100%"
+      height="100%"
+      frameborder="0"
+    ></iframe>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  display: flex;
+  flex-direction: column;
+
+  /* 84 = navbar + tags-view = 50 + 34 */
+  height: calc(100vh - 50px);
+}
+
+.hasTagsView {
+  .app-container {
+    height: calc(100vh - 84px);
+  }
+}
+</style>
diff --git a/src/views/demo/dict.vue b/src/views/demo/dict.vue
new file mode 100644
index 00000000..4c82ef70
--- /dev/null
+++ b/src/views/demo/dict.vue
@@ -0,0 +1,21 @@
+<!-- 字典组件示例 -->
+<script setup lang="ts">
+const genderDefaultValue = ref("1"); // 性别默认
+</script>
+
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/dict.vue"
+      type="primary"
+      target="_blank"
+      class="mb-[20px]"
+      >示例源码 请点击>>>></el-link
+    >
+    <el-form>
+      <el-form-item label="性别">
+        <dictionary v-model="genderDefaultValue" type-code="gender" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
diff --git a/src/views/demo/icon-selector.vue b/src/views/demo/icon-selector.vue
new file mode 100644
index 00000000..6a419e2f
--- /dev/null
+++ b/src/views/demo/icon-selector.vue
@@ -0,0 +1,17 @@
+<!-- 图标选择器示例 -->
+<script setup lang="ts">
+const iconName = ref("edit");
+</script>
+
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/icon-selector.vue"
+      type="primary"
+      target="_blank"
+      class="mb-10"
+      >示例源码 请点击>>>></el-link
+    >
+    <icon-select v-model="iconName" />
+  </div>
+</template>
diff --git a/src/views/nested/level1/level2/level3/index1.vue b/src/views/demo/multi-level/children/children/level3-1.vue
similarity index 77%
rename from src/views/nested/level1/level2/level3/index1.vue
rename to src/views/demo/multi-level/children/children/level3-1.vue
index 94de1f0d..888f58e9 100644
--- a/src/views/nested/level1/level2/level3/index1.vue
+++ b/src/views/demo/multi-level/children/children/level3-1.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding:30px;">
+  <div style="padding: 30px">
     <el-alert :closable="false" title="菜单三级-1" type="error" />
   </div>
 </template>
diff --git a/src/views/nested/level1/level2/level3/index2.vue b/src/views/demo/multi-level/children/children/level3-2.vue
similarity index 77%
rename from src/views/nested/level1/level2/level3/index2.vue
rename to src/views/demo/multi-level/children/children/level3-2.vue
index e933503a..a99c98e9 100644
--- a/src/views/nested/level1/level2/level3/index2.vue
+++ b/src/views/demo/multi-level/children/children/level3-2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding:30px;">
+  <div style="padding: 30px">
     <el-alert :closable="false" title="菜单三级-2" type="warning" />
   </div>
 </template>
diff --git a/src/views/nested/level1/level2/index.vue b/src/views/demo/multi-level/children/level2.vue
similarity index 82%
rename from src/views/nested/level1/level2/index.vue
rename to src/views/demo/multi-level/children/level2.vue
index a9f31caa..abcc3a7e 100644
--- a/src/views/nested/level1/level2/index.vue
+++ b/src/views/demo/multi-level/children/level2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding:30px;">
+  <div style="padding: 30px">
     <el-alert :closable="false" title="菜单二级" type="success">
       <router-view />
     </el-alert>
diff --git a/src/views/demo/multi-level/level1.vue b/src/views/demo/multi-level/level1.vue
new file mode 100644
index 00000000..b26146d7
--- /dev/null
+++ b/src/views/demo/multi-level/level1.vue
@@ -0,0 +1,15 @@
+<template>
+  <div style="padding: 30px">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/multi-level/level1.vue"
+      type="primary"
+      target="_blank"
+      class="mb-10"
+      >示例源码 请点击>>>></el-link
+    >
+
+    <el-alert :closable="false" title="菜单一级">
+      <router-view />
+    </el-alert>
+  </div>
+</template>
diff --git a/src/views/demo/signature.vue b/src/views/demo/signature.vue
new file mode 100644
index 00000000..ee713325
--- /dev/null
+++ b/src/views/demo/signature.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { uploadFileApi } from "@/api/file";
+
+const imgUrl = ref("");
+const canvas = ref();
+let ctx: CanvasRenderingContext2D;
+
+// 正在绘制中，用来控制 move 和 end 事件
+let painting = false;
+
+// 获取触发点相对被触发dom的左、上角距离
+const getOffset = (event: MouseEvent | TouchEvent) => {
+  let offset: [number, number];
+  if ((event as MouseEvent).offsetX) {
+    // pc端
+    const { offsetX, offsetY } = event as MouseEvent;
+    offset = [offsetX, offsetY];
+  } else {
+    // 移动端
+    const { top, left } = canvas.value.getBoundingClientRect();
+    const offsetX = (event as TouchEvent).touches[0].clientX - left;
+    const offsetY = (event as TouchEvent).touches[0].clientY - top;
+    offset = [offsetX, offsetY];
+  }
+
+  return offset;
+};
+
+// 绘制起点
+let startX = 0,
+  startY = 0;
+
+// 鼠标/触摸 按下时，保存 触发点相对被触发dom的左、上 距离
+const onEventStart = (event: MouseEvent | TouchEvent) => {
+  [startX, startY] = getOffset(event);
+  painting = true;
+};
+
+const onEventMove = (event: MouseEvent | TouchEvent) => {
+  if (painting) {
+    // 鼠标/触摸 移动时，保存 移动点相对 被触发dom的左、上 距离
+    const [endX, endY] = getOffset(event);
+    paint(startX, startY, endX, endY, ctx);
+
+    // 每次绘制 或 清除结束后，起点要重置为上次的终点
+    startX = endX;
+    startY = endY;
+  }
+};
+
+const onEventEnd = () => {
+  if (painting) {
+    painting = false; // 停止绘制
+  }
+};
+
+onMounted(() => {
+  ctx = canvas.value.getContext("2d") as CanvasRenderingContext2D;
+});
+const handleToFile = async () => {
+  if (isCanvasBlank(canvas.value)) {
+    ElMessage({
+      type: "warning",
+      message: "当前签名文件为空",
+    });
+    return;
+  }
+  const file = dataURLtoFile(canvas.value.toDataURL(), "签名.png");
+
+  if (!file) return;
+  const { data } = await uploadFileApi(file);
+  handleClearSign();
+  imgUrl.value = data.url;
+};
+const handleClearSign = () => {
+  ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
+};
+const isCanvasBlank = (canvas: HTMLCanvasElement) => {
+  const blank = document.createElement("canvas"); //系统获取一个空canvas对象
+  blank.width = canvas.width;
+  blank.height = canvas.height;
+  return canvas.toDataURL() == blank.toDataURL(); //比较值相等则为空
+};
+
+// 保存为图片
+const handleSaveImg = () => {
+  if (isCanvasBlank(canvas.value)) {
+    ElMessage({
+      type: "warning",
+      message: "当前签名文件为空",
+    });
+    return;
+  }
+  const el = document.createElement("a");
+  // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
+  el.href = canvas.value.toDataURL();
+  el.download = "签名";
+  // 创建一个点击事件并对 a 标签进行触发
+  const event = new MouseEvent("click");
+  el.dispatchEvent(event);
+};
+// 转为file格式，可传递给后端
+const dataURLtoFile = (dataurl: string, filename: string) => {
+  const arr: string[] = dataurl.split(",");
+  if (!arr.length) return;
+
+  const mime = arr[0].match(/:(.*?);/);
+  if (mime) {
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, { type: mime[1] });
+  }
+};
+// canvas 画图
+function paint(
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+  ctx: CanvasRenderingContext2D
+) {
+  ctx.beginPath();
+  ctx.globalAlpha = 1;
+  ctx.lineWidth = 2;
+  ctx.strokeStyle = "#000";
+  ctx.moveTo(startX, startY);
+  ctx.lineTo(endX, endY);
+  ctx.closePath();
+  ctx.stroke();
+}
+
+// 橡皮
+function eraser(
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+  ctx: CanvasRenderingContext2D,
+  size: number,
+  shape: "rect" | "circle"
+) {
+  ctx.beginPath();
+  ctx.globalAlpha = 1;
+  switch (shape) {
+    case "rect":
+      ctx.lineWidth = size;
+      ctx.strokeStyle = "#fff";
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(endX, endY);
+      ctx.closePath();
+      ctx.stroke();
+      break;
+    case "circle":
+      ctx.fillStyle = "#fff";
+      ctx.arc(startX, startY, size, 0, 2 * Math.PI);
+      ctx.fill();
+      break;
+  }
+}
+</script>
+<template>
+  <div class="canvas-dom">
+    <h3>基于canvas实现的签名组件</h3>
+    <header>
+      <el-button type="primary" @click="handleSaveImg">保存为图片</el-button>
+      <el-button @click="handleToFile"> 保存到后端 </el-button>
+      <el-button @click="handleClearSign"> 清空签名 </el-button>
+    </header>
+    <canvas
+      ref="canvas"
+      height="200"
+      width="500"
+      @mousedown="onEventStart"
+      @mousemove.stop.prevent="onEventMove"
+      @mouseup="onEventEnd"
+      @touchstart="onEventStart"
+      @touchmove.stop.prevent="onEventMove"
+      @touchend="onEventEnd"
+    >
+    </canvas>
+    <img v-if="imgUrl" :src="imgUrl" alt="签名" />
+  </div>
+</template>
+<style scoped lang="scss">
+.canvas-dom {
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  background-color: #fff;
+
+  canvas {
+    border: 1px solid #e6e6e6;
+  }
+
+  header {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    width: 100%;
+    margin: 8px;
+
+    .eraser-option {
+      display: flex;
+
+      label {
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/demo/table.vue b/src/views/demo/table.vue
new file mode 100644
index 00000000..28ea846f
--- /dev/null
+++ b/src/views/demo/table.vue
@@ -0,0 +1,439 @@
+<template>
+  <div class="table-page">
+    <div class="table-wrap">
+      <el-table :data="tableData" border>
+        <el-table-column
+          v-for="oneCol in tableColList"
+          :key="oneCol.prop"
+          :prop="oneCol.prop"
+          :label="oneCol.label"
+          min-width="200"
+          :fixed="oneCol.fixed"
+        >
+          <template #header>
+            <div class="table-head">
+              <div class="label-wrap" @click="handleClickHead(oneCol)">
+                <div>{{ oneCol.label }}</div>
+                <template v-if="oneCol.order">
+                  <i-ep-sort-up v-if="oneCol.order === 'asc'"></i-ep-sort-up>
+                  <i-ep-sort-down v-else></i-ep-sort-down>
+                </template>
+              </div>
+
+              <el-dropdown
+                trigger="click"
+                @command="(command: string) => handleCommand(command, oneCol)"
+              >
+                <i-ep-arrow-down class="action-more"></i-ep-arrow-down>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <template v-if="oneCol.prop === 'id'">
+                      <el-dropdown-item :command="TableCommand.ASC">
+                        升序
+                      </el-dropdown-item>
+                      <el-dropdown-item :command="TableCommand.DESC">
+                        降序
+                      </el-dropdown-item>
+                    </template>
+                    <el-dropdown-item :command="TableCommand.FIXED">
+                      {{ oneCol.fixed ? "解冻" : "冻结" }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <h3>解析excel</h3>
+    <el-upload
+      :disabled="state.fileList.length !== 0"
+      class="upload"
+      drag
+      accept=".xls,.xlsx"
+      :show-file-list="false"
+      action=""
+      :http-request="handleUploadFile"
+    >
+      <i-ep-upload-filled class="icon"></i-ep-upload-filled>
+      <div class="el-upload__text">拖拽excel到这里</div>
+    </el-upload>
+    <div v-loading="loading" class="excel-table-wrap">
+      <el-table
+        v-if="state.tableExcelHead.length && state.excelTableData.length"
+        :data="state.excelTableData"
+        stripe
+        border
+        style="width: 100%"
+        size="small"
+      >
+        <el-table-column
+          v-for="(item, index) in state.tableExcelHead"
+          :key="index"
+          :prop="item"
+          :label="item"
+          width="150"
+        >
+          <template #default="scope">
+            <span class="overflow-ellipsis">{{ scope.row[item] }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as XLSX from "xlsx/xlsx.mjs";
+import { cloneDeep } from "lodash-es";
+
+enum TableCommand {
+  // 冻结
+  FIXED = "fixed",
+  // 升序
+  ASC = "asc",
+  // 降序
+  DESC = "desc",
+}
+
+let tableData = ref<any[]>([]);
+const loading = ref(false);
+const orginData = [
+  {
+    date: "2016-05-03",
+    name: "admin",
+    address: "广东",
+    id: 1,
+    gender: "男",
+    height: 176,
+    school: "清华大学",
+    hobby: "游泳",
+  },
+  {
+    date: "2016-05-02",
+    name: "admin",
+    address: "江西",
+    id: 3,
+    gender: "男",
+    height: 167,
+    school: "清华大学",
+    hobby: "游泳",
+  },
+  {
+    date: "2016-05-04",
+    name: "admin",
+    address: "湖南",
+    id: 4,
+    gender: "男",
+    height: 176,
+    school: "清华大学",
+    hobby: "游泳",
+  },
+  {
+    date: "2016-05-01",
+    name: "admin",
+    address: "重庆",
+    id: 2,
+    gender: "女",
+    height: 178,
+    school: "清华大学",
+    hobby: "游泳",
+  },
+];
+const state = reactive({
+  fileList: [],
+  excelData: [],
+  tableHead: [],
+  sheetList: [] as any[],
+  allSheetObj: {} as any,
+  tableExcelHead: [] as string[],
+  activeSheet: "",
+  fileName: "",
+  excelTableData: [],
+});
+onMounted(() => {
+  tableData.value = orginData.map((item) => item);
+});
+interface ColumnProp {
+  label: string;
+  prop: string;
+  order: null | string;
+  fixed: null | string;
+}
+const tableColList = ref<ColumnProp[]>([
+  {
+    label: "ID",
+    prop: "id",
+    order: null,
+    fixed: null,
+  },
+  {
+    label: "姓名",
+    prop: "name",
+    order: null,
+    fixed: null,
+  },
+  {
+    label: "性别",
+    prop: "gender",
+    order: null,
+    fixed: null,
+  },
+  {
+    label: "日期",
+    prop: "date",
+    order: null,
+    fixed: null,
+  },
+  {
+    label: "地址",
+    prop: "address",
+    order: null,
+    fixed: null,
+  },
+  {
+    label: "身高",
+    prop: "height",
+    order: null,
+    fixed: null,
+  },
+  {
+    label: "学校",
+    prop: "school",
+    order: null,
+    fixed: null,
+  },
+  {
+    label: "爱好",
+    prop: "hobby",
+    order: null,
+    fixed: null,
+  },
+]);
+const handleCommand = (command: string, tableCol: ColumnProp) => {
+  if (command === TableCommand.FIXED) {
+    tableColList.value.forEach((item) => {
+      if (item.prop === tableCol.prop) {
+        // 冻结/解冻
+        item.fixed = item.fixed ? null : "left";
+      }
+    });
+  }
+  // 升序
+  if (command === TableCommand.ASC) {
+    tableColList.value.forEach((item) => {
+      if (item.prop === tableCol.prop) {
+        item.order = "asc";
+        sortTableData(item);
+      }
+    });
+  }
+  // 降序
+  if (command === TableCommand.DESC) {
+    tableColList.value.forEach((item) => {
+      if (item.prop === tableCol.prop) {
+        item.order = "desc";
+        sortTableData(item);
+      }
+    });
+  }
+};
+// 点击表头循环排序
+const handleClickHead = (oneCol: ColumnProp) => {
+  // 排序顺序
+  const sortArr = [null, "asc", "desc"];
+  const { order } = oneCol;
+  const findIndex = sortArr.findIndex((el) => el === order);
+  let currentIndex = findIndex + 1;
+  if (currentIndex > 2) {
+    currentIndex = 0;
+  }
+  // 排序只能排一列
+  tableColList.value.forEach((item) => {
+    if (item.prop === oneCol.prop) {
+      item.order = sortArr[currentIndex];
+    } else {
+      item.order = null;
+    }
+  });
+  sortTableData(oneCol);
+};
+const sortTableData = (sortCol: ColumnProp) => {
+  // 升序
+  if (sortCol.order === TableCommand.ASC) {
+    const compare = (p: string) => (m: any, n: any) => m[p] - n[p];
+    tableData.value = cloneDeep(orginData).sort(compare(sortCol.prop));
+  }
+  // 降序
+  if (sortCol.order === TableCommand.DESC) {
+    const compare = (p: string) => (m: any, n: any) => n[p] - m[p];
+    tableData.value = cloneDeep(orginData).sort(compare(sortCol.prop));
+  }
+  // 不排序
+  if (!sortCol.order) {
+    tableData.value = cloneDeep(orginData).map((item: any) => item);
+  }
+};
+const handleUploadFile = (data: any) => {
+  const { file } = data;
+  const { size, name } = file;
+  state.fileName = name;
+  // 获取最后一个.的位置
+  const index = name.lastIndexOf(".");
+  // 获取文件类型
+  const ext = name.substring(index + 1);
+  const accept = ["xlsx", "xls"];
+  if (!accept.includes(ext)) {
+    ElMessage({
+      type: "error",
+      message: "请选择xls或者xlsx文件",
+    });
+    return;
+  }
+
+  loading.value = true;
+  readFile(file, "");
+};
+const currentSheetName = computed(() => {
+  const find = state.sheetList.find(
+    (item) => item.sheetId === state.activeSheet
+  );
+  return find?.name || "";
+});
+
+const getFile = () => {
+  const sheetName = `${currentSheetName.value}`;
+  let workbook = XLSX.utils.book_new();
+
+  workbook = {
+    ...workbook,
+    SheetNames: [sheetName],
+    Sheets: {},
+  };
+  workbook.Sheets[sheetName] = state.allSheetObj[sheetName];
+  const wopts = {
+    bookType: "xlsx", // 要生成的文件类型
+    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+    type: "binary", // 二进制格式
+  };
+  const wbout = XLSX.write(workbook, wopts);
+  const transform = (s: any) => {
+    const buf = new ArrayBuffer(s.length);
+    const view = new Uint8Array(buf);
+
+    // eslint-disable-next-line no-bitwise
+    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+    return buf;
+  };
+  // 字符串转ArrayBuffer
+  const blob = new Blob([transform(wbout)], {
+    type: "application/octet-stream",
+  });
+  const file = new window.File([blob], state.fileName, { type: "xlsx" });
+};
+const readFile = (file: any, callback: any) => {
+  const rABS = true; // true: readAsBinaryString ; false: readAsArrayBuffer
+  const reader = new FileReader();
+  reader.onload = function (e) {
+    let data = e.target?.result as any;
+    if (!rABS) data = new Uint8Array(data);
+    const readData = XLSX.read(data, {
+      type: rABS ? "binary" : "array",
+      cellText: false,
+      cellDates: true,
+    });
+    const { Sheets, Workbook } = readData;
+    state.sheetList = Workbook.Sheets;
+    state.activeSheet = state.sheetList[0].sheetId;
+    state.allSheetObj = Sheets;
+    const result = XLSX.utils.sheet_to_json(
+      state.allSheetObj[currentSheetName.value],
+      { raw: false, dateNF: "YYYY-MM-DD HH:mm:ss" }
+    );
+    const allData = XLSX.utils.sheet_to_json(
+      state.allSheetObj[currentSheetName.value],
+      { header: 1 }
+    );
+    state.tableExcelHead = allData.length > 0 ? allData[0] : Array(10).fill("");
+    state.excelTableData = result;
+
+    // getFile();
+    // 获取表头key
+    if (callback) callback(readData);
+  };
+  if (rABS) {
+    reader.readAsBinaryString(file);
+  } else {
+    reader.readAsArrayBuffer(file);
+  }
+  loading.value = false;
+};
+</script>
+<style lang="scss" scoped>
+.table-page {
+  width: 100%;
+  height: calc(100vh - 84px);
+  padding: 10px;
+
+  .table-wrap {
+    // height: 100%;
+    padding: 20px;
+    background-color: #fff;
+
+    .el-table {
+      width: 800px;
+
+      .table-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .label-wrap {
+          display: flex;
+          flex: 1;
+          align-items: center;
+          cursor: pointer;
+
+          svg {
+            margin-left: 5px;
+          }
+        }
+
+        .action-more {
+          cursor: pointer;
+
+          &:hover {
+            color: #409eff;
+          }
+        }
+      }
+    }
+  }
+
+  .upload {
+    box-sizing: border-box;
+    height: 230px;
+    margin-top: 16px;
+    margin-bottom: 20px;
+    background-color: #e3f2fd;
+    border: 2px dashed #90caf9;
+    border-radius: 2px;
+
+    :deep(.el-upload-dragger) {
+      padding: 0;
+      background-color: #e3f2fd;
+      border: none;
+
+      .icon {
+        font-size: 110px;
+        color: #90caf9;
+      }
+    }
+  }
+
+  .excel-table-wrap {
+    width: 100%;
+    min-height: 300px;
+  }
+}
+</style>
diff --git a/src/views/demo/taginput.vue b/src/views/demo/taginput.vue
new file mode 100644
index 00000000..9301bb05
--- /dev/null
+++ b/src/views/demo/taginput.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import TagTextInput from "@/components/TagInput/index.vue";
+
+//假数据
+let arrName = new Array(20).fill("tag");
+
+/**
+ * renderTag 渲染 tag
+ * @param {any} id $$匹配到的之间的值
+ * @param {object} options 一些参数
+ * @return {element} 返回一个dom节点
+ * */
+const renderTag = (id: any, options: any) => {
+  //拼接tag名称
+  let tagName = `${arrName[Number(id)]}-${id}`;
+  //创建tag元素
+  const ele = document.createElement("div");
+  ele.classList.add("tag-demo-con");
+  ele.innerHTML = `<div class="tag-wrap"><div class="tag">${tagName}</div></div>`;
+  return ele;
+};
+
+// 触发增加 tag
+const refTagTextarea = ref();
+const addTag = (id: any) => {
+  refTagTextarea.value.insertColumnTag(id);
+};
+
+/**
+ * 编辑器 change 监听
+ * @param {any} error 默认为 null
+ * @param {string} value 返回编辑器内容
+ * @param {object} obj 返回一个编辑事件描述对象
+ * */
+const onChange = (error: any, value: string, obj: any): void => {
+  console.log("onChange", error, value, obj);
+};
+
+const onFocus = (): void => {
+  console.log("onFocus");
+};
+
+const onBlur = (): void => {
+  console.log("onBlur");
+};
+</script>
+<template>
+  <div class="demo-tagInput">
+    <TagTextInput
+      ref="refTagTextarea"
+      class-name="demo"
+      :default-value="`April$18$`"
+      :readonly="false"
+      :no-cursor="false"
+      :min-height="200"
+      :render-tag="renderTag"
+      @on-change="onChange"
+      @on-focus="onFocus"
+      @on-blur="onBlur"
+    />
+
+    <div class="tag-wrap">
+      <el-button v-for="item in 5" :key="item" @click="addTag(item)">
+        {{ item }}</el-button
+      >
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.demo-tagInput {
+  width: 500px;
+  height: auto;
+  margin: 10px;
+
+  :deep {
+    .tag-demo-con {
+      .tag-wrap {
+        height: 25px;
+        line-height: 25px;
+
+        .tag {
+          box-sizing: border-box;
+          display: inline-block;
+          padding: 2px 8px;
+          margin: 0 4px;
+          color: #174c76;
+          background: #d8eeff;
+          border: 1px solid #bbd6ea;
+          border-radius: 16px;
+        }
+        // padding: 4px;
+        // margin: 4px;
+        // border: 1px solid #ccc;
+        // border-radius: 5px;
+        // line-height: 1em;
+        // min-width: 25px;
+      }
+    }
+  }
+
+  .tag-wrap {
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/src/views/demo/upload.vue b/src/views/demo/upload.vue
new file mode 100644
index 00000000..7c8051ac
--- /dev/null
+++ b/src/views/demo/upload.vue
@@ -0,0 +1,37 @@
+<!-- 文件上传组件(单图+多图)示例 -->
+<script setup lang="ts">
+import SingleUpload from "@/components/Upload/SingleUpload.vue";
+import MultiUpload from "@/components/Upload/MultiUpload.vue";
+
+const singlePicUrl = ref(
+  "https://oss.youlai.tech/youlai-boot/2023/05/20/2b6d8b49fa1047348a0a41cef5aaf69e.gif"
+);
+// 这里放外链图片，防止被删
+const multiPicUrls = ref([
+  "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
+  "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
+  "https://s2.loli.net/2023/05/24/ZPiGbcpR91WqInB.jpg",
+  "https://s2.loli.net/2023/05/24/e1bcnEq3MFdmlNL.jpg",
+  "https://s2.loli.net/2023/05/24/wZTSPj1yDQNcuhU.jpg",
+]);
+</script>
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/upload.vue"
+      type="primary"
+      target="_blank"
+      class="mb-10"
+      >示例源码 请点击>>>></el-link
+    >
+
+    <el-form>
+      <el-form-item label="单图上传">
+        <single-upload v-model="singlePicUrl" />
+      </el-form-item>
+      <el-form-item label="多图上传">
+        <multi-upload v-model="multiPicUrls" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
diff --git a/src/views/demo/wang-editor.vue b/src/views/demo/wang-editor.vue
new file mode 100644
index 00000000..7efb0332
--- /dev/null
+++ b/src/views/demo/wang-editor.vue
@@ -0,0 +1,18 @@
+<!-- wangEditor富文本编辑器示例 -->
+<script setup lang="ts">
+import Editor from "@/components/WangEditor/index.vue";
+const value = ref("初始内容");
+</script>
+
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/wang-editor.vue"
+      type="primary"
+      target="_blank"
+      class="mb-[20px]"
+      >示例源码 请点击>>>></el-link
+    >
+    <editor v-model="value" style="height: calc(100vh - 180px)" />
+  </div>
+</template>
diff --git a/src/views/demo/websocket.vue b/src/views/demo/websocket.vue
new file mode 100644
index 00000000..72f72074
--- /dev/null
+++ b/src/views/demo/websocket.vue
@@ -0,0 +1,119 @@
+<!-- websocket 示例 -->
+<script setup lang="ts">
+import { sendToAll, sendToUser } from "@/api/websocket";
+
+const inputVal = ref("初始内容");
+
+const topicMsgs = ref<string[]>(["接收到一条主题消息"]); // 主题消息列表
+const p2pMsgs = ref<string[]>(["接收到一条点对线消息"]); // 点对点消息列表
+
+import { useUserStore } from "@/store/modules/user";
+
+const userId = useUserStore().userId;
+
+import { useWebSocket } from "@vueuse/core";
+
+const { data, status, close, send, open } = useWebSocket(
+  "ws://localhost:8989/ws",
+  {
+    onConnected(ws) {
+      console.log("订阅主题");
+      // 连接建立后发送订阅消息
+      ws.send(JSON.stringify({ type: "subscribe", topic: "/topic/all" }));
+    },
+    onMessage(ws, event) {
+      // 获取接收到的消息内容
+      const message = event.data;
+
+      // 处理消息内容
+      console.log("Received message:", message);
+    },
+  }
+);
+
+// 监听 WebSocket 连接状态变化
+watch(status, (newStatus) => {
+  if (newStatus === "OPEN") {
+    // 连接已打开，订阅主题
+    console.log(" 连接已打开，订阅主题");
+    const subscribeMessage = {
+      type: "subscribe",
+      channel: "/topic/all",
+    };
+    send(JSON.stringify(subscribeMessage));
+  } else if (newStatus === "CLOSED") {
+    // 连接已关闭，执行相应的清理操作
+    // ...
+  }
+});
+
+// 监听 WebSocket 接收到的消息
+watch(data, (newData) => {
+  console.log("Received data:", newData);
+
+  // 解析消息体
+  const message = JSON.parse(newData);
+
+  // 判断消息主题并处理
+  if (message.topic === "topic1") {
+    // 处理来自 topic1 的消息
+    console.log("Received message from topic1:", message);
+  } else if (message.topic === "topic2") {
+    // 处理来自 topic2 的消息
+    console.log("Received message from topic2:", message);
+  }
+  // 可以根据需要添加更多的判断逻辑来处理其他主题的消息
+});
+
+function handleSendToAll() {
+  sendToAll(inputVal.value);
+}
+
+function handleSendToUser() {
+  sendToUser(userId, inputVal.value);
+}
+onMounted(() => {});
+</script>
+
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/websocket.vue"
+      type="primary"
+      target="_blank"
+      class="mb-[20px]"
+      >示例源码 请点击>>>></el-link
+    >
+
+    <div>
+      <div class="search-container">
+        <el-form :inline="true">
+          <el-form-item> <el-input v-model="inputVal" /></el-form-item>
+          <el-form-item
+            ><el-button @click="handleSendToUser">发送点对点消息</el-button>
+            <el-button @click="handleSendToAll">发送广播消息</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-card>
+            <template #header>点对点消息接收 </template>
+            <div v-for="(msg, index) in p2pMsgs" :key="index">
+              {{ msg }}
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card>
+            <template #header> 广播消息接收 </template>
+            <div v-for="(msg, index) in topicMsgs" :key="index">
+              {{ msg }}
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index a52ed23b..ae91a3e2 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -1,3 +1,31 @@
+<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
+<script lang="ts">
+export default {
+  name: "Page401",
+};
+</script>
+
+<script setup lang="ts">
+import { reactive, toRefs } from "vue";
+import { useRouter } from "vue-router";
+
+const state = reactive({
+  errGif: new URL(`../../assets/401_images/401.gif`, import.meta.url).href,
+
+  ewizardClap:
+    "https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",
+  dialogVisible: false,
+});
+
+const { errGif, ewizardClap, dialogVisible } = toRefs(state);
+
+const router = useRouter();
+
+function back() {
+  router.back();
+}
+</script>
+
 <template>
   <div class="errPage-container">
     <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
@@ -5,95 +33,82 @@
     </el-button>
     <el-row>
       <el-col :span="12">
-        <h1 class="text-jumbo text-ginormous">
-          Oops!
-        </h1>
+        <h1 class="text-jumbo text-ginormous">Oops!</h1>
         gif来源<a href="https://zh.airbnb.com/" target="_blank">airbnb</a> 页面
         <h2>你没有权限去该页面</h2>
         <h6>如有不满请联系你领导</h6>
         <ul class="list-unstyled">
           <li>或者你可以去:</li>
           <li class="link-type">
-            <router-link to="/dashboard">
-              回首页
-            </router-link>
+            <router-link to="/dashboard"> 回首页 </router-link>
           </li>
           <li class="link-type">
             <a href="https://www.taobao.com/">随便看看</a>
           </li>
-          <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
+          <li>
+            <a href="#" @click.prevent="dialogVisible = true">点我看图</a>
+          </li>
         </ul>
       </el-col>
       <el-col :span="12">
-        <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
+        <img
+          :src="errGif"
+          width="313"
+          height="428"
+          alt="Girl has dropped her ice cream."
+        />
       </el-col>
     </el-row>
-    <el-dialog :visible.sync="dialogVisible" title="随便看">
-      <img :src="ewizardClap" class="pan-img">
+    <el-dialog v-model="dialogVisible" title="随便看">
+      <img :src="ewizardClap" class="pan-img" />
     </el-dialog>
   </div>
 </template>
 
-<script>
-import errGif from '@/assets/401_images/401.gif'
+<style lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  max-width: 100%;
+  margin: 100px auto;
 
-export default {
-  name: 'Page401',
-  data() {
-    return {
-      errGif: errGif + '?' + +new Date(),
-      ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
-      dialogVisible: false
-    }
-  },
-  methods: {
-    back() {
-      if (this.$route.query.noGoBack) {
-        this.$router.push({ path: '/dashboard' })
-      } else {
-        this.$router.go(-1)
-      }
-    }
+  .pan-back-btn {
+    color: #fff;
+    background: #008489;
+    border: none !important;
   }
-}
-</script>
 
-<style lang="scss" scoped>
-  .errPage-container {
-    width: 800px;
-    max-width: 100%;
-    margin: 100px auto;
-    .pan-back-btn {
-      background: #008489;
-      color: #fff;
-      border: none!important;
-    }
-    .pan-gif {
-      margin: 0 auto;
-      display: block;
-    }
-    .pan-img {
-      display: block;
-      margin: 0 auto;
-      width: 100%;
-    }
-    .text-jumbo {
-      font-size: 60px;
-      font-weight: 700;
-      color: #484848;
+  .pan-gif {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .pan-img {
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+
+  .list-unstyled {
+    font-size: 14px;
+
+    li {
+      padding-bottom: 5px;
     }
-    .list-unstyled {
-      font-size: 14px;
-      li {
-        padding-bottom: 5px;
-      }
-      a {
-        color: #008489;
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
-        }
+
+    a {
+      color: #008489;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
       }
     }
   }
+}
 </style>
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 1791f55a..79029400 100644
--- a/src/views/error-page/404.vue
+++ b/src/views/error-page/404.vue
@@ -1,152 +1,197 @@
+<!-- setup 无法设置组件名称，组件名称keepAlive必须 -->
+<script lang="ts">
+export default {
+  name: "Page404",
+};
+</script>
+
+<script setup lang="ts">
+function message() {
+  return "The webmaster said that you can not enter this page...";
+}
+</script>
+
 <template>
   <div class="wscn-http404-container">
     <div class="wscn-http404">
       <div class="pic-404">
-        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
-        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
-        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
+        <img
+          class="pic-404__parent"
+          src="@/assets/404_images/404.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child left"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child mid"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
+        <img
+          class="pic-404__child right"
+          src="@/assets/404_images/404_cloud.png"
+          alt="404"
+        />
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">All rights reserved
-          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
+        <div class="bullshit__info">
+          All rights reserved
+          <a
+            style="color: #20a0ff"
+            href="https://wallstreetcn.com"
+            target="_blank"
+            >wallstreetcn</a
+          >
         </div>
         <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <div class="bullshit__info">
+          Please check that the URL you entered is correct, or click the button
+          below to return to the homepage.
+        </div>
         <a href="" class="bullshit__return-home">Back to home</a>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-
-export default {
-  name: 'Page404',
-  computed: {
-    message() {
-      return 'The webmaster said that you can not enter this page...'
-    }
-  }
-}
-</script>
-
 <style lang="scss" scoped>
-.wscn-http404-container{
-  transform: translate(-50%,-50%);
+.wscn-http404-container {
   position: absolute;
   top: 40%;
   left: 50%;
+  transform: translate(-50%, -50%);
 }
+
 .wscn-http404 {
   position: relative;
   width: 1200px;
   padding: 0 50px;
   overflow: hidden;
+
   .pic-404 {
     position: relative;
     float: left;
     width: 600px;
     overflow: hidden;
+
     &__parent {
       width: 100%;
     }
+
     &__child {
       position: absolute;
+
       &.left {
-        width: 80px;
         top: 17px;
         left: 220px;
+        width: 80px;
         opacity: 0;
         animation-name: cloudLeft;
         animation-duration: 2s;
         animation-timing-function: linear;
-        animation-fill-mode: forwards;
         animation-delay: 1s;
+        animation-fill-mode: forwards;
       }
+
       &.mid {
-        width: 46px;
         top: 10px;
         left: 420px;
+        width: 46px;
         opacity: 0;
         animation-name: cloudMid;
         animation-duration: 2s;
         animation-timing-function: linear;
-        animation-fill-mode: forwards;
         animation-delay: 1.2s;
+        animation-fill-mode: forwards;
       }
+
       &.right {
-        width: 62px;
         top: 100px;
         left: 500px;
+        width: 62px;
         opacity: 0;
         animation-name: cloudRight;
         animation-duration: 2s;
         animation-timing-function: linear;
-        animation-fill-mode: forwards;
         animation-delay: 1s;
+        animation-fill-mode: forwards;
       }
+
       @keyframes cloudLeft {
         0% {
           top: 17px;
           left: 220px;
           opacity: 0;
         }
+
         20% {
           top: 33px;
           left: 188px;
           opacity: 1;
         }
+
         80% {
           top: 81px;
           left: 92px;
           opacity: 1;
         }
+
         100% {
           top: 97px;
           left: 60px;
           opacity: 0;
         }
       }
+
       @keyframes cloudMid {
         0% {
           top: 10px;
           left: 420px;
           opacity: 0;
         }
+
         20% {
           top: 40px;
           left: 360px;
           opacity: 1;
         }
+
         70% {
           top: 130px;
           left: 180px;
           opacity: 1;
         }
+
         100% {
           top: 160px;
           left: 120px;
           opacity: 0;
         }
       }
+
       @keyframes cloudRight {
         0% {
           top: 100px;
           left: 500px;
           opacity: 0;
         }
+
         20% {
           top: 120px;
           left: 460px;
           opacity: 1;
         }
+
         80% {
           top: 180px;
           left: 340px;
           opacity: 1;
         }
+
         100% {
           top: 200px;
           left: 300px;
@@ -155,72 +200,79 @@ export default {
       }
     }
   }
+
   .bullshit {
     position: relative;
     float: left;
     width: 300px;
     padding: 30px 0;
     overflow: hidden;
+
     &__oops {
+      margin-bottom: 20px;
       font-size: 32px;
       font-weight: bold;
       line-height: 40px;
       color: #1482f0;
       opacity: 0;
-      margin-bottom: 20px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }
+
     &__headline {
+      margin-bottom: 10px;
       font-size: 20px;
+      font-weight: bold;
       line-height: 24px;
       color: #222;
-      font-weight: bold;
       opacity: 0;
-      margin-bottom: 10px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.1s;
       animation-fill-mode: forwards;
     }
+
     &__info {
+      margin-bottom: 30px;
       font-size: 13px;
       line-height: 21px;
       color: grey;
       opacity: 0;
-      margin-bottom: 30px;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.2s;
       animation-fill-mode: forwards;
     }
+
     &__return-home {
       display: block;
       float: left;
       width: 110px;
       height: 36px;
-      background: #1482f0;
-      border-radius: 100px;
-      text-align: center;
-      color: #ffffff;
-      opacity: 0;
       font-size: 14px;
       line-height: 36px;
+      color: #fff;
+      text-align: center;
       cursor: pointer;
+      background: #1482f0;
+      border-radius: 100px;
+      opacity: 0;
       animation-name: slideUp;
       animation-duration: 0.5s;
       animation-delay: 0.3s;
       animation-fill-mode: forwards;
     }
+
     @keyframes slideUp {
       0% {
-        transform: translateY(60px);
         opacity: 0;
+        transform: translateY(60px);
       }
+
       100% {
-        transform: translateY(0);
         opacity: 1;
+        transform: translateY(0);
       }
     }
   }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index eebaf084..7fb28559 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -2,81 +2,74 @@
   <div class="login-container">
     <el-form
       ref="loginFormRef"
-      :model="loginForm"
+      :model="loginData"
       :rules="loginRules"
       class="login-form"
-      auto-complete="on"
-      label-position="left"
     >
-      <div class="title-container">
-        <h3 class="title">{{ $t("login.title") }}</h3>
-        <lang-select class="set-language" />
+      <div class="flex text-white items-center py-4 title-wrap">
+        <span class="text-2xl flex-1 text-center title">
+          {{ $t("login.title") }}
+        </span>
+        <lang-select class="text-white! cursor-pointer" />
       </div>
 
       <el-form-item prop="username">
-        <span class="svg-container">
+        <div class="p-2 text-white">
           <svg-icon icon-class="user" />
-        </span>
+        </div>
         <el-input
           ref="username"
-          v-model="loginForm.username"
+          v-model="loginData.username"
+          class="flex-1"
+          size="large"
           :placeholder="$t('login.username')"
           name="username"
-          type="text"
-          tabindex="1"
-          auto-complete="on"
         />
       </el-form-item>
 
       <el-tooltip
-        :disabled="capslockTooltipDisabled"
+        :disabled="isCapslock === false"
         content="Caps lock is On"
         placement="right"
       >
         <el-form-item prop="password">
-          <span class="svg-container">
+          <span class="p-2 text-white">
             <svg-icon icon-class="password" />
           </span>
           <el-input
-            ref="passwordRef"
-            :key="passwordType"
-            v-model="loginForm.password"
-            :type="passwordType"
-            placeholder="Password"
+            v-model="loginData.password"
+            class="flex-1"
+            placeholder="密码"
+            :type="passwordVisible === false ? 'password' : 'input'"
+            size="large"
             name="password"
-            tabindex="2"
-            auto-complete="on"
             @keyup="checkCapslock"
-            @blur="capslockTooltipDisabled = true"
             @keyup.enter="handleLogin"
           />
-          <span class="show-pwd" @click="showPwd">
+          <span class="mr-2" @click="passwordVisible = !passwordVisible">
             <svg-icon
-              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+              :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
+              class="text-white cursor-pointer"
             />
           </span>
         </el-form-item>
       </el-tooltip>
 
       <!-- 验证码 -->
-      <el-form-item prop="code">
-        <span class="svg-container">
-          <svg-icon icon-class="validCode" />
+      <el-form-item prop="verifyCode">
+        <span class="p-2 text-white">
+          <svg-icon icon-class="verify_code" />
         </span>
         <el-input
-          v-model="loginForm.code"
+          v-model="loginData.verifyCode"
           auto-complete="off"
-          :placeholder="$t('login.code')"
-          style="width: 65%"
+          :placeholder="$t('login.verifyCode')"
+          class="w-[60%]"
           @keyup.enter="handleLogin"
         />
 
         <div class="captcha">
-          <img
-            :src="captchaBase64"
-            @click="handleCaptchaGenerate"
-            height="38px"
-          />
+          <img :src="captchaBase64" @click="getCaptcha" />
         </div>
       </el-form-item>
 
@@ -84,74 +77,73 @@
         size="default"
         :loading="loading"
         type="primary"
-        style="width: 100%; margin-bottom: 30px"
+        class="w-full"
         @click.prevent="handleLogin"
         >{{ $t("login.login") }}
       </el-button>
 
-      <div class="tips">
-        <span style="margin-right: 20px"
-          >{{ $t("login.username") }}: admin</span
-        >
-        <span> {{ $t("login.password") }}: 123456</span>
+      <!-- 账号密码提示 -->
+      <div class="mt-4 text-white text-sm">
+        <span>{{ $t("login.username") }}: admin</span>
+        <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
       </div>
     </el-form>
-
-    <div v-if="showCopyright == true" class="copyright">
-      <p>{{ $t("login.copyright") }}</p>
-      <p>{{ $t("login.icp") }}</p>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, toRefs, watch, nextTick } from "vue";
-
-// 组件依赖
-import { ElForm, ElInput } from "element-plus";
 import router from "@/router";
 import LangSelect from "@/components/LangSelect/index.vue";
 import SvgIcon from "@/components/SvgIcon/index.vue";
 
 // 状态管理依赖
-import useStore from "@/store";
+import { useUserStore } from "@/store/modules/user";
 
 // API依赖
-import { getCaptcha } from "@/api/login";
-import { useRoute } from "vue-router";
-import { LoginFormData } from "@/types";
+import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
+import { getCaptchaApi } from "@/api/auth";
+import { LoginData } from "@/api/auth/types";
 
-const { user } = useStore();
+const userStore = useUserStore();
 const route = useRoute();
 
+/**
+ * 按钮loading
+ */
+const loading = ref(false);
+/**
+ * 是否大写锁定
+ */
+const isCapslock = ref(false);
+/**
+ * 密码是否可见
+ */
+const passwordVisible = ref(false);
+/**
+ * 验证码图片Base64字符串
+ */
+const captchaBase64 = ref();
+
+/**
+ * 登录表单引用
+ */
 const loginFormRef = ref(ElForm);
-const passwordRef = ref(ElInput);
-
-const state = reactive({
-  loginForm: {
-    username: "admin",
-    password: "123456",
-    code: "",
-    uuid: "",
-  } as LoginFormData,
-  loginRules: {
-    username: [{ required: true, trigger: "blur" }],
-    password: [
-      { required: true, trigger: "blur", validator: validatePassword },
-    ],
-  },
-  loading: false,
-  passwordType: "password",
-  redirect: "",
-  captchaBase64: "",
-  // 大写提示禁用
-  capslockTooltipDisabled: true,
-  otherQuery: {},
-  clientHeight: document.documentElement.clientHeight,
-  showCopyright: true,
+
+const loginData = ref<LoginData>({
+  username: "admin",
+  password: "123456",
 });
 
-function validatePassword(rule: any, value: any, callback: any) {
+const loginRules = {
+  username: [{ required: true, trigger: "blur" }],
+  password: [{ required: true, trigger: "blur", validator: passwordValidator }],
+  verifyCode: [{ required: true, trigger: "blur" }],
+};
+
+/**
+ * 密码校验器
+ */
+function passwordValidator(rule: any, value: any, callback: any) {
   if (value.length < 6) {
     callback(new Error("The password can not be less than 6 digits"));
   } else {
@@ -159,247 +151,149 @@ function validatePassword(rule: any, value: any, callback: any) {
   }
 }
 
-const {
-  loginForm,
-  loginRules,
-  loading,
-  passwordType,
-  redirect,
-  captchaBase64,
-  capslockTooltipDisabled,
-  showCopyright,
-} = toRefs(state);
-
+/**
+ * 检查输入大小写状态
+ */
 function checkCapslock(e: any) {
   const { key } = e;
-  state.capslockTooltipDisabled =
-    key && key.length === 1 && key >= "A" && key <= "Z";
+  isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
 }
 
-function showPwd() {
-  if (state.passwordType === "password") {
-    state.passwordType = "";
-  } else {
-    state.passwordType = "password";
-  }
-  nextTick(() => {
-    passwordRef.value.focus();
+/**
+ * 获取验证码
+ */
+function getCaptcha() {
+  getCaptchaApi().then(({ data }) => {
+    const { verifyCodeBase64, verifyCodeKey } = data;
+    loginData.value.verifyCodeKey = verifyCodeKey;
+    captchaBase64.value = verifyCodeBase64;
   });
 }
 
+/**
+ * 登录
+ */
 function handleLogin() {
   loginFormRef.value.validate((valid: boolean) => {
     if (valid) {
-      state.loading = true;
-      user.login(state.loginForm)
+      loading.value = true;
+      userStore
+        .login(loginData.value)
         .then(() => {
-          router.push({ path: state.redirect || "/", query: state.otherQuery });
-          state.loading = false;
+          const query: LocationQuery = route.query;
+
+          const redirect = (query.redirect as LocationQueryValue) ?? "/";
+
+          const otherQueryParams = Object.keys(query).reduce(
+            (acc: any, cur: string) => {
+              if (cur !== "redirect") {
+                acc[cur] = query[cur];
+              }
+              return acc;
+            },
+            {}
+          );
+
+          router.push({ path: redirect, query: otherQueryParams });
         })
         .catch(() => {
-          state.loading = false;
-          handleCaptchaGenerate();
+          // 验证失败，重新生成验证码
+          getCaptcha();
+        })
+        .finally(() => {
+          loading.value = false;
         });
-    } else {
-      return false;
     }
   });
 }
 
-// 获取验证码
-function handleCaptchaGenerate() {
-  getCaptcha().then(({data}) => {
-    const { img, uuid } = data;
-    state.captchaBase64 = "data:image/gif;base64," + img;
-    state.loginForm.uuid = uuid;
-  });
-}
-
-watch(
-  route,
-  () => {
-    const query = route.query;
-    if (query) {
-      state.redirect = query.redirect as string;
-      state.otherQuery = getOtherQuery(query);
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-
-function getOtherQuery(query: any) {
-  return Object.keys(query).reduce((acc: any, cur: any) => {
-    if (cur !== "redirect") {
-      acc[cur] = query[cur];
-    }
-    return acc;
-  }, {});
-}
-
 onMounted(() => {
-  handleCaptchaGenerate();
-  window.onresize = () => {
-    if (state.clientHeight > document.documentElement.clientHeight) {
-      state.showCopyright = false;
-    } else {
-      state.showCopyright = true;
-    }
-  };
+  getCaptcha();
 });
 </script>
 
-<style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-$bg: #283443;
-$light_gray: #fff;
-$cursor: #fff;
-
-/* reset element-ui css */
+<style lang="scss" scoped>
 .login-container {
-  .title-container {
-    position: relative;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  background-color: #2d3a4b;
 
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
-    }
+  .title-wrap {
+    filter: contrast(30);
 
-    .set-language {
-      color: #fff;
-      position: absolute;
-      top: 3px;
-      font-size: 18px;
-      right: 0px;
-      cursor: pointer;
+    .title {
+      letter-spacing: 4px;
+      animation: showup 3s forwards;
     }
-  }
 
-  .el-input {
-    display: inline-block;
-    height: 47px;
-    width: 85%;
-
-    input {
-      background: transparent;
-      border: 0px;
-      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      height: 47px;
-      caret-color: $cursor;
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
+    @keyframes showup {
+      0% {
+        letter-spacing: -20px;
       }
-    }
-  }
 
-  .el-input__inner {
-    &:hover {
-      border-color: var(--el-input-hover-border, var(--el-border-color-hover));
-      box-shadow: none;
+      100% {
+        letter-spacing: 4px;
+      }
     }
-    box-shadow: none;
-  }
-
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
-  }
-
-  .copyright {
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    font-size: 12px;
-    text-align: center;
-    color: #cccccc;
   }
-}
-</style>
-
-<style lang="scss" scoped>
-$bg: #2d3a4b;
-$dark_gray: #889aa4;
-$light_gray: #eee;
-
-.login-container {
-  min-height: 100%;
-  width: 100%;
-  background-color: $bg;
-  overflow: hidden;
 
   .login-form {
-    position: relative;
     width: 520px;
     max-width: 100%;
     padding: 160px 35px 0;
     margin: 0 auto;
     overflow: hidden;
-  }
 
-  .tips {
-    font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
+    .captcha {
+      position: absolute;
+      top: 0;
+      right: 0;
 
-    span {
-      &:first-of-type {
-        margin-right: 16px;
+      img {
+        width: 120px;
+        height: 48px;
+        cursor: pointer;
       }
     }
   }
+}
 
-  .svg-container {
-    padding: 6px 5px 6px 15px;
-    color: $dark_gray;
-    vertical-align: middle;
-    width: 30px;
-    display: inline-block;
-  }
+.el-form-item {
+  background: rgb(0 0 0 / 10%);
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 5px;
+}
 
-  .title-container {
-    position: relative;
+.el-input {
+  background: transparent;
 
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
-    }
-  }
+  // 子组件 scoped 无效，使用 :deep
+  :deep(.el-input__wrapper) {
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
 
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
-  }
+    .el-input__inner {
+      color: #fff;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      caret-color: #fff;
 
-  .captcha {
-    position: absolute;
-    right: 0;
-    top: 0;
+      &:-webkit-autofill {
+        box-shadow: 0 0 0 1000px transparent inset !important;
+        -webkit-text-fill-color: #fff !important;
+      }
 
-    img {
-      height: 52px;
-      cursor: pointer;
-      vertical-align: middle;
+      // 设置输入框自动填充的延迟属性
+      &:-webkit-autofill,
+      &:-webkit-autofill:hover,
+      &:-webkit-autofill:focus,
+      &:-webkit-autofill:active {
+        transition: color 99999s ease-out, background-color 99999s ease-out;
+        transition-delay: 99999s;
+      }
     }
   }
 }
diff --git a/src/views/nested/level1/index.vue b/src/views/nested/level1/index.vue
deleted file mode 100644
index 6938bf1c..00000000
--- a/src/views/nested/level1/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div style="padding:30px;">
-    <el-alert :closable="false" title="菜单一级">
-      <router-view />
-    </el-alert>
-  </div>
-</template>
diff --git a/src/views/oms/order/index.vue b/src/views/oms/order/index.vue
deleted file mode 100644
index eec64229..00000000
--- a/src/views/oms/order/index.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item prop="orderSn">
-        <el-input v-model="queryParams.orderSn" placeholder="订单号" />
-      </el-form-item>
-
-      <el-form-item>
-        <el-date-picker
-          v-model="dateRange"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        />
-      </el-form-item>
-
-      <el-form-item>
-        <el-select
-          v-model="queryParams.status"
-          class="filter-item"
-          placeholder="订单状态"
-        >
-          <el-option
-            v-for="(key, value) in orderStatusMap"
-            :key="key"
-            :label="key"
-            :value="value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >查询</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table ref="dataTable" v-loading="loading" :data="orderList" border>
-      <el-table-column type="expand" width="100" label="订单商品">
-        <template #default="scope">
-          <el-table :data="scope.row.orderItems" border>
-            <el-table-column label="序号" type="index" width="100" />
-            <el-table-column label="商品编号" align="center" prop="skuSn" />
-            <el-table-column label="商品规格" align="center" prop="skuName" />
-            <el-table-column label="图片" prop="picUrl">
-              <template #default="scope">
-                <img :src="scope.row.picUrl" width="40" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="单价" prop="price">
-              <template #default="scope">{{ scope.row.price }}</template>
-            </el-table-column>
-            <el-table-column align="center" label="数量" prop="count">
-              <template #default="scope">{{ scope.row.count }}</template>
-            </el-table-column>
-          </el-table>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" prop="orderSn" label="订单编号" />
-
-      <el-table-column align="center" prop="memberId" label="会员ID" />
-
-      <el-table-column align="center" label="订单来源">
-        <template #default="scope">
-          <el-tag>{{ scope.row.sourceType }}</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="订单状态">
-        <template #default="scope">
-          <el-tag>{{ scope.row.status }}</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" prop="orderPrice" label="订单金额">
-        <template #default="scope">
-          {{ scope.row.totalAmount }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" prop="payPrice" label="支付金额">
-        <template #default="scope">
-          {{ scope.row.payAmount }}
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" label="支付方式">
-        <template #default="scope">
-          <el-tag>{{ scope.row.payType }}</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column align="center" prop="gmtCreate" label="创建时间" />
-
-      <el-table-column align="center" label="操作">
-        <template #default="scope">
-          <el-button @click="viewDetail(scope.row)">查看</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs } from "vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import { Dialog, Order, OrderQueryParam } from "@/types";
-import { listOrderPages, getOrderDetail } from "@/api/oms/order";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-
-const queryFormRef = ref(ElForm);
-
-const orderSourceMap = {
-  1: "微信小程序",
-  2: "APP",
-  3: "PC",
-};
-
-const orderStatusMap = {
-  101: "待付款",
-  102: "用户取消",
-  103: "系统取消",
-  201: "已付款",
-  202: "申请退款",
-  203: "已退款",
-  301: "待发货",
-  401: "已发货",
-  501: "用户收货",
-  502: "系统收货",
-  901: "已完成",
-};
-
-const payTypeMap = {
-  1: "支付宝",
-  2: "微信",
-  3: "会员余额",
-};
-
-const state = reactive({
-  loading: false,
-  ids: [],
-  single: true,
-  multiple: true,
-  dateRange: [],
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as OrderQueryParam,
-  orderList: [] as Order[],
-  total: 0,
-  dialog: {
-    title: "订单详情",
-    visible: false,
-  } as Dialog,
-  dialogVisible: false,
-  orderDetail: {
-    order: {
-      refundAmount: undefined,
-      refundType: undefined,
-      refundNote: undefined,
-      gmtRefund: undefined,
-      confirmTime: undefined,
-      gmtDelivery: undefined,
-      shipSn: undefined,
-      shipChannel: undefined,
-      gmtPay: undefined,
-      integralPrice: undefined,
-      payChannel: undefined,
-      skuPrice: undefined,
-      couponPrice: undefined,
-      freightPrice: undefined,
-      orderPrice: undefined,
-    },
-    member: {},
-    orderItems: [],
-  },
-  orderSourceMap,
-  orderStatusMap,
-  payTypeMap,
-});
-
-const {
-  loading,
-  single,
-  multiple,
-  queryParams,
-  orderList,
-  total,
-  dialog,
-  dateRange,
-  orderDetail,
-} = toRefs(state);
-
-function handleQuery() {
-  state.loading = true;
-  listOrderPages(state.queryParams).then(({ data }) => {
-    state.orderList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function viewDetail(row: any) {
-  state.dialog.visible = true;
-  getOrderDetail(row.id).then((response: any) => {
-    state.orderDetail = response.data;
-  });
-}
-
-function cancel() {
-  state.dialog.visible = false;
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<style scoped>
-</style>
diff --git a/src/views/pms/brand/index.vue b/src/views/pms/brand/index.vue
deleted file mode 100644
index 1538b73c..00000000
--- a/src/views/pms/brand/index.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          click="handleDelete"
-          :disabled="multiple"
-          >删除</el-button
-        >
-      </el-form-item>
-
-      <el-form-item prop="name">
-        <el-input v-model="queryParams.name" placeholder="品牌名称" />
-      </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetForm">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      v-loading="loading"
-      :data="brandList"
-      @selection-change="handleSelectionChange"
-      border
-    >
-      <el-table-column type="selection" min-width="5%" />
-      <el-table-column prop="name" label="品牌名称" min-width="10" />
-      <el-table-column prop="logoUrl" label="LOGO" min-width="10">
-        <template #default="scope">
-          <el-popover placement="right" :width="400" trigger="hover">
-            <img :src="scope.row.logoUrl" width="400" height="400" />
-            <template #reference>
-              <img
-                :src="scope.row.logoUrl"
-                style="max-height: 60px; max-width: 60px"
-              />
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-
-      <el-table-column prop="sort" label="排序" min-width="10" />
-
-      <el-table-column label="操作" width="150">
-        <template #default="scope">
-          <el-button
-            @click="handleUpdate(scope.row)"
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      top="5vh"
-      width="600px"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="品牌名称" prop="name">
-          <el-input v-model="formData.name" auto-complete="off" />
-        </el-form-item>
-
-        <el-form-item label="LOGO" prop="logoUrl">
-          <single-upload v-model="formData.logoUrl" />
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input v-model="formData.sort" />
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs, unref } from "vue";
-import { ElForm, ElTable, ElMessage, ElMessageBox } from "element-plus";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import { BrandFormData, BrandItem, BrandQueryParam, Dialog } from "@/types";
-import {
-  listBrandPages,
-  getBrandFormDetail,
-  updateBrand,
-  addBrand,
-  deleteBrands,
-} from "@/api/pms/brand";
-import SingleUpload from "@/components/Upload/SingleUpload.vue";
-
-const queryFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
-const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as BrandQueryParam,
-  brandList: [] as BrandItem[],
-  total: 0,
-  dialog: {} as Dialog,
-  formData: { sort: 1 } as BrandFormData,
-  rules: {
-    name: [
-      {
-        required: true,
-        message: "请输入品牌名称",
-        trigger: "blur",
-      },
-    ],
-  },
-});
-
-const {
-  loading,
-  single,
-  multiple,
-  queryParams,
-  brandList,
-  total,
-  dialog,
-  formData,
-  rules,
-} = toRefs(state);
-
-function handleQuery() {
-  state.loading = true;
-  listBrandPages(state.queryParams).then(({ data }) => {
-    state.brandList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleAdd() {
-  state.dialog = {
-    title: "添加品牌",
-    visible: true,
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: "修改品牌",
-    visible: true,
-  };
-  const brandId = row.id || state.ids;
-  getBrandFormDetail(brandId).then(({ data }) => {
-    state.formData = data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateBrand(state.formData.id, state.formData).then((response) => {
-          ElMessage.success("修改成功");
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addBrand(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-/**
- * 重置表单
- */
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-function cancel() {
-  state.dialog.visible = false;
-  resetForm();
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deleteBrands(ids).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<style scoped>
-</style>
diff --git a/src/views/pms/category/components/Attribute.vue b/src/views/pms/category/components/Attribute.vue
deleted file mode 100644
index f2beec61..00000000
--- a/src/views/pms/category/components/Attribute.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-  <div class="component-container">
-    <el-card class="box-card" shadow="always">
-      <el-row>
-        <el-col :span="12">
-          <el-tag type="success" v-if="category && category.name">{{ category.name }} {{ attributeTypeName }} </el-tag>
-          <el-tag v-else type="info"><i class="el-icon-info"></i> 请选择商品分类</el-tag>
-        </el-col>
-        <el-col :span="12" style="text-align: right">
-          <el-button type="primary" :icon="Check"  @click="submitForm">提交</el-button>
-        </el-col>
-      </el-row>
-
-      <el-row style="margin-top: 10px">
-        <el-form
-            ref="form"
-            :model="formData"
-            :disabled="category?.childrenLen>0"
-            label-width="100"
-        >
-          <el-form-item
-              v-for="(item, index) in formData.attributes"
-              :label="attributeTypeName + (index+1)"
-              :prop="'attributes.' + index + '.name'"
-              :rules="rules.attribute.name"
-          >
-            <el-input v-model="item.name" style="width: 300px"/>
-
-            <el-button
-                v-if="index===0"
-                type="success"
-                :icon="Plus"
-                circle
-                plain
-                @click.prevent="handleAdd()"
-                style="margin-left: 15px"
-            />
-
-            <el-button
-                type="danger"
-                :icon="Delete"
-                plain
-                circle
-                @click.prevent="handleDelete(index)"
-                style="margin-left: 15px"
-            />
-          </el-form-item>
-        </el-form>
-      </el-row>
-    </el-card>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {listAttributes, saveAttributeBatch} from "@/api/pms/attribute";
-import {computed, reactive, toRefs, watch} from "vue";
-import {Plus, Check, Delete} from '@element-plus/icons-vue'
-import {ElMessage} from "element-plus";
-import SvgIcon from '@/components/SvgIcon/index.vue';
-
-const props = defineProps({
-  attributeType: {
-    type: Number,
-    default: 1
-  },
-  category: {
-    type: Object,
-    default: {
-      id: undefined,
-      name: '',
-      childrenLen: 0
-    }
-  }
-})
-
-const attributeTypeName = computed(() => props.attributeType === 1 ? '规格' : '属性')
-
-const attributeNameValidator = (rule: any, value: any, callback: any) => {
-  if (!value) {
-    return callback(new Error('请输入' + attributeTypeName.value + '名称'))
-  } else {
-    callback();
-  }
-}
-
-const state = reactive({
-  formData: {
-    categoryId: undefined,
-    type: 1,
-    attributes: [{
-      id: undefined,
-      name: ''
-    }]
-  },
-  rules: {
-    attribute: {
-      name: [
-        {required: true, validator: attributeNameValidator, trigger: 'blur'}
-      ]
-    }
-  }
-})
-
-const {formData, rules} = toRefs(state)
-
-watch(() => props.category.id as any, (newVal, oldVal) => {
-  const categoryId = props.category.id
-  if (categoryId) {
-    listAttributes({categoryId: categoryId,type:props.attributeType}).then(response => {
-
-      const {data} = response
-      if (data && data.length > 0) {
-        state.formData.attributes = response.data
-      } else {
-        state.formData.attributes = [{
-          id: undefined,
-          name: ''
-        }]
-      }
-    })
-  } else {
-    state.formData.attributes = [{
-      id: undefined,
-      name: ''
-    }]
-  }
-})
-
-
-function handleAdd() {
-  state.formData.attributes.push({
-    id: undefined,
-    name: ''
-  })
-}
-
-function handleDelete(index: number) {
-  if (state.formData.attributes.length == 1) {
-    state.formData.attributes = [{
-      id: undefined,
-      name: ''
-    }]
-    return
-  }
-  state.formData.attributes.splice(index, 1)
-}
-
-function submitForm() {
-  state.formData.categoryId = props.category.id
-  state.formData.type = props.attributeType
-  saveAttributeBatch(state.formData).then(() => {
-    ElMessage.success('提交成功')
-  })
-}
-
-</script>
-
-<style scoped>
-.component-container{
-  margin-bottom: 20px;
-}
-
-</style>
diff --git a/src/views/pms/category/components/Category.vue b/src/views/pms/category/components/Category.vue
deleted file mode 100644
index 58ac4a75..00000000
--- a/src/views/pms/category/components/Category.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<!-- 商品分类层级最多为三层，level字段标识 -->
-<template>
-  <div class="component-container">
-
-    <el-tree
-        v-loading="loading"
-        ref="categoryTreeRef"
-        :data="categoryOptions"
-        :props="{ label: 'name', children: 'children',disabled:'' }"
-        node-key="id"
-        :expand-on-click-node="false"
-        default-expand-all
-        :accordion="true"
-        @node-click="handleNodeClick"
-    >
-      <template #default="scope">
-        <div class="custom-tree-node">
-          <span>
-            <el-image
-                v-show="scope.data.level == 3 "
-                :src="scope.data.iconUrl"
-                style="width: 20px; height:20px; vertical-align: middle;margin-top: -5px"
-            >
-              <template #error>
-                <div class="image-slot">
-                  <Picture style="width: 20px; height:20px;"/>
-                </div>
-              </template>
-            </el-image>
-            {{ scope.data.name }}
-          </span>
-          <span>
-                <el-button
-                    v-show="scope.data.level != 3 "
-                    type="success"
-                    :icon="Plus"
-                    circle
-                    plain
-                    @click.stop="handleAdd(scope.data)"/>
-                <el-button
-                    v-show="scope.data.id !== 0"
-                    type="warning"
-                    :icon="Edit"
-                    circle
-                    plain
-                    @click.stop="handleUpdate(scope.data)"/>
-                <el-button
-                    v-show="scope.data.id && (!scope.data.children || scope.data.children.length <= 0)"
-                    type="danger"
-                    :icon="Delete"
-                    circle
-                    plain
-                    @click.stop="handleDelete(scope.data)"/>
-              </span>
-        </div>
-      </template>
-    </el-tree>
-
-    <el-dialog
-        :title="dialog.title"
-        v-model="dialog.visible"
-        width="750px"
-    >
-
-      <el-form
-          ref="dataFormRef"
-          :model="formData"
-          :rules="rules"
-          label-width="100px"
-      >
-        <el-form-item label="上级分类" prop="parentId">
-          <el-input v-model="parent.name" readonly/>
-        </el-form-item>
-
-        <el-form-item label="分类名称" prop="name">
-          <el-input v-model="formData.name"/>
-        </el-form-item>
-
-        <el-form-item label="分类图标" prop="iconUrl">
-          <single-upload v-model="formData.iconUrl"/>
-        </el-form-item>
-
-        <el-form-item label="显示状态" prop="visible">
-          <el-radio-group v-model="formData.visible">
-            <el-radio :label="1">显示</el-radio>
-            <el-radio :label="0">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input v-model="formData.sort"></el-input>
-        </el-form-item>
-
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {listCategories, addCategory, updateCategory, deleteCategories} from '@/api/pms/category'
-import {Search, Plus, Edit, Refresh, Delete} from '@element-plus/icons-vue'
-import SingleUpload from '@/components/Upload/SingleUpload.vue'
-import {getCurrentInstance, onMounted, reactive, ref, toRefs, unref} from "vue";
-import {ElForm, ElMessage, ElMessageBox, ElTree} from "element-plus";
-
-const emit = defineEmits(['categoryClick'])
-
-const categoryTreeRef = ref(ElTree)
-const dataFormRef = ref(ElForm)
-
-const state = reactive({
-  // 遮罩层
-  loading: true,
-  ids: [],
-  queryParam: {},
-  categoryOptions: [] as Array<any>,
-  formData: {
-    id: undefined,
-    name: undefined,
-    parentId: 0,
-    level: undefined,
-    iconUrl: undefined,
-    visible: 1,
-    sort: 100
-  },
-  rules: {
-    parentId: [{
-      required: true, message: '请选择上级分类', trigger: 'blur'
-    }],
-    name: [{
-      required: true, message: '请输入分类名称', trigger: 'blur'
-    }]
-  },
-  dialog: {
-    title: '',
-    visible: false
-  },
-  parent: {} as any,
-  current: {} as any
-})
-
-const {loading, categoryOptions, formData, rules, dialog, parent} = toRefs(state)
-
-function handleQuery() {
-  state.loading = true
-  listCategories(state.queryParam).then(response => {
-    state.categoryOptions = [{
-      id: 0,
-      name: '全部分类',
-      parentId: 0,
-      level: 0,
-      children: response.data
-    }]
-    state.loading = false
-  })
-
-}
-
-function handleNodeClick(row: any) {
-  const categoryTree = unref(categoryTreeRef)
-  const parentNode = categoryTree.getNode(row.parentId)
-
-  state.parent = {
-    id: parentNode.key,
-    name: parentNode.label,
-    level: row.level
-  }
-  state.current = JSON.parse(JSON.stringify(row))
-  emit('categoryClick', row)
-}
-
-
-function handleAdd(row: any) {
-  resetForm()
-  state.dialog = {
-    title: '新增商品分类',
-    visible: true
-  }
-  if (row.id != null) { // 行点击新增
-    state.parent = {
-      id: row.id,
-      name: row.name,
-      level: row.level
-    }
-  }
-}
-
-function handleUpdate(row: any) {
-  resetForm()
-  handleNodeClick(row)
-  state.dialog = {
-    title: '修改商品分类',
-    visible: true
-  }
-  Object.assign(state.formData, state.current)
-}
-
-function submitForm() {
-  const form = unref(dataFormRef)
-  form.validate((valid: any) => {
-    if (valid) {
-      if (state.formData.id) {
-        updateCategory(state.formData.id, state.formData).then(response => {
-          ElMessage.success('修改成功')
-          state.dialog.visible = false
-          handleQuery()
-        })
-      } else {
-        const parentCategory= state.parent as any
-        console.log('parent',parentCategory)
-        state.formData.parentId = parentCategory.id
-        state.formData.level = parentCategory.level+1
-
-        addCategory(state.formData).then(() => {
-          ElMessage.success('新增成功')
-          state.dialog.visible = false
-          handleQuery()
-        })
-      }
-    }
-  })
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(',')
-  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    deleteCategories(ids).then(() => {
-      ElMessage.success('删除成功')
-      handleQuery()
-    })
-  })
-}
-
-function resetForm() {
-  state.formData = {
-    id: undefined,
-    name: undefined,
-    parentId: 0,
-    level: undefined,
-    iconUrl: undefined,
-    visible: 1,
-    sort: 100
-  }
-}
-
-function cancel() {
-  resetForm()
-  state.dialog.visible = false
-}
-
-onMounted(() => {
-  handleQuery()
-})
-</script>
-
-<style>
-.component-container {
-  height: 100%;
-}
-
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  padding-right: 8px;
-}
-
-.el-tree-node__content {
-  height: 40px;
-}
-
-.el-divider--horizontal {
-  margin: 30px 0 15px;
-}
-</style>
diff --git a/src/views/pms/category/index.vue b/src/views/pms/category/index.vue
deleted file mode 100644
index 45ec4b8d..00000000
--- a/src/views/pms/category/index.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="14" :xs="24">
-        <el-card class="box-card" shadow="always">
-          <template #header>
-            <svg-icon icon-class="menu"/>
-            商品分类
-          </template>
-          <category ref="categoryRef" @categoryClick="handleCategoryClick"/>
-        </el-card>
-      </el-col>
-
-      <el-col :span="10" :xs="24">
-        <el-card class="box-card" shadow="always">
-          <template #header>
-            <svg-icon icon-class="menu"/>
-            {{category.name}} 规格属性
-          </template>
-          <!-- 商品规格 -->
-          <attribute ref="specificationRef" :attributeType="1" :category="category"/>
-          <!-- 商品属性 -->
-          <attribute ref="attributeRef" :attributeType="2" :category="category"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup lang="ts">
-
-import Category from './components/Category.vue'
-import Attribute from './components/Attribute.vue'
-import SvgIcon from '@/components/SvgIcon/index.vue';
-
-import {reactive, toRefs} from "vue";
-
-const state = reactive({
-  category:{
-    id: undefined,
-    name: '',
-    childrenLen: 0
-  }
-})
-
-const {category}=toRefs(state)
-
-function handleCategoryClick(categoryRow: any) {
-  if (categoryRow) {
-    state.category={
-      id: categoryRow.id,
-      name:  categoryRow.name,
-      childrenLen: categoryRow.children.length
-    }
-  } else {
-    state.category={
-      id: undefined,
-      name: '',
-      childrenLen: 0
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/pms/goods/components/GoodsAttribute.vue b/src/views/pms/goods/components/GoodsAttribute.vue
deleted file mode 100644
index 731f8867..00000000
--- a/src/views/pms/goods/components/GoodsAttribute.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <div class="component-container">
-    <div class="component-container__main">
-      <el-card class="box-card">
-        <template #header>
-          <span>商品属性</span>
-          <el-button
-            style="float: right"
-            type="success"
-            :icon="Plus"
-            size="small"
-            @click="handleAdd"
-          >
-            添加属性
-          </el-button>
-        </template>
-        <el-form
-          ref="dataForm"
-          :model="modelValue"
-          :rules="rules"
-          size="small"
-          :inline="true"
-        >
-          <el-table
-            :data="modelValue.attrList"
-            size="small"
-            highlight-current-row
-            border
-          >
-            <el-table-column property="name" label="属性名称">
-              <template #default="scope">
-                <el-form-item
-                  :prop="'attrList[' + scope.$index + '].name'"
-                  :rules="rules.name"
-                >
-                  <el-input v-model="scope.row.name" />
-                </el-form-item>
-              </template>
-            </el-table-column>
-
-            <el-table-column property="value" label="属性值">
-              <template #default="scope">
-                <el-form-item
-                  :prop="'attrList[' + scope.$index + '].value'"
-                  :rules="rules.value"
-                >
-                  <el-input v-model="scope.row.value" />
-                </el-form-item>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="操作" width="150">
-              <template #default="scope">
-                <el-form-item>
-                  <el-button
-                    v-if="scope.$index > 0"
-                    type="danger"
-                    :icon="Minus"
-                    size="small"
-                    circle
-                    plain
-                    @click.stop="handleRemove(scope.$index)"
-                  />
-                </el-form-item>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-form>
-      </el-card>
-    </div>
-    <div class="component-container__footer">
-      <el-button @click="handlePrev">上一步，填写商品信息</el-button>
-      <el-button type="primary" @click="handleNext"
-        >下一步，设置商品库存</el-button
-      >
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { listAttributes } from "@/api/pms/attribute";
-import { computed, nextTick, reactive, ref, toRefs, unref, watch } from "vue";
-import { ElForm } from "element-plus";
-import { Plus, Minus } from "@element-plus/icons-vue";
-
-const emit = defineEmits(["prev", "next"]);
-const dataForm = ref(ElForm);
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: {},
-  },
-});
-
-const categoryId = computed(() => props.modelValue.categoryId);
-
-watch(
-  categoryId,
-  (newVal) => {
-    // 商品编辑不加载分类下的属性
-    const spuId = props.modelValue.id;
-    if (spuId) {
-      return false;
-    }
-
-    // 商品新增加载默认分类下的属性
-    if (newVal) {
-      // type=2 商品分类下的属性
-      listAttributes({ categoryId: newVal, type: 2 }).then((response) => {
-        const attrList = response.data;
-        if (attrList && attrList.length > 0) {
-          props.modelValue.attrList = attrList;
-        } else {
-          props.modelValue.attrList = [{}];
-        }
-      });
-    } else {
-      props.modelValue.attrList = [{}];
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-const state = reactive({
-  rules: {
-    name: [{ required: true, message: "请填写属性名称", trigger: "blur" }],
-    value: [{ required: true, message: "请填写属性值", trigger: "blur" }],
-  },
-});
-
-const { rules } = toRefs(state);
-
-function handleAdd() {
-  props.modelValue.attrList.push({});
-}
-
-function handleRemove(index: number) {
-  props.modelValue.attrList.splice(index, 1);
-}
-
-function handlePrev() {
-  emit("prev");
-}
-
-function handleNext() {
-  const form = unref(dataForm);
-  form.validate((valid: any) => {
-    if (valid) {
-      emit("next");
-    }
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-.component-container {
-  &__main {
-    margin: 20px auto;
-  }
-
-  &__footer {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-  }
-}
-
-.el-form-item--mini.el-form-item {
-  margin-top: 18px;
-}
-</style>
diff --git a/src/views/pms/goods/components/GoodsCategory.vue b/src/views/pms/goods/components/GoodsCategory.vue
deleted file mode 100644
index adc62718..00000000
--- a/src/views/pms/goods/components/GoodsCategory.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <div class="component-container">
-    <div class="component-container__main">
-      <el-cascader-panel
-          ref="categoryRef"
-          :options="categoryOptions"
-          v-model="modelValue.categoryId"
-          :props="{emitPath:false}"
-          @change="handleCategoryChange"
-
-      />
-
-      <div style="margin-top: 20px">
-        <el-link type="info" :underline="false" v-show="pathLabels.length>0">您选择的商品分类:</el-link>
-        <el-link type="danger" :underline="false" v-for="(item,index) in pathLabels" style="margin-left: 5px">
-          {{ item }}
-          <CaretRight  v-show="index<pathLabels.length-1" style="width: 1em; height:1em;margin-left: 5px"/>
-        </el-link>
-      </div>
-
-    </div>
-    <div class="component-container__footer">
-      <el-button type="primary" @click="handleNext">下一步，填写商品信息</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {onMounted,nextTick, reactive, ref, toRefs} from "vue";
-import {ElCascaderPanel, ElMessage} from "element-plus";
-import {CaretRight} from '@element-plus/icons-vue';
-
-// API 引用
-import {listCascadeCategories} from "@/api/pms/category";
-
-const emit = defineEmits(['next'])
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default:{ }
-  }
-})
-
-const state = reactive({
-  categoryOptions: [],
-  pathLabels: []
-})
-
-const {categoryOptions, pathLabels} = toRefs(state)
-
-function loadData() {
-  listCascadeCategories({}).then(response => {
-    state.categoryOptions = response.data
-    if (props.modelValue.id) {
-      nextTick(() => {
-        handleCategoryChange()
-      })
-    }
-  })
-}
-const categoryRef = ref(ElCascaderPanel)
-
-function handleCategoryChange() {
-  const checkNode = categoryRef.value.getCheckedNodes()[0]
-  state.pathLabels = checkNode.pathLabels // 商品分类选择层级提示
-  props.modelValue.categoryId = checkNode.value
-}
-
-function handleNext() {
-  if (!props.modelValue.categoryId) {
-    ElMessage.warning('请选择商品分类')
-    return false
-  }
-  emit('next' )
-}
-
-onMounted(() => {
-  loadData()
-})
-
-</script>
-
-<style lang="scss" scoped>
-
-.component-container {
-  &__main {
-    margin: 20px auto
-  }
-
-  &__footer {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-  }
-}
-</style>
diff --git a/src/views/pms/goods/components/GoodsInfo.vue b/src/views/pms/goods/components/GoodsInfo.vue
deleted file mode 100644
index 64eb427b..00000000
--- a/src/views/pms/goods/components/GoodsInfo.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-  <div class="component-container">
-    <div class="component-container__main">
-      <el-form
-        ref="dataFormRef"
-        :rules="rules"
-        :model="modelValue"
-        label-width="120px"
-      >
-        <el-form-item label="商品品牌" prop="brandId">
-          <el-select
-            v-model="modelValue.brandId"
-            style="width: 400px"
-            clearable
-          >
-            <el-option
-              v-for="item in brandOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="商品名称" prop="name">
-          <el-input style="width: 400px" v-model="modelValue.name" />
-        </el-form-item>
-
-        <el-form-item label="原价" prop="originPrice">
-          <el-input style="width: 400px" v-model="modelValue.originPrice" />
-        </el-form-item>
-
-        <el-form-item label="现价" prop="price">
-          <el-input style="width: 400px" v-model="modelValue.price" />
-        </el-form-item>
-
-        <el-form-item label="商品简介">
-          <el-input
-            type="textarea"
-            :autosize="{ minRows: 3, maxRows: 6 }"
-            v-model="modelValue.description"
-          />
-        </el-form-item>
-
-        <el-form-item label="商品相册">
-          <el-card
-            v-for="(item, index) in pictures"
-            :key="index"
-            style="width: 170px; display: inline-block; margin-left: 10px;text-align:center"
-            :body-style="{ padding: '10px' }"
-          >
-            <single-upload v-model="item.url" :show-close="true" />
-
-            <div v-if="item.url">
-              <el-button
-                type="text"
-                class="button"
-                v-if="item.main == true"
-                style="color: #ff4d51"
-                >商品主图</el-button
-              >
-              <el-button
-                type="text"
-                class="button"
-                v-else
-                @click="changeMainPicture(index)"
-                >设为主图</el-button
-              >
-            </div>
-
-            <div  v-else>
-              <!-- 占位 -->
-              <el-button type="text" />
-            </div>
-          </el-card>
-        </el-form-item>
-
-        <el-form-item label="商品详情" prop="detail">
-          <editor v-model="modelValue.detail" style="height: 600px" />
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="component-container__footer">
-      <el-button @click="handlePrev">上一步，选择商品分类</el-button>
-      <el-button type="primary" @click="handleNext"
-        >下一步，设置商品属性</el-button
-      >
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs } from "vue";
-import { ElForm } from "element-plus";
-
-// API 依赖
-import { listBrands } from "@/api/pms/brand";
-
-// 自定义组件依赖
-import Editor from "@/components/WangEditor/index.vue";
-import SingleUpload from "@/components/Upload/SingleUpload.vue";
-
-const emit = defineEmits(["prev", "next"]);
-const dataFormRef = ref(ElForm);
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: {},
-  },
-});
-
-const state = reactive({
-  brandOptions: [] as Array<any>,
-  // 商品图册
-  pictures: [
-    { url: undefined, main: true }, // main = true 代表主图，可切换
-    { url: undefined, main: false },
-    { url: undefined, main: false },
-    { url: undefined, main: false },
-    { url: undefined, main: false },
-  ] as Array<any>,
-  rules: {
-    name: [{ required: true, message: "请填写商品名称", trigger: "blur" }],
-    originPrice: [{ required: true, message: "请填写原价", trigger: "blur" }],
-    price: [{ required: true, message: "请填写现价", trigger: "blur" }],
-    brandId: [{ required: true, message: "请选择商品品牌", trigger: "blur" }],
-  },
-});
-
-const { brandOptions, pictures, rules } = toRefs(state);
-
-function loadData() {
-  listBrands().then(({data}) => {
-    state.brandOptions = data;
-  });
-  const goodsInfo = props.modelValue;
-  const goodsId = goodsInfo.id;
-  if (goodsId) {
-    const mainPicUrl = goodsInfo.picUrl;
-    if (mainPicUrl) {
-      state.pictures.filter((item) => item.main)[0].url = mainPicUrl;
-    }
-    const subPicUrls = goodsInfo.subPicUrls;
-    if (subPicUrls && subPicUrls.length > 0) {
-      for (let i = 1; i <= subPicUrls.length; i++) {
-        state.pictures[i].url = subPicUrls[i - 1];
-      }
-    }
-  }
-}
-
-function resetForm() {
-  state.pictures = [
-    { url: undefined, main: true }, // main 代表主图，可以切换
-    { url: undefined, main: false },
-    { url: undefined, main: false },
-    { url: undefined, main: false },
-    { url: undefined, main: false },
-  ];
-}
-
-/**
- * 切换主图
- */
-function changeMainPicture(changeIndex: number) {
-  const currMainPicture = JSON.parse(JSON.stringify(state.pictures[0]));
-  const nextMainPicture = JSON.parse(
-    JSON.stringify(state.pictures[changeIndex])
-  );
-
-  state.pictures[0].url = nextMainPicture.url;
-  state.pictures[changeIndex].url = currMainPicture.url;
-}
-
-function handlePrev() {
-  emit("prev");
-}
-
-function handleNext() {
-  dataFormRef.value.validate((valid: any) => {
-    if (valid) {
-      // 商品图片
-      const mainPicUrl = state.pictures
-        .filter((item) => item.main == true && item.url)
-        .map((item) => item.url);
-      if (mainPicUrl && mainPicUrl.length > 0) {
-        props.modelValue.picUrl = mainPicUrl[0];
-      }
-      const subPicUrl = state.pictures
-        .filter((item) => item.main == false && item.url)
-        .map((item) => item.url);
-      if (subPicUrl && subPicUrl.length > 0) {
-        props.modelValue.subPicUrls = subPicUrl;
-      }
-      emit("next");
-    }
-  });
-}
-
-onMounted(() => {
-  loadData();
-});
-</script>
-
-<style lang="scss" scoped>
-.component-container {
-  &__main {
-    margin: 20px auto;
-
-    .button {
-      margin-left: 10px;
-
-    }
-  }
-
-  &__footer {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-
-  }
-}
-</style>
diff --git a/src/views/pms/goods/components/GoodsStock.vue b/src/views/pms/goods/components/GoodsStock.vue
deleted file mode 100644
index 2071e36b..00000000
--- a/src/views/pms/goods/components/GoodsStock.vue
+++ /dev/null
@@ -1,710 +0,0 @@
-<template>
-  <div class="component-container">
-    <div class="component-container__main">
-      <el-card class="box-card">
-        <template #header>
-          <span>商品规格</span>
-          <el-button
-            :icon="Plus"
-            type="success"
-            @click="handleSpecAdd"
-            size="small"
-            style="float: right"
-          >
-            添加规格项
-          </el-button>
-        </template>
-
-        <el-form
-          ref="specFormRef"
-          :model="specForm"
-          :inline="true"
-          size="small"
-        >
-          <el-table
-            ref="specTableRef"
-            :data="specForm.specList"
-            row-key="id"
-            size="small"
-          >
-            <el-table-column align="center" width="50">
-              <template>
-                <svg-icon class="drag-handler" icon-class="drag" />
-              </template>
-            </el-table-column>
-            <el-table-column label="规格名" width="200">
-              <template #default="scope">
-                <el-form-item
-                  :prop="'specList[' + scope.$index + '].name'"
-                  :rules="rules.spec.name"
-                >
-                  <el-input
-                    type="text"
-                    v-model="scope.row.name"
-                    size="small"
-                    @input="handleSpecChange()"
-                  />
-                </el-form-item>
-              </template>
-            </el-table-column>
-            <el-table-column>
-              <template #header>
-                规格值
-                <el-link
-                  type="danger"
-                  style="font-size: 12px"
-                  :underline="false"
-                  >（默认第一条规格包含图片）</el-link
-                >
-              </template>
-
-              <template #default="scope">
-                <div
-                  v-for="item in scope.row.values"
-                  :key="item.id"
-                  style="margin-right: 15px; display: inline-block"
-                >
-                  <el-tag
-                    size="small"
-                    closable
-                    :type="colors[scope.$index % colors.length]"
-                    @close="handleSpecValueRemove(scope.$index, item.id)"
-                  >
-                    {{ item.value }}
-                  </el-tag>
-                  <single-upload
-                    v-model="item.picUrl"
-                    v-if="scope.$index == 0"
-                    style="margin-top: 5px"
-                  />
-                </div>
-
-                <el-input
-                  v-if="tagInputs.length > 0 && tagInputs[scope.$index].visible"
-                  v-model="tagInputs[scope.$index].value"
-                  @keyup.enter="handleSpecValueInput(scope.$index)"
-                  @blur="handleSpecValueInput(scope.$index)"
-                  style="width: 80px; vertical-align: top"
-                  size="small"
-                />
-                <el-button
-                  v-else
-                  @click="handleSpecValueAdd(scope.$index)"
-                  :icon="Plus"
-                  style="vertical-align: top"
-                  size="small"
-                >
-                  添加规格值
-                </el-button>
-              </template>
-            </el-table-column>
-
-            <el-table-column width="60" label="操作">
-              <template #default="scope">
-                <el-button
-                  type="danger"
-                  :icon="Minus"
-                  size="small"
-                  circle
-                  plain
-                  @click.stop="handleSpecRemove(scope.$index)"
-                />
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-form>
-      </el-card>
-
-      <el-card class="box-card">
-        <template #header>
-          <span>商品库存</span>
-        </template>
-        <el-form ref="skuFormRef" :model="skuForm" size="small" :inline="true">
-          <el-table
-            :data="skuForm.skuList"
-            :span-method="objectSpanMethod"
-            highlight-current-row
-            size="small"
-            border
-          >
-            <el-table-column
-              v-for="(title, index) in specTitles"
-              :key="index"
-              align="center"
-              :prop="'specValue' + (index + 1)"
-              :label="title"
-            >
-            </el-table-column>
-
-            <el-table-column label="商品编码" align="center">
-              <template #default="scope">
-                <el-form-item
-                  :prop="'skuList[' + scope.$index + '].skuSn'"
-                  :rules="rules.sku.skuSn"
-                >
-                  <el-input v-model="scope.row.skuSn"/>
-                </el-form-item>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="价格" align="center">
-              <template #default="scope">
-                <el-form-item
-                  :prop="'skuList[' + scope.$index + '].price'"
-                  :rules="rules.sku.price"
-                >
-                  <el-input v-model="scope.row.price" />
-                </el-form-item>
-              </template>
-            </el-table-column>
-
-            <el-table-column label="库存" align="center">
-              <template #default="scope">
-                <el-form-item
-                  :prop="'skuList[' + scope.$index + '].stockNum'"
-                  :rules="rules.sku.stockNum"
-                >
-                  <el-input v-model="scope.row.stockNum" />
-                </el-form-item>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-form>
-      </el-card>
-    </div>
-    <div class="component-container__footer">
-      <el-button @click="handlePrev">上一步，设置商品属性</el-button>
-      <el-button type="primary" @click="submitForm">提交</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  computed,
-  getCurrentInstance,
-  nextTick,
-  onMounted,
-  reactive,
-  ref,
-  toRefs,
-  unref,
-  watch,
-} from "vue";
-import { useRouter } from "vue-router";
-import { Plus, Minus } from "@element-plus/icons-vue";
-import { ElNotification, ElMessage, ElTable, ElForm } from "element-plus";
-
-// API 引用
-import { listAttributes } from "@/api/pms/attribute";
-import { addGoods, updateGoods } from "@/api/pms/goods";
-
-// 自定义组件引用
-import SvgIcon from "@/components/SvgIcon/index.vue";
-import SingleUpload from "@/components/Upload/SingleUpload.vue";
-// import Sortable from 'sortablejs'
-
-const categoryId = computed(() => props.modelValue.categoryId);
-const emit = defineEmits(["prev", "next"]);
-
-const proxy = getCurrentInstance();
-const router = useRouter();
-
-const specTableRef = ref(ElTable);
-const specFormRef = ref(ElForm);
-const skuFormRef = ref(ElForm);
-
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: {},
-  },
-});
-
-const state = reactive({
-  specForm: {
-    specList: [],
-  },
-  skuForm: {
-    skuList: [],
-  },
-  // 规格项表格标题
-  specTitles: [],
-  rules: {
-    spec: {
-      name: [{ required: true, message: "请输入规格名称", trigger: "blur" }],
-      value: [{ required: true, message: "请输入规格值", trigger: "blur" }],
-    },
-    sku: {
-      skuSn: [{ required: true, message: "请输入商品编号", trigger: "blur" }],
-      price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
-      stockNum: [
-        { required: true, message: "请输入商品库存", trigger: "blur" },
-      ],
-    },
-  },
-  colors: ["", "success", "warning", "danger"],
-  tagInputs: [{ value: undefined, visible: false }], // 规格值标签临时值和显隐控制
-  loading: undefined,
-});
-
-const { specForm, skuForm, specTitles, rules, colors, tagInputs, loading } =
-  toRefs(state);
-
-watch(
-  categoryId,
-  (value) => {
-
-    // 商品编辑不加载分类下的规格
-    const spuId = props.modelValue.id;
-    if (spuId) {
-      return false;
-    }
-    if (value) {
-      // type=1 商品分类下的规格
-      listAttributes({ categoryId: value, type: 1 }).then((response) => {
-        const specList = response.data;
-        if (specList && specList.length > 0) {
-          specList.forEach((item) => {
-            state.specForm.specList.push({
-              name: item.name,
-              values: [],
-            });
-          });
-          loadData();
-        }
-      });
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-
-
-watch(state.specForm.specList,(value)=>{
-  generateSkuList()
-})
-
-function loadData() {
-  props.modelValue.specList.forEach((specItem) => {
-    const specIndex = state.specForm.specList.findIndex(
-      (item) => item.name == specItem.name
-    );
-    if (specIndex > -1) {
-      state.specForm.specList[specIndex].values.push({
-        id: specItem.id,
-        value: specItem.value,
-        picUrl: specItem.picUrl,
-      });
-    } else {
-      state.specForm.specList.push({
-        name: specItem.name,
-        values: [
-          { id: specItem.id, value: specItem.value, picUrl: specItem.picUrl },
-        ],
-      });
-    }
-  });
-
-  // 每个规格项追加一个添加规格值按钮
-  for (let i = 0; i < state.specForm.specList.length; i++) {
-    state.tagInputs.push({ value: undefined, visible: false });
-  }
-
-  // SKU规格ID拼接字符串处理
-  props.modelValue.skuList.forEach((sku) => {
-    sku.specIdArr = sku.specIds.split("_");
-  });
-
-  generateSkuList();
-
-  handleSpecChange();
-
-  handleSpecReorder();
-
-  nextTick(() => {
-    // registerSpecDragSortEvent()
-  });
-}
-
-/**
- * 生成SKU列表的title
- */
-function handleSpecChange() {
-  const specList = JSON.parse(JSON.stringify(state.specForm.specList));
-  state.specTitles = specList.map((item) => item.name);
-}
-
-/**
- * 规格列表重排序
- */
-function handleSpecReorder() {
-  state.specForm.specList.forEach((item, index) => {
-    item.index = index;
-  });
-}
-
-/**
- * 注册拖拽排序事件
- */
-/*function registerSpecDragSortEvent() {
-  const el = specTableRef.value.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-  Sortable.create(el, {
-    ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-    setData: function (dataTransfer: any) {
-      dataTransfer.setData('Text', '')
-    },
-    onEnd: (evt: any) => {
-      // oldIndex 拖拽行当前所在索引
-      // newIndex 拖拽行目标索引
-      const targetRow = state.specForm.specList.splice(evt.oldIndex, 1)[0] //  返回被删除的行
-      state.specForm.specList.splice(evt.newIndex, 0, targetRow) // 拼接
-      generateSkuList() // 重新生成sku
-      handleSpecChange()
-      handleSpecReorder()
-    }
-  })
-}*/
-
-/**
- *  根据商品规格笛卡尔积生成SKU列表
- *
- * 规格列表：
- * [
- *    { 'id':1,'name':'颜色','values':[{id:1,value:'白色'},{id:2,value:'黑色'},{id:3,value:'蓝色'}] },
- *    { 'id':2,'name':'版本','values':[{id:1,value:'6+128G'},{id:2,value:'8+128G'},{id:3,value:'8G+256G'}] }
- * ]
- */
-function generateSkuList() {
-  // 如果规格为空，生成SKU列表为空
-  if(state.specForm.specList.length==0){
-     state.skuForm.skuList = [];
-    return;
-  }
-
-  const specList = JSON.parse(
-    JSON.stringify(
-      state.specForm.specList.filter((item) => item.values&&item.values.length > 0)
-    )
-  ); // 深拷贝，取有属性的规格项，否则笛卡尔积运算得到的SKU列表值为空
-  
-  const skuList = specList.reduce(
-    (acc, curr) => {
-      let result = [];
-      acc.forEach((item) => {
-        // curr => { 'id':1,'name':'颜色','values':[{id:1,value:'白色'},{id:2,value:'黑色'},{id:3,value:'蓝色'}] }
-        curr.values.forEach((v) => {
-          // v=>{id:1,value:'白色'}
-          let temp = Object.assign({}, item);
-          temp.specValues += v.value + "_"; // 规格值拼接
-          temp.specIds += v.id + "|"; // 规格ID拼接
-          result.push(temp);
-        });
-      });
-      return result;
-    },
-    [{ specValues: "", specIds: "" }]
-  );
-
-  skuList.forEach((item) => {
-    item.specIds = item.specIds.substring(0, item.specIds.length - 1);
-    item.name = item.specValues
-      .substring(0, item.specValues.length - 1)
-      .replaceAll("_", " ");
-    const specIdArr = item.specIds.split("|");
-    const skus = props.modelValue.skuList.filter(
-      (sku) =>
-        sku.specIdArr.length === specIdArr.length &&
-        sku.specIdArr.every((a) => specIdArr.some((b) => a === b)) &&
-        specIdArr.every((x) => sku.specIdArr.some((y) => x === y))
-    ); // 数据库的SKU列表
-
-    if (skus && skus.length > 0) {
-      const sku = skus[0];
-      item.id = sku.id;
-      item.skuSn = sku.skuSn;
-      item.price = sku.price / 100;
-      item.stockNum = sku.stockNum;
-    }
-    const specValueArr = item.specValues
-      .substring(0, item.specValues.length - 1)
-      .split("_"); // ['黑','6+128G','官方标配']
-    specValueArr.forEach((v, i) => {
-      const key = "specValue" + (i + 1);
-      item[key] = v;
-      if (i == 0 && state.specForm.specList.length > 0) {
-        const valueIndex = state.specForm.specList[0].values.findIndex(
-          (specValue) => specValue.value == v
-        );
-        if (valueIndex > -1) {
-          item.picUrl = state.specForm.specList[0].values[valueIndex].picUrl;
-        }
-      }
-    });
-  });
-  state.skuForm.skuList = JSON.parse(JSON.stringify(skuList));
-}
-
-/**
- * 添加规格
- */
-function handleSpecAdd() {
-  if (state.specForm.specList.length >= 3) {
-    ElMessage.warning("最多支持3组规格");
-    return;
-  }
-  state.specForm.specList.push({values:[]});
-  state.tagInputs.push({ value: undefined, visible: false });
-  handleSpecReorder();
-}
-
-/**
- * 删除规格
- * @param index
- */
-function handleSpecRemove(index) {
-  state.specForm.specList.splice(index, 1);
-  state.tagInputs.splice(index, 1);
-  generateSkuList();
-  handleSpecReorder();
-  handleSpecChange();
-}
-
-/**
- * 添加规格值
- *
- * @param specIndex
- */
-function handleSpecValueAdd(specIndex) {
-  state.tagInputs[specIndex].visible = true;
-}
-
-/**
- *  删除规格值
- *
- * @param rowIndex
- * @param specValueId
- */
-function handleSpecValueRemove(rowIndex, specValueId) {
-  const specList = JSON.parse(JSON.stringify(state.specForm.specList));
-  const removeIndex = specList[rowIndex].values
-    .map((item) => item.id)
-    .indexOf(specValueId);
-  specList[rowIndex].values.splice(removeIndex, 1);
-  state.specForm.specList = specList;
-  generateSkuList();
-  handleSpecChange();
-  handleSpecReorder();
-}
-
-/**
- * 规格值输入
- */
-function handleSpecValueInput(rowIndex) {
-  const currSpecValue = state.tagInputs[rowIndex].value;
-  const specValues = state.specForm.specList[rowIndex].values;
-  if (
-    specValues &&
-    specValues.length > 0 &&
-    specValues.map((item) => item.value).includes(currSpecValue)
-  ) {
-    ElMessage.warning("规格值重复，请重新输入");
-    return false;
-  }
-  if (currSpecValue) {
-    if (specValues && specValues.length > 0) {
-      // 临时规格值ID tid_1_1
-      let maxSpecValueIndex = specValues
-        .filter((item) => item.id.includes("tid_"))
-        .map((item) => item.id.split("_")[2])
-        .reduce((acc, curr) => {
-          return acc > curr ? acc : curr;
-        }, 0);
-      console.log("maxSpecValueIndex", maxSpecValueIndex);
-      state.specForm.specList[rowIndex].values[specValues.length] = {
-        value: currSpecValue,
-        id: "tid_" + (rowIndex + 1) + "_" + ++maxSpecValueIndex,
-      };
-    } else {
-      state.specForm.specList[rowIndex].values = [
-        { value: currSpecValue, id: "tid_" + (rowIndex + 1) + "_1" },
-      ];
-    }
-  }
-  state.tagInputs[rowIndex].value = undefined;
-  state.tagInputs[rowIndex].visible = false;
-  generateSkuList();
-}
-
-/**
- * 合并规格单元格
- *
- * @param cellObj 单元格对象
- */
-
-const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
-  let mergeRows = [1, 1, 1]; // 分别对应规格1、规格2、规格3列合并的行数
-  const specLen = state.specForm.specList.filter(
-    (item) => item.values && item.values.length > 0
-  ).length;
-  if (specLen == 2) {
-    const values_len_2 = state.specForm.specList[1].values
-      ? state.specForm.specList[1].values.length
-      : 1; // 第2个规格项的规格值的数量
-    mergeRows = [values_len_2, 1, 1];
-  } else if (specLen == 3) {
-    const values_len_2 = state.specForm.specList[1].values
-      ? state.specForm.specList[1].values.length
-      : 1; // 第2个规格项的规格值的数量
-    const values_len_3 = state.specForm.specList[2].values
-      ? state.specForm.specList[2].values.length
-      : 1; // 第3个规格项的规格值的数量
-    mergeRows = [values_len_2 * values_len_3, values_len_3, 1];
-  }
-  if (columnIndex == 0) {
-    if (rowIndex % mergeRows[0] === 0) {
-      return [mergeRows[0], 1]; // 合并单元格
-    } else {
-      return [0, 0]; // 隐藏单元格
-    }
-  }
-  if (columnIndex == 1) {
-    if (rowIndex % mergeRows[1] === 0) {
-      return [mergeRows[1], 1]; // 合并单元格
-    } else {
-      return [0, 0]; // 隐藏单元格
-    }
-  }
-};
-
-/**
- * 商品表单提交
- */
-function submitForm() {
-  // 判断商品SKU列表是否为空
-  if (!state.skuForm.skuList || state.skuForm.skuList.length === 0) {
-    ElMessage.warning("未添加商品库存");
-    return false;
-  }
-  specFormRef.value.validate((specValid) => {
-    if (specValid) {
-      skuFormRef.value.validate((skuValid) => {
-        if (skuValid) {
-          // openFullScreen()
-
-          // 重组商品的规格和SKU列表
-          let submitsData = Object.assign({}, props.modelValue);
-          delete submitsData.specList;
-          delete submitsData.skuList;
-
-          let specList = [];
-          state.specForm.specList.forEach((item) => {
-            item.values.forEach((value) => {
-              value.name = item.name;
-            });
-            specList = specList.concat(item.values);
-          });
-          submitsData.specList = specList; // 规格列表
-
-          submitsData.price *= 100; // 金额转成分保存至数据库
-          submitsData.originPrice *= 100;
-
-          let skuList = JSON.parse(JSON.stringify(state.skuForm.skuList));
-          skuList.map((item) => {
-            item.price *= 100;
-            return item;
-          });
-          submitsData.skuList = skuList;
-          console.log("提交数据", submitsData);
-          const goodsId = props.modelValue.id;
-          if (goodsId) {
-            // 编辑商品提交
-            updateGoods(goodsId, submitsData).then(
-              (res) => {
-                router.push({ path: "/pms/goods" });
-                ElNotification({
-                  title: "提示",
-                  message: "编辑商品成功",
-                  type: "success",
-                });
-                //closeFullScreen()
-              },
-              (err) => {
-                //closeFullScreen()
-              }
-            );
-          } else {
-            // 新增商品提交
-            addGoods(submitsData).then(
-              (response) => {
-                router.push({ path: "/pms/goods" });
-                ElNotification({
-                  title: "提示",
-                  message: "新增商品成功",
-                  type: "success",
-                });
-                // closeFullScreen()
-              },
-              (err) => {
-                // closeFullScreen()
-              }
-            );
-          }
-        }
-      });
-    }
-  });
-}
-
-function openFullScreen() {
-  state.loading = proxy.$loading({
-    lock: true,
-    text: "商品信息提交中，请等待...",
-    spinner: "el-icon-loading",
-    background: "rgba(0, 0, 0, 0.7)",
-  });
-}
-
-function closeFullScreen() {
-  if (state.loading) {
-    state.loading.close();
-  }
-}
-
-function handlePrev() {
-  emit("prev");
-}
-
-function handNext() {
-  emit("next");
-}
-
-onMounted(() => {
-  loadData();
-});
-</script>
-
-<style lang="scss" scoped>
-.component-container {
-  &__main {
-    margin: 20px auto;
-  }
-
-  &__footer {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-  }
-
-  .box-card {
-    margin-bottom: 20px;
-  }
-}
-
-.el-form--inline .el-form-item{
-  margin-top: 18px;
-}
-</style>
diff --git a/src/views/pms/goods/detail.vue b/src/views/pms/goods/detail.vue
deleted file mode 100644
index 157d7a3a..00000000
--- a/src/views/pms/goods/detail.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-steps :active="active" process-status="finish" finish-status="success" simple>
-      <el-step title="选择商品分类"/>
-      <el-step title="填写商品信息"/>
-      <el-step title="设置商品属性"/>
-      <el-step title="设置商品库存"/>
-    </el-steps>
-
-    <goods-category
-      v-show="active==0"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
-
-    <goods-info
-      v-show="active==1"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
-    <goods-attribute
-      v-show="active==2"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
-
-    <goods-stock
-      v-show="active==3"
-      v-model="goods"
-      v-if="loaded==true"
-      @prev="prev"
-      @next="next"
-    />
-  </div>
-</template>
-
-<script>
-import GoodsCategory from "./components/GoodsCategory.vue";
-import GoodsInfo from "./components/GoodsInfo.vue";
-import GoodsAttribute from "./components/GoodsAttribute.vue";
-import GoodsStock from "./components/GoodsStock.vue";
-
-import {getGoodsFormDetail} from "@/api/pms/goods";
-
-export default {
-  name: "goods-detail",
-  components: {GoodsStock, GoodsCategory, GoodsInfo, GoodsAttribute},
-  props: ['goodsId'],
-  data() {
-    return {
-      loaded: false,
-      active: 0,
-      goods: {
-        id: undefined,
-        name: undefined,
-        categoryId: undefined,
-        brandId: undefined,
-        originPrice: undefined,
-        price: undefined,
-        picUrl: undefined,
-        album: undefined,
-        description: undefined,
-        detail: undefined,
-        attrList: [],
-        specList: [],
-        skuList: []
-      }
-    };
-  },
-  created() {
-    this.loadData()
-  },
-  methods: {
-    loadData() {
-      const goodsId = this.$route.query.goodsId
-      console.log('goodsId',goodsId)
-      if (goodsId) {
-        getGoodsFormDetail(goodsId).then(response => {
-          this.goods = response.data
-          this.goods.originPrice = this.goods.originPrice / 100
-          this.goods.price = this.goods.price / 100
-          this.loaded = true
-        })
-      } else {
-        this.loaded = true
-      }
-    },
-    prev() {
-      if (this.active-- <= 0) {
-        this.active = 0;
-      }
-    },
-    next() {
-      if (this.active++ >= 3) {
-        this.active = 0;
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-container {
-  width: 1200px;
-  margin: 50px auto;
-  border: 1px solid #eee;
-}
-</style>
diff --git a/src/views/pms/goods/index.vue b/src/views/pms/goods/index.vue
deleted file mode 100644
index 9bac3165..00000000
--- a/src/views/pms/goods/index.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form ref="queryForm" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >发布商品</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          @click="handleDelete"
-          :disabled="multiple"
-          >删除</el-button
-        >
-      </el-form-item>
-      <el-form-item>
-        <el-input
-          v-model="queryParams.name"
-          placeholder="商品名称"
-          clearable
-        ></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-cascader
-          v-model="queryParams.categoryId"
-          placeholder="商品分类"
-          :props="{ emitPath: false, expandTrigger: 'hover' }"
-          :options="categoryOptions"
-          clearable
-          style="width: 300px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >查询</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table
-      ref="dataTableRef"
-      v-loading="loading"
-      :data="goodsList"
-      @selection-change="handleSelectionChange"
-      @row-click="handleRowClick"
-      border
-    >
-      <el-table-column type="selection" min-width="5%" center />
-      <el-table-column type="expand" width="120" label="库存信息">
-        <template #default="props">
-          <el-table :data="props.row.skuList" border>
-            <el-table-column align="center" label="商品编码" prop="skuSn" />
-            <el-table-column align="center" label="商品规格" prop="name" />
-            <el-table-column label="图片" prop="picUrl">
-              <template #default="scope">
-                <img :src="scope.row.picUrl" width="40" />
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="现价" prop="price">
-              <template #default="scope">{{
-                moneyFormatter(scope.row.price)
-              }}</template>
-            </el-table-column>
-            <el-table-column align="center" label="库存" prop="stockNum" />
-          </el-table>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品名称" prop="name" min-width="140" />
-      <el-table-column label="商品图片">
-        <template #default="scope">
-          <el-popover placement="right" :width="400" trigger="hover">
-            <img :src="scope.row.picUrl" width="400" height="400" />
-            <template #reference>
-              <img
-                :src="scope.row.picUrl"
-                style="max-height: 60px; max-width: 60px"
-              />
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-      <el-table-column label="商品类目" prop="categoryName" min-width="100" />
-      <el-table-column label="商品品牌" prop="brandName" min-width="100" />
-      <el-table-column align="center" label="零售价" prop="originalPrice">
-        <template #default="scope">{{
-          moneyFormatter(scope.row.originPrice)
-        }}</template>
-      </el-table-column>
-      <el-table-column align="center" label="促销价" prop="price">
-        <template #default="scope">{{
-          moneyFormatter(scope.row.price)
-        }}</template>
-      </el-table-column>
-      <el-table-column label="销量" prop="sales" min-width="100" />
-      <el-table-column label="单位" prop="unit" min-width="100" />
-      <el-table-column label="描述" prop="description"  width="300" :show-overflow-tooltip="true" />
-      <el-table-column label="详情" prop="detail">
-        <template #default="scope">
-
-           <el-button
-            type="primary"
-            :icon="View"
-            circle
-            plain
-            @click.stop="handleGoodsView(scope.row.detail)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="120">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-    <el-dialog v-model="dialogVisible" title="商品详情">
-      <div class="goods-detail-box" v-html="goodDetail" />
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, onMounted, toRefs } from "vue";
-import { ElTable, ElMessage, ElMessageBox } from "element-plus";
-import { useRouter } from "vue-router";
-
-import { Search, Plus, Edit, Refresh, Delete,View } from "@element-plus/icons-vue";
-import { listGoodsPages, deleteGoods } from "@/api/pms/goods";
-import { listCascadeCategories } from "@/api/pms/category";
-import { GoodsItem, GoodsQueryParam } from "@/types";
-import {moneyFormatter} from '@/utils/filter'
-
-const dataTableRef = ref(ElTable);
-const router = useRouter();
-
-const state = reactive({
-  // 遮罩层
-  loading: true,
-  // 选中数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  total: 0,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as GoodsQueryParam,
-  goodsList: [] as GoodsItem[],
-  categoryOptions: [],
-  goodDetail: undefined,
-  dialogVisible: false,
-});
-
-const {
-  loading,
-  ids,
-  single,
-  multiple,
-  queryParams,
-  goodsList,
-  categoryOptions,
-  goodDetail,
-  total,
-  dialogVisible,
-} = toRefs(state);
-
-function handleQuery() {
-  state.loading = true;
-  listGoodsPages(state.queryParams).then(({ data }) => {
-    state.goodsList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  state.queryParams = {
-    pageNum: 1,
-    pageSize: 10,
-    name: undefined,
-    categoryId: undefined,
-  };
-  handleQuery();
-}
-
-function handleGoodsView(detail: any) {
-  state.goodDetail = detail;
-  state.dialogVisible = true;
-}
-
-function handleAdd() {
-  router.push({ path: "goods-detail" });
-}
-
-function handleUpdate(row: any) {
-  router.push({
-    path: "goods-detail",
-    query: { goodsId: row.id, categoryId: row.categoryId },
-  });
-}
-
-function handleDelete(row: any) {
-  const ids = row.id || state.ids.join(",");
-  ElMessageBox.confirm("是否确认删除选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(function () {
-      return deleteGoods(ids);
-    })
-    .then(() => {
-      ElMessage.success("删除成功");
-      handleQuery();
-    });
-}
-
-function handleRowClick(row: any) {
-  dataTableRef.value.toggleRowSelection(row);
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: { id: any }) => item.id);
-  state.single = selection.length != 1;
-  state.multiple = !selection.length;
-}
-
-onMounted(() => {
-  listCascadeCategories({}).then((response) => {
-    state.categoryOptions = ref(response.data);
-  });
-  handleQuery();
-});
-</script>
-
-<style scoped>
-</style>
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index 2363a22e..47cad96e 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -1,15 +1,15 @@
 <template>
-  <div/>
+  <div />
 </template>
 
 <script setup lang="ts">
-import {useRoute, useRouter} from "vue-router";
+import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
 const router = useRouter();
 
-const { params, query } = route
-const { path } = params
+const { params, query } = route;
+const { path } = params;
 
-router.replace({ path: '/' + path, query })
+router.replace({ path: '/' + path, query });
 </script>
diff --git a/src/views/sms/advert/index.vue b/src/views/sms/advert/index.vue
deleted file mode 100644
index 4289856e..00000000
--- a/src/views/sms/advert/index.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          >删除</el-button
-        >
-      </el-form-item>
-
-      <el-form-item prop="title">
-        <el-input
-          v-model="queryParams.title"
-          placeholder="广告标题"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="advertList"
-      @selection-change="handleSelectionChange"
-      border
-    >
-      <el-table-column type="selection" min-width="5" align="center" />
-      <el-table-column type="index" label="序号" width="80" align="center" />
-      <el-table-column prop="title" min-width="100" label="广告标题" />
-      <el-table-column label="广告图片" width="100">
-        <template #default="scope">
-          <el-popover placement="right" :width="400" trigger="hover">
-            <img :src="scope.row.picUrl" width="400" height="400" />
-            <template #reference>
-              <img
-                :src="scope.row.picUrl"
-                style="max-height: 60px; max-width: 60px"
-              />
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-      <el-table-column prop="beginTime" label="开始时间" width="150" />
-      <el-table-column prop="endTime" label="结束时间" width="150" />
-      <el-table-column prop="status" label="状态" width="100">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status === 1" type="success">开启</el-tag>
-          <el-tag v-else type="info">关闭</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="sort" label="排序" width="80" />
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="广告标题" prop="title">
-          <el-input v-model="formData.title" />
-        </el-form-item>
-
-        <el-form-item label="有效期" prop="beginTime">
-          <el-date-picker
-            v-model="formData.beginTime"
-            placeholder="开始时间"
-            value-format="YYYY-MM-DD"
-          />
-          ~
-          <el-date-picker
-            v-model="formData.endTime"
-            placeholder="结束时间"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-
-        <el-form-item label="广告图片" prop="picUrl">
-          <single-upload v-model="formData.picUrl" />
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input v-model="formData.sort" style="width: 200px" />
-        </el-form-item>
-
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">开启</el-radio>
-            <el-radio :label="0">关闭</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="跳转链接" prop="url">
-          <el-input v-model="formData.url" />
-        </el-form-item>
-
-        <el-form-item label="备注" prop="remark">
-          <el-input type="textarea" v-model="formData.remark" />
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs, unref } from "vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import SingleUpload from "@/components/Upload/SingleUpload.vue";
-import {
-  listAdvertPages,
-  getAdvertFormDetail,
-  updateAdvert,
-  addAdvert,
-  deleteAdverts,
-} from "@/api/sms/advert";
-import { AdvertFormData, AdvertItem, AdvertQueryParam, Dialog } from "@/types";
-
-const queryFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
-const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: { pageNum: 1, pageSize: 10 } as AdvertQueryParam,
-  advertList: [] as AdvertItem[],
-  total: 0,
-  dialog: {} as Dialog,
-  formData: {
-    status: 1,
-    sort: 100,
-  } as AdvertFormData,
-  rules: {
-    title: [{ required: true, message: "请输入广告名称", trigger: "blur" }],
-    beginTime: [{ required: true, message: "请填写开始时间", trigger: "blur" }],
-    endTime: [{ required: true, message: "请填写结束时间", trigger: "blur" }],
-    picUrl: [{ required: true, message: "请上传广告图片", trigger: "blur" }],
-  },
-});
-
-const {
-  loading,
-  single,
-  multiple,
-  queryParams,
-  advertList,
-  total,
-  dialog,
-  formData,
-  rules,
-} = toRefs(state);
-
-function handleQuery() {
-  state.loading = true;
-  listAdvertPages(state.queryParams).then(({data}) => {
-    state.advertList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleAdd() {
-  resetForm();
-  state.dialog = {
-    title: "添加广告",
-    visible: true,
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: "修改广告",
-    visible: true,
-  };
-  const advertId = row.id || state.ids;
-  getAdvertFormDetail(advertId).then((response) => {
-    state.formData = response.data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((valid: any) => {
-    if (valid) {
-      const avertId = state.formData.id;
-      if (avertId) {
-        updateAdvert(avertId, state.formData).then((response) => {
-          ElMessage.success("修改成功");
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addAdvert(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-/**
- * 重置表单
- */
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-function cancel() {
-  resetForm();
-  state.dialog.visible = false;
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deleteAdverts(ids).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
diff --git a/src/views/system/client/index.vue b/src/views/system/client/index.vue
deleted file mode 100644
index ab3da22c..00000000
--- a/src/views/system/client/index.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          >删除</el-button
-        >
-      </el-form-item>
-
-      <el-form-item prop="clientId">
-        <el-input
-          v-model="queryParams.clientId"
-          placeholder="输入客户端ID"
-          clearable
-          style="width: 240px"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      v-loading="loading"
-      :data="clientList"
-      border
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" type="index" width="55" align="center" />
-      <el-table-column label="客户端ID" prop="clientId" width="200" />
-      <el-table-column label="客户端密钥" prop="clientSecret" width="100" />
-      <el-table-column label="域" width="100" prop="scope" />
-      <el-table-column label="自动放行" prop="autoapprove" width="100" />
-      <el-table-column label="授权方式" prop="authorizedGrantTypes" />
-      <el-table-column
-        label="认证令牌时效(单位：秒)"
-        width="200"
-        prop="accessTokenValidity"
-      />
-      <el-table-column
-        label="刷新令牌时效(单位：秒)"
-        width="200"
-        prop="refreshTokenValidity"
-      />
-      <el-table-column label="操作" align="center" width="120">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="客户端ID" prop="clientId">
-              <el-input
-                v-model="formData.clientId"
-                placeholder="请输入客户端ID"
-              />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="客户端密钥" prop="clientSecret">
-              <el-input
-                v-model="formData.clientSecret"
-                placeholder="请输入客户端密钥"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="域" prop="scope">
-              <el-input v-model="formData.scope" placeholder="请输入域" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="自动放行" prop="autoapprove">
-              <el-radio-group v-model="formData.autoapprove">
-                <el-radio label="true">是</el-radio>
-                <el-radio label="false">否</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-form-item label="授权方式" prop="authorizedGrantTypes">
-          <el-checkbox-group v-model="checkedAuthorizedGrantTypes">
-            <el-checkbox
-              v-for="item in authorizedGrantTypesOptions"
-              :key="item.value"
-              :label="item.value"
-              >{{ item.label }}
-            </el-checkbox>
-          </el-checkbox-group>
-        </el-form-item>
-
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="认证令牌时效" prop="accessTokenValidity">
-              <el-input
-                v-model="formData.accessTokenValidity"
-                placeholder="请输入认证令牌时效"
-              />
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
-            <el-form-item label="刷新令牌时效" prop="refreshTokenValidity">
-              <el-input
-                v-model="formData.refreshTokenValidity"
-                placeholder="请输入刷新令牌时效"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="回调地址" prop="webServerRedirectUri">
-              <el-input
-                v-model="formData.webServerRedirectUri"
-                placeholder="请输入回调地址"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="权限" prop="authorities">
-              <el-input
-                v-model="formData.authorities"
-                placeholder="请输入权限"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="扩展信息" prop="additionalInformation">
-              <el-input
-                v-model="formData.additionalInformation"
-                type="textarea"
-                placeholder="JSON格式"
-              />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm"> 确定 </el-button>
-          <el-button @click="cancel"> 取消 </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  listClientPages,
-  getClientFormDetial,
-  addClient,
-  updateClient,
-  deleteClients,
-} from "@/api/system/client";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import { onMounted, reactive, getCurrentInstance, ref, toRefs } from "vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import { ClientFormData, ClientItem, ClientQueryParam, Option } from "@/types";
-const { proxy }: any = getCurrentInstance();
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as ClientQueryParam,
-  clientList: [] as ClientItem[],
-  total: 0,
-  dialog: {
-    title: "",
-    visible: false,
-    type: "create",
-  },
-  formData: {} as ClientFormData,
-  rules: {
-    clientId: [
-      { required: true, message: "客户端ID不能为空", trigger: "blur" },
-    ],
-  },
-  authorizedGrantTypesOptions: [] as Option[],
-  checkedAuthorizedGrantTypes: [] as string[],
-});
-
-const {
-  loading,
-  ids,
-  single,
-  multiple,
-  queryParams,
-  clientList,
-  total,
-  dialog,
-  formData,
-  rules,
-  authorizedGrantTypesOptions,
-  checkedAuthorizedGrantTypes,
-} = toRefs(state);
-
-function handleQuery() {
-  listClientPages(state.queryParams).then(({ data }) => {
-    state.clientList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.clientId);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleAdd() {
-  proxy.$listDictsByCode("grant_type").then((response: any) => {
-    state.authorizedGrantTypesOptions = response.data;
-  });
-
-  state.dialog = {
-    title: "添加客户端",
-    visible: true,
-    type: "create",
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: "修改客户端",
-    visible: true,
-    type: "edit",
-  };
-  const clientId = row.clientId || ids;
-
-  proxy.$listDictsByCode("grant_type").then((res: any) => {
-    state.authorizedGrantTypesOptions = res.data;
-
-    getClientFormDetial(clientId).then(({ data }) => {
-      state.formData = data;
-      state.checkedAuthorizedGrantTypes = data.authorizedGrantTypes?.split(",");
-    });
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isvalid: boolean) => {
-    if (isvalid) {
-      state.formData.authorizedGrantTypes =
-        state.checkedAuthorizedGrantTypes.join(",");
-      if (state.dialog.type == "edit") {
-        updateClient(state.formData.clientId, state.formData).then(
-          (response) => {
-            ElMessage.success("修改成功");
-            state.dialog.visible = false;
-            cancel();
-            handleQuery();
-          }
-        );
-      } else {
-        addClient(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-function resetForm() {
-  dataFormRef.value.resetFields();
-  state.checkedAuthorizedGrantTypes = [];
-}
-
-function cancel() {
-  resetForm();
-  state.dialog.visible = false;
-}
-
-function handleDelete(row: any) {
-  const clientIds = [row.clientId || ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deleteClients(clientIds).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index b4ca46be..7f8f4f91 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,230 +1,54 @@
-<template>
-  <div class="app-container">
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="single"
-          @click="handleDelete"
-          >删除
-        </el-button>
-      </el-form-item>
-
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入部门名称"
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-
-      <el-form-item prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="部门状态"
-          clearable
-        >
-          <el-option :value="1" label="正常" />
-          <el-option :value="0" label="禁用" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button
-          class="filter-item"
-          type="primary"
-          :icon="Search"
-          @click="handleQuery"
-        >
-          搜索
-        </el-button>
-        <el-button :icon="Refresh" @click="resetQuery"> 重置 </el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-table
-      v-loading="loading"
-      :data="deptList"
-      row-key="id"
-      default-expand-all
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column prop="name" label="部门名称" />
-      <el-table-column prop="status" label="状态" width="100">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
-          <el-tag v-else type="info">禁用</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column prop="sort" label="显示排序" width="200" />
-
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          >
-          </el-button>
-          <el-button
-            type="success"
-            :icon="Plus"
-            circle
-            plain
-            @click.stop="handleAdd(scope.row)"
-          >
-          </el-button>
-
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          >
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 添加或修改部门对话框 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      width="600px"
-      @closed="cancel"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="80px"
-      >
-        <el-form-item label="上级部门" prop="parentId">
-          <tree-select
-            :options="deptOptions"
-            placeholder="选择上级部门"
-            v-model="formData.parentId"
-          />
-        </el-form-item>
-        <el-form-item label="部门名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入部门名称" />
-        </el-form-item>
-        <el-form-item label="显示排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            controls-position="right"
-            style="width: 100px"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item label="部门状态">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">禁用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm"> 确 定 </el-button>
-          <el-button @click="cancel"> 取 消 </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
 <script setup lang="ts">
-// Vue依赖
-import { onMounted, reactive, unref, ref, toRefs } from "vue";
+defineOptions({
+  name: "Dept",
+  inheritAttrs: false,
+});
 
-// API依赖
 import {
-  getDeptFormDetail,
+  getDeptForm,
   deleteDept,
   updateDept,
   addDept,
-  listSelectDepartments,
-  listTableDepartments,
-} from "@/api/system/dept";
+  listDeptOptions,
+  listDepts,
+} from "@/api/dept";
 
-// 组件依赖
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import TreeSelect from "@/components/TreeSelect/index.vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import {
-  DeptFormData,
-  DeptItem,
-  DeptQueryParam,
-  Dialog,
-  Option,
-} from "@/types";
+import { DeptVO, DeptForm, DeptQuery } from "@/api/dept/types";
 
-// DOM元素的引用声明定义
 const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
+const deptFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const dialog = reactive<DialogOption>({
+  visible: false,
+});
 
-const state = reactive({
-  // 选中ID数组
-  ids: [] as number[],
-  // 非单个禁用
-  single: true,
-  disabled: false,
-  loading: true,
-  // 表格树数据
-  deptList: [] as DeptItem[],
-  // 部门下拉选项
-  deptOptions: [] as Option[],
-  // 弹窗属性
-  dialog: {visible:false} as Dialog,
-  // 查询参数
-  queryParams: {} as DeptQueryParam,
-  // 表单数据
-  formData: {
-    sort: 1,
-    status: 1,
-  } as DeptFormData,
-  // 表单参数校验
-  rules: {
-    parentId: [
-      { required: true, message: "上级部门不能为空", trigger: "blur" },
-    ],
-    name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
-    sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
-  },
+const queryParams = reactive<DeptQuery>({});
+const deptList = ref<DeptVO[]>();
+
+const deptOptions = ref<OptionType[]>();
+
+const formData = reactive<DeptForm>({
+  status: 1,
+  parentId: 0,
+  sort: 1,
 });
 
-const {
-  ids,
-  single,
-  disabled,
-  loading,
-  deptList,
-  deptOptions,
-  queryParams,
-  formData,
-  rules,
-  dialog,
-} = toRefs(state);
+const rules = reactive({
+  parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
+  name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
+  sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
+});
 
 /**
- * 部门查询
+ * 查询
  */
 function handleQuery() {
-  state.loading = true;
-  listTableDepartments(state.queryParams).then(({ data }) => {
-    state.deptList = data;
-    state.loading = false;
+  loading.value = true;
+  listDepts(queryParams).then(({ data }) => {
+    deptList.value = data;
+    loading.value = false;
   });
 }
 
@@ -236,81 +60,72 @@ function resetQuery() {
   handleQuery();
 }
 
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length === 0;
-}
-
 /**
- * 加载部门下拉数据源
+ * 行复选框选中记录选中ID集合
  */
-async function loadDeptOptions() {
-  const deptOptions: any[] = [];
-  listSelectDepartments().then((response) => {
-    const rootDeptOption = {
-      id: 0,
-      label: "顶级部门",
-      children: response.data,
-    };
-    deptOptions.push(rootDeptOption);
-    state.deptOptions = deptOptions;
-  });
-}
-
-/**
- * 表单重置
- **/
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
 }
 
 /**
- * 添加部门
+ * 获取部门下拉数据
  */
-function handleAdd(row: any) {
-  loadDeptOptions();
-  state.formData.parentId = row.id;
-  state.dialog = {
-    title: "添加部门",
-    visible: true,
-  };
+async function getDeptOptions() {
+  listDeptOptions().then((response) => {
+    deptOptions.value = [
+      {
+        value: 0,
+        label: "顶级部门",
+        children: response.data,
+      },
+    ];
+  });
 }
 
 /**
- * 修改部门
+ * 打开弹窗
+ *
+ * @param parentId 父部门ID
+ * @param deptId 部门ID
  */
-async function handleUpdate(row: any) {
-  await loadDeptOptions();
-  const deptId = row.id || state.ids;
-  state.dialog = {
-    title: "修改部门",
-    visible: true,
-  };
-  getDeptFormDetail(deptId).then((response: any) => {
-    state.formData = response.data;
-  });
+async function openDialog(parentId?: number, deptId?: number) {
+  await getDeptOptions();
+  dialog.visible = true;
+  if (deptId) {
+    dialog.title = "修改部门";
+    getDeptForm(deptId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    dialog.title = "新增部门";
+    formData.parentId = parentId ?? 0;
+  }
 }
 
 /**
- * 部门表单提交
+ * 表单提交
  */
-function submitForm() {
-  const dataForm = unref(dataFormRef);
-  dataForm.validate((valid: any) => {
+function handleSubmit() {
+  deptFormRef.value.validate((valid: any) => {
     if (valid) {
-      if (state.formData.id) {
-        updateDept(state.formData.id, state.formData).then((res: any) => {
-          ElMessage.success("修改成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
+      const deptId = formData.id;
+      loading.value = true;
+      if (deptId) {
+        updateDept(deptId, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
       } else {
-        addDept(state.formData).then(() => {
-          ElMessage.success("新增成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
+        addDept(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
       }
     }
   });
@@ -318,38 +133,199 @@ function submitForm() {
 
 /**
  * 删除部门
- *
- * @param row
  */
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
+function handleDelete(deptId?: number) {
+  const deptIds = [deptId || ids.value].join(",");
+
+  if (!deptIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
   ElMessageBox.confirm(`确认删除已选中的数据项?`, "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
-  })
-    .then(() => {
-      deleteDept(ids)
-        .then(() => {
-          handleQuery();
-          ElMessage.success("删除成功");
-        })
-        .catch(() => {
-          console.log(`删除失败`);
-        });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
+  }).then(() => {
+    deleteDept(deptIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
+  });
 }
 
 /**
- * 取消/关闭弹窗
- **/
-function cancel() {
+ * 关闭弹窗
+ */
+function closeDialog() {
+  dialog.visible = false;
   resetForm();
-  state.dialog.visible = false;
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  deptFormRef.value.resetFields();
+  deptFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.parentId = 0;
+  formData.status = 1;
+  formData.sort = 1;
 }
 
 onMounted(() => {
   handleQuery();
 });
 </script>
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="部门名称"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item label="部门状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="部门状态"
+            clearable
+          >
+            <el-option :value="1" label="正常" />
+            <el-option :value="0" label="禁用" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button class="filter-item" type="primary" @click="handleQuery">
+            <i-ep-search />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery"> <i-ep-refresh />重置 </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card>
+      <template #header>
+        <el-button
+          v-hasPerm="['sys:dept:add']"
+          type="success"
+          @click="openDialog(0, undefined)"
+          ><i-ep-plus />新增</el-button
+        >
+        <el-button
+          v-hasPerm="['sys:dept:delete']"
+          type="danger"
+          :disabled="ids.length === 0"
+          @click="handleDelete()"
+          ><i-ep-delete />删除
+        </el-button>
+      </template>
+
+      <el-table
+        v-loading="loading"
+        :data="deptList"
+        row-key="id"
+        default-expand-all
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="name" label="部门名称" min-width="200" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="sort" label="排序" width="100" />
+
+        <el-table-column label="操作" fixed="right" align="left" width="200">
+          <template #default="scope">
+            <el-button
+              v-hasPerm="['sys:dept:add']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.id, undefined)"
+              ><i-ep-plus />新增
+            </el-button>
+            <el-button
+              v-hasPerm="['sys:dept:edit']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.parentId, scope.row.id)"
+              ><i-ep-edit />编辑
+            </el-button>
+            <el-button
+              v-hasPerm="['sys:dept:delete']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="handleDelete(scope.row.id)"
+            >
+              <i-ep-delete />删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="600px"
+      @closed="closeDialog"
+    >
+      <el-form
+        ref="deptFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="上级部门" prop="parentId">
+          <el-tree-select
+            v-model="formData.parentId"
+            placeholder="选择上级部门"
+            :data="deptOptions"
+            filterable
+            check-strictly
+            :render-after-expand="false"
+          />
+        </el-form-item>
+        <el-form-item label="部门名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入部门名称" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            style="width: 100px"
+            :min="0"
+          />
+        </el-form-item>
+        <el-form-item label="部门状态">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
+          <el-button @click="closeDialog"> 取 消 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/src/views/system/dict/DictData.vue b/src/views/system/dict/DictData.vue
new file mode 100644
index 00000000..ce3b12f7
--- /dev/null
+++ b/src/views/system/dict/DictData.vue
@@ -0,0 +1,325 @@
+<!-- 字典数据 -->
+<script setup lang="ts">
+defineOptions({
+  name: "DictData",
+  inheritAttrs: false,
+});
+
+import {
+  getDictPage,
+  getDictFormData,
+  addDict,
+  updateDict,
+  deleteDict,
+} from "@/api/dict";
+import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
+
+const props = defineProps({
+  typeCode: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+  typeName: {
+    type: String,
+    default: () => {
+      return "";
+    },
+  },
+});
+
+watch(
+  () => props.typeCode,
+  (newVal: string) => {
+    queryParams.typeCode = newVal;
+    formData.typeCode = newVal;
+    resetQuery();
+  }
+);
+
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<DictQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  typeCode: props.typeCode,
+});
+
+const dictList = ref<DictPageVO[]>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+});
+
+const formData = reactive<DictForm>({
+  status: 1,
+  typeCode: props.typeCode,
+  sort: 1,
+});
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
+});
+
+/**
+ * 查询
+ */
+function handleQuery() {
+  if (queryParams.typeCode) {
+    loading.value = true;
+    getDictPage(queryParams)
+      .then(({ data }) => {
+        dictList.value = data.list;
+        total.value = data.total;
+      })
+      .finally(() => (loading.value = false));
+  }
+}
+
+/**
+ * 重置查询
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+/**
+ * 行checkbox change事件
+ *
+ * @param selection
+ */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+/**
+ * 打开字典表单弹窗
+ *
+ * @param dictId 字典ID
+ */
+function openDialog(dictId?: number) {
+  dialog.visible = true;
+  if (dictId) {
+    dialog.title = "修改字典";
+    getDictFormData(dictId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    dialog.title = "新增字典";
+  }
+}
+
+/**
+ * 字典表单提交
+ */
+function handleSubmit() {
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      loading.value = false;
+      const dictId = formData.id;
+      if (dictId) {
+        updateDict(dictId, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        addDict(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.status = 1;
+  formData.sort = 1;
+  formData.typeCode = props.typeCode;
+}
+
+/**
+ * 删除字典
+ */
+function handleDelete(dictId?: number) {
+  const dictIds = [dictId || ids.value].join(",");
+  if (!dictIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    deleteDict(dictIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
+  });
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <!-- 搜索表单 -->
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="字典名称"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"
+            ><i-ep-search />搜索</el-button
+          >
+          <el-button @click="resetQuery"> <i-ep-refresh />重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-card shadow="never">
+      <template #header>
+        <el-button
+          v-hasPerm="['sys:dict:add']"
+          type="success"
+          @click="openDialog()"
+          ><i-ep-plus />新增</el-button
+        >
+        <el-button
+          v-hasPerm="['sys:dict:delete']"
+          type="danger"
+          :disabled="ids.length === 0"
+          @click="handleDelete()"
+          ><i-ep-delete />删除</el-button
+        >
+      </template>
+
+      <!-- 数据表格 -->
+      <el-table
+        v-loading="loading"
+        :data="dictList"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="50" />
+        <el-table-column label="字典名称" prop="name" />
+        <el-table-column label="字典值" prop="value" />
+        <el-table-column label="状态" align="center">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" align="center">
+          <template #default="scope">
+            <el-button
+              v-hasPerm="['sys:dict:edit']"
+              type="primary"
+              link
+              @click="openDialog(scope.row.id)"
+              ><i-ep-edit />编辑</el-button
+            >
+            <el-button
+              v-hasPerm="['sys:dict:delete']"
+              type="primary"
+              link
+              @click.stop="handleDelete(scope.row.id)"
+              ><i-ep-delete />删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+
+    <!-- 表单弹窗 -->
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="500px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="字典名称">{{ typeName }}</el-form-item>
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典值" prop="value">
+          <el-input v-model="formData.value" placeholder="字典值" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" type="textarea"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/src/views/system/dict/components/Dict.vue b/src/views/system/dict/components/Dict.vue
deleted file mode 100644
index 29f2a46d..00000000
--- a/src/views/system/dict/components/Dict.vue
+++ /dev/null
@@ -1,272 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="state.queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="state.multiple"
-          @click="handleDelete"
-          >删除
-        </el-button>
-      </el-form-item>
-
-      <el-form-item prop="name">
-        <el-input
-          v-model="state.queryParams.name"
-          placeholder="字典名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetForm">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      highlight-current-row
-      :data="dictList"
-      v-loading="loading"
-      @row-click="handleRowClick"
-      @selection-change="handleSelectionChange"
-      border
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="字典名称" prop="name" width="120" />
-      <el-table-column label="字典编码" prop="code" />
-      <el-table-column label="状态" align="center" width="80">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
-          <el-tag v-else type="info">禁用</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 弹窗表单 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      width="500px"
-      @close="cancel"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="80px"
-      >
-        <el-form-item label="字典名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入字典名称" />
-        </el-form-item>
-        <el-form-item label="字典编码" prop="code">
-          <el-input v-model="formData.code" placeholder="请输入字典编码" />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input
-            v-model="formData.remark"
-            type="textarea"
-            placeholder="请输入内容"
-            :autosize="{ minRows: 2, maxRows: 4 }"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs } from "vue";
-import {
-  listDictPages,
-  getDictFormDetail,
-  addDict,
-  updateDict,
-  deleteDict,
-} from "@/api/system/dict";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import { Dialog, Dict, DictFormData, DictQueryParam } from "@/types";
-import { status } from "nprogress";
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const emit = defineEmits(["dictClick"]);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [] as number[],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as DictQueryParam,
-  dictList: [] as Dict[],
-  total: 0,
-  dialog: {visible:false} as Dialog,
-  formData: {
-    status: 1,
-  } as DictFormData,
-  rules: {
-    name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
-    code: [{ required: true, message: "请输入字典编码", trigger: "blur" }],
-  },
-});
-
-const {
-  total,
-  dialog,
-  ids,
-  loading,
-  single,
-  multiple,
-  queryParams,
-  dictList,
-  formData,
-  rules,
-} = toRefs(state);
-
-function handleQuery() {
-  emit("dictClick", null);
-  state.loading = true;
-  listDictPages(state.queryParams).then(({ data }) => {
-    state.dictList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleAdd() {
-  state.dialog = {
-    title: "添加字典",
-    visible: true,
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: "修改字典",
-    visible: true,
-  };
-  const id = row.id || state.ids;
-  getDictFormDetail(id).then(({ data }) => {
-    state.formData = data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateDict(state.formData.id, state.formData).then((response) => {
-          ElMessage.success("修改成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
-      } else {
-        addDict(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-function cancel() {
-  state.dialog.visible = false;
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deleteDict(ids).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-function handleRowClick(row: any) {
-  emit("dictClick", row);
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
diff --git a/src/views/system/dict/components/DictItem.vue b/src/views/system/dict/components/DictItem.vue
deleted file mode 100644
index 479788df..00000000
--- a/src/views/system/dict/components/DictItem.vue
+++ /dev/null
@@ -1,307 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          >删除</el-button
-        >
-      </el-form-item>
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="数据项名称"
-          clearable
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      :data="dictItemList"
-      v-loading="loading"
-      border
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" min-width="5%" />
-      <el-table-column label="数据项名称" prop="name" />
-      <el-table-column label="数据项值" prop="value" />
-      <el-table-column label="状态" align="center">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
-          <el-tag v-else type="info">禁用</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="state.total > 0"
-      :total="state.total"
-      v-model:page="state.queryParams.pageNum"
-      v-model:limit="state.queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      width="500px"
-      @close="cancel"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="字典名称">
-          <el-input v-model="props.dictName" :disabled="true" />
-        </el-form-item>
-        <el-form-item label="字典项名称" prop="name">
-          <el-input
-            v-model="state.formData.name"
-            placeholder="请输入字典项名称"
-          />
-        </el-form-item>
-        <el-form-item label="字典项值" prop="value">
-          <el-input
-            v-model="state.formData.value"
-            placeholder="请输入字典项值"
-          />
-        </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="state.formData.sort"
-            style="width: 80px"
-            controls-position="right"
-            :min="0"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="state.formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="state.formData.remark" type="textarea"></el-input>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, toRefs, unref, watch } from "vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import {
-  Dialog,
-  DictItem,
-  DictItemFormData,
-  DictItemQueryParam,
-} from "@/types";
-import {
-  listDictItemPages,
-  getDictItemDetail,
-  addDictItem,
-  updateDictItem,
-  deleteDictItem,
-} from "@/api/system/dict";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-
-
-const props = defineProps({
-  dictCode: {
-    type: String,
-    default: "",
-  },
-  dictName: {
-    type: String,
-    default: "",
-  },
-});
-
-watch(
-  () => props.dictCode,
-  (value) => {
-    state.queryParams.dictCode = value;
-    state.formData.dictCode = value;
-    handleQuery();
-  }
-);
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [] as number[],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: { pageNum: 1, pageSize: 10 } as DictItemQueryParam,
-  dictItemList: [] as DictItem[],
-  total: 0,
-  dialog: { visible: false } as Dialog,
-  formData: {
-    dictCode: props.dictCode,
-    status: 1,
-    sort: 1,
-  } as DictItemFormData,
-  rules: {
-    name: [{ required: true, message: "请输入字典项名称", trigger: "blur" }],
-    value: [{ required: true, message: "请输入字典项值", trigger: "blur" }],
-  },
-});
-
-const {
-  loading,
-  ids,
-  single,
-  multiple,
-  queryParams,
-  dictItemList,
-  total,
-  dialog,
-  formData,
-  rules,
-} = toRefs(state);
-
-function handleQuery() {
-  if (state.queryParams.dictCode) {
-    state.loading = true;
-    listDictItemPages(state.queryParams).then(({ data }) => {
-      state.dictItemList = data.list;
-      state.total = data.total;
-      state.loading = false;
-    });
-  } else {
-    state.dictItemList = [];
-    state.total = 0;
-    state.queryParams.pageNum = 1;
-    state.loading = false;
-  }
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleAdd() {
-  if (!state.formData.dictCode) {
-    ElMessage.warning("请选择字典后添加数据项");
-    return;
-  }
-  state.dialog = {
-    title: "添加字典项",
-    visible: true,
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: "修改字典项",
-    visible: true,
-  };
-  const id = row.id || state.ids;
-  getDictItemDetail(id).then(({ data }) => {
-    state.formData = data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateDictItem(state.formData.id, state.formData).then((response) => {
-          ElMessage.success("修改成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
-      } else {
-        addDictItem(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-function cancel() {
-  state.dialog.visible = false;
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deleteDictItem(ids).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
\ No newline at end of file
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 931774f3..9d7e07fb 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,54 +1,339 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="12" :xs="24">
-        <el-card class="box-card">
-          <template #header>
-            <svg-icon color="#333" icon-class="education"/>
-            字典列表
-          </template>
-          <!-- 字典列表子组件 -->
-          <dict @dictClick="handleDictClick"/>
-        </el-card>
-      </el-col>
-
-      <el-col :span="12" :xs="24">
-        <el-card class="box-card">
-          <template #header>
-            <svg-icon color="#333" icon-class="dict"/>
-            <span style="margin:0 5px;">字典数据项</span>
-            <el-tag type="success" v-if=" state.dictCode" size="small">{{ state.dictName }}</el-tag>
-            <el-tag type="warning" v-else size="small">未选择字典</el-tag>
-          </template>
-          <!-- 字典项组件 -->
-          <dict-item :dictName="state.dictName" :dictCode='state.dictCode'/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
+<!--字典类型-->
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import Dict from './components/Dict.vue'
-import DictItem from './components/DictItem.vue'
+defineOptions({
+  name: "DictType",
+  inheritAttrs: false,
+});
+
+import {
+  getDictTypePage,
+  getDictTypeForm,
+  addDictType,
+  updateDictType,
+  deleteDictTypes,
+} from "@/api/dict";
+
+import DictData from "@/views/system/dict/DictData.vue";
+
+import { DictTypePageVO, DictTypeQuery, DictTypeForm } from "@/api/dict/types";
+
+const queryFormRef = ref(ElForm);
+const dataFormRef = ref(ElForm);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<DictTypeQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
 
-import {reactive,toRefs} from 'vue'
+const dictTypeList = ref<DictTypePageVO[]>();
 
-const state = reactive({
-  dictCode: '',
-  dictName: ''  // 字典名称，用于字典项组件回显
-})
+const dialog = reactive<DialogOption>({
+  visible: false,
+});
 
-const {dictCode,dictName} =toRefs(state)
+const formData = reactive<DictTypeForm>({
+  status: 1,
+});
 
-const handleDictClick = (dictRow: any) => {
-  if (dictRow) {
-    state.dictName = dictRow.name
-    state.dictCode = dictRow.code
+const rules = reactive({
+  name: [{ required: true, message: "请输入字典类型名称", trigger: "blur" }],
+  code: [{ required: true, message: "请输入字典类型编码", trigger: "blur" }],
+});
+
+/**
+ * 查询
+ */
+function handleQuery() {
+  loading.value = true;
+  getDictTypePage(queryParams)
+    .then(({ data }) => {
+      dictTypeList.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+/**
+ * 重置查询
+ */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+/**
+ * 行checkbox change事件
+ */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+/**
+ * 打开字典类型表单弹窗
+ *
+ * @param dicTypeId 字典类型ID
+ */
+function openDialog(dicTypeId?: number) {
+  dialog.visible = true;
+  if (dicTypeId) {
+    dialog.title = "修改字典类型";
+    getDictTypeForm(dicTypeId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
   } else {
-    state.dictName = ''
-    state.dictCode = ''
+    dialog.title = "新增字典类型";
+  }
+}
+
+/**
+ * 字典类型表单提交
+ */
+function handleSubmit() {
+  dataFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      loading.value = false;
+      const dictTypeId = formData.id;
+      if (dictTypeId) {
+        updateDictType(dictTypeId, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        addDictType(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
+            handleQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/**
+ * 关闭弹窗
+ */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/**
+ * 重置表单
+ */
+function resetForm() {
+  dataFormRef.value.resetFields();
+  dataFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.status = 1;
+}
+
+/**
+ * 删除字典类型
+ */
+function handleDelete(dictTypeId?: number) {
+  const dictTypeIds = [dictTypeId || ids.value].join(",");
+  if (!dictTypeIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
   }
+
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    deleteDictTypes(dictTypeIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
+  });
+}
+
+const dictDataDialog = reactive<DialogOption>({
+  visible: false,
+});
+
+const selectedDictType = reactive({ typeCode: "", typeName: "" }); // 当前选中的字典类型
+
+/**
+ * 打开字典数据弹窗
+ */
+function openDictDialog(row: DictTypePageVO) {
+  dictDataDialog.visible = true;
+  dictDataDialog.title = "【" + row.name + "】字典数据";
+
+  selectedDictType.typeCode = row.code;
+  selectedDictType.typeName = row.name;
+}
+
+/**
+ * 关闭字典数据弹窗
+ */
+function closeDictDialog() {
+  dictDataDialog.visible = false;
 }
+
+onMounted(() => {
+  handleQuery();
+});
 </script>
+
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="字典类型名称/编码"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery()"
+            ><i-ep-search />搜索</el-button
+          >
+          <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-button
+          v-hasPerm="['sys:dict_type:add']"
+          type="success"
+          @click="openDialog()"
+          ><i-ep-plus />新增</el-button
+        >
+        <el-button
+          type="danger"
+          :disabled="ids.length === 0"
+          @click="handleDelete()"
+          ><i-ep-delete />删除</el-button
+        >
+      </template>
+      <el-table
+        v-loading="loading"
+        highlight-current-row
+        :data="dictTypeList"
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="字典类型名称" prop="name" width="200" />
+        <el-table-column label="字典类型编码" prop="code" width="200" />
+        <el-table-column label="状态" align="center" width="100">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" prop="remark" align="center" />
+        <el-table-column fixed="right" label="操作" align="center" width="220">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDictDialog(scope.row)"
+              ><i-ep-Collection />字典数据</el-button
+            >
+            <el-button
+              v-hasPerm="['sys:dict_type:edit']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.id)"
+              ><i-ep-edit />编辑</el-button
+            >
+            <el-button
+              v-hasPerm="['sys:dict_type:delete']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="handleDelete(scope.row.id)"
+              ><i-ep-delete />删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="500px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="dataFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="字典名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典编码" prop="code">
+          <el-input v-model="formData.code" placeholder="请输入字典编码" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="formData.remark"
+            type="textarea"
+            placeholder="字典类型备注"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--字典数据弹窗-->
+    <el-dialog
+      v-model="dictDataDialog.visible"
+      :title="dictDataDialog.title"
+      width="1000px"
+      @close="closeDictDialog"
+    >
+      <dict-data
+        v-model:typeCode="selectedDictType.typeCode"
+        v-model:typeName="selectedDictType.typeName"
+      />
+    </el-dialog>
+  </div>
+</template>
diff --git a/src/views/system/menu/components/Menu.vue b/src/views/system/menu/components/Menu.vue
deleted file mode 100644
index 23ac3e3b..00000000
--- a/src/views/system/menu/components/Menu.vue
+++ /dev/null
@@ -1,433 +0,0 @@
-<template>
-  <div class="component-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-      </el-form-item>
-
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="菜单名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      v-loading="loading"
-      :data="menuList"
-      highlight-current-row
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      @row-click="handleRowClick"
-      row-key="id"
-      border
-    >
-      <el-table-column label="菜单名称">
-        <template #default="scope">
-          <svg-icon
-            color="#333"
-            :icon-class="scope.row.icon ? scope.row.icon : 'build'"
-          />
-          {{ scope.row.name }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="状态" align="center" width="100">
-        <template #default="scope">
-          <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
-          <el-tag v-else type="info">隐藏</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column label="操作" align="center" width="200">
-        <template #default="scope">
-          <el-button
-            type="success"
-            :icon="Plus"
-            circle
-            plain
-            @click.stop="handleAdd(scope.row)"
-          />
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 弹窗表单 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="750px">
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="父级菜单" prop="parentId">
-          <tree-select
-            v-model="formData.parentId"
-            :options="menuOptions"
-            placeholder="选择上级菜单"
-          />
-        </el-form-item>
-
-        <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入菜单名称" />
-        </el-form-item>
-
-        <el-form-item label="是否外链">
-          <el-radio-group v-model="isExternalPath">
-            <el-radio :label="false">否</el-radio>
-            <el-radio :label="true">是</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item v-if="isExternalPath" label="外链地址" prop="path">
-          <el-input v-model="formData.path" placeholder="请输入外链完整路径" />
-        </el-form-item>
-
-        <el-form-item v-if="!isExternalPath" label="页面路径" prop="component">
-          <el-input
-            v-model="formData.component"
-            placeholder="system/user/index"
-            style="width: 95%"
-          >
-            <template v-if="formData.parentId != 0" #prepend
-              >src/views/</template
-            >
-            <template v-if="formData.parentId != 0" #append>.vue</template>
-          </el-input>
-
-          <el-tooltip
-            effect="dark"
-            content="请输入组件路径，如果是父组件填写 Layout 即可"
-            placement="right"
-          >
-            <i
-              class="el-icon-info"
-              style="margin-left: 10px; color: darkseagreen"
-            ></i>
-          </el-tooltip>
-        </el-form-item>
-
-        <el-form-item label="图标" prop="icon">
-          <el-popover
-            placement="bottom-start"
-            :width="570"
-            trigger="click"
-            v-model:visible="iconSelectVisible"
-          >
-            <icon-select ref="iconSelectRef" @selected="selected" />
-            <template #reference>
-              <el-input
-                v-model="formData.icon"
-                placeholder="点击选择图标"
-                readonly
-                @click="iconSelectVisible = true"
-              >
-                <template #prefix>
-                  <svg-icon
-                    :icon-class="formData.icon ? formData.icon : 'color'"
-                    class="el-input__icon"
-                    style="margin: auto"
-                    color="#999"
-                  />
-                </template>
-              </el-input>
-            </template>
-          </el-popover>
-        </el-form-item>
-
-        <el-form-item label="状态">
-          <el-radio-group v-model="formData.visible">
-            <el-radio :label="1">显示</el-radio>
-            <el-radio :label="0">隐藏</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            style="width: 100px"
-            controls-position="right"
-            :min="0"
-          />
-        </el-form-item>
-
-        <el-form-item label="跳转路径">
-          <el-input
-            v-model="formData.redirect"
-            placeholder="请输入跳转路径"
-            maxlength="50"
-          />
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, unref, onMounted, toRefs } from "vue";
-
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-
-import { isExternal } from "@/utils/validate";
-import {
-  Dialog,
-  Option,
-  MenuFormData,
-  MenuItem,
-  MenuQueryParam,
-} from "@/types";
-// API 依赖
-import {
-  listTableMenus,
-  getMenuFormDetail,
-  listSelectMenus,
-  addMenu,
-  deleteMenus,
-  updateMenu,
-} from "@/api/system/menu";
-
-import SvgIcon from "@/components/SvgIcon/index.vue";
-import TreeSelect from "@/components/TreeSelect/index.vue";
-import IconSelect from "@/components/IconSelect/index.vue";
-
-const emit = defineEmits(["menuClick"]);
-const iconSelectRef = ref(null);
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {} as MenuQueryParam,
-  menuList: [] as MenuItem[],
-  total: 0,
-  dialog: {visible:false} as Dialog,
-  formData: {
-    parentId: 0,
-    visible: 1,
-    sort: 1,
-    component: "Layout",
-  } as MenuFormData,
-  rules: {
-    parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
-    name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
-    component: [{ required: true, message: "请输入页面路径", trigger: "blur" }],
-  },
-  menuOptions: [] as Option[],
-  currentRow: undefined,
-  isExternalPath: false,
-  iconSelectVisible: false,
-});
-
-const {
-  loading,
-  single,
-  multiple,
-  queryParams,
-  menuList,
-  total,
-  dialog,
-  formData,
-  rules,
-  menuOptions,
-  isExternalPath,
-  iconSelectVisible,
-} = toRefs(state);
-
-/**
- * 查询
- */
-function handleQuery() {
-  // 重置父组件
-  emit("menuClick", null);
-  state.loading = true;
-  listTableMenus(state.queryParams).then(({ data }) => {
-    state.menuList = data;
-    state.loading = false;
-  });
-}
-
-/**
- * 加载菜单下拉树
- */
-async function loadTreeSelectMenuOptions() {
-  const menuOptions: any[] = [];
-  await listSelectMenus().then(({ data }) => {
-    const menuOption = { value: 0, label: "顶级菜单", children: data };
-    menuOptions.push(menuOption);
-    state.menuOptions = menuOptions;
-  });
-}
-
-/**
- * 重置查询
- */
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleRowClick(row: any) {
-
-  console.log('handleRowClick',row)
-  state.currentRow = JSON.parse(JSON.stringify(row));
-  emit("menuClick", row);
-}
-
-async function handleAdd(row: any) {
-  await loadTreeSelectMenuOptions();
-  state.dialog = {
-    title: "添加菜单",
-    visible: true,
-  };
-  if (row.id) {
-    // 行点击新增
-    state.formData.parentId = row.id;
-    if (row.id == 0) {
-      state.formData.component = "Layout";
-    } else {
-      state.formData.component = "";
-    }
-  } else {
-    if (state.currentRow) {
-      // 工具栏新增
-      state.formData.parentId = (state.currentRow as any).id;
-      state.formData.component = "";
-    } else {
-      state.formData.parentId = 0;
-      state.formData.component = "Layout";
-    }
-  }
-}
-
-async function handleUpdate(row: any) {
-  await loadTreeSelectMenuOptions();
-  state.dialog = {
-    title: "修改菜单",
-    visible: true,
-  };
-  const id = row.id || state.ids;
-  getMenuFormDetail(id).then(({ data }) => {
-    state.formData = data;
-    // 判断是否外部链接
-    state.isExternalPath = isExternal(state.formData.path);
-  });
-}
-
-/**
- * 表单提交
- */
-function submitForm() {
-  dataFormRef.value.validate((isValid: boolean) => {
-    if (isValid) {
-      if (state.formData.id) {
-        updateMenu(state.formData.id, state.formData).then((response) => {
-          ElMessage.success("修改成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
-      } else {
-        addMenu(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deleteMenus(ids).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-/**
- * 重置表单
- */
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-/**
- * 取消关闭弹窗
- */
-function cancel() {
-  state.dialog.visible = false;
-  resetForm();
-}
-
-/**
- * 显示图标选择下拉
- */
-function showIconSelect() {
-  state.iconSelectVisible = true;
-}
-
-function selected(name: string) {
-  state.formData.icon = name;
-  state.iconSelectVisible = false;
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
diff --git a/src/views/system/menu/components/Perm.vue b/src/views/system/menu/components/Perm.vue
deleted file mode 100644
index 3431fc02..00000000
--- a/src/views/system/menu/components/Perm.vue
+++ /dev/null
@@ -1,400 +0,0 @@
-<template>
-  <div claas="component-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button
-          type="success"
-          :icon="Plus"
-          :disabled="!menuId"
-          @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          >删除</el-button
-        >
-      </el-form-item>
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="权限名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      :data="permList"
-      v-loading="loading"
-      @selection-change="handleSelectionChange"
-      border
-    >
-      <el-table-column type="selection" width="40" align="center" />
-      <el-table-column label="权限名称" prop="name" width="150" />
-      <el-table-column label="URL权限" align="center">
-        <el-table-column prop="serviceName" label="所属服务" />
-        <el-table-column prop="requestMethod" label="请求方式" />
-        <el-table-column prop="requestPath" label="请求路径" />
-      </el-table-column>
-      <el-table-column label="按钮权限" prop="btnPerm" width="200" />
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page="queryParams.pageNum"
-      :limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px">
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="120px"
-      >
-        <el-form-item label="权限名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入权限名称" />
-        </el-form-item>
-
-        <el-form-item label="URL权限标识" prop="urlPerm">
-          <el-input placeholder="/api/v1/users" v-model="urlPerm.requestPath">
-            <template #prepend>
-              <el-select
-                v-model="urlPerm.serviceName"
-                style="width: 130px"
-                placeholder="所属服务"
-                clearable
-              >
-                <el-option
-                  v-for="item in microServiceOptions"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                />
-              </el-select>
-
-              <el-select
-                v-model="urlPerm.requestMethod"
-                style="width: 120px; margin-left: 20px"
-                placeholder="请求方式"
-                clearable
-              >
-                <el-option
-                  v-for="item in requestMethodOptions"
-                  :key="item.value"
-                  :value="item.value"
-                  :label="item.label"
-                />
-              </el-select>
-            </template>
-          </el-input>
-          <el-link v-show="urlPerm.requestMethod">
-            {{ urlPerm.requestMethod }}:/{{ urlPerm.serviceName
-            }}{{ urlPerm.requestPath }}
-          </el-link>
-        </el-form-item>
-
-        <el-form-item label="按钮权限标识" prop="btnPerm">
-          <el-input v-model="formData.btnPerm" placeholder="sys:user:add" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  listPermPages,
-  getPermFormDetail,
-  addPerm,
-  updatePerm,
-  deletePerms,
-} from "@/api/system/perm";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import {
-  onMounted,
-  watch,
-  reactive,
-  ref,
-  getCurrentInstance,
-  toRefs,
-} from "vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import {
-  Dialog,
-  PermFormData,
-  PermItem,
-  PermQueryParam,
-  Option,
-} from "@/types";
-
-const { proxy }: any = getCurrentInstance();
-
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
-
-const props = defineProps({
-  menuId: {
-    type: String,
-    default: "",
-  },
-});
-
-watch(
-  () => props.menuId,
-  (value) => {
-    state.queryParams.menuId = value;
-    handleQuery();
-  }
-);
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as PermQueryParam,
-  permList: [] as PermItem[],
-  total: 0,
-  dialog: {
-    visible: false,
-  } as Dialog,
-  formData: {} as PermFormData,
-  rules: {
-    name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
-    perm: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
-    method: [{ required: true, message: "请选择请求方式", trigger: "blur" }],
-  },
-  microServiceOptions: [] as Option[],
-  requestMethodOptions: [] as Option[],
-  urlPerm: {
-    requestMethod: "",
-    serviceName: "",
-    requestPath: "",
-  },
-});
-
-const {
-  loading,
-  ids,
-  single,
-  multiple,
-  permList,
-  total,
-  dialog,
-  formData,
-  rules,
-  microServiceOptions,
-  requestMethodOptions,
-  urlPerm,
-  queryParams,
-} = toRefs(state);
-
-function handleQuery() {
-  if (state.queryParams.menuId) {
-    state.loading = true;
-    listPermPages(state.queryParams).then(({ data }) => {
-      state.permList = data.list;
-      state.total = data.total;
-      state.loading = false;
-    });
-  } else {
-    state.loading = false;
-    state.permList = [];
-    state.total = 0;
-    state.queryParams.pageNum = 1;
-  }
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-/**
- * 加载字典数据
- */
-function loadDictOptions() {
-  proxy.$listDictsByCode("micro_service").then((response: any) => {
-    state.microServiceOptions = response.data;
-  });
-
-  proxy.$listDictsByCode("request_method").then((response: any) => {
-    state.requestMethodOptions = response.data;
-  });
-}
-
-function handleAdd() {
-  loadDictOptions();
-  state.dialog = {
-    title: "添加权限",
-    visible: true,
-  };
-}
-
-function handleUpdate(row: any) {
-  loadDictOptions();
-  state.dialog = {
-    title: "修改权限",
-    visible: true,
-  };
-  const id = row.id || state.ids;
-  getPermFormDetail(id).then((response) => {
-    const { data } = response;
-    state.formData = data;
-    if (data && data.urlPerm) {
-      // GET:/youlai-admin/api/v1/users
-      const urlPermArr = data.urlPerm.split(":");
-      state.urlPerm.requestMethod = urlPermArr[0];
-      state.urlPerm.serviceName = urlPermArr[1].substring(
-        1,
-        urlPermArr[1].substring(1).indexOf("/") + 1
-      );
-      state.urlPerm.requestPath = urlPermArr[1].substring(
-        urlPermArr[1].substring(1).indexOf("/") + 1
-      );
-    }
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((isValid: any) => {
-    if (isValid) {
-      // 接口权限和按钮权限必填其一
-      console.log(state.urlPerm.requestPath, state.formData.btnPerm);
-      if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
-        ElMessage.warning("请至少填写一种权限");
-        return false;
-      }
-      // 如果填写了URL权限，完整性校验
-      if (!state.urlPerm.requestPath) {
-        if (!state.urlPerm.requestMethod) {
-          ElMessage.warning("URL权限的请求方式不能为空");
-          return false;
-        }
-        if (!state.urlPerm.serviceName) {
-          ElMessage.warning("URL权限的所属服务不能为空");
-          return false;
-        }
-        state.formData.urlPerm =
-          state.urlPerm.requestMethod +
-          ":/" +
-          state.urlPerm.serviceName +
-          state.urlPerm.requestPath;
-      }
-
-      state.formData.menuId = props.menuId;
-      if (state.formData.id) {
-        updatePerm(state.formData.id, state.formData).then((response) => {
-          ElMessage.success("修改成功");
-          cancel();
-          handleQuery();
-        });
-      } else {
-        addPerm(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          cancel();
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-/**
- * 重置表单
- */
-function resetForm() {
-  dataFormRef.value.resetFields();
-
-  state.urlPerm = {
-    requestMethod: "",
-    serviceName: "",
-    requestPath: "",
-  };
-}
-
-function cancel() {
-  resetForm();
-  state.dialog.visible = false;
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deletePerms(ids).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<style scoped>
-.component-container {
-  margin-bottom: 20px;
-}
-</style>
-
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index d921d7e4..0627dfb2 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,56 +1,473 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="10" :xs="24">
-        <el-card class="box-card" shadow="always">
-          <template #header>
-            <svg-icon color="#333" icon-class="menu"/>
-            菜单列表
-          </template>
-          <menu-table @menuClick="handleMenuClick"/>
-        </el-card>
-      </el-col>
-      <el-col :span="14" :xs="24">
-        <el-card class="box-card" shadow="always">
-          <template #header>
-            <svg-icon color="#333" icon-class="perm"/>
-            <span style="margin:0 5px;">权限列表</span>
-            <el-tag type="success" v-if="menuId" size="small">{{ menuName }}</el-tag>
-            <el-tag type="warning" v-else size="small">请点击左侧菜单列表选择</el-tag>
-          </template>
-          <perm-table :menuId="menuId" :menuName="menuName"/>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import MenuTable from './components/Menu.vue'
-import PermTable from './components/Perm.vue'
+defineOptions({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Menu",
+  inheritAttrs: false,
+});
+
+import { MenuQuery, MenuForm, MenuVO } from "@/api/menu/types";
+import {
+  listMenus,
+  getMenuForm,
+  listMenuOptions,
+  addMenu,
+  deleteMenu,
+  updateMenu,
+} from "@/api/menu";
+
+import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
+
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import IconSelect from "@/components/IconSelect/index.vue";
+
+const queryFormRef = ref(ElForm);
+const menuFormRef = ref(ElForm);
+
+const loading = ref(false);
+const dialog = reactive<DialogOption>({
+  visible: false,
+});
+
+const queryParams = reactive<MenuQuery>({});
+const menuList = ref<MenuVO[]>([]);
+
+const menuOptions = ref<OptionType[]>([]);
+
+const formData = reactive<MenuForm>({
+  parentId: 0,
+  visible: 1,
+  sort: 1,
+  type: MenuTypeEnum.MENU,
+});
+
+const rules = reactive({
+  parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
+  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
+  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
+  path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
+  component: [
+    { required: true, message: "请输入组件完整路径", trigger: "blur" },
+  ],
+});
 
-import {reactive, toRefs} from 'vue'
+// 选择表格的行菜单ID
+const selectedRowMenuId = ref<number | undefined>();
 
-const state = reactive({
-  menuId: undefined,
-  menuName: ''
-})
+const menuCacheData = reactive({
+  type: "",
+  path: "",
+});
 
-const {menuId,menuName}=toRefs(state)
+/**
+ * 查询
+ */
+function handleQuery() {
+  // 重置父组件
+  loading.value = true;
+  listMenus(queryParams)
+    .then(({ data }) => {
+      menuList.value = data;
+    })
+    .then(() => {
+      loading.value = false;
+    });
+}
+
+/** 重置查询 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+/**行点击事件 */
+function onRowClick(row: MenuVO) {
+  selectedRowMenuId.value = row.id;
+}
+
+/**
+ * 打开表单弹窗
+ *
+ * @param parentId 父菜单ID
+ * @param menuId 菜单ID
+ */
+function openDialog(parentId?: number, menuId?: number) {
+  listMenuOptions()
+    .then(({ data }) => {
+      menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
+    })
+    .then(() => {
+      dialog.visible = true;
+      if (menuId) {
+        dialog.title = "编辑菜单";
+        getMenuForm(menuId).then(({ data }) => {
+          Object.assign(formData, data);
+          menuCacheData.type = data.type;
+          menuCacheData.path = data.path ?? "";
+        });
+      } else {
+        dialog.title = "新增菜单";
+        formData.parentId = parentId;
+      }
+    });
+}
 
-function handleMenuClick (menuRow: any){
-  if (menuRow) {
-    state.menuId = menuRow.id
-    state.menuName = menuRow.name
+/** 菜单类型切换事件处理 */
+function onMenuTypeChange() {
+  // 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径
+  if (formData.type !== menuCacheData.type) {
+    formData.path = "";
   } else {
-    state.menuId = undefined
-    state.menuName = ''
+    formData.path = menuCacheData.path;
+  }
+}
+
+/** 菜单保存提交 */
+function submitForm() {
+  menuFormRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      const menuId = formData.id;
+      if (menuId) {
+        updateMenu(menuId, formData).then(() => {
+          ElMessage.success("修改成功");
+          closeDialog();
+          handleQuery();
+        });
+      } else {
+        addMenu(formData).then(() => {
+          ElMessage.success("新增成功");
+          closeDialog();
+          handleQuery();
+        });
+      }
+    }
+  });
+}
+
+/** 删除菜单 */
+function handleDelete(menuId: number) {
+  if (!menuId) {
+    ElMessage.warning("请勾选删除项");
+    return false;
   }
+
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      deleteMenu(menuId).then(() => {
+        ElMessage.success("删除成功");
+        handleQuery();
+      });
+    })
+    .catch(() => ElMessage.info("已取消删除"));
+}
+
+/** 关闭弹窗 */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
 }
 
+/** 重置表单 */
+function resetForm() {
+  menuFormRef.value.resetFields();
+  menuFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.parentId = 0;
+  formData.visible = 1;
+  formData.sort = 1;
+  formData.perm = undefined;
+  formData.component = undefined;
+  formData.path = undefined;
+  formData.redirect = undefined;
+}
+
+onMounted(() => {
+  handleQuery();
+});
 </script>
 
-<style scoped>
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="菜单名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"
+            ><template #icon><i-ep-search /></template>搜索</el-button
+          >
+          <el-button @click="resetQuery">
+            <template #icon><i-ep-refresh /></template>
+            重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never" size="small">
+      <template #header>
+        <el-button
+          v-hasPerm="['sys:menu:add']"
+          type="success"
+          @click="openDialog(0)"
+        >
+          <template #icon><i-ep-plus /></template>
+          新增</el-button
+        >
+      </template>
+
+      <el-table
+        v-loading="loading"
+        :data="menuList"
+        highlight-current-row
+        :tree-props="{
+          children: 'children',
+          hasChildren: 'hasChildren',
+        }"
+        row-key="id"
+        default-expand-all
+        border
+        size="small"
+        @row-click="onRowClick"
+      >
+        <el-table-column label="菜单名称" min-width="200">
+          <template #default="scope">
+            <svg-icon
+              :icon-class="
+                scope.row.type === MenuTypeEnum.BUTTON
+                  ? 'button'
+                  : scope.row.icon
+              "
+            />
+            {{ scope.row.name }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="类型" align="center" width="80">
+          <template #default="scope">
+            <el-tag
+              v-if="scope.row.type === MenuTypeEnum.CATALOG"
+              type="warning"
+              >目录</el-tag
+            >
+            <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success"
+              >菜单</el-tag
+            >
+            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger"
+              >按钮</el-tag
+            >
+            <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info"
+              >外链</el-tag
+            >
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="路由路径"
+          align="left"
+          width="150"
+          prop="path"
+        />
+
+        <el-table-column
+          label="组件路径"
+          align="left"
+          width="250"
+          prop="component"
+        />
+
+        <el-table-column
+          label="权限标识"
+          align="center"
+          width="200"
+          prop="perm"
+        />
+
+        <el-table-column label="状态" align="center" width="80">
+          <template #default="scope">
+            <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
+            <el-tag v-else type="info">隐藏</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="排序" align="center" width="80" prop="sort" />
+
+        <el-table-column fixed="right" align="center" label="操作" width="220">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
+              v-hasPerm="['sys:menu:add']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(scope.row.id)"
+            >
+              <i-ep-plus />新增
+            </el-button>
 
-</style>
\ No newline at end of file
+            <el-button
+              v-hasPerm="['sys:menu:edit']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="openDialog(undefined, scope.row.id)"
+            >
+              <i-ep-edit />编辑
+            </el-button>
+            <el-button
+              v-hasPerm="['sys:menu:delete']"
+              type="primary"
+              link
+              size="small"
+              @click.stop="handleDelete(scope.row.id)"
+              ><i-ep-delete />
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      destroy-on-close
+      append-to-body
+      width="750px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="menuFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="父级菜单" prop="parentId">
+          <el-tree-select
+            v-model="formData.parentId"
+            placeholder="选择上级菜单"
+            :data="menuOptions"
+            filterable
+            check-strictly
+            :render-after-expand="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="菜单名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入菜单名称" />
+        </el-form-item>
+
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group v-model="formData.type" @change="onMenuTypeChange">
+            <el-radio label="CATALOG">目录</el-radio>
+            <el-radio label="MENU">菜单</el-radio>
+            <el-radio label="BUTTON">按钮</el-radio>
+            <el-radio label="EXTLINK">外链</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type == 'EXTLINK'"
+          label="外链地址"
+          prop="path"
+        >
+          <el-input v-model="formData.path" placeholder="请输入外链完整路径" />
+        </el-form-item>
+
+        <el-form-item
+          v-if="
+            formData.type == MenuTypeEnum.CATALOG ||
+            formData.type == MenuTypeEnum.MENU
+          "
+          label="路由路径"
+          prop="path"
+        >
+          <el-input
+            v-if="formData.type == MenuTypeEnum.CATALOG"
+            v-model="formData.path"
+            placeholder="system"
+          />
+          <el-input v-else v-model="formData.path" placeholder="user" />
+        </el-form-item>
+
+        <!-- 组件页面完整路径 -->
+        <el-form-item
+          v-if="formData.type == MenuTypeEnum.MENU"
+          label="页面路径"
+          prop="component"
+        >
+          <el-input
+            v-model="formData.component"
+            placeholder="system/user/index"
+            style="width: 95%"
+          >
+            <template v-if="formData.type == MenuTypeEnum.MENU" #prepend
+              >src/views/</template
+            >
+            <template v-if="formData.type == MenuTypeEnum.MENU" #append
+              >.vue</template
+            >
+          </el-input>
+        </el-form-item>
+
+        <!-- 权限标识 -->
+        <el-form-item
+          v-if="formData.type == 'BUTTON'"
+          label="权限标识"
+          prop="perm"
+        >
+          <el-input v-model="formData.perm" placeholder="sys:user:add" />
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type !== 'BUTTON'"
+          label="图标"
+          prop="icon"
+        >
+          <!-- 图标选择器 -->
+          <icon-select v-model="formData.icon" />
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type == MenuTypeEnum.CATALOG"
+          label="跳转路由"
+        >
+          <el-input v-model="formData.redirect" placeholder="跳转路由" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.type !== 'BUTTON'" label="状态">
+          <el-radio-group v-model="formData.visible">
+            <el-radio :label="1">显示</el-radio>
+            <el-radio :label="0">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            style="width: 100px"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/src/views/system/role/components/Menu.vue b/src/views/system/role/components/Menu.vue
deleted file mode 100644
index 8091c74c..00000000
--- a/src/views/system/role/components/Menu.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="menu-container">
-    <el-form>
-      <el-form-item>
-        <el-row>
-          <el-col :span="16">
-            <el-button
-              type="success"
-              plain
-              :icon="Switch"
-              @click="toggleExpandAll"
-              >展开/折叠</el-button
-            >
-          </el-col>
-          <el-col :span="8" style="text-align: right">
-            <el-button type="primary" :icon="Check" @click="handleSubmit"
-              >提交</el-button
-            >
-          </el-col>
-        </el-row>
-      </el-form-item>
-    </el-form>
-
-    <el-tree
-      ref="menuRef"
-      v-if="refreshTree"
-      :default-expanded-keys="expandedKeys"
-      :default-expand-all="isExpandAll"
-      :data="menuOptions"
-      show-checkbox
-      node-key="id"
-      empty-text="加载菜单中..."
-      :check-strictly="checkStrictly"
-      highlight-current
-      @node-click="handleNodeClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { listSelectMenus } from "@/api/system/menu";
-import { listRoleMenuIds, updateRoleMenu } from "@/api/system/role";
-import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
-import { ElTree, ElMessage, ElMessageBox } from "element-plus";
-import { Switch, Check } from "@element-plus/icons-vue";
-import { Option } from "@/types";
-
-const emit = defineEmits(["menuClick"]);
-const props = defineProps({
-  role: {
-    type: Object,
-    default: {},
-  },
-});
-
-const menuRef = ref(ElTree); // 属性名必须和元素的ref属性值一致
-
-watch(
-  () => props.role.id as any,
-  (newVal, oldVal) => {
-    const roleId = props.role.id;
-    if (roleId) {
-      state.checkStrictly = true;
-      listRoleMenuIds(roleId).then(({ data }) => {
-        menuRef.value.setCheckedKeys(data);
-        state.checkStrictly = false;
-      });
-    }
-  }
-);
-
-const state = reactive({
-  expandedKeys: [], // 展开的节点
-  menuOptions: [] as Option[],
-  checkStrictly: false,
-  isExpandAll: true,
-  refreshTree: true,
-});
-
-const { expandedKeys, menuOptions, checkStrictly, isExpandAll, refreshTree } =
-  toRefs(state);
-
-/**
- * 加载菜单树
- */
-async function loadTreeSelectMenuOptions() {
-  await listSelectMenus().then(({ data }) => {
-    state.menuOptions = data;
-  });
-}
-
-function handleNodeClick(node: any) {
-  emit("menuClick", node);
-}
-
-/**
- * 展开/收缩
- */
-function toggleExpandAll() {
-  state.refreshTree = false;
-  state.isExpandAll = !state.isExpandAll;
-  nextTick(() => {
-    state.refreshTree = true;
-  });
-}
-
-/**
- * 保存角色的菜单
- */
-function handleSubmit() {
-  const checkedMenuIds = menuRef.value
-    .getCheckedNodes(false, true)
-    .map((node: any) => node.id);
-  updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
-    ElMessage.success("提交成功");
-  });
-}
-
-onMounted(() => {
-  loadTreeSelectMenuOptions();
-});
-</script>
-
-<style lang="scss" scoped>
-.menu-container {
-  width: 100%;
-}
-</style>
diff --git a/src/views/system/role/components/Perm.vue b/src/views/system/role/components/Perm.vue
deleted file mode 100644
index 943261ed..00000000
--- a/src/views/system/role/components/Perm.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-  <div class="perm-container">
-    <div v-if="permissionOptions.length > 0">
-      <el-row>
-        <el-col :span="12">
-          <el-checkbox
-            :indeterminate="isIndeterminate"
-            v-model="checkAll"
-            @change="handleCheckAllChange"
-            >全选
-          </el-checkbox>
-        </el-col>
-        <el-col :span="12" style="text-align: right">
-          <el-button type="primary" :icon="Check" @click="handleSubmit"
-            >提交</el-button
-          >
-        </el-col>
-      </el-row>
-
-      <el-row>
-        <el-col
-          :span="8"
-          v-for="item in permissionOptions"
-          style="margin-top: 20px"
-          :key="item.id"
-        >
-          <el-checkbox
-            border
-            v-model="item.checked"
-            :label="item.id"
-            :key="item.id"
-            @change="handleCheckedPermChange"
-          >
-            {{ item.name }}
-          </el-checkbox>
-        </el-col>
-      </el-row>
-    </div>
-    <div style="text-align: center" v-else>
-      <el-empty
-        :description="
-          !role
-            ? '请选择角色'
-            : !menu
-            ? '请选择菜单'
-            : '暂无数据，您可在【菜单管理】配置权限数据'
-        "
-      ></el-empty>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { listPerms } from "@/api/system/perm";
-import { listRolePerms, saveRolePerms } from "@/api/system/role";
-import { onMounted, reactive, toRefs, watch } from "vue";
-import { ElMessage } from "element-plus";
-import { Check } from "@element-plus/icons-vue";
-import { PermQueryParam, MenuItem } from "@/types";
-
-const props = defineProps({
-  role: {
-    type: Object,
-    default: {},
-  },
-  menu: {
-    type: Object,
-    default: {},
-  },
-});
-
-watch(
-  () => props.menu.id,
-  (value) => {
-    if (value) {
-      loadData();
-    }
-  }
-);
-
-const state = reactive({
-  loading: false,
-  permissionOptions: [] as Array<any>,
-  isIndeterminate: true,
-  checkAll: false,
-  checkedPerms: [],
-});
-
-const { permissionOptions, isIndeterminate, checkAll, checkedPerms } =
-  toRefs(state);
-
-function handleCheckAllChange(checked: Boolean) {
-  state.isIndeterminate = false;
-  if (checked) {
-    state.permissionOptions.map((item) => (item.checked = true));
-  } else {
-    // 全不选
-    state.permissionOptions.map((item) => (item.checked = false));
-  }
-}
-
-function handleCheckedPermChange(value: any) {
-  const checkedCount = state.permissionOptions.filter(
-    (item) => item.checked
-  ).length;
-  state.checkAll = checkedCount === state.permissionOptions.length;
-  state.isIndeterminate =
-    checkedCount > 0 && checkedCount < state.permissionOptions.length;
-}
-
-function loadData() {
-  if (!props.menu.id) {
-    resetData();
-    return false;
-  }
-  state.loading = true;
-
-  const params = { menuId: props.menu.id } as PermQueryParam;
-  listPerms(params).then(({data}) => {
-    state.permissionOptions = data;
-    listRolePerms(props.role.id, props.menu.id).then((response) => {
-      const checkedPermIds = response.data;
-      state.permissionOptions.map((item: any) => {
-        if (checkedPermIds.includes(item.id)) {
-          item.checked = true;
-        } else {
-          state.checkAll = false;
-        }
-      });
-      state.loading = false;
-    });
-  });
-}
-
-function handleSubmit() {
-  const checkedPermIds = state.permissionOptions
-    .filter((item) => item.checked)
-    .map((item) => item.id);
-  saveRolePerms(props.role.id, props.menu.id, checkedPermIds).then(() => {
-    ElMessage.success("提交成功");
-  });
-}
-
-function resetData() {
-  state.permissionOptions = [];
-  state.isIndeterminate = true;
-  state.checkAll = false;
-}
-
-onMounted(() => {
-  loadData();
-});
-</script>
-
-<style scoped>
-.perm-container {
-  width: 100%;
-}
-</style>
diff --git a/src/views/system/role/components/Role.vue b/src/views/system/role/components/Role.vue
deleted file mode 100644
index 6e49c2a3..00000000
--- a/src/views/system/role/components/Role.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<template>
-  <div class="role-container">
-    <!-- 搜索表单 -->
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-button type="success" :icon="Plus" @click="handleAdd"
-          >新增</el-button
-        >
-        <el-button
-          type="danger"
-          :icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          >删除</el-button
-        >
-      </el-form-item>
-
-      <el-form-item prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="角色名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <!-- 数据表格 -->
-    <el-table
-      ref="dataTableRef"
-      v-loading="loading"
-      :data="roleList"
-      @selection-change="handleSelectionChange"
-      @row-click="handleRowClick"
-      highlight-current-row
-      border
-    >
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色名称" prop="name" />
-      <el-table-column label="角色编码" prop="code" />
-      <el-table-column label="操作" align="center" width="120">
-        <template #default="scope">
-          <el-button
-            type="primary"
-            :icon="Edit"
-            circle
-            plain
-            @click.stop="handleUpdate(scope.row)"
-          />
-          <el-button
-            type="danger"
-            :icon="Delete"
-            circle
-            plain
-            @click.stop="handleDelete(scope.row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-
-    <!-- 表单弹窗 -->
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      @close="cancel"
-      width="450px"
-    >
-      <el-form
-        ref="dataFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-      >
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入角色名称" />
-        </el-form-item>
-
-        <el-form-item label="角色编码" prop="code">
-          <el-input v-model="formData.code" placeholder="请输入角色编码" />
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            controls-position="right"
-            :min="0"
-            style="width: 100px"
-          />
-        </el-form-item>
-
-        <el-form-item label="状态">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  listRolePages,
-  updateRole,
-  getRoleFormDetail,
-  addRole,
-  deleteRoles,
-} from "@/api/system/role";
-import { onMounted, reactive, ref, toRefs, unref } from "vue";
-import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-import { RoleFormData, RoleItem, RoleQueryParam } from "@/types";
-
-const emit = defineEmits(["roleClick"]);
-const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致
-
-const state = reactive({
-  loading: true,
-  // 选中ID数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as RoleQueryParam,
-  roleList: [] as RoleItem[],
-  total: 0,
-  dialog: {
-    title: "",
-    visible: false,
-  },
-  formData: {} as RoleFormData,
-  rules: {
-    name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-    code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
-  },
-});
-
-const {
-  loading,
-  single,
-  multiple,
-  queryParams,
-  roleList,
-  total,
-  dialog,
-  formData,
-  rules,
-} = toRefs(state);
-
-function handleQuery() {
-  emit("roleClick", {});
-  state.loading = true;
-  listRolePages(state.queryParams).then(({ data }) => {
-    state.roleList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
-}
-
-function handleRowClick(row: any) {
-  emit("roleClick", row);
-}
-
-function handleAdd() {
-  state.dialog = {
-    title: "添加角色",
-    visible: true,
-  };
-}
-
-function handleUpdate(row: any) {
-  state.dialog = {
-    title: "修改角色",
-    visible: true,
-  };
-  const roleId = row.id || state.ids;
-  getRoleFormDetail(roleId).then(({ data }) => {
-    state.formData = data;
-  });
-}
-
-function submitForm() {
-  dataFormRef.value.validate((valid: any) => {
-    if (valid) {
-      if (state.formData.id) {
-        updateRole(state.formData.id as any, state.formData).then(
-          (response) => {
-            ElMessage.success("修改成功");
-            state.dialog.visible = false;
-            handleQuery();
-          }
-        );
-      } else {
-        addRole(state.formData).then((response) => {
-          ElMessage.success("新增成功");
-          state.dialog.visible = false;
-          handleQuery();
-        });
-      }
-    }
-  });
-}
-
-/**
- * 重置表单
- */
-function resetForm() {
-  dataFormRef.value.resetFields();
-  handleQuery();
-}
-
-function cancel() {
-  resetForm();
-  state.dialog.visible = false;
-}
-
-function handleDelete(row: any) {
-  const ids = [row.id || state.ids].join(",");
-  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      deleteRoles(ids).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<style lang="scss" scoped>
-.role-container {
-  width: 100%;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 1b43a5dd..d05d0ccf 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,117 +1,402 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="10">
-      <el-col :span="10" :xs="24">
-        <el-card class="box-card" shadow="always">
-          <template #header>
-            <svg-icon color="#333" icon-class="role" />
-            角色列表
-          </template>
-          <role ref="role" @roleClick="handleRoleClick" />
-        </el-card>
-      </el-col>
-
-      <el-col :span="6" :xs="24">
-        <el-card class="box-card" shadow="always">
-          <template #header>
-            <svg-icon color="#333" icon-class="menu" />
-            <span style="margin: 0 5px">菜单分配</span>
-            <el-tag type="success" v-if="role.id">
-              <svg-icon color="green" icon-class="role" />
-              {{ role.name }}
-            </el-tag>
-            <el-tag type="warning" v-else size="small">请选择角色</el-tag>
-          </template>
-          <menus ref="menu" @menuClick="handleMenuClick" :role="role" />
-        </el-card>
-      </el-col>
-
-      <el-col :span="8" :xs="24">
-        <el-card class="box-card" shadow="always">
-          <template #header>
-            <svg-icon color="#333" icon-class="perm" />
-            <span style="margin: 0 5px">权限分配</span>
-
-            <el-tag type="success" style="margin: 0 5px 0 0" v-if="role.id">
-              <svg-icon color="green" icon-class="role" />
-              {{ role.name }}
-            </el-tag>
-            <el-tag
-              type="warning"
-              style="margin: 0 5px 0 0"
-              v-else
-              size="small"
-            >
-              请选择角色</el-tag
-            >
+<script setup lang="ts">
+defineOptions({
+  name: "Role",
+  inheritAttrs: false,
+});
 
-            <el-tag type="success" v-if="menu.id" size="small">
-              <svg-icon color="red" icon-class="menu" />
-              {{ menu.name }}
-            </el-tag>
-            <el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
-          </template>
-          <perm ref="perm" :menu="menu" :role="role" />
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
+import {
+  getRolePage,
+  updateRole,
+  getRoleForm,
+  addRole,
+  deleteRoles,
+  getRoleMenuIds,
+  updateRoleMenus,
+} from "@/api/role";
+import { listMenuOptions } from "@/api/menu";
 
-<script setup lang="ts">
-import { reactive, toRefs } from "vue";
-import { ElMessage } from "element-plus";
-import SvgIcon from "@/components/SvgIcon/index.vue";
-
-import Role from "./components/Role.vue";
-import Menus from "./components/Menu.vue";
-import Perm from "./components/Perm.vue";
-
-const state = reactive({
-  role: {
-    id: undefined,
-    name: "",
-  },
-  menu: {
-    id: undefined,
-    name: "",
-  },
+import { RolePageVO, RoleForm, RoleQuery } from "@/api/role/types";
+
+const queryFormRef = ref(ElForm);
+const roleFormRef = ref(ElForm);
+const menuRef = ref(ElTree);
+
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<RoleQuery>({
+  pageNum: 1,
+  pageSize: 10,
 });
 
-const { role, menu } = toRefs(state);
+const roleList = ref<RolePageVO[]>();
 
-function handleRoleClick(roleRow: any) {
-  if (roleRow) {
-    state.role = {
-      id: roleRow.id,
-      name: roleRow.name,
-    };
+const dialog = reactive<DialogOption>({
+  visible: false,
+});
+
+const formData = reactive<RoleForm>({
+  sort: 1,
+  status: 1,
+  code: "",
+  name: "",
+});
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+  code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
+  dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+});
+
+const menuDialogVisible = ref(false);
+
+const menuList = ref<OptionType[]>([]);
+
+interface CheckedRole {
+  id?: number;
+  name?: string;
+}
+let checkedRole: CheckedRole = reactive({});
+
+/** 查询 */
+function handleQuery() {
+  loading.value = true;
+  getRolePage(queryParams)
+    .then(({ data }) => {
+      roleList.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+/** 重置查询 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  handleQuery();
+}
+
+/** 行checkbox 选中事件 */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+
+/** 打开角色表单弹窗 */
+function openDialog(roleId?: number) {
+  dialog.visible = true;
+  if (roleId) {
+    dialog.title = "修改角色";
+    getRoleForm(roleId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
   } else {
-    state.role = {
-      id: undefined,
-      name: "",
-    };
+    dialog.title = "新增角色";
   }
 }
 
-function handleMenuClick(menuRow: any) {
-  if (!state.role.id) {
-    ElMessage.warning("请选择角色");
-    return false;
+/** 角色保存提交 */
+function handleSubmit() {
+  roleFormRef.value.validate((valid: any) => {
+    if (valid) {
+      loading.value = true;
+      const roleId = formData.id;
+      if (roleId) {
+        updateRole(roleId, formData)
+          .then(() => {
+            ElMessage.success("修改成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      } else {
+        addRole(formData)
+          .then(() => {
+            ElMessage.success("新增成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
+      }
+    }
+  });
+}
+
+/** 关闭表单弹窗 */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+/** 重置表单 */
+function resetForm() {
+  roleFormRef.value.resetFields();
+  roleFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.sort = 1;
+  formData.status = 1;
+}
+
+/** 删除角色 */
+function handleDelete(roleId?: number) {
+  const roleIds = [roleId || ids.value].join(",");
+  if (!roleIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
   }
-  if (menuRow) {
-    state.menu = {
-      id: menuRow.value,
-      name: menuRow.label,
-    };
-  } else {
-    state.menu = {
-      id: undefined,
-      name: ""
+
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    loading.value = true;
+    deleteRoles(roleIds)
+      .then(() => {
+        ElMessage.success("删除成功");
+        resetQuery();
+      })
+      .finally(() => (loading.value = false));
+  });
+}
+
+/** 打开分配菜单弹窗 */
+function openMenuDialog(row: RolePageVO) {
+  const roleId = row.id;
+  if (roleId) {
+    checkedRole = {
+      id: roleId,
+      name: row.name,
     };
+    menuDialogVisible.value = true;
+    loading.value = true;
+
+    // 获取所有的菜单
+    listMenuOptions().then((response) => {
+      menuList.value = response.data;
+      // 回显角色已拥有的菜单
+      getRoleMenuIds(roleId)
+        .then(({ data }) => {
+          const checkedMenuIds = data;
+          console.log("勾选权限", checkedMenuIds);
+          checkedMenuIds.forEach((menuId) =>
+            menuRef.value.setChecked(menuId, true, false)
+          );
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    });
+  }
+}
+
+/** 角色分配菜单保存提交 */
+function handleRoleMenuSubmit() {
+  const roleId = checkedRole.id;
+  if (roleId) {
+    const checkedMenuIds: number[] = menuRef.value
+      .getCheckedNodes(false, true)
+      .map((node: any) => node.value);
+
+    loading.value = true;
+    updateRoleMenus(roleId, checkedMenuIds)
+      .then((res) => {
+        ElMessage.success("分配权限成功");
+        menuDialogVisible.value = false;
+        resetQuery();
+      })
+      .finally(() => {
+        loading.value = false;
+      });
   }
 }
+
+onMounted(() => {
+  handleQuery();
+});
 </script>
 
-<style scoped>
-</style>
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item prop="keywords" label="关键字">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="角色名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"
+            ><i-ep-search />搜索</el-button
+          >
+          <el-button @click="resetQuery"><i-ep-refresh />重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-button type="success" @click="openDialog()"
+          ><i-ep-plus />新增</el-button
+        >
+        <el-button
+          type="danger"
+          :disabled="ids.length === 0"
+          @click="handleDelete()"
+          ><i-ep-delete />删除</el-button
+        >
+      </template>
+
+      <el-table
+        ref="dataTableRef"
+        v-loading="loading"
+        :data="roleList"
+        highlight-current-row
+        border
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="角色名称" prop="name" min-width="100" />
+        <el-table-column label="角色编码" prop="code" width="150" />
+
+        <el-table-column label="状态" align="center" width="100">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
+            <el-tag v-else type="info">禁用</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="排序" align="center" width="80" prop="sort" />
+
+        <el-table-column fixed="right" label="操作" width="220">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="openMenuDialog(scope.row)"
+            >
+              <i-ep-position />分配权限
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="openDialog(scope.row.id)"
+            >
+              <i-ep-edit />编辑
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              link
+              @click="handleDelete(scope.row.id)"
+            >
+              <i-ep-delete />删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-if="total > 0"
+        v-model:total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="handleQuery"
+      />
+    </el-card>
+
+    <!-- 角色表单弹窗 -->
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="500px"
+      @close="closeDialog"
+    >
+      <el-form
+        ref="roleFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入角色名称" />
+        </el-form-item>
+
+        <el-form-item label="角色编码" prop="code">
+          <el-input v-model="formData.code" placeholder="请输入角色编码" />
+        </el-form-item>
+
+        <el-form-item label="数据权限" prop="dataScope">
+          <el-select v-model="formData.dataScope">
+            <el-option :key="0" label="全部数据" :value="0" />
+            <el-option :key="1" label="部门及子部门数据" :value="1" />
+            <el-option :key="2" label="本部门数据" :value="2" />
+            <el-option :key="3" label="本人数据" :value="3" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="sort">
+          <el-input-number
+            v-model="formData.sort"
+            controls-position="right"
+            :min="0"
+            style="width: 100px"
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 分配菜单弹窗  -->
+    <el-dialog
+      v-model="menuDialogVisible"
+      :title="'【' + checkedRole.name + '】权限分配'"
+      width="800px"
+    >
+      <el-scrollbar v-loading="loading" max-height="600px">
+        <el-tree
+          ref="menuRef"
+          node-key="value"
+          show-checkbox
+          :data="menuList"
+          :default-expand-all="true"
+        >
+          <template #default="{ data }">
+            {{ data.label }}
+          </template>
+        </el-tree>
+      </el-scrollbar>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleRoleMenuSubmit"
+            >确 定</el-button
+          >
+          <el-button @click="menuDialogVisible = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index e6ced7d2..da1e2057 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,339 +1,89 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <!-- 部门树 -->
-      <el-col :span="4" :xs="24">
-        <el-card class="box-card">
-          <el-input v-model="deptName" placeholder="部门名称" clearable :prefix-icon="Search" style="margin-bottom: 20px" />
-          <el-tree ref="deptTreeRef" :data="deptOptions" :props="{ children: 'children', label: 'label', disabled: '' }"
-            :expand-on-click-node="false" :filter-node-method="filterDeptNode" default-expand-all
-            @node-click="handleDeptNodeClick"></el-tree>
-        </el-card>
-      </el-col>
-
-      <!-- 用户数据 -->
-      <el-col :span="20" :xs="24">
-        <el-card class="box-card">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-row>
-              <el-col :span="18" :xs="24" :sm="14">
-                <el-form-item>
-                  <el-button type="success" :icon="Plus" @click="handleAdd" v-hasPerm="['sys:user:add']">新增</el-button>
-                  <el-button type="danger" :icon="Delete" :disabled="multiple" @click="handleDelete"
-                    v-hasPerm="['sys:user:delete']">删除</el-button>
-                </el-form-item>
-
-                <el-form-item prop="keywords">
-                  <el-input v-model="queryParams.keywords" placeholder="用户名/昵称/手机号" clearable style="width: 200px"
-                    @keyup.enter="handleQuery" />
-                </el-form-item>
-
-                <el-form-item prop="status">
-                  <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 200px">
-                    <el-option label="正常" value="1" />
-                    <el-option label="停用" value="0" />
-                  </el-select>
-                </el-form-item>
-
-                <el-form-item>
-                  <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
-                  <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-                </el-form-item>
-              </el-col>
-
-              <el-col :span="6" :xs="24" :sm="10" style="text-align: right;">
-                <el-form-item>
-                  <el-dropdown split-button style="margin-left: 12px;">
-                    导入
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item :icon="Download" @click="handleDownloadTemplate">下载模板</el-dropdown-item>
-                        <el-dropdown-item :icon="Top" @click="showImportDialog">导入数据</el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                  <el-button :icon="Download" style="margin-left: 12px;" @click="handleExport">导出</el-button>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-
-          <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="50" align="center" />
-            <el-table-column key="id" label="用户编号" align="center" prop="id" />
-            <el-table-column key="username" label="用户名" align="center" prop="username" />
-            <el-table-column label="用户昵称" align="center" prop="nickname" />
-
-            <el-table-column label="性别" align="center" prop="gender" />
-
-            <el-table-column label="部门" align="center" prop="deptName" />
-            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
-
-            <el-table-column label="状态" align="center" prop="status">
-              <template #default="scope">
-                <el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1"
-                  @change="handleStatusChange(scope.row)" />
-              </template>
-            </el-table-column>
-            <el-table-column label="创建时间" align="center" prop="gmtCreate" width="180"></el-table-column>
-            <el-table-column label="操作" align="center" width="150">
-              <template #default="scope">
-                <el-button type="primary" :icon="Edit" circle plain @click="handleUpdate(scope.row)"
-                  v-hasPerm="['sys:user:edit']"></el-button>
-                <el-button type="danger" :icon="Delete" circle plain @click="handleDelete(scope.row)"
-                  v-hasPerm="['sys:user:delete']"></el-button>
-                <el-button type="warning" :icon="Lock" circle plain @click="resetPassword(scope.row)"></el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-            v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
-        </el-card>
-      </el-col>
-    </el-row>
-
-    <!-- 添加或修改参数配置对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body @close="cancel">
-      <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="80px">
-        <el-form-item label="用户名" prop="username">
-          <el-input :readonly="!!formData.id" v-model="formData.username" placeholder="请输入用户名" />
-        </el-form-item>
-
-        <el-form-item label="用户昵称" prop="nickname">
-          <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
-        </el-form-item>
-
-        <el-form-item label="所属部门" prop="deptId">
-          <tree-select v-model="formData.deptId" :options="deptOptions" placeholder="请选择所属部门" />
-        </el-form-item>
-
-        <el-form-item label="手机号码" prop="mobile">
-          <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
-        </el-form-item>
-
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
-        </el-form-item>
-
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">禁用</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="用户性别" prop="gender">
-          <el-select v-model="formData.gender" placeholder="请选择">
-            <el-option label="未知" :value="0" />
-            <el-option label="男" :value="1" />
-            <el-option label="女" :value="2" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="角色" prop="roleIds">
-          <el-select v-model="formData.roleIds" multiple placeholder="请选择">
-            <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-    <el-dialog :title="importDialog.title" v-model="importDialog.visible" width="600px" append-to-body
-      @close="closeImportDialog">
-      <el-form ref="importFormRef" :model="importFormData" :rules="rules" label-width="80px">
-        <el-form-item label="所属部门" prop="deptId">
-          <tree-select v-model="importFormData.deptId" :options="deptOptions" placeholder="请选择所属部门" />
-        </el-form-item>
-
-        <el-form-item label="角色" prop="roleIds">
-          <el-select v-model="importFormData.roleIds" multiple placeholder="请选择">
-            <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id" />
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="Excel">
-          <el-upload class="upload-demo" action="" drag :auto-upload="false"
-            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-            :file-list="excelFilelist" :on-change="handleExcelChange" :limit="1">
-            <el-icon class="el-icon--upload">
-              <upload-filled />
-            </el-icon>
-            <div class="el-upload__text">
-              将文件拖到此处，或
-              <em>点击上传</em>
-            </div>
-            <template #tip>
-              <div class="el-upload__tip">xls/xlsx files </div>
-            </template>
-          </el-upload>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button type="primary" @click="submitImportForm">确 定</el-button>
-          <el-button @click="closeImportDialog">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup lang='ts'>
-// Vue依赖
-import {
-  reactive,
-  ref,
-  watchEffect,
-  onMounted,
-  getCurrentInstance,
-  toRefs
-} from "vue";
-
-// 导入API
+<script setup lang="ts">
+/**
+ * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
+ */
+defineOptions({
+  name: "User",
+  inheritAttrs: false,
+});
+import { UploadFile } from "element-plus";
 import {
-  listUsersPage,
-  getUserDetail,
+  getUserPage,
+  getUserForm,
   deleteUsers,
   addUser,
   updateUser,
-  updateUserPart,
-  downloadTemplate,
+  updateUserStatus,
+  updateUserPassword,
+  downloadTemplateApi,
   exportUser,
-  importUser
-} from "@/api/system/user";
-import { listSelectDepartments } from "@/api/system/dept";
-import { listRoles } from "@/api/system/role";
+  importUser,
+} from "@/api/user";
+import { listDeptOptions } from "@/api/dept";
+import { listRoleOptions } from "@/api/role";
+
+import { UserForm, UserQuery, UserPageVO } from "@/api/user/types";
+
+const deptTreeRef = ref(ElTree); // 部门树
+const queryFormRef = ref(ElForm); // 查询表单
+const userFormRef = ref(ElForm); // 用户表单
+
+const loading = ref(false);
+const ids = ref([]);
+const total = ref(0);
+const dialog = reactive<DialogOption>({
+  visible: false,
+});
 
-// 组件依赖
-import { ElMessage, ElMessageBox, ElTree, ElForm, UploadRequestOptions } from "element-plus";
-import {
-  Search,
-  Plus,
-  Edit,
-  Refresh,
-  Delete,
-  Lock,
-  Download,
-  Top,
-  UploadFilled
-} from "@element-plus/icons-vue";
-import TreeSelect from "@/components/TreeSelect/index.vue";
-import {
-  UserItem,
-  UserQueryParam,
-  UserFormData,
-  Option,
-  RoleItem,
-  Dialog,
-  UserImportFormData
-} from "@/types";
-import { assertFile } from "@babel/types";
-
-// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
-const deptTreeRef = ref(ElTree);  // 部门树
-const queryFormRef = ref(ElForm); // 部门树
-const dataFormRef = ref(ElForm); // 部门树
-const importFormRef = ref(ElForm); // 导入
-
-const { proxy }: any = getCurrentInstance();
-
-const state = reactive({
-  // 遮罩层
-  loading: true,
-  // 选中数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  // 总条数
-  total: 0,
-  // 用户分页数据
-  userList: [] as UserItem[],
-  // 弹窗属性
-  dialog: {
-    visible: false,
-  } as Dialog,
-  deptName: undefined,
-  // 部门树选项
-  deptOptions: [] as Option[],
-  // 部门名称
-  // 性别状态字典
-  genderOptions: [] as any[],
-  // 角色选项
-  roleOptions: [] as RoleItem[],
-  // 表单参数
-  formData: {} as UserFormData,
-  // 查询参数
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as UserQueryParam,
-  // 表单校验
-  rules: {
-    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-    nickname: [
-      { required: true, message: "用户昵称不能为空", trigger: "blur" },
-    ],
-    deptId: [{ required: true, message: "归属部门不能为空", trigger: "blur" }],
-    roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
-    email: [
-      {
-        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-        message: "请输入正确的邮箱地址",
-        trigger: "blur",
-      },
-    ],
-    mobile: [
-      {
-        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-        message: "请输入正确的手机号码",
-        trigger: "blur",
-      },
-    ],
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const userList = ref<UserPageVO[]>();
 
-  },
+const formData = reactive<UserForm>({
+  status: 1,
+});
 
-  importDialog: {
-    title: '用户导出',
-    visible: false,
-  } as Dialog,
-  importFormData: {} as UserImportFormData,
-  excelFile: undefined as any,
-  excelFilelist: [] as File[]
+const rules = reactive({
+  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+  deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
+  roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
+  email: [
+    {
+      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+      message: "请输入正确的邮箱地址",
+      trigger: "blur",
+    },
+  ],
+  mobile: [
+    {
+      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+      message: "请输入正确的手机号码",
+      trigger: "blur",
+    },
+  ],
 });
 
-const {
-  loading,
-  single,
-  multiple,
-  queryParams,
-  userList,
-  total,
-  dialog,
-  formData,
-  rules,
-  deptName,
-  deptOptions,
-  roleOptions,
-  importDialog,
-  importFormData,
-  excelFilelist
-} = toRefs(state);
+const searchDeptName = ref();
+const deptList = ref<OptionType[]>();
+const roleList = ref<OptionType[]>();
+const importDialog = reactive<DialogOption>({
+  title: "用户导入",
+  visible: false,
+});
 
 /**
- * 部门筛选
+ * 导入选择的部门ID
  */
+const importDeptId = ref<number>();
+const excelFile = ref<File>();
+const excelFilelist = ref<File[]>([]);
+
 watchEffect(
   () => {
-    deptTreeRef.value.filter(state.deptName);
+    deptTreeRef.value.filter(searchDeptName.value);
   },
   {
     flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
@@ -341,9 +91,9 @@ watchEffect(
 );
 
 /**
- * 部门列表筛选
+ * 部门筛选
  */
-function filterDeptNode(value: string, data: any) {
+function handleDeptFilter(value: string, data: any) {
   if (!value) {
     return true;
   }
@@ -351,38 +101,34 @@ function filterDeptNode(value: string, data: any) {
 }
 
 /**
- * 部门树节点点击
+ * 部门树节点
  */
 function handleDeptNodeClick(data: { [key: string]: any }) {
-  state.queryParams.deptId = data.id;
+  queryParams.deptId = data.value;
   handleQuery();
 }
 
 /**
- * 加载角色数据
+ * 获取角色下拉列表
  */
-async function loadRoleOptions() {
-  listRoles().then((response) => {
-    state.roleOptions = response.data;
+async function getRoleOptions() {
+  listRoleOptions().then((response) => {
+    roleList.value = response.data;
   });
 }
 
 /**
- * 用户状态修改
+ * 修改用户状态
  */
 function handleStatusChange(row: { [key: string]: any }) {
   const text = row.status === 1 ? "启用" : "停用";
-  ElMessageBox.confirm(
-    "确认要" + text + "" + row.username + "用户吗?",
-    "警告",
-    {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }
-  )
+  ElMessageBox.confirm("确认要" + text + row.username + "用户吗?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
     .then(() => {
-      return updateUserPart(row.id, { status: row.status });
+      return updateUserStatus(row.id, row.status);
     })
     .then(() => {
       ElMessage.success(text + "成功");
@@ -393,37 +139,34 @@ function handleStatusChange(row: { [key: string]: any }) {
 }
 
 /**
- * 用户查询
- **/
+ * 查询
+ */
 function handleQuery() {
-  state.loading = true;
-  listUsersPage(state.queryParams).then(({ data }) => {
-    state.userList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
+  loading.value = true;
+  getUserPage(queryParams)
+    .then(({ data }) => {
+      userList.value = data.list;
+      total.value = data.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 }
 
-/**
- * 重置查询
- */
+/** 重置查询 */
 function resetQuery() {
   queryFormRef.value.resetFields();
+  queryParams.pageNum = 1;
+  queryParams.deptId = undefined;
   handleQuery();
 }
 
-/**
- * 表格行选中事件
- */
+/** 行选中事件 */
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length !== 1;
-  state.multiple = !selection.length;
+  ids.value = selection.map((item: any) => item.id);
 }
 
-/**
- * 密码重置
- */
+/**重置密码 */
 function resetPassword(row: { [key: string]: any }) {
   ElMessageBox.prompt(
     "请输入用户「" + row.username + "」的新密码",
@@ -438,217 +181,523 @@ function resetPassword(row: { [key: string]: any }) {
         ElMessage.warning("请输入新密码");
         return false;
       }
-      updateUserPart(row.id, {
-        password: value,
-      }).then(() => {
-        ElMessage.success("修改成功，新密码是：" + value);
+      updateUserPassword(row.id, value).then(() => {
+        ElMessage.success("密码重置成功，新密码是：" + value);
       });
     })
-    .catch(() => { });
+    .catch(() => {});
 }
 
-/**
- * 添加用户
- **/
-async function handleAdd() {
-  await loadDeptOptions();
-  await loadRoleOptions();
-  state.dialog = {
-    title: "添加用户",
-    visible: true,
-  };
+/** 打开表单弹窗 */
+async function openDialog(userId?: number) {
+  await getDeptOptions();
+  await getRoleOptions();
+  dialog.visible = true;
+  if (userId) {
+    dialog.title = "修改用户";
+    getUserForm(userId).then(({ data }) => {
+      Object.assign(formData, data);
+    });
+  } else {
+    dialog.title = "新增用户";
+  }
 }
 
-/**
- * 修改用户
- **/
-async function handleUpdate(row: { [key: string]: any }) {
-  const userId = row.id || state.ids;
-  await loadDeptOptions();
-  await loadRoleOptions();
-  state.dialog = {
-    title: "修改用户",
-    visible: true,
-  };
-  getUserDetail(userId).then(({ data }) => {
-    state.formData = data;
-  });
+/** 关闭表单弹窗 */
+function closeDialog() {
+  dialog.visible = false;
+  resetForm();
 }
 
-/**
- * 表单提交
- */
-function submitForm() {
-  dataFormRef.value.validate((valid: any) => {
+/** 重置表单 */
+function resetForm() {
+  userFormRef.value.resetFields();
+  userFormRef.value.clearValidate();
+
+  formData.id = undefined;
+  formData.status = 1;
+}
+
+/** 表单提交 */
+const handleSubmit = useThrottleFn(() => {
+  userFormRef.value.validate((valid: any) => {
     if (valid) {
-      const userId = state.formData.id;
+      const userId = formData.id;
+      loading.value = true;
       if (userId) {
-        updateUser(userId, state.formData).then(() => {
-          ElMessage.success("修改用户成功");
-          cancel()
-          handleQuery();
-        });
+        updateUser(userId, formData)
+          .then(() => {
+            ElMessage.success("修改用户成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
       } else {
-        addUser(state.formData).then((response: any) => {
-          ElMessage.success("新增用户成功");
-          cancel()
-          handleQuery();
-        });
+        addUser(formData)
+          .then(() => {
+            ElMessage.success("新增用户成功");
+            closeDialog();
+            resetQuery();
+          })
+          .finally(() => (loading.value = false));
       }
     }
   });
-}
-
-/**
- * 删除用户
- */
-function handleDelete(row: { [key: string]: any }) {
-  const userIds = row.id || state.ids.join(",");
-  ElMessageBox.confirm(
-    "是否确认删除用户编号为「" + userIds + "」的数据项?",
-    "警告",
-    {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }
-  )
-    .then(function () {
-      deleteUsers(userIds).then(() => {
-        ElMessage.success("删除成功");
-        handleQuery();
-      });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
-}
+}, 3000);
+
+/** 删除用户 */
+function handleDelete(id?: number) {
+  const userIds = [id || ids.value].join(",");
+  if (!userIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
 
-/**
- * 取消
- */
-function cancel() {
-  state.dialog.visible = false;
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
+  ElMessageBox.confirm("确认删除用户?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    deleteUsers(userIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
+  });
 }
 
 /**
- * 加载部门
+ * 获取部门下拉项
  */
-async function loadDeptOptions() {
-  listSelectDepartments().then((response) => {
-    state.deptOptions = response.data;
+async function getDeptOptions() {
+  listDeptOptions().then((response) => {
+    deptList.value = response.data;
   });
 }
 
-/**
- * 加载性别字典
- */
-function loadGenderOptions() {
-  proxy.$listDictsByCode("gender").then((response: any) => {
-    state.genderOptions = response?.data;
+/** 下载导入模板 */
+function downloadTemplate() {
+  downloadTemplateApi().then((response: any) => {
+    const blob = new Blob([response.data], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
+    });
+    const a = document.createElement("a");
+    const href = window.URL.createObjectURL(blob); // 下载链接
+    a.href = href;
+    a.download = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    ); // 获取后台设置的文件名称
+    document.body.appendChild(a);
+    a.click(); // 点击下载
+    document.body.removeChild(a); // 下载完成移除元素
+    window.URL.revokeObjectURL(href); // 释放掉blob对象
   });
 }
 
-/**
- * 下载用户导入模板
- */
-function handleDownloadTemplate() {
-  downloadTemplate().then((response: any) => {
-    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
-    const a = document.createElement('a')
-    const href = window.URL.createObjectURL(blob) // 下载链接
-    a.href = href
-    a.download = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]); // 获取后台设置的文件名称
-    document.body.appendChild(a)
-    a.click() // 点击下载
-    document.body.removeChild(a) // 下载完成移除元素
-    window.URL.revokeObjectURL(href) // 释放掉blob对象
-  })
+/** 打开导入弹窗 */
+async function openImportDialog() {
+  await getDeptOptions();
+  importDeptId.value = undefined;
+  importDialog.visible = true;
 }
 
 /**
- * 导入用户表单弹窗
+ * Excel文件change事件
+ *
+ * @param file
  */
-async function showImportDialog() {
-  await loadDeptOptions();
-  await loadRoleOptions();
-  state.importDialog.visible = true
-}
-
-
-function handleExcelChange(file: any, fileList: File[]) {
-  const fileName = file.name;
+function handleExcelChange(file: UploadFile) {
   if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
-    ElMessage.warning('上传Excel只能为xlsx、xls格式');
-    state.excelFile = undefined
-    state.excelFilelist = []
+    ElMessage.warning("上传Excel只能为xlsx、xls格式");
+    excelFile.value = undefined;
+    excelFilelist.value = [];
     return false;
   }
-  state.excelFile = file.raw
+  excelFile.value = file.raw;
 }
 
-function submitImportForm() {
-  importFormRef.value.validate((valid: any) => {
-    if (valid) {
-      if (!state.excelFile) {
-        ElMessage.warning('上传Excel文件不能为空');
-        return false
-      }
-
-      const deptId = state.importFormData.deptId
-      const roleIds = state.importFormData.roleIds.join(',')
-      importUser(deptId, roleIds, state.excelFile).then((response) => {
-        ElMessage.success(response.data);
-        closeImportDialog();
-        handleQuery();
-      })
+/** 导入用户提交 */
+function handleUserImport() {
+  if (importDeptId.value) {
+    if (!excelFile.value) {
+      ElMessage.warning("上传Excel文件不能为空");
+      return false;
     }
-  });
+    importUser(importDeptId.value, excelFile.value).then((response) => {
+      ElMessage.success(response.data);
+      closeImportDialog();
+      resetQuery();
+    });
+  }
 }
 
-/**
- * 关闭导入弹窗
- */
+/**  关闭导入弹窗 */
 function closeImportDialog() {
-  state.importDialog.visible = false
-  state.excelFile = undefined
-  state.excelFilelist = []
-  importFormRef.value.resetFields();
+  importDialog.visible = false;
+  excelFile.value = undefined;
+  excelFilelist.value = [];
 }
 
-/**
- * 导出用户
- */
-function handleExport() {
-  exportUser(queryParams.value).then((response: any) => {
-    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
-    const a = document.createElement('a')
-    const href = window.URL.createObjectURL(blob) // 下载的链接
-    a.href = href
-    a.download = decodeURI(response.headers["content-disposition"].split(";")[1].split("=")[1]); // 获取后台设置的文件名称
-    document.body.appendChild(a)
-    a.click() // 点击导出
-    document.body.removeChild(a) // 下载完成移除元素
-    window.URL.revokeObjectURL(href) // 释放掉blob对象
-  })
-}
-
-/**
- * 初始化数据
- */
-function loadData() {
-  // 初始化性别字典
-  loadGenderOptions();
-  // 初始化部门
-  loadDeptOptions();
-  // 初始化用户列表数据
-  handleQuery();
+/** 导出用户 */
+function handleUserExport() {
+  exportUser(queryParams).then((response: any) => {
+    const blob = new Blob([response.data], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
+    });
+    const a = document.createElement("a");
+    const href = window.URL.createObjectURL(blob); // 下载的链接
+    a.href = href;
+    a.download = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    ); // 获取后台设置的文件名称
+    document.body.appendChild(a);
+    a.click(); // 点击导出
+    document.body.removeChild(a); // 下载完成移除元素
+    window.URL.revokeObjectURL(href); // 释放掉blob对象
+  });
 }
 
 onMounted(() => {
-  loadData();
+  getDeptOptions(); // 初始化部门
+  handleQuery(); // 初始化用户列表数据
 });
 </script>
 
-<style lang="scss" scoped>
-</style>
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!-- 部门树 -->
+      <el-col :lg="4" :xs="24" class="mb-[12px]">
+        <el-card shadow="never">
+          <el-input v-model="searchDeptName" placeholder="部门名称" clearable>
+            <template #prefix>
+              <i-ep-search />
+            </template>
+          </el-input>
+
+          <el-tree
+            ref="deptTreeRef"
+            class="mt-2"
+            :data="deptList"
+            :props="{ children: 'children', label: 'label', disabled: '' }"
+            :expand-on-click-node="false"
+            :filter-node-method="handleDeptFilter"
+            default-expand-all
+            @node-click="handleDeptNodeClick"
+          ></el-tree>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="20" :xs="24">
+        <div class="search-container">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="关键字" prop="keywords">
+              <el-input
+                v-model="queryParams.keywords"
+                placeholder="用户名/昵称/手机号"
+                clearable
+                style="width: 200px"
+                @keyup.enter="handleQuery"
+              />
+            </el-form-item>
+
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="全部"
+                clearable
+                style="width: 200px"
+              >
+                <el-option label="启用" value="1" />
+                <el-option label="禁用" value="0" />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="handleQuery"
+                ><i-ep-search />搜索</el-button
+              >
+              <el-button @click="resetQuery">
+                <i-ep-refresh />
+                重置</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <el-card shadow="never">
+          <template #header>
+            <div class="flex justify-between">
+              <div>
+                <el-button
+                  v-hasPerm="['sys:user:add']"
+                  type="success"
+                  @click="openDialog()"
+                  ><i-ep-plus />新增</el-button
+                >
+                <el-button
+                  v-hasPerm="['sys:user:delete']"
+                  type="danger"
+                  :disabled="ids.length === 0"
+                  @click="handleDelete()"
+                  ><i-ep-delete />删除</el-button
+                >
+              </div>
+              <div>
+                <el-dropdown split-button>
+                  导入
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item @click="downloadTemplate">
+                        <i-ep-download />下载模板</el-dropdown-item
+                      >
+                      <el-dropdown-item @click="openImportDialog">
+                        <i-ep-top />导入数据</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+                <el-button class="ml-3" @click="handleUserExport"
+                  ><template #icon><i-ep-download /></template>导出</el-button
+                >
+              </div>
+            </div>
+          </template>
+
+          <el-table
+            v-loading="loading"
+            :data="userList"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="50" align="center" />
+            <el-table-column
+              key="id"
+              label="编号"
+              align="center"
+              prop="id"
+              width="100"
+            />
+            <el-table-column
+              key="username"
+              label="用户名"
+              align="center"
+              prop="username"
+            />
+            <el-table-column
+              label="用户昵称"
+              width="120"
+              align="center"
+              prop="nickname"
+            />
+
+            <el-table-column
+              label="性别"
+              width="100"
+              align="center"
+              prop="genderLabel"
+            />
+
+            <el-table-column
+              label="部门"
+              width="120"
+              align="center"
+              prop="deptName"
+            />
+            <el-table-column
+              label="手机号码"
+              align="center"
+              prop="mobile"
+              width="120"
+            />
+
+            <el-table-column label="状态" align="center" prop="status">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.status"
+                  :inactive-value="0"
+                  :active-value="1"
+                  @change="handleStatusChange(scope.row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              width="180"
+            ></el-table-column>
+            <el-table-column label="操作" fixed="right" width="220">
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['sys:user:reset_pwd']"
+                  type="primary"
+                  size="small"
+                  link
+                  @click="resetPassword(scope.row)"
+                  ><i-ep-refresh-left />重置密码</el-button
+                >
+                <el-button
+                  v-hasPerm="['sys:user:edit']"
+                  type="primary"
+                  link
+                  size="small"
+                  @click="openDialog(scope.row.id)"
+                  ><i-ep-edit />编辑</el-button
+                >
+                <el-button
+                  v-hasPerm="['sys:user:delete']"
+                  type="primary"
+                  link
+                  size="small"
+                  @click="handleDelete(scope.row.id)"
+                  ><i-ep-delete />删除</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            v-if="total > 0"
+            v-model:total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="handleQuery"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 表单弹窗 -->
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="600px"
+      append-to-body
+      @close="closeDialog"
+    >
+      <el-form
+        ref="userFormRef"
+        :model="formData"
+        :rules="rules"
+        label-width="80px"
+      >
+        <el-form-item label="用户名" prop="username">
+          <el-input
+            v-model="formData.username"
+            :readonly="!!formData.id"
+            placeholder="请输入用户名"
+          />
+        </el-form-item>
+
+        <el-form-item label="用户昵称" prop="nickname">
+          <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
+        </el-form-item>
+
+        <el-form-item label="所属部门" prop="deptId">
+          <el-tree-select
+            v-model="formData.deptId"
+            placeholder="请选择所属部门"
+            :data="deptList"
+            filterable
+            check-strictly
+            :render-after-expand="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="性别" prop="gender">
+          <dictionary v-model="formData.gender" type-code="gender" />
+        </el-form-item>
+
+        <el-form-item label="角色" prop="roleIds">
+          <el-select v-model="formData.roleIds" multiple placeholder="请选择">
+            <el-option
+              v-for="item in roleList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="手机号码" prop="mobile">
+          <el-input
+            v-model="formData.mobile"
+            placeholder="请输入手机号码"
+            maxlength="11"
+          />
+        </el-form-item>
+
+        <el-form-item label="邮箱" prop="email">
+          <el-input
+            v-model="formData.email"
+            placeholder="请输入邮箱"
+            maxlength="50"
+          />
+        </el-form-item>
+
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio :label="1">正常</el-radio>
+            <el-radio :label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="closeDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!-- 导入弹窗 -->
+    <el-dialog
+      v-model="importDialog.visible"
+      :title="importDialog.title"
+      width="600px"
+      append-to-body
+      @close="closeImportDialog"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="部门">
+          <el-tree-select
+            v-model="importDeptId"
+            placeholder="请选择部门"
+            :data="deptList"
+            filterable
+            check-strictly
+          />
+        </el-form-item>
+
+        <el-form-item label="Excel">
+          <el-upload
+            class="upload-demo"
+            action=""
+            drag
+            :auto-upload="false"
+            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+            :file-list="excelFilelist"
+            :on-change="handleExcelChange"
+            :limit="1"
+          >
+            <el-icon class="el-icon--upload">
+              <i-ep-upload-filled />
+            </el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
+            <template #tip>
+              <div class="el-upload__tip">xls/xlsx files</div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleUserImport">确 定</el-button>
+          <el-button @click="closeImportDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/src/views/ums/member/index.vue b/src/views/ums/member/index.vue
deleted file mode 100644
index eb62d39c..00000000
--- a/src/views/ums/member/index.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-      <el-form-item>
-        <el-input
-          v-model="queryParams.nickName"
-          placeholder="会员昵称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="Search" @click="handleQuery"
-          >搜索</el-button
-        >
-        <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      v-loading="loading"
-      :data="memberList"
-      border
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column type="selection" align="center" />
-      <el-table-column type="expand" width="120" label="会员地址">
-        <template #default="scope">
-          <el-table :data="scope.row.addressList" size="small" border>
-            <el-table-column
-              type="index"
-              label="序号"
-              width="100"
-              align="center"
-            />
-            <el-table-column align="center" label="收货人" prop="name" />
-            <el-table-column align="center" label="联系方式" prop="mobile" />
-            <el-table-column align="center" label="收货地址">
-              <template #default="scope">
-                {{
-                  scope.row.province +
-                  scope.row.city +
-                  scope.row.area +
-                  scope.row.address
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column align="center" label="邮编" prop="zipCode" />
-            <el-table-column align="center" label="是否默认">
-              <template #default="scope">
-                <el-tag v-if="scope.row.defaulted == 1" type="success"
-                  >是</el-tag
-                >
-                <el-tag v-if="scope.row.defaulted == 0" type="info">否</el-tag>
-              </template>
-            </el-table-column>
-          </el-table>
-        </template>
-      </el-table-column>
-
-      <el-table-column type="index" label="序号" width="100" align="center" />
-      <el-table-column prop="nickName" label="昵称" />
-      <el-table-column label="性别" width="80">
-        <template #default="scope">
-          <span v-if="scope.row.gender === 0">未知</span>
-          <span v-if="scope.row.gender === 1">男</span>
-          <span v-if="scope.row.gender === 2">女</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="头像" width="100">
-        <template #default="scope">
-          <el-popover placement="right" :width="400" trigger="hover">
-            <img :src="scope.row.avatarUrl" width="400" height="400" />
-            <template #reference>
-              <img
-                :src="scope.row.avatarUrl"
-                style="max-height: 60px; max-width: 60px"
-              />
-            </template>
-          </el-popover>
-        </template>
-      </el-table-column>
-      <el-table-column prop="mobile" label="手机号码" />
-      <el-table-column prop="birthday" label="出生日期" />
-      <el-table-column prop="status" width="80" label="状态">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
-          <el-tag v-else type="info">禁用</el-tag>
-        </template>
-      </el-table-column>
-
-      <el-table-column prop="gmtCreate" label="注册时间" />
-
-      <el-table-column label="账户余额">
-        <template #default="scope">
-          {{ scope.row.balance / 100 }}
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 分页工具条 -->
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="handleQuery"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, onMounted, toRefs } from "vue";
-import { ElTable, ElMessage, ElMessageBox } from "element-plus";
-import { Search, Plus, Edit, Refresh, Delete } from "@element-plus/icons-vue";
-
-import { listMemeberPages } from "@/api/ums/member";
-import { MemberQueryParam,MemberItem } from "@/types";
-
-const state = reactive({
-  // 遮罩层
-  loading: true,
-  // 选中数组
-  ids: [],
-  // 非单个禁用
-  single: true,
-  // 非多个禁用
-  multiple: true,
-  total: 0,
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-  } as MemberQueryParam,
-  memberList: [] as MemberItem[]
-});
-
-const { loading, ids, single, multiple, queryParams, memberList, total } =
-  toRefs(state);
-
-function handleQuery() {
-  state.loading = true;
-  listMemeberPages(state.queryParams).then(({data}) => {
-    state.memberList = data.list;
-    state.total = data.total;
-    state.loading = false;
-  });
-}
-
-function resetQuery() {
-  state.queryParams = {
-    pageNum: 1,
-    pageSize: 10,
-    nickName: undefined,
-  };
-  handleQuery();
-}
-
-function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: { id: any }) => item.id);
-  state.single = selection.length != 1;
-  state.multiple = !selection.length;
-}
-
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<style scoped>
-</style>
diff --git a/tsconfig.json b/tsconfig.json
index cb8c7d3f..3423468b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,14 +10,17 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-    "baseUrl": "./",
+    "baseUrl": ".",
+    "allowJs": true,
     "paths": {
       "@/*": ["src/*"]
     },
-    "allowSyntheticDefaultImports": true, // 默认导入
-    "skipLibCheck": true,  // 不对第三方依赖类型检查 ，element-plus 生产打包报错
-    "types": ["vite-plugin-svg-icons/client","element-plus/global"]
-    
+    "types": ["vite/client", "unplugin-icons/types/vue"],
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
+    "allowSyntheticDefaultImports": true /* 允许默认导入 */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/types/**/*.d.ts"],
+  "exclude": ["node_modules", "dist", "**/*.js"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..9d31e2ae
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
index 3a27aada..f14d92ac 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,44 +1,171 @@
-import { UserConfig, ConfigEnv, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-import path from 'path'
-
-// @see: https://gitee.com/holysheng/vite2-config-description/blob/master/vite.config.ts
-export default ({ command, mode }: ConfigEnv): UserConfig => {
-    // 获取 .env 环境配置文件
-    const env = loadEnv(mode, process.cwd())
-
-    return (
-        {
-            plugins: [
-                vue(),
-                createSvgIconsPlugin({
-                    // 指定需要缓存的图标文件夹
-                    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-                    // 指定symbolId格式
-                    symbolId: 'icon-[dir]-[name]'
-                })
-
-            ],
-            // 本地反向代理解决浏览器跨域限制
-            server: {
-                host: 'localhost',
-                port: Number(env.VITE_APP_PORT),
-                open: true, // 运行自动打开浏览器
-                proxy: {
-                    [env.VITE_APP_BASE_API]: {
-                        target: 'http://www.youlai.tech:9999',
-                        changeOrigin: true,
-                        rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
-                    }
-                }
-            },
-            resolve: {
-                // Vite 设置别名路径
-                alias: {
-                    "@": path.resolve("./src"),  // @ 代替 src
-                }
-            }
-        }
-    )
-}
\ No newline at end of file
+import vue from "@vitejs/plugin-vue";
+
+import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";
+
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
+
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+
+import UnoCSS from "unocss/vite";
+import path from "path";
+
+import viteCompression from "vite-plugin-compression";
+
+const pathSrc = path.resolve(__dirname, "src");
+
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    resolve: {
+      alias: {
+        "@": pathSrc,
+      },
+    },
+    css: {
+      // CSS 预处理器
+      preprocessorOptions: {
+        //define global scss variable
+        scss: {
+          javascriptEnabled: true,
+          additionalData: `
+            @use "@/styles/variables.scss" as *;
+          `,
+        },
+      },
+    },
+    server: {
+      host: "0.0.0.0",
+      port: Number(env.VITE_APP_PORT),
+      open: true, // 运行是否自动打开浏览器
+      proxy: {
+        // 反向代理解决跨域
+        [env.VITE_APP_BASE_API]: {
+          target: "http://vapi.youlai.tech", // 线上接口地址
+          // target: 'http://localhost:8989',  // 本地接口地址 , 后端工程仓库地址：https://gitee.com/youlaiorg/youlai-boot
+          changeOrigin: true,
+          rewrite: (path) =>
+            path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""), // 替换 /dev-api 为 target 接口地址
+        },
+      },
+    },
+    plugins: [
+      vue(),
+      UnoCSS({}),
+      AutoImport({
+        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
+        imports: ["vue", "@vueuse/core"],
+        eslintrc: {
+          enabled: false,
+          filepath: "./.eslintrc-auto-import.json",
+          globalsPropValue: true,
+        },
+        resolvers: [
+          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
+          ElementPlusResolver(),
+          IconsResolver({}),
+        ],
+        vueTemplate: true,
+        // 配置文件生成位置(false:关闭自动生成)
+        dts: false,
+        // dts: "src/types/auto-imports.d.ts",
+      }),
+
+      Components({
+        resolvers: [
+          // 自动导入 Element Plus 组件
+          ElementPlusResolver(),
+          // 自动导入图标组件
+          IconsResolver({
+            // @iconify-json/ep 是 Element Plus 的图标库
+            enabledCollections: ["ep"],
+          }),
+        ],
+        // 指定自定义组件位置(默认:src/components)
+        dirs: ["src/**/components"],
+        // 配置文件位置(false:关闭自动生成)
+        dts: false,
+        // dts: "src/types/components.d.ts",
+      }),
+
+      Icons({
+        // 自动安装图标库
+        autoInstall: true,
+      }),
+
+      createSvgIconsPlugin({
+        // 指定需要缓存的图标文件夹
+        iconDirs: [path.resolve(pathSrc, "assets/icons")],
+        // 指定symbolId格式
+        symbolId: "icon-[dir]-[name]",
+      }),
+      // 代码压缩
+      viteCompression({
+        verbose: true, // 默认即可
+        disable: true, // 是否禁用压缩，默认禁用，true为禁用,false为开启，打开压缩需配置nginx支持
+        deleteOriginFile: true, // 删除源文件
+        threshold: 10240, // 压缩前最小文件大小
+        algorithm: "gzip", // 压缩算法
+        ext: ".gz", // 文件类型
+      }),
+    ],
+    // 预加载项目必需的组件
+    optimizeDeps: {
+      include: [
+        "vue",
+        "vue-router",
+        "pinia",
+        "axios",
+        "element-plus/es/components/form/style/css",
+        "element-plus/es/components/form-item/style/css",
+        "element-plus/es/components/button/style/css",
+        "element-plus/es/components/input/style/css",
+        "element-plus/es/components/input-number/style/css",
+        "element-plus/es/components/switch/style/css",
+        "element-plus/es/components/upload/style/css",
+        "element-plus/es/components/menu/style/css",
+        "element-plus/es/components/col/style/css",
+        "element-plus/es/components/icon/style/css",
+        "element-plus/es/components/row/style/css",
+        "element-plus/es/components/tag/style/css",
+        "element-plus/es/components/dialog/style/css",
+        "element-plus/es/components/loading/style/css",
+        "element-plus/es/components/radio/style/css",
+        "element-plus/es/components/radio-group/style/css",
+        "element-plus/es/components/popover/style/css",
+        "element-plus/es/components/scrollbar/style/css",
+        "element-plus/es/components/tooltip/style/css",
+        "element-plus/es/components/dropdown/style/css",
+        "element-plus/es/components/dropdown-menu/style/css",
+        "element-plus/es/components/dropdown-item/style/css",
+        "element-plus/es/components/sub-menu/style/css",
+        "element-plus/es/components/menu-item/style/css",
+        "element-plus/es/components/divider/style/css",
+        "element-plus/es/components/card/style/css",
+        "element-plus/es/components/link/style/css",
+        "element-plus/es/components/breadcrumb/style/css",
+        "element-plus/es/components/breadcrumb-item/style/css",
+        "element-plus/es/components/table/style/css",
+        "element-plus/es/components/tree-select/style/css",
+        "element-plus/es/components/table-column/style/css",
+        "element-plus/es/components/select/style/css",
+        "element-plus/es/components/option/style/css",
+        "element-plus/es/components/pagination/style/css",
+        "element-plus/es/components/tree/style/css",
+        "element-plus/es/components/alert/style/css",
+        "@vueuse/core",
+
+        "path-to-regexp",
+        "echarts",
+        "@wangeditor/editor",
+        "@wangeditor/editor-for-vue",
+        "vue-i18n",
+        "codemirror",
+      ],
+    },
+  };
+});