From 3aee99183ad1a69b0b105c8cc05f6e44892866a2 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 2 Nov 2023 18:25:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/env/.env                                   |  2 +-
 ui/src/assets/user-icon.svg                   | 14 ++++
 ui/src/components/back-button/index.vue       |  2 +-
 ui/src/components/card-box/index.vue          |  4 +-
 .../content-container/LayoutContent.vue       | 12 +--
 ui/src/components/icons/index.ts              | 79 ++++++++++++++-----
 ui/src/components/login-container/index.vue   |  4 +-
 ui/src/components/tags-input/index.vue        |  2 +-
 ui/src/layout/app-layout/index.vue            |  3 +-
 .../layout/components/sidebar/SidebarItem.vue | 11 ++-
 ui/src/layout/components/sidebar/index.vue    |  1 +
 .../top-bar/avatar/ResetPasssword.vue         |  1 -
 .../components/top-bar/avatar/index.vue       | 11 ++-
 ui/src/layout/components/top-bar/index.vue    | 15 ++--
 .../components/top-bar/top-menu/MenuItem.vue  | 20 +++--
 .../components/top-bar/top-menu/index.vue     |  4 +-
 ui/src/layout/main-layout/index.vue           |  2 +-
 ui/src/styles/app.scss                        | 59 ++++++++++----
 ui/src/styles/element-plus.scss               | 20 +++++
 ui/src/styles/variables.scss                  | 21 +++--
 ui/src/views/404/index.vue                    |  2 +-
 ui/src/views/dataset/CreateDataset.vue        |  6 +-
 ui/src/views/dataset/component/BaseForm.vue   |  2 +-
 .../dataset/component/UploadComponent.vue     |  2 +-
 ui/src/views/dataset/index.vue                |  8 +-
 ui/src/views/dataset/step/SetRules.vue        |  4 +-
 ui/src/views/login/forgot-password/index.vue  |  4 +-
 ui/src/views/login/index.vue                  |  2 +-
 ui/src/views/login/register/index.vue         |  4 +-
 ui/src/views/login/reset-password/index.vue   |  4 +-
 .../setting/component/PermissionSetting.vue   |  4 +
 ui/src/views/setting/index.vue                | 63 +++++++++------
 32 files changed, 262 insertions(+), 130 deletions(-)
 create mode 100644 ui/src/assets/user-icon.svg

diff --git a/ui/env/.env b/ui/env/.env
index 4dcc347bb..87cd57582 100644
--- a/ui/env/.env
+++ b/ui/env/.env
@@ -1,4 +1,4 @@
 VITE_APP_NAME=ui
 VITE_BASE_PATH=/ui/
 VITE_APP_PORT=3000
-VITE_APP_TITLE = '智能知识库'
\ No newline at end of file
+VITE_APP_TITLE = 'MaxKB'
\ No newline at end of file
diff --git a/ui/src/assets/user-icon.svg b/ui/src/assets/user-icon.svg
new file mode 100644
index 000000000..5dd0f63c0
--- /dev/null
+++ b/ui/src/assets/user-icon.svg
@@ -0,0 +1,14 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 7.33333H4C2.15905 7.33333 0 8.62098 0 10.9333V12.7333C0 13.0647 0.298477 13.3333 0.666667 13.3333H11.3333C11.7015 13.3333 12 13.0647 12 12.7333V10.9333C12 8.61904 9.84095 7.33333 8 7.33333Z" fill="url(#paint0_linear_264_32130)"/>
+<path d="M2.66667 3.33333C2.66667 5.17428 4.15905 6.66667 6 6.66667C7.84095 6.66667 9.33333 5.17428 9.33333 3.33333C9.33333 1.49238 7.84095 0 6 0C4.15905 0 2.66667 1.49238 2.66667 3.33333Z" fill="url(#paint1_linear_264_32130)"/>
+<defs>
+<linearGradient id="paint0_linear_264_32130" x1="6" y1="-1.34111e-08" x2="6" y2="13.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_264_32130" x1="6" y1="-1.34111e-08" x2="6" y2="13.6667" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ui/src/components/back-button/index.vue b/ui/src/components/back-button/index.vue
index abaf1651d..4ca5d64e1 100644
--- a/ui/src/components/back-button/index.vue
+++ b/ui/src/components/back-button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-icon class="back-button cursor mr-10 vertical-middle" @click="jump">
+  <el-icon class="back-button cursor mr-8 vertical-middle" @click="jump">
     <Back />
   </el-icon>
 </template>
diff --git a/ui/src/components/card-box/index.vue b/ui/src/components/card-box/index.vue
index eeb05ab34..dc04f0651 100644
--- a/ui/src/components/card-box/index.vue
+++ b/ui/src/components/card-box/index.vue
@@ -3,14 +3,14 @@
     <div class="card-header">
       <slot name="header">
         <div class="title flex align-center">
-          <AppAvatar class="mr-10">
+          <AppAvatar class="mr-8">
             <el-icon><Document /></el-icon>
           </AppAvatar>
           <h4>{{ title }}</h4>
         </div>
       </slot>
     </div>
-    <div class="description mt-10">
+    <div class="description mt-8">
       <slot name="description">
         {{ description }}
       </slot>
diff --git a/ui/src/components/content-container/LayoutContent.vue b/ui/src/components/content-container/LayoutContent.vue
index c99e9064d..9d30a63bf 100644
--- a/ui/src/components/content-container/LayoutContent.vue
+++ b/ui/src/components/content-container/LayoutContent.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="content-container">
-    <div class="content-container__header mb-10" v-if="slots.header || header">
+    <div class="content-container__header mt-16 mb-16" v-if="slots.header || header">
       <slot name="header">
         <back-button :to="backTo" v-if="showBack"></back-button>
-        <span class="vertical-middle">{{ header }}</span>
+        <h2 class="vertical-middle">{{ header }}</h2>
       </slot>
     </div>
     <el-scrollbar>
@@ -31,18 +31,14 @@ const showBack = computed(() => {
 <style lang="scss" scope>
 .content-container {
   transition: 0.3s;
-  padding: var(--app-view-padding);
+  padding: 0 var(--app-view-padding) var(--app-view-padding);
   .content-container__header {
-    font-weight: 600;
-    font-size: 18px;
     box-sizing: border-box;
   }
   .content-container__main {
     background-color: var(--app-view-bg-color);
-    border-radius: 6px;
+    border-radius: 4px;
     box-sizing: border-box;
-    // overflow: auto;
-    // height: 100%;
   }
 }
 </style>
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index 8236ecd0a..c9ae91982 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -34,6 +34,52 @@ export const iconMap: any = {
     }
   },
 
+  'app-user': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M14 12.3333H10C8.15905 12.3333 6 13.621 6 15.9333V17.7333C6 18.0647 6.29848 18.3333 6.66667 18.3333H17.3333C17.7015 18.3333 18 18.0647 18 17.7333V15.9333C18 13.619 15.841 12.3333 14 12.3333Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M8.66667 8.33333C8.66667 10.1743 10.1591 11.6667 12 11.6667C13.8409 11.6667 15.3333 10.1743 15.3333 8.33333C15.3333 6.49238 13.8409 5 12 5C10.1591 5 8.66667 6.49238 8.66667 8.33333Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
+  'app-add-users': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 20 20',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M6.24984 5.41667C6.24984 6.7975 7.37067 7.91667 8.74984 7.91667C10.129 7.91667 11.2498 6.7975 11.2498 5.41667C11.2498 4.03583 10.129 2.91667 8.74984 2.91667C7.37067 2.91667 6.24984 4.03583 6.24984 5.41667ZM8.74984 1.25C11.0498 1.25 12.9165 3.11542 12.9165 5.41667C12.9165 7.71792 11.0498 9.58333 8.74984 9.58333C6.44984 9.58333 4.58317 7.71792 4.58317 5.41667C4.58317 3.11542 6.44984 1.25 8.74984 1.25ZM3.43734 15C3.37067 15.2663 3.33317 15.5454 3.33317 15.8333V16.6667H10.854C11.0841 16.6667 11.2706 16.8532 11.2706 17.0833V17.9167C11.2706 18.1468 11.0841 18.3333 10.854 18.3333H2.49984C2.0415 18.3333 1.6665 17.9604 1.6665 17.5V15.8333C1.6665 13.0721 3.904 10.8333 6.6665 10.8333H10.854C11.0841 10.8333 11.2706 11.0199 11.2706 11.25V12.0833C11.2706 12.3135 11.0841 12.5 10.854 12.5H6.6665C5.11234 12.5 3.80817 13.5625 3.43734 15ZM15.4165 11.6667C15.6466 11.6667 15.8332 11.8532 15.8332 12.0833V14.1667H17.9165C18.1466 14.1667 18.3332 14.3532 18.3332 14.5833V15.4167C18.3332 15.6468 18.1466 15.8333 17.9165 15.8333H15.8332V17.9167C15.8332 18.1468 15.6466 18.3333 15.4165 18.3333H14.5832C14.3531 18.3333 14.1665 18.1468 14.1665 17.9167V15.8333H12.0832C11.8531 15.8333 11.6665 15.6468 11.6665 15.4167V14.5833C11.6665 14.3532 11.8531 14.1667 12.0832 14.1667H14.1665V12.0833C14.1665 11.8532 14.3531 11.6667 14.5832 11.6667H15.4165Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
+  },
+
   'app-dataset': {
     iconReader: () => {
       return h('i', [
@@ -95,39 +141,32 @@ export const iconMap: any = {
       ])
     }
   },
+
   'app-team': {
     iconReader: () => {
       return h('i', [
         h(
           'svg',
           {
-            viewBox: '0 0 1024 1024',
+            viewBox: '0 0 20 20',
             version: '1.1',
             xmlns: 'http://www.w3.org/2000/svg'
           },
           [
             h('path', {
-              d: 'M 824.2 699.9 c -25.4 -25.4 -54.7 -45.7 -86.4 -60.4 C 783.1 602.8 812 546.8 812 484 c 0 -110.8 -92.4 -201.7 -203.2 -200 c -109.1 1.7 -197 90.6 -197 200 c 0 62.8 29 118.8 74.2 155.5 c -31.7 14.7 -60.9 34.9 -86.4 60.4 C 345 754.6 314 826.8 312 903.8 c -0.1 4.5 3.5 8.2 8 8.2 h 56 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 C 493.8 707.7 551.1 684 612 684 c 60.9 0 118.2 23.7 161.3 66.8 C 814.5 792 838 846.3 840 904.3 c 0.1 4.3 3.7 7.7 8 7.7 h 56 c 4.5 0 8.1 -3.7 8 -8.2 c -2 -77 -33 -149.2 -87.8 -203.9 Z M 612 612 c -34.2 0 -66.4 -13.3 -90.5 -37.5 c -24.5 -24.5 -37.9 -57.1 -37.5 -91.8 c 0.3 -32.8 13.4 -64.5 36.3 -88 c 24 -24.6 56.1 -38.3 90.4 -38.7 c 33.9 -0.3 66.8 12.9 91 36.6 c 24.8 24.3 38.4 56.8 38.4 91.4 c 0 34.2 -13.3 66.3 -37.5 90.5 c -24.2 24.2 -56.4 37.5 -90.6 37.5 Z M 361.5 510.4 c -0.9 -8.7 -1.4 -17.5 -1.4 -26.4 c 0 -15.9 1.5 -31.4 4.3 -46.5 c 0.7 -3.6 -1.2 -7.3 -4.5 -8.8 c -13.6 -6.1 -26.1 -14.5 -36.9 -25.1 c -25.8 -25.2 -39.7 -59.3 -38.7 -95.4 c 0.9 -32.1 13.8 -62.6 36.3 -85.6 c 24.7 -25.3 57.9 -39.1 93.2 -38.7 c 31.9 0.3 62.7 12.6 86 34.4 c 7.9 7.4 14.7 15.6 20.4 24.4 c 2 3.1 5.9 4.4 9.3 3.2 c 17.6 -6.1 36.2 -10.4 55.3 -12.4 c 5.6 -0.6 8.8 -6.6 6.3 -11.6 c -32.5 -64.3 -98.9 -108.7 -175.7 -109.9 c -110.9 -1.7 -203.3 89.2 -203.3 199.9 c 0 62.8 28.9 118.8 74.2 155.5 c -31.8 14.7 -61.1 35 -86.5 60.4 c -54.8 54.7 -85.8 126.9 -87.8 204 c -0.1 4.5 3.5 8.2 8 8.2 h 56.1 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 c 29.4 -29.4 65.4 -49.8 104.7 -59.7 c 3.9 -1 6.5 -4.7 6 -8.7 Z',
+              d: 'M7.08317 10C9.15424 10 10.8332 8.32107 10.8332 6.25C10.8332 4.17893 9.15424 2.5 7.08317 2.5C5.0121 2.5 3.33317 4.17893 3.33317 6.25C3.33317 8.32107 5.0121 10 7.08317 10Z',
               fill: 'currentColor'
-            })
-          ]
-        )
-      ])
-    }
-  },
-  'app-add-users': {
-    iconReader: () => {
-      return h('i', [
-        h(
-          'svg',
-          {
-            viewBox: '0 0 1024 1024',
-            version: '1.1',
-            xmlns: 'http://www.w3.org/2000/svg'
-          },
-          [
+            }),
             h('path', {
-              d: 'M 892 772 h -80 v -80 c 0 -4.4 -3.6 -8 -8 -8 h -48 c -4.4 0 -8 3.6 -8 8 v 80 h -80 c -4.4 0 -8 3.6 -8 8 v 48 c 0 4.4 3.6 8 8 8 h 80 v 80 c 0 4.4 3.6 8 8 8 h 48 c 4.4 0 8 -3.6 8 -8 v -80 h 80 c 4.4 0 8 -3.6 8 -8 v -48 c 0 -4.4 -3.6 -8 -8 -8 Z M 373.5 498.4 c -0.9 -8.7 -1.4 -17.5 -1.4 -26.4 c 0 -15.9 1.5 -31.4 4.3 -46.5 c 0.7 -3.6 -1.2 -7.3 -4.5 -8.8 c -13.6 -6.1 -26.1 -14.5 -36.9 -25.1 c -25.8 -25.2 -39.7 -59.3 -38.7 -95.4 c 0.9 -32.1 13.8 -62.6 36.3 -85.6 c 24.7 -25.3 57.9 -39.1 93.2 -38.7 c 31.9 0.3 62.7 12.6 86 34.4 c 7.9 7.4 14.7 15.6 20.4 24.4 c 2 3.1 5.9 4.4 9.3 3.2 c 17.6 -6.1 36.2 -10.4 55.3 -12.4 c 5.6 -0.6 8.8 -6.6 6.3 -11.6 c -32.5 -64.3 -98.9 -108.7 -175.7 -109.9 c -110.8 -1.7 -203.2 89.2 -203.2 200 c 0 62.8 28.9 118.8 74.2 155.5 c -31.8 14.7 -61.1 35 -86.5 60.4 c -54.8 54.7 -85.8 126.9 -87.8 204 c -0.1 4.5 3.5 8.2 8 8.2 h 56.1 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 c 29.4 -29.4 65.4 -49.8 104.7 -59.7 c 3.8 -1.1 6.4 -4.8 5.9 -8.8 Z M 824 472 c 0 -109.4 -87.9 -198.3 -196.9 -200 C 516.3 270.3 424 361.2 424 472 c 0 62.8 29 118.8 74.2 155.5 c -31.7 14.7 -60.9 34.9 -86.4 60.4 C 357 742.6 326 814.8 324 891.8 c -0.1 4.5 3.5 8.2 8 8.2 h 56 c 4.3 0 7.9 -3.4 8 -7.7 c 1.9 -58 25.4 -112.3 66.7 -153.5 C 505.8 695.7 563 672 624 672 c 110.4 0 200 -89.5 200 -200 Z m -109.5 90.5 C 690.3 586.7 658.2 600 624 600 s -66.3 -13.3 -90.5 -37.5 C 509 538 495.7 505.4 496 470.7 c 0.3 -32.8 13.4 -64.5 36.3 -88 c 24 -24.6 56.1 -38.3 90.4 -38.7 c 33.9 -0.3 66.8 12.9 91 36.6 c 24.8 24.3 38.4 56.8 38.4 91.4 c -0.1 34.2 -13.4 66.3 -37.6 90.5 Z',
+              d: 'M1.24984 18.3333C0.7896 18.3333 0.416504 17.9602 0.416504 17.5V15.8889C0.416504 13.0968 2.76035 10.8333 5.47333 10.8333H8.70065C11.4136 10.8333 13.7498 13.0968 13.7498 15.8889V17.5C13.7498 17.9602 13.3767 18.3333 12.9165 18.3333H1.24984Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M15.4165 17.5V17.2535C15.4165 15.3267 15.4165 13.3333 13.7498 12.0833C13.8196 12.0773 13.9366 12.0794 14.0491 12.0814C14.1036 12.0824 14.157 12.0833 14.2034 12.0833H15.8332C17.8679 12.0833 19.5832 13.3643 19.5832 15.4583V16.875C19.5832 17.2202 19.3033 17.5 18.9582 17.5H15.4165Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M14.5832 10.8333C15.9639 10.8333 17.0832 9.71405 17.0832 8.33333C17.0832 6.95262 15.9639 5.83333 14.5832 5.83333C13.2025 5.83333 12.0832 6.95262 12.0832 8.33333C12.0832 9.71405 13.2025 10.8333 14.5832 10.8333Z',
               fill: 'currentColor'
             })
           ]
diff --git a/ui/src/components/login-container/index.vue b/ui/src/components/login-container/index.vue
index fe4f77db7..ea1f75334 100644
--- a/ui/src/components/login-container/index.vue
+++ b/ui/src/components/login-container/index.vue
@@ -3,7 +3,7 @@
     <div class="login-title">
       <div class="title flex-center">
         <div class="logo"></div>
-        <div>{{ title || defaultTitle }}</div>
+        <div class="app-logo-font">{{ title || defaultTitle }}</div>
       </div>
       <div class="sub-title" v-if="subTitle">{{ subTitle }}</div>
     </div>
@@ -27,8 +27,6 @@ defineProps({
 
     .title {
       font-size: 28px;
-      font-weight: 900;
-      color: #101010;
       height: 60px;
       .logo {
         background-image: url('@/assets/logo.png');
diff --git a/ui/src/components/tags-input/index.vue b/ui/src/components/tags-input/index.vue
index 1bc53c90b..04928805f 100644
--- a/ui/src/components/tags-input/index.vue
+++ b/ui/src/components/tags-input/index.vue
@@ -8,7 +8,7 @@
         :key="index"
         @close="removeTag(item)"
         closable
-        class="mr-10"
+        class="mr-8"
         >{{ item }}
       </el-tag>
     </div>
diff --git a/ui/src/layout/app-layout/index.vue b/ui/src/layout/app-layout/index.vue
index d5c971d33..1d93815ef 100644
--- a/ui/src/layout/app-layout/index.vue
+++ b/ui/src/layout/app-layout/index.vue
@@ -20,8 +20,9 @@ import { TopBar, AppMain } from '../components'
 .app-main {
   height: calc(100vh - var(--app-header-height));
   padding: 0 !important;
+  box-sizing: border-box;
 }
 .app-header {
-  background-color: var(--app-header-bg-color);
+  background: var(--app-header-bg-color);
 }
 </style>
diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index f56c83a6e..d9f6b1ca9 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -2,7 +2,7 @@
   <div v-if="!menu.meta || !menu.meta.hidden" class="sidebar-item">
     <el-menu-item ref="subMenu" :index="menu.path" popper-class="sidebar-popper">
       <template #title>
-        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menu.meta.icon" />
+        <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menu.meta.icon" class="sidebar-icon"/>
         <span v-if="menu.meta && menu.meta.title">{{ menu.meta.title }}</span>
       </template>
     </el-menu-item>
@@ -19,14 +19,19 @@ defineProps<{
 
 <style scoped lang="scss">
 .sidebar-item {
+  .sidebar-icon {
+    font-size: 20px;
+    margin-top: -2px;
+  }
   .el-menu-item {
-    padding-left: 30px !important;
+    padding: 13px 12px 13px 16px !important;
     font-weight: 500;
+    border-radius: 4px;
   }
 
   .el-menu-item.is-active {
     color: var(--el-menu-active-color);
-    background: var(--el-color-primary-light-9);
+    background: rgba(51, 112, 255, 0.1);
   }
 }
 </style>
diff --git a/ui/src/layout/components/sidebar/index.vue b/ui/src/layout/components/sidebar/index.vue
index 3c80ee3d8..4acd6e05a 100644
--- a/ui/src/layout/components/sidebar/index.vue
+++ b/ui/src/layout/components/sidebar/index.vue
@@ -36,6 +36,7 @@ const activeMenu = computed(() => {
 
 <style lang="scss">
 .sidebar {
+  padding: 8px;
   .el-menu {
     height: 100%;
     border: none;
diff --git a/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue b/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
index 7fdd1132a..7e717bdee 100644
--- a/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
+++ b/ui/src/layout/components/top-bar/avatar/ResetPasssword.vue
@@ -38,7 +38,6 @@
           class="input-item"
           :disabled="true"
           v-bind:modelValue="user.userInfo?.email"
-          @change="() => {}"
           placeholder="请输入邮箱"
         >
           <template #prepend>
diff --git a/ui/src/layout/components/top-bar/avatar/index.vue b/ui/src/layout/components/top-bar/avatar/index.vue
index 60a77e24e..bccf2e2be 100644
--- a/ui/src/layout/components/top-bar/avatar/index.vue
+++ b/ui/src/layout/components/top-bar/avatar/index.vue
@@ -1,6 +1,15 @@
 <template>
   <el-dropdown trigger="click" type="primary">
-    <AppAvatar :name="user.userInfo?.username" />
+    <div class="flex-center cursor">
+      <AppAvatar>
+        <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+      </AppAvatar>
+      <span class="ml-8">{{ user.userInfo?.username }}</span>
+      <el-icon class="el-icon--right">
+        <CaretBottom />
+      </el-icon>
+    </div>
+
     <template #dropdown>
       <el-dropdown-menu>
         <el-dropdown-item @click="openResetPassword">
diff --git a/ui/src/layout/components/top-bar/index.vue b/ui/src/layout/components/top-bar/index.vue
index 8285e2831..caa97f5e3 100644
--- a/ui/src/layout/components/top-bar/index.vue
+++ b/ui/src/layout/components/top-bar/index.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="top-bar-container flex-between border-b">
+  <div class="top-bar-container border-b flex-between">
     <div class="flex-center h-full">
       <div class="app-title-container flex-center">
         <div class="app-title-icon"></div>
-        <div class="app-title-text ml-10">{{ defaultTitle }}</div>
+        <div class="app-title-text app-logo-font">{{ defaultTitle }}</div>
       </div>
-      <el-divider direction="vertical" class="line" />
       <TopMenu></TopMenu>
     </div>
     <div class="avatar">
@@ -25,18 +24,16 @@ const defaultTitle = import.meta.env.VITE_APP_TITLE
   padding: var(--app-header-padding);
 
   .app-title-container {
-    margin-right: 20px;
+    margin-right: 45px;
     .app-title-icon {
       background-image: url('@/assets/logo.png');
       background-size: 100% 100%;
-      width: 40px;
-      height: 40px;
+      width: 34px;
+      height: 34px;
     }
 
     .app-title-text {
-      color: var(--el-color-primary);
-      font-size: 20px;
-      font-weight: 600;
+      font-size: 24px;
     }
   }
   .line {
diff --git a/ui/src/layout/components/top-bar/top-menu/MenuItem.vue b/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
index 4efd4f565..d4021956b 100644
--- a/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
+++ b/ui/src/layout/components/top-bar/top-menu/MenuItem.vue
@@ -4,9 +4,9 @@
     :class="isActive ? 'active' : ''"
     @click="router.push({ name: menu.name })"
   >
-    <div class="icon">
+    <!-- <div class="icon">
       <AppIcon :iconName="menu.meta ? (menu.meta.icon as string) : '404'" />
-    </div>
+    </div> -->
     <div class="title">{{ menu.meta?.title }}</div>
   </div>
 </template>
@@ -28,8 +28,10 @@ const isActive = computed(() => {
 </script>
 <style lang="scss" scoped>
 .menu-item-container {
-  padding: 0 20px;
+  margin-right: 28px;
   cursor: pointer;
+  font-size: 16px;
+  position: relative;
   .icon {
     font-size: 15px;
     margin-right: 5px;
@@ -41,9 +43,15 @@ const isActive = computed(() => {
 }
 
 .active {
-  font-weight: 600;
   color: var(--el-color-primary);
-  background-color: var(--el-color-primary-light-9);
-  border-bottom: 3px solid var(--el-color-primary);
+  &::after {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    content: '';
+    background-color: var(--el-color-primary-light-9);
+    border-bottom: 3px solid var(--el-color-primary);
+  }
 }
 </style>
diff --git a/ui/src/layout/components/top-bar/top-menu/index.vue b/ui/src/layout/components/top-bar/top-menu/index.vue
index 7b7e742d4..b8b7390ed 100644
--- a/ui/src/layout/components/top-bar/top-menu/index.vue
+++ b/ui/src/layout/components/top-bar/top-menu/index.vue
@@ -19,7 +19,5 @@ const topMenuList = computed(() => {
 })
 </script>
 <style lang="scss" scope>
-.top-menu-container {
-  margin-bottom: -1px;
-}
+
 </style>
diff --git a/ui/src/layout/main-layout/index.vue b/ui/src/layout/main-layout/index.vue
index 9d3fc311d..222cbf7ab 100644
--- a/ui/src/layout/main-layout/index.vue
+++ b/ui/src/layout/main-layout/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main-layout h-full flex">
-    <div class="sidebar-container border-r"><Sidebar /></div>
+    <div class="sidebar-container"><Sidebar /></div>
     <div class="view-container">
       <AppMain />
     </div>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index c4488ac9e..3111214a3 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -9,14 +9,17 @@ html {
 }
 
 body {
-  font-size: 14px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei',
     '微软雅黑', Arial, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
   height: 100%;
   margin: 0;
   padding: 0;
+  color: var(--app-text-color-primary);
 }
 
 #app {
@@ -73,6 +76,7 @@ h1 {
 
 h2 {
   font-size: 20px;
+  font-weight: 500;
 }
 
 h3 {
@@ -93,28 +97,34 @@ h4 {
 .mt-8 {
   margin-top: 8px;
 }
-.mt-10 {
-  margin-top: 10px;
+.mt-16 {
+  margin-top: 16px;
+}
+.mb-8 {
+  margin-bottom: 8px;
+}
+.mb-16 {
+  margin-bottom: 16px;
 }
 
-.ml-10 {
-  margin-left: 10px;
+.ml-8 {
+  margin-left: 8px;
 }
 .ml-16 {
   margin-left: 16px;
 }
-.mr-10 {
-  margin-right: 10px;
-}
-.mb-10 {
-  margin-bottom: 10px;
-}
-.mb-20 {
-  margin-bottom: 20px;
+.mr-8 {
+  margin-right: 8px;
 }
 
-.p-15 {
-  padding: 15px;
+.p-8 {
+  padding: 8px;
+}
+.p-16 {
+  padding: 16px;
+}
+.p-24 {
+  padding: 24px;
 }
 
 .flex {
@@ -176,8 +186,7 @@ h4 {
 
 // 内容部分 自适应高度
 .main-calc-height {
-  height: calc(100vh - 125px);
-  box-sizing: border-box;
+  height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
 }
 
 // 标题前带竖线样式
@@ -196,3 +205,19 @@ h4 {
     border-radius: 10px;
   }
 }
+
+.app-logo-font {
+  background: var(--app-logo-color);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: Arial Black;
+  font-style: normal;
+  font-weight: 900;
+}
+
+// tag
+.default-tag {
+  background: var(--tag-deflaut-bg);
+  color: var(--tag-deflaut-color);
+}
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 4ac1a64d2..cf22a8628 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -2,6 +2,7 @@
   --el-menu-item-height: 45px;
   --el-text-color-primary: '#1F2329';
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
+  --el-border-color: rgba(31, 35, 41, 0.15);
 }
 
 .el-button {
@@ -90,6 +91,25 @@
   --el-card-border-radius: 8px;
   border: none !important;
 }
+.el-dropdown {
+  color: var(--app-text-color-primary);
+}
+
+.el-tag {
+  --el-tag-border-radius: 2px;
+}
+.el-table {
+  --el-table-header-bg-color: #f5f6f7;
+}
+.el-table {
+  --el-table-text-color: var(--app-text-color-primary);
+  thead {
+    color: var(--app-text-color-secondary);
+  }
+  th.el-table__cell {
+    border-top: var(--el-table-border);
+  }
+}
 
 // 抽屉样式整体修改
 .el-drawer {
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 9e20cea2b..25437dda6 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -1,17 +1,22 @@
 :root {
   --el-color-primary: rgba(51, 112, 255, 1);
-  --app-layout-bg-color: #f3f5f6;
-  --app-base-text-color: rgba(31, 35, 41, 1);
-  --app-view-padding: 15px;
+  --app-layout-bg-color: #f5f6f7;
+  --app-text-color-primary: #1f2329;
+  --app-text-color-secondary: #646A73;
+  --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
-  --hover-bg-color: #fafafa;
+
   /** header 组件 */
   --app-header-height: 56px;
   --app-header-padding: 0 20px;
-  --app-header-bg-color: #ffffff;
+  --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
+  --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 100%);
   /** sidebar 组件 */
   --sidebar-bg-color: #ffffff;
-  --sidebar-width: 198px;
-
-  --team-manage-left-width : 280px;
+  --sidebar-width: 240px;
+  /** tag */
+  --tag-deflaut-bg: rgba(51, 112, 255, 0.2);
+  --tag-deflaut-color: #2b5fd9;
+  /** team */
+  --team-manage-left-width: 280px;
 }
diff --git a/ui/src/views/404/index.vue b/ui/src/views/404/index.vue
index 4bb07abe9..e3b48b273 100644
--- a/ui/src/views/404/index.vue
+++ b/ui/src/views/404/index.vue
@@ -31,7 +31,7 @@ const router = useRouter()
     }
 
     .message-container {
-        color: var(--app-base-text-color);
+        color: var(--app-text-color-primary);
 
         .title {
             font-size: 50px;
diff --git a/ui/src/views/dataset/CreateDataset.vue b/ui/src/views/dataset/CreateDataset.vue
index 8c1133271..c5943da23 100644
--- a/ui/src/views/dataset/CreateDataset.vue
+++ b/ui/src/views/dataset/CreateDataset.vue
@@ -1,17 +1,17 @@
 <template>
   <LayoutContent header="创建数据集" back-to="-1">
     <div class="create-dataset flex main-calc-height">
-      <div class="p-15">
+      <div class="p-24">
         <el-steps :active="active" finish-status="success" align-center>
           <el-step v-for="(item, index) in steps" :key="index" :title="item.name" />
         </el-steps>
       </div>
-      <div class="create-dataset__component p-15">
+      <div class="create-dataset__component p-24">
         <el-scrollbar>
           <component :is="steps[active].component" :ref="steps[active]?.ref" />
         </el-scrollbar>
       </div>
-      <div class="create-dataset__footer text-right p-15 border-t">
+      <div class="create-dataset__footer text-right p-24 border-t">
         <el-button @click="next">取 消</el-button>
         <el-button @click="prev">上一步</el-button>
         <el-button @click="next" type="primary">下一步</el-button>
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index e18afc7de..c271306d1 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="title-decoration-1 mb-10">基本信息</h4>
+  <h4 class="title-decoration-1 mb-8">基本信息</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
     <el-form-item label="数据集名称" prop="name">
       <el-input
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index 558968b48..d0030b2bc 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -1,5 +1,5 @@
 <template>
-  <h4 class="title-decoration-1 mb-10">上传文档</h4>
+  <h4 class="title-decoration-1 mb-8">上传文档</h4>
   <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
     <el-form-item prop="fileList">
       <el-upload
diff --git a/ui/src/views/dataset/index.vue b/ui/src/views/dataset/index.vue
index 92583d4d8..85f21ef61 100644
--- a/ui/src/views/dataset/index.vue
+++ b/ui/src/views/dataset/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="dataset-list-container p-15">
+  <div class="dataset-list-container p-24">
     <div class="flex-between">
       <h3>数据集</h3>
       <el-input
         v-model="filterText"
         placeholder="搜索内容"
-        suffix-icon="Search"
+        prefix-icon="Search"
         style="width: 300px"
       />
     </div>
@@ -15,7 +15,7 @@
         v-infinite-scroll="loadDataset"
         :infinite-scroll-disabled="disabledScroll"
       >
-        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-10">
+        <el-col :xs="24" :sm="12" :md="6" :lg="5" :xl="4" class="mt-8">
           <CardAdd title="创建数据集" @click="router.push({ path: '/dataset/create' })" />
         </el-col>
         <el-col
@@ -26,7 +26,7 @@
           :xl="4"
           v-for="(item, index) in datasetList"
           :key="index"
-          class="mt-10"
+          class="mt-8"
         >
           <CardBox :title="item.name" :description="item.desc" class="cursor">
             <template #mouseEnter>
diff --git a/ui/src/views/dataset/step/SetRules.vue b/ui/src/views/dataset/step/SetRules.vue
index 40022731d..96cead40f 100644
--- a/ui/src/views/dataset/step/SetRules.vue
+++ b/ui/src/views/dataset/step/SetRules.vue
@@ -2,7 +2,7 @@
   <div class="set-rules">
     <el-row>
       <el-col :span="12">
-        <h4 class="title-decoration-1 mb-10">分段规则</h4>
+        <h4 class="title-decoration-1 mb-8">分段规则</h4>
         <el-radio-group v-model="radio1" class="set-rules__radio">
           <div>
             <el-radio label="1" size="large">智能分段（推荐）</el-radio>
@@ -17,7 +17,7 @@
       </el-col>
 
       <el-col :span="12">
-        <h4 class="title-decoration-1 mb-10">分段预览</h4>
+        <h4 class="title-decoration-1 mb-8">分段预览</h4>
         <SegmentPreview />
       </el-col>
     </el-row>
diff --git a/ui/src/views/login/forgot-password/index.vue b/ui/src/views/login/forgot-password/index.vue
index 95de7b283..5e1ac546f 100644
--- a/ui/src/views/login/forgot-password/index.vue
+++ b/ui/src/views/login/forgot-password/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h4 class="mb-20">忘记密码</h4>
+      <h4 class="mb-16">忘记密码</h4>
       <el-form
         class="register-form"
         ref="resetPasswordFormRef"
@@ -45,7 +45,7 @@
       <el-button type="primary" class="login-submit-button w-full" @click="checkCode"
         >立即验证</el-button
       >
-      <div class="operate-container mt-10">
+      <div class="operate-container mt-8">
         <el-button
           class="register"
           @click="router.push('/login')"
diff --git a/ui/src/views/login/index.vue b/ui/src/views/login/index.vue
index eeca5aa57..3e93437e4 100644
--- a/ui/src/views/login/index.vue
+++ b/ui/src/views/login/index.vue
@@ -1,6 +1,6 @@
 <template>
   <login-layout v-loading="loading">
-    <LoginContainer subTitle="欢迎使用智能客服管理平台">
+    <LoginContainer subTitle="欢迎使用 MaxKB 管理平台">
       <el-form class="login-form" :rules="rules" :model="loginForm" ref="loginFormRef">
         <el-form-item>
           <el-input
diff --git a/ui/src/views/login/register/index.vue b/ui/src/views/login/register/index.vue
index dc9ee54e1..2f1e8ed0a 100644
--- a/ui/src/views/login/register/index.vue
+++ b/ui/src/views/login/register/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h4 class="mb-20">注册</h4>
+      <h4 class="mb-16">注册</h4>
       <el-form class="register-form" :model="registerForm" :rules="rules" ref="registerFormRef">
         <el-form-item prop="username">
           <el-input
@@ -80,7 +80,7 @@
       <el-button type="primary" class="login-submit-button w-full" @click="register"
         >注册</el-button
       >
-      <div class="operate-container mt-10">
+      <div class="operate-container mt-8">
         <el-button
           class="register"
           @click="router.push('/login')"
diff --git a/ui/src/views/login/reset-password/index.vue b/ui/src/views/login/reset-password/index.vue
index c5f82785e..0a518387f 100644
--- a/ui/src/views/login/reset-password/index.vue
+++ b/ui/src/views/login/reset-password/index.vue
@@ -1,7 +1,7 @@
 <template>
   <login-layout>
     <LoginContainer>
-      <h4 class="mb-20">修改密码</h4>
+      <h4 class="mb-16">修改密码</h4>
       <el-form
         class="reset-password-form"
         ref="resetPasswordFormRef"
@@ -40,7 +40,7 @@
       <el-button type="primary" class="login-submit-button w-full" @click="resetPassword"
         >确认修改</el-button
       >
-      <div class="operate-container mt-10">
+      <div class="operate-container mt-8">
         <el-button
           class="register"
           @click="router.push('/login')"
diff --git a/ui/src/views/setting/component/PermissionSetting.vue b/ui/src/views/setting/component/PermissionSetting.vue
index 37b962cbe..73dcc6955 100644
--- a/ui/src/views/setting/component/PermissionSetting.vue
+++ b/ui/src/views/setting/component/PermissionSetting.vue
@@ -1,4 +1,6 @@
 <template>
+  <el-input v-model="filterText" placeholder="搜索" prefix-icon="Search"  class="mb-16" />
+
   <el-table :data="data" :max-height="tableHeight">
     <el-table-column prop="name" label="数据集名称" />
     <el-table-column label="管理" align="center">
@@ -49,6 +51,8 @@ const allChecked: any = ref({
 
 const tableHeight = ref(0)
 
+const filterText = ref('')
+
 watch(
   () => props.data,
   (val) => {
diff --git a/ui/src/views/setting/index.vue b/ui/src/views/setting/index.vue
index b7998263f..b3b6ba59b 100644
--- a/ui/src/views/setting/index.vue
+++ b/ui/src/views/setting/index.vue
@@ -1,29 +1,29 @@
 <template>
   <LayoutContent header="团队管理">
     <div class="team-manage flex main-calc-height">
-      <div class="team-member p-15 border-r">
-        <h4>团队成员</h4>
-        <div class="text-right">
+      <div class="team-member p-8 border-r">
+        <div class="flex-between p-16">
+          <h4>成员</h4>
           <el-button type="primary" link @click="addMember">
-            <AppIcon iconName="app-add-users" class="add-user-icon" />添加成员
+            <AppIcon iconName="app-add-users" class="add-user-icon" />
           </el-button>
         </div>
-        <div class="mt-10">
-          <el-input v-model="filterText" placeholder="请输入用户名搜索" suffix-icon="Search" />
+        <div class="team-member-input">
+          <el-input v-model="filterText" placeholder="请输入用户名搜索" prefix-icon="Search" />
         </div>
-        <div class="member-list mt-10" v-loading="loading">
+        <div class="member-list mt-8" v-loading="loading">
           <el-scrollbar>
             <ul v-if="filterMember.length > 0">
               <template v-for="(item, index) in filterMember" :key="index">
                 <li
                   @click.prevent="clickMemberHandle(item.id)"
                   :class="currentUser === item.id ? 'active' : ''"
-                  class="border-b-light flex-between p-15 cursor"
+                  class="flex-between cursor"
                 >
                   <div>
-                    <span class="mr-10">{{ item.username }}</span>
-                    <el-tag effect="dark" v-if="isManage(item.type)">所有者</el-tag>
-                    <el-tag effect="dark" type="warning" v-else>用户</el-tag>
+                    <span class="mr-8">{{ item.username }}</span>
+                    <el-tag v-if="isManage(item.type)" class="default-tag">所有者</el-tag>
+                    <el-tag type="warning" v-else>用户</el-tag>
                   </div>
                   <span @click.stop>
                     <el-dropdown trigger="click" v-if="!isManage(item.type)">
@@ -47,9 +47,9 @@
         </div>
       </div>
       <div class="permission-setting flex" v-loading="rLoading">
-        <div class="team-manage__table p-15">
+        <div class="team-manage__table p-24">
           <h4>权限设置</h4>
-          <el-tabs v-model="activeName" class="demo-tabs">
+          <el-tabs v-model="activeName" class="team-manage__tabs">
             <el-tab-pane
               v-for="item in settingTags"
               :key="item.value"
@@ -61,7 +61,7 @@
           </el-tabs>
         </div>
 
-        <div class="team-manage__footer border-t p-15 flex">
+        <div class="team-manage__footer border-t p-16 flex">
           <el-button type="primary" @click="submitPermissions">保存</el-button>
         </div>
       </div>
@@ -154,13 +154,16 @@ function MemberPermissions(id: String) {
 }
 
 function deleteMember(row: TeamMember) {
-  MsgConfirm({
-    title: `是否移除成员：${row.username}`,
-    decription: '移除后将会取消成员拥有的数据集和应用权限。',
-    confirmButtonText: '移除',
-  }, {
-    confirmButtonClass: 'danger',
-  })
+  MsgConfirm(
+    {
+      title: `是否移除成员：${row.username}`,
+      decription: '移除后将会取消成员拥有的数据集和应用权限。',
+      confirmButtonText: '移除'
+    },
+    {
+      confirmButtonClass: 'danger'
+    }
+  )
     .then(() => {
       loading.value = true
       TeamApi.delTeamMember(row.id)
@@ -214,8 +217,10 @@ onMounted(() => {
 <style lang="scss" scoped>
 .team-manage {
   .add-user-icon {
-    margin-right: 5px;
-    font-size: 20px;
+    font-size: 17px;
+  }
+  .team-member-input {
+    padding: 0 16px;
   }
   .team-member {
     box-sizing: border-box;
@@ -223,21 +228,29 @@ onMounted(() => {
     min-width: var(--team-manage-left-width);
     .member-list {
       li {
+        padding: 11px 16px;
         &.active {
           background: var(--el-color-primary-light-9);
+          border-radius: 4px;
+          color: var(--el-color-primary);
         }
       }
     }
   }
+
   .permission-setting {
     box-sizing: border-box;
     width: calc(100% - var(--team-manage-left-width) - 5px);
     flex-direction: column;
   }
-  .team-manage__table {
+
+  &__tabs {
+    margin-top: 10px;
+  }
+  &__table {
     flex: 1;
   }
-  .team-manage__footer {
+  &__footer {
     flex: 0 0 auto;
     justify-content: right;
   }