From 5f1aaa40d88efbcdb2ef0e65273f40b8cb6a6114 Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Wed, 15 Mar 2023 11:41:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20pinia=E6=9B=BF=E6=8D=A2vuex,=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/.env.production                 |   2 +-
 mayfly_go_web/.eslintrc.js                    |  47 +-
 mayfly_go_web/package.json                    |   6 +-
 mayfly_go_web/plugins.d.ts                    |   1 -
 mayfly_go_web/src/App.vue                     | 125 ++-
 .../src/common/utils/authFunction.ts          |  23 -
 mayfly_go_web/src/common/utils/format.ts      | 120 +++
 mayfly_go_web/src/common/utils/formatTime.ts  | 119 ---
 mayfly_go_web/src/common/utils/mitt.ts        |   8 +
 mayfly_go_web/src/components/auth/auth.vue    |   5 +-
 mayfly_go_web/src/components/auth/authAll.vue |   5 +-
 mayfly_go_web/src/components/auth/auths.vue   |   5 +-
 .../src/components/iconSelector/index.vue     | 489 +++++-----
 .../src/components/iconSelector/list.vue      |  84 ++
 .../src/components/svgIcon/index.vue          |  83 +-
 .../authDirective.ts => directive/auth.ts}    |  16 +-
 .../utils/directive.ts => directive/index.ts} |   4 +-
 .../customDirective.ts => directive/waves.ts} |   0
 mayfly_go_web/src/main.ts                     |  35 +-
 mayfly_go_web/src/router/imports.ts           |  30 -
 mayfly_go_web/src/router/index.ts             |  67 +-
 mayfly_go_web/src/router/route.ts             |   2 +-
 mayfly_go_web/src/store/index.ts              |  26 +-
 mayfly_go_web/src/store/keepAliveNames.ts     |  35 +
 .../src/store/modules/keepAliveNames.ts       |  24 -
 mayfly_go_web/src/store/modules/routesList.ts |  24 -
 mayfly_go_web/src/store/modules/userInfos.ts  |  29 -
 mayfly_go_web/src/store/routesList.ts         |  18 +
 .../src/store/{modules => }/themeConfig.ts    |  32 +-
 mayfly_go_web/src/store/userInfo.ts           |  19 +
 mayfly_go_web/src/theme/iconSelector.scss     |  90 +-
 mayfly_go_web/src/types/env.d.ts              |   5 +
 .../interface/index.ts => types/pinia.d.ts}   |  47 +-
 mayfly_go_web/{ => src/types}/shim.d.ts       |  11 +-
 mayfly_go_web/{ => src/types}/source.d.ts     |   3 +-
 mayfly_go_web/src/views/home/Home.vue         |  17 +-
 .../src/views/layout/component/aside.vue      | 229 +++--
 .../views/layout/component/columnsAside.vue   | 226 +++--
 .../src/views/layout/component/header.vue     |   5 +-
 .../src/views/layout/component/main.vue       | 144 ++-
 mayfly_go_web/src/views/layout/index.vue      |  80 +-
 .../src/views/layout/lockScreen/index.vue     | 608 +++++++------
 mayfly_go_web/src/views/layout/logo/index.vue |  52 +-
 .../src/views/layout/main/classic.vue         |  24 +-
 .../src/views/layout/main/columns.vue         |   5 +-
 .../src/views/layout/main/defaults.vue        |   5 +-
 .../layout/navBars/breadcrumb/breadcrumb.vue  | 147 ++-
 .../views/layout/navBars/breadcrumb/index.vue | 177 ++--
 .../layout/navBars/breadcrumb/search.vue      | 184 ++--
 .../layout/navBars/breadcrumb/setings.vue     | 820 +++++++++--------
 .../views/layout/navBars/breadcrumb/user.vue  | 292 +++---
 .../src/views/layout/navBars/index.vue        |   5 +-
 .../layout/navBars/tagsView/tagsView.vue      | 843 +++++++++---------
 .../src/views/layout/navMenu/horizontal.vue   | 179 ++--
 .../src/views/layout/navMenu/vertical.vue     |  92 +-
 .../src/views/layout/routerView/iframes.vue   |   6 +-
 .../src/views/layout/routerView/parent.vue    |  97 +-
 .../views/login/component/AccountLogin.vue    |  17 +-
 mayfly_go_web/src/views/login/index.vue       |  13 +-
 mayfly_go_web/src/views/ops/db/DbList.vue     |  11 +-
 mayfly_go_web/src/views/ops/db/SqlExec.vue    |  11 +-
 .../src/views/ops/db/component/tab/Query.vue  |  53 +-
 .../views/ops/db/component/tab/TableData.vue  |   2 +-
 .../src/views/ops/machine/MachineList.vue     |  20 +-
 .../{ServiceManage.vue => ScriptManage.vue}   |   0
 .../src/views/ops/machine/SshTerminal.vue     |  24 +-
 .../ops/machine/authcert/AuthCertList.vue     |   2 +-
 .../ops/machine/authcert/AuthCertSelect.vue   |   2 +-
 .../src/views/ops/mongo/MongoDataOp.vue       |   5 +-
 .../src/views/ops/mongo/MongoInstanceTree.vue | 178 ----
 .../src/views/ops/mongo/MongoList.vue         |   2 +-
 .../src/views/ops/redis/DataOperation.vue     |  15 +-
 .../src/views/ops/redis/HashValue.vue         |   2 +-
 .../src/views/ops/redis/RedisList.vue         |   2 +-
 .../src/views/ops/redis/SetValue.vue          |   2 +-
 mayfly_go_web/src/views/personal/index.vue    |  23 +-
 .../views/system/resource/ResourceEdit.vue    |  85 +-
 .../views/system/resource/ResourceList.vue    |   2 +-
 mayfly_go_web/tsconfig.json                   |   4 +-
 mayfly_go_web/vite.config.ts                  | 102 ++-
 mayfly_go_web/yarn.lock                       |  41 +-
 server/go.mod                                 |   2 +-
 server/internal/db/application/db_sql_exec.go |   6 +-
 server/internal/redis/router/redis.go         |  14 +-
 server/mayfly-go.sql                          | 154 ++--
 85 files changed, 3214 insertions(+), 3456 deletions(-)
 delete mode 100644 mayfly_go_web/plugins.d.ts
 delete mode 100644 mayfly_go_web/src/common/utils/authFunction.ts
 delete mode 100644 mayfly_go_web/src/common/utils/formatTime.ts
 create mode 100644 mayfly_go_web/src/common/utils/mitt.ts
 create mode 100644 mayfly_go_web/src/components/iconSelector/list.vue
 rename mayfly_go_web/src/{common/utils/authDirective.ts => directive/auth.ts} (68%)
 rename mayfly_go_web/src/{common/utils/directive.ts => directive/index.ts} (59%)
 rename mayfly_go_web/src/{common/utils/customDirective.ts => directive/waves.ts} (100%)
 delete mode 100644 mayfly_go_web/src/router/imports.ts
 create mode 100644 mayfly_go_web/src/store/keepAliveNames.ts
 delete mode 100644 mayfly_go_web/src/store/modules/keepAliveNames.ts
 delete mode 100644 mayfly_go_web/src/store/modules/routesList.ts
 delete mode 100644 mayfly_go_web/src/store/modules/userInfos.ts
 create mode 100644 mayfly_go_web/src/store/routesList.ts
 rename mayfly_go_web/src/store/{modules => }/themeConfig.ts (89%)
 create mode 100644 mayfly_go_web/src/store/userInfo.ts
 create mode 100644 mayfly_go_web/src/types/env.d.ts
 rename mayfly_go_web/src/{store/interface/index.ts => types/pinia.d.ts} (69%)
 rename mayfly_go_web/{ => src/types}/shim.d.ts (65%)
 rename mayfly_go_web/{ => src/types}/source.d.ts (62%)
 rename mayfly_go_web/src/views/ops/machine/{ServiceManage.vue => ScriptManage.vue} (100%)
 delete mode 100644 mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue

diff --git a/mayfly_go_web/.env.production b/mayfly_go_web/.env.production
index e038d163..872886b0 100644
--- a/mayfly_go_web/.env.production
+++ b/mayfly_go_web/.env.production
@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # 线上环境接口地址
-VITE_API_URL = 'http://api.mayflygo.1yue.net/api'
\ No newline at end of file
+VITE_API_URL = '/api'
\ No newline at end of file
diff --git a/mayfly_go_web/.eslintrc.js b/mayfly_go_web/.eslintrc.js
index 59bccd0f..bad6addb 100644
--- a/mayfly_go_web/.eslintrc.js
+++ b/mayfly_go_web/.eslintrc.js
@@ -11,21 +11,33 @@ module.exports = {
 		parser: '@typescript-eslint/parser',
 		sourceType: 'module',
 	},
-	extends: ['plugin:vue/essential'],
-	// plugins: ['vue', '@typescript-eslint'],
+	extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
+	plugins: ['vue', '@typescript-eslint'],
+	overrides: [
+		{
+			files: ['*.ts', '*.tsx', '*.vue'],
+			rules: {
+				'no-undef': 'off',
+			},
+		},
+	],
 	rules: {
 		// http://eslint.cn/docs/rules/
 		// https://eslint.vuejs.org/rules/
-		'@type-eslint/ban-ts-ignore': 'off',
-		'@type-eslint/explicit-function-return-type': 'off',
-		'@type-eslint/no-explicit-any': 'off',
-		'@type-eslint/no-var-requires': 'off',
-		'@type-eslint/no-empty-function': 'off',
-		'@type-eslint/no-use-before-define': 'off',
-		'@type-eslint/ban-ts-comment': 'off',
-		'@type-eslint/ban-types': 'off',
-		'@type-eslint/no-non-null-assertion': 'off',
-		'@type-eslint/explicit-module-boundary-types': 'off',
+		// https://typescript-eslint.io/rules/no-unused-vars/
+		'@typescript-eslint/ban-ts-ignore': 'off',
+		'@typescript-eslint/explicit-function-return-type': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+		'@typescript-eslint/no-var-requires': 'off',
+		'@typescript-eslint/no-empty-function': 'off',
+		'@typescript-eslint/no-use-before-define': 'off',
+		'@typescript-eslint/ban-ts-comment': 'off',
+		'@typescript-eslint/ban-types': 'off',
+		'@typescript-eslint/no-non-null-assertion': 'off',
+		'@typescript-eslint/explicit-module-boundary-types': 'off',
+		'@typescript-eslint/no-redeclare': 'error',
+		'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+		'@typescript-eslint/no-unused-vars': [2],
 		'vue/custom-event-name-casing': 'off',
 		'vue/attributes-order': 'off',
 		'vue/one-component-per-file': 'off',
@@ -43,6 +55,12 @@ module.exports = {
 		'vue/no-v-html': 'off',
 		'vue/comment-directive': 'off',
 		'vue/no-parsing-error': 'off',
+		'vue/no-deprecated-v-on-native-modifier': 'off',
+		'vue/multi-word-component-names': 'off',
+		'no-useless-escape': 'off',
+		'no-sparse-arrays': 'off',
+		'no-prototype-builtins': 'off',
+		'no-constant-condition': 'off',
 		'no-use-before-define': 'off',
 		'no-restricted-globals': 'off',
 		'no-restricted-syntax': 'off',
@@ -51,5 +69,8 @@ module.exports = {
 		'no-multiple-template-root': 'off',
 		'no-unused-vars': 'error',
 		'no-v-model-argument': 'off',
+		'no-case-declarations': 'off',
+		'no-console': 'error',
+		'no-redeclare': 'off',
 	},
-};
+};
\ No newline at end of file
diff --git a/mayfly_go_web/package.json b/mayfly_go_web/package.json
index c9a006ef..c54a6409 100644
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -15,7 +15,7 @@
     "countup.js": "^2.0.7",
     "cropperjs": "^1.5.11",
     "echarts": "^5.4.0",
-    "element-plus": "^2.2.33",
+    "element-plus": "^2.3.0",
     "jsencrypt": "^3.3.1",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
@@ -29,7 +29,7 @@
     "vue": "^3.2.47",
     "vue-clipboard3": "^1.0.1",
     "vue-router": "^4.1.6",
-    "vuex": "^4.0.2",
+    "pinia": "^2.0.33",
     "xterm": "^5.1.0",
     "xterm-addon-fit": "^0.7.0"
   },
@@ -40,7 +40,7 @@
     "@types/sortablejs": "^1.10.6",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/compiler-sfc": "^3.0.11",
     "dotenv": "^10.0.0",
     "eslint": "^8.35.0",
diff --git a/mayfly_go_web/plugins.d.ts b/mayfly_go_web/plugins.d.ts
deleted file mode 100644
index 8578ca42..00000000
--- a/mayfly_go_web/plugins.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'vue-grid-layout';
diff --git a/mayfly_go_web/src/App.vue b/mayfly_go_web/src/App.vue
index f8d6e2fd..ad8b8586 100644
--- a/mayfly_go_web/src/App.vue
+++ b/mayfly_go_web/src/App.vue
@@ -1,74 +1,69 @@
 <template>
-    <router-view v-show="getThemeConfig.lockScreenTime !== 0" />
-    <LockScreen v-if="getThemeConfig.isLockScreen" />
-    <Setings ref="setingsRef" v-show="getThemeConfig.lockScreenTime !== 0" />
+    <router-view v-show="themeConfig.lockScreenTime !== 0" />
+    <LockScreen v-if="themeConfig.isLockScreen" />
+    <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime !== 0" />
 </template>
 
-<script lang="ts">
-import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch } from 'vue';
+<script setup lang="ts" name="app">
+import { ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from '@/store/index.ts';
-import { getLocal } from '@/common/utils/storage.ts';
+// import { useTagsViewRoutes } from '@/store/tagsViewRoutes';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { getLocal } from '@/common/utils/storage';
 import LockScreen from '@/views/layout/lockScreen/index.vue';
 import Setings from '@/views/layout/navBars/breadcrumb/setings.vue';
-import Watermark from '@/common/utils/wartermark.ts';
+import Watermark from '@/common/utils/wartermark';
+import mittBus from '@/common/utils/mitt';
 
-export default defineComponent({
-    name: 'app',
-    components: { LockScreen, Setings },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const setingsRef = ref();
-        const route = useRoute();
-        const store = useStore();
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 布局配置弹窗打开
-        const openSetingsDrawer = () => {
-            setingsRef.value.openDrawer();
-        };
-        // 设置初始化，防止刷新时恢复默认
-        onBeforeMount(() => {
-            // 设置批量第三方 icon 图标
-            // setIntroduction.cssCdn();
-            // // 设置批量第三方 js
-            // setIntroduction.jsCdn();
-        });
-        // 页面加载时
-        onMounted(() => {
-            nextTick(() => {
-                // 监听布局配置弹窗点击打开
-                proxy.mittBus.on('openSetingsDrawer', () => {
-                    openSetingsDrawer();
-                });
-                // 获取缓存中的布局配置
-                if (getLocal('themeConfig')) {
-                    store.dispatch('themeConfig/setThemeConfig', getLocal('themeConfig'));
-                    document.documentElement.style.cssText = getLocal('themeConfigStyle');
-                }
-            });
-        });
-        // 页面销毁时，关闭监听布局配置
-        onUnmounted(() => {
-            proxy.mittBus.off('openSetingsDrawer', () => {});
-        });
-        // 监听路由的变化，设置网站标题
-        watch(
-            () => route.path,
-            () => {
-                nextTick(() => {
-                    // 路由变化更新水印
-                    Watermark.use();
-                    document.title = `${route.meta.title} - ${getThemeConfig.value.globalTitle}` || getThemeConfig.value.globalTitle;
-                });
-            }
-        );
-        return {
-            setingsRef,
-            getThemeConfig,
-        };
-    },
+const setingsRef = ref();
+const route = useRoute();
+
+const themeConfigStores = useThemeConfig();
+const { themeConfig } = storeToRefs(themeConfigStores);
+
+// 布局配置弹窗打开
+const openSetingsDrawer = () => {
+    setingsRef.value.openDrawer();
+};
+
+// 设置初始化，防止刷新时恢复默认
+onBeforeMount(() => {
+    // 设置批量第三方 icon 图标
+    // setIntroduction.cssCdn();
+    // // 设置批量第三方 js
+    // setIntroduction.jsCdn();
 });
+
+// 页面加载时
+onMounted(() => {
+    nextTick(() => {
+        // 监听布局配置弹窗点击打开
+        mittBus.on('openSetingsDrawer', () => {
+            openSetingsDrawer();
+        });
+        // 获取缓存中的布局配置
+        if (getLocal('themeConfig')) {
+            themeConfigStores.setThemeConfig({ themeConfig: getLocal('themeConfig') })
+            document.documentElement.style.cssText = getLocal('themeConfigStyle');
+        }
+    });
+});
+
+// 页面销毁时，关闭监听布局配置
+onUnmounted(() => {
+    mittBus.off('openSetingsDrawer', () => { });
+});
+
+// 监听路由的变化，设置网站标题
+watch(
+    () => route.path,
+    () => {
+        nextTick(() => {
+            // 路由变化更新水印
+            Watermark.use();
+            document.title = `${route.meta.title} - ${themeConfig.value.globalTitle}` || themeConfig.value.globalTitle;
+        });
+    }
+);
 </script>
diff --git a/mayfly_go_web/src/common/utils/authFunction.ts b/mayfly_go_web/src/common/utils/authFunction.ts
deleted file mode 100644
index 54797c16..00000000
--- a/mayfly_go_web/src/common/utils/authFunction.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { store } from '@/store/index.ts';
-import { judementSameArr } from '@/common/utils/arrayOperation.ts';
-
-// 单个权限验证
-export function auth(value: string) {
-    return store.state.userInfos.userInfos.permissions.some((v: any) => v === value);
-}
-
-// 多个权限验证，满足一个则为 true
-export function auths(value: Array<string>) {
-    let flag = false;
-    store.state.userInfos.userInfos.permissions.map((val: any) => {
-        value.map((v: any) => {
-            if (val === v) flag = true;
-        });
-    });
-    return flag;
-}
-
-// 多个权限验证，全部满足则为 true
-export function authAll(value: Array<string>) {
-    return judementSameArr(value, store.state.userInfos.userInfos.permissions);
-}
diff --git a/mayfly_go_web/src/common/utils/format.ts b/mayfly_go_web/src/common/utils/format.ts
index 25e3bc2b..430540b2 100644
--- a/mayfly_go_web/src/common/utils/format.ts
+++ b/mayfly_go_web/src/common/utils/format.ts
@@ -72,4 +72,124 @@ export function formatJsonString(txt: string, compress: boolean) {
         indent = 0;
     notify('', data, isLast, indent, false);
     return draw.join('');
+}
+
+/*
+ * 年(Y) 可用1-4个占位符
+ * 月(m)、日(d)、小时(H)、分(M)、秒(S) 可用1-2个占位符
+ * 星期(W) 可用1-3个占位符
+ * 季度(q为阿拉伯数字，Q为中文数字)可用1或4个占位符
+ *
+ * let date = new Date()
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS")           // 2020-02-09 14:04:23
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS Q")         // 2020-02-09 14:09:03 一
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW")       // 2020-02-09 14:45:12 星期日
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS QQQQ")      // 2020-02-09 14:09:36 第一季度
+ * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW QQQQ")  // 2020-02-09 14:46:12 星期日 第一季度
+ */
+export function formatDate(date: Date, format: string) {
+    let we = date.getDay(); // 星期
+    let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
+    const opt: any = {
+        'Y+': date.getFullYear().toString(), // 年
+        'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
+        'd+': date.getDate().toString(), // 日
+        'H+': date.getHours().toString(), // 时
+        'M+': date.getMinutes().toString(), // 分
+        'S+': date.getSeconds().toString(), // 秒
+        'q+': qut, // 季度
+    };
+    // 中文数字 (星期)
+    const week: any = {
+        '0': '日',
+        '1': '一',
+        '2': '二',
+        '3': '三',
+        '4': '四',
+        '5': '五',
+        '6': '六',
+    };
+    // 中文数字（季度）
+    const quarter: any = {
+        '1': '一',
+        '2': '二',
+        '3': '三',
+        '4': '四',
+    };
+    if (/(W+)/.test(format))
+        format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
+    if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
+    for (let k in opt) {
+        let r = new RegExp('(' + k + ')').exec(format);
+        // 若输入的长度不为1，则前面补零
+        if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
+    }
+    return format;
+}
+
+/**
+ * 10秒：  10 * 1000
+ * 1分：   60 * 1000
+ * 1小时： 60 * 60 * 1000
+ * 24小时：60 * 60 * 24 * 1000
+ * 3天：   60 * 60* 24 * 1000 * 3
+ *
+ * let data = new Date()
+ * formatPast(data)                                           // 刚刚
+ * formatPast(data - 11 * 1000)                               // 11秒前
+ * formatPast(data - 2 * 60 * 1000)                           // 2分钟前
+ * formatPast(data - 60 * 60 * 2 * 1000)                      // 2小时前
+ * formatPast(data - 60 * 60 * 2 * 1000)                      // 2小时前
+ * formatPast(data - 60 * 60 * 71 * 1000)                     // 2天前
+ * formatPast("2020-06-01")                                   // 2020-06-01
+ * formatPast("2020-06-01", "YYYY-mm-dd HH:MM:SS WWW QQQQ")   // 2020-06-01 08:00:00 星期一 第二季度
+ */
+export function formatPast(param: any, format: string = 'YYYY-mm-dd') {
+    // 传入格式处理、存储转换值
+    let t: any, s: any;
+    // 获取js 时间戳
+    let time: any = new Date().getTime();
+    // 是否是对象
+    typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
+    // 当前时间戳 - 传入时间戳
+    time = Number.parseInt(`${time - t}`);
+    if (time < 10000) {
+        // 10秒内
+        return '刚刚';
+    } else if (time < 60000 && time >= 10000) {
+        // 超过10秒少于1分钟内
+        s = Math.floor(time / 1000);
+        return `${s}秒前`;
+    } else if (time < 3600000 && time >= 60000) {
+        // 超过1分钟少于1小时
+        s = Math.floor(time / 60000);
+        return `${s}分钟前`;
+    } else if (time < 86400000 && time >= 3600000) {
+        // 超过1小时少于24小时
+        s = Math.floor(time / 3600000);
+        return `${s}小时前`;
+    } else if (time < 259200000 && time >= 86400000) {
+        // 超过1天少于3天内
+        s = Math.floor(time / 86400000);
+        return `${s}天前`;
+    } else {
+        // 超过3天
+        let date = typeof param === 'string' || 'object' ? new Date(param) : param;
+        return formatDate(date, format);
+    }
+}
+
+/**
+ * formatAxis(new Date())   // 上午好
+ */
+export function formatAxis(param: any) {
+    let hour: number = new Date(param).getHours();
+    if (hour < 6) return '凌晨好';
+    else if (hour < 9) return '早上好';
+    else if (hour < 12) return '上午好';
+    else if (hour < 14) return '中午好';
+    else if (hour < 17) return '下午好';
+    else if (hour < 19) return '傍晚好';
+    else if (hour < 22) return '晚上好';
+    else return '夜里好';
 }
\ No newline at end of file
diff --git a/mayfly_go_web/src/common/utils/formatTime.ts b/mayfly_go_web/src/common/utils/formatTime.ts
deleted file mode 100644
index a1d803e4..00000000
--- a/mayfly_go_web/src/common/utils/formatTime.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * 年(Y) 可用1-4个占位符
- * 月(m)、日(d)、小时(H)、分(M)、秒(S) 可用1-2个占位符
- * 星期(W) 可用1-3个占位符
- * 季度(q为阿拉伯数字，Q为中文数字)可用1或4个占位符
- *
- * let date = new Date()
- * formatDate(date, "YYYY-mm-dd HH:MM:SS")           // 2020-02-09 14:04:23
- * formatDate(date, "YYYY-mm-dd HH:MM:SS Q")         // 2020-02-09 14:09:03 一
- * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW")       // 2020-02-09 14:45:12 星期日
- * formatDate(date, "YYYY-mm-dd HH:MM:SS QQQQ")      // 2020-02-09 14:09:36 第一季度
- * formatDate(date, "YYYY-mm-dd HH:MM:SS WWW QQQQ")  // 2020-02-09 14:46:12 星期日 第一季度
- */
-export function formatDate(date: Date, format: string) {
-    let we = date.getDay(); // 星期
-    let qut = Math.floor((date.getMonth() + 3) / 3).toString(); // 季度
-    const opt: any = {
-        'Y+': date.getFullYear().toString(), // 年
-        'm+': (date.getMonth() + 1).toString(), // 月(月份从0开始，要+1)
-        'd+': date.getDate().toString(), // 日
-        'H+': date.getHours().toString(), // 时
-        'M+': date.getMinutes().toString(), // 分
-        'S+': date.getSeconds().toString(), // 秒
-        'q+': qut, // 季度
-    };
-    // 中文数字 (星期)
-    const week: any = {
-        '0': '日',
-        '1': '一',
-        '2': '二',
-        '3': '三',
-        '4': '四',
-        '5': '五',
-        '6': '六',
-    };
-    // 中文数字（季度）
-    const quarter: any = {
-        '1': '一',
-        '2': '二',
-        '3': '三',
-        '4': '四',
-    };
-    if (/(W+)/.test(format))
-        format = format.replace(RegExp.$1, RegExp.$1.length > 1 ? (RegExp.$1.length > 2 ? '星期' + week[we] : '周' + week[we]) : week[we]);
-    if (/(Q+)/.test(format)) format = format.replace(RegExp.$1, RegExp.$1.length == 4 ? '第' + quarter[qut] + '季度' : quarter[qut]);
-    for (let k in opt) {
-        let r = new RegExp('(' + k + ')').exec(format);
-        // 若输入的长度不为1，则前面补零
-        if (r) format = format.replace(r[1], RegExp.$1.length == 1 ? opt[k] : opt[k].padStart(RegExp.$1.length, '0'));
-    }
-    return format;
-}
-
-/**
- * 10秒：  10 * 1000
- * 1分：   60 * 1000
- * 1小时： 60 * 60 * 1000
- * 24小时：60 * 60 * 24 * 1000
- * 3天：   60 * 60* 24 * 1000 * 3
- *
- * let data = new Date()
- * formatPast(data)                                           // 刚刚
- * formatPast(data - 11 * 1000)                               // 11秒前
- * formatPast(data - 2 * 60 * 1000)                           // 2分钟前
- * formatPast(data - 60 * 60 * 2 * 1000)                      // 2小时前
- * formatPast(data - 60 * 60 * 2 * 1000)                      // 2小时前
- * formatPast(data - 60 * 60 * 71 * 1000)                     // 2天前
- * formatPast("2020-06-01")                                   // 2020-06-01
- * formatPast("2020-06-01", "YYYY-mm-dd HH:MM:SS WWW QQQQ")   // 2020-06-01 08:00:00 星期一 第二季度
- */
-export function formatPast(param: any, format: string = 'YYYY-mm-dd') {
-    // 传入格式处理、存储转换值
-    let t: any, s: any;
-    // 获取js 时间戳
-    let time: any = new Date().getTime();
-    // 是否是对象
-    typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
-    // 当前时间戳 - 传入时间戳
-    time = Number.parseInt(`${time - t}`);
-    if (time < 10000) {
-        // 10秒内
-        return '刚刚';
-    } else if (time < 60000 && time >= 10000) {
-        // 超过10秒少于1分钟内
-        s = Math.floor(time / 1000);
-        return `${s}秒前`;
-    } else if (time < 3600000 && time >= 60000) {
-        // 超过1分钟少于1小时
-        s = Math.floor(time / 60000);
-        return `${s}分钟前`;
-    } else if (time < 86400000 && time >= 3600000) {
-        // 超过1小时少于24小时
-        s = Math.floor(time / 3600000);
-        return `${s}小时前`;
-    } else if (time < 259200000 && time >= 86400000) {
-        // 超过1天少于3天内
-        s = Math.floor(time / 86400000);
-        return `${s}天前`;
-    } else {
-        // 超过3天
-        let date = typeof param === 'string' || 'object' ? new Date(param) : param;
-        return formatDate(date, format);
-    }
-}
-
-/**
- * formatAxis(new Date())   // 上午好
- */
-export function formatAxis(param: any) {
-    let hour: number = new Date(param).getHours();
-    if (hour < 6) return '凌晨好';
-    else if (hour < 9) return '早上好';
-    else if (hour < 12) return '上午好';
-    else if (hour < 14) return '中午好';
-    else if (hour < 17) return '下午好';
-    else if (hour < 19) return '傍晚好';
-    else if (hour < 22) return '晚上好';
-    else return '夜里好';
-}
diff --git a/mayfly_go_web/src/common/utils/mitt.ts b/mayfly_go_web/src/common/utils/mitt.ts
new file mode 100644
index 00000000..2e44d1b9
--- /dev/null
+++ b/mayfly_go_web/src/common/utils/mitt.ts
@@ -0,0 +1,8 @@
+// https://www.npmjs.com/package/mitt
+import mitt, { Emitter } from 'mitt';
+
+// 类型
+const emitter: Emitter<any> = mitt<any>();
+
+// 导出
+export default emitter;
\ No newline at end of file
diff --git a/mayfly_go_web/src/components/auth/auth.vue b/mayfly_go_web/src/components/auth/auth.vue
index ce260227..5c70edc6 100644
--- a/mayfly_go_web/src/components/auth/auth.vue
+++ b/mayfly_go_web/src/components/auth/auth.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { useStore } from '/@/store/index.ts';
+import { useUserInfo } from '@/store/userInfo';
 export default {
     name: 'auth',
     props: {
@@ -16,10 +16,9 @@ export default {
         },
     },
     setup(props) {
-        const store = useStore();
         // 获取 vuex 中的用户权限
         const getUserAuthBtnList = computed(() => {
-            return store.state.userInfos.userInfos.authBtnList.some((v: any) => v === props.value);
+            return useUserInfo().userInfo.authBtnList.some((v: any) => v === props.value);
         });
         return {
             getUserAuthBtnList,
diff --git a/mayfly_go_web/src/components/auth/authAll.vue b/mayfly_go_web/src/components/auth/authAll.vue
index 1e0e868e..f84d8d6f 100644
--- a/mayfly_go_web/src/components/auth/authAll.vue
+++ b/mayfly_go_web/src/components/auth/authAll.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { useStore } from '/@/store/index.ts';
+import { useUserInfo } from '@/store/userInfo';
 import { judementSameArr } from '/@/utils/arrayOperation.ts';
 export default {
     name: 'authAll',
@@ -17,10 +17,9 @@ export default {
         },
     },
     setup(props) {
-        const store = useStore();
         // 获取 vuex 中的用户权限
         const getUserAuthBtnList = computed(() => {
-            return judementSameArr(props.value, store.state.userInfos.userInfos.authBtnList);
+            return judementSameArr(props.value, useUserInfo().userInfo.authBtnList);
         });
         return {
             getUserAuthBtnList,
diff --git a/mayfly_go_web/src/components/auth/auths.vue b/mayfly_go_web/src/components/auth/auths.vue
index 6d84e200..33f27262 100644
--- a/mayfly_go_web/src/components/auth/auths.vue
+++ b/mayfly_go_web/src/components/auth/auths.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { useStore } from '/@/store/index.ts';
+import { useUserInfo } from '@/store/userInfo';
 export default {
     name: 'auths',
     props: {
@@ -16,11 +16,10 @@ export default {
         },
     },
     setup(props) {
-        const store = useStore();
         // 获取 vuex 中的用户权限
         const getUserAuthBtnList = computed(() => {
             let flag = false;
-            store.state.userInfos.userInfos.authBtnList.map((val: any) => {
+            useUserInfo().userInfo.authBtnList.map((val: any) => {
                 props.value.map((v) => {
                     if (val === v) flag = true;
                 });
diff --git a/mayfly_go_web/src/components/iconSelector/index.vue b/mayfly_go_web/src/components/iconSelector/index.vue
index 14eb011d..a2bfb3cc 100644
--- a/mayfly_go_web/src/components/iconSelector/index.vue
+++ b/mayfly_go_web/src/components/iconSelector/index.vue
@@ -1,261 +1,240 @@
 <template>
-    <div class="icon-selector">
-        <el-popover placement="bottom" :width="450" v-model:visible="fontIconVisible" popper-class="icon-selector-popper">
-            <template #reference>
-                <el-input
-                    v-model="fontIconSearch"
-                    :placeholder="fontIconPlaceholder"
-                    :clearable="clearable"
-                    :disabled="disabled"
-                    :size="size"
-                    ref="inputWidthRef"
-                    @clear="onClearFontIcon"
-                    @focus="onIconFocus"
-                    @blur="onIconBlur"
-                >
-                    <template #prepend>
-                        <SvgIcon :name="prepend" class="font14" />
-                    </template>
-                </el-input>
-            </template>
-            <transition name="el-zoom-in-top">
-                <div class="icon-selector-warp" v-show="fontIconVisible">
-                    <div class="icon-selector-warp-title flex">
-                        <div class="flex-auto">{{ title }}</div>
-                        <div class="icon-selector-warp-title-tab" v-if="type === 'all'">
-                            <span :class="{ 'span-active': fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标"
-                                >ali</span
-                            >
-                            <span
-                                :class="{ 'span-active': fontIconType === 'ele' }"
-                                @click="onIconChange('ele')"
-                                class="ml10"
-                                title="elementPlus 图标"
-                                >ele</span
-                            >
-                            <span
-                                :class="{ 'span-active': fontIconType === 'awe' }"
-                                @click="onIconChange('awe')"
-                                class="ml10"
-                                title="fontawesome 图标"
-                                >awe</span
-                            >
-                        </div>
-                    </div>
-                    <div class="icon-selector-warp-row">
-                        <el-scrollbar ref="selectorScrollbarRef">
-                            <el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
-                                <el-col
-                                    :xs="6"
-                                    :sm="4"
-                                    :md="4"
-                                    :lg="4"
-                                    :xl="4"
-                                    @click="onColClick(v)"
-                                    v-for="(v, k) in fontIconSheetsFilterList"
-                                    :key="k"
-                                >
-                                    <div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconPrefix === v }">
-                                        <div class="flex-margin">
-                                            <div class="icon-selector-warp-item-value">
-                                                <SvgIcon :name="v" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </el-col>
-                            </el-row>
-                            <el-empty :image-size="100" v-if="fontIconSheetsFilterList.length <= 0" :description="emptyDescription"></el-empty>
-                        </el-scrollbar>
-                    </div>
-                </div>
-            </transition>
-        </el-popover>
-    </div>
+	<div class="icon-selector w100 h100">
+		<el-input
+			v-model="state.fontIconSearch"
+			:placeholder="state.fontIconPlaceholder"
+			:clearable="clearable"
+			:disabled="disabled"
+			:size="size"
+			ref="inputWidthRef"
+			@clear="onClearFontIcon"
+			@focus="onIconFocus"
+			@blur="onIconBlur"
+		>
+			<template #prepend>
+				<SvgIcon
+					:name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix"
+					class="font14"
+				/>
+				<!-- <i v-else :class="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="font14"></i> -->
+			</template>
+		</el-input>
+		<el-popover
+			placement="bottom"
+			:width="state.fontIconWidth"
+			transition="el-zoom-in-top"
+			popper-class="icon-selector-popper"
+			trigger="click"
+			:virtual-ref="inputWidthRef"
+			virtual-triggering
+		>
+			<template #default>
+				<div class="icon-selector-warp">
+					<div class="icon-selector-warp-title">{{ title }}</div>
+					<el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
+						<!-- <el-tab-pane lazy label="ali" name="ali">
+							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
+						</el-tab-pane> -->
+						<el-tab-pane lazy label="ele" name="ele">
+							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
+						</el-tab-pane>
+						<!-- <el-tab-pane lazy label="awe" name="awe">
+							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
+						</el-tab-pane> -->
+					</el-tabs>
+				</div>
+			</template>
+		</el-popover>
+	</div>
 </template>
 
-<script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed, watch } from 'vue';
+<script setup lang="ts" name="iconSelector">
+import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
 import initIconfont from '@/common/utils/getStyleSheets';
-export default {
-    name: 'iconSelector',
-    emits: ['update:modelValue', 'get', 'clear'],
-    props: {
-        // 输入框前置内容
-        prepend: {
-            type: String,
-            default: () => 'Pointer',
-        },
-        // 输入框占位文本
-        placeholder: {
-            type: String,
-            default: () => '请输入内容搜索图标或者选择图标',
-        },
-        // 输入框占位文本
-        size: {
-            type: String,
-            default: () => 'default',
-        },
-        // 弹窗标题
-        title: {
-            type: String,
-            default: () => '请选择图标',
-        },
-        // icon 图标类型
-        type: {
-            type: String,
-            default: () => 'ele',
-        },
-        // 禁用
-        disabled: {
-            type: Boolean,
-            default: () => false,
-        },
-        // 是否可清空
-        clearable: {
-            type: Boolean,
-            default: () => true,
-        },
-        // 自定义空状态描述文字
-        emptyDescription: {
-            type: String,
-            default: () => '无相关图标',
-        },
-        // 双向绑定值，字段名为固定，改了之后将不生效
-        // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
-        modelValue: String,
-    },
-    setup(props, { emit }) {
-        const inputWidthRef = ref();
-        const selectorScrollbarRef = ref();
-        const state: any = reactive({
-            fontIconPrefix: '',
-            fontIconVisible: false,
-            fontIconWidth: 0,
-            fontIconSearch: '',
-            fontIconTabsIndex: 0,
-            fontIconSheetsList: [],
-            fontIconPlaceholder: '',
-            fontIconType: 'ali',
-            fontIconShow: true,
-        });
-        // 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
-        const onIconFocus = () => {
-            state.fontIconVisible = true;
-            if (!props.modelValue) return false;
-            state.fontIconSearch = '';
-            state.fontIconPlaceholder = props.modelValue;
-        };
-        // 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
-        const onIconBlur = () => {
-            state.fontIconVisible = false;
-            setTimeout(() => {
-                const icon = state.fontIconSheetsList.filter((icon: string) => icon === state.fontIconSearch);
-                if (icon.length <= 0) state.fontIconSearch = '';
-            }, 300);
-        };
-        // 处理 icon 双向绑定数值回显
-        const initModeValueEcho = () => {
-            if (props.modelValue === '') return false;
-            state.fontIconPlaceholder = props.modelValue;
-            state.fontIconPrefix = props.modelValue;
-        };
-        // 图标搜索及图标数据显示
-        const fontIconSheetsFilterList = computed(() => {
-            if (!state.fontIconSearch) return state.fontIconSheetsList;
-            let search = state.fontIconSearch.trim().toLowerCase();
-            return state.fontIconSheetsList.filter((item: any) => {
-                if (item.toLowerCase().indexOf(search) !== -1) return item;
-            });
-        });
-        // 获取 input 的宽度
-        const getInputWidth = () => {
-            nextTick(() => {
-                state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
-            });
-        };
-        // 监听页面宽度改变
-        const initResize = () => {
-            window.addEventListener('resize', () => {
-                getInputWidth();
-            });
-        };
-        // 初始化数据
-        const initFontIconData = async (type: string) => {
-            state.fontIconSheetsList = [];
-            if (type === 'ali') {
-                // await initIconfont.ali().then((res: any) => {
-                //     // 阿里字体图标使用 `iconfont xxx`
-                //     state.fontIconSheetsList = res.map((i) => `iconfont ${i}`);
-                // });
-            } else if (type === 'ele') {
-                await initIconfont.ele().then((res: any) => {
-                    state.fontIconSheetsList = res;
-                });
-            } else if (type === 'awe') {
-                // await initIconfont.awe().then((res: any) => {
-                //     // fontawesome字体图标使用 `fa xxx`
-                //     state.fontIconSheetsList = res.map((i) => `fa ${i}`);
-                // });
-            }
-            // 初始化 input 的 placeholder
-            // 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
-            state.fontIconPlaceholder = props.placeholder;
-            // 初始化双向绑定回显
-            initModeValueEcho();
-            // 切换时，滚动条置顶。感兴趣可以使用 keep-alive <component :is="xxx"/> 进行缓存
-            selectorScrollbarRef.value.wrap$.scrollTop = 0;
-        };
-        // 图标点击切换
-        const onIconChange = (type: string) => {
-            state.fontIconType = type;
-            initFontIconData(type);
-        };
-        // 获取当前点击的 icon 图标
-        const onColClick = (v: any) => {
-            state.fontIconPlaceholder = v;
-            state.fontIconVisible = false;
-            state.fontIconPrefix = v;
-            emit('get', state.fontIconPrefix);
-            emit('update:modelValue', state.fontIconPrefix);
-        };
-        // 清空当前点击的 icon 图标
-        const onClearFontIcon = () => {
-            state.fontIconPrefix = '';
-            emit('clear', state.fontIconPrefix);
-            emit('update:modelValue', state.fontIconPrefix);
-        };
-        // 页面加载时
-        onMounted(() => {
-            // 判断默认进来是什么类型图标，进行 tab 回显
-            if (props.type === 'all') {
-                // if (props.modelValue?.indexOf('iconfont') > -1) onIconChange('ali');
-                // else if (props.modelValue?.indexOf('element') > -1) onIconChange('ele');
-                // else if (props.modelValue?.indexOf('fa') > -1) onIconChange('awe');
-                // else onIconChange('ali');
-            } else {
-                onIconChange(props.type);
-            }
-            initResize();
-            getInputWidth();
-        });
-        // 监听双向绑定 modelValue 的变化
-        watch(
-            () => props.modelValue,
-            () => {
-                initModeValueEcho();
-            }
-        );
-        return {
-            inputWidthRef,
-            selectorScrollbarRef,
-            fontIconSheetsFilterList,
-            onColClick,
-            onIconChange,
-            onClearFontIcon,
-            onIconFocus,
-            onIconBlur,
-            ...toRefs(state),
-        };
-    },
+import '@/theme/iconSelector.scss';
+
+// 定义父组件传过来的值
+const props = defineProps({
+	// 输入框前置内容
+	prepend: {
+		type: String,
+		default: () => 'Pointer',
+	},
+	// 输入框占位文本
+	placeholder: {
+		type: String,
+		default: () => '请输入内容搜索图标或者选择图标',
+	},
+	// 输入框占位文本
+	size: {
+		type: String,
+		default: () => 'default',
+	},
+	// 弹窗标题
+	title: {
+		type: String,
+		default: () => '请选择图标',
+	},
+	// 禁用
+	disabled: {
+		type: Boolean,
+		default: () => false,
+	},
+	// 是否可清空
+	clearable: {
+		type: Boolean,
+		default: () => true,
+	},
+	// 自定义空状态描述文字
+	emptyDescription: {
+		type: String,
+		default: () => '无相关图标',
+	},
+	// 双向绑定值，默认为 modelValue，
+	// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
+	// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
+	modelValue: String,
+});
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['update:modelValue', 'get', 'clear']);
+
+// 引入组件
+const IconList = defineAsyncComponent(() => import('@/components/iconSelector/list.vue'));
+
+// 定义变量内容
+const inputWidthRef = ref();
+const state = reactive({
+	fontIconPrefix: '',
+	fontIconWidth: 0,
+	fontIconSearch: '',
+	fontIconPlaceholder: '',
+	fontIconTabActive: 'ele',
+	fontIconList: {
+		ali: [],
+		ele: [],
+		awe: [],
+	},
+});
+
+// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
+const onIconFocus = () => {
+	if (!props.modelValue) return false;
+	state.fontIconSearch = '';
+	state.fontIconPlaceholder = props.modelValue;
 };
+// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
+const onIconBlur = () => {
+	const list = fontIconTabNameList();
+	setTimeout(() => {
+		const icon = list.filter((icon: string) => icon === state.fontIconSearch);
+		if (icon.length <= 0) state.fontIconSearch = '';
+	}, 300);
+};
+// 图标搜索及图标数据显示
+const fontIconSheetsFilterList = computed(() => {
+	const list = fontIconTabNameList();
+	if (!state.fontIconSearch) return list;
+	let search = state.fontIconSearch.trim().toLowerCase();
+	return list.filter((item: string) => {
+		if (item.toLowerCase().indexOf(search) !== -1) return item;
+	});
+});
+// 根据 tab name 类型设置图标
+const fontIconTabNameList = () => {
+	let iconList: any = [];
+	if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
+	else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
+	else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
+	return iconList;
+};
+// 处理 icon 双向绑定数值回显
+const initModeValueEcho = () => {
+	if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
+	(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
+	(<string | undefined>state.fontIconPrefix) = props.modelValue;
+};
+// 处理 icon 类型，用于回显时，tab 高亮与初始化数据
+const initFontIconName = () => {
+	let name = 'ele';
+	// if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
+	// else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
+	// else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
+	// 初始化 tab 高亮回显
+	state.fontIconTabActive = name;
+	return name;
+};
+// 初始化数据
+const initFontIconData = async (name: string) => {
+	if (name === 'ali') {
+		// 阿里字体图标使用 `iconfont xxx`
+		// if (state.fontIconList.ali.length > 0) return;
+		// await initIconfont.ali().then((res: any) => {
+		// 	state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`);
+		// });
+	} else if (name === 'ele') {
+		// element plus 图标
+		if (state.fontIconList.ele.length > 0) return;
+		await initIconfont.ele().then((res: any) => {
+			state.fontIconList.ele = res;
+		});
+	} else if (name === 'awe') {
+		// fontawesome字体图标使用 `fa xxx`
+		// if (state.fontIconList.awe.length > 0) return;
+		// await initIconfont.awe().then((res: any) => {
+		// 	state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
+		// });
+	}
+	// 初始化 input 的 placeholder
+	// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
+	state.fontIconPlaceholder = props.placeholder;
+	// 初始化双向绑定回显
+	initModeValueEcho();
+};
+// 图标点击切换
+const onIconClick = (pane: TabsPaneContext) => {
+	initFontIconData(pane.paneName as string);
+	inputWidthRef.value.focus();
+};
+// 获取当前点击的 icon 图标
+const onColClick = (v: string) => {
+	state.fontIconPlaceholder = v;
+	state.fontIconPrefix = v;
+	emit('get', state.fontIconPrefix);
+	emit('update:modelValue', state.fontIconPrefix);
+	inputWidthRef.value.focus();
+};
+// 清空当前点击的 icon 图标
+const onClearFontIcon = () => {
+	state.fontIconPrefix = '';
+	emit('clear', state.fontIconPrefix);
+	emit('update:modelValue', state.fontIconPrefix);
+};
+// 获取 input 的宽度
+const getInputWidth = () => {
+	nextTick(() => {
+		state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
+	});
+};
+// 监听页面宽度改变
+const initResize = () => {
+	window.addEventListener('resize', () => {
+		getInputWidth();
+	});
+};
+// 页面加载时
+onMounted(() => {
+	initFontIconData(initFontIconName());
+	initResize();
+	getInputWidth();
+});
+// 监听双向绑定 modelValue 的变化
+watch(
+	() => props.modelValue,
+	() => {
+		initModeValueEcho();
+		initFontIconName();
+	}
+);
 </script>
\ No newline at end of file
diff --git a/mayfly_go_web/src/components/iconSelector/list.vue b/mayfly_go_web/src/components/iconSelector/list.vue
new file mode 100644
index 00000000..f44f14d6
--- /dev/null
+++ b/mayfly_go_web/src/components/iconSelector/list.vue
@@ -0,0 +1,84 @@
+<template>
+	<div class="icon-selector-warp-row">
+		<el-scrollbar ref="selectorScrollbarRef">
+			<el-row :gutter="10" v-if="props.list.length > 0">
+				<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" v-for="(v, k) in list" :key="k" @click="onColClick(v)">
+					<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': prefix === v }">
+						<SvgIcon :name="v" />
+					</div>
+				</el-col>
+			</el-row>
+			<el-empty :image-size="100" v-if="list.length <= 0" :description="empty"></el-empty>
+		</el-scrollbar>
+	</div>
+</template>
+
+<script setup lang="ts" name="iconSelectorList">
+// 定义父组件传过来的值
+const props = defineProps({
+	// 图标列表数据
+	list: {
+		type: Array,
+		default: () => [],
+	},
+	// 自定义空状态描述文字
+	empty: {
+		type: String,
+		default: () => '无相关图标',
+	},
+	// 高亮当前选中图标
+	prefix: {
+		type: String,
+		default: () => '',
+	},
+});
+
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['get-icon']);
+
+// 当前 icon 图标点击时
+const onColClick = (v: unknown | string) => {
+	emit('get-icon', v);
+};
+</script>
+
+<style scoped lang="scss">
+.icon-selector-warp-row {
+	height: 230px;
+	overflow: hidden;
+	.el-row {
+		padding: 15px;
+	}
+	.el-scrollbar__bar.is-horizontal {
+		display: none;
+	}
+	.icon-selector-warp-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border: 1px solid var(--el-border-color);
+		border-radius: 5px;
+		margin-bottom: 10px;
+		height: 30px;
+		i {
+			font-size: 20px;
+			color: var(--el-text-color-regular);
+		}
+		&:hover {
+			cursor: pointer;
+			background-color: var(--el-color-primary-light-9);
+			border: 1px solid var(--el-color-primary-light-5);
+			i {
+				color: var(--el-color-primary);
+			}
+		}
+	}
+	.icon-selector-active {
+		background-color: var(--el-color-primary-light-9);
+		border: 1px solid var(--el-color-primary-light-5);
+		i {
+			color: var(--el-color-primary);
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/mayfly_go_web/src/components/svgIcon/index.vue b/mayfly_go_web/src/components/svgIcon/index.vue
index 26309383..94f8c065 100644
--- a/mayfly_go_web/src/components/svgIcon/index.vue
+++ b/mayfly_go_web/src/components/svgIcon/index.vue
@@ -1,24 +1,67 @@
-<script lang="ts">
-// 渲染函数：https://v3.cn.vuejs.org/guide/render-function.html
-import { h, resolveComponent, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'svgIcon',
-	props: {
-		// svg 图标组件名字
-		name: {
-			type: String,
-		},
-		// svg 大小
-		size: {
-			type: Number,
-		},
-		// svg 颜色
-		color: {
-			type: String,
-		},
+<template>
+	<i v-if="isEle" class="el-icon" :style="setIconSvgStyle">
+		<component :is="getIconName" />
+	</i>
+	<div v-else-if="isShowIconImg" :style="setIconImgOutStyle">
+		<img :src="getIconName" :style="setIconSvgInsStyle" />
+	</div>
+	<i v-else :class="getIconName" :style="setIconSvgStyle" />
+</template>
+
+<script setup lang="ts" name="svgIcon">
+import { computed } from 'vue';
+
+// 定义父组件传过来的值
+const props = defineProps({
+	// svg 图标组件名字
+	name: {
+		type: String,
 	},
-	setup(props: any) {
-        return () => h('i', { class: 'el-icon', style: `--font-size: ${props.size};--color: ${props.color}` }, [h(resolveComponent(`${props.name}`))]);
+	// svg 大小
+	size: {
+		type: Number,
+		default: () => 14,
 	},
+	// svg 颜色
+	color: {
+		type: String,
+	},
+    isEle: {
+        type: Boolean,
+        default: true,
+    }
+});
+
+// 在线链接、本地引入地址前缀
+// https://gitee.com/lyt-top/vue-next-admin/issues/I62OVL
+const linesString = ['https', 'http', '/src', '/assets', 'data:image', import.meta.env.VITE_PUBLIC_PATH];
+
+// 获取 icon 图标名称
+const getIconName = computed(() => {
+	return props?.name;
+});
+// 用于判断 element plus 自带 svg 图标的显示、隐藏
+const isShowIconSvg = computed(() => {
+	return props?.name?.startsWith('ele-');
+});
+// 用于判断在线链接、本地引入等图标显示、隐藏
+const isShowIconImg = computed(() => {
+	return linesString.find((str) => props.name?.startsWith(str));
+});
+// 设置图标样式
+const setIconSvgStyle = computed(() => {
+	return `font-size: ${props.size}px;color: ${props.color};`;
+});
+// 设置图片样式
+const setIconImgOutStyle = computed(() => {
+	return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
+});
+// 设置图片样式
+// https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0
+const setIconSvgInsStyle = computed(() => {
+	const filterStyle: string[] = [];
+	const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
+	compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
+	return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
 });
 </script>
\ No newline at end of file
diff --git a/mayfly_go_web/src/common/utils/authDirective.ts b/mayfly_go_web/src/directive/auth.ts
similarity index 68%
rename from mayfly_go_web/src/common/utils/authDirective.ts
rename to mayfly_go_web/src/directive/auth.ts
index 8fabe31a..710850a6 100644
--- a/mayfly_go_web/src/common/utils/authDirective.ts
+++ b/mayfly_go_web/src/directive/auth.ts
@@ -1,12 +1,13 @@
 import type { App } from 'vue';
-import { auth, auths, authAll } from './authFunction'
+import { useUserInfo } from '@/store/userInfo';
+import { judementSameArr } from '@/common/utils/arrayOperation';
 
 // 用户权限指令
 export function authDirective(app: App) {
     // 单个权限验证（v-auth="xxx"）
     app.directive('auth', {
         mounted(el, binding) {
-            if (!auth(binding.value)) {
+            if (!useUserInfo().userInfo.permissions.some((v: any) => v === binding.value)) {
                 parseNoAuth(el, binding);
             };
         },
@@ -14,7 +15,14 @@ export function authDirective(app: App) {
     // 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
     app.directive('auths', {
         mounted(el, binding) {
-            if (!auths(binding.value)) {
+            const value = binding.value
+            let flag = false;
+            useUserInfo().userInfo.permissions.map((val: any) => {
+                value.map((v: any) => {
+                    if (val === v) flag = true;
+                });
+            });
+            if (!flag) {
                 parseNoAuth(el, binding);
             }
         },
@@ -22,7 +30,7 @@ export function authDirective(app: App) {
     // 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
     app.directive('auth-all', {
         mounted(el, binding) {
-            if (!authAll(binding.value)) {
+            if (!judementSameArr(binding.value, useUserInfo().userInfo.permissions)) {
                 parseNoAuth(el, binding);
             };
         },
diff --git a/mayfly_go_web/src/common/utils/directive.ts b/mayfly_go_web/src/directive/index.ts
similarity index 59%
rename from mayfly_go_web/src/common/utils/directive.ts
rename to mayfly_go_web/src/directive/index.ts
index 3879136e..a0833b6a 100644
--- a/mayfly_go_web/src/common/utils/directive.ts
+++ b/mayfly_go_web/src/directive/index.ts
@@ -1,6 +1,6 @@
 import type { App } from 'vue';
-import { authDirective } from '@/common/utils/authDirective.ts';
-import { wavesDirective } from '@/common/utils/customDirective.ts';
+import { authDirective } from './auth';
+import { wavesDirective } from './waves';
 
 // 导出指令方法
 export function directive(app: App) {
diff --git a/mayfly_go_web/src/common/utils/customDirective.ts b/mayfly_go_web/src/directive/waves.ts
similarity index 100%
rename from mayfly_go_web/src/common/utils/customDirective.ts
rename to mayfly_go_web/src/directive/waves.ts
diff --git a/mayfly_go_web/src/main.ts b/mayfly_go_web/src/main.ts
index e0fd47ad..f97feeaa 100644
--- a/mayfly_go_web/src/main.ts
+++ b/mayfly_go_web/src/main.ts
@@ -1,16 +1,14 @@
 import { createApp } from 'vue';
-import App from './App.vue';
+import App from '@/App.vue';
 import router from './router';
-import { store, key } from './store';
-import { directive } from '@/common/utils/directive.ts';
-import { globalComponentSize } from '@/common/utils/componentSize.ts';
-import { dateStrFormat } from '@/common/utils/date.ts'
+import pinia from '@/store/index';
+import { directive } from '@/directive/index';
+import { globalComponentSize } from '@/common/utils/componentSize';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import '@/theme/index.scss';
-import mitt from 'mitt';
 import { ElMessage } from 'element-plus';
 
 import * as svg from '@element-plus/icons-vue';
@@ -18,15 +16,13 @@ import SvgIcon from '@/components/svgIcon/index.vue';
 import '@/assets/font/font.css'
 
 const app = createApp(App);
-// 屏蔽警告信息
-app.config.warnHandler = () => null;
 
 /**
  * 导出全局注册 element plus svg 图标
  * @param app vue 实例
  * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
  */
- function elSvg(app: any) {
+function elSvg(app: any) {
     const icons = svg as any;
     for (const i in icons) {
         app.component(`${icons[i].name}`, icons[i]);
@@ -37,22 +33,13 @@ app.config.warnHandler = () => null;
 elSvg(app);
 directive(app);
 
-app.use(router)
-    .use(store, key)
-    .use(ElementPlus, { size: globalComponentSize, locale: zhCn})
+app.use(pinia)
+    .use(router)
+    .use(ElementPlus, { size: globalComponentSize, locale: zhCn })
     .mount('#app');
 
-
-// 自定义全局过滤器
-app.config.globalProperties.$filters = {
-    dateFormat(value: any) {
-        if (!value) {
-            return ""
-        }
-        return dateStrFormat('yyyy-MM-dd HH:mm:ss', value)
-    }
-}
-
+// 屏蔽警告信息
+app.config.warnHandler = () => null;
 // 全局error处理
 app.config.errorHandler = function (err: any, vm, info) {
     // 如果是断言错误，则进行提示即可
@@ -62,5 +49,3 @@ app.config.errorHandler = function (err: any, vm, info) {
         console.error(err, info)
     }
 }
-
-app.config.globalProperties.mittBus = mitt();
diff --git a/mayfly_go_web/src/router/imports.ts b/mayfly_go_web/src/router/imports.ts
deleted file mode 100644
index 50e71b93..00000000
--- a/mayfly_go_web/src/router/imports.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import RouterParent from '@/views/layout/routerView/parent.vue';
-
-export const imports = {
-    'RouterParent': RouterParent,
-    
-    "Home": () => import('@/views/home/Home.vue'),
-    'Personal': () => import('@/views/personal/index.vue'),
-    // machine
-    "MachineList": () => import('@/views/ops/machine/MachineList.vue'),
-    "AuthCertList": () => import('@/views/ops/machine/authcert/AuthCertList.vue'),
-    // sys
-    "ResourceList": () => import('@/views/system/resource'),
-    "RoleList": () => import('@/views/system/role'),
-    "AccountList": () => import('@/views/system/account'),
-    "SyslogList": () => import('@/views/system/syslog/SyslogList.vue'),
-    "ConfigList": () => import('@/views/system/config/ConfigList.vue'),
-    // tag
-    "TagTreeList": () => import('@/views/ops/tag/TagTreeList.vue'),
-    "TeamList": () => import('@/views/ops/tag/TeamList.vue'),
-    // db
-    "DbList": () => import('@/views/ops/db/DbList.vue'),
-    "SqlExec": () => import('@/views/ops/db'),
-    // redis
-    "RedisList": () => import('@/views/ops/redis'),
-    "DataOperation": () => import('@/views/ops/redis/DataOperation.vue'),
-    // mongo
-    "MongoDataOp": () => import('@/views/ops/mongo/MongoDataOp.vue'),
-    // redis
-    "MongoList": () => import('@/views/ops/mongo/MongoList.vue'),
-}
\ No newline at end of file
diff --git a/mayfly_go_web/src/router/index.ts b/mayfly_go_web/src/router/index.ts
index 78f500f9..637d9b6e 100644
--- a/mayfly_go_web/src/router/index.ts
+++ b/mayfly_go_web/src/router/index.ts
@@ -1,14 +1,25 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
-import { store } from '@/store/index.ts';
-import { getSession, clearSession } from '@/common/utils/storage.ts';
-import { templateResolve } from '@/common/utils/string.ts'
-import { NextLoading } from '@/common/utils/loading.ts';
-import { dynamicRoutes, staticRoutes, pathMatch } from './route.ts'
-import { imports } from './imports';
+import { getSession, clearSession } from '@/common/utils/storage';
+import { templateResolve } from '@/common/utils/string'
+import { NextLoading } from '@/common/utils/loading';
+import { dynamicRoutes, staticRoutes, pathMatch } from './route'
 import openApi from '@/common/openApi';
 import sockets from '@/common/sockets';
+import pinia from '@/store/index';
+import { useThemeConfig } from '@/store/themeConfig';
+import { useUserInfo } from '@/store/userInfo';
+import { useRoutesList } from '@/store/routesList';
+import { useKeepALiveNames } from '@/store/keepAliveNames';
+
+/**
+ * 获取目录下的 .vue、.tsx 全部文件
+ * @method import.meta.glob
+ * @link 参考：https://cn.vitejs.dev/guide/features.html#json
+ */
+const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}');
+const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...viewsModules });
 
 // 添加静态路由
 const router = createRouter({
@@ -24,7 +35,7 @@ export function initAllFun() {
         // 无 token 停止执行下一步
         return false
     }
-    store.dispatch('userInfos/setUserInfos'); // 触发初始化用户信息
+    useUserInfo().setUserInfo({});
     router.addRoute(pathMatch); // 添加404界面
     resetRoute(); // 删除/重置路由
     // 添加动态路由
@@ -32,7 +43,7 @@ export function initAllFun() {
         router.addRoute((route as unknown) as RouteRecordRaw);
     });
     // 过滤权限菜单
-    store.dispatch('routesList/setRoutesList', setFilterMenuFun(dynamicRoutes[0].children, store.state.userInfos.userInfos.menus));
+    useRoutesList().setRoutesList(setFilterMenuFun(dynamicRoutes[0].children, useUserInfo().userInfo.menus))
 }
 
 // 后端控制路由：模拟执行路由数据初始化
@@ -43,7 +54,7 @@ export function initBackEndControlRoutesFun() {
         // 无 token 停止执行下一步
         return false
     }
-    store.dispatch('userInfos/setUserInfos'); // 触发初始化用户信息
+    useUserInfo().setUserInfo({});
     let menuRoute = getSession('menus')
     if (!menuRoute) {
         menuRoute = getBackEndControlRoutes(); // 获取路由
@@ -57,7 +68,7 @@ export function initBackEndControlRoutesFun() {
     formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)).forEach((route: any) => {
         router.addRoute((route as unknown) as RouteRecordRaw);
     });
-    store.dispatch('routesList/setRoutesList', dynamicRoutes[0].children);
+    useRoutesList().setRoutesList(dynamicRoutes[0].children)
 }
 
 // 后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
@@ -76,7 +87,7 @@ export function backEndRouterConverter(routes: any, parentPath: string = "/") {
         item.meta = JSON.parse(item.meta)
         // 将meta.comoponet 解析为route.component
         if (item.meta.component) {
-            item.component = imports[item.meta.component as string]
+            item.component = dynamicImport(dynamicViewsModules, item.meta.component)
             delete item.meta['component']
         }
         // route.path == resource.code
@@ -106,6 +117,27 @@ export function backEndRouterConverter(routes: any, parentPath: string = "/") {
     });
 }
 
+/**
+ * 后端路由 component 转换函数
+ * @param dynamicViewsModules 获取目录下的 .vue、.tsx 全部文件
+ * @param component 当前要处理项 component
+ * @returns 返回处理成函数后的 component
+ */
+export function dynamicImport(dynamicViewsModules: Record<string, Function>, component: string) {
+	const keys = Object.keys(dynamicViewsModules);
+	const matchKeys = keys.filter((key) => {
+		const k = key.replace(/..\/views|../, '');
+		return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+	});
+	if (matchKeys?.length === 1) {
+		const matchKey = matchKeys[0];
+		return dynamicViewsModules[matchKey];
+	}
+	if (matchKeys?.length > 1) {
+		return false;
+	}
+}
+
 // 多级嵌套数组处理成一维数组
 export function formatFlatteningRoutes(arr: any) {
     if (arr.length <= 0) return false;
@@ -134,7 +166,8 @@ export function formatTwoStageRoutes(arr: any) {
             }
         }
     });
-    store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
+    useKeepALiveNames().setCacheKeepAlive(cacheList);
+    // store.dispatch('keepAliveNames/setCacheKeepAlive', cacheList);
     return newArr;
 }
 
@@ -167,7 +200,7 @@ export function setFilterRoute(chil: any) {
     chil.forEach((route: any) => {
         // 如果路由需要拥有指定code才可访问，则校验该用户菜单是否存在该code
         if (route.meta.code) {
-            store.state.userInfos.userInfos.menus.forEach((m: any) => {
+            useUserInfo().userInfo.menus.forEach((m: any) => {
                 if (route.meta.code == m) {
                     filterRoute.push({ ...route })
                 }
@@ -188,14 +221,14 @@ export function setFilterRouteEnd() {
 
 // 删除/重置路由
 export function resetRoute() {
-    store.state.routesList.routesList.forEach((route: any) => {
+    useRoutesList().routesList.forEach((route: any) => {
         const { name } = route;
         router.hasRoute(name) && router.removeRoute(name);
     });
 }
 
 // 初始化方法执行
-const { isRequestRoutes } = store.state.themeConfig.themeConfig;
+const { isRequestRoutes } = useThemeConfig(pinia).themeConfig;
 if (!isRequestRoutes) {
     // 未开启后端控制路由
     initAllFun();
@@ -214,7 +247,7 @@ router.beforeEach((to, from, next) => {
 
     // 如果有标题参数，则再原标题后加上参数来区别
     if (to.meta.titleRename) {
-        to.meta.title = templateResolve(to.meta.title, to.query)
+        to.meta.title = templateResolve(to.meta.title as string, to.query)
     }
 
     const token = getSession('token');
@@ -245,7 +278,7 @@ router.beforeEach((to, from, next) => {
     if (!SysWs && to.path != '/machine/terminal') {
         SysWs = sockets.sysMsgSocket();
     }
-    if (store.state.routesList.routesList.length > 0) {
+    if (useRoutesList().routesList.length > 0) {
         next();
     }
 });
diff --git a/mayfly_go_web/src/router/route.ts b/mayfly_go_web/src/router/route.ts
index 38d9928e..279533c0 100644
--- a/mayfly_go_web/src/router/route.ts
+++ b/mayfly_go_web/src/router/route.ts
@@ -1,6 +1,5 @@
 import { RouteRecordRaw } from 'vue-router';
 import Layout from '@/views/layout/index.vue'
-// import RouterParent from '@/views/layout/routerView/parent.vue';
 
 // 定义动态路由
 export const dynamicRoutes = [
@@ -12,6 +11,7 @@ export const dynamicRoutes = [
         meta: {
             isKeepAlive: true,
         },
+        children: []
     //     children: [
     //         {
     //             path: '/home',
diff --git a/mayfly_go_web/src/store/index.ts b/mayfly_go_web/src/store/index.ts
index 50e8e872..27c377ed 100644
--- a/mayfly_go_web/src/store/index.ts
+++ b/mayfly_go_web/src/store/index.ts
@@ -1,22 +1,8 @@
-import { InjectionKey } from 'vue';
-import { createStore, useStore as baseUseStore, Store } from 'vuex';
-import { RootStateTypes } from '@/store/interface/index';
-import themeConfig from '@/store/modules/themeConfig.ts';
-import routesList from '@/store/modules/routesList.ts';
-import keepAliveNames from '@/store/modules/keepAliveNames.ts';
-import userInfos from '@/store/modules/userInfos.ts';
+// https://pinia.vuejs.org/
+import { createPinia } from 'pinia';
 
-export const key: InjectionKey<Store<RootStateTypes>> = Symbol();
+// 创建
+const pinia = createPinia();
 
-export const store = createStore<RootStateTypes>({
-    modules: {
-        themeConfig,
-        routesList,
-        keepAliveNames,
-        userInfos,
-    },
-});
-
-export function useStore() {
-    return baseUseStore(key);
-}
+// 导出
+export default pinia;
diff --git a/mayfly_go_web/src/store/keepAliveNames.ts b/mayfly_go_web/src/store/keepAliveNames.ts
new file mode 100644
index 00000000..981198f2
--- /dev/null
+++ b/mayfly_go_web/src/store/keepAliveNames.ts
@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 路由缓存列表
+ * @methods setCacheKeepAlive 设置要缓存的路由 names（开启 Tagsview）
+ * @methods addCachedView 添加要缓存的路由 names（关闭 Tagsview）
+ * @methods delCachedView 删除要缓存的路由 names（关闭 Tagsview）
+ * @methods delOthersCachedViews 右键菜单`关闭其它`，删除要缓存的路由 names（关闭 Tagsview）
+ * @methods delAllCachedViews 右键菜单`全部关闭`，删除要缓存的路由 names（关闭 Tagsview）
+ */
+export const useKeepALiveNames = defineStore('keepALiveNames', {
+	state: (): KeepAliveNamesState => ({
+		keepAliveNames: [],
+		cachedViews: [],
+	}),
+	actions: {
+		async setCacheKeepAlive(data: Array<string>) {
+			this.keepAliveNames = data;
+		},
+		async addCachedView(view: any) {
+			if (view.meta.isKeepAlive) this.cachedViews?.push(view.name);
+		},
+		async delCachedView(view: any) {
+			const index = this.cachedViews.indexOf(view.name);
+			index > -1 && this.cachedViews.splice(index, 1);
+		},
+		async delOthersCachedViews(view: any) {
+			if (view.meta.isKeepAlive) this.cachedViews = [view.name];
+			else this.cachedViews = [];
+		},
+		async delAllCachedViews() {
+			this.cachedViews = [];
+		},
+	},
+});
diff --git a/mayfly_go_web/src/store/modules/keepAliveNames.ts b/mayfly_go_web/src/store/modules/keepAliveNames.ts
deleted file mode 100644
index 113b83ed..00000000
--- a/mayfly_go_web/src/store/modules/keepAliveNames.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Module } from 'vuex';
-// 此处加上 `.ts` 后缀报错，具体原因不详
-import { KeepAliveNamesState, RootStateTypes } from '@/store/interface/index';
-
-const keepAliveNamesModule: Module<KeepAliveNamesState, RootStateTypes> = {
-    namespaced: true,
-    state: {
-        keepAliveNames: [],
-    },
-    mutations: {
-        // 设置路由缓存（name字段）
-        getCacheKeepAlive(state: any, data: Array<string>) {
-            state.keepAliveNames = data;
-        },
-    },
-    actions: {
-        // 设置路由缓存（name字段）
-        async setCacheKeepAlive({ commit }, data: Array<string>) {
-            commit('getCacheKeepAlive', data);
-        },
-    },
-};
-
-export default keepAliveNamesModule;
diff --git a/mayfly_go_web/src/store/modules/routesList.ts b/mayfly_go_web/src/store/modules/routesList.ts
deleted file mode 100644
index e88db78f..00000000
--- a/mayfly_go_web/src/store/modules/routesList.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Module } from 'vuex';
-// 此处加上 `.ts` 后缀报错，具体原因不详
-import { RoutesListState, RootStateTypes } from '@/store/interface/index';
-
-const routesListModule: Module<RoutesListState, RootStateTypes> = {
-    namespaced: true,
-    state: {
-        routesList: [],
-    },
-    mutations: {
-        // 设置路由，菜单中使用到
-        getRoutesList(state: any, data: Array<object>) {
-            state.routesList = data;
-        },
-    },
-    actions: {
-        // 设置路由，菜单中使用到
-        async setRoutesList({ commit }, data: any) {
-            commit('getRoutesList', data);
-        },
-    },
-};
-
-export default routesListModule;
diff --git a/mayfly_go_web/src/store/modules/userInfos.ts b/mayfly_go_web/src/store/modules/userInfos.ts
deleted file mode 100644
index 99aa2777..00000000
--- a/mayfly_go_web/src/store/modules/userInfos.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Module } from 'vuex';
-import { getSession } from '@/common/utils/storage.ts';
-// 此处加上 `.ts` 后缀报错，具体原因不详
-import { UserInfosState, RootStateTypes } from '@/store/interface/index';
-
-const userInfosModule: Module<UserInfosState, RootStateTypes> = {
-    namespaced: true,
-    state: {
-        userInfos: {},
-    },
-    mutations: {
-        // 设置用户信息
-        getUserInfos(state: any, data: object) {
-            state.userInfos = data;
-        },
-    },
-    actions: {
-        // 设置用户信息
-        async setUserInfos({ commit }, data: object) {
-            if (data) {
-                commit('getUserInfos', data);
-            } else {
-                if (getSession('userInfo')) commit('getUserInfos', getSession('userInfo'));
-            }
-        },
-    },
-};
-
-export default userInfosModule;
diff --git a/mayfly_go_web/src/store/routesList.ts b/mayfly_go_web/src/store/routesList.ts
new file mode 100644
index 00000000..9c908055
--- /dev/null
+++ b/mayfly_go_web/src/store/routesList.ts
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 路由列表
+ * @methods setRoutesList 设置路由数据
+ * @methods setColumnsMenuHover 设置分栏布局菜单鼠标移入 boolean
+ * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
+ */
+export const useRoutesList = defineStore('routesList', {
+	state: (): RoutesListState => ({
+		routesList: [],
+	}),
+	actions: {
+		async setRoutesList(data: Array<string>) {
+			this.routesList = data;
+		},
+	},
+});
\ No newline at end of file
diff --git a/mayfly_go_web/src/store/modules/themeConfig.ts b/mayfly_go_web/src/store/themeConfig.ts
similarity index 89%
rename from mayfly_go_web/src/store/modules/themeConfig.ts
rename to mayfly_go_web/src/store/themeConfig.ts
index 3f1e658f..76ee178a 100644
--- a/mayfly_go_web/src/store/modules/themeConfig.ts
+++ b/mayfly_go_web/src/store/themeConfig.ts
@@ -1,10 +1,7 @@
-import { Module } from 'vuex';
-// 此处加上 `.ts` 后缀报错，具体原因不详
-import { ThemeConfigState, RootStateTypes } from '@/store/interface/index';
+import { defineStore } from 'pinia';
 
-const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
-    namespaced: true,
-    state: {
+export const useThemeConfig = defineStore('themeConfig', {
+    state: (): ThemeConfigState => ({
         themeConfig: {
             // 是否开启布局配置抽屉
             isDrawer: false,
@@ -73,12 +70,13 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
             isBreadcrumb: true,
             // 是否开启 Tagsview
             isTagsview: true,
+            isShareTagsView: false,
             // 是否开启 Breadcrumb 图标
             isBreadcrumbIcon: true,
             // 是否开启 Tagsview 图标
             isTagsviewIcon: true,
             // 是否开启 TagsView 缓存
-            isCacheTagsView: false,
+            isCacheTagsView: true,
             // 是否开启 TagsView 拖拽
             isSortableTagsView: true,
             // 是否开启 Footer 底部版权信息
@@ -94,8 +92,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 
             /* 其它设置
             ------------------------------- */
-            // 默认 Tagsview 风格，可选 1、 tags-style-one 2、 tags-style-two 3、 tags-style-three 4、 tags-style-four
-            tagsStyle: 'tags-style-one',
+            // 默认 Tagsview 风格，可选 1、 tags-style-one 2、 tags-style-two 3、 tags-style-three
+            tagsStyle: 'tags-style-three',
             // 默认主页面切换动画，可选 1、 slide-right 2、 slide-left 3、 opacitys
             animation: 'slide-right',
             // 默认分栏高亮风格，可选 1、 圆角 columns-round 2、 卡片 columns-card
@@ -135,19 +133,11 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
             // 默认全局组件大小，可选值"<|large|default|small>"，默认 ''
             globalComponentSize: '',
         },
-    },
-    mutations: {
-        // 设置布局配置
-        getThemeConfig(state: any, data: object) {
-            state.themeConfig = data;
-        },
-    },
+    }),
     actions: {
         // 设置布局配置
-        setThemeConfig({ commit }, data: object) {
-            commit('getThemeConfig', data);
+        setThemeConfig(data: ThemeConfigState) {
+            this.themeConfig = data.themeConfig;
         },
     },
-};
-
-export default themeConfigModule;
+})
diff --git a/mayfly_go_web/src/store/userInfo.ts b/mayfly_go_web/src/store/userInfo.ts
new file mode 100644
index 00000000..fae8ce99
--- /dev/null
+++ b/mayfly_go_web/src/store/userInfo.ts
@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia';
+import { getSession } from '@/common/utils/storage.ts';
+
+export const useUserInfo = defineStore('userInfo', {
+    state: (): UserInfoState => ({
+        userInfo: {},
+    }),
+    actions: {
+        // 设置用户信息
+        async setUserInfo(data: object) {
+            const ui = getSession('userInfo')
+			if (ui) {
+				this.userInfo = ui;
+			} else {
+				this.userInfo = data;
+			}
+        },
+    }
+})
diff --git a/mayfly_go_web/src/theme/iconSelector.scss b/mayfly_go_web/src/theme/iconSelector.scss
index afee8718..bb4af0dc 100644
--- a/mayfly_go_web/src/theme/iconSelector.scss
+++ b/mayfly_go_web/src/theme/iconSelector.scss
@@ -3,85 +3,29 @@
 .icon-selector-popper {
 	padding: 0 !important;
 	.icon-selector-warp {
+		height: 260px;
+		overflow: hidden;
+		position: relative;
 		.icon-selector-warp-title {
+			position: absolute;
 			height: 40px;
 			line-height: 40px;
+			left: 15px;
+		}
+		.el-tabs__header {
+			display: flex;
+			justify-content: flex-end;
 			padding: 0 15px;
-		}
-		.icon-selector-warp-row {
-			max-height: 260px;
-			overflow-y: auto;
-			padding: 15px 15px 5px;
-			border-top: 1px solid #ebeef5;
-			.ele-col:nth-last-child(1),
-			.ele-col:nth-last-child(2) {
-				display: none;
-			}
-			.awe-col:nth-child(-n + 24) {
-				display: none;
-			}
-			.icon-selector-warp-item {
-				display: flex;
-				border: 1px solid #ebeef5;
-				padding: 10px;
-				border-radius: 5px;
-				margin-bottom: 10px;
-				transition: all 0.3s ease;
-				.icon-selector-warp-item-value {
-					transition: all 0.3s ease;
-					i {
-						font-size: 20px;
-						color: #606266;
-					}
+			border-bottom: 1px solid var(--el-border-color-light);
+			margin: 0 !important;
+			.el-tabs__nav-wrap {
+				&::after {
+					height: 0 !important;
 				}
-				&:hover {
-					border: 1px solid var(--color-primary);
-					cursor: pointer;
-					transition: all 0.3s ease;
-					.icon-selector-warp-item-value {
-						i {
-							color: var(--color-primary);
-							transition: all 0.3s ease;
-						}
-					}
-				}
-			}
-			.icon-selector-active {
-				border: 1px solid var(--color-primary);
-				.icon-selector-warp-item-value {
-					i {
-						color: var(--color-primary);
-					}
-				}
-			}
-		}
-		.icon-selector-all {
-			.el-input {
-				padding: 0 15px;
-				margin-bottom: 10px;
-			}
-			&-tabs {
-				display: flex;
-				height: 30px;
-				line-height: 30px;
-				padding: 0 15px;
-				margin-bottom: 5px;
-				&-item {
-					flex: 1;
-					text-align: center;
-					cursor: pointer;
-					&:hover {
-						color: var(--color-primary);
-					}
-				}
-				&-active {
-					background: var(--color-primary);
-					border-radius: 5px;
-					.label {
-						color: #ffffff;
-					}
+				.el-tabs__item {
+					padding: 0 5px !important;
 				}
 			}
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/mayfly_go_web/src/types/env.d.ts b/mayfly_go_web/src/types/env.d.ts
new file mode 100644
index 00000000..013cb8aa
--- /dev/null
+++ b/mayfly_go_web/src/types/env.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+	import type { DefineComponent } from 'vue';
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
\ No newline at end of file
diff --git a/mayfly_go_web/src/store/interface/index.ts b/mayfly_go_web/src/types/pinia.d.ts
similarity index 69%
rename from mayfly_go_web/src/store/interface/index.ts
rename to mayfly_go_web/src/types/pinia.d.ts
index e335e69a..b4e767a8 100644
--- a/mayfly_go_web/src/store/interface/index.ts
+++ b/mayfly_go_web/src/types/pinia.d.ts
@@ -1,7 +1,8 @@
-// 接口类型声明
+declare interface UserInfoState<T = any> {
+    userInfo: any
+}
 
-// 布局配置
-export interface ThemeConfigState {
+declare interface ThemeConfigState {
     themeConfig: {
         isDrawer: boolean;
         primary: string;
@@ -30,6 +31,7 @@ export interface ThemeConfigState {
         isShowLogoChange: boolean;
         isBreadcrumb: boolean;
         isTagsview: boolean;
+        isShareTagsView: boolean;
         isBreadcrumbIcon: boolean;
         isTagsviewIcon: boolean;
         isCacheTagsView: boolean;
@@ -52,37 +54,24 @@ export interface ThemeConfigState {
         terminalBackground: string;
         terminalCursor: string;
         terminalFontSize: number;
-        terminalFontWeight: string;
+        terminalFontWeight: string | any;
         editorTheme: string;
     };
 }
 
+// TagsView 路由列表
+declare interface TagsViewRoutesState<T = any> {
+	tagsViewRoutes: T[];
+	isTagsViewCurrenFull: Boolean;
+}
+
 // 路由列表
-export interface RoutesListState {
-    routesList: Array<object>;
+declare interface RoutesListState {
+    routesList: T[];
 }
 
 // 路由缓存列表
-export interface KeepAliveNamesState {
-    keepAliveNames: Array<string>;
-}
-
-// 用户信息
-export interface UserInfosState {
-    userInfos: object;
-}
-
-
-// 后端返回原始路由(未处理时)
-// export interface RequestOldRoutesState {
-//     requestOldRoutes: Array<object>;
-// }
-
-// 主接口(顶级类型声明)
-export interface RootStateTypes {
-    themeConfig: ThemeConfigState;
-    routesList: RoutesListState;
-    keepAliveNames: KeepAliveNamesState;
-    userInfos: UserInfosState;
-    // requestOldRoutes: RequestOldRoutesState;
-}
+declare interface KeepAliveNamesState {
+    keepAliveNames: string[];
+    cachedViews: string[];
+}
\ No newline at end of file
diff --git a/mayfly_go_web/shim.d.ts b/mayfly_go_web/src/types/shim.d.ts
similarity index 65%
rename from mayfly_go_web/shim.d.ts
rename to mayfly_go_web/src/types/shim.d.ts
index 37cdf7f3..a284db65 100644
--- a/mayfly_go_web/shim.d.ts
+++ b/mayfly_go_web/src/types/shim.d.ts
@@ -1,21 +1,14 @@
 /* eslint-disable */
 import {IDisposable} from 'monaco-editor';
-
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue';
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
-}
-
-
 declare global {
 	interface Window {
 		completionItemProvider?: IDisposable | undefined;
 	}
 }
 
-
+// 申明外部 npm 插件模块
 declare module 'sql-formatter';
 declare module 'jsoneditor';
 declare module 'asciinema-player';
 declare module 'monaco-editor';
+declare module 'vue-grid-layout';
\ No newline at end of file
diff --git a/mayfly_go_web/source.d.ts b/mayfly_go_web/src/types/source.d.ts
similarity index 62%
rename from mayfly_go_web/source.d.ts
rename to mayfly_go_web/src/types/source.d.ts
index 2f9c7682..d04f0da7 100644
--- a/mayfly_go_web/source.d.ts
+++ b/mayfly_go_web/src/types/source.d.ts
@@ -1,6 +1,7 @@
+// 声明一个模块，防止引入文件时报错
 declare module '*.json';
 declare module '*.png';
 declare module '*.jpg';
 declare module '*.scss';
 declare module '*.ts';
-declare module '*.js';
+declare module '*.js';
\ No newline at end of file
diff --git a/mayfly_go_web/src/views/home/Home.vue b/mayfly_go_web/src/views/home/Home.vue
index 517be44a..6419c74b 100644
--- a/mayfly_go_web/src/views/home/Home.vue
+++ b/mayfly_go_web/src/views/home/Home.vue
@@ -4,10 +4,10 @@
             <el-col :sm="6" class="mb15">
                 <div @click="toPage({ id: 'personal' })" class="home-card-item home-card-first">
                     <div class="flex-margin flex">
-                        <img :src="getUserInfos.photo" />
+                        <img :src="userInfo.photo" />
                         <div class="home-card-first-right ml15">
                             <div class="flex-margin">
-                                <div class="home-card-first-right-title">{{ `${currentTime}, ${getUserInfos.username}`
+                                <div class="home-card-first-right-title">{{ `${currentTime}, ${userInfo.username}`
                                 }}</div>
                             </div>
                         </div>
@@ -29,15 +29,17 @@
 
 <script lang="ts" setup>
 import { toRefs, reactive, onMounted, nextTick, computed } from 'vue';
-import { useStore } from '@/store/index.ts';
 // import * as echarts from 'echarts';
 import { CountUp } from 'countup.js';
-import { formatAxis } from '@/common/utils/formatTime.ts';
+import { formatAxis } from '@/common/utils/format.ts';
 import { indexApi } from './api';
 import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '@/store/userInfo';
 
 const router = useRouter();
-const store = useStore();
+const { userInfo } = storeToRefs(useUserInfo());
+
 const state = reactive({
     topCardItemList: [
         {
@@ -114,11 +116,6 @@ onMounted(() => {
     // initHomeLaboratory();
     // initHomeOvertime();
 });
-
-// 获取用户信息 vuex
-const getUserInfos = computed(() => {
-    return store.state.userInfos.userInfos;
-});
 </script>
 
 <style scoped lang="scss">
diff --git a/mayfly_go_web/src/views/layout/component/aside.vue b/mayfly_go_web/src/views/layout/component/aside.vue
index 751908be..e50ccc18 100644
--- a/mayfly_go_web/src/views/layout/component/aside.vue
+++ b/mayfly_go_web/src/views/layout/component/aside.vue
@@ -1,132 +1,131 @@
 <template>
-    <el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
+    <el-aside class="layout-aside" :class="setCollapseWidth" v-if="state.clientWidth > 1000">
         <Logo v-if="setShowLogo" />
         <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
-            <Vertical :menuList="menuList" :class="setCollapseWidth" />
+            <Vertical :menuList="state.menuList" :class="setCollapseWidth" />
         </el-scrollbar>
     </el-aside>
-    <el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
+    <el-drawer v-model="themeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
         <el-aside class="layout-aside w100 h100">
             <Logo v-if="setShowLogo" />
             <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
-                <Vertical :menuList="menuList" />
+                <Vertical :menuList="state.menuList" />
             </el-scrollbar>
         </el-aside>
     </el-drawer>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
-import { useStore } from '@/store/index.ts';
+<script lang="ts" setup name="layoutAside">
+import { reactive, computed, watch, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
+import pinia from '@/store/index';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { useRoutesList } from '@/store/routesList';
 import Logo from '@/views/layout/logo/index.vue';
 import Vertical from '@/views/layout/navMenu/vertical.vue';
-export default {
-    name: 'layoutAside',
-    components: { Logo, Vertical },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        const state: any = reactive({
-            menuList: [],
-            clientWidth: '',
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 设置菜单展开/收起时的宽度
-        const setCollapseWidth = computed(() => {
-            let { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
-            let asideBrColor =
-                menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
-            if (layout === 'columns') {
-                // 分栏布局，菜单收起时宽度给 1px
-                if (isCollapse) {
-                    return ['layout-aside-width1', asideBrColor];
-                } else {
-                    return ['layout-aside-width-default', asideBrColor];
-                }
-            } else {
-                // 其它布局给 64px
-                if (isCollapse) {
-                    return ['layout-aside-width64', asideBrColor];
-                } else {
-                    return ['layout-aside-width-default', asideBrColor];
-                }
-            }
-        });
-        // 设置显示/隐藏 logo
-        const setShowLogo = computed(() => {
-            let { layout, isShowLogo } = store.state.themeConfig.themeConfig;
-            return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
-        });
-        // 设置/过滤路由（非静态路由/是否显示在菜单中）
-        const setFilterRoutes = () => {
-            if (store.state.themeConfig.themeConfig.layout === 'columns') return false;
-            state.menuList = filterRoutesFun(store.state.routesList.routesList);
-        };
-        // 路由过滤递归函数
-        const filterRoutesFun = (arr: Array<object>) => {
-            return arr
-                .filter((item: any) => !item.meta.isHide)
-                .map((item: any) => {
-                    item = Object.assign({}, item);
-                    if (item.children) item.children = filterRoutesFun(item.children);
-                    return item;
-                });
-        };
-        // 设置菜单导航是否固定（移动端）
-        const initMenuFixed = (clientWidth: number) => {
-            state.clientWidth = clientWidth;
-        };
-        // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-        watch(store.state.themeConfig.themeConfig, (val) => {
-            if (val.isShowLogoChange !== val.isShowLogo) {
-                if (!proxy.$refs.layoutAsideScrollbarRef) return false;
-                proxy.$refs.layoutAsideScrollbarRef.update();
-            }
-        });
-        // 监听路由的变化，动态赋值给菜单中
-        watch(store.state, (val) => {
-            if (val.routesList.routesList.length === state.menuList.length) return false;
-            let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
-            if (layout === 'classic' && isClassicSplitMenu) return false;
-            setFilterRoutes();
-        });
-        // 页面加载前
-        onBeforeMount(() => {
-            initMenuFixed(document.body.clientWidth);
-            setFilterRoutes();
-            proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
-                state.menuList = res.children;
-            });
-            proxy.mittBus.on('setSendClassicChildren', (res: any) => {
-                let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-                if (layout === 'classic' && isClassicSplitMenu) {
-                    state.menuList = [];
-                    state.menuList = res.children;
-                }
-            });
-            proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
-                setFilterRoutes();
-            });
-            proxy.mittBus.on('layoutMobileResize', (res: any) => {
-                initMenuFixed(res.clientWidth);
-            });
-        });
-        // 页面卸载时
-        onUnmounted(() => {
-            proxy.mittBus.off('setSendColumnsChildren');
-            proxy.mittBus.off('setSendClassicChildren');
-            proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes');
-            proxy.mittBus.off('layoutMobileResize');
-        });
-        return {
-            setCollapseWidth,
-            setShowLogo,
-            getThemeConfig,
-            ...toRefs(state),
-        };
-    },
+import mittBus from '@/common/utils/mitt';
+
+const { proxy } = getCurrentInstance() as any;
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+const { routesList } = storeToRefs(useRoutesList());
+
+const state: any = reactive({
+    menuList: [],
+    clientWidth: '',
+});
+
+// 设置菜单展开/收起时的宽度
+const setCollapseWidth = computed(() => {
+    let { layout, isCollapse, menuBar } = themeConfig.value;
+    let asideBrColor =
+        menuBar === '#FFFFFF' || menuBar === '#FFF' || menuBar === '#fff' || menuBar === '#ffffff' ? 'layout-el-aside-br-color' : '';
+    if (layout === 'columns') {
+        // 分栏布局，菜单收起时宽度给 1px
+        if (isCollapse) {
+            return ['layout-aside-width1', asideBrColor];
+        } else {
+            return ['layout-aside-width-default', asideBrColor];
+        }
+    } else {
+        // 其它布局给 64px
+        if (isCollapse) {
+            return ['layout-aside-width64', asideBrColor];
+        } else {
+            return ['layout-aside-width-default', asideBrColor];
+        }
+    }
+});
+
+// 设置显示/隐藏 logo
+const setShowLogo = computed(() => {
+    let { layout, isShowLogo } = themeConfig.value;
+    return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
+});
+
+// 设置/过滤路由（非静态路由/是否显示在菜单中）
+const setFilterRoutes = () => {
+    if (themeConfig.value.layout === 'columns') return false;
+    state.menuList = filterRoutesFun(routesList.value);
 };
+
+// 路由过滤递归函数
+const filterRoutesFun = (arr: Array<object>) => {
+    return arr
+        .filter((item: any) => !item.meta.isHide)
+        .map((item: any) => {
+            item = Object.assign({}, item);
+            if (item.children) item.children = filterRoutesFun(item.children);
+            return item;
+        });
+};
+// 设置菜单导航是否固定（移动端）
+const initMenuFixed = (clientWidth: number) => {
+    state.clientWidth = clientWidth;
+};
+
+// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+watch(themeConfig.value, (val) => {
+    if (val.isShowLogoChange !== val.isShowLogo) {
+        if (!proxy.$refs.layoutAsideScrollbarRef) return false;
+        proxy.$refs.layoutAsideScrollbarRef.update();
+    }
+});
+
+// 监听路由的变化，动态赋值给菜单中
+watch(pinia.state, (val) => {
+    if (val.routesList.routesList.length === state.menuList.length) return false;
+    let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
+    if (layout === 'classic' && isClassicSplitMenu) return false;
+    setFilterRoutes();
+});
+
+// 页面加载前
+onBeforeMount(() => {
+    initMenuFixed(document.body.clientWidth);
+    setFilterRoutes();
+    mittBus.on('setSendColumnsChildren', (res: any) => {
+        state.menuList = res.children;
+    });
+    mittBus.on('setSendClassicChildren', (res: any) => {
+        let { layout, isClassicSplitMenu } = themeConfig.value;
+        if (layout === 'classic' && isClassicSplitMenu) {
+            state.menuList = [];
+            state.menuList = res.children;
+        }
+    });
+    mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
+        setFilterRoutes();
+    });
+    mittBus.on('layoutMobileResize', (res: any) => {
+        initMenuFixed(res.clientWidth);
+    });
+});
+// 页面卸载时
+onUnmounted(() => {
+    mittBus.off('setSendColumnsChildren');
+    mittBus.off('setSendClassicChildren');
+    mittBus.off('getBreadcrumbIndexSetFilterRoutes');
+    mittBus.off('layoutMobileResize');
+});
 </script>
diff --git a/mayfly_go_web/src/views/layout/component/columnsAside.vue b/mayfly_go_web/src/views/layout/component/columnsAside.vue
index 80c6344e..9ed734e7 100644
--- a/mayfly_go_web/src/views/layout/component/columnsAside.vue
+++ b/mayfly_go_web/src/views/layout/component/columnsAside.vue
@@ -2,18 +2,11 @@
     <div class="layout-columns-aside">
         <el-scrollbar>
             <ul>
-                <li
-                    v-for="(v, k) in columnsAsideList"
-                    :key="k"
-                    @click="onColumnsAsideMenuClick(v, k)"
-                    :ref="
-                        (el) => {
-                            if (el) columnsAsideOffsetTopRefs[k] = el;
-                        }
-                    "
-                    :class="{ 'layout-columns-active': liIndex === k }"
-                    :title="v.meta.title"
-                >
+                <li v-for="(v, k) in state.columnsAsideList" :key="k" @click="onColumnsAsideMenuClick(v, k)" :ref="
+                    (el) => {
+                        if (el) columnsAsideOffsetTopRefs[k] = el;
+                    }
+                " :class="{ 'layout-columns-active': state.liIndex === k }" :title="v.meta.title">
                     <div class="layout-columns-aside-li-box" v-if="!v.meta.link || (v.meta.link && v.meta.isIframe)">
                         <i :class="v.meta.icon"></i>
                         <div class="layout-columns-aside-li-box-title font12">
@@ -35,114 +28,103 @@
     </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, ref, computed, onMounted, nextTick, getCurrentInstance, watch } from 'vue';
+<script lang="ts" setup name="layoutColumnsAside">
+import { reactive, ref, computed, onMounted, nextTick, getCurrentInstance, watch } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
-import { useStore } from '@/store/index.ts';
-export default {
-    name: 'layoutColumnsAside',
-    setup() {
-        const columnsAsideOffsetTopRefs: any = ref([]);
-        const columnsAsideActiveRef = ref();
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        const route = useRoute();
-        const router = useRouter();
-        const state: any = reactive({
-            columnsAsideList: [],
-            liIndex: 0,
-            difference: 0,
-            routeSplit: [],
-        });
-        // 设置高亮样式
-        const setColumnsAsideStyle = computed(() => {
-            return store.state.themeConfig.themeConfig.columnsAsideStyle;
-        });
-        // 设置菜单高亮位置移动
-        const setColumnsAsideMove = (k: number) => {
-            state.liIndex = k;
-            columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
-        };
-        // 菜单高亮点击事件
-        const onColumnsAsideMenuClick = (v: Object, k: number) => {
-            setColumnsAsideMove(k);
-            let { path, redirect } = v as any;
-            if (redirect) router.push(redirect);
-            else router.push(path);
-        };
-        // 设置高亮动态位置
-        const onColumnsAsideDown = (k: number) => {
-            nextTick(() => {
-                setColumnsAsideMove(k);
-            });
-        };
-        // 设置/过滤路由（非静态路由/是否显示在菜单中）
-        const setFilterRoutes = () => {
-            state.columnsAsideList = filterRoutesFun(store.state.routesList.routesList);
-            const resData: any = setSendChildren(route.path);
-            onColumnsAsideDown(resData.item[0].k);
-            proxy.mittBus.emit('setSendColumnsChildren', resData);
-        };
-        // 传送当前子级数据到菜单中
-        const setSendChildren = (path: string) => {
-            const currentPathSplit = path.split('/');
-            let currentData: any = {};
-            state.columnsAsideList.map((v: any, k: number) => {
-                if (v.path === `/${currentPathSplit[1]}`) {
-                    v['k'] = k;
-                    currentData['item'] = [{ ...v }];
-                    currentData['children'] = [{ ...v }];
-                    if (v.children) currentData['children'] = v.children;
-                }
-            });
-            return currentData;
-        };
-        // 路由过滤递归函数
-        const filterRoutesFun = (arr: Array<object>) => {
-            return arr
-                .filter((item: any) => !item.meta.isHide)
-                .map((item: any) => {
-                    item = Object.assign({}, item);
-                    if (item.children) item.children = filterRoutesFun(item.children);
-                    return item;
-                });
-        };
-        // tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
-        const setColumnsMenuHighlight = (path: string) => {
-            state.routeSplit = path.split('/');
-            state.routeSplit.shift();
-            const routeFirst = `/${state.routeSplit[0]}`;
-            const currentSplitRoute = state.columnsAsideList.find((v: any) => v.path === routeFirst);
-            // 延迟拿值，防止取不到
-            setTimeout(() => {
-                onColumnsAsideDown(currentSplitRoute.k);
-            }, 0);
-        };
-        // 监听路由的变化，动态赋值给菜单中
-        watch(store.state, (val) => {
-            val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
-            if (val.routesList.routesList.length === state.columnsAsideList.length) return false;
-            setFilterRoutes();
-        });
-        // 页面加载时
-        onMounted(() => {
-            setFilterRoutes();
-        });
-        // 路由更新时
-        onBeforeRouteUpdate((to) => {
-            setColumnsMenuHighlight(to.path);
-            proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
-        });
-        return {
-            columnsAsideOffsetTopRefs,
-            columnsAsideActiveRef,
-            onColumnsAsideDown,
-            setColumnsAsideStyle,
-            onColumnsAsideMenuClick,
-            ...toRefs(state),
-        };
-    },
+import pinia from '@/store/index';
+import { useThemeConfig } from '@/store/themeConfig';
+import { useRoutesList } from '@/store/routesList';
+import mittBus from '@/common/utils/mitt';
+
+const columnsAsideOffsetTopRefs: any = ref([]);
+const columnsAsideActiveRef = ref();
+const route = useRoute();
+const router = useRouter();
+const state: any = reactive({
+    columnsAsideList: [],
+    liIndex: 0,
+    difference: 0,
+    routeSplit: [],
+});
+// 设置高亮样式
+const setColumnsAsideStyle = computed(() => {
+    return useThemeConfig().themeConfig.columnsAsideStyle;
+});
+// 设置菜单高亮位置移动
+const setColumnsAsideMove = (k: number) => {
+    state.liIndex = k;
+    columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
 };
+// 菜单高亮点击事件
+const onColumnsAsideMenuClick = (v: Object, k: number) => {
+    setColumnsAsideMove(k);
+    let { path, redirect } = v as any;
+    if (redirect) router.push(redirect);
+    else router.push(path);
+};
+// 设置高亮动态位置
+const onColumnsAsideDown = (k: number) => {
+    nextTick(() => {
+        setColumnsAsideMove(k);
+    });
+};
+// 设置/过滤路由（非静态路由/是否显示在菜单中）
+const setFilterRoutes = () => {
+    state.columnsAsideList = filterRoutesFun(useRoutesList().routesList);
+    const resData: any = setSendChildren(route.path);
+    onColumnsAsideDown(resData.item[0].k);
+    mittBus.emit('setSendColumnsChildren', resData);
+};
+// 传送当前子级数据到菜单中
+const setSendChildren = (path: string) => {
+    const currentPathSplit = path.split('/');
+    let currentData: any = {};
+    state.columnsAsideList.map((v: any, k: number) => {
+        if (v.path === `/${currentPathSplit[1]}`) {
+            v['k'] = k;
+            currentData['item'] = [{ ...v }];
+            currentData['children'] = [{ ...v }];
+            if (v.children) currentData['children'] = v.children;
+        }
+    });
+    return currentData;
+};
+// 路由过滤递归函数
+const filterRoutesFun = (arr: Array<object>) => {
+    return arr
+        .filter((item: any) => !item.meta.isHide)
+        .map((item: any) => {
+            item = Object.assign({}, item);
+            if (item.children) item.children = filterRoutesFun(item.children);
+            return item;
+        });
+};
+// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
+const setColumnsMenuHighlight = (path: string) => {
+    state.routeSplit = path.split('/');
+    state.routeSplit.shift();
+    const routeFirst = `/${state.routeSplit[0]}`;
+    const currentSplitRoute = state.columnsAsideList.find((v: any) => v.path === routeFirst);
+    // 延迟拿值，防止取不到
+    setTimeout(() => {
+        onColumnsAsideDown(currentSplitRoute.k);
+    }, 0);
+};
+// 监听路由的变化，动态赋值给菜单中
+watch(pinia.state, (val) => {
+    val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
+    if (val.routesList.routesList.length === state.columnsAsideList.length) return false;
+    setFilterRoutes();
+});
+// 页面加载时
+onMounted(() => {
+    setFilterRoutes();
+});
+// 路由更新时
+onBeforeRouteUpdate((to) => {
+    setColumnsMenuHighlight(to.path);
+    mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
+});
 </script>
 
 <style scoped lang="scss">
@@ -150,8 +132,10 @@ export default {
     width: 64px;
     height: 100%;
     background: var(--bg-columnsMenuBar);
+
     ul {
         position: relative;
+
         li {
             color: var(--bg-columnsMenuBarColor);
             width: 100%;
@@ -161,21 +145,26 @@ export default {
             cursor: pointer;
             position: relative;
             z-index: 1;
+
             .layout-columns-aside-li-box {
                 margin: auto;
+
                 .layout-columns-aside-li-box-title {
                     padding-top: 1px;
                 }
             }
+
             a {
                 text-decoration: none;
                 color: var(--bg-columnsMenuBarColor);
             }
         }
+
         .layout-columns-active {
             color: #ffffff;
             transition: 0.3s ease-in-out;
         }
+
         .columns-round {
             background: var(--color-primary);
             color: #ffffff;
@@ -189,6 +178,7 @@ export default {
             transition: 0.3s ease-in-out;
             border-radius: 5px;
         }
+
         .columns-card {
             @extend .columns-round;
             top: 0;
diff --git a/mayfly_go_web/src/views/layout/component/header.vue b/mayfly_go_web/src/views/layout/component/header.vue
index 2cc6b6ab..1b4aea30 100644
--- a/mayfly_go_web/src/views/layout/component/header.vue
+++ b/mayfly_go_web/src/views/layout/component/header.vue
@@ -6,16 +6,15 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { useStore } from '@/store/index.ts';
 import NavBarsIndex from '@/views/layout/navBars/index.vue';
+import { useThemeConfig } from '@/store/themeConfig';
 export default {
     name: 'layoutHeader',
     components: { NavBarsIndex },
     setup() {
-        const store = useStore();
         // 设置 header 的高度
         const setHeaderHeight = computed(() => {
-            let { isTagsview, layout } = store.state.themeConfig.themeConfig;
+            let { isTagsview, layout } = useThemeConfig().themeConfig;
             if (isTagsview && layout !== 'classic') return '84px';
             else return '50px';
         });
diff --git a/mayfly_go_web/src/views/layout/component/main.vue b/mayfly_go_web/src/views/layout/component/main.vue
index 798040f2..89cf539c 100644
--- a/mayfly_go_web/src/views/layout/component/main.vue
+++ b/mayfly_go_web/src/views/layout/component/main.vue
@@ -1,97 +1,75 @@
 <template>
     <el-main class="layout-main">
-        <el-scrollbar
-            class="layout-scrollbar"
-            ref="layoutScrollbarRef"
-            v-show="!currentRouteMeta.link && !currentRouteMeta.isIframe"
-            :style="{ minHeight: `calc(100vh - ${headerHeight}` }"
-        >
+        <el-scrollbar class="layout-scrollbar" ref="layoutScrollbarRef"
+            v-show="!state.currentRouteMeta.link && !state.currentRouteMeta.isIframe"
+            :style="{ minHeight: `calc(100vh - ${state.headerHeight}` }">
             <LayoutParentView />
-            <Footer v-if="getThemeConfig.isFooter" />
+            <Footer v-if="themeConfig.isFooter" />
         </el-scrollbar>
-        <Link
-            :style="{ height: `calc(100vh - ${headerHeight}` }"
-            :meta="currentRouteMeta"
-            v-if="currentRouteMeta.link && !currentRouteMeta.isIframe"
-        />
-        <Iframes
-            :style="{ height: `calc(100vh - ${headerHeight}` }"
-            :meta="currentRouteMeta"
-            v-if="currentRouteMeta.link && currentRouteMeta.isIframe && isShowLink"
-            @getCurrentRouteMeta="onGetCurrentRouteMeta"
-        />
+        <Link :style="{ height: `calc(100vh - ${state.headerHeight}` }" :meta="state.currentRouteMeta"
+            v-if="state.currentRouteMeta.link && !state.currentRouteMeta.isIframe" />
+        <Iframes :style="{ height: `calc(100vh - ${state.headerHeight}` }" :meta="state.currentRouteMeta"
+            v-if="state.currentRouteMeta.link && state.currentRouteMeta.isIframe && state.isShowLink"
+            @getCurrentRouteMeta="onGetCurrentRouteMeta" />
     </el-main>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, toRefs, reactive, getCurrentInstance, watch, onBeforeMount } from 'vue';
+<script setup lang="ts" name="layoutMain">
+import { reactive, getCurrentInstance, watch, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from '@/store/index.ts';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
 import LayoutParentView from '@/views/layout/routerView/parent.vue';
 import Footer from '@/views/layout/footer/index.vue';
 import Link from '@/views/layout/routerView/link.vue';
 import Iframes from '@/views/layout/routerView/iframes.vue';
-export default defineComponent({
-    name: 'layoutMain',
-    components: { LayoutParentView, Footer, Link, Iframes },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        const route = useRoute();
-        const state = reactive({
-            headerHeight: '',
-            currentRouteMeta: {},
-            isShowLink: false,
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 子组件触发更新
-        const onGetCurrentRouteMeta = () => {
-            initCurrentRouteMeta(route.meta);
-        };
-        // 初始化当前路由 meta 信息
-        const initCurrentRouteMeta = (meta: object) => {
-            state.isShowLink = false;
-            state.currentRouteMeta = meta;
-            setTimeout(() => {
-                state.isShowLink = true;
-            }, 100);
-        };
-        // 设置 main 的高度
-        const initHeaderHeight = () => {
-            let { isTagsview } = store.state.themeConfig.themeConfig;
-            if (isTagsview) return (state.headerHeight = `84px`);
-            else return (state.headerHeight = `50px`);
-        };
-        // 页面加载前
-        onBeforeMount(() => {
-            initCurrentRouteMeta(route.meta);
-            initHeaderHeight();
-        });
-        // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
-        watch(store.state.themeConfig.themeConfig, (val) => {
-            state.headerHeight = val.isTagsview ? '84px' : '50px';
-            if (val.isFixedHeaderChange !== val.isFixedHeader) {
-                if (!proxy.$refs.layoutScrollbarRef) return false;
-                proxy.$refs.layoutScrollbarRef.update();
-            }
-        });
-        // 监听路由的变化
-        watch(
-            () => route.path,
-            () => {
-                initCurrentRouteMeta(route.meta);
-                proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
-            }
-        );
-        return {
-            getThemeConfig,
-            initCurrentRouteMeta,
-            onGetCurrentRouteMeta,
-            ...toRefs(state),
-        };
-    },
+
+const { proxy } = getCurrentInstance() as any;
+const { themeConfig } = storeToRefs(useThemeConfig());
+const route = useRoute();
+const state = reactive({
+    headerHeight: '',
+    currentRouteMeta: {} as any,
+    isShowLink: false,
 });
+
+// 子组件触发更新
+const onGetCurrentRouteMeta = () => {
+    initCurrentRouteMeta(route.meta);
+};
+// 初始化当前路由 meta 信息
+const initCurrentRouteMeta = (meta: object) => {
+    state.isShowLink = false;
+    state.currentRouteMeta = meta;
+    setTimeout(() => {
+        state.isShowLink = true;
+    }, 100);
+};
+// 设置 main 的高度
+const initHeaderHeight = () => {
+    let { isTagsview } = themeConfig.value;
+    if (isTagsview) return (state.headerHeight = `84px`);
+    else return (state.headerHeight = `50px`);
+};
+// 页面加载前
+onBeforeMount(() => {
+    initCurrentRouteMeta(route.meta);
+    initHeaderHeight();
+});
+// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
+watch(themeConfig.value, (val) => {
+    state.headerHeight = val.isTagsview ? '84px' : '50px';
+    if (val.isFixedHeaderChange !== val.isFixedHeader) {
+        if (!proxy.$refs.layoutScrollbarRef) return false;
+        proxy.$refs.layoutScrollbarRef.update();
+    }
+});
+// 监听路由的变化
+watch(
+    () => route.path,
+    () => {
+        initCurrentRouteMeta(route.meta);
+        proxy.$refs.layoutScrollbarRef.wrapRef.scrollTop = 0;
+    }
+);
 </script>
diff --git a/mayfly_go_web/src/views/layout/index.vue b/mayfly_go_web/src/views/layout/index.vue
index b86ace8f..4e9715fe 100644
--- a/mayfly_go_web/src/views/layout/index.vue
+++ b/mayfly_go_web/src/views/layout/index.vue
@@ -1,57 +1,47 @@
 <template>
-    <Defaults v-if="getThemeConfig.layout === 'defaults'" />
-    <Classic v-else-if="getThemeConfig.layout === 'classic'" />
-    <Transverse v-else-if="getThemeConfig.layout === 'transverse'" />
-    <Columns v-else-if="getThemeConfig.layout === 'columns'" />
+    <Defaults v-if="themeConfig.layout === 'defaults'" />
+    <Classic v-else-if="themeConfig.layout === 'classic'" />
+    <Transverse v-else-if="themeConfig.layout === 'transverse'" />
+    <Columns v-else-if="themeConfig.layout === 'columns'" />
 </template>
 
-<script lang="ts">
-import { computed, onBeforeMount, onUnmounted, getCurrentInstance } from 'vue';
-import { useStore } from '@/store/index.ts';
+<script setup lang="ts" name="layout">
+import { onBeforeMount, onUnmounted } from 'vue';
 import { getLocal, setLocal } from '@/common/utils/storage.ts';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
 import Defaults from '@/views/layout/main/defaults.vue';
 import Classic from '@/views/layout/main/classic.vue';
 import Transverse from '@/views/layout/main/transverse.vue';
 import Columns from '@/views/layout/main/columns.vue';
-export default {
-    name: 'layout',
-    components: { Defaults, Classic, Transverse, Columns },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
+import mittBus from '@/common/utils/mitt';
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+
+// 窗口大小改变时(适配移动端)
+const onLayoutResize = () => {
+    if (!getLocal('oldLayout')) setLocal('oldLayout', themeConfig.value.layout);
+    const clientWidth = document.body.clientWidth;
+    if (clientWidth < 1000) {
+        themeConfig.value.isCollapse = false;
+        mittBus.emit('layoutMobileResize', {
+            layout: 'defaults',
+            clientWidth,
         });
-        // 窗口大小改变时(适配移动端)
-        const onLayoutResize = () => {
-            if (!getLocal('oldLayout')) setLocal('oldLayout', getThemeConfig.value.layout);
-            const clientWidth = document.body.clientWidth;
-            if (clientWidth < 1000) {
-                getThemeConfig.value.isCollapse = false;
-                proxy.mittBus.emit('layoutMobileResize', {
-                    layout: 'defaults',
-                    clientWidth,
-                });
-            } else {
-                proxy.mittBus.emit('layoutMobileResize', {
-                    layout: getLocal('oldLayout') ? getLocal('oldLayout') : 'defaults',
-                    clientWidth,
-                });
-            }
-        };
-        // 页面加载前
-        onBeforeMount(() => {
-            onLayoutResize();
-            window.addEventListener('resize', onLayoutResize);
+    } else {
+        mittBus.emit('layoutMobileResize', {
+            layout: getLocal('oldLayout') ? getLocal('oldLayout') : 'defaults',
+            clientWidth,
         });
-        // 页面卸载时
-        onUnmounted(() => {
-            window.removeEventListener('resize', onLayoutResize);
-        });
-        return {
-            getThemeConfig,
-        };
-    },
+    }
 };
+// 页面加载前
+onBeforeMount(() => {
+    onLayoutResize();
+    window.addEventListener('resize', onLayoutResize);
+});
+// 页面卸载时
+onUnmounted(() => {
+    window.removeEventListener('resize', onLayoutResize);
+});
 </script>
diff --git a/mayfly_go_web/src/views/layout/lockScreen/index.vue b/mayfly_go_web/src/views/layout/lockScreen/index.vue
index 86ba99de..fe210c16 100644
--- a/mayfly_go_web/src/views/layout/lockScreen/index.vue
+++ b/mayfly_go_web/src/views/layout/lockScreen/index.vue
@@ -1,294 +1,352 @@
 <template>
-    <div v-show="isShowLockScreen">
-        <div class="layout-lock-screen-mask"></div>
-        <div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': isShowLoockLogin }"></div>
-        <div class="layout-lock-screen">
-            <div
-                class="layout-lock-screen-date"
-                ref="layoutLockScreenDateRef"
-                @mousedown="onDown"
-                @mousemove="onMove"
-                @mouseup="onEnd"
-                @touchstart.stop="onDown"
-                @touchmove.stop="onMove"
-                @touchend.stop="onEnd"
-            >
-                <div class="layout-lock-screen-date-box">
-                    <div class="layout-lock-screen-date-box-time">
-                        {{ time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ time.s }}</span>
-                    </div>
-                    <div class="layout-lock-screen-date-box-info">{{ time.mdq }}</div>
-                </div>
-            </div>
-            <transition name="el-zoom-in-center">
-                <div v-show="isShowLoockLogin" class="layout-lock-screen-login">
-                    <div class="layout-lock-screen-login-box">
-                        <div class="layout-lock-screen-login-box-img">
-                            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg" />
-                        </div>
-                        <div class="layout-lock-screen-login-box-name">Administrator</div>
-                        <div class="layout-lock-screen-login-box-value">
-                            <el-input
-                                placeholder="请输入密码"
-                                ref="layoutLockScreenInputRef"
-                                v-model="lockScreenPassword"
-                                @keyup.enter.stop="onLockScreenSubmit()"
-                            >
-                                <template #append>
-                                    <el-button icon="el-icon-right" @click="onLockScreenSubmit"></el-button>
-                                </template>
-                            </el-input>
-                        </div>
-                    </div>
-                    <div class="layout-lock-screen-login-icon">
-                        <i class="el-icon-microphone"></i>
-                        <i class="el-icon-alarm-clock"></i>
-                        <i class="el-icon-switch-button"></i>
-                    </div>
-                </div>
-            </transition>
-        </div>
-    </div>
+	<div v-show="state.isShowLockScreen">
+		<div class="layout-lock-screen-mask"></div>
+		<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
+		<div class="layout-lock-screen">
+			<div
+				class="layout-lock-screen-date"
+				ref="layoutLockScreenDateRef"
+				@mousedown="onDownPc"
+				@mousemove="onMovePc"
+				@mouseup="onEnd"
+				@touchstart.stop="onDownApp"
+				@touchmove.stop="onMoveApp"
+				@touchend.stop="onEnd"
+			>
+				<div class="layout-lock-screen-date-box">
+					<div class="layout-lock-screen-date-box-time">
+						{{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span>
+					</div>
+					<div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
+				</div>
+				<div class="layout-lock-screen-date-top">
+					<SvgIcon name="ele-Top" />
+					<div class="layout-lock-screen-date-top-text">上滑解锁</div>
+				</div>
+			</div>
+			<transition name="el-zoom-in-center">
+				<div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
+					<div class="layout-lock-screen-login-box">
+						<div class="layout-lock-screen-login-box-img">
+							<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
+						</div>
+						<div class="layout-lock-screen-login-box-name">Administrator</div>
+						<div class="layout-lock-screen-login-box-value">
+							<el-input
+								placeholder="请输入密码"
+								ref="layoutLockScreenInputRef"
+								v-model="state.lockScreenPassword"
+								@keyup.enter.native.stop="onLockScreenSubmit()"
+							>
+								<template #append>
+									<el-button @click="onLockScreenSubmit">
+										<el-icon class="el-input__icon">
+											<ele-Right />
+										</el-icon>
+									</el-button>
+								</template>
+							</el-input>
+						</div>
+					</div>
+					<div class="layout-lock-screen-login-icon">
+						<SvgIcon name="ele-Microphone" :size="20" />
+						<SvgIcon name="ele-AlarmClock" :size="20" />
+						<SvgIcon name="ele-SwitchButton" :size="20" />
+					</div>
+				</div>
+			</transition>
+		</div>
+	</div>
 </template>
 
-<script lang="ts">
-import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted, getCurrentInstance } from 'vue';
-import { useStore } from '@/store/index.ts';
-import { formatDate } from '@/common/utils/formatTime.ts';
-import { setLocal } from '@/common/utils/storage.ts';
-export default {
-    name: 'layoutLockScreen',
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const layoutLockScreenInputRef = ref();
-        const store = useStore();
-        const state: any = reactive({
-            transparency: 1,
-            downClientY: 0,
-            moveDifference: 0,
-            isShowLoockLogin: false,
-            isFlags: false,
-            querySelectorEl: '',
-            time: {
-                hm: '',
-                s: '',
-                mdq: '',
-            },
-            setIntervalTime: 0,
-            isShowLockScreen: false,
-            isShowLockScreenIntervalTime: 0,
-            lockScreenPassword: '',
-        });
-        // 鼠标按下
-        const onDown = (down: any) => {
-            state.isFlags = true;
-            state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
-        };
-        // 鼠标移动
-        const onMove = (move: any) => {
-            if (state.isFlags) {
-                const el = state.querySelectorEl;
-                const opacitys = (state.transparency -= 1 / 200);
-                if (move.touches) {
-                    state.moveDifference = move.touches[0].clientY - state.downClientY;
-                } else {
-                    state.moveDifference = move.clientY - state.downClientY;
-                }
-                if (state.moveDifference >= 0) return false;
-                el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
-                if (state.moveDifference < -400) {
-                    el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
-                    state.moveDifference = -el.clientHeight;
-                    setTimeout(() => {
-                        el && el.parentNode?.removeChild(el);
-                    }, 300);
-                }
-                if (state.moveDifference === -el.clientHeight) {
-                    state.isShowLoockLogin = true;
-                    layoutLockScreenInputRef.value.focus();
-                }
-            }
-        };
-        // 鼠标松开
-        const onEnd = () => {
-            state.isFlags = false;
-            state.transparency = 1;
-            if (state.moveDifference >= -400) {
-                state.querySelectorEl.setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
-            }
-        };
-        // 获取要拖拽的初始元素
-        const initGetElement = () => {
-            nextTick(() => {
-                state.querySelectorEl = proxy.$refs.layoutLockScreenDateRef;
-            });
-        };
-        // 时间初始化
-        const initTime = () => {
-            state.time.hm = formatDate(new Date(), 'HH:MM');
-            state.time.s = formatDate(new Date(), 'SS');
-            state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
-        };
-        // 时间初始化定时器
-        const initSetTime = () => {
-            initTime();
-            state.setIntervalTime = window.setInterval(() => {
-                initTime();
-            }, 1000);
-        };
-        // 锁屏时间定时器
-        const initLockScreen = () => {
-            if (store.state.themeConfig.themeConfig.isLockScreen) {
-                state.isShowLockScreenIntervalTime = window.setInterval(() => {
-                    if (store.state.themeConfig.themeConfig.lockScreenTime <= 0) {
-                        state.isShowLockScreen = true;
-                        setLocalThemeConfig();
-                        return false;
-                    }
-                    store.state.themeConfig.themeConfig.lockScreenTime--;
-                }, 1000);
-            } else {
-                clearInterval(state.isShowLockScreenIntervalTime);
-            }
-        };
-        // 存储布局配置
-        const setLocalThemeConfig = () => {
-            store.state.themeConfig.themeConfig.isDrawer = false;
-            setLocal('themeConfig', store.state.themeConfig.themeConfig);
-        };
-        // 密码输入点击事件
-        const onLockScreenSubmit = () => {
-            store.state.themeConfig.themeConfig.isLockScreen = false;
-            store.state.themeConfig.themeConfig.lockScreenTime = 30;
-            setLocalThemeConfig();
-        };
-        // 页面加载时
-        onMounted(() => {
-            initGetElement();
-            initSetTime();
-            initLockScreen();
-        });
-        // 页面卸载时
-        onUnmounted(() => {
-            window.clearInterval(state.setIntervalTime);
-            window.clearInterval(state.isShowLockScreenIntervalTime);
-        });
-        return {
-            layoutLockScreenInputRef,
-            onDown,
-            onMove,
-            onEnd,
-            onLockScreenSubmit,
-            ...toRefs(state),
-        };
-    },
+<script setup lang="ts" name="layoutLockScreen">
+import { nextTick, onMounted, reactive, ref, onUnmounted } from 'vue';
+import { formatDate } from '@/common/utils/format';
+import { setLocal } from '@/common/utils/storage';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+
+// 定义变量内容
+const layoutLockScreenDateRef = ref<null>();
+const layoutLockScreenInputRef = ref();
+const storesThemeConfig = useThemeConfig();
+const { themeConfig } = storeToRefs(storesThemeConfig);
+const state = reactive({
+	transparency: 1,
+	downClientY: 0,
+	moveDifference: 0,
+	isShowLoockLogin: false,
+	isFlags: false,
+	querySelectorEl: '' as any,
+	time: {
+		hm: '',
+		s: '',
+		mdq: '',
+	},
+	setIntervalTime: 0,
+	isShowLockScreen: false,
+	isShowLockScreenIntervalTime: 0,
+	lockScreenPassword: '',
+});
+
+// 鼠标按下 pc
+const onDownPc = (down: MouseEvent) => {
+	state.isFlags = true;
+	state.downClientY = down.clientY;
 };
+// 鼠标按下 app
+const onDownApp = (down: TouchEvent) => {
+	state.isFlags = true;
+	state.downClientY = down.touches[0].clientY;
+};
+// 鼠标移动 pc
+const onMovePc = (move: MouseEvent) => {
+	state.moveDifference = move.clientY - state.downClientY;
+	onMove();
+};
+// 鼠标移动 app
+const onMoveApp = (move: TouchEvent) => {
+	state.moveDifference = move.touches[0].clientY - state.downClientY;
+	onMove();
+};
+// 鼠标移动事件
+const onMove = () => {
+	if (state.isFlags) {
+		const el = <HTMLElement>state.querySelectorEl;
+		const opacitys = (state.transparency -= 1 / 200);
+		if (state.moveDifference >= 0) return false;
+		el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
+		if (state.moveDifference < -400) {
+			el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
+			state.moveDifference = -el.clientHeight;
+			setTimeout(() => {
+				el && el.parentNode?.removeChild(el);
+			}, 300);
+		}
+		if (state.moveDifference === -el.clientHeight) {
+			state.isShowLoockLogin = true;
+			layoutLockScreenInputRef.value.focus();
+		}
+	}
+};
+// 鼠标松开
+const onEnd = () => {
+	state.isFlags = false;
+	state.transparency = 1;
+	if (state.moveDifference >= -400) {
+		(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
+	}
+};
+// 获取要拖拽的初始元素
+const initGetElement = () => {
+	nextTick(() => {
+		state.querySelectorEl = layoutLockScreenDateRef.value;
+	});
+};
+// 时间初始化
+const initTime = () => {
+	state.time.hm = formatDate(new Date(), 'HH:MM');
+	state.time.s = formatDate(new Date(), 'SS');
+	state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
+};
+// 时间初始化定时器
+const initSetTime = () => {
+	initTime();
+	state.setIntervalTime = window.setInterval(() => {
+		initTime();
+	}, 1000);
+};
+// 锁屏时间定时器
+const initLockScreen = () => {
+	if (themeConfig.value.isLockScreen) {
+		state.isShowLockScreenIntervalTime = window.setInterval(() => {
+			if (themeConfig.value.lockScreenTime <= 1) {
+				state.isShowLockScreen = true;
+				setLocalThemeConfig();
+				return false;
+			}
+			themeConfig.value.lockScreenTime--;
+		}, 1000);
+	} else {
+		clearInterval(state.isShowLockScreenIntervalTime);
+	}
+};
+// 存储布局配置
+const setLocalThemeConfig = () => {
+	themeConfig.value.isDrawer = false;
+	setLocal('themeConfig', themeConfig.value);
+};
+// 密码输入点击事件
+const onLockScreenSubmit = () => {
+	themeConfig.value.isLockScreen = false;
+	themeConfig.value.lockScreenTime = 30;
+	setLocalThemeConfig();
+};
+// 页面加载时
+onMounted(() => {
+	initGetElement();
+	initSetTime();
+	initLockScreen();
+});
+// 页面卸载时
+onUnmounted(() => {
+	window.clearInterval(state.setIntervalTime);
+	window.clearInterval(state.isShowLockScreenIntervalTime);
+});
 </script>
 
 <style scoped lang="scss">
 .layout-lock-screen-fixed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 }
 .layout-lock-screen-filter {
-    filter: blur(5px);
-    transform: scale(1.2);
+	filter: blur(1px);
 }
 .layout-lock-screen-mask {
-    background: rgba(255, 255, 255, 1);
-    @extend .layout-lock-screen-fixed;
-    z-index: 9999990;
+	background: var(--el-color-white);
+	@extend .layout-lock-screen-fixed;
+	z-index: 9999990;
 }
 .layout-lock-screen-img {
-    @extend .layout-lock-screen-fixed;
-    background-image: url('https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG');
-    background-size: 100% 100%;
-    z-index: 9999991;
-    transition: all ease 0.3s 0.3s;
+	@extend .layout-lock-screen-fixed;
+	background-image: url('@/assets/image/bg-login.png');
+	background-size: 100% 100%;
+	z-index: 9999991;
 }
 .layout-lock-screen {
-    @extend .layout-lock-screen-fixed;
-    z-index: 9999992;
-    &-date {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        color: #ffffff;
-        z-index: 9999993;
-        user-select: none;
-        &-box {
-            position: absolute;
-            left: 30px;
-            bottom: 50px;
-            &-time {
-                font-size: 100px;
-            }
-            &-info {
-                font-size: 40px;
-            }
-            &-minutes {
-                font-size: 16px;
-            }
-        }
-    }
-    &-login {
-        position: relative;
-        z-index: 9999994;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        color: #ffffff;
-        &-box {
-            text-align: center;
-            margin: auto;
-            &-img {
-                width: 180px;
-                height: 180px;
-                margin: auto;
-                img {
-                    width: 100%;
-                    height: 100%;
-                    border-radius: 100%;
-                }
-            }
-            &-name {
-                font-size: 26px;
-                margin: 15px 0 30px;
-            }
-        }
-        &-icon {
-            position: absolute;
-            right: 30px;
-            bottom: 30px;
-            i {
-                font-size: 20px;
-                margin-left: 15px;
-                cursor: pointer;
-                opacity: 0.8;
-                &:hover {
-                    opacity: 1;
-                }
-            }
-        }
-    }
+	@extend .layout-lock-screen-fixed;
+	z-index: 9999992;
+	&-date {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		color: var(--el-color-white);
+		z-index: 9999993;
+		user-select: none;
+		&-box {
+			position: absolute;
+			left: 30px;
+			bottom: 50px;
+			&-time {
+				font-size: 100px;
+				color: var(--el-color-white);
+			}
+			&-info {
+				font-size: 40px;
+				color: var(--el-color-white);
+			}
+			&-minutes {
+				font-size: 16px;
+			}
+		}
+		&-top {
+			width: 40px;
+			height: 40px;
+			line-height: 40px;
+			border-radius: 100%;
+			border: 1px solid var(--el-border-color-light, #ebeef5);
+			background: rgba(255, 255, 255, 0.1);
+			color: var(--el-color-white);
+			opacity: 0.8;
+			position: absolute;
+			right: 30px;
+			bottom: 50px;
+			text-align: center;
+			overflow: hidden;
+			transition: all 0.3s ease;
+			i {
+				transition: all 0.3s ease;
+			}
+			&-text {
+				opacity: 0;
+				position: absolute;
+				top: 150%;
+				font-size: 12px;
+				color: var(--el-color-white);
+				left: 50%;
+				line-height: 1.2;
+				transform: translate(-50%, -50%);
+				transition: all 0.3s ease;
+				width: 35px;
+			}
+			&:hover {
+				border: 1px solid rgba(255, 255, 255, 0.5);
+				background: rgba(255, 255, 255, 0.2);
+				box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
+				color: var(--el-color-white);
+				opacity: 1;
+				transition: all 0.3s ease;
+				i {
+					transform: translateY(-40px);
+					transition: all 0.3s ease;
+				}
+				.layout-lock-screen-date-top-text {
+					opacity: 1;
+					top: 50%;
+					transition: all 0.3s ease;
+				}
+			}
+		}
+	}
+	&-login {
+		position: relative;
+		z-index: 9999994;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		color: var(--el-color-white);
+		&-box {
+			text-align: center;
+			margin: auto;
+			&-img {
+				width: 180px;
+				height: 180px;
+				margin: auto;
+				img {
+					width: 100%;
+					height: 100%;
+					border-radius: 100%;
+				}
+			}
+			&-name {
+				font-size: 26px;
+				margin: 15px 0 30px;
+			}
+		}
+		&-icon {
+			position: absolute;
+			right: 30px;
+			bottom: 30px;
+			i {
+				font-size: 20px;
+				margin-left: 15px;
+				cursor: pointer;
+				opacity: 0.8;
+				&:hover {
+					opacity: 1;
+				}
+			}
+		}
+	}
 }
-::v-deep(.el-input-group__append) {
-    background: #ffffff;
-    padding: 0px 15px;
+:deep(.el-input-group__append) {
+	background: var(--el-color-white);
+	padding: 0px 15px;
 }
-::v-deep(.el-input__inner) {
-    border-right-color: #f6f6f6;
-    &:hover {
-        border-color: #f6f6f6;
-    }
+:deep(.el-input__inner) {
+	border-right-color: var(--el-border-color-extra-light);
+	&:hover {
+		border-color: var(--el-border-color-extra-light);
+	}
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/mayfly_go_web/src/views/layout/logo/index.vue b/mayfly_go_web/src/views/layout/logo/index.vue
index 1ff5d500..f8e83be6 100644
--- a/mayfly_go_web/src/views/layout/logo/index.vue
+++ b/mayfly_go_web/src/views/layout/logo/index.vue
@@ -2,7 +2,7 @@
     <div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
         <img src="@/assets/image/logo.svg" class="layout-logo-medium-img" />
         <span>
-            {{ `${getThemeConfig.globalTitle}` }}
+            {{ `${themeConfig.globalTitle}` }}
             <sub><span style="font-size: 10px;color:goldenrod">{{ ` ${config.version}` }}</span></sub>
         </span>
     </div>
@@ -11,37 +11,25 @@
     </div>
 </template>
 
-<script lang="ts">
-import { computed, getCurrentInstance } from 'vue';
-import { useStore } from '@/store/index.ts';
-import config from '@/common/config.ts';
-export default {
-    name: 'layoutLogo',
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 设置 logo 的显示。classic 经典布局默认显示 logo
-        const setShowLogo = computed(() => {
-            let { isCollapse, layout } = store.state.themeConfig.themeConfig;
-            return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
-        });
-        // logo 点击实现菜单展开/收起
-        const onThemeConfigChange = () => {
-            if (store.state.themeConfig.themeConfig.layout === 'transverse') return false;
-            proxy.mittBus.emit('onMenuClick');
-            store.state.themeConfig.themeConfig.isCollapse = !store.state.themeConfig.themeConfig.isCollapse;
-        };
-        return {
-            config,
-            setShowLogo,
-            getThemeConfig,
-            onThemeConfigChange,
-        };
-    },
+<script setup lang="ts" name="layoutLogo">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import config from '@/common/config';
+import mittBus from '@/common/utils/mitt';
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+
+// 设置 logo 的显示。classic 经典布局默认显示 logo
+const setShowLogo = computed(() => {
+    let { isCollapse, layout } = themeConfig.value;
+    return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
+});
+// logo 点击实现菜单展开/收起
+const onThemeConfigChange = () => {
+    if (themeConfig.value.layout === 'transverse') return false;
+    mittBus.emit('onMenuClick');
+    themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
 };
 </script>
 
diff --git a/mayfly_go_web/src/views/layout/main/classic.vue b/mayfly_go_web/src/views/layout/main/classic.vue
index 07a534ce..62b87c3d 100644
--- a/mayfly_go_web/src/views/layout/main/classic.vue
+++ b/mayfly_go_web/src/views/layout/main/classic.vue
@@ -4,7 +4,7 @@
         <el-container class="layout-mian-height-50">
             <Aside />
             <div class="flex-center layout-backtop">
-                <TagsView v-if="getThemeConfig.isTagsview" />
+                <TagsView v-if="themeConfig.isTagsview" />
                 <Main />
             </div>
         </el-container>
@@ -12,25 +12,13 @@
     </el-container>
 </template>
 
-<script lang="ts">
-import { computed } from 'vue';
-import { useStore } from '@/store/index.ts';
+<script lang="ts" setup name="layoutClassic">
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
 import Aside from '@/views/layout/component/aside.vue';
 import Header from '@/views/layout/component/header.vue';
 import Main from '@/views/layout/component/main.vue';
 import TagsView from '@/views/layout/navBars/tagsView/tagsView.vue';
-export default {
-    name: 'layoutClassic',
-    components: { Aside, Header, Main, TagsView },
-    setup() {
-        const store = useStore();
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        return {
-            getThemeConfig,
-        };
-    },
-};
+
+const { themeConfig } = storeToRefs(useThemeConfig());
 </script>
diff --git a/mayfly_go_web/src/views/layout/main/columns.vue b/mayfly_go_web/src/views/layout/main/columns.vue
index f6f59031..ac4c6343 100644
--- a/mayfly_go_web/src/views/layout/main/columns.vue
+++ b/mayfly_go_web/src/views/layout/main/columns.vue
@@ -17,18 +17,17 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { useStore } from '@/store/index.ts';
 import Aside from '@/views/layout/component/aside.vue';
 import Header from '@/views/layout/component/header.vue';
 import Main from '@/views/layout/component/main.vue';
 import ColumnsAside from '@/views/layout/component/columnsAside.vue';
+import { useThemeConfig } from '@/store/themeConfig';
 export default {
     name: 'layoutColumns',
     components: { Aside, Header, Main, ColumnsAside },
     setup() {
-        const store = useStore();
         const isFixedHeader = computed(() => {
-            return store.state.themeConfig.themeConfig.isFixedHeader;
+            return useThemeConfig().themeConfig.isFixedHeader;
         });
         return {
             isFixedHeader,
diff --git a/mayfly_go_web/src/views/layout/main/defaults.vue b/mayfly_go_web/src/views/layout/main/defaults.vue
index 9775973f..6155045e 100644
--- a/mayfly_go_web/src/views/layout/main/defaults.vue
+++ b/mayfly_go_web/src/views/layout/main/defaults.vue
@@ -15,19 +15,18 @@
 <script lang="ts">
 import { computed, getCurrentInstance, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from '@/store/index.ts';
 import Aside from '@/views/layout/component/aside.vue';
 import Header from '@/views/layout/component/header.vue';
 import Main from '@/views/layout/component/main.vue';
+import { useThemeConfig } from '@/store/themeConfig';
 export default {
     name: 'layoutDefaults',
     components: { Aside, Header, Main },
     setup() {
         const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
         const route = useRoute();
         const isFixedHeader = computed(() => {
-            return store.state.themeConfig.themeConfig.isFixedHeader;
+            return useThemeConfig().themeConfig.isFixedHeader;
         });
         // 监听路由的变化
         watch(
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/breadcrumb.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/breadcrumb.vue
index 3bacb281..c127dabb 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/breadcrumb.vue
@@ -1,15 +1,18 @@
 <template>
-    <div class="layout-navbars-breadcrumb" v-show="getThemeConfig.isBreadcrumb">
-        <SvgIcon class="layout-navbars-breadcrumb-icon" :name="getThemeConfig.isCollapse ? 'expand' : 'fold'" @click="onThemeConfigChange" />
+    <div class="layout-navbars-breadcrumb" v-show="themeConfig.isBreadcrumb">
+        <SvgIcon class="layout-navbars-breadcrumb-icon" :name="themeConfig.isCollapse ? 'expand' : 'fold'"
+            @click="onThemeConfigChange" />
         <el-breadcrumb class="layout-navbars-breadcrumb-hide">
             <transition-group name="breadcrumb" mode="out-in">
-                <el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="v.meta.title">
-                    <span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
-                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />
+                <el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="v.meta.title">
+                    <span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
+                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
+                            v-if="themeConfig.isBreadcrumbIcon" />
                         {{ v.meta.title }}
                     </span>
                     <a v-else @click.prevent="onBreadcrumbClick(v)">
-                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="getThemeConfig.isBreadcrumbIcon" />
+                        <SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont"
+                            v-if="themeConfig.isBreadcrumbIcon" />
                         {{ v.meta.title }}
                     </a>
                 </el-breadcrumb-item>
@@ -18,77 +21,67 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, computed, getCurrentInstance, onMounted } from 'vue';
+<script lang="ts" setup name="layoutBreadcrumb">
+import { reactive, onMounted } from 'vue';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
-import { useStore } from '@/store/index.ts';
-export default {
-    name: 'layoutBreadcrumb',
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        const route = useRoute();
-        const router = useRouter();
-        const state: any = reactive({
-            breadcrumbList: [],
-            routeSplit: [],
-            routeSplitFirst: '',
-            routeSplitIndex: 1,
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 面包屑点击时
-        const onBreadcrumbClick = (v: any) => {
-            const { redirect, path } = v;
-            if (redirect) router.push(redirect);
-            else router.push(path);
-        };
-        // 展开/收起左侧菜单点击
-        const onThemeConfigChange = () => {
-            proxy.mittBus.emit('onMenuClick');
-            store.state.themeConfig.themeConfig.isCollapse = !store.state.themeConfig.themeConfig.isCollapse;
-        };
-        // 处理面包屑数据
-        const getBreadcrumbList = (arr: Array<object>) => {
-            arr.map((item: any) => {
-                state.routeSplit.map((v: any, k: number, arrs: any) => {
-                    if (state.routeSplitFirst === item.path) {
-                        state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
-                        state.breadcrumbList.push(item);
-                        state.routeSplitIndex++;
-                        if (item.children) getBreadcrumbList(item.children);
-                    }
-                });
-            });
-        };
-        // 当前路由字符串切割成数组，并删除第一项空内容
-        const initRouteSplit = (path: string) => {
-            if (!store.state.themeConfig.themeConfig.isBreadcrumb) return false;
-            state.breadcrumbList = [store.state.routesList.routesList[0]];
-            state.routeSplit = path.split('/');
-            state.routeSplit.shift();
-            state.routeSplitFirst = `/${state.routeSplit[0]}`;
-            state.routeSplitIndex = 1;
-            getBreadcrumbList(store.state.routesList.routesList);
-        };
-        // 页面加载时
-        onMounted(() => {
-            initRouteSplit(route.path);
-        });
-        // 路由更新时
-        onBeforeRouteUpdate((to) => {
-            initRouteSplit(to.path);
-        });
-        return {
-            onThemeConfigChange,
-            getThemeConfig,
-            onBreadcrumbClick,
-            ...toRefs(state),
-        };
-    },
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { useRoutesList } from '@/store/routesList';
+import mittBus from '@/common/utils/mitt';
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+const { routesList } = storeToRefs(useRoutesList());
+const route = useRoute();
+const router = useRouter();
+const state: any = reactive({
+    breadcrumbList: [],
+    routeSplit: [],
+    routeSplitFirst: '',
+    routeSplitIndex: 1,
+});
+
+// 面包屑点击时
+const onBreadcrumbClick = (v: any) => {
+    const { redirect, path } = v;
+    if (redirect) router.push(redirect);
+    else router.push(path);
 };
+// 展开/收起左侧菜单点击
+const onThemeConfigChange = () => {
+    mittBus.emit('onMenuClick');
+    themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
+};
+// 处理面包屑数据
+const getBreadcrumbList = (arr: Array<object>) => {
+    arr.map((item: any) => {
+        state.routeSplit.map((v: any, k: number, arrs: any) => {
+            if (state.routeSplitFirst === item.path) {
+                state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
+                state.breadcrumbList.push(item);
+                state.routeSplitIndex++;
+                if (item.children) getBreadcrumbList(item.children);
+            }
+        });
+    });
+};
+// 当前路由字符串切割成数组，并删除第一项空内容
+const initRouteSplit = (path: string) => {
+    if (!themeConfig.value.isBreadcrumb) return false;
+    state.breadcrumbList = [routesList.value[0]];
+    state.routeSplit = path.split('/');
+    state.routeSplit.shift();
+    state.routeSplitFirst = `/${state.routeSplit[0]}`;
+    state.routeSplitIndex = 1;
+    getBreadcrumbList(routesList.value);
+};
+// 页面加载时
+onMounted(() => {
+    initRouteSplit(route.path);
+});
+// 路由更新时
+onBeforeRouteUpdate((to) => {
+    initRouteSplit(to.path);
+});
 </script>
 
 <style scoped lang="scss">
@@ -98,20 +91,24 @@ export default {
     display: flex;
     align-items: center;
     padding-left: 15px;
+
     .layout-navbars-breadcrumb-icon {
         cursor: pointer;
         font-size: 18px;
         margin-right: 15px;
         color: var(--bg-topBarColor);
     }
+
     .layout-navbars-breadcrumb-span {
         opacity: 0.7;
         color: var(--bg-topBarColor);
     }
+
     .layout-navbars-breadcrumb-iconfont {
         font-size: 14px;
         margin-right: 5px;
     }
+
     ::v-deep(.el-breadcrumb__separator) {
         opacity: 0.7;
         color: var(--bg-topBarColor);
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue
index 057b1985..95cd1cec 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/index.vue
@@ -2,109 +2,100 @@
     <div class="layout-navbars-breadcrumb-index">
         <Logo v-if="setIsShowLogo" />
         <Breadcrumb />
-        <Horizontal :menuList="menuList" v-if="isLayoutTransverse" />
+        <Horizontal :menuList="state.menuList" v-if="isLayoutTransverse" />
         <User />
     </div>
 </template>
 
-<script lang="ts">
-import { computed, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, watch } from 'vue';
+<script lang="ts" setup name="layoutBreadcrumbIndex">
+import { computed, reactive, onMounted, onUnmounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
-import { useStore } from '@/store/index.ts';
+import pinia from '@/store/index';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { useRoutesList } from '@/store/routesList';
 import Breadcrumb from '@/views/layout/navBars/breadcrumb/breadcrumb.vue';
 import User from '@/views/layout/navBars/breadcrumb/user.vue';
 import Logo from '@/views/layout/logo/index.vue';
 import Horizontal from '@/views/layout/navMenu/horizontal.vue';
-export default {
-    name: 'layoutBreadcrumbIndex',
-    components: { Breadcrumb, User, Logo, Horizontal },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        const route = useRoute();
-        const state: any = reactive({
-            menuList: [],
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 设置 logo 显示/隐藏
-        const setIsShowLogo = computed(() => {
-            let { isShowLogo, layout } = store.state.themeConfig.themeConfig;
-            return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
-        });
-        // 设置是否显示横向导航菜单
-        const isLayoutTransverse = computed(() => {
-            let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-            return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
-        });
-        // 设置/过滤路由（非静态路由/是否显示在菜单中）
-        const setFilterRoutes = () => {
-            let { layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
-            if (layout === 'classic' && isClassicSplitMenu) {
-                state.menuList = delClassicChildren(filterRoutesFun(store.state.routesList.routesList));
-                const resData = setSendClassicChildren(route.path);
-                proxy.mittBus.emit('setSendClassicChildren', resData);
-            } else {
-                state.menuList = filterRoutesFun(store.state.routesList.routesList);
-            }
-        };
-        // 设置了分割菜单时，删除底下 children
-        const delClassicChildren = (arr: Array<object>) => {
-            arr.map((v: any) => {
-                if (v.children) delete v.children;
-            });
-            return arr;
-        };
-        // 路由过滤递归函数
-        const filterRoutesFun = (arr: Array<object>) => {
-            return arr
-                .filter((item: any) => !item.meta.isHide)
-                .map((item: any) => {
-                    item = Object.assign({}, item);
-                    if (item.children) item.children = filterRoutesFun(item.children);
-                    return item;
-                });
-        };
-        // 传送当前子级数据到菜单中
-        const setSendClassicChildren = (path: string) => {
-            const currentPathSplit = path.split('/');
-            let currentData: any = {};
-            filterRoutesFun(store.state.routesList.routesList).map((v, k) => {
-                if (v.path === `/${currentPathSplit[1]}`) {
-                    v['k'] = k;
-                    currentData['item'] = [{ ...v }];
-                    currentData['children'] = [{ ...v }];
-                    if (v.children) currentData['children'] = v.children;
-                }
-            });
-            return currentData;
-        };
-        // 监听路由的变化，动态赋值给菜单中
-        watch(store.state, (val) => {
-            if (val.routesList.routesList.length === state.menuList.length) return false;
-            setFilterRoutes();
-        });
-        // 页面加载时
-        onMounted(() => {
-            setFilterRoutes();
-            proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
-                setFilterRoutes();
-            });
-        });
-        // 页面卸载时
-        onUnmounted(() => {
-            proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes');
-        });
-        return {
-            getThemeConfig,
-            setIsShowLogo,
-            isLayoutTransverse,
-            ...toRefs(state),
-        };
-    },
+import mittBus from '@/common/utils/mitt';
+
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+const { routesList } = storeToRefs(useRoutesList());
+const route = useRoute();
+const state: any = reactive({
+    menuList: [],
+});
+
+// 设置 logo 显示/隐藏
+const setIsShowLogo = computed(() => {
+    let { isShowLogo, layout } = themeConfig.value;
+    return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
+});
+// 设置是否显示横向导航菜单
+const isLayoutTransverse = computed(() => {
+    let { layout, isClassicSplitMenu } = themeConfig.value;
+    return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
+});
+// 设置/过滤路由（非静态路由/是否显示在菜单中）
+const setFilterRoutes = () => {
+    let { layout, isClassicSplitMenu } = themeConfig.value;
+    if (layout === 'classic' && isClassicSplitMenu) {
+        state.menuList = delClassicChildren(filterRoutesFun(routesList.value));
+        const resData = setSendClassicChildren(route.path);
+        mittBus.emit('setSendClassicChildren', resData);
+    } else {
+        state.menuList = filterRoutesFun(routesList.value);
+    }
 };
+// 设置了分割菜单时，删除底下 children
+const delClassicChildren = (arr: Array<object>) => {
+    arr.map((v: any) => {
+        if (v.children) delete v.children;
+    });
+    return arr;
+};
+// 路由过滤递归函数
+const filterRoutesFun = (arr: Array<object>) => {
+    return arr
+        .filter((item: any) => !item.meta.isHide)
+        .map((item: any) => {
+            item = Object.assign({}, item);
+            if (item.children) item.children = filterRoutesFun(item.children);
+            return item;
+        });
+};
+// 传送当前子级数据到菜单中
+const setSendClassicChildren = (path: string) => {
+    const currentPathSplit = path.split('/');
+    let currentData: any = {};
+    filterRoutesFun(routesList.value).map((v, k) => {
+        if (v.path === `/${currentPathSplit[1]}`) {
+            v['k'] = k;
+            currentData['item'] = [{ ...v }];
+            currentData['children'] = [{ ...v }];
+            if (v.children) currentData['children'] = v.children;
+        }
+    });
+    return currentData;
+};
+// 监听路由的变化，动态赋值给菜单中
+watch(pinia.state, (val) => {
+    if (val.routesList.routesList.length === state.menuList.length) return false;
+    setFilterRoutes();
+});
+// 页面加载时
+onMounted(() => {
+    setFilterRoutes();
+    mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
+        setFilterRoutes();
+    });
+});
+// 页面卸载时
+onUnmounted(() => {
+    mittBus.off('getBreadcrumbIndexSetFilterRoutes');
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/search.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/search.vue
index f70cfaeb..2bb8f5db 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/search.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/search.vue
@@ -1,120 +1,103 @@
 <template>
     <div class="layout-search-dialog">
-        <el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
-            <el-autocomplete
-                v-model="menuQuery"
-                :fetch-suggestions="menuSearch"
-                placeholder="菜单搜索"
-                prefix-icon="el-icon-search"
-                ref="layoutMenuAutocompleteRef"
-                @select="onHandleSelect"
-                @blur="onSearchBlur"
-            >
+        <el-dialog v-model="state.isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
+            <el-autocomplete v-model="state.menuQuery" :fetch-suggestions="menuSearch" placeholder="菜单搜索"
+                prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect" @blur="onSearchBlur">
                 <template #prefix>
                     <el-icon class="el-input__icon">
                         <search />
                     </el-icon>
                 </template>
                 <template #default="{ item }">
-                    <div><SvgIcon :name="item.meta.icon" class="mr5" />{{ item.meta.title }}</div>
+                    <div>
+                        <SvgIcon :name="item.meta.icon" class="mr5" />{{ item.meta.title }}
+                    </div>
                 </template>
             </el-autocomplete>
         </el-dialog>
     </div>
 </template>
 
-<script lang="ts">
-import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
+<script lang="ts" setup name="layoutBreadcrumbSearch">
+import { reactive, ref, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
-import { useStore } from '@/store/index.ts';
-export default defineComponent({
-    name: 'layoutBreadcrumbSearch',
-    setup() {
-        const layoutMenuAutocompleteRef: any = ref(null);
-        const store = useStore();
-        const router = useRouter();
-        const state: any = reactive({
-            isShowSearch: false,
-            menuQuery: '',
-            tagsViewList: [],
-        });
-        // 搜索弹窗打开
-        const openSearch = () => {
-            state.menuQuery = '';
-            state.isShowSearch = true;
-            initTageView();
-            nextTick(() => {
-                setTimeout(() => {
-                    layoutMenuAutocompleteRef.value.focus();
-                });
-            });
-        };
-        // 搜索弹窗关闭
-        const closeSearch = () => {
-            state.isShowSearch = false;
-        };
-        // 菜单搜索数据过滤
-        const menuSearch = (queryString: any, cb: any) => {
-            let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
-            cb(results);
-        };
-        // 菜单搜索过滤
-        const createFilter = (queryString: any) => {
-            return (restaurant: any) => {
-                return (
-                    restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
-                    restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
-                );
-            };
-        };
-        // 初始化菜单数据
-        const initTageView = () => {
-            if (state.tagsViewList.length > 0) return false;
-            getRoutes(store.state.routesList.routesList).map((v: any) => {
-                if (!v.meta.isHide) {
-                    state.tagsViewList.push({ ...v });
-                }
-            });
-        };
-        // 获取所有根节点的route，即可访问的route
-        const getRoutes = (routes: any) => {
-            const menu: any = [];
-            for (let i = 0; i < routes.length; i++) {
-                const item = { ...routes[i] };
-                if (item.children) {
-                    getRoutes(item.children).forEach((r: any) => {
-                        menu.push(r);
-                    });
-                    continue;
-                }
-                menu.push(item);
-            }
-            return menu;
-        };
+import { useRoutesList } from '@/store/routesList';
 
-        // 当前菜单选中时
-        const onHandleSelect = (item: any) => {
-            let { path, redirect } = item;
-            if (item.meta.link && !item.meta.isIframe) window.open(item.meta.link);
-            else if (redirect) router.push(redirect);
-            else router.push(path);
-            closeSearch();
-        };
-        // input 失去焦点时
-        const onSearchBlur = () => {
-            closeSearch();
-        };
-        return {
-            layoutMenuAutocompleteRef,
-            openSearch,
-            closeSearch,
-            menuSearch,
-            onHandleSelect,
-            onSearchBlur,
-            ...toRefs(state),
-        };
-    },
+const layoutMenuAutocompleteRef: any = ref(null);;
+const router = useRouter();
+const state: any = reactive({
+    isShowSearch: false,
+    menuQuery: '',
+    tagsViewList: [],
 });
+// 搜索弹窗打开
+const openSearch = () => {
+    state.menuQuery = '';
+    state.isShowSearch = true;
+    initTageView();
+    nextTick(() => {
+        setTimeout(() => {
+            layoutMenuAutocompleteRef.value.focus();
+        });
+    });
+};
+// 搜索弹窗关闭
+const closeSearch = () => {
+    state.isShowSearch = false;
+};
+// 菜单搜索数据过滤
+const menuSearch = (queryString: any, cb: any) => {
+    let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
+    cb(results);
+};
+// 菜单搜索过滤
+const createFilter = (queryString: any) => {
+    return (restaurant: any) => {
+        return (
+            restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
+            restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1
+        );
+    };
+};
+// 初始化菜单数据
+const initTageView = () => {
+    if (state.tagsViewList.length > 0) return false;
+    getRoutes(useRoutesList().routesList).map((v: any) => {
+        if (!v.meta.isHide) {
+            state.tagsViewList.push({ ...v });
+        }
+    });
+};
+// 获取所有根节点的route，即可访问的route
+const getRoutes = (routes: any) => {
+    const menu: any = [];
+    for (let i = 0; i < routes.length; i++) {
+        const item = { ...routes[i] };
+        if (item.children) {
+            getRoutes(item.children).forEach((r: any) => {
+                menu.push(r);
+            });
+            continue;
+        }
+        menu.push(item);
+    }
+    return menu;
+};
+
+// 当前菜单选中时
+const onHandleSelect = (item: any) => {
+    let { path, redirect } = item;
+    if (item.meta.link && !item.meta.isIframe) window.open(item.meta.link);
+    else if (redirect) router.push(redirect);
+    else router.push(path);
+    closeSearch();
+};
+// input 失去焦点时
+const onSearchBlur = () => {
+    closeSearch();
+};
+
+defineExpose({openSearch})
 </script>
 
 <style scoped lang="scss">
@@ -124,6 +107,7 @@ export default defineComponent({
         border-radius: 0 !important;
         background: rgba(0, 0, 0, 0.5);
     }
+
     ::v-deep(.el-autocomplete) {
         width: 560px;
         position: absolute;
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
index a5defb43..5561ff39 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/setings.vue
@@ -1,49 +1,47 @@
 <template>
     <div class="layout-breadcrumb-seting">
-        <el-drawer title="布局设置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px" @close="onDrawerClose">
+        <el-drawer title="布局设置" v-model="themeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
+            @close="onDrawerClose">
             <el-scrollbar class="layout-breadcrumb-seting-bar">
                 <!-- ssh终端主题 -->
                 <el-divider content-position="left">终端主题</el-divider>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.terminalForeground" size="small" @change="onColorPickerChange('terminalForeground')">
+                        <el-color-picker v-model="themeConfig.terminalForeground" size="small"
+                            @change="onColorPickerChange('terminalForeground')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">背景颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.terminalBackground" size="small" @change="onColorPickerChange('terminalBackground')">
+                        <el-color-picker v-model="themeConfig.terminalBackground" size="small"
+                            @change="onColorPickerChange('terminalBackground')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">cursor颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.terminalCursor" size="small" @change="onColorPickerChange('terminalCursor')">
+                        <el-color-picker v-model="themeConfig.terminalCursor" size="small"
+                            @change="onColorPickerChange('terminalCursor')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体大小</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-input-number
-                            v-model="getThemeConfig.terminalFontSize"
-                            controls-position="right"
-                            :min="12"
-                            :max="24"
-                            @change="setLocalThemeConfig"
-                            size="small"
-                            style="width: 90px"
-                        >
+                        <el-input-number v-model="themeConfig.terminalFontSize" controls-position="right" :min="12"
+                            :max="24" @change="setLocalThemeConfig" size="small" style="width: 90px">
                         </el-input-number>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">字体粗细</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select @change="setLocalThemeConfig" v-model="getThemeConfig.terminalFontWeight" size="small" style="width: 90px">
+                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.terminalFontWeight" size="small"
+                            style="width: 90px">
                             <el-option label="normal" value="normal"> </el-option>
                             <el-option label="bold" value="bold"> </el-option>
                         </el-select>
@@ -54,7 +52,8 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">主题</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select @change="setLocalThemeConfig" v-model="getThemeConfig.editorTheme" size="small" style="width: 130px">
+                        <el-select @change="setLocalThemeConfig" v-model="themeConfig.editorTheme" size="small"
+                            style="width: 130px">
                             <el-option label="vs" value="vs"> </el-option>
                             <el-option label="vs-dark" value="vs-dark"> </el-option>
                             <el-option label="SolarizedLight" value="SolarizedLight"> </el-option>
@@ -67,31 +66,36 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.primary" size="small" @change="onColorPickerChange('primary')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.primary" size="small"
+                            @change="onColorPickerChange('primary')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">success</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.success" size="small" @change="onColorPickerChange('success')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.success" size="small"
+                            @change="onColorPickerChange('success')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">info</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.info" size="small" @change="onColorPickerChange('info')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.info" size="small" @change="onColorPickerChange('info')">
+                        </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.warning" size="small" @change="onColorPickerChange('warning')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.warning" size="small"
+                            @change="onColorPickerChange('warning')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.danger" size="small" @change="onColorPickerChange('danger')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.danger" size="small" @change="onColorPickerChange('danger')">
+                        </el-color-picker>
                     </div>
                 </div>
 
@@ -100,69 +104,73 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.topBar" size="small" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.topBar" size="small"
+                            @change="onBgColorPickerChange('topBar')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.menuBar" size="small" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
+                        <el-color-picker v-model="themeConfig.menuBar" size="small"
+                            @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.columnsMenuBar" size="small" @change="onBgColorPickerChange('columnsMenuBar')">
+                        <el-color-picker v-model="themeConfig.columnsMenuBar" size="small"
+                            @change="onBgColorPickerChange('columnsMenuBar')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.topBarColor" size="small" @change="onBgColorPickerChange('topBarColor')">
+                        <el-color-picker v-model="themeConfig.topBarColor" size="small"
+                            @change="onBgColorPickerChange('topBarColor')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker v-model="getThemeConfig.menuBarColor" size="small" @change="onBgColorPickerChange('menuBarColor')">
+                        <el-color-picker v-model="themeConfig.menuBarColor" size="small"
+                            @change="onBgColorPickerChange('menuBarColor')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单默认字体颜色</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-color-picker
-                            v-model="getThemeConfig.columnsMenuBarColor"
-                            size="small"
-                            @change="onBgColorPickerChange('columnsMenuBarColor')"
-                        >
+                        <el-color-picker v-model="themeConfig.columnsMenuBarColor" size="small"
+                            @change="onBgColorPickerChange('columnsMenuBarColor')">
                         </el-color-picker>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt10">
                     <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景渐变</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isTopBarColorGradual" @change="onTopBarGradualChange"></el-switch>
+                        <el-switch v-model="themeConfig.isTopBarColorGradual" @change="onTopBarGradualChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt14">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景渐变</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
+                        <el-switch v-model="themeConfig.isMenuBarColorGradual" @change="onMenuBarGradualChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt14">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏菜单背景渐变</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isColumnsMenuBarColorGradual" @change="onColumnsMenuBarGradualChange"></el-switch>
+                        <el-switch v-model="themeConfig.isColumnsMenuBarColorGradual"
+                            @change="onColumnsMenuBarGradualChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt14">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单字体背景高亮</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isMenuBarColorHighlight" @change="onMenuBarHighlightChange"></el-switch>
+                        <el-switch v-model="themeConfig.isMenuBarColorHighlight"
+                            @change="onMenuBarHighlightChange"></el-switch>
                     </div>
                 </div>
 
@@ -171,50 +179,41 @@
                 <div class="layout-breadcrumb-seting-bar-flex">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单水平折叠</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isCollapse" @change="onThemeConfigChange"></el-switch>
+                        <el-switch v-model="themeConfig.isCollapse" @change="onThemeConfigChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isUniqueOpened" @change="setLocalThemeConfig"></el-switch>
+                        <el-switch v-model="themeConfig.isUniqueOpened" @change="setLocalThemeConfig"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">固定 Header</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
+                        <el-switch v-model="themeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'classic' ? 0.5 : 1 }">
+                <div class="layout-breadcrumb-seting-bar-flex mt15"
+                    :style="{ opacity: themeConfig.layout !== 'classic' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">经典布局分割菜单</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch
-                            v-model="getThemeConfig.isClassicSplitMenu"
-                            :disabled="getThemeConfig.layout !== 'classic'"
-                            @change="onClassicSplitMenuChange"
-                        >
+                        <el-switch v-model="themeConfig.isClassicSplitMenu" :disabled="themeConfig.layout !== 'classic'"
+                            @change="onClassicSplitMenuChange">
                         </el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启锁屏</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isLockScreen" @change="setLocalThemeConfig"></el-switch>
+                        <el-switch v-model="themeConfig.isLockScreen" @change="setLocalThemeConfig"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt11">
                     <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏(s/秒)</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-input-number
-                            v-model="getThemeConfig.lockScreenTime"
-                            controls-position="right"
-                            :min="0"
-                            :max="9999"
-                            @change="setLocalThemeConfig"
-                            size="small"
-                            style="width: 90px"
-                        >
+                        <el-input-number v-model="themeConfig.lockScreenTime" controls-position="right" :min="0" :max="9999"
+                            @change="setLocalThemeConfig" size="small" style="width: 90px">
                         </el-input-number>
                     </div>
                 </div>
@@ -224,65 +223,63 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
+                        <el-switch v-model="themeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
                     </div>
                 </div>
-                <div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
+                <div class="layout-breadcrumb-seting-bar-flex mt15"
+                    :style="{ opacity: themeConfig.layout === 'transverse' ? 0.5 : 1 }">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启Breadcrumb</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch
-                            v-model="getThemeConfig.isBreadcrumb"
-                            :disabled="getThemeConfig.layout === 'transverse'"
-                            @change="onIsBreadcrumbChange"
-                        ></el-switch>
+                        <el-switch v-model="themeConfig.isBreadcrumb" :disabled="themeConfig.layout === 'transverse'"
+                            @change="onIsBreadcrumbChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启Breadcrumb图标</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isBreadcrumbIcon" @change="setLocalThemeConfig"></el-switch>
+                        <el-switch v-model="themeConfig.isBreadcrumbIcon" @change="setLocalThemeConfig"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isTagsview" @change="setLocalThemeConfig"></el-switch>
+                        <el-switch v-model="themeConfig.isTagsview" @change="setLocalThemeConfig"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview图标</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isTagsviewIcon" @change="setLocalThemeConfig"></el-switch>
+                        <el-switch v-model="themeConfig.isTagsviewIcon" @change="setLocalThemeConfig"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启 TagsView缓存</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isCacheTagsView" @change="setLocalThemeConfig"></el-switch>
+                        <el-switch v-model="themeConfig.isCacheTagsView" @change="setLocalThemeConfig"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启 TagsView拖拽</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
+                        <el-switch v-model="themeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isFooter" @change="setLocalThemeConfig"></el-switch>
+                        <el-switch v-model="themeConfig.isFooter" @change="setLocalThemeConfig"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">灰色模式</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isGrayscale" @change="onAddFilterChange('grayscale')"></el-switch>
+                        <el-switch v-model="themeConfig.isGrayscale" @change="onAddFilterChange('grayscale')"></el-switch>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">色弱模式</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-switch v-model="getThemeConfig.isInvert" @change="onAddFilterChange('invert')"></el-switch>
+                        <el-switch v-model="themeConfig.isInvert" @change="onAddFilterChange('invert')"></el-switch>
                     </div>
                 </div>
 
@@ -291,30 +288,19 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">Tagsview 风格</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select
-                            v-model="getThemeConfig.tagsStyle"
-                            placeholder="请选择"
-                            size="small"
-                            style="width: 90px"
-                            @change="setLocalThemeConfig"
-                        >
+                        <el-select v-model="themeConfig.tagsStyle" placeholder="请选择" size="small" style="width: 90px"
+                            @change="setLocalThemeConfig">
                             <el-option label="风格1" value="tags-style-one"></el-option>
                             <el-option label="风格2" value="tags-style-two"></el-option>
                             <el-option label="风格3" value="tags-style-three"></el-option>
-                            <el-option label="风格4" value="tags-style-four"></el-option>
                         </el-select>
                     </div>
                 </div>
                 <div class="layout-breadcrumb-seting-bar-flex mt15">
                     <div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select
-                            v-model="getThemeConfig.animation"
-                            placeholder="请选择"
-                            size="small"
-                            style="width: 90px"
-                            @change="setLocalThemeConfig"
-                        >
+                        <el-select v-model="themeConfig.animation" placeholder="请选择" size="small" style="width: 90px"
+                            @change="setLocalThemeConfig">
                             <el-option label="slide-right" value="slide-right"></el-option>
                             <el-option label="slide-left" value="slide-left"></el-option>
                             <el-option label="opacitys" value="opacitys"></el-option>
@@ -324,13 +310,8 @@
                 <div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
                     <div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
                     <div class="layout-breadcrumb-seting-bar-flex-value">
-                        <el-select
-                            v-model="getThemeConfig.columnsAsideStyle"
-                            placeholder="请选择"
-                            size="small"
-                            style="width: 90px"
-                            @change="setLocalThemeConfig"
-                        >
+                        <el-select v-model="themeConfig.columnsAsideStyle" placeholder="请选择" size="small"
+                            style="width: 90px" @change="setLocalThemeConfig">
                             <el-option label="圆角" value="columns-round"></el-option>
                             <el-option label="卡片" value="columns-card"></el-option>
                         </el-select>
@@ -342,14 +323,16 @@
                 <div class="layout-drawer-content-flex">
                     <!-- defaults 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
-                        <section class="el-container el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'defaults' }">
+                        <section class="el-container el-circular"
+                            :class="{ 'drawer-layout-active': themeConfig.layout === 'defaults' }">
                             <aside class="el-aside" style="width: 20px"></aside>
                             <section class="el-container is-vertical">
                                 <header class="el-header" style="height: 10px"></header>
                                 <main class="el-main"></main>
                             </section>
                         </section>
-                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
+                        <div class="layout-tips-warp"
+                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'defaults' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">默认</p>
                             </div>
@@ -357,10 +340,8 @@
                     </div>
                     <!-- classic 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('classic')">
-                        <section
-                            class="el-container is-vertical el-circular"
-                            :class="{ 'drawer-layout-active': getThemeConfig.layout === 'classic' }"
-                        >
+                        <section class="el-container is-vertical el-circular"
+                            :class="{ 'drawer-layout-active': themeConfig.layout === 'classic' }">
                             <header class="el-header" style="height: 10px"></header>
                             <section class="el-container">
                                 <aside class="el-aside" style="width: 20px"></aside>
@@ -369,7 +350,8 @@
                                 </section>
                             </section>
                         </section>
-                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
+                        <div class="layout-tips-warp"
+                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'classic' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">经典</p>
                             </div>
@@ -377,10 +359,8 @@
                     </div>
                     <!-- transverse 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('transverse')">
-                        <section
-                            class="el-container is-vertical el-circular"
-                            :class="{ 'drawer-layout-active': getThemeConfig.layout === 'transverse' }"
-                        >
+                        <section class="el-container is-vertical el-circular"
+                            :class="{ 'drawer-layout-active': themeConfig.layout === 'transverse' }">
                             <header class="el-header" style="height: 10px"></header>
                             <section class="el-container">
                                 <section class="el-container is-vertical">
@@ -388,7 +368,8 @@
                                 </section>
                             </section>
                         </section>
-                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }">
+                        <div class="layout-tips-warp"
+                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'transverse' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">横向</p>
                             </div>
@@ -396,7 +377,8 @@
                     </div>
                     <!-- columns 布局 -->
                     <div class="layout-drawer-content-item" @click="onSetLayout('columns')">
-                        <section class="el-container el-circular" :class="{ 'drawer-layout-active': getThemeConfig.layout === 'columns' }">
+                        <section class="el-container el-circular"
+                            :class="{ 'drawer-layout-active': themeConfig.layout === 'columns' }">
                             <aside class="el-aside-dark" style="width: 10px"></aside>
                             <aside class="el-aside" style="width: 20px"></aside>
                             <section class="el-container is-vertical">
@@ -404,7 +386,8 @@
                                 <main class="el-main"></main>
                             </section>
                         </section>
-                        <div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
+                        <div class="layout-tips-warp"
+                            :class="{ 'layout-tips-warp-active': themeConfig.layout === 'columns' }">
                             <div class="layout-tips-box">
                                 <p class="layout-tips-txt">分栏</p>
                             </div>
@@ -414,14 +397,8 @@
                 <div class="copy-config">
                     <el-alert title="点击下方按钮，复制布局配置去 /src/store/modules/themeConfig.ts中修改" type="warning" :closable="false">
                     </el-alert>
-                    <el-button
-                        size="small"
-                        class="copy-config-btn"
-                        icon="el-icon-document-copy"
-                        type="primary"
-                        ref="copyConfigBtnRef"
-                        @click="onCopyConfigClick($event.target)"
-                        >一键复制配置
+                    <el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
+                        ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
                     </el-button>
                 </div>
             </el-scrollbar>
@@ -429,351 +406,330 @@
     </div>
 </template>
 
-<script lang="ts">
-import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, ref } from 'vue';
+<script lang="ts" setup name="layoutBreadcrumbSeting">
+import { nextTick, onUnmounted, onMounted, ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import ClipboardJS from 'clipboard';
-import { useStore } from '@/store/index.ts';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
 import { getLightColor } from '@/common/utils/theme.ts';
 import { setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
-export default defineComponent({
-    name: 'layoutBreadcrumbSeting',
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const copyConfigBtnRef = ref();
-        const store = useStore();
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 1、全局主题
-        const onColorPickerChange = (color: string) => {
-            setPropertyFun(`--color-${color}`, getThemeConfig.value[color]);
-            setDispatchThemeConfig();
-        };
-        // 1、全局主题设置函数
-        const setPropertyFun = (color: string, targetVal: any) => {
-            document.documentElement.style.setProperty(color, targetVal);
-            for (let i = 1; i <= 9; i++) {
-                document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10));
-            }
-        };
-        // 2、菜单 / 顶栏
-        const onBgColorPickerChange = (bg: string) => {
-            document.documentElement.style.setProperty(`--bg-${bg}`, getThemeConfig.value[bg]);
-            onTopBarGradualChange();
-            onMenuBarGradualChange();
-            onColumnsMenuBarGradualChange();
-            setDispatchThemeConfig();
-        };
-        // 2、菜单 / 顶栏 --> 顶栏背景渐变
-        const onTopBarGradualChange = () => {
-            setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
-        };
-        // 2、菜单 / 顶栏 --> 菜单背景渐变
-        const onMenuBarGradualChange = () => {
-            setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
-        };
-        // 2、菜单 / 顶栏 --> 分栏菜单背景渐变
-        const onColumnsMenuBarGradualChange = () => {
-            setGraduaFun(
-                '.layout-container .layout-columns-aside',
-                getThemeConfig.value.isColumnsMenuBarColorGradual,
-                getThemeConfig.value.columnsMenuBar
-            );
-        };
-        // 2、菜单 / 顶栏 --> 背景渐变函数
-        const setGraduaFun = (el: string, bool: boolean, color: string) => {
-            nextTick(() => {
-                let els = document.querySelector(el);
-                if (!els) return false;
-                if (bool) els.setAttribute('style', `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)})`);
-                else els.setAttribute('style', `background-image:${color}`);
-                setLocalThemeConfig();
-                const elNavbars: any = document.querySelector('.layout-navbars-breadcrumb-index');
-                const elAside: any = document.querySelector('.layout-container .el-aside');
-                const elColumns: any = document.querySelector('.layout-container .layout-columns-aside');
-                if (elNavbars) setLocal('navbarsBgStyle', elNavbars.style.cssText);
-                if (elAside) setLocal('asideBgStyle', elAside.style.cssText);
-                if (elColumns) setLocal('columnsBgStyle', elColumns.style.cssText);
-            });
-        };
-        // 2、菜单 / 顶栏 --> 菜单字体背景高亮
-        const onMenuBarHighlightChange = () => {
-            nextTick(() => {
-                setTimeout(() => {
-                    let elsItems = document.querySelectorAll('.el-menu-item');
-                    let elActive = document.querySelector('.el-menu-item.is-active');
-                    if (!elActive) return false;
-                    if (getThemeConfig.value.isMenuBarColorHighlight) {
-                        elsItems.forEach((el: any) => el.setAttribute('id', ``));
-                        elActive.setAttribute('id', `add-is-active`);
-                        setLocal('menuBarHighlightId', elActive.getAttribute('id'));
-                    } else {
-                        elActive.setAttribute('id', ``);
-                    }
-                    setLocalThemeConfig();
-                }, 0);
-            });
-        };
-        // 3、界面设置 --> 菜单水平折叠
-        const onThemeConfigChange = () => {
-            onMenuBarHighlightChange();
-            setDispatchThemeConfig();
-        };
-        // 3、界面设置 --> 固定 Header
-        const onIsFixedHeaderChange = () => {
-            getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
-            setLocalThemeConfig();
-        };
-        // 3、界面设置 --> 经典布局分割菜单
-        const onClassicSplitMenuChange = () => {
-            getThemeConfig.value.isBreadcrumb = false;
-            setLocalThemeConfig();
-            proxy.mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
-        };
-        // 4、界面显示 --> 侧边栏 Logo
-        const onIsShowLogoChange = () => {
-            getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
-            setLocalThemeConfig();
-        };
-        // 4、界面显示 --> 面包屑 Breadcrumb
-        const onIsBreadcrumbChange = () => {
-            if (getThemeConfig.value.layout === 'classic') {
-                getThemeConfig.value.isClassicSplitMenu = false;
-            }
-            setLocalThemeConfig();
-        };
-        // 4、界面显示 --> 开启 TagsView 拖拽
-        const onSortableTagsViewChange = () => {
-            proxy.mittBus.emit('openOrCloseSortable');
-            setLocalThemeConfig();
-        };
-        // 4、界面显示 --> 灰色模式/色弱模式
-        const onAddFilterChange = (attr: string) => {
-            if (attr === 'grayscale') {
-                if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
+import mittBus from '@/common/utils/mitt';
+
+const copyConfigBtnRef = ref();
+const { themeConfig } = storeToRefs(useThemeConfig());
+
+// 1、全局主题
+const onColorPickerChange = (color: string) => {
+    setPropertyFun(`--color-${color}`, themeConfig.value[color]);
+    setDispatchThemeConfig();
+};
+// 1、全局主题设置函数
+const setPropertyFun = (color: string, targetVal: any) => {
+    document.documentElement.style.setProperty(color, targetVal);
+    for (let i = 1; i <= 9; i++) {
+        document.documentElement.style.setProperty(`${color}-light-${i}`, getLightColor(targetVal, i / 10));
+    }
+};
+// 2、菜单 / 顶栏
+const onBgColorPickerChange = (bg: string) => {
+    document.documentElement.style.setProperty(`--bg-${bg}`, themeConfig.value[bg]);
+    onTopBarGradualChange();
+    onMenuBarGradualChange();
+    onColumnsMenuBarGradualChange();
+    setDispatchThemeConfig();
+};
+// 2、菜单 / 顶栏 --> 顶栏背景渐变
+const onTopBarGradualChange = () => {
+    setGraduaFun('.layout-navbars-breadcrumb-index', themeConfig.value.isTopBarColorGradual, themeConfig.value.topBar);
+};
+// 2、菜单 / 顶栏 --> 菜单背景渐变
+const onMenuBarGradualChange = () => {
+    setGraduaFun('.layout-container .el-aside', themeConfig.value.isMenuBarColorGradual, themeConfig.value.menuBar);
+};
+// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
+const onColumnsMenuBarGradualChange = () => {
+    setGraduaFun(
+        '.layout-container .layout-columns-aside',
+        themeConfig.value.isColumnsMenuBarColorGradual,
+        themeConfig.value.columnsMenuBar
+    );
+};
+// 2、菜单 / 顶栏 --> 背景渐变函数
+const setGraduaFun = (el: string, bool: boolean, color: string) => {
+    nextTick(() => {
+        let els = document.querySelector(el);
+        if (!els) return false;
+        if (bool) els.setAttribute('style', `background-image:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)})`);
+        else els.setAttribute('style', `background-image:${color}`);
+        setLocalThemeConfig();
+        const elNavbars: any = document.querySelector('.layout-navbars-breadcrumb-index');
+        const elAside: any = document.querySelector('.layout-container .el-aside');
+        const elColumns: any = document.querySelector('.layout-container .layout-columns-aside');
+        if (elNavbars) setLocal('navbarsBgStyle', elNavbars.style.cssText);
+        if (elAside) setLocal('asideBgStyle', elAside.style.cssText);
+        if (elColumns) setLocal('columnsBgStyle', elColumns.style.cssText);
+    });
+};
+// 2、菜单 / 顶栏 --> 菜单字体背景高亮
+const onMenuBarHighlightChange = () => {
+    nextTick(() => {
+        setTimeout(() => {
+            let elsItems = document.querySelectorAll('.el-menu-item');
+            let elActive = document.querySelector('.el-menu-item.is-active');
+            if (!elActive) return false;
+            if (themeConfig.value.isMenuBarColorHighlight) {
+                elsItems.forEach((el: any) => el.setAttribute('id', ``));
+                elActive.setAttribute('id', `add-is-active`);
+                setLocal('menuBarHighlightId', elActive.getAttribute('id'));
             } else {
-                if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
+                elActive.setAttribute('id', ``);
             }
-            const cssAttr =
-                attr === 'grayscale'
-                    ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})`
-                    : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
-            const appEle: any = document.querySelector('#app');
-            appEle.setAttribute('style', `filter: ${cssAttr}`);
             setLocalThemeConfig();
-            setLocal('appFilterStyle', appEle.style.cssText);
-        };
-        // 5、布局切换
-        const onSetLayout = (layout: string) => {
-            setLocal('oldLayout', layout);
-            if (getThemeConfig.value.layout === layout) return false;
-            getThemeConfig.value.layout = layout;
-            getThemeConfig.value.isDrawer = false;
+        }, 0);
+    });
+};
+// 3、界面设置 --> 菜单水平折叠
+const onThemeConfigChange = () => {
+    onMenuBarHighlightChange();
+    setDispatchThemeConfig();
+};
+// 3、界面设置 --> 固定 Header
+const onIsFixedHeaderChange = () => {
+    themeConfig.value.isFixedHeaderChange = themeConfig.value.isFixedHeader ? false : true;
+    setLocalThemeConfig();
+};
+// 3、界面设置 --> 经典布局分割菜单
+const onClassicSplitMenuChange = () => {
+    themeConfig.value.isBreadcrumb = false;
+    setLocalThemeConfig();
+    mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
+};
+// 4、界面显示 --> 侧边栏 Logo
+const onIsShowLogoChange = () => {
+    themeConfig.value.isShowLogoChange = themeConfig.value.isShowLogo ? false : true;
+    setLocalThemeConfig();
+};
+// 4、界面显示 --> 面包屑 Breadcrumb
+const onIsBreadcrumbChange = () => {
+    if (themeConfig.value.layout === 'classic') {
+        themeConfig.value.isClassicSplitMenu = false;
+    }
+    setLocalThemeConfig();
+};
+// 4、界面显示 --> 开启 TagsView 拖拽
+const onSortableTagsViewChange = () => {
+    mittBus.emit('openOrCloseSortable');
+    setLocalThemeConfig();
+};
+// 4、界面显示 --> 灰色模式/色弱模式
+const onAddFilterChange = (attr: string) => {
+    if (attr === 'grayscale') {
+        if (themeConfig.value.isGrayscale) themeConfig.value.isInvert = false;
+    } else {
+        if (themeConfig.value.isInvert) themeConfig.value.isGrayscale = false;
+    }
+    const cssAttr =
+        attr === 'grayscale'
+            ? `grayscale(${themeConfig.value.isGrayscale ? 1 : 0})`
+            : `invert(${themeConfig.value.isInvert ? '80%' : '0%'})`;
+    const appEle: any = document.querySelector('#app');
+    appEle.setAttribute('style', `filter: ${cssAttr}`);
+    setLocalThemeConfig();
+    setLocal('appFilterStyle', appEle.style.cssText);
+};
+// 5、布局切换
+const onSetLayout = (layout: string) => {
+    setLocal('oldLayout', layout);
+    if (themeConfig.value.layout === layout) return false;
+    themeConfig.value.layout = layout;
+    themeConfig.value.isDrawer = false;
+    initSetLayoutChange();
+    onMenuBarHighlightChange();
+};
+// 设置布局切换，重置主题样式
+const initSetLayoutChange = () => {
+    if (themeConfig.value.layout === 'classic') {
+        themeConfig.value.isShowLogo = true;
+        themeConfig.value.isBreadcrumb = true;
+        themeConfig.value.isCollapse = false;
+        themeConfig.value.isClassicSplitMenu = false;
+        themeConfig.value.menuBar = '#FFFFFF';
+        themeConfig.value.menuBarColor = '#606266';
+        themeConfig.value.topBar = '#ffffff';
+        themeConfig.value.topBarColor = '#606266';
+        initLayoutChangeFun();
+    } else if (themeConfig.value.layout === 'transverse') {
+        themeConfig.value.isShowLogo = true;
+        themeConfig.value.isBreadcrumb = false;
+        themeConfig.value.isCollapse = false;
+        themeConfig.value.isTagsview = false;
+        themeConfig.value.isClassicSplitMenu = false;
+        themeConfig.value.menuBarColor = '#FFFFFF';
+        themeConfig.value.topBar = '#545c64';
+        themeConfig.value.topBarColor = '#FFFFFF';
+        initLayoutChangeFun();
+    } else if (themeConfig.value.layout === 'columns') {
+        themeConfig.value.isShowLogo = true;
+        themeConfig.value.isBreadcrumb = true;
+        themeConfig.value.isCollapse = false;
+        themeConfig.value.isTagsview = true;
+        themeConfig.value.isClassicSplitMenu = false;
+        themeConfig.value.menuBar = '#FFFFFF';
+        themeConfig.value.menuBarColor = '#606266';
+        themeConfig.value.topBar = '#ffffff';
+        themeConfig.value.topBarColor = '#606266';
+        initLayoutChangeFun();
+    } else {
+        themeConfig.value.isShowLogo = false;
+        themeConfig.value.isBreadcrumb = true;
+        themeConfig.value.isCollapse = false;
+        themeConfig.value.isTagsview = true;
+        themeConfig.value.isClassicSplitMenu = false;
+        themeConfig.value.menuBar = '#545c64';
+        themeConfig.value.menuBarColor = '#eaeaea';
+        themeConfig.value.topBar = '#FFFFFF';
+        themeConfig.value.topBarColor = '#606266';
+        initLayoutChangeFun();
+    }
+};
+// 设置布局切换函数
+const initLayoutChangeFun = () => {
+    onBgColorPickerChange('menuBar');
+    onBgColorPickerChange('menuBarColor');
+    onBgColorPickerChange('topBar');
+    onBgColorPickerChange('topBarColor');
+};
+// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
+const onDrawerClose = () => {
+    themeConfig.value.isFixedHeaderChange = false;
+    themeConfig.value.isShowLogoChange = false;
+    themeConfig.value.isDrawer = false;
+    setLocalThemeConfig();
+};
+// 布局配置弹窗打开
+const openDrawer = () => {
+    themeConfig.value.isDrawer = true;
+    nextTick(() => {
+        // 初始化复制功能，防止点击两次才可以复制
+        onCopyConfigClick(copyConfigBtnRef.value.$el);
+    });
+};
+// 触发 store 布局配置更新
+const setDispatchThemeConfig = () => {
+    setLocalThemeConfig();
+    setLocalThemeConfigStyle();
+};
+// 存储布局配置
+const setLocalThemeConfig = () => {
+    removeLocal('themeConfig');
+    setLocal('themeConfig', themeConfig.value);
+};
+// 存储布局配置全局主题样式（html根标签）
+const setLocalThemeConfigStyle = () => {
+    setLocal('themeConfigStyle', document.documentElement.style.cssText);
+};
+// 一键复制配置
+const onCopyConfigClick = (target: any) => {
+    let copyThemeConfig = getLocal('themeConfig');
+    copyThemeConfig.isDrawer = false;
+    const clipboard = new ClipboardJS(target, {
+        text: () => JSON.stringify(copyThemeConfig),
+    });
+    clipboard.on('success', () => {
+        themeConfig.value.isDrawer = false;
+        ElMessage.success('复制成功');
+        clipboard.destroy();
+    });
+    clipboard.on('error', () => {
+        ElMessage.error('复制失败');
+        clipboard.destroy();
+    });
+};
+onMounted(() => {
+    nextTick(() => {
+        // 监听菜单点击，菜单字体背景高亮
+        mittBus.on('onMenuClick', () => {
+            onMenuBarHighlightChange();
+        });
+        // 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
+        mittBus.on('layoutMobileResize', (res: any) => {
+            themeConfig.value.layout = res.layout;
+            themeConfig.value.isDrawer = false;
             initSetLayoutChange();
             onMenuBarHighlightChange();
-        };
-        // 设置布局切换，重置主题样式
-        const initSetLayoutChange = () => {
-            if (getThemeConfig.value.layout === 'classic') {
-                getThemeConfig.value.isShowLogo = true;
-                getThemeConfig.value.isBreadcrumb = true;
-                getThemeConfig.value.isCollapse = false;
-                getThemeConfig.value.isClassicSplitMenu = false;
-                getThemeConfig.value.menuBar = '#FFFFFF';
-                getThemeConfig.value.menuBarColor = '#606266';
-                getThemeConfig.value.topBar = '#ffffff';
-                getThemeConfig.value.topBarColor = '#606266';
-                initLayoutChangeFun();
-            } else if (getThemeConfig.value.layout === 'transverse') {
-                getThemeConfig.value.isShowLogo = true;
-                getThemeConfig.value.isBreadcrumb = false;
-                getThemeConfig.value.isCollapse = false;
-                getThemeConfig.value.isTagsview = false;
-                getThemeConfig.value.isClassicSplitMenu = false;
-                getThemeConfig.value.menuBarColor = '#FFFFFF';
-                getThemeConfig.value.topBar = '#545c64';
-                getThemeConfig.value.topBarColor = '#FFFFFF';
-                initLayoutChangeFun();
-            } else if (getThemeConfig.value.layout === 'columns') {
-                getThemeConfig.value.isShowLogo = true;
-                getThemeConfig.value.isBreadcrumb = true;
-                getThemeConfig.value.isCollapse = false;
-                getThemeConfig.value.isTagsview = true;
-                getThemeConfig.value.isClassicSplitMenu = false;
-                getThemeConfig.value.menuBar = '#FFFFFF';
-                getThemeConfig.value.menuBarColor = '#606266';
-                getThemeConfig.value.topBar = '#ffffff';
-                getThemeConfig.value.topBarColor = '#606266';
-                initLayoutChangeFun();
-            } else {
-                getThemeConfig.value.isShowLogo = false;
-                getThemeConfig.value.isBreadcrumb = true;
-                getThemeConfig.value.isCollapse = false;
-                getThemeConfig.value.isTagsview = true;
-                getThemeConfig.value.isClassicSplitMenu = false;
-                getThemeConfig.value.menuBar = '#545c64';
-                getThemeConfig.value.menuBarColor = '#eaeaea';
-                getThemeConfig.value.topBar = '#FFFFFF';
-                getThemeConfig.value.topBarColor = '#606266';
-                initLayoutChangeFun();
-            }
-        };
-        // 设置布局切换函数
-        const initLayoutChangeFun = () => {
-            onBgColorPickerChange('menuBar');
-            onBgColorPickerChange('menuBarColor');
-            onBgColorPickerChange('topBar');
-            onBgColorPickerChange('topBarColor');
-        };
-        // 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
-        const onDrawerClose = () => {
-            getThemeConfig.value.isFixedHeaderChange = false;
-            getThemeConfig.value.isShowLogoChange = false;
-            getThemeConfig.value.isDrawer = false;
-            setLocalThemeConfig();
-        };
-        // 布局配置弹窗打开
-        const openDrawer = () => {
-            getThemeConfig.value.isDrawer = true;
-            nextTick(() => {
-                // 初始化复制功能，防止点击两次才可以复制
-                onCopyConfigClick(copyConfigBtnRef.value.$el);
-            });
-        };
-        // 触发 store 布局配置更新
-        const setDispatchThemeConfig = () => {
-            setLocalThemeConfig();
-            setLocalThemeConfigStyle();
-        };
-        // 存储布局配置
-        const setLocalThemeConfig = () => {
-            removeLocal('themeConfig');
-            setLocal('themeConfig', getThemeConfig.value);
-        };
-        // 存储布局配置全局主题样式（html根标签）
-        const setLocalThemeConfigStyle = () => {
-            setLocal('themeConfigStyle', document.documentElement.style.cssText);
-        };
-        // 一键复制配置
-        const onCopyConfigClick = (target: any) => {
-            let copyThemeConfig = getLocal('themeConfig');
-            copyThemeConfig.isDrawer = false;
-            const clipboard = new ClipboardJS(target, {
-                text: () => JSON.stringify(copyThemeConfig),
-            });
-            clipboard.on('success', () => {
-                getThemeConfig.value.isDrawer = false;
-                ElMessage.success('复制成功');
-                clipboard.destroy();
-            });
-            clipboard.on('error', () => {
-                ElMessage.error('复制失败');
-                clipboard.destroy();
-            });
-        };
-        onMounted(() => {
-            nextTick(() => {
-                // 监听菜单点击，菜单字体背景高亮
-                proxy.mittBus.on('onMenuClick', () => {
-                    onMenuBarHighlightChange();
-                });
-                // 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
-                proxy.mittBus.on('layoutMobileResize', (res: any) => {
-                    getThemeConfig.value.layout = res.layout;
-                    getThemeConfig.value.isDrawer = false;
-                    initSetLayoutChange();
-                    onMenuBarHighlightChange();
-                    getThemeConfig.value.isCollapse = false;
-                });
-                window.addEventListener('load', () => {
-                    // 刷新页面时，设置了值，直接取缓存中的值进行初始化
-                    setTimeout(() => {
-                        // 顶栏背景渐变
-                        if (getLocal('navbarsBgStyle') && getThemeConfig.value.isTopBarColorGradual) {
-                            const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
-                            breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
-                        }
-                        // 菜单背景渐变
-                        if (getLocal('asideBgStyle') && getThemeConfig.value.isMenuBarColorGradual) {
-                            const asideEl: any = document.querySelector('.layout-container .el-aside');
-                            asideEl.style.cssText = getLocal('asideBgStyle');
-                        }
-                        // 分栏菜单背景渐变
-                        if (getLocal('columnsBgStyle') && getThemeConfig.value.isColumnsMenuBarColorGradual) {
-                            const asideEl: any = document.querySelector('.layout-container .layout-columns-aside');
-                            asideEl.style.cssText = getLocal('columnsBgStyle');
-                        }
-                        // 菜单字体背景高亮
-                        if (getLocal('menuBarHighlightId') && getThemeConfig.value.isMenuBarColorHighlight) {
-                            let els = document.querySelector('.el-menu-item.is-active');
-                            if (!els) return false;
-                            els.setAttribute('id', getLocal('menuBarHighlightId'));
-                        }
-                        // 灰色模式/色弱模式
-                        if (getLocal('appFilterStyle')) {
-                            const appEl: any = document.querySelector('#app');
-                            appEl.style.cssText = getLocal('appFilterStyle');
-                        }
-                        // // 语言国际化
-                        // if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
-                    }, 1100);
-                });
-            });
+            themeConfig.value.isCollapse = false;
         });
-        onUnmounted(() => {
-            // 取消监听菜单点击，菜单字体背景高亮
-            proxy.mittBus.off('onMenuClick');
-            proxy.mittBus.off('layoutMobileResize');
+        window.addEventListener('load', () => {
+            // 刷新页面时，设置了值，直接取缓存中的值进行初始化
+            setTimeout(() => {
+                // 顶栏背景渐变
+                if (getLocal('navbarsBgStyle') && themeConfig.value.isTopBarColorGradual) {
+                    const breadcrumbIndexEl: any = document.querySelector('.layout-navbars-breadcrumb-index');
+                    breadcrumbIndexEl.style.cssText = getLocal('navbarsBgStyle');
+                }
+                // 菜单背景渐变
+                if (getLocal('asideBgStyle') && themeConfig.value.isMenuBarColorGradual) {
+                    const asideEl: any = document.querySelector('.layout-container .el-aside');
+                    asideEl.style.cssText = getLocal('asideBgStyle');
+                }
+                // 分栏菜单背景渐变
+                if (getLocal('columnsBgStyle') && themeConfig.value.isColumnsMenuBarColorGradual) {
+                    const asideEl: any = document.querySelector('.layout-container .layout-columns-aside');
+                    asideEl.style.cssText = getLocal('columnsBgStyle');
+                }
+                // 菜单字体背景高亮
+                if (getLocal('menuBarHighlightId') && themeConfig.value.isMenuBarColorHighlight) {
+                    let els = document.querySelector('.el-menu-item.is-active');
+                    if (!els) return false;
+                    els.setAttribute('id', getLocal('menuBarHighlightId'));
+                }
+                // 灰色模式/色弱模式
+                if (getLocal('appFilterStyle')) {
+                    const appEl: any = document.querySelector('#app');
+                    appEl.style.cssText = getLocal('appFilterStyle');
+                }
+                // // 语言国际化
+                // if (getLocal('themeConfig')) proxy.$i18n.locale = getLocal('themeConfig').globalI18n;
+            }, 1100);
         });
-        return {
-            openDrawer,
-            onColorPickerChange,
-            onBgColorPickerChange,
-            onTopBarGradualChange,
-            onMenuBarGradualChange,
-            onColumnsMenuBarGradualChange,
-            onMenuBarHighlightChange,
-            onThemeConfigChange,
-            onIsFixedHeaderChange,
-            onIsShowLogoChange,
-            getThemeConfig,
-            onDrawerClose,
-            onAddFilterChange,
-            onSetLayout,
-            setLocalThemeConfig,
-            onClassicSplitMenuChange,
-            onIsBreadcrumbChange,
-            onSortableTagsViewChange,
-            copyConfigBtnRef,
-            onCopyConfigClick,
-        };
-    },
+    });
 });
+onUnmounted(() => {
+    // 取消监听菜单点击，菜单字体背景高亮
+    mittBus.off('onMenuClick');
+    mittBus.off('layoutMobileResize');
+});
+
+defineExpose({openDrawer})
 </script>
 
 <style scoped lang="scss">
 .layout-breadcrumb-seting-bar {
     height: calc(100vh - 50px);
     padding: 0 15px;
+
     ::v-deep(.el-scrollbar__view) {
         overflow-x: hidden !important;
     }
+
     .layout-breadcrumb-seting-bar-flex {
         display: flex;
         align-items: center;
+
         &-label {
             flex: 1;
             color: #666666;
         }
     }
+
     .layout-drawer-content-flex {
         overflow: hidden;
         display: flex;
         flex-wrap: wrap;
         align-content: flex-start;
         margin: 0 -5px;
+
         .layout-drawer-content-item {
             width: 50%;
             height: 70px;
@@ -781,31 +737,39 @@ export default defineComponent({
             border: 1px solid transparent;
             position: relative;
             padding: 5px;
+
             .el-container {
                 height: 100%;
+
                 .el-aside-dark {
                     background-color: #b3c0d1;
                 }
+
                 .el-aside {
                     background-color: #d3dce6;
                 }
+
                 .el-header {
                     background-color: #b3c0d1;
                 }
+
                 .el-main {
                     background-color: #e9eef3;
                 }
             }
+
             .el-circular {
                 border-radius: 2px;
                 overflow: hidden;
                 border: 1px solid transparent;
                 transition: all 0.3s ease-in-out;
             }
+
             .drawer-layout-active {
                 border: 1px solid;
                 border-color: var(--color-primary);
             }
+
             .layout-tips-warp,
             .layout-tips-warp-active {
                 transition: all 0.3s ease-in-out;
@@ -817,6 +781,7 @@ export default defineComponent({
                 border-color: var(--color-primary-light-4);
                 border-radius: 100%;
                 padding: 4px;
+
                 .layout-tips-box {
                     transition: inherit;
                     width: 30px;
@@ -825,6 +790,7 @@ export default defineComponent({
                     border: 1px solid;
                     border-color: var(--color-primary-light-4);
                     border-radius: 100%;
+
                     .layout-tips-txt {
                         transition: inherit;
                         position: relative;
@@ -844,30 +810,37 @@ export default defineComponent({
                     }
                 }
             }
+
             .layout-tips-warp-active {
                 border: 1px solid;
                 border-color: var(--color-primary);
+
                 .layout-tips-box {
                     border: 1px solid;
                     border-color: var(--color-primary);
+
                     .layout-tips-txt {
                         color: var(--color-primary) !important;
                         background-color: #e9eef3 !important;
                     }
                 }
             }
+
             &:hover {
                 .el-circular {
                     transition: all 0.3s ease-in-out;
                     border: 1px solid;
                     border-color: var(--color-primary);
                 }
+
                 .layout-tips-warp {
                     transition: all 0.3s ease-in-out;
                     border-color: var(--color-primary);
+
                     .layout-tips-box {
                         transition: inherit;
                         border-color: var(--color-primary);
+
                         .layout-tips-txt {
                             transition: inherit;
                             color: var(--color-primary) !important;
@@ -878,12 +851,15 @@ export default defineComponent({
             }
         }
     }
+
     .copy-config {
         margin: 10px 0;
+
         .copy-config-btn {
             width: 100%;
             margin-top: 15px;
         }
+
         .copy-config-last-btn {
             margin: 10px 0 0;
         }
diff --git a/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue b/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue
index 5c89dcc8..973fc9c5 100644
--- a/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue
+++ b/mayfly_go_web/src/views/layout/navBars/breadcrumb/user.vue
@@ -8,44 +8,39 @@
             </div>
             <template #dropdown>
                 <el-dropdown-menu>
-                    <el-dropdown-item command="" :disabled="disabledSize === ''">默认</el-dropdown-item>
-                    <el-dropdown-item command="large" :disabled="disabledSize === 'large'">大型</el-dropdown-item>
-                    <el-dropdown-item command="small" :disabled="disabledSize === 'small'">小型</el-dropdown-item>
+                    <el-dropdown-item command="" :disabled="state.disabledSize === ''">默认</el-dropdown-item>
+                    <el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
+                    <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
-        <!-- <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
+        <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
             <el-icon title="菜单搜索">
                 <search />
             </el-icon>
-        </div> -->
+        </div>
         <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
             <el-icon title="布局设置">
                 <setting />
             </el-icon>
         </div>
         <div class="layout-navbars-breadcrumb-user-icon">
-            <el-popover
-                placement="bottom"
-                trigger="click"
-                :visible="isShowUserNewsPopover"
-                :width="300"
-                popper-class="el-popover-pupop-user-news"
-            >
+            <el-popover placement="bottom" trigger="click" :visible="state.isShowUserNewsPopover" :width="300"
+                popper-class="el-popover-pupop-user-news">
                 <template #reference>
-                    <el-badge :is-dot="false" @click="isShowUserNewsPopover = !isShowUserNewsPopover">
+                    <el-badge :is-dot="false" @click="state.isShowUserNewsPopover = !state.isShowUserNewsPopover">
                         <el-icon title="消息">
                             <bell />
                         </el-icon>
                     </el-badge>
                 </template>
                 <transition name="el-zoom-in-top">
-                    <UserNews v-show="isShowUserNewsPopover" />
+                    <UserNews v-show="state.isShowUserNewsPopover" />
                 </transition>
             </el-popover>
         </div>
         <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
-            <el-icon v-if="!isScreenfull" title="关全屏">
+            <el-icon v-if="!state.isScreenfull" title="关全屏">
                 <full-screen />
             </el-icon>
             <el-icon v-else title="开全屏">
@@ -54,8 +49,8 @@
         </div>
         <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
             <span class="layout-navbars-breadcrumb-user-link" style="cursor: pointer">
-                <img :src="getUserInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
-                {{ getUserInfos.name || getUserInfos.username }}
+                <img :src="userInfo.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+                {{ userInfo.name || userInfo.username }}
                 <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <template #dropdown>
@@ -70,147 +65,131 @@
     </div>
 </template>
 
-<script lang="ts">
-import { ref, getCurrentInstance, computed, reactive, toRefs, onMounted } from 'vue';
+<script setup lang="ts" name="layoutBreadcrumbUser">
+import { ref, computed, reactive, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import screenfull from 'screenfull';
 import { resetRoute } from '@/router/index.ts';
-import { useStore } from '@/store/index.ts';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '@/store/userInfo';
+import { useThemeConfig } from '@/store/themeConfig';
 import { clearSession, setLocal, getLocal, removeLocal } from '@/common/utils/storage.ts';
 import UserNews from '@/views/layout/navBars/breadcrumb/userNews.vue';
-import Search from '@/views/layout/navBars/breadcrumb/search.vue';
-export default {
-    name: 'layoutBreadcrumbUser',
-    components: { UserNews, SearchMenu: Search },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const router = useRouter();
-        const store = useStore();
-        const searchRef = ref();
-        const state = reactive({
-            isScreenfull: false,
-            isShowUserNewsPopover: false,
-            disabledI18n: 'zh-cn',
-            disabledSize: '',
-        });
-        // 获取用户信息 vuex
-        const getUserInfos = computed(() => {
-            return store.state.userInfos.userInfos;
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 设置分割样式
-        const layoutUserFlexNum = computed(() => {
-            let { layout, isClassicSplitMenu } = getThemeConfig.value;
-            let num = '';
-            if (layout === 'defaults' || (layout === 'classic' && !isClassicSplitMenu) || layout === 'columns') num = '1';
-            else num = '';
-            return num;
-        });
-        // 全屏点击时
-        const onScreenfullClick = () => {
-            if (!screenfull.isEnabled) {
-                ElMessage.warning('暂不不支持全屏');
-                return false;
-            }
-            screenfull.toggle();
-            state.isScreenfull = !state.isScreenfull;
-        };
-        // 布局配置 icon 点击时
-        const onLayoutSetingClick = () => {
-            proxy.mittBus.emit('openSetingsDrawer');
-        };
-        // 下拉菜单点击时
-        const onHandleCommandClick = (path: string) => {
-            if (path === 'logOut') {
-                ElMessageBox({
-                    closeOnClickModal: false,
-                    closeOnPressEscape: false,
-                    title: '提示',
-                    message: '此操作将退出登录, 是否继续?',
-                    showCancelButton: true,
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
-                    beforeClose: (action, instance, done) => {
-                        if (action === 'confirm') {
-                            instance.confirmButtonLoading = true;
-                            instance.confirmButtonText = '退出中';
-                            setTimeout(() => {
-                                done();
-                                setTimeout(() => {
-                                    instance.confirmButtonLoading = false;
-                                }, 300);
-                            }, 700);
-                        } else {
-                            done();
-                        }
-                    },
-                })
-                    .then(() => {
-                        clearSession(); // 清除缓存/token等
-                        resetRoute(); // 删除/重置路由
-                        router.push('/login');
-                        setTimeout(() => {
-                            ElMessage.success('安全退出成功！');
-                        }, 300);
-                    })
-                    .catch(() => {});
-            } else {
-                router.push(path);
-            }
-        };
-        // 菜单搜索点击
-        const onSearchClick = () => {
-            searchRef.value.openSearch();
-        };
-        // 组件大小改变
-        const onComponentSizeChange = (size: string) => {
-            removeLocal('themeConfig');
-            getThemeConfig.value.globalComponentSize = size;
-            setLocal('themeConfig', getThemeConfig.value);
-            // proxy.$ELEMENT.size = size;
-            initComponentSize();
-            window.location.reload();
-        };
-        // 初始化全局组件大小
-        const initComponentSize = () => {
-            switch (getLocal('themeConfig').globalComponentSize) {
-                case '':
-                    state.disabledSize = '';
-                    break;
-                case 'default':
-                    state.disabledSize = 'default';
-                    break;
-                case 'small':
-                    state.disabledSize = 'small';
-                    break;
-                case 'large':
-                    state.disabledSize = 'large';
-                    break;
-            }
-        };
-        // 页面加载时
-        onMounted(() => {
-            if (getLocal('themeConfig')) {
-                initComponentSize();
-            }
-        });
-        return {
-            getUserInfos,
-            onLayoutSetingClick,
-            onHandleCommandClick,
-            onScreenfullClick,
-            onSearchClick,
-            onComponentSizeChange,
-            searchRef,
-            layoutUserFlexNum,
-            ...toRefs(state),
-        };
-    },
+import SearchMenu from '@/views/layout/navBars/breadcrumb/search.vue';
+import mittBus from '@/common/utils/mitt';
+
+const router = useRouter();
+const searchRef = ref();
+const state = reactive({
+    isScreenfull: false,
+    isShowUserNewsPopover: false,
+    disabledI18n: 'zh-cn',
+    disabledSize: '',
+});
+const { userInfo } = storeToRefs(useUserInfo());
+const { themeConfig } = storeToRefs(useThemeConfig());
+
+// 设置分割样式
+const layoutUserFlexNum = computed(() => {
+    let { layout, isClassicSplitMenu } = themeConfig.value;
+    let num = '';
+    if (layout === 'defaults' || (layout === 'classic' && !isClassicSplitMenu) || layout === 'columns') num = '1';
+    else num = '';
+    return num;
+});
+// 全屏点击时
+const onScreenfullClick = () => {
+    if (!screenfull.isEnabled) {
+        ElMessage.warning('暂不不支持全屏');
+        return false;
+    }
+    screenfull.toggle();
+    state.isScreenfull = !state.isScreenfull;
 };
+// 布局配置 icon 点击时
+const onLayoutSetingClick = () => {
+    mittBus.emit('openSetingsDrawer');
+};
+// 下拉菜单点击时
+const onHandleCommandClick = (path: string) => {
+    if (path === 'logOut') {
+        ElMessageBox({
+            closeOnClickModal: false,
+            closeOnPressEscape: false,
+            title: '提示',
+            message: '此操作将退出登录, 是否继续?',
+            showCancelButton: true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            beforeClose: (action, instance, done) => {
+                if (action === 'confirm') {
+                    instance.confirmButtonLoading = true;
+                    instance.confirmButtonText = '退出中';
+                    setTimeout(() => {
+                        done();
+                        setTimeout(() => {
+                            instance.confirmButtonLoading = false;
+                        }, 300);
+                    }, 700);
+                } else {
+                    done();
+                }
+            },
+        })
+            .then(() => {
+                clearSession(); // 清除缓存/token等
+                resetRoute(); // 删除/重置路由
+                router.push('/login');
+                setTimeout(() => {
+                    ElMessage.success('安全退出成功！');
+                }, 300);
+            })
+            .catch(() => { });
+    } else {
+        router.push(path);
+    }
+};
+
+// // 菜单搜索点击
+const onSearchClick = () => {
+    searchRef.value.openSearch();
+};
+
+// 组件大小改变
+const onComponentSizeChange = (size: string) => {
+    removeLocal('themeConfig');
+    themeConfig.value.globalComponentSize = size;
+    setLocal('themeConfig', themeConfig.value);
+    // proxy.$ELEMENT.size = size;
+    initComponentSize();
+    window.location.reload();
+};
+
+// 初始化全局组件大小
+const initComponentSize = () => {
+    switch (getLocal('themeConfig').globalComponentSize) {
+        case '':
+            state.disabledSize = '';
+            break;
+        case 'default':
+            state.disabledSize = 'default';
+            break;
+        case 'small':
+            state.disabledSize = 'small';
+            break;
+        case 'large':
+            state.disabledSize = 'large';
+            break;
+    }
+};
+
+// 页面加载时
+onMounted(() => {
+    if (getLocal('themeConfig')) {
+        initComponentSize();
+    }
+});
 </script>
 
 <style scoped lang="scss">
@@ -218,17 +197,20 @@ export default {
     display: flex;
     align-items: center;
     justify-content: flex-end;
+
     &-link {
         height: 100%;
         display: flex;
         align-items: center;
         white-space: nowrap;
+
         &-photo {
             width: 25px;
             height: 25px;
             border-radius: 100%;
         }
     }
+
     &-icon {
         padding: 0 10px;
         cursor: pointer;
@@ -237,25 +219,29 @@ export default {
         line-height: 50px;
         display: flex;
         align-items: center;
+
         &:hover {
             background: rgba(0, 0, 0, 0.04);
+
             i {
                 display: inline-block;
                 animation: logoAnimation 0.3s ease-in-out;
             }
         }
     }
+
     ::v-deep(.el-dropdown) {
         color: var(--bg-topBarColor);
     }
+
     ::v-deep(.el-badge) {
         height: 40px;
         line-height: 40px;
         display: flex;
         align-items: center;
     }
+
     ::v-deep(.el-badge__content.is-fixed) {
         top: 12px;
     }
-}
-</style>
+}</style>
diff --git a/mayfly_go_web/src/views/layout/navBars/index.vue b/mayfly_go_web/src/views/layout/navBars/index.vue
index ba431741..84f91288 100644
--- a/mayfly_go_web/src/views/layout/navBars/index.vue
+++ b/mayfly_go_web/src/views/layout/navBars/index.vue
@@ -7,17 +7,16 @@
 
 <script lang="ts">
 import { computed } from 'vue';
-import { useStore } from '@/store/index.ts';
+import { useThemeConfig } from '@/store/themeConfig';
 import BreadcrumbIndex from '@/views/layout/navBars/breadcrumb/index.vue';
 import TagsView from '@/views/layout/navBars/tagsView/tagsView.vue';
 export default {
     name: 'layoutNavBars',
     components: { BreadcrumbIndex, TagsView },
     setup() {
-        const store = useStore();
         // 是否显示 tagsView
         const setShowTagsView = computed(() => {
-            let { layout, isTagsview } = store.state.themeConfig.themeConfig;
+            let { layout, isTagsview } = useThemeConfig().themeConfig;
             return layout !== 'classic' && isTagsview;
         });
         return {
diff --git a/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue b/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue
index 8a7ac494..57a510c2 100644
--- a/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue
+++ b/mayfly_go_web/src/views/layout/navBars/tagsView/tagsView.vue
@@ -1,389 +1,385 @@
 <template>
-    <div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }">
+    <div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': themeConfig.layout === 'classic' }">
         <el-scrollbar ref="scrollbarRef" @wheel.prevent="onHandleScroll">
             <ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
-                <li
-                    v-for="(v, k) in tagsViewList"
-                    :key="k"
-                    class="layout-navbars-tagsview-ul-li"
-                    :data-name="v.name"
-                    :class="{ 'is-active': isActive(v) }"
-                    @contextmenu.prevent="onContextmenu(v, $event)"
-                    @click="onTagsClick(v, k)"
-                    :ref="
+                <li v-for="(v, k) in state.tagsViewList" :key="k" class="layout-navbars-tagsview-ul-li" :data-name="v.name"
+                    :class="{ 'is-active': isActive(v) }" @contextmenu.prevent="onContextmenu(v, $event)"
+                    @click="onTagsClick(v, k)" :ref="
                         (el) => {
                             if (el) tagsRefs[k] = el;
                         }
-                    "
-                >
-                    <i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14" v-if="isActive(v)"></i>
-                    <SvgIcon
-                        :name="v.meta.icon"
-                        class="layout-navbars-tagsview-ul-li-iconfont"
-                        v-if="!isActive(v) && getThemeConfig.isTagsviewIcon"
-                    />
+                    ">
+                    <i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont font14"
+                        v-if="isActive(v)"></i>
+                    <SvgIcon :name="v.meta.icon" class="layout-navbars-tagsview-ul-li-iconfont"
+                        v-if="!isActive(v) && themeConfig.isTagsviewIcon" />
                     <span>{{ v.meta.title }}</span>
                     <template v-if="isActive(v)">
-                        <SvgIcon
-                            name="RefreshRight"
-                            class="ml5 layout-navbars-tagsview-ul-li-refresh"
-                            @click.stop="refreshCurrentTagsView($route.fullPath)"
-                        />
-                        <SvgIcon
-                            name="Close"
-                            class="layout-navbars-tagsview-ul-li-icon layout-icon-active"
+                        <SvgIcon name="RefreshRight" class="font14 ml5 layout-navbars-tagsview-ul-li-refresh"
+                            @click.stop="refreshCurrentTagsView($route.fullPath)" />
+                        <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-active"
                             v-if="!v.meta.isAffix"
-                            @click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.path)"
-                        />
+                            @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
                     </template>
-                    <SvgIcon
-                        name="Close"
-                        class="layout-navbars-tagsview-ul-li-icon layout-icon-three"
+
+                    <SvgIcon name="Close" class="font14 layout-navbars-tagsview-ul-li-icon layout-icon-three"
                         v-if="!v.meta.isAffix"
-                        @click.stop="closeCurrentTagsView(getThemeConfig.isShareTagsView ? v.path : v.path)"
-                    />
+                        @click.stop="closeCurrentTagsView(themeConfig.isShareTagsView ? v.path : v.path)" />
                 </li>
             </ul>
         </el-scrollbar>
-        <Contextmenu :dropdown="dropdown" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
+        <Contextmenu :dropdown="state.dropdown" ref="contextmenuRef" @currentContextmenuClick="onCurrentContextmenuClick" />
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, getCurrentInstance, watch } from 'vue';
+<script lang="ts" setup name="layoutTagsView">
+import { reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, getCurrentInstance, watch } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import screenfull from 'screenfull';
-import { useStore } from '@/store/index.ts';
-import { setSession, getSession, removeSession } from '@/common/utils/storage.ts';
+import pinia from '@/store/index';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { getSession, setSession, removeSession } from '@/common/utils/storage.ts';
+import mittBus from '@/common/utils/mitt';
 import Sortable from 'sortablejs';
 import Contextmenu from '@/views/layout/navBars/tagsView/contextmenu.vue';
-export default {
-    name: 'layoutTagsView',
-    components: { Contextmenu },
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const tagsRefs = ref([]);
-        const scrollbarRef = ref();
-        const contextmenuRef = ref();
-        const tagsUlRef = ref();
-        const store = useStore();
-        const route = useRoute();
-        const router = useRouter();
-        const state: any = reactive({
-            routePath: route.fullPath,
-            dropdown: { x: '', y: '' },
-            tagsRefsIndex: 0,
-            tagsViewList: [],
-            sortable: '',
-        });
-        // 动态设置 tagsView 风格样式
-        const setTagsStyle = computed(() => {
-            return store.state.themeConfig.themeConfig.tagsStyle;
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
-        const addBrowserSetSession = (tagsViewList: Array<object>) => {
-            setSession('tagsViewList', tagsViewList);
-        };
-        // 获取 vuex 中的 tagsViewRoutes 列表
-        const getTagsViewRoutes = () => {
-            state.routePath = route.fullPath;
-            state.tagsViewList = [];
-            if (!store.state.themeConfig.themeConfig.isCacheTagsView) removeSession('tagsViewList');
-            initTagsView();
-        };
-        // vuex 中获取路由信息：如果是设置了固定的（isAffix），进行初始化显示
-        const initTagsView = () => {
-            if (getSession('tagsViewList') && store.state.themeConfig.themeConfig.isCacheTagsView) {
-                state.tagsViewList = getSession('tagsViewList');
-            } else {
-                // state.tagsViews.map((v: any) => {
-                // 	if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
-                // });
-                addTagsView(route.fullPath);
-            }
-            // 初始化当前元素(li)的下标
-            getTagsRefsIndex(route.fullPath);
-            // 添加初始化横向滚动条移动到对应位置
-            tagsViewmoveToCurrentTag();
-        };
 
-        // 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
-        // path为fullPath
-        const addTagsView = (path: string, to: any = null) => {
-            if (!to) {
-                to = route;
-            }
-            path = decodeURI(path);
-            for (let tv of state.tagsViewList) {
-                if (tv.fullPath === path) {
-                    return false;
-                }
-            }
-            state.tagsViewList.push({ ...to });
-            // addBrowserSetSession(state.tagsViewList);
-        };
+const { proxy } = getCurrentInstance() as any;
+const tagsRefs = ref([]) as any;
+const scrollbarRef = ref();
+const contextmenuRef = ref();
+const tagsUlRef = ref();
+const { themeConfig } = storeToRefs(useThemeConfig());
+const route = useRoute();
+const router = useRouter();
+const state: any = reactive({
+    routePath: route.fullPath,
+    dropdown: { x: '', y: '' },
+    tagsRefsIndex: 0,
+    tagsViewList: [],
+    sortable: '',
+});
+// 动态设置 tagsView 风格样式
+const setTagsStyle = computed(() => {
+    return themeConfig.value.tagsStyle;
+});
 
-        // 2、刷新当前 tagsView：
-        // path为fullPath
-        const refreshCurrentTagsView = (path: string) => {
-            proxy.mittBus.emit('onTagsViewRefreshRouterView', path);
-        };
-
-        // 3、关闭当前 tagsView：如果是设置了固定的（isAffix），不可以关闭
-        // path为fullPath
-        const closeCurrentTagsView = (path: string) => {
-            console.log(path)
-            state.tagsViewList.map((v: any, k: number, arr: any) => {
-                if (!v.meta.isAffix) {
-                    if (v.fullPath === path) {
-                        state.tagsViewList.splice(k, 1);
-                        setTimeout(() => {
-                            // 最后一个
-                            if (state.tagsViewList.length === k) router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
-                            // 否则，跳转到下一个
-                            else router.push({ path: arr[k].path, query: arr[k].query });
-                        }, 0);
-                    }
-                }
-            });
-            // addBrowserSetSession(state.tagsViewList);
-        };
-
-        // 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
-        const closeOtherTagsView = (path: string) => {
-            const oldTagViews = state.tagsViewList;
-            state.tagsViewList = [];
-            oldTagViews.map((v: any) => {
-                if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
-            });
-            addTagsView(path);
-        };
-
-        // 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
-        const closeAllTagsView = (path: string) => {
-            const oldTagViews = state.tagsViewList;
-            state.tagsViewList = [];
-            oldTagViews.map((v: any) => {
-                if (v.meta.isAffix && !v.meta.isHide) {
-                    state.tagsViewList.push({ ...v });
-                    if (state.tagsViewList.some((v: any) => v.path === path)) router.push({ path, query: route.query });
-                    else router.push({ path: v.path, query: route.query });
-                }
-            });
-            // addBrowserSetSession(state.tagsViewList);
-        };
-        // 6、开启当前页面全屏
-        const openCurrenFullscreen = (path: string) => {
-            const item = state.tagsViewList.find((v: any) => v.fullPath === path);
-            nextTick(() => {
-                router.push({ path, query: item.query });
-                const element = document.querySelector('.layout-main');
-                const screenfulls: any = screenfull;
-                screenfulls.request(element);
-            });
-        };
-        // 当前项右键菜单点击
-        const onCurrentContextmenuClick = (data: any) => {
-            // path为fullPath
-            let { id, path } = data;
-            let currentTag = state.tagsViewList.find((v: any) => v.fullPath === path);
-            switch (id) {
-                case 0:
-                    refreshCurrentTagsView(path);
-                    router.push({ path, query: currentTag.query });
-                    break;
-                case 1:
-                    closeCurrentTagsView(path);
-                    break;
-                case 2:
-                    router.push({ path, query: currentTag.query });
-                    closeOtherTagsView(path);
-                    break;
-                case 3:
-                    closeAllTagsView(path);
-                    break;
-                case 4:
-                    openCurrenFullscreen(path);
-                    break;
-            }
-        };
-        // 判断页面高亮
-        const isActive = (route: any) => {
-            return route.fullPath === state.routePath;
-        };
-        // 右键点击时：传 x,y 坐标值到子组件中（props）
-        const onContextmenu = (v: any, e: any) => {
-            const { clientX, clientY } = e;
-            state.dropdown.x = clientX;
-            state.dropdown.y = clientY;
-            contextmenuRef.value.openContextmenu(v);
-        };
-        // 当前的 tagsView 项点击时
-        const onTagsClick = (v: any, k: number) => {
-            state.routePath = decodeURI(v.fullPath);
-            state.tagsRefsIndex = k;
-            router.push(v);
-        };
-        // 更新滚动条显示
-        const updateScrollbar = () => {
-            proxy.$refs.scrollbarRef.update();
-        };
-        // 鼠标滚轮滚动
-        const onHandleScroll = (e: any) => {
-            proxy.$refs.scrollbarRef.$refs.wrapRef.scrollLeft += e.wheelDelta / 4;
-        };
-        // tagsView 横向滚动
-        const tagsViewmoveToCurrentTag = () => {
-            nextTick(() => {
-                if (tagsRefs.value.length <= 0) return false;
-                // 当前 li 元素
-                let liDom = tagsRefs.value[state.tagsRefsIndex];
-                // 当前 li 元素下标
-                let liIndex = state.tagsRefsIndex;
-                // 当前 ul 下 li 元素总长度
-                let liLength = tagsRefs.value.length;
-                // 最前 li
-                let liFirst: any = tagsRefs.value[0];
-                // 最后 li
-                let liLast: any = tagsRefs.value[tagsRefs.value.length - 1];
-                // 当前滚动条的值
-                let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrapRef;
-                // 当前滚动条滚动宽度
-                let scrollS = scrollRefs.scrollWidth;
-                // 当前滚动条偏移宽度
-                let offsetW = scrollRefs.offsetWidth;
-                // 当前滚动条偏移距离
-                let scrollL = scrollRefs.scrollLeft;
-                // 上一个 tags li dom
-                let liPrevTag: any = tagsRefs.value[state.tagsRefsIndex - 1];
-                // 下一个 tags li dom
-                let liNextTag: any = tagsRefs.value[state.tagsRefsIndex + 1];
-                // 上一个 tags li dom 的偏移距离
-                let beforePrevL: any = '';
-                // 下一个 tags li dom 的偏移距离
-                let afterNextL: any = '';
-                if (liDom === liFirst) {
-                    // 头部
-                    scrollRefs.scrollLeft = 0;
-                } else if (liDom === liLast) {
-                    // 尾部
-                    scrollRefs.scrollLeft = scrollS - offsetW;
-                } else {
-                    // 非头/尾部
-                    if (liIndex === 0) beforePrevL = liFirst.offsetLeft - 5;
-                    else beforePrevL = liPrevTag?.offsetLeft - 5;
-                    if (liIndex === liLength) afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
-                    else afterNextL = liNextTag.offsetLeft + liNextTag.offsetWidth + 5;
-                    if (afterNextL > scrollL + offsetW) {
-                        scrollRefs.scrollLeft = afterNextL - offsetW;
-                    } else if (beforePrevL < scrollL) {
-                        scrollRefs.scrollLeft = beforePrevL;
-                    }
-                }
-                // 更新滚动条，防止不出现
-                updateScrollbar();
-            });
-        };
-        // 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
-        const getTagsRefsIndex = (path: string) => {
-            if (state.tagsViewList.length > 0) {
-                state.tagsRefsIndex = state.tagsViewList.findIndex((item: any) => item.fullPath === path);
-            }
-        };
-        // 设置 tagsView 可以进行拖拽
-        const initSortable = () => {
-            const el: any = document.querySelector('.layout-navbars-tagsview-ul');
-            if (!el) return false;
-            if (!getThemeConfig.value.isSortableTagsView) state.sortable && state.sortable.destroy();
-            if (getThemeConfig.value.isSortableTagsView) {
-                state.sortable = Sortable.create(el, {
-                    animation: 300,
-                    dataIdAttr: 'data-name',
-                    onEnd: () => {
-                        const sortEndList: any = [];
-                        state.sortable.toArray().map((val: any) => {
-                            state.tagsViewList.map((v: any) => {
-                                if (v.name === val) sortEndList.push({ ...v });
-                            });
-                        });
-                        // addBrowserSetSession(sortEndList);
-                    },
-                });
-            }
-        };
-        // 监听路由的变化，动态赋值给 tagsView
-        // watch(store.state, (val) => {
-        // 	if (val.tagsViews.tagsViews.length === state.tagsViewList.length) return false;
-        // 	getTagsViewRoutes();
-        // });
-        // 页面加载前
-        onBeforeMount(() => {
-            // 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
-            proxy.mittBus.on('onCurrentContextmenuClick', (data: object) => {
-                onCurrentContextmenuClick(data);
-            });
-            // 监听布局配置界面开启/关闭拖拽
-            proxy.mittBus.on('openOrCloseSortable', () => {
-                initSortable();
-            });
-        });
-        // 页面卸载时
-        onUnmounted(() => {
-            // 取消非本页面调用监听
-            proxy.mittBus.off('onCurrentContextmenuClick');
-            // 取消监听布局配置界面开启/关闭拖拽
-            proxy.mittBus.off('openOrCloseSortable');
-        });
-        // 页面更新时
-        onBeforeUpdate(() => {
-            tagsRefs.value = [];
-        });
-        // 页面加载时
-        onMounted(() => {
-            // 初始化 tagsViewRoutes 列表
-            getTagsViewRoutes();
-            initSortable();
-        });
-        // 路由更新时
-        onBeforeRouteUpdate((to) => {
-            state.routePath = decodeURI(to.fullPath);
-            addTagsView(to.fullPath, to);
-            getTagsRefsIndex(to.fullPath);
-            tagsViewmoveToCurrentTag();
-        });
-        return {
-            isActive,
-            onContextmenu,
-            getTagsViewRoutes,
-            onTagsClick,
-            tagsRefs,
-            contextmenuRef,
-            scrollbarRef,
-            tagsUlRef,
-            onHandleScroll,
-            getThemeConfig,
-            setTagsStyle,
-            refreshCurrentTagsView,
-            closeCurrentTagsView,
-            onCurrentContextmenuClick,
-            ...toRefs(state),
-        };
-    },
+// 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
+const addBrowserSetSession = (tagsViewList: Array<object>) => {
+    setSession('tagsViewList', tagsViewList);
 };
+
+// 获取 vuex 中的 tagsViewRoutes 列表
+const getTagsViewRoutes = () => {
+    state.routePath = route.fullPath;
+    state.tagsViewList = [];
+    if (!themeConfig.value.isCacheTagsView) removeSession('tagsViewList');
+    initTagsView();
+};
+// vuex 中获取路由信息：如果是设置了固定的（isAffix），进行初始化显示
+const initTagsView = () => {
+    if (getSession('tagsViewList') && themeConfig.value.isCacheTagsView) {
+        state.tagsViewList = getSession('tagsViewList');
+    } else {
+        state.tagsViews?.map((v: any) => {
+        	if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
+        });
+        addTagsView(route.fullPath);
+    }
+    // 初始化当前元素(li)的下标
+    getTagsRefsIndex(route.fullPath);
+    // 添加初始化横向滚动条移动到对应位置
+    tagsViewmoveToCurrentTag();
+};
+
+// 1、添加 tagsView：未设置隐藏（isHide）也添加到在 tagsView 中
+// path为fullPath
+const addTagsView = (path: string, to: any = null) => {
+    if (!to) {
+        to = route;
+    }
+    path = decodeURI(path);
+    for (let tv of state.tagsViewList) {
+        if (tv.fullPath === path) {
+            return false;
+        }
+    }
+
+    const tagView = { ...to }
+    // 防止Converting circular structure to JSON错误
+    tagView.matched = null;
+    tagView.redirectedFrom = null;
+    state.tagsViewList.push(tagView);
+    addBrowserSetSession(state.tagsViewList);
+};
+
+// 2、刷新当前 tagsView：
+// path为fullPath
+const refreshCurrentTagsView = (path: string) => {
+    mittBus.emit('onTagsViewRefreshRouterView', path);
+};
+
+// 3、关闭当前 tagsView：如果是设置了固定的（isAffix），不可以关闭
+// path为fullPath
+const closeCurrentTagsView = (path: string) => {
+    state.tagsViewList.map((v: any, k: number, arr: any) => {
+        if (!v.meta.isAffix) {
+            if (v.fullPath === path) {
+                state.tagsViewList.splice(k, 1);
+                setTimeout(() => {
+                    if (state.tagsViewList.length === k && themeConfig.value.isShareTagsView ? state.routePath === path : state.routeActive === path) {
+                        // 最后一个且高亮时
+                        if (arr[arr.length - 1].meta.isDynamic) {
+                            // 动态路由（xxx/:id/:name"）
+                            if (k !== arr.length) router.push({ name: arr[k].name, params: arr[k].params });
+                            else router.push({ name: arr[arr.length - 1].name, params: arr[arr.length - 1].params });
+                        } else {
+                            // 普通路由
+                            if (k !== arr.length) router.push({ path: arr[k].path, query: arr[k].query });
+                            else router.push({ path: arr[arr.length - 1].path, query: arr[arr.length - 1].query });
+                        }
+                    } else {
+                        // 非最后一个且高亮时，跳转到下一个
+                        if (state.tagsViewList.length !== k && themeConfig.value.isShareTagsView ? state.routePath === path : state.routeActive === path) {
+                            if (arr[k].meta.isDynamic) {
+                                // 动态路由（xxx/:id/:name"）
+                                router.push({ name: arr[k].name, params: arr[k].params });
+                            } else {
+                                // 普通路由
+                                router.push({ path: arr[k].path, query: arr[k].query });
+                            }
+                        }
+                    }
+                }, 0);
+            }
+        }
+    });
+    addBrowserSetSession(state.tagsViewList);
+};
+
+// 4、关闭其它 tagsView：如果是设置了固定的（isAffix），不进行关闭
+const closeOtherTagsView = (path: string) => {
+    const oldTagViews = state.tagsViewList;
+    state.tagsViewList = [];
+    oldTagViews.map((v: any) => {
+        if (v.meta.isAffix && !v.meta.isHide) state.tagsViewList.push({ ...v });
+    });
+    addTagsView(path);
+};
+
+// 5、关闭全部 tagsView：如果是设置了固定的（isAffix），不进行关闭
+const closeAllTagsView = (path: string) => {
+    const oldTagViews = state.tagsViewList;
+    state.tagsViewList = [];
+    oldTagViews.map((v: any) => {
+        if (v.meta.isAffix && !v.meta.isHide) {
+            state.tagsViewList.push({ ...v });
+            if (state.tagsViewList.some((v: any) => v.path === path)) router.push({ path, query: route.query });
+            else router.push({ path: v.path, query: route.query });
+        }
+    });
+    addBrowserSetSession(state.tagsViewList);
+};
+// 6、开启当前页面全屏
+const openCurrenFullscreen = (path: string) => {
+    const item = state.tagsViewList.find((v: any) => v.fullPath === path);
+    nextTick(() => {
+        router.push({ path, query: item.query });
+        const element = document.querySelector('.layout-main');
+        const screenfulls: any = screenfull;
+        screenfulls.request(element);
+    });
+};
+// 当前项右键菜单点击
+const onCurrentContextmenuClick = (data: any) => {
+    // path为fullPath
+    let { id, path } = data;
+    let currentTag = state.tagsViewList.find((v: any) => v.fullPath === path);
+    switch (id) {
+        case 0:
+            refreshCurrentTagsView(path);
+            router.push({ path, query: currentTag.query });
+            break;
+        case 1:
+            closeCurrentTagsView(path);
+            break;
+        case 2:
+            router.push({ path, query: currentTag.query });
+            closeOtherTagsView(path);
+            break;
+        case 3:
+            closeAllTagsView(path);
+            break;
+        case 4:
+            openCurrenFullscreen(path);
+            break;
+    }
+};
+// 判断页面高亮
+const isActive = (route: any) => {
+    return route.fullPath === state.routePath;
+};
+// 右键点击时：传 x,y 坐标值到子组件中（props）
+const onContextmenu = (v: any, e: any) => {
+    const { clientX, clientY } = e;
+    state.dropdown.x = clientX;
+    state.dropdown.y = clientY;
+    contextmenuRef.value.openContextmenu(v);
+};
+// 当前的 tagsView 项点击时
+const onTagsClick = (v: any, k: number) => {
+    state.routePath = decodeURI(v.fullPath);
+    state.tagsRefsIndex = k;
+    router.push(v);
+};
+// 更新滚动条显示
+const updateScrollbar = () => {
+    proxy.$refs.scrollbarRef.update();
+};
+// 鼠标滚轮滚动
+const onHandleScroll = (e: any) => {
+    proxy.$refs.scrollbarRef.$refs.wrapRef.scrollLeft += e.wheelDelta / 4;
+};
+// tagsView 横向滚动
+const tagsViewmoveToCurrentTag = () => {
+    nextTick(() => {
+        if (tagsRefs.value.length <= 0) return false;
+        // 当前 li 元素
+        let liDom = tagsRefs.value[state.tagsRefsIndex];
+        // 当前 li 元素下标
+        let liIndex = state.tagsRefsIndex;
+        // 当前 ul 下 li 元素总长度
+        let liLength = tagsRefs.value.length;
+        // 最前 li
+        let liFirst: any = tagsRefs.value[0];
+        // 最后 li
+        let liLast: any = tagsRefs.value[tagsRefs.value.length - 1];
+        // 当前滚动条的值
+        let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrapRef;
+        // 当前滚动条滚动宽度
+        let scrollS = scrollRefs.scrollWidth;
+        // 当前滚动条偏移宽度
+        let offsetW = scrollRefs.offsetWidth;
+        // 当前滚动条偏移距离
+        let scrollL = scrollRefs.scrollLeft;
+        // 上一个 tags li dom
+        let liPrevTag: any = tagsRefs.value[state.tagsRefsIndex - 1];
+        // 下一个 tags li dom
+        let liNextTag: any = tagsRefs.value[state.tagsRefsIndex + 1];
+        // 上一个 tags li dom 的偏移距离
+        let beforePrevL: any = '';
+        // 下一个 tags li dom 的偏移距离
+        let afterNextL: any = '';
+        if (liDom === liFirst) {
+            // 头部
+            scrollRefs.scrollLeft = 0;
+        } else if (liDom === liLast) {
+            // 尾部
+            scrollRefs.scrollLeft = scrollS - offsetW;
+        } else {
+            // 非头/尾部
+            if (liIndex === 0) beforePrevL = liFirst.offsetLeft - 5;
+            else beforePrevL = liPrevTag?.offsetLeft - 5;
+            if (liIndex === liLength) afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
+            else afterNextL = liNextTag.offsetLeft + liNextTag.offsetWidth + 5;
+            if (afterNextL > scrollL + offsetW) {
+                scrollRefs.scrollLeft = afterNextL - offsetW;
+            } else if (beforePrevL < scrollL) {
+                scrollRefs.scrollLeft = beforePrevL;
+            }
+        }
+        // 更新滚动条，防止不出现
+        updateScrollbar();
+    });
+};
+// 获取 tagsView 的下标：用于处理 tagsView 点击时的横向滚动
+const getTagsRefsIndex = (path: string) => {
+    if (state.tagsViewList.length > 0) {
+        state.tagsRefsIndex = state.tagsViewList.findIndex((item: any) => item.fullPath === path);
+    }
+};
+// 设置 tagsView 可以进行拖拽
+const initSortable = () => {
+    const el: any = document.querySelector('.layout-navbars-tagsview-ul');
+    if (!el) return false;
+    if (!themeConfig.value.isSortableTagsView) state.sortable && state.sortable.destroy();
+    if (themeConfig.value.isSortableTagsView) {
+        state.sortable = Sortable.create(el, {
+            animation: 300,
+            dataIdAttr: 'data-name',
+            onEnd: () => {
+                const sortEndList: any = [];
+                state.sortable.toArray().map((val: any) => {
+                    state.tagsViewList.map((v: any) => {
+                        if (v.name === val) sortEndList.push({ ...v });
+                    });
+                });
+                addBrowserSetSession(sortEndList);
+            },
+        });
+    }
+};
+
+// 监听路由的变化，动态赋值给 tagsView
+// watch(
+// 	pinia.state,
+// 	(val) => {
+// 		if (val.tagsViewRoutes.tagsViewRoutes.length === state.tagsViewRoutesList.length) return false;
+// 		getTagsViewRoutes();
+// 	},
+// 	{
+// 		deep: true,
+// 	}
+// );
+
+// 页面加载前
+onBeforeMount(() => {
+    // 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
+    mittBus.on('onCurrentContextmenuClick', (data: object) => {
+        onCurrentContextmenuClick(data);
+    });
+    // 监听布局配置界面开启/关闭拖拽
+    mittBus.on('openOrCloseSortable', () => {
+        initSortable();
+    });
+});
+// 页面卸载时
+onUnmounted(() => {
+    // 取消非本页面调用监听
+    mittBus.off('onCurrentContextmenuClick');
+    // 取消监听布局配置界面开启/关闭拖拽
+    mittBus.off('openOrCloseSortable');
+});
+// 页面更新时
+onBeforeUpdate(() => {
+    tagsRefs.value = [];
+});
+// 页面加载时
+onMounted(() => {
+    // 初始化 tagsViewRoutes 列表
+    getTagsViewRoutes();
+    initSortable();
+});
+// 路由更新时
+onBeforeRouteUpdate((to) => {
+    state.routePath = decodeURI(to.fullPath);
+    addTagsView(to.fullPath, to);
+    getTagsRefsIndex(to.fullPath);
+    tagsViewmoveToCurrentTag();
+});
 </script>
 
 <style scoped lang="scss">
 .layout-navbars-tagsview {
-    flex: 1;
-    background-color: #ffffff;
-    border-bottom: 1px solid #f1f2f3;
-    ::v-deep(.el-scrollbar__wrap) {
+    background-color: var(--el-color-white);
+    border-bottom: 1px solid var(--next-border-color-light);
+    position: relative;
+    z-index: 4;
+
+    :deep(.el-scrollbar__wrap) {
         overflow-x: auto !important;
     }
+
     &-ul {
         list-style: none;
         margin: 0;
@@ -391,16 +387,17 @@ export default {
         height: 34px;
         display: flex;
         align-items: center;
-        color: #606266;
+        color: var(--el-text-color-regular);
         font-size: 12px;
         white-space: nowrap;
         padding: 0 15px;
+
         &-li {
             height: 26px;
             line-height: 26px;
             display: flex;
             align-items: center;
-            border: 1px solid #e6e6e6;
+            border: 1px solid var(--el-border-color-lighter);
             padding: 0 15px;
             margin-right: 5px;
             border-radius: 2px;
@@ -408,16 +405,19 @@ export default {
             z-index: 0;
             cursor: pointer;
             justify-content: space-between;
+
             &:hover {
-                background-color: var(--color-primary-light-9);
-                color: var(--color-primary);
-                border-color: var(--color-primary-light-6);
+                background-color: var(--el-color-primary-light-9);
+                color: var(--el-color-primary);
+                border-color: var(--el-color-primary-light-5);
             }
+
             &-iconfont {
                 position: relative;
                 left: -5px;
                 font-size: 12px;
             }
+
             &-icon {
                 border-radius: 100%;
                 position: relative;
@@ -426,100 +426,101 @@ export default {
                 text-align: center;
                 line-height: 14px;
                 right: -5px;
+
                 &:hover {
-                    color: #fff;
-                    background-color: var(--color-primary-light-3);
+                    color: var(--el-color-white);
+                    background-color: var(--el-color-primary-light-3);
                 }
             }
+
             .layout-icon-active {
                 display: block;
             }
+
             .layout-icon-three {
                 display: none;
             }
         }
+
         .is-active {
-            color: #ffffff;
-            background: var(--color-primary);
-            border-color: var(--color-primary);
+            color: var(--el-color-white);
+            background: var(--el-color-primary);
+            border-color: var(--el-color-primary);
+            transition: border-color 3s ease;
         }
     }
+
     // 风格2
     .tags-style-two {
-        .layout-navbars-tagsview-ul-li {
-            height: 34px !important;
-            line-height: 34px !important;
-            border: none !important;
-            .layout-navbars-tagsview-ul-li-iconfont {
-                display: none;
-            }
-            .layout-icon-active {
-                display: none;
-            }
-            .layout-icon-three {
-                display: block;
-            }
-        }
-        .is-active {
-            background: none !important;
-            color: var(--color-primary) !important;
-            border-bottom: 2px solid !important;
-            border-color: var(--color-primary) !important;
-            border-radius: 0 !important;
-        }
-    }
-    // 风格3
-    .tags-style-three {
-        .layout-navbars-tagsview-ul-li {
-            height: 34px !important;
-            line-height: 34px !important;
-            border-right: 1px solid #f6f6f6 !important;
-            border-top: none !important;
-            border-bottom: none !important;
-            border-left: none !important;
-            border-radius: 0 !important;
-            margin-right: 0 !important;
-            &:first-of-type {
-                border-left: 1px solid #f6f6f6 !important;
-            }
-            .layout-icon-active {
-                display: none;
-            }
-            .layout-icon-three {
-                display: block;
-            }
-        }
-        .is-active {
-            background: white !important;
-            color: var(--color-primary) !important;
-            border-top: 1px solid !important;
-            border-top-color: var(--color-primary) !important;
-        }
-    }
-    // 风格4
-    .tags-style-four {
         .layout-navbars-tagsview-ul-li {
             margin-right: 0 !important;
             border: none !important;
             position: relative;
             border-radius: 3px !important;
+
             .layout-icon-active {
                 display: none;
             }
+
             .layout-icon-three {
                 display: block;
             }
+
             &:hover {
                 background: none !important;
             }
         }
+
         .is-active {
             background: none !important;
-            color: var(--color-primary) !important;
+            color: var(--el-color-primary) !important;
+        }
+    }
+
+    // 风格3
+    .tags-style-three {
+        align-items: flex-end;
+
+        .tgs-style-three-svg {
+            -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKC0wLjEzMzUwNiA1MC4xMTkyIDUwKSIgaWQ9InN2Z18xIiBkPSJtMTAwLjExOTE5LDEwMGMtNTUuMjI4LDAgLTEwMCwtNDQuNzcyIC0xMDAsLTEwMGwwLDEwMGwxMDAsMHoiIG9wYWNpdHk9InVuZGVmaW5lZCIgc3Ryb2tlPSJudWxsIiBmaWxsPSIjRjhFQUU3Ii8+CiAgPHBhdGggZD0ibS0wLjYzNzY2LDcuMzEyMjhjMC4xMTkxOSwwIDAuMjE3MzcsMC4wNTc5NiAwLjQ3Njc2LDAuMTE5MTljMC4yMzIsMC4wNTQ3NyAwLjI3MzI5LDAuMDM0OTEgMC4zNTc1NywwLjExOTE5YzAuMDg0MjgsMC4wODQyOCAwLjM1NzU3LDAgMC40NzY3NiwwbDAuMTE5MTksMGwwLjIzODM4LDAiIGlkPSJzdmdfMiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0ibTI4LjkyMTM0LDY5LjA1MjQ0YzAsMC4xMTkxOSAwLDAuMjM4MzggMCwwLjM1NzU3bDAsMC4xMTkxOWwwLDAuMTE5MTkiIGlkPSJzdmdfMyIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z180IiBoZWlnaHQ9IjAiIHdpZHRoPSIxLjMxMTA4IiB5PSI2LjgzNTUyIiB4PSItMC4wNDE3MSIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z181IiBoZWlnaHQ9IjEuNzg3ODQiIHdpZHRoPSIwLjExOTE5IiB5PSI2OC40NTY1IiB4PSIyOC45MjEzNCIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiAgPHJlY3QgaWQ9InN2Z182IiBoZWlnaHQ9IjQuODg2NzciIHdpZHRoPSIxOS4wNzAzMiIgeT0iNTEuMjkzMjEiIHg9IjM2LjY2ODY2IiBzdHJva2U9Im51bGwiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+'),
+                url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAiIGhlaWdodD0iNzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0ibm9uZSI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTg5Ljc2MjQgNy4zMzAxNCA1NS4xMjUyKSIgc3Ryb2tlPSJudWxsIiBpZD0ic3ZnXzEiIGZpbGw9IiNGOEVBRTciIGQ9Im02Mi41NzQ0OSwxMTcuNTIwODZjLTU1LjIyOCwwIC0xMDAsLTQ0Ljc3MiAtMTAwLC0xMDBsMCwxMDBsMTAwLDB6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPgogIDxwYXRoIGQ9Im0tMC42Mzc2Niw3LjMxMjI4YzAuMTE5MTksMCAwLjIxNzM3LDAuMDU3OTYgMC40NzY3NiwwLjExOTE5YzAuMjMyLDAuMDU0NzcgMC4yNzMyOSwwLjAzNDkxIDAuMzU3NTcsMC4xMTkxOWMwLjA4NDI4LDAuMDg0MjggMC4zNTc1NywwIDAuNDc2NzYsMGwwLjExOTE5LDBsMC4yMzgzOCwwIiBpZD0ic3ZnXzIiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Im0yOC45MjEzNCw2OS4wNTI0NGMwLDAuMTE5MTkgMCwwLjIzODM4IDAsMC4zNTc1N2wwLDAuMTE5MTlsMCwwLjExOTE5IiBpZD0ic3ZnXzMiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNCIgaGVpZ2h0PSIwIiB3aWR0aD0iMS4zMTEwOCIgeT0iNi44MzU1MiIgeD0iLTAuMDQxNzEiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNSIgaGVpZ2h0PSIxLjc4Nzg0IiB3aWR0aD0iMC4xMTkxOSIgeT0iNjguNDU2NSIgeD0iMjguOTIxMzQiIHN0cm9rZT0ibnVsbCIgZmlsbD0ibm9uZSIvPgogIDxyZWN0IGlkPSJzdmdfNiIgaGVpZ2h0PSI0Ljg4Njc3IiB3aWR0aD0iMTkuMDcwMzIiIHk9IjUxLjI5MzIxIiB4PSIzNi42Njg2NiIgc3Ryb2tlPSJudWxsIiBmaWxsPSJub25lIi8+CiA8L2c+Cjwvc3ZnPg=='),
+                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
+            -webkit-mask-size: 18px 30px, 20px 30px, calc(100% - 30px) calc(100% + 17px);
+            -webkit-mask-position: right bottom, left bottom, center top;
+            -webkit-mask-repeat: no-repeat;
+        }
+
+        .layout-navbars-tagsview-ul-li {
+            padding: 0 5px;
+            border-width: 15px 27px 15px;
+            border-style: solid;
+            border-color: transparent;
+            margin: 0 -15px;
+
+            .layout-icon-active {
+                display: none;
+            }
+
+            .layout-icon-three {
+                display: block;
+            }
+
+            &:hover {
+                @extend .tgs-style-three-svg;
+                background: var(--el-color-primary-light-9);
+                color: unset;
+            }
+        }
+
+        .is-active {
+            @extend .tgs-style-three-svg;
+            background: var(--el-color-primary-light-9) !important;
+            color: var(--el-color-primary) !important;
+            z-index: 1;
         }
     }
 }
+
 .layout-navbars-tagsview-shadow {
     box-shadow: rgb(0 21 41 / 4%) 0px 1px 4px;
-}
-</style>
+}</style>
diff --git a/mayfly_go_web/src/views/layout/navMenu/horizontal.vue b/mayfly_go_web/src/views/layout/navMenu/horizontal.vue
index d21960d3..2d0db212 100644
--- a/mayfly_go_web/src/views/layout/navMenu/horizontal.vue
+++ b/mayfly_go_web/src/views/layout/navMenu/horizontal.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="el-menu-horizontal-warp">
         <el-scrollbar @wheel.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
-            <el-menu router :default-active="defaultActive" background-color="transparent" mode="horizontal" @select="onHorizontalSelect">
+            <el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal"
+                @select="onHorizontalSelect">
                 <template v-for="val in menuLists">
                     <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
                         <template #title>
@@ -10,7 +11,7 @@
                         </template>
                         <SubItem :chil="val.children" />
                     </el-submenu>
-                    <el-menu-item :index="val.path" :key="val.path" v-else>
+                    <el-menu-item :index="val.path" :key="val?.path" v-else>
                         <template #title v-if="!val.meta.link || (val.meta.link && val.meta.isIframe)">
                             <i :class="val.meta.icon ? val.meta.icon : ''"></i>
                             {{ val.meta.title }}
@@ -28,99 +29,92 @@
     </div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, nextTick } from 'vue';
+<script lang="ts" setup name="navMenuHorizontal">
+import { reactive, computed, getCurrentInstance, onMounted, nextTick } from 'vue';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import { useStore } from '@/store/index.ts';
 import SubItem from '@/views/layout/navMenu/subItem.vue';
-export default defineComponent({
-    name: 'navMenuHorizontal',
-    components: { SubItem },
-    props: {
-        menuList: {
-            type: Array,
-            default: () => [],
-        },
+import { useRoutesList } from '@/store/routesList';
+import { useThemeConfig } from '@/store/themeConfig';
+import mittBus from '@/common/utils/mitt';
+
+// 定义父组件传过来的值
+const props = defineProps({
+    // 菜单列表
+    menuList: {
+        type: Array<any>,
+        default: () => [],
     },
-    setup(props) {
-        const { proxy } = getCurrentInstance() as any;
-        const route = useRoute();
-        const store = useStore();
-        const state: any = reactive({
-            defaultActive: null,
+});
+
+const { proxy } = getCurrentInstance() as any;
+const route = useRoute();
+const state: any = reactive({
+    defaultActive: null,
+});
+// 获取父级菜单数据
+const menuLists = computed(() => {
+    return props.menuList;
+});
+// 设置横向滚动条可以鼠标滚轮滚动
+const onElMenuHorizontalScroll = (e: any) => {
+    const eventDelta = e.wheelDelta || -e.deltaY * 40;
+    proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
+        proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft + eventDelta / 4;
+};
+// 初始化数据，页面刷新时，滚动条滚动到对应位置
+const initElMenuOffsetLeft = () => {
+    nextTick(() => {
+        let els: any = document.querySelector('.el-menu.el-menu--horizontal li.is-active');
+        if (!els) return false;
+        proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;
+    });
+};
+// 设置页面当前路由高亮
+const setCurrentRouterHighlight = (path: string) => {
+    const currentPathSplit = path.split('/');
+    if (useThemeConfig().themeConfig.layout === 'classic') {
+        state.defaultActive = `/${currentPathSplit[1]}`;
+    } else {
+        state.defaultActive = path;
+    }
+};
+// 路由过滤递归函数
+const filterRoutesFun = (arr: Array<object>) => {
+    return arr
+        .filter((item: any) => !item.meta.isHide)
+        .map((item: any) => {
+            item = Object.assign({}, item);
+            if (item.children) item.children = filterRoutesFun(item.children);
+            return item;
         });
-        // 获取父级菜单数据
-        const menuLists = computed(() => {
-            return props.menuList;
-        });
-        // 设置横向滚动条可以鼠标滚轮滚动
-        const onElMenuHorizontalScroll = (e: any) => {
-            const eventDelta = e.wheelDelta || -e.deltaY * 40;
-            proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft =
-                proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft + eventDelta / 4;
-        };
-        // 初始化数据，页面刷新时，滚动条滚动到对应位置
-        const initElMenuOffsetLeft = () => {
-            nextTick(() => {
-                let els: any = document.querySelector('.el-menu.el-menu--horizontal li.is-active');
-                if (!els) return false;
-                proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap.scrollLeft = els.offsetLeft;
-            });
-        };
-        // 设置页面当前路由高亮
-        const setCurrentRouterHighlight = (path: string) => {
-            const currentPathSplit = path.split('/');
-            if (store.state.themeConfig.themeConfig.layout === 'classic') {
-                state.defaultActive = `/${currentPathSplit[1]}`;
-            } else {
-                state.defaultActive = path;
-            }
-        };
-        // 路由过滤递归函数
-        const filterRoutesFun = (arr: Array<object>) => {
-            return arr
-                .filter((item: any) => !item.meta.isHide)
-                .map((item: any) => {
-                    item = Object.assign({}, item);
-                    if (item.children) item.children = filterRoutesFun(item.children);
-                    return item;
-                });
-        };
-        // 传送当前子级数据到菜单中
-        const setSendClassicChildren = (path: string) => {
-            const currentPathSplit = path.split('/');
-            let currentData: any = {};
-            filterRoutesFun(store.state.routesList.routesList).map((v, k) => {
-                if (v.path === `/${currentPathSplit[1]}`) {
-                    v['k'] = k;
-                    currentData['item'] = [{ ...v }];
-                    currentData['children'] = [{ ...v }];
-                    if (v.children) currentData['children'] = v.children;
-                }
-            });
-            return currentData;
-        };
-        // 菜单激活回调
-        const onHorizontalSelect = (path: string) => {
-            proxy.mittBus.emit('setSendClassicChildren', setSendClassicChildren(path));
-        };
-        // 页面加载时
-        onMounted(() => {
-            initElMenuOffsetLeft();
-            setCurrentRouterHighlight(route.path);
-        });
-        // 路由更新时
-        onBeforeRouteUpdate((to) => {
-            setCurrentRouterHighlight(to.path);
-            proxy.mittBus.emit('onMenuClick');
-        });
-        return {
-            menuLists,
-            onElMenuHorizontalScroll,
-            onHorizontalSelect,
-            ...toRefs(state),
-        };
-    },
+};
+// 传送当前子级数据到菜单中
+const setSendClassicChildren = (path: string) => {
+    const currentPathSplit = path.split('/');
+    let currentData: any = {};
+    filterRoutesFun(useRoutesList().routesList).map((v, k) => {
+        if (v.path === `/${currentPathSplit[1]}`) {
+            v['k'] = k;
+            currentData['item'] = [{ ...v }];
+            currentData['children'] = [{ ...v }];
+            if (v.children) currentData['children'] = v.children;
+        }
+    });
+    return currentData;
+};
+// 菜单激活回调
+const onHorizontalSelect = (path: string) => {
+    mittBus.emit('setSendClassicChildren', setSendClassicChildren(path));
+};
+// 页面加载时
+onMounted(() => {
+    initElMenuOffsetLeft();
+    setCurrentRouterHighlight(route.path);
+});
+// 路由更新时
+onBeforeRouteUpdate((to) => {
+    setCurrentRouterHighlight(to.path);
+    mittBus.emit('onMenuClick');
 });
 </script>
 
@@ -129,12 +123,15 @@ export default defineComponent({
     flex: 1;
     overflow: hidden;
     margin-right: 30px;
+
     ::v-deep(.el-scrollbar__bar.is-vertical) {
         display: none;
     }
+
     ::v-deep(a) {
         width: 100%;
     }
+
     .el-menu.el-menu--horizontal {
         display: flex;
         height: 100%;
diff --git a/mayfly_go_web/src/views/layout/navMenu/vertical.vue b/mayfly_go_web/src/views/layout/navMenu/vertical.vue
index 89c1db42..ca18624a 100644
--- a/mayfly_go_web/src/views/layout/navMenu/vertical.vue
+++ b/mayfly_go_web/src/views/layout/navMenu/vertical.vue
@@ -1,12 +1,6 @@
 <template>
-    <el-menu
-        router
-        :default-active="defaultActive"
-        background-color="transparent"
-        :collapse="setIsCollapse"
-        :unique-opened="getThemeConfig.isUniqueOpened"
-        :collapse-transition="false"
-    >
+    <el-menu router :default-active="state.defaultActive" background-color="transparent" :collapse="setIsCollapse"
+        :unique-opened="themeConfig.isUniqueOpened" :collapse-transition="false">
         <template v-for="val in menuLists">
             <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
                 <template #title>
@@ -15,65 +9,53 @@
                 </template>
                 <SubItem :chil="val.children" />
             </el-sub-menu>
-            <el-menu-item :index="val.path" :key="val.path" v-else>
+            <el-menu-item :index="val.path" :key="val?.path" v-else>
                 <SvgIcon :name="val.meta.icon" />
                 <template #title v-if="!val.meta.link || (val.meta.link && val.meta.isIframe)">
                     <span>{{ val.meta.title }}</span>
                 </template>
                 <template #title v-else>
-                    <a :href="val.meta.link" target="_blank">{{ val.meta.title }}</a></template
-                >
+                    <a :href="val.meta.link" target="_blank">{{ val.meta.title }}</a></template>
             </el-menu-item>
         </template>
     </el-menu>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, computed, defineComponent, getCurrentInstance } from 'vue';
+<script lang="ts" setup name="navMenuVertical">
+import { reactive, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
 import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import { useStore } from '@/store/index.ts';
 import SubItem from '@/views/layout/navMenu/subItem.vue';
-export default defineComponent({
-    name: 'navMenuVertical',
-    components: { SubItem },
-    props: {
-        menuList: {
-            type: Array,
-            default: () => [],
-        },
-    },
-    setup(props) {
-        const { proxy } = getCurrentInstance() as any;
-        const store = useStore();
-        const route = useRoute();
-        const state = reactive({
-            defaultActive: route.path,
-        });
-        // 获取父级菜单数据
-        const menuLists = computed(() => {
-            return props.menuList;
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 设置菜单的收起/展开
-        const setIsCollapse = computed(() => {
-            return document.body.clientWidth < 1000 ? false : getThemeConfig.value.isCollapse;
-        });
-        // 路由更新时
-        onBeforeRouteUpdate((to) => {
-            state.defaultActive = to.path;
-            proxy.mittBus.emit('onMenuClick');
-            const clientWidth = document.body.clientWidth;
-            if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;
-        });
-        return {
-            menuLists,
-            getThemeConfig,
-            setIsCollapse,
-            ...toRefs(state),
-        };
+import mittBus from '@/common/utils/mitt';
+
+// 定义父组件传过来的值
+const props = defineProps({
+    // 菜单列表
+    menuList: {
+        type: Array<any>,
+        default: () => [],
     },
 });
+
+const { themeConfig } = storeToRefs(useThemeConfig());
+const route = useRoute();
+const state = reactive({
+    defaultActive: route.path,
+});
+// 获取父级菜单数据
+const menuLists = computed(() => {
+    return props.menuList;
+});
+// 设置菜单的收起/展开
+const setIsCollapse = computed(() => {
+    return document.body.clientWidth < 1000 ? false : themeConfig.value.isCollapse;
+});
+// 路由更新时
+onBeforeRouteUpdate((to) => {
+    state.defaultActive = to.path;
+    mittBus.emit('onMenuClick');
+    const clientWidth = document.body.clientWidth;
+    if (clientWidth < 1000) themeConfig.value.isCollapse = false;
+});
 </script>
diff --git a/mayfly_go_web/src/views/layout/routerView/iframes.vue b/mayfly_go_web/src/views/layout/routerView/iframes.vue
index f8dac307..5fb64385 100644
--- a/mayfly_go_web/src/views/layout/routerView/iframes.vue
+++ b/mayfly_go_web/src/views/layout/routerView/iframes.vue
@@ -9,6 +9,7 @@
 <script lang="ts">
 import { defineComponent, reactive, toRefs, onMounted, onBeforeMount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
 import { useRoute } from 'vue-router';
+import mittBus from '@/common/utils/mitt';
 export default defineComponent({
     name: 'layoutIfameView',
     props: {
@@ -18,7 +19,6 @@ export default defineComponent({
         },
     },
     setup(props, { emit }) {
-        const { proxy } = getCurrentInstance() as any;
         const route = useRoute();
         const state = reactive({
             iframeLoading: true,
@@ -38,7 +38,7 @@ export default defineComponent({
         // 页面加载前
         onBeforeMount(() => {
             state.iframeUrl = props.meta.link;
-            proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
+            mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
                 if (route.path !== path) return false;
                 emit('getCurrentRouteMeta');
             });
@@ -49,7 +49,7 @@ export default defineComponent({
         });
         // 页面卸载时
         onUnmounted(() => {
-            proxy.mittBus.off('onTagsViewRefreshRouterView', () => {});
+            mittBus.off('onTagsViewRefreshRouterView', () => {});
         });
         return {
             ...toRefs(state),
diff --git a/mayfly_go_web/src/views/layout/routerView/parent.vue b/mayfly_go_web/src/views/layout/routerView/parent.vue
index 1a7d0215..7f44b89c 100644
--- a/mayfly_go_web/src/views/layout/routerView/parent.vue
+++ b/mayfly_go_web/src/views/layout/routerView/parent.vue
@@ -2,68 +2,53 @@
     <div class="h100">
         <router-view v-slot="{ Component }">
             <transition :name="setTransitionName" mode="out-in">
-                <keep-alive :include="keepAliveNameList">
-                    <component :is="Component" :key="refreshRouterViewKey" class="w100" />
+                <keep-alive :include="state.keepAliveNameList">
+                    <component :is="Component" :key="state.refreshRouterViewKey" class="w100" />
                 </keep-alive>
             </transition>
         </router-view>
     </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, toRefs, reactive, getCurrentInstance, onBeforeMount, onUnmounted, nextTick, ref } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
-import { useStore } from '@/store/index.ts';
-export default defineComponent({
-    name: 'layoutParentView',
-    setup() {
-        const { proxy } = getCurrentInstance() as any;
-        const route = useRoute();
-        const store = useStore();
-        const state: any = reactive({
-            refreshRouterViewKey: null,
-            keepAliveNameList: [],
-            keepAliveNameNewList: [],
+<script lang="ts" setup name="layoutParentView">
+import { computed, reactive, onBeforeMount, onUnmounted, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { useKeepALiveNames } from '@/store/keepAliveNames';
+import mittBus from '@/common/utils/mitt';
+
+const route = useRoute();
+const { themeConfig } = storeToRefs(useThemeConfig());
+const { keepAliveNames } = storeToRefs(useKeepALiveNames());
+const state: any = reactive({
+    refreshRouterViewKey: null,
+    keepAliveNameList: [],
+    keepAliveNameNewList: [],
+});
+// 监听路由的变化，动态赋值给refreshRouterViewKey
+// onBeforeRouteUpdate((to: any) => {
+// 	state.refreshRouterViewKey = decodeURI(to.fullPath);
+// });
+// 页面加载前，处理缓存，页面刷新时路由缓存处理
+onBeforeMount(() => {
+    state.keepAliveNameList = keepAliveNames.value;
+    mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
+        if (decodeURI(route.fullPath) !== path) return false;
+        state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
+        state.refreshRouterViewKey = route.path;
+        nextTick(() => {
+            state.refreshRouterViewKey = null;
+            state.keepAliveNameList = keepAliveNames.value;
         });
-        // 监听路由的变化，动态赋值给refreshRouterViewKey
-        // onBeforeRouteUpdate((to: any) => {
-        // 	state.refreshRouterViewKey = decodeURI(to.fullPath);
-        // });
-        // 设置主界面切换动画
-        const setTransitionName = computed(() => {
-            return store.state.themeConfig.themeConfig.animation;
-        });
-        // 获取布局配置信息
-        const getThemeConfig = computed(() => {
-            return store.state.themeConfig.themeConfig;
-        });
-        // 获取组件缓存列表(name值)
-        const getKeepAliveNames = computed(() => {
-            return store.state.keepAliveNames.keepAliveNames;
-        });
-        // 页面加载前，处理缓存，页面刷新时路由缓存处理
-        onBeforeMount(() => {
-            state.keepAliveNameList = getKeepAliveNames.value;
-            proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
-                if (decodeURI(route.fullPath) !== path) return false;
-                state.keepAliveNameList = getKeepAliveNames.value.filter((name: string) => route.name !== name);
-                state.refreshRouterViewKey = route.path;
-                nextTick(() => {
-                    state.refreshRouterViewKey = null;
-                    state.keepAliveNameList = getKeepAliveNames.value;
-                });
-            });
-        });
-        // 页面卸载时
-        onUnmounted(() => {
-            proxy.mittBus.off('onTagsViewRefreshRouterView');
-        });
-        return {
-            getThemeConfig,
-            getKeepAliveNames,
-            setTransitionName,
-            ...toRefs(state),
-        };
-    },
+    });
+});
+// 设置主界面切换动画
+const setTransitionName = computed(() => {
+    return themeConfig.value.animation;
+});
+// 页面卸载时
+onUnmounted(() => {
+    mittBus.off('onTagsViewRefreshRouterView');
 });
 </script>
diff --git a/mayfly_go_web/src/views/login/component/AccountLogin.vue b/mayfly_go_web/src/views/login/component/AccountLogin.vue
index b63372c5..b4114f55 100644
--- a/mayfly_go_web/src/views/login/component/AccountLogin.vue
+++ b/mayfly_go_web/src/views/login/component/AccountLogin.vue
@@ -8,7 +8,7 @@
             </el-form-item>
             <el-form-item prop="password">
                 <el-input type="password" placeholder="请输入密码" prefix-icon="lock" v-model="loginForm.password"
-                    autocomplete="off" show-password>
+                    autocomplete="off" @keyup.enter="login" show-password>
                 </el-input>
             </el-form-item>
             <el-form-item v-if="isUseLoginCaptcha" prop="captcha">
@@ -63,14 +63,15 @@
 import { nextTick, onMounted, ref, toRefs, reactive, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
-import { initBackEndControlRoutesFun } from '@/router/index.ts';
-import { useStore } from '@/store/index.ts';
-import { setSession, setUserInfo2Session, setUseWatermark2Session } from '@/common/utils/storage.ts';
-import { formatAxis } from '@/common/utils/formatTime.ts';
+import { initBackEndControlRoutesFun } from '@/router/index';
+import { setSession, setUserInfo2Session, setUseWatermark2Session } from '@/common/utils/storage';
+import { formatAxis } from '@/common/utils/format';
 import openApi from '@/common/openApi';
 import { RsaEncrypt } from '@/common/rsa';
 import { useLoginCaptcha, useWartermark } from '@/common/sysconfig';
 import { letterAvatar } from '@/common/utils/string';
+import { useUserInfo } from '@/store/userInfo';
+import { useThemeConfig } from '@/store/themeConfig';
 
 const rules = {
     username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
@@ -78,7 +79,6 @@ const rules = {
     captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
 }
 
-const store = useStore();
 const route = useRoute();
 const router = useRouter();
 const loginFormRef: any = ref(null);
@@ -202,8 +202,9 @@ const onSignIn = async () => {
     // 存储用户信息到浏览器缓存
     setUserInfo2Session(userInfos);
     // 1、请注意执行顺序(存储用户信息到vuex)
-    store.dispatch('userInfos/setUserInfos', userInfos);
-    if (!store.state.themeConfig.themeConfig.isRequestRoutes) {
+    useUserInfo().setUserInfo(userInfos)
+    // store.dispatch('userInfos/setUserInfos', userInfos);
+    if (!useThemeConfig().themeConfig.isRequestRoutes) {
         // 前端控制路由，2、请注意执行顺序
         // await initAllFun();
         await initBackEndControlRoutesFun();
diff --git a/mayfly_go_web/src/views/login/index.vue b/mayfly_go_web/src/views/login/index.vue
index c1ea8842..aa982ca8 100644
--- a/mayfly_go_web/src/views/login/index.vue
+++ b/mayfly_go_web/src/views/login/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="login-container">
         <div class="login-logo">
-            <span>{{ getThemeConfig.globalViceTitle }}</span>
+            <span>{{ themeConfig.globalViceTitle }}</span>
         </div>
         <div class="login-content" :class="{ 'login-content-mobile': tabsActiveName === 'mobile' }">
             <div class="login-content-main">
@@ -32,11 +32,12 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, reactive, computed } from 'vue';
+import { toRefs, reactive } from 'vue';
 import Account from '@/views/login/component/AccountLogin.vue';
-import { useStore } from '@/store/index.ts';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
 
-const store = useStore();
+const { themeConfig } = storeToRefs(useThemeConfig());
 const state = reactive({
     tabsActiveName: 'account',
     isTabPaneShow: true,
@@ -47,10 +48,6 @@ const {
     tabsActiveName,
 } = toRefs(state)
 
-// 获取布局配置信息
-const getThemeConfig = computed(() => {
-    return store.state.themeConfig.themeConfig;
-});
 
 // 切换密码、手机登录
 const onTabsClick = () => {
diff --git a/mayfly_go_web/src/views/ops/db/DbList.vue b/mayfly_go_web/src/views/ops/db/DbList.vue
index 04fd605a..b6eb5b3c 100644
--- a/mayfly_go_web/src/views/ops/db/DbList.vue
+++ b/mayfly_go_web/src/views/ops/db/DbList.vue
@@ -286,22 +286,23 @@
 </template>
 
 <script lang='ts' setup>
-import { toRefs, reactive, computed, onMounted } from 'vue';
+import { toRefs, reactive, computed, onMounted, defineAsyncComponent } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { formatByteSize } from '@/common/utils/format';
-import DbEdit from './DbEdit.vue';
-import CreateTable from './CreateTable.vue';
 import { dbApi } from './api';
 import enums from './enums';
-import SqlExecBox from './component/SqlExecBox.ts';
+import SqlExecBox from './component/SqlExecBox';
 import config from '@/common/config';
 import { getSession } from '@/common/utils/storage';
 import { isTrue } from '@/common/assert';
 import { Search as SearchIcon } from '@element-plus/icons-vue'
-import { tagApi } from '../tag/api.ts';
+import { tagApi } from '../tag/api';
 import { dateFormat } from '@/common/utils/date';
 import TagInfo from '../component/TagInfo.vue';
 
+const DbEdit = defineAsyncComponent(() => import('./DbEdit.vue'));
+const CreateTable = defineAsyncComponent(() => import('./CreateTable.vue'));
+
 const permissions = {
     saveDb: 'db:save',
     delDb: 'db:del',
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index f8c47980..761cf19f 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -99,7 +99,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, toRefs } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref, toRefs } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/mysql/mysql.js';
@@ -107,12 +107,13 @@ import * as monaco from 'monaco-editor';
 import { editor, languages, Position } from 'monaco-editor';
 
 import { DbInst, TabInfo, TabType } from './db'
-import TableData from './component/tab/TableData.vue'
-import Query from './component/tab/Query.vue'
 import { TagTreeNode } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
 import { dbApi } from './api';
 
+const Query = defineAsyncComponent(() => import('./component/tab/Query.vue'));
+const TableData = defineAsyncComponent(() => import('./component/tab/TableData.vue'));
+
 /**
  * 树节点类型
  */
@@ -166,7 +167,7 @@ const setHeight = () => {
 };
 
 /**
-* instmap; tagPaht -> redis info[]
+* instmap; tagPaht -> info[]
 */
 const instMap: Map<string, any[]> = new Map();
 
@@ -212,7 +213,7 @@ const loadNode = async (node: any) => {
 
     // 点击数据库实例 -> 加载库列表
     if (nodeType === NodeType.DbInst) {
-        const dbs = params.database.split(' ');
+        const dbs = params.database.split(' ')?.sort();
         return dbs.map((x: any) => {
             return new TagTreeNode(`${data.key}.${x}`, x, NodeType.Db).withParams({
                 tagPath: params.tagPath,
diff --git a/mayfly_go_web/src/views/ops/db/component/tab/Query.vue b/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
index 93795736..3c5acf91 100644
--- a/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
+++ b/mayfly_go_web/src/views/ops/db/component/tab/Query.vue
@@ -41,6 +41,13 @@
             <div :id="'MonacoTextarea-' + ti.key" :style="{ height: editorHeight }">
             </div>
         </div>
+
+        <div class="editor-move-resize" @mousedown="onDragSetHeight">
+            <el-icon>
+                <Minus />
+            </el-icon>
+        </div>
+
         <div class="mt5">
             <el-row>
                 <el-link v-if="table" @click="onDeleteData()" class="ml5" type="danger" icon="delete"
@@ -62,18 +69,19 @@
                             style="font-size: 12px">取消</span></el-link>
                 </span>
             </el-row>
-            <db-table ref="dbTableRef" :db-id="state.ti.dbId" :db="state.ti.db"
-                :data="execRes.data" :table="state.table" :column-names="execRes.tableColumn" :loading="loading"
-                height="250" empty-text="tips: select *开头的单表查询或点击表名默认查询的数据,可双击数据在线修改"
-                @selection-change="onDataSelectionChange" @change-updated-field="changeUpdatedField"></db-table>
+            <db-table ref="dbTableRef" :db-id="state.ti.dbId" :db="state.ti.db" :data="execRes.data" :table="state.table"
+                :column-names="execRes.tableColumn" :loading="loading" :height="tableDataHeight"
+                empty-text="tips: select *开头的单表查询或点击表名默认查询的数据,可双击数据在线修改" @selection-change="onDataSelectionChange"
+                @change-updated-field="changeUpdatedField"></db-table>
         </div>
 
     </div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, watch, onMounted, computed, reactive, toRefs, ref, Ref } from 'vue';
-import { useStore } from '@/store/index.ts';
+import { nextTick, watch, onMounted, reactive, toRefs, ref, Ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
 import { getSession } from '@/common/utils/storage';
 import { isTrue, notBlank } from '@/common/assert';
 import { format as sqlFormatter } from 'sql-formatter';
@@ -110,8 +118,7 @@ const props = defineProps({
     }
 })
 
-
-const store = useStore();
+const { themeConfig } = storeToRefs(useThemeConfig());
 const token = getSession('token');
 let monacoEditor = {} as editor.IStandaloneCodeEditor;
 const dbTableRef = ref(null) as Ref;
@@ -131,10 +138,12 @@ const state = reactive({
     },
     selectionDatas: [] as any,
     editorHeight: '500',
+    tableDataHeight: 250 as any,
     hasUpdatedFileds: false,
 });
 
 const {
+    tableDataHeight,
     editorHeight,
     ti,
     execRes,
@@ -166,11 +175,6 @@ onMounted(async () => {
     await state.ti.getNowDbInst().loadDbHints(state.ti.db);
 })
 
-// 获取布局配置信息
-const getThemeConfig: any = computed(() => {
-    return store.state.themeConfig.themeConfig;
-});
-
 self.MonacoEnvironment = {
     getWorker() {
         return new EditorWorker();
@@ -184,7 +188,7 @@ const initMonacoEditor = () => {
     monaco.editor.defineTheme('SolarizedLight', SolarizedLight);
     monacoEditor = monaco.editor.create(monacoTextarea, {
         language: 'sql',
-        theme: getThemeConfig.value.editorTheme,
+        theme: themeConfig.value.editorTheme,
         automaticLayout: true, //自适应宽高布局
         folding: false,
         roundedSelection: false, // 禁用选择文本背景的圆角
@@ -266,6 +270,21 @@ const initMonacoEditor = () => {
     }
 };
 
+/**
+ * 拖拽改变sql编辑区和查询结果区高度
+*/
+const onDragSetHeight = () => {
+    document.onmousemove = (e) => {
+        e.preventDefault();
+        //得到鼠标拖动的宽高距离：取绝对值
+        state.editorHeight = `${document.getElementById('MonacoTextarea-' + state.ti.key)!.offsetHeight + e.movementY}px`
+        state.tableDataHeight -= e.movementY
+    }
+    document.onmouseup = () => {
+        document.onmousemove = null;
+    }
+}
+
 /**
  * 执行sql
  */
@@ -545,4 +564,10 @@ const cancelUpdateFields = () => {
 .update_field_active {
     background-color: var(--el-color-success)
 }
+
+.editor-move-resize {
+    cursor: n-resize;
+    height: 3px;
+    text-align: center;
+}
 </style>
diff --git a/mayfly_go_web/src/views/ops/db/component/tab/TableData.vue b/mayfly_go_web/src/views/ops/db/component/tab/TableData.vue
index 68e77269..65bc45eb 100644
--- a/mayfly_go_web/src/views/ops/db/component/tab/TableData.vue
+++ b/mayfly_go_web/src/views/ops/db/component/tab/TableData.vue
@@ -120,7 +120,7 @@ const props = defineProps({
         required: true
     },
     tableHeight: {
-        type: String,
+        type: [String],
         default: '600'
     }
 })
diff --git a/mayfly_go_web/src/views/ops/machine/MachineList.vue b/mayfly_go_web/src/views/ops/machine/MachineList.vue
index e5fd13e0..c8929ddc 100644
--- a/mayfly_go_web/src/views/ops/machine/MachineList.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineList.vue
@@ -161,7 +161,7 @@
 
         <process-list v-model:visible="processDialog.visible" v-model:machineId="processDialog.machineId" />
 
-        <service-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible"
+        <script-manage :title="serviceDialog.title" v-model:visible="serviceDialog.visible"
             v-model:machineId="serviceDialog.machineId" />
 
         <file-manage :title="fileDialog.title" v-model:visible="fileDialog.visible"
@@ -176,20 +176,22 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, reactive, onMounted } from 'vue';
+import { toRefs, reactive, onMounted, defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { machineApi } from './api';
-import { tagApi } from '../tag/api.ts';
-import ServiceManage from './ServiceManage.vue';
-import FileManage from './FileManage.vue';
-import MachineEdit from './MachineEdit.vue';
-import ProcessList from './ProcessList.vue';
-import MachineStats from './MachineStats.vue';
-import MachineRec from './MachineRec.vue';
+import { tagApi } from '../tag/api';
 import { dateFormat } from '@/common/utils/date';
 import TagInfo from '../component/TagInfo.vue';
 
+// 组件
+const MachineEdit = defineAsyncComponent(() => import('./MachineEdit.vue'));
+const ScriptManage = defineAsyncComponent(() => import('./ScriptManage.vue'));
+const FileManage = defineAsyncComponent(() => import('./FileManage.vue'));
+const MachineStats = defineAsyncComponent(() => import('./MachineStats.vue'));
+const MachineRec = defineAsyncComponent(() => import('./MachineRec.vue'));
+const ProcessList = defineAsyncComponent(() => import('./ProcessList.vue'));
+
 const router = useRouter();
 const state = reactive({
     tags: [] as any,
diff --git a/mayfly_go_web/src/views/ops/machine/ServiceManage.vue b/mayfly_go_web/src/views/ops/machine/ScriptManage.vue
similarity index 100%
rename from mayfly_go_web/src/views/ops/machine/ServiceManage.vue
rename to mayfly_go_web/src/views/ops/machine/ScriptManage.vue
diff --git a/mayfly_go_web/src/views/ops/machine/SshTerminal.vue b/mayfly_go_web/src/views/ops/machine/SshTerminal.vue
index 5c0c8262..77b8ef4f 100644
--- a/mayfly_go_web/src/views/ops/machine/SshTerminal.vue
+++ b/mayfly_go_web/src/views/ops/machine/SshTerminal.vue
@@ -6,10 +6,11 @@
 import 'xterm/css/xterm.css';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
-import { getSession } from '@/common/utils/storage.ts';
+import { getSession } from '@/common/utils/storage';
 import config from '@/common/config';
-import { useStore } from '@/store/index.ts';
-import { nextTick, computed, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/store/themeConfig';
+import { nextTick, reactive, onMounted, onBeforeUnmount } from 'vue';
 
 const props = defineProps({
     machineId: { type: Number },
@@ -17,6 +18,7 @@ const props = defineProps({
     height: { type: [String, Number] },
 })
 
+const { themeConfig } = storeToRefs(useThemeConfig());
 const state = reactive({
     cmd: '',
     term: null as any,
@@ -40,24 +42,18 @@ onBeforeUnmount(() => {
     closeAll();
 });
 
-const store = useStore();
-
-// 获取布局配置信息
-const getThemeConfig: any = computed(() => {
-    return store.state.themeConfig.themeConfig;
-});
 
 function initXterm() {
     const term: any = new Terminal({
-        fontSize: getThemeConfig.value.terminalFontSize || 15,
-        fontWeight: getThemeConfig.value.terminalFontWeight || 'normal',
+        fontSize: themeConfig.value.terminalFontSize || 15,
+        fontWeight: themeConfig.value.terminalFontWeight || 'normal',
         fontFamily: 'JetBrainsMono, monaco, Consolas, Lucida Console, monospace',
         cursorBlink: true,
         disableStdin: false,
         theme: {
-            foreground: getThemeConfig.value.terminalForeground || '#7e9192', //字体
-            background: getThemeConfig.value.terminalBackground || '#002833', //背景色
-            cursor: getThemeConfig.value.terminalCursor || '#268F81', //设置光标
+            foreground: themeConfig.value.terminalForeground || '#7e9192', //字体
+            background: themeConfig.value.terminalBackground || '#002833', //背景色
+            cursor: themeConfig.value.terminalCursor || '#268F81', //设置光标
             // cursorAccent: "red",  // 光标停止颜色
         } as any,
     });
diff --git a/mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue b/mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue
index d0fe1954..a47d65bd 100755
--- a/mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue
+++ b/mayfly_go_web/src/views/ops/machine/authcert/AuthCertList.vue
@@ -30,7 +30,7 @@
                 <el-table-column prop="authMethod" label="认证方式" min-width="50px">
                     <template #default="scope">
                         <el-tag v-if="scope.row.authMethod == 1" type="success" size="small">密码</el-tag>
-                        <el-tag v-if="scope.row.authMethod == 2" type="primary" size="small">密钥</el-tag>
+                        <el-tag v-if="scope.row.authMethod == 2" size="small">密钥</el-tag>
                     </template>
                 </el-table-column>
                 <el-table-column prop="remark" label="备注" min-width="100px" show-overflow-tooltip>
diff --git a/mayfly_go_web/src/views/ops/machine/authcert/AuthCertSelect.vue b/mayfly_go_web/src/views/ops/machine/authcert/AuthCertSelect.vue
index 8a8c936c..686c98b5 100644
--- a/mayfly_go_web/src/views/ops/machine/authcert/AuthCertSelect.vue
+++ b/mayfly_go_web/src/views/ops/machine/authcert/AuthCertSelect.vue
@@ -4,7 +4,7 @@
             style="width: 100%">
             <el-option v-for="ac in acs" :key="ac.id" :value="ac.id" :label="ac.name">
                 <el-tag v-if="ac.authMethod == 1" type="success" size="small">密码</el-tag>
-                <el-tag v-if="ac.authMethod == 2" type="primary" size="small">密钥</el-tag>
+                <el-tag v-if="ac.authMethod == 2" size="small">密钥</el-tag>
 
                 <el-divider direction="vertical" border-style="dashed" />
                 {{ ac.name }}
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
index 6a50eb6f..0f60669d 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
@@ -147,15 +147,16 @@
 
 <script lang="ts" setup>
 import { mongoApi } from './api';
-import { reactive, ref, toRefs } from 'vue';
+import { defineAsyncComponent, reactive, ref, toRefs } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import { isTrue, notBlank } from '@/common/assert';
-import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
 import { TagTreeNode } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
 import { formatByteSize } from '@/common/utils/format';
 
+const MonacoEditor = defineAsyncComponent(() => import('@/components/monaco/MonacoEditor.vue'));
+
 /**
  * 树节点类型
  */
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue b/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
deleted file mode 100644
index d84761c7..00000000
--- a/mayfly_go_web/src/views/ops/mongo/MongoInstanceTree.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-    <tag-menu :instanceMenuMaxHeight="state.instanceMenuMaxHeight" :tags="instances.tags" ref="menuRef">
-        <template #submenu="props">
-            <el-sub-menu v-for="inst in instances.tree[props.tag.tagId]" :index="'mongo-instance-' + inst.id"
-                :key="'mongo-instance-' + inst.id" @click.stop="changeInstance(inst, () => { })">
-                <template #title>
-                    <el-popover placement="right-start" title="mongo数据库实例信息" trigger="hover" :width="210">
-                        <template #reference>
-                            <span>&nbsp;&nbsp;<el-icon>
-                                    <MostlyCloudy color="#409eff" />
-                                </el-icon>{{ inst.name }}</span>
-                        </template>
-                        <template #default>
-                            <el-form class="instances-pop-form" label-width="55px" :size="'small'">
-                                <el-form-item label="名称:">{{ inst.name }}</el-form-item>
-                                <el-form-item label="链接:">{{ inst.uri }}</el-form-item>
-                            </el-form>
-                        </template>
-                    </el-popover>
-                </template>
-                <!-- 第三级：数据库 -->
-                <el-sub-menu v-for="db in instances.dbs[inst.id]" :index="inst.id + db.Name" :key="inst.id + db.Name"
-                    :class="state.nowSchema === (inst.id + db.Name) && 'checked'"
-                    @click.stop="changeSchema(inst, db.Name)">
-                    <template #title>
-                        &nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                            <Coin color="#67c23a" />
-                        </el-icon>
-                        <span class="checked-schema">
-                            {{ db.Name }}
-                            <span style="color: #8492a6;font-size: 13px">[{{
-                                formatByteSize(db.SizeOnDisk)
-                            }}]</span>
-                        </span>
-                    </template>
-                    <!-- 第四级 01：表 -->
-                    <el-sub-menu :index="inst.id + db.Name + '-table'">
-                        <template #title>
-                            <div style="width: 100%" @click="loadTableNames(inst, db.Name, () => { })">
-                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                    <Calendar color="#409eff" />
-                                </el-icon>
-                                <span>集合</span>
-                                <el-icon v-show="state.loading[inst.id + db.Name]" class="is-loading">
-                                    <Loading />
-                                </el-icon>
-                            </div>
-                        </template>
-                        <el-menu-item :index="inst.id + db.Name + '-tableSearch'"
-                            :key="inst.id + db.Name + '-tableSearch'">
-                            <template #title>
-                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                                <el-input size="small" placeholder="过滤" clearable
-                                    @change="filterTableName(inst.id, db.Name)"
-                                    @keyup="(e: any) => filterTableName(inst.id, db.Name, e)"
-                                    v-model="state.filterParam[inst.id + db.Name]" />
-                            </template>
-                        </el-menu-item>
-
-                        <template v-for="tb in instances.tables[inst.id + db.Name]">
-                            <el-menu-item :index="inst.id + db.Name + tb.tableName"
-                                :key="inst.id + db.Name + tb.tableName" v-if="tb.show"
-                                @click="loadTableData(inst, db.Name, tb.tableName)">
-                                <template #title>
-                                    <div style="width: 100%">
-                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-icon>
-                                            <Calendar color="#409eff" />
-                                        </el-icon>
-                                        <span :title="tb.tableComment || ''">{{ tb.tableName }}</span>
-                                    </div>
-                                </template>
-                            </el-menu-item>
-                        </template>
-                    </el-sub-menu>
-                </el-sub-menu>
-            </el-sub-menu>
-        </template>
-    </tag-menu>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeMount, reactive } from 'vue';
-import { formatByteSize } from '@/common/utils/format';
-import TagMenu from '../component/TagMenu.vue';
-
-const props = defineProps({
-    instances: {
-        type: Object, required: true
-    },
-})
-
-const emits = defineEmits(['initLoadInstances', 'changeInstance', 'loadTableNames', 'loadTableData', 'changeSchema'])
-
-onBeforeMount(async () => {
-    await initLoadInstances()
-    setHeight()
-})
-
-const setHeight = () => {
-    state.instanceMenuMaxHeight = window.innerHeight - 115 + 'px';
-}
-
-const state = reactive({
-    instanceMenuMaxHeight: '800px',
-    nowSchema: '',
-    filterParam: {},
-    loading: {},
-
-})
-
-/**
- * 初始化加载实例数据
- */
-const initLoadInstances = () => {
-    emits('initLoadInstances')
-}
-
-/**
- * 改变选中的数据库实例
- * @param inst 选中的实例对象
- * @param fn 选中的实例对象后的回调事件
- */
-const changeInstance = (inst: any, fn: Function) => {
-    emits('changeInstance', inst, fn)
-}
-/**
- * 改变选中的数据库schema
- * @param inst 选中的实例对象
- * @param schema 选中的数据库schema
- */
-const changeSchema = (inst: any, schema: string) => {
-    state.nowSchema = inst.id + schema
-    emits('changeSchema', inst, schema)
-}
-/**
- * 加载schema下所有表
- * @param inst 数据库实例
- * @param fn 加载表名后的回调函数，参数：表名list
- * @param schema database名
- */
-const loadTableNames = async (inst: any, schema: string, fn: Function) => {
-    state.loading[inst.id + schema] = true
-    await emits('loadTableNames', inst, schema, (res: any) => {
-        state.loading[inst.id + schema] = false
-        fn && fn(res)
-    })
-}
-/**
- * 加载选中表数据
- * @param inst 数据库实例
- * @param schema database名
- * @param tableName 表名
- */
-const loadTableData = (inst: any, schema: string, tableName: string) => {
-    emits('loadTableData', inst, schema, tableName)
-}
-
-const filterTableName = (instId: number, schema: string, event?: any) => {
-    if (event) {
-        state.filterParam[instId + schema] = event.target.value
-    }
-    let param = state.filterParam[instId + schema] as string
-    param = param?.replace('/', '\/')
-    const key = instId + schema;
-    props.instances.tables[key].forEach((a: any) => {
-        a.show = param ? eval('/' + param.split('').join('[_\w]*') + '[_\w]*/ig').test(a.tableName) : true
-    })
-}
-
-</script>
-
-<style lang="scss">
-.instances-pop-form {
-    .el-form-item {
-        margin-bottom: unset;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/mayfly_go_web/src/views/ops/mongo/MongoList.vue b/mayfly_go_web/src/views/ops/mongo/MongoList.vue
index 1a20e1fd..5bfb23ab 100644
--- a/mayfly_go_web/src/views/ops/mongo/MongoList.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoList.vue
@@ -196,7 +196,7 @@
 import { mongoApi } from './api';
 import { toRefs, reactive, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { tagApi } from '../tag/api.ts';
+import { tagApi } from '../tag/api';
 import MongoEdit from './MongoEdit.vue';
 import { formatByteSize } from '@/common/utils/format';
 import { dateFormat } from '@/common/utils/date';
diff --git a/mayfly_go_web/src/views/ops/redis/DataOperation.vue b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
index ba0ad6ec..1c7b8e33 100644
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -50,7 +50,7 @@
                                 <el-button @click="scan()" icon="bottom" plain>scan</el-button>
                                 <el-popover placement="right" :width="200" trigger="click">
                                     <template #reference>
-                                        <el-button type="primary" icon="plus" plain></el-button>
+                                        <el-button type="primary" icon="plus" plain v-auth="'redis:data:save'"></el-button>
                                     </template>
                                     <el-tag @click="onAddData('string')" :color="getTypeColor('string')"
                                         style="cursor: pointer">string</el-tag>
@@ -84,7 +84,7 @@
                                 <el-button @click="getValue(scope.row)" type="success" icon="search" plain
                                     size="small">查看
                                 </el-button>
-                                <el-button @click="del(scope.row.key)" type="danger" icon="delete" plain size="small">删除
+                                <el-button v-auth="'redis:data:del'" @click="del(scope.row.key)" type="danger" icon="delete" plain size="small">删除
                                 </el-button>
                             </template>
                         </el-table-column>
@@ -115,16 +115,17 @@
 
 <script lang="ts" setup>
 import { redisApi } from './api';
-import { toRefs, reactive, onMounted } from 'vue';
+import { defineAsyncComponent, toRefs, reactive, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import HashValue from './HashValue.vue';
-import StringValue from './StringValue.vue';
-import SetValue from './SetValue.vue';
-import ListValue from './ListValue.vue';
 import { isTrue, notBlank, notNull } from '@/common/assert';
 import { TagTreeNode } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
 
+const HashValue = defineAsyncComponent(() => import('./HashValue.vue'));
+const StringValue = defineAsyncComponent(() => import('./StringValue.vue'));
+const SetValue = defineAsyncComponent(() => import('./SetValue.vue'));
+const ListValue = defineAsyncComponent(() => import('./ListValue.vue'));
+
 /**
  * 树节点类型
  */
diff --git a/mayfly_go_web/src/views/ops/redis/HashValue.vue b/mayfly_go_web/src/views/ops/redis/HashValue.vue
index f3253e24..e82ae9e9 100644
--- a/mayfly_go_web/src/views/ops/redis/HashValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/HashValue.vue
@@ -49,7 +49,7 @@
                     <template #default="scope">
                         <el-button v-if="operationType == 2" type="success" @click="hset(scope.row)" icon="check"
                             size="small" plain></el-button>
-                        <el-button type="danger" @click="hdel(scope.row.field, scope.$index)" icon="delete" size="small"
+                        <el-button v-auth="'redis:data:del'" type="danger" @click="hdel(scope.row.field, scope.$index)" icon="delete" size="small"
                             plain></el-button>
                     </template>
                 </el-table-column>
diff --git a/mayfly_go_web/src/views/ops/redis/RedisList.vue b/mayfly_go_web/src/views/ops/redis/RedisList.vue
index a059911e..cf20da02 100644
--- a/mayfly_go_web/src/views/ops/redis/RedisList.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisList.vue
@@ -160,7 +160,7 @@ import Info from './Info.vue';
 import { redisApi } from './api';
 import { toRefs, reactive, onMounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { tagApi } from '../tag/api.ts';
+import { tagApi } from '../tag/api';
 import RedisEdit from './RedisEdit.vue';
 import { dateFormat } from '@/common/utils/date';
 import TagInfo from '../component/TagInfo.vue';
diff --git a/mayfly_go_web/src/views/ops/redis/SetValue.vue b/mayfly_go_web/src/views/ops/redis/SetValue.vue
index fdc885ae..5077c6f8 100644
--- a/mayfly_go_web/src/views/ops/redis/SetValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/SetValue.vue
@@ -21,7 +21,7 @@
                 </el-table-column>
                 <el-table-column label="操作" width="90">
                     <template #default="scope">
-                        <el-button type="danger" @click="value.splice(scope.$index, 1)" icon="delete" size="small"
+                        <el-button v-auth="'redis:data:del'" type="danger" @click="value.splice(scope.$index, 1)" icon="delete" size="small"
                             plain>删除</el-button>
                     </template>
                 </el-table-column>
diff --git a/mayfly_go_web/src/views/personal/index.vue b/mayfly_go_web/src/views/personal/index.vue
index 375910c7..33f7ec95 100644
--- a/mayfly_go_web/src/views/personal/index.vue
+++ b/mayfly_go_web/src/views/personal/index.vue
@@ -7,20 +7,20 @@
                     <div class="personal-user">
                         <div class="personal-user-left">
                             <el-upload class="h100 personal-user-left-upload" action="" multiple :limit="1">
-                                <img :src="getUserInfos.photo" />
+                                <img :src="userInfo.photo" />
                             </el-upload>
                         </div>
                         <div class="personal-user-right">
                             <el-row>
                                 <el-col :span="24" class="personal-title mb18">{{ currentTime }}，{{
-                                        getUserInfos.name
+                                        userInfo.name
                                 }}，生活变的再糟糕，也不妨碍我变得更好！
                                 </el-col>
                                 <el-col :span="24">
                                     <el-row>
                                         <el-col :xs="24" :sm="8" class="personal-item mb6">
                                             <div class="personal-item-label">用户名：</div>
-                                            <div class="personal-item-value">{{ getUserInfos.username }}</div>
+                                            <div class="personal-item-value">{{ userInfo.username }}</div>
                                         </el-col>
                                         <el-col :xs="24" :sm="16" class="personal-item mb6">
                                             <div class="personal-item-label">角色：</div>
@@ -32,12 +32,12 @@
                                     <el-row>
                                         <el-col :xs="24" :sm="8" class="personal-item mb6">
                                             <div class="personal-item-label">上次登录IP：</div>
-                                            <div class="personal-item-value">{{ getUserInfos.lastLoginIp }}</div>
+                                            <div class="personal-item-value">{{ userInfo.lastLoginIp }}</div>
                                         </el-col>
                                         <el-col :xs="24" :sm="16" class="personal-item mb6">
                                             <div class="personal-item-label">上次登录时间：</div>
                                             <div class="personal-item-value">{{
-                                                    dateFormat(getUserInfos.lastLoginTime)
+                                                    dateFormat(userInfo.lastLoginTime)
                                             }}</div>
                                         </el-col>
                                     </el-row>
@@ -178,13 +178,13 @@
 <script lang="ts" setup>
 import { toRefs, reactive, computed, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
-import { formatAxis } from '@/common/utils/formatTime.ts';
-import { useStore } from '@/store/index.ts';
+import { formatAxis } from '@/common/utils/format';
 import { personApi } from './api';
 import { dateFormat } from '@/common/utils/date';
+import { storeToRefs } from 'pinia';
+import { useUserInfo } from '@/store/userInfo';
 
-const store = useStore();
-
+const { userInfo } = storeToRefs(useUserInfo());
 const state = reactive({
     accountInfo: {
         roles: [],
@@ -217,11 +217,6 @@ const currentTime = computed(() => {
     return formatAxis(new Date());
 });
 
-// 获取用户信息 vuex
-const getUserInfos = computed(() => {
-    return store.state.userInfos.userInfos;
-});
-
 const showMsgs = () => {
     state.msgDialog.visible = true;
 };
diff --git a/mayfly_go_web/src/views/system/resource/ResourceEdit.vue b/mayfly_go_web/src/views/system/resource/ResourceEdit.vue
index 0a085d3c..2c737ea6 100644
--- a/mayfly_go_web/src/views/system/resource/ResourceEdit.vue
+++ b/mayfly_go_web/src/views/system/resource/ResourceEdit.vue
@@ -1,84 +1,83 @@
 <template>
-    <div class="menu-dialog">
-        <el-dialog :title="title" :destroy-on-close="true" v-model="dialogVisible" width="769px">
+    <div class="system-menu-dialog-container layout-pd">
+        <el-dialog :title="title" :destroy-on-close="true" v-model="dialogVisible" width="800px">
             <el-form :model="form" :inline="true" ref="menuForm" :rules="rules" label-width="95px">
-                <el-row :gutter="10">
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item prop="type" label="类型" required>
-                            <el-select v-model="form.type" :disabled="typeDisabled" placeholder="请选择">
-                                <el-option v-for="item in enums.ResourceTypeEnum as any" :key="item.value" :label="item.label"
-                                    :value="item.value">
+                <el-row :gutter="35">
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+                        <el-form-item class="w100" prop="type" label="类型" required>
+                            <el-select class="w100" v-model="form.type" :disabled="typeDisabled" placeholder="请选择">
+                                <el-option v-for="item in enums.ResourceTypeEnum as any" :key="item.value"
+                                    :label="item.label" :value="item.value">
                                 </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item prop="name" label="名称" required>
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+                        <el-form-item class="w100" prop="name" label="名称" required>
                             <el-input v-model.trim="form.name" placeholder="资源名[菜单名]" auto-complete="off"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item prop="code" label="path|code">
-                            <el-input v-model.trim="form.code" placeholder="菜单不带/自动拼接父路径"></el-input>
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+                        <el-form-item class="w100" prop="code" label="path|code">
+                            <el-input v-model.trim="form.code" placeholder="菜单不以'/'开头则自动拼接父菜单路径"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item label="序号" prop="weight" required>
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+                        <el-form-item class="w100" label="序号" prop="weight" required>
                             <el-input v-model.trim="form.weight" type="number" placeholder="请输入序号"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue" label="图标">
-                            <icon-selector v-model="form.meta.icon" type="ele" />
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
+                        <el-form-item class="w100" label="图标">
+                            <icon-selector v-model="form.meta.icon" />
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="路由名">
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
+                        <el-form-item class="w100" prop="code" label="路由名">
                             <el-input v-model.trim="form.meta.routeName" placeholder="请输入路由名称"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="组件">
-                            <el-input v-model.trim="form.meta.component" placeholder="请输入组件名"></el-input>
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
+                        <el-form-item class="w100" prop="code" label="组件路径">
+                            <el-input v-model.trim="form.meta.component" placeholder="请输入组件路径"></el-input>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否缓存">
-                            <el-select v-model="form.meta.isKeepAlive" placeholder="请选择" width="w100">
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
+                        <el-form-item class="w100" prop="code" label="是否缓存">
+                            <el-select v-model="form.meta.isKeepAlive" placeholder="请选择" class="w100">
                                 <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
                                     :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否隐藏">
-                            <el-select v-model="form.meta.isHide" placeholder="请选择" width="w100">
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
+                        <el-form-item class="w100" prop="code" label="是否隐藏">
+                            <el-select v-model="form.meta.isHide" placeholder="请选择" class="w100">
                                 <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
                                     :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="tag不可删除">
-                            <el-select v-model="form.meta.isAffix" placeholder="请选择" width="w100">
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
+                        <el-form-item class="w100" prop="code" label="tag不可删除">
+                            <el-select v-model="form.meta.isAffix" placeholder="请选择" class="w100">
                                 <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
                                     :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue" prop="code" label="是否iframe">
-                            <el-select @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择"
-                                width="w100">
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="form.type === menuTypeValue">
+                        <el-form-item class="w100" prop="code" label="是否iframe">
+                            <el-select class="w100" @change="changeIsIframe" v-model="form.meta.isIframe" placeholder="请选择">
                                 <el-option v-for="item in trueFalseOption" :key="item.value" :label="item.label"
                                     :value="item.value"> </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>
-                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb10">
-                        <el-form-item v-if="form.type === menuTypeValue && form.meta.isIframe" prop="code"
-                            label="iframe地址" width="w100">
-                            <el-input v-model.trim="form.meta.link" placeholder="请输入iframe url"></el-input>
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"
+                        v-if="form.type === menuTypeValue && form.meta.isIframe">
+                        <el-form-item prop="code" label="iframe地址" class="w100">
+                            <el-input v-model.trim="form.meta.link" placeholder="请输入iframe url（http://xxx.com）"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
@@ -217,7 +216,9 @@ watch(props, (newValue: any) => {
 // 改变iframe字段，如果为是，则设置默认的组件
 const changeIsIframe = (value: boolean) => {
     if (value) {
-        state.form.meta.component = 'RouterParent';
+        state.form.meta.component = 'layout/routerView/parent';
+    } else {
+        state.form.meta.component = '';
     }
 };
 
@@ -267,6 +268,8 @@ const parseMenuMeta = (meta: any) => {
     }
     if (meta.link) {
         metaForm.link = meta.link;
+    } else {
+        delete metaForm['link']
     }
     if (meta.redirect) {
         metaForm.redirect = meta.redirect;
diff --git a/mayfly_go_web/src/views/system/resource/ResourceList.vue b/mayfly_go_web/src/views/system/resource/ResourceList.vue
index c817539b..80251212 100644
--- a/mayfly_go_web/src/views/system/resource/ResourceList.vue
+++ b/mayfly_go_web/src/views/system/resource/ResourceList.vue
@@ -65,7 +65,7 @@
                 <el-descriptions-item v-if="infoDialog.data.type == menuTypeValue" label="路由名">
                     {{ infoDialog.data.meta.routeName }}
                 </el-descriptions-item>
-                <el-descriptions-item v-if="infoDialog.data.type == menuTypeValue" label="组件">
+                <el-descriptions-item v-if="infoDialog.data.type == menuTypeValue" label="组件路径">
                     {{ infoDialog.data.meta.component }}
                 </el-descriptions-item>
                 <el-descriptions-item v-if="infoDialog.data.type == menuTypeValue" label="是否缓存">
diff --git a/mayfly_go_web/tsconfig.json b/mayfly_go_web/tsconfig.json
index 1644536f..caecffba 100644
--- a/mayfly_go_web/tsconfig.json
+++ b/mayfly_go_web/tsconfig.json
@@ -77,5 +77,7 @@
 		 // 允许编译javascript文件
 		 "allowJs": true,
 		"sourceMap": true,
-	}
+	},
+    "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.tsx", "src/**/*.d.ts", "*.d.ts"], // **Represents any directory, and * represents any file. Indicates that all files in the src directory will be compiled
+	"exclude": ["node_modules", "dist"] // Indicates the file directory that does not need to be compiled
 }
diff --git a/mayfly_go_web/vite.config.ts b/mayfly_go_web/vite.config.ts
index eaffab96..76125a44 100644
--- a/mayfly_go_web/vite.config.ts
+++ b/mayfly_go_web/vite.config.ts
@@ -1,63 +1,77 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import type { UserConfig } from 'vite';
-import { loadEnv } from './src/common/utils/viteBuild.ts';
+import { loadEnv } from './src/common/utils/viteBuild';
 
 const pathResolve = (dir: string): any => {
-	return resolve(__dirname, '.', dir);
+    return resolve(__dirname, '.', dir);
 };
 
 const { VITE_PORT, VITE_OPEN, VITE_PUBLIC_PATH } = loadEnv();
 
 const alias: Record<string, string> = {
-	'@': pathResolve('src/'),
+    '@': pathResolve('src/'),
 };
 
 const viteConfig: UserConfig = {
-	plugins: [vue()],
-	root: process.cwd(),
-	resolve: { alias },
-	base: process.env.NODE_ENV === 'production' ? VITE_PUBLIC_PATH : './',
-	optimizeDeps: {
-		include: ['element-plus/es/locale/lang/zh-cn'],
-	},
-	server: {
-		host: '0.0.0.0',
-		port: VITE_PORT,
-		open: VITE_OPEN,
-		proxy: {
-			'/api': {
-				target: 'http://localhost:8888',
-				ws: true,
-				changeOrigin: true,
-			},
-		},
-	},
-	build: {
-		outDir: 'dist',
-		minify: 'esbuild',
-		sourcemap: false,
-        chunkSizeWarningLimit: 1500
-	},
-	define: {
-		__VUE_I18N_LEGACY_API__: JSON.stringify(false),
-		__VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
-		__INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
-	},
+    plugins: [vue()],
+    root: process.cwd(),
+    resolve: {
+        alias,
+    },
+    base: process.env.NODE_ENV === 'production' ? VITE_PUBLIC_PATH : './',
+    optimizeDeps: {
+        include: ['element-plus/es/locale/lang/zh-cn'],
+    },
+    server: {
+        host: '0.0.0.0',
+        port: VITE_PORT,
+        open: VITE_OPEN,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:8888',
+                ws: true,
+                changeOrigin: true,
+            },
+        },
+    },
+    build: {
+        outDir: 'dist',
+        minify: 'esbuild',
+        sourcemap: false,
+        chunkSizeWarningLimit: 1500,
+        rollupOptions: {
+            output: {
+                entryFileNames: `assets/[hash].[name].js`,
+                chunkFileNames: `assets/[hash].[name].js`,
+                assetFileNames: `assets/[name].[hash].[ext]`,
+                compact: true,
+                manualChunks: {
+                    vue: ['vue', 'vue-router', 'pinia'],
+                    echarts: ['echarts'],
+                },
+            },
+        },
+    },
+    define: {
+        __VUE_I18N_LEGACY_API__: JSON.stringify(false),
+        __VUE_I18N_FULL_INSTALL__: JSON.stringify(false),
+        __INTLIFY_PROD_DEVTOOLS__: JSON.stringify(false),
+    },
     css: {
         postcss: {
-          plugins: [
-            {
-              postcssPlugin: 'internal:charset-removal',
-              AtRule: {
-                charset: (atRule) => {
-                  if (atRule.name === 'charset') {
-                    atRule.remove();
-                  }
+            plugins: [
+                {
+                    postcssPlugin: 'internal:charset-removal',
+                    AtRule: {
+                        charset: (atRule) => {
+                            if (atRule.name === 'charset') {
+                                atRule.remove();
+                            }
+                        }
+                    }
                 }
-              }
-            }
-          ]
+            ]
         }
     },
 };
diff --git a/mayfly_go_web/yarn.lock b/mayfly_go_web/yarn.lock
index f25af2c5..f5549d80 100644
--- a/mayfly_go_web/yarn.lock
+++ b/mayfly_go_web/yarn.lock
@@ -333,10 +333,10 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
-"@vitejs/plugin-vue@^2.3.3":
-  version "2.3.3"
-  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz"
-  integrity sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==
+"@vitejs/plugin-vue@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz#93815beffd23db46288c787352a8ea31a0c03e5e"
+  integrity sha512-e0X4jErIxAB5oLtDqbHvHpJe/uWNkdpYV83AOG2xo2tEVSzCzewgJMtREZM30wXnM5ls90hxiOtAuVU6H5JgbA==
 
 "@vue/compiler-core@3.2.39":
   version "3.2.39"
@@ -422,16 +422,16 @@
     "@vue/compiler-dom" "3.2.47"
     "@vue/shared" "3.2.47"
 
-"@vue/devtools-api@^6.0.0-beta.11":
-  version "6.0.0-beta.20.1"
-  resolved "https://registry.npmmirror.com/@vue/devtools-api/download/@vue/devtools-api-6.0.0-beta.20.1.tgz"
-  integrity sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q==
-
 "@vue/devtools-api@^6.4.5":
   version "6.4.5"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz"
   integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
 
+"@vue/devtools-api@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/reactivity-transform@3.2.39":
   version "3.2.39"
   resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz"
@@ -792,10 +792,10 @@ echarts@^5.4.0:
     tslib "2.3.0"
     zrender "5.4.0"
 
-element-plus@^2.2.33:
-  version "2.2.33"
-  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.33.tgz#30fe0db427dba42eb60a0ad8177f2d5c90435a92"
-  integrity sha512-E/PmMnv4+4I9Ue0ZDfx2gGgGj4iBlTCWcES3o4jxfYjayFlcQO3UvElJzhaJZ8vDm9yfNN7t2w/xYOhsSYCNNg==
+element-plus@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.0.tgz#c7492fe7b604eef60163d4e900ab074ae22bc553"
+  integrity sha512-3s3JO4+LHLi61tFwF2emIHx6nxwKKdj5YWcj3GUBoXKhbuRjhq6xqaxWpBlPk7jySr/8Eci5++T2THbvrpGn7A==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.0.6"
@@ -1549,6 +1549,14 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz?cache=0&sync_timestamp=1621648246651&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpicomatch%2Fdownload%2Fpicomatch-2.3.0.tgz"
   integrity sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI=
 
+pinia@^2.0.33:
+  version "2.0.33"
+  resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.33.tgz#b70065be697874d5824e9792f59bd5d87ddb5e7d"
+  integrity sha512-HOj1yVV2itw6rNIrR2f7+MirGNxhORjrULL8GWgRwXsGSvEqIQ+SE0MYt6cwtpegzCda3i+rVTZM+AM7CG+kRg==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi "*"
+
 postcss@^8.1.10:
   version "8.4.5"
   resolved "https://registry.npmmirror.com/postcss/download/postcss-8.4.5.tgz"
@@ -1895,13 +1903,6 @@ vue@^3.2.47:
     "@vue/server-renderer" "3.2.47"
     "@vue/shared" "3.2.47"
 
-vuex@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmmirror.com/vuex/download/vuex-4.0.2.tgz"
-  integrity sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.nlark.com/which/download/which-2.0.2.tgz"
diff --git a/server/go.mod b/server/go.mod
index bccfdabc..f104268b 100644
--- a/server/go.mod
+++ b/server/go.mod
@@ -18,7 +18,7 @@ require (
 	golang.org/x/crypto v0.7.0 // ssh
 	gopkg.in/yaml.v3 v3.0.1
 	// gorm
-	gorm.io/driver/mysql v1.4.5
+	gorm.io/driver/mysql v1.4.7
 	gorm.io/gorm v1.24.6
 )
 
diff --git a/server/internal/db/application/db_sql_exec.go b/server/internal/db/application/db_sql_exec.go
index 0b77b704..d09dcf65 100644
--- a/server/internal/db/application/db_sql_exec.go
+++ b/server/internal/db/application/db_sql_exec.go
@@ -88,7 +88,11 @@ func (d *dbSqlExecAppImpl) Exec(execSqlReq *DbSqlExecReq) (*DbSqlExecRes, error)
 		lowerSql := strings.ToLower(execSqlReq.Sql)
 		isSelect := strings.HasPrefix(lowerSql, "select")
 		if isSelect {
-			biz.IsTrue(strings.Contains(lowerSql, "limit"), "请完善分页信息")
+			// 如果配置为0，则不校验分页参数
+			maxCount := sysapp.GetConfigApp().GetConfig(sysentity.ConfigKeyDbQueryMaxCount).IntValue(200)
+			if maxCount != 0 {
+				biz.IsTrue(strings.Contains(lowerSql, "limit"), "请完善分页信息后执行")
+			}
 		}
 		var execErr error
 		if isSelect || strings.HasPrefix(lowerSql, "show") {
diff --git a/server/internal/redis/router/redis.go b/server/internal/redis/router/redis.go
index 60c3a4e1..a194a6fa 100644
--- a/server/internal/redis/router/redis.go
+++ b/server/internal/redis/router/redis.go
@@ -51,10 +51,14 @@ func InitRedisRouter(router *gin.RouterGroup) {
 
 		// 删除key
 		deleteKeyL := req.NewLogInfo("redis-删除key").WithSave(true)
+		deleteKeyP := req.NewPermission("redis:data:del")
 		redis.DELETE(":id/:db/key", func(c *gin.Context) {
-			req.NewCtxWithGin(c).WithLog(deleteKeyL).Handle(rs.DeleteKey)
+			req.NewCtxWithGin(c).WithLog(deleteKeyL).WithRequiredPermission(deleteKeyP).Handle(rs.DeleteKey)
 		})
 
+		// 保存数据权限
+		saveDataP := req.NewPermission("redis:data:save")
+
 		// 获取string类型值
 		redis.GET(":id/:db/string-value", func(c *gin.Context) {
 			req.NewCtxWithGin(c).Handle(rs.GetStringValue)
@@ -63,7 +67,7 @@ func InitRedisRouter(router *gin.RouterGroup) {
 		// 设置string类型值
 		setStringL := req.NewLogInfo("redis-setString").WithSave(true)
 		redis.POST(":id/:db/string-value", func(c *gin.Context) {
-			req.NewCtxWithGin(c).WithLog(setStringL).Handle(rs.SetStringValue)
+			req.NewCtxWithGin(c).WithLog(setStringL).WithRequiredPermission(saveDataP).Handle(rs.SetStringValue)
 		})
 
 		// hscan
@@ -77,13 +81,13 @@ func InitRedisRouter(router *gin.RouterGroup) {
 
 		hdelL := req.NewLogInfo("redis-hdel").WithSave(true)
 		redis.DELETE(":id/:db/hdel", func(c *gin.Context) {
-			req.NewCtxWithGin(c).WithLog(hdelL).Handle(rs.Hdel)
+			req.NewCtxWithGin(c).WithLog(hdelL).WithRequiredPermission(deleteKeyP).Handle(rs.Hdel)
 		})
 
 		// 设置hash类型值
 		setHashValueL := req.NewLogInfo("redis-setHashValue").WithSave(true)
 		redis.POST(":id/:db/hash-value", func(c *gin.Context) {
-			req.NewCtxWithGin(c).WithLog(setHashValueL).Handle(rs.SetHashValue)
+			req.NewCtxWithGin(c).WithLog(setHashValueL).WithRequiredPermission(saveDataP).Handle(rs.SetHashValue)
 		})
 
 		// 获取set类型值
@@ -93,7 +97,7 @@ func InitRedisRouter(router *gin.RouterGroup) {
 
 		// 设置set类型值
 		redis.POST(":id/:db/set-value", func(c *gin.Context) {
-			req.NewCtxWithGin(c).Handle(rs.SetSetValue)
+			req.NewCtxWithGin(c).WithRequiredPermission(saveDataP).Handle(rs.SetSetValue)
 		})
 
 		// 获取list类型值
diff --git a/server/mayfly-go.sql b/server/mayfly-go.sql
index 38162425..86606272 100644
--- a/server/mayfly-go.sql
+++ b/server/mayfly-go.sql
@@ -440,82 +440,84 @@ CREATE TABLE `t_sys_resource` (
 -- Records of t_sys_resource
 -- ----------------------------
 BEGIN;
-INSERT INTO `t_sys_resource` VALUES (1, 0, 1, 1, '首页', '/home', 1, '{\"component\":\"Home\",\"icon\":\"HomeFilled\",\"isAffix\":true,\"isKeepAlive\":true,\"routeName\":\"Home\"}', 1, 'admin', 1, 'admin', '2021-05-25 16:44:41', '2021-05-27 09:12:56');
-INSERT INTO `t_sys_resource` VALUES (2, 0, 1, 1, '机器管理', '/machine', 4, '{\"icon\":\"Monitor\",\"isKeepAlive\":true,\"redirect\":\"machine/list\",\"routeName\":\"Machine\"}', 1, 'admin', 1, 'admin', '2021-05-25 16:48:16', '2022-10-06 14:58:49');
-INSERT INTO `t_sys_resource` VALUES (3, 2, 1, 1, '机器列表', 'machines', 2, '{\"component\":\"MachineList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"MachineList\"}', 2, 'admin', 1, 'admin', '2021-05-25 16:50:04', '2021-06-30 16:20:08');
-INSERT INTO `t_sys_resource` VALUES (4, 0, 1, 1, '系统管理', '/sys', 8, '{\"icon\":\"Setting\",\"isKeepAlive\":true,\"redirect\":\"/sys/resources\",\"routeName\":\"sys\"}', 1, 'admin', 1, 'admin', '2021-05-26 15:20:20', '2022-10-06 14:59:53');
-INSERT INTO `t_sys_resource` VALUES (5, 4, 1, 1, '资源管理', 'resources', 3, '{\"component\":\"ResourceList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"ResourceList\"}', 1, 'admin', 1, 'admin', '2021-05-26 15:23:07', '2021-06-08 11:27:55');
-INSERT INTO `t_sys_resource` VALUES (11, 4, 1, 1, '角色管理', 'roles', 2, '{\"component\":\"RoleList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"RoleList\"}', 1, 'admin', 1, 'admin', '2021-05-27 11:15:35', '2021-06-03 09:59:41');
-INSERT INTO `t_sys_resource` VALUES (12, 3, 2, 1, '机器终端按钮', 'machine:terminal', 4, '', 1, 'admin', 1, 'admin', '2021-05-28 14:06:02', '2021-05-31 17:47:59');
-INSERT INTO `t_sys_resource` VALUES (14, 4, 1, 1, '账号管理', 'accounts', 1, '{\"component\":\"AccountList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"AccountList\"}', 1, 'admin', 1, 'admin', '2021-05-28 14:56:25', '2021-06-03 09:39:22');
-INSERT INTO `t_sys_resource` VALUES (15, 3, 2, 1, '文件管理按钮', 'machine:file', 5, NULL, 1, 'admin', 1, 'admin', '2021-05-31 17:44:37', '2021-05-31 17:48:07');
-INSERT INTO `t_sys_resource` VALUES (16, 3, 2, 1, '机器添加按钮', 'machine:add', 1, NULL, 1, 'admin', 1, 'admin', '2021-05-31 17:46:11', '2021-05-31 19:34:15');
-INSERT INTO `t_sys_resource` VALUES (17, 3, 2, 1, '机器编辑按钮', 'machine:update', 2, NULL, 1, 'admin', 1, 'admin', '2021-05-31 17:46:23', '2021-05-31 19:34:18');
-INSERT INTO `t_sys_resource` VALUES (18, 3, 2, 1, '机器删除按钮', 'machine:del', 3, NULL, 1, 'admin', 1, 'admin', '2021-05-31 17:46:36', '2021-05-31 19:34:17');
-INSERT INTO `t_sys_resource` VALUES (19, 14, 2, 1, '角色分配按钮', 'account:saveRoles', 1, NULL, 1, 'admin', 1, 'admin', '2021-05-31 17:50:51', '2021-05-31 19:19:30');
-INSERT INTO `t_sys_resource` VALUES (20, 11, 2, 1, '分配菜单&权限按钮', 'role:saveResources', 1, NULL, 1, 'admin', 1, 'admin', '2021-05-31 17:51:41', '2021-05-31 19:33:37');
-INSERT INTO `t_sys_resource` VALUES (21, 14, 2, 1, '账号删除按钮', 'account:del', 2, 'null', 1, 'admin', 1, 'admin', '2021-05-31 18:02:01', '2021-06-10 17:12:17');
-INSERT INTO `t_sys_resource` VALUES (22, 11, 2, 1, '角色删除按钮', 'role:del', 2, NULL, 1, 'admin', 1, 'admin', '2021-05-31 18:02:29', '2021-05-31 19:33:38');
-INSERT INTO `t_sys_resource` VALUES (23, 11, 2, 1, '角色新增按钮', 'role:add', 3, NULL, 1, 'admin', 1, 'admin', '2021-05-31 18:02:44', '2021-05-31 19:33:39');
-INSERT INTO `t_sys_resource` VALUES (24, 11, 2, 1, '角色编辑按钮', 'role:update', 4, NULL, 1, 'admin', 1, 'admin', '2021-05-31 18:02:57', '2021-05-31 19:33:40');
-INSERT INTO `t_sys_resource` VALUES (25, 5, 2, 1, '资源新增按钮', 'resource:add', 1, NULL, 1, 'admin', 1, 'admin', '2021-05-31 18:03:33', '2021-05-31 19:31:47');
-INSERT INTO `t_sys_resource` VALUES (26, 5, 2, 1, '资源删除按钮', 'resource:delete', 2, NULL, 1, 'admin', 1, 'admin', '2021-05-31 18:03:47', '2021-05-31 19:29:40');
-INSERT INTO `t_sys_resource` VALUES (27, 5, 2, 1, '资源编辑按钮', 'resource:update', 3, NULL, 1, 'admin', 1, 'admin', '2021-05-31 18:04:03', '2021-05-31 19:29:40');
-INSERT INTO `t_sys_resource` VALUES (28, 5, 2, 1, '资源禁用启用按钮', 'resource:changeStatus', 4, NULL, 1, 'admin', 1, 'admin', '2021-05-31 18:04:33', '2021-05-31 18:04:33');
-INSERT INTO `t_sys_resource` VALUES (29, 14, 2, 1, '账号添加按钮', 'account:add', 3, NULL, 1, 'admin', 1, 'admin', '2021-05-31 19:23:42', '2021-05-31 19:23:42');
-INSERT INTO `t_sys_resource` VALUES (30, 14, 2, 1, '账号编辑修改按钮', 'account:update', 4, NULL, 1, 'admin', 1, 'admin', '2021-05-31 19:23:58', '2021-05-31 19:23:58');
-INSERT INTO `t_sys_resource` VALUES (31, 14, 2, 1, '账号管理基本权限', 'account', 0, 'null', 1, 'admin', 1, 'admin', '2021-05-31 21:25:06', '2021-06-22 11:20:34');
-INSERT INTO `t_sys_resource` VALUES (32, 5, 2, 1, '资源管理基本权限', 'resource', 0, NULL, 1, 'admin', 1, 'admin', '2021-05-31 21:25:25', '2021-05-31 21:25:25');
-INSERT INTO `t_sys_resource` VALUES (33, 11, 2, 1, '角色管理基本权限', 'role', 0, NULL, 1, 'admin', 1, 'admin', '2021-05-31 21:25:40', '2021-05-31 21:25:40');
-INSERT INTO `t_sys_resource` VALUES (34, 14, 2, 1, '账号启用禁用按钮', 'account:changeStatus', 5, NULL, 1, 'admin', 1, 'admin', '2021-05-31 21:29:48', '2021-05-31 21:29:48');
-INSERT INTO `t_sys_resource` VALUES (36, 0, 1, 1, 'DBMS', '/dbms', 5, '{\"icon\":\"Grid\",\"isKeepAlive\":true,\"routeName\":\"DBMS\"}', 1, 'admin', 1, 'admin', '2021-06-01 14:01:33', '2022-10-06 15:00:40');
-INSERT INTO `t_sys_resource` VALUES (37, 3, 2, 1, '添加文件配置', 'machine:addFile', 6, 'null', 1, 'admin', 1, 'admin', '2021-06-01 19:54:23', '2021-06-01 19:54:23');
-INSERT INTO `t_sys_resource` VALUES (38, 36, 1, 1, '数据操作', 'sql-exec', 1, '{\"component\":\"SqlExec\",\"icon\":\"Search\",\"isKeepAlive\":true,\"routeName\":\"SqlExec\"}', 1, 'admin', 1, 'admin', '2021-06-03 09:09:29', '2021-11-08 09:59:26');
-INSERT INTO `t_sys_resource` VALUES (39, 0, 1, 1, '个人中心', '/personal', 2, '{\"component\":\"Personal\",\"icon\":\"UserFilled\",\"isHide\":true,\"isKeepAlive\":true,\"routeName\":\"Personal\"}', 1, 'admin', 1, 'admin', '2021-06-03 14:25:35', '2021-09-10 09:18:46');
-INSERT INTO `t_sys_resource` VALUES (40, 3, 2, 1, '文件管理-新增按钮', 'machine:file:add', 7, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:06:26', '2021-06-08 11:12:28');
-INSERT INTO `t_sys_resource` VALUES (41, 3, 2, 1, '文件管理-删除按钮', 'machine:file:del', 8, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:06:49', '2021-06-08 11:06:49');
-INSERT INTO `t_sys_resource` VALUES (42, 3, 2, 1, '文件管理-写入or下载文件权限', 'machine:file:write', 9, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:07:27', '2021-06-08 11:07:27');
-INSERT INTO `t_sys_resource` VALUES (43, 3, 2, 1, '文件管理-文件上传按钮', 'machine:file:upload', 10, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:07:42', '2021-06-08 11:07:42');
-INSERT INTO `t_sys_resource` VALUES (44, 3, 2, 1, '文件管理-删除文件按钮', 'machine:file:rm', 11, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:08:12', '2021-06-08 11:08:12');
-INSERT INTO `t_sys_resource` VALUES (45, 3, 2, 1, '脚本管理-保存脚本按钮', 'machine:script:save', 12, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:09:01', '2021-06-08 11:09:01');
-INSERT INTO `t_sys_resource` VALUES (46, 3, 2, 1, '脚本管理-删除按钮', 'machine:script:del', 13, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:09:27', '2021-06-08 11:09:27');
-INSERT INTO `t_sys_resource` VALUES (47, 3, 2, 1, '脚本管理-执行按钮', 'machine:script:run', 14, 'null', 1, 'admin', 1, 'admin', '2021-06-08 11:09:50', '2021-06-08 11:09:50');
-INSERT INTO `t_sys_resource` VALUES (49, 36, 1, 1, '数据库管理', 'dbs', 2, '{\"component\":\"DbList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"DbList\"}', 1, 'admin', 1, 'admin', '2021-07-07 15:13:55', '2021-07-07 15:13:55');
-INSERT INTO `t_sys_resource` VALUES (54, 49, 2, 1, '数据库保存', 'db:save', 1, 'null', 1, 'admin', 1, 'admin', '2021-07-08 17:30:36', '2021-07-08 17:31:05');
-INSERT INTO `t_sys_resource` VALUES (55, 49, 2, 1, '数据库删除', 'db:del', 2, 'null', 1, 'admin', 1, 'admin', '2021-07-08 17:30:48', '2021-07-08 17:30:48');
-INSERT INTO `t_sys_resource` VALUES (57, 3, 2, 1, '基本权限', 'machine', 0, 'null', 1, 'admin', 1, 'admin', '2021-07-09 10:48:02', '2021-07-09 10:48:02');
-INSERT INTO `t_sys_resource` VALUES (58, 49, 2, 1, '基本权限', 'db', 0, 'null', 1, 'admin', 1, 'admin', '2021-07-09 10:48:22', '2021-07-09 10:48:22');
-INSERT INTO `t_sys_resource` VALUES (59, 38, 2, 1, '基本权限', 'db:exec', 1, 'null', 1, 'admin', 1, 'admin', '2021-07-09 10:50:13', '2021-07-09 10:50:13');
-INSERT INTO `t_sys_resource` VALUES (60, 0, 1, 1, 'Redis', '/redis', 6, '{\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"RDS\"}', 1, 'admin', 1, 'admin', '2021-07-19 20:15:41', '2022-10-06 15:01:29');
-INSERT INTO `t_sys_resource` VALUES (61, 60, 1, 1, '数据操作', 'data-operation', 1, '{\"component\":\"DataOperation\",\"icon\":\"Search\",\"isKeepAlive\":true,\"routeName\":\"DataOperation\"}', 1, 'admin', 1, 'admin', '2021-07-19 20:17:29', '2021-07-20 10:45:28');
-INSERT INTO `t_sys_resource` VALUES (62, 61, 2, 1, '基本权限', 'redis:data', 1, 'null', 1, 'admin', 1, 'admin', '2021-07-19 20:18:54', '2021-07-19 20:18:54');
-INSERT INTO `t_sys_resource` VALUES (63, 60, 1, 1, 'redis管理', 'manage', 2, '{\"component\":\"RedisList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"RedisList\"}', 1, 'admin', 1, 'admin', '2021-07-20 10:48:04', '2021-07-20 10:48:04');
-INSERT INTO `t_sys_resource` VALUES (64, 63, 2, 1, '基本权限', 'redis:manage', 1, 'null', 1, 'admin', 1, 'admin', '2021-07-20 10:48:26', '2021-07-20 10:48:26');
-INSERT INTO `t_sys_resource` VALUES (71, 61, 2, 1, '数据保存', 'redis:data:save', 6, 'null', 1, 'admin', 1, 'admin', '2021-08-17 11:20:37', '2021-08-17 11:20:37');
-INSERT INTO `t_sys_resource` VALUES (72, 3, 2, 1, '终止进程', 'machine:killprocess', 6, 'null', 1, 'admin', 1, 'admin', '2021-08-17 11:20:37', '2021-08-17 11:20:37');
-INSERT INTO `t_sys_resource` VALUES (79, 0, 1, 1, 'Mongo', '/mongo', 7, '{\"icon\":\"Document\",\"isKeepAlive\":true,\"routeName\":\"Mongo\"}', 1, 'admin', 1, 'admin', '2022-05-13 14:00:41', '2022-10-06 15:01:34');
-INSERT INTO `t_sys_resource` VALUES (80, 79, 1, 1, '数据操作', 'mongo-data-operation', 1, '{\"component\":\"MongoDataOp\",\"icon\":\"Document\",\"isKeepAlive\":true,\"routeName\":\"MongoDataOp\"}', 1, 'admin', 1, 'admin', '2022-05-13 14:03:58', '2022-05-14 20:16:07');
-INSERT INTO `t_sys_resource` VALUES (81, 80, 2, 1, '基本权限', 'mongo:base', 1, 'null', 1, 'admin', 1, 'admin', '2022-05-13 14:04:16', '2022-05-13 14:04:16');
-INSERT INTO `t_sys_resource` VALUES (82, 79, 1, 1, 'Mongo管理', 'mongo-manage', 2, '{\"component\":\"MongoList\",\"icon\":\"Menu\",\"isKeepAlive\":true,\"routeName\":\"MongoList\"}', 1, 'admin', 1, 'admin', '2022-05-16 18:13:06', '2022-05-16 18:13:06');
-INSERT INTO `t_sys_resource` VALUES (83, 82, 2, 1, '基本权限', 'mongo:manage:base', 1, 'null', 1, 'admin', 1, 'admin', '2022-05-16 18:13:25', '2022-05-16 18:13:25');
-INSERT INTO `t_sys_resource` VALUES (84, 4, 1, 1, '操作日志', 'syslogs', 4, '{\"component\":\"SyslogList\",\"icon\":\"Tickets\",\"routeName\":\"SyslogList\"}', 1, 'admin', 1, 'admin', '2022-07-13 19:57:07', '2022-07-13 22:58:19');
-INSERT INTO `t_sys_resource` VALUES (85, 84, 2, 1, '操作日志基本权限', 'syslog', 1, 'null', 1, 'admin', 1, 'admin', '2022-07-13 19:57:55', '2022-07-13 19:57:55');
-INSERT INTO `t_sys_resource` VALUES (87, 4, 1, 1, '系统配置', 'configs', 5, '{\"component\":\"ConfigList\",\"icon\":\"Setting\",\"isKeepAlive\":true,\"routeName\":\"ConfigList\"}', 1, 'admin', 1, 'admin', '2022-08-25 22:18:55', '2022-08-25 22:19:18');
-INSERT INTO `t_sys_resource` VALUES (88, 87, 2, 1, '基本权限', 'config:base', 1, 'null', 1, 'admin', 1, 'admin', '2022-08-25 22:19:35', '2022-08-25 22:19:35');
-INSERT INTO `t_sys_resource` VALUES (93, 0, 1, 1, '标签管理', '/tag', 3, '{\"icon\":\"CollectionTag\",\"isKeepAlive\":true,\"routeName\":\"Tag\"}', 1, 'admin', 1, 'admin', '2022-10-24 15:18:40', '2022-10-24 15:24:29');
-INSERT INTO `t_sys_resource` VALUES (94, 93, 1, 1, '标签树', 'tag-trees', 1, '{\"component\":\"TagTreeList\",\"icon\":\"CollectionTag\",\"isKeepAlive\":true,\"routeName\":\"TagTreeList\"}', 1, 'admin', 1, 'admin', '2022-10-24 15:19:40', '2022-10-24 15:28:07');
-INSERT INTO `t_sys_resource` VALUES (95, 93, 1, 1, '团队管理', 'teams', 2, '{\"component\":\"TeamList\",\"icon\":\"UserFilled\",\"isKeepAlive\":true,\"routeName\":\"TeamList\"}', 1, 'admin', 1, 'admin', '2022-10-24 15:20:09', '2022-10-24 15:24:01');
-INSERT INTO `t_sys_resource` VALUES (96, 94, 2, 1, '保存标签', 'tag:save', 1, 'null', 1, 'admin', 1, 'admin', '2022-10-24 15:20:40', '2022-10-26 13:58:36');
-INSERT INTO `t_sys_resource` VALUES (97, 95, 2, 1, '保存团队', 'team:save', 1, 'null', 1, 'admin', 1, 'admin', '2022-10-24 15:20:57', '2022-10-26 13:58:56');
-INSERT INTO `t_sys_resource` VALUES (98, 94, 2, 1, '删除标签', 'tag:del', 2, 'null', 1, 'admin', 1, 'admin', '2022-10-26 13:58:47', '2022-10-26 13:58:47');
-INSERT INTO `t_sys_resource` VALUES (99, 95, 2, 1, '删除团队', 'team:del', 2, 'null', 1, 'admin', 1, 'admin', '2022-10-26 13:59:06', '2022-10-26 13:59:06');
-INSERT INTO `t_sys_resource` VALUES (100, 95, 2, 1, '新增团队成员', 'team:member:save', 3, 'null', 1, 'admin', 1, 'admin', '2022-10-26 13:59:27', '2022-10-26 13:59:27');
-INSERT INTO `t_sys_resource` VALUES (101, 95, 2, 1, '移除团队成员', 'team:member:del', 4, 'null', 1, 'admin', 1, 'admin', '2022-10-26 13:59:43', '2022-10-26 13:59:43');
-INSERT INTO `t_sys_resource` VALUES (102, 95, 2, 1, '保存团队标签', 'team:tag:save', 5, 'null', 1, 'admin', 1, 'admin', '2022-10-26 13:59:57', '2022-10-26 13:59:57');
-INSERT INTO `t_sys_resource` VALUES (103, 2, 1, 1, '授权凭证', 'authcerts', 6, '{"component":"AuthCertList","icon":"Unlock","isKeepAlive":true,"routeName":"AuthCertList"}', 1, 'admin', 1, 'admin', '2023-02-23 11:36:26', '2023-02-23 14:40:23');
-INSERT INTO `t_sys_resource` VALUES (104, 103, 2, 1, '基本权限', 'authcert', 1, 'null', 1, 'admin', 1, 'admin', '2023-02-23 11:37:24', '2023-02-23 11:37:24');
-INSERT INTO `t_sys_resource` VALUES (105, 103, 2, 1, '保存权限', 'authcert:save', 2, 'null', 1, 'admin', 1, 'admin', '2023-02-23 11:37:54', '2023-02-23 11:37:54');
-INSERT INTO `t_sys_resource` VALUES (106, 103, 2, 1, '删除权限', 'authcert:del', 3, 'null', 1, 'admin', 1, 'admin', '2023-02-23 11:38:09', '2023-02-23 11:38:09');
+INSERT INTO `t_sys_resource` (id,pid,`type`,status,name,code,weight,meta,creator_id,creator,modifier_id,modifier,create_time,update_time) VALUES
+	 (1,0,1,1,'首页','/home',1,'{"component":"home/Home","icon":"HomeFilled","isAffix":true,"isKeepAlive":true,"routeName":"Home"}',1,'admin',1,'admin','2021-05-25 16:44:41','2023-03-14 14:27:07'),
+	 (2,0,1,1,'机器管理','/machine',4,'{"icon":"Monitor","isKeepAlive":true,"redirect":"machine/list","routeName":"Machine"}',1,'admin',1,'admin','2021-05-25 16:48:16','2022-10-06 14:58:49'),
+	 (3,2,1,1,'机器列表','machines',2,'{"component":"ops/machine/MachineList","icon":"Monitor","isKeepAlive":true,"routeName":"MachineList"}',2,'admin',1,'admin','2021-05-25 16:50:04','2023-03-14 14:33:15'),
+	 (4,0,1,1,'系统管理','/sys',8,'{"icon":"Setting","isKeepAlive":true,"redirect":"/sys/resources","routeName":"sys"}',1,'admin',1,'admin','2021-05-26 15:20:20','2022-10-06 14:59:53'),
+	 (5,4,1,1,'资源管理','resources',3,'{"component":"system/resource/ResourceList","icon":"Menu","isKeepAlive":true,"routeName":"ResourceList"}',1,'admin',1,'admin','2021-05-26 15:23:07','2023-03-14 15:44:34'),
+	 (11,4,1,1,'角色管理','roles',2,'{"component":"system/role/RoleList","icon":"Menu","isKeepAlive":true,"routeName":"RoleList"}',1,'admin',1,'admin','2021-05-27 11:15:35','2023-03-14 15:44:22'),
+	 (12,3,2,1,'机器终端按钮','machine:terminal',4,'',1,'admin',1,'admin','2021-05-28 14:06:02','2021-05-31 17:47:59'),
+	 (14,4,1,1,'账号管理','accounts',1,'{"component":"system/account/AccountList","icon":"Menu","isKeepAlive":true,"routeName":"AccountList"}',1,'admin',1,'admin','2021-05-28 14:56:25','2023-03-14 15:44:10'),
+	 (15,3,2,1,'文件管理按钮','machine:file',5,NULL,1,'admin',1,'admin','2021-05-31 17:44:37','2021-05-31 17:48:07'),
+	 (16,3,2,1,'机器添加按钮','machine:add',1,NULL,1,'admin',1,'admin','2021-05-31 17:46:11','2021-05-31 19:34:15'),
+	 (17,3,2,1,'机器编辑按钮','machine:update',2,NULL,1,'admin',1,'admin','2021-05-31 17:46:23','2021-05-31 19:34:18'),
+	 (18,3,2,1,'机器删除按钮','machine:del',3,NULL,1,'admin',1,'admin','2021-05-31 17:46:36','2021-05-31 19:34:17'),
+	 (19,14,2,1,'角色分配按钮','account:saveRoles',1,NULL,1,'admin',1,'admin','2021-05-31 17:50:51','2021-05-31 19:19:30'),
+	 (20,11,2,1,'分配菜单&权限按钮','role:saveResources',1,NULL,1,'admin',1,'admin','2021-05-31 17:51:41','2021-05-31 19:33:37'),
+	 (21,14,2,1,'账号删除按钮','account:del',2,'null',1,'admin',1,'admin','2021-05-31 18:02:01','2021-06-10 17:12:17'),
+	 (22,11,2,1,'角色删除按钮','role:del',2,NULL,1,'admin',1,'admin','2021-05-31 18:02:29','2021-05-31 19:33:38'),
+	 (23,11,2,1,'角色新增按钮','role:add',3,NULL,1,'admin',1,'admin','2021-05-31 18:02:44','2021-05-31 19:33:39'),
+	 (24,11,2,1,'角色编辑按钮','role:update',4,NULL,1,'admin',1,'admin','2021-05-31 18:02:57','2021-05-31 19:33:40'),
+	 (25,5,2,1,'资源新增按钮','resource:add',1,NULL,1,'admin',1,'admin','2021-05-31 18:03:33','2021-05-31 19:31:47'),
+	 (26,5,2,1,'资源删除按钮','resource:delete',2,NULL,1,'admin',1,'admin','2021-05-31 18:03:47','2021-05-31 19:29:40'),
+	 (27,5,2,1,'资源编辑按钮','resource:update',3,NULL,1,'admin',1,'admin','2021-05-31 18:04:03','2021-05-31 19:29:40'),
+	 (28,5,2,1,'资源禁用启用按钮','resource:changeStatus',4,NULL,1,'admin',1,'admin','2021-05-31 18:04:33','2021-05-31 18:04:33'),
+	 (29,14,2,1,'账号添加按钮','account:add',3,NULL,1,'admin',1,'admin','2021-05-31 19:23:42','2021-05-31 19:23:42'),
+	 (30,14,2,1,'账号编辑修改按钮','account:update',4,NULL,1,'admin',1,'admin','2021-05-31 19:23:58','2021-05-31 19:23:58'),
+	 (31,14,2,1,'账号管理基本权限','account',0,'null',1,'admin',1,'admin','2021-05-31 21:25:06','2021-06-22 11:20:34'),
+	 (32,5,2,1,'资源管理基本权限','resource',0,NULL,1,'admin',1,'admin','2021-05-31 21:25:25','2021-05-31 21:25:25'),
+	 (33,11,2,1,'角色管理基本权限','role',0,NULL,1,'admin',1,'admin','2021-05-31 21:25:40','2021-05-31 21:25:40'),
+	 (34,14,2,1,'账号启用禁用按钮','account:changeStatus',5,NULL,1,'admin',1,'admin','2021-05-31 21:29:48','2021-05-31 21:29:48'),
+	 (36,0,1,1,'DBMS','/dbms',5,'{"icon":"Grid","isKeepAlive":true,"routeName":"DBMS"}',1,'admin',1,'admin','2021-06-01 14:01:33','2022-10-06 15:00:40'),
+	 (37,3,2,1,'添加文件配置','machine:addFile',6,'null',1,'admin',1,'admin','2021-06-01 19:54:23','2021-06-01 19:54:23'),
+	 (38,36,1,1,'数据操作','sql-exec',1,'{"component":"ops/db/SqlExec","icon":"Search","isKeepAlive":true,"routeName":"SqlExec"}',1,'admin',1,'admin','2021-06-03 09:09:29','2023-03-14 15:42:29'),
+	 (39,0,1,1,'个人中心','/personal',2,'{"component":"personal/index","icon":"UserFilled","isHide":true,"isKeepAlive":true,"routeName":"Personal"}',1,'admin',1,'admin','2021-06-03 14:25:35','2023-03-14 14:28:36'),
+	 (40,3,2,1,'文件管理-新增按钮','machine:file:add',7,'null',1,'admin',1,'admin','2021-06-08 11:06:26','2021-06-08 11:12:28'),
+	 (41,3,2,1,'文件管理-删除按钮','machine:file:del',8,'null',1,'admin',1,'admin','2021-06-08 11:06:49','2021-06-08 11:06:49'),
+	 (42,3,2,1,'文件管理-写入or下载文件权限','machine:file:write',9,'null',1,'admin',1,'admin','2021-06-08 11:07:27','2021-06-08 11:07:27'),
+	 (43,3,2,1,'文件管理-文件上传按钮','machine:file:upload',10,'null',1,'admin',1,'admin','2021-06-08 11:07:42','2021-06-08 11:07:42'),
+	 (44,3,2,1,'文件管理-删除文件按钮','machine:file:rm',11,'null',1,'admin',1,'admin','2021-06-08 11:08:12','2021-06-08 11:08:12'),
+	 (45,3,2,1,'脚本管理-保存脚本按钮','machine:script:save',12,'null',1,'admin',1,'admin','2021-06-08 11:09:01','2021-06-08 11:09:01'),
+	 (46,3,2,1,'脚本管理-删除按钮','machine:script:del',13,'null',1,'admin',1,'admin','2021-06-08 11:09:27','2021-06-08 11:09:27'),
+	 (47,3,2,1,'脚本管理-执行按钮','machine:script:run',14,'null',1,'admin',1,'admin','2021-06-08 11:09:50','2021-06-08 11:09:50'),
+	 (49,36,1,1,'数据库管理','dbs',2,'{"component":"ops/db/DbList","icon":"Menu","isKeepAlive":true,"routeName":"DbList"}',1,'admin',1,'admin','2021-07-07 15:13:55','2023-03-14 14:34:01'),
+	 (54,49,2,1,'数据库保存','db:save',1,'null',1,'admin',1,'admin','2021-07-08 17:30:36','2021-07-08 17:31:05'),
+	 (55,49,2,1,'数据库删除','db:del',2,'null',1,'admin',1,'admin','2021-07-08 17:30:48','2021-07-08 17:30:48'),
+	 (57,3,2,1,'基本权限','machine',0,'null',1,'admin',1,'admin','2021-07-09 10:48:02','2021-07-09 10:48:02'),
+	 (58,49,2,1,'基本权限','db',0,'null',1,'admin',1,'admin','2021-07-09 10:48:22','2021-07-09 10:48:22'),
+	 (59,38,2,1,'基本权限','db:exec',1,'null',1,'admin',1,'admin','2021-07-09 10:50:13','2021-07-09 10:50:13'),
+	 (60,0,1,1,'Redis','/redis',6,'{"icon":"Menu","isKeepAlive":true,"routeName":"RDS"}',1,'admin',1,'admin','2021-07-19 20:15:41','2022-10-06 15:01:29'),
+	 (61,60,1,1,'数据操作','data-operation',1,'{"component":"ops/redis/DataOperation","icon":"Search","isKeepAlive":true,"routeName":"DataOperation"}',1,'admin',1,'admin','2021-07-19 20:17:29','2023-03-14 15:40:32'),
+	 (62,61,2,1,'基本权限','redis:data',1,'null',1,'admin',1,'admin','2021-07-19 20:18:54','2021-07-19 20:18:54'),
+	 (63,60,1,1,'redis管理','manage',2,'{"component":"ops/redis/RedisList","icon":"Menu","isKeepAlive":true,"routeName":"RedisList"}',1,'admin',1,'admin','2021-07-20 10:48:04','2023-03-14 15:42:56'),
+	 (64,63,2,1,'基本权限','redis:manage',1,'null',1,'admin',1,'admin','2021-07-20 10:48:26','2021-07-20 10:48:26'),
+	 (71,61,2,1,'数据保存','redis:data:save',6,'null',1,'admin',1,'admin','2021-08-17 11:20:37','2021-08-17 11:20:37'),
+	 (72,3,2,1,'终止进程','machine:killprocess',6,'null',1,'admin',1,'admin','2021-08-17 11:20:37','2021-08-17 11:20:37'),
+	 (79,0,1,1,'Mongo','/mongo',7,'{"icon":"Document","isKeepAlive":true,"routeName":"Mongo"}',1,'admin',1,'admin','2022-05-13 14:00:41','2022-10-06 15:01:34'),
+	 (80,79,1,1,'数据操作','mongo-data-operation',1,'{"component":"ops/mongo/MongoDataOp","icon":"Document","isKeepAlive":true,"routeName":"MongoDataOp"}',1,'admin',1,'admin','2022-05-13 14:03:58','2023-03-14 15:41:02'),
+	 (81,80,2,1,'基本权限','mongo:base',1,'null',1,'admin',1,'admin','2022-05-13 14:04:16','2022-05-13 14:04:16'),
+	 (82,79,1,1,'Mongo管理','mongo-manage',2,'{"component":"ops/mongo/MongoList","icon":"Menu","isKeepAlive":true,"routeName":"MongoList"}',1,'admin',1,'admin','2022-05-16 18:13:06','2023-03-14 15:41:13'),
+	 (83,82,2,1,'基本权限','mongo:manage:base',1,'null',1,'admin',1,'admin','2022-05-16 18:13:25','2022-05-16 18:13:25'),
+	 (84,4,1,1,'操作日志','syslogs',4,'{"component":"system/syslog/SyslogList","icon":"Tickets","routeName":"SyslogList"}',1,'admin',1,'admin','2022-07-13 19:57:07','2023-03-14 15:44:45'),
+	 (85,84,2,1,'操作日志基本权限','syslog',1,'null',1,'admin',1,'admin','2022-07-13 19:57:55','2022-07-13 19:57:55'),
+	 (87,4,1,1,'系统配置','configs',5,'{"component":"system/config/ConfigList","icon":"Setting","isKeepAlive":true,"routeName":"ConfigList"}',1,'admin',1,'admin','2022-08-25 22:18:55','2023-03-15 11:06:07'),
+	 (88,87,2,1,'基本权限','config:base',1,'null',1,'admin',1,'admin','2022-08-25 22:19:35','2022-08-25 22:19:35'),
+	 (93,0,1,1,'标签管理','/tag',3,'{"icon":"CollectionTag","isKeepAlive":true,"routeName":"Tag"}',1,'admin',1,'admin','2022-10-24 15:18:40','2022-10-24 15:24:29'),
+	 (94,93,1,1,'标签树','tag-trees',1,'{"component":"ops/tag/TagTreeList","icon":"CollectionTag","isKeepAlive":true,"routeName":"TagTreeList"}',1,'admin',1,'admin','2022-10-24 15:19:40','2023-03-14 14:30:51'),
+	 (95,93,1,1,'团队管理','teams',2,'{"component":"ops/tag/TeamList","icon":"UserFilled","isKeepAlive":true,"routeName":"TeamList"}',1,'admin',1,'admin','2022-10-24 15:20:09','2023-03-14 14:31:03'),
+	 (96,94,2,1,'保存标签','tag:save',1,'null',1,'admin',1,'admin','2022-10-24 15:20:40','2022-10-26 13:58:36'),
+	 (97,95,2,1,'保存团队','team:save',1,'null',1,'admin',1,'admin','2022-10-24 15:20:57','2022-10-26 13:58:56'),
+	 (98,94,2,1,'删除标签','tag:del',2,'null',1,'admin',1,'admin','2022-10-26 13:58:47','2022-10-26 13:58:47'),
+	 (99,95,2,1,'删除团队','team:del',2,'null',1,'admin',1,'admin','2022-10-26 13:59:06','2022-10-26 13:59:06'),
+	 (100,95,2,1,'新增团队成员','team:member:save',3,'null',1,'admin',1,'admin','2022-10-26 13:59:27','2022-10-26 13:59:27'),
+	 (101,95,2,1,'移除团队成员','team:member:del',4,'null',1,'admin',1,'admin','2022-10-26 13:59:43','2022-10-26 13:59:43'),
+	 (102,95,2,1,'保存团队标签','team:tag:save',5,'null',1,'admin',1,'admin','2022-10-26 13:59:57','2022-10-26 13:59:57'),
+	 (103,2,1,1,'授权凭证','authcerts',6,'{"component":"ops/machine/authcert/AuthCertList","icon":"Unlock","isKeepAlive":true,"routeName":"AuthCertList"}',1,'admin',1,'admin','2023-02-23 11:36:26','2023-03-14 14:33:28'),
+	 (104,103,2,1,'基本权限','authcert',1,'null',1,'admin',1,'admin','2023-02-23 11:37:24','2023-02-23 11:37:24'),
+	 (105,103,2,1,'保存权限','authcert:save',2,'null',1,'admin',1,'admin','2023-02-23 11:37:54','2023-02-23 11:37:54'),
+	 (106,103,2,1,'删除权限','authcert:del',3,'null',1,'admin',1,'admin','2023-02-23 11:38:09','2023-02-23 11:38:09'),
+	 (108,61,2,1,'数据删除','redis:data:del',3,'null',1,'admin',1,'admin','2023-03-14 17:20:00','2023-03-14 17:20:00');
 COMMIT;
 
 -- ----------------------------