From 058b91d7af01b58686d7a2b3db84c11850120249 Mon Sep 17 00:00:00 2001
From: nongyehong <2439646234@qq.com>
Date: Sun, 30 Jun 2024 23:51:30 +0800
Subject: [PATCH] =?UTF-8?q?style(component):=20:lipstick:=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=B8=80=E4=BA=9B=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                | 279 +++++++++---------
 src/App.vue                                   |   8 +
 src/components/common/NaiveProvider.vue       |   1 +
 .../rightBox/chatBox/ChatSidebar.vue          |   2 +-
 src/layout/center/index.vue                   |   2 +-
 src/layout/left/style.scss                    |   4 +-
 src/layout/right/index.vue                    |   2 +-
 src/styles/scss/chat-header.scss              |   3 +-
 src/styles/scss/chat-main.scss                |   4 +-
 src/styles/scss/message.scss                  |  10 +-
 src/views/home-window/Dynamic.vue             |   4 +-
 src/views/home-window/FriendsList.vue         |   4 +-
 .../home-window/more/settings/General.vue     |  10 +-
 .../more/settings/LoginSetting.vue            |   2 +-
 src/views/home-window/more/settings/index.vue |   2 +-
 src/views/home-window/more/settings/model.tsx |  34 ++-
 src/views/home-window/robot/views/Chat.vue    |   6 +-
 .../robot/views/chatSettings/config.tsx       |   2 +-
 .../robot/views/chatSettings/index.vue        |   7 +-
 .../robot/views/chatSettings/model.tsx        |  84 ++++--
 21 files changed, 276 insertions(+), 198 deletions(-)

diff --git a/package.json b/package.json
index 0fd4844a..f52a21d3 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "pinia-shared-state": "^0.5.1",
-    "vue": "^3.4.27",
+    "vue": "^3.4.31",
     "vue-draggable-plus": "^0.4.0",
     "vue-router": "^4.3.0"
   },
@@ -89,7 +89,7 @@
     "typescript": "^5.4.5",
     "unplugin-auto-import": "^0.17.2",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "5.3.1",
+    "vite": "5.3.2",
     "vue-tsc": "^2.0.6"
   },
   "config": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5061f215..2a71a2e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,25 +31,25 @@ importers:
         version: 3.0.1
       naive-ui:
         specifier: ^2.38.2
-        version: 2.38.2(vue@3.4.27(typescript@5.4.5))
+        version: 2.38.2(vue@3.4.31(typescript@5.4.5))
       pinia:
         specifier: ^2.1.7
-        version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
+        version: 2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5))
       pinia-plugin-persistedstate:
         specifier: ^3.2.1
-        version: 3.2.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)))
+        version: 3.2.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5)))
       pinia-shared-state:
         specifier: ^0.5.1
-        version: 0.5.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)))(vue@3.4.27(typescript@5.4.5))
+        version: 0.5.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5)))(vue@3.4.31(typescript@5.4.5))
       vue:
-        specifier: ^3.4.27
-        version: 3.4.27(typescript@5.4.5)
+        specifier: ^3.4.31
+        version: 3.4.31(typescript@5.4.5)
       vue-draggable-plus:
         specifier: ^0.4.0
         version: 0.4.0(@types/sortablejs@1.15.8)
       vue-router:
         specifier: ^4.3.0
-        version: 4.3.0(vue@3.4.27(typescript@5.4.5))
+        version: 4.3.0(vue@3.4.31(typescript@5.4.5))
     devDependencies:
       '@babel/eslint-parser':
         specifier: ^7.23.3
@@ -92,16 +92,16 @@ importers:
         version: 0.61.0
       '@unocss/vite':
         specifier: ^0.61.0
-        version: 0.61.0(rollup@4.18.0)(vite@5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))
+        version: 0.61.0(rollup@4.18.0)(vite@5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.0.4(vite@5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.27(typescript@5.4.5))
+        version: 5.0.4(vite@5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.31(typescript@5.4.5))
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.0.0
-        version: 4.0.0(vite@5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.27(typescript@5.4.5))
+        version: 4.0.0(vite@5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.31(typescript@5.4.5))
       '@vueuse/core':
         specifier: ^10.8.0
-        version: 10.8.0(vue@3.4.27(typescript@5.4.5))
+        version: 10.8.0(vue@3.4.31(typescript@5.4.5))
       commitizen:
         specifier: ^4.3.0
         version: 4.3.0(@types/node@20.11.7)(typescript@5.4.5)
@@ -152,13 +152,13 @@ importers:
         version: 5.4.5
       unplugin-auto-import:
         specifier: ^0.17.2
-        version: 0.17.5(@vueuse/core@10.8.0(vue@3.4.27(typescript@5.4.5)))(rollup@4.18.0)
+        version: 0.17.5(@vueuse/core@10.8.0(vue@3.4.31(typescript@5.4.5)))(rollup@4.18.0)
       unplugin-vue-components:
         specifier: ^0.26.0
-        version: 0.26.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5))
+        version: 0.26.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.31(typescript@5.4.5))
       vite:
-        specifier: 5.3.1
-        version: 5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
+        specifier: 5.3.2
+        version: 5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
       vue-tsc:
         specifier: ^2.0.6
         version: 2.0.6(typescript@5.4.5)
@@ -1071,30 +1071,30 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@vue/compiler-core@3.4.27':
-    resolution: {integrity: sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==}
-
   '@vue/compiler-core@3.4.29':
     resolution: {integrity: sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==}
 
-  '@vue/compiler-dom@3.4.27':
-    resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
+  '@vue/compiler-core@3.4.31':
+    resolution: {integrity: sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==}
 
   '@vue/compiler-dom@3.4.29':
     resolution: {integrity: sha512-A6+iZ2fKIEGnfPJejdB7b1FlJzgiD+Y/sxxKwJWg1EbJu6ZPgzaPQQ51ESGNv0CP6jm6Z7/pO6Ia8Ze6IKrX7w==}
 
-  '@vue/compiler-sfc@3.4.27':
-    resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==}
+  '@vue/compiler-dom@3.4.31':
+    resolution: {integrity: sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==}
 
   '@vue/compiler-sfc@3.4.29':
     resolution: {integrity: sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==}
 
-  '@vue/compiler-ssr@3.4.27':
-    resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
+  '@vue/compiler-sfc@3.4.31':
+    resolution: {integrity: sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==}
 
   '@vue/compiler-ssr@3.4.29':
     resolution: {integrity: sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==}
 
+  '@vue/compiler-ssr@3.4.31':
+    resolution: {integrity: sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==}
+
   '@vue/devtools-api@6.5.1':
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
 
@@ -1106,26 +1106,26 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.4.27':
-    resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==}
+  '@vue/reactivity@3.4.31':
+    resolution: {integrity: sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==}
 
-  '@vue/runtime-core@3.4.27':
-    resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==}
+  '@vue/runtime-core@3.4.31':
+    resolution: {integrity: sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==}
 
-  '@vue/runtime-dom@3.4.27':
-    resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==}
+  '@vue/runtime-dom@3.4.31':
+    resolution: {integrity: sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==}
 
-  '@vue/server-renderer@3.4.27':
-    resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
+  '@vue/server-renderer@3.4.31':
+    resolution: {integrity: sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==}
     peerDependencies:
-      vue: 3.4.27
-
-  '@vue/shared@3.4.27':
-    resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
+      vue: 3.4.31
 
   '@vue/shared@3.4.29':
     resolution: {integrity: sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==}
 
+  '@vue/shared@3.4.31':
+    resolution: {integrity: sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==}
+
   '@vueuse/core@10.8.0':
     resolution: {integrity: sha512-G9Ok9fjx10TkNIPn8V1dJmK1NcdJCtYmDRyYiTMUyJ1p0Tywc1zmOoCQ2xhHYyz8ULBU4KjIJQ9n+Lrty74iVw==}
 
@@ -2822,6 +2822,10 @@ packages:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.39:
+    resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -3356,8 +3360,8 @@ packages:
     resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
     engines: {'0': node >=0.6.0}
 
-  vite@5.3.1:
-    resolution: {integrity: sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==}
+  vite@5.3.2:
+    resolution: {integrity: sha512-6lA7OBHBlXUxiJxbO5aAY2fsHHzDr1q7DvXYnyZycRs2Dz+dXBWuhpWHvmljTRTpQC2uvGmUFFkSHF2vGo90MA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -3440,8 +3444,8 @@ packages:
     peerDependencies:
       typescript: '*'
 
-  vue@3.4.27:
-    resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==}
+  vue@3.4.31:
+    resolution: {integrity: sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -3901,9 +3905,9 @@ snapshots:
     dependencies:
       css-render: 0.15.12
 
-  '@css-render/vue3-ssr@0.15.12(vue@3.4.27(typescript@5.4.5))':
+  '@css-render/vue3-ssr@0.15.12(vue@3.4.31(typescript@5.4.5))':
     dependencies:
-      vue: 3.4.27(typescript@5.4.5)
+      vue: 3.4.31(typescript@5.4.5)
 
   '@emotion/hash@0.8.0': {}
 
@@ -4377,7 +4381,7 @@ snapshots:
     dependencies:
       '@unocss/core': 0.61.0
 
-  '@unocss/vite@0.61.0(rollup@4.18.0)(vite@5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))':
+  '@unocss/vite@0.61.0(rollup@4.18.0)(vite@5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
@@ -4389,24 +4393,24 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       magic-string: 0.30.10
-      vite: 5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
+      vite: 5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
     transitivePeerDependencies:
       - rollup
 
-  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.27(typescript@5.4.5))':
+  '@vitejs/plugin-vue-jsx@4.0.0(vite@5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.31(typescript@5.4.5))':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/plugin-transform-typescript': 7.24.7(@babel/core@7.24.7)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.7)
-      vite: 5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
-      vue: 3.4.27(typescript@5.4.5)
+      vite: 5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
+      vue: 3.4.31(typescript@5.4.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.0.4(vite@5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.27(typescript@5.4.5))':
+  '@vitejs/plugin-vue@5.0.4(vite@5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1))(vue@3.4.31(typescript@5.4.5))':
     dependencies:
-      vite: 5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
-      vue: 3.4.27(typescript@5.4.5)
+      vite: 5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1)
+      vue: 3.4.31(typescript@5.4.5)
 
   '@volar/language-core@2.1.2':
     dependencies:
@@ -4450,14 +4454,6 @@ snapshots:
       '@babel/parser': 7.24.7
       '@vue/compiler-sfc': 3.4.29
 
-  '@vue/compiler-core@3.4.27':
-    dependencies:
-      '@babel/parser': 7.24.7
-      '@vue/shared': 3.4.27
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.0
-
   '@vue/compiler-core@3.4.29':
     dependencies:
       '@babel/parser': 7.24.7
@@ -4466,27 +4462,23 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
-  '@vue/compiler-dom@3.4.27':
+  '@vue/compiler-core@3.4.31':
     dependencies:
-      '@vue/compiler-core': 3.4.27
-      '@vue/shared': 3.4.27
+      '@babel/parser': 7.24.7
+      '@vue/shared': 3.4.31
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
 
   '@vue/compiler-dom@3.4.29':
     dependencies:
       '@vue/compiler-core': 3.4.29
       '@vue/shared': 3.4.29
 
-  '@vue/compiler-sfc@3.4.27':
+  '@vue/compiler-dom@3.4.31':
     dependencies:
-      '@babel/parser': 7.24.7
-      '@vue/compiler-core': 3.4.27
-      '@vue/compiler-dom': 3.4.27
-      '@vue/compiler-ssr': 3.4.27
-      '@vue/shared': 3.4.27
-      estree-walker: 2.0.2
-      magic-string: 0.30.10
-      postcss: 8.4.38
-      source-map-js: 1.2.0
+      '@vue/compiler-core': 3.4.31
+      '@vue/shared': 3.4.31
 
   '@vue/compiler-sfc@3.4.29':
     dependencies:
@@ -4500,16 +4492,28 @@ snapshots:
       postcss: 8.4.38
       source-map-js: 1.2.0
 
-  '@vue/compiler-ssr@3.4.27':
+  '@vue/compiler-sfc@3.4.31':
     dependencies:
-      '@vue/compiler-dom': 3.4.27
-      '@vue/shared': 3.4.27
+      '@babel/parser': 7.24.7
+      '@vue/compiler-core': 3.4.31
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.39
+      source-map-js: 1.2.0
 
   '@vue/compiler-ssr@3.4.29':
     dependencies:
       '@vue/compiler-dom': 3.4.29
       '@vue/shared': 3.4.29
 
+  '@vue/compiler-ssr@3.4.31':
+    dependencies:
+      '@vue/compiler-dom': 3.4.31
+      '@vue/shared': 3.4.31
+
   '@vue/devtools-api@6.5.1': {}
 
   '@vue/language-core@2.0.6(typescript@5.4.5)':
@@ -4524,46 +4528,47 @@ snapshots:
     optionalDependencies:
       typescript: 5.4.5
 
-  '@vue/reactivity@3.4.27':
+  '@vue/reactivity@3.4.31':
     dependencies:
-      '@vue/shared': 3.4.27
+      '@vue/shared': 3.4.31
 
-  '@vue/runtime-core@3.4.27':
+  '@vue/runtime-core@3.4.31':
     dependencies:
-      '@vue/reactivity': 3.4.27
-      '@vue/shared': 3.4.27
+      '@vue/reactivity': 3.4.31
+      '@vue/shared': 3.4.31
 
-  '@vue/runtime-dom@3.4.27':
+  '@vue/runtime-dom@3.4.31':
     dependencies:
-      '@vue/runtime-core': 3.4.27
-      '@vue/shared': 3.4.27
+      '@vue/reactivity': 3.4.31
+      '@vue/runtime-core': 3.4.31
+      '@vue/shared': 3.4.31
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.4.27(vue@3.4.27(typescript@5.4.5))':
+  '@vue/server-renderer@3.4.31(vue@3.4.31(typescript@5.4.5))':
     dependencies:
-      '@vue/compiler-ssr': 3.4.27
-      '@vue/shared': 3.4.27
-      vue: 3.4.27(typescript@5.4.5)
-
-  '@vue/shared@3.4.27': {}
+      '@vue/compiler-ssr': 3.4.31
+      '@vue/shared': 3.4.31
+      vue: 3.4.31(typescript@5.4.5)
 
   '@vue/shared@3.4.29': {}
 
-  '@vueuse/core@10.8.0(vue@3.4.27(typescript@5.4.5))':
+  '@vue/shared@3.4.31': {}
+
+  '@vueuse/core@10.8.0(vue@3.4.31(typescript@5.4.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.8.0
-      '@vueuse/shared': 10.8.0(vue@3.4.27(typescript@5.4.5))
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/shared': 10.8.0(vue@3.4.31(typescript@5.4.5))
+      vue-demi: 0.14.7(vue@3.4.31(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
   '@vueuse/metadata@10.8.0': {}
 
-  '@vueuse/shared@10.8.0(vue@3.4.27(typescript@5.4.5))':
+  '@vueuse/shared@10.8.0(vue@3.4.31(typescript@5.4.5))':
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.7(vue@3.4.31(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6122,10 +6127,10 @@ snapshots:
 
   mute-stream@0.0.8: {}
 
-  naive-ui@2.38.2(vue@3.4.27(typescript@5.4.5)):
+  naive-ui@2.38.2(vue@3.4.31(typescript@5.4.5)):
     dependencies:
       '@css-render/plugin-bem': 0.15.12(css-render@0.15.12)
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.27(typescript@5.4.5))
+      '@css-render/vue3-ssr': 0.15.12(vue@3.4.31(typescript@5.4.5))
       '@types/katex': 0.16.7
       '@types/lodash': 4.14.202
       '@types/lodash-es': 4.17.12
@@ -6140,10 +6145,10 @@ snapshots:
       lodash-es: 4.17.21
       seemly: 0.3.8
       treemate: 0.3.11
-      vdirs: 0.1.8(vue@3.4.27(typescript@5.4.5))
-      vooks: 0.2.12(vue@3.4.27(typescript@5.4.5))
-      vue: 3.4.27(typescript@5.4.5)
-      vueuc: 0.4.58(vue@3.4.27(typescript@5.4.5))
+      vdirs: 0.1.8(vue@3.4.31(typescript@5.4.5))
+      vooks: 0.2.12(vue@3.4.31(typescript@5.4.5))
+      vue: 3.4.31(typescript@5.4.5)
+      vueuc: 0.4.58(vue@3.4.31(typescript@5.4.5))
 
   nanoid@3.3.7: {}
 
@@ -6340,24 +6345,24 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pinia-plugin-persistedstate@3.2.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))):
+  pinia-plugin-persistedstate@3.2.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5))):
     dependencies:
-      pinia: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
+      pinia: 2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5))
 
-  pinia-shared-state@0.5.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)))(vue@3.4.27(typescript@5.4.5)):
+  pinia-shared-state@0.5.1(pinia@2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5)))(vue@3.4.31(typescript@5.4.5)):
     dependencies:
       broadcast-channel: 7.0.0
-      pinia: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      pinia: 2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5))
+      vue-demi: 0.14.7(vue@3.4.31(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  pinia@2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5)):
+  pinia@2.1.7(typescript@5.4.5)(vue@3.4.31(typescript@5.4.5)):
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.27(typescript@5.4.5)
-      vue-demi: 0.14.6(vue@3.4.27(typescript@5.4.5))
+      vue: 3.4.31(typescript@5.4.5)
+      vue-demi: 0.14.6(vue@3.4.31(typescript@5.4.5))
     optionalDependencies:
       typescript: 5.4.5
 
@@ -6380,6 +6385,12 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  postcss@8.4.39:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
   prelude-ls@1.2.1: {}
 
   prettier-linter-helpers@1.0.0:
@@ -6881,7 +6892,7 @@ snapshots:
 
   unload@2.4.1: {}
 
-  unplugin-auto-import@0.17.5(@vueuse/core@10.8.0(vue@3.4.27(typescript@5.4.5)))(rollup@4.18.0):
+  unplugin-auto-import@0.17.5(@vueuse/core@10.8.0(vue@3.4.31(typescript@5.4.5)))(rollup@4.18.0):
     dependencies:
       '@antfu/utils': 0.7.7
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
@@ -6892,11 +6903,11 @@ snapshots:
       unimport: 3.7.1(rollup@4.18.0)
       unplugin: 1.6.0
     optionalDependencies:
-      '@vueuse/core': 10.8.0(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/core': 10.8.0(vue@3.4.31(typescript@5.4.5))
     transitivePeerDependencies:
       - rollup
 
-  unplugin-vue-components@0.26.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.27(typescript@5.4.5)):
+  unplugin-vue-components@0.26.0(@babel/parser@7.24.7)(rollup@4.18.0)(vue@3.4.31(typescript@5.4.5)):
     dependencies:
       '@antfu/utils': 0.7.7
       '@rollup/pluginutils': 5.1.0(rollup@4.18.0)
@@ -6908,7 +6919,7 @@ snapshots:
       minimatch: 9.0.3
       resolve: 1.22.8
       unplugin: 1.6.0
-      vue: 3.4.27(typescript@5.4.5)
+      vue: 3.4.31(typescript@5.4.5)
     optionalDependencies:
       '@babel/parser': 7.24.7
     transitivePeerDependencies:
@@ -6941,10 +6952,10 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  vdirs@0.1.8(vue@3.4.27(typescript@5.4.5)):
+  vdirs@0.1.8(vue@3.4.31(typescript@5.4.5)):
     dependencies:
       evtd: 0.2.4
-      vue: 3.4.27(typescript@5.4.5)
+      vue: 3.4.31(typescript@5.4.5)
 
   verror@1.10.0:
     dependencies:
@@ -6952,10 +6963,10 @@ snapshots:
       core-util-is: 1.0.2
       extsprintf: 1.3.0
 
-  vite@5.3.1(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1):
+  vite@5.3.2(@types/node@20.11.7)(sass@1.71.1)(terser@5.28.1):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.4.38
+      postcss: 8.4.39
       rollup: 4.18.0
     optionalDependencies:
       '@types/node': 20.11.7
@@ -6963,18 +6974,18 @@ snapshots:
       sass: 1.71.1
       terser: 5.28.1
 
-  vooks@0.2.12(vue@3.4.27(typescript@5.4.5)):
+  vooks@0.2.12(vue@3.4.31(typescript@5.4.5)):
     dependencies:
       evtd: 0.2.4
-      vue: 3.4.27(typescript@5.4.5)
+      vue: 3.4.31(typescript@5.4.5)
 
-  vue-demi@0.14.6(vue@3.4.27(typescript@5.4.5)):
+  vue-demi@0.14.6(vue@3.4.31(typescript@5.4.5)):
     dependencies:
-      vue: 3.4.27(typescript@5.4.5)
+      vue: 3.4.31(typescript@5.4.5)
 
-  vue-demi@0.14.7(vue@3.4.27(typescript@5.4.5)):
+  vue-demi@0.14.7(vue@3.4.31(typescript@5.4.5)):
     dependencies:
-      vue: 3.4.27(typescript@5.4.5)
+      vue: 3.4.31(typescript@5.4.5)
 
   vue-draggable-plus@0.4.0(@types/sortablejs@1.15.8):
     dependencies:
@@ -6993,10 +7004,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-router@4.3.0(vue@3.4.27(typescript@5.4.5)):
+  vue-router@4.3.0(vue@3.4.31(typescript@5.4.5)):
     dependencies:
       '@vue/devtools-api': 6.5.1
-      vue: 3.4.27(typescript@5.4.5)
+      vue: 3.4.31(typescript@5.4.5)
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -7010,26 +7021,26 @@ snapshots:
       semver: 7.6.0
       typescript: 5.4.5
 
-  vue@3.4.27(typescript@5.4.5):
+  vue@3.4.31(typescript@5.4.5):
     dependencies:
-      '@vue/compiler-dom': 3.4.27
-      '@vue/compiler-sfc': 3.4.27
-      '@vue/runtime-dom': 3.4.27
-      '@vue/server-renderer': 3.4.27(vue@3.4.27(typescript@5.4.5))
-      '@vue/shared': 3.4.27
+      '@vue/compiler-dom': 3.4.31
+      '@vue/compiler-sfc': 3.4.31
+      '@vue/runtime-dom': 3.4.31
+      '@vue/server-renderer': 3.4.31(vue@3.4.31(typescript@5.4.5))
+      '@vue/shared': 3.4.31
     optionalDependencies:
       typescript: 5.4.5
 
-  vueuc@0.4.58(vue@3.4.27(typescript@5.4.5)):
+  vueuc@0.4.58(vue@3.4.31(typescript@5.4.5)):
     dependencies:
-      '@css-render/vue3-ssr': 0.15.12(vue@3.4.27(typescript@5.4.5))
+      '@css-render/vue3-ssr': 0.15.12(vue@3.4.31(typescript@5.4.5))
       '@juggle/resize-observer': 3.4.0
       css-render: 0.15.12
       evtd: 0.2.4
       seemly: 0.3.8
-      vdirs: 0.1.8(vue@3.4.27(typescript@5.4.5))
-      vooks: 0.2.12(vue@3.4.27(typescript@5.4.5))
-      vue: 3.4.27(typescript@5.4.5)
+      vdirs: 0.1.8(vue@3.4.31(typescript@5.4.5))
+      vooks: 0.2.12(vue@3.4.31(typescript@5.4.5))
+      vue: 3.4.31(typescript@5.4.5)
 
   wcwidth@1.0.1:
     dependencies:
diff --git a/src/App.vue b/src/App.vue
index 37aca0f3..252d1af0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,4 +71,12 @@ onUnmounted(() => {
   transition: all 0.9s ease;
   border-radius: 10px;
 }
+/* 修改naive-ui select 组件的样式 */
+.n-base-selection,
+.n-base-select-menu,
+.n-base-select-menu .n-base-select-option .n-base-select-option__content,
+.n-base-select-menu .n-base-select-option::before {
+  border-radius: 8px;
+  font-size: 12px;
+}
 </style>
diff --git a/src/components/common/NaiveProvider.vue b/src/components/common/NaiveProvider.vue
index ea30531f..10b1dc14 100644
--- a/src/components/common/NaiveProvider.vue
+++ b/src/components/common/NaiveProvider.vue
@@ -71,6 +71,7 @@ const commonTheme: GlobalThemeOverrides = {
   },
   Button: {
     borderRadiusMedium: '10px',
+    borderRadiusSmall: '6px',
     colorPrimary: '#13987f'
   },
   Tabs: {
diff --git a/src/components/rightBox/chatBox/ChatSidebar.vue b/src/components/rightBox/chatBox/ChatSidebar.vue
index 1247bd73..f9a178df 100644
--- a/src/components/rightBox/chatBox/ChatSidebar.vue
+++ b/src/components/rightBox/chatBox/ChatSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <!--! 这里最好不要使用n-flex,滚动高度会有问题  -->
-  <main v-if="isGroup" style="border-left: 1px solid var(--line-color)" class="item-box">
+  <main v-if="isGroup" style="border-left: 1px solid var(--line-color)" class="item-box shadow-md">
     <n-flex v-if="!isSearch" align="center" justify="space-between" class="pr-8px pl-8px h-42px">
       <span class="text-14px">群聊成员&nbsp;{{ userList.length }}</span>
       <svg @click="handleSearch" class="size-14px"><use href="#search"></use></svg>
diff --git a/src/layout/center/index.vue b/src/layout/center/index.vue
index 9d5d64eb..f2bcf39b 100644
--- a/src/layout/center/index.vue
+++ b/src/layout/center/index.vue
@@ -2,7 +2,7 @@
   <main
     data-tauri-drag-region
     id="center"
-    class="resizable select-none flex flex-col"
+    class="resizable select-none flex flex-col shadow-inner"
     :style="{ width: `${initWidth}px` }">
     <div class="resize-handle" @mousedown="initDrag"></div>
     <ActionBar
diff --git a/src/layout/left/style.scss b/src/layout/left/style.scss
index f7505a8c..b822e03e 100644
--- a/src/layout/left/style.scss
+++ b/src/layout/left/style.scss
@@ -1,7 +1,7 @@
 @mixin action() {
   padding: 6px 8px 6px 8px;
   &:not(.active):hover {
-    background: rgba(193, 193, 193, 0.4);
+    background: var(--bg-left-menu-hover);
     border-radius: 8px;
     color: #13987f;
     cursor: pointer;
@@ -44,4 +44,4 @@
 
 :deep(.n-badge) {
   color: inherit;
-}
\ No newline at end of file
+}
diff --git a/src/layout/right/index.vue b/src/layout/right/index.vue
index 699cb888..fa47ddea 100644
--- a/src/layout/right/index.vue
+++ b/src/layout/right/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="flex-1 bg-[--right-bg-color] h-full w-100vw min-w-600px">
+  <main class="flex-1 bg-[--right-bg-color] h-full w-100vw min-w-600px shadow-inner">
     <ActionBar :current-label="appWindow.label" />
     <!-- 需要判断当前路由是否是信息详情界面 -->
     <ChatBox :active-item="activeItem" v-if="msgBoxShow && isChat && activeItem !== -1" />
diff --git a/src/styles/scss/chat-header.scss b/src/styles/scss/chat-header.scss
index 98e2e723..a273b730 100644
--- a/src/styles/scss/chat-header.scss
+++ b/src/styles/scss/chat-header.scss
@@ -14,6 +14,7 @@
 }
 
 .setting-item {
+  @apply border-(solid 1px [--line-color]) shadow-md;
   &:first-child {
     margin-top: 0;
   }
@@ -62,4 +63,4 @@
 .sidebar-leave-active {
   animation: slideOut 0.3s ease-in-out;
 }
-/**!end */
\ No newline at end of file
+/**!end */
diff --git a/src/styles/scss/chat-main.scss b/src/styles/scss/chat-main.scss
index ff4f9f05..6d008e18 100644
--- a/src/styles/scss/chat-main.scss
+++ b/src/styles/scss/chat-main.scss
@@ -1,6 +1,6 @@
 /** 气泡样式 */
 @mixin bubble {
-  @apply w-fit max-w-35vw min-h-1em p-[8px_12px] text-15px line-height-22px bg-[--bg-bubble] rounded-[2px_18px_18px];
+  @apply w-fit max-w-35vw min-h-1em p-[8px_12px] text-15px line-height-22px bg-[--bg-bubble] rounded-[2px_18px_18px] shadow-md;
   word-break: break-all; /** 强制连续文本换行 */
   &.active {
     background-color: var(--bg-bubble-active);
@@ -103,4 +103,4 @@
 /**! 替换ait的字体颜色 */
 :deep(#aitSpan) {
   @apply text-inherit cursor-pointer;
-}
\ No newline at end of file
+}
diff --git a/src/styles/scss/message.scss b/src/styles/scss/message.scss
index 9c638771..244ac952 100644
--- a/src/styles/scss/message.scss
+++ b/src/styles/scss/message.scss
@@ -1,5 +1,5 @@
 .msg-box {
-  border-radius: 6px;
+  border-radius: 12px;
   transition:
           background-color 0.3s ease,
           border-radius 0.3s ease;
@@ -9,18 +9,18 @@
   }
   &:not(.active):first-child {
     background: var(--bg-msg-first-child);
-    border-radius: 6px;
+    border-radius: 12px;
   }
   &:not(.active):hover {
     background: var(--bg-msg-hover);
-    border-radius: 6px;
+    border-radius: 12px;
     cursor: pointer;
   }
 }
 
 .active {
   background: var(--bg-active-msg);
-  border-radius: 8px;
+  border-radius: 12px;
   color: #fff;
   .text {
     color: #fff;
@@ -48,4 +48,4 @@
 :deep(.n-badge .n-badge-sup) {
   font-weight: bold;
   font-size: 10px;
-}
\ No newline at end of file
+}
diff --git a/src/views/home-window/Dynamic.vue b/src/views/home-window/Dynamic.vue
index 5df92c2c..c412d7cd 100644
--- a/src/views/home-window/Dynamic.vue
+++ b/src/views/home-window/Dynamic.vue
@@ -4,14 +4,14 @@
     <article class="flex flex-col items-center text-[--text-color] size-full bg-[--right-bg-color]">
       <n-scrollbar
         style="max-height: calc(100vh - 20px)"
-        class="w-650px bg-[--center-bg-color] h-full p-[10px_0] box-border rounded-4px">
+        class="w-full bg-[--center-bg-color] border-(solid 1px [--line-color]) h-full p-[10px_0] box-border rounded-4px">
         <n-flex justify="center">
           <!--  动态内容框   -->
           <n-flex
             vertical
             v-for="item in dynamicList"
             :key="item.id"
-            class="w-450px h-fit rounded-8px bg-[--right-bg-color] p-10px box-border">
+            class="w-450px h-fit border-(solid 1px [--line-color]) shadow-md rounded-8px bg-[--right-bg-color] p-10px box-border">
             <n-flex align="center">
               <!--  用户的头像和用户名以及个签    -->
               <img class="size-45px bg-#ccc rounded-50% select-none" :src="item.avatar" alt="" />
diff --git a/src/views/home-window/FriendsList.vue b/src/views/home-window/FriendsList.vue
index f84a6ac8..3acf6c8f 100644
--- a/src/views/home-window/FriendsList.vue
+++ b/src/views/home-window/FriendsList.vue
@@ -121,14 +121,14 @@ onUnmounted(() => {
   }
   &:not(.active):hover {
     background: var(--bg-msg-hover);
-    border-radius: 6px;
+    border-radius: 12px;
     cursor: pointer;
   }
 }
 
 .active {
   background: var(--bg-active-msg);
-  border-radius: 8px;
+  border-radius: 12px;
   color: #fff;
   .text {
     color: #fff;
diff --git a/src/views/home-window/more/settings/General.vue b/src/views/home-window/more/settings/General.vue
index 352a5c0c..27b33642 100644
--- a/src/views/home-window/more/settings/General.vue
+++ b/src/views/home-window/more/settings/General.vue
@@ -10,12 +10,12 @@
           class="w-120px h-100px"
           :size="0"
           @click="activeItem = item.code"
-          v-for="(item, index) in titleList"
+          v-for="(item, index) in topicsList"
           :key="index">
           <div
             @click="handleTheme(item.code)"
-            class="size-full rounded-8px cursor-pointer"
-            :style="activeItem === item.code ? 'border: 2px solid #13987f' : 'border: 2px solid transparent'">
+            class="size-full rounded-8px cursor-pointer shadow-md"
+            :class="{ 'outline outline-2 outline-#13987f outline-offset': activeItem === item.code }">
             <component :is="item.model" />
           </div>
           <span class="text-12px pt-8px color-[--text-color]">{{ item.title }}</span>
@@ -90,7 +90,7 @@
 import { setting } from '@/stores/setting.ts'
 import { storeToRefs } from 'pinia'
 import { CloseBxEnum } from '@/enums'
-import { titleList } from './model.tsx'
+import { topicsList } from './model.tsx'
 import { sendOptions } from './config.ts'
 
 const settingStore = setting()
@@ -106,6 +106,6 @@ const handleTheme = (code: string) => {
 
 <style scoped lang="scss">
 .item {
-  @apply bg-[--bg-setting-item] rounded-12px size-full p-12px box-border;
+  @apply bg-[--bg-setting-item] rounded-12px size-full p-12px box-border border-(solid 1px [--line-color]) shadow-md;
 }
 </style>
diff --git a/src/views/home-window/more/settings/LoginSetting.vue b/src/views/home-window/more/settings/LoginSetting.vue
index bec3dfda..c0d22ab5 100644
--- a/src/views/home-window/more/settings/LoginSetting.vue
+++ b/src/views/home-window/more/settings/LoginSetting.vue
@@ -47,6 +47,6 @@ const clearInfo = () => {
 
 <style scoped lang="scss">
 .item-box {
-  @apply text-14px text-[--text-color] bg-[--bg-setting-item] rounded-8px p-10px;
+  @apply text-14px text-[--text-color] bg-[--bg-setting-item] rounded-8px p-10px border-(solid 1px [--line-color]) shadow-md;
 }
 </style>
diff --git a/src/views/home-window/more/settings/index.vue b/src/views/home-window/more/settings/index.vue
index 6d858423..668635c1 100644
--- a/src/views/home-window/more/settings/index.vue
+++ b/src/views/home-window/more/settings/index.vue
@@ -13,7 +13,7 @@
     </section>
 
     <!-- 右边内容 -->
-    <section class="bg-[--right-bg-color] flex-1">
+    <section class="bg-[--right-bg-color] flex-1 shadow-md">
       <ActionBar :shrink="false" :max-w="false" />
 
       <header class="header" style="box-shadow: 0 4px 4px var(--box-shadow-color)">{{ title }}</header>
diff --git a/src/views/home-window/more/settings/model.tsx b/src/views/home-window/more/settings/model.tsx
index 4715cdca..4248fd23 100644
--- a/src/views/home-window/more/settings/model.tsx
+++ b/src/views/home-window/more/settings/model.tsx
@@ -1,16 +1,22 @@
 import { ThemeEnum } from '@/enums'
 
-const titleList = [
+type Topic = {
+  title: string
+  code: ThemeEnum
+  model: JSX.Element
+}[]
+
+const topicsList: Topic = [
   {
     title: '白天模式',
     code: ThemeEnum.LIGHT,
     model: (() => (
       <div class="size-full flex">
-        <div class="bg-#f1f1f1 flex-[1] rounded-[6px_0_0_6px]"></div>
+        <div class="bg-#f1f1f1 flex-1 rounded-[6px_0_0_6px]"></div>
 
         <div class="bg-#fff flex-[3.5] p-[8px_4px] box-border flex flex-col gap-8px">
           <div class="flex gap-4px">
-            <div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
+            <div class="bg-#f1f1f1 size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#f1f1f1 w-16px h-4px"></div>
               <div class="bg-#f1f1f1 w-24px h-4px"></div>
@@ -18,7 +24,7 @@ const titleList = [
           </div>
 
           <div class="flex gap-4px">
-            <div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
+            <div class="bg-#f1f1f1 size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#f1f1f1 w-16px h-4px"></div>
               <div class="bg-#f1f1f1 w-24px h-4px"></div>
@@ -45,11 +51,11 @@ const titleList = [
     code: ThemeEnum.DARK,
     model: (() => (
       <div class="size-full flex">
-        <div class="bg-#454545 flex-[1] rounded-[6px_0_0_6px]"></div>
+        <div class="bg-#454545 flex-1 rounded-[6px_0_0_6px]"></div>
 
         <div class="bg-#212121 flex-[3.5] p-[8px_4px] box-border flex flex-col gap-8px">
           <div class="flex gap-4px">
-            <div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
+            <div class="bg-#4d4d4d size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#4d4d4d w-16px h-4px"></div>
               <div class="bg-#4d4d4d w-24px h-4px"></div>
@@ -57,7 +63,7 @@ const titleList = [
           </div>
 
           <div class="flex gap-4px">
-            <div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
+            <div class="bg-#4d4d4d size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#4d4d4d w-16px h-4px"></div>
               <div class="bg-#4d4d4d w-24px h-4px"></div>
@@ -84,11 +90,11 @@ const titleList = [
     code: ThemeEnum.OS,
     model: (() => (
       <div class="size-full flex">
-        <div class="bg-#f1f1f1 flex-[1] rounded-[6px_0_0_6px]"></div>
+        <div class="bg-#f1f1f1 flex-1 rounded-[6px_0_0_6px]"></div>
 
         <div class="bg-#fff flex-[4.5] p-[8px_4px] box-border flex flex-col gap-8px">
           <div class="flex gap-4px">
-            <div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
+            <div class="bg-#f1f1f1 size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#f1f1f1 w-16px h-4px"></div>
               <div class="bg-#f1f1f1 w-24px h-4px"></div>
@@ -96,7 +102,7 @@ const titleList = [
           </div>
 
           <div class="flex gap-4px">
-            <div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
+            <div class="bg-#f1f1f1 size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#f1f1f1 w-16px h-4px"></div>
               <div class="bg-#f1f1f1 w-24px h-4px"></div>
@@ -104,11 +110,11 @@ const titleList = [
           </div>
         </div>
 
-        <div class="bg-#454545 flex-[1]"></div>
+        <div class="bg-#454545 flex-1"></div>
 
         <div class="bg-#212121 flex-[4.5] p-[8px_4px] rounded-[0_6px_6px_0] box-border flex flex-col gap-8px">
           <div class="flex gap-4px">
-            <div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
+            <div class="bg-#4d4d4d size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#4d4d4d w-16px h-4px"></div>
               <div class="bg-#4d4d4d w-24px h-4px"></div>
@@ -116,7 +122,7 @@ const titleList = [
           </div>
 
           <div class="flex gap-4px">
-            <div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
+            <div class="bg-#4d4d4d size-10px rounded-50%"></div>
             <div class="flex flex-col gap-2px">
               <div class="bg-#4d4d4d w-16px h-4px"></div>
               <div class="bg-#4d4d4d w-24px h-4px"></div>
@@ -128,4 +134,4 @@ const titleList = [
   }
 ]
 
-export { titleList }
+export { topicsList }
diff --git a/src/views/home-window/robot/views/Chat.vue b/src/views/home-window/robot/views/Chat.vue
index 6607a2c2..c11f1dc2 100644
--- a/src/views/home-window/robot/views/Chat.vue
+++ b/src/views/home-window/robot/views/Chat.vue
@@ -57,7 +57,11 @@
 
     <div class="h-1px bg-[--line-color]"></div>
     <!-- 下半部分输入框以及功能栏 -->
-    <n-flex vertical :size="6" class="size-full p-[14px_22px] box-border shadow-inner">
+    <n-flex
+      vertical
+      :size="6"
+      style="box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.05)"
+      class="size-full p-[14px_22px] box-border">
       <n-flex :size="26" class="options">
         <n-popover v-for="(item, index) in features" :key="index" trigger="hover" :show-arrow="false" placement="top">
           <template #trigger>
diff --git a/src/views/home-window/robot/views/chatSettings/config.tsx b/src/views/home-window/robot/views/chatSettings/config.tsx
index 3d37fe3a..71576fa7 100644
--- a/src/views/home-window/robot/views/chatSettings/config.tsx
+++ b/src/views/home-window/robot/views/chatSettings/config.tsx
@@ -34,7 +34,7 @@ export const content: ChatConfig = {
     {
       title: '字体大小',
       description: '聊天内容的字体大小',
-      features: Slider(20, 12)
+      features: <Slider min={12} max={20} value={14} />
     },
     {
       title: '自动生成标题',
diff --git a/src/views/home-window/robot/views/chatSettings/index.vue b/src/views/home-window/robot/views/chatSettings/index.vue
index 683cc3f4..821f5411 100644
--- a/src/views/home-window/robot/views/chatSettings/index.vue
+++ b/src/views/home-window/robot/views/chatSettings/index.vue
@@ -15,7 +15,9 @@
 
   <!-- 设置的主体内容  -->
   <div class="flex flex-1 shadow-inner p-20px">
-    <n-flex vertical class="w-full h-fit border-(solid 1px [--line-color]) shadow-md rounded-8px p-10px">
+    <n-flex
+      vertical
+      class="w-full h-fit bg-[--bg-setting-item] border-(solid 1px [--line-color]) shadow-md rounded-8px p-10px">
       <n-flex vertical justify="center" v-for="(item, index) in content.system" :key="index">
         <n-flex justify="space-between" :size="0" align="center" class="p-8px">
           <n-flex vertical :size="4">
@@ -51,4 +53,7 @@ const handleClose = () => {
     @apply size-18px;
   }
 }
+:deep(.n-button:not(.n-button--disabled):hover) {
+  color: revert;
+}
 </style>
diff --git a/src/views/home-window/robot/views/chatSettings/model.tsx b/src/views/home-window/robot/views/chatSettings/model.tsx
index f24a1a35..dc33f43d 100644
--- a/src/views/home-window/robot/views/chatSettings/model.tsx
+++ b/src/views/home-window/robot/views/chatSettings/model.tsx
@@ -1,14 +1,38 @@
-import { NButton, NFlex, NSelect, NSlider, NSwitch } from 'naive-ui'
+import {
+  NButton,
+  NFlex,
+  NSelect,
+  NSlider,
+  NSwitch,
+  NInputNumber,
+  NConfigProvider,
+  GlobalThemeOverrides
+} from 'naive-ui'
+
+/** 单独设置数字输入框的主题 */
+const commonTheme: GlobalThemeOverrides = {
+  Input: {
+    borderRadius: '10px',
+    borderHover: '1px solid #ccc',
+    border: '1px solid #ccc',
+    borderDisabled: '1px solid #ccc',
+    borderFocus: '1px solid #ccc',
+    boxShadowFocus: '1px solid #ccc'
+  },
+  Button: {
+    textColorHover: '#red'
+  }
+}
 
 export const Button = (title: string, icon: string) => {
   return (
     <>
-      <NButton quaternary>
+      <NButton quaternary size={'small'}>
         <NFlex justify="center" align="center" size={6}>
-          <svg class={'size-16px'}>
+          <svg class={'size-12px'}>
             <use href={`#${icon}`}></use>
           </svg>
-          {title}
+          <p class={'text-12px'}>{title}</p>
         </NFlex>
       </NButton>
     </>
@@ -18,31 +42,49 @@ export const Button = (title: string, icon: string) => {
 export const Select = (content: any[]) => {
   return (
     <>
-      <NSelect class={'w-120px rounded-8px'} options={content} value={content[0].value}></NSelect>
+      <NSelect
+        class={'w-120px rounded-8px'}
+        consistentMenuWidth={false}
+        size={'small'}
+        options={content}
+        value={content[0].value}></NSelect>
     </>
   )
 }
 
-export const Slider = (max: number, min: number) => {
-  const formatTooltip = (value: number) => `${value}px`
-  return (
-    <>
-      <NSlider
-        class={'w-160px'}
-        defaultValue={14}
-        formatTooltip={formatTooltip}
-        showTooltip={true}
-        max={max}
-        min={min}
-        step={1}></NSlider>
-    </>
-  )
-}
+export const Slider = defineComponent(
+  (props: { value: number; max: number; min: number }) => {
+    const v = ref(props.value)
+    const formatTooltip = (value: number) => `${value}px`
+    return () => (
+      <NFlex align={'center'} size={12}>
+        <NConfigProvider themeOverrides={commonTheme}>
+          <NInputNumber min={props.min} max={props.max} class={'w-80px'} v-model:value={v.value} size="tiny" />
+        </NConfigProvider>
+        <NSlider
+          class={'w-160px'}
+          formatTooltip={formatTooltip}
+          v-model:value={v.value}
+          max={props.max}
+          min={props.min}
+          step={1}></NSlider>
+      </NFlex>
+    )
+  },
+  {
+    props: ['value', 'max', 'min']
+  }
+)
 
 export const Switch = () => {
   return (
     <>
-      <NSwitch></NSwitch>
+      <NSwitch class={'text-(12px [--chat-text-color])'} size={'small'}>
+        {{
+          checked: () => '开启',
+          unchecked: () => '关闭'
+        }}
+      </NSwitch>
     </>
   )
 }