Initial commit

2023-12-04 14:08:31 +08:00 · 2023-12-04 14:08:31 +08:00 · 1936f8718d
commit 1936f8718d
355 changed files with 56291 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,15 @@
+# @see: http://editorconfig.org
+
+root = true
+
+[*] # 表示所有文件适用
+charset = utf-8 # 设置文件字符集为 utf-8
+end_of_line = lf # 控制换行类型(lf | cr | crlf)
+insert_final_newline = true # 始终在文件末尾插入一个新行
+indent_style = space # 缩进风格（tab | space）
+indent_size = 2 # 缩进大小
+max_line_length = 130 # 最大行长度
+
+[*.md] # 表示仅对 md 文件适用以下规则
+max_line_length = off # 关闭最大行长度限制
+trim_trailing_whitespace = false # 关闭末尾空格修剪
--- a/.env
+++ b/.env
@ -0,0 +1,11 @@
+# title
+VITE_GLOB_APP_TITLE = 文博
+
+# 本地运行端口号
+VITE_PORT = 8848
+
+# 启动时自动打开浏览器
+VITE_OPEN = true
+
+# 打包后是否生成包分析文件
+VITE_REPORT = false
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,23 @@
+# 本地环境
+VITE_USER_NODE_ENV = development
+
+# 公共基础路径
+VITE_PUBLIC_PATH = /
+
+# 路由模式
+# Optional: hash | history
+VITE_ROUTER_MODE = hash
+
+# 打包时是否删除 console
+VITE_DROP_CONSOLE = true
+
+# 是否开启 VitePWA
+VITE_PWA = false
+
+# 开发环境接口地址
+VITE_API_URL = /api
+
+# 开发环境跨域代理，支持配置多个
+VITE_PROXY = [["/api","https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"]]
+# VITE_PROXY = [["/api","https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0"]]
+# VITE_PROXY = [["/api-easymock","https://mock.mengxuegu.com"],["/api-fastmock","https://www.fastmock.site"]]
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,25 @@
+# 线上环境
+VITE_USER_NODE_ENV = production
+
+# 公共基础路径
+VITE_PUBLIC_PATH = /
+
+# 路由模式
+# Optional: hash | history
+VITE_ROUTER_MODE = hash
+
+# 是否启用 gzip 或 brotli 压缩打包，如果需要多个压缩规则，可以使用 “,” 分隔
+# Optional: gzip | brotli | none
+VITE_BUILD_COMPRESS = none
+
+# 打包压缩后是否删除源文件
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# 打包时是否删除 console
+VITE_DROP_CONSOLE = true
+
+# 是否开启 VitePWA
+VITE_PWA = true
+
+# 线上环境接口地址
+VITE_API_URL = "https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,25 @@
+# 测试环境
+VITE_USER_NODE_ENV = test
+
+# 公共基础路径
+VITE_PUBLIC_PATH = /
+
+# 路由模式
+# Optional: hash | history
+VITE_ROUTER_MODE = hash
+
+# 是否启用 gzip 或 brotli 压缩打包，如果需要多个压缩规则，可以使用 “,” 分隔
+# Optional: gzip | brotli | none
+VITE_BUILD_COMPRESS = none
+
+# 打包压缩后是否删除源文件
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# 打包时是否删除 console
+VITE_DROP_CONSOLE = true
+
+# 是否开启 VitePWA
+VITE_PWA = false
+
+# 测试环境接口地址
+VITE_API_URL = "https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,15 @@
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+/src/mock/*
+stats.html
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,62 @@
+// @see: http://eslint.cn
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  // 指定如何解析语法
+  parser: "vue-eslint-parser",
+  // 优先级低于 parse 的语法解析配置
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2020,
+    sourceType: "module",
+    jsxPragma: "React",
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  // 继承某些已有的规则
+ /* extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],*/
+  /**
+   * "off" 或 0    ==>  关闭规则
+   * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
+   * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
+   */
+  rules: {
+    'prettier/prettier': 'off',
+  /*  // eslint (http://eslint.cn/docs/rules)
+    "no-var": "error", // 要求使用 let 或 const 而不是 var
+    "no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
+    "prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
+    "no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
+
+    // typeScript (https://typescript-eslint.io/rules)
+    "@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
+    "@typescript-eslint/no-empty-function": "error", // 禁止空函数
+    "@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
+    "@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
+    "@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
+    "@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间
+    "@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
+    "@typescript-eslint/ban-types": "off", // 禁止使用特定类型
+    "@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块
+    "@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
+
+    // vue (https://eslint.vuejs.org/rules)
+    "vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效
+    "vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
+    "vue/no-mutating-props": "error", // 不允许改变组件 prop
+    "vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写
+    "vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行
+    "vue/attribute-hyphenation": "error", // 对模板中的自定义组件强制执行属性命名样式：my-prop="prop"
+    "vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
+    "vue/no-v-html": "off", // 禁止使用 v-html
+    "vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
+    "vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词
+    "vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup*/
+  }
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+stats.html
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:lint-staged
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,9 @@
+/dist/*
+.local
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*
+stats.html
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@ -0,0 +1,41 @@
+// @see: https://www.prettier.cn
+
+module.exports = {
+  // 指定最大换行长度
+  printWidth: 130,
+  // 缩进制表符宽度 | 空格数
+  tabWidth: 2,
+  // 使用制表符而不是空格缩进行 (true：制表符，false：空格)
+  useTabs: false,
+  // 结尾不用分号 (true：有，false：没有)
+  semi: true,
+  // 使用单引号 (true：单引号，false：双引号)
+  singleQuote: false,
+  // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>"
+  quoteProps: "as-needed",
+  // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号)
+  jsxSingleQuote: false,
+  // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>"
+  trailingComma: "none",
+  // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有)
+  bracketSpacing: true,
+  // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行)
+  bracketSameLine: false,
+  // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号)
+  arrowParens: "avoid",
+  // 指定要使用的解析器，不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化
+  insertPragma: false,
+  // 用于控制文本是否应该被换行以及如何进行换行
+  proseWrap: "preserve",
+  // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+  htmlWhitespaceSensitivity: "css",
+  // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>"
+  endOfLine: "auto",
+  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束)
+  rangeStart: 0,
+  rangeEnd: Infinity
+};
--- a/.stylelintignore
+++ b/.stylelintignore
@ -0,0 +1,4 @@
+/dist/*
+/public/*
+public/*
+stats.html
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@ -0,0 +1,40 @@
+// @see: https://stylelint.io
+
+module.exports = {
+  root: true,
+  // 继承某些已有的规则
+  extends: [
+    "stylelint-config-standard", // 配置 stylelint 拓展插件
+    "stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
+    "stylelint-config-standard-scss", // 配置 stylelint scss 插件
+    "stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
+    "stylelint-config-recess-order" // 配置 stylelint css 属性书写顺序插件,
+  ],
+  overrides: [
+    // 扫描 .vue/html 文件中的 <style> 标签内的样式
+    {
+      files: ["**/*.{vue,html}"],
+      customSyntax: "postcss-html"
+    }
+  ],
+  rules: {
+    "function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
+    "color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
+    "rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
+    "font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
+    "scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件
+    "property-no-unknown": null, // 禁止未知的属性
+    "no-empty-source": null, // 禁止空源码
+    "selector-class-pattern": null, // 强制选择器类名的格式
+    "value-no-vendor-prefix": null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)
+    "no-descending-specificity": null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器
+    "value-keyword-case": null, // 解决在 scss 中使用 v-bind 大写单词报错
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global", "v-deep", "deep"]
+      }
+    ]
+  },
+  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"]
+};
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "vue.volar",
+    "vue.vscode-typescript-vue-plugin",
+    "hollowtree.vue-snippets",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "streetsidesoftware.code-spell-checker",
+    "syler.sass-indented",
+    "mikestead.dotenv"
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,96 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": true
+  },
+  "stylelint.enable": true,
+  "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"],
+  "files.eol": "\n",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "cSpell.words": [
+    "AMAP",
+    "apng",
+    "axios",
+    "Biao",
+    "brotli",
+    "cascader",
+    "commitlint",
+    "contentleft",
+    "contentright",
+    "CSDN",
+    "daterange",
+    "datetimerange",
+    "echarts",
+    "fangda",
+    "geeker",
+    "Gitee",
+    "hexs",
+    "iconfont",
+    "juejin",
+    "liquidfill",
+    "longpress",
+    "monthrange",
+    "nprogress",
+    "officedocument",
+    "openxmlformats",
+    "Pageable",
+    "persistedstate",
+    "pinia",
+    "pjpeg",
+    "Prefixs",
+    "screenfull",
+    "sortablejs",
+    "sousuo",
+    "spreadsheetml",
+    "styl",
+    "stylelint",
+    "stylelintignore",
+    "stylelintrc",
+    "suoxiao",
+    "truetype",
+    "tuichu",
+    "unplugin",
+    "unref",
+    "VITE",
+    "vuedraggable",
+    "vueuse",
+    "Vuex",
+    "wangeditor",
+    "xiala",
+    "xiaoxi",
+    "Yahei",
+    "yiwen",
+    "zhongyingwen",
+    "zhuti"
+  ]
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,254 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## [1.2.0](https://github.com/HalseySpicy/Geeker-Admin/compare/v1.1.0...v1.2.0) (2023-09-15)
+
+
+### Features
+
+* 🚀 update and optimize project content ([17bc017](https://github.com/HalseySpicy/Geeker-Admin/commit/17bc017c5abbd2c87813d6c6f9d587ddf9d57da7))
+* 🚀 upgrade plugins and add tab functionality ([f21a41d](https://github.com/HalseySpicy/Geeker-Admin/commit/f21a41d8df44efe5216dec39bf4abf0ea86a7781))
+
+## [1.1.0](https://github.com/HalseySpicy/Geeker-Admin/compare/v1.0.0...v1.1.0) (2023-07-09)
+
+### Features
+
+- 🚀 add proTable instance type ([8262f04](https://github.com/HalseySpicy/Geeker-Admin/commit/8262f045734d055148720738a80fee0e0c779ceb))
+- 🚀 optimize code and add VitePWA ([523f676](https://github.com/HalseySpicy/Geeker-Admin/commit/523f676feee5105eae15d05b57063227be26d3df))
+- 🚀 optimize code and update plugins ([5cff3c7](https://github.com/HalseySpicy/Geeker-Admin/commit/5cff3c7e50331ede07d57613cc49658904e7cf1a))
+- 🚀 optimize irregular code ([d406ef2](https://github.com/HalseySpicy/Geeker-Admin/commit/d406ef2bb5e0d0522f5e0ce38c3b9d0aa47c7cd2))
+- 🚀 proTable radio selection example ([f58291f](https://github.com/HalseySpicy/Geeker-Admin/commit/f58291f96468b816607c31df87326ebd7d0a5c5a))
+- 🚀 proTable search component custom rendering ([#189](https://github.com/HalseySpicy/Geeker-Admin/issues/189)) ([89f03db](https://github.com/HalseySpicy/Geeker-Admin/commit/89f03db2db41160b9ac5398d64712fabff399c4c))
+- 🚀 proTable supports static table data ([9a3e85d](https://github.com/HalseySpicy/Geeker-Admin/commit/9a3e85d21d6c8872bbc915c42d48eb8658a1db63))
+- 🚀 update Gitee address ([0608be9](https://github.com/HalseySpicy/Geeker-Admin/commit/0608be9ba6a9f01f73ed67671d340cf0c1d99261))
+- 🚀 update stylelint configuration ([d62aae8](https://github.com/HalseySpicy/Geeker-Admin/commit/d62aae868e7d6aad87f0ba8706ab9744d5da04dd))
+- 🚀 update theme, modify bugs ([7a3a7a3](https://github.com/HalseySpicy/Geeker-Admin/commit/7a3a7a3d665c0356c0272947292de750dd0be8d8))
+
+### Bug Fixes
+
+- 🧩 fix eslint error ([a980a1a](https://github.com/HalseySpicy/Geeker-Admin/commit/a980a1aa7808895af46c85e0e26a53f66d1119fa))
+
+## [1.0.0](https://github.com/HalseySpicy/Geeker-Admin/compare/v0.0.7...v1.0.0) (2023-04-15)
+
+### Features
+
+- 🚀 升级依赖插件 && 新增树型 ProTbale 示例(更多查看详情) ([ed0ea75](https://github.com/HalseySpicy/Geeker-Admin/commit/ed0ea757555f047f6890632e598ee3293d3598cd))
+- 🚀 升级依赖插件 && 修复 bug(查看详情) ([4febadc](https://github.com/HalseySpicy/Geeker-Admin/commit/4febadc10dd794ec8ea1c7864a3771b1b477f743))
+- 🚀 新增路由白名单访问控制 ([97dc264](https://github.com/HalseySpicy/Geeker-Admin/commit/97dc26484c6eead2ae4c8c79d50b550f24f19a02))
+- 🚀 优化 ProTable && 面包屑导航 ([905d7f1](https://github.com/HalseySpicy/Geeker-Admin/commit/905d7f1fd2b18d9650e6ba7d439dfdcf50363d11))
+- 🚀 优化代码 ([cd333df](https://github.com/HalseySpicy/Geeker-Admin/commit/cd333dfe5de2aa7fa415326e6a06b83d3bd260d5))
+- 🚀 优化代码和样式细节 ([5b4b926](https://github.com/HalseySpicy/Geeker-Admin/commit/5b4b9266de4f420f32fca70dadb76242d129e604))
+- 🚀 优化代码和样式细节 ([756094c](https://github.com/HalseySpicy/Geeker-Admin/commit/756094c402e14841c07cd6062b701929f7f31737))
+- 🚀 优化代码逻辑 && 更新微信群二维码 ([629e824](https://github.com/HalseySpicy/Geeker-Admin/commit/629e8243466fda5da9f0ec781aa0b584e49f4501))
+- 🚀 优化代码细节问题 ([a6a6ced](https://github.com/HalseySpicy/Geeker-Admin/commit/a6a6cedeb40f2f7901f0dcd0ec7f1c283a491c61))
+- 🚀 优化样式、代码细节 ([1b02f45](https://github.com/HalseySpicy/Geeker-Admin/commit/1b02f457162267b090ad946e0bad91e5d0dd14b1))
+- 🚀 allow nested tree enum data ([c2fa2be](https://github.com/HalseySpicy/Geeker-Admin/commit/c2fa2be54a6af0309ba45bd4ca68170c66edc357))
+- 🚀 refactoring project configuration ([7ede988](https://github.com/HalseySpicy/Geeker-Admin/commit/7ede988bae3ad0b33d9e5ac1ea6145c4d7aa89e6))
+- **ProTable:** 🚀 插槽引入 ElTable 的 scope，可获取$index 等 ([4cb7dba](https://github.com/HalseySpicy/Geeker-Admin/commit/4cb7dba40c10e693e324b7c647aa65917aeb0b02))
+
+### Bug Fixes
+
+- 🧩 修复 ImportExcel 组件 bug ([ab7e9dd](https://github.com/HalseySpicy/Geeker-Admin/commit/ab7e9dde400aa80ec2e9fa58d9f2168fc3d14f18))
+- 🧩 修复 ImportExcel 组件 bug ([803ba58](https://github.com/HalseySpicy/Geeker-Admin/commit/803ba58a2c3fae7f6d8783ca534e2b41c987f027))
+- 🧩 修复 ProTable 组件打印功能 bug ([a88b7df](https://github.com/HalseySpicy/Geeker-Admin/commit/a88b7df4623e30459ef3c92196b720efcb200f2f))
+- 🧩 修复 TreeFilter 组件默认值 bug ([8e515f0](https://github.com/HalseySpicy/Geeker-Admin/commit/8e515f0d4058f573cbd53281ef68aec38b8dacb9))
+- 🧩 修复 TreeFilter 组件默认值 bug ([f23a94d](https://github.com/HalseySpicy/Geeker-Admin/commit/f23a94d6edf442babdc4cd5a52ea63ebbbcac44f))
+- 🧩 修复 useDebounceFn 错误使用 ([99d4278](https://github.com/HalseySpicy/Geeker-Admin/commit/99d4278a29b7fa970caba55f43134cebd1d3bec6))
+- 🧩 修复多图片上传预览初始化异常 ([d1a917f](https://github.com/HalseySpicy/Geeker-Admin/commit/d1a917f10326b7742b4445c495de12603df658c1))
+- 🧩 修复分栏布局路径匹配 bug ([b06bd12](https://github.com/HalseySpicy/Geeker-Admin/commit/b06bd123fa6af0dcb7d5cc9bc9215f13b91ace5f))
+- 🧩 修复横向布局下最大化失效 ([e416ddb](https://github.com/HalseySpicy/Geeker-Admin/commit/e416ddb732ae336ca4e7e43ebdeb89b24085d1b1))
+- 🧩 修复路由重置 bug ([52b7e66](https://github.com/HalseySpicy/Geeker-Admin/commit/52b7e66febf1db9cd3325eb0e1e45213ff1528c2))
+- 🧩 修复弱类型检查错误 ([b32310e](https://github.com/HalseySpicy/Geeker-Admin/commit/b32310ed2f546e3efa918d5f7eee2c3868a98cb7))
+
+### 0.0.7 (2022-12-28)
+
+### Features
+
+- 🚀 二次封装 wangEditor 富文本编辑器(50%) ([4f8e266](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4f8e266b7dd25a7df18d302e88e14454bfa3816b))
+- 🚀 更新插件、优化代码(请查看详情) ([dac6dec](https://gitee.com/HalseySpicy/Geeker-Admin/commit/dac6dec75466c19731ad7cf083f8c39940342140))
+- 🚀 更新微信群二维码 ([7e890d0](https://gitee.com/HalseySpicy/Geeker-Admin/commit/7e890d0afe0a11170d73e3c2c4ef04d37a582e94))
+- 🚀 请求全局 loading 更改为可配置 ([a75d62f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a75d62f627195ac420cf24ad7f51245b2e5bf04e))
+- 🚀 升级 element-plus 到 2.25 ([e98c035](https://gitee.com/HalseySpicy/Geeker-Admin/commit/e98c035caa6d1ab04319673e0db65837c6887126))
+- 🚀 升级 vite、vue 版本 && 优化分栏布局样式 ([b2b1b59](https://gitee.com/HalseySpicy/Geeker-Admin/commit/b2b1b599bc1fa0f1c64c5c58fb31d3719f415301))
+- 🚀 使用属性透传重构 ProTable 组件 ([a428e89](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a428e89a3784c826eceaaee548b97975afbe1d45))
+- 🚀 添加 wangEditor 组件 ([d6d2fa7](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d6d2fa7d27887bb4a9e40e9d7037d4621812e16a))
+- 🚀 完成 wangEditor 富文本二次封装 ([7362bfb](https://gitee.com/HalseySpicy/Geeker-Admin/commit/7362bfbff19224045e3bb20fa939a78c556cc805))
+- 🚀 完善按钮、菜单权限示例 ([6793f0c](https://gitee.com/HalseySpicy/Geeker-Admin/commit/6793f0cd7372b8a080f6d2649b05cdd0c62bd853))
+- 🚀 新增 主题色、灰色模式、色弱模式 配置 ([7821157](https://gitee.com/HalseySpicy/Geeker-Admin/commit/7821157059ed9c21d2844f75049f8fa999b19944))
+- 🚀 新增 pro-form ([3ab5a5b](https://gitee.com/HalseySpicy/Geeker-Admin/commit/3ab5a5b4f63fca227944ab6cc7928f6bf1f88ed4))
+- 🚀 新增 protable 打印、列对齐方式功能 ([c22879e](https://gitee.com/HalseySpicy/Geeker-Admin/commit/c22879e7e80ff9ef662c39daa25b11f5f17d17ca))
+- 🚀 新增 protbale 功能, 请查看详情 ([17f2bcd](https://gitee.com/HalseySpicy/Geeker-Admin/commit/17f2bcd67362365579ed8a572a3a9d17368ac64e))
+- 🚀 新增 SVG Icons ([977602c](https://gitee.com/HalseySpicy/Geeker-Admin/commit/977602c30b8997cb51426fe9498392edc249561d))
+- 🚀 新增 treeFilter 组件标题属性 ([20c755f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/20c755f59f3ae2b0380e6549bb56bb22317d750e))
+- 🚀 新增 treeFilter data 参数 ([4280766](https://gitee.com/HalseySpicy/Geeker-Admin/commit/428076635d7a0e9f80109274d9523cf91aa5a10c))
+- 🚀 新增暗黑模式 ([215e499](https://gitee.com/HalseySpicy/Geeker-Admin/commit/215e499634b516234e653eac27a611d5f51ea6da))
+- 🚀 新增菜单搜索功能 ([4aa0eef](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4aa0eefaf427a2aa1aebd2b78dc049ffa776e838))
+- 🚀 新增动态路由 ([551fefc](https://gitee.com/HalseySpicy/Geeker-Admin/commit/551fefc2e66b067d9e64d3b0cfbf47dfa1057d98))
+- 🚀 新增分栏布局 ([de37143](https://gitee.com/HalseySpicy/Geeker-Admin/commit/de37143e93c0cc5be2ff52466dce344ab9270f0d))
+- 🚀 新增功能 && 修复 bug(查看详情) ([1ab183f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/1ab183f1551cb8beb77243c2953b0119409dd6a5))
+- 🚀 新增功能 && 修复 bug(查看详情) ([4c0bc5f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4c0bc5fd3c111e1cac636cad104c83ffb1168679))
+- 🚀 新增功能(查看详情) ([cbd8dc2](https://gitee.com/HalseySpicy/Geeker-Admin/commit/cbd8dc2387576f525c0e49f81d540fbad3cb5e81))
+- 🚀 新增横向、纵向、经典布局切换 ([1046de4](https://gitee.com/HalseySpicy/Geeker-Admin/commit/1046de4c7d5f805b10c5cea5325b063e3d6dd84f))
+- 🚀 新增界面配置功能 ([39ffc5e](https://gitee.com/HalseySpicy/Geeker-Admin/commit/39ffc5e9a77da3294055f23f8c87a4a44f3622f7))
+- 🚀 新增路由相关功能 ([9679eed](https://gitee.com/HalseySpicy/Geeker-Admin/commit/9679eed1edd0c1f08c17465f590d4ca0365985ee)), closes [#71](https://gitee.com/HalseySpicy/Geeker-Admin/issues/71) [#72](https://gitee.com/HalseySpicy/Geeker-Admin/issues/72) [#49](https://gitee.com/HalseySpicy/Geeker-Admin/issues/49)
+- 🚀 新增请求示例，参见 loginApi ([d49b227](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d49b227762ae48c3ca08f0dec02a3667daac8532))
+- 🚀 新增图标选择组件 ([ce5e165](https://gitee.com/HalseySpicy/Geeker-Admin/commit/ce5e165aed842074a9f7ac66ea97290710b541ee))
+- 🚀 新增图片上传组件 ([c50c421](https://gitee.com/HalseySpicy/Geeker-Admin/commit/c50c421bc3c5f7af68184cda88262c6fb1bd07e0))
+- 🚀 新增图片上传组件属性 ([d7670ed](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d7670ed94608c5410f3102d7b9427d8d856204b1))
+- 🚀 新增系统管理模块 ([23748e1](https://gitee.com/HalseySpicy/Geeker-Admin/commit/23748e185e80e3b774b42114427934228a57d3aa))
+- 🚀 新增消息通知 ([66836b6](https://gitee.com/HalseySpicy/Geeker-Admin/commit/66836b69781ccc55402a3887d091149885864442))
+- 🚀 新增页面刷新功能 ([5223a41](https://gitee.com/HalseySpicy/Geeker-Admin/commit/5223a416d17568d5b2cae7b16b637e0f39134223))
+- 🚀 新增引导页 ([4fb6fb3](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4fb6fb3a3eb34f82576e2378c311ff580f65226d))
+- 🚀 新增组件参数配置文档 ([0e11fc5](https://gitee.com/HalseySpicy/Geeker-Admin/commit/0e11fc59175d5d74730c3cb1fa2579effcca6e48))
+- 🚀 修改 keepAlive 逻辑 ([168ca13](https://gitee.com/HalseySpicy/Geeker-Admin/commit/168ca13e796c8cc366caa3d6e05090acdaefef75))
+- 🚀 修改 pinia 持久化插件 ([a7691ae](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a7691aea614a035c4d381838149e08ad8477e49f))
+- 🚀 优化代码注释 && 升级 element 到 2.2.6 ([b84512b](https://gitee.com/HalseySpicy/Geeker-Admin/commit/b84512b3b102b00faa2f9241a32f5fbe27da4307))
+- 🚀 优化注释 && 代码细节问题 ([9d0ffa5](https://gitee.com/HalseySpicy/Geeker-Admin/commit/9d0ffa5ddecc4c73bec51208b05a6d44b1523b1f))
+- 🚀 预定义主题颜色 ([8219178](https://gitee.com/HalseySpicy/Geeker-Admin/commit/82191789bcf6d21c623aa61c5a64e502cea44c2c))
+- 🚀 增加 SearchForm 属性透传 ([eadb89b](https://gitee.com/HalseySpicy/Geeker-Admin/commit/eadb89b687596980a82401f44c53430081078d04))
+- 🚀 增加表格 treeFilter、更新整体布局样式 ([719b78f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/719b78f317589b983bc4b852b3bfd63a60d42a46))
+- 🚀 增加布局方式切换，样式已完成 ([5745b93](https://gitee.com/HalseySpicy/Geeker-Admin/commit/5745b93a6cc00519c1a02977b8c0437502d867e6))
+- 🚀 增加分类筛选器 ([c95a1c0](https://gitee.com/HalseySpicy/Geeker-Admin/commit/c95a1c054ee9eacae470bcaae7574d5c989b86a2))
+- 🚀 增加全局错误拦截 && 修改细节问题 请查看详情 ([0496184](https://gitee.com/HalseySpicy/Geeker-Admin/commit/04961847eb7df004d1e9f562e78ea3d5f851ea49))
+
+### Bug Fixes
+
+- 🧩 菜单搜索过滤掉 isHide 为 true 的菜单 ([c6bab35](https://gitee.com/HalseySpicy/Geeker-Admin/commit/c6bab356f0cde7e3dc6f69dfac115239c2453776))
+- 🧩 解决 useTable 查询参数 bug ([a86e408](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a86e4089b6da8ab6a55bc84e069d665c06471676))
+- 🧩 去除登陆页默认账号 ([3dda3fe](https://gitee.com/HalseySpicy/Geeker-Admin/commit/3dda3fee3fef38fdafcfdf3b1bf16e73033c6fe0))
+- 🧩 删除 protable 组件 image 配置属性 ([d699fe7](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d699fe7bd55eaaccfad9b94105c1b43ae64d1c34))
+- 🧩 修复 国际化 产生的 bug ([ec4f74a](https://gitee.com/HalseySpicy/Geeker-Admin/commit/ec4f74ae654e7287fc08bb31fa3ee3d2c76164eb))
+- 🧩 修复 axios 请求超时未拦截错误 ([856468e](https://gitee.com/HalseySpicy/Geeker-Admin/commit/856468e84f8356d35c25097f3115dfe3d496914c))
+- 🧩 修复 bug ([3714abd](https://gitee.com/HalseySpicy/Geeker-Admin/commit/3714abdc4826034791ccb3fc8249d946ec3a4e16))
+- 🧩 修复 Pro-Tabel 列设置 bug ([a3b86a0](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a3b86a06a6d9cd4b6f7ac6e108727a0b4852e9a0))
+- 🧩 修复 pro-table 格式报错问题 ([2ef11fd](https://gitee.com/HalseySpicy/Geeker-Admin/commit/2ef11fda6d373c3214df801ae789cafc1a033dcb))
+- 🧩 修复布局样式 bug ([2f1cd64](https://gitee.com/HalseySpicy/Geeker-Admin/commit/2f1cd6442f359909301e3d95b0ed4dc9d2dbe7c6))
+- 🧩 修复打包错误 ([243ebfc](https://gitee.com/HalseySpicy/Geeker-Admin/commit/243ebfc5280ddc013056c6708b44df35fe18f613))
+- 🧩 修复打包失败 ([31698fe](https://gitee.com/HalseySpicy/Geeker-Admin/commit/31698fea6478d60343a9ad49ae0fc6db7a42c184))
+- 🧩 修复打包失败问题 ([1778651](https://gitee.com/HalseySpicy/Geeker-Admin/commit/1778651781a1bb8bfe4ea61dafb9b48773fef5d7))
+- 🧩 修复分栏布局 bug ([113274a](https://gitee.com/HalseySpicy/Geeker-Admin/commit/113274a87e2dacf694648f3a304c7ac37e2262d0))
+- 🧩 修复经典布局展示 bug ([b95e237](https://gitee.com/HalseySpicy/Geeker-Admin/commit/b95e2376d06c6a6a35f72743e3fe8c1569fda008))
+- 🧩 修复路由跳转两次不能携带参数问题 ([8b583f3](https://gitee.com/HalseySpicy/Geeker-Admin/commit/8b583f3d5f05b77ec2a35082557bae431441a586))
+- 🧩 修复请求 header 参数丢失 bug ([3598dbc](https://gitee.com/HalseySpicy/Geeker-Admin/commit/3598dbc2a83aaacf9dada4e2c38a3ca27cbe4cfd))
+- 🧩 修复上传组件细节问题 ([8528358](https://gitee.com/HalseySpicy/Geeker-Admin/commit/8528358925ea809cf52f55015355345e87607351))
+- 🧩 修复 BUG ([4bf2988](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4bf29881dd41fad256f1beb5affcd5ba6599e17d))
+- 🧩 修复 BUG ([c93aaf7](https://gitee.com/HalseySpicy/Geeker-Admin/commit/c93aaf700112decd158e9a5a9c1f83eff1773e91))
+- 🧩 修复 loading 请求 bug ([a3270ec](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a3270ecfa2e7c2484729ae6fd599febcc4f7be6b))
+- 🧩 修复 vercel 打包失败 ([e63dee1](https://gitee.com/HalseySpicy/Geeker-Admin/commit/e63dee1f9653f4f95d0330275c5f5e8b530564c9))
+- 🧩 修改 Pro-Table 表头渲染方式 ([aa57294](https://gitee.com/HalseySpicy/Geeker-Admin/commit/aa5729489942eaa6dca9928b70153af2de753a9c))
+- 🧩 修改 useTable 存在的 bug ([5bb55b3](https://gitee.com/HalseySpicy/Geeker-Admin/commit/5bb55b32c0b46bbf55fa0d49efe3a15d0b1673a4))
+- 🧩 修改 useTable 钩子中的 bug ([675aed8](https://gitee.com/HalseySpicy/Geeker-Admin/commit/675aed806e62c236b40bc933402c86085289df4e))
+- 🧩 修改 useTable 携带默认查询参数 bug ([ee585b2](https://gitee.com/HalseySpicy/Geeker-Admin/commit/ee585b29f3129b7143a10947fdd3184b197ad883))
+- 🧩 修改代码细节 && 优化注释 ([d86cb1f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d86cb1feb32e11a29e1c2bee54ea788c6c828d75))
+- 🧩 修改当菜单设置 isHide=true 时面包屑报错 ([66885c5](https://gitee.com/HalseySpicy/Geeker-Admin/commit/66885c5cc15c10ccadcd49a7bee27a821663e8a7))
+- 🧩 修改文件导出失败 bug ([208e720](https://gitee.com/HalseySpicy/Geeker-Admin/commit/208e720688969d2bc0fa0a6cc2bae3e3b991c806))
+- 🧩 修改 BUG ([540048a](https://gitee.com/HalseySpicy/Geeker-Admin/commit/540048a09be9b0df5443e275f38f43c80dcde51f))
+- 🧩 fix use pinia bug ([609aa69](https://gitee.com/HalseySpicy/Geeker-Admin/commit/609aa69aa9b3e0bb4e667ee7f76ab44051c2d2e8))
+- 修复登录后白屏 ([f986c5c](https://gitee.com/HalseySpicy/Geeker-Admin/commit/f986c5c44fc1df8d5c6a90e90239c06928e2f4a1))
+- **el-table:** 🧩 修复 el-table 在 safari 浏览器错乱 ([b776a48](https://gitee.com/HalseySpicy/Geeker-Admin/commit/b776a483636547c7cee723846ec33b2842550d13))
+
+### 0.0.6 (2022-08-22)
+
+### Features
+
+- 🚀 二次封装 wangEditor 富文本编辑器(50%) ([4f8e266](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4f8e266b7dd25a7df18d302e88e14454bfa3816b))
+- 🚀 请求全局 loading 更改为可配置 ([a75d62f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a75d62f627195ac420cf24ad7f51245b2e5bf04e))
+- 🚀 升级 element-plus 到 2.25 ([e98c035](https://gitee.com/HalseySpicy/Geeker-Admin/commit/e98c035caa6d1ab04319673e0db65837c6887126))
+- 🚀 添加 wangEditor 组件 ([d6d2fa7](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d6d2fa7d27887bb4a9e40e9d7037d4621812e16a))
+- 🚀 完成 wangEditor 富文本二次封装 ([7362bfb](https://gitee.com/HalseySpicy/Geeker-Admin/commit/7362bfbff19224045e3bb20fa939a78c556cc805))
+- 🚀 新增 主题色、灰色模式、色弱模式 配置 ([7821157](https://gitee.com/HalseySpicy/Geeker-Admin/commit/7821157059ed9c21d2844f75049f8fa999b19944))
+- 🚀 新增 pro-form ([3ab5a5b](https://gitee.com/HalseySpicy/Geeker-Admin/commit/3ab5a5b4f63fca227944ab6cc7928f6bf1f88ed4))
+- 🚀 新增 protbale 功能, 请查看详情 ([17f2bcd](https://gitee.com/HalseySpicy/Geeker-Admin/commit/17f2bcd67362365579ed8a572a3a9d17368ac64e))
+- 🚀 新增 SVG Icons ([977602c](https://gitee.com/HalseySpicy/Geeker-Admin/commit/977602c30b8997cb51426fe9498392edc249561d))
+- 🚀 新增 treeFilter data 参数 ([4280766](https://gitee.com/HalseySpicy/Geeker-Admin/commit/428076635d7a0e9f80109274d9523cf91aa5a10c))
+- 🚀 新增暗黑模式 ([215e499](https://gitee.com/HalseySpicy/Geeker-Admin/commit/215e499634b516234e653eac27a611d5f51ea6da))
+- 🚀 新增菜单搜索功能 ([4aa0eef](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4aa0eefaf427a2aa1aebd2b78dc049ffa776e838))
+- 🚀 新增界面配置功能 ([39ffc5e](https://gitee.com/HalseySpicy/Geeker-Admin/commit/39ffc5e9a77da3294055f23f8c87a4a44f3622f7))
+- 🚀 新增请求示例，参见 loginApi ([d49b227](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d49b227762ae48c3ca08f0dec02a3667daac8532))
+- 🚀 新增图标选择组件 ([ce5e165](https://gitee.com/HalseySpicy/Geeker-Admin/commit/ce5e165aed842074a9f7ac66ea97290710b541ee))
+- 🚀 新增图片上传组件 ([c50c421](https://gitee.com/HalseySpicy/Geeker-Admin/commit/c50c421bc3c5f7af68184cda88262c6fb1bd07e0))
+- 🚀 新增图片上传组件属性 ([d7670ed](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d7670ed94608c5410f3102d7b9427d8d856204b1))
+- 🚀 新增引导页 ([4fb6fb3](https://gitee.com/HalseySpicy/Geeker-Admin/commit/4fb6fb3a3eb34f82576e2378c311ff580f65226d))
+- 🚀 新增组件参数配置文档 ([0e11fc5](https://gitee.com/HalseySpicy/Geeker-Admin/commit/0e11fc59175d5d74730c3cb1fa2579effcca6e48))
+- 🚀 修改 pinia 持久化插件 ([a7691ae](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a7691aea614a035c4d381838149e08ad8477e49f))
+- 🚀 优化代码注释 && 升级 element 到 2.2.6 ([b84512b](https://gitee.com/HalseySpicy/Geeker-Admin/commit/b84512b3b102b00faa2f9241a32f5fbe27da4307))
+- 🚀 优化注释 && 代码细节问题 ([9d0ffa5](https://gitee.com/HalseySpicy/Geeker-Admin/commit/9d0ffa5ddecc4c73bec51208b05a6d44b1523b1f))
+- 🚀 预定义主题颜色 ([8219178](https://gitee.com/HalseySpicy/Geeker-Admin/commit/82191789bcf6d21c623aa61c5a64e502cea44c2c))
+- 🚀 增加 SearchForm 属性透传 ([eadb89b](https://gitee.com/HalseySpicy/Geeker-Admin/commit/eadb89b687596980a82401f44c53430081078d04))
+- 🚀 增加表格 treeFilter、更新整体布局样式 ([719b78f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/719b78f317589b983bc4b852b3bfd63a60d42a46))
+
+### Bug Fixes
+
+- 🧩 解决 useTable 查询参数 bug ([a86e408](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a86e4089b6da8ab6a55bc84e069d665c06471676))
+- 🧩 去除登陆页默认账号 ([3dda3fe](https://gitee.com/HalseySpicy/Geeker-Admin/commit/3dda3fee3fef38fdafcfdf3b1bf16e73033c6fe0))
+- 🧩 删除 protable 组件 image 配置属性 ([d699fe7](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d699fe7bd55eaaccfad9b94105c1b43ae64d1c34))
+- 🧩 修复 国际化 产生的 bug ([ec4f74a](https://gitee.com/HalseySpicy/Geeker-Admin/commit/ec4f74ae654e7287fc08bb31fa3ee3d2c76164eb))
+- 🧩 修复 axios 请求超时未拦截错误 ([856468e](https://gitee.com/HalseySpicy/Geeker-Admin/commit/856468e84f8356d35c25097f3115dfe3d496914c))
+- 🧩 修复 Pro-Tabel 列设置 bug ([a3b86a0](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a3b86a06a6d9cd4b6f7ac6e108727a0b4852e9a0))
+- 🧩 修复 pro-table 格式报错问题 ([2ef11fd](https://gitee.com/HalseySpicy/Geeker-Admin/commit/2ef11fda6d373c3214df801ae789cafc1a033dcb))
+- 🧩 修复打包失败问题 ([1778651](https://gitee.com/HalseySpicy/Geeker-Admin/commit/1778651781a1bb8bfe4ea61dafb9b48773fef5d7))
+- 🧩 修复路由跳转两次不能携带参数问题 ([8b583f3](https://gitee.com/HalseySpicy/Geeker-Admin/commit/8b583f3d5f05b77ec2a35082557bae431441a586))
+- 🧩 修复请求 header 参数丢失 bug ([3598dbc](https://gitee.com/HalseySpicy/Geeker-Admin/commit/3598dbc2a83aaacf9dada4e2c38a3ca27cbe4cfd))
+- 🧩 修复上传组件细节问题 ([8528358](https://gitee.com/HalseySpicy/Geeker-Admin/commit/8528358925ea809cf52f55015355345e87607351))
+- 🧩 修复 loading 请求 bug ([a3270ec](https://gitee.com/HalseySpicy/Geeker-Admin/commit/a3270ecfa2e7c2484729ae6fd599febcc4f7be6b))
+- 🧩 修改 Pro-Table 表头渲染方式 ([aa57294](https://gitee.com/HalseySpicy/Geeker-Admin/commit/aa5729489942eaa6dca9928b70153af2de753a9c))
+- 🧩 修改 useTable 存在的 bug ([5bb55b3](https://gitee.com/HalseySpicy/Geeker-Admin/commit/5bb55b32c0b46bbf55fa0d49efe3a15d0b1673a4))
+- 🧩 修改 useTable 钩子中的 bug ([675aed8](https://gitee.com/HalseySpicy/Geeker-Admin/commit/675aed806e62c236b40bc933402c86085289df4e))
+- 🧩 修改 useTable 携带默认查询参数 bug ([ee585b2](https://gitee.com/HalseySpicy/Geeker-Admin/commit/ee585b29f3129b7143a10947fdd3184b197ad883))
+- 🧩 修改代码细节 && 优化注释 ([d86cb1f](https://gitee.com/HalseySpicy/Geeker-Admin/commit/d86cb1feb32e11a29e1c2bee54ea788c6c828d75))
+- 🧩 修改文件导出失败 bug ([208e720](https://gitee.com/HalseySpicy/Geeker-Admin/commit/208e720688969d2bc0fa0a6cc2bae3e3b991c806))
+- 🧩 fix use pinia bug ([609aa69](https://gitee.com/HalseySpicy/Geeker-Admin/commit/609aa69aa9b3e0bb4e667ee7f76ab44051c2d2e8))
+- 修复登录后白屏 ([f986c5c](https://gitee.com/HalseySpicy/Geeker-Admin/commit/f986c5c44fc1df8d5c6a90e90239c06928e2f4a1))
+
+### [0.0.5](https://github.com/HalseySpicy/Geeker-Admin/compare/v0.0.4...v0.0.5) (2022-07-21)
+
+### Features
+
+- 🚀 新增请求示例，参见 loginApi ([d49b227](https://github.com/HalseySpicy/Geeker-Admin/commit/d49b227762ae48c3ca08f0dec02a3667daac8532))
+
+### Bug Fixes
+
+- 🧩 解决 useTable 查询参数 bug ([a86e408](https://github.com/HalseySpicy/Geeker-Admin/commit/a86e4089b6da8ab6a55bc84e069d665c06471676))
+- 🧩 修复 axios 请求超时未拦截错误 ([856468e](https://github.com/HalseySpicy/Geeker-Admin/commit/856468e84f8356d35c25097f3115dfe3d496914c))
+- 🧩 修复请求 header 参数丢失 bug ([3598dbc](https://github.com/HalseySpicy/Geeker-Admin/commit/3598dbc2a83aaacf9dada4e2c38a3ca27cbe4cfd))
+
+### [0.0.4](https://github.com/HalseySpicy/Geeker-Admin/compare/v0.0.3...v0.0.4) (2022-07-12)
+
+### Features
+
+- 🚀 新增 主题色、灰色模式、色弱模式 配置 ([7821157](https://github.com/HalseySpicy/Geeker-Admin/commit/7821157059ed9c21d2844f75049f8fa999b19944))
+- 🚀 新增 pro-form ([3ab5a5b](https://github.com/HalseySpicy/Geeker-Admin/commit/3ab5a5b4f63fca227944ab6cc7928f6bf1f88ed4))
+- 🚀 新增菜单搜索功能 ([4aa0eef](https://github.com/HalseySpicy/Geeker-Admin/commit/4aa0eefaf427a2aa1aebd2b78dc049ffa776e838))
+- 🚀 新增界面配置功能 ([39ffc5e](https://github.com/HalseySpicy/Geeker-Admin/commit/39ffc5e9a77da3294055f23f8c87a4a44f3622f7))
+- 🚀 预定义主题颜色 ([8219178](https://github.com/HalseySpicy/Geeker-Admin/commit/82191789bcf6d21c623aa61c5a64e502cea44c2c))
+- 🚀 增加 SearchForm 属性透传 ([eadb89b](https://github.com/HalseySpicy/Geeker-Admin/commit/eadb89b687596980a82401f44c53430081078d04))
+
+### Bug Fixes
+
+- 🧩 修复 pro-table 格式报错问题 ([2ef11fd](https://github.com/HalseySpicy/Geeker-Admin/commit/2ef11fda6d373c3214df801ae789cafc1a033dcb))
+- 🧩 修改文件导出失败 bug ([208e720](https://github.com/HalseySpicy/Geeker-Admin/commit/208e720688969d2bc0fa0a6cc2bae3e3b991c806))
+- 🧩 fix use pinia bug ([609aa69](https://github.com/HalseySpicy/Geeker-Admin/commit/609aa69aa9b3e0bb4e667ee7f76ab44051c2d2e8))
+
+### [0.0.2](https://github.com/HalseySpicy/Geeker-Admin/compare/v0.0.3...v0.0.2) (2022-06-29)
+
+### 0.0.2 (2022-06-20)
+
+### Features
+
+- 🚀 请求全局 loading 更改为可配置 ([a75d62f](https://github.com/HalseySpicy/Geeker-Admin/commit/a75d62f627195ac420cf24ad7f51245b2e5bf04e))
+- 🚀 升级 element-plus 到 2.2.5 ([e98c035](https://github.com/HalseySpicy/Geeker-Admin/commit/e98c035caa6d1ab04319673e0db65837c6887126))
+- 🚀 新增暗黑模式 ([215e499](https://github.com/HalseySpicy/Geeker-Admin/commit/215e499634b516234e653eac27a611d5f51ea6da))
+- 🚀 新增图标选择组件 ([ce5e165](https://github.com/HalseySpicy/Geeker-Admin/commit/ce5e165aed842074a9f7ac66ea97290710b541ee))
+- 🚀 修改 pinia 持久化插件 ([a7691ae](https://github.com/HalseySpicy/Geeker-Admin/commit/a7691aea614a035c4d381838149e08ad8477e49f))
+- 🚀 优化代码注释 && 升级 element 到 2.2.6 ([b84512b](https://github.com/HalseySpicy/Geeker-Admin/commit/b84512b3b102b00faa2f9241a32f5fbe27da4307))
+
+### Bug Fixes
+
+- 🧩 去除登陆页默认账号 ([3dda3fe](https://github.com/HalseySpicy/Geeker-Admin/commit/3dda3fee3fef38fdafcfdf3b1bf16e73033c6fe0))
+- 🧩 修复 Pro-Table 列设置 bug ([a3b86a0](https://github.com/HalseySpicy/Geeker-Admin/commit/a3b86a06a6d9cd4b6f7ac6e108727a0b4852e9a0))
+- 🧩 修复 loading 请求 bug ([a3270ec](https://github.com/HalseySpicy/Geeker-Admin/commit/a3270ecfa2e7c2484729ae6fd599febcc4f7be6b))
+- 🧩 修改 Pro-Table 表头渲染方式 ([aa57294](https://github.com/HalseySpicy/Geeker-Admin/commit/aa5729489942eaa6dca9928b70153af2de753a9c))
+- 🧩 修改 useTable 存在的 bug ([5bb55b3](https://github.com/HalseySpicy/Geeker-Admin/commit/5bb55b32c0b46bbf55fa0d49efe3a15d0b1673a4))
+- 🧩 修改 useTable 钩子中的 bug ([675aed8](https://github.com/HalseySpicy/Geeker-Admin/commit/675aed806e62c236b40bc933402c86085289df4e))
+- 🧩 修改 useTable 携带默认查询参数 bug ([ee585b2](https://github.com/HalseySpicy/Geeker-Admin/commit/ee585b29f3129b7143a10947fdd3184b197ad883))
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Halsey
+
+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.
--- a/README.md
+++ b/README.md
@ -0,0 +1,181 @@
+使用目前最新技术栈开发。项目提供强大的 [ProTable](https://juejin.cn/post/7166068828202336263) 组件，在一定程度上提高您的开发效率。另外本项目还封装了一些常用组件、Hooks、指令、动态路由、按钮级别权限控制等功能。
+
+### 项目功能 🔨
+
+- 使用 Vue3.3 + TypeScript 开发，单文件组件**＜script setup＞**
+- 采用 Vite5 作为项目开发、打包工具（配置 gzip/brotli 打包、tsx 语法、跨域代理…）
+- 使用 Pinia 替代 Vuex，轻量、简单、易用，集成 Pinia 持久化插件
+- 使用 TypeScript 对 Axios 整个二次封装（请求拦截、取消、常用请求封装…）
+- 基于 Element 二次封装 [ProTable](https://juejin.cn/post/7166068828202336263) 组件，表格页面全部为配置项 Columns
+- 支持 Element 组件大小切换、多主题布局、暗黑模式、i18n 国际化
+- 使用 VueRouter 配置动态路由权限拦截、路由懒加载，支持页面按钮权限控制
+- 使用 KeepAlive 对页面进行缓存，支持多级嵌套路由缓存
+- 常用自定义指令开发（权限、复制、水印、拖拽、节流、防抖、长按…）
+- 使用 Prettier 统一格式化代码，集成 ESLint、Stylelint 代码校验规范
+- 使用 husky、lint-staged、commitlint、czg、cz-git 规范提交信息
+
+### 安装使用步骤 📔
+
+- **Clone：**
+
+
+- **Install：**
+
+```text
+pnpm install
+```
+
+- **Run：**
+
+```text
+pnpm dev
+pnpm serve
+```
+
+- **Build：**
+
+```text
+# 开发环境
+pnpm build:dev
+
+# 测试环境
+pnpm build:test
+
+# 生产环境
+pnpm build:pro
+```
+
+- **Lint：**
+
+```text
+# eslint 检测代码
+pnpm lint:eslint
+
+# prettier 格式化代码
+pnpm lint:prettier
+
+# stylelint 格式化样式
+pnpm lint:stylelint
+```
+
+- **commit：**
+
+```text
+# 提交代码（提交前会自动执行 lint:lint-staged 命令）
+pnpm commit
+```
+
+### 项目截图 📷
+
+- 登录页：
+
+![login_light](https://i.imgtg.com/2023/04/13/8tknp.png)
+
+![login_dark](https://i.imgtg.com/2023/04/13/8tmpP.png)
+
+- 首页：
+
+![home_light](https://i.imgtg.com/2023/04/13/8tl1j.png)
+
+![home_dark](https://i.imgtg.com/2023/04/13/8tpfb.png)
+
+- 表格页：
+
+![table_light](https://i.imgtg.com/2023/04/13/8tfMx.png)
+
+![table_dark](https://i.imgtg.com/2023/04/13/8tv8F.png)
+
+- 数据可视化
+
+![dashboard](https://i.imgtg.com/2023/04/14/82Grx.png)
+
+- 数据大屏：
+
+![dataScreen](https://i.imgtg.com/2023/01/16/QP8HF.png)
+
+### 文件资源目录 📚
+
+```text
+Geeker-Admin
+├─ .husky                  # husky 配置文件
+├─ .vscode                 # VSCode 推荐配置
+├─ build                   # Vite 配置项
+├─ public                  # 静态资源文件（该文件夹不会被打包）
+├─ src
+│  ├─ api                  # API 接口管理
+│  ├─ assets               # 静态资源文件
+│  ├─ components           # 全局组件
+│  ├─ config               # 全局配置项
+│  ├─ directives           # 全局指令文件
+│  ├─ enums                # 项目常用枚举
+│  ├─ hooks                # 常用 Hooks 封装
+│  ├─ languages            # 语言国际化 i18n
+│  ├─ layouts              # 框架布局模块
+│  ├─ routers              # 路由管理
+│  ├─ stores               # pinia store
+│  ├─ styles               # 全局样式文件
+│  ├─ typings              # 全局 ts 声明
+│  ├─ utils                # 常用工具库
+│  ├─ views                # 项目所有页面
+│  ├─ App.vue              # 项目主组件
+│  ├─ main.ts              # 项目入口文件
+│  └─ vite-env.d.ts        # 指定 ts 识别 vue
+├─ .editorconfig           # 统一不同编辑器的编码风格
+├─ .env                    # vite 常用配置
+├─ .env.development        # 开发环境配置
+├─ .env.production         # 生产环境配置
+├─ .env.test               # 测试环境配置
+├─ .eslintignore           # 忽略 Eslint 校验
+├─ .eslintrc.cjs           # Eslint 校验配置文件
+├─ .gitignore              # 忽略 git 提交
+├─ .prettierignore         # 忽略 Prettier 格式化
+├─ .prettierrc.cjs         # Prettier 格式化配置
+├─ .stylelintignore        # 忽略 stylelint 格式化
+├─ .stylelintrc.cjs        # stylelint 样式格式化配置
+├─ CHANGELOG.md            # 项目更新日志
+├─ commitlint.config.cjs   # git 提交规范配置
+├─ index.html              # 入口 html
+├─ LICENSE                 # 开源协议文件
+├─ lint-staged.config.cjs  # lint-staged 配置文件
+├─ package-lock.json       # 依赖包包版本锁
+├─ package.json            # 依赖包管理
+├─ postcss.config.cjs      # postcss 配置
+├─ README.md               # README 介绍
+├─ tsconfig.json           # typescript 全局配置
+└─ vite.config.ts          # vite 全局配置文件
+```
+
+### 浏览器支持 🌎
+
+- 本地开发推荐使用 Chrome 最新版浏览器 [Download](https://www.google.com/intl/zh-CN/chrome/)。
+- 生产环境支持现代浏览器，不再支持 IE 浏览器，更多浏览器可以查看 [Can I Use Es Module](https://caniuse.com/?search=ESModule)。
+
+| ![IE](https://i.imgtg.com/2023/04/11/8z7ot.png) | ![Edge](https://i.imgtg.com/2023/04/11/8zr3p.png) | ![Firefox](https://i.imgtg.com/2023/04/11/8zKiU.png) | ![Chrome](https://i.imgtg.com/2023/04/11/8zNrx.png) | ![Safari](https://i.imgtg.com/2023/04/11/8zeGj.png) |
+| :---------------------------------------------: | :-----------------------------------------------: | :--------------------------------------------------: | :-------------------------------------------------: | :-------------------------------------------------: |
+|                   not support                   |                  last 2 versions                  |                   last 2 versions                    |                   last 2 versions                   |                   last 2 versions                   |
+
+### 项目后台接口 🧩
+
+项目后台接口完全采用 Mock 数据，感谢以下 Mock 平台支持：
+
+- FastMock： https://www.fastmock.site
+- EasyMock：https://mock.mengxuegu.com
+
+### 微信交流群 👨‍👨‍👦‍👦
+
+微信一群、二群、三群、四群已满，扫描二维码进入五群（支持知识付费）🤪
+
+|                            微信二维码                            |
+| :--------------------------------------------------------------: |
+| <img src="https://z1.ax1x.com/2023/12/02/pisvr1U.jpg" width=170> |
+
+### 捐赠 🍵
+
+如果你正在使用这个项目或者喜欢这个项目的，可以通过以下方式支持我：
+
+- Star、Fork、Watch 一键三连 🚀
+- 通过微信、支付宝一次性捐款 ❤
+
+|                                        微信                                        |                                       支付宝                                       |
+| :--------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------: |
+| <img src="https://i.imgtg.com/2023/01/16/QRzBX.png" alt="Alipay QRcode" width=170> | <img src="https://i.imgtg.com/2023/01/16/QRFZt.png" alt="Wechat QRcode" width=170> |
--- a/build/getEnv.ts
+++ b/build/getEnv.ts
@ -0,0 +1,46 @@
+import path from "path";
+
+export function isDevFn(mode: string): boolean {
+  return mode === "development";
+}
+
+export function isProdFn(mode: string): boolean {
+  return mode === "production";
+}
+
+export function isTestFn(mode: string): boolean {
+  return mode === "test";
+}
+
+/**
+ * Whether to generate package preview
+ */
+export function isReportMode(): boolean {
+  return process.env.VITE_REPORT === "true";
+}
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {};
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, "\n");
+    realName = realName === "true" ? true : realName === "false" ? false : realName;
+    if (envName === "VITE_PORT") realName = Number(realName);
+    if (envName === "VITE_PROXY") {
+      try {
+        realName = JSON.parse(realName);
+      } catch (error) {}
+    }
+    ret[envName] = realName;
+  }
+  return ret;
+}
+
+/**
+ * Get user root directory
+ * @param dir file path
+ */
+export function getRootPath(...dir: string[]) {
+  return path.resolve(process.cwd(), ...dir);
+}
--- a/build/plugins.ts
+++ b/build/plugins.ts
@ -0,0 +1,109 @@
+import { resolve } from "path";
+import { PluginOption } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+import { visualizer } from "rollup-plugin-visualizer";
+import simpleHtmlPlugin from "vite-plugin-simple-html";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import eslintPlugin from "vite-plugin-eslint";
+import viteCompression from "vite-plugin-compression";
+import vueSetupExtend from "unplugin-vue-setup-extend-plus/vite";
+
+/**
+ * 创建 vite 插件
+ * @param viteEnv
+ */
+export const createVitePlugins = (viteEnv: ViteEnv): (PluginOption | PluginOption[])[] => {
+  const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_PWA } = viteEnv;
+  return [
+    vue(),
+    // vue 可以使用 jsx/tsx 语法
+    vueJsx(),
+    // esLint 报错信息显示在浏览器界面上
+    eslintPlugin(),
+    // name 可以写在 script 标签上
+    vueSetupExtend({}),
+    // 创建打包压缩配置
+    createCompression(viteEnv),
+    // 注入变量到 html 文件
+    simpleHtmlPlugin({
+      minify: true,
+      inject: {
+        data: { title: VITE_GLOB_APP_TITLE }
+      }
+    }),
+    // 使用 svg 图标
+    createSvgIconsPlugin({
+      iconDirs: [resolve(process.cwd(), "src/assets/icons")],
+      symbolId: "icon-[dir]-[name]"
+    }),
+    // vitePWA
+    VITE_PWA && createVitePwa(viteEnv),
+    // 是否生成包预览，分析依赖包大小做优化处理
+    VITE_REPORT && (visualizer({ filename: "stats.html", gzipSize: true, brotliSize: true }) as PluginOption)
+  ];
+};
+
+/**
+ * @description 根据 compress 配置，生成不同的压缩规则
+ * @param viteEnv
+ */
+const createCompression = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
+  const { VITE_BUILD_COMPRESS = "none", VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+  const compressList = VITE_BUILD_COMPRESS.split(",");
+  const plugins: PluginOption[] = [];
+  if (compressList.includes("gzip")) {
+    plugins.push(
+      viteCompression({
+        ext: ".gz",
+        algorithm: "gzip",
+        deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+      })
+    );
+  }
+  if (compressList.includes("brotli")) {
+    plugins.push(
+      viteCompression({
+        ext: ".br",
+        algorithm: "brotliCompress",
+        deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+      })
+    );
+  }
+  return plugins;
+};
+
+/**
+ * @description VitePwa
+ * @param viteEnv
+ */
+const createVitePwa = (viteEnv: ViteEnv): PluginOption | PluginOption[] => {
+  const { VITE_GLOB_APP_TITLE } = viteEnv;
+  return VitePWA({
+    registerType: "autoUpdate",
+    manifest: {
+      name: VITE_GLOB_APP_TITLE,
+      short_name: VITE_GLOB_APP_TITLE,
+      theme_color: "#ffffff",
+      icons: [
+        {
+          src: "/logo.png",
+          sizes: "192x192",
+          type: "image/png"
+        },
+        {
+          src: "/logo.png",
+          sizes: "512x512",
+          type: "image/png"
+        },
+        {
+          src: "/logo.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any maskable"
+        }
+      ]
+    }
+  });
+};
--- a/build/proxy.ts
+++ b/build/proxy.ts
@ -0,0 +1,30 @@
+import type { ProxyOptions } from "vite";
+
+type ProxyItem = [string, string];
+
+type ProxyList = ProxyItem[];
+
+type ProxyTargetList = Record<string, ProxyOptions>;
+
+/**
+ * 创建代理，用于解析 .env.development 代理配置
+ * @param list
+ */
+export function createProxy(list: ProxyList = []) {
+  const ret: ProxyTargetList = {};
+  for (const [prefix, target] of list) {
+    const httpsRE = /^https:\/\//;
+    const isHttps = httpsRE.test(target);
+
+    // https://github.com/http-party/node-http-proxy#options
+    ret[prefix] = {
+      target: target,
+      changeOrigin: true,
+      ws: true,
+      rewrite: path => path.replace(new RegExp(`^${prefix}`), ""),
+      // https is require secure=false
+      ...(isHttps ? { secure: false } : {})
+    };
+  }
+  return ret;
+}
--- a/commitlint.config.cjs
+++ b/commitlint.config.cjs
@ -0,0 +1,162 @@
+// @see: https://cz-git.qbenben.com/zh/guide
+const fs = require("fs");
+const path = require("path");
+
+const scopes = fs
+  .readdirSync(path.resolve(__dirname, "src"), { withFileTypes: true })
+  .filter(dirent => dirent.isDirectory())
+  .map(dirent => dirent.name.replace(/s$/, ""));
+
+/** @type {import('cz-git').UserConfig} */
+module.exports = {
+  ignores: [commit => commit.includes("init")],
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    // @see: https://commitlint.js.org/#/reference-rules
+    "body-leading-blank": [2, "always"],
+    "footer-leading-blank": [1, "always"],
+    "header-max-length": [2, "always", 108],
+    "subject-empty": [2, "never"],
+    "type-empty": [2, "never"],
+    "subject-case": [0],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "feat",
+        "fix",
+        "docs",
+        "style",
+        "refactor",
+        "perf",
+        "test",
+        "build",
+        "ci",
+        "chore",
+        "revert",
+        "wip",
+        "workflow",
+        "types",
+        "release"
+      ]
+    ]
+  },
+  prompt: {
+    messages: {
+      type: "Select the type of change that you're committing:",
+      scope: "Denote the SCOPE of this change (optional):",
+      customScope: "Denote the SCOPE of this change:",
+      subject: "Write a SHORT, IMPERATIVE tense description of the change:\n",
+      body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
+      breaking: 'List any BREAKING CHANGES (optional). Use "|" to break new line:\n',
+      footerPrefixsSelect: "Select the ISSUES type of changeList by this change (optional):",
+      customFooterPrefixs: "Input ISSUES prefix:",
+      footer: "List any ISSUES by this change. E.g.: #31, #34:\n",
+      confirmCommit: "Are you sure you want to proceed with the commit above?"
+      // 中文版
+      // type: "选择你要提交的类型 :",
+      // scope: "选择一个提交范围（可选）:",
+      // customScope: "请输入自定义的提交范围 :",
+      // subject: "填写简短精炼的变更描述 :\n",
+      // body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
+      // breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
+      // footerPrefixsSelect: "选择关联issue前缀（可选）:",
+      // customFooterPrefixs: "输入自定义issue前缀 :",
+      // footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
+      // confirmCommit: "是否提交或修改commit ?"
+    },
+    types: [
+      {
+        value: "feat",
+        name: "feat:     🚀  A new feature",
+        emoji: "🚀"
+      },
+      {
+        value: "fix",
+        name: "fix:      🧩  A bug fix",
+        emoji: "🧩"
+      },
+      {
+        value: "docs",
+        name: "docs:     📚  Documentation only changes",
+        emoji: "📚"
+      },
+      {
+        value: "style",
+        name: "style:    🎨  Changes that do not affect the meaning of the code",
+        emoji: "🎨"
+      },
+      {
+        value: "refactor",
+        name: "refactor: ♻️   A code change that neither fixes a bug nor adds a feature",
+        emoji: "♻️"
+      },
+      {
+        value: "perf",
+        name: "perf:     ⚡️  A code change that improves performance",
+        emoji: "⚡️"
+      },
+      {
+        value: "test",
+        name: "test:     ✅  Adding missing tests or correcting existing tests",
+        emoji: "✅"
+      },
+      {
+        value: "build",
+        name: "build:    📦️   Changes that affect the build system or external dependencies",
+        emoji: "📦️"
+      },
+      {
+        value: "ci",
+        name: "ci:       🎡  Changes to our CI configuration files and scripts",
+        emoji: "🎡"
+      },
+      {
+        value: "chore",
+        name: "chore:    🔨  Other changes that don't modify src or test files",
+        emoji: "🔨"
+      },
+      {
+        value: "revert",
+        name: "revert:   ⏪️  Reverts a previous commit",
+        emoji: "⏪️"
+      },
+      {
+        value: "wip",
+        name: "wip:      🕔  work in process",
+        emoji: "🕔"
+      },
+      {
+        value: "workflow",
+        name: "workflow: 📋  workflow improvements",
+        emoji: "📋"
+      },
+      {
+        value: "type",
+        name: "type:     🔰  type definition file changes",
+        emoji: "🔰"
+      }
+      // 中文版
+      // { value: "feat", name: "特性:   🚀  新增功能", emoji: "🚀" },
+      // { value: "fix", name: "修复:   🧩  修复缺陷", emoji: "🧩" },
+      // { value: "docs", name: "文档:   📚  文档变更", emoji: "📚" },
+      // { value: "style", name: "格式:   🎨  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: "🎨" },
+      // { value: "refactor", name: "重构:   ♻️  代码重构（不包括 bug 修复、功能新增）", emoji: "♻️" },
+      // { value: "perf", name: "性能:    ⚡️  性能优化", emoji: "⚡️" },
+      // { value: "test", name: "测试:   ✅  添加疏漏测试或已有测试改动", emoji: "✅" },
+      // { value: "build", name: "构建:   📦️  构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）", emoji: "📦️" },
+      // { value: "ci", name: "集成:   🎡  修改 CI 配置、脚本", emoji: "🎡" },
+      // { value: "revert", name: "回退:   ⏪️  回滚 commit", emoji: "⏪️" },
+      // { value: "chore", name: "其他:   🔨  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: "🔨" },
+      // { value: "wip", name: "开发:   🕔  正在开发中", emoji: "🕔" },
+      // { value: "workflow", name: "工作流:   📋  工作流程改进", emoji: "📋" },
+      // { value: "types", name: "类型:   🔰  类型定义文件修改", emoji: "🔰" }
+    ],
+    useEmoji: true,
+    scopes: [...scopes],
+    customScopesAlign: "bottom",
+    emptyScopesAlias: "empty",
+    customScopesAlias: "custom",
+    allowBreakingChanges: ["feat", "fix"]
+  }
+};
--- a/index.html
+++ b/index.html
@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vue.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%- title %></title>
+  </head>
+  <body>
+    <div id="app">
+      <style>
+        html,
+        body,
+        #app {
+          width: 100%;
+          height: 100%;
+          padding: 0;
+          margin: 0;
+        }
+        .loading-box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+        }
+        .loading-box .loading-wrap {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 98px;
+        }
+        .dot {
+          position: relative;
+          box-sizing: border-box;
+          display: inline-block;
+          width: 32px;
+          height: 32px;
+          font-size: 32px;
+          transform: rotate(45deg);
+          animation: ant-rotate 1.2s infinite linear;
+        }
+        .dot i {
+          position: absolute;
+          display: block;
+          width: 14px;
+          height: 14px;
+          background-color: #409eff;
+          border-radius: 100%;
+          opacity: 0.3;
+          transform: scale(0.75);
+          transform-origin: 50% 50%;
+          animation: ant-spin-move 1s infinite linear alternate;
+        }
+        .dot i:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+        .dot i:nth-child(2) {
+          top: 0;
+          right: 0;
+          animation-delay: 0.4s;
+        }
+        .dot i:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          animation-delay: 0.8s;
+        }
+        .dot i:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          animation-delay: 1.2s;
+        }
+
+        @keyframes ant-rotate {
+          to {
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes ant-spin-move {
+          to {
+            opacity: 1;
+          }
+        }
+      </style>
+      <div class="loading-box">
+        <div class="loading-wrap">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+      </div>
+    </div>
+    <script>
+      const globalState = JSON.parse(window.localStorage.getItem("geeker-global"));
+      if (globalState) {
+        const dot = document.querySelectorAll(".dot i");
+        const html = document.querySelector("html");
+        dot.forEach(item => (item.style.background = globalState.primary));
+        if (globalState.isDark) html.style.background = "#141414";
+      }
+    </script>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/lint-staged.config.cjs
+++ b/lint-staged.config.cjs
@ -0,0 +1,8 @@
+module.exports = {
+  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
+  "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
+  "package.json": ["prettier --write"],
+  "*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
+  "*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
+  "*.md": ["prettier --write"]
+};
--- a/package.json
+++ b/package.json
@ -0,0 +1,124 @@
+{
+  "name": "smart-culture-ux",
+  "private": true,
+  "version": "1.2.0",
+  "type": "module",
+  "description": "geeker-admin open source management system",
+  "author": {
+    "name": "Geeker",
+    "email": "848130454@qq.com",
+    "url": "https://github.com/HalseySpicy"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/HalseySpicy/Geeker-Admin",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:HalseySpicy/Geeker-Admin.git"
+  },
+  "bugs": {
+    "url": "https://github.com/HalseySpicy/Geeker-Admin/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "serve": "vite",
+    "build:dev": "vue-tsc && vite build --mode development",
+    "build:test": "vue-tsc && vite build --mode test",
+    "build:pro": "vue-tsc && vite build --mode production",
+    "type:check": "vue-tsc --noEmit --skipLibCheck",
+    "preview": "npm run build:dev && vite preview",
+    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
+    "lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:lint-staged": "lint-staged",
+    "prepare": "husky install",
+    "release": "standard-version",
+    "commit": "git add -A && czg && git push"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^10.6.1",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "axios": "^1.6.2",
+    "dayjs": "^1.11.10",
+    "driver.js": "^1.3.1",
+    "echarts": "^5.4.3",
+    "echarts-liquidfill": "^3.1.0",
+    "element-plus": "^2.4.3",
+    "md5": "^2.3.0",
+    "mitt": "^3.0.1",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.0",
+    "qs": "^6.11.2",
+    "screenfull": "^6.0.2",
+    "sortablejs": "^1.15.1",
+    "vue": "^3.3.9",
+    "vue-i18n": "^9.8.0",
+    "vue-router": "^4.2.5",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.4.3",
+    "@commitlint/config-conventional": "^18.4.3",
+    "@types/md5": "^2.3.5",
+    "@types/nprogress": "^0.2.3",
+    "@types/qs": "^6.9.10",
+    "@types/sortablejs": "^1.15.7",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
+    "@vitejs/plugin-vue": "^4.5.1",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "autoprefixer": "^10.4.16",
+    "cz-git": "^1.7.1",
+    "czg": "^1.7.1",
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-vue": "^9.19.2",
+    "husky": "^8.0.3",
+    "lint-staged": "^15.1.0",
+    "postcss": "^8.4.32",
+    "postcss-html": "^1.5.0",
+    "prettier": "^3.1.0",
+    "rollup-plugin-visualizer": "^5.9.3",
+    "sass": "^1.69.5",
+    "standard-version": "^9.5.0",
+    "stylelint": "^15.11.0",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^4.4.0",
+    "stylelint-config-recommended-scss": "^13.1.0",
+    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.1.0",
+    "typescript": "^5.3.2",
+    "unplugin-vue-setup-extend-plus": "^1.0.0",
+    "vite": "^5.0.4",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-pwa": "^0.17.2",
+    "vite-plugin-simple-html": "^0.1.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-tsc": "^1.8.24"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "browserslist": {
+    "production": [
+      "> 1%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git"
+    }
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/vue.svg
+++ b/public/vue.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" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,44 @@
+<template>
+  <el-config-provider :locale="locale" :size="assemblySize" :button="buttonConfig">
+    <router-view></router-view>
+  </el-config-provider>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { getBrowserLang } from "@/utils";
+import { useTheme } from "@/hooks/useTheme";
+import { ElConfigProvider } from "element-plus";
+import { LanguageType } from "./stores/interface";
+import { useGlobalStore } from "@/stores/modules/global";
+import en from "element-plus/es/locale/lang/en";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+
+const globalStore = useGlobalStore();
+
+// init theme
+const { initTheme } = useTheme();
+initTheme();
+
+// init language
+const i18n = useI18n();
+onMounted(() => {
+  const language = globalStore.language ?? getBrowserLang();
+  i18n.locale.value = language;
+  globalStore.setGlobalState("language", language as LanguageType);
+});
+
+// element language
+const locale = computed(() => {
+  if (globalStore.language == "zh") return zhCn;
+  if (globalStore.language == "en") return en;
+  return getBrowserLang() == "zh" ? zhCn : en;
+});
+
+// element assemblySize
+const assemblySize = computed(() => globalStore.assemblySize);
+
+// element button config
+const buttonConfig = reactive({ autoInsertSpace: false });
+</script>
--- a/src/api/config/servicePort.ts
+++ b/src/api/config/servicePort.ts
@ -0,0 +1,3 @@
+// 后端微服务模块前缀
+export const PORT1 = "/geeker";
+export const PORT2 = "/hooks";
--- a/src/api/helper/axiosCancel.ts
+++ b/src/api/helper/axiosCancel.ts
@ -0,0 +1,46 @@
+import { CustomAxiosRequestConfig } from "../index";
+import qs from "qs";
+
+// 声明一个 Map 用于存储每个请求的标识 和 取消函数
+let pendingMap = new Map<string, AbortController>();
+
+// 序列化参数
+export const getPendingUrl = (config: CustomAxiosRequestConfig) =>
+  [config.method, config.url, qs.stringify(config.data), qs.stringify(config.params)].join("&");
+
+export class AxiosCanceler {
+  /**
+   * @description: 添加请求
+   * @param {Object} config
+   * @return void
+   */
+  addPending(config: CustomAxiosRequestConfig) {
+    // 在请求开始前，对之前的请求做检查取消操作
+    this.removePending(config);
+    const url = getPendingUrl(config);
+    const controller = new AbortController();
+    config.signal = controller.signal;
+    pendingMap.set(url, controller);
+  }
+
+  /**
+   * @description: 移除请求
+   * @param {Object} config
+   */
+  removePending(config: CustomAxiosRequestConfig) {
+    const url = getPendingUrl(config);
+    // 如果在 pending 中存在当前请求标识，需要取消当前请求
+    const controller = pendingMap.get(url);
+    controller && controller.abort();
+  }
+
+  /**
+   * @description: 清空所有pending
+   */
+  removeAllPending() {
+    pendingMap.forEach(controller => {
+      controller && controller.abort();
+    });
+    pendingMap.clear();
+  }
+}
--- a/src/api/helper/checkStatus.ts
+++ b/src/api/helper/checkStatus.ts
@ -0,0 +1,43 @@
+import { ElMessage } from "element-plus";
+
+/**
+ * @description: 校验网络请求状态码
+ * @param {Number} status
+ * @return void
+ */
+export const checkStatus = (status: number) => {
+  switch (status) {
+    case 400:
+      ElMessage.error("请求失败！请您稍后重试");
+      break;
+    case 401:
+      ElMessage.error("登录失效！请您重新登录");
+      break;
+    case 403:
+      ElMessage.error("当前账号无权限访问！");
+      break;
+    case 404:
+      ElMessage.error("你所访问的资源不存在！");
+      break;
+    case 405:
+      ElMessage.error("请求方式错误！请您稍后重试");
+      break;
+    case 408:
+      ElMessage.error("请求超时！请您稍后重试");
+      break;
+    case 500:
+      ElMessage.error("服务异常！");
+      break;
+    case 502:
+      ElMessage.error("网关错误！");
+      break;
+    case 503:
+      ElMessage.error("服务不可用！");
+      break;
+    case 504:
+      ElMessage.error("网关超时！");
+      break;
+    default:
+      ElMessage.error("请求失败！");
+  }
+};
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -0,0 +1,118 @@
+import axios, { AxiosInstance, AxiosError, AxiosRequestConfig, InternalAxiosRequestConfig, AxiosResponse } from "axios";
+import { showFullScreenLoading, tryHideFullScreenLoading } from "@/components/Loading/fullScreen";
+import { LOGIN_URL } from "@/config";
+import { ElMessage } from "element-plus";
+import { ResultData } from "@/api/interface";
+import { ResultEnum } from "@/enums/httpEnum";
+import { checkStatus } from "./helper/checkStatus";
+import { AxiosCanceler } from "./helper/axiosCancel";
+import { useUserStore } from "@/stores/modules/user";
+import router from "@/routers";
+
+export interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
+  loading?: boolean;
+  cancel?: boolean;
+}
+
+const config = {
+  // 默认地址请求地址，可在 .env.** 文件中修改
+  baseURL: import.meta.env.VITE_API_URL as string,
+  // 设置超时时间
+  timeout: ResultEnum.TIMEOUT as number,
+  // 跨域时候允许携带凭证
+  withCredentials: true
+};
+
+const axiosCanceler = new AxiosCanceler();
+
+class RequestHttp {
+  service: AxiosInstance;
+  public constructor(config: AxiosRequestConfig) {
+    // instantiation
+    this.service = axios.create(config);
+
+    /**
+     * @description 请求拦截器
+     * 客户端发送请求 -> [请求拦截器] -> 服务器
+     * token校验(JWT) : 接受服务器返回的 token,存储到 vuex/pinia/本地储存当中
+     */
+    this.service.interceptors.request.use(
+      (config: CustomAxiosRequestConfig) => {
+        const userStore = useUserStore();
+        // 重复请求不需要取消，在 api 服务中通过指定的第三个参数: { cancel: false } 来控制
+        config.cancel ?? (config.cancel = true);
+        config.cancel && axiosCanceler.addPending(config);
+        // 当前请求不需要显示 loading，在 api 服务中通过指定的第三个参数: { loading: false } 来控制
+        config.loading ?? (config.loading = true);
+        config.loading && showFullScreenLoading();
+        if (config.headers && typeof config.headers.set === "function") {
+          config.headers.set("x-access-token", userStore.token);
+        }
+        return config;
+      },
+      (error: AxiosError) => {
+        return Promise.reject(error);
+      }
+    );
+
+    /**
+     * @description 响应拦截器
+     *  服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
+     */
+    this.service.interceptors.response.use(
+      (response: AxiosResponse) => {
+        const { data, config } = response;
+        const userStore = useUserStore();
+        axiosCanceler.removePending(config);
+        tryHideFullScreenLoading();
+        // 登录失效
+        if (data.code == ResultEnum.OVERDUE) {
+          userStore.setToken("");
+          router.replace(LOGIN_URL);
+          ElMessage.error(data.msg);
+          return Promise.reject(data);
+        }
+        // 全局错误信息拦截（防止下载文件的时候返回数据流，没有 code 直接报错）
+        if (data.code && data.code !== ResultEnum.SUCCESS) {
+          ElMessage.error(data.msg);
+          return Promise.reject(data);
+        }
+        // 成功请求（在页面上除非特殊情况，否则不用处理失败逻辑）
+        return data;
+      },
+      async (error: AxiosError) => {
+        const { response } = error;
+        tryHideFullScreenLoading();
+        // 请求超时 && 网络错误单独判断，没有 response
+        if (error.message.indexOf("timeout") !== -1) ElMessage.error("请求超时！请您稍后重试");
+        if (error.message.indexOf("Network Error") !== -1) ElMessage.error("网络错误！请您稍后重试");
+        // 根据服务器响应的错误状态码，做不同的处理
+        if (response) checkStatus(response.status);
+        // 服务器结果都没有返回(可能服务器错误可能客户端断网)，断网处理:可以跳转到断网页面
+        if (!window.navigator.onLine) router.replace("/500");
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  /**
+   * @description 常用请求方法封装
+   */
+  get<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
+    return this.service.get(url, { params, ..._object });
+  }
+  post<T>(url: string, params?: object | string, _object = {}): Promise<ResultData<T>> {
+    return this.service.post(url, params, _object);
+  }
+  put<T>(url: string, params?: object, _object = {}): Promise<ResultData<T>> {
+    return this.service.put(url, params, _object);
+  }
+  delete<T>(url: string, params?: any, _object = {}): Promise<ResultData<T>> {
+    return this.service.delete(url, { params, ..._object });
+  }
+  download(url: string, params?: object, _object = {}): Promise<BlobPart> {
+    return this.service.post(url, params, { ..._object, responseType: "blob" });
+  }
+}
+
+export default new RequestHttp(config);
--- a/src/api/interface/index.ts
+++ b/src/api/interface/index.ts
@ -0,0 +1,90 @@
+// 请求响应参数（不包含data）
+export interface Result {
+  code: string;
+  msg: string;
+}
+
+// 请求响应参数（包含data）
+export interface ResultData<T = any> extends Result {
+  data: T;
+}
+
+// 分页响应参数
+export interface ResPage<T> {
+  list: T[];
+  pageNum: number;
+  pageSize: number;
+  total: number;
+}
+
+// 分页请求参数
+export interface ReqPage {
+  pageNum: number;
+  pageSize: number;
+}
+
+// 文件上传模块
+export namespace Upload {
+  export interface ResFileUrl {
+    fileUrl: string;
+  }
+}
+
+// 登录模块
+export namespace Login {
+  export interface ReqLoginForm {
+    username: string;
+    password: string;
+  }
+  export interface ResLogin {
+    access_token: string;
+  }
+  export interface ResAuthButtons {
+    [key: string]: string[];
+  }
+}
+
+// 用户管理模块
+export namespace User {
+  export interface ReqUserParams extends ReqPage {
+    username: string;
+    gender: number;
+    idCard: string;
+    email: string;
+    address: string;
+    createTime: string[];
+    status: number;
+  }
+  export interface ResUserList {
+    id: string;
+    username: string;
+    gender: number;
+    user: { detail: { age: number } };
+    idCard: string;
+    email: string;
+    address: string;
+    createTime: string;
+    status: number;
+    avatar: string;
+    photo: any[];
+    children?: ResUserList[];
+  }
+  export interface ResStatus {
+    userLabel: string;
+    userValue: number;
+  }
+  export interface ResGender {
+    genderLabel: string;
+    genderValue: number;
+  }
+  export interface ResDepartment {
+    id: string;
+    name: string;
+    children?: ResDepartment[];
+  }
+  export interface ResRole {
+    id: string;
+    name: string;
+    children?: ResDepartment[];
+  }
+}
--- a/src/api/modules/login.ts
+++ b/src/api/modules/login.ts
@ -0,0 +1,36 @@
+import { Login } from "@/api/interface/index";
+import { PORT1 } from "@/api/config/servicePort";
+import authMenuList from "@/assets/json/authMenuList.json";
+import authButtonList from "@/assets/json/authButtonList.json";
+import http from "@/api";
+
+/**
+ * @name 登录模块
+ */
+// 用户登录
+export const loginApi = (params: Login.ReqLoginForm) => {
+  return http.post<Login.ResLogin>(PORT1 + `/login`, params, { loading: false }); // 正常 post json 请求  ==>  application/json
+  // return http.post<Login.ResLogin>(PORT1 + `/login`, params, { loading: false }); // 控制当前请求不显示 loading
+  // return http.post<Login.ResLogin>(PORT1 + `/login`, {}, { params }); // post 请求携带 query 参数  ==>  ?username=admin&password=123456
+  // return http.post<Login.ResLogin>(PORT1 + `/login`, qs.stringify(params)); // post 请求携带表单参数  ==>  application/x-www-form-urlencoded
+  // return http.get<Login.ResLogin>(PORT1 + `/login?${qs.stringify(params, { arrayFormat: "repeat" })}`); // get 请求可以携带数组等复杂参数
+};
+
+// 获取菜单列表
+export const getAuthMenuListApi = () => {
+  return http.get<Menu.MenuOptions[]>(PORT1 + `/menu/list`, {}, { loading: false });
+  // 如果想让菜单变为本地数据，注释上一行代码，并引入本地 authMenuList.json 数据
+  return authMenuList;
+};
+
+// 获取按钮权限
+export const getAuthButtonListApi = () => {
+  return http.get<Login.ResAuthButtons>(PORT1 + `/auth/buttons`, {}, { loading: false });
+  // 如果想让按钮权限变为本地数据，注释上一行代码，并引入本地 authButtonList.json 数据
+  return authButtonList;
+};
+
+// 用户退出登录
+export const logoutApi = () => {
+  return http.post(PORT1 + `/logout`);
+};
--- a/src/api/modules/upload.ts
+++ b/src/api/modules/upload.ts
@ -0,0 +1,16 @@
+import { Upload } from "@/api/interface/index";
+import { PORT1 } from "@/api/config/servicePort";
+import http from "@/api";
+
+/**
+ * @name 文件上传模块
+ */
+// 图片上传
+export const uploadImg = (params: FormData) => {
+  return http.post<Upload.ResFileUrl>(PORT1 + `/file/upload/img`, params, { cancel: false });
+};
+
+// 视频上传
+export const uploadVideo = (params: FormData) => {
+  return http.post<Upload.ResFileUrl>(PORT1 + `/file/upload/video`, params, { cancel: false });
+};
--- a/src/api/modules/user.ts
+++ b/src/api/modules/user.ts
@ -0,0 +1,71 @@
+import { ResPage, User } from "@/api/interface/index";
+import { PORT1 } from "@/api/config/servicePort";
+import http from "@/api";
+
+/**
+ * @name 用户管理模块
+ */
+// 获取用户列表
+export const getUserList = (params: User.ReqUserParams) => {
+  return http.post<ResPage<User.ResUserList>>(PORT1 + `/user/list`, params);
+};
+
+// 获取树形用户列表
+export const getUserTreeList = (params: User.ReqUserParams) => {
+  return http.post<ResPage<User.ResUserList>>(PORT1 + `/user/tree/list`, params);
+};
+
+// 新增用户
+export const addUser = (params: { id: string }) => {
+  return http.post(PORT1 + `/user/add`, params);
+};
+
+// 批量添加用户
+export const BatchAddUser = (params: FormData) => {
+  return http.post(PORT1 + `/user/import`, params);
+};
+
+// 编辑用户
+export const editUser = (params: { id: string }) => {
+  return http.post(PORT1 + `/user/edit`, params);
+};
+
+// 删除用户
+export const deleteUser = (params: { id: string[] }) => {
+  return http.post(PORT1 + `/user/delete`, params);
+};
+
+// 切换用户状态
+export const changeUserStatus = (params: { id: string; status: number }) => {
+  return http.post(PORT1 + `/user/change`, params);
+};
+
+// 重置用户密码
+export const resetUserPassWord = (params: { id: string }) => {
+  return http.post(PORT1 + `/user/rest_password`, params);
+};
+
+// 导出用户数据
+export const exportUserInfo = (params: User.ReqUserParams) => {
+  return http.download(PORT1 + `/user/export`, params);
+};
+
+// 获取用户状态字典
+export const getUserStatus = () => {
+  return http.get<User.ResStatus[]>(PORT1 + `/user/status`);
+};
+
+// 获取用户性别字典
+export const getUserGender = () => {
+  return http.get<User.ResGender[]>(PORT1 + `/user/gender`);
+};
+
+// 获取用户部门列表
+export const getUserDepartment = () => {
+  return http.get<User.ResDepartment[]>(PORT1 + `/user/department`, {}, { cancel: false });
+};
+
+// 获取用户角色字典
+export const getUserRole = () => {
+  return http.get<User.ResRole[]>(PORT1 + `/user/role`);
+};
--- a/src/assets/fonts/DIN.otf
+++ b/src/assets/fonts/DIN.otf
--- a/src/assets/fonts/MetroDF.ttf
+++ b/src/assets/fonts/MetroDF.ttf
--- a/src/assets/fonts/YouSheBiaoTiHei.ttf
+++ b/src/assets/fonts/YouSheBiaoTiHei.ttf
--- a/src/assets/fonts/font.scss
+++ b/src/assets/fonts/font.scss
@ -0,0 +1,14 @@
+@font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url("./YouSheBiaoTiHei.ttf");
+}
+
+@font-face {
+  font-family: MetroDF;
+  src: url("./MetroDF.ttf");
+}
+
+@font-face {
+  font-family: DIN;
+  src: url("./DIN.Otf");
+}
--- a/src/assets/iconfont/iconfont.scss
+++ b/src/assets/iconfont/iconfont.scss
@ -0,0 +1,48 @@
+@font-face {
+  font-family: iconfont; /* Project id 2667653 */
+  src: url("iconfont.ttf?t=1694681005434") format("truetype");
+}
+.iconfont {
+  font-family: iconfont !important;
+  font-size: 20px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+}
+.icon-yiwen::before {
+  font-size: 15px;
+  content: "\e693";
+}
+.icon-xiala::before {
+  content: "\e62b";
+}
+.icon-tuichu::before {
+  content: "\e645";
+}
+.icon-xiaoxi::before {
+  font-size: 21.2px;
+  content: "\e61f";
+}
+.icon-zhuti::before {
+  font-size: 22.4px;
+  content: "\e638";
+}
+.icon-sousuo::before {
+  content: "\e611";
+}
+.icon-contentright::before {
+  content: "\e8c9";
+}
+.icon-contentleft::before {
+  content: "\e8ca";
+}
+.icon-fangda::before {
+  content: "\e826";
+}
+.icon-suoxiao::before {
+  content: "\e641";
+}
+.icon-zhongyingwen::before {
+  content: "\e8cb";
+}
--- a/src/assets/iconfont/iconfont.ttf
+++ b/src/assets/iconfont/iconfont.ttf
--- a/src/assets/icons/xianxingdaoyu.svg
+++ b/src/assets/icons/xianxingdaoyu.svg
@ -0,0 +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 class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M574 342.8m-38.3 0a38.3 38.3 0 1 0 76.6 0 38.3 38.3 0 1 0-76.6 0Z" fill="#F2B843" /><path d="M627 697c15.2-20.7 45.3-294-45-383.3-3-6.1-0.4-13.5 5.7-16.5 6.2-3 13.5-0.5 16.5 5.7C689.8 370.2 719.9 573 705.1 697H627z" fill="#EA800C" /><path d="M617.8 307.4m-38.3 0a38.3 38.3 0 1 0 76.6 0 38.3 38.3 0 1 0-76.6 0Z" fill="#F2B843" /><path d="M608 272.5L461 502.8c-33.6-47.5-37.2-112.5-3.9-164.6 33.2-52.1 93.7-76.2 150.9-65.7z" fill="#3DC38A" /><path d="M742.5 132.3L569.9 299.8c-19.2-47.5-9.1-103.9 29.9-141.8 39.1-37.9 95.8-46.3 142.7-25.7z" fill="#2F9B77" /><path d="M608.7 289.2l-239.6 21.1c15.1-49 58.5-86.4 112.7-91.1 54.2-4.8 103.5 24.4 126.9 70z" fill="#2F9B77" /><path d="M594.7 269.9L408.5 168.4c35-28.6 85.2-34.8 127.3-11.9 42.1 23 64 68.6 58.9 113.4z" fill="#3DC38A" /><path d="M825.5 331.8l-271.4-31.4c28-51 84.9-82.7 146.3-75.6 61.3 7 109.5 51 125.1 107z" fill="#3DC38A" /><path d="M75.3 868.9c0-86.5 104.3-173 233-173s233 86.5 233 173h-466z" fill="#2F9B77" /><path d="M938.2 868.9c0-116.2-130.9-232.3-292.3-232.3S353.5 752.7 353.5 868.9h584.7z" fill="#3DC38A" /><path d="M858.9 701.5c-28.1-23.1-60.4-41.4-95.9-54.3-14.5-5.3-29.3-9.5-44.3-12.8 0.2-51.3-5.5-106.3-16.2-155.9-11.9-54.8-29.5-101.6-51.2-136.3 5.6-5.3 9.7-11.8 12.2-19.1l160.8 18.6c0.4 0 0.8 0.1 1.2 0.1 2.9 0 5.7-1.3 7.6-3.5 2.2-2.5 2.9-6 2-9.2-8.3-29.8-25.1-56.3-48.5-76.7-24-20.9-53.5-33.9-85.1-37.5-9.7-1.1-19.3-1.3-28.9-0.7l76.8-74.6c2.4-2.3 3.5-5.7 2.9-8.9-0.6-3.3-2.8-6-5.8-7.4-52.3-23-112.6-12.1-153.7 27.7-7.2 7-13.6 14.7-19.1 23.1-9.4-10.5-20.6-19.4-33.1-26.2-44.7-24.3-99-19.2-138.4 12.9-2.6 2.1-3.9 5.4-3.6 8.7s2.2 6.3 5.2 7.9l62.5 34c-50.2 9.8-91.2 46.2-106.6 96-1 3.2-0.3 6.6 1.8 9.2 1.9 2.4 4.8 3.7 7.8 3.7h0.9l94.5-8.3c-5.8 6.4-11 13.3-15.8 20.8-17.2 26.9-25.7 57.9-24.7 89.7 1 31 11 60.8 28.9 86 1.9 2.7 4.9 4.2 8.2 4.2h0.2c3.3-0.1 6.4-1.8 8.2-4.6L549 383.9c7.5 4.6 16.1 7.1 25.2 7.1 13.4 0 25.9-5.5 34.8-14.7 27.2 70.9 29.2 175.3 21.8 250.6-34.9 1.5-69.1 8.3-101.8 20.2-35.5 12.9-67.8 31.2-95.9 54.3-3.2 2.6-6.3 5.3-9.4 8.1-35.7-15.5-75.4-23.6-115.1-23.6-63.1 0-123.8 19.9-170.9 56.1-45.8 35.3-72.1 81.5-72.1 126.9 0 5.5 4.5 10 10 10h862.9c5.5 0 10-4.5 10-10-0.3-59.7-32.8-120.7-89.6-167.4z m-226.2-370c-3.3 2.1-7 3.4-10.9 3.9-1-6.4-3.2-12.5-6.5-17.9l27.6 3.2c-2.3 4.4-5.8 8.1-10.2 10.8z m66.6-96.8c27.6 3.2 53.3 14.5 74.3 32.7 16.6 14.5 29.4 32.4 37.5 52.6l-152.7-17.7c-0.4-0.1-0.8-0.2-1.2-0.2-0.4 0-0.8-0.1-1.2-0.1l-65.3-7.6c-1-0.3-2-0.4-2.9-0.3l-5.5-0.6c-0.1 0-0.2-0.1-0.3-0.1-0.7-0.1-1.3-0.2-2-0.2l-8.8-1c5.3-7.5 11.3-14.5 18-20.8 0.5-0.4 1-0.8 1.4-1.3 8.7-8 18.4-14.9 29.1-20.5 8-4.2 16.4-7.6 24.9-10.2 0.5-0.1 0.9-0.2 1.4-0.4 17-4.8 35.1-6.4 53.3-4.3z m-92.5-69.4c31.5-30.5 76.2-41.2 117.4-29l-87 84.4c-9.3 2.9-18.4 6.6-27.1 11.2-2.2 1.2-4.3 2.4-6.5 3.6-2.8-15.7-8.5-30.8-17-44.4 5.5-9.5 12.3-18.2 20.2-25.8z m-75.8 0.1c14.4 7.9 26.4 18.6 35.7 31.9 10.5 15.1 16.8 32.7 18.4 51-1.2 1-2.5 2-3.6 3l-74-40.3c-0.8-0.7-1.8-1.2-2.8-1.5l-77.2-42.1c31.3-18.8 70.6-20 103.5-2z m-48.2 63.8c5.2-0.5 10.3-0.6 15.4-0.4l68.2 37.1c-5.1 5.7-9.9 11.8-14.2 18.2l-60 5.3-108.1 9.5c17.8-39.1 55-66 98.7-69.7zM461.2 484c-24.3-43.9-23-97.5 4.5-140.6 8.5-13.4 19-24.9 31.3-34.4l48.3-4.2s0 0.1 0.1 0.1c1.5 3 4.4 5 7.7 5.3l17.8 2.1-32.1 50.3c-0.6 0.7-1 1.4-1.4 2.2L461.2 484zM574 371c-5.2 0-10.1-1.4-14.4-3.9l29.3-45.9 1.1-1.8c7.6 5.2 12.4 13.9 12.4 23.4v2.1c-0.1 1.8-0.5 3.8-1.1 6.1-0.2 0.6-0.4 1.1-0.6 1.7-4.2 10.9-14.8 18.3-26.7 18.3z m47.8-15.5c4.3-0.3 8.6-1.3 12.6-2.7 20.5 32.6 37.2 77.3 48.6 129.9 10.2 47.1 15.7 99.1 15.8 148-15.9-2.5-31.9-3.8-48.1-4 2.7-28.8 5.6-76.5 1.8-130.4-4-57.6-14.3-104.8-30.7-140.8zM149.6 757.9c43.6-33.5 99.9-52 158.7-52 34.2 0 68.3 6.5 99.4 18.8-38.4 40-61.1 87.2-63.9 134.2h-258c3.6-35.9 26.4-72.2 63.8-101z m391.7 101H363.8c3.4-50.5 32.8-101.8 81.7-142 26.4-21.7 56.6-38.8 90-50.9 35.4-12.8 72.5-19.4 110.4-19.4 37.9 0 75 6.5 110.3 19.4 33.4 12.1 63.6 29.3 90 50.9 48.9 40.2 78.2 91.5 81.6 142H541.3z" fill="#4D3500" /></svg>
--- a/src/assets/icons/xianxingdiqiu.svg
+++ b/src/assets/icons/xianxingdiqiu.svg
--- a/src/assets/icons/xianxingditu.svg
+++ b/src/assets/icons/xianxingditu.svg
--- a/src/assets/icons/xianxingfanchuan.svg
+++ b/src/assets/icons/xianxingfanchuan.svg
@ -0,0 +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 class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M489.6 541.1V166l283.5 375.1H489.6" fill="#3DC38A" /><path d="M489.6 101.3l-323.2 491h323.2z" fill="#F2B843" /><path d="M489.6 715.7c-16.3 0-29.6-13.2-29.6-29.6V95c0-16.3 13.2-29.6 29.6-29.6 16.3 0 29.6 13.2 29.6 29.6v591.1c-0.1 16.3-13.3 29.6-29.6 29.6z" fill="#EA800C" /><path d="M489.6 608.4H145.3c-16.3 0-29.6-13.2-29.6-29.6 0-16.3 13.2-29.6 29.6-29.6h344.3c16.3 0 29.6 13.2 29.6 29.6-0.1 16.3-13.3 29.6-29.6 29.6z" fill="#EA800C" /><path d="M783.8 557.2H503.1c-16.3 0-29.6-13.2-29.6-29.6 0-16.3 13.2-29.6 29.6-29.6h280.7c16.3 0 29.6 13.2 29.6 29.6 0 16.3-13.3 29.6-29.6 29.6z" fill="#EA800C" /><path d="M752.4 759.8l-67-88.8c-7.9-10.5-20.3-16.7-33.5-16.7H302c-18.3 0-34.5 11.9-40 29.3l-25 76.2h515.4z" fill="#2F9B77" /><path d="M920.8 704.6c15.6-0.8 26.8 14.8 21.1 29.3l-54.5 138.8-28.6 72.8H133.7L81.5 775c-4.1-13.4 5.5-27 19.4-27.8l143.3-7.5 676.6-35.1z" fill="#3DC38A" /><path d="M802.3 791.8m-27 0a27 27 0 1 0 54 0 27 27 0 1 0-54 0Z" fill="#F2B843" /><path d="M947.5 707.7c-6.3-8.7-16.4-13.6-27.2-13.1l-196.8 10.2-30-39.9c-9.8-12.9-25.3-20.6-41.5-20.6H529.2v-77.1h254.7c21.8 0 39.6-17.8 39.6-39.6S805.7 488 783.9 488h-38.3L529.2 201.7V95c0-21.8-17.8-39.6-39.6-39.6S450 73.2 450 95v48.2L189.3 539.3h-44c-21.8 0-39.6 17.8-39.6 39.6s17.8 39.6 39.6 39.6H450v25.8H302c-22.7 0-42.6 14.6-49.5 36.2l-16.2 49.6-135.9 7.1c-9.7 0.6-18.5 5.5-24.1 13.5-5.6 8-7.1 17.9-4.3 27.2l52.2 170.5c1.3 4.2 5.2 7.1 9.6 7.1h725.1c4.1 0 7.8-2.5 9.3-6.3l28.6-72.8 54.5-138.8c3.8-10 2.4-21.2-3.8-29.9zM720.5 488H529.2V234.9L720.5 488zM450 179.6v359.7H213.3L450 179.6z m20 428.8c0-5.5-4.5-10-10-10-0.5 0-0.9 0-1.3 0.1H145.3c-10.8 0-19.6-8.8-19.6-19.6s8.8-19.6 19.6-19.6H460c5.5 0 10-4.5 10-10V95c0-10.8 8.8-19.6 19.6-19.6s19.6 8.8 19.6 19.6v403c0 5.5 4.5 10 10 10h264.7c10.8 0 19.6 8.8 19.6 19.6s-8.8 19.6-19.6 19.6H519.2c-5.5 0-10 4.5-10 10v87.1H470v-35.9z m-198.5 78.3s0-0.1 0 0c4.3-13.4 16.5-22.4 30.5-22.4h350c9.9 0 19.5 4.8 25.5 12.7l21.9 29.1L257.7 729l13.8-42.3z m661.1 43.5L878.1 869 852 935.5H141.1l-50-163.4c-1-3.4-0.5-7 1.6-9.9 2-2.9 5.3-4.8 8.8-5l141.5-7.4h0.6c0.6 0 1.1-0.1 1.7-0.1l473.6-24.6h0.7l201.7-10.5c4-0.2 7.6 1.5 9.9 4.8 2.3 3.2 2.8 7.2 1.4 10.8z" fill="#4D3500" /><path d="M802.3 754.8c-20.4 0-37 16.6-37 37s16.6 37 37 37 37-16.6 37-37-16.6-37-37-37z m0 54c-9.4 0-17-7.6-17-17s7.6-17 17-17 17 7.6 17 17-7.6 17-17 17z" fill="#4D3500" /></svg>
--- a/src/assets/icons/xianxingfeiji.svg
+++ b/src/assets/icons/xianxingfeiji.svg
--- a/src/assets/icons/xianxinglvhangriji.svg
+++ b/src/assets/icons/xianxinglvhangriji.svg
@ -0,0 +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 class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M252.8 862.9h-73.4c-6.8 0-12.4-5.6-12.4-12.4V134.4c0-6.8 5.6-12.4 12.4-12.4h73.4l5.3 6.8v728.8l-5.3 5.3z" fill="#F2B843" /><path d="M338.5 942l-42.9-18.1-42.8 18.1v-79.1l7.5-5.3h71.3l7 5.3-0.1 79.1z" fill="#EA800C" /><path d="M844.6 327.9h-40.7l-5.3-5.8v-93.3l5.3-7.2h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.9-5.6 12.4-12.4 12.4z" fill="#F2B843" /><path d="M844.6 540.5h-40.7l-5.3-7.3v-90.6l5.3-8.4h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z" fill="#EA800C" /><path d="M844.6 753h-40.7l-5.3-6.7v-92.1l5.3-7.5h40.7c6.8 0 12.4 5.6 12.4 12.4v81.5c0 6.8-5.6 12.4-12.4 12.4z" fill="#2F9B77" /><path d="M791.8 862.9h-539V122h539.1c6.7 0 12 5.4 12 12v716.8c0 6.7-5.4 12.1-12.1 12.1z" fill="#3DC38A" /><path d="M680.3 661.1H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5zM680.3 779.8H343.7c-14 0-25.5-11.5-25.5-25.5s11.5-25.5 25.5-25.5h336.6c14 0 25.5 11.5 25.5 25.5s-11.5 25.5-25.5 25.5z" fill="#2F9B77" /><path d="M594.8 511.1c-79.2 45.7-180.5 18.6-226.3-60.6S350 270 429.2 224.2s180.5-18.6 226.3 60.6 18.5 180.6-60.7 226.3z" fill="#3DC38A" /><path d="M523.7 318.1c-1.2 0.3-3.5 0.9-4.5 1.7-1.2 1 0.7 2.3 0 2.9-1.2 1-2.1 2.7-4.7 2.6-5.5-0.3-13.9-7.5-19-10.2 8.1-8.3-4.7-9.6-9.7-9.1-6.5 0.5-17.7 0-23.5 3.2-4.1 2.3-9.5 11.7-12.8 15.5-4.6 5.2-9.1 9.8-12.1 16-10.9 23 5.9 49.4 32.2 46.3 7.3-0.9 14.9-5.5 21.4 0.6 4.8 4.5 2.3 8.7 3.5 13.9 1.1 4.5 6.1 7.3 7.8 11.4 3.3 7.9 1.2 12.9-1.1 20.2-3.1 9.6 4.9 21 8 30.2 1.6 4.7 6.1 17.7 10.7 19.8 7.1 3.2 18.1-6.4 22.4-11.6 3.3-4.1 2.2-8.2 4.4-12 2.4-4.1 5.4-5.3 7.1-10.6 1.8-5.7 3.7-7.1 7.5-11.3 6.2-6.7 5.2-10.6 2.7-18.6-5.1-16.5 13.5-24.2 21.8-36.3 8.7-12.6-8.2-8.4-14.8-12.8-6.8-4.4-9.8-12.9-13.1-19.9s-6-17.5-11.4-23.3c-4.2-4.3-16.9-6.4-22.8-8.6zM609.2 428.8c-2.6 8.9-5.3 17.8-7.9 26.7-1.8 6.2-8.4 26.6-17.5 13.6-3.5-5-0.6-11.4 1.3-16 2.4-5.8-0.9-8.7 0.9-14.1 2-6.2 10-6.4 13.8-10.8 2.7-3 4.3-7.9 6.2-11.5 1 4 2.1 8.1 3.2 12.1z" fill="#F2B843" /><path d="M655.4 284.9c-28.5-49.4-78.7-78.5-131.6-82.4l-21.6 27.2-46.4 16.3-12.5 30.2 19.2 26.9 2-5.7c3.4-9.5 12.4-15.8 22.5-15.8h31.7l36.4 12.8 12.5 12v7.6l17.4 33.4 5.1-1.9c11-4 20.9-10.4 29.2-18.7l-4.2-6.3c-1.4-2 0.1-4.7 2.5-4.7h10.2c3 0 5.8 1.3 7.7 3.6l8.3 9.7c0.8 0.9 1.4 2 1.8 3.1l9.1 25.2 4.4-4.4c2.7-2.7 4.1-6.5 4.2-10.4 0-3.1 1.4-6.1 3.7-8.2l3.4-3c0.8-0.8 1.8-1.4 2.8-1.8-3.6-15.3-9.5-30.4-17.8-44.7zM407.6 291.3l7.9-8.5c5.8-6.2 7.4-15.2 4.2-23-3.4-8.3-10.9-13.6-19.2-14.8-29.2 26.5-47.4 62.2-52.6 100 6.2 5.4 12.6 11.2 12.6 11.7-0.1 1 23.2-2.9 23.2-2.9l-12-17.5 17.2-12.3 18.7-32.7zM423.8 456.4c7.5-2.4 11.6-10.4 9.1-17.9l-2.1-6.6c-0.9-2.9-0.9-5.9 0-8.8 2.7-8.1-2.4-16.8-10.8-18.4l-16.8-3.3-30.6-23.2-25.3 8.2c2.5 21.9 9.4 43.7 21.2 64.1 10.9 18.8 24.9 34.7 41 47.4l7.5-39.3 6.8-2.2z" fill="#2F9B77" /><path d="M844.6 337.9c12.4 0 22.4-10 22.4-22.4V234c0-12.4-10-22.4-22.4-22.4h-30.7V134c0-12.1-9.9-22-22-22H179.4c-12.4 0-22.4 10-22.4 22.4v716.1c0 12.4 10 22.4 22.4 22.4h63.4V942c0 3.4 1.7 6.5 4.5 8.3 2.8 1.9 6.3 2.2 9.4 0.9l38.9-16.5 39 16.5c1.2 0.5 2.6 0.8 3.9 0.8 1.9 0 3.9-0.6 5.5-1.7 2.8-1.9 4.5-5 4.5-8.3v-69.1h443.3c12.2 0 22.1-9.9 22.1-22.1V763h30.7c12.4 0 22.4-10 22.4-22.4v-81.5c0-12.4-10-22.4-22.4-22.4h-30.7v-86.2h30.7c12.4 0 22.4-10 22.4-22.4v-81.5c0-12.4-10-22.4-22.4-22.4h-30.7v-86.3h30.7z m0-106.3c1.3 0 2.4 1.1 2.4 2.4v81.5c0 1.3-1.1 2.4-2.4 2.4h-30.7v-86.3h30.7zM177 850.5V134.4c0-1.3 1.1-2.4 2.4-2.4h63.4v720.9h-63.4c-1.3 0-2.4-1.1-2.4-2.4z m151.5 76.4l-29-12.2c-2.5-1-5.3-1-7.8 0l-28.9 12.2v-54h65.7v54z m465.4-76.1c0 1.2-0.9 2.1-2.1 2.1h-529V132h529.1c1.1 0 2 0.9 2 2v716.8z m50.7-194.1c1.3 0 2.4 1.1 2.4 2.4v81.5c0 1.4-1 2.4-2.4 2.4h-30.7v-86.3h30.7z m0-212.5c1.3 0 2.4 1.1 2.4 2.4v81.5c0 1.3-1.1 2.4-2.4 2.4h-30.7v-86.3h30.7z" fill="#4D3500" /><path d="M680.3 600.1H343.7c-19.6 0-35.5 15.9-35.5 35.5s15.9 35.5 35.5 35.5h336.6c19.6 0 35.5-15.9 35.5-35.5s-15.9-35.5-35.5-35.5z m0 51H343.7c-8.5 0-15.5-7-15.5-15.5s7-15.5 15.5-15.5h336.6c8.5 0 15.5 7 15.5 15.5s-7 15.5-15.5 15.5zM680.3 718.8H343.7c-19.6 0-35.5 15.9-35.5 35.5s15.9 35.5 35.5 35.5h336.6c19.6 0 35.5-15.9 35.5-35.5s-15.9-35.5-35.5-35.5z m0 51H343.7c-8.5 0-15.5-7-15.5-15.5s7-15.5 15.5-15.5h336.6c8.5 0 15.5 7 15.5 15.5s-7 15.5-15.5 15.5zM512.3 543.2c29.8 0 59.9-7.6 87.5-23.5 40.6-23.4 69.7-61.3 81.9-106.7 12.2-45.4 6-92.7-17.5-133.3-23.5-40.6-61.4-69.7-106.7-81.8-45.3-12.1-92.7-5.9-133.3 17.6-40.6 23.5-69.7 61.4-81.9 106.7-12.2 45.3-6 92.7 17.5 133.3 32.6 56.3 91.7 87.7 152.5 87.7zM361.6 327.4c10.8-40.2 36.6-73.7 72.6-94.6 24-13.9 50.6-20.9 77.6-20.9 13.5 0 27.1 1.8 40.5 5.4 40.2 10.8 73.7 36.5 94.6 72.5 20.8 36 26.3 77.9 15.5 118.1-10.8 40.2-36.6 73.7-72.6 94.5-74.3 42.9-169.7 17.3-212.6-56.9-20.8-36-26.4-77.9-15.6-118.1z" fill="#4D3500" /></svg>
--- a/src/assets/icons/xianxingtianqiyubao.svg
+++ b/src/assets/icons/xianxingtianqiyubao.svg
--- a/src/assets/icons/xianxingxiangjipaizhao.svg
+++ b/src/assets/icons/xianxingxiangjipaizhao.svg
@ -0,0 +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 class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M72 440.5h880v286.2H72z" fill="#F2B843" /><path d="M72 726.6V834c0 19.8 16 35.8 35.8 35.8h808.5c19.8 0 35.8-16 35.8-35.8V726.6H72zM916.2 297.4H708.7L647 174.1c-6.1-12.1-18.5-19.8-32-19.8H408.9c-13.5 0-25.9 7.7-32 19.8l-61.7 123.3h-64.4v-35.8c0-19.8-16-35.8-35.8-35.8h-35.8c-19.8 0-35.8 16-35.8 35.8v35.8h-35.8c-19.8 0-35.8 16-35.8 35.8v107.3h880V333.1c0.2-19.7-15.8-35.7-35.6-35.7z" fill="#3DC38A" /><path d="M726.6 583.5c0 118.3-95.9 214.6-214.6 214.6-118.8 0-214.6-96.4-214.6-214.6 0-118.3 95.9-214.6 214.6-214.6 118.8 0 214.6 96.4 214.6 214.6z" fill="#EA800C" /><path d="M512 440.5c78.9 0 143.1 64.2 143.1 143.1S590.9 726.7 512 726.7s-143.1-64.2-143.1-143.1S433.1 440.5 512 440.5z" fill="#FFFFFF" /><path d="M773.1 386.8c9.9 0 17.9-8 17.9-17.9s-8-17.9-17.9-17.9-17.9 8-17.9 17.9c0.1 9.9 8.1 17.9 17.9 17.9zM565.7 207.9H458.3c-9.9 0-17.9 8-17.9 17.9s8 17.9 17.9 17.9h107.3c9.9 0 17.9-8 17.9-17.9s-8-17.9-17.8-17.9zM512 744.5c88.8 0 161-72.2 161-161s-72.2-161-161-161-161 72.2-161 161 72.2 161 161 161z m0-286.2c69 0 125.2 56.2 125.2 125.2S581 708.7 512 708.7s-125.2-56.2-125.2-125.2S443 458.3 512 458.3z" fill="#2F9B77" /><path d="M440.5 601.4c9.9 0 17.9-8 17.9-17.9 0-29.6 24.1-53.7 53.7-53.7 9.9 0 17.9-8 17.9-17.9s-8-17.9-17.9-17.9c-49.3 0-89.4 40.1-89.4 89.4-0.1 10 7.9 18 17.8 18z" fill="#3DC38A" /><path d="M844.7 386.8h35.8c9.9 0 17.9-8 17.9-17.9s-8-17.9-17.9-17.9h-35.8c-9.9 0-17.9 8-17.9 17.9s8 17.9 17.9 17.9z" fill="#2F9B77" /><path d="M773.1 396.8c15.4 0 27.9-12.5 27.9-27.9S788.5 341 773.1 341s-27.9 12.5-27.9 27.9v0.1c0.2 15.3 12.7 27.8 27.9 27.8z m0-35.8c4.4 0 7.9 3.5 7.9 7.9s-3.5 7.9-7.9 7.9c-4.3 0-7.8-3.6-7.9-8 0-4.3 3.6-7.8 7.9-7.8zM458.3 253.7h107.3c15.4 0 27.9-12.5 27.9-27.9s-12.5-27.9-27.8-27.9H458.3c-15.4 0-27.9 12.5-27.9 27.9s12.5 27.9 27.9 27.9z m0-35.8h107.4c4.3 0 7.8 3.5 7.8 7.9s-3.5 7.9-7.9 7.9H458.3c-4.4 0-7.9-3.5-7.9-7.9s3.5-7.9 7.9-7.9zM512 754.5c94.3 0 171-76.7 171-171s-76.7-171-171-171-171 76.7-171 171 76.7 171 171 171z m0-322c83.3 0 151 67.7 151 151s-67.7 151-151 151-151-67.7-151-151 67.7-151 151-151z" fill="#4D3500" /><path d="M512 718.7c74.5 0 135.2-60.7 135.2-135.2S586.5 448.3 512 448.3 376.8 509 376.8 583.5 437.5 718.7 512 718.7z m0-250.4c63.5 0 115.2 51.7 115.2 115.2S575.5 698.7 512 698.7 396.8 647 396.8 583.5 448.5 468.3 512 468.3z" fill="#4D3500" /><path d="M468.4 583.5c0-24.1 19.6-43.7 43.7-43.7 15.4 0 27.9-12.5 27.9-27.9S527.5 484 512.1 484c-54.8 0-99.4 44.6-99.4 99.4-0.1 7.5 2.8 14.5 8 19.8 5.3 5.3 12.3 8.2 19.8 8.2 15.4 0 27.9-12.5 27.9-27.9z m-35.7 0s0-0.1 0 0c0-43.9 35.6-79.5 79.4-79.5 4.4 0 7.9 3.5 7.9 7.9s-3.5 7.9-7.9 7.9c-35.1 0-63.7 28.6-63.7 63.7 0 4.4-3.5 7.9-7.9 7.9-2.1 0-4.1-0.8-5.6-2.3-1.4-1.5-2.2-3.5-2.2-5.6zM844.7 396.8h35.8c15.4 0 27.9-12.5 27.9-27.9S895.9 341 880.5 341h-35.8c-15.4 0-27.9 12.5-27.9 27.9s12.5 27.9 27.9 27.9z m0-35.8h35.8c4.4 0 7.9 3.5 7.9 7.9s-3.5 7.9-7.9 7.9h-35.8c-4.4 0-7.9-3.5-7.9-7.9s3.5-7.9 7.9-7.9z" fill="#4D3500" /><path d="M916.5 287.3H715.2l-58.9-117.8c-7.8-15.6-23.5-25.3-40.9-25.3H409.1c-17.4 0-33.1 9.7-40.9 25.3l-58.9 117.8H261v-25.8c0-25.3-20.5-45.8-45.8-45.8h-35.8c-25.3 0-45.8 20.5-45.8 45.8v25.8h-25.8c-25.3 0-45.8 20.5-45.8 45.8V834c0 25.1 20.5 45.7 45.8 45.8h808.4c25.3 0 45.8-20.5 45.8-45.8V442.8c0.2-0.8 0.3-1.6 0.3-2.4V333.1c0-25.3-20.5-45.8-45.8-45.8z m-737.1-51.6h35.8c14.2 0 25.8 11.6 25.8 25.8v25.9h-87.4v-25.9c0-14.2 11.6-25.8 25.8-25.8zM82 450.5h249.1c-27.5 37.3-43.7 83.3-43.7 133 0 49.8 16.3 95.8 43.8 133.1H82V450.5z m430-71.6c112.8 0 204.6 91.8 204.6 204.6S624.8 788.1 512 788.1s-204.6-91.8-204.6-204.6S399.2 378.9 512 378.9zM942 834c0 14.2-11.6 25.8-25.8 25.8H107.9C93.6 859.7 82 848.2 82 834v-97.4h265.8c41 44 99.4 71.5 164.2 71.5s123.1-27.5 164.2-71.5H942V834z m0-117.4H692.8c27.5-37.3 43.8-83.3 43.8-133.1 0-49.7-16.3-95.7-43.7-133H942v266.1z m0.3-286.2H676.2c-41-44-99.4-71.5-164.2-71.5s-123.2 27.6-164.3 71.6H82v-97.4c0-14.2 11.6-25.8 25.8-25.8h34.4c0.4 0.1 0.9 0.1 1.3 0.1h108c0.5 0 0.9 0 1.3-0.1h62.6c3.8 0 7.2-2.1 8.9-5.5L386 178.5c4.4-8.8 13.3-14.3 23.1-14.3h206.2c9.8 0 18.7 5.5 23.1 14.3l61.7 123.3c1.7 3.4 5.2 5.5 8.9 5.5h207.5c14.2 0 25.8 11.6 25.8 25.8v97.3z" fill="#4D3500" /></svg>
--- a/src/assets/icons/xianxingxiarilengyin.svg
+++ b/src/assets/icons/xianxingxiarilengyin.svg
--- a/src/assets/icons/xianxingyoulun.svg
+++ b/src/assets/icons/xianxingyoulun.svg
--- a/src/assets/icons/xianxingzijiayou.svg
+++ b/src/assets/icons/xianxingzijiayou.svg
--- a/src/assets/images/403.png
+++ b/src/assets/images/403.png
--- a/src/assets/images/404.png
+++ b/src/assets/images/404.png
--- a/src/assets/images/500.png
+++ b/src/assets/images/500.png
--- a/src/assets/images/avatar.gif
+++ b/src/assets/images/avatar.gif
--- a/src/assets/images/login_bg.svg
+++ b/src/assets/images/login_bg.svg
@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
+
+  <rect x="1300" y="400" rx="40" ry="40" width="150" height="150" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" fill="#a2b3ff">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="150" cy="150" r="180" stroke="#85FFBD" fill="#85FFBD">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580"  fill="#a2b3ff">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
+  </path>
+
+<!--  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">-->
+<!--    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>-->
+<!--  </circle>-->
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" fill="#3054EB">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="#3054EB">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
+  </rect>
+</svg>
--- a/src/assets/images/login_left.png
+++ b/src/assets/images/login_left.png
--- a/src/assets/images/login_left1.png
+++ b/src/assets/images/login_left1.png
--- a/src/assets/images/login_left2.png
+++ b/src/assets/images/login_left2.png
--- a/src/assets/images/login_left3.png
+++ b/src/assets/images/login_left3.png
--- a/src/assets/images/login_left4.png
+++ b/src/assets/images/login_left4.png
--- a/src/assets/images/login_left5.png
+++ b/src/assets/images/login_left5.png
--- a/src/assets/images/logo.svg
+++ b/src/assets/images/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/images/msg01.png
+++ b/src/assets/images/msg01.png
--- a/src/assets/images/msg02.png
+++ b/src/assets/images/msg02.png
--- a/src/assets/images/msg03.png
+++ b/src/assets/images/msg03.png
--- a/src/assets/images/msg04.png
+++ b/src/assets/images/msg04.png
--- a/src/assets/images/msg05.png
+++ b/src/assets/images/msg05.png
--- a/src/assets/images/notData.png
+++ b/src/assets/images/notData.png
--- a/src/assets/images/welcome.png
+++ b/src/assets/images/welcome.png
--- a/src/assets/json/authButtonList.json
+++ b/src/assets/json/authButtonList.json
@ -0,0 +1,8 @@
+{
+  "code": 200,
+  "data": {
+    "useProTable": ["add", "batchAdd", "export", "batchDelete", "status"],
+    "authButton": ["add", "edit", "delete", "import", "export"]
+  },
+  "msg": "成功"
+}
--- a/src/assets/json/authMenuList.json
+++ b/src/assets/json/authMenuList.json
--- a/src/assets/mock/Easy-Mock-API.zip
+++ b/src/assets/mock/Easy-Mock-API.zip
--- a/src/components/ECharts/config/index.ts
+++ b/src/components/ECharts/config/index.ts
@ -0,0 +1,72 @@
+import * as echarts from "echarts/core";
+import { BarChart, LineChart, LinesChart, PieChart, ScatterChart, RadarChart, GaugeChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  PolarComponent,
+  GeoComponent,
+  ToolboxComponent,
+  DataZoomComponent
+} from "echarts/components";
+import { LabelLayout, UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+import type {
+  BarSeriesOption,
+  LineSeriesOption,
+  LinesSeriesOption,
+  PieSeriesOption,
+  ScatterSeriesOption,
+  RadarSeriesOption,
+  GaugeSeriesOption
+} from "echarts/charts";
+import type {
+  TitleComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  DatasetComponentOption
+} from "echarts/components";
+import type { ComposeOption } from "echarts/core";
+import "echarts-liquidfill";
+
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | LinesSeriesOption
+  | PieSeriesOption
+  | RadarSeriesOption
+  | GaugeSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+  | ScatterSeriesOption
+>;
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  PolarComponent,
+  GeoComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  BarChart,
+  LineChart,
+  LinesChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  GaugeChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+export default echarts;
--- a/src/components/ECharts/index.vue
+++ b/src/components/ECharts/index.vue
@ -0,0 +1,98 @@
+<template>
+  <div id="echarts" ref="chartRef" :style="echartsStyle" />
+</template>
+
+<script setup lang="ts" name="ECharts">
+import { ref, onMounted, onBeforeUnmount, watch, computed, markRaw, nextTick } from "vue";
+import { EChartsType, ECElementEvent } from "echarts/core";
+import echarts, { ECOption } from "./config";
+import { useDebounceFn } from "@vueuse/core";
+import { useGlobalStore } from "@/stores/modules/global";
+import { storeToRefs } from "pinia";
+
+interface Props {
+  option: ECOption;
+  renderer?: "canvas" | "svg";
+  resize?: boolean;
+  theme?: Object | string;
+  width?: number | string;
+  height?: number | string;
+  onClick?: (event: ECElementEvent) => any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  renderer: "canvas",
+  resize: true
+});
+
+const echartsStyle = computed(() => {
+  return props.width || props.height
+    ? { height: props.height + "px", width: props.width + "px" }
+    : { height: "100%", width: "100%" };
+});
+
+const chartRef = ref<HTMLDivElement | HTMLCanvasElement>();
+const chartInstance = ref<EChartsType>();
+
+const draw = () => {
+  if (chartInstance.value) {
+    chartInstance.value.setOption(props.option, { notMerge: true });
+  }
+};
+
+watch(props, () => {
+  draw();
+});
+
+const handleClick = (event: ECElementEvent) => props.onClick && props.onClick(event);
+
+const init = () => {
+  if (!chartRef.value) return;
+  chartInstance.value = echarts.getInstanceByDom(chartRef.value);
+
+  if (!chartInstance.value) {
+    chartInstance.value = markRaw(
+      echarts.init(chartRef.value, props.theme, {
+        renderer: props.renderer
+      })
+    );
+    chartInstance.value.on("click", handleClick);
+    draw();
+  }
+};
+
+const resize = () => {
+  if (chartInstance.value && props.resize) {
+    chartInstance.value.resize({ animation: { duration: 300 } });
+  }
+};
+
+const debouncedResize = useDebounceFn(resize, 300, { maxWait: 800 });
+
+const globalStore = useGlobalStore();
+const { maximize, isCollapse, tabs, footer } = storeToRefs(globalStore);
+
+watch(
+  () => [maximize, isCollapse, tabs, footer],
+  () => {
+    debouncedResize();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => init());
+  window.addEventListener("resize", debouncedResize);
+});
+
+onBeforeUnmount(() => {
+  chartInstance.value?.dispose();
+  window.removeEventListener("resize", debouncedResize);
+});
+
+defineExpose({
+  getInstance: () => chartInstance.value,
+  resize,
+  draw
+});
+</script>
--- a/src/components/ErrorMessage/403.vue
+++ b/src/components/ErrorMessage/403.vue
@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/403.png" class="not-img" alt="403" />
+    <div class="not-detail">
+      <h2>403</h2>
+      <h4>抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="403">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ErrorMessage/404.vue
+++ b/src/components/ErrorMessage/404.vue
@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/404.png" class="not-img" alt="404" />
+    <div class="not-detail">
+      <h2>404</h2>
+      <h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="404">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ErrorMessage/500.vue
+++ b/src/components/ErrorMessage/500.vue
@ -0,0 +1,19 @@
+<template>
+  <div class="not-container">
+    <img src="@/assets/images/500.png" class="not-img" alt="500" />
+    <div class="not-detail">
+      <h2>500</h2>
+      <h4>抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
+      <el-button type="primary" @click="router.back"> 返回上一页 </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="500">
+import { useRouter } from "vue-router";
+const router = useRouter();
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ErrorMessage/index.scss
+++ b/src/components/ErrorMessage/index.scss
@ -0,0 +1,32 @@
+.not-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .not-img {
+    margin-right: 120px;
+  }
+  .not-detail {
+    display: flex;
+    flex-direction: column;
+    h2,
+    h4 {
+      padding: 0;
+      margin: 0;
+    }
+    h2 {
+      font-size: 60px;
+      color: var(--el-text-color-primary);
+    }
+    h4 {
+      margin: 30px 0 20px;
+      font-size: 19px;
+      font-weight: normal;
+      color: var(--el-text-color-regular);
+    }
+    .el-button {
+      width: 100px;
+    }
+  }
+}
--- a/src/components/Grid/components/GridItem.vue
+++ b/src/components/Grid/components/GridItem.vue
@ -0,0 +1,68 @@
+<template>
+  <div v-show="isShow" :style="style">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts" name="GridItem">
+import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
+import { BreakPoint, Responsive } from "../interface/index";
+
+type Props = {
+  offset?: number;
+  span?: number;
+  suffix?: boolean;
+  xs?: Responsive;
+  sm?: Responsive;
+  md?: Responsive;
+  lg?: Responsive;
+  xl?: Responsive;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 0,
+  span: 1,
+  suffix: false,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined
+});
+
+const attrs = useAttrs() as { index: string };
+const isShow = ref(true);
+
+// 注入断点
+const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
+const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
+watch(
+  () => [shouldHiddenIndex.value, breakPoint.value],
+  n => {
+    if (!!attrs.index) {
+      isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
+    }
+  },
+  { immediate: true }
+);
+
+const gap = inject("gap", 0);
+const cols = inject("cols", ref(4));
+const style = computed(() => {
+  let span = props[breakPoint.value]?.span ?? props.span;
+  let offset = props[breakPoint.value]?.offset ?? props.offset;
+  if (props.suffix) {
+    return {
+      gridColumnStart: cols.value - span - offset + 1,
+      gridColumnEnd: `span ${span + offset}`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  } else {
+    return {
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+        span + offset > cols.value ? cols.value : span + offset
+      }`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  }
+});
+</script>
--- a/src/components/Grid/index.vue
+++ b/src/components/Grid/index.vue
@ -0,0 +1,167 @@
+<template>
+  <div :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Grid">
+import {
+  ref,
+  watch,
+  useSlots,
+  computed,
+  provide,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onDeactivated,
+  onActivated,
+  VNodeArrayChildren,
+  VNode
+} from "vue";
+import type { BreakPoint } from "./interface/index";
+
+type Props = {
+  cols?: number | Record<BreakPoint, number>;
+  collapsed?: boolean;
+  collapsedRows?: number;
+  gap?: [number, number] | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+  collapsed: false,
+  collapsedRows: 1,
+  gap: 0
+});
+
+onBeforeMount(() => props.collapsed && findIndex());
+onMounted(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onActivated(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", resize);
+});
+onDeactivated(() => {
+  window.removeEventListener("resize", resize);
+});
+
+// 监听屏幕变化
+const resize = (e: UIEvent) => {
+  let width = (e.target as Window).innerWidth;
+  switch (!!width) {
+    case width < 768:
+      breakPoint.value = "xs";
+      break;
+    case width >= 768 && width < 992:
+      breakPoint.value = "sm";
+      break;
+    case width >= 992 && width < 1200:
+      breakPoint.value = "md";
+      break;
+    case width >= 1200 && width < 1920:
+      breakPoint.value = "lg";
+      break;
+    case width >= 1920:
+      breakPoint.value = "xl";
+      break;
+  }
+};
+
+// 注入 gap 间距
+provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);
+
+// 注入响应式断点
+let breakPoint = ref<BreakPoint>("xl");
+provide("breakPoint", breakPoint);
+
+// 注入要开始折叠的 index
+const hiddenIndex = ref(-1);
+provide("shouldHiddenIndex", hiddenIndex);
+
+// 注入 cols
+const gridCols = computed(() => {
+  if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
+  return props.cols;
+});
+provide("cols", gridCols);
+
+// 寻找需要开始折叠的字段 index
+const slots = useSlots().default!();
+
+const findIndex = () => {
+  let fields: VNodeArrayChildren = [];
+  let suffix: VNode | null = null;
+  slots.forEach((slot: any) => {
+    // suffix
+    if (typeof slot.type === "object" && slot.type.name === "GridItem" && slot.props?.suffix !== undefined) suffix = slot;
+    // slot children
+    if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
+  });
+
+  // 计算 suffix 所占用的列
+  let suffixCols = 0;
+  if (suffix) {
+    suffixCols =
+      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
+      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0);
+  }
+  try {
+    let find = false;
+    fields.reduce((prev = 0, current, index) => {
+      prev +=
+        ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
+        ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0);
+      if (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
+        hiddenIndex.value = index;
+        find = true;
+        throw "find it";
+      }
+      return prev;
+    }, 0);
+    if (!find) hiddenIndex.value = -1;
+  } catch (e) {
+    // console.warn(e);
+  }
+};
+
+// 断点变化时执行 findIndex
+watch(
+  () => breakPoint.value,
+  () => {
+    if (props.collapsed) findIndex();
+  }
+);
+
+// 监听 collapsed
+watch(
+  () => props.collapsed,
+  value => {
+    if (value) return findIndex();
+    hiddenIndex.value = -1;
+  }
+);
+
+// 设置间距
+const gridGap = computed(() => {
+  if (typeof props.gap === "number") return `${props.gap}px`;
+  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
+  return "unset";
+});
+
+// 设置 style
+const style = computed(() => {
+  return {
+    display: "grid",
+    gridGap: gridGap.value,
+    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
+  };
+});
+
+defineExpose({ breakPoint });
+</script>
--- a/src/components/Grid/interface/index.ts
+++ b/src/components/Grid/interface/index.ts
@ -0,0 +1,6 @@
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type Responsive = {
+  span?: number;
+  offset?: number;
+};
--- a/src/components/ImportExcel/index.scss
+++ b/src/components/ImportExcel/index.scss
@ -0,0 +1,3 @@
+.upload {
+  width: 80%;
+}
--- a/src/components/ImportExcel/index.vue
+++ b/src/components/ImportExcel/index.vue
@ -0,0 +1,149 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
+    <el-form class="drawer-multiColumn-form" label-width="100px">
+      <el-form-item label="模板下载 :">
+        <el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
+      </el-form-item>
+      <el-form-item label="文件上传 :">
+        <el-upload
+          action="#"
+          class="upload"
+          :drag="true"
+          :limit="excelLimit"
+          :multiple="true"
+          :show-file-list="true"
+          :http-request="uploadExcel"
+          :before-upload="beforeExcelUpload"
+          :on-exceed="handleExceed"
+          :on-success="excelUploadSuccess"
+          :on-error="excelUploadError"
+          :accept="parameter.fileType!.join(',')"
+        >
+          <slot name="empty">
+            <el-icon class="el-icon--upload">
+              <upload-filled />
+            </el-icon>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          </slot>
+          <template #tip>
+            <slot name="tip">
+              <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
+            </slot>
+          </template>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="数据覆盖 :">
+        <el-switch v-model="isCover" />
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="ImportExcel">
+import { ref } from "vue";
+import { useDownload } from "@/hooks/useDownload";
+import { Download } from "@element-plus/icons-vue";
+import { ElNotification, UploadRequestOptions, UploadRawFile } from "element-plus";
+
+export interface ExcelParameterProps {
+  title: string; // 标题
+  fileSize?: number; // 上传文件的大小
+  fileType?: File.ExcelMimeType[]; // 上传文件的类型
+  tempApi?: (params: any) => Promise<any>; // 下载模板的Api
+  importApi?: (params: any) => Promise<any>; // 批量导入的Api
+  getTableList?: () => void; // 获取表格数据的Api
+}
+
+// 是否覆盖数据
+const isCover = ref(false);
+// 最大文件上传数
+const excelLimit = ref(1);
+// dialog状态
+const dialogVisible = ref(false);
+// 父组件传过来的参数
+const parameter = ref<ExcelParameterProps>({
+  title: "",
+  fileSize: 5,
+  fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
+});
+
+// 接收父组件参数
+const acceptParams = (params: ExcelParameterProps) => {
+  parameter.value = { ...parameter.value, ...params };
+  dialogVisible.value = true;
+};
+
+// Excel 导入模板下载
+const downloadTemp = () => {
+  if (!parameter.value.tempApi) return;
+  useDownload(parameter.value.tempApi, `${parameter.value.title}模板`);
+};
+
+// 文件上传
+const uploadExcel = async (param: UploadRequestOptions) => {
+  let excelFormData = new FormData();
+  excelFormData.append("file", param.file);
+  excelFormData.append("isCover", isCover.value as unknown as Blob);
+  await parameter.value.importApi!(excelFormData);
+  parameter.value.getTableList && parameter.value.getTableList();
+  dialogVisible.value = false;
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param file 上传的文件
+ * */
+const beforeExcelUpload = (file: UploadRawFile) => {
+  const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType);
+  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
+  if (!isExcel)
+    ElNotification({
+      title: "温馨提示",
+      message: "上传文件只能是 xls / xlsx 格式！",
+      type: "warning"
+    });
+  if (!fileSize)
+    setTimeout(() => {
+      ElNotification({
+        title: "温馨提示",
+        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
+        type: "warning"
+      });
+    }, 0);
+  return isExcel && fileSize;
+};
+
+// 文件数超出提示
+const handleExceed = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "最多只能上传一个文件！",
+    type: "warning"
+  });
+};
+
+// 上传错误提示
+const excelUploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: `批量添加${parameter.value.title}失败，请您重新上传！`,
+    type: "error"
+  });
+};
+
+// 上传成功提示
+const excelUploadSuccess = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: `批量添加${parameter.value.title}成功！`,
+    type: "success"
+  });
+};
+
+defineExpose({
+  acceptParams
+});
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>
--- a/src/components/Loading/fullScreen.ts
+++ b/src/components/Loading/fullScreen.ts
@ -0,0 +1,45 @@
+import { ElLoading } from "element-plus";
+
+/* 全局请求 loading */
+let loadingInstance: ReturnType<typeof ElLoading.service>;
+
+/**
+ * @description 开启 Loading
+ * */
+const startLoading = () => {
+  loadingInstance = ElLoading.service({
+    fullscreen: true,
+    lock: true,
+    text: "Loading",
+    background: "rgba(0, 0, 0, 0.7)"
+  });
+};
+
+/**
+ * @description 结束 Loading
+ * */
+const endLoading = () => {
+  loadingInstance.close();
+};
+
+/**
+ * @description 显示全屏加载
+ * */
+let needLoadingRequestCount = 0;
+export const showFullScreenLoading = () => {
+  if (needLoadingRequestCount === 0) {
+    startLoading();
+  }
+  needLoadingRequestCount++;
+};
+
+/**
+ * @description 隐藏全屏加载
+ * */
+export const tryHideFullScreenLoading = () => {
+  if (needLoadingRequestCount <= 0) return;
+  needLoadingRequestCount--;
+  if (needLoadingRequestCount === 0) {
+    endLoading();
+  }
+};
--- a/src/components/Loading/index.scss
+++ b/src/components/Loading/index.scss
@ -0,0 +1,67 @@
+.loading-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  .loading-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 98px;
+  }
+}
+.dot {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  font-size: 32px;
+  transform: rotate(45deg);
+  animation: ant-rotate 1.2s infinite linear;
+}
+.dot i {
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 14px;
+  background-color: var(--el-color-primary);
+  border-radius: 100%;
+  opacity: 0.3;
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  animation: ant-spin-move 1s infinite linear alternate;
+}
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  animation-delay: 0.4s;
+}
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  animation-delay: 1.2s;
+}
+
+@keyframes ant-rotate {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes ant-spin-move {
+  to {
+    opacity: 1;
+  }
+}
--- a/src/components/Loading/index.vue
+++ b/src/components/Loading/index.vue
@ -0,0 +1,13 @@
+<template>
+  <div class="loading-box">
+    <div class="loading-wrap">
+      <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Loading"></script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>
--- a/src/components/ProTable/components/ColSetting.vue
+++ b/src/components/ProTable/components/ColSetting.vue
@ -0,0 +1,45 @@
+<template>
+  <!-- 列设置 -->
+  <el-drawer v-model="drawerVisible" title="列设置" size="450px">
+    <div class="table-main">
+      <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
+        <el-table-column prop="label" align="center" label="列名" />
+        <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
+          <el-switch v-model="scope.row.isShow"></el-switch>
+        </el-table-column>
+        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+          <el-switch v-model="scope.row.sortable"></el-switch>
+        </el-table-column>
+        <template #empty>
+          <div class="table-empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无可配置列</div>
+          </div>
+        </template>
+      </el-table>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="ColSetting">
+import { ref } from "vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+
+defineProps<{ colSetting: ColumnProps[] }>();
+
+const drawerVisible = ref<boolean>(false);
+
+const openColSetting = () => {
+  drawerVisible.value = true;
+};
+
+defineExpose({
+  openColSetting
+});
+</script>
+
+<style scoped lang="scss">
+.cursor-move {
+  cursor: move;
+}
+</style>
--- a/src/components/ProTable/components/Pagination.vue
+++ b/src/components/ProTable/components/Pagination.vue
@ -0,0 +1,29 @@
+<template>
+  <!-- 分页组件 -->
+  <el-pagination
+    :background="true"
+    :current-page="pageable.pageNum"
+    :page-size="pageable.pageSize"
+    :page-sizes="[10, 25, 50, 100]"
+    :total="pageable.total"
+    layout="total, sizes, prev, pager, next, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+interface Pageable {
+  pageNum: number;
+  pageSize: number;
+  total: number;
+}
+
+interface PaginationProps {
+  pageable: Pageable;
+  handleSizeChange: (size: number) => void;
+  handleCurrentChange: (currentPage: number) => void;
+}
+
+defineProps<PaginationProps>();
+</script>
--- a/src/components/ProTable/components/TableColumn.vue
+++ b/src/components/ProTable/components/TableColumn.vue
@ -0,0 +1,56 @@
+<template>
+  <RenderTableColumn v-bind="column" />
+</template>
+
+<script setup lang="tsx" name="TableColumn">
+import { inject, ref, useSlots } from "vue";
+import { ColumnProps, RenderScope, HeaderRenderScope } from "@/components/ProTable/interface";
+import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils";
+
+defineProps<{ column: ColumnProps }>();
+
+const slots = useSlots();
+
+const enumMap = inject("enumMap", ref(new Map()));
+
+// 渲染表格数据
+const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
+  return enumMap.value.get(item.prop) && item.isFilterEnum
+    ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
+    : formatValue(handleRowAccordingToProp(scope.row, item.prop!));
+};
+
+// 获取 tag 类型
+const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
+  return filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag");
+};
+
+const RenderTableColumn = (item: ColumnProps) => {
+  return (
+    <>
+      {item.isShow && (
+        <el-table-column
+          {...item}
+          align={item.align ?? "center"}
+          showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
+        >
+          {{
+            default: (scope: RenderScope<any>) => {
+              if (item._children) return item._children.map(child => RenderTableColumn(child));
+              if (item.render) return item.render(scope);
+              if (slots[handleProp(item.prop!)]) return slots[handleProp(item.prop!)]!(scope);
+              if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
+              return renderCellData(item, scope);
+            },
+            header: (scope: HeaderRenderScope<any>) => {
+              if (item.headerRender) return item.headerRender(scope);
+              if (slots[`${handleProp(item.prop!)}Header`]) return slots[`${handleProp(item.prop!)}Header`]!(scope);
+              return item.label;
+            }
+          }}
+        </el-table-column>
+      )}
+    </>
+  );
+};
+</script>
--- a/src/components/ProTable/index.vue
+++ b/src/components/ProTable/index.vue
@ -0,0 +1,314 @@
+<!-- 📚📚📚 Pro-Table 文档: https://juejin.cn/post/7166068828202336263 -->
+
+<template>
+  <!-- 查询表单 -->
+  <SearchForm
+    v-show="isShowSearch"
+    :search="_search"
+    :reset="_reset"
+    :columns="searchColumns"
+    :search-param="searchParam"
+    :search-col="searchCol"
+  />
+
+  <!-- 表格主体 -->
+  <div class="card table-main">
+    <!-- 表格头部 操作按钮 -->
+    <div class="table-header">
+      <div class="header-button-lf">
+        <slot name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" :is-selected="isSelected" />
+      </div>
+      <div v-if="toolButton" class="header-button-ri">
+        <slot name="toolButton">
+          <el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />
+          <el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click="openColSetting" />
+          <el-button
+            v-if="showToolButton('search') && searchColumns?.length"
+            :icon="Search"
+            circle
+            @click="isShowSearch = !isShowSearch"
+          />
+        </slot>
+      </div>
+    </div>
+    <!-- 表格主体 -->
+    <el-table
+      ref="tableRef"
+      v-bind="$attrs"
+      :data="processTableData"
+      :border="border"
+      :row-key="rowKey"
+      @selection-change="selectionChange"
+    >
+      <!-- 默认插槽 -->
+      <slot />
+      <template v-for="item in tableColumns" :key="item">
+        <!-- selection || radio || index || expand || sort -->
+        <el-table-column
+          v-if="item.type && columnTypes.includes(item.type)"
+          v-bind="item"
+          :align="item.align ?? 'center'"
+          :reserve-selection="item.type == 'selection'"
+        >
+          <template #default="scope">
+            <!-- expand -->
+            <template v-if="item.type == 'expand'">
+              <component :is="item.render" v-bind="scope" v-if="item.render" />
+              <slot v-else :name="item.type" v-bind="scope" />
+            </template>
+            <!-- radio -->
+            <el-radio v-if="item.type == 'radio'" v-model="radio" :label="scope.row[rowKey]">
+              <i></i>
+            </el-radio>
+            <!-- sort -->
+            <el-tag v-if="item.type == 'sort'" class="move">
+              <el-icon> <DCaret /></el-icon>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <!-- other -->
+        <TableColumn v-if="!item.type && item.prop && item.isShow" :column="item">
+          <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+            <slot :name="slot" v-bind="scope" />
+          </template>
+        </TableColumn>
+      </template>
+      <!-- 插入表格最后一行之后的插槽 -->
+      <template #append>
+        <slot name="append" />
+      </template>
+      <!-- 无数据 -->
+      <template #empty>
+        <div class="table-empty">
+          <slot name="empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无数据</div>
+          </slot>
+        </div>
+      </template>
+    </el-table>
+    <!-- 分页组件 -->
+    <slot name="pagination">
+      <Pagination
+        v-if="pagination"
+        :pageable="pageable"
+        :handle-size-change="handleSizeChange"
+        :handle-current-change="handleCurrentChange"
+      />
+    </slot>
+  </div>
+  <!-- 列设置 -->
+  <ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
+import { ElTable } from "element-plus";
+import { useTable } from "@/hooks/useTable";
+import { useSelection } from "@/hooks/useSelection";
+import { BreakPoint } from "@/components/Grid/interface";
+import { ColumnProps, TypeProps } from "@/components/ProTable/interface";
+import { Refresh, Operation, Search } from "@element-plus/icons-vue";
+import { handleProp } from "@/utils";
+import SearchForm from "@/components/SearchForm/index.vue";
+import Pagination from "./components/Pagination.vue";
+import ColSetting from "./components/ColSetting.vue";
+import TableColumn from "./components/TableColumn.vue";
+import Sortable from "sortablejs";
+
+export interface ProTableProps {
+  columns: ColumnProps[]; // 列配置项  ==> 必传
+  data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+  requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
+  requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
+  requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
+  dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+  title?: string; // 表格标题 ==> 非必传
+  pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
+  initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
+  border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
+  toolButton?: ("refresh" | "setting" | "search")[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+  searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  requestAuto: true,
+  pagination: true,
+  initParam: {},
+  border: true,
+  toolButton: true,
+  rowKey: "id",
+  searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
+});
+
+// table 实例
+const tableRef = ref<InstanceType<typeof ElTable>>();
+
+// column 列类型
+const columnTypes: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
+
+// 是否显示搜索模块
+const isShowSearch = ref(true);
+
+// 控制 ToolButton 显示
+const showToolButton = (key: "refresh" | "setting" | "search") => {
+  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
+};
+
+// 单选值
+const radio = ref("");
+
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);
+
+// 表格操作 Hooks
+const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
+  useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError);
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection();
+
+// 初始化表格数据 && 拖拽排序
+onMounted(() => {
+  dragSort();
+  props.requestAuto && getTableList();
+  props.data && (pageable.value.total = props.data.length);
+});
+
+// 处理表格数据
+const processTableData = computed(() => {
+  if (!props.data) return tableData.value;
+  if (!props.pagination) return props.data;
+  return props.data.slice(
+    (pageable.value.pageNum - 1) * pageable.value.pageSize,
+    pageable.value.pageSize * pageable.value.pageNum
+  );
+});
+
+// 监听页面 initParam 改化，重新获取表格数据
+watch(() => props.initParam, getTableList, { deep: true });
+
+// 接收 columns 并设置为响应式
+const tableColumns = reactive<ColumnProps[]>(props.columns);
+
+// 扁平化 columns
+const flatColumns = computed(() => flatColumnsFunc(tableColumns));
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>());
+const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
+  if (!enumValue) return;
+
+  // 如果当前 enumMap 存在相同的值 return
+  if (enumMap.value.has(prop!) && (typeof enumValue === "function" || enumMap.value.get(prop!) === enumValue)) return;
+
+  // 当前 enum 为静态数据，则直接存储到 enumMap
+  if (typeof enumValue !== "function") return enumMap.value.set(prop!, unref(enumValue!));
+
+  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+  enumMap.value.set(prop!, []);
+
+  // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+  const { data } = await enumValue();
+  enumMap.value.set(prop!, data);
+};
+
+// 注入 enumMap
+provide("enumMap", enumMap);
+
+// 扁平化 columns 的方法
+const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
+  columns.forEach(async col => {
+    if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children));
+    flatArr.push(col);
+
+    // column 添加默认 isShow && isFilterEnum 属性值
+    col.isShow = col.isShow ?? true;
+    col.isFilterEnum = col.isFilterEnum ?? true;
+
+    // 设置 enumMap
+    await setEnumMap(col);
+  });
+  return flatArr.filter(item => !item._children?.length);
+};
+
+// 过滤需要搜索的配置项 && 排序
+const searchColumns = computed(() => {
+  return flatColumns.value
+    ?.filter(item => item.search?.el || item.search?.render)
+    .sort((a, b) => a.search!.order! - b.search!.order!);
+});
+
+// 设置 搜索表单默认排序 && 搜索表单项的默认值
+searchColumns.value?.forEach((column, index) => {
+  column.search!.order = column.search?.order ?? index + 2;
+  const key = column.search?.key ?? handleProp(column.prop!);
+  const defaultValue = column.search?.defaultValue;
+  if (defaultValue !== undefined && defaultValue !== null) {
+    searchInitParam.value[key] = defaultValue;
+    searchParam.value[key] = defaultValue;
+  }
+});
+
+// 列设置 ==> 需要过滤掉不需要设置的列
+const colRef = ref();
+const colSetting = tableColumns!.filter(item => {
+  const { type, prop, isShow } = item;
+  return !columnTypes.includes(type!) && prop !== "operation" && isShow;
+});
+const openColSetting = () => colRef.value.openColSetting();
+
+// 定义 emit 事件
+const emit = defineEmits<{
+  search: [];
+  reset: [];
+  dargSort: [{ newIndex?: number; oldIndex?: number }];
+}>();
+
+const _search = () => {
+  search();
+  emit("search");
+};
+
+const _reset = () => {
+  reset();
+  emit("reset");
+};
+
+// 拖拽排序
+const dragSort = () => {
+  const tbody = document.querySelector(".el-table__body-wrapper tbody") as HTMLElement;
+  Sortable.create(tbody, {
+    handle: ".move",
+    animation: 300,
+    onEnd({ newIndex, oldIndex }) {
+      const [removedItem] = processTableData.value.splice(oldIndex!, 1);
+      processTableData.value.splice(newIndex!, 0, removedItem);
+      emit("dargSort", { newIndex, oldIndex });
+    }
+  });
+};
+
+// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  element: tableRef,
+  tableData: processTableData,
+  radio,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange,
+  clearSelection,
+  enumMap,
+  isSelected,
+  selectedList,
+  selectedListIds
+});
+</script>
--- a/src/components/ProTable/interface/index.ts
+++ b/src/components/ProTable/interface/index.ts
@ -0,0 +1,85 @@
+import { VNode, ComponentPublicInstance, Ref } from "vue";
+import { BreakPoint, Responsive } from "@/components/Grid/interface";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+import { ProTableProps } from "@/components/ProTable/index.vue";
+import ProTable from "@/components/ProTable/index.vue";
+
+export interface EnumProps {
+  label?: string; // 选项框显示的文字
+  value?: string | number | boolean | any[]; // 选项框值
+  disabled?: boolean; // 是否禁用此选项
+  tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
+  children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
+  [key: string]: any;
+}
+
+export type TypeProps = "index" | "selection" | "radio" | "expand" | "sort";
+
+export type SearchType =
+  | "input"
+  | "input-number"
+  | "select"
+  | "select-v2"
+  | "tree-select"
+  | "cascader"
+  | "date-picker"
+  | "time-picker"
+  | "time-select"
+  | "switch"
+  | "slider";
+
+export type SearchRenderScope = {
+  searchParam: { [key: string]: any };
+  placeholder: string;
+  clearable: boolean;
+  options: EnumProps[];
+  data: EnumProps[];
+};
+
+export type SearchProps = {
+  el?: SearchType; // 当前项搜索框的类型
+  label?: string; // 当前项搜索框的 label
+  props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  tooltip?: string; // 搜索提示
+  order?: number; // 搜索项排序（从大到小）
+  span?: number; // 搜索项所占用的列数，默认为 1 列
+  offset?: number; // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[] | Ref<any>; // 搜索项默认值
+  render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>;
+
+export type FieldNamesProps = {
+  label: string;
+  value: string;
+  children?: string;
+};
+
+export type RenderScope<T> = {
+  row: T;
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export type HeaderRenderScope<T> = {
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export interface ColumnProps<T = any>
+  extends Partial<Omit<TableColumnCtx<T>, "type" | "children" | "renderCell" | "renderHeader">> {
+  type?: TypeProps; // 列类型
+  tag?: boolean | Ref<boolean>; // 是否是标签展示
+  isShow?: boolean | Ref<boolean>; // 是否显示在表格当中
+  search?: SearchProps | undefined; // 搜索项配置
+  enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>); // 枚举字典
+  isFilterEnum?: boolean | Ref<boolean>; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+  fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+  headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
+  render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+  _children?: ColumnProps<T>[]; // 多级表头
+}
+
+export type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>;
--- a/src/components/SearchForm/components/SearchFormItem.vue
+++ b/src/components/SearchForm/components/SearchFormItem.vue
@ -0,0 +1,96 @@
+<template>
+  <component
+    :is="column.search?.render ?? `el-${column.search?.el}`"
+    v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"
+    v-model.trim="_searchParam[column.search?.key ?? handleProp(column.prop!)]"
+    :data="column.search?.el === 'tree-select' ? columnEnum : []"
+    :options="['cascader', 'select-v2'].includes(column.search?.el!) ? columnEnum : []"
+  >
+    <template v-if="column.search?.el === 'cascader'" #default="{ data }">
+      <span>{{ data[fieldNames.label] }}</span>
+    </template>
+    <template v-if="column.search?.el === 'select'">
+      <component
+        :is="`el-option`"
+        v-for="(col, index) in columnEnum"
+        :key="index"
+        :label="col[fieldNames.label]"
+        :value="col[fieldNames.value]"
+      ></component>
+    </template>
+    <slot v-else></slot>
+  </component>
+</template>
+
+<script setup lang="ts" name="SearchFormItem">
+import { computed, inject, ref } from "vue";
+import { handleProp } from "@/utils";
+import { ColumnProps } from "@/components/ProTable/interface";
+
+interface SearchFormItem {
+  column: ColumnProps;
+  searchParam: { [key: string]: any };
+}
+const props = defineProps<SearchFormItem>();
+
+// Re receive SearchParam
+const _searchParam = computed(() => props.searchParam);
+
+// 判断 fieldNames 设置 label && value && children 的 key 值
+const fieldNames = computed(() => {
+  return {
+    label: props.column.fieldNames?.label ?? "label",
+    value: props.column.fieldNames?.value ?? "value",
+    children: props.column.fieldNames?.children ?? "children"
+  };
+});
+
+// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
+const enumMap = inject("enumMap", ref(new Map()));
+const columnEnum = computed(() => {
+  let enumData = enumMap.value.get(props.column.prop);
+  if (!enumData) return [];
+  if (props.column.search?.el === "select-v2" && props.column.fieldNames) {
+    enumData = enumData.map((item: { [key: string]: any }) => {
+      return { ...item, label: item[fieldNames.value.label], value: item[fieldNames.value.value] };
+    });
+  }
+  return enumData;
+});
+
+// 处理透传的 searchProps (el 为 tree-select、cascader 的时候需要给下默认 label && value && children)
+const handleSearchProps = computed(() => {
+  const label = fieldNames.value.label;
+  const value = fieldNames.value.value;
+  const children = fieldNames.value.children;
+  const searchEl = props.column.search?.el;
+  let searchProps = props.column.search?.props ?? {};
+  if (searchEl === "tree-select") {
+    searchProps = { ...searchProps, props: { ...searchProps.props, label, children }, nodeKey: value };
+  }
+  if (searchEl === "cascader") {
+    searchProps = { ...searchProps, props: { ...searchProps.props, label, value, children } };
+  }
+  return searchProps;
+});
+
+// 处理默认 placeholder
+const placeholder = computed(() => {
+  const search = props.column.search;
+  if (["datetimerange", "daterange", "monthrange"].includes(search?.props?.type) || search?.props?.isRange) {
+    return {
+      rangeSeparator: search?.props?.rangeSeparator ?? "至",
+      startPlaceholder: search?.props?.startPlaceholder ?? "开始时间",
+      endPlaceholder: search?.props?.endPlaceholder ?? "结束时间"
+    };
+  }
+  const placeholder = search?.props?.placeholder ?? (search?.el?.includes("input") ? "请输入" : "请选择");
+  return { placeholder };
+});
+
+// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
+const clearable = computed(() => {
+  const search = props.column.search;
+  return search?.props?.clearable ?? (search?.defaultValue == null || search?.defaultValue == undefined);
+});
+</script>
--- a/src/components/SearchForm/index.vue
+++ b/src/components/SearchForm/index.vue
@ -0,0 +1,94 @@
+<template>
+  <div v-if="columns.length" class="card table-search">
+    <el-form ref="formRef" :model="searchParam">
+      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
+        <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
+          <el-form-item>
+            <template #label>
+              <el-space :size="4">
+                <span>{{ `${item.search?.label ?? item.label}` }}</span>
+                <el-tooltip v-if="item.search?.tooltip" effect="dark" :content="item.search?.tooltip" placement="top">
+                  <i :class="'iconfont icon-yiwen'"></i>
+                </el-tooltip>
+              </el-space>
+              <span>:</span>
+            </template>
+            <SearchFormItem :column="item" :search-param="searchParam" />
+          </el-form-item>
+        </GridItem>
+        <GridItem suffix>
+          <div class="operation">
+            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
+            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
+            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
+              {{ collapsed ? "展开" : "合并" }}
+              <el-icon class="el-icon--right">
+                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
+              </el-icon>
+            </el-button>
+          </div>
+        </GridItem>
+      </Grid>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { computed, ref } from "vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+import { BreakPoint } from "@/components/Grid/interface";
+import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+import SearchFormItem from "./components/SearchFormItem.vue";
+import Grid from "@/components/Grid/index.vue";
+import GridItem from "@/components/Grid/components/GridItem.vue";
+
+interface ProTableProps {
+  columns?: ColumnProps[]; // 搜索配置列
+  searchParam?: { [key: string]: any }; // 搜索参数
+  searchCol: number | Record<BreakPoint, number>;
+  search: (params: any) => void; // 搜索方法
+  reset: (params: any) => void; // 重置方法
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  searchParam: () => ({})
+});
+
+// 获取响应式设置
+const getResponsive = (item: ColumnProps) => {
+  return {
+    span: item.search?.span,
+    offset: item.search?.offset ?? 0,
+    xs: item.search?.xs,
+    sm: item.search?.sm,
+    md: item.search?.md,
+    lg: item.search?.lg,
+    xl: item.search?.xl
+  };
+};
+
+// 是否默认折叠搜索项
+const collapsed = ref(true);
+
+// 获取响应式断点
+const gridRef = ref();
+const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
+
+// 判断是否显示 展开/合并 按钮
+const showCollapse = computed(() => {
+  let show = false;
+  props.columns.reduce((prev, current) => {
+    prev +=
+      (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
+      (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
+    if (typeof props.searchCol !== "number") {
+      if (prev >= props.searchCol[breakPoint.value]) show = true;
+    } else {
+      if (prev >= props.searchCol) show = true;
+    }
+    return prev;
+  }, 0);
+  return show;
+});
+</script>
--- a/src/components/SelectFilter/index.scss
+++ b/src/components/SelectFilter/index.scss
@ -0,0 +1,63 @@
+.select-filter {
+  width: 100%;
+  .select-filter-item {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px dashed var(--el-border-color-light);
+    &:last-child {
+      border-bottom: none;
+    }
+    .select-filter-item-title {
+      margin-top: -2px;
+      span {
+        font-size: 14px;
+        color: var(--el-text-color-regular);
+        white-space: nowrap;
+      }
+    }
+    .select-filter-notData {
+      margin: 18px 0;
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+    }
+    .select-filter-list {
+      display: flex;
+      flex: 1;
+      padding: 0;
+      margin: 13px 0;
+      li {
+        display: flex;
+        align-items: center;
+        padding: 5px 15px;
+        margin-right: 16px;
+        font-size: 13px;
+        color: var(--el-color-primary);
+        list-style: none;
+        cursor: pointer;
+        background: var(--el-color-primary-light-9);
+        border: 1px solid var(--el-color-primary-light-5);
+        border-radius: 32px;
+        &:hover {
+          color: #ffffff;
+          background: var(--el-color-primary);
+          border-color: var(--el-color-primary);
+          transition: 0.1s;
+        }
+        &.active {
+          font-weight: bold;
+          color: #ffffff;
+          background: var(--el-color-primary);
+          border-color: var(--el-color-primary);
+        }
+        .el-icon {
+          margin-right: 4px;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        span {
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`
				`@ -0,0 +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 class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M574 342.8m-38.3 0a38.3 38.3 0 1 0 76.6 0 38.3 38.3 0 1 0-76.6 0Z" fill="#F2B843" /><path d="M627 697c15.2-20.7 45.3-294-45-383.3-3-6.1-0.4-13.5 5.7-16.5 6.2-3 13.5-0.5 16.5 5.7C689.8 370.2 719.9 573 705.1 697H627z" fill="#EA800C" /><path d="M617.8 307.4m-38.3 0a38.3 38.3 0 1 0 76.6 0 38.3 38.3 0 1 0-76.6 0Z" fill="#F2B843" /><path d="M608 272.5L461 502.8c-33.6-47.5-37.2-112.5-3.9-164.6 33.2-52.1 93.7-76.2 150.9-65.7z" fill="#3DC38A" /><path d="M742.5 132.3L569.9 299.8c-19.2-47.5-9.1-103.9 29.9-141.8 39.1-37.9 95.8-46.3 142.7-25.7z" fill="#2F9B77" /><path d="M608.7 289.2l-239.6 21.1c15.1-49 58.5-86.4 112.7-91.1 54.2-4.8 103.5 24.4 126.9 70z" fill="#2F9B77" /><path d="M594.7 269.9L408.5 168.4c35-28.6 85.2-34.8 127.3-11.9 42.1 23 64 68.6 58.9 113.4z" fill="#3DC38A" /><path d="M825.5 331.8l-271.4-31.4c28-51 84.9-82.7 146.3-75.6 61.3 7 109.5 51 125.1 107z" fill="#3DC38A" /><path d="M75.3 868.9c0-86.5 104.3-173 233-173s233 86.5 233 173h-466z" fill="#2F9B77" /><path d="M938.2 868.9c0-116.2-130.9-232.3-292.3-232.3S353.5 752.7 353.5 868.9h584.7z" fill="#3DC38A" /><path d="M858.9 701.5c-28.1-23.1-60.4-41.4-95.9-54.3-14.5-5.3-29.3-9.5-44.3-12.8 0.2-51.3-5.5-106.3-16.2-155.9-11.9-54.8-29.5-101.6-51.2-136.3 5.6-5.3 9.7-11.8 12.2-19.1l160.8 18.6c0.4 0 0.8 0.1 1.2 0.1 2.9 0 5.7-1.3 7.6-3.5 2.2-2.5 2.9-6 2-9.2-8.3-29.8-25.1-56.3-48.5-76.7-24-20.9-53.5-33.9-85.1-37.5-9.7-1.1-19.3-1.3-28.9-0.7l76.8-74.6c2.4-2.3 3.5-5.7 2.9-8.9-0.6-3.3-2.8-6-5.8-7.4-52.3-23-112.6-12.1-153.7 27.7-7.2 7-13.6 14.7-19.1 23.1-9.4-10.5-20.6-19.4-33.1-26.2-44.7-24.3-99-19.2-138.4 12.9-2.6 2.1-3.9 5.4-3.6 8.7s2.2 6.3 5.2 7.9l62.5 34c-50.2 9.8-91.2 46.2-106.6 96-1 3.2-0.3 6.6 1.8 9.2 1.9 2.4 4.8 3.7 7.8 3.7h0.9l94.5-8.3c-5.8 6.4-11 13.3-15.8 20.8-17.2 26.9-25.7 57.9-24.7 89.7 1 31 11 60.8 28.9 86 1.9 2.7 4.9 4.2 8.2 4.2h0.2c3.3-0.1 6.4-1.8 8.2-4.6L549 383.9c7.5 4.6 16.1 7.1 25.2 7.1 13.4 0 25.9-5.5 34.8-14.7 27.2 70.9 29.2 175.3 21.8 250.6-34.9 1.5-69.1 8.3-101.8 20.2-35.5 12.9-67.8 31.2-95.9 54.3-3.2 2.6-6.3 5.3-9.4 8.1-35.7-15.5-75.4-23.6-115.1-23.6-63.1 0-123.8 19.9-170.9 56.1-45.8 35.3-72.1 81.5-72.1 126.9 0 5.5 4.5 10 10 10h862.9c5.5 0 10-4.5 10-10-0.3-59.7-32.8-120.7-89.6-167.4z m-226.2-370c-3.3 2.1-7 3.4-10.9 3.9-1-6.4-3.2-12.5-6.5-17.9l27.6 3.2c-2.3 4.4-5.8 8.1-10.2 10.8z m66.6-96.8c27.6 3.2 53.3 14.5 74.3 32.7 16.6 14.5 29.4 32.4 37.5 52.6l-152.7-17.7c-0.4-0.1-0.8-0.2-1.2-0.2-0.4 0-0.8-0.1-1.2-0.1l-65.3-7.6c-1-0.3-2-0.4-2.9-0.3l-5.5-0.6c-0.1 0-0.2-0.1-0.3-0.1-0.7-0.1-1.3-0.2-2-0.2l-8.8-1c5.3-7.5 11.3-14.5 18-20.8 0.5-0.4 1-0.8 1.4-1.3 8.7-8 18.4-14.9 29.1-20.5 8-4.2 16.4-7.6 24.9-10.2 0.5-0.1 0.9-0.2 1.4-0.4 17-4.8 35.1-6.4 53.3-4.3z m-92.5-69.4c31.5-30.5 76.2-41.2 117.4-29l-87 84.4c-9.3 2.9-18.4 6.6-27.1 11.2-2.2 1.2-4.3 2.4-6.5 3.6-2.8-15.7-8.5-30.8-17-44.4 5.5-9.5 12.3-18.2 20.2-25.8z m-75.8 0.1c14.4 7.9 26.4 18.6 35.7 31.9 10.5 15.1 16.8 32.7 18.4 51-1.2 1-2.5 2-3.6 3l-74-40.3c-0.8-0.7-1.8-1.2-2.8-1.5l-77.2-42.1c31.3-18.8 70.6-20 103.5-2z m-48.2 63.8c5.2-0.5 10.3-0.6 15.4-0.4l68.2 37.1c-5.1 5.7-9.9 11.8-14.2 18.2l-60 5.3-108.1 9.5c17.8-39.1 55-66 98.7-69.7zM461.2 484c-24.3-43.9-23-97.5 4.5-140.6 8.5-13.4 19-24.9 31.3-34.4l48.3-4.2s0 0.1 0.1 0.1c1.5 3 4.4 5 7.7 5.3l17.8 2.1-32.1 50.3c-0.6 0.7-1 1.4-1.4 2.2L461.2 484zM574 371c-5.2 0-10.1-1.4-14.4-3.9l29.3-45.9 1.1-1.8c7.6 5.2 12.4 13.9 12.4 23.4v2.1c-0.1 1.8-0.5 3.8-1.1 6.1-0.2 0.6-0.4 1.1-0.6 1.7-4.2 10.9-14.8 18.3-26.7 18.3z m47.8-15.5c4.3-0.3 8.6-1.3 12.6-2.7 20.5 32.6 37.2 77.3 48.6 129.9 10.2 47.1 15.7 99.1 15.8 148-15.9-2.5-31.9-3.8-48.1-4 2.7-28.8 5.6-76.5 1.8-130.4-4-57.6-14.3-104.8-30.7-140.8zM149.6 757.9c43.6-33.5 99.9-52 158.7-52 34.2 0 68.3 6.5 99.4 18.8-38.4 40-61.1 87.2-63.9 134.2h-258c3.6-35.9 26.4-72.2 63.8-101z m391.7 101H363.8c3.4-50.5 32.8-101.8 81.7-142 26.4-21.7 56.6-38.8 90-50.9 35.4-12.8 72.5-19.4 110.4-19.4 37.9 0 75 6.5 110.3 19.4 33.4 12.1 63.6 29.3 90 50.9 48.9 40.2 78.2 91.5 81.6 142H541.3z" fill="#4D3500" /></svg>