diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..00ee2de469cb37b1203c263276c4f99629ed0de7
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+# 表示所有文件适用
+[*]
+charset = utf-8 # 设置文件字符集为 utf-8
+end_of_line = lf # 控制换行类型(lf | cr | crlf)
+indent_style = space # 缩进风格（tab | space）
+indent_size = 2 # 缩进大小
+insert_final_newline = true # 始终在文件末尾插入一个新行
+
+# 表示仅 md 文件适用以下规则
+[*.md]
+max_line_length = off # 关闭最大行长度限制
+trim_trailing_whitespace = false # 关闭末尾空格修剪
diff --git a/.env.development b/.env.development
index 0c92b764be29441d2fd89022b0ed23a04e2188de..1d34584a43a0a670805a0194242bb0c45644b721 100644
--- a/.env.development
+++ b/.env.development
@@ -5,4 +5,12 @@ NODE_ENV='development'
 
 VITE_APP_TITLE = 'vue3-element-admin'
 VITE_APP_PORT = 3000
+
+# API请求前缀
 VITE_APP_BASE_API = '/dev-api'
+
+# proxy代理配置
+VITE_APP_TARGET_URL = 'http://vapi.youlai.tech' # 线上接口
+# VITE_APP_TARGET_URL = 'http://localhost:8989' # 本地接口，本地启动后端：https://gitee.com/youlaiorg/youlai-boot
+# VITE_APP_TARGET_URL = 'http://localhost:3000' # 本地Mock
+VITE_APP_TARGET_BASE_API = ''
diff --git a/.env.production b/.env.production
index bc89fec3ee419e99c13a3568e8b76c2dea800ce3..ad781c0809b9152bd9876375b812d6a4ec4092de 100644
--- a/.env.production
+++ b/.env.production
@@ -1,6 +1,11 @@
 ## 生产环境
-NODE_ENV='production'
 
 VITE_APP_TITLE = 'vue3-element-admin'
 VITE_APP_PORT = 3000
+
+# API请求前缀
 VITE_APP_BASE_API = '/prod-api'
+
+# proxy代理配置
+VITE_APP_TARGET_URL = "http://vapi.youlai.tech"
+VITE_APP_TARGET_BASE_API = ''
diff --git a/.env.staging b/.env.staging
index 7a0b3d37ac8c6b96be79600d35e8dbe41166f164..7b5894bb357747c1b466b7a92bea7ab316cd4e38 100644
--- a/.env.staging
+++ b/.env.staging
@@ -3,4 +3,6 @@ NODE_ENV='staging'
 
 VITE_APP_TITLE = 'vue3-element-admin'
 VITE_APP_PORT = 3000
-VITE_APP_BASE_API = '/prod--api'
+
+VITE_APP_TARGET_URL = 'http://localhost:3000';
+VITE_APP_BASE_API = '/prod-api'
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000000000000000000000000000000000..43af40f40b04b72962b5d6356f00441a8e606838
--- /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 0000000000000000000000000000000000000000..f4738bfcc31d71c19b21c58d72bd25f0705f09d4
--- /dev/null
+++ b/.eslintrc-auto-import.json
@@ -0,0 +1,284 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ElMessage": true,
+    "ElMessageBox": true,
+    "ElNotification": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": 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,
+    "createReusableTemplate": true,
+    "createSharedComposable": true,
+    "createTemplatePromise": 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,
+    "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,
+    "toValue": true,
+    "triggerRef": true,
+    "tryOnBeforeMount": true,
+    "tryOnBeforeUnmount": true,
+    "tryOnMounted": true,
+    "tryOnScopeDispose": true,
+    "tryOnUnmounted": true,
+    "unref": true,
+    "unrefElement": true,
+    "until": true,
+    "useActiveElement": true,
+    "useAnimate": true,
+    "useArrayDifference": true,
+    "useArrayEvery": true,
+    "useArrayFilter": true,
+    "useArrayFind": true,
+    "useArrayFindIndex": true,
+    "useArrayFindLast": true,
+    "useArrayIncludes": 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,
+    "useParentElement": true,
+    "usePerformanceObserver": 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,
+    "watchDeep": true,
+    "watchEffect": true,
+    "watchIgnorable": true,
+    "watchImmediate": true,
+    "watchOnce": true,
+    "watchPausable": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
+    "watchThrottled": true,
+    "watchTriggerable": true,
+    "watchWithFilter": true,
+    "whenever": true
+  }
+}
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..69c2fc75ce98f9af62ef65ac480f2ce1e8a49399
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,86 @@
+module.exports = {
+  root: true,
+  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",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parser: "@typescript-eslint/parser",
+    project: "./tsconfig.*?.json",
+    createDefaultProgram: false,
+    extraFileExtensions: [".vue"],
+  },
+  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",
+    "@typescript-eslint/ban-ts-ignore": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "vue/script-setup-uses-vars": "error",
+    "vue/no-reserved-component-names": "off",
+    "vue/custom-event-name-casing": "off",
+    "vue/attributes-order": "off",
+    "vue/one-component-per-file": "off",
+    "vue/html-closing-bracket-newline": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/multiline-html-element-content-newline": "off",
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/attribute-hyphenation": "off",
+    "vue/require-default-prop": "off",
+    "vue/require-explicit-emits": "off",
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          void: "always",
+          normal: "never",
+          component: "always",
+        },
+        svg: "always",
+        math: "always",
+      },
+    ],
+    "vue/multi-word-component-names": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        useTabs: false, // 不使用制表符
+      },
+    ],
+  },
+  // 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 1da66c1e9a35adf6d08ff4f687dea3c9860a0c59..1fd449a71e4486e3776d184cf894fc1a23a3ba05 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,6 @@ dist-ssr
 
 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
@@ -14,4 +13,5 @@ dist-ssr
 *.local
 
 package-lock.json
-yarn.lock
\ No newline at end of file
+pnpm-lock.yaml
+stats.html
diff --git a/.husky/commit-msg b/.husky/commit-msg
new file mode 100755
index 0000000000000000000000000000000000000000..e8511eaeaf61dd7e09c3e9f35cdee6c636568f1c
--- /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 0000000000000000000000000000000000000000..37568d10abfa3b19c2e1a3d1ad6a59b13f4f2fc3
--- /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 0000000000000000000000000000000000000000..f3e9850f460c163870500fe21e4671dca1805640
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,11 @@
+dist
+node_modules
+public
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
+stats.html
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..347fb32e916c99606c414e698418d8689aef29c0
--- /dev/null
+++ b/.prettierrc.cjs
@@ -0,0 +1,46 @@
+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,
+
+  endOfLine: "auto",
+  overrides: [
+    {
+      files: "*.html",
+      options: {
+        parser: "html",
+      },
+    },
+  ],
+};
diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 0000000000000000000000000000000000000000..f3e9850f460c163870500fe21e4671dca1805640
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1,11 @@
+dist
+node_modules
+public
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
+stats.html
diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
new file mode 100644
index 0000000000000000000000000000000000000000..06ed90d5adc489d5c3f6653b80cbf6bd9cfe726a
--- /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/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000000000000000000000000000000000000..a7cea0b0678120a1b590d1b6592c7318039b9179
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000000000000000000000000000000000..1e824bfafc3e62015f4236fb5227673f056795ae
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,80 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "npm.packageManager": "pnpm",
+  "editor.tabSize": 2,
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.quickSuggestions": {
+    "other": true,
+    "comments": true,
+    "strings": true
+  },
+	"editor.codeActionsOnSave": {
+	  "source.fixAll": true,
+	  "source.fixAll.eslint": true,
+	  "source.fixAll.stylelint": true
+	},
+  "files.eol": "\n",
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/*.log": true,
+    "**/*.log*": true,
+    "**/bower_components": true,
+    "**/dist": true,
+    "**/elehukouben": true,
+    "**/.git": true,
+    "**/.gitignore": true,
+    "**/.svn": true,
+    "**/.DS_Store": true,
+    "**/.idea": true,
+    "**/.vscode": false,
+    "**/yarn.lock": true,
+    "**/tmp": true,
+    "out": true,
+    "dist": true,
+    "node_modules": true,
+    "CHANGELOG.md": true,
+    "examples": true,
+    "res": true,
+    "screenshots": true,
+    "yarn-error.log": true,
+    "**/.yarn": true
+  },
+  "files.exclude": {
+    "**/.cache": true,
+    "**/.editorconfig": true,
+    "**/.eslintcache": true,
+    "**/bower_components": true,
+    "**/.idea": true,
+    "**/tmp": true,
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true
+  },
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/.vscode/**": true,
+    "**/node_modules/**": true,
+    "**/tmp/**": true,
+    "**/bower_components/**": true,
+    "**/dist/**": true,
+    "**/yarn.lock": true
+  },
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": false,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.enabledParsers": ["ts"],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.enabledFrameworks": [
+    "vue",
+    "react"
+  ],
+  "i18n-ally.localesPaths": [
+    "src/lang"
+  ],
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000000000000000000000000000000000..9e757a10278a7e9b5fefd9627437fa3fd216e228
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,94 @@
+# 2.6.2 (2023/10/11)
+
+### 🐛 fix
+- 主题设置未持久化问题
+- UnoCSS 插件无智能提示
+
+### 🔄 refactor
+- WebSocket 演示样式和代码优化
+- 用户管理代码重构
+
+# 2.6.1 (2023/9/4)
+
+### 🐛 fix
+- 导航顶部模式、混合模式样式在固定 Header 出现的样式问题修复
+- 固定 Header 没有持久化问题修复
+- 字典回显兼容 String 和 Number 类型
+
+# 2.6.0 (2023/8/24)💥💥💥
+
+### ✨ feat
+- 导航顶部模式、混合模式支持（author by [april-tong](https://april-tong.com/)）
+- 平台文档(内嵌)（author by [april-tong](https://april-tong.com/)）
+
+# 2.5.0 (2023/8/8)
+
+### ✨ feat
+- 新增 Mock（author by [ygcaicn](https://github.com/ygcaicn)）
+- 图标 DEMO（author by [ygcaicn](https://github.com/ygcaicn)）
+
+### 🐛 fix
+- 字典支持 Number 类型
+
+# 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 c4c9813d1ac819ce3375ca35d0a98ca278373c60..9825cba022275577efd936680b4598b9fa8f44e5 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 1807eb2fc3c0226562b197f36fe563f72059da54..f642e938915e5d82e3f005c4c346f0449c9120fa 100644
--- a/README.md
+++ b/README.md
@@ -1,137 +1,179 @@
 <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.4-brightgreen.svg"/>
+    <img src="https://img.shields.io/badge/Vite-4.4.11-green.svg"/>
+    <img src="https://img.shields.io/badge/Element Plus-2.3.14-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 尝试
+
+- **接口切换 Mock**
+
+	v2.5.0 版本支持 Mock , 修改 `.env.development` 的 `VITE_APP_TARGET_URL` 值为 `http://localhost:3000` 即可 。
+
+- **其他问题**
+
+  如果有其他问题或者建议，建议 [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. 替换 [.env.development](.env.development) 的代理目标地址 `VITE_APP_TARGET_URL` 的值  `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 0000000000000000000000000000000000000000..c07a63186a2161f4b30e92d98ae83160fd13ee85
--- /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 753e4046901552669497461dd214f1750b1d8412..4441eb6e878a90b1e52b7337a3b3b855d4eb9bf3 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,19 @@
     <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="Vue3 + Vite4 + TypeScript5 + Element-Plus 的后台管理模板，配套接口文档和后端源码，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>
+    <div id="app" class="app"></div>
     <script type="module" src="/src/main.ts"></script>
+    <script>
+      global = globalThis;
+    </script>
   </body>
 </html>
diff --git a/licenses/vue-element-admin/LICENSE b/licenses/vue-element-admin/LICENSE
new file mode 100644
index 0000000000000000000000000000000000000000..3fce3848624352579d30c7c56c7afa01e5125e3e
--- /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 0000000000000000000000000000000000000000..9825cba022275577efd936680b4598b9fa8f44e5
--- /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/mock/article.ts b/mock/article.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8563e6edebe094c9f075bae70bf4b37b1c70091a
--- /dev/null
+++ b/mock/article.ts
@@ -0,0 +1,168 @@
+import { MockMethod } from "vite-plugin-mock";
+
+const article_list: any = [];
+const count = 100;
+
+for (let i = 0; i < count; i++) {
+  article_list.push({
+    id: i,
+    timestamp: new Date().getTime(),
+    author: `Author ${i}`,
+    reviewer: `reviewer ${i}`,
+    title: `Title ${i}`,
+    importance: Math.floor(Math.random() * 3) + 1,
+    type: ["CN", "US", "JP", "EU"][Math.floor(Math.random() * 4)],
+    status: ["published", "draft"][Math.floor(Math.random() * 2)],
+    display_time: new Date().toISOString(),
+    pageviews: Math.floor(Math.random() * (5000 - 300)) + 300,
+    remark: `remark ${i}`,
+  });
+}
+
+export default [
+  {
+    url: "/api/v1/article/list",
+    timeout: 200,
+    method: "get",
+    response: ({ query }) => {
+      const { importance, type, title, page = 1, limit = 10, sort } = query;
+      let mock_list = article_list.filter((item: any) => {
+        if (importance && item.importance !== +importance) return false;
+        if (type && item.type !== type) return false;
+        if (title && item.title.indexOf(title) < 0) return false;
+        if (item.status === "deleted") return false;
+        return true;
+      });
+      if (sort === "-id") {
+        mock_list = mock_list.reverse();
+      }
+      const page_list = mock_list.filter(
+        (item: any, index: number) =>
+          index < limit * page && index >= limit * (page - 1)
+      );
+
+      return {
+        code: "00000",
+        data: { total: mock_list.length, page: page, items: page_list },
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/article/detail",
+    timeout: 200,
+    method: "get",
+    response: ({ query }) => {
+      const { id } = query;
+      for (const article of article_list) {
+        if (article.id === +id) {
+          return {
+            code: "00000",
+            data: article,
+            msg: "一切ok",
+          };
+        }
+      }
+    },
+  },
+  {
+    url: "/api/v1/article/pv",
+    timeout: 200,
+    method: "get",
+    response: ({ query }) => {
+      const { id } = query;
+      for (const article of article_list) {
+        if (article.id === +id) {
+          return {
+            code: "00000",
+            data: {
+              pv: article.pageviews,
+              pvData: [
+                { key: "PC", pv: 1024 },
+                { key: "mobile", pv: 1024 },
+                { key: "ios", pv: 1024 },
+                { key: "android", pv: 1024 },
+              ],
+            },
+            msg: "一切ok",
+          };
+        }
+      }
+    },
+  },
+  {
+    url: "/api/v1/article/update",
+    timeout: 200,
+    method: "post",
+    response: ({ body }) => {
+      const { id, ...updatedFields } = body;
+      // 查找要更新的文章
+      const articleToUpdate = article_list.find(
+        (article: any) => article.id === id
+      );
+
+      // 如果找到了要更新的文章
+      if (articleToUpdate) {
+        // 使用 Object.assign 方法更新文章
+        Object.assign(articleToUpdate, updatedFields);
+        return {
+          code: "00000",
+          data: {
+            article: articleToUpdate,
+          },
+          msg: "一切ok",
+        };
+      } else {
+        console.error(`Article with id ${id} not found.`);
+      }
+    },
+  },
+  {
+    url: "/api/v1/article/create",
+    timeout: 200,
+    method: "post",
+    response: ({ body }) => {
+      const { title, author, importance, type, status, remark, timestamp } =
+        body;
+      // article_list最大的id值;
+      const maxId = article_list.reduce((maxId: number, article: any) => {
+        return Math.max(maxId, article.id);
+      }, -1);
+      const article = {
+        id: maxId + 1,
+        timestamp,
+        author,
+        reviewer: `reviewer ${maxId + 1}`,
+        title,
+        importance,
+        type,
+        status,
+        display_time: new Date(timestamp).toISOString(),
+        pageviews: Math.floor(Math.random() * (5000 - 300)) + 300,
+        remark,
+      };
+      article_list.push(article);
+      return {
+        code: "00000",
+        data: {
+          article,
+        },
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/article/delete",
+    timeout: 200,
+    method: "post",
+    response: ({ body }) => {
+      const { id } = body;
+      const index = article_list.findIndex((article: any) => article.id === id);
+      article_list.splice(index, 1);
+      return {
+        code: "00000",
+        msg: "一切ok",
+      };
+    },
+  },
+] as MockMethod[];
diff --git a/mock/dept.ts b/mock/dept.ts
new file mode 100644
index 0000000000000000000000000000000000000000..91746f4f2d79827111cffafb5637c29f93d04658
--- /dev/null
+++ b/mock/dept.ts
@@ -0,0 +1,30 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/api/v1/dept/options",
+    method: "get",
+    response: () => {
+      return {
+        code: "00000",
+        data: [
+          {
+            value: 1,
+            label: "有来技术",
+            children: [
+              {
+                value: 2,
+                label: "研发部门",
+              },
+              {
+                value: 3,
+                label: "测试部门",
+              },
+            ],
+          },
+        ],
+        msg: "一切ok",
+      };
+    },
+  },
+] as MockMethod[];
diff --git a/mock/dict.ts b/mock/dict.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ee38c38d13e1db70b2fa765341e28251589bebc
--- /dev/null
+++ b/mock/dict.ts
@@ -0,0 +1,36 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/api/v1/dict/:code/options",
+    method: "get",
+    response: ({ url }) => {
+      const typeCode = url.match(/\/api\/v1\/dict\/(\w+)\/options/)[1];
+
+      let list = null;
+
+      if (typeCode == "gender") {
+        list = [
+          {
+            value: "1",
+            label: "男",
+          },
+          {
+            value: "2",
+            label: "女",
+          },
+          {
+            value: "0",
+            label: "未知",
+          },
+        ];
+      }
+
+      return {
+        code: "00000",
+        data: list,
+        msg: "一切ok",
+      };
+    },
+  },
+] as MockMethod[];
diff --git a/mock/role.ts b/mock/role.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6c3419f614b6fa598e957022820245361791339b
--- /dev/null
+++ b/mock/role.ts
@@ -0,0 +1,165 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/api/v1/roles/options",
+    method: "get",
+    response: () => {
+      return {
+        code: "00000",
+        data: [
+          {
+            value: 2,
+            label: "系统管理员",
+          },
+          {
+            value: 4,
+            label: "系统管理员1",
+          },
+          {
+            value: 5,
+            label: "系统管理员2",
+          },
+          {
+            value: 6,
+            label: "系统管理员3",
+          },
+          {
+            value: 7,
+            label: "系统管理员4",
+          },
+          {
+            value: 8,
+            label: "系统管理员5",
+          },
+          {
+            value: 9,
+            label: "系统管理员6",
+          },
+          {
+            value: 10,
+            label: "系统管理员7",
+          },
+          {
+            value: 11,
+            label: "系统管理员8",
+          },
+          {
+            value: 12,
+            label: "系统管理员9",
+          },
+          {
+            value: 3,
+            label: "访问游客",
+          },
+        ],
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/roles/page",
+    method: "get",
+    response: () => {
+      return {
+        code: "00000",
+        data: {
+          list: [
+            {
+              id: 2,
+              name: "系统管理员",
+              code: "ADMIN",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 3,
+              name: "访问游客",
+              code: "GUEST",
+              status: 1,
+              sort: 3,
+              createTime: "2021-05-26 15:49:05",
+              updateTime: "2019-05-05 16:00:00",
+            },
+            {
+              id: 4,
+              name: "系统管理员1",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 5,
+              name: "系统管理员2",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 6,
+              name: "系统管理员3",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 7,
+              name: "系统管理员4",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 8,
+              name: "系统管理员5",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 9,
+              name: "系统管理员6",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 10,
+              name: "系统管理员7",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+            {
+              id: 11,
+              name: "系统管理员8",
+              code: "ADMIN1",
+              status: 1,
+              sort: 2,
+              createTime: "2021-03-25 12:39:54",
+              updateTime: null,
+            },
+          ],
+          total: 11,
+        },
+        msg: "一切ok",
+      };
+    },
+  },
+] as MockMethod[];
diff --git a/mock/router.ts b/mock/router.ts
new file mode 100644
index 0000000000000000000000000000000000000000..60375071f7630d8d5993786ebbe2bbadfb431873
--- /dev/null
+++ b/mock/router.ts
@@ -0,0 +1,412 @@
+import { MockMethod } from "vite-plugin-mock";
+const url = "/api/v1/menus/routes";
+const method = "get";
+const data = {
+  code: "00000",
+  data: [
+    {
+      path: "/system",
+      component: "Layout",
+      redirect: "/system/user",
+      meta: {
+        title: "系统管理",
+        icon: "system",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "user",
+          component: "system/user/index",
+          name: "User",
+          meta: {
+            title: "用户管理",
+            icon: "user",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "role",
+          component: "system/role/index",
+          name: "Role",
+          meta: {
+            title: "角色管理",
+            icon: "role",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "menu",
+          component: "system/menu/index",
+          name: "Menu",
+          meta: {
+            title: "菜单管理",
+            icon: "menu",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "dept",
+          component: "system/dept/index",
+          name: "Dept",
+          meta: {
+            title: "部门管理",
+            icon: "tree",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "dict",
+          component: "system/dict/index",
+          name: "DictType",
+          meta: {
+            title: "字典管理",
+            icon: "dict",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+      ],
+    },
+
+    {
+      path: "/api",
+      component: "Layout",
+      meta: {
+        title: "接口",
+        icon: "api",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "apidoc",
+          component: "demo/api-doc",
+          name: "Apidoc",
+          meta: {
+            title: "接口文档",
+            icon: "api",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: false,
+          },
+        },
+      ],
+    },
+    {
+      path: "/external-link",
+      component: "Layout",
+      redirect: "noredirect",
+      meta: {
+        title: "外部链接",
+        icon: "link",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "https://juejin.cn/post/7228990409909108793",
+          meta: {
+            title: "document",
+            icon: "document",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+      ],
+    },
+    {
+      path: "/multi-level",
+      component: "Layout",
+      redirect: "/multi-level/multi-level1",
+      meta: {
+        title: "多级菜单",
+        icon: "multi_level",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "multi-level1",
+          component: "demo/multi-level/level1",
+          redirect: "/multi-level/multi-level2",
+          meta: {
+            title: "菜单一级",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+          children: [
+            {
+              path: "multi-level2",
+              component: "demo/multi-level/children/level2",
+              redirect: "/multi-level/multi-level2/multi-level3-1",
+              meta: {
+                title: "菜单二级",
+                icon: "",
+                hidden: false,
+                roles: ["ADMIN"],
+                keepAlive: true,
+              },
+              children: [
+                {
+                  path: "multi-level3-1",
+                  component: "demo/multi-level/children/children/level3-1",
+                  name: "MultiLevel31",
+                  meta: {
+                    title: "菜单三级-1",
+                    icon: "",
+                    hidden: false,
+                    roles: ["ADMIN"],
+                    keepAlive: true,
+                  },
+                },
+                {
+                  path: "multi-level3-2",
+                  component: "demo/multi-level/children/children/level3-2",
+                  name: "MultiLevel32",
+                  meta: {
+                    title: "菜单三级-2",
+                    icon: "",
+                    hidden: false,
+                    roles: ["ADMIN"],
+                    keepAlive: true,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      path: "/component",
+      component: "Layout",
+      meta: {
+        title: "组件封装",
+        icon: "menu",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "wang-editor",
+          component: "demo/wang-editor",
+          name: "wang-editor",
+          meta: {
+            title: "富文本编辑器",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "upload",
+          component: "demo/upload",
+          name: "upload",
+          meta: {
+            title: "图片上传",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "icon-selector",
+          component: "demo/icon-selector",
+          name: "icon-selector",
+          meta: {
+            title: "图标选择器",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "dict-demo",
+          component: "demo/dict",
+          name: "DictDemo",
+          meta: {
+            title: "字典组件",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "taginput",
+          component: "demo/taginput",
+          name: "taginput",
+          meta: {
+            title: "标签输入框",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "signature",
+          component: "demo/signature",
+          name: "signature",
+          meta: {
+            title: "签名",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "table",
+          component: "demo/table",
+          name: "Table",
+          meta: {
+            title: "表格",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+      ],
+    },
+    {
+      path: "/table",
+      component: "Layout",
+      meta: {
+        title: "Table",
+        icon: "table",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "dynamic-table",
+          component: "demo/table/dynamic-table/index",
+          name: "DynamicTable",
+          meta: {
+            title: "动态Table",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "drag-table",
+          component: "demo/table/drag-table",
+          name: "DragTable",
+          meta: {
+            title: "拖拽Table",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "complex-table",
+          component: "demo/table/complex-table",
+          name: "ComplexTable",
+          meta: {
+            title: "综合Table",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+      ],
+    },
+    {
+      path: "/function",
+      component: "Layout",
+      meta: {
+        title: "功能演示",
+        icon: "menu",
+        hidden: false,
+        roles: ["ADMIN"],
+        keepAlive: true,
+      },
+      children: [
+        {
+          path: "permission",
+          component: "demo/permission/page",
+          name: "Permission",
+          meta: {
+            title: "Permission",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "icon-demo",
+          component: "demo/icons",
+          name: "Icons",
+          meta: {
+            title: "图标",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "websocket",
+          component: "demo/websocket",
+          name: "Websocket",
+          meta: {
+            title: "Websocket",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+        {
+          path: "other",
+          component: "demo/other",
+          meta: {
+            title: "敬请期待...",
+            icon: "",
+            hidden: false,
+            roles: ["ADMIN"],
+            keepAlive: true,
+          },
+        },
+      ],
+    },
+  ],
+  msg: "一切ok",
+};
+
+export default [
+  {
+    url: url,
+    method: method,
+    response: () => {
+      return data;
+    },
+  },
+] as MockMethod[];
diff --git a/mock/user.ts b/mock/user.ts
new file mode 100644
index 0000000000000000000000000000000000000000..71d44689483a79c86fb494e0ba9c3375ac61d453
--- /dev/null
+++ b/mock/user.ts
@@ -0,0 +1,182 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/api/hello_world",
+    method: "get",
+    response: (request) => {
+      return {
+        msg: "hello world",
+        headers: request.headers,
+      };
+    },
+  },
+  {
+    url: "/api/v1/auth/captcha",
+    method: "get",
+    response: () => {
+      return {
+        code: "00000",
+        data: {
+          verifyCodeKey: "534b8ef2b0a24121bec76391ddd159f9",
+          verifyCodeBase64:
+            "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAkCAIAAADNSmkJAAAFKUlEQVR4Xu2ZXUwcVRiGV70wMWo08V5NvPXCrDbFaGpMaZW2hqQxaoiJTRsaMBCNSYtpa2JTKiFSelFa+Q/QZcMWqEhBlh+htbEpZhMrBQrlJ0hBywLLyrJ0WZbje3bqOvPNLHPWrDvdOE9ONmfe78zkzMs335wzWJhJQrBQweS/wTQ6QWgYHdoIOcecOe05O+t2WkutO+p2ZF3Ksg/YV9ZW6FATYajR3nveg60H9327r3O8c35lHgp+r05dPdJzBL73TPSQ8SaCKIxGLsPlop+K0JHrEkPuoT31e5qGmmjARACF0agYyGVNlyVm/pzZXrN9fHGcBkz0UBid+31u93i3XFFT80vN8cvHqWqih8Lo1NpUqS5vwh3vnd223VQ10UNh9NbyrcFQUK6oCawHUipSqGqiB83oBf+CXFGDMp1mS6OqiR4Ko7FexkpOrqhpHGw82nOUqiZ6KIzGrkRuorW0dJMmOy+hOCfYGzb2RBFv6HRO0gEJw/U7y+pgL1bwmTxexN6sZ31TdEwEhdG+gA+7EqyXpUO1uZH20cWL8hMTRt1N9tBXzCJrOIRoCPJpSO2RAp4HmtCdIfZ+2JWgEBN9LbR28seTGU0Zue1tMLp+YIAMSADzfvbkKX4/eb28j4YODiGin3heqmIlLja5hAUCu+nmGY3JWKvpMAlqNGgebsauBOvlqSX+JEx7p7EbTLen53XlzfmWUioqXikrc68Y8N2juJ/fyVsNChGHEE//rBANYWaZz+TRQqpLaBgNsPfDrgSpbS21YtV87IdjrlkX9JZbt5DOma2t9ITo5F+5glN22WwL/n+yDv00mw06orKxOqQ5+J04hhViwzAXETIcJDVm8uxZqktoGx2Nj9t43Wgaul/ERQiGQvtbWnDWgZYW9CXlQFjZ/7ciyHNn+Z2MexTimIeLz59TiIln0M1e+IbPpOAaDUnEYPTi6iqKxpbycs/qKo1tCslfKcffPn9enuMiPPY1vxO/ckeFQ4h46cdGqUWoidE/y54q5tPY5WDrGzQqIXot4BgchEE57e00IMCw2/1qZSVO/7SjA78o9INzcxsbrL+fnTnDDh9mmZn8F30oG1Hm+nABv5mQMopDS/h1HxtqTzWbABMe9sxpPoe9zezeOo1GELqWhPS8t46M0IAYHbdvR1aHbaOjbjfLz2eFhez6dba4yAfgF30o0BFVE8+Mjh/wFxPI+I5mAEHU6Ls+38vhTFwOBGhMDF8gkFpbC5ffsdv/uBs6dIj19dExEtARVXv9YNbop8NFY3aZ6gRRo+tu3IBHnzmdNCBMXldXJKPfL74WzWUJRE+coDUknqsOdZXQbAJYwluVTbOZI3Qt8GFzMwxyjo3RgBiN4fr+elXVpZGRLWXl6PdOTtJBSlBDUK/lnIrjOlrtqWYTQDJaF6FrTXu9sOa1ysrVoM5HVE1GFxZQcyJ/p+xzv6K/rbr6N6+XDpUBl0tKFIrbz78qWB6YnWFMCBld4XLBms+7df75ook/GNzb0GCV7U1Qfz9p64TyQWNjYD3qe9rj4SMJtQP3MyjSDPzWIRHPjH7X4YAvfXoPuyZf9Pbi3PcuXIh4mp3NllYC6XY79C+jl2o8PBipxjnBttn4MgMNnWgfcRJGPI2OL8hTj3LloIlmRicvBhiNykvecpqoa3RSY4DRcLAwyicuOepVR1JjgNFYHWONHL04czTX0UmNAUYD7Pr+xc4wqTHGaBb2OtZvHUmNYUazcA2J6etdUmOk0f8rTKMTxF91RG0D1SwYGwAAAABJRU5ErkJggg==",
+        },
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/auth/login",
+    method: "post",
+    response: () => {
+      return {
+        code: "00000",
+        data: {
+          accessToken:
+            "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImp0aSI6IjE2YWJkNTlkOTAxNzQwZDliYmI3ZjczODBhZDkyNzNhIiwidXNlcklkIjoyLCJ1c2VybmFtZSI6ImFkbWluIiwiZGVwdElkIjoxLCJkYXRhU2NvcGUiOjEsImF1dGhvcml0aWVzIjpbIlJPTEVfQURNSU4iXSwiZXhwIjoxNjkxMTAzMzgyfQ.P4cuIfmPepl3HuguhMS7NXn5a7IUPpsLbmtA_rHOhHk",
+          tokenType: "Bearer",
+          refreshToken: null,
+          expires: null,
+        },
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/users/me",
+    method: "get",
+    response: () => {
+      return {
+        code: "00000",
+        data: {
+          userId: 2,
+          nickname: "系统管理员",
+          avatar:
+            "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+          roles: ["ADMIN"],
+          perms: [
+            "sys:menu:delete",
+            "sys:dept:edit",
+            "sys:dict_type:add",
+            "sys:dict:edit",
+            "sys:dict:delete",
+            "sys:dict_type:edit",
+            "sys:menu:add",
+            "sys:user:add",
+            "sys:role:edit",
+            "sys:dept:delete",
+            "sys:user:edit",
+            "sys:user:delete",
+            "sys:user:reset_pwd",
+            "sys:dept:add",
+            "sys:role:delete",
+            "sys:dict_type:delete",
+            "sys:menu:edit",
+            "sys:dict:add",
+            "sys:role:add",
+          ],
+        },
+        msg: "一切ok",
+      };
+    },
+  },
+  {
+    url: "/api/v1/auth/logout",
+    method: "delete",
+    response: () => {
+      return {
+        code: "00000",
+        data: {},
+        msg: "string",
+      };
+    },
+  },
+  {
+    url: "/api/v1/users/page",
+    method: "get",
+    response: () => {
+      return {
+        code: "00000",
+        data: {
+          list: [
+            {
+              id: 2,
+              username: "admin",
+              nickname: "系统管理员",
+              mobile: "17621210366",
+              genderLabel: "男",
+              avatar:
+                "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+              email: null,
+              status: 1,
+              deptName: "有来技术",
+              roleNames: "系统管理员",
+              createTime: "2019-10-10",
+            },
+            {
+              id: 3,
+              username: "test",
+              nickname: "测试小用户",
+              mobile: "17621210366",
+              genderLabel: "男",
+              avatar:
+                "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+              email: null,
+              status: 1,
+              deptName: "测试部门",
+              roleNames: "访问游客",
+              createTime: "2021-06-04",
+            },
+          ],
+          total: 2,
+        },
+        msg: "一切ok",
+      };
+    },
+  },
+
+  {
+    url: "/api/v1/users/:id/form",
+    method: "get",
+    response: ({ url }) => {
+      const id = url.match(/\/api\/v1\/users\/(\d+)\/form/)[1];
+      let formData = null;
+      if (id == 2) {
+        formData = {
+          id: 2,
+          username: "admin",
+          nickname: "系统管理员",
+          mobile: "17621210366",
+          gender: 1,
+          avatar:
+            "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+          email: "",
+          status: 1,
+          deptId: 1,
+          roleIds: [2],
+        };
+      } else if (id == 3) {
+        formData = {
+          id: 3,
+          username: "test",
+          nickname: "测试小用户",
+          mobile: "17621210366",
+          gender: 1,
+          avatar:
+            "https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
+          email: "youlaitech@163.com",
+          status: 1,
+          deptId: 3,
+          roleIds: [3],
+        };
+      }
+
+      return {
+        code: "00000",
+        data: formData,
+        msg: "一切ok",
+      };
+    },
+  },
+] as MockMethod[];
diff --git a/package.json b/package.json
index 851e33283136c6a4c8a40dbc0853145518cecae4..a5656e23ee2efa66d4df2a4cbc3221619c95ee46 100644
--- a/package.json
+++ b/package.json
@@ -1,39 +1,119 @@
 {
   "name": "vue3-element-admin",
-  "version": "0.0.0",
+  "private": true,
+  "version": "2.6.2",
   "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",
+    "@element-plus/icons-vue": "^2.1.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vueuse/core": "^10.1.2",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "5.1.10",
+    "axios": "^1.4.0",
     "echarts": "^5.2.2",
-    "element-plus": "^2.1.0",
+    "element-plus": "^2.3.14",
+    "lodash-es": "^4.17.21",
+    "mockjs": "^1.1.0",
+    "net": "^1.0.2",
     "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"
+    "sockjs-client": "1.6.1",
+    "sortablejs": "^1.15.0",
+    "stompjs": "^2.3.3",
+    "terser": "^5.19.3",
+    "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/lodash": "^4.14.195",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
-    "@vitejs/plugin-vue": "^1.9.3",
+    "@types/sockjs-client": "^1.5.1",
+    "@types/sortablejs": "^1.15.1",
+    "@types/stompjs": "^2.3.5",
+    "@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-import": "^2.28.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.10.2",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-recommended-scss": "^12.0.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.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.11",
+    "vite-plugin-mock": "^3.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^0.3.0"
+    "vue-tsc": "^1.7.0 "
+  },
+  "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 fa23226225fcf9cee1b7a3d1307daf2522da24c4..6638cf39557cc581b40fbdbbd2caf8d1b3c589d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,44 +1,12 @@
-<template>
-  <el-config-provider :locale="locale">
-    <router-view />
-  </el-config-provider>
-</template>
-
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
 import { ElConfigProvider } from "element-plus";
+import { useAppStore } from "@/store/modules/app";
 
-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;
-});
+const appStore = useAppStore();
 </script>
 
+<template>
+  <el-config-provider :locale="appStore.locale" :size="appStore.size">
+    <router-view />
+  </el-config-provider>
+</template>
diff --git a/src/api/article.ts b/src/api/article.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2547a4bca0de56e224a4cfb01fc519f10b69d234
--- /dev/null
+++ b/src/api/article.ts
@@ -0,0 +1,88 @@
+import request from "@/utils/request";
+
+export interface ArticleQuery {
+  page?: number;
+  limit?: number;
+  sort?: string;
+  title?: string;
+  type?: string;
+  importance?: number;
+}
+
+export interface ArticleDetail {
+  id: number;
+  timestamp: number;
+  title: string;
+  type: string;
+  status: string;
+  importance: number;
+  content?: string;
+  remark?: string;
+}
+
+export interface ArticleCreate {
+  type: string;
+  timestamp: Date;
+  title: string;
+  status?: string;
+  importance?: number;
+  remark?: string;
+}
+
+export interface ArticleUpdate {
+  id: number;
+  type?: string;
+  timestamp?: Date;
+  title?: string;
+  status?: string;
+  importance?: number;
+  remark?: string;
+}
+
+export function fetchList(query: ArticleQuery) {
+  return request({
+    url: "/api/v1/article/list",
+    method: "get",
+    params: query,
+  });
+}
+
+export function fetchArticle(id: number) {
+  return request({
+    url: "/api/v1/article/detail",
+    method: "get",
+    params: { id },
+  });
+}
+
+export function fetchPv(id: number) {
+  return request({
+    url: "/api/v1/article/pv",
+    method: "get",
+    params: { id },
+  });
+}
+
+export function createArticle(data: ArticleCreate) {
+  return request({
+    url: "/api/v1/article/create",
+    method: "post",
+    data,
+  });
+}
+
+export function updateArticle(data: ArticleUpdate) {
+  return request({
+    url: "/api/v1/article/update",
+    method: "post",
+    data,
+  });
+}
+
+export function deleteArticle(id: number) {
+  return request({
+    url: "/api/v1/article/delete",
+    method: "post",
+    data: { id },
+  });
+}
diff --git a/src/api/auth/index.ts b/src/api/auth/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..92663750b3a2b14e5d7d9da718af3d26458527a2
--- /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 0000000000000000000000000000000000000000..858f1d9e5e2f48d7503f425dec6b0c3fc4a07577
--- /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 0000000000000000000000000000000000000000..77e3973af9d7000c9be4e3f6ead40ea7574d333c
--- /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 getDeptOptions(): 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 0000000000000000000000000000000000000000..408c39c4885ccdc8058690a6b0f4daf169d210bc
--- /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 0000000000000000000000000000000000000000..635297ebd148da38e0d682347b8adfbd7db0e5ee
--- /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 0000000000000000000000000000000000000000..315da6d7d84509569c01d274afcc03dec2e3d88a
--- /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 0000000000000000000000000000000000000000..adcc30b9c3f73bec83110a92c7e924f1b54bb524
--- /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 0000000000000000000000000000000000000000..22b2be55d843789b5d50f64b9cd9566ba6164218
--- /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 77e48567a601e8f7fea1c9098d7e87f21b2cec90..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..b28b22ece57b9c782c149e17905ab22f087a76a0
--- /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 0000000000000000000000000000000000000000..2ba6c21d1fd0fef268f50ab174a538cb609a454e
--- /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 3a9f53a6c874f49744d9901e6ebad3c9d89b816b..0000000000000000000000000000000000000000
--- 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 e81db3dc4fd1d3134bf95c42b787750af0b2e463..0000000000000000000000000000000000000000
--- 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 1123f8466ace96616a174251925a81ad232a0102..0000000000000000000000000000000000000000
--- 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 1a53322a3a026bb8f929ced9a7acaf77ec083376..0000000000000000000000000000000000000000
--- 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 16b1dd180989a3d5ceff78d07fe1c0b2b6ed8788..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..fdbc65cd62defd3bb881970eee7632f7d1de08a7
--- /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 getRoleOptions(
+  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 0000000000000000000000000000000000000000..2d259c7fc4c0bc176d5bf17b4f32cffea49e3ff8
--- /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 d284c9f76da1a2d795724df4f56387456cea98c2..0000000000000000000000000000000000000000
--- 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 e1266fb1a2476d0fd1a4379f92bd456bf9c04d25..0000000000000000000000000000000000000000
--- 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 f68f240dccfca25343f899ab8edc558ee57fba8d..0000000000000000000000000000000000000000
--- 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 bf4b93200745c42850a54ae14078b093cf44dcec..0000000000000000000000000000000000000000
--- 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 eae58f3ca3c3e23242cd50d95c09f4a786ef14cd..0000000000000000000000000000000000000000
--- 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 c6932310cbf903bf7627b89c74e3cdc73fd66230..0000000000000000000000000000000000000000
--- 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 3b7a9ea3adab14a4905b0881d009c1361d1f21bd..0000000000000000000000000000000000000000
--- 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 cece5f3ccbed7d3188e2ac0eb3712738bbc7d5e9..0000000000000000000000000000000000000000
--- 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 973d788cec30eac376469adefbad63dad4bca3e2..0000000000000000000000000000000000000000
--- 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 a997a3fd597be2b2fa511c63feee11ff6bbde564..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..d6d8141d5c148479e708f3ba80472c6c9d9fe951
--- /dev/null
+++ b/src/api/user/index.ts
@@ -0,0 +1,140 @@
+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 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 0000000000000000000000000000000000000000..ba38dabfec93c6144182a29eef183e59ff0f8858
--- /dev/null
+++ b/src/api/user/types.ts
@@ -0,0 +1,113 @@
+/**
+ * 登录用户信息
+ */
+export interface UserInfo {
+  userId?: number;
+  username?: string;
+  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/assets/icons/404.svg b/src/assets/icons/404.svg
deleted file mode 100644
index 6df50190aab43bd3a727b580fe2699ba36a4712c..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..5adcf43795d8dee6db419413ea288960767eb33e
--- /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 0000000000000000000000000000000000000000..2753743d5e34be6f90a678af203abb34898f697d
--- /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 fcec2ecbd9e017ed04f471c5c22caa82ab73693e..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..e4b7ceeeabd440154196ec4061d1c9f94c27bf26
--- /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 97c468863287f37a472112dd18e717cd94471ee6..0000000000000000000000000000000000000000
--- 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 013fd3a273eec2b45ea72843d7b3334c5d750530..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..ad4bc15a914565522a92dde6f13153b21df3ff64
--- /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 90923ff6282ec6aa403936bbe44b68e134cb9bcf..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..5b5057f27e91ef29be61d8863a408c97bc7f08c3
--- /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 0000000000000000000000000000000000000000..aa13cd755c1a2be7b7f1760bf34768588b7e59d3
--- /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 0000000000000000000000000000000000000000..e5708ea5c5c32eb0225f8a68bcfe03f268b71e18
--- /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 0000000000000000000000000000000000000000..212e6c283f442230763e4c14bfacb27862f1baf3
--- /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 0000000000000000000000000000000000000000..14d3cf39a11bf0674c3150f46508104eb827ef0d
--- /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 ed4d23cf4021f72022fa8f99ff89154c3741b3d6..0000000000000000000000000000000000000000
--- 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 44a81aab1bb9de3907ec9fadaf2d9e616979390f..0000000000000000000000000000000000000000
--- 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 29c345809974665d96ed42e261734bc56c37b826..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..2f952b240dc8dbe902c07f1fe197184530fbf5dc
--- /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 fda571e700372418697293910f77957c07290cfe..0000000000000000000000000000000000000000
--- 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 52dc73eecfaca2c315b54d99ba7030a79e549f36..0000000000000000000000000000000000000000
--- 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 484937730750b9adb201df69abef2503760f7229..22a8278119da47dcc7ed727d277e9afc9dd664b3 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 0000000000000000000000000000000000000000..903109a7fe810f8915bc52ec4c7a7dc0b65f0a34
--- /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 0000000000000000000000000000000000000000..918ae33dca2316c16f5cc2ae866f9f5c1390f7b8
--- /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 704312289e6ad2f65a3ace229e73fb5c7f3e94e9..0000000000000000000000000000000000000000
--- 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 c8969513493e7ac96725dcf2f01400e7c2c63df6..61ec1f9fffdf145470cc16ff9f8c01c9caaf26a8 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 a2b4b4ed2481975a127506a9516e5c12417ac93e..0000000000000000000000000000000000000000
--- 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 7bfb01d180f9ac9cf45429412129a7b7be4d8daf..0000000000000000000000000000000000000000
--- 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 74d25e21a6f98b90b34b2b8d2ce2dd90b38eb000..0000000000000000000000000000000000000000
--- 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 46f42b5323d11686c44b573729db0df115343d5c..0000000000000000000000000000000000000000
--- 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 74d97b802f8bf84caf4c623e77f890f74516d50f..0000000000000000000000000000000000000000
--- 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 9ab55a03f73575b6be0ee71fcd93630d7888bcbc..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..fcb971edc6ec3c436f5eb4afc5e11fe34440caf0
--- /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 0000000000000000000000000000000000000000..60c1c734fcf451ef711e9fde5d3745c95f66664a
--- /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 0000000000000000000000000000000000000000..48f4e2490b3bcee52b1221064b0ad906351276bc
--- /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/input.svg b/src/assets/icons/input.svg
deleted file mode 100644
index ab91381e6df0ec6307d677f0dce75b9c9d95e5d5..0000000000000000000000000000000000000000
--- 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 e9b56eee2c59774f0431186b9af2ba7593bffcc0..0000000000000000000000000000000000000000
--- 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 e59f29b35f9919adca8ab2e295a51569f2e55182..0000000000000000000000000000000000000000
--- 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 2a93a25195e29eba9c76d7ce5bdd6f1a71f9aee4..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..d4d60aacf28a6373c50729d6aff2c2f1051eb3df
--- /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 0082b577ab28523f353fa71c00cb338446b2bb9c..d2dd693ddfecd05d079a287498fa70d1719787e8 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 48197ba4da7b4314a16a19a698fe96c1b2a7ad0b..9748d5303a495fb3ea7f260e48a7137e5774bc63 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 20259eddb7c0cf77efe9cb1c561d2df8961094f5..0000000000000000000000000000000000000000
--- 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 74fee543dd1d9bc0ceb3310cc87bf65e268bf364..0000000000000000000000000000000000000000
--- 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 d879d33b6cd96ae370e104d58589915441e1bcb3..0000000000000000000000000000000000000000
--- 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 267f84474266c8ebe6ae61925a7c1cb4e3814079..0000000000000000000000000000000000000000
--- 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 719c78dc699b5378b718677b4b276fde634ae1f5..92c364c2317c7eba477fa1cb9748a8b36b033108 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 14ca81728a3de16e103a858b4ce31f8e0f550bce..ea1ddef10f911417c4aeee02b7dc091312eb3e08 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 c1580de10e1f1c504f7bfcaba4f41b24d816d8f2..60f7acf4c53650e424b46924b48279e555b7b153 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 0000000000000000000000000000000000000000..a1a2792144f6252a02d48d673e203e96be125b22
--- /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 d09cb16c5da6653b30010393bc52bddf131f647a..0000000000000000000000000000000000000000
--- 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 330a202935b887236b34200b163f6a421bad592f..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..8f2107ec41dfe129b3528e3dab30105f1a5a0bce
--- /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 957aa0cc3597c1277ded6367716067c9874552e0..0000000000000000000000000000000000000000
--- 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 2bd54aeb728197066e987e8d8d98364f50ed5be6..0000000000000000000000000000000000000000
--- 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 907404cd05694a9ae1095ec0edaceb1328500a9d..383b82d2729dd57d953dfbb01bfa01a9256ad60a 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 8ed624b9d1bf2f737048926f0cd425d9d633ad1c..b38d0657e4637e9136aec5254cf68f38b69c0697 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 ab8e8c4e5b3765c92e98fd2ecfeeda892661ac17..0000000000000000000000000000000000000000
--- 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 2922c613bddb847c6f411e27b5ad874f577a633f..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..e9b489c323cff056fd6fdc1cc7da08a6b5cfb435
--- /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 ee13d4ec2e54dbbe64009db689c502b05629721a..0000000000000000000000000000000000000000
--- 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 cf75bd4bea55c98003ca97828fcb3e37d5c4450e..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..65aa19854a39a632bc72f364c606bb0db0e62921
--- /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 0cde34521ae7b5bddaaa2372a4472fc05f9135a4..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..1f549f1ada0d5dff0f5c5f2a91f75da3a646fb34
--- /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 b207124471f937772bb7aec1039fdd2b8aac9c36..0000000000000000000000000000000000000000
--- 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 07809922264539672115e4866d65c3e1e6032df9..0000000000000000000000000000000000000000
--- 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 84233ddaa98a45d407cacdc869d9b7634f72d390..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..bcd9d2e6f64bed30b1b085eb504d5f875e386ee5
--- /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 d6283828bac413d2a10d4f6e267d7ba2f5f10aea..0000000000000000000000000000000000000000
--- 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 ca37b001e93c40a81dc3f9302795edc70e502457..0000000000000000000000000000000000000000
--- 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 87513e7c5fdd4260e48f7ead3501e0b9f9798c2a..8d2b4bf95d5eedc397572bbb95e81e7b0ad7f5de 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 fbe4f39f004ef8415e039234eaf4bf11b4d9985a..0000000000000000000000000000000000000000
--- 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/swagger.svg b/src/assets/icons/swagger.svg
deleted file mode 100644
index 05d4e7bcee9829539a977c51c36560c4aad98c80..0000000000000000000000000000000000000000
--- 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 0ba61e38d72b9af4c6e5a400baa0561f06d8d0c0..0000000000000000000000000000000000000000
--- 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 dba28cf6fd1ad6992421638659003fdb0e07c032..e3b7e2d49f493919156e3e0e3aa23b5b04949634 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 b4b48e48085bb21b18da5386a6d4692a70301977..0000000000000000000000000000000000000000
--- 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/textarea.svg b/src/assets/icons/textarea.svg
deleted file mode 100644
index 2709f292ea23aa87ba87d5ee2622c94994c1fbfb..0000000000000000000000000000000000000000
--- 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 13c1202bdafa11c73c89ee472f3c810e834dfeca..0000000000000000000000000000000000000000
--- 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 b376e32a608f33f906cda57da3df809c0413a44e..0000000000000000000000000000000000000000
--- 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 c813067ef74945d7fcd48c7092131abd20375168..0000000000000000000000000000000000000000
--- 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 8aafdb829ebbe289f352a533d9764c4f9395e533..0000000000000000000000000000000000000000
--- 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 dd4b7dd22fe06076831935066592caec48e323b0..d40a414d9e6099791bd7c0b19c1f22751208720e 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 bae49c0a50e7bc0683d82e3af2e0064adc4108ad..0000000000000000000000000000000000000000
--- 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 0ba0716a62a92f7cb2f2e6f3c745ace2be6b3b31..e4c7b389fdcdf91bdb0d8439cd4b6d1b8a58e9de 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 0000000000000000000000000000000000000000..ca4c30126c399e532f578f864b9a879051df9eb5
--- /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 cfb10214c53ee9e021a97733c9b5b5c39e388787..0000000000000000000000000000000000000000
--- 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/verify_code.svg b/src/assets/icons/verify_code.svg
new file mode 100644
index 0000000000000000000000000000000000000000..39bf478384a2fef8ac6d826f811a1d0f0e7b76b2
--- /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 c586e5511722843f9c741d7530db146dfab864a4..0000000000000000000000000000000000000000
--- 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 f806fc4825739224caf820e6edf54e808961b1a6..0000000000000000000000000000000000000000
--- 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 2c5e158b068a4e9980f52fe5d7c9c3f7730617ba..a17fc3f041a6f1c18b279de639ea32a0976d2e03 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 0000000000000000000000000000000000000000..01fdd5909dbded0f26174273a01bb91f7845c5c2
--- /dev/null
+++ b/src/components/Dictionary/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <el-select
+    v-model="selectedValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    clearable
+    @change="handleChange"
+  >
+    <el-option
+      v-for="option in options"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    />
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { getDictOptions } from "@/api/dict";
+
+const props = defineProps({
+  /**
+   * 字典类型编码(eg: 性别-gender)
+   */
+  typeCode: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number],
+  },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  valueType: {
+    type: String,
+    default: "string",
+  },
+});
+
+const emits = defineEmits(["update:modelValue"]); // 父组件监听事件，同步子组件值的变化给父组件
+
+const options: Ref<OptionType[]> = ref([]); // 字典下拉数据源
+
+const selectedValue = ref<string | number | undefined>();
+
+watch([options, () => props.modelValue], ([newOptions, newModelValue]) => {
+  if (newOptions.length === 0) return; // 下拉数据源加载未完成不回显
+  if (newModelValue == undefined) {
+    selectedValue.value = undefined;
+    return;
+  }
+
+  // 强转选项值的类型，避免下拉框匹配不了选项
+  // (接口取出的字典值都是string的)
+  newOptions.forEach((opt) => {
+    opt.value = props.valueType == "number" ? Number(opt.value) : opt.value;
+  });
+
+  if (typeof newOptions[0].value === "number" || props.valueType === "number") {
+    selectedValue.value = Number(newModelValue);
+  } else if (
+    typeof newOptions[0].value === "string" ||
+    props.valueType === "string"
+  ) {
+    selectedValue.value = String(newModelValue);
+  } else {
+    selectedValue.value = newModelValue;
+  }
+});
+
+function handleChange(val?: string | number | undefined) {
+  emits("update:modelValue", val);
+}
+
+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 2f507ca4b00b79740a7aaccad173c157b34ca366..4b0bba987a518b5153b2c1789fcf6d31a8059b24 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 368b002154ef7dfb2625e15a43d2ad264bfa040c..5ae603a6324fbce1fde3635cd0bad2f27e1323cf 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"
     >
-      <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;
-}
+  color: #fff;
+  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 f4be7071d11a522afa90d649316076c134895790..e4f925fcc132802e57eb69942fb0ba2187ca3076 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-bottom v-show="!visible" />
+        </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 b94de2fb638ca28dad73776c6d8e6f9148939141..71979db7cc05b24d41e483ceb1b8d7ddd7fcecc9 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 e0f85f21e212df7e6f0034e6022c706453ab912e..84e8f3e03c2b9ab320da25fe8cbe6f01f667d10b 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 41e2786daaff2f188df5d74fc8a5d8367d967f13..9dc5509cf1a01e26cbe36d1c241f2731fa390b90 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>
+    <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></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 b5b86973182f3f5bd8c721c31cce8881618b518a..0000000000000000000000000000000000000000
--- 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 32040a5ae3e7a47293e126322f1bda447be6f56f..f0800ba22f29d1580c34d0792d32058cebab5672 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 05cc3cde54eb39bc74f8fce4213ba9d1715b94de..07b65e8ddb62f744a0724db7445ed936874731fb 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/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
deleted file mode 100644
index 0bfb2fa0bf2b632f237df2109ea86c6f97f0438d..0000000000000000000000000000000000000000
--- 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 18c99e40167b903d8192372da2b9bbf0e37a2023..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..735f7a3e10c0a561ae4ca9ffd62f0e7c0a818d47
--- /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: () => [],
+  },
+  /**
+   * 文件上传数量限制
+   */
+  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 9a81fb5b5d7dcbb9dabf76ac351fbd02fbc45241..631dc28e5293707fbca8b8fcb71f87e80284cbb8 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -1,142 +1,77 @@
 <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-uploader__image" />
+    <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>
+<style scoped lang="scss">
 .single-uploader {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
   overflow: hidden;
-  transition: var(--el-transition-duration-fast);
-  text-align: center;
+  cursor: pointer;
+  border: 1px var(--el-border-color) solid;
+  border-radius: 6px;
+
   &:hover {
     border-color: var(--el-color-primary);
   }
 
   &__image {
-    width: 146px;
-    height: 146px;
     display: block;
+    width: 178px;
+    height: 178px;
   }
 
-  &__plus {
-     width: 146px;
-    height: 157px;
+  &___icon {
+    width: 178px;
+    height: 178px;
     font-size: 28px;
     color: #8c939d;
     text-align: center;
   }
-
-  &__remove {
-    font-size: 12px;
-    color: #ff4d51 !important;
-    margin-top: 0px !important;
-    position: absolute;
-    right: 0;
-    top: 0;
-    color: #409eff;
-  }
 }
 </style>
diff --git a/src/components/WangEditor/index.vue b/src/components/WangEditor/index.vue
index bd53bae23ac5e1c7d2ead280b8f66e305730f613..2f4c6782383fa5971c32eba891d14e5027a7c756 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
+<style src="@wangeditor/editor/dist/css/style.css"></style>
diff --git a/src/directive/index.ts b/src/directive/index.ts
index 984b401602f542242d506752d708df726af8c00a..9c22eb69f123730bfb405a6e74c88ee538ea0dea 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 7b278b7bd01f9cedeeb8bd48ef52e0b7c6842a1a..2bd2c7054f514cf74c2776fa39de656c97213584 100644
--- a/src/directive/permission/index.ts
+++ b/src/directive/permission/index.ts
@@ -1,55 +1,55 @@
-import useStore from "@/store";
+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().user;
+    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().user;
+      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 0000000000000000000000000000000000000000..65e591db0a1c8cd5c4a0bf91244de20d10cbc252
--- /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/lang/en.ts b/src/lang/en.ts
deleted file mode 100644
index 535a45ba882e28ef5df6b7e1cd97c143bfad5d76..0000000000000000000000000000000000000000
--- 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 b56f979db6c0f5966bb9e70b5badabf2a4c1dceb..18c0231690481f1204637dabde7b2f9fab04bedf 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -1,46 +1,25 @@
-
-// 自定义国际化配置
-import {createI18n} from 'vue-i18n'
-import {localStorage} from '@/utils/storage'
-
+import { createI18n } from "vue-i18n";
+import { useAppStore } from "@/store/modules/app";
 // 本地语言包
-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
-    }
-}
+const appStore = useAppStore();
 
-/**
- * 获取当前系统使用语言字符串
- * 
- * @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'
-}
+const messages = {
+  "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 0000000000000000000000000000000000000000..a154742bf3b2baba177d04734fe5a28110e8d761
--- /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 0000000000000000000000000000000000000000..e3bb63a13ab6fb8d1c532cddb69cd65ce76445bc
--- /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 f0b0017e413c87c7500e977ed41696d8b3a47226..0000000000000000000000000000000000000000
--- 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 b5ec9bc2729361cda94bf602ce124784be203bc4..14a64e9e86aa454e1ee9e0d8dbec56067e826339 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,36 +1,34 @@
+<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 {
-  padding-top: 50px;
+  padding-top: 34px;
 }
 
 .hasTagsView {
@@ -40,16 +38,35 @@ 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;
+.isMix {
+  .app-main {
+    height: calc(100vh - 50px);
+    overflow-y: auto;
+  }
+
+  .hasTagsView {
+    .app-main {
+      /* 84 = navbar + tags-view = 50 + 34 */
+      height: calc(100vh - 84px);
+    }
+
+    .fixed-header + .app-main {
+      min-height: calc(100vh - 50px);
+      padding-top: 34px;
+    }
+  }
+}
+
+.isTop {
+  .hasTagsView {
+    .fixed-header + .app-main {
+      padding-top: 34px;
+    }
   }
 }
 </style>
diff --git a/src/layout/components/NavBar/NavRight.vue b/src/layout/components/NavBar/NavRight.vue
new file mode 100644
index 0000000000000000000000000000000000000000..63cb1aa8b39446aeec490ccfd0717f147a64f284
--- /dev/null
+++ b/src/layout/components/NavBar/NavRight.vue
@@ -0,0 +1,120 @@
+<template>
+  <!-- 导航栏设置(窄屏隐藏)-->
+  <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 class="setting-item" />
+    </el-tooltip>
+    <!--语言选择-->
+    <lang-select class="setting-item" />
+  </div>
+
+  <!-- 用户头像 -->
+  <el-dropdown trigger="click">
+    <div class="avatar-container">
+      <img :src="userStore.user.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/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://juejin.cn/post/7228990409909108793">
+          <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
+        </a>
+        <el-dropdown-item divided @click="logout">
+          {{ $t("navbar.logout") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<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-窄屏设备
+
+/**
+ * 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>
+<style lang="scss" scoped>
+.setting-container {
+  display: flex;
+  align-items: center;
+
+  .setting-item {
+    display: inline-block;
+    width: 30px;
+    height: 50px;
+    line-height: 50px;
+    color: var(--el-text-color-regular);
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--el-color-info-light-3);
+    }
+  }
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  margin: 0 5px;
+  cursor: pointer;
+
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 5px;
+  }
+}
+</style>
diff --git a/src/layout/components/NavBar/index.vue b/src/layout/components/NavBar/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e935d450581faf5dfe36e772e2d54b19a73b3d6c
--- /dev/null
+++ b/src/layout/components/NavBar/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useAppStore } from "@/store/modules/app";
+
+const appStore = useAppStore();
+
+/**
+ * 左侧菜单栏显示/隐藏
+ */
+function toggleSideBar() {
+  appStore.toggleSidebar();
+}
+</script>
+
+<template>
+  <!-- 顶部导航栏 -->
+  <div class="navbar">
+    <!-- 左侧面包屑 -->
+    <div class="flex">
+      <hamburger
+        :is-active="appStore.sidebar.opened"
+        @toggle-click="toggleSideBar"
+      />
+      <breadcrumb />
+    </div>
+
+    <!-- 右侧导航设置 -->
+    <div class="flex">
+      <NavRight />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  background-color: #fff;
+  box-shadow: 0 0 1px #0003;
+}
+</style>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
deleted file mode 100644
index 3e4780db70af560d916e758148ee3a634d192aaf..0000000000000000000000000000000000000000
--- a/src/layout/components/Navbar.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<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="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" />
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </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" />
-        </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">
-              <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/">
-              <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
-            </a>
-            <el-dropdown-item divided @click="logout">
-              {{ $t("navbar.logout") }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </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 {
-  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;
-  }
-
-  .right-menu {
-    float: right;
-    height: 100%;
-    line-height: 50px;
-
-    &:focus {
-      outline: none;
-    }
-
-    .right-menu-item {
-      display: inline-block;
-      padding: 0 8px;
-      height: 100%;
-      font-size: 18px;
-      color: #5a5e66;
-      vertical-align: text-bottom;
-
-      &.hover-effect {
-        cursor: pointer;
-        transition: background 0.3s;
-
-        &:hover {
-          background: rgba(0, 0, 0, 0.025);
-        }
-      }
-    }
-
-    .avatar-container {
-      margin-right: 30px;
-
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
-
-        .user-avatar {
-          cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 5e5f5588c2d961c58a2b1d739f3b07a562c679d5..8a0dd2cf086330aef303538e3a5a451e09d9b2b3 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -1,103 +1,260 @@
+<script setup lang="ts">
+import { useSettingsStore } from "@/store/modules/settings";
+import { usePermissionStore } from "@/store/modules/permission";
+import { useAppStore } from "@/store/modules/app";
+import IconEpSunny from "~icons/ep/sunny";
+import IconEpMoon from "~icons/ep/moon";
+import { useRoute } from "vue-router";
+import defaultSettings from "@/settings";
+
+const route = useRoute();
+
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const appStore = useAppStore();
+
+const isDark = useDark();
+const toggleDark = () => useToggle(isDark);
+
+function findOutermostParent(tree: any[], findName: string) {
+  let parentMap: any = {};
+
+  function buildParentMap(node: any, parent: any) {
+    parentMap[node.name] = parent;
+
+    if (node.children) {
+      for (let i = 0; i < node.children.length; i++) {
+        buildParentMap(node.children[i], node);
+      }
+    }
+  }
+
+  for (let i = 0; i < tree.length; i++) {
+    buildParentMap(tree[i], null);
+  }
+
+  let currentNode = parentMap[findName];
+  while (currentNode) {
+    if (!parentMap[currentNode.name]) {
+      return currentNode;
+    }
+    currentNode = parentMap[currentNode.name];
+  }
+
+  return null;
+}
+const againActiveTop = (newVal: string) => {
+  const parent = findOutermostParent(permissionStore.routes, newVal);
+  if (appStore.activeTopMenu !== parent.path) {
+    appStore.changeTopActive(parent.path);
+  }
+};
+
+/**
+ * 切换布局
+ */
+function changeLayout(layout: string) {
+  settingsStore.changeSetting({ key: "layout", value: layout });
+  window.document.body.setAttribute("layout", settingsStore.layout);
+  if (layout === "mix") {
+    route.name && againActiveTop(route.name as string);
+  }
+}
+
+// 主题颜色
+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: "themeColor", value: color });
+}
+
+const currentThemeColor = computed(() => {
+  return settingsStore.themeColor;
+});
+onMounted(() => {
+  window.document.body.setAttribute("layout", settingsStore.layout);
+  const theme =
+    localStorage.getItem("vueuse-color-scheme") || defaultSettings.theme;
+  localStorage.setItem("vueuse-color-scheme", theme);
+  document.documentElement.style.setProperty(
+    "--el-color-primary",
+    settingsStore.themeColor
+  );
+});
+</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>
-  </div>
-</template>
 
-<script setup lang="ts">
-import { reactive, toRefs, watch } from "vue";
+    <el-divider>主题颜色</el-divider>
 
-import ThemePicker from "@/components/ThemePicker/index.vue";
+    <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 theme-wrap"
+        :style="{ background: color }"
+        @click="changeThemeColor(color)"
+      >
+        <i-ep-check v-show="color === currentThemeColor" />
+      </li>
+    </ul>
 
-import useStore from "@/store";
+    <el-divider>导航设置</el-divider>
 
-const { setting } = useStore();
+    <ul class="layout">
+      <el-tooltip content="左侧模式" placement="bottom">
+        <li
+          :class="
+            'layout-item layout-left ' +
+            (settingsStore.layout === 'left' ? 'is-active' : '')
+          "
+          @click="changeLayout('left')"
+        >
+          <div></div>
+          <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>
+          <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>
+          <div></div>
+        </li>
+      </el-tooltip>
+    </ul>
+  </div>
+</template>
 
-const state = reactive({
-  fixedHeader: setting.fixedHeader,
-  tagsView: setting.tagsView,
-  sidebarLogo: setting.sidebarLogo,
-});
+<style lang="scss" scoped>
+.settings-container {
+  padding: 16px;
 
-const { fixedHeader, tagsView, sidebarLogo } = toRefs(state);
+  .layout {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    width: 100%;
+    height: 50px;
 
-function themeChange(val: any) {
-  setting.changeSetting({ key: "theme", value: val });
-}
+    &-item {
+      position: relative;
+      width: 18%;
+      height: 45px;
+      overflow: hidden;
+      cursor: pointer;
+      background: #f0f2f5;
+      border-radius: 4px;
+    }
 
-watch(
-  () => state.fixedHeader,
-  (value) => {
-    setting.changeSetting({ key: "fixedHeader", value: value });
-  }
-);
+    &-item.is-active {
+      border: 2px solid var(--el-color-primary);
+    }
 
-watch(
-  () => state.tagsView,
-  (value) => {
-    setting.changeSetting({ key: "tagsView", value: value });
-  }
-);
+    &-mix div:nth-child(1) {
+      width: 100%;
+      height: 30%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
+    }
 
-watch(
-  () => state.sidebarLogo,
-  (value) => {
-    setting.changeSetting({ key: "sidebarLogo", value: value });
-  }
-);
-</script>
+    &-mix div:nth-child(2) {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 30%;
+      height: 70%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
+    }
 
-<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;
-  }
+    &-top div:nth-child(1) {
+      width: 100%;
+      height: 30%;
+      background: #1b2a47;
+      box-shadow: 0 0 1px #888;
+    }
 
-  .drawer-item {
-    color: rgba(0, 0, 0, 0.65);
-    font-size: 14px;
-    padding: 12px 0;
-  }
+    &-left div:nth-child(1) {
+      width: 30%;
+      height: 100%;
+      background: #1b2a47;
+    }
 
-  .drawer-switch {
-    float: right;
+    &-left div:nth-child(2) {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 70%;
+      height: 30%;
+      background: #fff;
+      box-shadow: 0 0 1px #888;
+    }
   }
 
-  .job-link {
-    display: block;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 0;
+  .theme-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
   }
 }
 </style>
diff --git a/src/layout/components/Sidebar/LeftMenu.vue b/src/layout/components/Sidebar/LeftMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..16d132829262ed562c154de9926627f60f535fc3
--- /dev/null
+++ b/src/layout/components/Sidebar/LeftMenu.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { useRoute } from "vue-router";
+import SidebarItem from "./SidebarItem.vue";
+import { useSettingsStore } from "@/store/modules/settings";
+import { useAppStore } from "@/store/modules/app";
+import variables from "@/styles/variables.module.scss";
+
+import path from "path-browserify";
+import { isExternal } from "@/utils/index";
+
+const settingsStore = useSettingsStore();
+const appStore = useAppStore();
+const currRoute = useRoute();
+const layout = computed(() => settingsStore.layout);
+const props = defineProps({
+  menuList: {
+    required: true,
+    default: () => {
+      return [];
+    },
+    type: Array<any>,
+  },
+  basePath: {
+    type: String,
+    required: true,
+  },
+});
+
+/**
+ * 解析路径
+ *
+ * @param routePath 路由路径
+ */
+function resolvePath(routePath: string) {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath;
+  }
+
+  // 完整路径 = 父级路径(/level/level_3) + 路由路径
+  const fullPath = path.resolve(props.basePath, routePath); // 相对路径 → 绝对路径
+  return fullPath;
+}
+</script>
+<template>
+  <el-menu
+    :default-active="layout === 'top' ? '-' : 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="layout === 'top' ? 'horizontal' : 'vertical'"
+  >
+    <sidebar-item
+      v-for="route in menuList"
+      :key="route.path"
+      :item="route"
+      :base-path="resolvePath(route.path)"
+      :is-collapse="!appStore.sidebar.opened"
+    />
+  </el-menu>
+</template>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index 0254b59a8d1a8856872583f84c3fa8e5e294e212..fb1516dab3efaabc7f791c15334c01884989292f 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -1,53 +1,38 @@
-<template>
-  <a
-      v-if="isExternal(to)"
-      :href="to"
-      target="_blank"
-      rel="noopener"
-  >
-    <slot />
-  </a>
-  <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'
+<script lang="ts" setup>
+import { computed } from "vue";
+import { isExternal } from "@/utils/index";
+import { useRouter } from "vue-router";
 
-import useStore from "@/store";
+import { useAppStore } from "@/store/modules/app";
 
-const {app}=useStore()
+const appStore = useAppStore();
 
-const sidebar = computed(() => app.sidebar);
-const device = computed(() => app.device);
+const sidebar = computed(() => appStore.sidebar);
+const device = computed(() => appStore.device);
 
-export default defineComponent({
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
+const props = defineProps({
+  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
-    }
+});
+
+const router = useRouter();
+function push() {
+  if (device.value === "mobile" && sidebar.value.opened == true) {
+    appStore.closeSideBar(false);
   }
-})
-</script>
\ No newline at end of file
+  router.push(props.to).catch((err) => {
+    console.error(err);
+  });
+}
+</script>
+
+<template>
+  <a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
+    <slot></slot>
+  </a>
+  <div v-else @click="push">
+    <slot></slot>
+  </div>
+</template>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index b22edb9517e16bd5c4a3de2f569e996123d8320e..96a3c57e86192fc03f56cffe5773b14810b90cb8 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,77 +1,58 @@
+<script lang="ts" setup>
+import { useSettingsStore } from "@/store/modules/settings";
+
+const settingsStore = useSettingsStore();
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const layout = computed(() => settingsStore.layout);
+
+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)] logo-wrap"
+  >
     <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" />
       </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 2e48bb45758bc66a25e23aee509129877802fa89..84ead3fbd4b85422dbc4e1c213712cdcbabb1690 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,102 +1,133 @@
-<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 SvgIcon from '@/components/SvgIcon/index.vue';
+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
+    required: true,
   },
+
+  /**
+   * 父层级完整路由路径(eg:/level/level_3/level_3_1)
+   */
   basePath: {
     type: String,
-    required: true
-  }
-})
+    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 false
-};
+    return true;
+  }
+  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
+            :icon-class="
+              onlyOneChild.meta && onlyOneChild.meta.icon
+                ? onlyOneChild.meta.icon
+                : 'menu'
+            "
+          />
 
-<style lang="scss" scoped>
+          <template #title>
+            {{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
+          </template>
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <!-- 包含多个子路由  -->
+    <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>
+
+      <sidebar-item
+        v-for="child in item.children"
+        :key="child.path"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+      />
+    </el-sub-menu>
+  </div>
+</template>
 
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+:deep(.el-menu-item .el-menu-tooltip__trigger) {
+  width: auto !important;
+}
+</style>
diff --git a/src/layout/components/Sidebar/TopMenu.vue b/src/layout/components/Sidebar/TopMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..39c68628db18c811a1fc39564b7c8255be1f99e6
--- /dev/null
+++ b/src/layout/components/Sidebar/TopMenu.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { usePermissionStore } from "@/store/modules/permission";
+import variables from "@/styles/variables.module.scss";
+import { useAppStore } from "@/store/modules/app";
+import { translateRouteTitleI18n } from "@/utils/i18n";
+import { useRouter } from "vue-router";
+const appStore = useAppStore();
+const activePath = computed(() => appStore.activeTopMenu);
+const router = useRouter();
+// 递归跳转
+const goFirst = (menu: any[]) => {
+  if (!menu.length) return;
+  const [first] = menu;
+  if (first.children) {
+    goFirst(first.children);
+  } else {
+    router.push({
+      name: first.name,
+    });
+  }
+};
+const selectMenu = (index: string) => {
+  appStore.changeTopActive(index);
+  permissionStore.getMixLeftMenu(index);
+  const { mixLeftMenu } = permissionStore;
+  goFirst(mixLeftMenu);
+};
+const permissionStore = usePermissionStore();
+const topMenu = ref<any[]>([]);
+onMounted(() => {
+  topMenu.value = permissionStore.routes.filter(
+    (item) => !item.meta || !item.meta.hidden
+  );
+});
+</script>
+<template>
+  <el-scrollbar>
+    <el-menu
+      mode="horizontal"
+      :default-active="activePath"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
+      @select="selectMenu"
+    >
+      <el-menu-item
+        v-for="route in topMenu"
+        :key="route.path"
+        :index="route.path"
+      >
+        <template #title>
+          <svg-icon
+            v-if="route.meta && route.meta.icon"
+            :icon-class="route.meta.icon"
+          />
+          <span v-if="route.path === '/'"> 首页 </span>
+          <template v-else>
+            <span v-if="route.meta && route.meta.title">
+              {{ translateRouteTitleI18n(route.meta.title) }}
+            </span>
+          </template>
+        </template>
+      </el-menu-item>
+      <!-- <sidebar-item
+        v-for="route in topMenu"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+        :is-collapse="false"
+      /> -->
+    </el-menu>
+  </el-scrollbar>
+</template>
+<style lang="scss" scoped>
+.el-menu {
+  height: 50px !important;
+}
+</style>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 5609acb78cf70491176262705c42968042e61881..08206d0a831ed6bb592d0e26c807ce7b0d2767e3 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -1,51 +1,111 @@
+<script setup lang="ts">
+import TopMenu from "./TopMenu.vue";
+import LeftMenu from "./LeftMenu.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";
+
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const appStore = useAppStore();
+const { sidebarLogo } = storeToRefs(settingsStore);
+const layout = computed(() => settingsStore.layout);
+const showContent = ref(true);
+watch(
+  () => layout.value,
+  () => {
+    showContent.value = false;
+    nextTick(() => {
+      showContent.value = true;
+    });
+  }
+);
+</script>
+
 <template>
-  <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse"/>
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <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">
-        <sidebar-item
-            v-for="route in routes"
-            :item="route"
-            :key="route.path"
-            :base-path="route.path"
-            :is-collapse="isCollapse"
-        />
-      </el-menu>
+  <div
+    :class="{ 'has-logo': sidebarLogo }"
+    class="menu-wrap"
+    v-if="layout !== 'mix'"
+  >
+    <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+    <el-scrollbar v-if="showContent">
+      <LeftMenu :menu-list="permissionStore.routes" base-path="" />
     </el-scrollbar>
+    <NavRight v-if="layout === 'top'" />
   </div>
+  <template v-else>
+    <div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
+      <div class="header">
+        <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
+        <TopMenu />
+        <NavRight />
+      </div>
+    </div>
+  </template>
 </template>
+<style lang="scss" scoped>
+:deep(.setting-container) {
+  .setting-item {
+    color: #fff;
 
-<script setup lang="ts">
+    .svg-icon {
+      margin-right: 0;
+    }
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+.isMix {
+  .menu-wrap {
+    z-index: 99;
+    width: 100% !important;
+    height: 50px;
+    background-color: $menuBg;
 
-import {computed, defineComponent} from "vue";
-import {useRoute} from 'vue-router'
+    :deep(.header) {
+      display: flex;
+      width: 100%;
+      // 顶部模式全局变量修改
+      --el-menu-item-height: 50px;
 
-import SidebarItem from './SidebarItem.vue'
-import Logo from './Logo.vue'
-import variables from '@/styles/variables.module.scss'
-import useStore from "@/store";
+      .logo-wrap {
+        width: $sideBarWidth;
+      }
 
-const {permission,setting,app} =useStore();
+      .el-menu {
+        background-color: $menuBg;
 
-const route =useRoute()
-const routes =computed(() => permission.routes)
-const showLogo = computed(() => setting.sidebarLogo)
-const isCollapse = computed(() => !app.sidebar.opened)
+        .el-menu-item {
+          color: $menuText;
+        }
+      }
 
-const activeMenu = computed(() => {
-  const {meta, path} = route
-  // if set path, the sidebar will highlight the path you set
-  if (meta.activeMenu) {
-    return meta.activeMenu
+      .el-scrollbar {
+        flex: 1;
+        min-width: 0;
+        height: 50px;
+      }
+    }
   }
-  return path
-})
-</script>
+
+  .left-menu {
+    display: inline-block;
+    width: $sideBarWidth;
+    background-color: $menuBg;
+
+    :deep(.el-menu) {
+      background-color: $menuBg;
+
+      .el-menu-item {
+        color: $menuText;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 44207c1e046831933107fe587b76f9768bca5c88..cc0bb130b39e1ac0d1ebbbe481b4ec1c8737477e 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></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 f59b966def646c29a3d307294136ed7380e4c6ef..1cd4fa9d28edfea2a337ac1a44b0caa587352044 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,122 +1,60 @@
-<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" >
-import {
-  computed,
-  getCurrentInstance,
-  nextTick,
-  ref,
-  watch,
-  onMounted,
-ComponentInternalInstance,
-} from "vue";
+<script setup lang="ts">
+import { getCurrentInstance, 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 { useSettingsStore } from "@/store/modules/settings";
+import { useAppStore } from "@/store/modules/app";
 
 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 appStore = useAppStore();
+
+const { visitedViews } = storeToRefs(tagsViewStore);
+const settingsStore = useSettingsStore();
+const layout = computed(() => settingsStore.layout);
 
-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 +79,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);
         }
       }
     }
@@ -187,9 +120,9 @@ function isAffix(tag: TagView) {
 function isFirstView() {
   try {
     return (
+      (selectedTag.value as TagView).fullPath === "/dashboard" ||
       (selectedTag.value as TagView).fullPath ===
-        visitedViews.value[1].fullPath ||
-      (selectedTag.value as TagView).fullPath === "/index"
+        tagsViewStore.visitedViews[1].fullPath
     );
   } catch (err) {
     return false;
@@ -200,7 +133,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 +141,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 +167,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 +175,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 +184,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 +194,21 @@ 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;
+
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
   const maxLeft = offsetWidth - menuMinWidth; // left boundary
@@ -288,127 +220,202 @@ function openMenu(tag: TagView, e: MouseEvent) {
     left.value = l;
   }
 
-  top.value = e.clientY;
-  visible.value = true;
+  // 混合模式下，需要减去顶部菜单(fixed)的高度
+  if (layout.value === "mix") {
+    top.value = e.clientY - 50;
+  } else {
+    top.value = e.clientY;
+  }
+
+  tagMenuVisible.value = true;
   selectedTag.value = tag;
 }
 
-function closeMenu() {
-  visible.value = false;
+function closeTagMenu() {
+  tagMenuVisible.value = false;
 }
 
 function handleScroll() {
-  closeMenu();
+  closeTagMenu();
 }
+function findOutermostParent(tree: any[], findName: string) {
+  let parentMap: any = {};
+
+  function buildParentMap(node: any, parent: any) {
+    parentMap[node.name] = parent;
+
+    if (node.children) {
+      for (let i = 0; i < node.children.length; i++) {
+        buildParentMap(node.children[i], node);
+      }
+    }
+  }
+
+  for (let i = 0; i < tree.length; i++) {
+    buildParentMap(tree[i], null);
+  }
+
+  let currentNode = parentMap[findName];
+  while (currentNode) {
+    if (!parentMap[currentNode.name]) {
+      return currentNode;
+    }
+    currentNode = parentMap[currentNode.name];
+  }
 
+  return null;
+}
+const againActiveTop = (newVal: string) => {
+  if (layout.value !== "mix") return;
+  const parent = findOutermostParent(permissionStore.routes, newVal);
+  if (appStore.activeTopMenu !== parent.path) {
+    appStore.changeTopActive(parent.path);
+  }
+};
+// 如果是混合模式，更改selectedTag，需要对应高亮的activeTop
+watch(
+  () => route.name,
+  (newVal) => {
+    if (newVal) {
+      againActiveTop(newVal as string);
+    }
+  },
+  {
+    deep: true,
+  }
+);
 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 6fea3b874d6f6df5d421770d62030bf813f9aef2..616c59b0373d1648ec805a975fba5f39ca8741df 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/index.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 54f727f8d903a972b7acb532b668d1f3efd02d03..63417ecd910394a050275ae3e59be6f892ae48cf 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,74 +1,122 @@
-<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 Main from "./main.vue";
 import { computed, watchEffect } from "vue";
 import { useWindowSize } from "@vueuse/core";
-import { AppMain, Navbar, Settings, TagsView } from "./components/index";
 import Sidebar from "./components/Sidebar/index.vue";
-import RightPanel from "@/components/RightPanel/index.vue";
+import LeftMenu from "./components/Sidebar/LeftMenu.vue";
 
-import useStore from "@/store";
-
-const { width, height } = useWindowSize();
+import { useAppStore } from "@/store/modules/app";
+import { useSettingsStore } from "@/store/modules/settings";
+import { usePermissionStore } from "@/store/modules/permission";
+const permissionStore = usePermissionStore();
+const { width } = 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 activeTopMenu = computed(() => {
+  return appStore.activeTopMenu;
+});
+// 混合模式左侧菜单
+const mixLeftMenu = computed(() => {
+  return permissionStore.mixLeftMenu;
+});
+const layout = computed(() => settingsStore.layout);
+watch(
+  () => activeTopMenu.value,
+  (newVal) => {
+    if (layout.value !== "mix") return;
+    permissionStore.getMixLeftMenu(newVal);
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 
 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",
+  isTop: layout.value === "top",
+  isMix: layout.value === "mix",
 }));
 
 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);
+}
+
+function toggleSideBar() {
+  appStore.toggleSidebar();
 }
 </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" />
+    <template v-if="layout === 'mix'">
+      <div class="mix-wrap">
+        <!-- :menu-list="mixLeftMenu -->
+        <!-- :menu-list="permissionStore.routes -->
+        <div class="left-wrap">
+          <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
+          <div class="menu-action">
+            <hamburger
+              :is-active="appStore.sidebar.opened"
+              @toggle-click="toggleSideBar"
+            />
+          </div>
+        </div>
+        <Main />
+      </div>
+    </template>
+    <Main v-else />
+  </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;
@@ -77,29 +125,107 @@ function handleClickOutside() {
 }
 
 .drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
   position: absolute;
+  top: 0;
   z-index: 999;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.3;
 }
+// 导航栏顶部显示
+.isTop {
+  .sidebar-container {
+    z-index: 800;
+    display: flex;
+    width: 100% !important;
+    height: 50px;
 
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
-  transition: width 0.28s;
+    :deep(.logo-wrap) {
+      width: $sideBarWidth;
+    }
+
+    :deep(.el-scrollbar) {
+      flex: 1;
+      min-width: 0;
+      height: 50px;
+    }
+  }
+
+  .main-container {
+    padding-top: 50px;
+    margin-left: 0;
+  }
+
+  // 顶部模式全局变量修改
+  --el-menu-item-height: 50px;
+}
+
+.mobile.isTop {
+  :deep(.logo-wrap) {
+    width: 63px;
+  }
 }
 
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
+.isMix {
+  :deep(.main-container) {
+    display: inline-block;
+    width: calc(100% - #{$sideBarWidth});
+    margin-left: 0;
+  }
+
+  .mix-wrap {
+    display: flex;
+    height: 100%;
+    padding-top: 50px;
+
+    .left-wrap {
+      position: relative;
+      height: 100%;
+
+      .el-menu {
+        height: 100%;
+      }
+
+      .menu-action {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        box-shadow: 0 0 6px -2px var(--el-color-primary);
+
+        div:hover {
+          background-color: var(--menuBg);
+        }
+
+        :deep(svg) {
+          color: #409eff !important;
+        }
+      }
+    }
+
+    .main-container {
+      flex: 1;
+      min-width: 0;
+    }
+  }
 }
 
-.mobile .fixed-header {
-  width: 100%;
+.openSidebar {
+  .mix-wrap {
+    .left-wrap {
+      width: $sideBarWidth;
+    }
+
+    :deep(.svg-icon) {
+      margin-top: -1px;
+      margin-right: 5px;
+    }
+
+    .el-menu {
+      border: none;
+    }
+  }
 }
 </style>
diff --git a/src/layout/main.vue b/src/layout/main.vue
new file mode 100644
index 0000000000000000000000000000000000000000..21b4918ba93e1c83fe364319d4bc57b93d2cb2d8
--- /dev/null
+++ b/src/layout/main.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { computed, watchEffect } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { AppMain, Navbar, Settings, TagsView } from "./components/index";
+import RightPanel from "@/components/RightPanel/index.vue";
+
+import { useAppStore } from "@/store/modules/app";
+import { useSettingsStore } from "@/store/modules/settings";
+const { width } = useWindowSize();
+
+/**
+ * 响应式布局容器固定宽度
+ *
+ * 大屏（>=1200px）
+ * 中屏（>=992px）
+ * 小屏（>=768px）
+ */
+const WIDTH = 992;
+
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+
+const fixedHeader = computed(() => settingsStore.fixedHeader);
+const showTagsView = computed(() => settingsStore.tagsView);
+const showSettings = computed(() => settingsStore.showSettings);
+const layout = computed(() => settingsStore.layout);
+
+watchEffect(() => {
+  if (width.value < WIDTH) {
+    appStore.toggleDevice("mobile");
+    appStore.closeSideBar(true);
+  } else {
+    appStore.toggleDevice("desktop");
+
+    if (width.value >= 1200) {
+      //大屏
+      appStore.openSideBar(true);
+    } else {
+      appStore.closeSideBar(true);
+    }
+  }
+});
+</script>
+<template>
+  <div :class="{ hasTagsView: showTagsView }" class="main-container">
+    <div :class="{ 'fixed-header': fixedHeader }">
+      <navbar v-if="layout === 'left'" />
+      <tags-view v-if="showTagsView" />
+    </div>
+    <!--主页面-->
+    <app-main />
+    <!-- 设置面板 -->
+    <RightPanel v-if="showSettings">
+      <settings />
+    </RightPanel>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.isTop .fixed-header {
+  width: 100% !important;
+}
+
+.isMix,
+.isTop {
+  .fixed-header {
+    top: 50px;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index e5c254a149e93eeaac35851d7c91a86410d6617c..3b57f7c4e9335a7ba318010e2c8231e28e9b7d7e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,43 +1,26 @@
-import {createApp, Directive} from 'vue'
-import App from './App.vue'
+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注册脚本
-import 'virtual:svg-icons-register';
+// 本地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";
-
-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 10ffbdee5ac6cd8aee4f2fe41a5ec3a495487c10..8512cb8ee2eb98383ea02965524d0c29c1b09183 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -1,56 +1,62 @@
 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.user.roles && userStore.user.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.resetStore();
+          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 730fbbef90b49153d7f26af2ac9fe74ee8f07285..02028beb0f02532a8fe54e0e2836f435e9fbfcf3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,64 +1,71 @@
-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: "/",
+    name: "/",
+    component: Layout,
+    redirect: "/dashboard",
+    children: [
+      {
+        path: "dashboard",
+        component: () => import("@/views/dashboard/index.vue"),
+        name: "Dashboard", // 用于 keep-alive, 必须与SFC自动推导或者显示声明的组件name一致
+        // https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude
+        meta: {
+          title: "dashboard",
+          icon: "homepage",
+          affix: true,
+          keepAlive: true,
+        },
+      },
+      {
+        path: "401",
+        component: () => import("@/views/error-page/401.vue"),
+        meta: { hidden: true },
+      },
+      {
+        path: "404",
+        component: () => import("@/views/error-page/404.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: '/external-link',
-        component: Layout,
-        children: [
-            {
-                path: 'https://www.cnblogs.com/haoxianrui/',
-                meta: { title: '外部链接', icon: 'link' }
-            }
-        ]
-    }*/
-    // 多级嵌套路由
-    /* {
+  // 外部链接
+  // {
+  //   path: "/external-link",
+  //   component: Layout,
+  //   children: [ {
+  //       component: () => import("@/views/external-link/index.vue"),
+  //       path: "https://www.cnblogs.com/haoxianrui/",
+  //       meta: { title: "外部链接", icon: "link" },
+  //     },
+  //   ],
+  // },
+  // 多级嵌套路由
+  /* {
          path: '/nested',
          component: Layout,
          redirect: '/nested/level1/level2',
@@ -97,25 +104,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 cbff21f2a38bddab386b967431fe0ac900878a50..a575395ef6c9c8058898983dbc8162c11377b6d9 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,21 +1,63 @@
+/**
+ * 系统设置
+ */
 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;
+  /**
+   * 导航栏布局(left|top|mix)
+   */
+  layout: string;
+  /**
+   * 主题模式(dark|light)
+   */
+  theme: string;
 
+  /**
+   * 布局大小(default |large |small)
+   */
+  size: string;
 
-const defaultSettings: DefaultSettings = {
-    title: 'vue3-element-admin',
-    showSettings: true,
-    tagsView: true,
-    fixedHeader: false,
-    // 是否显示Logo
-    sidebarLogo: true,
-    errorLog: 'production'
+  /**
+   * 语言( zh-cn| en)
+   */
+  language: string;
+
+  /**
+   * 主题颜色
+   */
+  themeColor: 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", // 默认左侧模式
+  theme: "light", // 默认暗黑模式
+  size: "default",
+  language: "zh-cn",
+  themeColor: "#409EFF",
+};
+
+export default defaultSettings;
diff --git a/src/store/index.ts b/src/store/index.ts
index 184ebbdc0fb8a31176a774ef715d3bd90ab63e6c..e22b67c4e657d0d3b62d4c22418e772e3eae0db2 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 c4f532073976b1f1435afb1ced25fe4f2ed03b05..e2e8235624d299ef5b5dce2e9ed497a1c8961a97 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,46 +1,93 @@
-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 activeTopMenu = useStorage("activeTop", "");
+  /**
+   * 根据语言标识读取对应的语言包
+   */
+  const locale = computed(() => {
+    if (language?.value == "en") {
+      return en;
+    } else {
+      return zhCn;
     }
-})
+  });
+
+  // actions
+  function toggleSidebar() {
+    sidebar.opened = !sidebar.opened;
+    sidebar.withoutAnimation = false;
+    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;
+  }
 
-export default useAppStore;
\ No newline at end of file
+  function changeSize(val: string) {
+    size.value = val;
+  }
+  /**
+   * 切换语言
+   *
+   * @param val
+   */
+  function changeLanguage(val: string) {
+    language.value = val;
+  }
+  /**
+   * 混合模式顶部切换
+   */
+  function changeTopActive(val: string) {
+    activeTopMenu.value = val;
+  }
+  return {
+    device,
+    sidebar,
+    language,
+    locale,
+    size,
+    activeTopMenu,
+    toggleDevice,
+    changeSize,
+    changeLanguage,
+    toggleSidebar,
+    closeSideBar,
+    openSideBar,
+    changeTopActive,
+  };
+});
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 2a4ece30a674a9635867090641be9ec1ee666dbd..4ccc73fb4764609bddce0701f5fc6da1feac71cb 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,76 +1,119 @@
-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 (!route.name) {
+      tmpRoute.name = route.path;
+    }
+    // 判断用户(角色)是否有该路由的访问权限
+    if (hasPermission(roles, tmpRoute)) {
+      if (tmpRoute.component?.toString() == "Layout") {
+        tmpRoute.component = Layout;
+      } 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);
+        });
+    });
+  }
+
+  /**
+   * 混合模式左侧菜单
+   */
+  const mixLeftMenu = ref<RouteRecordRaw[]>([]);
+  function getMixLeftMenu(activeTop: string) {
+    routes.value.forEach((item) => {
+      if (item.path === activeTop) {
+        mixLeftMenu.value = item.children || [];
+      }
+    });
+  }
+  return { routes, setRoutes, generateRoutes, getMixLeftMenu, mixLeftMenu };
+});
+
+// 非setup
+export function usePermissionStoreHook() {
+  return usePermissionStore(store);
+}
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 069c75ca2f9fd86389b84cf13432a5870205cbea..04af061dccf78fb7a9e423d736d825c67e47be54 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -1,45 +1,55 @@
 import { defineStore } from "pinia";
-import { SettingState } from "@/types";
-import defaultSettings from '../../settings'
-import { localStorage } from "@/utils/storage";
+import defaultSettings from "@/settings";
 
-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 sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);
+
+  const fixedHeader = useStorage<boolean>(
+    "fixedHeader",
+    defaultSettings.fixedHeader
+  );
+
+  const layout = useStorage<string>("layout", defaultSettings.layout);
+  const themeColor = useStorage<string>(
+    "themeColor",
+    defaultSettings.themeColor
+  );
+  // 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;
+      case "themeColor":
+        themeColor.value = value;
+        break;
     }
-})
+  }
 
-export default useSettingStore;
+  return {
+    showSettings,
+    tagsView,
+    fixedHeader,
+    sidebarLogo,
+    layout,
+    themeColor,
+    changeSetting,
+  };
+});
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index d40849ccf6eb063e645eeb72f3228d3ed68ad66b..971e6a748054e72cb735c947abc784ff7ee6b693 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 4b5f9556b584068dc96095a934437d339e3c0dd2..d3284879457869ab1610cc5b645774a033ababef 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -1,105 +1,97 @@
 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", () => {
+  const user: UserInfo = {
+    roles: [],
+    perms: [],
+  };
+
+  const token = useStorage("accessToken", "");
+
+  /**
+   * 登录
+   *
+   * @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) {
+            reject("Verification failed, please Login again.");
+            return;
+          }
+          if (!data.roles || data.roles.length <= 0) {
+            reject("getUserInfo: roles must be a non-null array!");
+            return;
+          }
+          Object.assign(user, { ...data });
+          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(() => {
+          resetStore();
+          location.reload(); // 清空路由
+          resolve();
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
 
-        /**
-         * 清除 Token
-         */
-        resetToken() {
-            return new Promise(resolve => {
-                localStorage.remove('token')
-                this.RESET_STATE()
-                resolve(null)
-            })
-        }
-    }
-})
+  /** 清空缓存 */
+  function resetStore() {
+    resetRouter();
+    token.value = "";
+    Object.assign(user, { roles: [], perms: [] });
+  }
+  return {
+    token,
+    user,
+    login,
+    getInfo,
+    logout,
+    resetStore,
+  };
+});
 
-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 0000000000000000000000000000000000000000..fb548a2f1f9d9dac7b4647d51e3662fd47577327
--- /dev/null
+++ b/src/styles/dark.scss
@@ -0,0 +1,47 @@
+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: rgb(var(--el-color-primary-rgb) 0.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);
+  }
+
+  .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 a6ca2a9b6961d14c461b0e60db0e2acd3a02471f..0000000000000000000000000000000000000000
--- 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 2fe9a2b56884c16523ccb5b69fdd5e98c3d619c0..0000000000000000000000000000000000000000
--- 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 1416e9dcb4d99830fa11b902113d8b408dac3859..6b635af27ae4685c802c08ef1547703ced65b4f1 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,67 +1,26 @@
-@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;
+.app-container {
+  padding: 10px;
 }
 
-a:focus,
-a:active {
-  outline: none;
+.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);
 }
 
-a,
-a:focus,
-a:hover {
+.link-type,
+.link-type:focus {
+  color: #337ab7;
   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;
+  &:hover {
+    color: rgb(32 160 255);
   }
 }
-
-// main-container global css
-.app-container {
-  padding: 20px;
-}
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
deleted file mode 100644
index 36b74bbd995e7cc5c6baab1ce6808ecfda8c27ae..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..9b19e4c45e7979f46fe8f577ff94603305f4bdaa
--- /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 b53e82c065eb3eca65d638ab33fa6b3b1bba1244..9faa59d9cc5ce2691a783df768a65907aaafe0ce 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,27 +1,27 @@
-#app {
+.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,14 +46,8 @@
       display: none;
     }
 
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
-
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 12px;
     }
 
     .sub-el-icon {
@@ -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;
@@ -91,10 +84,18 @@
   }
 
   .hideSidebar {
+    .left-wrap {
+      width: 54px;
+    }
+
     .sidebar-container {
       width: 54px !important;
-      .svg-icon {
-        margin-right: 0px;
+
+      .header {
+        .logo-wrap {
+          width: 54px !important;
+          transition: transform 0.28s;
+        }
       }
     }
 
@@ -102,27 +103,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 +125,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,15 +145,15 @@
   // mobile responsive
   .mobile {
     .main-container {
-      margin-left: 0px;
+      margin-left: 0;
     }
 
     .sidebar-container {
-      transition: transform .28s;
       width: $sideBarWidth !important;
+      transition: transform 0.28s;
     }
 
-    &.hideSidebar {
+    &.hideSidebar:not(.isMix, .isTop) {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
@@ -179,7 +163,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -189,17 +172,18 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 12px;
     }
+
     .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 +192,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 4cb27cc811e28605bb6d0657a6257f0c901f6809..0000000000000000000000000000000000000000
--- 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 be5577263874f458b69364b492fd1dd6f26247fa..7feccc40271432279dddef90deedbc11faabfcea 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 {
+  menuBg: $menuBg;
   menuText: $menuText;
   menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dd36f4e044c1cbd5e3516efef9bd56095dfc8093
--- /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: rgb(var(--el-color-primary-rgb) 0.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 d934383c1334ac11590945e7080128584366c2dc..0000000000000000000000000000000000000000
--- 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 98432373b298ebfff17e6d7748142742046010f9..0000000000000000000000000000000000000000
--- 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 d9730cad639bfe780ec4975ba3a1b73ba337647c..0000000000000000000000000000000000000000
--- 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 39ef7501848decbd40fefb3f947a9e2436ff2ffa..0000000000000000000000000000000000000000
--- 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 1b23eb4507cb08a540db09a775f90246acb63ba9..0000000000000000000000000000000000000000
--- 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 efd4ca0c38970a4c7a61ffdb01390d5779a5f82c..0000000000000000000000000000000000000000
--- 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 ae0bf3e3b577d15b5a1056d852062883f596446d..0000000000000000000000000000000000000000
--- 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 e5b48e792338e22d10ad5bc63e2d0f38a91a7d71..0000000000000000000000000000000000000000
--- 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 bbc3a33c6daf0c53c86667ca8706334c6cc3eb17..0000000000000000000000000000000000000000
--- 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 ed97a24914cb11cb5f8b2df8f1ca2ee2e7df7e72..0000000000000000000000000000000000000000
--- 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 36d5da6f675735a700e29ade413e38cafb95d377..0000000000000000000000000000000000000000
--- 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 8585628ed900face16845f68ed8d4f351a9be100..0000000000000000000000000000000000000000
--- 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 337eef02f4000158fbc5b4c99c7c5e7de2801994..0000000000000000000000000000000000000000
--- 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 dc1ca6cea6bb82d4987c50e08cc884ba8765b58a..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..b191a3fda8007c0b7d6a2abeb22352c28010cf90
--- /dev/null
+++ b/src/types/auto-imports.d.ts
@@ -0,0 +1,1589 @@
+/* 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 ElNotification: typeof import("element-plus/es")["ElNotification"];
+  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 1aeff93f57f1b5aec93b1ae4444d5c4370073586..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..2d6a64852e51da91c7083430be0481f706cbdc04
--- /dev/null
+++ b/src/types/components.d.ts
@@ -0,0 +1,108 @@
+/* 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"];
+		Dictionary: typeof import("./../components/Dictionary/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"];
+		ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
+		ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
+		ElCol: typeof import("element-plus/es")["ElCol"];
+		ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
+		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"];
+		ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
+		ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
+		ElRate: typeof import("element-plus/es")["ElRate"];
+		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"];
+		ElTabPane: typeof import("element-plus/es")["ElTabPane"];
+		ElTabs: typeof import("element-plus/es")["ElTabs"];
+		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"];
+		FixedThead: typeof import("./../views/table/dynamic-table/components/FixedThead.vue")["default"];
+		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"];
+		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"];
+		SwitchRoles: typeof import("./../views/permission/components/SwitchRoles.vue")["default"];
+		TagInput: typeof import("./../components/TagInput/index.vue")["default"];
+		TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
+		UnfixedThead: typeof import("./../views/table/dynamic-table/components/UnfixedThead.vue")["default"];
+		WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
+	}
+	export interface ComponentCustomProperties {
+		vLoading: typeof import("element-plus/es")["ElLoadingDirective"];
+	}
+}
diff --git a/src/env.d.ts b/src/types/env.d.ts
similarity index 44%
rename from src/env.d.ts
rename to src/types/env.d.ts
index 272014dc806fa29c7893ed56693ee09403e0a9bf..d9cdd46b0fc130d8976b201a23868a370ef856e9 100644
--- a/src/env.d.ts
+++ b/src/types/env.d.ts
@@ -1,19 +1,21 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+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
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
 
 // 环境变量 TypeScript的智能提示
 interface ImportMetaEnv {
-    VITE_APP_TITLE: string,
-    VITE_APP_PORT: string,
-    VITE_APP_BASE_API: string
+  VITE_APP_TITLE: string;
+  VITE_APP_PORT: string;
+  VITE_APP_BASE_API: string;
 }
 
 interface ImportMeta {
-    readonly env: ImportMetaEnv
-}
\ No newline at end of file
+  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 0000000000000000000000000000000000000000..3555345de04397ac48eb88e207d43c842108b97b
--- /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: string | 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 c5840fada27553b94894bb406bc28977408d5c1b..0000000000000000000000000000000000000000
--- 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/shims-vue.d.ts b/src/types/shims-vue.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..abbc9312cec44ae07d3ebf700458e3934bd72e97
--- /dev/null
+++ b/src/types/shims-vue.d.ts
@@ -0,0 +1 @@
+declare module "xlsx/xlsx.mjs";
diff --git a/src/types/store.d.ts b/src/types/store.d.ts
deleted file mode 100644
index 5ac33d679f13d722546195703cefe9faf575c9af..0000000000000000000000000000000000000000
--- 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 b5c9871b1fe5b6b504735ac0c52916e3c0ee9700..0000000000000000000000000000000000000000
--- 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 06d8dede0165276afb44b2ea51074c1d572c05a9..a2d094d3b828af5e0542b20a417b71b4dbf8e401 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";
 
-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 a29e5006d02204355732b1f2d030f2823c17c05f..0d6266087d60dcd5b3ff399a9f9f994e59cf1786 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 edf75d0574f6237f4671fd435ae2c0f51b541306..8cc63931355fa6589f5b00a383e970900d537546 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 7b87e539d8070ffc50e17c5f656ca6a56350670e..0000000000000000000000000000000000000000
--- 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 9c24d8d958db6cf9995c046da1d167679300485e..c4e48fc27483c3df1b5e2333a4e599ef62f49d57 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 29aac5fecae3bc4ea73b5291462b2e420f9e9a9b..0000000000000000000000000000000000000000
--- 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 19e070509f2342590dfc148f36d586d50f2e1df4..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..dc089b1c7cf032d4da305f6d61431d1106290a38
--- /dev/null
+++ b/src/views/dashboard/components/BarChart.vue
@@ -0,0 +1,194 @@
+<!--  线 + 柱混合图 -->
+<template>
+  <el-card>
+    <template #header>
+      <div class="title">
+        业绩柱状图
+        <el-tooltip effect="dark" content="点击试试下载" placement="bottom">
+          <i-ep-download class="download" @click="downloadEchart" />
+        </el-tooltip>
+      </div>
+    </template>
+
+    <div :id="id" :class="className" :style="{ height, width }"></div>
+  </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 29634fd12e9237feefa70a7c6e582b17807dc3a4..0000000000000000000000000000000000000000
--- 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 3234d9922e8bf757f892475873454c6933b4ae6e..0000000000000000000000000000000000000000
--- 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 d648d393795ead15ae5d1052bfb249c4b354b955..0000000000000000000000000000000000000000
--- 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 a49372159e076123dd55f0f4216dd3e49d032d10..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..30fedb97717fb30faaf4ab0e3ac67db40daf65b0
--- /dev/null
+++ b/src/views/dashboard/components/FunnelChart.vue
@@ -0,0 +1,106 @@
+<!-- 漏斗图 -->
+<template>
+  <div :id="id" :class="className" :style="{ height, width }"></div>
+</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 0000000000000000000000000000000000000000..e8dd67026f47267f9aadf46f7385b045a4480bff
--- /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 }"></div>
+  </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 6d5598f71d29cc59ff0a61efa837e0477b0d2a9e..0000000000000000000000000000000000000000
--- 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 0000000000000000000000000000000000000000..2081bf2418d8427830aa71fef494d6aae0971c8c
--- /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 }"></div>
+  </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 1cf120c5ecf61cb337dc936256460b24faa6fd5d..0000000000000000000000000000000000000000
--- 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 ea3d08fa16bbed1a20df2de4124beb5c57bc9dec..d859a53e19cbcf112cf59c908e72a95671bf69ea 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,307 +1,247 @@
+<script setup lang="ts">
+import { useUserStore } from "@/store/modules/user";
+import { useTransition, TransitionPresets } from "@vueuse/core";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "Dashboard",
+  inheritAttrs: false,
+});
+
+const userStore = useUserStore();
+
+const date: Date = new Date();
+
+const greetings = computed(() => {
+  const hours = date.getHours();
+  if (hours >= 6 && hours < 8) {
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
+  } else if (hours >= 8 && hours < 12) {
+    return "上午好🌞！";
+  } else if (hours >= 12 && hours < 18) {
+    return "下午好☕！";
+  } else if (hours >= 18 && hours < 24) {
+    return "晚上好🌃！";
+  } else if (hours >= 0 && hours < 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.user.avatar + '?imageView2/1/w/80/h/80'"
+            />
+            <span class="ml-[10px] text-[16px]">
+              {{ userStore.user.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-2">
         <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-2">
         <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-2">
         <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;
-  }
-
-  .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;
+    z-index: 1;
+    border: 0;
   }
 
-  .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 0000000000000000000000000000000000000000..e625213a98fb0a986f8e97eef5aa7b72144da69d
--- /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>
+/** 关闭tag标签  */
+.app-container {
+  /* 50px = navbar = 50px */
+  height: calc(100vh - 50px);
+}
+
+/** 开启tag标签  */
+.hasTagsView {
+  .app-container {
+    /* 84px = navbar + tags-view = 50px + 34px */
+    height: calc(100vh - 84px);
+  }
+}
+</style>
diff --git a/src/views/demo/dict.vue b/src/views/demo/dict.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fcb6e0607f9537d052335b64a064a7365f25ae9d
--- /dev/null
+++ b/src/views/demo/dict.vue
@@ -0,0 +1,32 @@
+<!-- 字典组件示例 -->
+<script setup lang="ts">
+const stringValue = ref("1"); // 性别(值为String)
+const numberValue = ref(1); // 性别(值为Number)
+</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="stringValue" type-code="gender" />
+        <el-link :underline="false" type="primary" class="ml-5"
+          >值为String: const value = ref("1");
+        </el-link>
+      </el-form-item>
+
+      <el-form-item label="性别">
+        <dictionary v-model="numberValue" type-code="gender" />
+        <el-link :underline="false" type="success" class="ml-5"
+          >值为Number: const value = ref(1);
+        </el-link>
+      </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 0000000000000000000000000000000000000000..6a419e2fb8538f93ec606518b11652efaaa2cb7b
--- /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/demo/icons.vue b/src/views/demo/icons.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06e917ebdeaf1593b64c5506b0a3857e51ad289f
--- /dev/null
+++ b/src/views/demo/icons.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="icons-container">
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div class="grid">
+          <div
+            v-for="item of svg_icons"
+            :key="item"
+            @click="handleClipboard(generateIconCode(item), $event)"
+          >
+            <el-tooltip
+              effect="dark"
+              :content="generateIconCode(item)"
+              placement="top"
+            >
+              <div class="icon-item">
+                <svg-icon :icon-class="item" />
+                <span>{{ item }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div class="grid">
+          <div
+            v-for="(icon, name) of icons"
+            :key="name"
+            @click="handleClipboard(generateElementIconCode(name), $event)"
+          >
+            <el-tooltip
+              effect="dark"
+              :content="generateElementIconCode(name)"
+              placement="top"
+            >
+              <div class="icon-item">
+                <el-icon :size="20">
+                  <component :is="icon" />
+                </el-icon>
+                <span>{{ name }}</span>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from "@/components/SvgIcon/index.vue";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "Icons",
+  inheritAttrs: false,
+});
+const svg_icons: string[] = [
+  "advert",
+  "api",
+  "brand",
+  "bug",
+  "cascader",
+  "chart",
+  "client",
+  "close",
+  "close_all",
+  "close_left",
+  "close_other",
+  "close_right",
+  "coupon",
+  "dashboard",
+  "dict",
+  "dict_item",
+  "document",
+  "download",
+  "drag",
+  "edit",
+  "exit-fullscreen",
+  "eye-open",
+  "eye",
+  "fullscreen",
+  "github",
+  "goods-list",
+  "goods",
+  "guide",
+  "homepage",
+  "lab",
+  "language",
+  "link",
+  "menu",
+  "message",
+  "money",
+  "monitor",
+  "multi_level",
+  "nested",
+  "number",
+  "order",
+  "password",
+  "peoples",
+  "perm",
+  "publish",
+  "rabbitmq",
+  "rate",
+  "redis",
+  "refresh",
+  "role",
+  "security",
+  "shopping",
+  "size",
+  "skill",
+  "system",
+  "theme",
+  "tree",
+  "user",
+  "uv",
+  "verify_code",
+];
+const icons = ref(ElementPlusIconsVue);
+
+const { text, isSupported, copy } = useClipboard();
+
+function generateIconCode(symbol: any) {
+  return `<svg-icon icon-class="${symbol}" />`;
+}
+
+function generateElementIconCode(symbol: any) {
+  return `<el-icon><${symbol} /></el-icon>`;
+}
+
+function handleClipboard(text: any, event: any) {
+  // clipboard(text, event);
+  copy(text)
+    .then(() => {
+      ElMessage.success("Copy successfully");
+    })
+    .catch(() => {
+      ElMessage.warning("Copy failed");
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .icon-item {
+    float: left;
+    width: 100px;
+    height: 85px;
+    margin: 20px;
+    font-size: 30px;
+    color: var(--el-text-color-regular);
+    text-align: center;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    margin-top: 10px;
+    font-size: 16px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>
diff --git a/src/views/demo/internal-doc.vue b/src/views/demo/internal-doc.vue
new file mode 100644
index 0000000000000000000000000000000000000000..df51bacccc4dd1b1ce6026eceae461a7c23b253b
--- /dev/null
+++ b/src/views/demo/internal-doc.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="app-container">
+    <iframe
+      src="https://juejin.cn/post/7228990409909108793"
+      frameborder="0"
+    ></iframe>
+  </div>
+</template>
+<style lang="scss" scoped>
+/** 关闭tag标签  */
+.app-container {
+  /* 50px = navbar = 50px */
+  height: calc(100vh - 50px);
+}
+
+/** 开启tag标签  */
+.hasTagsView {
+  .app-container {
+    /* 84px = navbar + tags-view = 50px + 34px */
+    height: calc(100vh - 84px);
+  }
+}
+
+iframe {
+  width: 100%;
+  height: 100%;
+}
+</style>
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 94de1f0d8c6409d60889683e553e986d290eb462..888f58e96d6c0083d00cd5b3f4ad2365eb9a0696 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 e933503ad6c789c95e30585a80882433514f3908..a99c98e98c285314bc98f88405fe98cf4cda60f9 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 a9f31caa1b1d7a82cffac3766ff69955947eadf6..abcc3a7e462e8a14b83feda70e45cc95058df1fa 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/nested/level1/index.vue b/src/views/demo/multi-level/level1.vue
similarity index 31%
rename from src/views/nested/level1/index.vue
rename to src/views/demo/multi-level/level1.vue
index 6938bf1c17c2f8c6c62453449ce07f7273a35720..b26146d7b90de8993c7069fee7d096b922d875b9 100644
--- a/src/views/nested/level1/index.vue
+++ b/src/views/demo/multi-level/level1.vue
@@ -1,5 +1,13 @@
 <template>
-  <div style="padding:30px;">
+  <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>
diff --git a/src/views/demo/permission/components/SwitchRoles.vue b/src/views/demo/permission/components/SwitchRoles.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2b3c186de55f5b40b5b2f90093ddb6264a62879
--- /dev/null
+++ b/src/views/demo/permission/components/SwitchRoles.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="mb-[15px]">Your roles: {{ roles }}</div>
+    Switch roles:
+    <el-radio-group v-model="switchRoles">
+      <el-radio-button label="EDITOR" />
+      <el-radio-button label="ADMIN" />
+    </el-radio-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStoreHook } from "@/store/modules/user";
+import { storeToRefs } from "pinia";
+
+const emit = defineEmits(["change"]);
+const store = storeToRefs(useUserStoreHook());
+const { roles } = store.user.value;
+
+const switchRoles = computed({
+  get: () => roles[0],
+  set: (val) => {
+    Object.assign(roles, [val]);
+    emit("change");
+  },
+});
+</script>
diff --git a/src/views/demo/permission/page.vue b/src/views/demo/permission/page.vue
new file mode 100644
index 0000000000000000000000000000000000000000..38901295080f1e58d3bf4b71566581511266551b
--- /dev/null
+++ b/src/views/demo/permission/page.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="app-container">
+    <switch-roles @change="handleRolesChange" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import router from "@/router";
+import SwitchRoles from "./components/SwitchRoles.vue";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "PagePermission",
+  inheritAttrs: false,
+});
+
+function handleRolesChange() {
+  console.log("roles changed");
+  router.push({ path: "/permission/page?" + new Date() });
+}
+</script>
diff --git a/src/views/demo/signature.vue b/src/views/demo/signature.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ee713325058b54b6e9d0b0669169b373bb70144a
--- /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 0000000000000000000000000000000000000000..def1056abf4cce4483453c6098e477664a693e56
--- /dev/null
+++ b/src/views/demo/table.vue
@@ -0,0 +1,440 @@
+<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-down v-else />
+                </template>
+              </div>
+
+              <el-dropdown
+                trigger="click"
+                @command="(command: string) => handleCommand(command, oneCol)"
+              >
+                <i-ep-arrow-down class="action-more" />
+                <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" />
+      <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;
+  overflow-y: auto;
+
+  .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/table/Export2Excel.js b/src/views/demo/table/Export2Excel.js
new file mode 100644
index 0000000000000000000000000000000000000000..6a14ff211618caca760657c6496a8a4dd29e77b9
--- /dev/null
+++ b/src/views/demo/table/Export2Excel.js
@@ -0,0 +1,257 @@
+/* eslint-disable */
+import * as XLSX from "xlsx";
+
+// TODO: this is a toy example, may be file-saver is a better choice
+// import { saveAs } from 'file-saver'
+function saveAs(blob, fileName) {
+  const type = fileName.split(".")[1];
+  console.log(type);
+  const file = new window.File([blob], fileName, { type: type });
+  console.log(file);
+  // 创建一个指向 File 对象的 URL
+  const url = URL.createObjectURL(file);
+
+  // 创建一个 a 标签
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+
+  // 将 a 标签添加到文档中
+  document.body.appendChild(a);
+
+  // 模拟点击 a 标签，开始下载
+  a.click();
+
+  // 下载完成后，从文档中移除 a 标签，并释放 URL
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+  return file;
+}
+
+function generateArray(table) {
+  var out = [];
+  var rows = table.querySelectorAll("tr");
+  var ranges = [];
+  for (var R = 0; R < rows.length; ++R) {
+    var outRow = [];
+    var row = rows[R];
+    var columns = row.querySelectorAll("td");
+    for (var C = 0; C < columns.length; ++C) {
+      var cell = columns[C];
+      var colspan = cell.getAttribute("colspan");
+      var rowspan = cell.getAttribute("rowspan");
+      var cellValue = cell.innerText;
+      if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;
+
+      //Skip ranges
+      ranges.forEach(function (range) {
+        if (
+          R >= range.s.r &&
+          R <= range.e.r &&
+          outRow.length >= range.s.c &&
+          outRow.length <= range.e.c
+        ) {
+          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
+        }
+      });
+
+      //Handle Row Span
+      if (rowspan || colspan) {
+        rowspan = rowspan || 1;
+        colspan = colspan || 1;
+        ranges.push({
+          s: {
+            r: R,
+            c: outRow.length,
+          },
+          e: {
+            r: R + rowspan - 1,
+            c: outRow.length + colspan - 1,
+          },
+        });
+      }
+
+      //Handle Value
+      outRow.push(cellValue !== "" ? cellValue : null);
+
+      //Handle Colspan
+      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
+    }
+    out.push(outRow);
+  }
+  return [out, ranges];
+}
+
+function datenum(v, date1904) {
+  if (date1904) v += 1462;
+  var epoch = Date.parse(v);
+  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
+}
+
+function sheet_from_array_of_arrays(data, opts) {
+  var ws = {};
+  var range = {
+    s: {
+      c: 10000000,
+      r: 10000000,
+    },
+    e: {
+      c: 0,
+      r: 0,
+    },
+  };
+  for (var R = 0; R != data.length; ++R) {
+    for (var C = 0; C != data[R].length; ++C) {
+      if (range.s.r > R) range.s.r = R;
+      if (range.s.c > C) range.s.c = C;
+      if (range.e.r < R) range.e.r = R;
+      if (range.e.c < C) range.e.c = C;
+      var cell = {
+        v: data[R][C],
+      };
+      if (cell.v == null) continue;
+      var cell_ref = XLSX.utils.encode_cell({
+        c: C,
+        r: R,
+      });
+
+      if (typeof cell.v === "number") cell.t = "n";
+      else if (typeof cell.v === "boolean") cell.t = "b";
+      else if (cell.v instanceof Date) {
+        cell.t = "n";
+        cell.z = XLSX.SSF._table[14];
+        cell.v = datenum(cell.v);
+      } else cell.t = "s";
+
+      ws[cell_ref] = cell;
+    }
+  }
+  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
+  return ws;
+}
+
+function Workbook() {
+  if (!(this instanceof Workbook)) return new Workbook();
+  this.SheetNames = [];
+  this.Sheets = {};
+}
+
+function s2ab(s) {
+  var buf = new ArrayBuffer(s.length);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
+  return buf;
+}
+
+export function export_table_to_excel(id) {
+  var theTable = document.getElementById(id);
+  var oo = generateArray(theTable);
+  var ranges = oo[1];
+
+  /* original data */
+  var data = oo[0];
+  var ws_name = "SheetJS";
+
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  /* add ranges to worksheet */
+  // ws['!cols'] = ['apple', 'banan'];
+  ws["!merges"] = ranges;
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: false,
+    type: "binary",
+  });
+
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream",
+    }),
+    "test.xlsx"
+  );
+}
+
+export function export_json_to_excel({
+  multiHeader = [],
+  header,
+  data,
+  filename,
+  merges = [],
+  autoWidth = true,
+  bookType = "xlsx",
+} = {}) {
+  /* original data */
+  filename = filename || "excel-list";
+  data = [...data];
+  data.unshift(header);
+
+  for (let i = multiHeader.length - 1; i > -1; i--) {
+    data.unshift(multiHeader[i]);
+  }
+
+  var ws_name = "SheetJS";
+  var wb = new Workbook(),
+    ws = sheet_from_array_of_arrays(data);
+
+  if (merges.length > 0) {
+    if (!ws["!merges"]) ws["!merges"] = [];
+    merges.forEach((item) => {
+      ws["!merges"].push(XLSX.utils.decode_range(item));
+    });
+  }
+
+  if (autoWidth) {
+    /*设置worksheet每列的最大宽度*/
+    const colWidth = data.map((row) =>
+      row.map((val) => {
+        /*先判断是否为null/undefined*/
+        if (val == null) {
+          return {
+            wch: 10,
+          };
+        } else if (val.toString().charCodeAt(0) > 255) {
+          /*再判断是否为中文*/
+          return {
+            wch: val.toString().length * 2,
+          };
+        } else {
+          return {
+            wch: val.toString().length,
+          };
+        }
+      })
+    );
+    /*以第一行为初始值*/
+    let result = colWidth[0];
+    for (let i = 1; i < colWidth.length; i++) {
+      for (let j = 0; j < colWidth[i].length; j++) {
+        if (result[j]["wch"] < colWidth[i][j]["wch"]) {
+          result[j]["wch"] = colWidth[i][j]["wch"];
+        }
+      }
+    }
+    ws["!cols"] = result;
+  }
+
+  /* add worksheet to workbook */
+  wb.SheetNames.push(ws_name);
+  wb.Sheets[ws_name] = ws;
+
+  var wbout = XLSX.write(wb, {
+    bookType: bookType,
+    bookSST: false,
+    type: "binary",
+  });
+  saveAs(
+    new Blob([s2ab(wbout)], {
+      type: "application/octet-stream",
+    }),
+    `${filename}.${bookType}`
+  );
+}
diff --git a/src/views/demo/table/complex-table.vue b/src/views/demo/table/complex-table.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bf815c0eb33b2f9d1e7a961eed20d33ab5d77180
--- /dev/null
+++ b/src/views/demo/table/complex-table.vue
@@ -0,0 +1,617 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.title"
+        placeholder="Title"
+        style="width: 200px"
+        class="filter-item"
+        @keyup.enter="handleFilter"
+      />
+      <el-select
+        v-model="listQuery.importance"
+        placeholder="Imp"
+        clearable
+        style="width: 90px"
+        class="filter-item"
+      >
+        <el-option
+          v-for="item in importanceOptions"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+      <el-select
+        v-model="listQuery.type"
+        placeholder="Type"
+        clearable
+        class="filter-item"
+        style="width: 130px"
+      >
+        <el-option
+          v-for="item in calendarTypeOptions"
+          :key="item.key"
+          :label="item.display_name + '(' + item.key + ')'"
+          :value="item.key"
+        />
+      </el-select>
+      <el-select
+        v-model="listQuery.sort"
+        style="width: 140px"
+        class="filter-item"
+        @change="handleFilter"
+      >
+        <el-option
+          v-for="item in sortOptions"
+          :key="item.key"
+          :label="item.label"
+          :value="item.key"
+        />
+      </el-select>
+      <el-button
+        class="filter-item"
+        type="primary"
+        :icon="Search"
+        @click="handleFilter"
+      >
+        Search
+      </el-button>
+
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px"
+        type="primary"
+        :icon="Edit"
+        @click="handleCreate"
+      >
+        Add
+      </el-button>
+
+      <el-button
+        :loading="downloadLoading"
+        class="filter-item"
+        type="primary"
+        :icon="Download"
+        @click="handleDownload"
+      >
+        Export
+      </el-button>
+      <el-checkbox
+        v-model="showReviewer"
+        class="filter-item"
+        style="margin-left: 15px"
+        @change="tableKey = tableKey + 1"
+      >
+        reviewer
+      </el-checkbox>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      @sort-change="sortChange"
+    >
+      <el-table-column
+        label="ID"
+        prop="id"
+        sortable="custom"
+        align="center"
+        width="80"
+        :class-name="getSortClass('id')"
+      >
+        <template #default="{ row }">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="160px" align="center" label="Date">
+        <template #default="{ row }">
+          <span>{{ formatDate(row.timestamp) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Title" min-width="150px">
+        <template #default="{ row }">
+          <span class="link-type" @click="handleUpdate(row)">{{
+            row.title
+          }}</span>
+          <el-tag>
+            {{ calendarTypeKeyValue[row.type] }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="Author" width="110px" align="center">
+        <template #default="{ row }">
+          <span>{{ row.author }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="showReviewer"
+        label="Reviewer"
+        width="110px"
+        align="center"
+      >
+        <template #default="{ row }">
+          <span style="color: red">{{ row.reviewer }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Imp" width="80px">
+        <template #default="{ row }">
+          <svg-icon
+            v-for="n in +row.importance ? +row.importance : 0"
+            :key="n"
+            icon-class="star"
+            class="meta-item__icon"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="Readings" align="center" width="95">
+        <template #default="{ row }">
+          <span
+            v-if="row.pageviews"
+            class="link-type"
+            @click="handleFetchPv(row.id)"
+            >{{ row.pageviews }}</span
+          >
+          <span v-else>0</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Status" class-name="status-col" width="100">
+        <template #default="{ row }">
+          <el-tag :type="statusType(row.status)">
+            {{ row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="Actions"
+        align="center"
+        width="260"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="{ row, $index }">
+          <el-button type="primary" size="default" @click="handleUpdate(row)">
+            编辑
+          </el-button>
+          <el-button
+            v-if="row.status != 'published'"
+            size="default"
+            type="success"
+            @click="handleModifyStatus(row, 'published')"
+          >
+            发布
+          </el-button>
+          <el-button
+            v-if="row.status != 'draft'"
+            size="default"
+            @click="handleModifyStatus(row, 'draft')"
+          >
+            草稿
+          </el-button>
+
+          <el-button
+            size="default"
+            type="danger"
+            @click="handleDelete(row, $index)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="listQuery.page"
+      v-model:limit="listQuery.limit"
+      @pagination="getList"
+    />
+
+    <el-dialog v-model="dialogPvVisible" title="Reading statistics">
+      <el-table
+        :data="pvData"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+      >
+        <el-table-column prop="key" label="Channel" />
+        <el-table-column prop="pv" label="Pv" />
+      </el-table>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="dialogPvVisible = false">
+            Confirm
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <el-dialog
+      :title="textMap[dialogStatus]"
+      v-model="dialogFormVisible"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="formRef"
+        :rules="rules"
+        :model="formData"
+        label-position="left"
+        label-width="70px"
+        style="width: 400px; margin-left: 50px"
+      >
+        <el-form-item label="Type" prop="type">
+          <el-select
+            v-model="formData.type"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in calendarTypeOptions"
+              :key="item.key"
+              :label="item.display_name"
+              :value="item.key"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Date" prop="timestamp">
+          <el-date-picker
+            v-model="formData.timestamp"
+            type="datetime"
+            placeholder="Please pick a date"
+          />
+        </el-form-item>
+        <el-form-item label="Title" prop="title">
+          <el-input v-model="formData.title" />
+        </el-form-item>
+        <el-form-item label="Status">
+          <el-select
+            v-model="formData.status"
+            class="filter-item"
+            placeholder="Please select"
+          >
+            <el-option
+              v-for="item in statusOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Imp">
+          <el-rate
+            v-model="formData.importance"
+            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
+            :max="3"
+            style="margin-top: 8px"
+          />
+        </el-form-item>
+        <el-form-item label="Remark">
+          <el-input
+            v-model="formData.remark"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            type="textarea"
+            placeholder="Please input"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="resetForm(formRef)">Reset</el-button>
+          <el-button @click="dialogFormVisible = false"> Cancel </el-button>
+          <el-button
+            type="primary"
+            @click="
+              dialogStatus === 'create'
+                ? createData(formRef)
+                : updateData(formRef)
+            "
+          >
+            Confirm</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Edit, Search, Download } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules } from "element-plus";
+
+import {
+  fetchList,
+  fetchPv,
+  createArticle,
+  updateArticle,
+  deleteArticle,
+  ArticleQuery,
+  ArticleDetail,
+  ArticleCreate,
+  ArticleUpdate,
+} from "@/api/article";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "ComplexTable",
+  inheritAttrs: false,
+});
+
+const importanceOptions = [1, 2, 3];
+const sortOptions = [
+  { label: "ID Ascending", key: "+id" },
+  { label: "ID Descending", key: "-id" },
+];
+const statusOptions = ["published", "draft", "deleted"];
+const statusType = (status: string) => {
+  const statusMap = {
+    published: "success",
+    draft: "info",
+    deleted: "danger",
+  };
+  return statusMap[status as keyof typeof statusMap];
+};
+
+const showReviewer = ref(false);
+const downloadLoading = ref(false);
+const tableKey = ref(0);
+const listLoading = ref(true);
+const list = ref<ArticleDetail[]>([]);
+const total = ref(0);
+const dialogPvVisible = ref(false);
+const pvData = ref({});
+const dialogFormVisible = ref(false);
+
+const formRef = ref<FormInstance>();
+
+interface Form {
+  id?: number;
+  type?: string;
+  timestamp?: Date;
+  title?: string;
+  status?: string;
+  importance?: number;
+  remark?: string;
+}
+
+const formData = ref<Form>({});
+const rules = reactive<FormRules>({
+  type: [{ required: true, message: "type is required", trigger: "change" }],
+  timestamp: [
+    {
+      type: "date",
+      required: true,
+      message: "timestamp is required",
+      trigger: "change",
+    },
+  ],
+  title: [{ required: true, message: "title is required", trigger: "blur" }],
+});
+const dialogStatus = ref<any>();
+const textMap: any = {
+  update: "Edit",
+  create: "Create",
+};
+
+const listQuery = ref<ArticleQuery>({
+  page: 1,
+  limit: 10,
+  importance: undefined,
+  title: undefined,
+  type: undefined,
+  sort: "+id",
+});
+
+const calendarTypeOptions = [
+  { key: "CN", display_name: "China" },
+  { key: "US", display_name: "USA" },
+  { key: "JP", display_name: "Japan" },
+  { key: "EU", display_name: "Eurozone" },
+];
+
+// arr to obj, such as { CN : "China", US : "USA" }
+const calendarTypeKeyValue = calendarTypeOptions.reduce((acc: any, cur) => {
+  acc[cur.key] = cur.display_name;
+  return acc;
+}, {});
+
+const getList = () => {
+  listLoading.value = true;
+  fetchList(listQuery.value).then((res) => {
+    list.value = res.data.items as ArticleDetail[];
+    total.value = res.data.total;
+    listLoading.value = false;
+  });
+};
+
+const handleFilter = () => {
+  listQuery.value.page = 1;
+  getList();
+};
+
+const handleCreate = () => {
+  console.log("handleCreate");
+  formData.value = {};
+  dialogStatus.value = "create";
+  dialogFormVisible.value = true;
+};
+
+const formatJson = (filterVal: string[]) => {
+  return list.value.map((v: any) =>
+    filterVal.map((j: any) => {
+      if (j === "timestamp") {
+        return formatDate(v[j]);
+      } else {
+        return v[j];
+      }
+    })
+  );
+};
+
+const formatDate = (timestamp: number) => {
+  const date = new Date(timestamp);
+  return date
+    .toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    })
+    .replace(/\//g, "-");
+};
+
+const handleDownload = () => {
+  downloadLoading.value = true;
+  import("./Export2Excel").then((excel) => {
+    const tHeader = ["timestamp", "title", "type", "importance", "status"];
+    const filterVal = ["timestamp", "title", "type", "importance", "status"];
+    const data = formatJson(filterVal);
+    excel.export_json_to_excel({
+      header: tHeader,
+      data,
+      filename: "table-list",
+    });
+    downloadLoading.value = false;
+  });
+};
+
+const sortChange = (data: any) => {
+  const { prop, order } = data;
+  if (prop === "id") {
+    if (order === "ascending") {
+      listQuery.value.sort = "+id";
+    } else {
+      listQuery.value.sort = "-id";
+    }
+    handleFilter();
+  }
+};
+
+const getSortClass = (key: string) => {
+  const sort = listQuery.value.sort;
+  if (sort === `+${key}`) {
+    return "ascending";
+  } else if (sort === `-${key}`) {
+    return "descending";
+  } else {
+    return "";
+  }
+};
+
+const handleUpdate = (row: any) => {
+  formData.value = Object.assign({}, row);
+  dialogStatus.value = "update";
+  dialogFormVisible.value = true;
+  console.log(formData.value);
+  return;
+};
+
+const createData = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      console.log("submit!");
+      createArticle(formData.value as ArticleCreate).then((res) => {
+        const article = res.data.article;
+        list.value.push(article);
+        dialogFormVisible.value = false;
+        total.value += 1;
+        ElNotification({
+          title: "Success",
+          message: `创建成功 id:${article.id}`,
+          type: "success",
+        });
+      });
+    } else {
+      console.log("error submit!");
+      return false;
+    }
+  });
+};
+
+const updateData = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      updateArticle(formData.value as ArticleUpdate).then((res) => {
+        console.log("updateArticle", res);
+        const article = res.data.article;
+        const index = list.value.findIndex((item) => item.id === article.id);
+        list.value.splice(index, 1, article);
+        dialogFormVisible.value = false;
+        ElNotification({
+          title: "Success",
+          message: `修改成功 id:${article.id}`,
+          type: "success",
+        });
+      });
+      return true;
+    } else {
+      console.log("error submit!", fields);
+      return false;
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const handleFetchPv = (id: number) => {
+  console.log("handleFetchPv", id);
+  fetchPv(id).then((res) => {
+    console.log("fetchPv", res);
+    pvData.value = res.data.pvData;
+    dialogPvVisible.value = true;
+  });
+};
+
+const handleModifyStatus = (row: any, status: string) => {
+  console.log("handleModifyStatus", row, status);
+  const id = row.id;
+  updateArticle({ id, status }).then((res) => {
+    console.log("updateArticle", res);
+    const updateArticle = res.data.article;
+    const index = list.value.findIndex((item) => item.id === id);
+    list.value.splice(index, 1, updateArticle);
+  });
+};
+
+const handleDelete = (row: any, index: number) => {
+  deleteArticle(row.id).then((res) => {
+    list.value.splice(index, 1);
+    total.value -= 1;
+    ElNotification({
+      title: "Success",
+      message: `删除成功 id:${row.id}`,
+      type: "success",
+    });
+  });
+};
+
+onMounted(async () => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+}
+</style>
diff --git a/src/views/demo/table/drag-table.vue b/src/views/demo/table/drag-table.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1f595842227e14543da22cf41eceabc41614340d
--- /dev/null
+++ b/src/views/demo/table/drag-table.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="app-container">
+    <!-- Note that row-key is necessary to get a correct row order. -->
+    <el-table
+      class="draggable"
+      ref="dragTable"
+      v-loading="listLoading"
+      :data="list"
+      row-key="id"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column align="center" label="ID" width="65">
+        <template #default="{ row }">
+          <span>{{ row.id }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="180px" align="center" label="Date">
+        <template #default="{ row }">
+          <span>{{ formatDate(row.timestamp) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column min-width="300px" label="Title">
+        <template #default="{ row }">
+          <span>{{ row.title }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="110px" align="center" label="Author">
+        <template #default="{ row }">
+          <span>{{ row.author }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column width="110px" label="Importance">
+        <template #default="{ row }">
+          <svg-icon
+            v-for="n in +row.importance ? +row.importance : 0"
+            :key="n"
+            icon-class="star"
+            class="icon-star"
+          />
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Readings" width="95">
+        <template #default="{ row }">
+          <span>{{ row.pageviews }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column class-name="status-col" label="Status" width="110">
+        <template #default="{ row }">
+          <el-tag :type="statusType(row.status)">
+            {{ row.status }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column align="center" label="Drag" width="80">
+        <template #default="{}">
+          <svg-icon class="drag-handler" icon-class="drag" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="show-d"><el-tag>The default order :</el-tag> {{ oldList }}</div>
+    <div class="show-d">
+      <el-tag>The after dragging order :</el-tag>
+      {{ list.map((v: any) => v.id) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { default as Sortable, SortableEvent } from "sortablejs";
+import { fetchList } from "@/api/article";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "DragTable",
+  inheritAttrs: false,
+});
+
+interface List {
+  id: number;
+  timestamp: number;
+  title: string;
+  pageviews: number;
+  status: string;
+}
+
+const listLoading = ref<boolean>(true);
+const list: Ref = ref<List[]>([]);
+const oldList = ref<List[]>([]);
+
+const formatDate = (timestamp: any) => {
+  const date = new Date(timestamp);
+  return date
+    .toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    })
+    .replace(/\//g, "-");
+};
+
+const statusType = (status: string) => {
+  const statusMap = {
+    published: "success",
+    draft: "info",
+    deleted: "danger",
+  };
+  return statusMap[status as keyof typeof statusMap];
+};
+
+// 行拖拽
+const rowDrag = function () {
+  // 要拖拽元素的父容器
+  const tbody = document.querySelector(
+    ".draggable .el-table__body-wrapper tbody"
+  );
+  if (!tbody) return;
+  Sortable.create(tbody as HTMLElement, {
+    //  可被拖拽的子元素
+    draggable: ".draggable .el-table__row",
+    onEnd(event: SortableEvent) {
+      if (event.oldIndex !== undefined && event.newIndex !== undefined) {
+        const currRow = list.value.splice(event.oldIndex, 1)[0];
+        list.value.splice(event.newIndex, 0, currRow);
+      }
+    },
+  });
+};
+
+onMounted(() => {
+  fetchList({}).then((res) => {
+    listLoading.value = false;
+    list.value = res.data.items;
+    oldList.value = list.value.map((v: any) => v.id);
+    rowDrag();
+  });
+});
+</script>
+
+<style>
+.sortable-ghost {
+  color: #fff !important;
+  background: #42b983 !important;
+  opacity: 0.8;
+}
+</style>
+
+<style scoped>
+.icon-star {
+  margin-right: 2px;
+}
+
+.drag-handler {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.show-d {
+  margin-top: 15px;
+}
+</style>
diff --git a/src/views/demo/table/dynamic-table/components/FixedThead.vue b/src/views/demo/table/dynamic-table/components/FixedThead.vue
new file mode 100644
index 0000000000000000000000000000000000000000..84ce9def959d5ce9fb08dd6b572ac5205cd25c1d
--- /dev/null
+++ b/src/views/demo/table/dynamic-table/components/FixedThead.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-checkbox-group v-model="checkboxVal">
+        <el-checkbox label="apple"> apple </el-checkbox>
+        <el-checkbox label="banana"> banana </el-checkbox>
+        <el-checkbox label="orange"> orange </el-checkbox>
+      </el-checkbox-group>
+    </div>
+
+    <el-table
+      :key="key"
+      :data="tableData"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="fruitName" width="180" />
+      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
+        <template #default="scope">
+          {{ scope.row[fruit] }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const defaultFormThead = ["apple", "banana"];
+const tableData = [
+  {
+    name: "fruit-1",
+    apple: "apple-10",
+    banana: "banana-10",
+    orange: "orange-10",
+  },
+  {
+    name: "fruit-2",
+    apple: "apple-20",
+    banana: "banana-20",
+    orange: "orange-20",
+  },
+];
+
+let key = 1; // table key
+const formTheadOptions = ["apple", "banana", "orange"];
+const checkboxVal = ref(defaultFormThead); // checkboxVal
+const formThead = ref(defaultFormThead); // 默认表头 Default header
+
+watch(checkboxVal, (valArr) => {
+  formThead.value = formTheadOptions.filter((i) => valArr.indexOf(i) >= 0);
+  key = key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
+});
+</script>
diff --git a/src/views/demo/table/dynamic-table/components/UnfixedThead.vue b/src/views/demo/table/dynamic-table/components/UnfixedThead.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8056267ffc73c1e07063244487ecf388b7a80e14
--- /dev/null
+++ b/src/views/demo/table/dynamic-table/components/UnfixedThead.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-checkbox-group v-model="formThead">
+        <el-checkbox label="apple"> apple </el-checkbox>
+        <el-checkbox label="banana"> banana </el-checkbox>
+        <el-checkbox label="orange"> orange </el-checkbox>
+      </el-checkbox-group>
+    </div>
+
+    <el-table
+      :data="tableData"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
+      <el-table-column prop="name" label="fruitName" width="180" />
+      <el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
+        <template #default="scope">
+          {{ scope.row[fruit] }}
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const formThead = ref(["apple", "banana"]);
+
+const tableData = [
+  {
+    name: "fruit-1",
+    apple: "apple-10",
+    banana: "banana-10",
+    orange: "orange-10",
+  },
+  {
+    name: "fruit-2",
+    apple: "apple-20",
+    banana: "banana-20",
+    orange: "orange-20",
+  },
+];
+</script>
diff --git a/src/views/demo/table/dynamic-table/index.vue b/src/views/demo/table/dynamic-table/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..acabac11193e36989a16a29fa1ca4f49419dfc23
--- /dev/null
+++ b/src/views/demo/table/dynamic-table/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="app-container">
+    <div style="margin: 0 0 5px 20px">
+      Fixed header, sorted by header order,
+    </div>
+    <fixed-thead />
+
+    <div style="margin: 30px 0 5px 20px">
+      Not fixed header, sorted by click order
+    </div>
+    <unfixed-thead />
+  </div>
+</template>
+
+<script setup lang="ts">
+import FixedThead from "./components/FixedThead.vue";
+import UnfixedThead from "./components/UnfixedThead.vue";
+
+defineOptions({
+  // eslint-disable-next-line
+  name: "DynamicTable",
+  inheritAttrs: false,
+});
+</script>
diff --git a/src/views/demo/upload.vue b/src/views/demo/upload.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c8051acbac9e349649370fb9fd1e786662dc04d
--- /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 0000000000000000000000000000000000000000..d7ff4bb810a6227d0dd9b24ca5d812c8efae5962
--- /dev/null
+++ b/src/views/demo/wang-editor.vue
@@ -0,0 +1,19 @@
+<!-- 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 0000000000000000000000000000000000000000..23546a90a8236418eb7e3d781999254cfc05f01d
--- /dev/null
+++ b/src/views/demo/websocket.vue
@@ -0,0 +1,266 @@
+<!-- websocket 示例 -->
+<script setup lang="ts">
+import SockJS from "sockjs-client";
+import Stomp from "stompjs";
+
+import { useUserStoreHook } from "@/store/modules/user";
+
+const userStore = useUserStoreHook();
+
+const isConnected = ref(false);
+const socketEndpoint = ref("http://47.117.115.107:8989/ws"); // 线上
+// const socketEndpoint = ref("http://localhost:8989/ws"); // 本地
+
+const receiver = ref("root");
+
+interface MessageType {
+  type?: string; // 消息类型： tip-提示消息
+  sender?: string;
+  content: string;
+}
+
+const messages = ref<MessageType[]>([]);
+
+const topicMessage = ref(
+  "亲爱的大冤种们，由于一只史诗级的BUG，系统版本已经被迫回退到了0.0.1。"
+); // 广播消息
+
+const queneMessage = ref(
+  "hi , " +
+    receiver.value +
+    " , 我是" +
+    userStore.user.username +
+    " , 想和你交个朋友 ! "
+);
+
+function sendToAll() {
+  stompClient.send("/app/sendToAll", {}, topicMessage.value);
+  messages.value.push({
+    sender: userStore.user.username,
+    content: topicMessage.value,
+  });
+}
+
+function sendToUser() {
+  stompClient.send("/app/sendToUser/" + receiver.value, {}, queneMessage.value);
+  messages.value.push({
+    sender: userStore.user.username,
+    content: queneMessage.value,
+  });
+}
+
+let stompClient: Stomp.Client;
+
+function connectWebSocket() {
+  let socket = new SockJS(socketEndpoint.value);
+
+  stompClient = Stomp.over(socket);
+
+  stompClient.connect(
+    { Authorization: userStore.token },
+    () => {
+      isConnected.value = true;
+      messages.value.push({
+        sender: "Server",
+        content: "Websocket 已连接",
+        type: "tip",
+      });
+
+      stompClient.subscribe("/topic/notice", (res: any) => {
+        messages.value.push({
+          sender: "Server",
+          content: res.body,
+        });
+      });
+
+      stompClient.subscribe("/user/queue/greeting", (res) => {
+        const messageData = JSON.parse(res.body) as MessageType;
+        messages.value.push({
+          sender: messageData.sender,
+          content: messageData.content,
+        });
+      });
+    },
+    (error) => {
+      console.log("连接失败: " + error);
+      isConnected.value = false; // 更新连接状态
+      messages.value.push({
+        sender: "Server",
+        content: "Websocket 已断开",
+        type: "tip",
+      });
+    }
+  );
+}
+
+function disconnectWebSocket() {
+  if (stompClient && stompClient.connected) {
+    stompClient.disconnect(() => {
+      isConnected.value = false; // 更新连接状态
+      messages.value.push({
+        sender: "Server",
+        content: "Websocket 已断开",
+        type: "tip",
+      });
+    });
+  }
+}
+
+onMounted(() => {
+  connectWebSocket();
+});
+</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
+    >
+    <el-row :gutter="10">
+      <el-col :span="12">
+        <el-card>
+          <el-row>
+            <el-col :span="16">
+              <el-input v-model="socketEndpoint" class="w-220px" />
+              <el-button
+                type="primary"
+                class="ml-5"
+                @click="connectWebSocket"
+                :disabled="isConnected"
+                >连接</el-button
+              >
+              <el-button
+                type="danger"
+                @click="disconnectWebSocket"
+                :disabled="!isConnected"
+                >断开</el-button
+              >
+            </el-col>
+
+            <el-col :span="8" class="text-right">
+              连接状态：
+              <el-tag class="ml-2" type="success" v-if="isConnected"
+                >已连接</el-tag
+              >
+              <el-tag class="ml-2" type="info" v-else>已断开</el-tag>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="mt-5">
+          <el-form label-width="90px">
+            <el-form-item label="消息内容">
+              <el-input type="textarea" v-model="topicMessage" />
+            </el-form-item>
+
+            <el-form-item>
+              <el-button @click="sendToAll" type="primary">发送广播</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="mt-5">
+          <el-form label-width="90px">
+            <el-form-item label="消息内容">
+              <el-input type="textarea" v-model="queneMessage" />
+            </el-form-item>
+            <el-form-item label="消息接收人">
+              <el-input v-model="receiver" />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="sendToUser" type="primary"
+                >发送点对点消息</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12">
+        <el-card>
+          <div class="message-container">
+            <div
+              v-for="(message, index) in messages"
+              :key="index"
+              :class="{
+                'tip-message': message.type === 'tip',
+                message: message.type !== 'tip',
+                'message--sent': message.sender === userStore.user.username,
+                'message--received': message.sender !== userStore.user.username,
+              }"
+            >
+              <div v-if="message.type != 'tip'" class="message-content">
+                <div
+                  :class="{
+                    'message-sender':
+                      message.sender === userStore.user.username,
+                    'message-receiver':
+                      message.sender !== userStore.user.username,
+                  }"
+                >
+                  {{ message.sender }}
+                </div>
+                <div class="color-#333">{{ message.content }}</div>
+              </div>
+              <div v-else>{{ message.content }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped>
+.message-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.message {
+  padding: 10px;
+  margin: 10px;
+  border-radius: 5px;
+}
+
+.message--sent {
+  align-self: flex-end;
+  background-color: #dcf8c6;
+}
+
+.message--received {
+  align-self: flex-start;
+  background-color: #e8e8e8;
+}
+
+.message-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.message-sender {
+  margin-bottom: 5px;
+  font-weight: bold;
+  text-align: right;
+}
+
+.message-receiver {
+  margin-bottom: 5px;
+  font-weight: bold;
+  text-align: left;
+}
+
+.tip-message {
+  align-self: center;
+  padding: 5px 10px;
+  margin-bottom: 5px;
+  font-style: italic;
+  text-align: center;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+}
+</style>
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index a52ed23b84650f8a79a44f4da685a3d647acd0ac..9c2779e5758a42f79b97d2d95d4f3fff75d2b01e 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import { reactive, toRefs } from "vue";
+import { useRouter } from "vue-router";
+
+import { defineComponent } from "vue";
+
+defineComponent({
+  name: "Page401",
+});
+
+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 +32,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 1791f55a34ef18dae1cbd583d62f997bf33fffa9..b73b0f39409317868610032b9f8fb6d51af3bebd 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__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>
         <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 eebaf0842288d6e645d9573cfc57f52010ad2399..8fc63dee14eec2a3c49dcc7ae9038f4bbce0eed9 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="$t('login.password')"
+            :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,124 @@
         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 { useI18n } from "vue-i18n";
 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";
+import { useAppStore } from "@/store/modules/app";
 
 // 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 appStore = useAppStore();
+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" }],
+
+const loginData = ref<LoginData>({
+  username: "admin",
+  password: "123456",
+});
+
+const { t } = useI18n();
+
+const loginRules = computed(() => {
+  const prefix = appStore.language === "en" ? "Please enter " : "请输入";
+  return {
+    username: [
+      {
+        required: true,
+        trigger: "blur",
+        message: `${prefix}${t("login.username")}`,
+      },
+    ],
     password: [
-      { required: true, trigger: "blur", validator: validatePassword },
+      {
+        required: true,
+        trigger: "blur",
+        validator: passwordValidator,
+        message: `${prefix}${t("login.password")}`,
+      },
     ],
-  },
-  loading: false,
-  passwordType: "password",
-  redirect: "",
-  captchaBase64: "",
-  // 大写提示禁用
-  capslockTooltipDisabled: true,
-  otherQuery: {},
-  clientHeight: document.documentElement.clientHeight,
-  showCopyright: true,
+    verifyCode: [
+      {
+        required: true,
+        trigger: "blur",
+        message: `${prefix}${t("login.verifyCode")}`,
+      },
+    ],
+  };
 });
-
-function validatePassword(rule: any, value: any, callback: any) {
+// const loginRules = reactive({
+//   username: [
+//     {
+//       required: true,
+//       trigger: "blur",
+//       message: `请输入${t("login.username")}`,
+//     },
+//   ],
+//   password: [
+//     {
+//       required: true,
+//       trigger: "blur",
+//       validator: passwordValidator,
+//       message: `请输入${t("login.password")}`,
+//     },
+//   ],
+//   verifyCode: [
+//     {
+//       required: true,
+//       trigger: "blur",
+//       message: `请输入${t("login.verifyCode")}`,
+//     },
+//   ],
+// });
+
+/**
+ * 密码校验器
+ */
+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 +202,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/oms/order/index.vue b/src/views/oms/order/index.vue
deleted file mode 100644
index eec642299e641b2c3a5046b5b125b29a1ca5e1d8..0000000000000000000000000000000000000000
--- 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 1538b73cef29912770d3087a85a08f6604aecca0..0000000000000000000000000000000000000000
--- 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 f2beec613a97d690144695e06f00a4d6141c96fa..0000000000000000000000000000000000000000
--- 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 58ac4a757e3b924ab2326b8f27101ccd9909fc20..0000000000000000000000000000000000000000
--- 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 45ec4b8d2c7f795619bbbfc00e7cb4c7b77ae8ec..0000000000000000000000000000000000000000
--- 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 731f88671a9539fe15f01e78751bb4123973ddae..0000000000000000000000000000000000000000
--- 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 adc62718711fa59a40db3065839718115d86c188..0000000000000000000000000000000000000000
--- 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 64eb427b44e0aa1ebca97ba8f48048ab9f59459c..0000000000000000000000000000000000000000
--- 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 2071e36b51a4eb664d1f5784f694761c2696c0ce..0000000000000000000000000000000000000000
--- 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 157d7a3a98794f695659ac2014143c5c4d33b0dd..0000000000000000000000000000000000000000
--- 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 9bac316572d99aa53dd8a476a590748bc0ffe3b3..0000000000000000000000000000000000000000
--- 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 2363a22ecdb62894985d26c68115643d3ad07897..4215bf69cb697c6034cfe686bb289e0b04d3a5c0 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -1,15 +1,15 @@
 <template>
-  <div/>
+  <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 4289856ea356962c890d320236ba6324d1ae3c8e..0000000000000000000000000000000000000000
--- 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 ab3da22cf87f4e8ec2df84546844be237884f090..0000000000000000000000000000000000000000
--- 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 b4ca46be2e232be2003b85175c53a07c44ddb24a..ae5b85ddfafa9c3bdf2c918efb52a9e29fde348b 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,355 +1,315 @@
-<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";
-
-// API依赖
 import {
-  getDeptFormDetail,
+  getDeptForm,
   deleteDept,
   updateDept,
   addDept,
-  listSelectDepartments,
-  listTableDepartments,
-} from "@/api/system/dept";
+  getDeptOptions,
+  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";
+
+defineOptions({
+  name: "Dept",
+  inheritAttrs: false,
+});
 
-// DOM元素的引用声明定义
 const queryFormRef = ref(ElForm);
-const dataFormRef = ref(ElForm);
+const deptFormRef = ref(ElForm);
 
-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 loading = ref(false);
+const ids = ref<number[]>([]);
+const dialog = reactive<DialogOption>({
+  visible: false,
 });
 
-const {
-  ids,
-  single,
-  disabled,
-  loading,
-  deptList,
-  deptOptions,
-  queryParams,
-  formData,
-  rules,
-  dialog,
-} = toRefs(state);
+const queryParams = reactive<DeptQuery>({});
+const deptList = ref<DeptVO[]>();
 
-/**
- * 部门查询
- */
+const deptOptions = ref<OptionType[]>();
+
+const formData = reactive<DeptForm>({
+  status: 1,
+  parentId: 0,
+  sort: 1,
+});
+
+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;
   });
 }
 
-/**
- * 重置查询
- */
+/**重置查询 */
 function resetQuery() {
   queryFormRef.value.resetFields();
   handleQuery();
 }
 
+/** 行复选框选中记录选中ID集合 */
 function handleSelectionChange(selection: any) {
-  state.ids = selection.map((item: any) => item.id);
-  state.single = selection.length === 0;
+  ids.value = selection.map((item: any) => item.id);
 }
 
-/**
- * 加载部门下拉数据源
- */
+/** 获取部门下拉数据  */
 async function loadDeptOptions() {
-  const deptOptions: any[] = [];
-  listSelectDepartments().then((response) => {
-    const rootDeptOption = {
-      id: 0,
-      label: "顶级部门",
-      children: response.data,
-    };
-    deptOptions.push(rootDeptOption);
-    state.deptOptions = deptOptions;
+  getDeptOptions().then((response) => {
+    deptOptions.value = [
+      {
+        value: 0,
+        label: "顶级部门",
+        children: response.data,
+      },
+    ];
   });
 }
 
 /**
- * 表单重置
- **/
-function resetForm() {
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
-}
-
-/**
- * 添加部门
- */
-function handleAdd(row: any) {
-  loadDeptOptions();
-  state.formData.parentId = row.id;
-  state.dialog = {
-    title: "添加部门",
-    visible: true,
-  };
-}
-
-/**
- * 修改部门
+ * 打开弹窗
+ *
+ * @param parentId 父部门ID
+ * @param deptId 部门ID
  */
-async function handleUpdate(row: any) {
+async function openDialog(parentId?: number, deptId?: number) {
   await loadDeptOptions();
-  const deptId = row.id || state.ids;
-  state.dialog = {
-    title: "修改部门",
-    visible: true,
-  };
-  getDeptFormDetail(deptId).then((response: any) => {
-    state.formData = response.data;
-  });
+  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));
       }
     }
   });
 }
 
-/**
- * 删除部门
- *
- * @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 0000000000000000000000000000000000000000..329db35464ab8ccfc1891e8dc745d4ab96d43dda
--- /dev/null
+++ b/src/views/system/dict/DictData.vue
@@ -0,0 +1,325 @@
+<!-- 字典数据 -->
+<script setup lang="ts">
+import {
+  getDictPage,
+  getDictFormData,
+  addDict,
+  updateDict,
+  deleteDict,
+} from "@/api/dict";
+import { DictPageVO, DictForm, DictQuery } from "@/api/dict/types";
+
+defineOptions({
+  name: "DictData",
+  inheritAttrs: false,
+});
+
+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-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 29f2a46de0f2846a4673a28c7bf0e53c785084a0..0000000000000000000000000000000000000000
--- 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 479788df82d511cb376690bc24f0f91494e16486..0000000000000000000000000000000000000000
--- 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 931774f3176b992c25811d2d4ab3d47fafb71517..976ba5cf133eebeb39ea00e62cdcd457c421894e 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,54 +1,323 @@
-<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'
+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";
+
+defineOptions({
+  name: "DictType",
+  inheritAttrs: false,
+});
+
+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();
+}
+
+/** 行复选框选中  */
+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 23ac3e3bff3ca4abc6fb09dd0cd67189216cf392..0000000000000000000000000000000000000000
--- 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 3431fc02b530ff05c7269827dcef6a40b6865876..0000000000000000000000000000000000000000
--- 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 d921d7e4dd8cf701fcfd7eaa4964196c7a7df2f1..cfe1d673c24e761e9d561ec627f68a476558a252 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'
+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";
+
+defineOptions({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: "Menu",
+  inheritAttrs: false,
+});
+
+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 8091c74cce1011e12e22e1254602b4d14cac4edd..0000000000000000000000000000000000000000
--- 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 943261ede4be364c9a24f7764e5a743b204aa7ca..0000000000000000000000000000000000000000
--- 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 6e49c2a310bd8b6fdbe4fde8ae20b996b07c8d65..0000000000000000000000000000000000000000
--- 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 1b43a5dd793cc5b2594f43ebe48a93e3af0e7f4a..c9979466525dc856f285b5c14b0787ce91415922 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">
+import {
+  getRolePage,
+  updateRole,
+  getRoleForm,
+  addRole,
+  deleteRoles,
+  getRoleMenuIds,
+  updateRoleMenus,
+} from "@/api/role";
+import { listMenuOptions } from "@/api/menu";
 
-            <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 { RolePageVO, RoleForm, RoleQuery } from "@/api/role/types";
 
-<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: "",
-  },
+defineOptions({
+  name: "Role",
+  inheritAttrs: false,
 });
 
-const { role, menu } = toRefs(state);
+const queryFormRef = ref(ElForm);
+const roleFormRef = ref(ElForm);
+const menuRef = ref(ElTree);
 
-function handleRoleClick(roleRow: any) {
-  if (roleRow) {
-    state.role = {
-      id: roleRow.id,
-      name: roleRow.name,
-    };
+const loading = ref(false);
+const ids = ref<number[]>([]);
+const total = ref(0);
+
+const queryParams = reactive<RoleQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+
+const roleList = ref<RolePageVO[]>();
+
+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/components/dept-tree.vue b/src/views/system/user/components/dept-tree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6394b328c61b851cfa645f2c12e71c69042dea33
--- /dev/null
+++ b/src/views/system/user/components/dept-tree.vue
@@ -0,0 +1,69 @@
+<!-- 部门树 -->
+<template>
+  <el-card shadow="never">
+    <el-input v-model="deptName" 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="handleFilter"
+      default-expand-all
+      @node-click="handleNodeClick"
+    />
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { getDeptOptions } from "@/api/dept";
+
+const props = defineProps({
+  modelValue: {
+    type: [Number],
+    default: undefined,
+  },
+});
+
+const deptList = ref<OptionType[]>(); // 部门列表
+const deptTreeRef = ref(ElTree); // 部门树
+const deptName = ref(); // 部门名称
+
+const emits = defineEmits(["node-click"]);
+
+const deptId = useVModel(props, "modelValue", emits);
+
+watchEffect(
+  () => {
+    deptTreeRef.value.filter(deptName.value);
+  },
+  {
+    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+
+/** 部门筛选 */
+function handleFilter(value: string, data: any) {
+  if (!value) {
+    return true;
+  }
+  return data.label.indexOf(value) !== -1;
+}
+
+/** 部门树节点 Click */
+function handleNodeClick(data: { [key: string]: any }) {
+  deptId.value = data.value;
+  emits("node-click");
+}
+
+onBeforeMount(() => {
+  getDeptOptions().then((response) => {
+    deptList.value = response.data;
+  });
+});
+</script>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index e6ced7d297a660f4f99a9bf9fb0fdab362409037..efa240b7be3794f8f92737212588945f6660f88f 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,429 +1,112 @@
-<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">
+defineOptions({
+  name: "User",
+  inheritAttrs: false,
+});
 
-<script setup lang='ts'>
-// Vue依赖
 import {
-  reactive,
-  ref,
-  watchEffect,
-  onMounted,
-  getCurrentInstance,
-  toRefs
-} from "vue";
-
-// 导入API
-import {
-  listUsersPage,
-  getUserDetail,
+  getUserPage,
+  getUserForm,
   deleteUsers,
   addUser,
   updateUser,
-  updateUserPart,
-  downloadTemplate,
+  updateUserPassword,
+  downloadTemplateApi,
   exportUser,
-  importUser
-} from "@/api/system/user";
-import { listSelectDepartments } from "@/api/system/dept";
-import { listRoles } from "@/api/system/role";
-
-// 组件依赖
-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",
-      },
-    ],
-
-  },
-
-  importDialog: {
-    title: '用户导出',
-    visible: false,
-  } as Dialog,
-  importFormData: {} as UserImportFormData,
-  excelFile: undefined as any,
-  excelFilelist: [] as File[]
+  importUser,
+} from "@/api/user";
+import { getDeptOptions } from "@/api/dept";
+import { getRoleOptions } from "@/api/role";
+
+import { UserForm, UserQuery, UserPageVO } from "@/api/user/types";
+import type { UploadInstance } from "element-plus";
+import { genFileId } from "element-plus";
+
+const queryFormRef = ref(ElForm); // 查询表单
+const userFormRef = ref(ElForm); // 用户表单
+const uploadRef = ref<UploadInstance>(); // 上传组件
+
+const loading = ref(false); //  加载状态
+const removeIds = ref([]); // 删除用户ID集合 用于批量删除
+const queryParams = reactive<UserQuery>({
+  pageNum: 1,
+  pageSize: 10,
+});
+const total = ref(0); // 数据总数
+const pageData = ref<UserPageVO[]>(); // 用户分页数据
+const deptList = ref<OptionType[]>(); // 部门下拉数据源
+const roleList = ref<OptionType[]>(); // 角色下拉数据源
+
+// 弹窗对象
+const dialog = reactive({
+  visible: false,
+  type: "user-form",
+  width: 1200,
+  title: "",
 });
 
-const {
-  loading,
-  single,
-  multiple,
-  queryParams,
-  userList,
-  total,
-  dialog,
-  formData,
-  rules,
-  deptName,
-  deptOptions,
-  roleOptions,
-  importDialog,
-  importFormData,
-  excelFilelist
-} = toRefs(state);
-
-/**
- * 部门筛选
- */
-watchEffect(
-  () => {
-    deptTreeRef.value.filter(state.deptName);
-  },
-  {
-    flush: "post", // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
-  }
-);
-
-/**
- * 部门列表筛选
- */
-function filterDeptNode(value: string, data: any) {
-  if (!value) {
-    return true;
-  }
-  return data.label.indexOf(value) !== -1;
-}
-
-/**
- * 部门树节点点击
- */
-function handleDeptNodeClick(data: { [key: string]: any }) {
-  state.queryParams.deptId = data.id;
-  handleQuery();
-}
+// 用户表单数据
+const formData = reactive<UserForm>({
+  status: 1,
+});
 
-/**
- * 加载角色数据
- */
-async function loadRoleOptions() {
-  listRoles().then((response) => {
-    state.roleOptions = response.data;
-  });
-}
+// 用户导入数据
+const importData = reactive({
+  deptId: undefined,
+  file: undefined,
+  fileList: [],
+});
 
-/**
- * 用户状态修改
- */
-function handleStatusChange(row: { [key: string]: any }) {
-  const text = row.status === 1 ? "启用" : "停用";
-  ElMessageBox.confirm(
-    "确认要" + text + "" + row.username + "用户吗?",
-    "警告",
+// 校验规则
+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: [
     {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: "warning",
-    }
-  )
-    .then(() => {
-      return updateUserPart(row.id, { status: row.status });
-    })
-    .then(() => {
-      ElMessage.success(text + "成功");
-    })
-    .catch(() => {
-      row.status = row.status === 1 ? 0 : 1;
-    });
-}
+      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",
+    },
+  ],
+});
 
-/**
- * 用户查询
- **/
+/** 查询 */
 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 }) => {
+      pageData.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;
+  removeIds.value = selection.map((item: any) => item.id);
 }
 
-/**
- * 密码重置
- */
+/** 重置密码 */
 function resetPassword(row: { [key: string]: any }) {
   ElMessageBox.prompt(
     "请输入用户「" + row.username + "」的新密码",
@@ -432,223 +115,524 @@ function resetPassword(row: { [key: string]: any }) {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
     }
-  )
-    .then(({ value }) => {
-      if (!value) {
-        ElMessage.warning("请输入新密码");
-        return false;
-      }
-      updateUserPart(row.id, {
-        password: value,
-      }).then(() => {
-        ElMessage.success("修改成功，新密码是：" + value);
-      });
-    })
-    .catch(() => { });
-}
-
-/**
- * 添加用户
- **/
-async function handleAdd() {
-  await loadDeptOptions();
-  await loadRoleOptions();
-  state.dialog = {
-    title: "添加用户",
-    visible: true,
-  };
+  ).then(({ value }) => {
+    if (!value) {
+      ElMessage.warning("请输入新密码");
+      return false;
+    }
+    updateUserPassword(row.id, value).then(() => {
+      ElMessage.success("密码重置成功，新密码是：" + value);
+    });
+  });
 }
 
-/**
- * 修改用户
- **/
-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;
+/** 加载角色下拉数据源 */
+async function loadRoleOptions() {
+  getRoleOptions().then((response) => {
+    roleList.value = response.data;
   });
 }
 
-/**
- * 表单提交
- */
-function submitForm() {
-  dataFormRef.value.validate((valid: any) => {
-    if (valid) {
-      const userId = state.formData.id;
-      if (userId) {
-        updateUser(userId, state.formData).then(() => {
-          ElMessage.success("修改用户成功");
-          cancel()
-          handleQuery();
-        });
-      } else {
-        addUser(state.formData).then((response: any) => {
-          ElMessage.success("新增用户成功");
-          cancel()
-          handleQuery();
-        });
-      }
-    }
+/** 加载部门下拉数据源 */
+async function loadDeptOptions() {
+  getDeptOptions().then((response) => {
+    deptList.value = response.data;
   });
 }
 
 /**
- * 删除用户
+ * 打开弹窗
+ *
+ * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
+ * @param id 用户ID
  */
-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();
+async function openDialog(type: string, id?: number) {
+  dialog.visible = true;
+  dialog.type = type;
+
+  if (dialog.type === "user-form") {
+    // 用户表单弹窗
+    await loadDeptOptions();
+    await loadRoleOptions();
+    if (id) {
+      dialog.title = "修改用户";
+      getUserForm(id).then(({ data }) => {
+        Object.assign(formData, { ...data });
       });
-    })
-    .catch(() => ElMessage.info("已取消删除"));
+    } else {
+      dialog.title = "新增用户";
+    }
+  } else if (dialog.type === "user-import") {
+    // 用户导入弹窗
+    dialog.title = "导入用户";
+    dialog.width = 600;
+    loadDeptOptions();
+  }
 }
 
 /**
- * 取消
+ * 关闭弹窗
+ *
+ * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
  */
-function cancel() {
-  state.dialog.visible = false;
-  state.formData.id = undefined;
-  dataFormRef.value.resetFields();
+function closeDialog() {
+  dialog.visible = false;
+  if (dialog.type === "user-form") {
+    userFormRef.value.resetFields();
+    userFormRef.value.clearValidate();
+
+    formData.id = undefined;
+    formData.status = 1;
+  } else if (dialog.type === "user-import") {
+    importData.file = undefined;
+    importData.fileList = [];
+  }
 }
 
-/**
- * 加载部门
- */
-async function loadDeptOptions() {
-  listSelectDepartments().then((response) => {
-    state.deptOptions = response.data;
-  });
-}
+/** 表单提交 */
+const handleSubmit = useThrottleFn(() => {
+  if (dialog.type === "user-form") {
+    userFormRef.value.validate((valid: any) => {
+      if (valid) {
+        const userId = formData.id;
+        loading.value = true;
+        if (userId) {
+          updateUser(userId, formData)
+            .then(() => {
+              ElMessage.success("修改用户成功");
+              closeDialog();
+              resetQuery();
+            })
+            .finally(() => (loading.value = false));
+        } else {
+          addUser(formData)
+            .then(() => {
+              ElMessage.success("新增用户成功");
+              closeDialog();
+              resetQuery();
+            })
+            .finally(() => (loading.value = false));
+        }
+      }
+    });
+  } else if (dialog.type === "user-import") {
+    if (!importData?.deptId) {
+      ElMessage.warning("请选择部门");
+      return false;
+    }
+    if (!importData?.file) {
+      ElMessage.warning("上传Excel文件不能为空");
+      return false;
+    }
+    importUser(importData?.deptId, importData?.file).then((response) => {
+      ElMessage.success(response.data);
+      closeDialog();
+      resetQuery();
+    });
+  }
+}, 3000);
+
+/** 删除用户 */
+function handleDelete(id?: number) {
+  const userIds = [id || removeIds.value].join(",");
+  if (!userIds) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
 
-/**
- * 加载性别字典
- */
-function loadGenderOptions() {
-  proxy.$listDictsByCode("gender").then((response: any) => {
-    state.genderOptions = response?.data;
+  ElMessageBox.confirm("确认删除用户?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    deleteUsers(userIds).then(() => {
+      ElMessage.success("删除成功");
+      resetQuery();
+    });
   });
 }
 
-/**
- * 下载用户导入模板
- */
-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 showImportDialog() {
-  await loadDeptOptions();
-  await loadRoleOptions();
-  state.importDialog.visible = true
-}
+/** 下载导入模板 */
+function downloadTemplate() {
+  downloadTemplateApi().then((response: any) => {
+    const fileData = response.data;
+    const fileName = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    );
+    const fileType =
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
 
+    const blob = new Blob([fileData], { type: fileType });
+    const downloadUrl = window.URL.createObjectURL(blob);
 
-function handleExcelChange(file: any, fileList: File[]) {
-  const fileName = file.name;
-  if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
-    ElMessage.warning('上传Excel只能为xlsx、xls格式');
-    state.excelFile = undefined
-    state.excelFilelist = []
-    return false;
-  }
-  state.excelFile = file.raw
-}
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
 
-function submitImportForm() {
-  importFormRef.value.validate((valid: any) => {
-    if (valid) {
-      if (!state.excelFile) {
-        ElMessage.warning('上传Excel文件不能为空');
-        return false
-      }
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
 
-      const deptId = state.importFormData.deptId
-      const roleIds = state.importFormData.roleIds.join(',')
-      importUser(deptId, roleIds, state.excelFile).then((response) => {
-        ElMessage.success(response.data);
-        closeImportDialog();
-        handleQuery();
-      })
-    }
+    document.body.removeChild(downloadLink);
+    window.URL.revokeObjectURL(downloadUrl);
   });
 }
 
-/**
- * 关闭导入弹窗
- */
-function closeImportDialog() {
-  state.importDialog.visible = false
-  state.excelFile = undefined
-  state.excelFilelist = []
-  importFormRef.value.resetFields();
+/** Excel文件 Change */
+function handleFileChange(file: any) {
+  importData.file = file.raw;
+  console.log(importData.file);
 }
 
-/**
- * 导出用户
- */
-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对象
-  })
+/** Excel文件 Exceed  */
+function handleFileExceed(files: any) {
+  uploadRef.value!.clearFiles();
+  const file = files[0];
+  file.uid = genFileId();
+  uploadRef.value!.handleStart(file);
+  importData.file = file;
 }
 
-/**
- * 初始化数据
- */
-function loadData() {
-  // 初始化性别字典
-  loadGenderOptions();
-  // 初始化部门
-  loadDeptOptions();
-  // 初始化用户列表数据
-  handleQuery();
+/** 导出用户 */
+function handleExport() {
+  exportUser(queryParams).then((response: any) => {
+    const fileData = response.data;
+    const fileName = decodeURI(
+      response.headers["content-disposition"].split(";")[1].split("=")[1]
+    );
+    const fileType =
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+    const blob = new Blob([fileData], { type: fileType });
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+
+    document.body.removeChild(downloadLink);
+    window.URL.revokeObjectURL(downloadUrl);
+  });
 }
 
 onMounted(() => {
-  loadData();
+  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]">
+        <dept-tree v-model="queryParams.deptId" @node-click="handleQuery" />
+      </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('user-form')"
+                  ><i-ep-plus />新增</el-button
+                >
+                <el-button
+                  v-hasPerm="['sys:user:delete']"
+                  type="danger"
+                  :disabled="removeIds.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="openDialog('user-import')">
+                        <i-ep-top />导入数据</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+                <el-button class="ml-3" @click="handleExport"
+                  ><template #icon><i-ep-download /></template>导出</el-button
+                >
+              </div>
+            </div>
+          </template>
+
+          <el-table
+            v-loading="loading"
+            :data="pageData"
+            @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-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{
+                  scope.row.status == 1 ? "启用" : "禁用"
+                }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              width="180"
+            />
+            <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('user-form', 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="dialog.width"
+      append-to-body
+      @close="closeDialog"
+    >
+      <!-- 用户新增/编辑表单 -->
+      <el-form
+        v-if="dialog.type === 'user-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>
+
+      <!-- 用户导入表单 -->
+      <el-form
+        v-else-if="dialog.type === 'user-import'"
+        :model="importData"
+        label-width="100px"
+      >
+        <el-form-item label="部门">
+          <el-tree-select
+            v-model="importData.deptId"
+            placeholder="请选择部门"
+            :data="deptList"
+            filterable
+            check-strictly
+          />
+        </el-form-item>
+
+        <el-form-item label="Excel文件">
+          <el-upload
+            ref="uploadRef"
+            action=""
+            drag
+            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+            :limit="1"
+            :auto-upload="false"
+            :file-list="importData.fileList"
+            :on-change="handleFileChange"
+            :on-exceed="handleFileExceed"
+          >
+            <el-icon class="el-icon--upload">
+              <i-ep-upload-filled />
+            </el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处，或
+              <em>点击上传</em>
+            </div>
+            <template #tip>
+              <div>xls/xlsx files</div>
+            </template>
+          </el-upload>
+        </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/ums/member/index.vue b/src/views/ums/member/index.vue
deleted file mode 100644
index eb62d39c5acb136047d1a88bb2aa437b444d6033..0000000000000000000000000000000000000000
--- 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 cb8c7d3ff75ac516ae4cdb011ddb9a7f73787047..abfa0a4df1f164e4f5697f28bc60a4242d3caf95 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,19 +5,29 @@
     "module": "esnext",
     "moduleResolution": "node",
     "strict": true,
+    "noLib": false,
     "jsx": "preserve",
     "sourceMap": true,
     "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",
+    "mock/**/*.ts",
+    "vite.config.ts"
+  ],
+  "exclude": ["node_modules", "dist", "**/*.js"]
+  // "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..53bdd0792740e006c4ad0c6bef139b1665534fcc
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,34 @@
+// uno.config.ts
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from "unocss";
+
+export default defineConfig({
+  shortcuts: [
+    // ...
+  ],
+  theme: {
+    colors: {
+      // ...
+    },
+  },
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons(),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        // ...
+      },
+    }),
+  ],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+});
diff --git a/vite.config.ts b/vite.config.ts
index 3a27aada3cdc32ea37b0c1be2c52972820a85650..2032da48d27d88e285ac913069f7545f0f494945 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,44 +1,196 @@
-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 { viteMockServe } from "vite-plugin-mock";
+
+import UnoCSS from "unocss/vite";
+import path from "path";
+
+const pathSrc = path.resolve(__dirname, "src");
+// 参考Vite官方： https://cn.vitejs.dev/config
+export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    resolve: {
+      alias: {
+        "@": pathSrc,
+      },
+    },
+    css: {
+      // CSS 预处理器
+      preprocessorOptions: {
+        // 定义全局 SCSS 变量
+        scss: {
+          javascriptEnabled: true,
+          additionalData: `
+            @use "@/styles/variables.scss" as *;
+          `,
+        },
+      },
+    },
+    server: {
+      // 允许IP访问
+      host: "0.0.0.0",
+      // 应用端口 (默认:3000)
+      port: Number(env.VITE_APP_PORT),
+      // 运行是否自动打开浏览器
+      open: true,
+      proxy: {
+        /**
+         * 反向代理解决跨域配置
+         * http://localhost:3000/dev-api/users (F12可见请求路径) => http://localhost:8989/users (实际请求后端 API 路径)
+         *
+         * env.VITE_APP_BASE_API: /dev-api
+         * env.VITE_APP_TARGET_URL: http://localhost:8989
+         * env.VITE_APP_TARGET_BASE_API: ""
+         */
+        [env.VITE_APP_BASE_API]: {
+          changeOrigin: true,
+          target: env.VITE_APP_TARGET_URL,
+          rewrite: (path) =>
+            path.replace(
+              new RegExp("^" + env.VITE_APP_BASE_API),
+              env.VITE_APP_TARGET_BASE_API
+            ),
+        },
+      },
+    },
+    plugins: [
+      vue(),
+      UnoCSS({
+        hmrTopLevelAwait: false,
+      }),
+      // 自动导入参考： https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts
+      AutoImport({
+        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
+        imports: ["vue", "@vueuse/core"],
+        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
+        resolvers: [ElementPlusResolver(), IconsResolver({})],
+        eslintrc: {
+          enabled: false,
+          filepath: "./.eslintrc-auto-import.json",
+          globalsPropValue: true,
+        },
+        vueTemplate: true,
+        // 配置文件生成位置(false:关闭自动生成)
+        dts: false,
+        // dts: "src/types/auto-imports.d.ts",
+      }),
+
+      Components({
+        resolvers: [
+          // 自动导入 Element Plus 组件
+          ElementPlusResolver(),
+          // 自动注册图标组件
+          IconsResolver({ 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]",
+      }),
+      viteMockServe({
+        ignore: /^\_/,
+        mockPath: "mock",
+        enable: mode === "development",
+      }),
+    ],
+    // 预加载项目必需的组件
+    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",
+        "element-plus/es/components/radio-button/style/css",
+        "element-plus/es/components/checkbox-group/style/css",
+        "element-plus/es/components/checkbox/style/css",
+        "element-plus/es/components/tabs/style/css",
+        "element-plus/es/components/tab-pane/style/css",
+        "element-plus/es/components/rate/style/css",
+        "element-plus/es/components/date-picker/style/css",
+        "element-plus/es/components/notification/style/css",
+        "@vueuse/core",
+        "sortablejs",
+        "path-to-regexp",
+        "echarts",
+        "@wangeditor/editor",
+        "@wangeditor/editor-for-vue",
+        "vue-i18n",
+      ],
+    },
+    // 构建配置
+    build: {
+      chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
+      minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
+      terserOptions: {
+        compress: {
+          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
+          drop_console: true, // 生产环境去除 console
+          drop_debugger: true, // 生产环境去除 debugger
+        },
+        format: {
+          comments: false, // 删除注释
+        },
+      },
+    },
+  };
+});