From 55f8492cfe676e3795d20592505a840a3bba0a77 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Thu, 11 Jul 2024 19:22:53 +0800
Subject: [PATCH] feat(layout): page building

---
 components.d.ts                               |   4 +
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  35 ++-
 src/App.vue                                   |   8 +-
 src/ThemeOverrides.ts                         |  26 ++
 src/languages/modules/en.ts                   |   8 +
 src/languages/modules/zh.ts                   |   8 +
 .../components/FileManagement/index.vue       | 258 ++++++++++++------
 src/layouts/components/Header/headerLeft.vue  |  22 +-
 src/layouts/components/MainContent/index.vue  |  11 +
 .../components/SettingDrawer/index.vue        | 116 +++++++-
 src/layouts/components/Tab/index.vue          |  59 ++++
 src/layouts/index.scss                        |   5 +
 src/layouts/index.vue                         |  46 +++-
 vite.config.ts                                |   8 +-
 15 files changed, 489 insertions(+), 129 deletions(-)
 create mode 100644 src/ThemeOverrides.ts
 create mode 100644 src/layouts/components/MainContent/index.vue
 create mode 100644 src/layouts/components/Tab/index.vue

diff --git a/components.d.ts b/components.d.ts
index d04448d8..9828f699 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     NH2: typeof import('naive-ui')['NH2']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
@@ -26,9 +27,12 @@ declare module 'vue' {
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NPopover: typeof import('naive-ui')['NPopover']
+    NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
     NText: typeof import('naive-ui')['NText']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTree: typeof import('naive-ui')['NTree']
diff --git a/package.json b/package.json
index 8dfb37d6..0f1dd230 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,14 @@
     "@vicons/ionicons5": "^0.12.0",
     "axios": "^1.7.2",
     "mitt": "^3.0.1",
+    "naive-ui": "^2.38.2",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
+    "sortablejs": "^1.15.2",
     "vite-project": "link:",
     "vue": "^3.4.31",
+    "vue-draggable-plus": "^0.5.2",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.4.0"
   },
@@ -43,7 +46,6 @@
     "globals": "^15.8.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
-    "naive-ui": "^2.38.2",
     "postcss": "^8.4.39",
     "postcss-scss": "^4.0.9",
     "prettier": "^3.3.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9df59935..6b613381 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
+      naive-ui:
+        specifier: ^2.38.2
+        version: 2.38.2(vue@3.4.31(typescript@5.5.3))
       normalize.css:
         specifier: ^8.0.1
         version: 8.0.1
@@ -26,12 +29,18 @@ importers:
       pinia-plugin-persistedstate:
         specifier: ^3.2.1
         version: 3.2.1(pinia@2.1.7(typescript@5.5.3)(vue@3.4.31(typescript@5.5.3)))
+      sortablejs:
+        specifier: ^1.15.2
+        version: 1.15.2
       vite-project:
         specifier: 'link:'
         version: 'link:'
       vue:
         specifier: ^3.4.31
         version: 3.4.31(typescript@5.5.3)
+      vue-draggable-plus:
+        specifier: ^0.5.2
+        version: 0.5.2(@types/sortablejs@1.15.8)
       vue-i18n:
         specifier: ^9.13.1
         version: 9.13.1(vue@3.4.31(typescript@5.5.3))
@@ -87,9 +96,6 @@ importers:
       lint-staged:
         specifier: ^15.2.7
         version: 15.2.7
-      naive-ui:
-        specifier: ^2.38.2
-        version: 2.38.2(vue@3.4.31(typescript@5.5.3))
       postcss:
         specifier: ^8.4.39
         version: 8.4.39
@@ -644,6 +650,9 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
+  '@types/sortablejs@1.15.8':
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+
   '@types/svgo@2.6.4':
     resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
 
@@ -2771,6 +2780,9 @@ packages:
     resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
     engines: {node: '>=0.10.0'}
 
+  sortablejs@1.15.2:
+    resolution: {integrity: sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==}
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -3228,6 +3240,15 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-draggable-plus@0.5.2:
+    resolution: {integrity: sha512-+EWOYOtY6MVbhPpG+H4rjyuWAJiQU2VoLI/ehOCZkz62anrKrGHz5CBL2HDXi01hpNSP9BTDgkBcibhdO9/Jgg==}
+    peerDependencies:
+      '@types/sortablejs': ^1.15.0
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -3808,6 +3829,8 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
+  '@types/sortablejs@1.15.8': {}
+
   '@types/svgo@2.6.4':
     dependencies:
       '@types/node': 20.14.10
@@ -6134,6 +6157,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  sortablejs@1.15.2: {}
+
   source-map-js@1.2.0: {}
 
   source-map-resolve@0.5.3:
@@ -6646,6 +6671,10 @@ snapshots:
     dependencies:
       vue: 3.4.31(typescript@5.5.3)
 
+  vue-draggable-plus@0.5.2(@types/sortablejs@1.15.8):
+    dependencies:
+      '@types/sortablejs': 1.15.8
+
   vue-eslint-parser@9.4.3(eslint@8.57.0):
     dependencies:
       debug: 4.3.5
diff --git a/src/App.vue b/src/App.vue
index 0133b254..675e7ab8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,10 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme="isDark ? darkTheme : null">
+  <n-config-provider
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="isDark ? darkTheme : null"
+    :theme-overrides="isDark ? darkThemeOverrides : lightThemeOverrides"
+  >
     <n-message-provider>
       <loading>
         <router-view />
@@ -16,6 +21,7 @@ import { onBeforeMount } from 'vue';
 import { useTheme } from '@/hooks/useTheme.ts';
 import { useTranslations } from '@/hooks/useTranslate.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
+import { lightThemeOverrides, darkThemeOverrides } from '@/ThemeOverrides.ts';
 
 import { setFavicon } from '@/utils';
 import { storeToRefs } from 'pinia';
diff --git a/src/ThemeOverrides.ts b/src/ThemeOverrides.ts
new file mode 100644
index 00000000..782baf80
--- /dev/null
+++ b/src/ThemeOverrides.ts
@@ -0,0 +1,26 @@
+import { GlobalThemeOverrides } from 'naive-ui';
+
+export const lightThemeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#1ab394'
+  },
+  Spin: {
+    color: '#1ab394',
+    textColor: '#292827 '
+  }
+
+  // ...
+};
+
+export const darkThemeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#1ab394'
+  },
+  Spin: {
+    color: '#48c2a9',
+    textColor: '#ffffff'
+  },
+  Dropdown: {
+    optionColorHover: '#48c2a9'
+  }
+};
diff --git a/src/languages/modules/en.ts b/src/languages/modules/en.ts
index 7a2bfc12..bb8af88b 100644
--- a/src/languages/modules/en.ts
+++ b/src/languages/modules/en.ts
@@ -8,9 +8,17 @@ export default {
   notParenthesis: 'Parentheses are not allowed.',
   InvalidJson: 'Invalid JSON format.',
   requiredHasUserNameMapped: 'Username attr is required.',
+  General: 'General',
+  GUI: 'GUI',
+  CLI: 'CLI',
   'Web Terminal': 'Web Terminal',
   'Theme reset': 'The theme color has been reset to',
   'Custom Setting': 'Custom Setting',
   'Dark Mode': '黑暗模式',
+  'Theme Settings': 'Theme Settings',
+  'Language Settings': 'Language Settings',
+  'Page configuration': 'Page configuration',
+  'Please select': 'Please select',
+  'Language Selection': 'Language Selection',
   'Primary Color': 'Primary Color'
 };
diff --git a/src/languages/modules/zh.ts b/src/languages/modules/zh.ts
index 15d28f03..a8630801 100644
--- a/src/languages/modules/zh.ts
+++ b/src/languages/modules/zh.ts
@@ -8,9 +8,17 @@ export default {
   notParenthesis: '不能包含括号。',
   InvalidJson: 'JSON 格式错误.',
   requiredHasUserNameMapped: '用户名属性是必需的。',
+  General: '通用配置',
+  GUI: '图形化配置',
+  CLI: '命令行配置',
   'Web Terminal': 'Web 终端',
   'Theme reset': '主题颜色已重置为',
   'Custom Setting': '自定义设置',
   'Dark Mode': '黑暗模式',
+  'Theme Settings': '主题设置',
+  'Language Settings': '语言设置',
+  'Page configuration': '页面配置',
+  'Please select': '请选择',
+  'Language Selection': '语言选择',
   'Primary Color': '主题颜色'
 };
diff --git a/src/layouts/components/FileManagement/index.vue b/src/layouts/components/FileManagement/index.vue
index 91d18bd3..ab0cfb79 100644
--- a/src/layouts/components/FileManagement/index.vue
+++ b/src/layouts/components/FileManagement/index.vue
@@ -1,99 +1,185 @@
 <template>
-  <n-tree
-    block-line
-    expand-on-click
-    :data="data"
-    :node-props="nodeProps"
-    :on-update:expanded-keys="updatePrefixWithExpaned"
-  />
+  <n-tabs type="segment" animated>
+    <n-tab-pane name="chap1" tab="资产树">
+      <n-input v-model:value="pattern" placeholder="搜索" />
+      <n-tree
+        block-line
+        :pattern="pattern"
+        expand-on-click
+        :data="data1"
+        :node-props="nodeProps"
+        :on-update:expanded-keys="updatePrefixWithExpaned"
+      />
+    </n-tab-pane>
+    <n-tab-pane name="chap2" tab="类型树">
+      <n-input v-model:value="pattern" placeholder="搜索" />
+      <n-tree
+        block-line
+        :pattern="pattern"
+        expand-on-click
+        :data="data2"
+        :node-props="nodeProps"
+        :on-update:expanded-keys="updatePrefixWithExpaned"
+      />
+    </n-tab-pane>
+  </n-tabs>
 </template>
 
-<script lang="ts">
-import { defineComponent, h } from 'vue';
+<script setup lang="ts">
+import { reactive, ref, h } from 'vue';
 import { useMessage, NIcon, TreeOption } from 'naive-ui';
 import { Folder, FolderOpenOutline, FileTrayFullOutline } from '@vicons/ionicons5';
 
-export default defineComponent({
-  setup() {
-    const message = useMessage();
-    const updatePrefixWithExpaned = (
-      _keys: Array<string | number>,
-      _option: Array<TreeOption | null>,
-      meta: {
-        node: TreeOption | null;
-        action: 'expand' | 'collapse' | 'filter';
+const message = useMessage();
+const pattern = ref('');
+const data1 = reactive([
+  {
+    key: '收藏夹',
+    label: '收藏夹',
+    prefix: () =>
+      h(NIcon, null, {
+        default: () => h(Folder)
+      }),
+    children: [
+      {
+        key: '空的',
+        label: '空的',
+        disabled: true,
+        prefix: () =>
+          h(NIcon, null, {
+            default: () => h(Folder)
+          })
+      },
+      {
+        key: '我的文件',
+        label: '我的文件',
+        prefix: () =>
+          h(NIcon, null, {
+            default: () => h(Folder)
+          }),
+        children: [
+          {
+            label: 'template.txt',
+            key: 'template.txt',
+            prefix: () =>
+              h(NIcon, null, {
+                default: () => h(FileTrayFullOutline)
+              })
+          }
+        ]
       }
-    ) => {
-      if (!meta.node) return;
-      switch (meta.action) {
-        case 'expand':
-          meta.node.prefix = () =>
-            h(NIcon, null, {
-              default: () => h(FolderOpenOutline)
-            });
-          break;
-        case 'collapse':
-          meta.node.prefix = () =>
-            h(NIcon, null, {
-              default: () => h(Folder)
-            });
-          break;
+    ]
+  },
+  {
+    key: 'Default',
+    label: 'Default',
+    prefix: () =>
+      h(NIcon, null, {
+        default: () => h(Folder)
+      }),
+    children: [
+      {
+        key: '空的',
+        label: '空的',
+        disabled: true,
+        prefix: () =>
+          h(NIcon, null, {
+            default: () => h(Folder)
+          })
+      },
+      {
+        key: '我的文件',
+        label: '我的文件',
+        prefix: () =>
+          h(NIcon, null, {
+            default: () => h(Folder)
+          }),
+        children: [
+          {
+            label: 'template.txt',
+            key: 'template.txt',
+            prefix: () =>
+              h(NIcon, null, {
+                default: () => h(FileTrayFullOutline)
+              })
+          }
+        ]
       }
-    };
-    const nodeProps = ({ option }: { option: TreeOption }) => {
-      return {
-        onClick() {
-          if (!option.children && !option.disabled) {
-            message.info('[Click] ' + option.label);
+    ]
+  }
+]);
+const data2 = reactive([
+  {
+    key: '所有类型',
+    label: '所有类型',
+    prefix: () =>
+      h(NIcon, null, {
+        default: () => h(Folder)
+      }),
+    children: [
+      {
+        key: '空的',
+        label: '空的',
+        disabled: true,
+        prefix: () =>
+          h(NIcon, null, {
+            default: () => h(Folder)
+          })
+      },
+      {
+        key: '我的文件',
+        label: '我的文件',
+        prefix: () =>
+          h(NIcon, null, {
+            default: () => h(Folder)
+          }),
+        children: [
+          {
+            label: 'template.txt',
+            key: 'template.txt',
+            prefix: () =>
+              h(NIcon, null, {
+                default: () => h(FileTrayFullOutline)
+              })
           }
-        }
-      };
-    };
-    return {
-      updatePrefixWithExpaned,
-      nodeProps,
-      data: [
-        {
-          key: '文件夹',
-          label: '文件夹',
-          prefix: () =>
-            h(NIcon, null, {
-              default: () => h(Folder)
-            }),
-          children: [
-            {
-              key: '空的',
-              label: '空的',
-              disabled: true,
-              prefix: () =>
-                h(NIcon, null, {
-                  default: () => h(Folder)
-                })
-            },
-            {
-              key: '我的文件',
-              label: '我的文件',
-              prefix: () =>
-                h(NIcon, null, {
-                  default: () => h(Folder)
-                }),
-              children: [
-                {
-                  label: 'template.txt',
-                  key: 'template.txt',
-                  prefix: () =>
-                    h(NIcon, null, {
-                      default: () => h(FileTrayFullOutline)
-                    })
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    };
+        ]
+      }
+    ]
   }
-});
+]);
+const updatePrefixWithExpaned = (
+  _keys: Array<string | number>,
+  _option: Array<TreeOption | null>,
+  meta: {
+    node: TreeOption | null;
+    action: 'expand' | 'collapse' | 'filter';
+  }
+) => {
+  if (!meta.node) return;
+  switch (meta.action) {
+    case 'expand':
+      meta.node.prefix = () =>
+        h(NIcon, null, {
+          default: () => h(FolderOpenOutline)
+        });
+      break;
+    case 'collapse':
+      meta.node.prefix = () =>
+        h(NIcon, null, {
+          default: () => h(Folder)
+        });
+      break;
+  }
+};
+const nodeProps = ({ option }: { option: TreeOption }) => {
+  return {
+    onClick() {
+      if (!option.children && !option.disabled) {
+        message.info('[Click] ' + option.label);
+      }
+    }
+  };
+};
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/src/layouts/components/Header/headerLeft.vue b/src/layouts/components/Header/headerLeft.vue
index 0acddb6b..02749e20 100644
--- a/src/layouts/components/Header/headerLeft.vue
+++ b/src/layouts/components/Header/headerLeft.vue
@@ -1,15 +1,11 @@
 <template>
   <n-flex justify="center" align="center" class="top-item">
-    <logo :logo-image="logoImage!" />
+    <logo :logo-image="logoImage || ''" />
     <n-flex justify="center" align="center">
-      <n-button text>
+      <n-button text @click="handleTreeClick">
         <svg-icon class="tree-icon" :name="icon.name" :icon-style="iconStyle" />
       </n-button>
     </n-flex>
-
-    <n-space class="action-options">
-      <!--      <action-options :options="options" />-->
-    </n-space>
   </n-flex>
 </template>
 
@@ -25,6 +21,7 @@ import Logo from './components/Logo/index.vue';
 // import ActionOptions from './components/ActionOptions/index.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 import Profile from '@/layouts/components/Header/components/Profile/index.vue';
+import mittBus from '@/utils/mittBus.ts';
 
 const { t } = useI18n();
 const globalStore = useGlobalStore();
@@ -32,8 +29,8 @@ const { updateTranslations } = useTranslations();
 
 const iconStyle: CSSProperties = {
   fill: '#646A73',
-  width: '25px',
-  height: '25px',
+  width: '30px',
+  height: '30px',
   transition: 'fill 0.3s'
 };
 
@@ -43,6 +40,10 @@ const icon = {
   component: Profile
 };
 
+const handleTreeClick = () => {
+  mittBus.emit('treeClick');
+};
+
 const logoImage = globalStore.interface.logo_logout;
 const options = reactive<IActionOptions[]>([]);
 
@@ -142,6 +143,7 @@ const updateOptions = () => {
         label: t('Setting'),
         children: [
           {
+            // 通用配置
             key: 'General',
             label: t('General'),
             click: () => {
@@ -149,6 +151,7 @@ const updateOptions = () => {
             }
           },
           {
+            // 图形化配置
             key: 'GUI',
             label: t('GUI'),
             click: () => {
@@ -156,6 +159,7 @@ const updateOptions = () => {
             }
           },
           {
+            // 命令行配置
             key: 'CLI',
             label: t('CLI'),
             click: () => {
@@ -180,7 +184,7 @@ watchEffect(() => {
 
 <style scoped lang="scss">
 .top-item {
-  gap: 30px 12px !important;
+  gap: 20px 12px !important;
   width: 100%;
   margin-top: 25px;
   cursor: pointer;
diff --git a/src/layouts/components/MainContent/index.vue b/src/layouts/components/MainContent/index.vue
new file mode 100644
index 00000000..db4d3754
--- /dev/null
+++ b/src/layouts/components/MainContent/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <n-layout>
+    <tab></tab>
+  </n-layout>
+</template>
+
+<script setup lang="ts">
+import Tab from '../Tab/index.vue';
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/layouts/components/SettingDrawer/index.vue b/src/layouts/components/SettingDrawer/index.vue
index 4cbfb613..dc89c9cf 100644
--- a/src/layouts/components/SettingDrawer/index.vue
+++ b/src/layouts/components/SettingDrawer/index.vue
@@ -6,18 +6,44 @@
     resizable
     closable
   >
-    <n-drawer-content :title="t('Custom Setting')">
-      <n-divider> 主题设置 </n-divider>
-      <n-flex justify="space-around" align="center">
-        {{ t('Dark Mode') }}
-        <n-switch v-model:value="active" @update:value="handleChange">
-          <template #checked-icon>
-            <n-icon :component="MoonOutline" />
-          </template>
-          <template #unchecked-icon>
-            <n-icon :component="SunnyOutline" />
-          </template>
-        </n-switch>
+    <n-drawer-content :title="t('Custom Setting')" class="drawer-content">
+      <n-divider> {{ t('Theme Settings') }} </n-divider>
+      <n-flex>
+        <n-flex class="dark-setting" justify="space-between" align="center">
+          {{ t('Dark Mode') }}
+          <n-switch v-model:value="active" @update:value="handleChange">
+            <template #checked-icon>
+              <n-icon :component="MoonOutline" />
+            </template>
+            <template #unchecked-icon>
+              <n-icon :component="SunnyOutline" />
+            </template>
+          </n-switch>
+        </n-flex>
+        <n-flex class="page-setting" justify="space-between" align="center">
+          {{ t('Page configuration') }}
+          <n-select
+            v-model:value="pageOptionValue"
+            :options="pageOptions"
+            clearable
+            size="small"
+            @update-value="handlePageConfigurationChange"
+            :placeholder="t('Please select')"
+          />
+        </n-flex>
+      </n-flex>
+
+      <n-divider> {{ t('Language Settings') }} </n-divider>
+      <n-flex class="language-setting" justify="space-between" align="center">
+        {{ t('Language Selection') }}
+        <n-select
+          v-model:value="languageOptionValue"
+          :options="languageOptions"
+          clearable
+          size="small"
+          @update-value="handlePageConfigurationChange"
+          :placeholder="t('Please select')"
+        />
       </n-flex>
     </n-drawer-content>
   </n-drawer>
@@ -26,8 +52,9 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
+import { SelectOption } from 'naive-ui';
 import { useTheme } from '@/hooks/useTheme.ts';
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, reactive, ref } from 'vue';
 import { useGlobalStore } from '@/stores/modules/global.ts';
 
 import mittBus from '@/utils/mittBus.ts';
@@ -47,6 +74,46 @@ const handleChange = (value: Boolean) => {
   switchDark();
 };
 
+const handlePageConfigurationChange = (value: string, option: SelectOption) => {
+  console.log(value);
+  console.log(option);
+};
+
+const pageOptionValue = ref('');
+const languageOptionValue = ref('');
+const pageOptions = reactive([
+  {
+    label: t('General'),
+    value: 'General'
+  },
+  {
+    label: t('GUI'),
+    value: 'GUI'
+  },
+  {
+    label: t('CLI'),
+    value: 'CLI'
+  }
+]);
+const languageOptions = reactive([
+  {
+    label: 'English',
+    value: 'General'
+  },
+  {
+    label: '中文',
+    value: 'Chinese'
+  },
+  {
+    label: '中文(繁體)',
+    value: 'Chinese-hant'
+  },
+  {
+    label: '日本語',
+    value: 'Japanese'
+  }
+]);
+
 mittBus.on('openSettingDrawer', () => {
   showSettingDrawer.value = true;
 });
@@ -56,4 +123,25 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.drawer-content {
+  :deep(.n-drawer-body-content-wrapper) {
+    .dark-setting {
+      width: 100%;
+    }
+    .page-setting {
+      width: 100%;
+      margin-top: 15px;
+      .n-select {
+        width: 150px;
+      }
+    }
+    .language-setting {
+      width: 100%;
+      .n-select {
+        width: 150px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/layouts/components/Tab/index.vue b/src/layouts/components/Tab/index.vue
new file mode 100644
index 00000000..0a3f5bf7
--- /dev/null
+++ b/src/layouts/components/Tab/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <n-layout-header class="header-tab" style="width: 100%; height: 40px">
+    <n-flex ref="el">
+      <n-flex justify="center" align="center" v-for="item in list" :key="item.id" class="tab-item">
+        {{ item.name }}
+      </n-flex>
+    </n-flex>
+  </n-layout-header>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useDraggable, type UseDraggableReturn } from 'vue-draggable-plus';
+
+const el = ref();
+
+const list = reactive([
+  {
+    name: 'Joao',
+    id: 1
+  },
+  {
+    name: 'Jean',
+    id: 2
+  },
+  {
+    name: 'Johanna',
+    id: 3
+  },
+  {
+    name: 'Juan',
+    id: 4
+  }
+]);
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const draggable = useDraggable<UseDraggableReturn>(el, list, {
+  animation: 150,
+  onStart() {
+    console.log('start');
+  },
+  onUpdate() {
+    console.log('update');
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.header-tab {
+  width: 100%;
+  height: 40px;
+  background-color: var(--el-main-bg-color);
+  border-bottom: 1px solid #000000;
+  .tab-item {
+    width: 60px;
+    height: 40px;
+  }
+}
+</style>
diff --git a/src/layouts/index.scss b/src/layouts/index.scss
index c5708990..648aac50 100644
--- a/src/layouts/index.scss
+++ b/src/layouts/index.scss
@@ -12,6 +12,11 @@
     }
     .n-layout-sider {
       background-color: var(--el-aside-tree-bg-color);
+
+      // 设置折叠状态下 padding 为零，否则侧边 item 图标无法点击
+      &.n-layout-sider--collapsed .n-layout-sider-scroll-container {
+        padding: 0 !important;
+      }
     }
   }
 }
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 2cff0940..a6690dcc 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -8,25 +8,20 @@
         </n-flex>
       </n-layout-header>
       <n-layout-sider
+        ref="siderRef"
         collapse-mode="width"
+        :show-collapsed-content="false"
+        :collapsed="isCollapsed"
         :collapsed-width="0"
         :width="240"
         show-trigger="arrow-circle"
         content-style="padding: 24px;"
         bordered
+        @trigger-click="handleTriggerClick"
       >
         <FileManagement class="file-management"></FileManagement>
       </n-layout-sider>
-      <n-layout style="background-color: var(--el-main-bg-color)">
-        <n-layout-header
-          style="
-            width: 100%;
-            height: 40px;
-            background-color: var(--el-main-bg-color);
-            border-bottom: 1px solid #000000;
-          "
-        ></n-layout-header>
-      </n-layout>
+      <main-content></main-content>
     </n-layout>
   </n-space>
   <SettingDrawer />
@@ -35,14 +30,18 @@
 <script setup lang="ts">
 import HeaderLeft from './components/Header/headerLeft.vue';
 import HeaderRight from './components/Header/headerRight.vue';
+import MainContent from './components/MainContent/index.vue';
 import FileManagement from './components/FileManagement/index.vue';
 import SettingDrawer from './components/SettingDrawer/index.vue';
 
-import { ref } from 'vue';
+import { onUnmounted, ref, onMounted } from 'vue';
 import { useLoadingStore } from '@/stores/modules/loading.ts';
+import mittBus from '@/utils/mittBus.ts';
 
 const languageLoaded = ref(false);
 
+const isCollapsed = ref(false);
+
 const useLoading = useLoadingStore();
 if (!useLoading.isLoading) {
   // updateTranslations 是一个异步的，而子组件的渲染是同步的，因此在子组件中直接使用 t 函数将会曝出警告
@@ -50,6 +49,31 @@ if (!useLoading.isLoading) {
     languageLoaded.value = true;
   }, 100);
 }
+
+const siderRef = ref(null);
+
+mittBus.on('treeClick', () => {
+  isCollapsed.value = !isCollapsed.value;
+});
+
+const handleTriggerClick = () => {
+  isCollapsed.value = !isCollapsed.value;
+};
+
+onMounted(() => {
+  const trigger = document.querySelector('.n-layout-toggle-button');
+  if (trigger) {
+    trigger.addEventListener('click', handleTriggerClick);
+  }
+});
+
+onUnmounted(() => {
+  mittBus.off('treeClick');
+  const trigger = document.querySelector('.n-layout-toggle-button');
+  if (trigger) {
+    trigger.removeEventListener('click', handleTriggerClick);
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/vite.config.ts b/vite.config.ts
index 6799e131..6b1045a9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,14 +31,14 @@ export default defineConfig({
     cors: true,
     proxy: {
       '/api': {
-        // target: 'http://192.168.200.29:8080',
-        target: 'http://localhost:8081',
+        target: 'http://192.168.200.29:8080',
+        // target: 'http://localhost:8081',
         changeOrigin: true,
         rewrite: (path: string) => path.replace(/^\/api/, ' ')
       },
       '/static': {
-        // target: 'http://192.168.200.29:8080',
-        target: 'http://localhost:8081',
+        target: 'http://192.168.200.29:8080',
+        // target: 'http://localhost:8081',
         changeOrigin: true,
         rewrite: (path: string) => path.replace(/^\/static/, ' ')
       }