diff --git a/.env.development b/.env.development
index 9b1fef53..73f7934b 100644
--- a/.env.development
+++ b/.env.development
@@ -2,5 +2,7 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://localhost:8000'
+VUE_APP_BASE_API = 'http://localhost:8001'
 
+# Suppress Sass deprecation warnings
+SASS_SILENCE_DEPRECATIONS = 'legacy-js-api'
diff --git a/.env.production b/.env.production
index 8994f694..9cbf6032 100644
--- a/.env.production
+++ b/.env.production
@@ -4,3 +4,5 @@ ENV = 'production'
 # base api
 VUE_APP_BASE_API = ''
 
+# Suppress Sass deprecation warnings
+SASS_SILENCE_DEPRECATIONS = 'legacy-js-api'
diff --git a/.eslintrc.js b/.eslintrc.js
index a0c1c709..cb958871 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,31 +1,35 @@
 module.exports = {
   root: true,
   parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
+    parser: '@babel/eslint-parser',
+    sourceType: 'module',
+    requireConfigFile: false
   },
   env: {
     browser: true,
     node: true,
     es6: true
   },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
 
   // add your custom rules here
   // it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
     'vue/max-attributes-per-line': [2, {
-      'singleline': 10,
+      'singleline': {
+        'max': 10
+      },
       'multiline': {
-        'max': 1,
-        'allowFirstLine': false
+        'max': 1
       }
     }],
     'vue/no-template-shadow': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
-    'vue/name-property-casing': ['error', 'PascalCase'],
     'vue/no-v-html': 'off',
+    // Vue 3 规则调整
+    'vue/no-deprecated-slot-attribute': 'warn',
+    'vue/multi-word-component-names': 'warn',
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,
diff --git a/.gitignore b/.gitignore
index 78a752d8..b9ca6a66 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,7 @@ selenium-debug.log
 
 package-lock.json
 yarn.lock
+
+# Claude Code
+CLAUDE.md
+.claude/
diff --git a/UPGRADE_TO_VUE3.md b/UPGRADE_TO_VUE3.md
new file mode 100644
index 00000000..eb6a6e22
--- /dev/null
+++ b/UPGRADE_TO_VUE3.md
@@ -0,0 +1,75 @@
+# go-admin-ui Vue3 升级实施文档
+
+## 1. 项目分支说明
+当前升级分支：`dev-to-vue3`
+
+## 2. 升级目标
+- Vue 2.x → Vue 3.x
+- Element UI → Element Plus
+- Babel、Webpack、ESLint、Jest 等工具包升级
+- 其他安全性相关依赖（如 axios、lodash）升级
+- **Node.js 版本升级**：从 >=8.9 升级到 >=18.0（推荐 LTS 版本）
+
+## 3. 升级实施阶段
+
+### 阶段零：环境准备（0.5 天） ✅ 已完成
+- 检查当前 Node.js 版本（当前 v18.20.1 ✅）
+- 升级 Node.js 到最新 LTS 版本（已满足要求）
+- 升级 npm 到最新版本（已满足要求）
+- 验证新环境下的项目能否正常运行基础命令（如 `npm install` ✅）
+
+### 阶段一：准备与调研 ✅ 已完成
+- 备份当前代码，确保可回滚。
+- 盘点所有依赖，确认升级目标版本。
+- 使用 npm-check-updates 生成升级清单 ✅
+- 执行次要版本依赖升级 ✅
+- 解决依赖冲突并安装新版本 ✅
+- 验证项目基础功能（lint、test）✅
+
+### 阶段二：依赖升级
+- 使用 npm-check-updates 或手动修改 `package.json`，升级核心依赖。
+- 执行 `npm install`，解决依赖冲突。
+- 升级 Babel、Webpack、ESLint、Jest、axios、lodash 等工具包。
+
+### 阶段三：代码适配与重构
+- 全面适配 Vue 3 语法（如 Composition API、生命周期钩子变更）。
+- 替换 Element UI 为 Element Plus，调整组件用法。
+- 升级 vue-router、vuex，并适配新 API。
+- 检查第三方库兼容性，必要时替换或移除。
+
+### 阶段四：配置文件调整
+- 更新 babel.config.js、webpack、eslint、jest 等配置文件。
+- 检查并调整 polyfill、postcss、plop 等相关配置。
+
+### 阶段五：测试与回归
+- 运行单元测试，修复因升级导致的测试失败。
+- 手动回归主要功能页面，确保无异常。
+- 检查打包、部署流程是否正常。
+
+### 阶段六：文档与说明
+- 更新 README.md，说明升级内容及注意事项。
+- 补充迁移指南，便于团队成员理解变更。
+
+### 阶段七：评审与合并
+- 团队代码评审，确认无重大问题后合并至主分支。
+
+## 4. 当前进度总结
+- ✅ Node.js 环境检查完成（v18.20.1）
+- ✅ 依赖盘点完成，生成了 68 个可升级项
+- ✅ 次要版本依赖升级完成（patch/minor 版本）
+- ✅ 依赖安装成功，项目可正常运行
+- ✅ ESLint 验证通过（发现 35 个问题，多数为代码风格问题）
+- ⚠️ 单元测试部分失败（9 个失败，14 个通过），主要问题：
+  - `time_str` 变量初始化问题（src/utils/index.js）
+  - @vue/test-utils `contains` 方法弃用（测试代码需更新）
+
+## 5. 参考迁移资源
+- [Vue 2 → Vue 3 官方迁移指南](https://v3-migration.vuejs.org/)
+- [Element UI → Element Plus 迁移文档](https://element-plus.org/zh-CN/guide/migration.html)
+- [vue-router 4.x 文档](https://router.vuejs.org/)
+- [vuex 4.x 文档](https://vuex.vuejs.org/)
+- [Node.js LTS 版本说明](https://nodejs.org/en/about/releases/)
+
+---
+
+> 后续所有升级、重构、测试等工作请严格按照本实施文档分阶段推进。
diff --git a/VUE3_UPGRADE_COMPLETE.md b/VUE3_UPGRADE_COMPLETE.md
new file mode 100644
index 00000000..e69de29b
diff --git a/babel.config.js b/babel.config.js
index 34be5d79..2ed56c9d 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,6 +2,9 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
   ],
+  plugins: [
+    '@vue/babel-plugin-jsx'
+  ],
   env: {
     development: {
       plugins: ['dynamic-import-node']
diff --git a/public/index.html b/index.html
similarity index 97%
rename from public/index.html
rename to index.html
index 7f2be5e2..c0c7b97f 100644
--- a/public/index.html
+++ b/index.html
@@ -6,10 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="renderer" content="webkit">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>
-    <%= webpackConfig.name %> - go-admin
-  </title>
+  <link rel="icon" href="/favicon.ico">
+  <title>go-admin</title>
   <meta name="keywords" content="go-admin,gin,权限管理系统,gin-admin,gin-vue-admin,go">
   <meta name="description"
     content="基于Gin + Vue + Element UI的前后端分离权限管理系统，初始化极度简单，只需要配置文件中，修改数据库连接，系统启动后会自动初始化数据库信息以及必须的基础数据">
diff --git a/package-clean.json b/package-clean.json
new file mode 100644
index 00000000..e69de29b
diff --git a/package.json b/package.json
index a5e95d24..97a96456 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,9 @@
   "author": "https://github.com/wenjianzhang",
   "license": "MIT",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
+    "dev": "SASS_SILENCE_DEPRECATIONS=legacy-js-api vue-cli-service serve",
+    "build:prod": "SASS_SILENCE_DEPRECATIONS=legacy-js-api vue-cli-service build",
+    "build:stage": "SASS_SILENCE_DEPRECATIONS=legacy-js-api vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "lint": "eslint --ext .js,.vue src",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
@@ -45,76 +45,82 @@
     "url": "https://github.com/go-admin-team/go-admin/issues"
   },
   "dependencies": {
-    "@riophae/vue-treeselect": "0.4.0",
-    "awe-dnd": "^0.3.4",
-    "axios": "0.21.1",
-    "clipboard": "2.0.6",
-    "codemirror": "5.62.0",
-    "core-js": "^3.6.5",
+    "@element-plus/icons-vue": "^2.3.2",
+    "@tsparticles/slim": "^3.0.3",
+    "@tsparticles/vue3": "^3.0.1",
+    "@vueuse/core": "^14.2.0",
+    "axios": "^1.6.0",
+    "clipboard": "2.0.11",
+    "codemirror": "^6.0.1",
+    "core-js": "^3.45.1",
     "driver.js": "0.9.8",
-    "dropzone": "5.7.2",
-    "echarts": "4.8.0",
-    "element-ui": "2.15.6",
-    "file-saver": "2.0.2",
-    "fuse.js": "6.4.1",
-    "js-cookie": "2.2.1",
+    "dropzone": "5.9.3",
+    "echarts": "^5.5.0",
+    "element-plus": "^2.8.0",
+    "file-saver": "2.0.5",
+    "fuse.js": "6.6.2",
+    "js-cookie": "3.0.5",
     "jsonlint": "1.6.3",
-    "jszip": "3.5.0",
-    "moment": "^2.27.0",
+    "jszip": "3.10.1",
+    "moment": "^2.30.1",
     "normalize.css": "8.0.1",
     "nprogress": "0.2.0",
-    "path-to-regexp": "6.1.0",
+    "path-to-regexp": "6.3.0",
     "remixicon": "^2.5.0",
-    "sass-resources-loader": "^2.0.3",
-    "screenfull": "5.0.2",
-    "viser-vue": "^2.4.8",
-    "vue": "2.6.11",
-    "vue-codemirror": "^4.0.6",
+    "sass-resources-loader": "^2.2.5",
+    "screenfull": "5.2.0",
+    "vue": "^3.4.0",
+    "vue-codemirror": "^6.1.1",
     "vue-count-to": "1.0.13",
-    "vue-cropper": "^0.5.5",
-    "vue-particles": "^1.0.9",
-    "vue-router": "3.4.7",
-    "vuedraggable": "2.24.0",
-    "vuex": "3.5.1",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "xlsx": "0.16.5"
+    "vue-cropper": "^1.1.3",
+    "vue-router": "^4.4.0",
+    "vue3-dnd": "^2.1.0",
+    "vue3-treeselect": "^0.1.10",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.1.0",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@babel/core": "7.11.1",
-    "@babel/register": "^7.10.5",
-    "@babel/runtime": "^7.12.1",
-    "@vue/babel-preset-app": "^4.5.7",
-    "@vue/cli-plugin-babel": "4.4.6",
-    "@vue/cli-plugin-eslint": "^4.4.6",
-    "@vue/cli-plugin-unit-jest": "4.4.6",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/test-utils": "1.0.3",
-    "autoprefixer": "^9.8.6",
+    "@babel/core": "7.28.3",
+    "@babel/eslint-parser": "^7.28.6",
+    "@babel/register": "^7.28.3",
+    "@babel/runtime": "^7.28.3",
+    "@playwright/test": "^1.60.0",
+    "@vue/babel-plugin-jsx": "^1.5.0",
+    "@vue/babel-preset-app": "^5.0.8",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.0",
+    "@vue/test-utils": "^2.4.0",
+    "autoprefixer": "^9.8.8",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.2.2",
+    "babel-jest": "26.6.3",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "beautifier": "^0.1.7",
-    "chalk": "4.1.0",
-    "chokidar": "3.4.2",
-    "compression-webpack-plugin": "^4.0.0",
+    "chalk": "4.1.2",
+    "chokidar": "3.6.0",
+    "compression-webpack-plugin": "^4.0.1",
     "connect": "3.7.0",
-    "eslint": "7.6.0",
-    "eslint-plugin-vue": "6.2.2",
-    "html-webpack-plugin": "4.3.0",
-    "husky": "4.2.5",
-    "lint-staged": "10.2.11",
+    "eslint": "7.32.0",
+    "eslint-plugin-vue": "^9.33.0",
+    "html-webpack-plugin": "4.5.2",
+    "husky": "4.3.8",
+    "lint-staged": "10.5.4",
     "mockjs": "1.1.0",
-    "plop": "2.7.4",
+    "path-browserify": "^1.0.1",
+    "plop": "2.7.6",
     "runjs": "^4.4.2",
-    "sass": "^1.35.1",
-    "sass-loader": "^9.0.3",
-    "script-ext-html-webpack-plugin": "2.1.4",
+    "sass": "^1.91.0",
+    "sass-loader": "^13.3.3",
+    "script-ext-html-webpack-plugin": "2.1.5",
     "script-loader": "0.7.2",
-    "serve-static": "^1.14.1",
-    "svg-sprite-loader": "^5.0.0",
-    "svgo": "1.3.2",
-    "vue-template-compiler": "2.6.11"
+    "serve-static": "^1.16.2",
+    "svg-sprite-loader": "^5.2.1",
+    "svgo": "1.3.2"
   },
   "engines": {
     "node": ">=8.9",
diff --git a/src/App.vue b/src/App.vue
index e72e75ff..8ed4ca7d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,18 +6,18 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  mounted() {
+    // 声明: 百度统计统计相关下载使用量无别的用途
+    // 可自行删除
+    var _hmt = _hmt || []
+    ;(function() {
+      var hm = document.createElement('script')
+      hm.src = 'https://hm.baidu.com/hm.js?1d2d61263f13e4b288c8da19ad3ff56d'
+      var s = document.getElementsByTagName('script')[0]
+      s.parentNode.insertBefore(hm, s)
+    })()
+  }
 }
 </script>
-<script>
-// 声明: 百度统计统计相关下载使用量无别的用途
-// 可自行删除
-var _hmt = _hmt || [];
-(function() {
-  var hm = document.createElement("script");
-  hm.src = "https://hm.baidu.com/hm.js?1d2d61263f13e4b288c8da19ad3ff56d";
-  var s = document.getElementsByTagName("script")[0];
-  s.parentNode.insertBefore(hm, s);
-})();
-</script>
 
diff --git a/src/components/Bar.vue b/src/components/Bar.vue
index 22200f90..a5b26bcf 100644
--- a/src/components/Bar.vue
+++ b/src/components/Bar.vue
@@ -1,67 +1,58 @@
 <template>
   <div :style="{ padding: '0 0 32px 32px' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart
-      height="254"
-      :data="arr"
-      :force-fit="true"
-      :padding="['auto', 'auto', '40', '50']"
-    >
-      <v-tooltip />
-      <v-axis />
-      <v-bar position="x*y" />
-    </v-chart>
+    <div ref="chartRef" style="width: 100%; height: 254px;" />
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
+
 export default {
-  name: 'Bar',
+  name: 'AppBar',
   props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    list: {
-      type: Array,
-      default: () => {}
-    },
-    scale: {
-      type: Array,
-      default: () => {
-        return [{
-          dataKey: 'x',
-          min: 2
-        }, {
-          dataKey: 'y',
-          title: '时间',
-          min: 1,
-          max: 22
-        }]
-      }
-    },
-    tooltip: {
-      type: Array,
-      default: () => {
-        return [
-          'x*y',
-          (x, y) => ({
-            name: x,
-            value: y
-          })
-        ]
-      }
-    }
+    title: { type: String, default: '' },
+    list: { type: Array, default: () => [] }
   },
   data() {
-    return {
-      arr: []
-    }
+    return { chart: null }
+  },
+  watch: {
+    list: { handler() { this.updateChart() }, deep: true }
   },
   mounted() {
-    setTimeout(_ => {
-      this.arr = this.list
-    }, 300)
+    this.$nextTick(() => { this.initChart() })
+  },
+  beforeUnmount() {
+    if (this.chart) { this.chart.dispose(); this.chart = null }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartRef)
+      this.updateChart()
+    },
+    updateChart() {
+      if (!this.chart) return
+      const data = this.list || []
+      this.chart.setOption({
+        grid: { top: 20, bottom: 30, left: '3%', right: '3%', containLabel: true },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }},
+        xAxis: { type: 'category', data: data.map(d => d.x), axisTick: { alignWithLabel: true }},
+        yAxis: { type: 'value' },
+        series: [{
+          type: 'bar',
+          data: data.map(d => d.y),
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#40a9ff' },
+              { offset: 1, color: '#1677ff' }
+            ]),
+            borderRadius: [4, 4, 0, 0]
+          },
+          barMaxWidth: 40
+        }]
+      })
+    }
   }
 }
 </script>
diff --git a/src/components/Cell/index.vue b/src/components/Cell/index.vue
index 634dbb54..9832afc3 100644
--- a/src/components/Cell/index.vue
+++ b/src/components/Cell/index.vue
@@ -27,7 +27,7 @@
 
 <script>
 export default {
-  name: 'Cell',
+  name: 'AppCell',
   props: {
     border: {
       type: Boolean,
diff --git a/src/components/ChartCard/index.vue b/src/components/ChartCard/index.vue
index 34e0f3d6..8d0579f9 100644
--- a/src/components/ChartCard/index.vue
+++ b/src/components/ChartCard/index.vue
@@ -1,114 +1,150 @@
 <template>
-  <el-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
-    <div class="chart-card-header">
-      <div class="meta">
-        <span class="chart-card-title">
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </span>
-        <span class="chart-card-action">
-          <slot name="action" />
-        </span>
+  <div class="chart-card-wrap" :style="{ '--kpi-color': color }">
+    <el-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
+      <div v-if="$slots.icon" class="kpi-icon-bg">
+        <slot name="icon" />
       </div>
-      <div class="total">
-        <slot name="total">
-          <span>{{ typeof total === 'function' && total() || total }}</span>
-        </slot>
+      <div class="chart-card-header">
+        <div class="meta">
+          <span class="chart-card-title">
+            <slot name="title">{{ title }}</slot>
+          </span>
+          <span class="chart-card-action">
+            <slot name="action" />
+          </span>
+        </div>
+        <div class="total">
+          <slot name="total">
+            <span>{{ typeof total === 'function' && total() || total }}</span>
+          </slot>
+        </div>
       </div>
-    </div>
-    <div class="chart-card-content">
-      <div class="content-fix">
-        <slot />
+      <div class="chart-card-content">
+        <div class="content-fix">
+          <slot />
+        </div>
       </div>
-    </div>
-    <div class="chart-card-footer">
-      <div class="field">
-        <slot name="footer" />
+      <div class="chart-card-footer">
+        <div class="field">
+          <slot name="footer" />
+        </div>
       </div>
-    </div>
-  </el-card>
+    </el-card>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'ChartCard',
   props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    total: {
-      type: [Function, Number, String],
-      required: false,
-      default: null
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
+    title: { type: String, default: '' },
+    total: { type: [Function, Number, String], required: false, default: null },
+    loading: { type: Boolean, default: false },
+    color: { type: String, default: '#1677ff' }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .chart-card-header {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    .meta {
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      color: rgba(0, 0, 0, .45);
-      font-size: 14px;
-      line-height: 22px;
-    }
-  }
-  .chart-card-action {
-    cursor: pointer;
+.chart-card-wrap {
+  position: relative;
+  border-radius: 8px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
     position: absolute;
+    left: 0;
     top: 0;
-    right: 0;
+    bottom: 0;
+    width: 4px;
+    background-color: var(--kpi-color, #1677ff);
+    z-index: 1;
+    border-radius: 4px 0 0 4px;
   }
-  .chart-card-footer {
-    border-top: 1px solid #e8e8e8;
-    padding-top: 9px;
-    margin-top: 8px;
-    > * {
-      position: relative;
-    }
-    .field {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 0;
-      color: rgba(0,0,0,.65);
-      font-size: 14px;
-    }
+
+  :deep(.el-card) {
+    border-left: none !important;
+    border-radius: 0 8px 8px 0;
   }
-  .chart-card-content {
-    margin-bottom: 12px;
+}
+
+.kpi-icon-bg {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  font-size: 56px;
+  opacity: 0.1;
+  color: var(--kpi-color, #1677ff);
+  line-height: 1;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.chart-card-header {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+
+  .meta {
     position: relative;
-    height: 46px;
+    overflow: hidden;
     width: 100%;
-    .content-fix {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-    }
+    color: rgba(0, 0, 0, .45);
+    font-size: 14px;
+    line-height: 22px;
   }
-  .total {
+}
+
+.chart-card-action {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.chart-card-footer {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 9px;
+  margin-top: 8px;
+
+  > * { position: relative; }
+
+  .field {
+    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    color: #000;
-    margin-top: 4px;
-    margin-bottom: 0;
-    font-size: 30px;
-    line-height: 38px;
-    height: 38px;
+    margin: 0;
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
   }
+}
+
+.chart-card-content {
+  margin-bottom: 12px;
+  position: relative;
+  height: 46px;
+  width: 100%;
+
+  .content-fix {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+.total {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  margin-top: 4px;
+  margin-bottom: 0;
+  font-size: 28px;
+  line-height: 38px;
+  height: 38px;
+  font-weight: 600;
+}
 </style>
diff --git a/src/components/Charts/Keyboard.vue b/src/components/Charts/Keyboard.vue
index 0b258f36..cee58846 100644
--- a/src/components/Charts/Keyboard.vue
+++ b/src/components/Charts/Keyboard.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import resize from './mixins/resize'
 
 export default {
@@ -34,7 +34,7 @@ export default {
   mounted() {
     this.initChart()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (!this.chart) {
       return
     }
diff --git a/src/components/Charts/LineMarker.vue b/src/components/Charts/LineMarker.vue
index 3dd74369..4683c600 100644
--- a/src/components/Charts/LineMarker.vue
+++ b/src/components/Charts/LineMarker.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import resize from './mixins/resize'
 
 export default {
@@ -34,7 +34,7 @@ export default {
   mounted() {
     this.initChart()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (!this.chart) {
       return
     }
diff --git a/src/components/Charts/MixChart.vue b/src/components/Charts/MixChart.vue
index c416542e..d1455410 100644
--- a/src/components/Charts/MixChart.vue
+++ b/src/components/Charts/MixChart.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import echarts from 'echarts'
+import * as echarts from 'echarts'
 import resize from './mixins/resize'
 
 export default {
@@ -34,7 +34,7 @@ export default {
   mounted() {
     this.initChart()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (!this.chart) {
       return
     }
diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js
index dccaf1a8..1cf8b0ce 100644
--- a/src/components/Charts/mixins/resize.js
+++ b/src/components/Charts/mixins/resize.js
@@ -17,7 +17,7 @@ export default {
     this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
     this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.__resizeHandler)
 
     this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
diff --git a/src/components/ErrorLog/index.vue b/src/components/ErrorLog/index.vue
index 6119c037..2e28b1ad 100644
--- a/src/components/ErrorLog/index.vue
+++ b/src/components/ErrorLog/index.vue
@@ -1,19 +1,19 @@
 <template>
   <div v-if="errorLogs.length>0">
-    <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click.native="dialogTableVisible=true">
+    <el-badge :is-dot="true" style="line-height: 25px;margin-top: -5px;" @click="dialogTableVisible=true">
       <el-button style="padding: 8px 10px;" size="small" type="danger">
         <svg-icon icon-class="bug" />
       </el-button>
     </el-badge>
 
-    <el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body>
-      <div slot="title">
+    <el-dialog v-model="showDialog" width="80%" append-to-body>
+      <template #header>
         <span style="padding-right: 10px;">Error Log</span>
-        <el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button>
-      </div>
+        <el-button size="mini" type="primary" @click="clearAll"><i class="ri-delete-bin-line" style="margin-right:4px;" />Clear All</el-button>
+      </template>
       <el-table :data="errorLogs" border>
         <el-table-column label="Message">
-          <template slot-scope="{row}">
+          <template #default="{row}">
             <div>
               <span class="message-title">Msg:</span>
               <el-tag type="danger">
@@ -37,7 +37,7 @@
           </template>
         </el-table-column>
         <el-table-column label="Stack">
-          <template slot-scope="scope">
+          <template #default="scope">
             {{ scope.row.err.stack }}
           </template>
         </el-table-column>
diff --git a/src/components/FormGenParser/Parser.vue b/src/components/FormGenParser/Parser.vue
index 88ec198d..d5ee02c4 100644
--- a/src/components/FormGenParser/Parser.vue
+++ b/src/components/FormGenParser/Parser.vue
@@ -97,8 +97,8 @@ function renderChildren(h, scheme) {
 }
 
 function setValue(event, config, scheme) {
-  this.$set(config, 'defaultValue', event)
-  this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
+  config.defaultValue = event
+  this[this.formConf.formModel][scheme.__vModel__] = event
 }
 
 function buildListeners(scheme) {
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 368b0021..a22d753f 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -15,7 +15,8 @@
 
 <script>
 export default {
-  name: 'Hamburger',
+  name: 'AppHamburger',
+  emits: ['toggleClick'],
   props: {
     isActive: {
       type: Boolean,
diff --git a/src/components/HeaderSearch/index.vue b/src/components/HeaderSearch/index.vue
index 6026ebb4..b6e24f42 100644
--- a/src/components/HeaderSearch/index.vue
+++ b/src/components/HeaderSearch/index.vue
@@ -159,7 +159,7 @@ export default {
     display: inline-block;
     vertical-align: middle;
 
-    ::v-deep .el-input__inner {
+    :deep(.el-input__inner) {
       border-radius: 0;
       border: 0;
       padding-left: 0;
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index f17a1a3c..e56e3df7 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="icon-body">
-    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
-      <i slot="suffix" class="el-icon-search el-input__icon" />
+    <el-input v-model="name" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
+      <template #suffix>
+        <i class="ri-search-line el-input__icon" />
+      </template>
     </el-input>
     <div class="icon-list">
       <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
@@ -16,6 +18,7 @@
 import icons from './requireIcons'
 export default {
   name: 'IconSelect',
+  emits: ['selected'],
   data() {
     return {
       name: '',
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index 13ae9a11..2dd8a1c6 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -399,7 +399,7 @@ export default {
     // 绑定按键esc隐藏此插件事件
     document.addEventListener('keyup', this.closeHandler)
   },
-  destroyed() {
+  unmounted() {
     document.removeEventListener('keyup', this.closeHandler)
   },
   methods: {
diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index c59ea34a..d78901c5 100644
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="computedClasses" class="material-input__component">
     <div :class="{iconClass:icon}">
-      <i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
+      <i v-if="icon" :class="['ri-' + icon]" class="el-input__icon material-input__icon" />
       <input
         v-if="type === 'email'"
         v-model="currentValue"
diff --git a/src/components/MiniArea/index.vue b/src/components/MiniArea/index.vue
index 2444414b..a65f3bf0 100644
--- a/src/components/MiniArea/index.vue
+++ b/src/components/MiniArea/index.vue
@@ -1,65 +1,60 @@
 <template>
   <div class="antv-chart-mini">
-    <div class="chart-wrapper" :style="{ height: 46 }">
-      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
-        <v-tooltip />
-        <v-smooth-area position="x*y" />
-      </v-chart>
-    </div>
+    <div ref="chartRef" style="height: 50px;" />
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
 import moment from 'moment'
-const data = []
-const beginDay = new Date().getTime()
-for (let i = 0; i < 10; i++) {
-  data.push({
-    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
-    y: Math.round(Math.random() * 10)
-  })
+
+const generateData = () => {
+  const data = []
+  const beginDay = new Date().getTime()
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('MM-DD'),
+      y: Math.round(Math.random() * 10)
+    })
+  }
+  return data
 }
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-const scale = [{
-  dataKey: 'x',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '时间',
-  min: 1,
-  max: 22
-}]
+
 export default {
   name: 'MiniArea',
   data() {
-    return {
-      data,
-      tooltip,
-      scale,
-      height: 100
+    return { chart: null, rawData: generateData() }
+  },
+  mounted() {
+    this.$nextTick(() => { this.initChart() })
+  },
+  beforeUnmount() {
+    if (this.chart) { this.chart.dispose(); this.chart = null }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartRef)
+      this.chart.setOption({
+        grid: { top: 2, bottom: 2, left: 2, right: 2 },
+        xAxis: { type: 'category', data: this.rawData.map(d => d.x), show: false, boundaryGap: false },
+        yAxis: { show: false },
+        series: [{
+          type: 'line',
+          data: this.rawData.map(d => d.y),
+          smooth: true,
+          symbol: 'none',
+          lineStyle: { color: '#1677ff', width: 2 },
+          areaStyle: { color: 'rgba(22,119,255,0.15)' }
+        }]
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .antv-chart-mini {
+.antv-chart-mini {
   position: relative;
   width: 100%;
-
-  .chart-wrapper {
-    position: absolute;
-    bottom: -28px;
-    width: 100%;
-
-/*    margin: 0 -5px;
-    overflow: hidden;*/
-  }
 }
 </style>
diff --git a/src/components/MiniBar/index.vue b/src/components/MiniBar/index.vue
index 17f600c0..95453e6b 100644
--- a/src/components/MiniBar/index.vue
+++ b/src/components/MiniBar/index.vue
@@ -1,65 +1,58 @@
 <template>
   <div class="antv-chart-mini">
-    <div class="chart-wrapper" :style="{ height: 46 }">
-      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
-        <v-tooltip />
-        <v-bar position="x*y" />
-      </v-chart>
-    </div>
+    <div ref="chartRef" style="height: 50px;" />
   </div>
 </template>
 
 <script>
+import * as echarts from 'echarts'
 import moment from 'moment'
-const data = []
-const beginDay = new Date().getTime()
-for (let i = 0; i < 10; i++) {
-  data.push({
-    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
-    y: Math.round(Math.random() * 10)
-  })
+
+const generateData = () => {
+  const data = []
+  const beginDay = new Date().getTime()
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('MM-DD'),
+      y: Math.round(Math.random() * 10)
+    })
+  }
+  return data
 }
-const tooltip = [
-  'x*y',
-  (x, y) => ({
-    name: x,
-    value: y
-  })
-]
-const scale = [{
-  dataKey: 'x',
-  min: 2
-}, {
-  dataKey: 'y',
-  title: '时间',
-  min: 1,
-  max: 30
-}]
+
 export default {
   name: 'MiniBar',
   data() {
-    return {
-      data,
-      tooltip,
-      scale,
-      height: 100
+    return { chart: null, rawData: generateData() }
+  },
+  mounted() {
+    this.$nextTick(() => { this.initChart() })
+  },
+  beforeUnmount() {
+    if (this.chart) { this.chart.dispose(); this.chart = null }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartRef)
+      this.chart.setOption({
+        grid: { top: 2, bottom: 2, left: 2, right: 2 },
+        xAxis: { type: 'category', data: this.rawData.map(d => d.x), show: false },
+        yAxis: { show: false },
+        series: [{
+          type: 'bar',
+          data: this.rawData.map(d => d.y),
+          itemStyle: { color: '#1677ff', borderRadius: 2 },
+          barMaxWidth: 12
+        }]
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .antv-chart-mini {
+.antv-chart-mini {
   position: relative;
   width: 100%;
-
-  .chart-wrapper {
-    position: absolute;
-    bottom: -28px;
-    width: 100%;
-
-/*    margin: 0 -5px;
-    overflow: hidden;*/
-  }
 }
 </style>
diff --git a/src/components/MiniProgress/index.vue b/src/components/MiniProgress/index.vue
index ea0cef51..98ab224a 100644
--- a/src/components/MiniProgress/index.vue
+++ b/src/components/MiniProgress/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="chart-mini-progress">
     <div class="target" :style="{ left: target + '%'}">
-      <span :style="{ backgroundColor: color }" />
-      <span :style="{ backgroundColor: color }" />
+      <span :style="{ backgroundColor: indicatorColor }" />
+      <span :style="{ backgroundColor: indicatorColor }" />
     </div>
     <div class="progress-wrapper">
-      <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }" />
+      <div class="progress" :style="{ background: color, width: percentage + '%', height: height }" />
     </div>
   </div>
 </template>
@@ -14,58 +14,53 @@
 export default {
   name: 'MiniProgress',
   props: {
-    target: {
-      type: Number,
-      default: 0
-    },
-    height: {
-      type: String,
-      default: '10px'
-    },
-    color: {
-      type: String,
-      default: '#13C2C2'
-    },
-    percentage: {
-      type: Number,
-      default: 0
-    }
+    target: { type: Number, default: 0 },
+    height: { type: String, default: '10px' },
+    color: { type: String, default: 'linear-gradient(90deg, #40a9ff, #1677ff)' },
+    indicatorColor: { type: String, default: '#1677ff' },
+    percentage: { type: Number, default: 0 }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .chart-mini-progress {
-    padding: 5px 0;
-    position: relative;
-    width: 100%;
-    .target {
+.chart-mini-progress {
+  padding: 5px 0;
+  position: relative;
+  width: 100%;
+
+  .target {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    span {
+      border-radius: 100px;
       position: absolute;
       top: 0;
-      bottom: 0;
-      span {
-        border-radius: 100px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 4px;
-        width: 2px;
-        &:last-child {
-          top: auto;
-          bottom: 0;
-        }
+      left: 0;
+      height: 4px;
+      width: 2px;
+
+      &:last-child {
+        top: auto;
+        bottom: 0;
       }
     }
-    .progress-wrapper {
-      background-color: #f5f5f5;
-      position: relative;
-      .progress {
-        transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
-        border-radius: 1px 0 0 1px;
-        background-color: #1890ff;
-        width: 0;
-        height: 100%;
-      }
+  }
+
+  .progress-wrapper {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+
+    .progress {
+      transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
+      border-radius: 4px;
+      width: 0;
+      height: 100%;
     }
   }
+}
 </style>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index c815e132..164ce79c 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div :class="{'hidden':hidden}" class="pagination-container">
     <el-pagination
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
       :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
       :layout="layout"
       :page-sizes="pageSizes"
       :total="total"
@@ -18,7 +18,8 @@
 import { scrollTo } from '@/utils/scroll-to'
 
 export default {
-  name: 'Pagination',
+  name: 'PaginationComponent',
+  emits: ['update:page', 'update:limit', 'pagination'],
   props: {
     total: {
       required: true,
diff --git a/src/components/RankList/index.vue b/src/components/RankList/index.vue
index cdb39963..1e7ccef6 100644
--- a/src/components/RankList/index.vue
+++ b/src/components/RankList/index.vue
@@ -3,9 +3,9 @@
     <h4 class="title">{{ title }}</h4>
     <ul class="list">
       <li v-for="(item, index) in list" :key="index">
-        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
-        <span>{{ item.name }}</span>
-        <span>{{ item.total }}</span>
+        <span :class="rankBadgeClass(index)">{{ index + 1 }}</span>
+        <span class="rank-name">{{ item.name }}</span>
+        <span class="rank-total">{{ item.total }}</span>
       </li>
     </ul>
   </div>
@@ -15,55 +15,92 @@
 export default {
   name: 'RankList',
   props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    list: {
-      type: Array,
-      default: null
+    title: { type: String, default: '' },
+    list: { type: Array, default: null }
+  },
+  methods: {
+    rankBadgeClass(index) {
+      if (index === 0) return 'rank-badge rank-gold'
+      if (index === 1) return 'rank-badge rank-silver'
+      if (index === 2) return 'rank-badge rank-bronze'
+      return 'rank-badge'
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .rank {
-    padding: 0 32px 32px 72px;
-    .list {
-      margin: 25px 0 0;
-      padding: 0;
-      list-style: none;
-      li {
-        margin-top: 16px;
-        span {
-          color: rgba(0, 0, 0, .65);
-          font-size: 14px;
-          line-height: 22px;
-          &:first-child {
-            background-color: #f5f5f5;
-            border-radius: 20px;
-            display: inline-block;
-            font-size: 12px;
-            font-weight: 600;
-            margin-right: 24px;
-            height: 20px;
-            line-height: 20px;
-            width: 20px;
-            text-align: center;
-          }
-          &.active {
-            background-color: #314659;
-            color: #fff;
-          }
-          &:last-child {
-            float: right;
-          }
-        }
-      }
+.rank {
+  padding: 0 32px 32px 72px;
+
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 0;
+  }
+
+  .list {
+    margin: 16px 0 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-top: 14px;
+    }
+  }
+
+  .rank-badge {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 600;
+    margin-right: 16px;
+    background: #f0f0f0;
+    color: #8c8c8c;
+
+    &.rank-gold {
+      background: linear-gradient(135deg, #ffe58f, #faad14);
+      color: #fff;
+    }
+
+    &.rank-silver {
+      background: linear-gradient(135deg, #d9d9d9, #8c8c8c);
+      color: #fff;
+    }
+
+    &.rank-bronze {
+      background: linear-gradient(135deg, #ffbb96, #d4380d);
+      color: #fff;
     }
   }
-  .mobile .rank {
-    padding: 0 32px 32px 32px;
+
+  .rank-name {
+    flex: 1;
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
+
+  .rank-total {
+    flex-shrink: 0;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    font-weight: 500;
+    margin-left: 8px;
+  }
+}
+
+.mobile .rank {
+  padding: 0 32px 32px 32px;
+}
 </style>
diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 8604c017..d3e266e4 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -3,7 +3,7 @@
     <div class="rightPanel-background" />
     <div class="rightPanel">
       <div class="handle-button" :style="{'top':buttonTop+'px','background-color':theme}" @click="show=!show">
-        <i :class="show?'el-icon-close':'el-icon-setting'" />
+        <i :class="show?'ri-close-line':'ri-settings-line'" />
       </div>
       <div class="rightPanel-items">
         <slot />
@@ -52,7 +52,7 @@ export default {
   mounted() {
     this.insertToBody()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     const elx = this.$refs.rightPanel
     elx.remove()
   },
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index e15f7e3b..371b8d9d 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -8,7 +8,7 @@
 import screenfull from 'screenfull'
 
 export default {
-  name: 'Screenfull',
+  name: 'AppScreenfull',
   data() {
     return {
       isFullscreen: false
@@ -17,7 +17,7 @@ export default {
   mounted() {
     this.init()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.destroy()
   },
   methods: {
diff --git a/src/components/Share/DropdownMenu.vue b/src/components/Share/DropdownMenu.vue
index a629fe9a..7ea59f40 100644
--- a/src/components/Share/DropdownMenu.vue
+++ b/src/components/Share/DropdownMenu.vue
@@ -37,7 +37,7 @@ export default {
 }
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 $n: 9; //和items.length 相同
 $t: .1s;
 .share-dropdown-menu {
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 4c99e706..ce7d9060 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" />
+  <svg v-else :class="svgClass" aria-hidden="true">
     <use :href="iconName" />
   </svg>
 </template>
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index f813425d..b2a5e51d 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -8,10 +8,12 @@
 </template>
 
 <script>
-const version = require('element-ui/package.json').version // element-ui version from node_modules
+const version = require('element-plus/package.json').version // element-plus version from node_modules
 const ORIGINAL_THEME = '#1890FF' // default color
 
 export default {
+  name: 'ThemePickerComponent',
+  emits: ['change'],
   data() {
     return {
       chalk: '', // content of theme-chalk css
@@ -41,7 +43,7 @@ export default {
         customClass: 'theme-message',
         type: 'success',
         duration: 0,
-        iconClass: 'el-icon-loading'
+        iconClass: 'ri-loader-4-line'
       })
 
       const getHandler = (variable, id) => {
@@ -60,7 +62,7 @@ export default {
       }
 
       if (!this.chalk) {
-        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
+        const url = `https://unpkg.com/element-plus@${version}/lib/theme-chalk/index.css`
         await this.getCSSString(url, 'chalk')
       }
 
diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index ca7f8424..9a16cf87 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -4,27 +4,23 @@
     mode="horizontal"
     @select="handleSelect"
   >
-    <template v-for="(item, index) in topMenus">
+    <el-menu-item
+      v-for="(item, index) in visibleMenus"
+      :key="index"
+      :index="item.path"
+    ><svg-icon :icon-class="item.meta.icon" />
+      {{ item.meta.title }}</el-menu-item>
+
+    <!-- 顶部菜单超出数量折叠 -->
+    <el-sub-menu v-show="hiddenMenus.length > 0" index="more">
+      <template #title>更多菜单</template>
       <el-menu-item
-        v-if="index < visibleNumber"
-        :key="index"
+        v-for="(item, index) in hiddenMenus"
+        :key="'h' + index"
         :index="item.path"
       ><svg-icon :icon-class="item.meta.icon" />
         {{ item.meta.title }}</el-menu-item>
-    </template>
-
-    <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu v-if="topMenus.length > visibleNumber" index="more">
-      <template slot="title">更多菜单</template>
-      <template v-for="(item, index) in topMenus">
-        <el-menu-item
-          v-if="index >= visibleNumber"
-          :key="index"
-          :index="item.path"
-        ><svg-icon :icon-class="item.meta.icon" />
-          {{ item.meta.title }}</el-menu-item>
-      </template>
-    </el-submenu>
+    </el-sub-menu>
   </el-menu>
 </template>
 
@@ -48,6 +44,12 @@ export default {
         children: undefined
       }))
     },
+    visibleMenus() {
+      return this.topMenus.slice(0, this.visibleNumber)
+    },
+    hiddenMenus() {
+      return this.topMenus.slice(this.visibleNumber)
+    },
     // 所有的路由信息
     routers() {
       return this.$store.state.permission.topbarRouters
@@ -67,6 +69,7 @@ export default {
     },
     // 默认激活的菜单
     activeMenu() {
+      if (!this.routers || this.routers.length === 0) return ''
       const path = this.$route.path
       let activePath = this.routers[0].path
       if (path.lastIndexOf('/') > 0) {
@@ -119,7 +122,10 @@ export default {
           }
         })
       }
-      this.$store.commit('permission/SET_SIDEBAR_ROUTERS', routes)
+      // 有匹配结果才更新，避免空数组覆盖掉初始 sidebarRouters
+      if (routes.length > 0) {
+        this.$store.commit('permission/SET_SIDEBAR_ROUTERS', routes)
+      }
     }
   }
 }
diff --git a/src/components/Trend/index.vue b/src/components/Trend/index.vue
index 2009eedc..46d6fa3a 100644
--- a/src/components/Trend/index.vue
+++ b/src/components/Trend/index.vue
@@ -3,14 +3,14 @@
     <slot name="term" />
     <span>{{ rate }}%</span>
     <span :class="[flag]">
-      <i :class="'el-icon-caret-' + flag" />
+      <i :class="flag === 'top' ? 'ri-arrow-up-s-fill' : 'ri-arrow-down-s-fill'" />
     </span>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Trend',
+  name: 'TrendIndicator',
   props: {
     rate: {
       type: String,
diff --git a/src/components/Upload/SingleImage.vue b/src/components/Upload/SingleImage.vue
index a40b391a..f05ef86d 100644
--- a/src/components/Upload/SingleImage.vue
+++ b/src/components/Upload/SingleImage.vue
@@ -9,7 +9,7 @@
       drag
       action="https://httpbin.org/post"
     >
-      <i class="el-icon-upload" />
+      <i class="ri-upload-line" />
       <div class="el-upload__text">
         将文件拖到此处，或<em>点击上传</em>
       </div>
@@ -18,7 +18,7 @@
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
         <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
         <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage" />
+          <i class="ri-delete-bin-line" @click="rmImage" />
         </div>
       </div>
     </div>
@@ -58,6 +58,7 @@ export default {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {
+      // eslint-disable-next-line no-unused-vars
       const _self = this
       return new Promise((resolve, reject) => {
         // getToken().then(response => {
@@ -78,7 +79,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    @import "~@/styles/mixin.scss";
+    @use "@/styles/mixin.scss" as *;
     .upload-container {
         width: 100%;
         position: relative;
@@ -119,7 +120,7 @@ export default {
                 cursor: pointer;
                 text-align: center;
                 line-height: 200px;
-                .el-icon-delete {
+                .ri-delete-bin-line {
                     font-size: 36px;
                 }
             }
diff --git a/src/components/Upload/SingleImage2.vue b/src/components/Upload/SingleImage2.vue
index bfd53dbb..af76d481 100644
--- a/src/components/Upload/SingleImage2.vue
+++ b/src/components/Upload/SingleImage2.vue
@@ -9,7 +9,7 @@
       drag
       action="https://httpbin.org/post"
     >
-      <i class="el-icon-upload" />
+      <i class="ri-upload-line" />
       <div class="el-upload__text">
         Drag或<em>点击上传</em>
       </div>
@@ -18,7 +18,7 @@
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
         <img :src="imageUrl">
         <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage" />
+          <i class="ri-delete-bin-line" @click="rmImage" />
         </div>
       </div>
     </div>
@@ -58,6 +58,7 @@ export default {
       this.emitInput(this.tempUrl)
     },
     beforeUpload() {
+      // eslint-disable-next-line no-unused-vars
       const _self = this
       return new Promise((resolve, reject) => {
         // getToken().then(response => {
@@ -116,7 +117,7 @@ export default {
       cursor: pointer;
       text-align: center;
       line-height: 200px;
-      .el-icon-delete {
+      .ri-delete-bin-line {
         font-size: 36px;
       }
     }
diff --git a/src/components/Upload/SingleImage3.vue b/src/components/Upload/SingleImage3.vue
index 69770536..8da5f35a 100644
--- a/src/components/Upload/SingleImage3.vue
+++ b/src/components/Upload/SingleImage3.vue
@@ -9,7 +9,7 @@
       drag
       action="https://httpbin.org/post"
     >
-      <i class="el-icon-upload" />
+      <i class="ri-upload-line" />
       <div class="el-upload__text">
         将文件拖到此处，或<em>点击上传</em>
       </div>
@@ -18,7 +18,7 @@
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
         <img :src="imageUrl">
         <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage" />
+          <i class="ri-delete-bin-line" @click="rmImage" />
         </div>
       </div>
     </div>
@@ -26,7 +26,7 @@
       <div v-show="imageUrl.length>1" class="image-preview-wrapper">
         <img :src="imageUrl">
         <div class="image-preview-action">
-          <i class="el-icon-delete" @click="rmImage" />
+          <i class="ri-delete-bin-line" @click="rmImage" />
         </div>
       </div>
     </div>
@@ -66,6 +66,7 @@ export default {
       this.emitInput(file.files.file)
     },
     beforeUpload() {
+      // eslint-disable-next-line no-unused-vars
       const _self = this
       // return new Promise((resolve, reject) => {
       //   getToken().then(response => {
@@ -86,7 +87,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/styles/mixin.scss";
+@use "@/styles/mixin.scss" as *;
 .upload-container {
   width: 100%;
   position: relative;
@@ -127,7 +128,7 @@ export default {
       cursor: pointer;
       text-align: center;
       line-height: 200px;
-      .el-icon-delete {
+      .ri-delete-bin-line {
         font-size: 36px;
       }
     }
diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue
index 9e8ba8b6..1d3222fa 100644
--- a/src/components/UploadExcel/index.vue
+++ b/src/components/UploadExcel/index.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import XLSX from 'xlsx'
+import * as XLSX from 'xlsx'
 
 export default {
   props: {
diff --git a/src/directive/el-table/adaptive.js b/src/directive/el-table/adaptive.js
index d229e9fd..facd2558 100644
--- a/src/directive/el-table/adaptive.js
+++ b/src/directive/el-table/adaptive.js
@@ -1,41 +1,41 @@
-import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
-
 /**
  * How to use
  * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
- * el-table height is must be set
- * bottomOffset: 30(default)   // The height of the table from the bottom of the page.
+ * el-table height must be set
+ * bottomOffset: 30(default) - The height of the table from the bottom of the page.
  */
 
 const doResize = (el, binding, vnode) => {
-  const { componentInstance: $table } = vnode
+  const $table = vnode.component?.exposed || vnode.componentInstance
 
   const { value } = binding
 
-  if (!$table.height) {
-    throw new Error(`el-$table must set the height. Such as height='100px'`)
+  if (!$table || !$table.height) {
+    console.warn('el-table must set the height. Such as height="100px"')
+    return
   }
   const bottomOffset = (value && value.bottomOffset) || 30
 
-  if (!$table) return
-
   const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
-  $table.layout.setHeight(height)
-  $table.doLayout()
+  $table.layout?.setHeight(height)
+  $table.doLayout?.()
 }
 
 export default {
-  bind(el, binding, vnode) {
+  mounted(el, binding, vnode) {
     el.resizeListener = () => {
       doResize(el, binding, vnode)
     }
-    // parameter 1 is must be "Element" type
-    addResizeListener(window.document.body, el.resizeListener)
+    window.addEventListener('resize', el.resizeListener)
+    // Initial resize
+    doResize(el, binding, vnode)
   },
-  inserted(el, binding, vnode) {
+  updated(el, binding, vnode) {
     doResize(el, binding, vnode)
   },
-  unbind(el) {
-    removeResizeListener(window.document.body, el.resizeListener)
+  unmounted(el) {
+    if (el.resizeListener) {
+      window.removeEventListener('resize', el.resizeListener)
+    }
   }
 }
diff --git a/src/icons/index.js b/src/icons/index.js
index 2c6b309c..a1e06f1c 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,9 +1,7 @@
-import Vue from 'vue'
 import SvgIcon from '@/components/SvgIcon'// svg component
 
-// register globally
-Vue.component('svg-icon', SvgIcon)
-
 const req = require.context('./svg', false, /\.svg$/)
 const requireAll = requireContext => requireContext.keys().map(requireContext)
 requireAll(req)
+
+export default SvgIcon
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index f4ce177a..552a0670 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="app-main">
+  <section class="app-main" :style="appMainStyle">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view :key="key" />
@@ -17,6 +17,11 @@ export default {
     },
     key() {
       return this.$route.path
+    },
+    appMainStyle() {
+      if (!this.$store.state.settings.fixedHeader) return {}
+      const headerHeight = 50 + (this.$store.state.settings.tagsView ? 40 : 0)
+      return { paddingTop: headerHeight + 'px' }
     }
   }
 }
@@ -24,27 +29,12 @@ export default {
 
 <style lang="scss" scoped>
 .app-main {
-  /* 50= navbar  50  */
-  min-height: calc(100vh - 93px);
+  min-height: 100vh;
   width: 100%;
   position: relative;
   overflow: hidden;
+  background-color: #f0f2f5;
 }
-
-.fixed-header+.app-main {
-  padding-top: 93px;
-}
-
-// .hasTagsView {
-//   .app-main {
-//     /* 84 = navbar + tags-view = 50 + 34 */
-//     min-height: calc(100vh - 93px);
-//   }
-
-//   .fixed-header+.app-main {
-//     padding-top: 93px;
-//   }
-// }
 </style>
 
 <style lang="scss">
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index b030fc46..b8a877fd 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
 
     <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
     <top-nav v-if="topNav" id="topmenu-container" class="breadcrumb-container" />
@@ -16,16 +16,18 @@
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
         <div class="avatar-wrapper">
           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
+          <i class="ri-arrow-down-s-fill" />
         </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/index">
-            <el-dropdown-item>个人中心</el-dropdown-item>
-          </router-link>
-          <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">退出登录</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <router-link to="/profile/index">
+              <el-dropdown-item>个人中心</el-dropdown-item>
+            </router-link>
+            <el-dropdown-item divided>
+              <span style="display:block;" @click="logout">退出登录</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
       </el-dropdown>
     </div>
   </div>
@@ -96,7 +98,19 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  border-bottom: 1px solid #eef0f6;
+  box-shadow: 0 1px 8px rgba(79, 70, 229, 0.06);
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #1677ff 0%, #40a9ff 100%);
+    opacity: 0.7;
+  }
 
   .hamburger-container {
     line-height: 46px;
@@ -104,10 +118,11 @@ export default {
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
+    color: #1677ff;
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(22, 119, 255, .06)
     }
   }
 
@@ -131,42 +146,50 @@ export default {
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
+      padding: 0 10px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      color: #64748b;
       vertical-align: text-bottom;
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        transition: background .3s, color .3s;
+        border-radius: 4px;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(22, 119, 255, .06);
+          color: #1677ff;
         }
       }
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 20px;
 
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
+        display: flex;
+        align-items: center;
+        gap: 6px;
 
         .user-avatar {
           cursor: pointer;
-          width: 40px;
-          height: 40px;
+          width: 32px;
+          height: 32px;
           border-radius: 50%;
+          border: 2px solid rgba(22, 119, 255, 0.2);
+          box-shadow: 0 0 0 2px #fff;
         }
 
-        .el-icon-caret-bottom {
+        .ri-arrow-down-s-fill {
           cursor: pointer;
           position: absolute;
-          right: -20px;
-          top: 15px;
+          right: -18px;
+          top: 16px;
           font-size: 12px;
+          color: #94a3b8;
         }
       }
     }
diff --git a/src/layout/components/Sidebar/FixiOSBug.js b/src/layout/components/Sidebar/FixiOSBug.js
index bc14856f..71c7b88c 100644
--- a/src/layout/components/Sidebar/FixiOSBug.js
+++ b/src/layout/components/Sidebar/FixiOSBug.js
@@ -12,7 +12,7 @@ export default {
   methods: {
     fixBugIniOS() {
       const $subMenu = this.$refs.subMenu
-      if ($subMenu) {
+      if ($subMenu && typeof $subMenu.handleMouseleave === 'function') {
         const handleMouseleave = $subMenu.handleMouseleave
         $subMenu.handleMouseleave = (e) => {
           if (this.device === 'mobile') {
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index b515f615..48f1aef3 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -1,7 +1,8 @@
 <script>
+import { h, resolveComponent } from 'vue'
+
 export default {
   name: 'MenuItem',
-  functional: true,
   props: {
     icon: {
       type: String,
@@ -12,18 +13,19 @@ export default {
       default: ''
     }
   },
-  render(h, context) {
-    const { icon, title } = context.props
+  render() {
     const vnodes = []
 
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+    if (this.icon) {
+      const SvgIcon = resolveComponent('svg-icon')
+      vnodes.push(h(SvgIcon, { iconClass: this.icon }))
     }
 
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
+    if (this.title) {
+      vnodes.push(h('span', null, this.title))
     }
-    return vnodes
+
+    return h('div', { style: 'display:flex;align-items:center;' }, vnodes)
   }
 }
 </script>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index eb4dd107..31a847ab 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -1,9 +1,11 @@
 
 <template>
-  <!-- eslint-disable vue/require-component-is -->
-  <component v-bind="linkProps(to)">
+  <a v-if="isExternalLink" :href="to" target="_blank" rel="noopener">
     <slot />
-  </component>
+  </a>
+  <router-link v-else :to="to">
+    <slot />
+  </router-link>
 </template>
 
 <script>
@@ -16,20 +18,9 @@ export default {
       required: true
     }
   },
-  methods: {
-    linkProps(url) {
-      if (isExternal(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
+  computed: {
+    isExternalLink() {
+      return isExternal(this.to)
     }
   }
 }
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index f135602d..be73dcba 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -2,12 +2,12 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: $store.state.settings.themeStyle === 'dark' ? variables.menuBg : variables.menuLightBg }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="appInfo.sys_app_logo" :src="appInfo.sys_app_logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title" :style="{ color: $store.state.settings.themeStyle === 'dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ appInfo.sys_app_name }} </h1>
+        <img v-if="showLogo" :src="appInfo.sys_app_logo" class="sidebar-logo" @error="showLogo = false">
+        <h1 v-else class="sidebar-title" :style="{ color: $store.state.settings.themeStyle === 'dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ appInfo && appInfo.sys_app_name }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="appInfo.sys_app_logo" :src="appInfo.sys_app_logo" class="sidebar-logo">
-        <h1 class="sidebar-title" :style="{ color: $store.state.settings.themeStyle === 'dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ appInfo.sys_app_name }} </h1>
+        <img v-if="showLogo" :src="appInfo.sys_app_logo" class="sidebar-logo" @error="showLogo = false">
+        <h1 class="sidebar-title" :style="{ color: $store.state.settings.themeStyle === 'dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ appInfo && appInfo.sys_app_name }} </h1>
       </router-link>
     </transition>
   </div>
@@ -26,6 +26,9 @@ export default {
       required: true
     }
   },
+  data() {
+    return { showLogo: false }
+  },
   computed: {
     ...mapGetters([
       'appInfo'
@@ -33,6 +36,14 @@ export default {
     variables() {
       return variables
     }
+  },
+  watch: {
+    appInfo: {
+      immediate: true,
+      handler(val) {
+        this.showLogo = !!(val && val.sys_app_logo)
+      }
+    }
   }
 }
 </script>
@@ -52,38 +63,46 @@ export default {
   width: 100%;
   height: 64px;
   line-height: 64px;
-  background: #001529;
+  background: linear-gradient(135deg, #002c8c 0%, #1677ff 60%, #40a9ff 100%);
   text-align: center;
   overflow: hidden;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
 
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 28px;
+      height: 28px;
       vertical-align: middle;
-      margin-right: 12px;
-      border-radius: 3px;
+      margin-right: 10px;
+      border-radius: 6px;
+      border: 1px solid rgba(255, 255, 255, 0.25);
+      flex-shrink: 0;
     }
 
     & .sidebar-title {
       display: inline-block;
       margin: 0;
       color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      font-size: 14px;
+      font-weight: 700;
+      font-size: 15px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-      vertical-align: middle;
+      letter-spacing: 0.5px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
   &.collapse {
     .sidebar-logo {
       margin-right: 0;
-      border-radius: 3px;
     }
   }
 }
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 8b608c23..e9bd6505 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,15 +1,13 @@
 <template>
   <div v-if="!item.hidden" class="menu-wrapper">
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </app-link>
+      <el-menu-item v-if="onlyOneChild.meta" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
+        <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+      </el-menu-item>
     </template>
 
-    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body :style="{ backgroundColor: '#000c17' }">
-      <template slot="title">
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" :style="{ backgroundColor: '#000c17' }">
+      <template #title>
         <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
       </template>
       <sidebar-item
@@ -20,7 +18,7 @@
         :base-path="resolvePath(child.path)"
         class="nest-menu"
       />
-    </el-submenu>
+    </el-sub-menu>
   </div>
 </template>
 
@@ -28,12 +26,11 @@
 import path from 'path'
 import { isExternal } from '@/utils/validate'
 import Item from './Item'
-import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
 
 export default {
   name: 'SidebarItem',
-  components: { Item, AppLink },
+  components: { Item },
   mixins: [FixiOSBug],
   props: {
     // route object
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 5779d9a2..d9635969 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -10,6 +10,7 @@
         :active-text-color="$store.state.settings.theme"
         :unique-opened="true"
         :collapse-transition="true"
+        :router="true"
         mode="vertical"
       >
         <sidebar-item
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 0d5ac5a1..9c9ece3d 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
     <slot />
   </el-scrollbar>
 </template>
@@ -73,13 +73,11 @@ export default {
   position: relative;
   overflow: hidden;
   width: 100%;
-  ::v-deep {
-    .el-scrollbar__bar {
+  :deep(.el-scrollbar__bar) {
       bottom: 0px;
     }
-    .el-scrollbar__wrap {
+    :deep(.el-scrollbar__wrap) {
       height: 49px;
     }
-  }
 }
 </style>
diff --git a/src/layout/components/TagsView/TagsView.vue b/src/layout/components/TagsView/TagsView.vue
index be98a84a..86b03919 100644
--- a/src/layout/components/TagsView/TagsView.vue
+++ b/src/layout/components/TagsView/TagsView.vue
@@ -1,15 +1,18 @@
 <template>
-  <div>
+  <div class="tags-view-container">
     <el-tabs
-      v-model="editableTabsValue"
+      v-model="activeTab"
       type="card"
-      closable
+      class="tags-view-tabs"
+      @tab-click="handleTabClick"
+      @tab-remove="handleTabRemove"
     >
       <el-tab-pane
         v-for="item in visitedViews"
         :key="item.path"
         :label="item.title"
         :name="item.path"
+        :closable="!isAffix(item)"
       />
     </el-tabs>
   </div>
@@ -17,35 +20,31 @@
 
 <script>
 import path from 'path'
+
 export default {
   name: 'TagsView',
   data() {
     return {
-      editableTabsValue: '1'
+      affixTags: []
     }
   },
   computed: {
+    activeTab: {
+      get() {
+        return this.$route.path
+      },
+      set() {}
+    },
     visitedViews() {
       return this.$store.state.tagsView.visitedViews
     },
     routes() {
       return this.$store.state.permission.routes
-    },
-    theme() {
-      return this.$store.state.settings.theme
     }
   },
   watch: {
     $route() {
       this.addTags()
-      this.moveToCurrentTag()
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener('click', this.closeMenu)
-      } else {
-        document.body.removeEventListener('click', this.closeMenu)
-      }
     }
   },
   mounted() {
@@ -53,9 +52,6 @@ export default {
     this.addTags()
   },
   methods: {
-    isActive(route) {
-      return route.path === this.$route.path
-    },
     isAffix(tag) {
       return tag.meta && tag.meta.affix
     },
@@ -83,7 +79,6 @@ export default {
     initTags() {
       const affixTags = (this.affixTags = this.filterAffixTags(this.routes))
       for (const tag of affixTags) {
-        // Must have tag name
         if (tag.name) {
           this.$store.dispatch('tagsView/addVisitedView', tag)
         }
@@ -94,10 +89,84 @@ export default {
       if (name) {
         this.$store.dispatch('tagsView/addView', this.$route)
       }
-      return false
+    },
+    handleTabClick(tab) {
+      const targetPath = tab.props.name
+      if (targetPath !== this.$route.path) {
+        this.$router.push(targetPath)
+      }
+    },
+    handleTabRemove(targetPath) {
+      const view = this.visitedViews.find(v => v.path === targetPath)
+      if (!view) return
+
+      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
+        if (targetPath === this.$route.path) {
+          const lastView = visitedViews[visitedViews.length - 1]
+          if (lastView) {
+            this.$router.push(lastView.fullPath || lastView.path)
+          } else {
+            this.$router.push('/')
+          }
+        }
+      })
     }
   }
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.tags-view-container {
+  height: 34px;
+  width: 100%;
+  background: #fff;
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+
+  .tags-view-tabs {
+    height: 34px;
+
+    :deep(.el-tabs__header) {
+      margin: 0;
+      border-bottom: none;
+    }
+
+    :deep(.el-tabs__nav-wrap) {
+      margin-bottom: 0;
+    }
+
+    :deep(.el-tabs__nav) {
+      border: none;
+    }
+
+    :deep(.el-tabs__item) {
+      height: 34px;
+      line-height: 34px;
+      font-size: 12px;
+      color: #495060;
+      border: 1px solid #d8dce5;
+      border-radius: 3px 3px 0 0;
+      margin-right: 4px;
+      padding: 0 12px;
+
+      &:first-child {
+        margin-left: 4px;
+      }
+
+      &.is-active {
+        color: #409eff;
+        background-color: #fff;
+        border-bottom-color: #fff;
+      }
+
+      &:not(.is-active):hover {
+        color: #409eff;
+      }
+    }
+
+    :deep(.el-tabs__item .is-icon-close) {
+      margin-left: 4px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 6f04f448..5460002e 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -11,17 +11,24 @@
         :closable="item.fullPath === '/dashboard' ? false : true"
         :name="item.fullPath"
       >
-        <router-link
-          ref="tag"
-          slot="label"
-          tag="span"
-          class="tags-view-item"
-          :style="{ color: item.fullPath === $route.fullPath ? theme : '' }"
-          :to="{ path: item.path, query: item.query, fullPath: item.fullPath }"
-          @contextmenu.prevent.native="openMenu(item,$event)"
-        >
-          {{ item.title }}
-        </router-link>
+        <template #label>
+          <router-link
+            ref="tag"
+            v-slot="{ navigate, href }"
+            class="tags-view-item"
+            :style="{ color: item.fullPath === $route.fullPath ? theme : '' }"
+            :to="{ path: item.path, query: item.query, fullPath: item.fullPath }"
+            custom
+          >
+            <span
+              :href="href"
+              @click="navigate"
+              @contextmenu.prevent="openMenu(item,$event)"
+            >
+              {{ item.title }}
+            </span>
+          </router-link>
+        </template>
       </el-tab-pane>
     </el-tabs>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@@ -271,88 +278,106 @@ String.prototype.colorRgb = function() {
 }
 </script>
 
-<style lang="scss" scoped>
-.tags-view-container ::v-deep{
-  height: 43px;
+<style lang="scss">
+.tags-view-container {
+  height: 40px;
   width: 100%;
   background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-  padding: 0 15px;
+  border-bottom: 1px solid #e8eaec;
+  box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.08);
+  padding: 0 8px;
   box-sizing: border-box;
-  .el-tabs__item{
-    &:hover{
-      color: #000;
-    }
+  display: flex;
+  align-items: flex-end;
+
+  // el-tabs 整体铺满容器
+  .el-tabs {
+    flex: 1;
+    overflow: hidden;
   }
-  .tags-view-item{
-    height: 40px;
-    display: inline-block;
+
+  // 去掉 el-tabs 自带上边距和底部 border
+  .el-tabs__header {
+    margin: 0;
+    border-bottom: none !important;
   }
-  .tags-view-wrapper {
-    .tags-view-item {
-      display: inline-block;
-      position: relative;
-      cursor: pointer;
-      height: 26px;
-      line-height: 26px;
-      border: 1px solid #d8dce5;
-      color: #495060;
+
+  .el-tabs__nav-wrap {
+    margin-bottom: 0;
+    &::after { display: none; }
+  }
+
+  .el-tabs__nav {
+    border: none !important;
+  }
+
+  .el-tabs__item {
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    color: #606266;
+    border: 1px solid #e0e0e6 !important;
+    border-radius: 3px 3px 0 0;
+    margin-right: 3px;
+    padding: 0 10px !important;
+    background: #f8f9fa;
+    transition: color 0.2s, background 0.2s;
+
+    &:first-child { margin-left: 4px; }
+
+    &.is-active {
+      color: #1677ff;
       background: #fff;
-      padding: 0 8px;
-      font-size: 12px;
-      margin-left: 5px;
-      margin-top: 4px;
-      &:first-of-type {
-        margin-left: 15px;
-      }
-      &:last-of-type {
-        margin-right: 15px;
-      }
-      &.active {
-        background-color: #42b983;
+      border-color: #91caff !important;
+      border-bottom-color: #fff !important;
+      font-weight: 500;
+    }
+
+    &:not(.is-active):hover {
+      color: #1677ff;
+      background: #e6f4ff;
+    }
+
+    .is-icon-close {
+      margin-left: 4px;
+      width: 14px;
+      height: 14px;
+      line-height: 14px;
+      border-radius: 50%;
+      &:hover {
+        background-color: #c0c4cc;
         color: #fff;
-        border-color: #42b983;
-        &::before {
-          content: '';
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 2px;
-        }
       }
     }
   }
+
+  // 右键菜单
   .contextmenu {
     margin: 0;
     background: #fff;
     z-index: 3000;
-    position: absolute;
+    position: fixed;
     list-style-type: none;
-    padding: 5px 0;
+    padding: 4px 0;
     border-radius: 4px;
     font-size: 12px;
-    font-weight: 400;
     color: #333;
-    box-shadow: 1px 2px 10px #ccc;
-    -moz-user-select:none;
-    -webkit-user-select:none;
-    user-select:none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border: 1px solid #e4e7ed;
+    user-select: none;
+
     li {
       list-style: none;
-      line-height: 36px;
-      padding: 2px 20px;
+      line-height: 34px;
+      padding: 0 16px;
       margin: 0;
-      font-size: 14px;
+      font-size: 13px;
       color: #606266;
       cursor: pointer;
-      outline: 0;
-      cursor: pointer;
+
       &:hover {
-        background: #eee;
+        background: #e6f4ff;
+        color: #1677ff;
       }
     }
   }
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 4bada6d5..5844b73b 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -23,7 +23,7 @@ import { mapState } from 'vuex'
 import variables from '@/styles/variables.scss'
 
 export default {
-  name: 'Layout',
+  name: 'MainLayout',
   components: {
     AppMain,
     Navbar,
@@ -62,8 +62,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
+  @use "@/styles/mixin.scss" as *;
+  @use "@/styles/variables.scss" as *;
 
   .app-wrapper {
     @include clearfix;
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
index e8d0df8c..01a1cc70 100644
--- a/src/layout/mixin/ResizeHandler.js
+++ b/src/layout/mixin/ResizeHandler.js
@@ -14,7 +14,7 @@ export default {
   beforeMount() {
     window.addEventListener('resize', this.$_resizeHandler)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.$_resizeHandler)
   },
   mounted() {
diff --git a/src/main.js b/src/main.js
index 3bd71f2f..b63b6360 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,18 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
+import { ElMessage } from 'element-plus'
 
 import Cookies from 'js-cookie'
 
 import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 
-import Element from 'element-ui'
-import './styles/element-variables.scss'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
 import '@/styles/index.scss' // global css
 import '@/styles/admin.scss'
 
-import VueCodemirror from 'vue-codemirror'
-import 'codemirror/lib/codemirror.css'
-Vue.use(VueCodemirror)
+import { Codemirror } from 'vue-codemirror'
 
 import App from './App'
 import store from './store'
@@ -23,60 +23,27 @@ import { getDicts } from '@/api/admin/dict/data'
 import { getItems, setItems } from '@/api/table'
 import { getConfigKey } from '@/api/admin/sys-config'
 import { parseTime, resetForm, addDateRange, selectDictLabel, /* download,*/ selectItemsLabel } from '@/utils/costum'
+import { dialogDrag } from '@/utils/dialog' // dialog directive
+import { setupErrorHandler } from '@/utils/error-log' // error log
 
-import './icons' // icon
+import SvgIcon from './icons' // icon
 import './permission' // permission control
-import './utils/error-log' // error log
 
-import Viser from 'viser-vue'
-Vue.use(Viser)
+// import Viser from 'viser-vue'
+// Note: viser-vue 不支持 Vue 3，需要后续处理
 
 import * as filters from './filters' // global filters
 
 import Pagination from '@/components/Pagination'
 import BasicLayout from '@/layout/BasicLayout'
 
-import VueParticles from 'vue-particles'
-Vue.use(VueParticles)
+import Particles from '@tsparticles/vue3'
+import { loadSlim } from '@tsparticles/slim'
 
 import '@/utils/dialog'
 
-// 全局方法挂载
-Vue.prototype.getDicts = getDicts
-Vue.prototype.getItems = getItems
-Vue.prototype.setItems = setItems
-Vue.prototype.getConfigKey = getConfigKey
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectItemsLabel = selectItemsLabel
-// Vue.prototype.download = download
-
-// 全局组件挂载
-Vue.component('Pagination', Pagination)
-Vue.component('BasicLayout', BasicLayout)
-
-Vue.prototype.msgSuccess = function(msg) {
-  this.$message({ showClose: true, message: msg, type: 'success' })
-}
-
-Vue.prototype.msgError = function(msg) {
-  this.$message({ showClose: true, message: msg, type: 'error' })
-}
-
-Vue.prototype.msgInfo = function(msg) {
-  this.$message.info(msg)
-}
-
-Vue.use(permission)
-
-Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
-})
-
-import VueDND from 'awe-dnd'
-Vue.use(VueDND)
+// import VueDND from 'awe-dnd'
+// Note: awe-dnd 不支持 Vue 3，已改用 vue3-dnd
 
 import 'remixicon/fonts/remixicon.css'
 
@@ -85,16 +52,54 @@ console.info(`欢迎使用go-admin，谢谢您对我们的支持，在使用过
  https://github.com/go-admin-team/go-admin-ui 向我们反馈，
  谢谢！`)
 
-// register global utility filters
-Object.keys(filters).forEach(key => {
-  Vue.filter(key, filters[key])
-})
+// 创建 Vue 应用实例
+const app = createApp(App)
+
+// 全局方法挂载（$前缀版本 + 无前缀版本同时注册，兼容历史代码）
+const msgSuccess = (msg) => ElMessage({ showClose: true, message: msg, type: 'success' })
+const msgError = (msg) => ElMessage({ showClose: true, message: msg, type: 'error' })
+const msgInfo = (msg) => ElMessage.info(msg)
 
-Vue.config.productionTip = false
+const globalMethods = {
+  getDicts, getItems, setItems, getConfigKey,
+  parseTime, resetForm, addDateRange, selectDictLabel, selectItemsLabel,
+  msgSuccess, msgError, msgInfo
+}
+
+Object.entries(globalMethods).forEach(([key, fn]) => {
+  app.config.globalProperties[key] = fn // this.getDicts(...)
+  app.config.globalProperties['$' + key] = fn // this.$getDicts(...)
+})
 
-new Vue({
-  el: '#app',
-  router,
-  store,
-  render: h => h(App)
+// 全局过滤器改为全局方法
+app.config.globalProperties.$filters = filters
+
+// 全局组件注册（Pagination 同时注册两个名称兼容历史模板）
+app.component('AppPagination', Pagination)
+app.component('Pagination', Pagination)
+app.component('BasicLayout', BasicLayout)
+app.component('CodeEditor', Codemirror)
+app.component('SvgIcon', SvgIcon)
+
+// 注册插件
+app.use(store)
+app.use(router)
+app.use(permission)
+app.use(Particles, {
+  init: async engine => {
+    await loadSlim(engine)
+  }
 })
+app.use(ElementPlus, {
+  locale: zhCn,
+  size: Cookies.get('size') || 'default'
+})
+
+// 注册自定义指令
+app.directive('dialogDrag', dialogDrag)
+
+// 设置错误处理器
+setupErrorHandler(app)
+
+// 挂载应用
+app.mount('#app')
diff --git a/src/permission.js b/src/permission.js
index 6bb032ad..cd25faae 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,6 +1,6 @@
 import router from './router'
 import store from './store'
-import { Message } from 'element-ui'
+import { ElMessage } from 'element-plus'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
@@ -40,7 +40,7 @@ router.beforeEach(async(to, from, next) => {
           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
 
           // dynamically add accessible routes
-          router.addRoutes(accessRoutes)
+          accessRoutes.forEach(route => router.addRoute(route))
 
           // hack method to ensure that addRoutes is complete
           // set the replace: true, so the navigation will not leave a history record
@@ -48,7 +48,7 @@ router.beforeEach(async(to, from, next) => {
         } catch (error) {
           // remove token and go to login page to re-login
           // await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
+          ElMessage.error(error || 'Has Error')
           next(`/login?redirect=${to.path}`)
           NProgress.done()
         }
diff --git a/src/router/index.js b/src/router/index.js
index 518453b1..0ef9e8f7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,4 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
+import { createRouter, createWebHashHistory } from 'vue-router'
 
 /* Layout */
 import Layout from '@/layout'
@@ -107,18 +104,23 @@ export const asyncRoutes = [
 
 ]
 
-const createRouter = () => new Router({
-  mode: 'history', // require service support
-  scrollBehavior: () => ({ y: 0 }),
+const router = createRouter({
+  history: createWebHashHistory(), // 使用 hash 模式
+  scrollBehavior: () => ({ top: 0 }),
   routes: constantRoutes
 })
 
-const router = createRouter()
-
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
+  const newRouter = createRouter({
+    history: createWebHashHistory(),
+    scrollBehavior: () => ({ top: 0 }),
+    routes: constantRoutes
+  })
+  router.clearRoutes()
+  newRouter.getRoutes().forEach(route => {
+    router.addRoute(route)
+  })
 }
 
 export default router
diff --git a/src/settings.js b/src/settings.js
index 084ff9ee..1a594682 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -9,8 +9,9 @@ module.exports = {
 
   /**
    * 是否显示顶部导航
+   * 注：Element Plus 2.14.0 水平 el-menu 有 calcSliceIndex/childNodes bug，暂关闭
    */
-  topNav: true,
+  topNav: false,
 
   /**
    * @type {boolean} true | false
diff --git a/src/store/index.js b/src/store/index.js
index 0fd83955..57074914 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,9 +1,6 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 import getters from './getters'
 
-Vue.use(Vuex)
-
 // https://webpack.js.org/guides/dependency-management/#requirecontext
 const modulesFiles = require.context('./modules', true, /\.js$/)
 
@@ -17,7 +14,7 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
   return modules
 }, {})
 
-const store = new Vuex.Store({
+const store = createStore({
   modules,
   getters
 })
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 02f95136..ad286fd3 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,4 +1,4 @@
-import { asyncRoutes, constantRoutes } from '@/router'
+import { constantRoutes } from '@/router'
 import { getRoutes } from '@/api/admin/sys-role'
 import Layout from '@/layout'
 // import sysuserindex from '@/views/sysuser/index'
@@ -38,7 +38,8 @@ export function generaMenu(routes, data) {
     const menu = {
       path: item.path,
       component: item.component === 'Layout' ? Layout : loadView(item.component),
-      hidden: item.visible !== '0',
+      // eslint-disable-next-line eqeqeq
+      hidden: item.visible != '0',
       children: [],
       name: item.menuName,
       meta: {
@@ -54,8 +55,21 @@ export function generaMenu(routes, data) {
   })
 }
 
+// 使用 require.context 预建 views 目录索引，
+// 绕过 babel-plugin-dynamic-import-node 在开发模式下将 import() 转换为
+// 同步 require() 导致 webpack 上下文失效的问题。
+const viewsContext = require.context('@/views', true, /\.vue$/)
+
 export const loadView = (view) => { // 路由懒加载
-  return (resolve) => require([`@/views${view}`], resolve)
+  const key = `.${view}.vue`
+  if (viewsContext.keys().includes(key)) {
+    // require.context 返回的是 { default: Component, __esModule: true }，
+    // Vue Router 4 需要直接拿到组件对象（.default），否则渲染空白
+    const mod = viewsContext(key)
+    return mod.default || mod
+  }
+  // 兜底：动态 import（生产构建不受 dynamic-import-node 影响）
+  return () => import(`@/views${view}.vue`)
 }
 
 /**
@@ -146,15 +160,16 @@ const actions = {
           data = response.data
           Object.assign(loadMenuData, data)
 
-          generaMenu(asyncRoutes, loadMenuData)
-          asyncRoutes.push({ path: '*', redirect: '/', hidden: true })
-          commit('SET_ROUTES', asyncRoutes)
+          const dynamicRoutes = []
+          generaMenu(dynamicRoutes, loadMenuData)
+          dynamicRoutes.push({ path: '/:pathMatch(.*)*', redirect: '/', hidden: true })
+          commit('SET_ROUTES', dynamicRoutes)
           const sidebarRoutes = []
           generaMenu(sidebarRoutes, loadMenuData)
           commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
           commit('SET_DEFAULT_ROUTES', sidebarRoutes)
           commit('SET_TOPBAR_ROUTES', sidebarRoutes)
-          resolve(asyncRoutes)
+          resolve(dynamicRoutes)
         }
       }).catch(error => {
         console.log(error)
diff --git a/src/store/modules/system.js b/src/store/modules/system.js
index 751bada1..a7ed0c49 100644
--- a/src/store/modules/system.js
+++ b/src/store/modules/system.js
@@ -1,7 +1,7 @@
 import { getSetting } from '@/api/login'
 import storage from '@/utils/storage'
 const state = {
-  info: storage.get('app_info')
+  info: storage.get('app_info') || {}
 }
 
 const mutations = {
@@ -15,9 +15,8 @@ const actions = {
   settingDetail({ commit }) {
     return new Promise((resolve, reject) => {
       getSetting().then(response => {
-        const { data } = response
-        commit('SET_INFO', data)
-        resolve(data)
+        commit('SET_INFO', response.data)
+        resolve(response.data)
       }).catch(error => {
         reject(error)
       })
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 4b5f2dca..0811a8e8 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -60,14 +60,14 @@ const actions = {
         if (!response || !response.data) {
           commit('SET_TOKEN', '')
           removeToken()
-          resolve()
+          return resolve()
         }
 
         const { roles, name, avatar, introduction, permissions } = response.data
 
         // roles must be a non-empty array
         if (!roles || roles.length <= 0) {
-          reject('getInfo: roles must be a non-null array!')
+          return reject('getInfo: roles must be a non-null array!')
         }
         commit('SET_PERMISSIONS', permissions)
         commit('SET_ROLES', roles)
@@ -135,7 +135,7 @@ const actions = {
       const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
 
       // dynamically add accessible routes
-      router.addRoutes(accessRoutes)
+      accessRoutes.forEach(route => router.addRoute(route))
 
       // reset visited views and cached views
       dispatch('tagsView/delAllViews', null, { root: true })
diff --git a/src/styles/admin.scss b/src/styles/admin.scss
index 2a2ae412..fa4a71b0 100644
--- a/src/styles/admin.scss
+++ b/src/styles/admin.scss
@@ -1,244 +1,142 @@
- /**
- * 通用css样式布局处理
- * Copyright (c) 2019 ruoyi
- */
-
- /** 基础通用 **/
- .pt5 {
-  padding-top: 5px;
-}
-
-.pr5 {
-  padding-right: 5px;
-}
-
-.pb5 {
-  padding-bottom: 5px;
-}
-
-.mt5 {
-  margin-top: 5px;
-}
-
-.mr5 {
-  margin-right: 5px;
-}
-
-.mb5 {
-  margin-bottom: 5px;
-}
-
-.mb8 {
-  margin-bottom: 8px;
-}
-
-.ml5 {
-  margin-left: 5px;
-}
-
-.mt10 {
-  margin-top: 10px;
-}
-
-.mr10 {
-  margin-right: 10px;
-}
-
-.mb10 {
-  margin-bottom: 10px;
-}
-
-.ml0 {
-  margin-left: 10px;
-}
-
-.mt20 {
-  margin-top: 20px;
-}
-
-.mr20 {
-  margin-right: 20px;
-}
-
-.mb20 {
-  margin-bottom: 20px;
-}
+// ══════════════════════════════════════════════════════════════════
+//  全局业务样式 — 布局、表单搜索、工具类
+// ══════════════════════════════════════════════════════════════════
+
+// ── 间距工具类 ─────────────────────────────────────────────────
+.pt5  { padding-top: 5px; }
+.pr5  { padding-right: 5px; }
+.pb5  { padding-bottom: 5px; }
+.mt5  { margin-top: 5px; }
+.mr5  { margin-right: 5px; }
+.mb5  { margin-bottom: 5px; }
+.mb8  { margin-bottom: 8px; }
+.ml5  { margin-left: 5px; }
+.mt10 { margin-top: 10px; }
+.mr10 { margin-right: 10px; }
+.mb10 { margin-bottom: 10px; }
+.mt20 { margin-top: 20px; }
+.mr20 { margin-right: 20px; }
+.mb20 { margin-bottom: 20px; }
+
+// ── 搜索栏 ─────────────────────────────────────────────────────
+// 业务页面统一使用 .search-form 包裹搜索区域
+.search-form {
+  padding: 14px 16px 6px;
+  background: #fff;
+  border-radius: 10px;
+  border: 1px solid #eef0f6;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+
+  .el-form-item {
+    margin-bottom: 10px;
+  }
 
-.m20 {
-  margin-left: 20px;
+  .el-input__wrapper,
+  .el-select .el-input__wrapper {
+    background: #fafbff;
+  }
 }
 
-.el-dialog:not(.is-fullscreen) {
-  margin-top: 6vh !important;
+// ── 操作按钮行 .mb8 ─────────────────────────────────────────────
+// 兼容原有 el-row :gutter="10" class="mb8" 写法
+.el-row.mb8 {
+  padding: 0 2px;
 }
 
+// ── 表格容器 ───────────────────────────────────────────────────
 .el-table {
-
   .el-table__header-wrapper,
   .el-table__fixed-header-wrapper {
     th {
       word-break: break-word;
-      background-color: #f8f8f9;
-      color: #515a6e;
-      height: 40px;
-      font-size: 13px;
     }
   }
 
   .el-table__body-wrapper {
-    .el-button [class*="el-icon-"]+span {
-      margin-left: 1px;
-    }
+    .el-button [class*="el-icon-"] + span { margin-left: 1px; }
   }
-}
 
-/** 表单布局 **/
-.form-header {
-  font-size: 15px;
-  color: #6379bb;
-  border-bottom: 1px solid #ddd;
-  margin: 8px 10px 25px 10px;
-  padding-bottom: 5px
+  // 操作列按钮
+  .el-button.is-link + .el-divider--vertical + .el-button.is-link {
+    margin-left: 0;
+  }
 }
 
-/** 表格布局 **/
+// ── 分页容器 ──────────────────────────────────────────────────
 .pagination-container {
-  position: relative;
-  height: 25px;
-  margin-bottom: 10px;
-  margin-top: 15px;
-  padding: 10px 20px !important;
-}
-
-/* tree border */
-.tree-border {
-  margin-top: 5px;
-  border: 1px solid #e5e6e7;
-  background: #FFFFFF none;
-  border-radius: 4px;
-}
-
-.pagination-container .el-pagination {
-  right: 0;
-  position: absolute;
-}
-
-.el-table .fixed-width .el-button--mini {
-  padding-left: 0;
-  padding-right: 0;
-  width: inherit;
-}
-
-.el-tree-node__content>.el-checkbox {
-  margin-right: 8px;
-}
-
-.list-group-striped>.list-group-item {
-  border-left: 0;
-  border-right: 0;
-  border-radius: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.list-group {
-  padding-left: 0px;
-  list-style: none;
-}
-
-.list-group-item {
-  border-bottom: 1px solid #e7eaec;
-  border-top: 1px solid #e7eaec;
-  margin-bottom: -1px;
-  padding: 11px 0px;
-  font-size: 13px;
-}
-
-.pull-right {
-  float: right !important;
-}
-
-.el-card__header {
-  padding: 14px 15px 7px;
-  min-height: 40px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 16px;
+  padding: 8px 4px;
 }
 
-.el-card__body {
-  padding: 15px 20px 20px 20px;
+// ── 表单分区标题 .form-header ────────────────────────────────
+.form-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e293b;
+  border-bottom: 2px solid #ede9fe;
+  margin: 8px 0 20px;
+  padding-bottom: 10px;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
 }
 
+// ── 卡片容器 .card-box ──────────────────────────────────────
 .card-box {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-bottom: 10px;
-}
-
-/* button color */
-.el-button--cyan.is-active,
-.el-button--cyan:active {
-  background: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
-}
-
-.el-button--cyan:focus,
-.el-button--cyan:hover {
-  background: #48D1CC;
-  border-color: #48D1CC;
-  color: #FFFFFF;
-}
-
-.el-button--cyan {
-  background-color: #20B2AA;
-  border-color: #20B2AA;
-  color: #FFFFFF;
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-bottom: 12px;
 }
 
-/* submenu item */
-.el-menu--horizontal>.el-submenu .el-submenu__title {
-  height: 50px !important;
-  line-height: 50px !important;
-}
-
-/* text color */
-.text-navy {
-  color: #1ab394;
-}
-
-.text-primary {
-  color: inherit;
-}
-
-.text-success {
-  color: #1c84c6;
-}
-
-.text-info {
-  color: #23c6c8;
-}
-
-.text-warning {
-  color: #f8ac59;
-}
-
-.text-danger {
-  color: #ed5565;
+// ── Tree ────────────────────────────────────────────────────
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #eef0f6;
+  background: #fff;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
-.text-muted {
-  color: #888888;
+// ── 拖拽排序 ────────────────────────────────────────────────
+.sortable-ghost {
+  opacity: 0.8;
+  color: #fff !important;
+  background: #4f46e5 !important;
+  border-radius: 6px;
 }
 
-/* image */
-.img-circle {
-  border-radius: 50%;
+// ── Drawer ──────────────────────────────────────────────────
+.demo-drawer__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  form { flex: 1; }
 }
 
-.img-lg {
-  width: 120px;
-  height: 120px;
+.demo-drawer__footer {
+  display: flex;
+  gap: 8px;
+  padding: 12px 0;
+  button { flex: 1; }
 }
 
+// ── 图片相关 ────────────────────────────────────────────────
+.img-circle { border-radius: 50%; }
+.img-lg { width: 120px; height: 120px; }
 .avatar-upload-preview {
   position: absolute;
   top: 50%;
@@ -246,50 +144,61 @@
   width: 200px;
   height: 200px;
   border-radius: 50%;
-  box-shadow: 0 0 4px #ccc;
+  box-shadow: 0 0 8px rgba(0,0,0,0.15);
   overflow: hidden;
 }
 
-/* 拖拽列样式 */
-.sortable-ghost {
-  opacity: .8;
-  color: #fff !important;
-  background: #42b983 !important;
-}
-
+// ── 顶部右侧按钮 ────────────────────────────────────────────
 .top-right-btn {
   position: relative;
   float: right;
 }
 
+// ── 文字色工具 ──────────────────────────────────────────────
+.text-primary   { color: #4f46e5; }
+.text-success   { color: #10b981; }
+.text-warning   { color: #f59e0b; }
+.text-danger    { color: #f43f5e; }
+.text-info      { color: #3b82f6; }
+.text-muted     { color: #94a3b8; }
 
-.demo-drawer__content {
-  display: flex;
-  flex-direction: column;
-  height: 100%
-}
+// ── pull-right ──────────────────────────────────────────────
+.pull-right { float: right !important; }
 
-.demo-drawer__content form {
-  flex: 1
+// ── 通用列表组 ──────────────────────────────────────────────
+.list-group {
+  padding-left: 0;
+  list-style: none;
 }
 
-.demo-drawer__footer {
-  display: flex
+.list-group-item {
+  border-bottom: 1px solid #f1f5f9;
+  border-top: 1px solid #f1f5f9;
+  margin-bottom: -1px;
+  padding: 10px 0;
+  font-size: 13px;
+  color: #374151;
 }
 
-.demo-drawer__footer button {
-  flex: 1
+.list-group-striped > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.el-drawer__body {
-  padding: 20px
+// ── 子菜单顶部导航栏修正 ──────────────────────────────────
+.el-menu--horizontal > .el-submenu .el-submenu__title {
+  height: 50px !important;
+  line-height: 50px !important;
 }
 
-// Drawer 抽屉增加滚动条
-.el-drawer {
-  overflow-y: scroll;
-  
+// ── 操作工具栏（替代 el-row :gutter="10" class="mb8"）──────
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
 }
-.delete-popconfirm{
-margin-left: 10px;
-}
\ No newline at end of file
diff --git a/src/styles/btn.scss b/src/styles/btn.scss
index e6ba1a8e..09f8fc04 100644
--- a/src/styles/btn.scss
+++ b/src/styles/btn.scss
@@ -1,4 +1,4 @@
-@import './variables.scss';
+@use './variables.scss' as *;
 
 @mixin colorBtn($color) {
   background: $color;
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
new file mode 100644
index 00000000..0cc5d809
--- /dev/null
+++ b/src/styles/element-plus.scss
@@ -0,0 +1,576 @@
+// ══════════════════════════════════════════════════════════════════
+//  Design System — Element Plus 全量组件覆盖
+//  参考 Ant Design 5.x 蓝色体系
+//  Primary: #1677ff  Hover: #4096ff  Active: #0958d9
+// ══════════════════════════════════════════════════════════════════
+
+// ── 全局 CSS Token (Ant Design 5.x Blue Palette) ────────────────
+:root {
+  --el-color-primary:         #1677ff;
+  --el-color-primary-light-3: #4096ff;
+  --el-color-primary-light-5: #69b1ff;
+  --el-color-primary-light-7: #91caff;
+  --el-color-primary-light-8: #bae0ff;
+  --el-color-primary-light-9: #e6f4ff;
+  --el-color-primary-dark-2:  #0958d9;
+
+  --el-color-success:         #52c41a;
+  --el-color-danger:          #ff4d4f;
+  --el-color-warning:         #faad14;
+
+  --el-border-radius-base:    6px;
+  --el-border-radius-small:   4px;
+  --el-border-color:          #d9d9d9;
+  --el-border-color-light:    #f0f0f0;
+  --el-border-color-lighter:  #f5f5f5;
+
+  --el-text-color-primary:    #000000d9;
+  --el-text-color-regular:    #000000a6;
+  --el-text-color-secondary:  #00000073;
+  --el-text-color-placeholder:#00000040;
+
+  --el-bg-color:              #ffffff;
+  --el-fill-color-light:      #fafafa;
+}
+
+// ═══════════════════════════════════
+//  一、卡片 el-card
+// ═══════════════════════════════════
+.el-card {
+  border-radius: 8px !important;
+  border: 1px solid #f0f0f0 !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important;
+  transition: box-shadow 0.3s;
+
+  &:hover {
+    box-shadow: 0 1px 6px rgba(0,0,0,0.1), 0 6px 18px rgba(0,21,41,0.08) !important;
+  }
+
+  .el-card__header {
+    padding: 14px 16px !important;
+    min-height: unset;
+    border-bottom: 1px solid #f0f0f0 !important;
+    background: #fafafa;
+    border-radius: 8px 8px 0 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #000000d9;
+  }
+
+  .el-card__body {
+    padding: 16px !important;
+  }
+}
+
+// ═══════════════════════════════════
+//  二、按钮 el-button
+// ═══════════════════════════════════
+.el-button {
+  border-radius: 6px;
+  font-weight: 400;
+  transition: all 0.2s;
+
+  &--primary {
+    background: #1677ff !important;
+    border-color: #1677ff !important;
+    &:hover, &:focus {
+      background: #4096ff !important;
+      border-color: #4096ff !important;
+    }
+    &:active { background: #0958d9 !important; border-color: #0958d9 !important; }
+    &.is-plain {
+      background: #e6f4ff !important;
+      border-color: #91caff !important;
+      color: #1677ff !important;
+      &:hover { background: #1677ff !important; border-color: #1677ff !important; color: #fff !important; }
+    }
+    &.is-link { color: #1677ff !important; background: transparent !important; border: none !important; }
+  }
+
+  &--success {
+    background: #52c41a !important;
+    border-color: #52c41a !important;
+    &:hover { background: #73d13d !important; border-color: #73d13d !important; }
+    &.is-plain {
+      background: #f6ffed !important;
+      border-color: #b7eb8f !important;
+      color: #389e0d !important;
+      &:hover { background: #52c41a !important; color: #fff !important; border-color: #52c41a !important; }
+    }
+    &.is-link { color: #52c41a !important; background: transparent !important; border: none !important; }
+  }
+
+  &--danger {
+    background: #ff4d4f !important;
+    border-color: #ff4d4f !important;
+    &:hover { background: #ff7875 !important; border-color: #ff7875 !important; }
+    &.is-plain {
+      background: #fff2f0 !important;
+      border-color: #ffccc7 !important;
+      color: #cf1322 !important;
+      &:hover { background: #ff4d4f !important; color: #fff !important; border-color: #ff4d4f !important; }
+    }
+    &.is-link { color: #ff4d4f !important; background: transparent !important; border: none !important; }
+  }
+
+  &--warning {
+    background: #faad14 !important;
+    border-color: #faad14 !important;
+    color: #fff !important;
+    &:hover { background: #ffc53d !important; border-color: #ffc53d !important; }
+    &.is-plain {
+      background: #fffbe6 !important;
+      border-color: #ffe58f !important;
+      color: #d48806 !important;
+      &:hover { background: #faad14 !important; color: #fff !important; }
+    }
+  }
+
+  &--default, &:not([class*='--']) {
+    border-color: #d9d9d9 !important;
+    color: #000000d9 !important;
+    &:hover {
+      border-color: #4096ff !important;
+      color: #1677ff !important;
+      background: #fff !important;
+    }
+  }
+}
+
+// ═══════════════════════════════════
+//  三、输入框
+// ═══════════════════════════════════
+.el-input {
+  &__wrapper {
+    border-radius: 6px;
+    box-shadow: 0 0 0 1px #d9d9d9 inset !important;
+    transition: box-shadow 0.2s;
+    &:hover { box-shadow: 0 0 0 1px #4096ff inset !important; }
+    &.is-focus {
+      box-shadow: 0 0 0 1px #1677ff inset, 0 0 0 3px rgba(22,119,255,0.1) !important;
+    }
+  }
+  &__prefix-icon, &__suffix-icon { color: #00000040; }
+}
+
+.el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  &:hover { border-color: #4096ff; }
+  &:focus {
+    border-color: #1677ff;
+    box-shadow: 0 0 0 3px rgba(22,119,255,0.1);
+    outline: none;
+  }
+}
+
+.el-select .el-input__wrapper.is-focus {
+  box-shadow: 0 0 0 1px #1677ff inset !important;
+}
+
+// ═══════════════════════════════════
+//  四、表格 el-table
+// ═══════════════════════════════════
+.el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #f0f0f0 !important;
+  font-size: 13px;
+
+  &::before, &::after { display: none; }
+
+  th.el-table__cell {
+    background: #fafafa !important;
+    color: #000000d9 !important;
+    font-weight: 600;
+    font-size: 13px;
+    border-bottom: 1px solid #f0f0f0 !important;
+    border-right: 1px solid #f0f0f0 !important;
+    padding: 10px 0;
+    white-space: nowrap;
+  }
+
+  td.el-table__cell {
+    border-bottom: 1px solid #f0f0f0 !important;
+    border-right: 1px solid #f5f5f5 !important;
+    color: #000000d9;
+    padding: 9px 0;
+    font-size: 13px;
+  }
+
+  .el-table__row {
+    transition: background 0.15s;
+    &:hover td.el-table__cell { background: #e6f4ff !important; }
+    &:last-child td.el-table__cell { border-bottom: none !important; }
+  }
+
+  &.el-table--striped .el-table__row--striped td.el-table__cell {
+    background: #fafafa !important;
+  }
+
+  .el-checkbox__inner {
+    border-color: #d9d9d9;
+    border-radius: 3px;
+  }
+}
+
+// ═══════════════════════════════════
+//  五、表单 el-form
+// ═══════════════════════════════════
+.el-form-item {
+  margin-bottom: 18px;
+
+  &__label {
+    font-weight: 500;
+    color: #000000d9;
+    font-size: 13px;
+    line-height: 1.5;
+    padding-bottom: 4px;
+  }
+
+  &__error {
+    color: #ff4d4f;
+    font-size: 12px;
+    padding-top: 2px;
+  }
+}
+
+.el-form--inline .el-form-item { margin-bottom: 10px; }
+
+// ═══════════════════════════════════
+//  六、对话框 el-dialog
+// ═══════════════════════════════════
+.el-dialog {
+  border-radius: 10px !important;
+  overflow: hidden;
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.12) !important;
+
+  &__header {
+    padding: 16px 20px 12px !important;
+    border-bottom: 1px solid #f0f0f0;
+    background: #fafafa;
+    margin: 0 !important;
+  }
+
+  &__title {
+    font-weight: 600 !important;
+    color: #000000d9 !important;
+    font-size: 15px !important;
+  }
+
+  &__headerbtn {
+    top: 14px !important;
+    right: 16px !important;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    &:hover { background: #f0f0f0; }
+    .el-dialog__close {
+      color: #00000073 !important;
+      &:hover { color: #1677ff !important; }
+    }
+  }
+
+  &__body {
+    padding: 20px 24px !important;
+    color: #000000d9;
+    font-size: 14px;
+  }
+
+  &__footer {
+    padding: 12px 20px 16px !important;
+    border-top: 1px solid #f0f0f0;
+    background: #fafafa;
+    .dialog-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+  }
+}
+
+.el-dialog:not(.is-fullscreen) { margin-top: 6vh !important; }
+
+// ═══════════════════════════════════
+//  七、标签 el-tag
+// ═══════════════════════════════════
+.el-tag {
+  border-radius: 4px;
+  font-weight: 400;
+  font-size: 12px;
+  padding: 0 7px;
+  height: 22px;
+  line-height: 20px;
+  border: 1px solid;
+
+  &--success {
+    background: #f6ffed !important;
+    border-color: #b7eb8f !important;
+    color: #389e0d !important;
+  }
+  &--danger {
+    background: #fff2f0 !important;
+    border-color: #ffccc7 !important;
+    color: #cf1322 !important;
+  }
+  &--warning {
+    background: #fffbe6 !important;
+    border-color: #ffe58f !important;
+    color: #d48806 !important;
+  }
+  &--info {
+    background: #f5f5f5 !important;
+    border-color: #d9d9d9 !important;
+    color: #595959 !important;
+  }
+  &--primary, &:not([class*="el-tag--"]) {
+    background: #e6f4ff !important;
+    border-color: #91caff !important;
+    color: #1677ff !important;
+  }
+}
+
+// ═══════════════════════════════════
+//  八、分页 el-pagination
+// ═══════════════════════════════════
+.el-pagination {
+  .el-pager li {
+    border-radius: 6px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 13px;
+    border: 1px solid #d9d9d9;
+    margin: 0 2px;
+    background: #fff;
+    transition: all 0.2s;
+    &.is-active {
+      background: #1677ff !important;
+      border-color: #1677ff !important;
+      color: #fff !important;
+      font-weight: 600;
+    }
+    &:hover:not(.is-active) {
+      color: #1677ff;
+      border-color: #1677ff;
+    }
+  }
+
+  .btn-prev, .btn-next {
+    border-radius: 6px;
+    border: 1px solid #d9d9d9;
+    width: 32px;
+    height: 32px;
+    background: #fff;
+    &:hover { color: #1677ff; border-color: #1677ff; }
+    &:disabled { background: #f5f5f5; color: #d9d9d9; border-color: #d9d9d9; }
+  }
+}
+
+// ═══════════════════════════════════
+//  九、下拉面板
+// ═══════════════════════════════════
+.el-select-dropdown {
+  border-radius: 8px !important;
+  border: 1px solid #f0f0f0 !important;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.12) !important;
+  overflow: hidden;
+
+  &__item {
+    font-size: 13px;
+    height: 34px;
+    line-height: 34px;
+    padding: 0 12px;
+    border-radius: 4px;
+    margin: 0 4px;
+    &.is-selected { color: #1677ff; font-weight: 600; background: #e6f4ff; }
+    &:hover:not(.is-selected) { background: #e6f4ff; color: #1677ff; }
+    &.is-disabled { color: #d9d9d9; }
+  }
+}
+
+// ═══════════════════════════════════
+//  十、Tabs
+// ═══════════════════════════════════
+.el-tabs {
+  &__active-bar { background: #1677ff; height: 2px; border-radius: 2px; }
+  &__item {
+    font-size: 14px;
+    font-weight: 400;
+    color: #000000a6;
+    padding: 0 16px;
+    &.is-active { color: #1677ff; font-weight: 600; }
+    &:hover:not(.is-active) { color: #1677ff; }
+  }
+  &__nav-wrap::after { background-color: #f0f0f0; height: 1px; }
+}
+
+// ═══════════════════════════════════
+//  十一、Dropdown
+// ═══════════════════════════════════
+.el-dropdown-menu {
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.12);
+  padding: 4px;
+  overflow: hidden;
+
+  &__item {
+    border-radius: 4px;
+    font-size: 13px;
+    padding: 8px 12px;
+    color: #000000d9;
+    &:hover { background: #e6f4ff; color: #1677ff; }
+    &.is-disabled { color: #d9d9d9; }
+    &--divided { border-top: 1px solid #f0f0f0; margin-top: 4px; padding-top: 8px; }
+  }
+
+  a { display: block; }
+}
+
+// ═══════════════════════════════════
+//  十二、Popover / Tooltip
+// ═══════════════════════════════════
+.el-popover {
+  border-radius: 8px !important;
+  border: 1px solid #f0f0f0 !important;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
+  padding: 12px !important;
+  font-size: 13px;
+}
+
+// ═══════════════════════════════════
+//  十三、Radio / Checkbox
+// ═══════════════════════════════════
+.el-radio {
+  .el-radio__inner { border-color: #d9d9d9; transition: all 0.2s; }
+  &.is-checked {
+    .el-radio__inner { border-color: #1677ff; background: #1677ff; }
+    .el-radio__label { color: #1677ff; }
+  }
+}
+
+.el-checkbox {
+  .el-checkbox__inner { border-color: #d9d9d9; border-radius: 3px; transition: all 0.2s; }
+  &.is-checked {
+    .el-checkbox__inner { background: #1677ff; border-color: #1677ff; }
+    .el-checkbox__label { color: #1677ff; }
+  }
+  &.is-indeterminate .el-checkbox__inner { background: #1677ff; border-color: #1677ff; }
+}
+
+// ═══════════════════════════════════
+//  十四、Switch / Progress
+// ═══════════════════════════════════
+.el-switch.is-checked .el-switch__core { border-color: #1677ff; background: #1677ff; }
+
+.el-progress-bar__inner {
+  background: linear-gradient(90deg, #40a9ff, #1677ff);
+  border-radius: 4px;
+}
+
+// ═══════════════════════════════════
+//  十五、消息 / Alert
+// ═══════════════════════════════════
+.el-message {
+  border-radius: 8px;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
+  border: 1px solid #f0f0f0;
+  padding: 12px 16px;
+}
+
+.el-alert {
+  border-radius: 8px;
+  border: none;
+  &.el-alert--success { background: #f6ffed; }
+  &.el-alert--warning { background: #fffbe6; }
+  &.el-alert--error   { background: #fff2f0; }
+  &.el-alert--info    { background: #e6f4ff; }
+}
+
+// ═══════════════════════════════════
+//  十六、面包屑
+// ═══════════════════════════════════
+.el-breadcrumb {
+  &__inner, &__inner a {
+    font-weight: 400 !important;
+    color: #000000a6;
+  }
+  &__inner.is-link, &__inner a {
+    &:hover { color: #1677ff; }
+  }
+  &__separator { color: #d9d9d9; }
+}
+
+// ═══════════════════════════════════
+//  十七、Upload
+// ═══════════════════════════════════
+.el-upload {
+  input[type="file"] { display: none !important; }
+  &__input { display: none; }
+  &-dragger {
+    border-radius: 8px;
+    border: 1px dashed #d9d9d9;
+    background: #fafafa;
+    transition: all 0.3s;
+    &:hover { border-color: #1677ff; background: #e6f4ff; }
+  }
+}
+
+.upload-container .el-upload {
+  width: 100%;
+  .el-upload-dragger { width: 100%; height: 200px; }
+}
+
+// ═══════════════════════════════════
+//  十八、DatePicker
+// ═══════════════════════════════════
+.el-date-editor { border-radius: 6px; }
+.el-range-editor.el-input__inner { display: inline-flex !important; }
+.el-range-separator { box-sizing: content-box; }
+.el-picker__popper {
+  border-radius: 8px !important;
+  border: 1px solid #f0f0f0 !important;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
+}
+
+// ═══════════════════════════════════
+//  十九、Drawer
+// ═══════════════════════════════════
+.el-drawer {
+  overflow-y: auto;
+  &__header {
+    padding: 16px 20px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    background: #fafafa;
+    margin: 0;
+    font-weight: 600;
+    color: #000000d9;
+    font-size: 15px;
+  }
+  &__body { padding: 20px; }
+  &__footer {
+    padding: 12px 20px;
+    border-top: 1px solid #f0f0f0;
+    background: #fafafa;
+  }
+}
+
+// ═══════════════════════════════════
+//  二十、Misc
+// ═══════════════════════════════════
+.el-tree-node__content > .el-checkbox { margin-right: 8px; }
+.cell .el-tag { margin-right: 0; }
+.small-padding .cell { padding-left: 5px; padding-right: 5px; }
+.fixed-width .el-button--mini { padding: 7px 10px; width: 60px; }
+.status-col .cell { padding: 0 10px; text-align: center; }
+.delete-popconfirm { margin-left: 10px; }
diff --git a/src/styles/element-theme.css b/src/styles/element-theme.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/styles/element-theme.js b/src/styles/element-theme.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
deleted file mode 100644
index 955d3cab..00000000
--- a/src/styles/element-ui.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-// cover some element-ui styles
-
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-.el-upload {
-  input[type="file"] {
-    display: none !important;
-  }
-}
-
-.el-upload__input {
-  display: none;
-}
-
-.cell {
-  .el-tag {
-    margin-right: 0px;
-  }
-}
-
-.small-padding {
-  .cell {
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-}
-
-.fixed-width {
-  .el-button--mini {
-    padding: 7px 10px;
-    width: 60px;
-  }
-}
-
-.status-col {
-  .cell {
-    padding: 0 10px;
-    text-align: center;
-
-    .el-tag {
-      margin-right: 0px;
-    }
-  }
-}
-
-// to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
-}
-
-// refine element ui upload
-.upload-container {
-  .el-upload {
-    width: 100%;
-
-    .el-upload-dragger {
-      width: 100%;
-      height: 200px;
-    }
-  }
-}
-
-// dropdown
-.el-dropdown-menu {
-  a {
-    display: block
-  }
-}
-
-// fix date-picker ui bug in filter-item
-.el-range-editor.el-input__inner {
-  display: inline-flex !important;
-}
-
-// to fix el-date-picker css style
-.el-range-separator {
-  box-sizing: content-box;
-}
diff --git a/src/styles/element-variables.module.scss b/src/styles/element-variables.module.scss
new file mode 100644
index 00000000..8359029c
--- /dev/null
+++ b/src/styles/element-variables.module.scss
@@ -0,0 +1,29 @@
+/**
+* Element Plus theme variables (CSS Modules export for JS consumption)
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #FFBA00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border:1px solid#dfe6ec;
+
+/* icon font path, required */
+$--font-path: '~element-plus/theme-chalk/fonts';
+
+@use "element-plus/theme-chalk/src/index.scss" as *;
+
+// export primary theme color for JS access
+:export {
+  theme: $--color-primary;
+}
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index 30a0e6bc..6dd626cf 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -1,31 +1,30 @@
 /**
-* I think element-ui's default theme color is too light for long-term use.
-* So I modified the default color and you can modify it to your liking.
+* Element Plus theme customization
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #FFBA00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
+$--el-color-primary: #1890ff !default;
+$--el-color-success: #13ce66 !default;
+$--el-color-warning: #FFBA00 !default;
+$--el-color-danger: #ff4949 !default;
 
-$--button-font-weight: 400;
+$--el-button-font-weight: 400 !default;
 
-// $--color-text-regular: #1f2d3d;
+$--el-border-color-light: #dfe4ed !default;
+$--el-border-color-lighter: #e6ebf5 !default;
 
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
+$--el-table-border: 1px solid #dfe6ec !default;
 
-$--table-border:1px solid#dfe6ec;
-
-/* icon font path, required */
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
-@import "~element-ui/packages/theme-chalk/src/index";
+// Element Plus uses CSS variables for theming, so we can override them
+:root {
+  --el-color-primary: #{$--el-color-primary};
+  --el-color-success: #{$--el-color-success};
+  --el-color-warning: #{$--el-color-warning};
+  --el-color-danger: #{$--el-color-danger};
+}
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-  theme: $--color-primary;
+  theme: $--el-color-primary;
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4aec02dd..9193a9d9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,9 +1,9 @@
-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
+@use './variables.scss' as *;
+@use './mixin.scss' as *;
+@use './transition.scss' as *;
+@use './element-plus.scss' as *;
+@use './sidebar.scss' as *;
+@use './btn.scss' as *;
 
 body {
   height: 100%;
@@ -191,14 +191,6 @@ aside {
 }
 
 
-.el-card__header{
-  padding: 15px!important;
-  box-sizing: border-box;
-}
-.el-card__body{
-  padding: 20px!important;
-}
-
-.el-card + .el-card{
-  margin-top: 10px;
+.el-card + .el-card {
+  margin-top: 12px;
 }
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 8c583b7a..20874c1e 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,3 +1,5 @@
+@use './variables.scss' as *;
+
 #app {
 
   .main-container {
@@ -23,7 +25,6 @@
     -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
     box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
 
-    // reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
@@ -42,7 +43,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 64px);
       }
     }
 
@@ -64,44 +65,78 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      --el-menu-bg-color: #{$menuBg};
+      background-color: $menuBg !important;
+      border-right: none !important;
     }
 
+    // 统一菜单项高度（Element Plus 2.x 默认 56px 偏大，收紧至 50px）
     .el-menu-item,
+    .el-sub-menu__title,
     .el-submenu__title {
+      height: 50px !important;
+      line-height: 50px !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      color: #fff !important;
     }
 
-    // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
+    // 顶级 el-menu-item（如"首页"）必须设置深色背景，否则白字不可见
+    .el-menu-item {
+      background-color: $menuBg !important;
+
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: $menuHover !important;
       }
-    }
 
-    & .theme-dark .is-active>.el-submenu__title {
-      color: $subMenuActiveText !important;
+      &.is-active {
+        background-color: $subMenuBg !important;
+        color: $menuActiveText !important;
+      }
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
+    // 展开的子菜单 el-menu-item 强制暗色背景 + 白色文字
+    .el-sub-menu .el-menu-item,
+    .el-submenu .el-menu-item {
+      background-color: $subMenuBg !important;
+      color: #fff !important;
       min-width: $sideBarWidth !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: $subMenuHover !important;
+      }
+
+      &.is-active {
+        color: $menuActiveText !important;
       }
     }
 
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
-    & .theme-dark .el-submenu .el-menu-item {
+    // 嵌套子菜单标题
+    .nest-menu .el-sub-menu > .el-sub-menu__title,
+    .nest-menu .el-submenu > .el-submenu__title {
       background-color: $subMenuBg !important;
+      color: #fff !important;
+      min-width: $sideBarWidth !important;
 
       &:hover {
         background-color: $subMenuHover !important;
       }
     }
+
+    // 父级菜单标题 hover 效果
+    .submenu-title-noDropdown,
+    .el-sub-menu__title,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    .is-active > .el-sub-menu__title,
+    .is-active > .el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
   }
 
   .hideSidebar {
@@ -126,23 +161,26 @@
       }
     }
 
+    .el-sub-menu,
     .el-submenu {
       overflow: hidden;
 
-      &>.el-submenu__title {
+      > .el-sub-menu__title,
+      > .el-submenu__title {
         padding: 0 !important;
 
         .svg-icon {
           margin-left: 20px;
         }
-
       }
     }
 
     .el-menu--collapse {
+      .el-sub-menu,
       .el-submenu {
-        &>.el-submenu__title {
-          &>span {
+        > .el-sub-menu__title,
+        > .el-submenu__title {
+          > span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -154,6 +192,7 @@
     }
   }
 
+  .el-menu--collapse .el-menu .el-sub-menu,
   .el-menu--collapse .el-menu .el-submenu {
     min-width: $sideBarWidth !important;
   }
@@ -189,22 +228,22 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-sub-menu > .el-sub-menu__title,
+  .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
     &:hover {
-      // you can use $subMenuHover
       background-color: rgba(0, 0, 0, 0.06) !important;
     }
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 
diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3962ab96..d9d5d670 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -8,18 +8,17 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
-// sidebar
-// $menuText:#bfcbd9;
-$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+// sidebar — Ant Design Pro 经典深蓝配色
+$menuActiveText:#1677ff;
+$subMenuActiveText:#69b1ff;
 
 $menuBg:#001529;
 $menuHover:#000c17;
 $sidebarTitle: #ffffff;
 
 $menuLightBg:#ffffff;
-$menuLightHover:#f0f1f5;
-$sidebarLightTitle: #001529;
+$menuLightHover:#e6f4ff;
+$sidebarLightTitle: #001d66;
 
 $subMenuBg:#000c17;
 $subMenuHover:#001528;
diff --git a/src/utils/dialog.js b/src/utils/dialog.js
index 526e08b7..9fa986c5 100644
--- a/src/utils/dialog.js
+++ b/src/utils/dialog.js
@@ -1,7 +1,6 @@
-import Vue from 'vue'
 // v-dialogDrag: 弹窗拖拽属性
-Vue.directive('dialogDrag', {
-  bind(el, binding, vnode, oldVnode) {
+export const dialogDrag = {
+  mounted(el, binding, vnode) {
     const dialogHeaderEl = el.querySelector('.el-dialog__header')
     const dragDom = el.querySelector('.el-dialog')
     dialogHeaderEl.style.cssText += ';cursor:move;'
@@ -73,4 +72,4 @@ Vue.directive('dialogDrag', {
       return false
     }
   }
-})
+}
diff --git a/src/utils/error-log.js b/src/utils/error-log.js
index a7f5b55f..00c7207d 100644
--- a/src/utils/error-log.js
+++ b/src/utils/error-log.js
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { nextTick } from 'vue'
 import store from '@/store'
 import { isString, isArray } from '@/utils/validate'
 import settings from '@/settings'
@@ -18,18 +18,21 @@ function checkNeed() {
   return false
 }
 
-if (checkNeed()) {
-  Vue.config.errorHandler = function(err, vm, info, a) {
-  // Don't ask me why I use Vue.nextTick, it just a hack.
-  // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
-    Vue.nextTick(() => {
-      store.dispatch('errorLog/addErrorLog', {
-        err,
-        vm,
-        info,
-        url: window.location.href
+// Export error handler configuration
+export function setupErrorHandler(app) {
+  if (checkNeed()) {
+    app.config.errorHandler = function(err, vm, info) {
+      // Don't ask me why I use nextTick, it just a hack.
+      // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
+      nextTick(() => {
+        store.dispatch('errorLog/addErrorLog', {
+          err,
+          vm,
+          info,
+          url: window.location.href
+        })
+        console.error(err, info)
       })
-      console.error(err, info)
-    })
+    }
   }
 }
diff --git a/src/utils/generator/html.js b/src/utils/generator/html.js
index 7f2e9911..0ece23b4 100644
--- a/src/utils/generator/html.js
+++ b/src/utils/generator/html.js
@@ -5,12 +5,12 @@ let confGlobal
 let someSpanIsNot24
 
 export function dialogWrapper(str) {
-  return `<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Titile">
+  return `<el-dialog v-bind="$attrs" @open="onOpen" @close="onClose" title="Dialog Titile">
     ${str}
-    <div slot="footer">
+    <template #footer>
       <el-button @click="close">取消</el-button>
       <el-button type="primary" @click="handelConfirm">确定</el-button>
-    </div>
+    </template>
   </el-dialog>`
 }
 
diff --git a/src/utils/request.js b/src/utils/request.js
index c61c35d1..a17485ac 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+import { ElMessageBox, ElMessage } from 'element-plus'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 
@@ -50,7 +50,7 @@ service.interceptors.response.use(
       if (location.href.indexOf('login') !== -1) {
         location.reload() // 为了重新实例化vue-router对象 避免bug
       } else {
-        MessageBox.confirm(
+        ElMessageBox.confirm(
           '登录状态已过期，您可以继续留在该页面，或者重新登录',
           '系统提示',
           {
@@ -62,9 +62,10 @@ service.interceptors.response.use(
           location.reload() // 为了重新实例化vue-router对象 避免bug
         })
       }
+      return Promise.reject(new Error('Unauthorized'))
     } else if (code === 6401) {
       store.dispatch('user/resetToken')
-      MessageBox.confirm(
+      ElMessageBox.confirm(
         '登录状态已过期，您可以继续留在该页面，或者重新登录',
         '系统提示',
         {
@@ -77,16 +78,17 @@ service.interceptors.response.use(
       })
       return false
     } else if (code === 400 || code === 403) {
-      Message({
+      ElMessage({
         message: response.data.msg,
         type: 'error',
         duration: 5 * 1000
       })
+      return Promise.reject(new Error(response.data.msg))
     } else if (code !== 200) {
       // Notification.error({
       //   title: response.data.msg
       // })
-      Message({
+      ElMessage({
         message: response.data.msg,
         type: 'error'
       })
@@ -97,16 +99,16 @@ service.interceptors.response.use(
   },
   error => {
     if (error.message === 'Network Error') {
-      Message({
+      ElMessage({
         message: '服务器连接异常，请检查服务器！',
         type: 'error',
         duration: 5 * 1000
       })
-      return
+      return Promise.reject(error)
     }
     console.log('err' + error) // for debug
 
-    Message({
+    ElMessage({
       message: error.message,
       type: 'error',
       duration: 5 * 1000
diff --git a/src/vendor/Export2Excel.js b/src/vendor/Export2Excel.js
index d8a2af3d..b64e7d8b 100644
--- a/src/vendor/Export2Excel.js
+++ b/src/vendor/Export2Excel.js
@@ -1,6 +1,6 @@
 /* eslint-disable */
 import { saveAs } from 'file-saver'
-import XLSX from 'xlsx'
+import * as XLSX from 'xlsx'
 
 function generateArray(table) {
   var out = [];
diff --git a/src/views/admin/dict/data.vue b/src/views/admin/dict/data.vue
index d30d3158..22f02a38 100644
--- a/src/views/admin/dict/data.vue
+++ b/src/views/admin/dict/data.vue
@@ -2,7 +2,7 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
           <el-form-item label="字典名称" prop="dictType">
             <el-select v-model="queryParams.dictType" size="small">
               <el-option
@@ -19,7 +19,7 @@
               placeholder="请输入字典标签"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="状态" prop="status">
@@ -33,86 +33,55 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysDictData:add']"
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysDictData:edit']"
-              type="success"
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysDictData:remove']"
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-            >删除</el-button>
-          </el-col>
-        </el-row>
+        <div class="toolbar mb8">
+          <el-button v-permisaction="['admin:sysDictData:add']" type="primary" size="small" :icon="Plus" @click="handleAdd">新增</el-button>
+          <el-button v-permisaction="['admin:sysDictData:edit']" type="primary" size="small" :icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+          <el-button v-permisaction="['admin:sysDictData:remove']" type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+        </div>
 
-        <el-table v-loading="loading" :data="dataList" border @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="dataList" border stripe @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="字典编码" width="80" align="center" prop="dictCode" />
           <el-table-column label="字典标签" align="center" prop="dictLabel" />
           <el-table-column label="字典键值" align="center" prop="dictValue" />
           <el-table-column label="字典排序" align="center" prop="dictSort" />
-          <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
+          <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+              <el-tag :type="parseInt(scope.row.status) === 2 ? 'success' : 'danger'" size="small" disable-transitions>
+                {{ statusFormat(scope.row) }}
+              </el-tag>
+            </template>
+          </el-table-column>
           <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
           <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysDictData:edit']"
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                v-permisaction="['admin:sysDictData:remove']"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysDictData:edit']" type="primary" link size="small" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-divider direction="vertical" />
+              <el-button v-permisaction="['admin:sysDictData:remove']" type="danger" link size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
 
         <!-- 添加或修改参数配置对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
+        <el-dialog v-model="open" :title="title" width="500px" :close-on-click-modal="false">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="字典类型">
               <el-input v-model="form.dictType" :disabled="true" />
@@ -139,10 +108,10 @@
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <template #footer><div class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
             <el-button @click="cancel">取 消</el-button>
-          </div>
+          </div></template>
         </el-dialog>
       </el-card>
     </template>
@@ -152,9 +121,13 @@
 <script>
 import { listData, getData, delData, addData, updateData, exportData } from '@/api/admin/dict/data'
 import { listType, getType } from '@/api/admin/dict/type'
+import { Search, Refresh, Plus, Edit, Delete } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysDictDataManage',
+  setup() {
+    return { Search, Refresh, Plus, Edit, Delete }
+  },
   data() {
     return {
       // 遮罩层
diff --git a/src/views/admin/dict/index.vue b/src/views/admin/dict/index.vue
index 8c54a5a6..fa3e345d 100644
--- a/src/views/admin/dict/index.vue
+++ b/src/views/admin/dict/index.vue
@@ -2,15 +2,14 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
           <el-form-item label="字典名称" prop="dictName">
             <el-input
               v-model="queryParams.dictName"
               placeholder="请输入字典名称"
               clearable
               size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="字典类型" prop="dictType">
@@ -19,8 +18,7 @@
               placeholder="请输入字典类型"
               clearable
               size="small"
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="状态" prop="status">
@@ -29,7 +27,6 @@
               placeholder="字典状态"
               clearable
               size="small"
-              style="width: 240px"
             >
               <el-option
                 v-for="dict in statusOptions"
@@ -41,100 +38,61 @@
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysDictType:add']"
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysDictType:edit']"
-              type="success"
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysDictType:remove']"
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysDictType:export']"
-              type="warning"
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-            >导出</el-button>
-          </el-col>
-        </el-row>
+        <div class="toolbar mb8">
+          <el-button v-permisaction="['admin:sysDictType:add']" type="primary" size="small" :icon="Plus" @click="handleAdd">新增</el-button>
+          <el-button v-permisaction="['admin:sysDictType:edit']" type="primary" size="small" :icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+          <el-button v-permisaction="['admin:sysDictType:remove']" type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+          <el-button v-permisaction="['admin:sysDictType:export']" size="small" :icon="Download" @click="handleExport">导出</el-button>
+        </div>
 
-        <el-table v-loading="loading" :data="typeList" border @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="typeList" border stripe @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="字典编号" width="80" align="center" prop="id" />
           <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
           <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
-            <template slot-scope="scope">
+            <template #default="scope">
               <router-link :to="{name:'SysDictDataManage', params: {dictId:scope.row.id}}" class="link-type">
                 <span>{{ scope.row.dictType }}</span>
               </router-link>
             </template>
           </el-table-column>
-          <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
+          <el-table-column label="状态" align="center" prop="status">
+            <template #default="scope">
+              <el-tag :type="parseInt(scope.row.status) === 2 ? 'success' : 'danger'" size="small" disable-transitions>
+                {{ statusFormat(scope.row) }}
+              </el-tag>
+            </template>
+          </el-table-column>
           <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
           <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysDictType:edit']"
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                v-permisaction="['admin:sysDictType:remove']"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysDictType:edit']" type="primary" link size="small" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-divider direction="vertical" />
+              <el-button v-permisaction="['admin:sysDictType:remove']" type="danger" link size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
 
         <!-- 添加或修改参数配置对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
+        <el-dialog v-model="open" :title="title" width="500px" :close-on-click-modal="false">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="字典名称" prop="dictName">
               <el-input v-model="form.dictName" placeholder="请输入字典名称" :disabled="isEdit" />
@@ -155,10 +113,10 @@
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <template #footer><div class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
             <el-button @click="cancel">取 消</el-button>
-          </div>
+          </div></template>
         </el-dialog>
       </el-card>
     </template>
@@ -168,9 +126,13 @@
 <script>
 import { listType, getType, delType, addType, updateType } from '@/api/admin/dict/type'
 import { formatJson } from '@/utils'
+import { Search, Refresh, Plus, Edit, Delete, Download } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysDictTypeManage',
+  setup() {
+    return { Search, Refresh, Plus, Edit, Delete, Download }
+  },
   data() {
     return {
       // 遮罩层
diff --git a/src/views/admin/sys-api/index.vue b/src/views/admin/sys-api/index.vue
index d37f834f..9a8e2439 100644
--- a/src/views/admin/sys-api/index.vue
+++ b/src/views/admin/sys-api/index.vue
@@ -3,14 +3,14 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="48px">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
           <el-form-item label="标题" prop="title">
             <el-input
               v-model="queryParams.title"
               placeholder="请输入标题"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="地址" prop="path">
@@ -19,7 +19,7 @@
               placeholder="请输入地址"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="Method" prop="action">
@@ -28,7 +28,6 @@
               placeholder="请选择Method"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
             >
               <el-option value="GET">GET</el-option>
               <el-option value="POST">POST</el-option>
@@ -42,7 +41,6 @@
               placeholder="请选择类型"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
             >
               <el-option value="SYS">SYS</el-option>
               <el-option value="BUS">BUS</el-option>
@@ -50,8 +48,8 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
@@ -59,6 +57,7 @@
           v-loading="loading"
           :data="sysapiList"
           border
+          stripe
           @selection-change="handleSelectionChange"
           @sort-change="handleSortChang"
         >
@@ -72,7 +71,7 @@
             width="260px"
             :show-overflow-tooltip="true"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <span v-if="scope.row.type=='SYS' && scope.row.title!=''"><el-tag type="success">{{ '['+scope.row.type +'] '+ scope.row.title }}</el-tag></span>
               <span v-if="scope.row.type!='SYS' && scope.row.title!=''"><el-tag type="">{{ '['+scope.row.type +'] '+scope.row.title }}</el-tag></span>
               <span v-if="scope.row.title==''"><el-tag type="danger">暂无</el-tag></span>
@@ -88,10 +87,10 @@
             sortable="custom"
             :show-overflow-tooltip="true"
           >
-            <!-- <template slot-scope="scope">
+            <!-- <template v-slot="scope">
               <span>{{ "["+scope.row.action +"] "+ scope.row.path }}</span>
             </template> -->
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-popover trigger="hover" placement="top">
                 <p><span v-if="scope.row.type=='SYS' && scope.row.title!=''"><el-tag type="success">{{ '['+scope.row.type +'] '+ scope.row.title }}</el-tag></span>
                   <span v-if="scope.row.type!='SYS' && scope.row.title!=''"><el-tag type="">{{ '['+scope.row.type +'] '+scope.row.title }}</el-tag></span>
@@ -105,13 +104,13 @@
                   <el-tag v-if="scope.row.action=='DELETE'" type="danger">{{ scope.row.action }}</el-tag>
                 </p>
                 <p>接口类型: {{ scope.row.type }}</p>
-                <div slot="reference" class="name-wrapper">
+                <template #reference><div class="name-wrapper">
                   <el-tag v-if="scope.row.action=='GET'">{{ scope.row.action }}</el-tag>
                   <el-tag v-if="scope.row.action=='POST'" type="success">{{ scope.row.action }}</el-tag>
                   <el-tag v-if="scope.row.action=='PUT'" type="warning">{{ scope.row.action }}</el-tag>
                   <el-tag v-if="scope.row.action=='DELETE'" type="danger">{{ scope.row.action }}</el-tag>
                   {{ scope.row.path }}
-                </div>
+                </div></template>
               </el-popover>
             </template>
           </el-table-column>
@@ -122,7 +121,7 @@
             width="155px"
             sortable="custom"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
@@ -132,33 +131,26 @@
             width="80px"
             class-name="small-padding fixed-width"
           >
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysApi:edit']"
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改
-              </el-button>
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysApi:edit']" type="primary" link size="small" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
             </template>
           </el-table-column>
         </el-table>
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
 
         <!-- 添加或修改对话框 -->
         <el-drawer
           ref="drawer"
+          v-model="open"
           :title="title"
           :before-close="cancel"
-          :visible.sync="open"
           direction="rtl"
           custom-class="demo-drawer"
         >
@@ -183,7 +175,7 @@
                   placeholder="请选择类型"
                   clearable
                   size="small"
-                  @keyup.enter.native="handleQuery"
+                  @keyup.enter="handleQuery"
                 >
                   <el-option value="SYS">SYS</el-option>
                   <el-option value="BUS">BUS</el-option>
@@ -195,7 +187,7 @@
                   placeholder="请选择方式"
                   clearable
                   size="small"
-                  @keyup.enter.native="handleQuery"
+                  @keyup.enter="handleQuery"
                 >
                   <el-option value="GET">GET</el-option>
                   <el-option value="POST">POST</el-option>
@@ -228,11 +220,15 @@
 
 <script>
 import { addSysApi, delSysApi, getSysApi, listSysApi, updateSysApi } from '@/api/admin/sys-api'
+import { Search, Refresh, Edit } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysApiManage',
   components: {
   },
+  setup() {
+    return { Search, Refresh, Edit }
+  },
   data() {
     return {
       dialog: false,
diff --git a/src/views/admin/sys-config/index.vue b/src/views/admin/sys-config/index.vue
index 2cdb337e..bcab9097 100644
--- a/src/views/admin/sys-config/index.vue
+++ b/src/views/admin/sys-config/index.vue
@@ -10,7 +10,7 @@
               clearable
               size="small"
               style="width: 160px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="键名" prop="configKey">
@@ -20,7 +20,7 @@
               clearable
               size="small"
               style="width: 160px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="内置" prop="configType">
@@ -34,8 +34,8 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button size="mini" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
@@ -44,7 +44,7 @@
             <el-button
               v-permisaction="['admin:sysConfig:add']"
               type="primary"
-              icon="el-icon-plus"
+
               size="mini"
               @click="handleAdd"
             >新增</el-button>
@@ -53,7 +53,7 @@
             <el-button
               v-permisaction="['admin:sysConfig:edit']"
               type="success"
-              icon="el-icon-edit"
+
               size="mini"
               :disabled="single"
               @click="handleUpdate"
@@ -63,7 +63,7 @@
             <el-button
               v-permisaction="['admin:sysConfig:remove']"
               type="danger"
-              icon="el-icon-delete"
+
               size="mini"
               :disabled="multiple"
               @click="handleDelete"
@@ -73,7 +73,7 @@
             <el-button
               v-permisaction="['admin:sysConfig:export']"
               type="warning"
-              icon="el-icon-download"
+
               size="mini"
               @click="handleExport"
             >导出</el-button>
@@ -105,15 +105,15 @@
             sortable="custom"
             prop="configKey"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-popover trigger="hover" placement="top">
                 <p>键值: {{ scope.row.configValue }}</p>
                 <p>UI参数:  <el-tag v-if="scope.row.isFrontend=='2'">否</el-tag>
                   <el-tag v-if="scope.row.isFrontend=='1'" type="success">是</el-tag>
                 </p>
-                <div slot="reference" class="name-wrapper">
+                <template #reference><div class="name-wrapper">
                   {{ scope.row.configKey }}
-                </div>
+                </div></template>
               </el-popover>
             </template>
           </el-table-column>
@@ -135,7 +135,7 @@
             prop="createdAt"
             width="160"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
@@ -144,19 +144,19 @@
             class-name="small-padding fixed-width"
             width="120"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-button
                 v-permisaction="['admin:sysConfig:edit']"
                 size="mini"
                 type="text"
-                icon="el-icon-edit"
+
                 @click="handleUpdate(scope.row)"
               >修改</el-button>
               <el-button
                 v-permisaction="['admin:sysConfig:remove']"
                 size="mini"
                 type="text"
-                icon="el-icon-delete"
+
                 @click="handleDelete(scope.row)"
               >删除</el-button>
             </template>
@@ -165,14 +165,14 @@
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
 
         <!-- 添加或修改参数配置对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
+        <el-dialog v-model="open" :title="title" width="500px" :close-on-click-modal="false">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="参数名称" prop="configName">
               <el-input v-model="form.configName" placeholder="请输入参数名称" :disabled="isEdit" />
@@ -202,10 +202,10 @@
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <template #footer><div class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
             <el-button @click="cancel">取 消</el-button>
-          </div>
+          </div></template>
         </el-dialog>
       </el-card>
     </template>
diff --git a/src/views/admin/sys-config/set.vue b/src/views/admin/sys-config/set.vue
index 588b2407..7a95b69b 100644
--- a/src/views/admin/sys-config/set.vue
+++ b/src/views/admin/sys-config/set.vue
@@ -1,69 +1,209 @@
 <template>
   <BasicLayout>
     <template #wrapper>
-      <el-card class="box-card">
-        <el-tabs tab-position="left" style="height: 100%;">
-          <el-tab-pane label="系统内置">
-            <el-form label-width="80px">
-              <div class="test-form">
-                <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
-                  <el-form-item label="系统名称" prop="sys_app_name">
-                    <el-input v-model="form.sys_app_name" placeholder="请输入系统名称" clearable :style="{width: '100%'}" />
-                  </el-form-item>
-                  <el-form-item label="系统logo" prop="sys_app_logo" required>
-                    <img v-if="form.sys_app_logo" :src="form.sys_app_logo" class="el-upload el-upload--picture-card" style="float:left">
-                    <el-upload ref="sys_app_logo" :headers="headers" :file-list="sys_app_logofileList" :action="sys_app_logoAction" style="float:left" :before-upload="sys_app_logoBeforeUpload" list-type="picture-card" :show-file-list="false" :on-success="uploadSuccess">
-                      <i class="el-icon-plus" />
-                    </el-upload>
-                  </el-form-item>
-                  <el-form-item label="初始密码" prop="sys_user_initPassword">
-                    <el-input v-model="form.sys_user_initPassword" placeholder="请输入初始密码" clearable :style="{width: '100%'}" />
-                  </el-form-item>
-                  <el-form-item label="皮肤样式" prop="sys_index_skinName">
-                    <el-select v-model="form.sys_index_skinName" placeholder="请选择皮肤样式" clearable :style="{width: '100%'}">
-                      <el-option v-for="(item, index) in sys_index_skinNameOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled" />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="侧栏主题" prop="sys_index_sideTheme">
-                    <el-select v-model="form.sys_index_sideTheme" placeholder="请选择侧栏主题" clearable :style="{width: '100%'}">
-                      <el-option v-for="(item, index) in sys_index_sideThemeOptions" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled" />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item size="large">
-                    <el-button type="primary" @click="submitForm">提交</el-button>
-                    <el-button @click="resetForm">重置</el-button>
-                  </el-form-item>
-                </el-form>
+      <div class="sys-config-set">
+
+        <div class="config-wrapper">
+
+          <!-- ── 左侧导航 ── -->
+          <div class="config-sidebar">
+            <div class="sidebar-header">
+              <div class="sidebar-icon-box">
+                <el-icon :size="18" color="#1677ff"><Setting /></el-icon>
+              </div>
+              <div>
+                <p class="sidebar-header__title">系统配置</p>
+                <p class="sidebar-header__sub">基础信息与外观设置</p>
+              </div>
+            </div>
+            <div class="sidebar-divider" />
+            <div
+              v-for="(item, idx) in navItems"
+              :key="idx"
+              class="nav-item"
+              :class="{ 'is-active': activeSection === idx }"
+              @click="activeSection = idx"
+            >
+              <div class="nav-item__icon-wrap">
+                <el-icon :size="15"><component :is="item.icon" /></el-icon>
+              </div>
+              <div class="nav-item__text">
+                <span class="nav-item__label">{{ item.label }}</span>
+                <span class="nav-item__sub">{{ item.sub }}</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- ── 右侧主内容 ── -->
+          <div class="config-main">
+
+            <!-- 基础信息 -->
+            <transition name="fade-slide" mode="out-in">
+              <div v-if="activeSection === 0" key="basic" class="config-section">
+                <div class="section-head">
+                  <div class="section-head__icon-wrap">
+                    <el-icon :size="16" color="#1677ff"><OfficeBuilding /></el-icon>
+                  </div>
+                  <div>
+                    <p class="section-head__title">系统基础信息</p>
+                    <p class="section-head__desc">配置系统名称、Logo 及用户默认密码</p>
+                  </div>
+                </div>
+
+                <div class="section-body">
+                  <!-- Logo -->
+                  <div class="logo-zone">
+                    <div class="logo-preview">
+                      <img v-if="form.sys_app_logo" :src="form.sys_app_logo" alt="logo" class="logo-img">
+                      <div v-else class="logo-empty">
+                        <el-icon :size="24" color="#c0c4cc"><Picture /></el-icon>
+                        <span>暂无 Logo</span>
+                      </div>
+                    </div>
+                    <div class="logo-meta">
+                      <p class="logo-meta__name">系统 Logo</p>
+                      <p class="logo-meta__hint">推荐 200×200，支持 JPG / PNG，大小不超过 2MB</p>
+                      <el-upload
+                        :headers="headers"
+                        :file-list="sys_app_logofileList"
+                        :action="sys_app_logoAction"
+                        :before-upload="sys_app_logoBeforeUpload"
+                        :show-file-list="false"
+                        :on-success="uploadSuccess"
+                      >
+                        <el-button size="small" plain type="primary">
+                          <el-icon style="margin-right:4px"><Upload /></el-icon>上传图片
+                        </el-button>
+                      </el-upload>
+                    </div>
+                  </div>
+
+                  <el-divider style="margin: 16px 0" />
+
+                  <el-form ref="form" :model="form" :rules="rules" label-position="top">
+                    <el-row :gutter="20">
+                      <el-col :span="12">
+                        <el-form-item label="系统名称" prop="sys_app_name">
+                          <el-input v-model="form.sys_app_name" placeholder="请输入系统名称" clearable>
+                            <template #prefix><el-icon><OfficeBuilding /></el-icon></template>
+                          </el-input>
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="12">
+                        <el-form-item label="用户初始密码" prop="sys_user_initPassword">
+                          <el-input v-model="form.sys_user_initPassword" placeholder="请输入初始密码" clearable show-password>
+                            <template #prefix><el-icon><Lock /></el-icon></template>
+                          </el-input>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </el-form>
+                </div>
+              </div>
+
+              <!-- 外观设置 -->
+              <div v-else-if="activeSection === 1" key="theme" class="config-section">
+                <div class="section-head">
+                  <div class="section-head__icon-wrap">
+                    <el-icon :size="16" color="#1677ff"><Brush /></el-icon>
+                  </div>
+                  <div>
+                    <p class="section-head__title">外观设置</p>
+                    <p class="section-head__desc">调整皮肤样式与侧栏主题风格</p>
+                  </div>
+                </div>
+
+                <div class="section-body">
+                  <el-form label-position="top">
+                    <el-row :gutter="20">
+                      <el-col :span="12">
+                        <el-form-item label="皮肤样式">
+                          <el-select v-model="form.sys_index_skinName" placeholder="请选择皮肤样式" style="width:100%">
+                            <el-option v-for="(item, i) in sys_index_skinNameOptions" :key="i" :label="item.label" :value="item.value" :disabled="item.disabled" />
+                          </el-select>
+                        </el-form-item>
+                      </el-col>
+                      <el-col :span="12">
+                        <el-form-item label="侧栏主题">
+                          <el-select v-model="form.sys_index_sideTheme" placeholder="请选择侧栏主题" style="width:100%">
+                            <el-option v-for="(item, i) in sys_index_sideThemeOptions" :key="i" :label="item.label" :value="item.value" :disabled="item.disabled" />
+                          </el-select>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </el-form>
+
+                  <p class="theme-label">点击快速切换主题</p>
+                  <div class="theme-row">
+                    <div
+                      class="theme-card"
+                      :class="{ 'is-active': form.sys_index_sideTheme === 'theme-dark' }"
+                      @click="form.sys_index_sideTheme = 'theme-dark'"
+                    >
+                      <div class="tc-preview tc-preview--dark">
+                        <div class="tc-sidebar" />
+                        <div class="tc-body">
+                          <div class="tc-topbar" />
+                          <div class="tc-content" />
+                        </div>
+                      </div>
+                      <div class="tc-label">
+                        <span>深色主题</span>
+                        <el-icon v-if="form.sys_index_sideTheme === 'theme-dark'" color="#1677ff"><Check /></el-icon>
+                      </div>
+                    </div>
+                    <div
+                      class="theme-card"
+                      :class="{ 'is-active': form.sys_index_sideTheme === 'theme-light' }"
+                      @click="form.sys_index_sideTheme = 'theme-light'"
+                    >
+                      <div class="tc-preview tc-preview--light">
+                        <div class="tc-sidebar" />
+                        <div class="tc-body">
+                          <div class="tc-topbar" />
+                          <div class="tc-content" />
+                        </div>
+                      </div>
+                      <div class="tc-label">
+                        <span>浅色主题</span>
+                        <el-icon v-if="form.sys_index_sideTheme === 'theme-light'" color="#1677ff"><Check /></el-icon>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-            </el-form>
-          </el-tab-pane>
-          <el-tab-pane label="其他">其他</el-tab-pane>
-        </el-tabs>
+            </transition>
+
+            <!-- 操作栏 -->
+            <div class="config-footer">
+              <el-button @click="resetForm">重置</el-button>
+              <el-button type="primary" :loading="saving" @click="submitForm">保存设置</el-button>
+            </div>
 
-      </el-card>
+          </div>
+        </div>
+
+      </div>
     </template>
   </BasicLayout>
 </template>
 
 <script>
-import {
-  getSetConfig,
-  updateSetConfig
-} from '@/api/admin/sys-config'
-
+import { getSetConfig, updateSetConfig } from '@/api/admin/sys-config'
 import { getToken } from '@/utils/auth'
+import { Setting, OfficeBuilding, Lock, Picture, Upload, Brush, Check } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysConfigSet',
-  components: {
+  setup() {
+    return { Setting, OfficeBuilding, Lock, Picture, Upload, Brush, Check }
   },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 参数表格数据
+      activeSection: 0,
+      saving: false,
+      loading: false,
       configList: [],
-      formConf: {},
       headers: { 'Authorization': 'Bearer ' + getToken() },
       form: {
         sys_app_name: undefined,
@@ -73,151 +213,392 @@ export default {
         sys_index_sideTheme: undefined
       },
       rules: {
-        sys_app_name: [{
-          required: true,
-          message: '请输入系统名称',
-          trigger: 'blur'
-        }],
-        sys_user_initPassword: [{
-          required: true,
-          message: '请输入初始密码',
-          trigger: 'blur'
-        }],
-        sys_index_skinName: [{
-          required: true,
-          message: '请选择皮肤样式',
-          trigger: 'change'
-        }],
-        sys_index_sideTheme: [{
-          required: true,
-          message: '请选择侧栏主题',
-          trigger: 'change'
-        }]
+        sys_app_name: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
+        sys_user_initPassword: [{ required: true, message: '请输入初始密码', trigger: 'blur' }]
       },
       sys_app_logoAction: process.env.VUE_APP_BASE_API + '/api/v1/public/uploadFile',
       sys_app_logofileList: [],
-      sys_index_skinNameOptions: [{
-        'label': '蓝色',
-        'value': 'skin-blue'
-      }],
-      sys_index_sideThemeOptions: [{
-        'label': '深色主题',
-        'value': 'theme-dark'
-      }]
+      sys_index_skinNameOptions: [{ label: '蓝色', value: 'skin-blue' }],
+      sys_index_sideThemeOptions: [
+        { label: '深色主题', value: 'theme-dark' },
+        { label: '浅色主题', value: 'theme-light' }
+      ]
+    }
+  },
+  computed: {
+    navItems() {
+      return [
+        { label: '基础信息', sub: '名称、Logo、密码', icon: this.OfficeBuilding },
+        { label: '外观设置', sub: '皮肤与主题风格', icon: this.Brush }
+      ]
     }
   },
   created() {
     this.getList()
   },
   methods: {
+    getList() {
+      this.loading = true
+      getSetConfig().then(response => {
+        this.form = response.data
+        this.loading = false
+      })
+    },
     submitForm() {
-      console.log(this.form)
       this.$refs['form'].validate(valid => {
         if (!valid) return
-        console.log(this.form)
-        var list = []
-        var i = 0
-        for (var key in this.form) {
-          list[i] = {
-            'configKey': key,
-            'configValue': this.form[key]
-          }
-          i++
-        }
+        this.saving = true
+        const list = Object.keys(this.form).map(key => ({ configKey: key, configValue: this.form[key] }))
         updateSetConfig(list).then(response => {
           if (response.code === 200) {
             this.msgSuccess(response.msg)
-            this.open = false
             this.getList()
             const { sys_app_name, sys_app_logo } = this.form
-            this.$store.commit('system/SET_INFO', {
-              sys_app_logo,
-              sys_app_name
-            })
+            this.$store.commit('system/SET_INFO', { sys_app_logo, sys_app_name })
           } else {
             this.msgError(response.msg)
           }
-        })
+        }).finally(() => { this.saving = false })
       })
     },
     resetForm() {
       this.$refs['form'].resetFields()
     },
     sys_app_logoBeforeUpload(file) {
-      const isRightSize = file.size / 1024 / 1024 < 2
-      if (!isRightSize) {
-        this.$message.error('文件大小超过 2MB')
-      }
-      return isRightSize
+      const ok = file.size / 1024 / 1024 < 2
+      if (!ok) this.$message.error('文件大小超过 2MB')
+      return ok
     },
-    uploadSuccess(response, file, fileList) {
-      console.log('sss')
+    uploadSuccess(response) {
       this.form.sys_app_logo = process.env.VUE_APP_BASE_API + response.data.full_path
-      console.log(response.data.full_path)
-    },
-    /** 查询参数列表 */
-    getList() {
-      this.loading = true
-      getSetConfig().then(response => {
-        this.configList = response.data
-        this.loading = false
-        this.form = this.configList
-        // this.sys_app_logofileList = [this.configList.sys_app_logo]
-        // this.fillFormData(this.elForm, this.configList)
-        // 更新表单
-        // this.key2 = +new Date()
-      })
-    },
-    setUrl(url) {
-      const data = {
-        sys_app_logo: ''
-      }
-      data.sys_app_logo = url
-      // 回填数据
-      this.fillFormData(this.formConf, data)
-      // 更新表单
-      this.key2 = +new Date()
-    },
-    // 参数系统内置字典翻译
-    typeFormat(row, column) {
-      return this.selectDictLabel(this.typeOptions, row.configType)
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageIndex = 1
-      this.getList()
-    },
-    fillFormData(form, data) {
-      form.fields.forEach(item => {
-        const val = data[item.__vModel__]
-        if (val) {
-          item.__config__.defaultValue = val
-        }
-      })
-    },
-    bind(key, data) {
-      this.setUrl(data)
-    },
-    sumbitForm2(data) {
-      var list = []
-      var i = 0
-      for (var key in data) {
-        list[i] = {
-          'configKey': key,
-          'configValue': data[key]
-        }
-        i++
-      }
-      updateSetConfig(list).then(response => {
-        if (response.code === 200) {
-          this.msgSuccess(response.msg)
-          this.open = false
-          this.getList()
-        } else {
-          this.msgError(response.msg)
-        }
-      })
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+// ── 页面容器 ──────────────────────────────────────────────
+.sys-config-set {
+  padding: 0;
+}
+
+.config-wrapper {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+
+// ══════════════════════════════
+//  左侧导航卡
+// ══════════════════════════════
+.config-sidebar {
+  width: 188px;
+  flex-shrink: 0;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  overflow: hidden;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 14px 12px;
+}
+
+.sidebar-icon-box {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  background: #e6f4ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.sidebar-header__title {
+  margin: 0 0 2px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #000000d9;
+  line-height: 1;
+}
+
+.sidebar-header__sub {
+  margin: 0;
+  font-size: 11px;
+  color: #00000073;
+  line-height: 1;
+}
+
+.sidebar-divider {
+  height: 1px;
+  background: #f0f0f0;
+  margin: 0;
+}
+
+// 导航项
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 11px 14px;
+  cursor: pointer;
+  border-left: 2px solid transparent;
+  transition: all 0.15s;
+
+  &:hover:not(.is-active) { background: #fafafa; }
+
+  &.is-active {
+    background: #e6f4ff;
+    border-left-color: #1677ff;
+
+    .nav-item__icon-wrap { color: #1677ff; background: rgba(22,119,255,0.1); }
+    .nav-item__label { color: #1677ff; font-weight: 600; }
+  }
+
+  &:not(:last-child) { border-bottom: 1px solid #f5f5f5; }
+}
+
+.nav-item__icon-wrap {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #00000073;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.nav-item__text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.nav-item__label {
+  font-size: 13px;
+  color: #000000d9;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.nav-item__sub {
+  font-size: 11px;
+  color: #00000045;
+  line-height: 1;
+}
+
+// ══════════════════════════════
+//  右侧主内容
+// ══════════════════════════════
+.config-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+// 内容分区卡片
+.config-section {
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  overflow: hidden;
+}
+
+// 分区头部
+.section-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fafafa;
+}
+
+.section-head__icon-wrap {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  background: #e6f4ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.section-head__title {
+  margin: 0 0 2px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #000000d9;
+  line-height: 1;
+}
+
+.section-head__desc {
+  margin: 0;
+  font-size: 12px;
+  color: #00000073;
+  line-height: 1;
+}
+
+// 分区内容体
+.section-body {
+  padding: 16px;
+}
+
+// ── Logo 区域 ──────────────────────────────────────────
+.logo-zone {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px;
+  background: #fafafa;
+  border-radius: 6px;
+  border: 1px dashed #d9d9d9;
+}
+
+.logo-preview {
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  border: 1px solid #e8e8e8;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.logo-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.logo-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  color: #c0c4cc;
+  font-size: 11px;
+}
+
+.logo-meta { flex: 1; }
+
+.logo-meta__name {
+  margin: 0 0 3px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #000000d9;
+}
+
+.logo-meta__hint {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: #00000073;
+  line-height: 1.5;
+}
+
+// ── 主题选择 ─────────────────────────────────────────────
+.theme-label {
+  margin: 12px 0 10px;
+  font-size: 12px;
+  color: #00000073;
+}
+
+.theme-row {
+  display: flex;
+  gap: 12px;
+}
+
+.theme-card {
+  width: 160px;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover { border-color: #4096ff; box-shadow: 0 2px 8px rgba(22,119,255,0.12); }
+
+  &.is-active {
+    border-color: #1677ff;
+    box-shadow: 0 2px 8px rgba(22,119,255,0.2);
+  }
+}
+
+.tc-preview {
+  display: flex;
+  height: 80px;
+}
+
+.tc-preview--dark {
+  background: #1e2a3b;
+  .tc-sidebar  { background: #001529; }
+  .tc-topbar   { background: #162131; height: 16px; }
+  .tc-content  { flex: 1; background: #1e2a3b; }
+}
+
+.tc-preview--light {
+  background: #f5f5f5;
+  .tc-sidebar  { background: #fff; border-right: 1px solid #f0f0f0; }
+  .tc-topbar   { background: #fff; height: 16px; border-bottom: 1px solid #f0f0f0; }
+  .tc-content  { flex: 1; background: #f5f5f5; }
+}
+
+.tc-sidebar {
+  width: 36px;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.tc-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.tc-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: #000000d9;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+}
+
+// ── 底部操作栏 ────────────────────────────────────────────
+.config-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+// ── 过渡动画 ─────────────────────────────────────────────
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: opacity 0.15s, transform 0.15s;
+}
+
+.fade-slide-enter-from { opacity: 0; transform: translateY(6px); }
+.fade-slide-leave-to   { opacity: 0; transform: translateY(-6px); }
+</style>
diff --git a/src/views/admin/sys-dept/index.vue b/src/views/admin/sys-dept/index.vue
index 4fd122e3..9b169a5b 100644
--- a/src/views/admin/sys-dept/index.vue
+++ b/src/views/admin/sys-dept/index.vue
@@ -2,18 +2,27 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form :inline="true">
-          <el-form-item label="部门名称">
+
+        <!-- 搜索区 -->
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
+          <el-form-item label="部门名称" prop="deptName">
             <el-input
               v-model="queryParams.deptName"
               placeholder="请输入部门名称"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              style="width: 200px"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="状态">
-            <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="部门状态"
+              clearable
+              size="small"
+              style="width: 140px"
+            >
               <el-option
                 v-for="dict in statusOptions"
                 :key="dict.value"
@@ -23,77 +32,87 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button
-              class="filter-item"
-              type="primary"
-              icon="el-icon-search"
-              size="mini"
-              @click="handleQuery"
-            >搜索</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="handleResetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <!-- 操作栏 -->
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
             <el-button
               v-permisaction="['admin:sysDept:add']"
-              class="filter-item"
               type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
+              size="small"
+              :icon="Plus"
+              @click="handleAdd()"
             >新增</el-button>
-          </el-form-item>
-        </el-form>
+          </el-col>
+        </el-row>
 
+        <!-- 数据表格 -->
         <el-table
           v-loading="loading"
           :data="deptList"
           row-key="deptId"
           default-expand-all
           border
-          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+          stripe
+          highlight-current-row
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
         >
-          <el-table-column prop="deptName" label="部门名称" />
-          <el-table-column prop="sort" label="排序" width="200" />
-          <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100">
-            <template slot-scope="scope">
+          <el-table-column prop="deptName" label="部门名称" min-width="160" />
+          <el-table-column prop="sort" label="排序" width="80" align="center" />
+          <el-table-column prop="status" label="状态" width="90" align="center">
+            <template #default="scope">
               <el-tag
                 :type="scope.row.status === 1 ? 'danger' : 'success'"
+                size="small"
                 disable-transitions
               >{{ statusFormat(scope.row) }}</el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createdAt" width="200">
-            <template slot-scope="scope">
+          <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
+          <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
+            <template #default="scope">
               <el-button
                 v-permisaction="['admin:sysDept:edit']"
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
+                size="small"
+                type="primary"
+                link
+                :icon="Edit"
                 @click="handleUpdate(scope.row)"
               >修改</el-button>
+              <el-divider direction="vertical" />
               <el-button
                 v-permisaction="['admin:sysDept:add']"
-                size="mini"
-                type="text"
-                icon="el-icon-plus"
+                size="small"
+                type="primary"
+                link
+                :icon="Plus"
                 @click="handleAdd(scope.row)"
               >新增</el-button>
-              <el-button
-                v-if="scope.row.p_id != 0"
-                v-permisaction="['admin:sysDept:remove']"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
+              <template v-if="scope.row.p_id != 0">
+                <el-divider direction="vertical" />
+                <el-button
+                  v-permisaction="['admin:sysDept:remove']"
+                  size="small"
+                  type="danger"
+                  link
+                  :icon="Delete"
+                  @click="handleDelete(scope.row)"
+                >删除</el-button>
+              </template>
             </template>
           </el-table-column>
         </el-table>
 
         <!-- 添加或修改部门对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false">
+        <el-dialog v-model="open" :title="title" width="600px" :close-on-click-modal="false">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-row>
               <el-col :span="24">
@@ -146,11 +165,14 @@
               </el-col>
             </el-row>
           </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-          </div>
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button type="primary" @click="submitForm">确 定</el-button>
+              <el-button @click="cancel">取 消</el-button>
+            </div>
+          </template>
         </el-dialog>
+
       </el-card>
     </template>
   </BasicLayout>
@@ -158,36 +180,30 @@
 
 <script>
 import { getDeptList, getDept, delDept, addDept, updateDept } from '@/api/admin/sys-dept'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
+import { Search, Refresh, Plus, Edit, Delete } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysDeptManage',
   components: { Treeselect },
+  setup() {
+    return { Search, Refresh, Plus, Edit, Delete }
+  },
   data() {
     return {
-      // 遮罩层
       loading: true,
-      // 表格树数据
       deptList: [],
-      // 部门树选项
       deptOptions: [],
-      // 弹出层标题
       title: '',
       isEdit: false,
-      // 是否显示弹出层
       open: false,
-      // 状态数据字典
       statusOptions: [],
-      // 查询参数
       queryParams: {
         deptName: undefined,
         status: undefined
       },
-      // 表单参数
-      form: {
-      },
-      // 表单校验
+      form: {},
       rules: {
         parentId: [
           { required: true, message: '上级部门不能为空', trigger: 'blur' }
@@ -204,7 +220,7 @@ export default {
         email: [
           {
             type: 'email',
-            message: "'请输入正确的邮箱地址",
+            message: '请输入正确的邮箱地址',
             trigger: ['blur', 'change']
           }
         ],
@@ -225,7 +241,6 @@ export default {
     })
   },
   methods: {
-    /** 查询部门列表 */
     getList() {
       this.loading = true
       getDeptList(this.queryParams).then(response => {
@@ -233,7 +248,6 @@ export default {
         this.loading = false
       })
     },
-    /** 转换部门数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
         delete node.children
@@ -244,11 +258,9 @@ export default {
         children: node.children
       }
     },
-    /** 查询部门下拉树结构 */
     getTreeselect(e) {
       getDeptList().then(response => {
         this.deptOptions = []
-
         if (e === 'update') {
           const dept = { deptId: 0, deptName: '主类目', children: [], isDisabled: true }
           dept.children = response.data
@@ -260,16 +272,13 @@ export default {
         }
       })
     },
-    // 字典状态字典翻译
     statusFormat(row) {
       return this.selectDictLabel(this.statusOptions, parseInt(row.status))
     },
-    // 取消按钮
     cancel() {
       this.open = false
       this.reset()
     },
-    // 表单重置
     reset() {
       this.form = {
         deptId: undefined,
@@ -282,11 +291,13 @@ export default {
         status: '2'
       }
     },
-    /** 搜索按钮操作 */
     handleQuery() {
       this.getList()
     },
-    /** 新增按钮操作 */
+    handleResetQuery() {
+      this.queryParams = { deptName: undefined, status: undefined }
+      this.getList()
+    },
     handleAdd(row) {
       this.reset()
       this.getTreeselect('add')
@@ -297,11 +308,9 @@ export default {
       this.title = '添加部门'
       this.isEdit = false
     },
-    /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset()
       this.getTreeselect('update')
-
       getDept(row.deptId).then(response => {
         this.form = response.data
         this.form.status = String(this.form.status)
@@ -311,7 +320,6 @@ export default {
         this.isEdit = true
       })
     },
-    /** 提交按钮 */
     submitForm: function() {
       this.$refs['form'].validate(valid => {
         if (valid) {
@@ -341,7 +349,6 @@ export default {
         }
       })
     },
-    /** 删除按钮操作 */
     handleDelete(row) {
       const Ids = (row.deptId && [row.deptId]) || this.ids
       this.$confirm(
diff --git a/src/views/admin/sys-login-log/index.vue b/src/views/admin/sys-login-log/index.vue
index e0182eee..83cd990d 100644
--- a/src/views/admin/sys-login-log/index.vue
+++ b/src/views/admin/sys-login-log/index.vue
@@ -3,59 +3,52 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
-          <el-form-item label="用户名" prop="username"><el-input
-            v-model="queryParams.username"
-            placeholder="请输入用户名"
-            clearable
-            size="small"
-            @keyup.enter.native="handleQuery"
-          />
-          </el-form-item>
-          <el-form-item label="状态" prop="status"><el-select
-            v-model="queryParams.status"
-            placeholder="系统登录日志状态"
-            clearable
-            size="small"
-          >
-            <el-option
-              v-for="dict in statusOptions"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
+          <el-form-item label="用户名" prop="username">
+            <el-input
+              v-model="queryParams.username"
+              placeholder="请输入用户名"
+              clearable
+              size="small"
+              @keyup.enter="handleQuery"
             />
-          </el-select>
           </el-form-item>
-          <el-form-item label="ip地址" prop="ipaddr"><el-input
-            v-model="queryParams.ipaddr"
-            placeholder="请输入ip地址"
-            clearable
-            size="small"
-            @keyup.enter.native="handleQuery"
-          />
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="系统登录日志状态"
+              clearable
+              size="small"
+            >
+              <el-option
+                v-for="dict in statusOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="ip地址" prop="ipaddr">
+            <el-input
+              v-model="queryParams.ipaddr"
+              placeholder="请输入ip地址"
+              clearable
+              size="small"
+              @keyup.enter="handleQuery"
+            />
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysLoginLog:remove']"
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-            >删除
-            </el-button>
-          </el-col>
-        </el-row>
+        <div class="toolbar mb8">
+          <el-button v-permisaction="['admin:sysLoginLog:remove']" type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+        </div>
 
-        <el-table v-loading="loading" :data="sysloginlogList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="sysloginlogList" border stripe @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column
             label="用户名"
@@ -73,11 +66,12 @@
             label="状态"
             align="center"
             prop="status"
-            :formatter="statusFormat"
             width="100"
           >
-            <template slot-scope="scope">
-              {{ statusFormat(scope.row) }}
+            <template #default="scope">
+              <el-tag :type="scope.row.status === '2' || scope.row.status === 2 ? 'success' : 'danger'" size="small" disable-transitions>
+                {{ statusFormat(scope.row) }}
+              </el-tag>
             </template>
           </el-table-column>
           <el-table-column
@@ -85,16 +79,16 @@
             align="center"
             prop="ipaddr"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-popover trigger="hover" placement="top">
                 <p>IP: {{ scope.row.ipaddr }}</p>
                 <p>归属地: {{ scope.row.loginLocation }}</p>
                 <p>浏览器: {{ scope.row.browser }}</p>
                 <p>系统: {{ scope.row.os }}</p>
                 <p>固件: {{ scope.row.platform }}</p>
-                <div slot="reference" class="name-wrapper">
+                <template #reference><div class="name-wrapper">
                   {{ scope.row.ipaddr }}
-                </div>
+                </div></template>
               </el-popover>
             </template>
           </el-table-column>
@@ -105,29 +99,22 @@
             prop="loginTime"
             width="180"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.loginTime) }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysLoginLog:remove']"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除
-              </el-button>
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysLoginLog:remove']" type="danger" link size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
       </el-card>
@@ -137,11 +124,15 @@
 
 <script>
 import { delSysLoginlog, getSysLoginlog, listSysLoginlog } from '@/api/admin/sys-login-log'
+import { Search, Refresh, Delete } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysLoginLogManage',
   components: {
   },
+  setup() {
+    return { Search, Refresh, Delete }
+  },
   data() {
     return {
       // 遮罩层
diff --git a/src/views/admin/sys-menu/index.vue b/src/views/admin/sys-menu/index.vue
index 03ed9900..f7e241a9 100644
--- a/src/views/admin/sys-menu/index.vue
+++ b/src/views/admin/sys-menu/index.vue
@@ -2,14 +2,14 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form :inline="true">
+        <el-form :inline="true" class="search-form">
           <el-form-item label="菜单名称">
             <el-input
               v-model="queryParams.title"
               placeholder="请输入菜单名称"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="状态">
@@ -23,14 +23,8 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button
-              v-permisaction="['admin:sysMenu:add']"
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button v-permisaction="['admin:sysMenu:add']" type="primary" size="small" :icon="Plus" @click="handleAdd">新增</el-button>
           </el-form-item>
         </el-form>
 
@@ -38,18 +32,19 @@
           v-loading="loading"
           :data="menuList"
           border
+          stripe
           row-key="menuId"
           :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
         >
           <el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="180px" />
           <el-table-column prop="icon" label="图标" align="center" width="100px">
-            <template slot-scope="scope">
+            <template #default="scope">
               <svg-icon :icon-class="scope.row.icon" />
             </template>
           </el-table-column>
           <el-table-column prop="sort" label="排序" width="60px" />
           <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-popover v-if="scope.row.sysApi.length>0" trigger="hover" placement="top">
                 <el-table
                   :data="scope.row.sysApi"
@@ -61,7 +56,7 @@
                     label="title"
                     width="260px"
                   >
-                    <template slot-scope="scope">
+                    <template #default="scope">
                       <span v-if="scope.row.type=='SYS' && scope.row.title!=''"><el-tag type="success">{{ '['+scope.row.type +'] '+ scope.row.title }}</el-tag></span>
                       <span v-if="scope.row.type!='SYS' && scope.row.title!=''"><el-tag type="">{{ '['+scope.row.type +'] '+scope.row.title }}</el-tag></span>
                       <span v-if="scope.row.title==''"><el-tag type="danger">暂无</el-tag></span>
@@ -73,7 +68,7 @@
                     label="path"
                     width="270px"
                   >
-                    <template slot-scope="scope">
+                    <template #default="scope">
                       <el-tag v-if="scope.row.action=='GET'">{{ scope.row.action }}</el-tag>
                       <el-tag v-if="scope.row.action=='POST'" type="success">{{ scope.row.action }}</el-tag>
                       <el-tag v-if="scope.row.action=='PUT'" type="warning">{{ scope.row.action }}</el-tag>
@@ -83,10 +78,10 @@
                   </el-table-column>
 
                 </el-table>
-                <div slot="reference" class="name-wrapper">
+                <template #reference><div class="name-wrapper">
                   <span v-if="scope.row.permission==''">-</span>
                   <span v-else>{{ scope.row.permission }}</span>
-                </div>
+                </div></template>
               </el-popover>
               <span v-else>
                 <span v-if="scope.row.permission==''">-</span>
@@ -95,13 +90,13 @@
             </template>
           </el-table-column>
           <el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span v-if="scope.row.menuType=='A'">{{ scope.row.path }}</span>
               <span v-else>{{ scope.row.component }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="visible" label="可见" :formatter="visibleFormat" width="80">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-tag
                 :type="scope.row.visible === '1' ? 'danger' : 'success'"
                 disable-transitions
@@ -109,33 +104,17 @@
             </template>
           </el-table-column>
           <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysMenu:edit']"
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                v-permisaction="['admin:sysMenu:add']"
-                size="mini"
-                type="text"
-                icon="el-icon-plus"
-                @click="handleAdd(scope.row)"
-              >新增</el-button>
-              <el-button
-                v-permisaction="['admin:sysMenu:remove']"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysMenu:edit']" type="primary" link size="small" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-divider direction="vertical" />
+              <el-button v-permisaction="['admin:sysMenu:add']" type="primary" link size="small" :icon="Plus" @click="handleAdd(scope.row)">新增</el-button>
+              <el-divider direction="vertical" />
+              <el-button v-permisaction="['admin:sysMenu:remove']" type="danger" link size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -143,9 +122,9 @@
         <!-- 添加或修改菜单对话框 -->
         <el-drawer
           ref="drawer"
+          v-model="open"
           :title="title"
           :before-close="cancel"
-          :visible.sync="open"
           direction="rtl"
           custom-class="demo-drawer"
           size="830px"
@@ -155,12 +134,14 @@
               <el-row>
                 <el-col :span="24">
                   <el-form-item prop="parentId">
-                    <span slot="label">
-                      上级菜单
-                      <el-tooltip content="指当前菜单停靠的菜单归属" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        上级菜单
+                        <el-tooltip content="指当前菜单停靠的菜单归属" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <treeselect
                       v-model="form.parentId"
                       :options="menuOptions"
@@ -172,35 +153,41 @@
                 </el-col>
                 <el-col :span="12">
                   <el-form-item prop="title">
-                    <span slot="label">
-                      菜单标题
-                      <el-tooltip content="菜单位置显示的说明信息" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        菜单标题
+                        <el-tooltip content="菜单位置显示的说明信息" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-input v-model="form.title" placeholder="请输入菜单标题" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item prop="sort">
-                    <span slot="label">
-                      显示排序
-                      <el-tooltip content="根据序号升序排列" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        显示排序
+                        <el-tooltip content="根据序号升序排列" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-input-number v-model="form.sort" controls-position="right" :min="0" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="24">
                   <el-form-item prop="menuType">
-                    <span slot="label">
-                      菜单类型
-                      <el-tooltip content="包含目录：以及菜单或者菜单组，菜单：具体对应某一个页面，按钮：功能才做按钮；" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        菜单类型
+                        <el-tooltip content="包含目录：以及菜单或者菜单组，菜单：具体对应某一个页面，按钮：功能才做按钮；" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-radio-group v-model="form.menuType">
                       <el-radio label="M">目录</el-radio>
                       <el-radio label="C">菜单</el-radio>
@@ -217,51 +204,60 @@
                       @show="$refs['iconSelect'].reset()"
                     >
                       <IconSelect ref="iconSelect" @selected="selected" />
-                      <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                        <svg-icon
-                          v-if="form.icon"
-                          slot="prefix"
-                          :icon-class="form.icon"
-                          class="el-input__icon"
-                          style="height: 32px;width: 16px;"
-                        />
-                        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                      </el-input>
+                      <template #reference>
+                        <el-input v-model="form.icon" placeholder="点击选择图标" readonly>
+                          <template #prefix>
+                            <svg-icon
+                              v-if="form.icon"
+                              :icon-class="form.icon"
+                              class="el-input__icon"
+                              style="height: 32px;width: 16px;"
+                            />
+                            <i v-else class="ri-search-line el-input__icon" />
+                          </template>
+                        </el-input>
+                      </template>
                     </el-popover>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" prop="menuName">
-                    <span slot="label">
-                      路由名称
-                      <el-tooltip content="需要和页面name保持一致，对应页面即可选择缓存" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        路由名称
+                        <el-tooltip content="需要和页面name保持一致，对应页面即可选择缓存" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-input v-model="form.menuName" placeholder="请输入路由名称" />
                   </el-form-item>
                 </el-col>
 
                 <el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
                   <el-form-item prop="component">
-                    <span slot="label">
-                      组件路径
-                      <el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        组件路径
+                        <el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-input v-model="form.component" placeholder="请输入组件路径" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="12">
                   <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'">
-                    <span slot="label">
-                      是否外链
-                      <el-tooltip content="可以通过iframe打开指定地址" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        是否外链
+                        <el-tooltip content="可以通过iframe打开指定地址" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-radio-group v-model="form.isFrame">
                       <el-radio label="0">是</el-radio>
                       <el-radio label="1">否</el-radio>
@@ -271,35 +267,41 @@
 
                 <el-col :span="12">
                   <el-form-item v-if="form.menuType != 'F'" prop="path">
-                    <span slot="label">
-                      路由地址
-                      <el-tooltip content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        路由地址
+                        <el-tooltip content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-input v-model="form.path" placeholder="请输入路由地址" />
                   </el-form-item>
                 </el-col>
 
                 <el-col :span="12">
                   <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
-                    <span slot="label">
-                      权限标识
-                      <el-tooltip content="前端权限控制按钮是否显示" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        权限标识
+                        <el-tooltip content="前端权限控制按钮是否显示" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item v-if="form.menuType != 'F'">
-                    <span slot="label">
-                      菜单状态
-                      <el-tooltip content="需要显示在菜单列表的菜单设置为显示，否则设置为隐藏" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        菜单状态
+                        <el-tooltip content="需要显示在菜单列表的菜单设置为显示，否则设置为隐藏" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-radio-group v-model="form.visible">
                       <el-radio
                         v-for="dict in visibleOptions"
@@ -311,12 +313,14 @@
                 </el-col>
                 <el-col :span="24">
                   <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
-                    <span slot="label">
-                      api权限
-                      <el-tooltip content="配置在这个才做上需要使用到的接口，否则在设置用户角色时，接口将无权访问。" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
+                    <template #label>
+                      <span>
+                        api权限
+                        <el-tooltip content="配置在这个才做上需要使用到的接口，否则在设置用户角色时，接口将无权访问。" placement="top">
+                          <i class="ri-question-line" />
+                        </el-tooltip>
+                      </span>
+                    </template>
                     <el-transfer
                       v-model="form.apis"
                       style="text-align: left; display: inline-block"
@@ -335,7 +339,9 @@
                       :data="sysapiList"
                       @change="handleChange"
                     >
-                      <span slot-scope="{ option }">{{ option.title }}</span>
+                      <template #default="{ option }">
+                        <span>{{ option.title }}</span>
+                      </template>
                     </el-transfer>
                   </el-form-item>
                 </el-col>
@@ -357,13 +363,17 @@
 import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/admin/sys-menu'
 import { listSysApi } from '@/api/admin/sys-api'
 
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
 import IconSelect from '@/components/IconSelect'
+import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysMenuManage',
   components: { Treeselect, IconSelect },
+  setup() {
+    return { Search, Plus, Edit, Delete }
+  },
   data() {
     return {
       // 遮罩层
diff --git a/src/views/admin/sys-oper-log/index.vue b/src/views/admin/sys-oper-log/index.vue
index 5f2f6497..5a34b23c 100644
--- a/src/views/admin/sys-oper-log/index.vue
+++ b/src/views/admin/sys-oper-log/index.vue
@@ -2,14 +2,13 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
           <el-form-item label="状态" prop="status">
             <el-select
               v-model="queryParams.status"
               placeholder="操作状态"
               clearable
               size="small"
-              style="width: 160px"
             >
               <el-option
                 v-for="dict in statusOptions"
@@ -33,41 +32,24 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysOperLog:remove']"
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysOperLog:export']"
-              type="warning"
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-            >导出</el-button>
-          </el-col>
-        </el-row>
+        <div class="toolbar mb8">
+          <el-button v-permisaction="['admin:sysOperLog:remove']" type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+          <el-button v-permisaction="['admin:sysOperLog:export']" size="small" :icon="Download" @click="handleExport">导出</el-button>
+        </div>
 
-        <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="list" border stripe @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="编号" width="70" prop="id" />
           <el-table-column
             label="Request info"
             prop="operUrl"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-popover trigger="hover" placement="top">
 
                 <p>Request:
@@ -80,13 +62,13 @@
                 <p>Host: {{ scope.row.operIp }}</p>
                 <p>Location: {{ scope.row.operLocation }}</p>
                 <p>耗时: {{ scope.row.latencyTime }}</p>
-                <div slot="reference" class="name-wrapper">
+                <template #reference><div class="name-wrapper">
                   <el-tag v-if="scope.row.requestMethod=='GET'">{{ scope.row.requestMethod }}</el-tag>
                   <el-tag v-if="scope.row.requestMethod=='POST'" type="success">{{ scope.row.requestMethod }}</el-tag>
                   <el-tag v-if="scope.row.requestMethod=='PUT'" type="warning">{{ scope.row.requestMethod }}</el-tag>
                   <el-tag v-if="scope.row.requestMethod=='DELETE'" type="danger">{{ scope.row.requestMethod }}</el-tag>
                   {{ scope.row.operUrl }}
-                </div>
+                </div></template>
               </el-popover>
             </template>
           </el-table-column>
@@ -102,13 +84,13 @@
             width="80"
             :show-overflow-tooltip="true"
           >
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-tag v-if="scope.row.status=='2'" type="success">{{ statusFormat(scope.row,scope.row.status) }}</el-tag>
               <el-tag v-if="scope.row.status=='1'" type="danger">{{ statusFormat(scope.row,scope.row.status) }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column label="操作日期" prop="operTime" width="160">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.operTime) }}</span>
             </template>
           </el-table-column>
@@ -117,28 +99,22 @@
             width="80"
             class-name="small-padding fixed-width"
           >
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysOperLog:query']"
-                size="mini"
-                type="text"
-                icon="el-icon-view"
-                @click="handleView(scope.row,scope.index)"
-              >详细</el-button>
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysOperLog:query']" type="primary" link size="small" @click="handleView(scope.row,scope.index)">详细</el-button>
             </template>
           </el-table-column>
         </el-table>
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
 
         <!-- 操作日志详细 -->
-        <el-dialog title="操作日志详细" :visible.sync="open" width="700px" :close-on-click-modal="false">
+        <el-dialog v-model="open" title="操作日志详细" width="700px" :close-on-click-modal="false">
           <el-form ref="form" :model="form" label-width="100px" size="mini">
             <el-row>
               <el-col :span="24">
@@ -176,9 +152,9 @@
               </el-col>
             </el-row>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <template #footer><div class="dialog-footer">
             <el-button @click="open = false">关 闭</el-button>
-          </div>
+          </div></template>
         </el-dialog>
       </el-card>
     </template>
@@ -188,9 +164,13 @@
 <script>
 import { listSysOperlog, delSysOperlog, cleanOperlog } from '@/api/admin/sys-opera-log'
 import { formatJson } from '@/utils'
+import { Search, Refresh, Delete, Download } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysOperLogManage',
+  setup() {
+    return { Search, Refresh, Delete, Download }
+  },
   data() {
     return {
       // 遮罩层
diff --git a/src/views/admin/sys-post/index.vue b/src/views/admin/sys-post/index.vue
index 2bd779b0..37f0b752 100644
--- a/src/views/admin/sys-post/index.vue
+++ b/src/views/admin/sys-post/index.vue
@@ -2,14 +2,14 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
           <el-form-item label="岗位编码" prop="postCode">
             <el-input
               v-model="queryParams.postCode"
               placeholder="请输入岗位编码"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="岗位名称" prop="postName">
@@ -18,7 +18,7 @@
               placeholder="请输入岗位名称"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="状态" prop="status">
@@ -32,60 +32,26 @@
             </el-select>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysPost:add']"
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysPost:edit']"
-              type="success"
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysPost:remove']"
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysPost:export']"
-              type="warning"
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-            >导出</el-button>
-          </el-col>
-        </el-row>
+        <div class="toolbar mb8">
+          <el-button v-permisaction="['admin:sysPost:add']" type="primary" size="small" :icon="Plus" @click="handleAdd">新增</el-button>
+          <el-button v-permisaction="['admin:sysPost:edit']" type="primary" size="small" :icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+          <el-button v-permisaction="['admin:sysPost:remove']" type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+          <el-button v-permisaction="['admin:sysPost:export']" size="small" :icon="Download" @click="handleExport">导出</el-button>
+        </div>
 
-        <el-table v-loading="loading" :data="postList" border @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="postList" border stripe @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
           <el-table-column label="岗位编号" width="80" align="center" prop="postId" />
           <el-table-column label="岗位编码" align="center" prop="postCode" />
           <el-table-column label="岗位名称" align="center" prop="postName" />
           <el-table-column label="岗位排序" align="center" prop="sort" />
           <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-tag
                 :type="scope.row.status === 1 ? 'danger' : 'success'"
                 disable-transitions
@@ -93,40 +59,29 @@
             </template>
           </el-table-column>
           <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysPost:edit']"
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                v-permisaction="['admin:sysPost:remove']"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysPost:edit']" type="primary" link size="small" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-divider direction="vertical" />
+              <el-button v-permisaction="['admin:sysPost:remove']" type="danger" link size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
 
         <!-- 添加或修改岗位对话框 -->
-        <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
+        <el-dialog v-model="open" :title="title" width="500px" :close-on-click-modal="false">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="岗位名称" prop="postName">
               <el-input v-model="form.postName" placeholder="请输入岗位名称" />
@@ -150,10 +105,10 @@
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <template #footer><div class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
             <el-button @click="cancel">取 消</el-button>
-          </div>
+          </div></template>
         </el-dialog>
       </el-card>
     </template>
@@ -163,9 +118,13 @@
 <script>
 import { listPost, getPost, delPost, addPost, updatePost } from '@/api/admin/sys-post'
 import { formatJson } from '@/utils'
+import { Search, Refresh, Plus, Edit, Delete, Download } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysPostManage',
+  setup() {
+    return { Search, Refresh, Plus, Edit, Delete, Download }
+  },
   data() {
     return {
       // 遮罩层
diff --git a/src/views/admin/sys-role/index.vue b/src/views/admin/sys-role/index.vue
index c9aa4ca0..83dc8cdf 100644
--- a/src/views/admin/sys-role/index.vue
+++ b/src/views/admin/sys-role/index.vue
@@ -2,15 +2,14 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
           <el-form-item label="名称" prop="roleName">
             <el-input
               v-model="queryParams.roleName"
               placeholder="请输入角色名称"
               clearable
               size="small"
-              style="width: 160px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="权限字符" prop="roleKey">
@@ -19,8 +18,7 @@
               placeholder="请输入权限字符"
               clearable
               size="small"
-              style="width: 160px"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="状态" prop="status">
@@ -29,7 +27,6 @@
               placeholder="角色状态"
               clearable
               size="small"
-              style="width: 160px"
             >
               <el-option
                 v-for="dict in statusOptions"
@@ -39,69 +36,24 @@
               />
             </el-select>
           </el-form-item>
-          <!-- <el-form-item label="创建时间">
-            <el-date-picker
-              v-model="dateRange"
-              size="small"
-              style="width: 240px"
-              value-format="yyyy-MM-dd"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            />
-          </el-form-item> -->
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysRole:add']"
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysRole:update']"
-              type="success"
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleUpdate"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysRole:remove']"
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-            >删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-              v-permisaction="['admin:sysRole:export']"
-              type="warning"
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-            >导出</el-button>
-          </el-col>
-        </el-row>
+        <div class="toolbar mb8">
+          <el-button v-permisaction="['admin:sysRole:add']" type="primary" size="small" :icon="Plus" @click="handleAdd">新增</el-button>
+          <el-button v-permisaction="['admin:sysRole:update']" type="primary" size="small" :icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+          <el-button v-permisaction="['admin:sysRole:remove']" type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+          <el-button v-permisaction="['admin:sysRole:export']" size="small" :icon="Download" @click="handleExport">导出</el-button>
+        </div>
 
         <el-table
           v-loading="loading"
           :data="roleList"
           border
+          stripe
           @selection-change="handleSelectionChange"
           @sort-change="handleSortChang"
         >
@@ -111,7 +63,7 @@
           <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
           <el-table-column label="排序" sortable="custom" prop="roleSort" width="80" />
           <el-table-column label="状态" sortable="custom" width="80">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-switch
                 v-model="scope.row.status"
                 active-value="2"
@@ -121,7 +73,7 @@
             </template>
           </el-table-column>
           <el-table-column label="创建时间" sortable="custom" prop="createdAt" width="160">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
@@ -131,43 +83,28 @@
             class-name="small-padding fixed-width"
             width="220"
           >
-            <template slot-scope="scope">
-              <el-button
-                v-permisaction="['admin:sysRole:update']"
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                v-permisaction="['admin:sysRole:update']"
-                size="mini"
-                type="text"
-                icon="el-icon-circle-check"
-                @click="handleDataScope(scope.row)"
-              >数据权限</el-button>
-              <el-button
-                v-if="scope.row.roleKey!=='admin'"
-                v-permisaction="['admin:sysRole:remove']"
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
+            <template #default="scope">
+              <el-button v-permisaction="['admin:sysRole:update']" type="primary" link size="small" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+              <el-divider direction="vertical" />
+              <el-button v-permisaction="['admin:sysRole:update']" type="primary" link size="small" @click="handleDataScope(scope.row)">数据权限</el-button>
+              <template v-if="scope.row.roleKey!=='admin'">
+                <el-divider direction="vertical" />
+                <el-button v-permisaction="['admin:sysRole:remove']" type="danger" link size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
+              </template>
             </template>
           </el-table-column>
         </el-table>
 
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
 
         <!-- 添加或修改角色配置对话框 -->
-        <el-dialog v-if="open" :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false">
+        <el-dialog v-if="open" v-model="open" :title="title" width="500px" :close-on-click-modal="false">
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-form-item label="角色名称" prop="roleName">
               <el-input v-model="form.roleName" placeholder="请输入角色名称" :disabled="isEdit" />
@@ -201,14 +138,14 @@
               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <template #footer><div class="dialog-footer">
             <el-button type="primary" @click="submitForm">确 定</el-button>
             <el-button @click="cancel">取 消</el-button>
-          </div>
+          </div></template>
         </el-dialog>
 
         <!-- 分配角色数据权限对话框 -->
-        <el-dialog v-if="openDataScope" :title="title" :visible.sync="openDataScope" width="500px" :close-on-click-modal="false">
+        <el-dialog v-if="openDataScope" v-model="open" :title="title" width="500px" :close-on-click-modal="false">
           <el-form :model="form" label-width="80px">
             <el-form-item label="角色名称">
               <el-input v-model="form.roleName" :disabled="true" />
@@ -238,10 +175,10 @@
               />
             </el-form-item>
           </el-form>
-          <div slot="footer" class="dialog-footer">
+          <template #footer><div class="dialog-footer">
             <el-button type="primary" @click="submitDataScope">确 定</el-button>
             <el-button @click="cancelDataScope">取 消</el-button>
-          </div>
+          </div></template>
         </el-dialog>
       </el-card>
     </template>
@@ -253,11 +190,15 @@ import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleS
 import { roleMenuTreeselect } from '@/api/admin/sys-menu'
 import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/admin/sys-dept'
 import { formatJson } from '@/utils'
+import { Search, Refresh, Plus, Edit, Delete, Download } from '@element-plus/icons-vue'
 
 export default {
-  name: 'Role',
+  name: 'RoleManagement',
   components: {
 
+  },
+  setup() {
+    return { Search, Refresh, Plus, Edit, Delete, Download }
   },
   data() {
     return {
diff --git a/src/views/admin/sys-user/index.vue b/src/views/admin/sys-user/index.vue
index d499a228..c8473866 100644
--- a/src/views/admin/sys-user/index.vue
+++ b/src/views/admin/sys-user/index.vue
@@ -11,7 +11,7 @@
                 placeholder="请输入部门名称"
                 clearable
                 size="small"
-                prefix-icon="el-icon-search"
+
                 style="margin-bottom: 20px"
               />
             </div>
@@ -37,7 +37,7 @@
                   clearable
                   size="small"
                   style="width: 160px"
-                  @keyup.enter.native="handleQuery"
+                  @keyup.enter="handleQuery"
                 />
               </el-form-item>
               <el-form-item label="手机号码" prop="phone">
@@ -47,7 +47,7 @@
                   clearable
                   size="small"
                   style="width: 160px"
-                  @keyup.enter.native="handleQuery"
+                  @keyup.enter="handleQuery"
                 />
               </el-form-item>
               <el-form-item label="状态" prop="status">
@@ -67,8 +67,8 @@
                 </el-select>
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button size="mini" @click="resetQuery">重置</el-button>
               </el-form-item>
             </el-form>
 
@@ -77,7 +77,7 @@
                 <el-button
                   v-permisaction="['admin:sysUser:add']"
                   type="primary"
-                  icon="el-icon-plus"
+
                   size="mini"
                   @click="handleAdd"
                 >新增</el-button>
@@ -86,7 +86,7 @@
                 <el-button
                   v-permisaction="['admin:sysUser:edit']"
                   type="success"
-                  icon="el-icon-edit"
+
                   size="mini"
                   :disabled="single"
                   @click="handleUpdate"
@@ -96,7 +96,7 @@
                 <el-button
                   v-permisaction="['admin:sysUser:remove']"
                   type="danger"
-                  icon="el-icon-delete"
+
                   size="mini"
                   :disabled="multiple"
                   @click="handleDelete"
@@ -118,7 +118,7 @@
               <el-table-column label="部门" prop="dept.deptName" :show-overflow-tooltip="true" />
               <el-table-column label="手机号" prop="phone" width="108" />
               <el-table-column label="状态" width="80" sortable="custom">
-                <template slot-scope="scope">
+                <template #default="scope">
                   <el-switch
                     v-model="scope.row.status"
                     active-value="2"
@@ -133,7 +133,7 @@
                 sortable="custom"
                 width="155"
               >
-                <template slot-scope="scope">
+                <template #default="scope">
                   <span>{{ parseTime(scope.row.createdAt) }}</span>
                 </template>
               </el-table-column>
@@ -144,12 +144,12 @@
                 fix="right"
                 class-name="small-padding fixed-width"
               >
-                <template slot-scope="scope">
+                <template #default="scope">
                   <el-button
                     v-permisaction="['admin:sysUser:edit']"
                     size="mini"
                     type="text"
-                    icon="el-icon-edit"
+
                     @click="handleUpdate(scope.row)"
                   >修改</el-button>
                   <el-button
@@ -157,14 +157,14 @@
                     v-permisaction="['admin:sysUser:remove']"
                     size="mini"
                     type="text"
-                    icon="el-icon-delete"
+
                     @click="handleDelete(scope.row)"
                   >删除</el-button>
                   <el-button
                     v-permisaction="['admin:sysUser:resetPassword']"
                     size="mini"
                     type="text"
-                    icon="el-icon-key"
+
                     @click="handleResetPwd(scope.row)"
                   >重置</el-button>
                 </template>
@@ -173,16 +173,16 @@
 
             <pagination
               v-show="total>0"
+              v-model:current-page="queryParams.pageIndex"
+              v-model:page-size="queryParams.pageSize"
               :total="total"
-              :page.sync="queryParams.pageIndex"
-              :limit.sync="queryParams.pageSize"
               @pagination="getList"
             />
           </el-col>
         </el-row>
       </el-card>
       <!-- 添加或修改参数配置对话框 -->
-      <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false">
+      <el-dialog v-model="open" :title="title" width="600px" :close-on-click-modal="false">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-row>
             <el-col :span="12">
@@ -276,13 +276,13 @@
             </el-col>
           </el-row>
         </el-form>
-        <div slot="footer" class="dialog-footer">
+        <template #footer><div class="dialog-footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
-        </div>
+        </div></template>
       </el-dialog>
       <!-- 用户导入对话框 -->
-      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" :close-on-click-modal="false">
+      <el-dialog v-model="open" :title="upload.title" width="400px" :close-on-click-modal="false">
         <el-upload
           ref="upload"
           :limit="1"
@@ -295,21 +295,23 @@
           :auto-upload="false"
           drag
         >
-          <i class="el-icon-upload" />
+          <i class="ri-upload-line" />
           <div class="el-upload__text">
             将文件拖到此处，或
             <em>点击上传</em>
           </div>
-          <div slot="tip" class="el-upload__tip">
-            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-            <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
-          </div>
-          <div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+          <template #tip>
+            <div class="el-upload__tip">
+              <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
+              <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
+            </div>
+            <div class="el-upload__tip" style="color:red">提示：仅允许导入"xls"或"xlsx"格式文件！</div>
+          </template>
         </el-upload>
-        <div slot="footer" class="dialog-footer">
+        <template #footer><div class="dialog-footer">
           <el-button type="primary" @click="submitFileForm">确 定</el-button>
           <el-button @click="upload.open = false">取 消</el-button>
-        </div>
+        </div></template>
       </el-dialog>
     </template>
   </BasicLayout>
@@ -323,8 +325,8 @@ import { listPost } from '@/api/admin/sys-post'
 import { listRole } from '@/api/admin/sys-role'
 import { treeselect } from '@/api/admin/sys-dept'
 
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
 
 export default {
   name: 'SysUserManage',
diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue
index be0af34f..ff4317a1 100644
--- a/src/views/dashboard/admin/components/BarChart.vue
+++ b/src/views/dashboard/admin/components/BarChart.vue
@@ -1,100 +1,39 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{height, width}" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 6000
+import * as echarts from 'echarts'
 
 export default {
-  mixins: [resize],
+  name: 'BarChart',
   props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
+    className: { type: String, default: 'chart' },
+    width: { type: String, default: '100%' },
+    height: { type: String, default: '300px' }
   },
   data() {
-    return {
-      chart: null
-    }
+    return { chart: null }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
+    this.$nextTick(() => { this.initChart() })
   },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
+  beforeUnmount() {
+    if (this.chart) { this.chart.dispose(); this.chart = null }
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
+      this.chart = echarts.init(this.$refs.chartRef)
       this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [{
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
-          }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
-        series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }},
+        grid: { top: 10, left: '2%', right: '2%', bottom: '3%', containLabel: true },
+        xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { alignWithLabel: true }}],
+        yAxis: [{ type: 'value', axisTick: { show: false }}],
+        series: [
+          { name: 'pageA', type: 'bar', stack: 'vistors', barWidth: '60%', data: [79, 52, 200, 334, 390, 330, 220] },
+          { name: 'pageB', type: 'bar', stack: 'vistors', barWidth: '60%', data: [80, 52, 200, 334, 390, 330, 220] },
+          { name: 'pageC', type: 'bar', stack: 'vistors', barWidth: '60%', data: [30, 52, 200, 334, 390, 330, 220] }
+        ]
       })
     }
   }
diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue
index e654168d..d705e7ef 100644
--- a/src/views/dashboard/admin/components/LineChart.vue
+++ b/src/views/dashboard/admin/components/LineChart.vue
@@ -1,64 +1,34 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{height, width}" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import * as echarts from 'echarts'
 
 export default {
-  mixins: [resize],
+  name: 'LineChart',
   props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '350px'
-    },
-    autoResize: {
-      type: Boolean,
-      default: true
-    },
-    chartData: {
-      type: Object,
-      required: true
-    }
+    className: { type: String, default: 'chart' },
+    width: { type: String, default: '100%' },
+    height: { type: String, default: '350px' },
+    autoResize: { type: Boolean, default: true },
+    chartData: { type: Object, required: true }
   },
   data() {
-    return {
-      chart: null
-    }
+    return { chart: null }
   },
   watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      }
-    }
+    chartData: { deep: true, handler(val) { this.setOptions(val) } }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
+    this.$nextTick(() => { this.initChart() })
   },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
+  beforeUnmount() {
+    if (this.chart) { this.chart.dispose(); this.chart = null }
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$refs.chartRef)
       this.setOptions(this.chartData)
     },
     setOptions({ expectedData, actualData } = {}) {
@@ -66,68 +36,25 @@ export default {
         xAxis: {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           boundaryGap: false,
-          axisTick: {
-            show: false
-          }
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true
+          axisTick: { show: false }
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross'
+        grid: { left: 10, right: 10, bottom: 20, top: 30, containLabel: true },
+        tooltip: { trigger: 'axis', axisPointer: { type: 'cross' }, padding: [5, 10] },
+        yAxis: { axisTick: { show: false }},
+        legend: { data: ['expected', 'actual'] },
+        series: [
+          {
+            name: 'expected',
+            itemStyle: { color: '#FF005A', lineStyle: { color: '#FF005A', width: 2 }},
+            smooth: true, type: 'line', data: expectedData,
+            animationDuration: 2800, animationEasing: 'cubicInOut'
           },
-          padding: [5, 10]
-        },
-        yAxis: {
-          axisTick: {
-            show: false
+          {
+            name: 'actual', smooth: true, type: 'line',
+            itemStyle: { color: '#3888fa', lineStyle: { color: '#3888fa', width: 2 }, areaStyle: { color: '#f3f8ff' }},
+            data: actualData, animationDuration: 2800, animationEasing: 'quadraticOut'
           }
-        },
-        legend: {
-          data: ['expected', 'actual']
-        },
-        series: [{
-          name: 'expected', itemStyle: {
-            normal: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2
-              }
-            }
-          },
-          smooth: true,
-          type: 'line',
-          data: expectedData,
-          animationDuration: 2800,
-          animationEasing: 'cubicInOut'
-        },
-        {
-          name: 'actual',
-          smooth: true,
-          type: 'line',
-          itemStyle: {
-            normal: {
-              color: '#3888fa',
-              lineStyle: {
-                color: '#3888fa',
-                width: 2
-              },
-              areaStyle: {
-                color: '#f3f8ff'
-              }
-            }
-          },
-          data: actualData,
-          animationDuration: 2800,
-          animationEasing: 'quadraticOut'
-        }]
+        ]
       })
     }
   }
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index b5b91a71..e6cd0645 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -59,6 +59,8 @@
 import CountTo from 'vue-count-to'
 
 export default {
+  name: 'PanelGroupComponent',
+  emits: ['handleSetLineChartData'],
   components: {
     CountTo
   },
diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue
index 4d2ef32a..5226d488 100644
--- a/src/views/dashboard/admin/components/PieChart.vue
+++ b/src/views/dashboard/admin/components/PieChart.vue
@@ -1,77 +1,48 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{height, width}" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
+import * as echarts from 'echarts'
 
 export default {
-  mixins: [resize],
+  name: 'PieChart',
   props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
+    className: { type: String, default: 'chart' },
+    width: { type: String, default: '100%' },
+    height: { type: String, default: '300px' }
   },
   data() {
-    return {
-      chart: null
-    }
+    return { chart: null }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
+    this.$nextTick(() => { this.initChart() })
   },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
+  beforeUnmount() {
+    if (this.chart) { this.chart.dispose(); this.chart = null }
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
+      this.chart = echarts.init(this.$refs.chartRef)
       this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
-        },
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
+        tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
+        legend: { left: 'center', bottom: '10', data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'] },
+        series: [{
+          name: 'WEEKLY WRITE ARTICLES',
+          type: 'pie',
+          roseType: 'radius',
+          radius: [15, 95],
+          center: ['50%', '38%'],
+          data: [
+            { value: 320, name: 'Industries' },
+            { value: 240, name: 'Technology' },
+            { value: 149, name: 'Forex' },
+            { value: 100, name: 'Gold' },
+            { value: 59, name: 'Forecasts' }
+          ],
+          animationEasing: 'cubicInOut',
+          animationDuration: 2600
+        }]
       })
     }
   }
diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue
index 6823af31..903b8856 100644
--- a/src/views/dashboard/admin/components/RaddarChart.vue
+++ b/src/views/dashboard/admin/components/RaddarChart.vue
@@ -1,113 +1,48 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{height, width}" />
 </template>
 
 <script>
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from './mixins/resize'
-
-const animationDuration = 3000
+import * as echarts from 'echarts'
 
 export default {
-  mixins: [resize],
+  name: 'RaddarChart',
   props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
+    className: { type: String, default: 'chart' },
+    width: { type: String, default: '100%' },
+    height: { type: String, default: '300px' }
   },
   data() {
-    return {
-      chart: null
-    }
+    return { chart: null }
   },
   mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
+    this.$nextTick(() => { this.initChart() })
   },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
+  beforeUnmount() {
+    if (this.chart) { this.chart.dispose(); this.chart = null }
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
-
+      this.chart = echarts.init(this.$refs.chartRef)
       this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
+        legend: { bottom: 10, data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'] },
         radar: {
-          radius: '66%',
-          center: ['50%', '42%'],
-          splitNumber: 8,
-          splitArea: {
-            areaStyle: {
-              color: 'rgba(127,95,132,.3)',
-              opacity: 1,
-              shadowBlur: 45,
-              shadowColor: 'rgba(0,0,0,.5)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 15
-            }
-          },
           indicator: [
-            { name: 'Sales', max: 10000 },
-            { name: 'Administration', max: 20000 },
-            { name: 'Information Techology', max: 20000 },
-            { name: 'Customer Support', max: 20000 },
-            { name: 'Development', max: 20000 },
-            { name: 'Marketing', max: 20000 }
+            { name: 'Sales', max: 6500 },
+            { name: 'Administration', max: 16000 },
+            { name: 'Information Technology', max: 30000 },
+            { name: 'Customer Support', max: 38000 },
+            { name: 'Development', max: 52000 },
+            { name: 'Marketing', max: 25000 }
           ]
         },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
-        },
         series: [{
           type: 'radar',
-          symbolSize: 0,
-          areaStyle: {
-            normal: {
-              shadowBlur: 13,
-              shadowColor: 'rgba(0,0,0,.2)',
-              shadowOffsetX: 0,
-              shadowOffsetY: 10,
-              opacity: 1
-            }
-          },
           data: [
-            {
-              value: [5000, 7000, 12000, 11000, 15000, 14000],
-              name: 'Allocated Budget'
-            },
-            {
-              value: [4000, 9000, 15000, 15000, 13000, 11000],
-              name: 'Expected Spending'
-            },
-            {
-              value: [5500, 11000, 12000, 15000, 12000, 12000],
-              name: 'Actual Spending'
-            }
-          ],
-          animationDuration: animationDuration
+            { value: [5000, 7000, 12000, 11000, 15000, 14000], name: 'Allocated Budget' },
+            { value: [4000, 9000, 15000, 15000, 13000, 11000], name: 'Expected Spending' },
+            { value: [5500, 11000, 12000, 15000, 12000, 12000], name: 'Actual Spending' }
+          ]
         }]
       })
     }
diff --git a/src/views/dashboard/admin/components/TodoList/Todo.vue b/src/views/dashboard/admin/components/TodoList/Todo.vue
index c4b3cae2..41ac00d9 100644
--- a/src/views/dashboard/admin/components/TodoList/Todo.vue
+++ b/src/views/dashboard/admin/components/TodoList/Todo.vue
@@ -24,7 +24,8 @@
 
 <script>
 export default {
-  name: 'Todo',
+  name: 'TodoItem',
+  emits: ['deleteTodo', 'editTodo', 'toggleTodo'],
   directives: {
     focus(el, { value }, { context }) {
       if (value) {
diff --git a/src/views/dashboard/admin/components/TodoList/index.vue b/src/views/dashboard/admin/components/TodoList/index.vue
index 8000d414..d817974c 100644
--- a/src/views/dashboard/admin/components/TodoList/index.vue
+++ b/src/views/dashboard/admin/components/TodoList/index.vue
@@ -13,9 +13,9 @@
           v-for="(todo, index) in filteredTodos"
           :key="index"
           :todo="todo"
-          @toggleTodo="toggleTodo"
-          @editTodo="editTodo"
-          @deleteTodo="deleteTodo"
+          @toggle-todo="toggleTodo"
+          @edit-todo="editTodo"
+          @delete-todo="deleteTodo"
         />
       </ul>
     </section>
@@ -23,11 +23,11 @@
     <footer v-show="todos.length" class="footer">
       <span class="todo-count">
         <strong>{{ remaining }}</strong>
-        {{ remaining | pluralize('item') }} left
+        {{ pluralizeFilter(remaining, 'item') }} left
       </span>
       <ul class="filters">
         <li v-for="(val, key) in filters" :key="key">
-          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
+          <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ capitalizeFilter(key) }}</a>
         </li>
       </ul>
       <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
@@ -58,10 +58,6 @@ const defalutList = [
 ]
 export default {
   components: { Todo },
-  filters: {
-    pluralize: (n, w) => n === 1 ? w : w + 's',
-    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
-  },
   data() {
     return {
       visibility: 'all',
@@ -82,6 +78,12 @@ export default {
     }
   },
   methods: {
+    pluralizeFilter(n, w) {
+      return n === 1 ? w : w + 's'
+    },
+    capitalizeFilter(s) {
+      return s.charAt(0).toUpperCase() + s.slice(1)
+    },
     setLocalStorage() {
       window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
     },
@@ -123,5 +125,5 @@ export default {
 </script>
 
 <style lang="scss">
-  @import './index.scss';
+  @use './index.scss' as *;
 </style>
diff --git a/src/views/dashboard/admin/components/mixins/resize.js b/src/views/dashboard/admin/components/mixins/resize.js
index 234953b1..f7e8b055 100644
--- a/src/views/dashboard/admin/components/mixins/resize.js
+++ b/src/views/dashboard/admin/components/mixins/resize.js
@@ -16,7 +16,7 @@ export default {
     this.$_initResizeEvent()
     this.$_initSidebarResizeEvent()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$_destroyResizeEvent()
     this.$_destroySidebarResizeEvent()
   },
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 622afbd2..8c1d4831 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -2,64 +2,79 @@
   <div class="dashboard-editor-container">
     <el-row :gutter="12">
       <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
-        <chart-card title="总销售额" total="￥126,560">
-          <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
-            <i class="el-icon-warning-outline" />
-          </el-tooltip>
+        <chart-card title="总销售额" total="￥126,560" color="#1677ff">
+          <template #icon><i class="ri-money-dollar-circle-line" /></template>
+          <template #action>
+            <el-tooltip class="item" effect="dark" content="指标说明" placement="top-start">
+              <i class="ri-error-warning-line" />
+            </el-tooltip>
+          </template>
           <div>
             <trend flag="top" style="margin-right: 16px;" rate="12">
-              <span slot="term">周同比</span>
+              <template #term><span>周同比</span></template>
             </trend>
             <trend flag="bottom" rate="11">
-              <span slot="term">日同比</span>
+              <template #term><span>日同比</span></template>
             </trend>
           </div>
-          <template slot="footer">日均销售额<span>￥ 234.56</span></template>
+          <template #footer>日均销售额<span>￥ 234.56</span></template>
         </chart-card>
       </el-col>
+
       <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
-        <chart-card title="访问量" :total="8846">
-          <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
-            <i class="el-icon-warning-outline" />
-          </el-tooltip>
+        <chart-card title="访问量" :total="8846" color="#52c41a">
+          <template #icon><i class="ri-group-line" /></template>
+          <template #action>
+            <el-tooltip class="item" effect="dark" content="指标说明" placement="top-start">
+              <i class="ri-error-warning-line" />
+            </el-tooltip>
+          </template>
           <div>
             <mini-area />
           </div>
-          <template slot="footer">日访问量<span> {{ '1234' }}</span></template>
+          <template #footer>日访问量<span> {{ '1234' }}</span></template>
         </chart-card>
       </el-col>
+
       <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
-        <chart-card title="支付笔数" :total="6560">
-          <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
-            <i class="el-icon-warning-outline" />
-          </el-tooltip>
+        <chart-card title="支付笔数" :total="6560" color="#fa8c16">
+          <template #icon><i class="ri-bank-card-line" /></template>
+          <template #action>
+            <el-tooltip class="item" effect="dark" content="指标说明" placement="top-start">
+              <i class="ri-error-warning-line" />
+            </el-tooltip>
+          </template>
           <div>
             <mini-bar />
           </div>
-          <template slot="footer">转化率 <span>60%</span></template>
+          <template #footer>转化率 <span>60%</span></template>
         </chart-card>
       </el-col>
+
       <el-col :sm="24" :xs="24" :md="6" :xl="6" :lg="6" :style="{ marginBottom: '12px' }">
-        <chart-card title="运营活动效果" total="78%">
-          <el-tooltip slot="action" class="item" effect="dark" content="指标说明" placement="top-start">
-            <i class="el-icon-warning-outline" />
-          </el-tooltip>
+        <chart-card title="运营活动效果" total="78%" color="#722ed1">
+          <template #icon><i class="ri-bar-chart-box-line" /></template>
+          <template #action>
+            <el-tooltip class="item" effect="dark" content="指标说明" placement="top-start">
+              <i class="ri-error-warning-line" />
+            </el-tooltip>
+          </template>
           <div>
-            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" height="8px" />
+            <mini-progress :target="80" :percentage="78" height="8px" />
           </div>
-          <template slot="footer">
+          <template #footer>
             <trend flag="top" style="margin-right: 16px;" rate="12">
-              <span slot="term">同周比</span>
+              <template #term><span>同周比</span></template>
             </trend>
             <trend flag="bottom" rate="80">
-              <span slot="term">日环比</span>
+              <template #term><span>日环比</span></template>
             </trend>
           </template>
         </chart-card>
       </el-col>
     </el-row>
 
-    <el-card :bordered="false" :body-style="{padding: '0'}">
+    <el-card :bordered="false" :body-style="{ padding: '0' }">
       <div class="salesCard">
         <el-tabs>
           <el-tab-pane label="销售额">
@@ -85,7 +100,6 @@
         </el-tabs>
       </div>
     </el-card>
-
   </div>
 </template>
 
@@ -101,43 +115,20 @@ import Bar from '@/components/Bar.vue'
 const barData = []
 const barData2 = []
 for (let i = 0; i < 12; i += 1) {
-  barData.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200
-  })
-  barData2.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200
-  })
+  barData.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 200 })
+  barData2.push({ x: `${i + 1}月`, y: Math.floor(Math.random() * 1000) + 200 })
 }
 
 const rankList = []
 for (let i = 0; i < 7; i++) {
-  rankList.push({
-    name: '白鹭岛 ' + (i + 1) + ' 号店',
-    total: 1234.56 - i * 100
-  })
+  rankList.push({ name: '白鹭岛 ' + (i + 1) + ' 号店', total: 1234.56 - i * 100 })
 }
 
 export default {
   name: 'DashboardAdmin',
-  components: {
-    ChartCard,
-    Trend,
-    MiniArea,
-    MiniBar,
-    MiniProgress,
-    RankList,
-    Bar
-  },
+  components: { ChartCard, Trend, MiniArea, MiniBar, MiniProgress, RankList, Bar },
   data() {
-    return {
-      barData,
-      barData2,
-      rankList
-    }
-  },
-  methods: {
+    return { barData, barData2, rankList }
   }
 }
 </script>
@@ -145,30 +136,17 @@ export default {
 <style lang="scss" scoped>
 .dashboard-editor-container {
   padding: 12px;
-  background-color: rgb(240, 242, 245);
+  background-color: #f0f2f5;
   position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
 }
 
-::v-deep .el-tabs__item{
-   padding-left: 16px!important;
-   height: 50px;
-   line-height: 50px;
+:deep(.el-tabs__item) {
+  padding-left: 16px !important;
+  height: 50px;
+  line-height: 50px;
 }
 
-@media (max-width:1024px) {
+@media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;
   }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3592e880..eb081277 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -10,7 +10,7 @@ import adminDashboard from './admin'
 import editorDashboard from './editor'
 
 export default {
-  name: 'Dashboard',
+  name: 'DashboardPage',
   components: { adminDashboard, editorDashboard },
   data() {
     return {
diff --git a/src/views/dev-tools/gen/basicInfoForm.vue b/src/views/dev-tools/gen/basicInfoForm.vue
index 4377e03f..a14ee625 100644
--- a/src/views/dev-tools/gen/basicInfoForm.vue
+++ b/src/views/dev-tools/gen/basicInfoForm.vue
@@ -1,53 +1,45 @@
 <template>
-  <el-form ref="basicInfoForm" :model="info" :rules="rules" label-width="150px">
+  <el-form ref="basicInfoForm" :model="formData" :rules="rules" label-width="150px">
     <el-row>
       <el-col :span="12">
         <el-form-item prop="tableName">
-          <span slot="label">
-            数据表名称
+          <template #label>数据表名称
             <el-tooltip content="数据库表名称，针对gorm对应的table()使用，⚠️这里必须是蛇形结构" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.tableName" placeholder="请输入表名称" />
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.tableName" placeholder="请输入表名称" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item prop="tableComment">
-          <span slot="label">
-            菜单名称
+          <template #label>菜单名称
             <el-tooltip content="同步的数据库表名称，生成配置数据时，用作菜单名称" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.tableComment" placeholder="请输入菜单名称" />
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.tableComment" placeholder="请输入菜单名称" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item prop="className">
-          <span slot="label">
-            结构体模型名称
+          <template #label>结构体模型名称
             <el-tooltip content="结构体模型名称，代码中的struct名称定义使用" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.className" placeholder="请输入" />
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.className" placeholder="请输入" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="作者名称" prop="functionAuthor">
-          <el-input v-model="info.functionAuthor" placeholder="请输入作者名称" />
+          <el-input v-model="formData.functionAuthor" placeholder="请输入作者名称" />
         </el-form-item>
       </el-col>
       <!-- <el-col :span="12">
         <el-form-item prop="isLogicalDelete">
-          <span slot="label">
-            是否逻辑删除
+          <template #label>是否逻辑删除
             <el-tooltip content="目前只支持逻辑删除" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-radio-group v-model="info.isLogicalDelete">
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-radio-group v-model="formData.isLogicalDelete">
             <el-radio label="1">是</el-radio>
             <el-radio label="0">否</el-radio>
           </el-radio-group>
@@ -55,13 +47,13 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item v-if="info.isLogicalDelete == '1'" label="逻辑删除字段" prop="logicalDeleteColumn">
-          <el-input v-model="info.logicalDeleteColumn" placeholder="请输入" />
+        <el-form-item v-if="formData.isLogicalDelete == '1'" label="逻辑删除字段" prop="logicalDeleteColumn">
+          <el-input v-model="formData.logicalDeleteColumn" placeholder="请输入" />
         </el-form-item>
       </el-col> -->
       <el-col :span="24">
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="info.remark" type="textarea" :rows="3" />
+          <el-input v-model="formData.remark" type="textarea" :rows="3" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -69,15 +61,17 @@
 </template>
 <script>
 export default {
-  name: 'BasicInfoForm',
+  name: 'BasicInfoFormComponent',
   props: {
     info: {
       type: Object,
       default: null
     }
   },
+  emits: ['update:info'],
   data() {
     return {
+      formData: { ...this.info },
       rules: {
         tableName: [
           { required: true, message: '请输入表名称', trigger: 'blur' },
@@ -96,6 +90,20 @@ export default {
         ]
       }
     }
+  },
+  watch: {
+    info: {
+      handler(val) {
+        this.formData = { ...val }
+      },
+      deep: true
+    },
+    formData: {
+      handler(val) {
+        this.$emit('update:info', val)
+      },
+      deep: true
+    }
   }
 }
 </script>
diff --git a/src/views/dev-tools/gen/editTable.vue b/src/views/dev-tools/gen/editTable.vue
index 010bb820..0f586137 100644
--- a/src/views/dev-tools/gen/editTable.vue
+++ b/src/views/dev-tools/gen/editTable.vue
@@ -20,7 +20,7 @@
             :show-overflow-tooltip="true"
           />
           <el-table-column fixed label="字段描述" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.columnComment" />
             </template>
           </el-table-column>
@@ -31,7 +31,7 @@
             :show-overflow-tooltip="true"
           />
           <el-table-column label="go类型" width="120">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.goType">
                 <el-option label="int64" value="int64" />
                 <el-option label="string" value="string" />
@@ -41,38 +41,38 @@
             </template>
           </el-table-column>
           <el-table-column label="go属性" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.goField" />
             </template>
           </el-table-column>
           <el-table-column label="json属性" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-input v-model="scope.row.jsonField" />
             </template>
           </el-table-column>
 
           <el-table-column label="编辑" width="50">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-checkbox v-model="scope.row.isInsert" true-label="1" false-label="0" />
             </template>
           </el-table-column>
           <!-- <el-table-column label="编辑" width="70" :render-header="renderHeadeUpdate" :cell-style="{'text-align':'center'}">
-            <template slot-scope="scope">
+            <template v-slot="scope">
               <el-checkbox v-model="scope.row.isEdit" true-label="1" false-label="0" />
             </template>
           </el-table-column> -->
           <el-table-column label="列表" width="70" :render-header="renderHeadeList" :cell-style="{'text-align':'center'}">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-checkbox v-model="scope.row.isList" true-label="1" false-label="0" />
             </template>
           </el-table-column>
           <el-table-column label="查询" width="70" :render-header="renderHeadeSearch" :cell-style="{'text-align':'center'}">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-checkbox v-model="scope.row.isQuery" true-label="1" false-label="0" />
             </template>
           </el-table-column>
           <el-table-column label="查询方式" width="120">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.queryType">
                 <el-option label="=" value="EQ" />
                 <el-option label="!=" value="NE" />
@@ -86,12 +86,12 @@
             </template>
           </el-table-column>
           <el-table-column label="必填" width="50">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-checkbox v-model="scope.row.isRequired" true-label="1" />
             </template>
           </el-table-column>
           <el-table-column label="显示类型" width="140">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.htmlType">
                 <el-option label="文本框" value="input" />
                 <el-option label="下拉框" value="select" />
@@ -105,7 +105,7 @@
             </template>
           </el-table-column>
           <el-table-column label="字典类型" width="160">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
                 <el-option
                   v-for="dict in dictOptions"
@@ -120,7 +120,7 @@
             </template>
           </el-table-column>
           <el-table-column label="关系表" width="160">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.fkTableName" clearable filterable placeholder="请选择" @change="handleChangeConfig(scope.row,scope.$index)">
                 <el-option
                   v-for="table in tableTree"
@@ -135,7 +135,7 @@
             </template>
           </el-table-column>
           <el-table-column label="关系表key" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.fkLabelId" clearable filterable placeholder="请选择">
                 <el-option
                   v-for="column in scope.row.fkCol"
@@ -150,7 +150,7 @@
             </template>
           </el-table-column>
           <el-table-column label="关系表value" width="150">
-            <template slot-scope="scope">
+            <template #default="scope">
               <el-select v-model="scope.row.fkLabelName" clearable filterable placeholder="请选择">
                 <el-option
                   v-for="column in scope.row.fkCol"
@@ -249,7 +249,7 @@ export default {
           [
             h('p', '是否在表单编辑时能够编辑，打√表示需要', { class: 'text-align: center; margin: 0' }),
             // 生成 i 标签 ，添加icon 设置 样式，slot 必填
-            h('i', { class: 'el-icon-question', style: 'color:#ccc,padding-top:5px', slot: 'reference' })
+            h('i', { class: 'ri-question-line', style: 'color:#ccc,padding-top:5px', slot: 'reference' })
           ]
         )
       ])
@@ -263,7 +263,7 @@ export default {
           { props: { placement: 'top-start', width: '260', trigger: 'hover' }},
           [
             h('p', '是否在列表中展示，打√表示需要展示', { class: 'text-align: center; margin: 0' }),
-            h('i', { class: 'el-icon-question', style: 'color:#ccc,padding-top:5px', slot: 'reference' })
+            h('i', { class: 'ri-question-line', style: 'color:#ccc,padding-top:5px', slot: 'reference' })
           ]
         )
       ])
@@ -276,7 +276,7 @@ export default {
           { props: { placement: 'top-start', width: '270', trigger: 'hover' }},
           [
             h('p', '是都当做搜索条件，打√表示做为搜索条件', { class: 'text-align: center; margin: 0' }),
-            h('i', { class: 'el-icon-question', style: 'color:#ccc,padding-top:5px', slot: 'reference' })
+            h('i', { class: 'ri-question-line', style: 'color:#ccc,padding-top:5px', slot: 'reference' })
           ]
         )
       ])
diff --git a/src/views/dev-tools/gen/genInfoForm.vue b/src/views/dev-tools/gen/genInfoForm.vue
index cd778185..5846eced 100644
--- a/src/views/dev-tools/gen/genInfoForm.vue
+++ b/src/views/dev-tools/gen/genInfoForm.vue
@@ -1,10 +1,10 @@
 <template>
-  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
+  <el-form ref="genInfoForm" :model="formData" :rules="rules" label-width="150px">
     <el-row>
       <el-col :span="12">
         <el-form-item prop="tplCategory">
-          <span slot="label">生成模板</span>
-          <el-select v-model="info.tplCategory">
+          <template #label>生成模板</template>
+          <el-select v-model="formData.tplCategory">
             <el-option label="关系表（增删改查）" value="crud" />
             <!-- <el-option label="关系表（增删改查）" value="mcrud" />
             <el-option label="树表（增删改查）" value="tree" /> -->
@@ -14,62 +14,52 @@
 
       <el-col :span="12">
         <el-form-item prop="packageName">
-          <span slot="label">
-            应用名
+          <template #label>应用名
             <el-tooltip content="应用名，例如：在app文件夹下将该功能发到那个应用中，默认：admin" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.packageName" />
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.packageName" />
         </el-form-item>
       </el-col>
 
       <!-- <el-col :span="12">
         <el-form-item prop="moduleFrontName">
-          <span slot="label">
-            前端文件名
+          <template #label>前端文件名
             <el-tooltip content="前端项目文件名，例如 sys-user.js " placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.moduleFrontName" />
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.moduleFrontName" />
         </el-form-item>
       </el-col> -->
 
       <el-col :span="12">
         <el-form-item prop="businessName">
-          <span slot="label">
-            业务名
+          <template #label>业务名
             <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.businessName" />
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.businessName" />
         </el-form-item>
       </el-col>
 
       <el-col :span="12">
         <el-form-item prop="functionName">
-          <span slot="label">
-            功能描述
+          <template #label>功能描述
             <el-tooltip content="同步的数据库表备注，用作类描述，例如：用户" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.functionName" />
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.functionName" />
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item prop="moduleName">
-          <span slot="label">
-            接口路径
+          <template #label>接口路径
             <el-tooltip content="接口路径，例如：api/v1/{sys-user}" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-input v-model="info.moduleName">
-            <template slot="prepend">api/{version}/</template>
-            <template slot="append">...</template>
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-input v-model="formData.moduleName">
+            <template #prepend>api/{version}/</template>
+            <template #append>...</template>
           </el-input>
         </el-form-item>
         <!-- <el-alert
@@ -81,13 +71,11 @@
       </el-col>
       <!-- <el-col :span="12">
         <el-form-item prop="isDataScope">
-          <span slot="label">
-            是否认证
+          <template #label>是否认证
             <el-tooltip content="是指是否使用用户和角色验证中间件" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.isAuth">
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-select v-model="formData.isAuth">
             <el-option label="true" value="1" />
             <el-option label="false" value="2" />
           </el-select>
@@ -95,13 +83,11 @@
       </el-col> -->
       <!-- <el-col :span="12">
         <el-form-item prop="isDataScope">
-          <span slot="label">
-            数据权限
+          <template #label>数据权限
             <el-tooltip content="暂不支持" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.isDataScope" disabled>
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-select v-model="formData.isDataScope" disabled>
             <el-option label="true" value="1" />
             <el-option label="false" value="2" />
           </el-select>
@@ -109,13 +95,11 @@
       </el-col> -->
       <!-- <el-col :span="12">
         <el-form-item prop="isActions">
-          <span slot="label">
-            是否actions
+          <template #label>是否actions
             <el-tooltip content="系统通用增删改查中间件方法" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.isActions" disabled>
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-select v-model="formData.isActions" disabled>
             <el-option label="false" value="2" />
           </el-select>
         </el-form-item>
@@ -126,13 +110,11 @@
       <h4 class="form-header">其他信息</h4>
       <el-col :span="12">
         <el-form-item>
-          <span slot="label">
-            树编码字段
+          <template #label>树编码字段
             <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeCode" placeholder="请选择">
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-select v-model="formData.treeCode" placeholder="请选择">
             <el-option
               v-for="column in info.columns"
               :key="column.columnName"
@@ -144,13 +126,11 @@
       </el-col>
       <el-col :span="12">
         <el-form-item>
-          <span slot="label">
-            树父编码字段
+          <template #label>树父编码字段
             <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeParentCode" placeholder="请选择">
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-select v-model="formData.treeParentCode" placeholder="请选择">
             <el-option
               v-for="column in info.columns"
               :key="column.columnName"
@@ -162,13 +142,11 @@
       </el-col>
       <el-col :span="12">
         <el-form-item>
-          <span slot="label">
-            树名称字段
+          <template #label>树名称字段
             <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
-              <i class="el-icon-question" />
-            </el-tooltip>
-          </span>
-          <el-select v-model="info.treeName" placeholder="请选择">
+              <i class="ri-question-line" />
+            </el-tooltip></template>
+          <el-select v-model="formData.treeName" placeholder="请选择">
             <el-option
               v-for="column in info.columns"
               :key="column.columnName"
@@ -183,15 +161,17 @@
 </template>
 <script>
 export default {
-  name: 'BasicInfoForm',
+  name: 'GenInfoFormComponent',
   props: {
     info: {
       type: Object,
       default: null
     }
   },
+  emits: ['update:info'],
   data() {
     return {
+      formData: { ...this.info },
       rules: {
         tplCategory: [
           { required: true, message: '请选择生成模板', trigger: 'blur' }
@@ -214,6 +194,20 @@ export default {
       }
     }
   },
+  watch: {
+    info: {
+      handler(val) {
+        this.formData = { ...val }
+      },
+      deep: true
+    },
+    formData: {
+      handler(val) {
+        this.$emit('update:info', val)
+      },
+      deep: true
+    }
+  },
   created() {}
 }
 </script>
diff --git a/src/views/dev-tools/gen/importTable.vue b/src/views/dev-tools/gen/importTable.vue
index e2ecaf1c..ce528431 100644
--- a/src/views/dev-tools/gen/importTable.vue
+++ b/src/views/dev-tools/gen/importTable.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 导入表 -->
-  <el-dialog title="导入表" :visible.sync="visible" width="800px" top="5vh">
+  <el-dialog v-model="visible" title="导入表" width="800px" top="5vh">
     <el-form ref="queryForm" :model="queryParams" :inline="true">
       <el-form-item label="表名称" prop="tableName">
         <el-input
@@ -8,7 +8,7 @@
           placeholder="请输入表名称"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="表描述" prop="tableComment">
@@ -17,12 +17,12 @@
           placeholder="请输入表描述"
           clearable
           size="small"
-          @keyup.enter.native="handleQuery"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
     <el-row>
@@ -35,22 +35,23 @@
       </el-table>
       <pagination
         v-show="total>0"
+        v-model:current-page="queryParams.pageIndex"
+        v-model:page-size="queryParams.pageSize"
         :total="total"
-        :page.sync="queryParams.pageIndex"
-        :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
     </el-row>
-    <div slot="footer" class="dialog-footer">
+    <template #footer><div class="dialog-footer">
       <el-button type="primary" :loading="loading" @click="handleImportTable">确 定</el-button>
       <el-button @click="visible = false">取 消</el-button>
-    </div>
+    </div></template>
   </el-dialog>
 </template>
 
 <script>
 import { listDbTable, importTable } from '@/api/tools/gen'
 export default {
+  emits: ['ok'],
   data() {
     return {
       loading: false,
diff --git a/src/views/dev-tools/gen/index.vue b/src/views/dev-tools/gen/index.vue
index 39a166da..411584cb 100644
--- a/src/views/dev-tools/gen/index.vue
+++ b/src/views/dev-tools/gen/index.vue
@@ -2,14 +2,14 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true" label-position="left">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
           <el-form-item label="表名称" prop="tableName">
             <el-input
               v-model="queryParams.tableName"
               placeholder="请输入表名称"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item label="菜单名称" prop="tableComment">
@@ -18,55 +18,21 @@
               placeholder="请输入菜单名称"
               clearable
               size="small"
-              @keyup.enter.native="handleQuery"
+              @keyup.enter="handleQuery"
             />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-          <!-- <el-button
-              type="primary"
-              icon="el-icon-download"
-              size="mini"
-              @click="handleGenTable"
-            >生成</el-button> -->
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-
-              type="info"
-              icon="el-icon-upload"
-              size="mini"
-              @click="openImportTable"
-            >导入</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-
-              type="success"
-              icon="el-icon-edit"
-              size="mini"
-              :disabled="single"
-              @click="handleEditTable"
-            >修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button
-
-              type="danger"
-              icon="el-icon-delete"
-              size="mini"
-              :disabled="multiple"
-              @click="handleDelete"
-            >删除</el-button>
-          </el-col>
-        </el-row>
+        <div class="toolbar mb8">
+          <el-button type="primary" size="small" :icon="Upload" @click="openImportTable">导入</el-button>
+          <el-button type="primary" size="small" :icon="Edit" :disabled="single" @click="handleEditTable">修改</el-button>
+          <el-button type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+        </div>
 
-        <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
+        <el-table v-loading="loading" :data="tableList" border stripe @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" />
           <el-table-column label="序号" align="center" prop="tableId" width="50px" />
           <el-table-column
@@ -91,78 +57,43 @@
             width="130"
           />
           <el-table-column label="创建时间" align="center" prop="createdAt" width="165">
-            <template slot-scope="scope">
+            <template #default="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button
-                type="text"
-                size="small"
-                icon="el-icon-edit"
-                @click="handleEditTable(scope.row)"
-              >编辑</el-button>
-              <el-button
-                type="text"
-                size="small"
-                icon="el-icon-view"
-                @click="handlePreview(scope.row)"
-              >预览</el-button>
-                <el-button
-                  slot="reference"
-                  type="text"
-                  size="small"
-                  icon="el-icon-view"
-                  @click="handleToProject(scope.row)"
-                >代码生成</el-button>
-
-                <el-button
-                  slot="reference"
-                  type="text"
-                  size="small"
-                  icon="el-icon-view"
-                  @click="handleToDB(scope.row)"
-                >生成配置</el-button>
-
-     
-                <el-button
-                  slot="reference"
-                  type="text"
-                  size="small"
-                  icon="el-icon-view"
-                   @click="handleToApiFile(scope.row)"
-                >生成迁移脚本</el-button>
-                
-                <el-button
-                  slot="reference"
-                  type="text"
-                  size="small"
-                  icon="el-icon-delete"
-                  @click="handleSingleDelete(scope.row)"
-                >删除</el-button>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="340">
+            <template #default="scope">
+              <el-button type="primary" link size="small" :icon="Edit" @click="handleEditTable(scope.row)">编辑</el-button>
+              <el-divider direction="vertical" />
+              <el-button type="primary" link size="small" @click="handlePreview(scope.row)">预览</el-button>
+              <el-divider direction="vertical" />
+              <el-button type="primary" link size="small" @click="handleToProject(scope.row)">代码生成</el-button>
+              <el-divider direction="vertical" />
+              <el-button type="primary" link size="small" @click="handleToDB(scope.row)">生成配置</el-button>
+              <el-divider direction="vertical" />
+              <el-button type="primary" link size="small" @click="handleToApiFile(scope.row)">生成迁移脚本</el-button>
+              <el-divider direction="vertical" />
+              <el-button type="danger" link size="small" :icon="Delete" @click="handleSingleDelete(scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
         <pagination
           v-show="total>0"
+          v-model:current-page="queryParams.pageIndex"
+          v-model:page-size="queryParams.pageSize"
           :total="total"
-          :page.sync="queryParams.pageIndex"
-          :limit.sync="queryParams.pageSize"
           @pagination="getList"
         />
       </el-card>
 
       <!-- 预览界面 -->
 
-      <el-dialog class="preview" :title="preview.title" :visible.sync="preview.open" :close-on-click-modal="false" fullscreen>
+      <el-dialog v-model="open" class="preview" :title="preview.title" :close-on-click-modal="false" fullscreen>
         <div class="el-dialog-container">
           <div class="tag-group">
             <!-- eslint-disable-next-line vue/valid-v-for -->
-            <el-tag v-for="(value, key) in preview.data" @click="codeChange(key)">
-              <template>
-                {{ key.substring(key.lastIndexOf('/')+1,key.indexOf('.go.template')) }}
-              </template>
+            <el-tag v-for="(value, key) in preview.data" :key="key" @click="codeChange(key)">
+              {{ key.substring(key.lastIndexOf('/')+1,key.indexOf('.go.template')) }}
             </el-tag>
           </div>
           <div id="codemirror">
@@ -193,16 +124,20 @@ import { listTable, previewTable, delTable, toDBTable, toProjectTableCheckRole,
 import importTable from './importTable'
 import { downLoadFile } from '@/utils/zipdownload'
 import { codemirror } from 'vue-codemirror'
-import 'codemirror/theme/material-palenight.css'
+import { Search, Refresh, Edit, Delete, Upload } from '@element-plus/icons-vue'
+// import 'codemirror/theme/material-palenight.css'
 
-require('codemirror/mode/javascript/javascript')
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/go/go'
-import 'codemirror/mode/vue/vue'
+// require('codemirror/mode/javascript/javascript')
+// import 'codemirror/mode/javascript/javascript'
+// import 'codemirror/mode/go/go'
+// import 'codemirror/mode/vue/vue'
 
 export default {
-  name: 'Gen',
+  name: 'CodeGen',
   components: { importTable, codemirror },
+  setup() {
+    return { Search, Refresh, Edit, Delete, Upload }
+  },
   data() {
     return {
       cmOptions: {
@@ -375,10 +310,10 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
- .el-dialog-container ::v-deep{
+<style lang="scss">
+ .el-dialog-container {
    overflow: hidden;
-   .el-scrollbar__view{
+   :deep(.el-scrollbar__view){
      height: 100%;
    }
    .pre{
@@ -388,11 +323,11 @@ export default {
         height: 100%;
       }
    }
-   .el-scrollbar__wrap::-webkit-scrollbar{
+   :deep(.el-scrollbar__wrap::-webkit-scrollbar){
      display: none;
    }
  }
- ::v-deep .el-dialog__body{
+ :deep(.el-dialog__body){
     padding: 0 20px;
     margin:0;
   }
diff --git a/src/views/dev-tools/swagger/index.vue b/src/views/dev-tools/swagger/index.vue
index fca17636..4e95e55f 100644
--- a/src/views/dev-tools/swagger/index.vue
+++ b/src/views/dev-tools/swagger/index.vue
@@ -16,7 +16,7 @@
 </template>
 <script>
 export default {
-  name: 'Swagger',
+  name: 'SwaggerDoc',
   components: {},
   data() {
     return {
diff --git a/src/views/error-page/401.vue b/src/views/error-page/401.vue
index 53d0dc35..9697aa45 100644
--- a/src/views/error-page/401.vue
+++ b/src/views/error-page/401.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="errPage-container">
-    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
+    <el-button class="pan-back-btn" @click="back">
       返回
     </el-button>
     <el-row>
@@ -28,7 +28,7 @@
         <img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
       </el-col>
     </el-row>
-    <el-dialog :visible.sync="dialogVisible" title="随便看" :close-on-click-modal="false">
+    <el-dialog v-model="dialogVisible" title="随便看" :close-on-click-modal="false">
       <img :src="ewizardClap" class="pan-img">
     </el-dialog>
   </div>
@@ -38,7 +38,7 @@
 import errGif from '@/assets/401_images/401.gif'
 
 export default {
-  name: 'Page401',
+  name: 'ErrorPage401',
   data() {
     return {
       errGif: errGif + '?' + +new Date(),
diff --git a/src/views/excel/components/AutoWidthOption.vue b/src/views/excel/components/AutoWidthOption.vue
index 9050e659..415a5f56 100644
--- a/src/views/excel/components/AutoWidthOption.vue
+++ b/src/views/excel/components/AutoWidthOption.vue
@@ -14,6 +14,8 @@
 
 <script>
 export default {
+  name: 'AutoWidthOptionComponent',
+  emits: ['input'],
   props: {
     value: {
       type: Boolean,
diff --git a/src/views/excel/components/BookTypeOption.vue b/src/views/excel/components/BookTypeOption.vue
index af9fed39..d3224d39 100644
--- a/src/views/excel/components/BookTypeOption.vue
+++ b/src/views/excel/components/BookTypeOption.vue
@@ -14,6 +14,8 @@
 
 <script>
 export default {
+  name: 'BookTypeOptionComponent',
+  emits: ['input'],
   props: {
     value: {
       type: String,
diff --git a/src/views/excel/components/FilenameOption.vue b/src/views/excel/components/FilenameOption.vue
index 75092235..f6b615ac 100644
--- a/src/views/excel/components/FilenameOption.vue
+++ b/src/views/excel/components/FilenameOption.vue
@@ -1,18 +1,22 @@
 <template>
   <div style="display:inline-block;">
     <label class="radio-label" style="padding-left:0;">Filename: </label>
-    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
+    <el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;">
+      <template #prefix><i class="ri-file-text-line" /></template>
+    </el-input>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'FilenameOptionComponent',
   props: {
     value: {
       type: String,
       default: ''
     }
   },
+  emits: ['input'],
   computed: {
     filename: {
       get() {
diff --git a/src/views/log/index.vue b/src/views/log/index.vue
index 98240aef..578c453e 100644
--- a/src/views/log/index.vue
+++ b/src/views/log/index.vue
@@ -1,3 +1,9 @@
 <template>
   <router-view />
 </template>
+
+<script>
+export default {
+  name: 'LogContainer'
+}
+</script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0a069d78..f777aa81 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,229 +1,180 @@
 <template>
-  <div class="login-container">
-    <div id="particles-js">
-      <!-- <vue-particles
-        v-if="refreshParticles"
-        color="#dedede"
-        :particle-opacity="0.7"
-        :particles-number="80"
-        shape-type="circle"
-        :particle-size="4"
-        lines-color="#dedede"
-        :lines-width="1"
-        :line-linked="true"
-        :line-opacity="0.4"
-        :lines-distance="150"
-        :move-speed="3"
-        :hover-effect="true"
-        hover-mode="grab"
-        :click-effect="true"
-        click-mode="push"
-      /> -->
-    </div>
+  <div class="login-page">
+
+    <!-- 左侧品牌区 -->
+    <div class="login-brand">
+      <!-- 几何装饰 -->
+      <div class="brand-deco brand-deco--circle1" />
+      <div class="brand-deco brand-deco--circle2" />
+      <div class="brand-deco brand-deco--circle3" />
+
+      <div class="brand-content">
+        <div class="brand-logo-wrap">
+          <img
+            v-if="sysInfo && sysInfo.sys_app_logo"
+            :src="sysInfo.sys_app_logo"
+            class="brand-logo-img"
+            alt="logo"
+          >
+          <el-icon v-else class="brand-logo-icon"><Monitor /></el-icon>
+        </div>
+        <h1 class="brand-title">{{ sysInfo && sysInfo.sys_app_name || 'Go Admin' }}</h1>
+        <p class="brand-desc">高效、安全的企业级后台管理平台</p>
+        <div class="brand-features">
+          <div class="feature-item">
+            <el-icon><Lock /></el-icon>
+            <span>安全可靠</span>
+          </div>
+          <div class="feature-item">
+            <el-icon><Monitor /></el-icon>
+            <span>实时监控</span>
+          </div>
+          <div class="feature-item">
+            <el-icon><User /></el-icon>
+            <span>权限管理</span>
+          </div>
+        </div>
+      </div>
 
-    <div class="login-weaper animated bounceInDown">
-      <div class="login-left">
-        <div class="login-time" v-text="currentTime" />
-        <img :src="sysInfo.sys_app_logo" alt="" class="img">
-        <p class="title" v-text="sysInfo.sys_app_name" />
+      <div class="brand-footer">
+        <a href="https://beian.miit.gov.cn" target="_blank" class="icp-link">沪ICP备XXXXXXXXX号-1</a>
       </div>
-      <div class="login-border">
-        <div class="login-main">
-          <div class="login-title">用户登录</div>
-          <el-form
-            ref="loginForm"
-            :model="loginForm"
-            :rules="loginRules"
-            class="login-form"
-            autocomplete="on"
-            label-position="left"
-          >
-            <el-form-item prop="username">
-              <span class="svg-container">
-                <i class="el-icon-user" />
-              </span>
-              <el-input
-                ref="username"
-                v-model="loginForm.username"
-                placeholder="用户名"
-                name="username"
-                type="text"
-                tabindex="1"
-                autocomplete="on"
-              />
-            </el-form-item>
+    </div>
 
-            <el-tooltip
-              v-model="capsTooltip"
-              content="Caps lock is On"
-              placement="right"
-              manual
+    <!-- 右侧表单区 -->
+    <div class="login-form-panel">
+      <!-- 装饰光晕 -->
+      <div class="panel-blob panel-blob--tr" />
+      <div class="panel-blob panel-blob--bl" />
+
+      <div class="form-box">
+        <div class="form-header">
+          <span class="form-badge">账号登录</span>
+          <h2 class="form-title">欢迎回来</h2>
+          <p class="form-subtitle">请输入您的账号和密码继续</p>
+        </div>
+
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="loginRules"
+          label-position="top"
+          class="login-form"
+          autocomplete="on"
+          @submit.prevent="handleLogin"
+        >
+          <el-form-item label="账号" prop="username">
+            <el-input
+              ref="username"
+              v-model="loginForm.username"
+              placeholder="请输入账号"
+              name="username"
+              type="text"
+              tabindex="1"
+              autocomplete="on"
+              size="large"
+              :prefix-icon="User"
+            />
+          </el-form-item>
+
+          <el-form-item label="密码" prop="password">
+            <el-input
+              :key="passwordType"
+              ref="password"
+              v-model="loginForm.password"
+              :type="passwordType"
+              placeholder="请输入密码"
+              name="password"
+              tabindex="2"
+              autocomplete="on"
+              size="large"
+              :prefix-icon="Lock"
+              @keyup="checkCapslock"
+              @blur="capsTooltip = false"
+              @keyup.enter="handleLogin"
             >
-              <el-form-item prop="password">
-                <span class="svg-container">
-                  <svg-icon icon-class="password" />
-                </span>
-                <el-input
-                  :key="passwordType"
-                  ref="password"
-                  v-model="loginForm.password"
-                  :type="passwordType"
-                  placeholder="密码"
-                  name="password"
-                  tabindex="2"
-                  autocomplete="on"
-                  @keyup.native="checkCapslock"
-                  @blur="capsTooltip = false"
-                  @keyup.enter.native="handleLogin"
-                />
-                <span class="show-pwd" @click="showPwd">
-                  <svg-icon
-                    :icon-class="
-                      passwordType === 'password' ? 'eye' : 'eye-open'
-                    "
-                  />
-                </span>
-              </el-form-item>
-            </el-tooltip>
-            <el-form-item prop="code" style="width: 66%; float: left">
-              <span class="svg-container">
-                <svg-icon icon-class="validCode" />
-              </span>
+              <template #suffix>
+                <el-icon class="pwd-eye" @click="showPwd">
+                  <View v-if="passwordType === 'password'" />
+                  <Hide v-else />
+                </el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="验证码" prop="code">
+            <div class="captcha-row">
               <el-input
-                ref="username"
                 v-model="loginForm.code"
-                placeholder="验证码"
-                name="username"
+                placeholder="请输入验证码"
+                name="code"
                 type="text"
                 tabindex="3"
                 maxlength="5"
                 autocomplete="off"
-                style="width: 75%"
-                @keyup.enter.native="handleLogin"
+                size="large"
+                :prefix-icon="Key"
+                @keyup.enter="handleLogin"
               />
-            </el-form-item>
-            <div
-              class="login-code"
-              style="
-                cursor: pointer;
-                width: 30%;
-                height: 48px;
-                float: right;
-                background-color: #f0f1f5;
-              "
-            >
-              <img
-                style="
-                  height: 48px;
-                  width: 100%;
-                  border: 1px solid rgba(0, 0, 0, 0.1);
-                  border-radius: 5px;
-                "
-                :src="codeUrl"
-                @click="getCode"
-              >
-            </div>
-
-            <el-button
-              :loading="loading"
-              type="primary"
-              style="width: 100%; padding: 12px 20px; margin-bottom: 30px"
-              @click.native.prevent="handleLogin"
-            >
-              <span v-if="!loading">登 录</span>
-              <span v-else>登 录 中...</span>
-            </el-button>
-          </el-form>
-        </div>
-      </div>
-    </div>
-
-    <el-dialog title="Or connect with" :visible.sync="showDialog" :close-on-click-modal="false">
-      Can not be simulated on local, so please combine you own business
-      simulation! ! !
-      <br>
-      <br>
-      <br>
-      <social-sign />
-    </el-dialog>
-    <div
-      id="bottom_layer"
-      class="s-bottom-layer s-isindex-wrap"
-      style="visibility: visible; width: 100%"
-    >
-      <div class="s-bottom-layer-content">
-
-        <div class="lh">
-          <a class="text-color" href="https://beian.miit.gov.cn" target="_blank">
-            沪ICP备XXXXXXXXX号-1
-          </a>
-        </div>
-        <div class="open-content-info">
-          <div class="tip-hover-panel" style="top: -18px; right: -12px">
-            <div class="rest_info_tip">
-              <div class="tip-wrapper">
-                <div class="lh tip-item" style="display: none">
-                  <a
-                    class="text-color"
-                    href="https://beian.miit.gov.cn"
-                    target="_blank"
-                  >
-                    沪ICP备XXXXXXXXX号-1
-                  </a>
+              <div class="captcha-wrap" title="点击刷新" @click="getCode">
+                <img v-if="codeUrl" :src="codeUrl" class="captcha-img" alt="验证码">
+                <div v-else class="captcha-placeholder">
+                  <el-icon class="is-loading"><Loading /></el-icon>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
+          </el-form-item>
+
+          <el-button
+            :loading="loading"
+            type="primary"
+            size="large"
+            class="submit-btn"
+            @click.prevent="handleLogin"
+          >
+            {{ loading ? '登录中...' : '登 录' }}
+          </el-button>
+        </el-form>
       </div>
     </div>
+
   </div>
 </template>
 
 <script>
 import { getCodeImg } from '@/api/login'
-import moment from 'moment'
-import SocialSign from './components/SocialSignin'
+import { User, Lock, Key, View, Hide, Monitor, Loading } from '@element-plus/icons-vue'
 
 export default {
-  name: 'Login',
-  components: { SocialSign },
+  name: 'LoginPage',
+  setup() {
+    return { User, Lock, Key, View, Hide, Monitor, Loading }
+  },
   data() {
     return {
       codeUrl: '',
-      cookiePassword: '',
-      refreshParticles: true,
       loginForm: {
         username: 'admin',
         password: '123456',
-        rememberMe: false,
         code: '',
         uuid: ''
       },
       loginRules: {
-        username: [
-          { required: true, trigger: 'blur', message: '用户名不能为空' }
-        ],
-        password: [
-          { required: true, trigger: 'blur', message: '密码不能为空' }
-        ],
-        code: [
-          { required: true, trigger: 'change', message: '验证码不能为空' }
-        ]
+        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
+        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
+        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
       },
       passwordType: 'password',
       capsTooltip: false,
       loading: false,
-      showDialog: false,
       redirect: undefined,
       otherQuery: {},
-      currentTime: null,
       sysInfo: ''
     }
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler(route) {
         const query = route.query
         if (query) {
           this.redirect = query.redirect
@@ -235,25 +186,14 @@ export default {
   },
   created() {
     this.getCode()
-    // window.addEventListener('storage', this.afterQRScan)
-    this.getCurrentTime()
     this.getSystemSetting()
   },
   mounted() {
-    if (this.loginForm.username === '') {
+    if (!this.loginForm.username) {
       this.$refs.username.focus()
-    } else if (this.loginForm.password === '') {
+    } else if (!this.loginForm.password) {
       this.$refs.password.focus()
     }
-    window.addEventListener('resize', () => {
-      this.refreshParticles = false
-      this.$nextTick(() => (this.refreshParticles = true))
-    })
-  },
-  destroyed() {
-    clearInterval(this.timer)
-    window.removeEventListener('resize', () => {})
-    // window.removeEventListener('storage', this.afterQRScan)
   },
   methods: {
     getSystemSetting() {
@@ -262,12 +202,8 @@ export default {
         document.title = ret.sys_app_name
       })
     },
-    getCurrentTime() {
-      this.timer = setInterval((_) => {
-        this.currentTime = moment().format('YYYY-MM-DD HH时mm分ss秒')
-      }, 1000)
-    },
     getCode() {
+      this.codeUrl = ''
       getCodeImg().then((res) => {
         if (res !== undefined) {
           this.codeUrl = res.data
@@ -277,10 +213,7 @@ export default {
     },
     checkCapslock({ shiftKey, key } = {}) {
       if (key && key.length === 1) {
-        if (
-          (shiftKey && key >= 'a' && key <= 'z') ||
-          (!shiftKey && key >= 'A' && key <= 'Z')
-        ) {
+        if ((shiftKey && key >= 'a' && key <= 'z') || (!shiftKey && key >= 'A' && key <= 'Z')) {
           this.capsTooltip = true
         } else {
           this.capsTooltip = false
@@ -291,14 +224,8 @@ export default {
       }
     },
     showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+      this.passwordType = this.passwordType === 'password' ? '' : 'password'
+      this.$nextTick(() => this.$refs.password.focus())
     },
     handleLogin() {
       this.$refs.loginForm.validate((valid) => {
@@ -307,25 +234,18 @@ export default {
           this.$store
             .dispatch('user/login', this.loginForm)
             .then(() => {
-              this.$router
-                .push({ path: this.redirect || '/', query: this.otherQuery })
-                .catch(() => {})
+              this.$router.push({ path: this.redirect || '/', query: this.otherQuery }).catch(() => {})
             })
             .catch(() => {
               this.loading = false
               this.getCode()
             })
-        } else {
-          console.log('error submit!!')
-          return false
         }
       })
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
-        }
+        if (cur !== 'redirect') acc[cur] = query[cur]
         return acc
       }, {})
     }
@@ -334,357 +254,445 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-$bg: #283443;
-$light_gray: #fff;
-$cursor: #fff;
-
-#bottom_layer {
-  visibility: hidden;
-  width: 3000px;
-  position: fixed;
-  z-index: 302;
-  bottom: 0;
-  left: 0;
-  height: 39px;
-  padding-top: 1px;
-  zoom: 1;
-  margin: 0;
-  line-height: 39px;
-  // background: #0e6cff;
-}
-#bottom_layer .lh {
-  display: inline-block;
-  margin-right: 14px;
-}
-#bottom_layer .lh .emphasize {
-  text-decoration: underline;
-  font-weight: 700;
-}
-#bottom_layer .lh:last-child {
-  margin-left: -2px;
-  margin-right: 0;
-}
-#bottom_layer .lh.activity {
-  font-weight: 700;
-  text-decoration: underline;
+/* ── 页面容器 ── */
+.login-page {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
 }
-#bottom_layer a {
-  font-size: 12px;
-  text-decoration: none;
+
+/* ══════════════════════════════
+   左侧品牌区
+══════════════════════════════ */
+.login-brand {
+  position: relative;
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 48px 40px;
+  overflow: hidden;
+  background: linear-gradient(145deg, #002c8c 0%, #1677ff 55%, #40a9ff 100%);
+
+  /* 浮动圆形装饰 */
+  .brand-deco {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.12;
+    background: #fff;
+  }
+
+  .brand-deco--circle1 {
+    width: 380px;
+    height: 380px;
+    top: -100px;
+    right: -120px;
+  }
+
+  .brand-deco--circle2 {
+    width: 220px;
+    height: 220px;
+    bottom: 60px;
+    left: -60px;
+  }
+
+  .brand-deco--circle3 {
+    width: 120px;
+    height: 120px;
+    bottom: 220px;
+    right: 40px;
+    opacity: 0.08;
+  }
 }
-#bottom_layer .text-color {
-  color: #bbb;
+
+.brand-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.brand-logo-wrap {
+  width: 64px;
+  height: 64px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 1.5px solid rgba(255, 255, 255, 0.35);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
 }
-#bottom_layer .aria-img {
-  width: 49px;
-  height: 20px;
-  margin-bottom: -5px;
+
+.brand-logo-img {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
+  border-radius: 8px;
 }
-#bottom_layer a:hover {
+
+.brand-logo-icon {
+  font-size: 30px;
   color: #fff;
 }
-#bottom_layer .s-bottom-layer-content {
-  margin: 0 17px;
-  text-align: center;
-}
-#bottom_layer .s-bottom-layer-content .auto-transform-line {
-  display: inline;
-}
-#bottom_layer .s-bottom-layer-content .auto-transform-line:first-child {
-  margin-right: 14px;
-}
-.s-bottom-space {
-  position: static;
-  width: 100%;
-  height: 40px;
-  margin: 23px auto 12px;
-}
-#bottom_layer .open-content-info a:hover {
+
+.brand-title {
+  margin: 0;
+  font-size: 32px;
+  font-weight: 700;
   color: #fff;
+  letter-spacing: 1px;
+  line-height: 1.2;
 }
-#bottom_layer .open-content-info .text-color {
-  color: #626675;
+
+.brand-desc {
+  margin: 0;
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.72);
+  line-height: 1.6;
 }
-.open-content-info {
-  position: relative;
-  display: inline-block;
-  width: 20px;
+
+.brand-features {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 8px;
 }
-.open-content-info > span {
-  cursor: pointer;
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: rgba(255, 255, 255, 0.85);
   font-size: 14px;
+
+  .el-icon {
+    font-size: 16px;
+    background: rgba(255, 255, 255, 0.15);
+    padding: 6px;
+    border-radius: 8px;
+    color: #fff;
+  }
 }
-.open-content-info > span:hover {
-  color: #fff;
-}
-.open-content-info .tip-hover-panel {
-  position: absolute;
-  display: none;
-  padding-bottom: 18px;
+
+.brand-footer {
+  position: relative;
+  z-index: 1;
 }
-.open-content-info .tip-hover-panel .rest_info_tip {
-  max-width: 560px;
-  padding: 8px 12px 8px 12px;
-  background: #fff;
-  border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  text-align: left;
-}
-.open-content-info .tip-hover-panel .rest_info_tip .tip-wrapper {
-  white-space: nowrap;
-  line-height: 20px;
-}
-.open-content-info .tip-hover-panel .rest_info_tip .tip-wrapper .tip-item {
-  height: 20px;
-  line-height: 20px;
-}
-.open-content-info
-  .tip-hover-panel
-  .rest_info_tip
-  .tip-wrapper
-  .tip-item:last-child {
-  margin-right: 0;
-}
-@media screen and (max-width: 515px) {
-  .open-content-info {
-    width: 16px;
-  }
-  .open-content-info .tip-hover-panel {
-    right: -16px !important;
+
+.icp-link {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.2s;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.7);
   }
 }
-.footer {
-  background-color: #0e6cff;
-  margin-bottom: -20px;
-}
 
-.login-container {
-  display: -webkit-box;
-  display: -ms-flexbox;
+/* ══════════════════════════════
+   右侧表单区
+══════════════════════════════ */
+.login-form-panel {
+  flex: 1;
+  position: relative;
   display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
-  width: 100%;
-  height: 100%;
-  margin: 0 auto;
-  background: url("../../assets/login.png") no-repeat;
-  background-color: #0e6cff;
-  position: relative;
-  background-size: cover;
-  height: 100vh;
-  background-position: 50%;
+  justify-content: center;
+  padding: 40px 24px;
+  overflow: hidden;
+  /* 浅渐变底色 + SVG 点阵纹理 */
+  background-color: #e8f4ff;
+  background-image:
+    linear-gradient(135deg, #e8f4ff 0%, #f0f8ff 50%, #f5fbff 100%),
+    radial-gradient(circle, rgba(22, 119, 255, 0.07) 1px, transparent 1px);
+  background-size: 100% 100%, 28px 28px;
+}
+
+/* 柔光晕装饰 */
+.panel-blob {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  filter: blur(72px);
 }
 
-#particles-js {
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  position: absolute;
+.panel-blob--tr {
+  width: 340px;
+  height: 340px;
+  top: -80px;
+  right: -80px;
+  background: rgba(22, 119, 255, 0.15);
 }
 
-.login-weaper {
-  margin: 0 auto;
-  width: 1000px;
-  -webkit-box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
-  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
-  z-index: 1000;
+.panel-blob--bl {
+  width: 260px;
+  height: 260px;
+  bottom: -60px;
+  left: -60px;
+  background: rgba(64, 169, 255, 0.12);
 }
 
-.login-left {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  background-color: rgba(64, 158, 255, 0);
-  color: #fff;
-  float: left;
-  width: 50%;
+.form-box {
   position: relative;
-  min-height: 500px;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  .login-time {
+  z-index: 1;
+  width: 100%;
+  max-width: 400px;
+  background: #fff;
+  border-radius: 16px;
+  padding: 40px 36px 36px;
+  box-shadow:
+    0 0 0 1px rgba(22, 119, 255, 0.08),
+    0 4px 6px rgba(0, 0, 0, 0.04),
+    0 16px 40px rgba(22, 119, 255, 0.12);
+  animation: form-enter 0.4s cubic-bezier(0.34, 1.06, 0.64, 1) forwards;
+
+  /* 顶部彩色渐变条 */
+  &::before {
+    content: '';
     position: absolute;
-    left: 25px;
-    top: 25px;
-    width: 100%;
-    color: #fff;
-    opacity: 0.9;
-    font-size: 18px;
-    overflow: hidden;
-    font-weight: 500;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    border-radius: 16px 16px 0 0;
+    background: linear-gradient(90deg, #1677ff 0%, #40a9ff 100%);
   }
 }
 
-.login-left .img {
-  width: 90px;
-  height: 90px;
-  border-radius: 3px;
+@keyframes form-enter {
+  0% { opacity: 0; transform: translateY(20px) scale(0.98); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-.login-left .title {
-  text-align: center;
-  color: #fff;
-  letter-spacing: 2px;
-  font-size: 16px;
-  font-weight: 600;
+.form-header {
+  margin-bottom: 28px;
 }
 
-.login-border {
-  position: relative;
-  min-height: 500px;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  border-left: none;
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-  color: #fff;
-  background-color: hsla(0, 0%, 100%, 0.9);
-  width: 50%;
-  float: left;
+.form-badge {
+  display: inline-block;
+  padding: 3px 10px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.08);
+  border: 1px solid rgba(22, 119, 255, 0.2);
+  margin-bottom: 12px;
 }
 
-.login-main {
-  margin: 0 auto;
-  width: 65%;
+.form-title {
+  margin: 0 0 6px;
+  font-size: 26px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #002c8c 0%, #1677ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
-.login-title {
-  color: #333;
-  margin-bottom: 40px;
-  font-weight: 500;
-  font-size: 22px;
-  text-align: center;
-  letter-spacing: 4px;
-}
+.form-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: #9ca3af;
+}
+
+/* ── 表单样式 ── */
+.login-form {
+  :deep(.el-form-item__label) {
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+    padding-bottom: 6px;
+    line-height: 1;
+  }
 
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-  .login-container .el-input input {
-    color: $cursor;
+  :deep(.el-form-item) {
+    margin-bottom: 20px;
   }
-}
 
-/* reset element-ui css */
-.login-container {
-  ::v-deep .el-input {
-    display: inline-block;
-    height: 47px;
-    width: 85%;
-
-    input {
-      background: transparent;
-      border: 0px;
-      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: #333;
-      height: 47px;
-      caret-color: #333;
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
-      }
+  :deep(.el-input__wrapper) {
+    border-radius: 8px;
+    box-shadow: 0 0 0 1px #e5e7eb !important;
+    transition: box-shadow 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 0 0 1px #d1d5db !important;
     }
   }
 
-  .el-form-item {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 5px;
-    color: #454545;
+  :deep(.el-input.is-focus .el-input__wrapper) {
+    box-shadow: 0 0 0 2px #3b82f6 !important;
   }
-}
-$bg: #2d3a4b;
-$dark_gray: #889aa4;
-$light_gray: #eee;
 
-.login-container {
-  .tips {
+  :deep(.el-form-item.is-error .el-input__wrapper) {
+    box-shadow: 0 0 0 2px #ef4444 !important;
+  }
+
+  :deep(.el-input__prefix-inner .el-icon) {
+    color: #9ca3af;
+    font-size: 16px;
+  }
+
+  :deep(.el-input__inner) {
+    color: #111827;
     font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
 
-    span {
-      &:first-of-type {
-        margin-right: 16px;
-      }
+    &::placeholder {
+      color: #c1c7d0;
     }
   }
+}
+
+.pwd-eye {
+  color: #9ca3af;
+  font-size: 16px;
+  cursor: pointer;
+  transition: color 0.2s;
+
+  &:hover {
+    color: #3b82f6;
+  }
+}
 
-  .svg-container {
-    padding: 6px 5px 6px 15px;
-    color: $dark_gray;
-    vertical-align: middle;
-    width: 30px;
-    display: inline-block;
+/* ── 验证码 ── */
+.captcha-row {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+
+  .el-input {
+    flex: 1;
   }
+}
 
-  .title-container {
-    position: relative;
+.captcha-wrap {
+  width: 110px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f9fafb;
+  transition: border-color 0.2s;
 
-    .title {
-      font-size: 26px;
-      color: $light_gray;
-      margin: 0px auto 40px auto;
-      text-align: center;
-      font-weight: bold;
-    }
+  &:hover {
+    border-color: #3b82f6;
   }
+}
 
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
+.captcha-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.captcha-placeholder {
+  color: #c1c7d0;
+  font-size: 18px;
+}
+
+/* ── 登录按钮 ── */
+.submit-btn {
+  width: 100%;
+  height: 46px;
+  margin-top: 12px;
+  border-radius: 10px;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 4px;
+  background: linear-gradient(135deg, #1677ff 0%, #40a9ff 100%) !important;
+  border: none !important;
+  box-shadow: 0 4px 16px rgba(22, 119, 255, 0.4);
+  transition: all 0.25s ease;
+
+  &:hover {
+    background: linear-gradient(135deg, #0958d9 0%, #1677ff 100%) !important;
+    box-shadow: 0 8px 24px rgba(22, 119, 255, 0.5);
+    transform: translateY(-1px);
   }
 
-  .thirdparty-button {
-    position: absolute;
-    right: 0;
-    bottom: 6px;
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(22, 119, 255, 0.3);
   }
 
-  @media only screen and (max-width: 470px) {
-    .thirdparty-button {
-      display: none;
-    }
-    .login-weaper {
-      width: 100%;
-      padding: 0 30px;
-      box-sizing: border-box;
-      box-shadow: none;
+  &.is-loading {
+    transform: none;
+    opacity: 0.85;
+  }
+}
+
+/* ── 响应式 ── */
+@media (max-width: 900px) {
+  .login-brand {
+    width: 40%;
+    padding: 36px 28px;
+  }
+
+  .brand-title {
+    font-size: 26px;
+  }
+
+  .form-box {
+    padding: 36px 28px;
+  }
+}
+
+@media (max-width: 680px) {
+  .login-page {
+    flex-direction: column;
+  }
+
+  .login-brand {
+    width: 100%;
+    height: 200px;
+    flex-direction: row;
+    align-items: center;
+    padding: 24px 28px;
+
+    .brand-content {
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
+      margin: 0;
     }
-    .login-main {
-      width: 80%;
+
+    .brand-desc,
+    .brand-features {
+      display: none;
     }
-    .login-left {
-      display: none !important;
+
+    .brand-title {
+      font-size: 22px;
     }
-    .login-border {
-      width: 100%;
+
+    .brand-logo-wrap {
+      width: 48px;
+      height: 48px;
     }
   }
+
+  .login-form-panel {
+    flex: 1;
+    padding: 24px 16px;
+    overflow-y: auto;
+  }
+
+  .form-box {
+    padding: 28px 20px;
+  }
 }
 </style>
diff --git a/src/views/profile/components/Account.vue b/src/views/profile/components/Account.vue
index 9f2e3865..9a192a54 100644
--- a/src/views/profile/components/Account.vue
+++ b/src/views/profile/components/Account.vue
@@ -1,10 +1,10 @@
 <template>
   <el-form>
     <el-form-item label="Name">
-      <el-input v-model.trim="user.name" />
+      <el-input v-model.trim="userForm.name" />
     </el-form-item>
     <el-form-item label="Email">
-      <el-input v-model.trim="user.email" />
+      <el-input v-model.trim="userForm.email" />
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="submit">Update</el-button>
@@ -14,6 +14,7 @@
 
 <script>
 export default {
+  name: 'UserAccount',
   props: {
     user: {
       type: Object,
@@ -25,6 +26,11 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      userForm: { ...this.user }
+    }
+  },
   methods: {
     submit() {
       this.$message({
diff --git a/src/views/profile/components/Activity.vue b/src/views/profile/components/Activity.vue
index dd5db3a5..df2e1a2f 100644
--- a/src/views/profile/components/Activity.vue
+++ b/src/views/profile/components/Activity.vue
@@ -16,7 +16,7 @@
       <ul class="list-inline">
         <li>
           <span class="link-black text-sm">
-            <i class="el-icon-share" />
+            <i class="ri-share-line" />
             Share
           </span>
         </li>
@@ -44,7 +44,7 @@
       <ul class="list-inline">
         <li>
           <span class="link-black text-sm">
-            <i class="el-icon-share" />
+            <i class="ri-share-line" />
             Share
           </span>
         </li>
@@ -70,7 +70,7 @@
         </el-carousel>
       </div>
       <ul class="list-inline">
-        <li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
+        <li><span class="link-black text-sm"><i class="ri-share-line" /> Share</span></li>
         <li>
           <span class="link-black text-sm">
             <svg-icon icon-class="like" /> Like</span>
@@ -85,6 +85,7 @@ const avatarPrefix = '?imageView2/1/w/80/h/80'
 const carouselPrefix = '?imageView2/2/h/440'
 
 export default {
+  name: 'UserActivity',
   data() {
     return {
       carouselImages: [
diff --git a/src/views/profile/components/Timeline.vue b/src/views/profile/components/Timeline.vue
index ba90b3d2..58d591ed 100644
--- a/src/views/profile/components/Timeline.vue
+++ b/src/views/profile/components/Timeline.vue
@@ -13,6 +13,7 @@
 
 <script>
 export default {
+  name: 'UserTimeline',
   data() {
     return {
       timeline: [
diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
index b9a383d6..9bb928de 100644
--- a/src/views/profile/components/UserCard.vue
+++ b/src/views/profile/components/UserCard.vue
@@ -1,8 +1,10 @@
 <template>
   <el-card style="margin-bottom:20px;">
-    <div slot="header" class="clearfix">
-      <span>About me</span>
-    </div>
+    <template #header>
+      <div class="clearfix">
+        <span>About me</span>
+      </div>
+    </template>
 
     <div class="user-profile">
       <div class="box-center">
@@ -13,7 +15,7 @@
       </div>
       <div class="box-center">
         <div class="user-name text-center">{{ user.name }}</div>
-        <div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
+        <div class="user-role text-center text-muted">{{ uppercaseFirst(user.role) }}</div>
       </div>
     </div>
 
@@ -69,6 +71,12 @@ export default {
         }
       }
     }
+  },
+  methods: {
+    uppercaseFirst(str) {
+      if (!str) return ''
+      return str.charAt(0).toUpperCase() + str.slice(1)
+    }
   }
 }
 </script>
diff --git a/src/views/profile/index.vue b/src/views/profile/index.vue
index f5b2aa19..74f48c5e 100644
--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -4,9 +4,11 @@
       <el-row :gutter="10">
         <el-col :span="6" :xs="24">
           <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span>个人信息</span>
-            </div>
+            <template #header>
+              <div class="clearfix">
+                <span>个人信息</span>
+              </div>
+            </template>
             <div>
               <div class="text-center">
                 <userAvatar :user="user" />
@@ -42,9 +44,11 @@
         </el-col>
         <el-col :span="18" :xs="24">
           <el-card>
-            <div slot="header" class="clearfix">
-              <span>基本资料</span>
-            </div>
+            <template #header>
+              <div class="clearfix">
+                <span>基本资料</span>
+              </div>
+            </template>
             <el-tabs v-model="activeTab">
               <el-tab-pane label="基本资料" name="userinfo">
                 <userInfo :user="user" />
@@ -67,7 +71,7 @@ import resetPwd from './resetPwd'
 import { getUserProfile } from '@/api/admin/sys-user'
 
 export default {
-  name: 'Profile',
+  name: 'ProfilePage',
   components: { userAvatar, userInfo, resetPwd },
   data() {
     return {
diff --git a/src/views/profile/userAvatar.vue b/src/views/profile/userAvatar.vue
index ac0a60cb..6a8d496c 100644
--- a/src/views/profile/userAvatar.vue
+++ b/src/views/profile/userAvatar.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <img :src="options.img" title="点击上传头像" class="img-circle img-lg" @click="editCropper()">
-    <el-dialog :title="title" :visible.sync="open" width="800px" :close-on-click-modal="false">
+    <el-dialog v-model="open" :title="title" width="800px" :close-on-click-modal="false">
       <el-row>
         <el-col :xs="24" :md="12" :style="{height: '350px'}">
           <vue-cropper
@@ -12,7 +12,7 @@
             :auto-crop-width="options.autoCropWidth"
             :auto-crop-height="options.autoCropHeight"
             :fixed-box="options.fixedBox"
-            @realTime="realTime"
+            @real-time="realTime"
           />
         </el-col>
         <el-col :xs="24" :md="12" :style="{height: '350px'}">
@@ -27,21 +27,21 @@
           <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
             <el-button size="small">
               上传
-              <i class="el-icon-upload el-icon--right" />
+              <i class="ri-upload-line el-icon--right" />
             </el-button>
           </el-upload>
         </el-col>
         <el-col :lg="{span: 1, offset: 2}" :md="2">
-          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
+          <el-button size="small" @click="changeScale(1)" />
         </el-col>
         <el-col :lg="{span: 1, offset: 1}" :md="2">
-          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
+          <el-button size="small" @click="changeScale(-1)" />
         </el-col>
         <el-col :lg="{span: 1, offset: 1}" :md="2">
-          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
+          <el-button size="small" @click="rotateLeft()" />
         </el-col>
         <el-col :lg="{span: 1, offset: 1}" :md="2">
-          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
+          <el-button size="small" @click="rotateRight()" />
         </el-col>
         <el-col :lg="{span: 2, offset: 6}" :md="2">
           <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
diff --git a/src/views/profile/userInfo.vue b/src/views/profile/userInfo.vue
index 9d31f398..36f9ae0e 100644
--- a/src/views/profile/userInfo.vue
+++ b/src/views/profile/userInfo.vue
@@ -1,16 +1,16 @@
 <template>
-  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+  <el-form ref="form" :model="userForm" :rules="rules" label-width="80px">
     <el-form-item label="用户昵称" prop="nickName">
-      <el-input v-model="user.nickName" />
+      <el-input v-model="userForm.nickName" />
     </el-form-item>
     <el-form-item label="手机号码" prop="phone">
-      <el-input v-model="user.phone" maxlength="11" />
+      <el-input v-model="userForm.phone" maxlength="11" />
     </el-form-item>
     <el-form-item label="邮箱" prop="email">
-      <el-input v-model="user.email" maxlength="50" />
+      <el-input v-model="userForm.email" maxlength="50" />
     </el-form-item>
     <el-form-item label="性别">
-      <el-radio-group v-model="user.sex">
+      <el-radio-group v-model="userForm.sex">
         <el-radio label="0">男</el-radio>
         <el-radio label="1">女</el-radio>
       </el-radio-group>
@@ -32,6 +32,7 @@ export default {
   },
   data() {
     return {
+      userForm: { ...this.user },
       // 表单校验
       rules: {
         nickName: [
@@ -60,7 +61,7 @@ export default {
     submit() {
       this.$refs['form'].validate(valid => {
         if (valid) {
-          updateUser(this.user).then(response => {
+          updateUser(this.userForm).then(response => {
             if (response.code === 200) {
               this.msgSuccess(response.msg)
             } else {
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index db4c1d66..7e1c1c1c 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -1,5 +1,6 @@
 <script>
 export default {
+  name: 'RedirectPage',
   created() {
     const { params, query } = this.$route
     const { path } = params
diff --git a/src/views/schedule/index.vue b/src/views/schedule/index.vue
index 2da7565c..9b93671c 100644
--- a/src/views/schedule/index.vue
+++ b/src/views/schedule/index.vue
@@ -4,14 +4,14 @@
     <BasicLayout>
       <template #wrapper>
         <el-card class="box-card">
-          <el-form ref="queryForm" :model="queryParams" :inline="true" label-position="left" label-width="68px">
+          <el-form ref="queryForm" :model="queryParams" :inline="true" class="search-form">
             <el-form-item label="名称" prop="jobName">
               <el-input
                 v-model="queryParams.jobName"
                 placeholder="请输入名称"
                 clearable
                 size="small"
-                @keyup.enter.native="handleQuery"
+                @keyup.enter="handleQuery"
               />
             </el-form-item>
             <el-form-item label="任务分组" prop="jobGroup">
@@ -46,58 +46,19 @@
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+              <el-button type="primary" size="small" :icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button size="small" :icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
 
-          <el-row :gutter="10" class="mb8">
-            <el-col :span="1.5">
-              <el-button
-                v-permisaction="['job:sysJob:add']"
-                type="primary"
-                icon="el-icon-plus"
-                size="mini"
-                @click="handleAdd"
-              >新增
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-permisaction="['job:sysJob:edit']"
-                type="success"
-                icon="el-icon-edit"
-                size="mini"
-                :disabled="single"
-                @click="handleUpdate"
-              >修改
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-permisaction="['job:sysJob:remove']"
-                type="danger"
-                icon="el-icon-delete"
-                size="mini"
-                :disabled="multiple"
-                @click="handleDelete"
-              >删除
-              </el-button>
-            </el-col>
-            <el-col :span="1.5">
-              <el-button
-                v-permisaction="['job:sysJob:log']"
-                type="danger"
-                icon="el-icon-delete"
-                size="mini"
-                @click="handleLog"
-              >日志
-              </el-button>
+          <div class="toolbar mb8">
+            <el-button v-permisaction="['job:sysJob:add']" type="primary" size="small" :icon="Plus" @click="handleAdd">新增</el-button>
+            <el-button v-permisaction="['job:sysJob:edit']" type="primary" size="small" :icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
+            <el-button v-permisaction="['job:sysJob:remove']" type="danger" size="small" :icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
+            <el-button v-permisaction="['job:sysJob:log']" size="small" @click="handleLog">日志</el-button>
+          </div>
 
-            </el-col>
-          </el-row>
-
-          <el-table v-loading="loading" :data="sysjobList" @selection-change="handleSelectionChange">
+          <el-table v-loading="loading" :data="sysjobList" border stripe @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" align="center" />
             <el-table-column
               label="编码"
@@ -118,7 +79,7 @@
               :formatter="jobGroupFormat"
               width="100"
             >
-              <template slot-scope="scope">
+              <template #default="scope">
                 {{ jobGroupFormat(scope.row) }}
               </template>
             </el-table-column>
@@ -138,63 +99,41 @@
               label="状态"
               align="center"
               prop="status"
-              :formatter="statusFormat"
               width="100"
             >
-              <template slot-scope="scope">
-                {{ statusFormat(scope.row) }}
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '2' || scope.row.status === 2 ? 'success' : 'danger'" size="small" disable-transitions>
+                  {{ statusFormat(scope.row) }}
+                </el-tag>
               </template>
             </el-table-column>
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-              <template slot-scope="scope">
-                <el-button
-                  v-permisaction="['job:sysJob:edit']"
-                  size="mini"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleUpdate(scope.row)"
-                >修改
-                </el-button>
-                <el-button
-                  v-if="scope.row.entry_id!==0&& scope.row.status!=1"
-                  v-permisaction="['job:sysJob:remove']"
-                  size="mini"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleRemove(scope.row)"
-                >停止
-                </el-button>
-                <el-button
-                  v-if="scope.row.entry_id==0 && scope.row.status!=1"
-                  v-permisaction="['job:sysJob:start']"
-                  size="mini"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleStart(scope.row)"
-                >启动
-                </el-button>
-                <el-button
-                  v-permisaction="['job:sysJob:remove']"
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleDelete(scope.row)"
-                >删除
-                </el-button>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
+              <template #default="scope">
+                <el-button v-permisaction="['job:sysJob:edit']" type="primary" link size="small" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
+                <template v-if="scope.row.entry_id!==0 && scope.row.status!=1">
+                  <el-divider direction="vertical" />
+                  <el-button v-permisaction="['job:sysJob:remove']" type="primary" link size="small" @click="handleRemove(scope.row)">停止</el-button>
+                </template>
+                <template v-if="scope.row.entry_id==0 && scope.row.status!=1">
+                  <el-divider direction="vertical" />
+                  <el-button v-permisaction="['job:sysJob:start']" type="primary" link size="small" @click="handleStart(scope.row)">启动</el-button>
+                </template>
+                <el-divider direction="vertical" />
+                <el-button v-permisaction="['job:sysJob:remove']" type="danger" link size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
 
           <pagination
             v-show="total>0"
+            v-model:current-page="queryParams.pageIndex"
+            v-model:page-size="queryParams.pageSize"
             :total="total"
-            :page.sync="queryParams.pageIndex"
-            :limit.sync="queryParams.pageSize"
             @pagination="getList"
           />
 
           <!-- 添加或修改对话框 -->
-          <el-dialog v-dialogDrag :title="title" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
+          <el-dialog v-model="open" v-dialogDrag :title="title" width="700px" append-to-body :close-on-click-modal="false">
             <el-form ref="form" :model="form" :rules="rules" label-width="120px">
               <el-row>
                 <el-col :span="12">
@@ -221,17 +160,17 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                  <el-form-item label="调用目标" prop="invokeTarget">
-                    <span slot="label">
+                  <el-form-item prop="invokeTarget">
+                    <template #label>
                       调用目标
                       <el-tooltip placement="top">
-                        <div slot="content">
+                        <template #content>
                           调用示例：func (t *EXEC) ExamplesNoParam(){..} 填写 ExamplesNoParam 即可；
                           <br>参数说明：目前不支持带参调用
-                        </div>
-                        <i class="el-icon-question" />
+                        </template>
+                        <i class="ri-question-line" />
                       </el-tooltip>
-                    </span>
+                    </template>
                     <el-input
                       v-model="form.invokeTarget"
                       placeholder="调用目标"
@@ -239,17 +178,17 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                  <el-form-item label="目标参数" prop="args">
-                    <span slot="label">
+                  <el-form-item prop="args">
+                    <template #label>
                       目标参数
                       <el-tooltip placement="top">
-                        <div slot="content">
+                        <template #content>
                           参数示例：有参：请以string格式填写；无参：为空；
                           <br>参数说明：目前仅支持函数调用
-                        </div>
-                        <i class="el-icon-question" />
+                        </template>
+                        <i class="ri-question-line" />
                       </el-tooltip>
-                    </span>
+                    </template>
                     <el-input
                       v-model="form.args"
                       placeholder="目标参数"
@@ -307,10 +246,12 @@
                 </el-col>
               </el-row>
             </el-form>
-            <div slot="footer" class="dialog-footer">
-              <el-button type="primary" @click="submitForm">确 定</el-button>
-              <el-button @click="cancel">取 消</el-button>
-            </div>
+            <template #footer>
+              <div class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+              </div>
+            </template>
           </el-dialog>
 
         </el-card>
@@ -321,11 +262,15 @@
 
 <script>
 import { addSysJob, delSysJob, getSysJob, listSysJob, updateSysJob, removeJob, startJob } from '@/api/job/sys-job'
+import { Search, Refresh, Plus, Edit, Delete } from '@element-plus/icons-vue'
 
 export default {
   name: 'SysJobManage',
   components: {
 
+  },
+  setup() {
+    return { Search, Refresh, Plus, Edit, Delete }
   },
   data() {
     return {
diff --git a/src/views/schedule/log.vue b/src/views/schedule/log.vue
index bfe60268..aac11034 100644
--- a/src/views/schedule/log.vue
+++ b/src/views/schedule/log.vue
@@ -5,8 +5,8 @@
       <el-card class="box-card">
         <el-form>
           <el-form-item>
-            <el-button type="success" icon="el-icon-search" size="mini">状态</el-button>
-            <el-button type="primary" icon="el-icon-search" size="mini">清空</el-button>
+            <el-button type="success" size="mini">状态</el-button>
+            <el-button type="primary" size="mini">清空</el-button>
           </el-form-item>
         </el-form>
         <el-row ref="log" :gutter="10" class="mb8">
@@ -45,7 +45,7 @@ export default {
     this.group = 'log'
     this.initWebSocket()
   },
-  destroyed() {
+  unmounted() {
     console.log('断开websocket连接')
     this.websock.close() // 离开路由之后断开websocket连接
     unWsLogout(this.id, this.group).then(response => {
diff --git a/src/views/sys-tools/monitor.vue b/src/views/sys-tools/monitor.vue
index 6e707383..96d6174e 100644
--- a/src/views/sys-tools/monitor.vue
+++ b/src/views/sys-tools/monitor.vue
@@ -5,21 +5,23 @@
         <el-row :gutter="10" class="mb10">
           <el-col :sm="24" :md="8">
             <el-card v-if="info.cpu" class="box-card" shadow="always" :body-style="{paddingTop:'0 !important'}">
-              <div slot="header" class="clearfix">
-                <el-row :gutter="10">
-                  <el-col :sm="24" :md="8">
-                    <el-tag
-                      type="success"
-                      effect="dark"
-                    >
-                      Runing
-                    </el-tag>
-                  </el-col>
-                  <el-col :sm="24" :md="8" class="" style="line-height:28px;text-align:center;">
-                    {{ info.location }}
-                  </el-col>
-                </el-row>
-              </div>
+              <template #header>
+                <div class="clearfix">
+                  <el-row :gutter="10">
+                    <el-col :sm="24" :md="8">
+                      <el-tag
+                        type="success"
+                        effect="dark"
+                      >
+                        Runing
+                      </el-tag>
+                    </el-col>
+                    <el-col :sm="24" :md="8" class="" style="line-height:28px;text-align:center;">
+                      {{ info.location }}
+                    </el-col>
+                  </el-row>
+                </div>
+              </template>
               <div class="monitor" style="padding-top:0px;">
                 <div class="monitor-content">
                   <el-row :gutter="10">
@@ -38,7 +40,7 @@
                     <el-col :sm="12" :md="12" class="line">
                       <el-row>
                         <el-col span="12" :sm="8" :md="8" xs="12">
-                          下载<i class="el-icon-caret-bottom" />
+                          下载<i class="ri-arrow-down-s-fill" />
                         </el-col>
                         <el-col span="12" :sm="16" :md="16" xs="12" class="line-value">
                           {{ info.net.in }}KB
@@ -48,7 +50,7 @@
                     <el-col :sm="12" :md="12" class="line">
                       <el-row border>
                         <el-col span="12" :sm="6" :md="8">
-                          上传<i class="el-icon-caret-top" />
+                          上传<i class="ri-arrow-up-s-fill" />
                         </el-col>
                         <el-col span="12" :sm="6" :md="16" class="line-value">
                           {{ info.net.out }}KB
@@ -103,9 +105,11 @@
           </el-card> -->
 
           <el-card v-if="info.os" class="box-card">
-            <div slot="header" class="clearfix">
-              <span>服务器信息</span>
-            </div>
+            <template #header>
+              <div class="clearfix">
+                <span>服务器信息</span>
+              </div>
+            </template>
             <div class="monitor">
               <Cell label="主机名称" :value="info.os.hostName" border />
               <Cell label="操作系统" :value="info.os.goOs" border />
@@ -127,7 +131,7 @@ import {
   getServer
 } from '@/api/monitor/server'
 export default {
-  name: 'Monitor',
+  name: 'MonitorPage',
   components: {
     Cell
   },
@@ -150,7 +154,7 @@ export default {
       this.getServerInfo()
     }, 1000)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearInterval(this.timer)
     this.timer = null
   },
diff --git a/test-vue3.js b/test-vue3.js
new file mode 100644
index 00000000..e69de29b
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..e69de29b
diff --git a/vue.config.js b/vue.config.js
index e61cf6e6..6589e047 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -36,9 +36,11 @@ module.exports = {
   devServer: {
     port: port,
     open: false,
-    overlay: {
-      warnings: false,
-      errors: true
+    client: {
+      overlay: {
+        warnings: false,
+        errors: true
+      }
     }
   },
   configureWebpack: {
@@ -56,6 +58,9 @@ module.exports = {
     resolve: {
       alias: {
         '@': resolve('src')
+      },
+      fallback: {
+        'path': require.resolve('path-browserify')
       }
     }
   },
@@ -82,13 +87,14 @@ module.exports = {
       })
       .end()
 
-    // set preserveWhitespace
+    // set preserveWhitespace for Vue 3
     config.module
       .rule('vue')
       .use('vue-loader')
-      .loader('vue-loader')
       .tap(options => {
-        options.compilerOptions.preserveWhitespace = true
+        if (!options) options = {}
+        if (!options.compilerOptions) options.compilerOptions = {}
+        options.compilerOptions.whitespace = 'preserve'
         return options
       })
       .end()
@@ -119,10 +125,10 @@ module.exports = {
                   priority: 10,
                   chunks: 'initial' // only package third parties that are initially dependent
                 },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
+                elementPlus: {
+                  name: 'chunk-elementPlus', // split element-plus into a single package
                   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+                  test: /[\\/]node_modules[\\/]_?element-plus(.*)/ // in order to adapt to cnpm
                 },
                 commons: {
                   name: 'chunk-commons',