feat: 更新主题样式

2025-12-25 17:22:55 +00:00 · 2023-11-02 18:25:09 +08:00 · 2023-11-02 18:25:09 +08:00 · 3aee99183a
parent 34aad04edd
commit 3aee99183a
32 changed files with 262 additions and 130 deletions
--- 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 = '智能知识库'
+VITE_APP_TITLE = 'MaxKB'
--- a/ui/src/assets/user-icon.svg
+++ 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>
--- 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>
--- 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>
--- 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>
--- 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'
            })
          ]
--- 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');
--- 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>
--- 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>
--- 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>
--- 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;
--- 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>
--- 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">
--- 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 {
--- 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>
--- 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>
--- 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>
--- 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);
+}
--- 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 {
--- 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;
 }
--- 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;
--- 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>
--- 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
--- 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
--- 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>
--- 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>
--- 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')"
--- 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
--- 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')"
--- 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')"
--- 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) => {
--- 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;
  }