diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index f2783765..a79e6ed3 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -3,6 +3,7 @@
 module.exports = {
 	root: true,
 	// 继承某些已有的规则
+	plugins: ['stylelint-order'],
 	extends: [
 		"stylelint-config-standard", // 配置 stylelint 拓展插件
 		"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
@@ -26,7 +27,6 @@ module.exports = {
 	rules: {
 		"function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
 		"color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
-		"rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
 		"font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
 		"scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件
 		"property-no-unknown": null, // 禁止未知的属性
@@ -52,6 +52,20 @@ module.exports = {
 			{
 				ignoreAtRules: ["tailwind", "apply", "variants", "responsive", "screen"]
 			}
+		],
+		"order/order": [
+			"custom-properties",
+			"dollar-variables",
+			"at-rules",
+			"declarations",
+			"rules"
+		],
+		// 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
+		"rule-empty-line-before": [
+			"always", {
+				"except": ["first-nested"],
+				"ignore": ["after-comment"]
+			}
 		]
 	},
 	ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.html"]
diff --git a/package.json b/package.json
index 593e148e..61f5eaa4 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "stylelint-config-standard": "^36.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-config-tailwindcss": "^0.0.7",
+    "stylelint-order": "^6.0.4",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3",
     "typescript-eslint": "^7.15.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bcb036f2..96c97a40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -147,6 +147,9 @@ importers:
       stylelint-config-tailwindcss:
         specifier: ^0.0.7
         version: 0.0.7(stylelint@16.6.1(typescript@5.5.3))(tailwindcss@3.4.6)
+      stylelint-order:
+        specifier: ^6.0.4
+        version: 6.0.4(stylelint@16.6.1(typescript@5.5.3))
       tailwindcss:
         specifier: ^3.4.6
         version: 3.4.6
diff --git a/src/ThemeOverrides.ts b/src/ThemeOverrides.ts
index b8965704..80bd838e 100644
--- a/src/ThemeOverrides.ts
+++ b/src/ThemeOverrides.ts
@@ -13,5 +13,6 @@ export const initialThemeOverrides = (): GlobalThemeOverrides => ({
   InternalSelectMenu: {},
   Layout: {},
   Collapse: {},
-  Tree: {}
+  Tree: {},
+  Drawer: {}
 });
diff --git a/src/components/ConnectionDialog/index.vue b/src/components/ConnectionDialog/index.vue
index 5206a3d8..21b2b7b3 100644
--- a/src/components/ConnectionDialog/index.vue
+++ b/src/components/ConnectionDialog/index.vue
@@ -289,6 +289,7 @@ const handleConnect = async () => {
   .n-form-item-label {
     margin-bottom: 25px;
   }
+
   .n-form-item-blank,
   .n-form-item-feedback-wrapper {
     display: none !important;
@@ -301,6 +302,7 @@ const handleConnect = async () => {
     display: none;
   }
 }
+
 .remember-password,
 .advanced_option {
   display: flex;
diff --git a/src/hooks/helper/index.ts b/src/hooks/helper/index.ts
new file mode 100644
index 00000000..f205032a
--- /dev/null
+++ b/src/hooks/helper/index.ts
@@ -0,0 +1,192 @@
+import { GlobalThemeOverrides } from 'naive-ui';
+import { initialThemeOverrides } from '@/ThemeOverrides.ts';
+
+/**
+ * @description 获取 HTML 标签中设定的色值
+ * @param {string} variableName
+ */
+const getCssVariableValue = (variableName: string) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+};
+
+/**
+ * @description 亮色主题下颜色的重设
+ */
+export const lightOverrides = () => {
+  const lightOverrides: GlobalThemeOverrides = initialThemeOverrides();
+
+  // Spin 相关
+  (lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // List 相关
+  (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
+  (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
+    getCssVariableValue('--el-main-bg-color');
+  (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // Tag 相关
+  (lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
+    getCssVariableValue('--el-color-primary-light-9');
+
+  // Switch 相关
+  (lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
+    getCssVariableValue('--el-color-primary-light-1');
+  (lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
+    getCssVariableValue('--el-color-primary-light-5');
+
+  // Dropdown 相关
+  (lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
+    getCssVariableValue('--el-color-primary-light-2');
+  (lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionTextColorHover =
+    '#fff';
+
+  // Select 相关
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderActive = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderHover = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
+
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionCheckColor = '#fff';
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionTextColorActive = '#fff';
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
+  (
+    lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
+
+  // 折叠面板
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize = '11px';
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight =
+    '700';
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
+    getCssVariableValue('--el-aside-tree-item-arrow-color');
+  (lightOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).dividerColor =
+    getCssVariableValue('--el-aside-tree-divider-color');
+
+  // Tree
+  (lightOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
+  (lightOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+
+  // 抽屉
+  (lightOverrides.Drawer as NonNullable<GlobalThemeOverrides['Drawer']>).color =
+    getCssVariableValue('--el-drawer-bg-color');
+
+  return lightOverrides;
+};
+
+/**
+ * @description 暗色模式下的颜色重设
+ */
+export const darkOverrides = () => {
+  const darkOverrides: GlobalThemeOverrides = initialThemeOverrides();
+
+  (darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // List 相关
+  (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
+  (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
+    getCssVariableValue('--el-main-bg-color');
+  (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
+    getCssVariableValue('--el-main-text-color');
+
+  // Tag 相关
+  (darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor = getCssVariableValue(
+    '--el-color-primary-light-1'
+  );
+  (darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
+    getCssVariableValue('--el-color-primary-light-9');
+
+  // Switch 相关
+  (darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
+    getCssVariableValue('--el-color-primary-light-1');
+  (darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
+    getCssVariableValue('--el-color-primary-light-5');
+
+  // Dropdown 相关
+  (darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
+    getCssVariableValue('--el-color-primary-light-2');
+  (darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionTextColorHover =
+    '#fff';
+
+  // Select 相关
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderActive = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).borderHover = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
+  (
+    darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
+  ).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
+
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionCheckColor = '#fff';
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionTextColorActive = '#fff';
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
+  (
+    darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
+  ).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
+
+  // 折叠面板
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize = '11px';
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight = '700';
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
+    getCssVariableValue('--el-aside-tree-item-arrow-color');
+  (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).dividerColor =
+    getCssVariableValue('--el-aside-tree-divider-color');
+
+  // Tree
+  (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
+  (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor =
+    getCssVariableValue('--el-aside-tree-item-title-color');
+
+  // 抽屉
+  (darkOverrides.Drawer as NonNullable<GlobalThemeOverrides['Drawer']>).color =
+    getCssVariableValue('--el-drawer-bg-color');
+
+  return darkOverrides;
+};
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index a2d4150c..41e3bfc8 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,13 +1,13 @@
-import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
 import { Theme } from '@/styles/types';
-import { DEFAULT_PRIMARY } from '@/config';
-import { createDiscreteApi, GlobalThemeOverrides } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 import { asideTheme } from '@/styles/theme/aside.ts';
-import { getLightColor, getDarkColor } from '@/utils';
-import { initialThemeOverrides } from '@/ThemeOverrides.ts';
+import { storeToRefs } from 'pinia';
 import { useGlobalStore } from '@/stores/modules/global.ts';
+import { DEFAULT_PRIMARY } from '@/config';
 import { mainContentTheme } from '@/styles/theme/mainContent.ts';
+import { createDiscreteApi } from 'naive-ui';
+import { getLightColor, getDarkColor } from '@/utils';
+import { lightOverrides, darkOverrides } from '@/hooks/helper';
 
 /**
  * @description 全局主题 hooks
@@ -37,171 +37,6 @@ export const useTheme = () => {
     setAsideTheme();
   };
 
-  /**
-   * @description 获取 HTML 标签中设定的色值
-   * @param {string} variableName
-   */
-  const getCssVariableValue = (variableName: string) => {
-    return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
-  };
-
-  /**
-   * @description 亮色主题下颜色的重设
-   */
-  const lightOverrides = () => {
-    const lightOverrides: GlobalThemeOverrides = initialThemeOverrides();
-
-    // Spin 相关
-    (lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
-      '--el-color-primary-light-1'
-    );
-    (lightOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
-      getCssVariableValue('--el-main-text-color');
-
-    // List 相关
-    (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
-    (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
-      getCssVariableValue('--el-main-bg-color');
-    (lightOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
-      getCssVariableValue('--el-aside-text-color');
-
-    // Tag 相关
-    (lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor =
-      getCssVariableValue('--el-color-primary-light-1');
-    (lightOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
-      getCssVariableValue('--el-color-primary-light-9');
-
-    // Switch 相关
-    (lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
-      getCssVariableValue('--el-color-primary-light-1');
-    (lightOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
-      getCssVariableValue('--el-color-primary-light-5');
-
-    // Dropdown 相关
-    (lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
-      getCssVariableValue('--el-color-primary-light-2');
-    (
-      lightOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>
-    ).optionTextColorHover = '#fff';
-
-    // Select 相关
-    (
-      lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).borderFocus = getCssVariableValue('--el-color-primary-light-6');
-    (
-      lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).borderActive = getCssVariableValue('--el-color-primary-light-6');
-    (
-      lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).borderHover = getCssVariableValue('--el-color-primary-light-6');
-    (
-      lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
-    (
-      lightOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
-
-    (
-      lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionCheckColor = '#fff';
-    (
-      lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionTextColorActive = '#fff';
-    (
-      lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
-    (
-      lightOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
-
-    return lightOverrides;
-  };
-
-  /**
-   * @description 暗色主题下颜色的重设
-   */
-  const darkOverrides = () => {
-    const darkOverrides: GlobalThemeOverrides = initialThemeOverrides();
-
-    (darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).color = getCssVariableValue(
-      '--el-color-primary-light-1'
-    );
-    (darkOverrides.Spin as NonNullable<GlobalThemeOverrides['Spin']>).textColor =
-      getCssVariableValue('--el-main-text-color');
-
-    // List 相关
-    (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).fontSize = '14px';
-    (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).color =
-      getCssVariableValue('--el-main-bg-color');
-    (darkOverrides.List as NonNullable<GlobalThemeOverrides['List']>).textColor =
-      getCssVariableValue('--el-aside-text-color');
-
-    // Tag 相关
-    (darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).textColor = getCssVariableValue(
-      '--el-color-primary-light-1'
-    );
-    (darkOverrides.Tag as NonNullable<GlobalThemeOverrides['Tag']>).colorBordered =
-      getCssVariableValue('--el-color-primary-light-9');
-
-    // Switch 相关
-    (darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).railColorActive =
-      getCssVariableValue('--el-color-primary-light-1');
-    (darkOverrides.Switch as NonNullable<GlobalThemeOverrides['Switch']>).boxShadowFocus =
-      getCssVariableValue('--el-color-primary-light-5');
-
-    // Dropdown 相关
-    (darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionColorHover =
-      getCssVariableValue('--el-color-primary-light-2');
-    (darkOverrides.Dropdown as NonNullable<GlobalThemeOverrides['Dropdown']>).optionTextColorHover =
-      '#fff';
-
-    // Select 相关
-    (
-      darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).borderFocus = getCssVariableValue('--el-color-primary-light-6');
-    (
-      darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).borderActive = getCssVariableValue('--el-color-primary-light-6');
-    (
-      darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).borderHover = getCssVariableValue('--el-color-primary-light-6');
-    (
-      darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).boxShadowFocus = getCssVariableValue('--el-color-primary-light-6');
-    (
-      darkOverrides.InternalSelection as NonNullable<GlobalThemeOverrides['InternalSelection']>
-    ).boxShadowActive = getCssVariableValue('--el-color-primary-light-6');
-
-    (
-      darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionCheckColor = '#fff';
-    (
-      darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionTextColorActive = '#fff';
-    (
-      darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionColorActive = getCssVariableValue('--el-color-primary-light-2');
-    (
-      darkOverrides.InternalSelectMenu as NonNullable<GlobalThemeOverrides['InternalSelectMenu']>
-    ).optionColorActivePending = getCssVariableValue('--el-color-primary-light-2');
-
-    // 折叠面板
-    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleTextColor =
-      '#CCCCCC';
-    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontSize =
-      '11px';
-    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).titleFontWeight =
-      '700';
-    (darkOverrides.Collapse as NonNullable<GlobalThemeOverrides['Collapse']>).arrowColor =
-      '#C5C5C5';
-
-    // Tree
-    (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).fontSize = '13px';
-    (darkOverrides.Tree as NonNullable<GlobalThemeOverrides['Tree']>).nodeTextColor = '#cccccc';
-
-    return darkOverrides;
-  };
-
   /**
    * @description 组件颜色重写
    */
diff --git a/src/layouts/components/FileManagement/index.vue b/src/layouts/components/FileManagement/index.vue
index de187ac2..0b1eb29f 100644
--- a/src/layouts/components/FileManagement/index.vue
+++ b/src/layouts/components/FileManagement/index.vue
@@ -278,6 +278,7 @@ onUnmounted(() => {
 .tree-wrapper {
   height: 100%;
   overflow: hidden;
+
   :deep(.n-descriptions-header) {
     height: 35px;
     margin-bottom: unset;
@@ -285,30 +286,40 @@ onUnmounted(() => {
     font-size: 11px;
     font-weight: 400;
     line-height: 40px;
-    color: var(--el-aside-tree-text-color);
+    color: var(--el-aside-tree-head-title-color);
   }
+
   .collapse-item {
     margin: 0;
+
     &.n-collapse-item--active {
       height: calc(100vh - 94px);
     }
+
     :deep(.n-collapse-item__header) {
       padding-top: 0;
+
       .n-collapse-item__header-main {
         height: 22px;
         margin-left: 5px;
+
         .n-collapse-item-arrow {
           font-size: 16px;
+          color: var(--el-aside-tree-item-arrow-color);
         }
       }
     }
+
     :deep(.n-collapse-item__content-wrapper) {
       margin-left: 16px;
+
       .n-collapse-item__content-inner {
         padding-top: 0;
+
         .tree-item .n-tree-node-wrapper {
           padding: unset;
           line-height: 22px;
+
           .n-tree-node-content {
             padding: 0 6px 0 0;
           }
diff --git a/src/layouts/components/Main/index.vue b/src/layouts/components/Main/index.vue
index d9404c1b..eaa4b65b 100644
--- a/src/layouts/components/Main/index.vue
+++ b/src/layouts/components/Main/index.vue
@@ -55,6 +55,7 @@ const systemTips = reactive([
   height: calc(100% - 35px);
   min-height: 385px;
   background-color: var(--el-main-bg-color);
+
   :deep(.n-layout-scroll-container) {
     display: flex;
     align-items: center;
diff --git a/src/layouts/components/NavSearch/index.vue b/src/layouts/components/NavSearch/index.vue
index 26a8f8a7..d33cf5de 100644
--- a/src/layouts/components/NavSearch/index.vue
+++ b/src/layouts/components/NavSearch/index.vue
@@ -1,24 +1,19 @@
 <template>
-  <n-flex class="h-[35px] search-part" justify="center" align="center">
-    <n-icon color="#CCCCCC" size="16px" :component="ArrowBack" />
-    <n-icon color="#CCCCCC" size="16px" :component="ArrowForward" />
-    <n-input
-      round
-      placeholder="搜索"
-      size="small"
-      clearable
-      autosize
-      class="h-[24px] min-w-[50%] rounded-[5px] min-w-1/2"
+  <n-flex class="h-[35px] search-part" justify="start" align="center">
+    <n-image
+      lazy
+      :src="globalStore.interface.logo_logout"
+      alt="Logo 图片"
+      class="h-8 w-8 ml-[5px] justify-center object-fill hover: cursor-pointer"
     >
-      <template #prefix>
-        <n-icon size="16px" :component="SearchOutline"></n-icon>
-      </template>
-    </n-input>
+    </n-image>
   </n-flex>
 </template>
 
 <script setup lang="ts">
-import { SearchOutline, ArrowBack, ArrowForward } from '@vicons/ionicons5';
+import { useGlobalStore } from '@/stores/modules/global';
+
+const globalStore = useGlobalStore();
 </script>
 
 <style scoped lang="scss">
diff --git a/src/layouts/components/SettingDrawer/index.vue b/src/layouts/components/SettingDrawer/index.vue
index 7f414a01..4ff171c6 100644
--- a/src/layouts/components/SettingDrawer/index.vue
+++ b/src/layouts/components/SettingDrawer/index.vue
@@ -230,21 +230,26 @@ onBeforeUnmount(() => {
   transition:
     width 0.7s ease-in-out,
     opacity 0.7s ease-in-out;
+
   &.n-drawer--show {
     opacity: 1;
   }
+
   .drawer-content {
     :deep(.n-drawer-body-content-wrapper) {
       .setting-item {
         width: 100%;
         margin-top: 10px;
       }
+
       .page-setting .n-select {
         width: 150px;
       }
+
       .language-setting .n-select {
         width: 150px;
       }
+
       .theme-colors .n-color-picker {
         width: 150px;
       }
diff --git a/src/layouts/components/Sidebar/components/ActionOptions/index.vue b/src/layouts/components/Sidebar/components/ActionOptions/index.vue
index 04d5c9b6..1153a89a 100644
--- a/src/layouts/components/Sidebar/components/ActionOptions/index.vue
+++ b/src/layouts/components/Sidebar/components/ActionOptions/index.vue
@@ -37,6 +37,7 @@ const handleSelect = (...args: any) => {
   height: 30px;
   color: #ffffff;
 }
+
 :lang(en) {
   .action-item {
     min-width: 115px;
diff --git a/src/layouts/components/Sidebar/components/Organization/index.vue b/src/layouts/components/Sidebar/components/Organization/index.vue
index 02445772..c8f4136b 100644
--- a/src/layouts/components/Sidebar/components/Organization/index.vue
+++ b/src/layouts/components/Sidebar/components/Organization/index.vue
@@ -1,7 +1,7 @@
 <template>
   <n-popover placement="right" trigger="hover">
     <template #trigger>
-      <n-button text @click="handleOrganizationIconClick">
+      <n-button text @click="handleOrganizationIconClick" class="w-full py-[5px]">
         <svg-icon class="organization-icon" :name="name" :icon-style="iconStyle" />
       </n-button>
     </template>
diff --git a/src/layouts/components/Sidebar/components/Tree/index.vue b/src/layouts/components/Sidebar/components/Tree/index.vue
index ccb92acc..cdce5413 100644
--- a/src/layouts/components/Sidebar/components/Tree/index.vue
+++ b/src/layouts/components/Sidebar/components/Tree/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <n-button text @click="handleTreeIconClick" :class="isCollapsed ? '' : 'icon-wrapper'">
+  <n-button
+    text
+    @click="handleTreeIconClick"
+    class="py-[5px]"
+    :class="isCollapsed ? '' : 'icon-wrapper'"
+  >
     <svg-icon class="tree-icon" :name="name" :icon-style="iconStyle" />
   </n-button>
 </template>
@@ -29,9 +34,11 @@ const handleTreeIconClick = () => {
 .icon-wrapper {
   position: relative;
   width: 100%;
+
   .tree-icon {
     fill: var(--el-color-primary-light-1) !important;
   }
+
   &::before {
     position: absolute;
     top: 0;
diff --git a/src/layouts/components/Sidebar/sideBottom.vue b/src/layouts/components/Sidebar/sideBottom.vue
index 90bfc02f..abfd9db3 100644
--- a/src/layouts/components/Sidebar/sideBottom.vue
+++ b/src/layouts/components/Sidebar/sideBottom.vue
@@ -139,6 +139,7 @@ const bottomOptions: HeaderRightOptions[] = [
 <style scoped lang="scss">
 .bottom-item {
   gap: 15px 12px !important;
+
   :deep(.tree-icon):hover {
     fill: var(--el-color-primary) !important;
   }
diff --git a/src/layouts/components/Sidebar/sideTop.vue b/src/layouts/components/Sidebar/sideTop.vue
index d23ca9ac..fbb43249 100644
--- a/src/layouts/components/Sidebar/sideTop.vue
+++ b/src/layouts/components/Sidebar/sideTop.vue
@@ -1,25 +1,17 @@
 <template>
-  <n-flex justify="center" align="center" class="w-full my-[15px] cursor-pointer">
-    <logo :logo-image="logoImage || ''" />
-    <n-flex justify="center" align="center" class="w-full mt-[5px]">
-      <template v-for="option of topIconOptions" :key="option.name">
-        <component :is="option.component" :name="option.name" :icon-style="option.iconStyle" />
-      </template>
-    </n-flex>
+  <n-flex justify="center" align="center" class="w-full cursor-pointer">
+    <template v-for="option of topIconOptions" :key="option.name">
+      <component :is="option.component" :name="option.name" :icon-style="option.iconStyle" />
+    </template>
   </n-flex>
 </template>
 
 <script setup lang="ts">
-import { useGlobalStore } from '@/stores/modules/global';
-
-import Logo from './components/Logo/index.vue';
 import Tree from './components/Tree/index.vue';
 import Organization from './components/Organization/index.vue';
 
 import type { CSSProperties } from 'vue';
 
-const globalStore = useGlobalStore();
-
 const iconStyle: CSSProperties = {
   fill: '#646A73',
   width: '30px',
@@ -39,13 +31,12 @@ const topIconOptions = [
     component: Organization
   }
 ];
-
-const logoImage = globalStore.interface.logo_logout;
 </script>
 
 <style scoped lang="scss">
 :deep(.n-flex) {
   gap: 15px 12px !important;
+
   .tree-icon:hover {
     fill: var(--el-color-primary) !important;
   }
diff --git a/src/layouts/components/Tab/index.vue b/src/layouts/components/Tab/index.vue
index ed70bcd6..a2f49d06 100644
--- a/src/layouts/components/Tab/index.vue
+++ b/src/layouts/components/Tab/index.vue
@@ -6,7 +6,7 @@
           justify="center"
           align="center"
           v-for="item in list"
-          class="tab-item cursor-pointer"
+          class="tab-item cursor-pointer transition-all duration-300 ease-in-out"
           :key="item.id"
           :class="{
             'active-tab': item.isActive,
@@ -15,14 +15,16 @@
           }"
           @click="handleTabClick(item)"
         >
-          <n-text class="px-[10px] flex items-center text-white">
-            <span class="inline-flex h-[35px] min-w-[85px] text-[13px] justify-center items-center">
+          <n-text class="px-[10px] flex items-center">
+            <span
+              class="text-item inline-flex h-[35px] min-w-[85px] text-[13px] justify-center items-center"
+            >
               {{ item.name }}
             </span>
             <n-icon
+              class="close-icon"
               v-if="item.isActive"
               :size="14"
-              class="text-white"
               :component="CloseOutline"
             ></n-icon>
           </n-text>
@@ -38,7 +40,7 @@
         <n-popover>
           <template #trigger>
             <div
-              class="flex justify-center items-center w-[25px] h-[25px] cursor-pointer transition-all duration-300 ease-in-out hover:rounded-[5px] hover:bg-custom-icon-hover-color"
+              class="icon-item flex justify-center items-center w-[25px] h-[25px] cursor-pointer transition-all duration-300 ease-in-out hover:rounded-[5px]"
             >
               <svg-icon name="split" :icon-style="iconStyle" />
             </div>
@@ -49,7 +51,7 @@
         <n-popover>
           <template #trigger>
             <div
-              class="flex justify-center items-center w-[25px] h-[25px] cursor-pointer transition-all duration-300 ease-in-out hover:rounded-[5px] hover:bg-custom-icon-hover-color"
+              class="icon-item flex justify-center items-center w-[25px] h-[25px] cursor-pointer transition-all duration-300 ease-in-out hover:rounded-[5px]"
             >
               <n-icon size="16px" :component="EllipsisHorizontal" />
             </div>
@@ -63,10 +65,11 @@
 </template>
 
 <script setup lang="ts">
-import { type CSSProperties, reactive, ref } from 'vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
-import { useDraggable, type UseDraggableReturn } from 'vue-draggable-plus';
+
+import { type CSSProperties, reactive, ref } from 'vue';
 import { EllipsisHorizontal, CloseOutline } from '@vicons/ionicons5';
+import { useDraggable, type UseDraggableReturn } from 'vue-draggable-plus';
 
 const el = ref();
 
@@ -86,7 +89,6 @@ const list = reactive([
 ]);
 
 const iconStyle: CSSProperties = {
-  fill: '#D8D8D8',
   width: '16px',
   height: '16px',
   transition: 'fill 0.3s'
@@ -119,21 +121,43 @@ const handleTabClick = (item: { id: number }) => {
 <style scoped lang="scss">
 .header-tab {
   width: 100% !important;
-  background-color: var(--el-main-header-bg-color);
+  background-color: var(--el-main-tab-bg-color);
+
   .tab-item {
-    transition: all 0.3s ease-in-out;
+    :deep(.text-item) {
+      color: var(--el-main-tab-text-color);
+    }
+
+    :deep(.close-icon) {
+      color: var(--el-main-tab-text-color);
+    }
+
+    // todo)) 有些问题
     &.first-click {
       font-style: italic;
-      color: #ffffff;
+      color: var(--el-main-text-color);
     }
+
     &.second-click {
       font-style: normal;
       color: rgb(255 255 255 / 50%);
     }
+
     &.active-tab {
-      color: #ffffff !important;
+      color: var(--el-main-text-color) !important;
       background-color: var(--el-main-bg-color);
     }
   }
+
+  :deep(.icon-item) {
+    svg {
+      color: var(--el-main-tab-icon-color);
+      fill: var(--el-main-tab-icon-color);
+    }
+
+    &:hover {
+      background-color: var(--el-main-tab-icon-hover-color);
+    }
+  }
 }
 </style>
diff --git a/src/layouts/index.scss b/src/layouts/index.scss
index 40f9c430..39d9fa74 100644
--- a/src/layouts/index.scss
+++ b/src/layouts/index.scss
@@ -1,25 +1,29 @@
 .custom-layout {
   height: calc(100vh - 35px);
+
   :deep(.n-layout-scroll-container) {
     .n-layout-header {
       width: 40px;
+
       .header-content {
         width: 40px;
         height: 100%;
         color: #ffffff;
         background-color: var(--el-aside-bg-color);
-        border-right: 1px soild var(--el-aside-border-color);
       }
     }
+
     .n-layout-sider {
       background-color: var(--el-aside-tree-bg-color);
-      border-left: 1px solid var(--el-aside-border-color);
+
       .n-scrollbar .n-scrollbar-container .n-scrollbar-content {
         padding: 0 !important;
+
         .file-management {
           height: calc(100vh - 35px);
         }
       }
+
       &::after {
         position: absolute;
         top: 0;
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 594802cf..1a8dd678 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,7 +1,7 @@
 <template>
   <NavSearch />
   <n-layout has-sider class="custom-layout">
-    <n-layout-header bordered>
+    <n-layout-header>
       <n-flex class="header-content" vertical align="center" justify="space-between">
         <SideTop />
         <SideBottom />
diff --git a/src/styles/theme/aside.ts b/src/styles/theme/aside.ts
index 72eb0de4..ee607ecf 100644
--- a/src/styles/theme/aside.ts
+++ b/src/styles/theme/aside.ts
@@ -2,17 +2,31 @@ import { Theme } from '../types/index';
 
 export const asideTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
   light: {
-    '--el-aside-bg-color': '#F8F8F8',
-    '--el-aside-tree-bg-color': '#F8F8F8',
-    '--el-aside-text-color': '#303133',
-    '--el-aside-border-color': '#e4e7ed'
+    // 侧边部分
+    '--el-aside-bg-color': '#2C2C2C',
+
+    // tree 部分
+    '--el-aside-tree-bg-color': '#F3F3F3',
+    '--el-aside-tree-head-title-color': '#6F6F6F',
+    '--el-aside-tree-item-title-color': '#616161',
+    '--el-aside-tree-item-arrow-color': '#424242',
+    '--el-aside-tree-divider-color': '#61616130',
+
+    // 抽屉
+    '--el-drawer-bg-color': '#F3F3F3'
   },
   dark: {
+    // 侧边部分
     '--el-aside-bg-color': '#333333',
+
+    // tree 部分
     '--el-aside-tree-bg-color': '#252526',
-    '--el-aside-logo-text-color': '#dadada',
-    '--el-aside-text-color': '#CCCCCC',
-    '--el-aside-border-color': '#414243',
-    '--el-aside-tree-text-color': '#bbbbbb'
+    '--el-aside-tree-head-title-color': '#BBBBBB',
+    '--el-aside-tree-item-title-color': '#CCCCCC',
+    '--el-aside-tree-item-arrow-color': '#c5c5c5',
+    '--el-aside-tree-divider-color': '#CCCCCC33',
+
+    // 抽屉
+    '--el-drawer-bg-color': '#252526'
   }
 };
diff --git a/src/styles/theme/mainContent.ts b/src/styles/theme/mainContent.ts
index 3d868a32..a083e365 100644
--- a/src/styles/theme/mainContent.ts
+++ b/src/styles/theme/mainContent.ts
@@ -2,15 +2,31 @@ import { Theme } from '../types/index';
 
 export const mainContentTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
   light: {
-    '--el-main-header-bg-color': '#F8F8F8',
-    '--el-main-text-color': '#dadada',
+    // 主体
     '--el-main-bg-color': '#ffffff',
-    '--el-main-nav-bg-color': '#DDDDDD'
+    '--el-main-text-color': '#000000AD',
+
+    // tab
+    '--el-main-tab-bg-color': '#F3F3F3',
+    '--el-main-tab-text-color': '#333333',
+    '--el-main-tab-icon-color': '#424242',
+    '--el-main-tab-icon-hover-color': '#B8B8B84F',
+
+    // 顶部 nav
+    '--el-main-nav-bg-color': '#E5E5E5'
   },
   dark: {
-    '--el-main-header-bg-color': '#252526',
+    // 主体
     '--el-main-bg-color': '#1E1E1E',
-    '--el-main-text-color': '#fff',
+    '--el-main-text-color': '#CCCCCC',
+
+    // tab
+    '--el-main-tab-bg-color': '#252526',
+    '--el-main-tab-text-color': '#FFFFFF',
+    '--el-main-tab-icon-color': '#c5c5c5',
+    '--el-main-tab-icon-hover-color': '#5A5D5E4F',
+
+    // 顶部 nav
     '--el-main-nav-bg-color': '#3C3C3C'
   }
 };