diff --git a/.env.development b/.env.development
index 55b854a1..782874ea 100644
--- a/.env.development
+++ b/.env.development
@@ -5,11 +5,11 @@ VITE_APP_PORT=3000
 VITE_APP_BASE_API=/dev-api
 
 # 接口地址
-VITE_APP_API_URL=https://api.youlai.tech # 线上
-# VITE_APP_API_URL=http://localhost:8989    # 本地
+# VITE_APP_API_URL=https://api.youlai.tech # 线上
+VITE_APP_API_URL=http://localhost:8989    # 本地
 
 # WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
-VITE_APP_WS_ENDPOINT=
+VITE_APP_WS_ENDPOINT=ws://localhost:8989/ws
 
 # 启用 Mock 服务
 VITE_MOCK_DEV_SERVER=false
diff --git a/eslint.config.ts b/eslint.config.ts
index 319b85fe..7e3fb4c4 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -2,8 +2,7 @@
 
 import eslint from "@eslint/js";
 import pluginVue from "eslint-plugin-vue";
-import pluginTypeScript from "@typescript-eslint/eslint-plugin";
-import parserTypeScript from "@typescript-eslint/parser";
+import * as typescriptEslint from "typescript-eslint";
 import vueParser from "vue-eslint-parser";
 import globals from "globals";
 import configPrettier from "eslint-config-prettier";
@@ -52,73 +51,106 @@ const elementPlusComponents = {
 };
 
 export default [
+  // 忽略文件配置
+  {
+    ignores: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/*.min.*",
+      "**/auto-imports.d.ts",
+      "**/components.d.ts",
+    ],
+  },
+
+  // 基础 JavaScript 配置
+  eslint.configs.recommended,
+
+  // Vue 推荐配置
+  ...pluginVue.configs["flat/recommended"],
+
+  // TypeScript 推荐配置
+  ...typescriptEslint.configs.recommended,
+
   // 全局配置
   {
     // 指定要检查的文件
-    files: ["**/*.js", "**/*.ts", "**/*.vue"],
-    ignores: ["node_modules/**", "dist/**", "build/**"],
+    files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"],
     languageOptions: {
-      ecmaVersion: 2022,
+      ecmaVersion: "latest",
       sourceType: "module",
       globals: {
         ...globals.browser, // 浏览器环境全局变量
         ...globals.node, // Node.js 环境全局变量
+        ...globals.es2022, // ES2022 全局对象
         ...autoImportGlobals, // 自动导入的 API 函数
         ...elementPlusComponents, // Element Plus 组件
         // 全局类型定义，解决 TypeScript 中定义但 ESLint 不识别的问题
         PageQuery: "readonly",
         PageResult: "readonly",
         OptionType: "readonly",
-        ResponseData: "readonly",
+        ApiResponse: "readonly",
         ExcelResult: "readonly",
         TagView: "readonly",
         AppSettings: "readonly",
         __APP_INFO__: "readonly",
       },
-      parser: parserTypeScript,
-      parserOptions: {
-        sourceType: "module",
-      },
+    },
+    plugins: {
+      vue: pluginVue,
+      "@typescript-eslint": typescriptEslint.plugin,
     },
     rules: {
-      // 全局规则
-      "no-unused-vars": [
-        "error",
-        {
-          vars: "all",
-          args: "after-used",
-          ignoreRestSiblings: true,
-          argsIgnorePattern: "^_", // 忽略以下划线开头的参数
-          varsIgnorePattern: "^[A-Z][A-Z0-9_]*$", // 忽略全大写的常量/枚举
-        },
-      ],
-      // 禁用未定义变量检查，TypeScript 已处理类型检查
+      // 基础规则
+      "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+      "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+
+      // ES6+ 规则
+      "prefer-const": "error",
+      "no-var": "error",
+      "object-shorthand": "error",
+
+      // 最佳实践
+      eqeqeq: "off",
+      "no-multi-spaces": "error",
+      "no-multiple-empty-lines": ["error", { max: 1, maxBOF: 0, maxEOF: 0 }],
+
+      // 禁用与 TypeScript 冲突的规则
+      "no-unused-vars": "off",
       "no-undef": "off",
+      "no-redeclare": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
     },
   },
 
-  // 基础 JavaScript 配置
-  eslint.configs.recommended,
-
-  // Vue 配置
+  // Vue 文件特定配置
   {
     files: ["**/*.vue"],
-    plugins: {
-      vue: pluginVue,
-    },
     languageOptions: {
       parser: vueParser,
       parserOptions: {
-        ecmaVersion: 2022,
+        ecmaVersion: "latest",
         sourceType: "module",
-        parser: parserTypeScript,
+        parser: typescriptEslint.parser,
+        extraFileExtensions: [".vue"],
       },
     },
-    processor: pluginVue.processors[".vue"],
     rules: {
+      // Vue 规则
       "vue/multi-word-component-names": "off",
       "vue/no-v-html": "off",
       "vue/require-default-prop": "off",
+      "vue/require-explicit-emits": "error",
+      "vue/no-unused-vars": "error",
+      "vue/no-mutating-props": "off",
+      "vue/valid-v-for": "warn",
+      "vue/no-template-shadow": "warn",
+      "vue/return-in-computed-property": "warn",
+      "vue/block-order": [
+        "error",
+        {
+          order: ["template", "script", "style"],
+        },
+      ],
       "vue/html-self-closing": [
         "error",
         {
@@ -127,34 +159,45 @@ export default [
             normal: "never",
             component: "always",
           },
+          svg: "always",
+          math: "always",
         },
       ],
-      "vue/no-unused-vars": "off",
+      "vue/component-name-in-template-casing": ["error", "PascalCase"],
+      "@typescript-eslint/no-explicit-any": "off",
     },
   },
 
-  // TypeScript 配置
+  // TypeScript 文件特定配置
   {
-    files: ["**/*.ts", "**/*.tsx", "**/*.vue"],
-    plugins: {
-      "@typescript-eslint": pluginTypeScript,
+    files: ["**/*.{ts,tsx,mts,cts}"],
+    languageOptions: {
+      parser: typescriptEslint.parser,
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
     },
     rules: {
-      "@typescript-eslint/no-explicit-any": "off",
+      // TypeScript 规则
+      "@typescript-eslint/no-explicit-any": "off", // 允许使用any类型，方便开发
       "@typescript-eslint/no-empty-function": "off",
       "@typescript-eslint/no-empty-object-type": "off",
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-non-null-assertion": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          vars: "all",
-          args: "after-used",
-          ignoreRestSiblings: true,
-          argsIgnorePattern: "^_", // 忽略以下划线开头的参数
-          varsIgnorePattern: "^[A-Z][A-Z0-9_]*$", // 忽略全大写的常量/枚举
-        },
-      ],
+      "@typescript-eslint/no-unused-vars": "warn", // 降级为警告
+      "@typescript-eslint/no-unused-expressions": "warn", // 降级为警告
+      "@typescript-eslint/consistent-type-imports": "off", // 关闭强制使用type import
+      "@typescript-eslint/no-import-type-side-effects": "error",
+    },
+  },
+
+  // .d.ts 文件配置
+  {
+    files: ["**/*.d.ts"],
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
     },
   },
 
@@ -164,13 +207,10 @@ export default [
     rules: {
       "no-unused-vars": "off",
       "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
     },
   },
 
-  // Prettier 集成
-  {
-    rules: {
-      ...configPrettier.rules,
-    },
-  },
+  // Prettier 集成（必须放在最后）
+  configPrettier,
 ];
diff --git a/src/App.vue b/src/App.vue
index 764bbf26..7a5f3ff6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
     <!-- 开启水印 -->
     <el-watermark
       :font="{ color: fontColor }"
-      :content="watermarkEnabled ? defaultSettings.watermarkContent : ''"
+      :content="showWatermark ? defaultSettings.watermarkContent : ''"
       :z-index="9999"
       class="wh-full"
     >
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import { useAppStore, useSettingsStore } from "@/store";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import { ThemeMode } from "@/enums/settings/theme.enum";
 import { ComponentSize } from "@/enums/settings/layout.enum";
 
@@ -23,7 +23,7 @@ const settingsStore = useSettingsStore();
 
 const locale = computed(() => appStore.locale);
 const size = computed(() => appStore.size as ComponentSize);
-const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);
+const showWatermark = computed(() => settingsStore.showWatermark);
 
 // 明亮/暗黑主题水印字体颜色适配
 const fontColor = computed(() => {
diff --git a/src/api/auth.api.ts b/src/api/auth.api.ts
index e27d85e0..772e9ef3 100644
--- a/src/api/auth.api.ts
+++ b/src/api/auth.api.ts
@@ -25,7 +25,7 @@ const AuthAPI = {
     return request<any, LoginResult>({
       url: `${AUTH_BASE_URL}/refresh-token`,
       method: "post",
-      params: { refreshToken: refreshToken },
+      params: { refreshToken },
       headers: {
         Authorization: "no-auth",
       },
diff --git a/src/api/codegen.api.ts b/src/api/codegen.api.ts
index b3b613fc..cddee813 100644
--- a/src/api/codegen.api.ts
+++ b/src/api/codegen.api.ts
@@ -8,7 +8,7 @@ const GeneratorAPI = {
     return request<any, PageResult<TablePageVO[]>>({
       url: `${GENERATOR_BASE_URL}/table/page`,
       method: "get",
-      params: params,
+      params,
     });
   },
 
@@ -25,7 +25,7 @@ const GeneratorAPI = {
     return request({
       url: `${GENERATOR_BASE_URL}/${tableName}/config`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/api/file.api.ts b/src/api/file.api.ts
index 0b109772..504d916e 100644
--- a/src/api/file.api.ts
+++ b/src/api/file.api.ts
@@ -42,7 +42,7 @@ const FileAPI = {
     return request({
       url: "/api/v1/files",
       method: "delete",
-      params: { filePath: filePath },
+      params: { filePath },
     });
   },
 
@@ -53,7 +53,7 @@ const FileAPI = {
    */
   download(url: string, fileName?: string) {
     return request({
-      url: url,
+      url,
       method: "get",
       responseType: "blob",
     }).then((res) => {
diff --git a/src/api/system/config.api.ts b/src/api/system/config.api.ts
index f280ee1c..42ba7672 100644
--- a/src/api/system/config.api.ts
+++ b/src/api/system/config.api.ts
@@ -25,7 +25,7 @@ const ConfigAPI = {
     return request({
       url: `${CONFIG_BASE_URL}`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -34,7 +34,7 @@ const ConfigAPI = {
     return request({
       url: `${CONFIG_BASE_URL}/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/api/system/dept.api.ts b/src/api/system/dept.api.ts
index 200065d3..6182a555 100644
--- a/src/api/system/dept.api.ts
+++ b/src/api/system/dept.api.ts
@@ -48,7 +48,7 @@ const DeptAPI = {
     return request({
       url: `${DEPT_BASE_URL}`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -63,7 +63,7 @@ const DeptAPI = {
     return request({
       url: `${DEPT_BASE_URL}/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/api/system/dict.api.ts b/src/api/system/dict.api.ts
index b148e0a4..0f8a4fd5 100644
--- a/src/api/system/dict.api.ts
+++ b/src/api/system/dict.api.ts
@@ -55,7 +55,7 @@ const DictAPI = {
     return request({
       url: `${DICT_BASE_URL}`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -69,7 +69,7 @@ const DictAPI = {
     return request({
       url: `${DICT_BASE_URL}/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
@@ -119,7 +119,7 @@ const DictAPI = {
     return request({
       url: `${DICT_BASE_URL}/${dictCode}/items`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -143,7 +143,7 @@ const DictAPI = {
     return request({
       url: `${DICT_BASE_URL}/${dictCode}/items/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/api/system/menu.api.ts b/src/api/system/menu.api.ts
index 06c11ed2..45f95b3c 100644
--- a/src/api/system/menu.api.ts
+++ b/src/api/system/menu.api.ts
@@ -40,7 +40,7 @@ const MenuAPI = {
     return request<any, OptionType[]>({
       url: `${MENU_BASE_URL}/options`,
       method: "get",
-      params: { onlyParent: onlyParent },
+      params: { onlyParent },
     });
   },
 
@@ -66,7 +66,7 @@ const MenuAPI = {
     return request({
       url: `${MENU_BASE_URL}`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -81,7 +81,7 @@ const MenuAPI = {
     return request({
       url: `${MENU_BASE_URL}/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/api/system/notice.api.ts b/src/api/system/notice.api.ts
index b5e65e79..471c5e7b 100644
--- a/src/api/system/notice.api.ts
+++ b/src/api/system/notice.api.ts
@@ -35,7 +35,7 @@ const NoticeAPI = {
     return request({
       url: `${NOTICE_BASE_URL}`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -49,7 +49,7 @@ const NoticeAPI = {
     return request({
       url: `${NOTICE_BASE_URL}/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/api/system/role.api.ts b/src/api/system/role.api.ts
index be680229..6a822efb 100644
--- a/src/api/system/role.api.ts
+++ b/src/api/system/role.api.ts
@@ -42,7 +42,7 @@ const RoleAPI = {
     return request({
       url: `${ROLE_BASE_URL}/${roleId}/menus`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
@@ -64,7 +64,7 @@ const RoleAPI = {
     return request({
       url: `${ROLE_BASE_URL}`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -78,7 +78,7 @@ const RoleAPI = {
     return request({
       url: `${ROLE_BASE_URL}/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/api/system/user.api.ts b/src/api/system/user.api.ts
index 1d16fd1c..2a26b34c 100644
--- a/src/api/system/user.api.ts
+++ b/src/api/system/user.api.ts
@@ -50,7 +50,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}`,
       method: "post",
-      data: data,
+      data,
     });
   },
 
@@ -64,7 +64,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/${id}`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
@@ -78,7 +78,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/${id}/password/reset`,
       method: "put",
-      params: { password: password },
+      params: { password },
     });
   },
 
@@ -129,7 +129,7 @@ const UserAPI = {
     return request<any, ExcelResult>({
       url: `${USER_BASE_URL}/import`,
       method: "post",
-      params: { deptId: deptId },
+      params: { deptId },
       data: formData,
       headers: {
         "Content-Type": "multipart/form-data",
@@ -150,7 +150,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/profile`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
@@ -159,7 +159,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/password`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
@@ -168,7 +168,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/mobile/code`,
       method: "post",
-      params: { mobile: mobile },
+      params: { mobile },
     });
   },
 
@@ -177,7 +177,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/mobile`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
@@ -186,7 +186,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/email/code`,
       method: "post",
-      params: { email: email },
+      params: { email },
     });
   },
 
@@ -195,7 +195,7 @@ const UserAPI = {
     return request({
       url: `${USER_BASE_URL}/email`,
       method: "put",
-      data: data,
+      data,
     });
   },
 
diff --git a/src/components/AppLink/index.vue b/src/components/AppLink/index.vue
index b97aacfe..b3b8f172 100644
--- a/src/components/AppLink/index.vue
+++ b/src/components/AppLink/index.vue
@@ -33,6 +33,6 @@ const linkProps = (to: any) => {
       rel: "noopener noreferrer",
     };
   }
-  return { to: to };
+  return { to };
 };
 </script>
diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index f98330c0..8437cacd 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -6,11 +6,11 @@
     <div class="flex flex-col md:flex-row justify-between gap-y-2.5 mb-2.5">
       <!-- 左侧工具栏 -->
       <div class="toolbar-left flex gap-y-2.5 gap-x-2 md:gap-x-3 flex-wrap">
-        <template v-for="btn in toolbarLeftBtn">
+        <template v-for="(btn, index) in toolbarLeftBtn" :key="index">
           <el-button
             v-hasPerm="btn.perm ?? '*:*:*'"
-            :disabled="btn.name === 'delete' && removeIds.length === 0"
             v-bind="btn.attrs"
+            :disabled="btn.name === 'delete' && removeIds.length === 0"
             @click="handleToolbar(btn.name)"
           >
             {{ btn.text }}
@@ -19,13 +19,13 @@
       </div>
       <!-- 右侧工具栏 -->
       <div class="toolbar-right flex gap-y-2.5 gap-x-2 md:gap-x-3 flex-wrap">
-        <template v-for="btn in toolbarRightBtn">
+        <template v-for="(btn, index) in toolbarRightBtn" :key="index">
           <el-popover v-if="btn.name === 'filter'" placement="bottom" trigger="click">
             <template #reference>
               <el-button v-bind="btn.attrs"></el-button>
             </template>
             <el-scrollbar max-height="350px">
-              <template v-for="col in cols" :key="col">
+              <template v-for="col in cols" :key="col.prop">
                 <el-checkbox v-if="col.prop" v-model="col.show" :label="col.label" />
               </template>
             </el-scrollbar>
@@ -51,7 +51,7 @@
       @selection-change="handleSelectionChange"
       @filter-change="handleFilterChange"
     >
-      <template v-for="col in cols" :key="col">
+      <template v-for="col in cols" :key="col.prop">
         <el-table-column v-if="col.show" v-bind="col">
           <template #default="scope">
             <!-- 显示图片 -->
@@ -158,7 +158,7 @@
             </template>
             <!-- 列操作栏 -->
             <template v-else-if="col.templet === 'tool'">
-              <template v-for="btn in tableToolbarBtn">
+              <template v-for="(btn, index) in tableToolbarBtn" :key="index">
                 <el-button
                   v-if="btn.render === undefined || btn.render(scope.row)"
                   v-hasPerm="btn.perm ?? '*:*:*'"
@@ -237,7 +237,7 @@
           </el-form-item>
           <el-form-item label="字段" prop="fields">
             <el-checkbox-group v-model="exportsFormData.fields">
-              <template v-for="col in cols" :key="col">
+              <template v-for="col in cols" :key="col.prop">
                 <el-checkbox v-if="col.prop" :value="col.prop" :label="col.label" />
               </template>
             </el-checkbox-group>
@@ -430,7 +430,9 @@ const tableToolbarBtn = createToolbar(tableToolbar, { link: true, size: "small"
 // 表格列
 const cols = ref(
   props.contentConfig.cols.map((col) => {
-    col.initFn && col.initFn(col);
+    if (col.initFn) {
+      col.initFn(col);
+    }
     if (col.show === undefined) {
       col.show = true;
     }
@@ -544,7 +546,7 @@ const exportsFormRef = ref<FormInstance>();
 const exportsFormData = reactive({
   filename: "",
   sheetname: "",
-  fields: fields,
+  fields,
   origin: ExportsOriginEnum.CURRENT,
 });
 const exportsFormRules: FormRules = {
@@ -805,8 +807,8 @@ function handleModify(field: string, value: boolean | string | number, row: Reco
   if (props.contentConfig.modifyAction) {
     props.contentConfig.modifyAction({
       [pk]: row[pk],
-      field: field,
-      value: value,
+      field,
+      value,
     });
   } else {
     ElMessage.error("未配置modifyAction");
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index 637445cc..3b8195ae 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -42,6 +42,7 @@
                       <component
                         :is="childrenMap.get(item.type)"
                         v-for="opt in item.options"
+                        :key="opt.value"
                         :label="opt.label"
                         :value="opt.value"
                       ></component>
@@ -104,6 +105,7 @@
                         <component
                           :is="childrenMap.get(item.type)"
                           v-for="opt in item.options"
+                          :key="opt.value"
                           :label="opt.label"
                           :value="opt.value"
                         ></component>
@@ -224,7 +226,9 @@ const handleSubmit = useThrottleFn(() => {
 
 onMounted(() => {
   formItems.forEach((item) => {
-    item.initFn && item.initFn(item);
+    if (item.initFn) {
+      item.initFn(item);
+    }
     formRules[item.prop] = item?.rules ?? [];
     props.modalConfig.form = { labelWidth: "auto", ...props.modalConfig?.form };
 
diff --git a/src/components/CURD/PageSearch.vue b/src/components/CURD/PageSearch.vue
index afd380eb..8f42a554 100644
--- a/src/components/CURD/PageSearch.vue
+++ b/src/components/CURD/PageSearch.vue
@@ -33,7 +33,7 @@
               v-on="item.events || {}"
             >
               <template v-if="item.type === 'select'">
-                <template v-for="opt in item.options">
+                <template v-for="opt in item.options" :key="opt.value">
                   <el-option :label="opt.label" :value="opt.value" />
                 </template>
               </template>
@@ -72,7 +72,6 @@ const emit = defineEmits<{
 }>();
 // 组件映射表
 const componentMap = new Map<ISearchComponent, any>([
-  /* eslint-disable */
   // @ts-ignore
   ["input", markRaw(ElInput)], // @ts-ignore
   ["select", markRaw(ElSelect)], // @ts-ignore
@@ -84,7 +83,6 @@ const componentMap = new Map<ISearchComponent, any>([
   ["tree-select", markRaw(ElTreeSelect)], // @ts-ignore
   ["input-tag", markRaw(ElInputTag)], // @ts-ignore
   ["custom-tag", markRaw(InputTag)],
-  /* eslint-enable */
 ]);
 
 // 存储表单实例
@@ -131,7 +129,9 @@ const handleReset = () => {
 
 onMounted(() => {
   formItems.forEach((item) => {
-    item?.initFn && item.initFn(item);
+    if (item?.initFn) {
+      item.initFn(item);
+    }
     if (["input-tag", "custom-tag", "cascader"].includes(item?.type ?? "")) {
       queryParams[item.prop] = Array.isArray(item.initialValue) ? item.initialValue : [];
     } else if (item.type === "input-number") {
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index 19095438..d7775873 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -3,7 +3,7 @@ import type { FormProps, TableProps, ColProps, ButtonProps, CardProps } from "el
 import type PageContent from "./PageContent.vue";
 import type PageModal from "./PageModal.vue";
 import type PageSearch from "./PageSearch.vue";
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export type PageSearchInstance = InstanceType<typeof PageSearch>;
 export type PageContentInstance = InstanceType<typeof PageContent>;
diff --git a/src/components/CURD/usePage.ts b/src/components/CURD/usePage.ts
index dd2d7be3..18261f2e 100644
--- a/src/components/CURD/usePage.ts
+++ b/src/components/CURD/usePage.ts
@@ -36,12 +36,12 @@ function usePage() {
     if (RefImpl) {
       RefImpl.value?.setModalVisible();
       RefImpl.value?.handleDisabled(false);
-      let from = await (callback?.(row) ?? Promise.resolve(row));
+      const from = await (callback?.(row) ?? Promise.resolve(row));
       RefImpl.value?.setFormData(from ? from : row);
     } else {
       editModalRef.value?.setModalVisible();
       editModalRef.value?.handleDisabled(false);
-      let from = await (callback?.(row) ?? Promise.resolve(row));
+      const from = await (callback?.(row) ?? Promise.resolve(row));
       editModalRef.value?.setFormData(from ? from : row);
     }
   }
@@ -54,12 +54,12 @@ function usePage() {
     if (RefImpl) {
       RefImpl.value?.setModalVisible();
       RefImpl.value?.handleDisabled(true);
-      let from = await (callback?.(row) ?? Promise.resolve(row));
+      const from = await (callback?.(row) ?? Promise.resolve(row));
       RefImpl.value?.setFormData(from ? from : row);
     } else {
       editModalRef.value?.setModalVisible();
       editModalRef.value?.handleDisabled(true);
-      let from = await (callback?.(row) ?? Promise.resolve(row));
+      const from = await (callback?.(row) ?? Promise.resolve(row));
       editModalRef.value?.setFormData(from ? from : row);
     }
   }
diff --git a/src/components/DarkModeSwitch/index.vue b/src/components/DarkModeSwitch/index.vue
index c5991b28..780c1abc 100644
--- a/src/components/DarkModeSwitch/index.vue
+++ b/src/components/DarkModeSwitch/index.vue
@@ -34,6 +34,6 @@ const theneList = [
 ];
 
 const handleDarkChange = (theme: ThemeMode) => {
-  settingsStore.changeTheme(theme);
+  settingsStore.updateTheme(theme);
 };
 </script>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 58d2bd10..1ad9db84 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Hamburger/index.vue
@@ -31,6 +31,9 @@ const hamburgerClass = computed(() => {
   ) {
     return "hamburger--white";
   }
+
+  // 默认返回空字符串
+  return "";
 });
 
 function toggleClick() {
diff --git a/src/components/Notification/index.vue b/src/components/Notification/index.vue
index 39af1cff..49f636cd 100644
--- a/src/components/Notification/index.vue
+++ b/src/components/Notification/index.vue
@@ -1,83 +1,81 @@
 <template>
-  <div class="notification">
-    <el-dropdown class="h-full flex-center" trigger="click">
-      <el-badge v-if="noticeList.length > 0" :offset="[0, 15]" :value="noticeList.length" :max="99">
-        <div class="i-svg:bell" />
-      </el-badge>
+  <el-dropdown trigger="click">
+    <el-badge v-if="noticeList.length > 0" :value="noticeList.length" :max="99">
+      <div class="i-svg:bell" />
+    </el-badge>
 
-      <div v-else class="i-svg:bell" />
+    <div v-else class="i-svg:bell" />
 
-      <template #dropdown>
-        <div class="p-5">
-          <template v-if="noticeList.length > 0">
-            <div v-for="(item, index) in noticeList" :key="index" class="w-500px py-3">
-              <div class="flex-y-center">
-                <DictLabel v-model="item.type" code="notice_type" size="small" />
-                <el-text
-                  size="small"
-                  class="w-200px cursor-pointer !ml-2 !flex-1"
-                  truncated
-                  @click="handleReadNotice(item.id)"
-                >
-                  {{ item.title }}
-                </el-text>
+    <template #dropdown>
+      <div class="p-5">
+        <template v-if="noticeList.length > 0">
+          <div v-for="(item, index) in noticeList" :key="index" class="w-500px py-3">
+            <div class="flex-y-center">
+              <DictLabel v-model="item.type" code="notice_type" size="small" />
+              <el-text
+                size="small"
+                class="w-200px cursor-pointer !ml-2 !flex-1"
+                truncated
+                @click="handleReadNotice(item.id)"
+              >
+                {{ item.title }}
+              </el-text>
 
-                <div class="text-xs text-gray">
-                  {{ item.publishTime }}
-                </div>
+              <div class="text-xs text-gray">
+                {{ item.publishTime }}
               </div>
             </div>
-            <el-divider />
-            <div class="flex-x-between">
-              <el-link type="primary" underline="never" @click="handleViewMoreNotice">
-                <span class="text-xs">查看更多</span>
-                <el-icon class="text-xs">
-                  <ArrowRight />
-                </el-icon>
-              </el-link>
-              <el-link
-                v-if="noticeList.length > 0"
-                type="primary"
-                underline="never"
-                @click="handleMarkAllAsRead"
-              >
-                <span class="text-xs">全部已读</span>
-              </el-link>
-            </div>
-          </template>
-          <template v-else>
-            <div class="flex-center h-150px w-350px">
-              <el-empty :image-size="50" description="暂无消息" />
-            </div>
-          </template>
-        </div>
-      </template>
-    </el-dropdown>
-
-    <el-dialog
-      v-model="noticeDialogVisible"
-      :title="noticeDetail?.title ?? '通知详情'"
-      width="800px"
-      custom-class="notification-detail"
-    >
-      <div v-if="noticeDetail" class="p-x-20px">
-        <div class="flex-y-center mb-16px text-13px text-color-secondary">
-          <span class="flex-y-center">
-            <el-icon><User /></el-icon>
-            {{ noticeDetail.publisherName }}
-          </span>
-          <span class="ml-2 flex-y-center">
-            <el-icon><Timer /></el-icon>
-            {{ noticeDetail.publishTime }}
-          </span>
-        </div>
-
-        <div class="max-h-60vh pt-16px mb-24px overflow-y-auto border-t border-solid border-color">
-          <div v-html="noticeDetail.content"></div>
-        </div>
+          </div>
+          <el-divider />
+          <div class="flex-x-between">
+            <el-link type="primary" underline="never" @click="handleViewMoreNotice">
+              <span class="text-xs">查看更多</span>
+              <el-icon class="text-xs">
+                <ArrowRight />
+              </el-icon>
+            </el-link>
+            <el-link
+              v-if="noticeList.length > 0"
+              type="primary"
+              underline="never"
+              @click="handleMarkAllAsRead"
+            >
+              <span class="text-xs">全部已读</span>
+            </el-link>
+          </div>
+        </template>
+        <template v-else>
+          <div class="flex-center h-150px w-350px">
+            <el-empty :image-size="50" description="暂无消息" />
+          </div>
+        </template>
       </div>
-    </el-dialog>
-  </div>
+    </template>
+  </el-dropdown>
+
+  <el-dialog
+    v-model="noticeDialogVisible"
+    :title="noticeDetail?.title ?? '通知详情'"
+    width="800px"
+    custom-class="notification-detail"
+  >
+    <div v-if="noticeDetail" class="p-x-20px">
+      <div class="flex-y-center mb-16px text-13px text-color-secondary">
+        <span class="flex-y-center">
+          <el-icon><User /></el-icon>
+          {{ noticeDetail.publisherName }}
+        </span>
+        <span class="ml-2 flex-y-center">
+          <el-icon><Timer /></el-icon>
+          {{ noticeDetail.publishTime }}
+        </span>
+      </div>
+
+      <div class="max-h-60vh pt-16px mb-24px overflow-y-auto border-t border-solid border-color">
+        <div v-html="noticeDetail.content"></div>
+      </div>
+    </div>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -162,14 +160,4 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.notification {
-  :deep(.el-badge) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index 7d49bc5b..de58d3cf 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -2,9 +2,7 @@
   <!-- 布局大小 -->
   <el-tooltip :content="t('sizeSelect.tooltip')" effect="dark" placement="bottom">
     <el-dropdown trigger="click" @command="handleSizeChange">
-      <div>
-        <div class="i-svg:size" />
-      </div>
+      <div class="i-svg:size" />
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item
diff --git a/src/components/TableSelect/index.vue b/src/components/TableSelect/index.vue
index 95fb808b..c546f75c 100644
--- a/src/components/TableSelect/index.vue
+++ b/src/components/TableSelect/index.vue
@@ -226,7 +226,7 @@ const queryParams = reactive<{
   [key: string]: any;
 }>({
   pageNum: 1,
-  pageSize: pageSize,
+  pageSize,
 });
 
 // 计算popover的宽度
@@ -284,7 +284,7 @@ const selectedItems = ref<IObject[]>([]);
 const confirmText = computed(() => {
   return selectedItems.value.length > 0 ? `已选(${selectedItems.value.length})` : "确 定";
 });
-function handleSelect(selection: any[], _row: any) {
+function handleSelect(selection: any[]) {
   if (isMultiple || selection.length === 0) {
     // 多选
     selectedItems.value = selection;
diff --git a/src/components/Upload/FileUpload.vue b/src/components/Upload/FileUpload.vue
index 4832b246..1b3466c4 100644
--- a/src/components/Upload/FileUpload.vue
+++ b/src/components/Upload/FileUpload.vue
@@ -130,7 +130,7 @@ watch(
     fileList.value = value.map((item) => {
       const name = item.name ? item.name : item.url?.substring(item.url.lastIndexOf("/") + 1);
       return {
-        name: name,
+        name,
         url: item.url,
         status: "success",
         uid: getUid(),
@@ -199,11 +199,11 @@ const handleSuccess = (response: any, uploadFile: UploadFile, files: UploadFiles
       return file.status === "success" || file.status === "fail";
     })
   ) {
-    let fileInfos = [] as FileInfo[];
+    const fileInfos = [] as FileInfo[];
     files.map((file: UploadFile) => {
       if (file.status === "success") {
         //只取携带response的才是刚上传的
-        let res = file.response as FileInfo;
+        const res = file.response as FileInfo;
         if (res) {
           fileInfos.push({ name: res.name, url: res.url } as FileInfo);
         }
diff --git a/src/composables/useDictSync.ts b/src/composables/useDictSync.ts
index bf7f3c7e..ca9551b6 100644
--- a/src/composables/useDictSync.ts
+++ b/src/composables/useDictSync.ts
@@ -1,6 +1,6 @@
 import { useDictStoreHook } from "@/store/modules/dict.store";
 import { useStomp } from "./useStomp";
-import { IMessage } from "@stomp/stompjs";
+import type { IMessage } from "@stomp/stompjs";
 import { ref } from "vue";
 
 // 字典消息类型
@@ -39,6 +39,9 @@ function createDictSyncHook() {
   // 消息回调函数列表
   const messageCallbacks = ref<DictMessageCallback[]>([]);
 
+  // 重试定时器
+  let retryTimer: any = null;
+
   /**
    * 注册字典消息回调
    * @param callback 回调函数
@@ -62,7 +65,7 @@ function createDictSyncHook() {
       // 检查是否配置了WebSocket端点
       const wsEndpoint = import.meta.env.VITE_APP_WS_ENDPOINT;
       if (!wsEndpoint) {
-        console.log("[WebSocket] 未配置WebSocket端点,跳过连接");
+        console.log("[DictSync] 未配置WebSocket端点,跳过连接");
         return;
       }
 
@@ -72,7 +75,7 @@ function createDictSyncHook() {
       // 设置字典订阅
       setupDictSubscription();
     } catch (error) {
-      console.error("[WebSocket] 初始化失败:", error);
+      console.error("[DictSync] 初始化失败:", error);
     }
   };
 
@@ -80,6 +83,12 @@ function createDictSyncHook() {
    * 关闭WebSocket
    */
   const closeWebSocket = () => {
+    // 清理重试定时器
+    if (retryTimer) {
+      clearTimeout(retryTimer);
+      retryTimer = null;
+    }
+
     // 取消所有订阅
     subscriptionIds.value.forEach((id) => {
       unsubscribe(id);
@@ -99,27 +108,40 @@ function createDictSyncHook() {
 
     // 防止重复订阅
     if (subscribedTopics.value.has(topic)) {
-      console.log(`跳过重复订阅: ${topic}`);
+      console.log(`[DictSync] 跳过重复订阅: ${topic}`);
       return;
     }
 
-    console.log(`开始尝试订阅字典主题: ${topic}`);
+    console.log(`[DictSync] 开始尝试订阅字典主题: ${topic}`);
 
     // 使用简化的重试逻辑，依赖useStomp的连接管理
     const attemptSubscribe = () => {
       if (!isConnected.value) {
-        console.log("等待WebSocket连接建立...");
+        console.log("[DictSync] 等待WebSocket连接建立...");
+        // 清理之前的定时器，防止重复
+        if (retryTimer) {
+          clearTimeout(retryTimer);
+        }
         // 10秒后再次尝试
-        setTimeout(attemptSubscribe, 10000);
+        retryTimer = setTimeout(() => {
+          retryTimer = null;
+          attemptSubscribe();
+        }, 10000);
         return;
       }
 
+      // 清理重试定时器
+      if (retryTimer) {
+        clearTimeout(retryTimer);
+        retryTimer = null;
+      }
+
       // 检查是否已订阅
       if (subscribedTopics.value.has(topic)) {
         return;
       }
 
-      console.log(`连接已建立，开始订阅: ${topic}`);
+      console.log(`[DictSync] 连接已建立，开始订阅: ${topic}`);
 
       // 订阅字典更新
       const subId = subscribe(topic, (message: IMessage) => {
@@ -129,9 +151,9 @@ function createDictSyncHook() {
       if (subId) {
         subscriptionIds.value.push(subId);
         subscribedTopics.value.add(topic);
-        console.log(`字典主题订阅成功: ${topic}`);
+        console.log(`[DictSync] 字典主题订阅成功: ${topic}`);
       } else {
-        console.warn(`字典主题订阅失败: ${topic}`);
+        console.warn(`[DictSync] 字典主题订阅失败: ${topic}`);
       }
     };
 
@@ -148,7 +170,7 @@ function createDictSyncHook() {
 
     try {
       // 记录接收到的消息
-      console.log(`收到字典更新消息: ${message.body}`);
+      console.log(`[DictSync] 收到字典更新消息: ${message.body}`);
 
       // 尝试解析消息
       const parsedData = JSON.parse(message.body) as DictMessage;
@@ -158,21 +180,21 @@ function createDictSyncHook() {
 
       // 清除缓存，等待按需加载
       dictStore.removeDictItem(dictCode);
-      console.log(`字典缓存已清除: ${dictCode}`);
+      console.log(`[DictSync] 字典缓存已清除: ${dictCode}`);
 
       // 调用所有注册的回调函数
       messageCallbacks.value.forEach((callback) => {
         try {
           callback(parsedData);
         } catch (callbackError) {
-          console.error("[WebSocket] 回调执行失败:", callbackError);
+          console.error("[DictSync] 回调执行失败:", callbackError);
         }
       });
 
       // 显示提示消息
-      console.info(`字典 ${dictCode} 已变更，将在下次使用时自动加载`);
+      console.info(`[DictSync] 字典 ${dictCode} 已变更，将在下次使用时自动加载`);
     } catch (error) {
-      console.error("[WebSocket] 解析消息失败:", error);
+      console.error("[DictSync] 解析消息失败:", error);
     }
   };
 
diff --git a/src/composables/useOnlineCount.ts b/src/composables/useOnlineCount.ts
index fac73274..906278c6 100644
--- a/src/composables/useOnlineCount.ts
+++ b/src/composables/useOnlineCount.ts
@@ -1,14 +1,15 @@
-import { ref, onMounted, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from "vue";
 import { useStomp } from "./useStomp";
-import { ElMessage } from "element-plus";
-import { Storage } from "@/utils/storage";
-import { ACCESS_TOKEN_KEY } from "@/constants/cache-keys";
+import { registerWebSocketInstance } from "@/plugins/websocket";
+import { Auth } from "@/utils/auth";
+
+// 全局单例实例
+let globalInstance: ReturnType<typeof createOnlineCountHook> | null = null;
 
 /**
- * 在线用户计数组合式函数
- * 用于订阅后端推送的在线用户数量变化
+ * 创建在线用户计数的核心逻辑
  */
-export function useOnlineCount() {
+function createOnlineCountHook() {
   // 在线用户数量
   const onlineUserCount = ref(0);
 
@@ -22,18 +23,23 @@ export function useOnlineCount() {
   const isConnecting = ref(false);
 
   // 使用Stomp客户端 - 配置使用指数退避策略
+  const stompInstance = useStomp({
+    reconnectDelay: 15000, // 重连基础延迟
+    maxReconnectAttempts: 3, // 重连次数上限
+    connectionTimeout: 10000, // 连接超时
+    useExponentialBackoff: true, // 启用指数退避
+  });
+
   const {
     connect,
     subscribe,
     unsubscribe,
     disconnect,
     isConnected: stompConnected,
-  } = useStomp({
-    reconnectDelay: 15000, // 重连基础延迟
-    maxReconnectAttempts: 3, // 重连次数上限
-    connectionTimeout: 10000, // 连接超时
-    useExponentialBackoff: true, // 启用指数退避
-  });
+  } = stompInstance;
+
+  // 注册到全局实例管理器
+  registerWebSocketInstance("onlineCount", stompInstance);
 
   // 订阅ID
   let subscriptionId = "";
@@ -49,7 +55,7 @@ export function useOnlineCount() {
 
       // 一旦连接成功，立即订阅主题
       subscribeToOnlineCount();
-      console.log("WebSocket连接成功，已订阅在线用户计数主题");
+      console.log("[useOnlineCount] WebSocket连接成功，已订阅在线用户计数主题");
     }
   });
 
@@ -81,7 +87,7 @@ export function useOnlineCount() {
           lastUpdateTime.value = Date.now();
         }
       } catch (error) {
-        console.error("解析在线用户数量失败:", error);
+        console.error("[useOnlineCount] 解析在线用户数量失败:", error);
       }
     });
   };
@@ -95,18 +101,19 @@ export function useOnlineCount() {
     // 检查WebSocket端点是否配置
     const wsEndpoint = import.meta.env.VITE_APP_WS_ENDPOINT;
     if (!wsEndpoint) {
-      console.log("未配置WebSocket端点(VITE_APP_WS_ENDPOINT),跳过WebSocket连接");
+      console.log("[useOnlineCount] 未配置WebSocket端点(VITE_APP_WS_ENDPOINT),跳过WebSocket连接");
       return;
     }
 
-    // 检查是否有可用的令牌
-    const hasToken = !!Storage.get(ACCESS_TOKEN_KEY, "");
-    if (!hasToken) {
-      console.log("没有检测到有效令牌，不尝试WebSocket连接");
+    // 使用 Auth.getAccessToken() 获取令牌，确保获取到最新的
+    const accessToken = Auth.getAccessToken();
+    if (!accessToken) {
+      console.log("[useOnlineCount] 没有检测到有效令牌，不尝试WebSocket连接");
       return;
     }
 
     isConnecting.value = true;
+    console.log("[useOnlineCount] 开始建立WebSocket连接...");
 
     // 连接WebSocket
     connect();
@@ -115,17 +122,17 @@ export function useOnlineCount() {
     clearTimeout(connectionTimeoutTimer);
     connectionTimeoutTimer = setTimeout(() => {
       if (!isConnected.value) {
-        console.warn("WebSocket连接超时，将自动尝试重连");
+        console.warn("[useOnlineCount] WebSocket连接超时，将自动尝试重连");
         ElMessage.warning("正在尝试连接服务器，请稍候...");
 
         // 超时后尝试重新连接
         closeWebSocket();
         setTimeout(() => {
           // 再次检查令牌有效性
-          if (Storage.get(ACCESS_TOKEN_KEY, "")) {
+          if (Auth.getAccessToken()) {
             initWebSocket();
           } else {
-            console.log("令牌无效，放弃重连");
+            console.log("[useOnlineCount] 令牌无效，放弃重连");
           }
         }, 3000);
       }
@@ -160,16 +167,6 @@ export function useOnlineCount() {
     isConnecting.value = false;
   };
 
-  // 组件挂载时初始化WebSocket
-  onMounted(() => {
-    initWebSocket();
-  });
-
-  // 组件卸载时关闭WebSocket
-  onUnmounted(() => {
-    closeWebSocket();
-  });
-
   return {
     onlineUserCount,
     lastUpdateTime,
@@ -179,3 +176,39 @@ export function useOnlineCount() {
     closeWebSocket,
   };
 }
+
+/**
+ * 在线用户计数组合式函数
+ * 使用单例模式，避免重复创建 WebSocket 连接
+ * @param options 配置选项
+ * @param options.autoInit 是否在组件挂载时自动初始化（默认 true）
+ */
+export function useOnlineCount(options: { autoInit?: boolean } = {}) {
+  const { autoInit = true } = options;
+
+  if (!globalInstance) {
+    globalInstance = createOnlineCountHook();
+  }
+
+  // 只有在组件上下文中且 autoInit 为 true 时才使用生命周期钩子
+  if (autoInit && getCurrentInstance()) {
+    // 组件挂载时检查是否需要初始化WebSocket
+    onMounted(() => {
+      // 只有在未连接且未连接中时才尝试初始化
+      if (!globalInstance!.isConnected.value && !globalInstance!.isConnecting.value) {
+        console.log("[useOnlineCount] 组件挂载，尝试初始化WebSocket连接");
+        globalInstance!.initWebSocket();
+      } else {
+        console.log("[useOnlineCount] WebSocket已连接或正在连接，跳过初始化");
+      }
+    });
+
+    // 组件卸载时不关闭连接，保持全局连接
+    onUnmounted(() => {
+      // 不关闭连接，让其他组件继续使用
+      console.log("[useOnlineCount] Component unmounted, keeping WebSocket connection");
+    });
+  }
+
+  return globalInstance;
+}
diff --git a/src/composables/useStomp.ts b/src/composables/useStomp.ts
index 98f5b13c..c2b8912b 100644
--- a/src/composables/useStomp.ts
+++ b/src/composables/useStomp.ts
@@ -1,4 +1,4 @@
-import { Client, IMessage, StompSubscription } from "@stomp/stompjs";
+import { Client, type IMessage, type StompSubscription } from "@stomp/stompjs";
 import { Auth } from "@/utils/auth";
 
 export interface UseStompOptions {
@@ -48,13 +48,18 @@ export function useStomp(options: UseStompOptions = {}) {
   const subscriptions = new Map<string, StompSubscription>();
 
   // 用于保存 STOMP 客户端的实例
-  let client = ref<Client | null>(null);
+  const client = ref<Client | null>(null);
+  // 防止重复连接的标志
+  let isConnecting = false;
+  let isManualDisconnect = false;
 
   /**
    * 初始化 STOMP 客户端
    */
   const initializeClient = () => {
-    if (client.value) {
+    // 如果客户端已存在且正在连接或已连接，直接返回
+    if (client.value && (client.value.active || client.value.connected)) {
+      console.log("STOMP客户端已存在且处于活动状态，跳过初始化");
       return;
     }
 
@@ -73,6 +78,16 @@ export function useStomp(options: UseStompOptions = {}) {
       return;
     }
 
+    // 如果有旧的客户端，先清理
+    if (client.value) {
+      try {
+        client.value.deactivate();
+      } catch (error) {
+        console.warn("清理旧客户端时出错:", error);
+      }
+      client.value = null;
+    }
+
     // 创建 STOMP 客户端
     client.value = new Client({
       brokerURL: brokerURL.value,
@@ -80,7 +95,7 @@ export function useStomp(options: UseStompOptions = {}) {
         Authorization: `Bearer ${currentToken}`,
       },
       debug: options.debug ? console.log : () => {},
-      reconnectDelay: useExponentialBackoff ? 0 : reconnectDelay, // 禁用内置重连机制
+      reconnectDelay: 0, // 禁用内置重连机制，使用自定义重连
       heartbeatIncoming: 4000,
       heartbeatOutgoing: 4000,
     });
@@ -88,18 +103,21 @@ export function useStomp(options: UseStompOptions = {}) {
     // 设置连接监听器
     client.value.onConnect = () => {
       isConnected.value = true;
+      isConnecting = false;
       reconnectCount.value = 0;
       clearTimeout(connectionTimeoutTimer);
+      clearTimeout(reconnectTimer);
       console.log("WebSocket连接已建立");
     };
 
     // 设置断开连接监听器
     client.value.onDisconnect = () => {
       isConnected.value = false;
+      isConnecting = false;
       console.log("WebSocket连接已断开");
 
-      // 如果使用自定义指数退避重连策略，则在这里处理
-      if (useExponentialBackoff && reconnectCount.value < maxReconnectAttempts) {
+      // 如果不是手动断开且未达到最大重连次数，则尝试重连
+      if (!isManualDisconnect && reconnectCount.value < maxReconnectAttempts) {
         handleReconnect();
       }
     };
@@ -107,32 +125,31 @@ export function useStomp(options: UseStompOptions = {}) {
     // 设置 Web Socket 关闭监听器
     client.value.onWebSocketClose = (event) => {
       isConnected.value = false;
+      isConnecting = false;
       console.log(`WebSocket已关闭: ${event?.code} ${event?.reason}`);
 
-      // 如果是授权问题导致的关闭，尝试重新获取令牌
-      if (event?.code === 1000 || event?.code === 1006 || event?.code === 1008) {
-        console.log("可能是授权问题导致连接关闭，尝试重新建立连接");
+      // 如果是手动断开，不要重连
+      if (isManualDisconnect) {
+        console.log("手动断开连接，不进行重连");
+        return;
+      }
 
-        // 等待一段时间后再尝试重连，避免立即重连
-        setTimeout(() => {
-          // 强制重新初始化客户端，获取最新令牌
-          client.value = null;
+      // 如果是授权问题导致的关闭，尝试重连
+      if (
+        (event?.code === 1000 || event?.code === 1006 || event?.code === 1008) &&
+        reconnectCount.value < maxReconnectAttempts
+      ) {
+        console.log("检测到连接异常关闭，将尝试重连");
 
-          // 检查当前是否有有效令牌
-          const freshToken = Auth.getAccessToken();
-          if (freshToken) {
-            initializeClient();
-            connect();
-          } else {
-            console.warn("没有有效令牌，暂不重连WebSocket");
-          }
-        }, 3000);
+        // 通过 handleReconnect 统一处理重连，避免重复计数
+        handleReconnect();
       }
     };
 
     // 设置错误监听器
     client.value.onStompError = (frame) => {
       console.error("STOMP错误:", frame.headers, frame.body);
+      isConnecting = false;
 
       // 检查是否是授权错误
       if (
@@ -141,6 +158,8 @@ export function useStomp(options: UseStompOptions = {}) {
         frame.body?.includes("Token")
       ) {
         console.warn("WebSocket授权错误，请检查登录状态");
+        // 授权错误不进行重连
+        isManualDisconnect = true;
       }
     };
   };
@@ -149,13 +168,18 @@ export function useStomp(options: UseStompOptions = {}) {
    * 处理重连逻辑
    */
   const handleReconnect = () => {
+    // 如果已经在连接中或手动断开，不重连
+    if (isConnecting || isManualDisconnect) {
+      return;
+    }
+
     if (reconnectCount.value >= maxReconnectAttempts) {
       console.error(`已达到最大重连次数(${maxReconnectAttempts})，停止重连`);
       return;
     }
 
     reconnectCount.value++;
-    console.log(`尝试重连(${reconnectCount.value}/${maxReconnectAttempts})...`);
+    console.log(`准备重连(${reconnectCount.value}/${maxReconnectAttempts})...`);
 
     // 使用指数退避策略增加重连间隔
     const delay = useExponentialBackoff
@@ -169,8 +193,9 @@ export function useStomp(options: UseStompOptions = {}) {
 
     // 设置重连计时器
     reconnectTimer = setTimeout(() => {
-      if (!isConnected.value && client.value) {
-        client.value.activate();
+      if (!isConnected.value && !isManualDisconnect && !isConnecting) {
+        console.log(`开始重连...`);
+        connect();
       }
     }, delay);
   };
@@ -195,12 +220,21 @@ export function useStomp(options: UseStompOptions = {}) {
    * 激活连接（如果已经连接或正在激活则直接返回）
    */
   const connect = () => {
+    // 重置手动断开标志
+    isManualDisconnect = false;
+
     // 检查是否有配置WebSocket端点
     if (!brokerURL.value) {
       console.error("WebSocket连接失败: 未配置WebSocket端点URL");
       return;
     }
 
+    // 防止重复连接
+    if (isConnecting) {
+      console.log("WebSocket正在连接中，跳过重复连接请求");
+      return;
+    }
+
     if (!client.value) {
       initializeClient();
     }
@@ -210,29 +244,35 @@ export function useStomp(options: UseStompOptions = {}) {
       return;
     }
 
-    // 避免重复连接:检查是否已连接或正在连接
+    // 避免重复连接:检查是否已连接
     if (client.value.connected) {
       console.log("WebSocket已经连接,跳过重复连接");
+      isConnected.value = true;
       return;
     }
 
-    if (client.value.active) {
-      console.log("WebSocket连接正在进行中,跳过重复连接请求");
-      return;
-    }
+    // 设置连接标志
+    isConnecting = true;
 
     // 设置连接超时
     clearTimeout(connectionTimeoutTimer);
     connectionTimeoutTimer = setTimeout(() => {
-      if (!isConnected.value) {
+      if (!isConnected.value && isConnecting) {
         console.warn("WebSocket连接超时");
-        if (useExponentialBackoff) {
+        isConnecting = false;
+        if (!isManualDisconnect && reconnectCount.value < maxReconnectAttempts) {
           handleReconnect();
         }
       }
     }, connectionTimeout);
 
-    client.value.activate();
+    try {
+      client.value.activate();
+      console.log("正在建立WebSocket连接...");
+    } catch (error) {
+      console.error("激活WebSocket连接失败:", error);
+      isConnecting = false;
+    }
   };
 
   /**
@@ -276,31 +316,45 @@ export function useStomp(options: UseStompOptions = {}) {
    * 断开WebSocket连接
    */
   const disconnect = () => {
-    if (client.value && client.value.connected) {
-      // 清除所有订阅
-      for (const [id, subscription] of subscriptions.entries()) {
-        subscription.unsubscribe();
-        subscriptions.delete(id);
-      }
+    // 设置手动断开标志
+    isManualDisconnect = true;
 
-      // 断开连接
-      client.value.deactivate();
-      console.log("WebSocket连接已断开");
-    }
-
-    // 清除重连计时器
+    // 清除所有计时器
     if (reconnectTimer) {
       clearTimeout(reconnectTimer);
       reconnectTimer = null;
     }
 
-    // 清除连接超时计时器
     if (connectionTimeoutTimer) {
       clearTimeout(connectionTimeoutTimer);
       connectionTimeoutTimer = null;
     }
 
+    // 清除所有订阅
+    for (const [id, subscription] of subscriptions.entries()) {
+      try {
+        subscription.unsubscribe();
+      } catch (error) {
+        console.warn(`取消订阅 ${id} 时出错:`, error);
+      }
+    }
+    subscriptions.clear();
+
+    // 断开连接
+    if (client.value) {
+      try {
+        if (client.value.connected || client.value.active) {
+          client.value.deactivate();
+          console.log("WebSocket连接已主动断开");
+        }
+      } catch (error) {
+        console.error("断开WebSocket连接时出错:", error);
+      }
+      client.value = null;
+    }
+
     isConnected.value = false;
+    isConnecting = false;
     reconnectCount.value = 0;
   };
 
diff --git a/src/constants/cache-keys.ts b/src/constants/cache-keys.ts
deleted file mode 100644
index e1355933..00000000
--- a/src/constants/cache-keys.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * 缓存键常量
- */
-export const ACCESS_TOKEN_KEY = "access_token";
-export const REFRESH_TOKEN_KEY = "refresh_token";
-export const DICT_CACHE_KEY = "dict_cache";
-export const REMEMBER_ME_KEY = "remember_me";
-// 可在此处添加其他缓存键
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 83e52a3c..f8be9d9d 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1 +1,4 @@
 export const ROLE_ROOT = "ROOT";
+
+// 🔗 导出所有存储键常量
+export * from "./storage-keys";
diff --git a/src/constants/storage-keys.ts b/src/constants/storage-keys.ts
new file mode 100644
index 00000000..8f2b95dc
--- /dev/null
+++ b/src/constants/storage-keys.ts
@@ -0,0 +1,53 @@
+/**
+ * 存储键常量统一管理
+ * 包括 localStorage、sessionStorage 等各种存储的键名
+ */
+
+// 🔐 用户认证相关
+export const ACCESS_TOKEN_KEY = "access_token";
+export const REFRESH_TOKEN_KEY = "refresh_token";
+export const REMEMBER_ME_KEY = "remember_me";
+
+// 📊 数据缓存相关
+export const DICT_CACHE_KEY = "dict_cache";
+
+// 🎨 系统设置相关
+export const SHOW_TAGS_VIEW_KEY = "showTagsView";
+export const SHOW_APP_LOGO_KEY = "showAppLogo";
+export const SHOW_WATERMARK_KEY = "showWatermark";
+export const LAYOUT_KEY = "layout";
+export const SIDEBAR_COLOR_SCHEME_KEY = "sidebarColorScheme";
+export const THEME_KEY = "theme";
+export const THEME_COLOR_KEY = "themeColor";
+
+// 🎯 功能分组的键映射对象
+
+// 认证相关键集合
+export const AUTH_KEYS = {
+  ACCESS_TOKEN: ACCESS_TOKEN_KEY,
+  REFRESH_TOKEN: REFRESH_TOKEN_KEY,
+  REMEMBER_ME: REMEMBER_ME_KEY,
+} as const;
+
+// 缓存相关键集合
+export const CACHE_KEYS = {
+  DICT_CACHE: DICT_CACHE_KEY,
+} as const;
+
+// 设置相关键集合
+export const SETTINGS_KEYS = {
+  SHOW_TAGS_VIEW: SHOW_TAGS_VIEW_KEY,
+  SHOW_APP_LOGO: SHOW_APP_LOGO_KEY,
+  SHOW_WATERMARK: SHOW_WATERMARK_KEY,
+  SIDEBAR_COLOR_SCHEME: SIDEBAR_COLOR_SCHEME_KEY,
+  LAYOUT: LAYOUT_KEY,
+  THEME_COLOR: THEME_COLOR_KEY,
+  THEME: THEME_KEY,
+} as const;
+
+// 📦 所有存储键的统一集合
+export const ALL_STORAGE_KEYS = {
+  ...AUTH_KEYS,
+  ...CACHE_KEYS,
+  ...SETTINGS_KEYS,
+} as const;
diff --git a/src/lang/index.ts b/src/lang/index.ts
index c94e0186..c16f4c87 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -19,7 +19,7 @@ const messages = {
 const i18n = createI18n({
   legacy: false,
   locale: appStore.language,
-  messages: messages,
+  messages,
   globalInjection: true,
 });
 
diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts
index 73653665..2a863c73 100644
--- a/src/lang/package/en.ts
+++ b/src/lang/package/en.ts
@@ -70,11 +70,27 @@ export default {
     interface: "Interface",
     navigation: "Navigation",
     themeColor: "Theme Color",
-    tagsView: "Tags View",
-    sidebarLogo: "Sidebar Logo",
+    showTagsView: "Show Tags View",
+    showAppLogo: "Show App Logo",
     sidebarColorScheme: "Sidebar Color Scheme",
-    watermark: "Watermark",
+    showWatermark: "Show Watermark",
     classicBlue: "Classic Blue",
     minimalWhite: "Minimal White",
+    copyConfig: "Copy Config",
+    resetConfig: "Reset Default",
+    copySuccess: "Configuration copied to clipboard",
+    resetSuccess: "Reset to default configuration",
+    copyDescription:
+      "Copy config will generate current settings code, reset will restore all settings to default",
+    confirmReset: "Are you sure to reset all settings to default? This operation cannot be undone.",
+    applyToFile: "Apply to File",
+    onlyCopy: "Only Copy",
+    leftLayout: "Left Mode",
+    topLayout: "Top Mode",
+    mixLayout: "Mix Mode",
+    configManagement: "Config Management",
+    copyConfigDescription:
+      "Generate current settings code and copy to clipboard, then overwrite src/settings.ts file",
+    resetConfigDescription: "Restore all settings to system default values",
   },
 };
diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts
index c97e2f0d..f1f9cb2e 100644
--- a/src/lang/package/zh-cn.ts
+++ b/src/lang/package/zh-cn.ts
@@ -70,11 +70,28 @@ export default {
     interface: "界面设置",
     navigation: "导航设置",
     themeColor: "主题颜色",
-    tagsView: "开启 Tags-View",
-    sidebarLogo: "侧边栏 Logo",
+    themeColorTip: "主题颜色",
+    darkMode: "暗黑模式",
+    layoutSetting: "布局设置",
     sidebarColorScheme: "侧边栏配色",
-    watermark: "开启水印",
+    showTagsView: "显示页签",
+    showAppLogo: "显示Logo",
+    showWatermark: "显示水印",
     classicBlue: "经典蓝",
     minimalWhite: "极简白",
+    copyConfig: "复制配置",
+    resetConfig: "重置默认",
+    copySuccess: "配置已复制到剪贴板",
+    resetSuccess: "已重置为默认配置",
+    copyDescription: "复制配置将生成当前设置的代码，重置将恢复所有设置为默认值",
+    confirmReset: "确定要重置所有设置为默认值吗？此操作不可恢复。",
+    applyToFile: "应用到文件",
+    onlyCopy: "仅复制",
+    leftLayout: "左侧模式",
+    topLayout: "顶部模式",
+    mixLayout: "混合模式",
+    configManagement: "配置管理",
+    copyConfigDescription: "生成当前设置的代码并复制到剪贴板，然后覆盖 src/settings.ts 文件",
+    resetConfigDescription: "恢复所有设置为系统默认值",
   },
 };
diff --git a/src/layout/components/NavBar/components/NavbarRight.vue b/src/layout/components/NavBar/components/NavbarRight.vue
deleted file mode 100644
index 596277c9..00000000
--- a/src/layout/components/NavBar/components/NavbarRight.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <div :class="['navbar__right', navbarRightClass]">
-    <!-- 桌面端显示 -->
-    <template v-if="isDesktop">
-      <!-- 搜索 -->
-      <MenuSearch />
-
-      <!-- 全屏 -->
-      <Fullscreen />
-
-      <!-- 布局大小 -->
-      <SizeSelect />
-
-      <!-- 语言选择 -->
-      <LangSelect />
-
-      <!-- 通知下拉 -->
-      <Notification />
-    </template>
-
-    <!-- 用户头像（个人中心、退出登录等） -->
-    <el-dropdown trigger="click">
-      <div class="user-profile">
-        <img class="user-profile__avatar" :src="userStore.userInfo.avatar" />
-        <span class="user-profile__name">{{ userStore.userInfo.username }}</span>
-      </div>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item @click="handleProfileClick">
-            {{ t("navbar.profile") }}
-          </el-dropdown-item>
-          <el-dropdown-item divided @click="logout">
-            {{ t("navbar.logout") }}
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-
-    <!-- 设置面板 -->
-    <div v-if="defaultSettings.showSettings" @click="settingStore.settingsVisible = true">
-      <div class="i-svg:setting" />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-const { t } = useI18n();
-import defaultSettings from "@/settings";
-import { DeviceEnum } from "@/enums/settings/device.enum";
-import { useAppStore, useSettingsStore, useUserStore } from "@/store";
-
-import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
-
-const appStore = useAppStore();
-const settingStore = useSettingsStore();
-const userStore = useUserStore();
-
-const route = useRoute();
-const router = useRouter();
-const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);
-
-/**
- * 打开个人中心页面
- */
-function handleProfileClick() {
-  router.push({ name: "Profile" });
-}
-
-// 根据主题和侧边栏配色方案选择 navbar 右侧的样式类
-const navbarRightClass = computed(() => {
-  // 如果暗黑主题
-  if (settingStore.theme === ThemeMode.DARK) {
-    return "navbar__right--white";
-  }
-
-  // 如果侧边栏是经典蓝
-  if (settingStore.sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
-    return "navbar__right--white";
-  }
-});
-
-/**
- * 退出登录
- */
-function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-    lockScroll: false,
-  }).then(() => {
-    userStore.logout().then(() => {
-      router.push(`/login?redirect=${route.fullPath}`);
-    });
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-.navbar__right {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & > * {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 40px;
-    height: $navbar-height;
-    color: var(--el-text-color);
-    text-align: center;
-    cursor: pointer;
-
-    &:hover {
-      background: rgb(0 0 0 / 10%);
-    }
-  }
-  .user-profile {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 0 13px;
-
-    &__avatar {
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-    }
-
-    &__name {
-      margin-left: 10px;
-    }
-  }
-}
-
-.layout-top .navbar__right--white > *,
-.layout-mix .navbar__right--white > * {
-  color: #fff;
-}
-
-.layout-top .navbar__right--white :deep([class^="i-svg:"]),
-.layout-mix .navbar__right--white :deep([class^="i-svg:"]) {
-  color: #fff !important;
-}
-
-.dark .navbar__right > *:hover {
-  color: #ccc;
-}
-</style>
diff --git a/src/layout/components/NavBar/index.vue b/src/layout/components/NavBar/index.vue
deleted file mode 100644
index 5a4a73e1..00000000
--- a/src/layout/components/NavBar/index.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="navbar">
-    <div class="navbar__left">
-      <!-- 展开/收缩菜单  -->
-      <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
-      <!-- 面包屑 -->
-      <Breadcrumb />
-    </div>
-    <!-- 导航栏右侧 -->
-    <NavbarRight />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useAppStore } from "@/store";
-
-const appStore = useAppStore();
-
-// 侧边栏是否打开
-const isSidebarOpened = computed(() => appStore.sidebar.opened);
-
-// 展开/收缩菜单
-function toggleSideBar() {
-  appStore.toggleSidebar();
-}
-</script>
-
-<style lang="scss" scoped>
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  height: $navbar-height;
-  background: var(--el-bg-color);
-
-  &__left {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>
diff --git a/src/layout/components/Settings/components/LayoutSelect.vue b/src/layout/components/Settings/components/LayoutSelect.vue
deleted file mode 100644
index 488341cc..00000000
--- a/src/layout/components/Settings/components/LayoutSelect.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <div class="layout-select">
-    <el-tooltip
-      v-for="item in layoutOptions"
-      :key="item.value"
-      :content="item.label"
-      placement="bottom"
-    >
-      <div
-        role="button"
-        tabindex="0"
-        :class="['layout-item', item.className, { 'is-active': modelValue === item.value }]"
-        @click="handleLayoutChange(item.value)"
-        @keydown.enter.space="handleLayoutChange(item.value)"
-      >
-        <div class="layout-item-part" />
-        <div class="layout-item-part" />
-      </div>
-    </el-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { LayoutMode } from "@/enums/settings/layout.enum";
-
-interface LayoutOption {
-  value: LayoutMode;
-  label: string;
-  className: string;
-}
-
-const layoutOptions: LayoutOption[] = [
-  { value: LayoutMode.LEFT, label: "左侧模式", className: "left" },
-  { value: LayoutMode.TOP, label: "顶部模式", className: "top" },
-  { value: LayoutMode.MIX, label: "混合模式", className: "mix" },
-];
-
-const modelValue = defineModel<LayoutMode>("modelValue", {
-  required: true,
-  default: () => LayoutMode.LEFT,
-});
-
-function handleLayoutChange(layout: LayoutMode) {
-  modelValue.value = layout;
-}
-</script>
-
-<style scoped lang="scss">
-.layout-select {
-  display: flex;
-  gap: 10px;
-  justify-content: space-evenly;
-  padding: 10px 0;
-  --layout-primary: #1b2a47;
-  --layout-background: #f0f2f5;
-  --layout-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-  --layout-hover: #e3f1f9;
-}
-
-.layout-item {
-  position: relative;
-  width: 18%;
-  height: 50px;
-  cursor: pointer;
-  background: var(--layout-background);
-  border-radius: 8px;
-  box-shadow: var(--layout-shadow);
-
-  transition:
-    transform 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-
-  &:hover {
-    background-color: var(--layout-hover);
-    transform: scale(1.02); /* 稍微放大，避免过于夸张 */
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--el-color-primary);
-  }
-
-  &-part {
-    position: absolute;
-    background: var(--layout-primary);
-    border-radius: 4px; /* 保持和父容器一致的圆角 */
-    box-shadow: var(--layout-shadow);
-    transition: all 0.3s ease;
-  }
-
-  &.left {
-    .layout-item-part {
-      &:first-child {
-        width: 30%;
-        height: 100%;
-        border-radius: 4px 0 0 4px; /* 左边部分圆角 */
-      }
-      &:last-child {
-        top: 0;
-        right: 0;
-        width: 70%;
-        height: 30%;
-        background: #fff;
-        border-radius: 0 4px 4px 0; /* 右边部分圆角 */
-      }
-    }
-  }
-
-  &.top {
-    .layout-item-part:first-child {
-      width: 100%;
-      height: 30%;
-      border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
-    }
-  }
-
-  &.mix {
-    .layout-item-part {
-      &:first-child {
-        width: 100%;
-        height: 30%;
-        border-radius: 4px 4px 0 0; /* 顶部部分圆角 */
-      }
-      &:last-child {
-        bottom: 0;
-        left: 0;
-        width: 30%;
-        height: 70%;
-        border-radius: 0 0 4px 4px; /* 底部部分圆角 */
-      }
-    }
-  }
-}
-
-.is-active {
-  background-color: var(--layout-hover);
-  border: 2px solid var(--el-color-primary);
-  transform: scale(1.05); /* 轻微放大 */
-}
-</style>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
deleted file mode 100644
index 06554be0..00000000
--- a/src/layout/components/Settings/index.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-  <el-drawer
-    v-model="drawerVisible"
-    size="300"
-    :title="t('settings.project')"
-    :before-close="handleCloseDrawer"
-  >
-    <section class="config-section">
-      <el-divider>{{ t("settings.theme") }}</el-divider>
-
-      <div class="flex-center">
-        <el-switch
-          v-model="isDark"
-          active-icon="Moon"
-          inactive-icon="Sunny"
-          @change="handleThemeChange"
-        />
-      </div>
-    </section>
-
-    <!-- 界面设置 -->
-    <section class="config-section">
-      <el-divider>{{ t("settings.interface") }}</el-divider>
-
-      <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.themeColor") }}</span>
-        <el-color-picker
-          v-model="selectedThemeColor"
-          :predefine="colorPresets"
-          popper-class="theme-picker-dropdown"
-        />
-      </div>
-
-      <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.tagsView") }}</span>
-        <el-switch v-model="settingsStore.tagsView" />
-      </div>
-
-      <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.sidebarLogo") }}</span>
-        <el-switch v-model="settingsStore.sidebarLogo" />
-      </div>
-
-      <div class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.watermark") }}</span>
-        <el-switch v-model="settingsStore.watermarkEnabled" />
-      </div>
-      <div v-if="!isDark" class="config-item flex-x-between">
-        <span class="text-xs">{{ t("settings.sidebarColorScheme") }}</span>
-        <el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
-          <el-radio :value="SidebarColor.CLASSIC_BLUE">
-            {{ t("settings.classicBlue") }}
-          </el-radio>
-          <el-radio :value="SidebarColor.MINIMAL_WHITE">
-            {{ t("settings.minimalWhite") }}
-          </el-radio>
-        </el-radio-group>
-      </div>
-    </section>
-
-    <!-- 布局设置 -->
-    <section class="config-section">
-      <el-divider>{{ t("settings.navigation") }}</el-divider>
-      <LayoutSelect v-model="settingsStore.layout" @update:model-value="handleLayoutChange" />
-    </section>
-  </el-drawer>
-</template>
-
-<script setup lang="ts">
-const { t } = useI18n();
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { ThemeMode } from "@/enums/settings/theme.enum";
-import { SidebarColor } from "@/enums/settings/theme.enum";
-import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
-// 颜色预设
-const colorPresets = [
-  "#4080FF",
-  "#626AEF",
-  "#ff4500",
-  "#ff8c00",
-  "#00ced1",
-  "#1e90ff",
-  "#c71585",
-  "rgb(255, 120, 0)",
-  "hsva(120, 40, 94)",
-];
-
-const route = useRoute();
-const appStore = useAppStore();
-const settingsStore = useSettingsStore();
-const permissionStore = usePermissionStore();
-
-const isDark = ref<boolean>(settingsStore.theme === ThemeMode.DARK);
-const sidebarColor = ref(settingsStore.sidebarColorScheme);
-
-const selectedThemeColor = computed({
-  get: () => settingsStore.themeColor,
-  set: (value) => settingsStore.changeThemeColor(value),
-});
-
-const drawerVisible = computed({
-  get: () => settingsStore.settingsVisible,
-  set: (value) => (settingsStore.settingsVisible = value),
-});
-
-/**
- * 处理主题切换
- *
- * @param isDark 是否启用暗黑模式
- */
-const handleThemeChange = (isDark: string | number | boolean) => {
-  settingsStore.changeTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
-};
-
-/**
- * 更改侧边栏颜色
- *
- * @param val 颜色方案名称
- */
-const changeSidebarColor = (val: any) => {
-  settingsStore.changeSidebarColor(val);
-};
-
-/**
- * 切换布局
- *
- * @param layout - 布局模式
- */
-const handleLayoutChange = (layout: LayoutMode) => {
-  settingsStore.changeLayout(layout);
-  if (layout === LayoutMode.MIX && route.name) {
-    const topLevelRoute = findTopLevelRoute(permissionStore.routes, route.name as string);
-    if (appStore.activeTopMenuPath !== topLevelRoute.path) {
-      appStore.activeTopMenu(topLevelRoute.path);
-    }
-  }
-};
-
-/**
- * 查找路由的顶层父路由
- *
- * @param tree 树形数据
- * @param findName 查找的名称
- */
-function findTopLevelRoute(tree: any[], findName: string) {
-  let parentMap: any = {};
-
-  function buildParentMap(node: any, parent: any) {
-    parentMap[node.name] = parent;
-
-    if (node.children) {
-      for (let i = 0; i < node.children.length; i++) {
-        buildParentMap(node.children[i], node);
-      }
-    }
-  }
-
-  for (let i = 0; i < tree.length; i++) {
-    buildParentMap(tree[i], null);
-  }
-
-  let currentNode = parentMap[findName];
-  while (currentNode) {
-    if (!parentMap[currentNode.name]) {
-      return currentNode;
-    }
-    currentNode = parentMap[currentNode.name];
-  }
-  return null;
-}
-
-/**
- * 关闭抽屉前的回调
- */
-const handleCloseDrawer = () => {
-  settingsStore.settingsVisible = false;
-};
-</script>
-
-<style lang="scss" scoped>
-.config-section {
-  margin-bottom: 24px;
-
-  .config-item {
-    padding: 12px 0;
-    border-bottom: 1px solid var(--el-border-color-light);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}
-</style>
diff --git a/src/layout/components/Sidebar/components/SidebarMenu.vue b/src/layout/components/Sidebar/components/SidebarMenu.vue
deleted file mode 100644
index 4c8b36f5..00000000
--- a/src/layout/components/Sidebar/components/SidebarMenu.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<!-- 菜单组件 -->
-<template>
-  <el-menu
-    ref="menuRef"
-    :default-active="currentRoute.path"
-    :collapse="!appStore.sidebar.opened"
-    :background-color="
-      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-        ? variables['menu-background']
-        : undefined
-    "
-    :text-color="
-      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-        ? variables['menu-text']
-        : undefined
-    "
-    :active-text-color="
-      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-        ? variables['menu-active-text']
-        : undefined
-    "
-    :popper-effect="theme"
-    :unique-opened="false"
-    :collapse-transition="false"
-    :mode="menuMode"
-    @open="onMenuOpen"
-    @close="onMenuClose"
-  >
-    <!-- 菜单项 -->
-    <SidebarMenuItem
-      v-for="route in data"
-      :key="route.path"
-      :item="route"
-      :base-path="resolveFullPath(route.path)"
-    />
-  </el-menu>
-</template>
-
-<script lang="ts" setup>
-import path from "path-browserify";
-import type { MenuInstance } from "element-plus";
-import type { RouteRecordRaw } from "vue-router";
-
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { SidebarColor } from "@/enums/settings/theme.enum";
-import { useSettingsStore, useAppStore } from "@/store";
-import { isExternal } from "@/utils/index";
-
-import variables from "@/styles/variables.module.scss";
-
-const props = defineProps({
-  data: {
-    type: Array<RouteRecordRaw>,
-    default: () => [],
-  },
-  basePath: {
-    type: String,
-    required: true,
-    example: "/system",
-  },
-});
-
-const menuRef = ref<MenuInstance>();
-const settingsStore = useSettingsStore();
-const appStore = useAppStore();
-const currentRoute = useRoute();
-
-// 存储已展开的菜单项索引
-const expandedMenuIndexes = ref<string[]>([]);
-
-// 根据布局模式设置菜单的显示方式：顶部布局使用水平模式，其他使用垂直模式
-const menuMode = computed(() => {
-  return settingsStore.layout === LayoutMode.TOP ? "horizontal" : "vertical";
-});
-
-// 获取主题
-const theme = computed(() => settingsStore.theme);
-
-// 获取浅色主题下的侧边栏配色方案
-const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
-
-/**
- * 获取完整路径
- *
- * @param routePath 当前路由的相对路径  /user
- * @returns 完整的绝对路径 D://vue3-element-admin/system/user
- */
-function resolveFullPath(routePath: string) {
-  if (isExternal(routePath)) {
-    return routePath;
-  }
-  if (isExternal(props.basePath)) {
-    return props.basePath;
-  }
-
-  // 解析路径，生成完整的绝对路径
-  return path.resolve(props.basePath, routePath);
-}
-
-/**
- * 打开菜单
- *
- * @param index 当前展开的菜单项索引
- */
-const onMenuOpen = (index: string) => {
-  expandedMenuIndexes.value.push(index);
-};
-
-/**
- * 关闭菜单
- *
- * @param index 当前收起的菜单项索引
- */
-const onMenuClose = (index: string) => {
-  expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index);
-};
-
-/**
- * 监听菜单模式变化：当菜单模式切换为水平模式时，关闭所有展开的菜单项，
- * 避免在水平模式下菜单项显示错位。
- *
- * @see https://gitee.com/youlaiorg/vue3-element-admin/issues/IAJ1DR
- */
-watch(
-  () => menuMode.value,
-  () => {
-    if (menuMode.value === "horizontal") {
-      expandedMenuIndexes.value.forEach((item) => menuRef.value!.close(item));
-    }
-  }
-);
-</script>
diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
deleted file mode 100644
index 2fd657d1..00000000
--- a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<!-- 混合布局顶部菜单 -->
-<template>
-  <el-scrollbar>
-    <el-menu
-      mode="horizontal"
-      :default-active="activePath"
-      :background-color="
-        theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-          ? variables['menu-background']
-          : undefined
-      "
-      :text-color="
-        theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-          ? variables['menu-text']
-          : undefined
-      "
-      :active-text-color="
-        theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
-          ? variables['menu-active-text']
-          : undefined
-      "
-      @select="handleMenuSelect"
-    >
-      <el-menu-item v-for="route in topMenus" :key="route.path" :index="route.path">
-        <template #title>
-          <template v-if="route.meta && route.meta.icon">
-            <el-icon v-if="route.meta.icon.startsWith('el-icon')" class="sub-el-icon">
-              <component :is="route.meta.icon.replace('el-icon-', '')" />
-            </el-icon>
-            <div v-else :class="`i-svg:${route.meta.icon}`" />
-          </template>
-          <span v-if="route.path === '/'">首页</span>
-          <span v-else-if="route.meta && route.meta.title" class="ml-1">
-            {{ translateRouteTitle(route.meta.title) }}
-          </span>
-        </template>
-      </el-menu-item>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<script lang="ts" setup>
-import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
-import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
-import { translateRouteTitle } from "@/utils/i18n";
-import variables from "@/styles/variables.module.scss";
-import { SidebarColor } from "@/enums/settings/theme.enum";
-
-const router = useRouter();
-const appStore = useAppStore();
-const permissionStore = usePermissionStore();
-const settingsStore = useSettingsStore();
-
-// 当前激活的顶部菜单路径
-const activePath = computed(() => appStore.activeTopMenuPath);
-
-// 获取主题
-const theme = computed(() => settingsStore.theme);
-
-// 获取浅色主题下的侧边栏配色方案
-const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
-
-// 顶部菜单列表
-const topMenus = ref<RouteRecordRaw[]>([]);
-
-// 获取当前路由路径的顶部菜单路径
-const activeTopMenuPath =
-  useRoute().path.split("/").filter(Boolean).length > 1
-    ? useRoute().path.match(/^\/[^/]+/)?.[0] || "/"
-    : "/";
-
-// 设置当前激活的顶部菜单路径
-appStore.activeTopMenu(activeTopMenuPath);
-
-/**
- * 处理菜单点击事件，切换顶部菜单并加载对应的左侧菜单
- * @param routePath 点击的菜单路径
- */
-const handleMenuSelect = (routePath: string) => {
-  appStore.activeTopMenu(routePath); // 设置激活的顶部菜单
-  activateFirstLevelMenu(routePath); // 激活一级菜单并设置左侧二级菜单
-};
-
-/**
- * 激活一级菜单并设置左侧二级菜单
- * @param routePath 点击的菜单路径
- */
-function activateFirstLevelMenu(routePath: string) {
-  permissionStore.updateSideMenu(routePath); // 更新左侧菜单
-  navigateToFirstLeftMenu(permissionStore.sideMenuRoutes); // 跳转到左侧第一个菜单
-}
-
-/**
- * 跳转到左侧第一个可访问的菜单
- * @param menus 左侧菜单列表
- */
-const navigateToFirstLeftMenu = (menus: RouteRecordRaw[]) => {
-  if (menus.length === 0) return;
-
-  const [firstMenu] = menus;
-
-  // 如果第一个菜单有子菜单，递归跳转到第一个子菜单
-  if (firstMenu.children && firstMenu.children.length > 0) {
-    navigateToFirstLeftMenu(firstMenu.children as RouteRecordRaw[]);
-  } else if (firstMenu.name) {
-    router.push({
-      name: firstMenu.name,
-      query:
-        typeof firstMenu.meta?.params === "object"
-          ? (firstMenu.meta.params as LocationQueryRaw)
-          : undefined,
-    });
-  }
-};
-
-onMounted(() => {
-  topMenus.value = permissionStore.routes.filter((item) => !item.meta || !item.meta.hidden);
-});
-</script>
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
deleted file mode 100644
index 606a7b74..00000000
--- a/src/layout/components/Sidebar/index.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <div :class="{ 'has-logo': sidebarLogo }">
-    <!-- 混合布局 -->
-    <div v-if="layout == LayoutMode.MIX" class="flex w-full">
-      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
-      <SidebarMixTopMenu class="flex-1" />
-      <NavbarRight />
-    </div>
-
-    <!-- 顶部布局 || 左侧布局 -->
-    <template v-else>
-      <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
-      <el-scrollbar>
-        <SidebarMenu :data="permissionStore.routes" base-path="" />
-      </el-scrollbar>
-
-      <!-- 顶部导航 -->
-      <NavbarRight v-if="layout == LayoutMode.TOP" />
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { LayoutMode } from "@/enums/settings/layout.enum";
-import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
-
-import NavbarRight from "../NavBar/components/NavbarRight.vue";
-
-const appStore = useAppStore();
-const settingsStore = useSettingsStore();
-const permissionStore = usePermissionStore();
-
-const sidebarLogo = computed(() => settingsStore.sidebarLogo);
-const layout = computed(() => settingsStore.layout);
-
-const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
-</script>
-
-<style lang="scss" scoped>
-.has-logo {
-  .el-scrollbar {
-    height: calc(100vh - $navbar-height);
-  }
-}
-</style>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
deleted file mode 100644
index d020958e..00000000
--- a/src/layout/components/TagsView/index.vue
+++ /dev/null
@@ -1,540 +0,0 @@
-<template>
-  <div class="tags-container">
-    <!-- 水平滚动容器 -->
-    <el-scrollbar ref="scrollbarRef" class="scroll-container" @wheel="handleScroll">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tagRef"
-        :key="tag.fullPath"
-        :class="'tags-item ' + (tagsViewStore.isActive(tag) ? 'active' : '')"
-        :to="{ path: tag.path, query: tag.query }"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openContentMenu(tag, $event)"
-      >
-        <!-- 标签文本 -->
-        <span class="tag-text">{{ translateRouteTitle(tag.title) }}</span>
-        <!-- 关闭按钮，固定标签不显示 -->
-        <span
-          v-if="!isAffix(tag)"
-          class="tag-close-icon"
-          @click.prevent.stop="closeSelectedTag(tag)"
-        >
-          ×
-        </span>
-      </router-link>
-    </el-scrollbar>
-
-    <!-- 标签右键菜单 -->
-    <ul
-      v-show="contentMenuVisible"
-      class="contextmenu"
-      :style="{ left: left + 'px', top: top + 'px' }"
-    >
-      <li @click="refreshSelectedTag(selectedTag)">
-        <div class="i-svg:refresh" />
-        刷新
-      </li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        <div class="i-svg:close" />
-        关闭
-      </li>
-      <li @click="closeOtherTags">
-        <div class="i-svg:close_other" />
-        关闭其它
-      </li>
-      <li v-if="!isFirstView()" @click="closeLeftTags">
-        <div class="i-svg:close_left" />
-        关闭左侧
-      </li>
-      <li v-if="!isLastView()" @click="closeRightTags">
-        <div class="i-svg:close_right" />
-        关闭右侧
-      </li>
-      <li @click="closeAllTags(selectedTag)">
-        <div class="i-svg:close_all" />
-        关闭所有
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRoute, useRouter, RouteRecordRaw } from "vue-router";
-import { resolve } from "path-browserify";
-import { translateRouteTitle } from "@/utils/i18n";
-
-import { usePermissionStore, useTagsViewStore, useSettingsStore, useAppStore } from "@/store";
-
-const instance = getCurrentInstance();
-const proxy = instance?.proxy;
-const router = useRouter();
-const route = useRoute();
-
-// 权限、标签页状态管理
-const permissionStore = usePermissionStore();
-const tagsViewStore = useTagsViewStore();
-const appStore = useAppStore();
-
-// 响应式引用访问已访问的标签视图列表
-const { visitedViews } = storeToRefs(tagsViewStore);
-const settingsStore = useSettingsStore();
-const layout = computed(() => settingsStore.layout);
-
-// 当前选中的标签
-const selectedTag = ref<TagView>({
-  path: "",
-  fullPath: "",
-  name: "",
-  title: "",
-  affix: false,
-  keepAlive: false,
-});
-
-// 固定标签列表
-const affixTags = ref<TagView[]>([]);
-// 右键菜单位置
-const left = ref(0);
-const top = ref(0);
-
-// 监听路由变化，添加标签并移动到当前标签位置
-watch(
-  route,
-  () => {
-    addTags();
-    moveToCurrentTag();
-  },
-  {
-    immediate: true, // 初始化立即执行
-  }
-);
-
-// 右键菜单显示状态
-const contentMenuVisible = ref(false);
-// 监听右键菜单显示状态，添加或移除点击事件监听器
-watch(contentMenuVisible, (value) => {
-  if (value) {
-    document.body.addEventListener("click", closeContentMenu);
-  } else {
-    document.body.removeEventListener("click", closeContentMenu);
-  }
-});
-
-/**
- * 过滤出需要固定的标签
- * @param routes 路由配置
- * @param basePath 基础路径
- * @returns 固定标签列表
- */
-function filterAffixTags(routes: RouteRecordRaw[], basePath = "/") {
-  let tags: TagView[] = [];
-  routes.forEach((route: RouteRecordRaw) => {
-    const tagPath = resolve(basePath, route.path);
-    // 当路由设置了meta.affix属性时，加入固定标签列表
-    if (route.meta?.affix) {
-      tags.push({
-        path: tagPath,
-        fullPath: tagPath,
-        name: String(route.name),
-        title: route.meta?.title || "no-name",
-        affix: route.meta?.affix,
-        keepAlive: route.meta?.keepAlive,
-      });
-    }
-    // 递归处理子路由
-    if (route.children) {
-      const tempTags = filterAffixTags(route.children, basePath + route.path);
-      if (tempTags.length >= 1) {
-        tags = [...tags, ...tempTags];
-      }
-    }
-  });
-  return tags;
-}
-
-/**
- * 初始化标签列表，添加需要固定的标签
- */
-function initTags() {
-  const tags: TagView[] = filterAffixTags(permissionStore.routes);
-  affixTags.value = tags;
-  for (const tag of tags) {
-    // 必须有标签名称才添加
-    if (tag.name) {
-      tagsViewStore.addVisitedView(tag);
-    }
-  }
-}
-
-/**
- * 添加当前路由到标签列表
- */
-function addTags() {
-  if (route.meta.title) {
-    tagsViewStore.addView({
-      name: route.name as string,
-      title: route.meta.title,
-      path: route.path,
-      fullPath: route.fullPath,
-      affix: route.meta?.affix,
-      keepAlive: route.meta?.keepAlive,
-      query: route.query,
-    });
-  }
-}
-
-/**
- * the purpose of this function is make sure to move the current active tag into the view
- */
-function moveToCurrentTag() {
-  // 使用 nextTick() 确保在更新 tagsView 组件之前滚动到正确位置
-  nextTick(() => {
-    for (const tag of visitedViews.value) {
-      if (tag.path === route.path) {
-        // 当查询参数不同时更新标签
-        if (tag.fullPath !== route.fullPath) {
-          tagsViewStore.updateVisitedView({
-            name: route.name as string,
-            title: route.meta.title || "",
-            path: route.path,
-            fullPath: route.fullPath,
-            affix: route.meta?.affix,
-            keepAlive: route.meta?.keepAlive,
-            query: route.query,
-          });
-        }
-      }
-    }
-  });
-}
-
-/**
- * 判断标签是否为固定标签
- * @param tag 标签对象
- * @returns 是否为固定标签
- */
-function isAffix(tag: TagView) {
-  return tag?.affix;
-}
-
-/**
- * 判断选中的标签是否为第一个可见标签
- * @returns 是否为第一个可见标签
- */
-function isFirstView() {
-  return (
-    selectedTag.value.path === "/dashboard" ||
-    selectedTag.value.fullPath === tagsViewStore.visitedViews[1]?.fullPath
-  );
-}
-
-/**
- * 判断选中的标签是否为最后一个可见标签
- * @returns 是否为最后一个可见标签
- */
-function isLastView() {
-  return (
-    selectedTag.value.fullPath ===
-    tagsViewStore.visitedViews[tagsViewStore.visitedViews.length - 1]?.fullPath
-  );
-}
-
-/**
- * 刷新选中的标签页
- * @param view 标签对象
- */
-function refreshSelectedTag(view: TagView) {
-  tagsViewStore.delCachedView(view);
-  const { fullPath } = view;
-  nextTick(() => {
-    router.replace("/redirect" + fullPath);
-  });
-}
-
-/**
- * 关闭选中的标签页
- * @param view 标签对象
- */
-function closeSelectedTag(view: TagView) {
-  tagsViewStore.delView(view).then((res: any) => {
-    if (tagsViewStore.isActive(view)) {
-      tagsViewStore.toLastView(res.visitedViews, view);
-    }
-  });
-}
-
-/**
- * 关闭选中标签左侧的所有标签
- */
-function closeLeftTags() {
-  tagsViewStore.delLeftViews(selectedTag.value).then((res: any) => {
-    if (!res.visitedViews.find((item: any) => item.path === route.path)) {
-      tagsViewStore.toLastView(res.visitedViews);
-    }
-  });
-}
-
-/**
- * 关闭选中标签右侧的所有标签
- */
-function closeRightTags() {
-  tagsViewStore.delRightViews(selectedTag.value).then((res: any) => {
-    if (!res.visitedViews.find((item: any) => item.path === route.path)) {
-      tagsViewStore.toLastView(res.visitedViews);
-    }
-  });
-}
-
-/**
- * 关闭除选中标签外的所有标签
- */
-function closeOtherTags() {
-  router.push(selectedTag.value);
-  tagsViewStore.delOtherViews(selectedTag.value).then(() => {
-    moveToCurrentTag();
-  });
-}
-
-/**
- * 关闭所有标签
- * @param view 标签对象
- */
-function closeAllTags(view: TagView) {
-  tagsViewStore.delAllViews().then((res: any) => {
-    tagsViewStore.toLastView(res.visitedViews, view);
-  });
-}
-
-/**
- * 打开右键菜单
- * @param tag 标签对象
- * @param e 鼠标事件
- */
-function openContentMenu(tag: TagView, e: MouseEvent) {
-  const menuMinWidth = 105;
-  const offsetLeft = proxy?.$el.getBoundingClientRect().left; // 容器左边距
-  const offsetWidth = proxy?.$el.offsetWidth; // 容器宽度
-  const maxLeft = offsetWidth - menuMinWidth; // 左边界
-  const leftPosition = e.clientX - offsetLeft + 15; // 15: 右边距
-
-  // 确保菜单不超出容器右边界
-  if (leftPosition > maxLeft) {
-    left.value = maxLeft;
-  } else {
-    left.value = leftPosition;
-  }
-
-  // 混合模式下，需要减去顶部菜单(fixed)的高度
-  if (layout.value === "mix") {
-    top.value = e.clientY - 50;
-  } else {
-    top.value = e.clientY;
-  }
-
-  contentMenuVisible.value = true;
-  selectedTag.value = tag;
-}
-
-/**
- * 关闭右键菜单
- */
-function closeContentMenu() {
-  contentMenuVisible.value = false;
-}
-
-/**
- * 处理鼠标滚轮事件，实现水平滚动
- */
-const scrollbarRef = ref();
-function handleScroll(event: any) {
-  closeContentMenu();
-  // 检查是否有横向滚动条
-  if (scrollbarRef.value.wrapRef.scrollWidth > scrollbarRef.value.wrapRef.clientWidth) {
-    const wheelDelta = event.wheelDelta || 0; // 向上滚动时为120，向下滚动时为-120
-    const scrollLeft = scrollbarRef.value.wrapRef.scrollLeft; // 当前滚动条到左边的距离
-    // 设置滚动条到左边的距离
-    scrollbarRef.value.setScrollLeft(scrollLeft - wheelDelta);
-  }
-}
-
-/**
- * 寻找最外层父节点
- * @param tree 路由树
- * @param findName 要查找的节点名称
- * @returns 最外层父节点
- */
-function findOutermostParent(tree: any[], findName: string) {
-  let parentMap: any = {};
-
-  function buildParentMap(node: any, parent: any) {
-    parentMap[node.name] = parent;
-
-    if (node.children) {
-      for (let i = 0; i < node.children.length; i++) {
-        buildParentMap(node.children[i], node);
-      }
-    }
-  }
-
-  for (let i = 0; i < tree.length; i++) {
-    buildParentMap(tree[i], null);
-  }
-
-  let currentNode = parentMap[findName];
-  while (currentNode) {
-    if (!parentMap[currentNode.name]) {
-      return currentNode;
-    }
-    currentNode = parentMap[currentNode.name];
-  }
-
-  return null;
-}
-
-/**
- * 重新激活顶部菜单
- * @param newVal 新的路由名
- */
-const againActiveTop = (newVal: string) => {
-  if (layout.value !== "mix") return;
-  const parent = findOutermostParent(permissionStore.routes, newVal);
-  if (appStore.activeTopMenu !== parent.path) {
-    appStore.activeTopMenu(parent.path);
-  }
-};
-
-// 如果是混合模式，更改selectedTag，需要对应高亮的activeTop
-watch(
-  () => route.name,
-  (newVal) => {
-    if (newVal) {
-      againActiveTop(newVal as string);
-    }
-  },
-  {
-    deep: true,
-  }
-);
-
-// 组件挂载时初始化标签
-onMounted(() => {
-  initTags();
-});
-</script>
-
-<style lang="scss" scoped>
-.tags-container {
-  width: 100%;
-  height: $tags-view-height;
-  background-color: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  box-shadow: 0 1px 1px var(--el-box-shadow-light);
-
-  /* 滚动容器样式 */
-  .scroll-container {
-    white-space: nowrap;
-  }
-
-  /* 标签项样式 */
-  .tags-item {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    height: 26px;
-    padding: 0 8px;
-    margin-top: 4px;
-    margin-left: 5px;
-    font-size: 12px;
-    line-height: 26px;
-    color: var(--el-text-color-primary);
-    background: var(--el-bg-color);
-    border: 1px solid var(--el-border-color);
-
-    /* 第一个和最后一个标签的边距调整 */
-    &:first-of-type {
-      margin-left: 15px;
-    }
-    &:last-of-type {
-      margin-right: 15px;
-    }
-
-    /* 标签文本样式 */
-    .tag-text {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    /* 关闭按钮样式 */
-    .tag-close-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      margin-left: 5px;
-      font-size: 12px;
-      font-weight: bold;
-      color: var(--el-text-color-secondary);
-      cursor: pointer;
-      border-radius: 50%;
-      transition: all 0.2s ease;
-
-      &:hover {
-        color: var(--el-color-white);
-        background-color: var(--el-text-color-placeholder);
-      }
-    }
-
-    /* 活动标签样式 */
-    &.active {
-      color: var(--el-color-white);
-      background-color: var(--el-color-primary);
-      border-color: var(--el-color-primary);
-      &::before {
-        position: relative;
-        display: inline-block;
-        width: 8px;
-        height: 8px;
-        margin-right: 2px;
-        content: "";
-        background: var(--el-color-white);
-        border-radius: 50%;
-      }
-
-      /* 活动标签关闭按钮样式 */
-      .tag-close-icon {
-        color: var(--el-color-white);
-
-        &:hover {
-          color: var(--el-color-white);
-          background-color: rgba(255, 255, 255, 0.3);
-        }
-      }
-    }
-  }
-
-  /* 右键菜单样式 */
-  .contextmenu {
-    position: absolute;
-    z-index: 3000;
-    padding: 5px 0;
-    margin: 0;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--el-text-color-primary);
-    list-style-type: none;
-    background: var(--el-bg-color);
-    border-radius: 4px;
-    box-shadow: var(--el-box-shadow-light);
-
-    /* 菜单项样式 */
-    li {
-      padding: 7px 16px;
-      margin: 0;
-      cursor: pointer;
-      &:hover {
-        background: var(--el-fill-color-light);
-      }
-    }
-  }
-}
-</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
deleted file mode 100644
index 9227afc8..00000000
--- a/src/layout/index.vue
+++ /dev/null
@@ -1,306 +0,0 @@
-<template>
-  <div class="layout" :class="layoutClass">
-    <!-- 移动端遮罩层 -->
-    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="handleCloseSidebar" />
-
-    <!-- 侧边栏 -->
-    <Sidebar class="layout__sidebar" />
-
-    <!-- 混合布局 -->
-    <div v-if="layout === LayoutMode.MIX" class="layout__container">
-      <!-- 左侧菜单栏 -->
-      <div class="layout__sidebar--left">
-        <el-scrollbar>
-          <SidebarMenu :data="sideMenuRoutes" :base-path="activeTopMenuPath" />
-        </el-scrollbar>
-        <!-- 侧边栏切换按钮 -->
-        <div class="layout__sidebar-toggle">
-          <Hamburger :is-active="appStore.sidebar.opened" @toggle-click="handleToggleSidebar" />
-        </div>
-      </div>
-      <!-- 主内容区域 -->
-      <div :class="{ hasTagsView: isShowTagsView }" class="layout__main">
-        <TagsView v-if="isShowTagsView" />
-        <AppMain />
-        <Settings v-if="defaultSettings.showSettings" />
-        <!-- 返回顶部按钮 -->
-        <el-backtop target=".app-main">
-          <div class="i-svg:backtop w-6 h-6" />
-        </el-backtop>
-      </div>
-    </div>
-
-    <!-- 左侧或顶部布局的主内容区 -->
-    <div v-else :class="{ hasTagsView: isShowTagsView }" class="layout__main">
-      <NavBar v-if="layout === LayoutMode.LEFT" />
-      <TagsView v-if="isShowTagsView" />
-      <AppMain />
-      <Settings v-if="defaultSettings.showSettings" />
-      <!-- 返回顶部按钮 -->
-      <el-backtop target=".app-main">
-        <div class="i-svg:backtop w-6 h-6" />
-      </el-backtop>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-// 状态管理
-import { useAppStore, useSettingsStore, usePermissionStore } from "@/store";
-
-// 配置
-import defaultSettings from "@/settings";
-
-// 枚举
-import { DeviceEnum } from "@/enums/settings/device.enum";
-import { LayoutMode } from "@/enums/settings/layout.enum";
-
-// 组件
-import NavBar from "./components/NavBar/index.vue";
-
-const appStore = useAppStore();
-const settingsStore = useSettingsStore();
-const permissionStore = usePermissionStore();
-const width = useWindowSize().width;
-
-// 常量
-const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度（大屏 >=1200px，中屏 >=992px，小屏 >=768px）
-
-// 计算属性
-const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE); // 是否为移动设备
-const isSidebarOpen = computed(() => appStore.sidebar.opened); // 侧边栏是否展开
-const isShowTagsView = computed(() => settingsStore.tagsView); // 是否显示标签视图
-const layout = computed(() => settingsStore.layout); // 当前布局模式（left、top、mix）
-const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活路径
-const sideMenuRoutes = computed(() => permissionStore.sideMenuRoutes); // 混合布局左侧菜单路由
-
-// 监听顶部菜单激活路径变化，更新混合布局左侧菜单路由
-watch(
-  () => activeTopMenuPath.value,
-  (newVal: string) => {
-    permissionStore.updateSideMenu(newVal);
-  },
-  { deep: true, immediate: true }
-);
-
-// 监听窗口宽度变化，调整设备类型和侧边栏状态
-watchEffect(() => {
-  const isDesktop = width.value >= WIDTH_DESKTOP;
-  appStore.toggleDevice(isDesktop ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE);
-  if (isDesktop) {
-    appStore.openSideBar();
-  } else {
-    appStore.closeSideBar();
-  }
-});
-
-// 监听路由变化，如果是移动设备且侧边栏展开，则关闭侧边栏
-const route = useRoute();
-watch(route, () => {
-  if (isMobile.value && isSidebarOpen.value) {
-    appStore.closeSideBar();
-  }
-});
-
-// 计算属性：布局样式
-const layoutClass = computed(() => ({
-  hideSidebar: !appStore.sidebar.opened,
-  openSidebar: appStore.sidebar.opened,
-  mobile: appStore.device === DeviceEnum.MOBILE,
-  [`layout-${settingsStore.layout}`]: true,
-}));
-
-/**
- * 处理遮罩层点击事件，关闭侧边栏
- */
-function handleCloseSidebar() {
-  appStore.closeSideBar();
-}
-
-/**
- * 处理切换侧边栏的展开/收起状态
- */
-function handleToggleSidebar() {
-  appStore.toggleSidebar();
-}
-</script>
-<style lang="scss" scoped>
-.layout {
-  width: 100%;
-  height: 100%;
-
-  &__overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.3);
-  }
-
-  &__sidebar {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 999;
-    width: $sidebar-width;
-    background-color: $menu-background;
-    transition: width 0.28s;
-
-    :deep(.el-menu) {
-      border: none;
-    }
-  }
-
-  &__main {
-    position: relative;
-    height: 100%;
-    margin-left: $sidebar-width;
-    overflow-y: auto;
-    transition: margin-left 0.28s;
-
-    .fixed-header {
-      position: sticky;
-      top: 0;
-      z-index: 9;
-      transition: width 0.28s;
-    }
-  }
-}
-
-// 占位符选择器
-%layout__sidebar--horizontal {
-  width: 100% !important;
-  height: $navbar-height;
-
-  :deep(.el-scrollbar) {
-    flex: 1;
-    height: $navbar-height;
-  }
-
-  :deep(.el-menu-item),
-  :deep(.el-sub-menu__title),
-  :deep(.el-menu--horizontal) {
-    height: $navbar-height;
-    line-height: $navbar-height;
-  }
-}
-
-.layout-top {
-  .layout__sidebar {
-    position: sticky;
-    display: flex;
-    @extend %layout__sidebar--horizontal;
-  }
-
-  .layout__main {
-    height: calc(100vh - $navbar-height);
-    margin-left: 0;
-  }
-}
-
-.layout-mix {
-  .layout__sidebar {
-    @extend %layout__sidebar--horizontal;
-  }
-
-  .layout__container {
-    display: flex;
-    height: 100%;
-    padding-top: $navbar-height;
-
-    .layout__sidebar--left {
-      position: relative;
-      width: $sidebar-width;
-      height: 100%;
-      background-color: var(--menu-background);
-
-      :deep(.el-scrollbar) {
-        height: calc(100vh - $navbar-height - 50px);
-      }
-
-      :deep(.el-menu) {
-        height: 100%;
-        border: none;
-      }
-
-      .layout__sidebar-toggle {
-        position: absolute;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 50px;
-        line-height: 50px;
-        box-shadow: 0 0 6px -2px var(--el-color-primary);
-      }
-    }
-
-    .layout__main {
-      flex: 1;
-      min-width: 0;
-      margin-left: 0;
-    }
-  }
-}
-
-.hideSidebar {
-  &.layout-left {
-    .layout__main {
-      margin-left: $sidebar-width-collapsed;
-    }
-  }
-
-  &.layout-top {
-    .layout__main {
-      margin-left: 0;
-    }
-  }
-
-  &.layout-mix {
-    .layout__sidebar {
-      width: 100%;
-    }
-
-    .layout__container {
-      .layout__sidebar--left {
-        width: $sidebar-width-collapsed;
-      }
-    }
-  }
-}
-
-.layout-left {
-  &.hideSidebar {
-    .layout__sidebar {
-      width: $sidebar-width-collapsed;
-    }
-
-    .layout__main {
-      margin-left: $sidebar-width-collapsed;
-    }
-
-    &.mobile {
-      .layout__sidebar {
-        pointer-events: none;
-        transform: translate3d(-$sidebar-width, 0, 0);
-        transition-duration: 0.3s;
-      }
-
-      .layout__main {
-        margin-left: 0;
-      }
-    }
-  }
-  &.openSidebar {
-    &.mobile {
-      .layout__main {
-        margin-left: 0;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/layout/components/Sidebar/components/SidebarLogo.vue b/src/layouts/components/AppLogo/index.vue
similarity index 52%
rename from src/layout/components/Sidebar/components/SidebarLogo.vue
rename to src/layouts/components/AppLogo/index.vue
index 5fa80e9c..1180965f 100644
--- a/src/layout/components/Sidebar/components/SidebarLogo.vue
+++ b/src/layouts/components/AppLogo/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import logo from "@/assets/logo.png";
 
 defineProps({
@@ -30,24 +30,46 @@ defineProps({
   background-color: $sidebar-logo-background;
 
   .title {
-    flex-shrink: 0; /* 防止容器在空间不足时缩小 */
+    flex-shrink: 0;
     margin-left: 10px;
     font-size: 14px;
     font-weight: bold;
     color: $sidebar-logo-text-color;
   }
 }
+</style>
 
+<style lang="scss">
+// 顶部布局和混合布局的特殊处理
 .layout-top,
 .layout-mix {
   .logo {
-    width: $sidebar-width;
-  }
+    background-color: transparent !important;
 
-  &.hideSidebar {
-    .logo {
-      width: $sidebar-width-collapsed;
+    .title {
+      color: var(--menu-text);
     }
   }
 }
+
+// 宽屏时：openSidebar 状态下显示完整Logo+文字
+.openSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width; // 210px，显示logo+文字
+  }
+}
+
+// 窄屏时：hideSidebar 状态下只显示Logo图标
+.hideSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width-collapsed; // 54px，只显示logo
+  }
+
+  // 隐藏文字，只显示图标
+  .logo .title {
+    display: none;
+  }
+}
 </style>
diff --git a/src/layout/components/AppMain/index.vue b/src/layouts/components/AppMain/index.vue
similarity index 77%
rename from src/layout/components/AppMain/index.vue
rename to src/layouts/components/AppMain/index.vue
index 398ee216..8510dc64 100644
--- a/src/layout/components/AppMain/index.vue
+++ b/src/layouts/components/AppMain/index.vue
@@ -19,7 +19,7 @@ import variables from "@/styles/variables.module.scss";
 // 缓存页面集合
 const cachedViews = computed(() => useTagsViewStore().cachedViews);
 const appMainHeight = computed(() => {
-  if (useSettingsStore().tagsView) {
+  if (useSettingsStore().showTagsView) {
     return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
   } else {
     return `calc(100vh - ${variables["navbar-height"]})`;
@@ -32,5 +32,19 @@ const appMainHeight = computed(() => {
   position: relative;
   overflow-y: auto;
   background-color: var(--el-bg-color-page);
+
+  /* 布局切换动画优化 */
+  &.animate__animated {
+    animation-duration: 0.4s;
+    animation-fill-mode: forwards;
+  }
+
+  &.animate__fadeOut {
+    animation-timing-function: ease-in;
+  }
+
+  &.animate__fadeIn {
+    animation-timing-function: ease-out;
+  }
 }
 </style>
diff --git a/src/layouts/components/Menu/BasicMenu.vue b/src/layouts/components/Menu/BasicMenu.vue
new file mode 100644
index 00000000..494ee958
--- /dev/null
+++ b/src/layouts/components/Menu/BasicMenu.vue
@@ -0,0 +1,261 @@
+<!-- 菜单组件 -->
+<template>
+  <el-menu
+    ref="menuRef"
+    :default-active="activeMenuIndex"
+    :collapse="!appStore.sidebar.opened"
+    :background-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-background']
+        : undefined
+    "
+    :text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-text']
+        : undefined
+    "
+    :active-text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-active-text']
+        : undefined
+    "
+    :popper-effect="theme"
+    :unique-opened="false"
+    :collapse-transition="false"
+    :mode="menuMode"
+    @open="onMenuOpen"
+    @close="onMenuClose"
+  >
+    <!-- 菜单项 -->
+    <MenuItem
+      v-for="route in data"
+      :key="route.path"
+      :item="route"
+      :base-path="resolveFullPath(route.path)"
+    />
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import { useRoute } from "vue-router";
+import path from "path-browserify";
+import type { MenuInstance } from "element-plus";
+import type { RouteRecordRaw } from "vue-router";
+import { SidebarColor } from "@/enums/settings/theme.enum";
+import { useSettingsStore, useAppStore } from "@/store";
+import { isExternal } from "@/utils/index";
+import MenuItem from "./components/MenuItem.vue";
+import variables from "@/styles/variables.module.scss";
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<RouteRecordRaw[]>,
+    default: () => [],
+  },
+  basePath: {
+    type: String,
+    required: true,
+    example: "/system",
+  },
+  menuMode: {
+    type: String as PropType<"vertical" | "horizontal">,
+    default: "vertical",
+    validator: (value: string) => ["vertical", "horizontal"].includes(value),
+  },
+});
+
+const menuRef = ref<MenuInstance>();
+const settingsStore = useSettingsStore();
+const appStore = useAppStore();
+const currentRoute = useRoute();
+
+// 存储已展开的菜单项索引
+const expandedMenuIndexes = ref<string[]>([]);
+
+// 获取主题
+const theme = computed(() => settingsStore.theme);
+
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
+// 计算当前激活的菜单项
+const activeMenuIndex = computed(() => {
+  const currentPath = currentRoute.path;
+
+  // 如果路由设置了 activeMenu，优先使用
+  if (currentRoute.meta?.activeMenu) {
+    return currentRoute.meta.activeMenu as string;
+  }
+
+  // 在水平模式下（顶部布局），需要找到匹配的顶级菜单
+  if (props.menuMode === "horizontal") {
+    // 首先尝试简单的路径前缀匹配
+    const pathSegments = currentPath.split("/").filter(Boolean);
+    if (pathSegments.length > 0) {
+      const topLevelPath = `/${pathSegments[0]}`;
+
+      // 检查是否有菜单项匹配这个顶级路径
+      const matchingMenu = props.data.find((menu) => {
+        const menuPath = resolveFullPath(menu.path);
+        return menuPath === topLevelPath;
+      });
+
+      if (matchingMenu) {
+        console.log("🎯 Top menu matched:", topLevelPath, "for route:", currentPath);
+        return topLevelPath;
+      }
+    }
+
+    // 如果简单匹配失败，使用详细匹配
+    const findMatchingTopMenu = (menus: RouteRecordRaw[], targetPath: string): string | null => {
+      for (const menu of menus) {
+        const menuPath = resolveFullPath(menu.path);
+
+        // 精确匹配
+        if (targetPath === menuPath) {
+          return menuPath;
+        }
+
+        // 路径前缀匹配（子路径匹配父菜单）
+        if (targetPath.startsWith(menuPath + "/")) {
+          return menuPath;
+        }
+
+        // 如果有子菜单，检查子菜单是否匹配
+        if (menu.children && menu.children.length > 0) {
+          const hasMatchingChild = menu.children.some((child) => {
+            // 对于子菜单，需要正确解析路径
+            let childPath;
+            if (child.path.startsWith("/")) {
+              // 如果子路径是绝对路径，直接使用
+              childPath = child.path;
+            } else {
+              // 如果是相对路径，基于父菜单路径解析
+              childPath = path.resolve(menuPath, child.path);
+            }
+            return targetPath === childPath || targetPath.startsWith(childPath + "/");
+          });
+
+          if (hasMatchingChild) {
+            return menuPath;
+          }
+        }
+      }
+      return null;
+    };
+
+    const matchedMenu = findMatchingTopMenu(props.data, currentPath);
+    if (matchedMenu) {
+      console.log("🎯 Detailed menu matched:", matchedMenu, "for route:", currentPath);
+      return matchedMenu;
+    }
+  }
+
+  // 默认返回当前路径
+  return currentPath;
+});
+
+/**
+ * 获取完整路径
+ *
+ * @param routePath 当前路由的相对路径  /user
+ * @returns 完整的绝对路径 D://vue3-element-admin/system/user
+ */
+function resolveFullPath(routePath: string) {
+  if (isExternal(routePath)) {
+    return routePath;
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath;
+  }
+
+  // 如果 basePath 为空（顶部布局），直接返回 routePath
+  if (!props.basePath || props.basePath === "") {
+    return routePath;
+  }
+
+  // 解析路径，生成完整的绝对路径
+  return path.resolve(props.basePath, routePath);
+}
+
+/**
+ * 打开菜单
+ *
+ * @param index 当前展开的菜单项索引
+ */
+const onMenuOpen = (index: string) => {
+  expandedMenuIndexes.value.push(index);
+};
+
+/**
+ * 关闭菜单
+ *
+ * @param index 当前收起的菜单项索引
+ */
+const onMenuClose = (index: string) => {
+  expandedMenuIndexes.value = expandedMenuIndexes.value.filter((item) => item !== index);
+};
+
+/**
+ * 监听菜单模式变化：当菜单模式切换为水平模式时，关闭所有展开的菜单项，
+ * 避免在水平模式下菜单项显示错位。
+ */
+watch(
+  () => props.menuMode,
+  (newMode) => {
+    if (newMode === "horizontal" && menuRef.value) {
+      expandedMenuIndexes.value.forEach((item) => menuRef.value!.close(item));
+    }
+  }
+);
+
+/**
+ * 监听激活菜单变化，为包含激活子菜单的父菜单添加样式类
+ */
+watch(
+  () => activeMenuIndex.value,
+  () => {
+    nextTick(() => {
+      updateParentMenuStyles();
+    });
+  },
+  { immediate: true }
+);
+
+/**
+ * 更新父菜单样式 - 为包含激活子菜单的父菜单添加 has-active-child 类
+ */
+function updateParentMenuStyles() {
+  if (!menuRef.value?.$el) return;
+
+  const menuEl = menuRef.value.$el as HTMLElement;
+
+  // 移除所有现有的 has-active-child 类
+  const allSubMenus = menuEl.querySelectorAll(".el-sub-menu");
+  allSubMenus.forEach((subMenu) => {
+    subMenu.classList.remove("has-active-child");
+  });
+
+  // 查找当前激活的菜单项
+  const activeMenuItem = menuEl.querySelector(".el-menu-item.is-active");
+  if (activeMenuItem) {
+    // 向上查找父级 el-sub-menu 元素
+    let parent = activeMenuItem.parentElement;
+    while (parent && parent !== menuEl) {
+      if (parent.classList.contains("el-sub-menu")) {
+        parent.classList.add("has-active-child");
+      }
+      parent = parent.parentElement;
+    }
+  }
+}
+
+/**
+ * 组件挂载后立即更新父菜单样式
+ */
+onMounted(() => {
+  nextTick(() => {
+    updateParentMenuStyles();
+  });
+});
+</script>
diff --git a/src/layouts/components/Menu/MixTopMenu.vue b/src/layouts/components/Menu/MixTopMenu.vue
new file mode 100644
index 00000000..96b9eb00
--- /dev/null
+++ b/src/layouts/components/Menu/MixTopMenu.vue
@@ -0,0 +1,197 @@
+<!-- 混合布局顶部菜单 -->
+<template>
+  <el-menu
+    mode="horizontal"
+    :default-active="activeTopMenuPath"
+    :background-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-background']
+        : undefined
+    "
+    :text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-text']
+        : undefined
+    "
+    :active-text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-active-text']
+        : undefined
+    "
+    @select="handleMenuSelect"
+  >
+    <el-menu-item v-for="menuItem in processedTopMenus" :key="menuItem.path" :index="menuItem.path">
+      <MenuItemContent
+        v-if="menuItem.meta"
+        :icon="menuItem.meta.icon"
+        :title="menuItem.meta.title"
+      />
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import MenuItemContent from "./components/MenuItemContent.vue";
+
+defineOptions({
+  name: "MixTopMenu",
+});
+
+import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
+import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
+import variables from "@/styles/variables.module.scss";
+import { SidebarColor } from "@/enums/settings/theme.enum";
+
+const router = useRouter();
+const appStore = useAppStore();
+const permissionStore = usePermissionStore();
+const settingsStore = useSettingsStore();
+
+// 获取主题
+const theme = computed(() => settingsStore.theme);
+
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
+// 顶部菜单列表
+const topMenus = ref<RouteRecordRaw[]>([]);
+
+// 处理后的顶部菜单列表 - 智能显示唯一子菜单的标题
+const processedTopMenus = computed(() => {
+  return topMenus.value.map((route) => {
+    // 如果路由设置了 alwaysShow=true，或者没有子菜单，直接返回原路由
+    if (route.meta?.alwaysShow || !route.children || route.children.length === 0) {
+      return route;
+    }
+
+    // 过滤出非隐藏的子菜单
+    const visibleChildren = route.children.filter((child) => !child.meta?.hidden);
+
+    // 如果只有一个非隐藏的子菜单，显示子菜单的信息
+    if (visibleChildren.length === 1) {
+      const onlyChild = visibleChildren[0];
+      return {
+        ...route,
+        meta: {
+          ...route.meta,
+          title: onlyChild.meta?.title || route.meta?.title,
+          icon: onlyChild.meta?.icon || route.meta?.icon,
+        },
+      };
+    }
+
+    // 其他情况返回原路由
+    return route;
+  });
+});
+
+const route = useRoute();
+
+// 获取当前路由路径的顶部菜单路径
+const getActiveTopMenuPath = () => {
+  const pathSegments = route.path.split("/").filter(Boolean);
+  return pathSegments.length > 0 ? `/${pathSegments[0]}` : "/";
+};
+
+// 监听路由变化，更新活跃的顶部菜单
+watch(
+  () => route.path,
+  () => {
+    const newActiveTopMenuPath = getActiveTopMenuPath();
+    if (newActiveTopMenuPath !== appStore.activeTopMenuPath) {
+      appStore.activeTopMenu(newActiveTopMenuPath);
+    }
+  },
+  { immediate: true }
+);
+
+/**
+ * 处理菜单点击事件，切换顶部菜单并加载对应的左侧菜单
+ * @param routePath 点击的菜单路径
+ */
+const handleMenuSelect = (routePath: string) => {
+  appStore.activeTopMenu(routePath); // 设置激活的顶部菜单
+  activateFirstLevelMenu(routePath); // 激活一级菜单并设置左侧二级菜单
+};
+
+/**
+ * 激活一级菜单并设置左侧二级菜单
+ * @param routePath 点击的菜单路径
+ */
+function activateFirstLevelMenu(routePath: string) {
+  permissionStore.updateSideMenu(routePath); // 更新左侧菜单
+
+  // 使用 nextTick 确保侧边菜单更新完成后再跳转
+  nextTick(() => {
+    navigateToFirstLeftMenu(permissionStore.sideMenuRoutes); // 跳转到左侧第一个菜单
+  });
+}
+
+/**
+ * 跳转到左侧第一个可访问的菜单
+ * @param menus 左侧菜单列表
+ */
+const navigateToFirstLeftMenu = (menus: RouteRecordRaw[]) => {
+  if (menus.length === 0) return;
+
+  // 查找第一个可访问的菜单项
+  const findFirstAccessibleRoute = (routes: RouteRecordRaw[]): RouteRecordRaw | null => {
+    for (const route of routes) {
+      // 跳过隐藏的菜单项
+      if (route.meta?.hidden) continue;
+
+      // 如果有子菜单，递归查找
+      if (route.children && route.children.length > 0) {
+        const childRoute = findFirstAccessibleRoute(route.children);
+        if (childRoute) return childRoute;
+      } else if (route.name && route.path) {
+        // 找到第一个有名称和路径的菜单项
+        return route;
+      }
+    }
+    return null;
+  };
+
+  const firstRoute = findFirstAccessibleRoute(menus);
+
+  if (firstRoute && firstRoute.name) {
+    console.log("🎯 Navigating to first menu:", firstRoute.name, firstRoute.path);
+    router.push({
+      name: firstRoute.name,
+      query:
+        typeof firstRoute.meta?.params === "object"
+          ? (firstRoute.meta.params as LocationQueryRaw)
+          : undefined,
+    });
+  }
+};
+
+// 当前激活的顶部菜单路径
+const activeTopMenuPath = computed(() => appStore.activeTopMenuPath);
+
+onMounted(() => {
+  topMenus.value = permissionStore.routes.filter((item) => !item.meta || !item.meta.hidden);
+});
+</script>
+
+<style lang="scss" scoped>
+.el-menu {
+  width: 100%;
+  height: 100%;
+
+  &--horizontal {
+    height: $navbar-height !important;
+
+    // 确保菜单项垂直居中
+    :deep(.el-menu-item) {
+      height: 100%;
+      line-height: $navbar-height;
+    }
+
+    // 移除默认的底部边框
+    &:after {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/components/SidebarMenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue
similarity index 76%
rename from src/layout/components/Sidebar/components/SidebarMenuItem.vue
rename to src/layouts/components/Menu/components/MenuItem.vue
index ede0ef3c..8734383c 100644
--- a/src/layout/components/Sidebar/components/SidebarMenuItem.vue
+++ b/src/layouts/components/Menu/components/MenuItem.vue
@@ -22,7 +22,8 @@
           :index="resolvePath(onlyOneChild.path)"
           :class="{ 'submenu-title-noDropdown': !isNest }"
         >
-          <SidebarMenuItemTitle
+          <MenuItemContent
+            v-if="onlyOneChild.meta"
             :icon="onlyOneChild.meta.icon || item.meta?.icon"
             :title="onlyOneChild.meta.title"
           />
@@ -33,10 +34,10 @@
     <!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
     <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
       <template #title>
-        <SidebarMenuItemTitle v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+        <MenuItemContent v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
       </template>
 
-      <SidebarMenuItem
+      <MenuItem
         v-for="child in item.children"
         :key="child.path"
         :is-nest="true"
@@ -48,8 +49,10 @@
 </template>
 
 <script setup lang="ts">
+import MenuItemContent from "./MenuItemContent.vue";
+
 defineOptions({
-  name: "SidebarMenuItem",
+  name: "MenuItem",
   inheritAttrs: false,
 });
 
@@ -137,15 +140,6 @@ function resolvePath(routePath: string) {
 .hideSidebar {
   .submenu-title-noDropdown {
     position: relative;
-    padding: 0 !important;
-
-    .el-tooltip {
-      padding: 0 !important;
-
-      .sub-el-icon {
-        margin-left: 19px;
-      }
-    }
 
     & > span {
       display: inline-block;
@@ -160,8 +154,6 @@ function resolvePath(routePath: string) {
     overflow: hidden;
 
     & > .el-sub-menu__title {
-      padding: 0 !important;
-
       .sub-el-icon {
         margin-left: 19px;
       }
@@ -198,4 +190,41 @@ html.sidebar-color-blue {
     background-color: $menu-hover;
   }
 }
+
+// 父菜单激活状态样式 - 当子菜单激活时，父菜单显示激活状态
+.el-sub-menu {
+  // 当父菜单包含激活子菜单时的样式
+  &.has-active-child .el-sub-menu__title {
+    color: var(--el-color-primary) !important;
+    background-color: var(--el-color-primary-light-9) !important;
+
+    .menu-icon {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  // 深色主题下的父菜单激活状态
+  html.dark & {
+    &.has-active-child .el-sub-menu__title {
+      color: var(--el-color-primary-light-3) !important;
+      background-color: rgba(64, 128, 255, 0.15) !important;
+
+      .menu-icon {
+        color: var(--el-color-primary-light-3) !important;
+      }
+    }
+  }
+
+  // 深蓝色侧边栏配色下的父菜单激活状态
+  html.sidebar-color-blue & {
+    &.has-active-child .el-sub-menu__title {
+      color: var(--el-color-primary-light-3) !important;
+      background-color: rgba(64, 128, 255, 0.2) !important;
+
+      .menu-icon {
+        color: var(--el-color-primary-light-3) !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/layout/components/Sidebar/components/SidebarMenuItemTitle.vue b/src/layouts/components/Menu/components/MenuItemContent.vue
similarity index 52%
rename from src/layout/components/Sidebar/components/SidebarMenuItemTitle.vue
rename to src/layouts/components/Menu/components/MenuItemContent.vue
index 67bf325c..f995608d 100644
--- a/src/layout/components/Sidebar/components/SidebarMenuItemTitle.vue
+++ b/src/layouts/components/Menu/components/MenuItemContent.vue
@@ -1,16 +1,16 @@
 <template>
   <!-- 菜单图标 -->
   <template v-if="icon">
-    <el-icon v-if="isElIcon" class="el-icon">
+    <el-icon v-if="isElIcon" class="menu-icon">
       <component :is="iconComponent" />
     </el-icon>
-    <div v-else :class="`i-svg:${icon}`" />
+    <div v-else :class="`i-svg:${icon}`" class="menu-icon" />
   </template>
   <template v-else>
-    <div class="i-svg:menu" />
+    <div class="i-svg:menu menu-icon" />
   </template>
   <!-- 菜单标题 -->
-  <span v-if="title" class="ml-1">{{ translateRouteTitle(title) }}</span>
+  <span v-if="title" class="menu-title ml-1">{{ translateRouteTitle(title) }}</span>
 </template>
 
 <script setup lang="ts">
@@ -26,28 +26,15 @@ const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
 </script>
 
 <style lang="scss" scoped>
-.el-icon {
-  width: 14px !important;
-  margin-right: 0 !important;
+.menu-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  font-size: 18px;
   color: currentcolor;
 }
-
-[class^="i-svg:"] {
-  width: 14px;
-  height: 14px;
-  color: currentcolor !important;
-}
-
-.hideSidebar {
-  .el-sub-menu,
-  .el-menu-item {
-    .el-icon {
-      margin-left: 20px;
-    }
-  }
-
-  [class^="i-svg:"] {
-    margin-left: 20px;
-  }
-}
 </style>
diff --git a/src/layouts/components/NavBar/components/NavbarActions.vue b/src/layouts/components/NavBar/components/NavbarActions.vue
new file mode 100644
index 00000000..72ec1f87
--- /dev/null
+++ b/src/layouts/components/NavBar/components/NavbarActions.vue
@@ -0,0 +1,274 @@
+<template>
+  <div :class="['navbar-actions', navbarActionsClass]">
+    <!-- 桌面端工具项 -->
+    <template v-if="isDesktop">
+      <!-- 搜索 -->
+      <div class="navbar-actions__item">
+        <MenuSearch />
+      </div>
+
+      <!-- 全屏 -->
+      <div class="navbar-actions__item">
+        <Fullscreen />
+      </div>
+
+      <!-- 布局大小 -->
+      <div class="navbar-actions__item">
+        <SizeSelect />
+      </div>
+
+      <!-- 语言选择 -->
+      <div class="navbar-actions__item">
+        <LangSelect />
+      </div>
+
+      <!-- 通知 -->
+      <div class="navbar-actions__item">
+        <Notification />
+      </div>
+    </template>
+
+    <!-- 用户菜单 -->
+    <div class="navbar-actions__item">
+      <el-dropdown trigger="click">
+        <div class="user-profile">
+          <img class="user-profile__avatar" :src="userStore.userInfo.avatar" />
+          <span class="user-profile__name">{{ userStore.userInfo.username }}</span>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="handleProfileClick">
+              {{ t("navbar.profile") }}
+            </el-dropdown-item>
+            <el-dropdown-item divided @click="logout">
+              {{ t("navbar.logout") }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+
+    <!-- 系统设置 -->
+    <div
+      v-if="defaultSettings.showSettings"
+      class="navbar-actions__item"
+      @click="handleSettingsClick"
+    >
+      <div class="i-svg:setting" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+import { defaultSettings } from "@/settings";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import { useAppStore, useSettingsStore, useUserStore } from "@/store";
+import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
+import { LayoutMode } from "@/enums";
+
+// 导入子组件
+import MenuSearch from "@/components/MenuSearch/index.vue";
+import Fullscreen from "@/components/Fullscreen/index.vue";
+import SizeSelect from "@/components/SizeSelect/index.vue";
+import LangSelect from "@/components/LangSelect/index.vue";
+import Notification from "@/components/Notification/index.vue";
+
+const { t } = useI18n();
+const appStore = useAppStore();
+const settingStore = useSettingsStore();
+const userStore = useUserStore();
+
+const route = useRoute();
+const router = useRouter();
+
+// 是否为桌面设备
+const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);
+
+/**
+ * 打开个人中心页面
+ */
+function handleProfileClick() {
+  router.push({ name: "Profile" });
+}
+
+// 根据主题和侧边栏配色方案选择样式类
+const navbarActionsClass = computed(() => {
+  const { theme, sidebarColorScheme, layout } = settingStore;
+
+  // 暗黑主题下，所有布局都使用白色文字
+  if (theme === ThemeMode.DARK) {
+    return "navbar-actions--white-text";
+  }
+
+  // 明亮主题下
+  if (theme === ThemeMode.LIGHT) {
+    // 顶部布局和混合布局的顶部区域：
+    // - 如果侧边栏是经典蓝色，使用白色文字
+    // - 如果侧边栏是极简白色，使用深色文字
+    if (layout === LayoutMode.TOP || layout === LayoutMode.MIX) {
+      if (sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
+        return "navbar-actions--white-text";
+      } else {
+        return "navbar-actions--dark-text";
+      }
+    }
+  }
+
+  return "navbar-actions--dark-text";
+});
+
+/**
+ * 退出登录
+ */
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+    lockScroll: false,
+  }).then(() => {
+    userStore.logout().then(() => {
+      router.push(`/login?redirect=${route.fullPath}`);
+    });
+  });
+}
+
+/**
+ * 打开系统设置页面
+ */
+function handleSettingsClick() {
+  settingStore.settingsVisible = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px; /* 增加最小点击区域到44px，符合人机交互标准 */
+    height: 100%;
+    min-height: 44px;
+    padding: 0 8px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    // 确保子元素居中
+    > * {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    // 确保 Element Plus 组件可以正常工作
+    :deep(.el-dropdown),
+    :deep(.el-tooltip) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    // 图标样式
+    :deep([class^="i-svg:"]) {
+      font-size: 18px;
+      line-height: 1;
+      color: var(--el-text-color-regular);
+      transition: color 0.3s;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+
+      :deep([class^="i-svg:"]) {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+
+  .user-profile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 0 8px;
+
+    &__avatar {
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+    }
+
+    &__name {
+      margin-left: 8px;
+      color: var(--el-text-color-regular);
+      white-space: nowrap;
+      transition: color 0.3s;
+    }
+  }
+}
+
+// 白色文字样式（用于深色背景：暗黑主题、顶部布局、混合布局）
+.navbar-actions--white-text {
+  .navbar-actions__item {
+    :deep([class^="i-svg:"]) {
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+
+      :deep([class^="i-svg:"]) {
+        color: #fff;
+      }
+    }
+  }
+
+  .user-profile__name {
+    color: rgba(255, 255, 255, 0.85);
+  }
+}
+
+// 深色文字样式（用于浅色背景：明亮主题下的左侧布局）
+.navbar-actions--dark-text {
+  .navbar-actions__item {
+    :deep([class^="i-svg:"]) {
+      color: var(--el-text-color-regular) !important;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.04);
+
+      :deep([class^="i-svg:"]) {
+        color: var(--el-color-primary) !important;
+      }
+    }
+  }
+
+  .user-profile__name {
+    color: var(--el-text-color-regular) !important;
+  }
+}
+
+// 确保下拉菜单中的图标不受影响
+:deep(.el-dropdown-menu) {
+  [class^="i-svg:"] {
+    color: var(--el-text-color-regular) !important;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/NavBar/index.vue b/src/layouts/components/NavBar/index.vue
new file mode 100644
index 00000000..fd917b14
--- /dev/null
+++ b/src/layouts/components/NavBar/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="navbar">
+    <div class="flex-y-center">
+      <!-- 菜单折叠按钮 -->
+      <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
+      <!-- 面包屑导航 -->
+      <Breadcrumb />
+    </div>
+    <!-- 导航栏操作区域 -->
+    <div class="navbar__actions">
+      <NavbarActions />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from "@/store";
+import Hamburger from "@/components/Hamburger/index.vue";
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
+import NavbarActions from "./components/NavbarActions.vue";
+
+const appStore = useAppStore();
+
+// 侧边栏展开状态
+const isSidebarOpened = computed(() => appStore.sidebar.opened);
+
+// 切换侧边栏展开/折叠状态
+function toggleSideBar() {
+  console.log("🔄 Hamburger clicked! Current state:", isSidebarOpened.value);
+  console.log("🔄 Device type:", appStore.device);
+  appStore.toggleSidebar();
+  console.log("🔄 New state:", appStore.sidebar.opened);
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $navbar-height;
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
new file mode 100644
index 00000000..121ac8a0
--- /dev/null
+++ b/src/layouts/components/Settings/index.vue
@@ -0,0 +1,654 @@
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    size="380"
+    :title="t('settings.project')"
+    :before-close="handleCloseDrawer"
+    class="settings-drawer"
+  >
+    <div class="settings-content">
+      <section class="config-section">
+        <el-divider>{{ t("settings.theme") }}</el-divider>
+
+        <div class="flex-center">
+          <el-switch
+            v-model="isDark"
+            active-icon="Moon"
+            inactive-icon="Sunny"
+            class="theme-switch"
+            @change="handleThemeChange"
+          />
+        </div>
+      </section>
+
+      <!-- 界面设置 -->
+      <section class="config-section">
+        <el-divider>{{ t("settings.interface") }}</el-divider>
+
+        <div class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.themeColor") }}</span>
+          <el-color-picker
+            v-model="selectedThemeColor"
+            :predefine="colorPresets"
+            popper-class="theme-picker-dropdown"
+          />
+        </div>
+
+        <div class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.showTagsView") }}</span>
+          <el-switch v-model="settingsStore.showTagsView" />
+        </div>
+
+        <div class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.showAppLogo") }}</span>
+          <el-switch v-model="settingsStore.showAppLogo" />
+        </div>
+
+        <div class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.showWatermark") }}</span>
+          <el-switch v-model="settingsStore.showWatermark" />
+        </div>
+        <div v-if="!isDark" class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.sidebarColorScheme") }}</span>
+          <el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
+            <el-radio :value="SidebarColor.CLASSIC_BLUE">
+              {{ t("settings.classicBlue") }}
+            </el-radio>
+            <el-radio :value="SidebarColor.MINIMAL_WHITE">
+              {{ t("settings.minimalWhite") }}
+            </el-radio>
+          </el-radio-group>
+        </div>
+      </section>
+
+      <!-- 布局设置 -->
+      <section class="config-section">
+        <el-divider>{{ t("settings.navigation") }}</el-divider>
+
+        <!-- 整合的布局选择器 -->
+        <div class="layout-select">
+          <div class="layout-grid">
+            <el-tooltip
+              v-for="item in layoutOptions"
+              :key="item.value"
+              :content="item.label"
+              placement="bottom"
+            >
+              <div
+                role="button"
+                tabindex="0"
+                :class="[
+                  'layout-item',
+                  item.className,
+                  {
+                    'is-active': settingsStore.layout === item.value,
+                  },
+                ]"
+                @click="handleLayoutChange(item.value)"
+                @keydown.enter.space="handleLayoutChange(item.value)"
+              >
+                <!-- 布局预览图标 -->
+                <div class="layout-preview">
+                  <div v-if="item.value !== LayoutMode.LEFT" class="layout-header"></div>
+                  <div v-if="item.value !== LayoutMode.TOP" class="layout-sidebar"></div>
+                  <div class="layout-main"></div>
+                </div>
+                <!-- 布局名称 -->
+                <div class="layout-name">{{ item.label }}</div>
+                <!-- 选中状态指示器 -->
+                <div v-if="settingsStore.layout === item.value" class="layout-check">
+                  <el-icon><Check /></el-icon>
+                </div>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- 操作按钮区域 - 固定到底部 -->
+    <div class="action-footer">
+      <div class="action-divider"></div>
+      <div class="action-card">
+        <div class="action-buttons">
+          <el-tooltip
+            content="复制配置将生成当前设置的代码，覆盖 src/settings.ts 下的 defaultSettings 变量"
+            placement="top"
+          >
+            <el-button
+              type="primary"
+              size="default"
+              :icon="copyIcon"
+              :loading="copyLoading"
+              class="action-btn"
+              @click="handleCopySettings"
+            >
+              {{ copyLoading ? "复制中..." : t("settings.copyConfig") }}
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="重置将恢复所有设置为默认值" placement="top">
+            <el-button
+              type="warning"
+              size="default"
+              :icon="resetIcon"
+              :loading="resetLoading"
+              class="action-btn"
+              @click="handleResetSettings"
+            >
+              {{ resetLoading ? "重置中..." : t("settings.resetConfig") }}
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
+
+const { t } = useI18n();
+import { LayoutMode, SidebarColor, ThemeMode } from "@/enums";
+import { useSettingsStore, usePermissionStore, useAppStore } from "@/store";
+import { themeColorPresets } from "@/settings";
+
+// 按钮图标
+const copyIcon = markRaw(DocumentCopy);
+const resetIcon = markRaw(RefreshLeft);
+
+// 加载状态
+const copyLoading = ref(false);
+const resetLoading = ref(false);
+
+// 布局选项配置
+interface LayoutOption {
+  value: LayoutMode;
+  label: string;
+  className: string;
+}
+
+const layoutOptions: LayoutOption[] = [
+  { value: LayoutMode.LEFT, label: t("settings.leftLayout"), className: "left" },
+  { value: LayoutMode.TOP, label: t("settings.topLayout"), className: "top" },
+  { value: LayoutMode.MIX, label: t("settings.mixLayout"), className: "mix" },
+];
+
+// 使用统一的颜色预设配置
+const colorPresets = themeColorPresets;
+
+const route = useRoute();
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+
+const isDark = ref<boolean>(settingsStore.theme === ThemeMode.DARK);
+const sidebarColor = ref(settingsStore.sidebarColorScheme);
+
+const selectedThemeColor = computed({
+  get: () => settingsStore.themeColor,
+  set: (value) => settingsStore.updateThemeColor(value),
+});
+
+const drawerVisible = computed({
+  get: () => settingsStore.settingsVisible,
+  set: (value) => (settingsStore.settingsVisible = value),
+});
+
+/**
+ * 处理主题切换
+ *
+ * @param isDark 是否启用暗黑模式
+ */
+const handleThemeChange = (isDark: string | number | boolean) => {
+  settingsStore.updateTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
+};
+
+/**
+ * 更改侧边栏颜色
+ *
+ * @param val 颜色方案名称
+ */
+const changeSidebarColor = (val: any) => {
+  settingsStore.updateSidebarColorScheme(val);
+};
+
+/**
+ * 切换布局
+ *
+ * @param layout - 布局模式
+ */
+const handleLayoutChange = (layout: LayoutMode) => {
+  if (settingsStore.layout === layout) return;
+
+  settingsStore.updateLayout(layout);
+
+  if (layout === LayoutMode.MIX && route.name) {
+    const topLevelRoute = findTopLevelRoute(permissionStore.routes, route.name as string);
+    if (appStore.activeTopMenuPath !== topLevelRoute.path) {
+      appStore.activeTopMenu(topLevelRoute.path);
+    }
+  }
+};
+
+/**
+ * 复制当前配置
+ */
+const handleCopySettings = async () => {
+  try {
+    copyLoading.value = true;
+
+    // 生成配置代码
+    const configCode = generateSettingsCode();
+
+    // 复制到剪贴板
+    await navigator.clipboard.writeText(configCode);
+
+    // 显示成功消息
+    ElMessage.success({
+      message: t("settings.copySuccess"),
+      duration: 3000,
+    });
+  } catch {
+    ElMessage.error("复制配置失败");
+  } finally {
+    copyLoading.value = false;
+  }
+};
+
+/**
+ * 重置为默认配置
+ */
+const handleResetSettings = async () => {
+  resetLoading.value = true;
+
+  try {
+    settingsStore.resetSettings();
+
+    // 同步更新本地状态
+    isDark.value = settingsStore.theme === ThemeMode.DARK;
+    sidebarColor.value = settingsStore.sidebarColorScheme;
+
+    ElMessage.success(t("settings.resetSuccess"));
+  } catch {
+    ElMessage.error("重置配置失败");
+  } finally {
+    resetLoading.value = false;
+  }
+};
+
+/**
+ * 生成配置代码字符串
+ */
+const generateSettingsCode = (): string => {
+  const settings = {
+    title: "pkg.name",
+    version: "pkg.version",
+    showSettings: true,
+    showTagsView: settingsStore.showTagsView,
+    showAppLogo: settingsStore.showAppLogo,
+    layout: `LayoutMode.${settingsStore.layout.toUpperCase()}`,
+    theme: `ThemeMode.${settingsStore.theme.toUpperCase()}`,
+    size: "ComponentSize.DEFAULT",
+    language: "LanguageEnum.ZH_CN",
+    themeColor: `"${settingsStore.themeColor}"`,
+    showWatermark: settingsStore.showWatermark,
+    watermarkContent: "pkg.name",
+    sidebarColorScheme: `SidebarColor.${settingsStore.sidebarColorScheme.toUpperCase().replace("-", "_")}`,
+  };
+
+  return `const defaultSettings: AppSettings = {
+  title: ${settings.title},
+  version: ${settings.version},
+  showSettings: ${settings.showSettings},
+  showTagsView: ${settings.showTagsView},
+  showAppLogo: ${settings.showAppLogo},
+  layout: ${settings.layout},
+  theme: ${settings.theme},
+  size: ${settings.size},
+  language: ${settings.language},
+  themeColor: ${settings.themeColor},
+  showWatermark: ${settings.showWatermark},
+  watermarkContent: ${settings.watermarkContent},
+  sidebarColorScheme: ${settings.sidebarColorScheme},
+};`;
+};
+
+/**
+ * 查找路由的顶层父路由
+ *
+ * @param tree 树形数据
+ * @param findName 查找的名称
+ */
+function findTopLevelRoute(tree: any[], findName: string) {
+  const parentMap: any = {};
+
+  function buildParentMap(node: any, parent: any) {
+    parentMap[node.name] = parent;
+
+    if (node.children) {
+      for (let i = 0; i < node.children.length; i++) {
+        buildParentMap(node.children[i], node);
+      }
+    }
+  }
+
+  for (let i = 0; i < tree.length; i++) {
+    buildParentMap(tree[i], null);
+  }
+
+  let currentNode = parentMap[findName];
+  while (currentNode) {
+    if (!parentMap[currentNode.name]) {
+      return currentNode;
+    }
+    currentNode = parentMap[currentNode.name];
+  }
+  return null;
+}
+
+/**
+ * 关闭抽屉前的回调
+ */
+const handleCloseDrawer = () => {
+  settingsStore.settingsVisible = false;
+};
+</script>
+
+<style lang="scss" scoped>
+/* 设置抽屉样式 */
+.settings-drawer {
+  :deep(.el-drawer__body) {
+    position: relative;
+    height: 100%;
+    padding: 0;
+    overflow: hidden;
+  }
+}
+
+/* 设置内容区域 */
+.settings-content {
+  height: calc(100vh - 120px); /* 减去头部和底部按钮的高度 */
+  padding: 20px;
+  padding-bottom: 20px;
+  overflow-y: auto;
+}
+
+/* 底部操作区域样式 */
+.action-footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  padding: 0;
+  background: var(--el-bg-color);
+  border-top: 1px solid var(--el-border-color-light);
+
+  .action-divider {
+    display: none; /* 移除重复的分割线 */
+  }
+
+  .action-card {
+    padding: 16px 20px;
+    margin: 0;
+    background: var(--el-fill-color-extra-light);
+    border: none;
+    border-radius: 0;
+
+    .action-buttons {
+      display: flex;
+      gap: 12px;
+
+      .action-btn {
+        flex: 1;
+        font-size: 14px;
+        border-radius: 8px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          transform: translateY(-2px);
+        }
+      }
+    }
+  }
+}
+
+/* 主题切换器优化 */
+.theme-switch {
+  transform: scale(1.2);
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: scale(1.25);
+  }
+}
+
+.config-section {
+  margin-bottom: 24px;
+
+  .config-item {
+    padding: 12px 0;
+    border-bottom: 1px solid var(--el-border-color-light);
+    transition: all 0.3s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      padding-right: 8px;
+      padding-left: 8px;
+      margin: 0 -8px;
+      background-color: var(--el-fill-color-light);
+      border-radius: 6px;
+    }
+  }
+}
+
+/* 布局选择器样式优化 */
+.layout-select {
+  padding: 16px 8px;
+
+  .layout-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    justify-items: center;
+  }
+}
+
+.layout-item {
+  position: relative;
+  width: 70px;
+  height: 80px;
+  overflow: hidden;
+  cursor: pointer;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border: 2px solid var(--el-border-color-light);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    background: linear-gradient(145deg, #ffffff 0%, var(--el-color-primary-light-9) 100%);
+    border-color: var(--el-color-primary-light-3);
+    transform: translateY(-4px) scale(1.05);
+  }
+
+  &:active {
+    transform: translateY(-2px) scale(1.02);
+  }
+
+  .layout-preview {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    margin: 8px 0 4px 0;
+  }
+
+  .layout-header {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    left: 4px;
+    height: 8px;
+    background: linear-gradient(
+      90deg,
+      var(--el-color-primary) 0%,
+      var(--el-color-primary-light-3) 100%
+    );
+    border-radius: 2px;
+  }
+
+  .layout-sidebar {
+    position: absolute;
+    left: 4px;
+    width: 12px;
+    background: linear-gradient(
+      180deg,
+      var(--el-color-primary-dark-2) 0%,
+      var(--el-color-primary) 100%
+    );
+    border-radius: 2px;
+  }
+
+  .layout-main {
+    position: absolute;
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 2px;
+  }
+
+  .layout-name {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+    left: 0;
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--el-text-color-regular);
+    text-align: center;
+    transition: color 0.3s ease;
+  }
+
+  .layout-check {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    color: white;
+    background: var(--el-color-success);
+    border-radius: 50%;
+  }
+
+  // 左侧布局
+  &.left {
+    .layout-sidebar {
+      top: 4px;
+      bottom: 4px;
+    }
+    .layout-main {
+      top: 4px;
+      right: 4px;
+      bottom: 4px;
+      left: 20px;
+    }
+  }
+
+  // 顶部布局
+  &.top {
+    .layout-header {
+      height: 12px;
+    }
+    .layout-main {
+      top: 16px;
+      right: 4px;
+      bottom: 4px;
+      left: 4px;
+    }
+  }
+
+  // 混合布局
+  &.mix {
+    .layout-header {
+      height: 10px;
+    }
+    .layout-sidebar {
+      top: 14px;
+      bottom: 4px;
+    }
+    .layout-main {
+      top: 14px;
+      right: 4px;
+      bottom: 4px;
+      left: 20px;
+    }
+  }
+
+  &.is-active {
+    background: linear-gradient(
+      145deg,
+      var(--el-color-primary-light-9) 0%,
+      var(--el-color-primary-light-8) 100%
+    );
+    border-color: var(--el-color-primary);
+    transform: translateY(-2px) scale(1.08);
+
+    .layout-name {
+      font-weight: 600;
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+/* 深色模式适配 */
+.dark {
+  .action-footer {
+    background: var(--el-bg-color);
+    border-top-color: var(--el-border-color);
+  }
+
+  .action-card {
+    background: var(--el-fill-color-extra-light);
+  }
+
+  .layout-item {
+    background: linear-gradient(145deg, var(--el-bg-color) 0%, var(--el-bg-color-page) 100%);
+    border-color: var(--el-border-color);
+
+    &:hover {
+      background: linear-gradient(
+        145deg,
+        var(--el-bg-color-page) 0%,
+        var(--el-color-primary-light-9) 100%
+      );
+    }
+
+    &.is-active {
+      background: linear-gradient(
+        145deg,
+        var(--el-color-primary-light-9) 0%,
+        var(--el-color-primary-light-8) 100%
+      );
+    }
+
+    .layout-main {
+      background: linear-gradient(135deg, var(--el-fill-color) 0%, var(--el-fill-color-light) 100%);
+    }
+  }
+}
+
+/* 复制配置对话框样式 */
+:deep(.copy-config-dialog) {
+  .el-message-box__content {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+}
+</style>
diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue
new file mode 100644
index 00000000..7aca352e
--- /dev/null
+++ b/src/layouts/components/TagsView/index.vue
@@ -0,0 +1,559 @@
+<template>
+  <div class="tags-container">
+    <!-- 水平滚动容器 -->
+    <el-scrollbar ref="scrollbarRef" class="scroll-container" @wheel="handleScroll">
+      <router-link
+        v-for="tag in visitedViews"
+        ref="tagRef"
+        :key="tag.fullPath"
+        :class="['tags-item', { active: tagsViewStore.isActive(tag) }]"
+        :to="{ path: tag.path, query: tag.query }"
+        @click.middle="handleMiddleClick(tag)"
+        @contextmenu.prevent="(event: MouseEvent) => openContextMenu(tag, event)"
+      >
+        <!-- 标签文本 -->
+        <span class="tag-text">{{ translateRouteTitle(tag.title) }}</span>
+        <!-- 关闭按钮，固定标签不显示 -->
+        <span v-if="!tag.affix" class="tag-close-btn" @click.prevent.stop="closeSelectedTag(tag)">
+          ×
+        </span>
+      </router-link>
+    </el-scrollbar>
+
+    <!-- 标签右键菜单 -->
+    <ul
+      v-show="contextMenu.visible"
+      class="contextmenu"
+      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
+    >
+      <li @click="refreshSelectedTag(selectedTag)">
+        <div class="i-svg:refresh" />
+        刷新
+      </li>
+      <li v-if="!selectedTag?.affix" @click="closeSelectedTag(selectedTag)">
+        <div class="i-svg:close" />
+        关闭
+      </li>
+      <li @click="closeOtherTags">
+        <div class="i-svg:close_other" />
+        关闭其它
+      </li>
+      <li v-if="!isFirstView" @click="closeLeftTags">
+        <div class="i-svg:close_left" />
+        关闭左侧
+      </li>
+      <li v-if="!isLastView" @click="closeRightTags">
+        <div class="i-svg:close_right" />
+        关闭右侧
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        <div class="i-svg:close_all" />
+        关闭所有
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter, type RouteRecordRaw } from "vue-router";
+import { resolve } from "path-browserify";
+import { translateRouteTitle } from "@/utils/i18n";
+import { usePermissionStore, useTagsViewStore, useSettingsStore, useAppStore } from "@/store";
+
+// ========================= 类型定义 =========================
+interface ContextMenu {
+  visible: boolean;
+  x: number;
+  y: number;
+}
+
+// ========================= 组合式 API =========================
+const instance = getCurrentInstance();
+const proxy = instance?.proxy;
+const router = useRouter();
+const route = useRoute();
+
+// 状态管理
+const permissionStore = usePermissionStore();
+const tagsViewStore = useTagsViewStore();
+const settingsStore = useSettingsStore();
+const appStore = useAppStore();
+
+// ========================= 响应式数据 =========================
+const { visitedViews } = storeToRefs(tagsViewStore);
+const layout = computed(() => settingsStore.layout);
+
+// 当前选中的标签
+const selectedTag = ref<TagView | null>(null);
+
+// 右键菜单状态
+const contextMenu = reactive<ContextMenu>({
+  visible: false,
+  x: 0,
+  y: 0,
+});
+
+// 滚动条引用
+const scrollbarRef = ref();
+
+// ========================= 计算属性 =========================
+// 路由映射缓存，提升查找性能
+const routePathMap = computed(() => {
+  const map = new Map<string, TagView>();
+  visitedViews.value.forEach((tag) => {
+    map.set(tag.path, tag);
+  });
+  return map;
+});
+
+// 判断是否为第一个标签
+const isFirstView = computed(() => {
+  if (!selectedTag.value) return false;
+  return (
+    selectedTag.value.path === "/dashboard" ||
+    selectedTag.value.fullPath === visitedViews.value[1]?.fullPath
+  );
+});
+
+// 判断是否为最后一个标签
+const isLastView = computed(() => {
+  if (!selectedTag.value) return false;
+  return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1]?.fullPath;
+});
+
+// ========================= 核心函数 =========================
+/**
+ * 递归提取固定标签
+ */
+const extractAffixTags = (routes: RouteRecordRaw[], basePath = "/"): TagView[] => {
+  const affixTags: TagView[] = [];
+
+  const traverse = (routeList: RouteRecordRaw[], currentBasePath: string) => {
+    routeList.forEach((route) => {
+      const fullPath = resolve(currentBasePath, route.path);
+
+      // 如果是固定标签，添加到列表
+      if (route.meta?.affix) {
+        affixTags.push({
+          path: fullPath,
+          fullPath,
+          name: String(route.name || ""),
+          title: route.meta.title || "no-name",
+          affix: true,
+          keepAlive: route.meta.keepAlive || false,
+        });
+      }
+
+      // 递归处理子路由
+      if (route.children?.length) {
+        traverse(route.children, fullPath);
+      }
+    });
+  };
+
+  traverse(routes, basePath);
+  return affixTags;
+};
+
+/**
+ * 查找路由的顶级父节点
+ */
+const findTopLevelParent = (
+  routes: RouteRecordRaw[],
+  targetName: string
+): RouteRecordRaw | null => {
+  // 构建父子关系映射
+  const parentMap = new Map<string, RouteRecordRaw>();
+
+  const buildMap = (routeList: RouteRecordRaw[], parent: RouteRecordRaw | null = null) => {
+    routeList.forEach((route) => {
+      if (parent) {
+        parentMap.set(route.name as string, parent);
+      }
+
+      if (route.children?.length) {
+        buildMap(route.children, route);
+      }
+    });
+  };
+
+  buildMap(routes);
+
+  // 向上查找顶级父节点
+  let current = parentMap.get(targetName);
+  let topLevel = current;
+
+  while (current) {
+    const parent = parentMap.get(current.name as string);
+    if (!parent) break;
+    topLevel = current;
+    current = parent;
+  }
+
+  return topLevel || null;
+};
+
+// ========================= 标签操作 =========================
+/**
+ * 初始化固定标签
+ */
+const initAffixTags = () => {
+  const affixTags = extractAffixTags(permissionStore.routes);
+
+  affixTags.forEach((tag) => {
+    if (tag.name) {
+      tagsViewStore.addVisitedView(tag);
+    }
+  });
+};
+
+/**
+ * 添加当前路由标签
+ */
+const addCurrentTag = () => {
+  if (!route.meta?.title) return;
+
+  tagsViewStore.addView({
+    name: route.name as string,
+    title: route.meta.title,
+    path: route.path,
+    fullPath: route.fullPath,
+    affix: route.meta.affix || false,
+    keepAlive: route.meta.keepAlive || false,
+    query: route.query,
+  });
+};
+
+/**
+ * 更新当前标签（优化版本）
+ */
+const updateCurrentTag = () => {
+  nextTick(() => {
+    const currentTag = routePathMap.value.get(route.path);
+
+    if (currentTag && currentTag.fullPath !== route.fullPath) {
+      tagsViewStore.updateVisitedView({
+        name: route.name as string,
+        title: route.meta?.title || "",
+        path: route.path,
+        fullPath: route.fullPath,
+        affix: route.meta?.affix || false,
+        keepAlive: route.meta?.keepAlive || false,
+        query: route.query,
+      });
+    }
+  });
+};
+
+// ========================= 事件处理 =========================
+/**
+ * 处理中键点击
+ */
+const handleMiddleClick = (tag: TagView) => {
+  if (!tag.affix) {
+    closeSelectedTag(tag);
+  }
+};
+
+/**
+ * 打开右键菜单
+ */
+const openContextMenu = (tag: TagView, event: MouseEvent) => {
+  const MENU_MIN_WIDTH = 105;
+  const MENU_MARGIN = 15;
+
+  const containerRect = proxy?.$el.getBoundingClientRect();
+  const offsetLeft = containerRect?.left || 0;
+  const containerWidth = proxy?.$el.offsetWidth || 0;
+
+  const maxLeft = containerWidth - MENU_MIN_WIDTH;
+  const leftPosition = event.clientX - offsetLeft + MENU_MARGIN;
+
+  contextMenu.x = Math.min(leftPosition, maxLeft);
+  contextMenu.y = layout.value === "mix" ? event.clientY - 50 : event.clientY;
+  contextMenu.visible = true;
+
+  selectedTag.value = tag;
+};
+
+/**
+ * 关闭右键菜单
+ */
+const closeContextMenu = () => {
+  contextMenu.visible = false;
+};
+
+/**
+ * 处理滚轮事件
+ */
+const handleScroll = (event: WheelEvent) => {
+  closeContextMenu();
+
+  const scrollWrapper = scrollbarRef.value?.wrapRef;
+  if (!scrollWrapper) return;
+
+  const hasHorizontalScroll = scrollWrapper.scrollWidth > scrollWrapper.clientWidth;
+  if (!hasHorizontalScroll) return;
+
+  const deltaY = event.deltaY || -(event as any).wheelDelta || 0;
+  const newScrollLeft = scrollWrapper.scrollLeft + deltaY;
+
+  scrollbarRef.value.setScrollLeft(newScrollLeft);
+};
+
+// ========================= 标签管理 =========================
+/**
+ * 刷新标签
+ */
+const refreshSelectedTag = (tag: TagView | null) => {
+  if (!tag) return;
+
+  tagsViewStore.delCachedView(tag);
+  nextTick(() => {
+    router.replace("/redirect" + tag.fullPath);
+  });
+};
+
+/**
+ * 关闭标签
+ */
+const closeSelectedTag = (tag: TagView | null) => {
+  if (!tag) return;
+
+  tagsViewStore.delView(tag).then((result: any) => {
+    if (tagsViewStore.isActive(tag)) {
+      tagsViewStore.toLastView(result.visitedViews, tag);
+    }
+  });
+};
+
+/**
+ * 关闭左侧标签
+ */
+const closeLeftTags = () => {
+  if (!selectedTag.value) return;
+
+  tagsViewStore.delLeftViews(selectedTag.value).then((result: any) => {
+    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
+
+    if (!hasCurrentRoute) {
+      tagsViewStore.toLastView(result.visitedViews);
+    }
+  });
+};
+
+/**
+ * 关闭右侧标签
+ */
+const closeRightTags = () => {
+  if (!selectedTag.value) return;
+
+  tagsViewStore.delRightViews(selectedTag.value).then((result: any) => {
+    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
+
+    if (!hasCurrentRoute) {
+      tagsViewStore.toLastView(result.visitedViews);
+    }
+  });
+};
+
+/**
+ * 关闭其他标签
+ */
+const closeOtherTags = () => {
+  if (!selectedTag.value) return;
+
+  router.push(selectedTag.value);
+  tagsViewStore.delOtherViews(selectedTag.value).then(() => {
+    updateCurrentTag();
+  });
+};
+
+/**
+ * 关闭所有标签
+ */
+const closeAllTags = (tag: TagView | null) => {
+  tagsViewStore.delAllViews().then((result: any) => {
+    tagsViewStore.toLastView(result.visitedViews, tag || undefined);
+  });
+};
+
+// ========================= 混合布局处理 =========================
+/**
+ * 更新顶部菜单激活状态（混合布局）
+ */
+const updateTopMenuActive = (routeName: string) => {
+  if (layout.value !== "mix") return;
+
+  const topParent = findTopLevelParent(permissionStore.routes, routeName);
+  if (topParent && appStore.activeTopMenuPath !== topParent.path) {
+    appStore.activeTopMenu(topParent.path);
+  }
+};
+
+// ========================= 组合式函数：右键菜单管理 =========================
+const useContextMenuManager = () => {
+  const handleOutsideClick = () => {
+    closeContextMenu();
+  };
+
+  watchEffect(() => {
+    if (contextMenu.visible) {
+      document.addEventListener("click", handleOutsideClick);
+    } else {
+      document.removeEventListener("click", handleOutsideClick);
+    }
+  });
+
+  // 组件卸载时清理
+  onBeforeUnmount(() => {
+    document.removeEventListener("click", handleOutsideClick);
+  });
+};
+
+// ========================= 监听器和生命周期 =========================
+// 监听路由变化
+watch(
+  route,
+  () => {
+    addCurrentTag();
+    updateCurrentTag();
+  },
+  { immediate: true }
+);
+
+// 监听路由名变化（混合布局）
+watch(
+  () => route.name,
+  (newRouteName) => {
+    if (newRouteName) {
+      updateTopMenuActive(newRouteName as string);
+    }
+  },
+  { deep: true }
+);
+
+// 初始化
+onMounted(() => {
+  initAffixTags();
+});
+
+// 启用右键菜单管理
+useContextMenuManager();
+</script>
+
+<style lang="scss" scoped>
+.tags-container {
+  width: 100%;
+  height: $tags-view-height;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  box-shadow: 0 1px 1px var(--el-box-shadow-light);
+
+  .scroll-container {
+    white-space: nowrap;
+  }
+
+  .tags-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 26px;
+    padding: 0 8px;
+    margin-top: 4px;
+    margin-left: 5px;
+    font-size: 12px;
+    line-height: 26px;
+    color: var(--el-text-color-primary);
+    background: var(--el-bg-color);
+    border: 1px solid var(--el-border-color);
+    transition: all 0.2s ease;
+
+    &:first-of-type {
+      margin-left: 15px;
+    }
+    &:last-of-type {
+      margin-right: 15px;
+    }
+
+    .tag-text {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .tag-close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      margin-left: 5px;
+      font-size: 12px;
+      font-weight: bold;
+      color: var(--el-text-color-secondary);
+      cursor: pointer;
+      border-radius: 50%;
+      transition: all 0.2s ease;
+
+      &:hover {
+        color: var(--el-color-white);
+        background-color: var(--el-text-color-placeholder);
+      }
+    }
+
+    &.active {
+      color: var(--el-color-white);
+      background-color: var(--el-color-primary);
+      border-color: var(--el-color-primary);
+
+      &::before {
+        position: relative;
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        margin-right: 2px;
+        content: "";
+        background: var(--el-color-white);
+        border-radius: 50%;
+      }
+
+      .tag-close-btn {
+        color: var(--el-color-white);
+
+        &:hover {
+          color: var(--el-color-white);
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+      }
+    }
+  }
+
+  .contextmenu {
+    position: absolute;
+    z-index: 3000;
+    padding: 5px 0;
+    margin: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--el-text-color-primary);
+    list-style-type: none;
+    background: var(--el-bg-color);
+    border-radius: 4px;
+    box-shadow: var(--el-box-shadow-light);
+
+    li {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      padding: 7px 16px;
+      margin: 0;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background: var(--el-fill-color-light);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layouts/composables/useLayout.ts b/src/layouts/composables/useLayout.ts
new file mode 100644
index 00000000..ba2f6188
--- /dev/null
+++ b/src/layouts/composables/useLayout.ts
@@ -0,0 +1,62 @@
+import { useAppStore, useSettingsStore } from "@/store";
+import { defaultSettings } from "@/settings";
+
+/**
+ * 布局相关的通用逻辑
+ */
+export function useLayout() {
+  const appStore = useAppStore();
+  const settingsStore = useSettingsStore();
+
+  // 计算当前布局模式
+  const currentLayout = computed(() => settingsStore.layout);
+
+  // 侧边栏展开状态
+  const isSidebarOpen = computed(() => appStore.sidebar.opened);
+
+  // 是否显示标签视图
+  const isShowTagsView = computed(() => settingsStore.showTagsView);
+
+  // 是否显示设置面板
+  const isShowSettings = computed(() => defaultSettings.showSettings);
+
+  // 是否显示Logo
+  const isShowLogo = computed(() => settingsStore.showAppLogo);
+
+  // 是否移动设备
+  const isMobile = computed(() => appStore.device === "mobile");
+
+  // 布局CSS类
+  const layoutClass = computed(() => ({
+    hideSidebar: !appStore.sidebar.opened,
+    openSidebar: appStore.sidebar.opened,
+    mobile: appStore.device === "mobile",
+    [`layout-${settingsStore.layout}`]: true,
+  }));
+
+  /**
+   * 处理切换侧边栏的展开/收起状态
+   */
+  function toggleSidebar() {
+    appStore.toggleSidebar();
+  }
+
+  /**
+   * 关闭侧边栏（移动端）
+   */
+  function closeSidebar() {
+    appStore.closeSideBar();
+  }
+
+  return {
+    currentLayout,
+    isSidebarOpen,
+    isShowTagsView,
+    isShowSettings,
+    isShowLogo,
+    isMobile,
+    layoutClass,
+    toggleSidebar,
+    closeSidebar,
+  };
+}
diff --git a/src/layouts/composables/useLayoutMenu.ts b/src/layouts/composables/useLayoutMenu.ts
new file mode 100644
index 00000000..68d35e9a
--- /dev/null
+++ b/src/layouts/composables/useLayoutMenu.ts
@@ -0,0 +1,58 @@
+import { computed, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useAppStore, usePermissionStore } from "@/store";
+
+/**
+ * 布局菜单处理逻辑
+ */
+export function useLayoutMenu() {
+  const route = useRoute();
+  const appStore = useAppStore();
+  const permissionStore = usePermissionStore();
+
+  // 顶部菜单激活路径
+  const activeTopMenuPath = computed(() => appStore.activeTopMenuPath);
+
+  // 常规路由（左侧菜单或顶部菜单）
+  const routes = computed(() => permissionStore.routes);
+
+  // 混合布局左侧菜单路由
+  const sideMenuRoutes = computed(() => permissionStore.sideMenuRoutes);
+
+  // 当前激活的菜单
+  const activeMenu = computed(() => {
+    const { meta, path } = route;
+
+    // 如果设置了activeMenu，则使用
+    if (meta?.activeMenu) {
+      return meta.activeMenu;
+    }
+
+    return path;
+  });
+
+  // 监听顶部菜单路径变化，更新侧边菜单
+  watch(
+    () => activeTopMenuPath.value,
+    (newPath) => {
+      permissionStore.updateSideMenu(newPath);
+    },
+    { immediate: true }
+  );
+
+  /**
+   * 处理顶部菜单点击
+   * @param path 菜单路径
+   */
+  function handleTopMenuClick(path: string) {
+    appStore.activeTopMenu(path);
+  }
+
+  return {
+    routes,
+    sideMenuRoutes,
+    activeMenu,
+    activeTopMenuPath,
+    handleTopMenuClick,
+  };
+}
diff --git a/src/layouts/composables/useLayoutResponsive.ts b/src/layouts/composables/useLayoutResponsive.ts
new file mode 100644
index 00000000..b8dd9ada
--- /dev/null
+++ b/src/layouts/composables/useLayoutResponsive.ts
@@ -0,0 +1,36 @@
+import { watchEffect, computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useAppStore } from "@/store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+/**
+ * 布局响应式处理逻辑
+ */
+export function useLayoutResponsive() {
+  const appStore = useAppStore();
+  const { width } = useWindowSize();
+
+  // 定义响应式断点
+  const WIDTH_DESKTOP = 992; // 桌面设备断点 (>=992px)
+
+  // 设置当前设备类型并调整侧边栏状态
+  watchEffect(() => {
+    const isDesktop = width.value >= WIDTH_DESKTOP;
+    const deviceType = isDesktop ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE;
+
+    // 更新设备类型
+    appStore.toggleDevice(deviceType);
+
+    // 根据设备类型调整侧边栏状态
+    if (isDesktop) {
+      appStore.openSideBar();
+    } else {
+      appStore.closeSideBar();
+    }
+  });
+
+  return {
+    isDesktop: computed(() => width.value >= WIDTH_DESKTOP),
+    isMobile: computed(() => appStore.device === DeviceEnum.MOBILE),
+  };
+}
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
new file mode 100644
index 00000000..9b9a0706
--- /dev/null
+++ b/src/layouts/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="layout-wrapper">
+    <component :is="currentLayoutComponent" />
+
+    <!-- 设置面板 - 独立于布局组件 -->
+    <Settings v-if="isShowSettings" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLayout } from "./composables/useLayout";
+import LeftLayout from "./views/LeftLayout.vue";
+import TopLayout from "./views/TopLayout.vue";
+import MixLayout from "./views/MixLayout.vue";
+import Settings from "./components/Settings/index.vue";
+import { LayoutMode } from "@/enums/settings/layout.enum";
+import { defaultSettings } from "@/settings";
+
+const { currentLayout } = useLayout();
+
+// 根据当前布局模式选择对应的组件
+const currentLayoutComponent = computed(() => {
+  switch (currentLayout.value) {
+    case LayoutMode.TOP:
+      return TopLayout;
+    case LayoutMode.MIX:
+      return MixLayout;
+    case LayoutMode.LEFT:
+    default:
+      return LeftLayout;
+  }
+});
+
+// 是否显示设置面板
+const isShowSettings = computed(() => defaultSettings.showSettings);
+</script>
+
+<style lang="scss" scoped>
+.layout-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/layouts/views/BaseLayout.vue b/src/layouts/views/BaseLayout.vue
new file mode 100644
index 00000000..3e305016
--- /dev/null
+++ b/src/layouts/views/BaseLayout.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="layout" :class="layoutClass">
+    <!-- 移动端遮罩层 -->
+    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
+
+    <!-- 布局内容插槽 -->
+    <slot></slot>
+
+    <!-- 返回顶部按钮 -->
+    <el-backtop target=".app-main">
+      <div class="i-svg:backtop w-6 h-6" />
+    </el-backtop>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLayout } from "../composables/useLayout";
+import { useLayoutResponsive } from "../composables/useLayoutResponsive";
+
+// 布局相关
+const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
+
+// 响应式处理
+const { isMobile } = useLayoutResponsive();
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  width: 100%;
+  height: 100%;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+}
+</style>
diff --git a/src/layouts/views/LeftLayout.vue b/src/layouts/views/LeftLayout.vue
new file mode 100644
index 00000000..b4ada9cb
--- /dev/null
+++ b/src/layouts/views/LeftLayout.vue
@@ -0,0 +1,136 @@
+<template>
+  <BaseLayout>
+    <!-- 左侧菜单栏 -->
+    <div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
+      <div :class="{ 'has-logo': isShowLogo }" class="layout-sidebar">
+        <!-- Logo -->
+        <AppLogo v-if="isShowLogo" :collapse="!isSidebarOpen" />
+        <!-- 主菜单内容 -->
+        <el-scrollbar>
+          <BasicMenu :data="routes" base-path="" />
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div
+      :class="{
+        hasTagsView: isShowTagsView,
+        'layout__main--collapsed': !isSidebarOpen,
+      }"
+      class="layout__main"
+    >
+      <NavBar />
+      <TagsView v-if="isShowTagsView" />
+      <AppMain />
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup lang="ts">
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import AppLogo from "../components/AppLogo/index.vue";
+import NavBar from "../components/NavBar/index.vue";
+import TagsView from "../components/TagsView/index.vue";
+import AppMain from "../components/AppMain/index.vue";
+import BasicMenu from "../components/Menu/BasicMenu.vue";
+
+// 布局相关参数
+const { isShowTagsView, isShowLogo, isSidebarOpen, isMobile } = useLayout();
+
+// 菜单相关
+const { routes } = useLayoutMenu();
+
+// 添加调试日志
+console.log("🔍 LeftLayout - isSidebarOpen:", isSidebarOpen.value);
+console.log("🔍 LeftLayout - isMobile:", isMobile.value);
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  &__sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: $sidebar-width;
+    background-color: $menu-background;
+    transition: width 0.28s;
+
+    &--collapsed {
+      width: $sidebar-width-collapsed;
+    }
+
+    .layout-sidebar {
+      position: relative;
+      height: 100%;
+      background-color: var(--menu-background);
+      transition: width 0.28s;
+
+      &.has-logo {
+        .el-scrollbar {
+          height: calc(100vh - $navbar-height);
+        }
+      }
+
+      :deep(.el-menu) {
+        border: none;
+      }
+    }
+  }
+
+  &__main {
+    position: relative;
+    height: 100%;
+    margin-left: $sidebar-width;
+    overflow-y: auto;
+    transition: margin-left 0.28s;
+
+    &--collapsed {
+      margin-left: $sidebar-width-collapsed;
+    }
+
+    .fixed-header {
+      position: sticky;
+      top: 0;
+      z-index: 9;
+      transition: width 0.28s;
+    }
+  }
+}
+
+/* 移动端样式 */
+.mobile {
+  .layout__sidebar {
+    width: $sidebar-width !important;
+    transition:
+      transform 0.28s,
+      width 0s;
+  }
+
+  &.hideSidebar {
+    .layout__sidebar {
+      transform: translateX(-$sidebar-width);
+    }
+  }
+
+  &.openSidebar {
+    .layout__sidebar {
+      transform: translateX(0);
+    }
+  }
+
+  .layout__main {
+    margin-left: 0 !important;
+  }
+}
+
+.hasTagsView {
+  :deep(.app-main) {
+    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+  }
+}
+</style>
diff --git a/src/layouts/views/MixLayout.vue b/src/layouts/views/MixLayout.vue
new file mode 100644
index 00000000..04d85bc9
--- /dev/null
+++ b/src/layouts/views/MixLayout.vue
@@ -0,0 +1,257 @@
+<template>
+  <BaseLayout>
+    <!-- 顶部菜单栏 -->
+    <div class="layout__header">
+      <div class="layout__header-content">
+        <!-- Logo区域 -->
+        <div v-if="isShowLogo" class="layout__header-logo">
+          <AppLogo :collapse="isLogoCollapsed" />
+        </div>
+
+        <!-- 顶部菜单区域 -->
+        <div class="layout__header-menu">
+          <MixTopMenu />
+        </div>
+
+        <!-- 右侧操作区域 -->
+        <div class="layout__header-actions">
+          <NavbarActions />
+        </div>
+      </div>
+    </div>
+
+    <!-- 主内容区容器 -->
+    <div class="layout__container">
+      <!-- 左侧菜单栏 -->
+      <div class="layout__sidebar--left" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
+        <el-scrollbar>
+          <el-menu
+            :default-active="activeMenu"
+            :collapse="!isSidebarOpen"
+            :collapse-transition="false"
+            :unique-opened="false"
+            :background-color="variables['menu-background']"
+            :text-color="variables['menu-text']"
+            :active-text-color="variables['menu-active-text']"
+          >
+            <MenuItem
+              v-for="item in sideMenuRoutes"
+              :key="item.path"
+              :item="item"
+              :base-path="resolvePath(item.path)"
+            />
+          </el-menu>
+        </el-scrollbar>
+        <!-- 侧边栏切换按钮 -->
+        <div class="layout__sidebar-toggle">
+          <Hamburger :is-active="isSidebarOpen" @toggle-click="toggleSidebar" />
+        </div>
+      </div>
+
+      <!-- 主内容区 -->
+      <div :class="{ hasTagsView: isShowTagsView }" class="layout__main">
+        <TagsView v-if="isShowTagsView" />
+        <AppMain />
+      </div>
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { useWindowSize } from "@vueuse/core";
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import AppLogo from "../components/AppLogo/index.vue";
+import MixTopMenu from "../components/Menu/MixTopMenu.vue";
+import NavbarActions from "../components/NavBar/components/NavbarActions.vue";
+import TagsView from "../components/TagsView/index.vue";
+import AppMain from "../components/AppMain/index.vue";
+import MenuItem from "../components/Menu/components/MenuItem.vue";
+import Hamburger from "@/components/Hamburger/index.vue";
+import variables from "@/styles/variables.module.scss";
+
+const route = useRoute();
+
+// 布局相关参数
+const { isShowTagsView, isShowLogo, isSidebarOpen, toggleSidebar } = useLayout();
+
+// 菜单相关
+const { sideMenuRoutes, activeTopMenuPath } = useLayoutMenu();
+
+// 响应式窗口尺寸
+const { width } = useWindowSize();
+
+// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
+const isLogoCollapsed = computed(() => width.value < 768);
+
+// 当前激活的菜单
+const activeMenu = computed(() => {
+  const { meta, path } = route;
+  // 如果设置了activeMenu，则使用
+  if (meta?.activeMenu && typeof meta.activeMenu === "string") {
+    return meta.activeMenu;
+  }
+  return path;
+});
+
+/**
+ * 解析路径 - 混合模式下，左侧菜单是从顶级菜单下的子菜单开始的
+ * 所以需要拼接顶级菜单路径
+ */
+function resolvePath(routePath: string) {
+  // 如果已经是绝对路径，直接返回
+  if (routePath.startsWith("/")) {
+    return activeTopMenuPath.value + routePath;
+  }
+  // 否则拼接
+  return `${activeTopMenuPath.value}/${routePath}`;
+}
+
+console.log("🎨 MixLayout rendered");
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: $navbar-height;
+    background-color: var(--menu-background);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+
+    &-content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0;
+    }
+
+    &-logo {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    &-menu {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+      overflow: hidden;
+
+      :deep(.el-menu) {
+        height: 100%;
+        background-color: transparent;
+        border: none;
+      }
+
+      :deep(.el-menu--horizontal) {
+        display: flex;
+        align-items: center;
+        height: 100%;
+
+        .el-menu-item {
+          height: 100%;
+          line-height: $navbar-height;
+          border-bottom: none;
+
+          &.is-active {
+            background-color: rgba(255, 255, 255, 0.12);
+            border-bottom: 2px solid var(--el-color-primary);
+          }
+        }
+      }
+    }
+
+    &-actions {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
+      padding: 0 16px;
+    }
+  }
+
+  &__container {
+    display: flex;
+    height: calc(100vh - $navbar-height);
+    padding-top: 0;
+
+    .layout__sidebar--left {
+      position: relative;
+      width: $sidebar-width;
+      height: 100%;
+      background-color: var(--menu-background);
+      transition: width 0.28s;
+
+      &.layout__sidebar--collapsed {
+        width: $sidebar-width-collapsed !important;
+      }
+
+      :deep(.el-scrollbar) {
+        height: calc(100vh - $navbar-height - 50px);
+      }
+
+      :deep(.el-menu) {
+        height: 100%;
+        border: none;
+      }
+
+      .layout__sidebar-toggle {
+        position: absolute;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        background-color: var(--menu-background);
+        box-shadow: 0 0 6px -2px var(--el-color-primary);
+      }
+    }
+
+    .layout__main {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      margin-left: 0;
+      overflow-y: auto;
+    }
+  }
+}
+
+/* 移动端样式 */
+:deep(.mobile) {
+  .layout__container {
+    .layout__sidebar--left {
+      position: fixed;
+      top: $navbar-height;
+      bottom: 0;
+      left: 0;
+      z-index: 1000;
+      transition: transform 0.28s;
+    }
+  }
+
+  &.hideSidebar {
+    .layout__sidebar--left {
+      width: $sidebar-width !important;
+      transform: translateX(-$sidebar-width);
+    }
+  }
+}
+
+:deep(.hasTagsView) {
+  .app-main {
+    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+  }
+}
+</style>
diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/views/TopLayout.vue
new file mode 100644
index 00000000..6e6497b2
--- /dev/null
+++ b/src/layouts/views/TopLayout.vue
@@ -0,0 +1,126 @@
+<template>
+  <BaseLayout>
+    <!-- 顶部菜单栏 -->
+    <div class="layout__header">
+      <div class="layout__header-left">
+        <!-- Logo -->
+        <AppLogo v-if="isShowLogo" :collapse="isLogoCollapsed" />
+        <!-- 菜单 -->
+        <BasicMenu :data="routes" menu-mode="horizontal" base-path="" />
+      </div>
+      <!-- 操作按钮 -->
+      <div class="layout__header-right">
+        <NavbarActions />
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div :class="{ hasTagsView: isShowTagsView }" class="layout__main">
+      <TagsView v-if="isShowTagsView" />
+      <AppMain />
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import AppLogo from "../components/AppLogo/index.vue";
+import BasicMenu from "../components/Menu/BasicMenu.vue";
+import NavbarActions from "../components/NavBar/components/NavbarActions.vue";
+import TagsView from "../components/TagsView/index.vue";
+import AppMain from "../components/AppMain/index.vue";
+
+// 布局相关参数
+const { isShowTagsView, isShowLogo } = useLayout();
+
+// 菜单相关
+const { routes } = useLayoutMenu();
+
+// 响应式窗口尺寸
+const { width } = useWindowSize();
+
+// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
+const isLogoCollapsed = computed(() => width.value < 768);
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: $navbar-height;
+    background-color: $menu-background;
+
+    &-left {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0; // 允许flex收缩
+      height: 100%;
+
+      // Logo样式由AppLogo组件的全局样式控制
+      :deep(.logo) {
+        flex-shrink: 0; // 防止Logo被压缩
+        height: $navbar-height;
+      }
+    }
+
+    &-right {
+      display: flex;
+      flex-shrink: 0; // 防止操作按钮被压缩
+      align-items: center;
+      height: 100%;
+      padding-left: 12px;
+    }
+
+    // 菜单样式
+    :deep(.el-menu--horizontal) {
+      flex: 1;
+      min-width: 0; // 允许菜单收缩
+      height: $navbar-height;
+      overflow: hidden; // 防止菜单溢出
+      line-height: $navbar-height;
+      background-color: transparent;
+      border: none;
+
+      .el-menu-item {
+        height: $navbar-height;
+        line-height: $navbar-height;
+      }
+
+      .el-sub-menu {
+        .el-sub-menu__title {
+          height: $navbar-height;
+          line-height: $navbar-height;
+        }
+      }
+
+      // 修复子菜单弹出位置
+      .el-menu--popup {
+        min-width: 160px;
+      }
+    }
+  }
+
+  &__main {
+    height: calc(100vh - $navbar-height);
+    overflow-y: auto;
+  }
+}
+
+// 当存在TagsView时的样式调整
+.hasTagsView {
+  :deep(.app-main) {
+    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+  }
+}
+</style>
diff --git a/src/plugins/permission.ts b/src/plugins/permission.ts
index 6d82f990..3fb045ae 100644
--- a/src/plugins/permission.ts
+++ b/src/plugins/permission.ts
@@ -5,72 +5,178 @@ import router from "@/router";
 import { usePermissionStore, useUserStore } from "@/store";
 import { ROLE_ROOT } from "@/constants";
 
+// 路由生成锁，防止重复生成
+let isGeneratingRoutes = false;
+
 export function setupPermission() {
   // 白名单路由
   const whiteList = ["/login"];
 
   router.beforeEach(async (to, from, next) => {
     NProgress.start();
+    console.log("🚀 Route guard triggered:", { to: to.path, from: from.path });
 
-    const isLogin = Auth.isLoggedIn();
-    if (isLogin) {
+    const isLoggedIn = Auth.isLoggedIn();
+
+    if (isLoggedIn) {
+      console.log("✅ User is logged in");
+
+      // 如果已登录但访问登录页，重定向到首页
       if (to.path === "/login") {
-        // 如果已登录，跳转到首页
+        console.log("🔄 Redirecting from login to home");
         next({ path: "/" });
-      } else {
-        // 未登录
-        const permissionStore = usePermissionStore();
-        // 判断路由是否加载完成
-        if (permissionStore.routesLoaded) {
-          if (to.matched.length === 0) {
-            // 路由未匹配，跳转到404
-            next("/404");
-          } else {
-            // 动态设置页面标题
-            const title = (to.params.title as string) || (to.query.title as string);
-            if (title) {
-              to.meta.title = title;
-            }
-            next();
-          }
-        } else {
-          try {
-            // 生成动态路由
-            const dynamicRoutes = await permissionStore.generateRoutes();
-            dynamicRoutes.forEach((route: RouteRecordRaw) => router.addRoute(route));
-            next({ ...to, replace: true });
-          } catch (error) {
-            console.error(error);
-            // 路由加载失败，重置 token 并重定向到登录页
-            await useUserStore().resetAllState();
-            redirectToLogin(to, next);
-            NProgress.done();
-          }
-        }
+        return;
       }
+
+      // 处理已登录用户的路由访问
+      await handleAuthenticatedUser(to, from, next);
     } else {
-      // 未登录，判断是否在白名单中
+      console.log("❌ User not logged in");
+
+      // 未登录用户的处理
       if (whiteList.includes(to.path)) {
         next();
       } else {
-        // 不在白名单，重定向到登录页
         redirectToLogin(to, next);
         NProgress.done();
       }
     }
   });
 
-  // 后置守卫，保证每次路由跳转结束时关闭进度条
-  router.afterEach(() => {
+  // 后置守卫，确保进度条关闭
+  router.afterEach((to, from) => {
+    console.log("✅ Route navigation completed:", { to: to.path, from: from.path });
     NProgress.done();
   });
 }
 
-// 重定向到登录页
+/**
+ * 处理已登录用户的路由访问
+ */
+async function handleAuthenticatedUser(
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+  next: NavigationGuardNext
+) {
+  const permissionStore = usePermissionStore();
+  const userStore = useUserStore();
+
+  try {
+    // 检查用户信息是否存在
+    if (!userStore.userInfo.username) {
+      console.log("🔄 User info not found, fetching...");
+      await userStore.getUserInfo();
+    }
+
+    // 检查路由是否已生成
+    if (!permissionStore.routesLoaded) {
+      console.log("🔄 Routes not loaded, generating...");
+
+      // 防止重复生成路由
+      if (isGeneratingRoutes) {
+        console.log("⏳ Routes already generating, waiting...");
+        // 等待当前路由生成完成
+        await waitForRoutesGeneration(permissionStore);
+      } else {
+        await generateAndAddRoutes(permissionStore);
+      }
+
+      // 路由生成完成后，重新导航到目标路由
+      console.log("🔄 Routes generated, redirecting to:", to.path);
+      next({ ...to, replace: true });
+      return;
+    }
+
+    // 路由已加载，检查路由是否存在
+    if (to.matched.length === 0) {
+      console.log("❌ Route not found, redirecting to 404");
+      next("/404");
+      return;
+    }
+
+    // 动态设置页面标题
+    const title = (to.params.title as string) || (to.query.title as string);
+    if (title) {
+      to.meta.title = title;
+    }
+
+    console.log("✅ Route access granted:", to.path);
+    next();
+  } catch (error) {
+    console.error("❌ Route guard error:", error);
+
+    // 出错时重置状态并重定向到登录页
+    await resetUserStateAndRedirect(to, next);
+  }
+}
+
+/**
+ * 生成并添加动态路由
+ */
+async function generateAndAddRoutes(permissionStore: any) {
+  isGeneratingRoutes = true;
+
+  try {
+    console.log("🔧 Generating dynamic routes...");
+    const dynamicRoutes = await permissionStore.generateRoutes();
+
+    // 添加路由到路由器
+    dynamicRoutes.forEach((route: RouteRecordRaw) => {
+      router.addRoute(route);
+    });
+
+    console.log("✅ All dynamic routes generated and added");
+  } finally {
+    isGeneratingRoutes = false;
+  }
+}
+
+/**
+ * 等待路由生成完成
+ */
+async function waitForRoutesGeneration(permissionStore: any): Promise<void> {
+  return new Promise((resolve) => {
+    const checkInterval = setInterval(() => {
+      if (!isGeneratingRoutes && permissionStore.routesLoaded) {
+        clearInterval(checkInterval);
+        resolve();
+      }
+    }, 50); // 每50ms检查一次
+
+    // 超时保护，最多等待5秒
+    setTimeout(() => {
+      clearInterval(checkInterval);
+      console.warn("⚠️ Routes generation timeout");
+      resolve();
+    }, 5000);
+  });
+}
+
+/**
+ * 重置用户状态并重定向到登录页
+ */
+async function resetUserStateAndRedirect(to: RouteLocationNormalized, next: NavigationGuardNext) {
+  try {
+    await useUserStore().resetAllState();
+    redirectToLogin(to, next);
+  } catch (resetError) {
+    console.error("❌ Failed to reset user state:", resetError);
+    // 强制跳转到登录页
+    next("/login");
+  } finally {
+    NProgress.done();
+  }
+}
+
+/**
+ * 重定向到登录页
+ */
 function redirectToLogin(to: RouteLocationNormalized, next: NavigationGuardNext) {
   const params = new URLSearchParams(to.query as Record<string, string>);
   const queryString = params.toString();
   const redirect = queryString ? `${to.path}?${queryString}` : to.path;
+
+  console.log("🔄 Redirecting to login with redirect:", redirect);
   next(`/login?redirect=${encodeURIComponent(redirect)}`);
 }
 
diff --git a/src/plugins/websocket.ts b/src/plugins/websocket.ts
index edbdb290..b843aa12 100644
--- a/src/plugins/websocket.ts
+++ b/src/plugins/websocket.ts
@@ -1,8 +1,29 @@
 import { useDictSync } from "@/composables/useDictSync";
 import { Auth } from "@/utils/auth";
+import { useUserStore } from "@/store";
+import { watch } from "vue";
+
+// 全局 WebSocket 实例管理
+const websocketInstances = new Map<string, any>();
 
 // 用于防止重复初始化的状态标记
 let isInitialized = false;
+let dictWebSocketInstance: ReturnType<typeof useDictSync> | null = null;
+
+/**
+ * 注册 WebSocket 实例
+ */
+export function registerWebSocketInstance(key: string, instance: any) {
+  websocketInstances.set(key, instance);
+  console.log(`[WebSocketPlugin] Registered WebSocket instance: ${key}`);
+}
+
+/**
+ * 获取 WebSocket 实例
+ */
+export function getWebSocketInstance(key: string) {
+  return websocketInstances.get(key);
+}
 
 /**
  * 初始化WebSocket服务
@@ -34,19 +55,27 @@ export function setupWebSocket() {
   try {
     // 延迟初始化，确保应用完全启动
     setTimeout(() => {
-      const dictWebSocket = useDictSync();
+      // 保存实例引用
+      dictWebSocketInstance = useDictSync();
+      registerWebSocketInstance("dictSync", dictWebSocketInstance);
 
       // 初始化字典WebSocket服务
-      dictWebSocket.initWebSocket();
+      dictWebSocketInstance.initWebSocket();
       console.log("[WebSocketPlugin] 字典WebSocket初始化完成");
 
-      // 在窗口关闭前断开WebSocket连接
-      window.addEventListener("beforeunload", () => {
-        console.log("[WebSocketPlugin] 窗口即将关闭，断开WebSocket连接");
-        dictWebSocket.closeWebSocket();
-        isInitialized = false;
+      // 初始化在线用户计数WebSocket
+      import("@/composables/useOnlineCount").then(({ useOnlineCount }) => {
+        const onlineCountInstance = useOnlineCount({ autoInit: false });
+        onlineCountInstance.initWebSocket();
+        console.log("[WebSocketPlugin] 在线用户计数WebSocket初始化完成");
       });
 
+      // 在窗口关闭前断开WebSocket连接
+      window.addEventListener("beforeunload", handleWindowClose);
+
+      // 监听用户注销事件
+      watchUserLogout();
+
       console.log("[WebSocketPlugin] WebSocket服务初始化完成");
       isInitialized = true;
     }, 1000); // 延迟1秒初始化
@@ -54,3 +83,84 @@ export function setupWebSocket() {
     console.error("[WebSocketPlugin] 初始化WebSocket服务失败:", error);
   }
 }
+
+/**
+ * 处理窗口关闭
+ */
+function handleWindowClose() {
+  console.log("[WebSocketPlugin] 窗口即将关闭，断开WebSocket连接");
+  cleanupWebSocket();
+}
+
+/**
+ * 监听用户注销
+ */
+function watchUserLogout() {
+  const userStore = useUserStore();
+
+  // 监听用户信息变化，当用户信息被清空时断开连接
+  watch(
+    () => userStore.userInfo,
+    (newUserInfo, oldUserInfo) => {
+      // 从有用户信息变为无用户信息，说明用户注销了
+      if (oldUserInfo?.username && !newUserInfo?.username) {
+        console.log("[WebSocketPlugin] 检测到用户注销，断开WebSocket连接");
+        cleanupWebSocket();
+      }
+    },
+    { deep: true }
+  );
+}
+
+/**
+ * 清理WebSocket连接
+ */
+export function cleanupWebSocket() {
+  // 清理字典 WebSocket
+  if (dictWebSocketInstance) {
+    try {
+      dictWebSocketInstance.closeWebSocket();
+      console.log("[WebSocketPlugin] 字典WebSocket连接已断开");
+    } catch (error) {
+      console.error("[WebSocketPlugin] 断开字典WebSocket连接失败:", error);
+    }
+  }
+
+  // 清理所有注册的 WebSocket 实例
+  websocketInstances.forEach((instance, key) => {
+    try {
+      if (instance && typeof instance.disconnect === "function") {
+        instance.disconnect();
+        console.log(`[WebSocketPlugin] ${key} WebSocket连接已断开`);
+      } else if (instance && typeof instance.closeWebSocket === "function") {
+        instance.closeWebSocket();
+        console.log(`[WebSocketPlugin] ${key} WebSocket连接已断开`);
+      }
+    } catch (error) {
+      console.error(`[WebSocketPlugin] 断开 ${key} WebSocket连接失败:`, error);
+    }
+  });
+
+  // 清空实例映射
+  websocketInstances.clear();
+
+  // 移除事件监听器
+  window.removeEventListener("beforeunload", handleWindowClose);
+
+  // 重置状态
+  dictWebSocketInstance = null;
+  isInitialized = false;
+}
+
+/**
+ * 重新初始化WebSocket（用于登录后重连）
+ */
+export function reinitializeWebSocket() {
+  // 先清理现有连接
+  cleanupWebSocket();
+
+  // 延迟后重新初始化
+  setTimeout(() => {
+    setupWebSocket();
+  }, 500);
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 57058ee4..38bf3e60 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import type { App } from "vue";
 import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
 
-export const Layout = () => import("@/layout/index.vue");
+export const Layout = () => import("@/layouts/index.vue");
 
 // 静态路由
 export const constantRoutes: RouteRecordRaw[] = [
diff --git a/src/settings.ts b/src/settings.ts
index dbd14afc..9641874f 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -5,7 +5,7 @@ const { pkg } = __APP_INFO__;
 // 检查用户的操作系统是否使用深色模式
 const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
 
-const defaultSettings: AppSettings = {
+export const defaultSettings: AppSettings = {
   // 系统Title
   title: pkg.name,
   // 系统版本
@@ -13,9 +13,9 @@ const defaultSettings: AppSettings = {
   // 是否显示设置
   showSettings: true,
   // 是否显示标签视图
-  tagsView: true,
-  // 是否显示侧边栏Logo
-  sidebarLogo: true,
+  showTagsView: true,
+  // 是否显示应用Logo
+  showAppLogo: true,
   // 布局方式，默认为左侧布局
   layout: LayoutMode.LEFT,
   // 主题，根据操作系统的色彩方案自动选择
@@ -24,14 +24,27 @@ const defaultSettings: AppSettings = {
   size: ComponentSize.DEFAULT,
   // 语言
   language: LanguageEnum.ZH_CN,
-  // 主题颜色
+  // 主题颜色 - 修改此值时需同步修改 src/styles/variables.scss
   themeColor: "#4080FF",
-  // 是否开启水印
-  watermarkEnabled: false,
+  // 是否显示水印
+  showWatermark: false,
   // 水印内容
   watermarkContent: pkg.name,
   // 侧边栏配色方案
   sidebarColorScheme: SidebarColor.CLASSIC_BLUE,
 };
 
-export default defaultSettings;
+// 主题色预设 - 经典配色方案
+// 注意：修改默认主题色时，需要同步修改 src/styles/variables.scss 中的 primary.base 值
+export const themeColorPresets = [
+  "#4080FF", // Arco Design 蓝 - 现代感强
+  "#1890FF", // Ant Design 蓝 - 经典商务
+  "#409EFF", // Element Plus 蓝 - 清新自然
+  "#FA8C16", // 活力橙 - 温暖友好
+  "#722ED1", // 优雅紫 - 高端大气
+  "#13C2C2", // 青色 - 科技感
+  "#52C41A", // 成功绿 - 活力清新
+  "#F5222D", // 警示红 - 醒目强烈
+  "#2F54EB", // 深蓝 - 稳重专业
+  "#EB2F96", // 品红 - 时尚个性
+];
diff --git a/src/store/modules/app.store.ts b/src/store/modules/app.store.ts
index de20db83..4ddec187 100644
--- a/src/store/modules/app.store.ts
+++ b/src/store/modules/app.store.ts
@@ -1,4 +1,4 @@
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 
 // 导入 Element Plus 中英文语言包
 import zhCn from "element-plus/es/locale/lang/zh-cn";
diff --git a/src/store/modules/permission.store.ts b/src/store/modules/permission.store.ts
index 968eb08a..ffc549f9 100644
--- a/src/store/modules/permission.store.ts
+++ b/src/store/modules/permission.store.ts
@@ -5,7 +5,7 @@ import router from "@/router";
 
 import MenuAPI, { type RouteVO } from "@/api/system/menu.api";
 const modules = import.meta.glob("../../views/**/**.vue");
-const Layout = () => import("@/layout/index.vue");
+const Layout = () => import("@/layouts/index.vue");
 
 export const usePermissionStore = defineStore("permission", () => {
   // 存储所有路由，包括静态路由和动态路由
@@ -22,14 +22,24 @@ export const usePermissionStore = defineStore("permission", () => {
    */
   function generateRoutes() {
     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
+      console.log("🔧 Starting to generate routes...");
+
       MenuAPI.getRoutes()
         .then((data) => {
           const dynamicRoutes = parseDynamicRoutes(data);
+
           routes.value = [...constantRoutes, ...dynamicRoutes];
           routesLoaded.value = true;
+
+          console.log("✅ Routes generation completed successfully");
           resolve(dynamicRoutes);
         })
         .catch((error) => {
+          console.error("❌ Failed to generate routes:", error);
+
+          // 即使失败也要设置状态，避免无限重试
+          routesLoaded.value = false;
+
           reject(error);
         });
     });
diff --git a/src/store/modules/settings.store.ts b/src/store/modules/settings.store.ts
index f4b0afff..4263eaf6 100644
--- a/src/store/modules/settings.store.ts
+++ b/src/store/modules/settings.store.ts
@@ -1,35 +1,68 @@
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
-import { LayoutMode } from "@/enums/settings/layout.enum";
+import type { LayoutMode } from "@/enums/settings/layout.enum";
 import { applyTheme, generateThemeColors, toggleDarkMode, toggleSidebarColor } from "@/utils/theme";
+import { SETTINGS_KEYS } from "@/constants";
 
-type SettingsValue = boolean | string;
+// 🎯 设置项类型定义
+interface SettingsState {
+  // 界面显示设置
+  settingsVisible: boolean;
+  showTagsView: boolean;
+  showAppLogo: boolean;
+  showWatermark: boolean;
+
+  // 布局设置
+  layout: LayoutMode;
+  sidebarColorScheme: string;
+
+  // 主题设置
+  theme: ThemeMode;
+  themeColor: string;
+}
+
+// 🎯 可变更的设置项类型
+type MutableSetting = Exclude<keyof SettingsState, "settingsVisible">;
+type SettingValue<K extends MutableSetting> = SettingsState[K];
 
 export const useSettingsStore = defineStore("setting", () => {
-  // 基本设置
-  const settingsVisible = ref(false);
-  // 标签视图
-  const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView);
-  // 侧边栏 Logo
-  const sidebarLogo = useStorage<boolean>("sidebarLogo", defaultSettings.sidebarLogo);
-  // 侧边栏配色方案 (经典蓝/极简白)
+  // 🎯 基础设置 - 非持久化
+  const settingsVisible = ref<boolean>(false);
+
+  // 🎯 持久化设置 - 使用分组常量
+  const showTagsView = useStorage<boolean>(
+    SETTINGS_KEYS.SHOW_TAGS_VIEW,
+    defaultSettings.showTagsView
+  );
+
+  const showAppLogo = useStorage<boolean>(SETTINGS_KEYS.SHOW_APP_LOGO, defaultSettings.showAppLogo);
+
+  const showWatermark = useStorage<boolean>(
+    SETTINGS_KEYS.SHOW_WATERMARK,
+    defaultSettings.showWatermark
+  );
+
   const sidebarColorScheme = useStorage<string>(
-    "sidebarColorScheme",
+    SETTINGS_KEYS.SIDEBAR_COLOR_SCHEME,
     defaultSettings.sidebarColorScheme
   );
-  // 布局
-  const layout = useStorage<LayoutMode>("layout", defaultSettings.layout as LayoutMode);
-  // 水印
-  const watermarkEnabled = useStorage<boolean>(
-    "watermarkEnabled",
-    defaultSettings.watermarkEnabled
-  );
 
-  // 主题
-  const themeColor = useStorage<string>("themeColor", defaultSettings.themeColor);
-  const theme = useStorage<ThemeMode>("theme", defaultSettings.theme);
+  const layout = useStorage<LayoutMode>(SETTINGS_KEYS.LAYOUT, defaultSettings.layout as LayoutMode);
 
-  //  监听主题变化
+  const themeColor = useStorage<string>(SETTINGS_KEYS.THEME_COLOR, defaultSettings.themeColor);
+
+  const theme = useStorage<ThemeMode>(SETTINGS_KEYS.THEME, defaultSettings.theme);
+
+  // 🎯 设置项映射
+  const settingsMap = {
+    showTagsView,
+    showAppLogo,
+    showWatermark,
+    sidebarColorScheme,
+    layout,
+  } as const;
+
+  // 🎯 监听器 - 主题变化
   watch(
     [theme, themeColor],
     ([newTheme, newThemeColor]) => {
@@ -40,7 +73,7 @@ export const useSettingsStore = defineStore("setting", () => {
     { immediate: true }
   );
 
-  //  监听浅色侧边栏配色方案变化
+  // 🎯 监听器 - 侧边栏配色方案变化
   watch(
     [sidebarColorScheme],
     ([newSidebarColorScheme]) => {
@@ -49,49 +82,79 @@ export const useSettingsStore = defineStore("setting", () => {
     { immediate: true }
   );
 
-  // 设置映射
-  const settingsMap: Record<string, Ref<SettingsValue>> = {
-    tagsView,
-    sidebarLogo,
-    sidebarColorScheme,
-    layout,
-    watermarkEnabled,
-  };
-
-  function changeSetting({ key, value }: { key: string; value: SettingsValue }) {
+  // 🎯 统一的设置更新方法 - 类型安全
+  function updateSetting<K extends keyof typeof settingsMap>(key: K, value: SettingValue<K>): void {
     const setting = settingsMap[key];
-    if (setting) setting.value = value;
+    if (setting) {
+      (setting as Ref<any>).value = value;
+    }
   }
 
-  function changeTheme(val: ThemeMode) {
-    theme.value = val;
+  // 🎯 主题相关的专用更新方法
+  function updateTheme(newTheme: ThemeMode): void {
+    theme.value = newTheme;
   }
 
-  function changeSidebarColor(val: string) {
-    sidebarColorScheme.value = val;
+  function updateThemeColor(newColor: string): void {
+    themeColor.value = newColor;
   }
 
-  function changeThemeColor(color: string) {
-    themeColor.value = color;
+  function updateSidebarColorScheme(newScheme: string): void {
+    sidebarColorScheme.value = newScheme;
   }
 
-  function changeLayout(val: LayoutMode) {
-    layout.value = val;
+  function updateLayout(newLayout: LayoutMode): void {
+    layout.value = newLayout;
+  }
+
+  // 🎯 设置面板显示控制
+  function toggleSettingsPanel(): void {
+    settingsVisible.value = !settingsVisible.value;
+  }
+
+  function showSettingsPanel(): void {
+    settingsVisible.value = true;
+  }
+
+  function hideSettingsPanel(): void {
+    settingsVisible.value = false;
+  }
+
+  // 🎯 批量重置设置
+  function resetSettings(): void {
+    showTagsView.value = defaultSettings.showTagsView;
+    showAppLogo.value = defaultSettings.showAppLogo;
+    showWatermark.value = defaultSettings.showWatermark;
+    sidebarColorScheme.value = defaultSettings.sidebarColorScheme;
+    layout.value = defaultSettings.layout as LayoutMode;
+    themeColor.value = defaultSettings.themeColor;
+    theme.value = defaultSettings.theme;
   }
 
   return {
+    // 状态
     settingsVisible,
-    tagsView,
-    sidebarLogo,
+    showTagsView,
+    showAppLogo,
+    showWatermark,
     sidebarColorScheme,
     layout,
     themeColor,
     theme,
-    watermarkEnabled,
-    changeSetting,
-    changeTheme,
-    changeThemeColor,
-    changeLayout,
-    changeSidebarColor,
+
+    // 更新方法
+    updateSetting,
+    updateTheme,
+    updateThemeColor,
+    updateSidebarColorScheme,
+    updateLayout,
+
+    // 面板控制
+    toggleSettingsPanel,
+    showSettingsPanel,
+    hideSettingsPanel,
+
+    // 重置功能
+    resetSettings,
   };
 });
diff --git a/src/store/modules/user.store.ts b/src/store/modules/user.store.ts
index 4f0944ae..8a0b1235 100644
--- a/src/store/modules/user.store.ts
+++ b/src/store/modules/user.store.ts
@@ -90,6 +90,17 @@ export const useUserStore = defineStore("user", () => {
     // 清除标签视图
     useTagsViewStore().delAllViews();
 
+    // 3. 清理 WebSocket 连接
+    // 动态导入避免循环依赖
+    import("@/plugins/websocket")
+      .then(({ cleanupWebSocket }) => {
+        cleanupWebSocket();
+        console.log("[UserStore] WebSocket connections cleaned up");
+      })
+      .catch((error) => {
+        console.error("[UserStore] Failed to cleanup WebSocket:", error);
+      });
+
     return Promise.resolve();
   }
 
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index 79361e5f..fc5b729b 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -2,8 +2,6 @@ $border: 1px solid var(--el-border-color-light);
 
 /* el-dialog */
 .el-dialog {
-  padding: 0 !important;
-
   .el-dialog__header {
     padding: 15px 20px;
     margin: 0;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 22a4d9e8..95335687 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -10,6 +10,67 @@
   background-color: var(--el-color-primary);
 }
 
+// 混合布局左侧菜单的hover样式
+.layout-mix .layout__sidebar--left .el-menu {
+  .el-menu-item {
+    &:hover {
+      // 极简白主题：使用浅灰色背景
+      background-color: var(--el-fill-color-light) !important;
+    }
+  }
+
+  .el-sub-menu__title {
+    &:hover {
+      // 极简白主题：使用浅灰色背景
+      background-color: var(--el-fill-color-light) !important;
+    }
+  }
+}
+
+// 深色主题或深蓝色侧边栏配色下的左侧菜单hover样式
+html.dark .layout-mix .layout__sidebar--left .el-menu,
+html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
+  .el-menu-item {
+    &:hover {
+      // 深色背景：使用CSS变量
+      background-color: var(--menu-hover) !important;
+    }
+  }
+
+  .el-sub-menu__title {
+    &:hover {
+      // 深色背景：使用CSS变量
+      background-color: var(--menu-hover) !important;
+    }
+  }
+}
+
+// 窄屏时隐藏菜单文字，只显示图标
+.hideSidebar {
+  // Top布局和Mix布局的水平菜单
+  &.layout-top .layout__header .el-menu--horizontal,
+  &.layout-mix .layout__header .el-menu--horizontal {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*="i-svg"]):not(.el-icon) {
+        display: none !important;
+      }
+    }
+  }
+
+  // Mix布局的左侧菜单
+  &.layout-mix .layout__sidebar--left .el-menu {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*="i-svg"]):not(.el-icon) {
+        display: none !important;
+      }
+    }
+  }
+}
+
 // 全局搜索区域样式
 .search-container {
   padding: 18px 16px 0;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d96c9585..c907f33a 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,6 +1,7 @@
 @forward "element-plus/theme-chalk/src/common/var.scss" with (
   $colors: (
     "primary": (
+      // 默认主题色 - 修改此值时需同步修改 src/settings.ts 中的 themeColor
       "base": #4080ff,
     ),
     "success": (
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 22494383..6e194f02 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -7,7 +7,6 @@ export {}
 declare module "vue" {
   export interface GlobalComponents {
     AppLink: (typeof import("./../components/AppLink/index.vue"))["default"];
-    AppMain: (typeof import("./../layout/components/AppMain/index.vue"))["default"];
     Breadcrumb: (typeof import("./../components/Breadcrumb/index.vue"))["default"];
     CopyButton: (typeof import("./../components/CopyButton/index.vue"))["default"];
     CURD: (typeof import("./../components/CURD/index.vue"))["default"];
@@ -74,24 +73,15 @@ declare module "vue" {
     MenuSearch: (typeof import("./../components/MenuSearch/index.vue"))["default"];
     MultiImageUpload: (typeof import("./../components/Upload/MultiImageUpload.vue"))["default"];
     Notification: (typeof import("./../components/Notification/index.vue"))["default"];
-    LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
     PageContent: (typeof import("./../components/CURD/PageContent.vue"))["default"];
     PageModal: (typeof import("./../components/CURD/PageModal.vue"))["default"];
     PageSearch: (typeof import("./../components/CURD/PageSearch.vue"))["default"];
     Pagination: (typeof import("./../components/Pagination/index.vue"))["default"];
     RouterLink: (typeof import("vue-router"))["RouterLink"];
     RouterView: (typeof import("vue-router"))["RouterView"];
-    Settings: (typeof import("./../layout/components/Settings/index.vue"))["default"];
-    Sidebar: (typeof import("./../layout/components/Sidebar/index.vue"))["default"];
-    SidebarLogo: (typeof import("./../layout/components/Sidebar/components/SidebarLogo.vue"))["default"];
-    SidebarMenu: (typeof import("./../layout/components/Sidebar/components/SidebarMenu.vue"))["default"];
-    SidebarMenuItem: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItem.vue"))["default"];
-    SidebarMenuItemTitle: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItemTitle.vue"))["default"];
-    SidebarMixTopMenu: (typeof import("./../layout/components/Sidebar/components/SidebarMixTopMenu.vue"))["default"];
     SingleImageUpload: (typeof import("./../components/Upload/SingleImageUpload.vue"))["default"];
     SizeSelect: (typeof import("./../components/SizeSelect/index.vue"))["default"];
     TableSelect: (typeof import("./../components/TableSelect/index.vue"))["default"];
-    TagsView: (typeof import("./../layout/components/TagsView/index.vue"))["default"];
     WangEditor: (typeof import("./../components/WangEditor/index.vue"))["default"];
   }
   export interface ComponentCustomProperties {
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 54d2a356..25487ca1 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -2,7 +2,7 @@ declare global {
   /**
    * 响应数据
    */
-  interface ResponseData<T = any> {
+  interface ApiResponse<T = any> {
     code: string;
     data: T;
     msg: string;
@@ -59,9 +59,9 @@ declare global {
     /** 是否显示设置 */
     showSettings: boolean;
     /** 是否显示多标签导航 */
-    tagsView: boolean;
-    /** 是否显示侧边栏Logo */
-    sidebarLogo: boolean;
+    showTagsView: boolean;
+    /** 是否显示应用Logo */
+    showAppLogo: boolean;
     /** 导航栏布局(left|top|mix) */
     layout: "left" | "top" | "mix";
     /** 主题颜色 */
@@ -72,8 +72,8 @@ declare global {
     size: string;
     /** 语言( zh-cn| en) */
     language: string;
-    /** 是否开启水印 */
-    watermarkEnabled: boolean;
+    /** 是否显示水印 */
+    showWatermark: boolean;
     /** 水印内容 */
     watermarkContent: string;
     /** 侧边栏配色方案 */
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 869ea836..db0a7403 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,5 +1,5 @@
 import { Storage } from "./storage";
-import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY, REMEMBER_ME_KEY } from "@/constants/cache-keys";
+import { AUTH_KEYS } from "@/constants";
 
 /**
  * 身份验证工具类
@@ -23,11 +23,11 @@ export class Auth {
    * @returns 当前有效的访问令牌
    */
   static getAccessToken(): string {
-    const isRememberMe = Storage.get<boolean>(REMEMBER_ME_KEY, false);
+    const isRememberMe = Storage.get<boolean>(AUTH_KEYS.REMEMBER_ME, false);
     // 根据"记住我"状态决定从哪个存储位置获取token
     return isRememberMe
-      ? Storage.get(ACCESS_TOKEN_KEY, "")
-      : Storage.sessionGet(ACCESS_TOKEN_KEY, "");
+      ? Storage.get(AUTH_KEYS.ACCESS_TOKEN, "")
+      : Storage.sessionGet(AUTH_KEYS.ACCESS_TOKEN, "");
   }
 
   /**
@@ -35,10 +35,10 @@ export class Auth {
    * @returns 当前有效的刷新令牌
    */
   static getRefreshToken(): string {
-    const isRememberMe = Storage.get<boolean>(REMEMBER_ME_KEY, false);
+    const isRememberMe = Storage.get<boolean>(AUTH_KEYS.REMEMBER_ME, false);
     return isRememberMe
-      ? Storage.get(REFRESH_TOKEN_KEY, "")
-      : Storage.sessionGet(REFRESH_TOKEN_KEY, "");
+      ? Storage.get(AUTH_KEYS.REFRESH_TOKEN, "")
+      : Storage.sessionGet(AUTH_KEYS.REFRESH_TOKEN, "");
   }
 
   /**
@@ -49,19 +49,19 @@ export class Auth {
    */
   static setTokens(accessToken: string, refreshToken: string, rememberMe: boolean): void {
     // 保存"记住我"状态
-    Storage.set(REMEMBER_ME_KEY, rememberMe);
+    Storage.set(AUTH_KEYS.REMEMBER_ME, rememberMe);
 
     if (rememberMe) {
       // 使用localStorage长期保存
-      Storage.set(ACCESS_TOKEN_KEY, accessToken);
-      Storage.set(REFRESH_TOKEN_KEY, refreshToken);
+      Storage.set(AUTH_KEYS.ACCESS_TOKEN, accessToken);
+      Storage.set(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
     } else {
       // 使用sessionStorage临时保存
-      Storage.sessionSet(ACCESS_TOKEN_KEY, accessToken);
-      Storage.sessionSet(REFRESH_TOKEN_KEY, refreshToken);
+      Storage.sessionSet(AUTH_KEYS.ACCESS_TOKEN, accessToken);
+      Storage.sessionSet(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
       // 清除localStorage中可能存在的token
-      Storage.remove(ACCESS_TOKEN_KEY);
-      Storage.remove(REFRESH_TOKEN_KEY);
+      Storage.remove(AUTH_KEYS.ACCESS_TOKEN);
+      Storage.remove(AUTH_KEYS.REFRESH_TOKEN);
     }
   }
 
@@ -69,10 +69,10 @@ export class Auth {
    * 清除所有身份验证相关的数据
    */
   static clearAuth(): void {
-    Storage.remove(ACCESS_TOKEN_KEY);
-    Storage.remove(REFRESH_TOKEN_KEY);
-    Storage.sessionRemove(ACCESS_TOKEN_KEY);
-    Storage.sessionRemove(REFRESH_TOKEN_KEY);
+    Storage.remove(AUTH_KEYS.ACCESS_TOKEN);
+    Storage.remove(AUTH_KEYS.REFRESH_TOKEN);
+    Storage.sessionRemove(AUTH_KEYS.ACCESS_TOKEN);
+    Storage.sessionRemove(AUTH_KEYS.REFRESH_TOKEN);
     // 不清除记住我设置，保留用户偏好
   }
 
@@ -81,6 +81,6 @@ export class Auth {
    * @returns 是否记住我
    */
   static getRememberMe(): boolean {
-    return Storage.get<boolean>(REMEMBER_ME_KEY, false);
+    return Storage.get<boolean>(AUTH_KEYS.REMEMBER_ME, false);
   }
 }
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 15bf8860..4baf361f 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -5,102 +5,170 @@ import { ResultEnum } from "@/enums/api/result.enum";
 import { Auth } from "@/utils/auth";
 import router from "@/router";
 
-// 创建 axios 实例
-const service = axios.create({
+/**
+ * 创建 HTTP 请求实例
+ */
+const httpRequest = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
   timeout: 50000,
   headers: { "Content-Type": "application/json;charset=utf-8" },
   paramsSerializer: (params) => qs.stringify(params),
 });
 
-// 请求拦截器
-service.interceptors.request.use(
+/**
+ * 请求拦截器 - 添加 Authorization 头
+ */
+httpRequest.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
     const accessToken = Auth.getAccessToken();
+
     // 如果 Authorization 设置为 no-auth，则不携带 Token
     if (config.headers.Authorization !== "no-auth" && accessToken) {
       config.headers.Authorization = `Bearer ${accessToken}`;
     } else {
       delete config.headers.Authorization;
     }
+
     return config;
   },
-  (error) => Promise.reject(error)
+  (error) => {
+    console.error("Request interceptor error:", error);
+    return Promise.reject(error);
+  }
 );
-// 响应拦截器
-service.interceptors.response.use(
-  (response: AxiosResponse) => {
-    // 如果响应是二进制流，则直接返回，用于下载文件、Excel 导出等
+
+/**
+ * 响应拦截器 - 统一处理响应和错误
+ */
+httpRequest.interceptors.response.use(
+  (response: AxiosResponse<ApiResponse>) => {
+    // 如果响应是二进制流，则直接返回（用于文件下载、Excel 导出等）
     if (response.config.responseType === "blob") {
       return response;
     }
+
     const { code, data, msg } = response.data;
+
+    // 请求成功
     if (code === ResultEnum.SUCCESS) {
       return data;
     }
+
+    // 业务错误
     ElMessage.error(msg || "系统出错");
-    return Promise.reject(new Error(msg || "Error"));
+    return Promise.reject(new Error(msg || "Business Error"));
   },
   async (error) => {
-    console.error("request error", error); // for debug
+    console.error("Response interceptor error:", error);
+
     const { config, response } = error;
-    if (response) {
-      const { code, msg } = response.data;
-      if (code === ResultEnum.ACCESS_TOKEN_INVALID) {
-        // Token 过期，刷新 Token
-        return handleTokenRefresh(config);
-      } else if (code === ResultEnum.REFRESH_TOKEN_INVALID) {
-        // 刷新 Token 过期，跳转登录页
-        await handleSessionExpired();
-        return Promise.reject(new Error(msg || "Error"));
-      } else {
-        ElMessage.error(msg || "系统出错");
-      }
+
+    // 网络错误或服务器无响应
+    if (!response) {
+      ElMessage.error("网络连接失败，请检查网络设置");
+      return Promise.reject(error);
+    }
+
+    const { code, msg } = response.data as ApiResponse;
+
+    switch (code) {
+      case ResultEnum.ACCESS_TOKEN_INVALID:
+        // Access Token 过期，尝试刷新
+        return refreshTokenAndRetry(config);
+
+      case ResultEnum.REFRESH_TOKEN_INVALID:
+        // Refresh Token 过期，跳转登录页
+        await redirectToLogin("登录已过期，请重新登录");
+        return Promise.reject(new Error(msg || "Refresh Token Invalid"));
+
+      default:
+        ElMessage.error(msg || "请求失败");
+        return Promise.reject(new Error(msg || "Request Error"));
     }
-    return Promise.reject(error.message);
   }
 );
-export default service;
-// 是否正在刷新标识，避免重复刷新
-let isRefreshing = false;
-// 因 Token 过期导致的请求等待队列
-const waitingQueue: Array<() => void> = [];
-// 刷新 Token 处理
-async function handleTokenRefresh(config: InternalAxiosRequestConfig) {
-  return new Promise((resolve) => {
+
+/**
+ * 重试请求的回调函数类型
+ */
+type RetryCallback = () => void;
+
+// Token 刷新相关状态
+let isRefreshingToken = false;
+const pendingRequests: RetryCallback[] = [];
+
+/**
+ * 刷新 Token 并重试请求
+ */
+async function refreshTokenAndRetry(config: InternalAxiosRequestConfig): Promise<any> {
+  return new Promise((resolve, reject) => {
     // 封装需要重试的请求
     const retryRequest = () => {
-      config.headers.Authorization = `Bearer ${Auth.getAccessToken()}`;
-      resolve(service(config));
+      const newToken = Auth.getAccessToken();
+      if (newToken && config.headers) {
+        config.headers.Authorization = `Bearer ${newToken}`;
+      }
+      httpRequest(config).then(resolve).catch(reject);
     };
-    waitingQueue.push(retryRequest);
-    if (!isRefreshing) {
-      isRefreshing = true;
+
+    // 将请求加入等待队列
+    pendingRequests.push(retryRequest);
+
+    // 如果没有正在刷新，则开始刷新流程
+    if (!isRefreshingToken) {
+      isRefreshingToken = true;
+
       useUserStoreHook()
         .refreshToken()
         .then(() => {
-          // 依次重试队列中所有请求, 重试后清空队列
-          waitingQueue.forEach((callback) => callback());
-          waitingQueue.length = 0;
+          // 刷新成功，重试所有等待的请求
+          pendingRequests.forEach((callback) => {
+            try {
+              callback();
+            } catch (error) {
+              console.error("Retry request error:", error);
+            }
+          });
+          // 清空队列
+          pendingRequests.length = 0;
         })
         .catch(async (error) => {
-          console.error("handleTokenRefresh error", error);
-          // 刷新 Token 失败，跳转登录页
-          await handleSessionExpired();
+          console.error("Token refresh failed:", error);
+          // 刷新失败，清空队列并跳转登录页
+          pendingRequests.length = 0;
+          await redirectToLogin("登录状态已失效，请重新登录");
+          // 拒绝所有等待的请求
+          pendingRequests.forEach(() => {
+            reject(new Error("Token refresh failed"));
+          });
         })
         .finally(() => {
-          isRefreshing = false;
+          isRefreshingToken = false;
         });
     }
   });
 }
-// 处理会话过期
-async function handleSessionExpired() {
-  ElNotification({
-    title: "提示",
-    message: "您的会话已过期，请重新登录",
-    type: "info",
-  });
-  await useUserStoreHook().resetAllState();
-  router.push("/login");
+
+/**
+ * 重定向到登录页面
+ */
+async function redirectToLogin(message: string = "请重新登录"): Promise<void> {
+  try {
+    ElNotification({
+      title: "提示",
+      message,
+      type: "warning",
+      duration: 3000,
+    });
+
+    await useUserStoreHook().resetAllState();
+
+    // 跳转到登录页，保留当前路由用于登录后跳转
+    const currentPath = router.currentRoute.value.fullPath;
+    await router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
+  } catch (error) {
+    console.error("Redirect to login error:", error);
+  }
 }
+
+export default httpRequest;
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 558503ee..e4aa3561 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -77,6 +77,12 @@ export function applyTheme(colors: Record<string, string>) {
   Object.entries(colors).forEach(([key, value]) => {
     el.style.setProperty(`--el-color-${key}`, value);
   });
+
+  // 确保主题色立即生效，强制重新渲染
+  requestAnimationFrame(() => {
+    // 触发样式重新计算
+    el.style.setProperty("--theme-update-trigger", Date.now().toString());
+  });
 }
 
 /**
diff --git a/src/views/codegen/index.vue b/src/views/codegen/index.vue
index d7b8bc68..7bd3dfb2 100644
--- a/src/views/codegen/index.vue
+++ b/src/views/codegen/index.vue
@@ -547,7 +547,7 @@ const initSort = () => {
 
 const setNodeSort = (oldIndex: number, newIndex: number) => {
   // 使用arr复制一份表格数组数据
-  let arr = Object.assign([], genConfigFormData.value.fieldConfigs);
+  const arr = Object.assign([], genConfigFormData.value.fieldConfigs);
   const currentRow = arr.splice(oldIndex, 1)[0];
   arr.splice(newIndex, 0, currentRow);
   arr.forEach((item: FieldConfig, index) => {
diff --git a/src/views/demo/curd/config/content.ts b/src/views/demo/curd/config/content.ts
index 020b1fd1..871dfc78 100644
--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -21,7 +21,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
       list: res.list,
     };
   },
-  indexAction: function (params) {
+  indexAction(params) {
     return UserAPI.getPage(params);
   },
   deleteAction: UserAPI.deleteByIds,
@@ -35,7 +35,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     console.log("importsAction", data);
     return Promise.resolve();
   },
-  exportsAction: async function (params) {
+  async exportsAction(params) {
     // 模拟获取到的是全量数据
     const res = await UserAPI.getPage(params);
     console.log("exportsAction", res.list);
diff --git a/src/views/demo/curd/config/edit.ts b/src/views/demo/curd/config/edit.ts
index 57b44448..2d5444a6 100644
--- a/src/views/demo/curd/config/edit.ts
+++ b/src/views/demo/curd/config/edit.ts
@@ -15,7 +15,7 @@ const modalConfig: IModalConfig<UserForm> = {
   beforeSubmit(data) {
     console.log("beforeSubmit", data);
   },
-  formAction: function (data) {
+  formAction(data) {
     return UserAPI.update(data.id as string, data);
   },
   formItems: [
diff --git a/src/views/demo/curd/config/options.ts b/src/views/demo/curd/config/options.ts
index 4fe2f479..3f7bd82b 100644
--- a/src/views/demo/curd/config/options.ts
+++ b/src/views/demo/curd/config/options.ts
@@ -9,9 +9,9 @@ interface OptionType {
 }
 
 // 明确指定类型为 OptionType[]
-export let deptArr = ref<OptionType[]>([]);
-export let roleArr = ref<OptionType[]>([]);
-export let stateArr = ref<OptionType[]>([
+export const deptArr = ref<OptionType[]>([]);
+export const roleArr = ref<OptionType[]>([]);
+export const stateArr = ref<OptionType[]>([
   { label: "启用", value: 1 },
   { label: "禁用", value: 0 },
 ]);
diff --git a/src/views/demo/curd/config2/add.ts b/src/views/demo/curd/config2/add.ts
index 0c5300ee..374b4e96 100644
--- a/src/views/demo/curd/config2/add.ts
+++ b/src/views/demo/curd/config2/add.ts
@@ -1,4 +1,4 @@
-import { type UserForm } from "@/api/system/user.api";
+import type { UserForm } from "@/api/system/user.api";
 import type { IModalConfig } from "@/components/CURD/types";
 import { deptArr } from "../config/options";
 
diff --git a/src/views/demo/curd/config2/content.ts b/src/views/demo/curd/config2/content.ts
index 11a82169..72b0dd2e 100644
--- a/src/views/demo/curd/config2/content.ts
+++ b/src/views/demo/curd/config2/content.ts
@@ -7,7 +7,7 @@ const contentConfig: IContentConfig = {
   },
   pagePosition: "right",
   toolbar: [],
-  indexAction: function (params) {
+  indexAction(params) {
     // 模拟发起网络请求获取列表数据
     console.log("indexAction:", params);
     return Promise.resolve({
diff --git a/src/views/demo/curd/config2/edit.ts b/src/views/demo/curd/config2/edit.ts
index d69ee6f2..0fccc5d0 100644
--- a/src/views/demo/curd/config2/edit.ts
+++ b/src/views/demo/curd/config2/edit.ts
@@ -15,7 +15,7 @@ const modalConfig: IModalConfig = {
   beforeSubmit(data) {
     console.log("beforeSubmit", data);
   },
-  formAction: function (data) {
+  formAction(data) {
     // return UserAPI.update(data.id as string, data);
     // 模拟发起网络请求修改字段
     ElMessage.success(JSON.stringify(data));
diff --git a/src/views/demo/curd/config2/search.ts b/src/views/demo/curd/config2/search.ts
index 15611a7c..83c1a102 100644
--- a/src/views/demo/curd/config2/search.ts
+++ b/src/views/demo/curd/config2/search.ts
@@ -35,7 +35,7 @@ const searchConfig: ISearchConfig = {
       attrs: { placeholder: "全部", clearable: true },
       options: stateArr as any,
       events: {
-        change: function (e) {
+        change(e) {
           console.log("选中的值: ", e);
         },
       },
diff --git a/src/views/demo/dictionary.vue b/src/views/demo/dictionary.vue
index 60969300..c69cb9c5 100644
--- a/src/views/demo/dictionary.vue
+++ b/src/views/demo/dictionary.vue
@@ -1,10 +1,4 @@
 <!-- 字典组件示例 -->
-<script setup lang="ts">
-const stringValue = ref("1"); // 性别(值为String)
-const numberValue = ref(1); // 性别(值为Number)
-const arrayValue = ref(["1", "2"]); // 性别(值为Array)
-</script>
-
 <template>
   <div class="app-container">
     <el-link
@@ -46,3 +40,9 @@ const arrayValue = ref(["1", "2"]); // 性别(值为Array)
     </el-form>
   </div>
 </template>
+
+<script setup lang="ts">
+const stringValue = ref("1"); // 性别(值为String)
+const numberValue = ref(1); // 性别(值为Number)
+const arrayValue = ref(["1", "2"]); // 性别(值为Array)
+</script>
diff --git a/src/views/demo/icon-selector.vue b/src/views/demo/icon-selector.vue
index c9df065e..d3a79682 100644
--- a/src/views/demo/icon-selector.vue
+++ b/src/views/demo/icon-selector.vue
@@ -1,11 +1,4 @@
 <!-- 图标选择器示例 -->
-<script setup lang="ts">
-// element-plus 图标格式以el-icon-开头
-const iconName = ref("el-icon-edit");
-// 本地SVG图标格式取 src/assets/icons 下的文件名，不需要svg后缀
-// const iconName = ref("api");
-</script>
-
 <template>
   <div class="app-container">
     <el-link
@@ -19,3 +12,10 @@ const iconName = ref("el-icon-edit");
     <icon-select v-model="iconName" />
   </div>
 </template>
+
+<script setup lang="ts">
+// element-plus 图标格式以el-icon-开头
+const iconName = ref("el-icon-edit");
+// 本地SVG图标格式取 src/assets/icons 下的文件名，不需要svg后缀
+// const iconName = ref("api");
+</script>
diff --git a/src/views/demo/signature.vue b/src/views/demo/signature.vue
index 2905ed68..52e4a1ec 100644
--- a/src/views/demo/signature.vue
+++ b/src/views/demo/signature.vue
@@ -1,3 +1,25 @@
+<template>
+  <div class="canvas-dom">
+    <h3>基于canvas实现的签名组件</h3>
+    <header>
+      <el-button type="primary" @click="handleSaveImg">保存为图片</el-button>
+      <el-button @click="handleToFile">保存到后端</el-button>
+      <el-button @click="handleClearSign">清空签名</el-button>
+    </header>
+    <canvas
+      ref="canvas"
+      height="200"
+      width="500"
+      @mousedown="onEventStart"
+      @mousemove.stop.prevent="onEventMove"
+      @mouseup="onEventEnd"
+      @touchstart="onEventStart"
+      @touchmove.stop.prevent="onEventMove"
+      @touchend="onEventEnd"
+    />
+    <img v-if="imgUrl" :src="imgUrl" alt="签名" />
+  </div>
+</template>
 <script setup lang="ts">
 import FileAPI from "@/api/file.api";
 
@@ -133,28 +155,6 @@ function paint(
   ctx.stroke();
 }
 </script>
-<template>
-  <div class="canvas-dom">
-    <h3>基于canvas实现的签名组件</h3>
-    <header>
-      <el-button type="primary" @click="handleSaveImg">保存为图片</el-button>
-      <el-button @click="handleToFile">保存到后端</el-button>
-      <el-button @click="handleClearSign">清空签名</el-button>
-    </header>
-    <canvas
-      ref="canvas"
-      height="200"
-      width="500"
-      @mousedown="onEventStart"
-      @mousemove.stop.prevent="onEventMove"
-      @mouseup="onEventEnd"
-      @touchstart="onEventStart"
-      @touchmove.stop.prevent="onEventMove"
-      @touchend="onEventEnd"
-    />
-    <img v-if="imgUrl" :src="imgUrl" alt="签名" />
-  </div>
-</template>
 <style scoped lang="scss">
 .canvas-dom {
   width: 100%;
diff --git a/src/views/demo/table-select/config/select.ts b/src/views/demo/table-select/config/select.ts
index 874df7ad..e043e66c 100644
--- a/src/views/demo/table-select/config/select.ts
+++ b/src/views/demo/table-select/config/select.ts
@@ -81,7 +81,7 @@ const selectConfig: ISelectConfig = {
       },
     },
   ],
-  indexAction: function (params) {
+  indexAction(params) {
     if ("createAt" in params) {
       const createAt = params.createAt as string[];
       if (createAt?.length > 1) {
diff --git a/src/views/demo/table-select/index.vue b/src/views/demo/table-select/index.vue
index 0d7202c3..c9c8397b 100644
--- a/src/views/demo/table-select/index.vue
+++ b/src/views/demo/table-select/index.vue
@@ -1,4 +1,27 @@
 <!-- 列表选择器示例 -->
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/table-select/index.vue"
+      type="primary"
+      target="_blank"
+      class="mb-10"
+    >
+      示例源码 请点击>>>>
+    </el-link>
+    <table-select :text="text" :select-config="selectConfig" @confirm-click="handleConfirm">
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
+      </template>
+      <template #gender="scope">
+        <DictLabel v-model="scope.row.gender" code="gender" />
+      </template>
+    </table-select>
+  </div>
+</template>
+
 <script setup lang="ts">
 import selectConfig from "./config/select";
 import { useDictStore } from "@/store";
@@ -29,26 +52,3 @@ const text = computed(() => {
     : "";
 });
 </script>
-
-<template>
-  <div class="app-container">
-    <el-link
-      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/table-select/index.vue"
-      type="primary"
-      target="_blank"
-      class="mb-10"
-    >
-      示例源码 请点击>>>>
-    </el-link>
-    <table-select :text="text" :select-config="selectConfig" @confirm-click="handleConfirm">
-      <template #status="scope">
-        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
-          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
-        </el-tag>
-      </template>
-      <template #gender="scope">
-        <DictLabel v-model="scope.row.gender" code="gender" />
-      </template>
-    </table-select>
-  </div>
-</template>
diff --git a/src/views/demo/text-scroll.vue b/src/views/demo/text-scroll.vue
index 7c638bf4..e7000461 100644
--- a/src/views/demo/text-scroll.vue
+++ b/src/views/demo/text-scroll.vue
@@ -13,7 +13,7 @@
     <TextScroll type="info" text="这是一条信息类型的滚动公告" />
 
     <!-- 自定义速度和方向 -->
-    <TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" showClose />
+    <TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" show-close />
   </div>
 </template>
 
diff --git a/src/views/demo/wang-editor.vue b/src/views/demo/wang-editor.vue
index 560f0ecb..dbb15257 100644
--- a/src/views/demo/wang-editor.vue
+++ b/src/views/demo/wang-editor.vue
@@ -1,10 +1,4 @@
 <!-- wangEditor富文本编辑器示例 -->
-<script setup lang="ts">
-import WangEditor from "@/components/WangEditor/index.vue";
-
-const value = ref("初始化内容");
-</script>
-
 <template>
   <div class="app-container">
     <el-link
@@ -22,3 +16,9 @@ const value = ref("初始化内容");
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import WangEditor from "@/components/WangEditor/index.vue";
+
+const value = ref("初始化内容");
+</script>
diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index 24283388..1e45fca7 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -86,22 +86,26 @@
     </div>
 
     <!-- 第三方登录 -->
-    <el-divider>
-      <el-text size="small">{{ t("login.otherLoginMethods") }}</el-text>
-    </el-divider>
-    <div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
-      <CommonWrapper>
-        <div text-20px class="i-svg:wechat" />
-      </CommonWrapper>
-      <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:qq" />
-      </CommonWrapper>
-      <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:github" />
-      </CommonWrapper>
-      <CommonWrapper>
-        <div text-20px cursor-pointer class="i-svg:gitee" />
-      </CommonWrapper>
+    <div class="third-party-login">
+      <div class="divider-container">
+        <div class="divider-line"></div>
+        <span class="divider-text">{{ t("login.otherLoginMethods") }}</span>
+        <div class="divider-line"></div>
+      </div>
+      <div class="flex-center gap-x-5 w-full text-[var(--el-text-color-secondary)]">
+        <CommonWrapper>
+          <div text-20px class="i-svg:wechat" />
+        </CommonWrapper>
+        <CommonWrapper>
+          <div text-20px cursor-pointer class="i-svg:qq" />
+        </CommonWrapper>
+        <CommonWrapper>
+          <div text-20px cursor-pointer class="i-svg:github" />
+        </CommonWrapper>
+        <CommonWrapper>
+          <div text-20px cursor-pointer class="i-svg:gitee" />
+        </CommonWrapper>
+      </div>
     </div>
   </div>
 </template>
@@ -122,9 +126,12 @@ const route = useRoute();
 onMounted(() => getCaptcha());
 
 const loginFormRef = ref<FormInstance>();
-const loading = ref(false); // 按钮 loading 状态
-const isCapsLock = ref(false); // 是否大写锁定
-const captchaBase64 = ref(); // 验证码图片Base64字符串
+const loading = ref(false);
+// 是否大写锁定
+const isCapsLock = ref(false);
+// 验证码图片Base64字符串
+const captchaBase64 = ref();
+// 记住我
 const rememberMe = Auth.getRememberMe();
 
 const loginFormData = ref<LoginFormData>({
@@ -132,7 +139,7 @@ const loginFormData = ref<LoginFormData>({
   password: "123456",
   captchaKey: "",
   captchaCode: "",
-  rememberMe: rememberMe,
+  rememberMe,
 });
 
 const loginRules = computed(() => {
@@ -178,7 +185,9 @@ function getCaptcha() {
     .finally(() => (codeLoading.value = false));
 }
 
-// 登录提交处理
+/**
+ * 登录提交
+ */
 async function handleLoginSubmit() {
   try {
     // 1. 表单验证
@@ -190,12 +199,16 @@ async function handleLoginSubmit() {
     // 2. 执行登录
     await userStore.login(loginFormData.value);
 
-    // 3. 获取用户信息
+    // 3. 获取用户信息（包含用户角色，用于路由生成）
     await userStore.getUserInfo();
 
-    // 4. 解析并跳转目标地址
+    // 4. 登录成功，让路由守卫处理跳转逻辑
+    // 解析目标地址，但不直接跳转
     const redirect = resolveRedirectTarget(route.query);
-    await router.push(redirect);
+    console.log("🎉 Login successful, target redirect:", redirect);
+
+    // 通过替换当前路由触发路由守卫，让守卫处理后续的路由生成和跳转
+    await router.replace(redirect);
 
     // 5. 记住我功能已实现，根据用户选择决定token的存储方式:
     // - 选中"记住我": token存储在localStorage中，浏览器关闭后仍然有效
@@ -211,8 +224,9 @@ async function handleLoginSubmit() {
 
 /**
  * 解析重定向目标
+ *
  * @param query 路由查询参数
- * @returns 标准化后的路由地址对象
+ * @returns 标准化后的路由地址
  */
 function resolveRedirectTarget(query: LocationQuery): RouteLocationRaw {
   // 默认跳转路径
@@ -247,3 +261,26 @@ function toOtherForm(type: "register" | "resetPwd") {
   emit("update:modelValue", type);
 }
 </script>
+
+<style lang="scss" scoped>
+.third-party-login {
+  .divider-container {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+
+    .divider-line {
+      flex: 1;
+      height: 1px;
+      background: linear-gradient(to right, transparent, var(--el-border-color-light), transparent);
+    }
+
+    .divider-text {
+      padding: 0 16px;
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      white-space: nowrap;
+    }
+  }
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 40f01c19..cac65417 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -46,7 +46,7 @@
 
 <script setup lang="ts">
 import logo from "@/assets/logo.png";
-import defaultSettings from "@/settings";
+import { defaultSettings } from "@/settings";
 import CommonWrapper from "@/components/CommonWrapper/index.vue";
 import DarkModeSwitch from "@/components/DarkModeSwitch/index.vue";
 
diff --git a/tsconfig.json b/tsconfig.json
index 7afb4fcd..c50ab871 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,6 +28,6 @@
     "types": ["node", "vite/client", "element-plus/global"]
   },
 
-  "include": ["mock/**/*.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"],
+  "include": ["mock/**/*.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts", "eslint.config.ts"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index d6547df9..5c0c5192 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -22,6 +22,8 @@ const pathSrc = resolve(__dirname, "src");
 // Vite配置  https://cn.vitejs.dev/config
 export default defineConfig(({ mode }: ConfigEnv) => {
   const env = loadEnv(mode, process.cwd());
+  const isProduction = mode === "production";
+
   return {
     resolve: {
       alias: {
@@ -189,17 +191,20 @@ export default defineConfig(({ mode }: ConfigEnv) => {
     // 构建配置
     build: {
       chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
-      minify: "terser", // Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效
-      terserOptions: {
-        compress: {
-          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
-          drop_console: true, // 生产环境去除 console
-          drop_debugger: true, // 生产环境去除 debugger
-        },
-        format: {
-          comments: false, // 删除注释
-        },
-      },
+      minify: isProduction ? "terser" : false, // 只在生产环境启用压缩
+      terserOptions: isProduction
+        ? {
+            compress: {
+              keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
+              drop_console: true, // 生产环境去除 console.log, console.warn, console.error 等
+              drop_debugger: true, // 生产环境去除 debugger
+              pure_funcs: ["console.log", "console.info"], // 移除指定的函数调用
+            },
+            format: {
+              comments: false, // 删除注释
+            },
+          }
+        : {},
       rollupOptions: {
         output: {
           // manualChunks: {