feat: 新建知识库样式

ui/src/layout/components/top-bar/avatar/ResetPasssword.vue

@@ -6,7 +6,7 @@
       :model="resetPasswordForm"
       :rules="rules"
     >
-      <p class="mb-8">新密码</p>
+      <p class="mb-8 lighter">新密码</p>
       <el-form-item prop="password" style="margin-bottom: 8px">
         <el-input
           type="password"
@@ -27,7 +27,7 @@
         >
         </el-input>
       </el-form-item>
-      <p class="mb-8">使用邮箱</p>
+      <p class="mb-8 lighter">使用邮箱</p>
       <el-form-item style="margin-bottom: 8px">
         <el-input
           class="input-item"

ui/src/layout/components/top-bar/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="top-bar-container border-b flex-between">
     <div class="flex-center h-full">
+      <a href="/">
         <div class="app-title-container flex-center">
           <div class="app-title-icon"></div>
           <div class="app-title-text app-logo-font ml-4">
             {{ defaultTitle }}
           </div>
         </div>
+      </a>
       <TopMenu></TopMenu>
     </div>
     <div class="avatar">

ui/src/styles/element-plus.scss

@@ -4,11 +4,12 @@
   --el-menu-item-height: 45px;
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   --el-border-color: #dee0e3;
+  --el-text-color-regular: #1f2329;
 }
 
 .el-button {
+  --el-button-font-weight: 400;
   padding: 5px 12px;
-
   &.is-text {
     padding: 4px !important;
     font-size: 16px;
@@ -46,6 +47,9 @@
     }
   }
 }
+.el-form-item__label {
+  font-weight: 400;
+}
 .el-form-item__error {
   position: unset;
   font-size: 14px;
@@ -56,11 +60,12 @@
   --el-dialog-padding-primary: 24px;
   --el-dialog-content-font-size: 14px;
   .dialog-sub-title {
-    color: var(--el-text-color-regular);
+    color: var(--app-text-color);
     margin: 5px 0;
   }
   .el-dialog__body {
     padding: 16px var(--el-dialog-padding-primary) 8px !important;
+    color: var(--app-text-color);
   }
 }
 .el-dialog__header {
@@ -206,12 +211,22 @@
     background-color: var(--el-fill-color-blank);
   }
 }
+.el-textarea {
+  --el-input-placeholder-color: var(--app-input-color-placeholder);
+}
 .el-textarea__inner {
   font-size: 14px;
 }
+.el-input {
+  --el-input-icon-color: var(--app-text-color-secondary);
+  --el-input-placeholder-color: var(--app-input-color-placeholder);
+}
 
 .el-input__inner {
   font-size: 14px;
+  // &::placeholder {
+  //   color: #8f959e;
+  // }
 }
 
 .el-input__wrapper {
@@ -224,6 +239,11 @@
   }
 }
 
+.el-select__placeholder.is-transparent {
+  color: var(--app-input-color-placeholder);
+  font-weight: 400;
+}
+
 .el-select-group .el-select-dropdown__item {
   padding-left: 11px;
 }

ui/src/styles/variables.scss

@@ -5,6 +5,7 @@
   --app-text-color-light-1: rgba(31, 35, 41, 0.1);
   --app-text-color-secondary: #646a73;
   --app-text-color-disable: #bbbfc4;
+  --app-input-color-placeholder: #8f959e;
   --app-view-padding: 24px;
   --app-view-bg-color: #ffffff;
   --app-border-color-dark: #bbbfc4;
@@ -25,10 +26,10 @@
   /** tag */
   --tag-deflaut-bg: rgba(51, 112, 255, 0.2);
   --tag-deflaut-color: #2b5fd9;
-  --tag-success-bg: rgba(52, 199, 36, 0.20);
+  --tag-success-bg: rgba(52, 199, 36, 0.2);
-  --tag-success-color: #2CA91F;
+  --tag-success-color: #2ca91f;
-  --tag-warning-bg: rgba(255, 136, 0, 0.20);
+  --tag-warning-bg: rgba(255, 136, 0, 0.2);
-  --tag-warning-color: #D97400;
+  --tag-warning-color: #d97400;
 
   /** card */
   --card-width: 330px;
@@ -42,5 +43,10 @@
   --create-dataset-height: calc(var(--app-main-height) - 70px);
 
   /** ai-chat */
-  --dialog-bg-gradient-color: linear-gradient(188deg, rgba(235, 241, 255, 0.20) 39.6%, rgba(231, 249, 255, 0.20) 94.3%), #EFF0F1;
+  --dialog-bg-gradient-color: linear-gradient(
+      188deg,
+      rgba(235, 241, 255, 0.2) 39.6%,
+      rgba(231, 249, 255, 0.2) 94.3%
+    ),
+    #eff0f1;
 }

ui/src/views/dataset/DatasetSetting.vue

@@ -15,18 +15,22 @@
             <el-form-item label="知识库类型" required>
               <el-card shadow="never" class="mb-8" v-if="detail.type === '0'">
                 <div class="flex align-center">
-                  <el-icon size="32" class="mr-8 info"><Document /></el-icon>
+                  <AppAvatar class="mr-8" shape="square" :size="32">
+                    <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
                   <div>
-                    <p>通用型</p>
+                    <div>通用型</div>
                     <el-text type="info">可以通过上传文件或手动录入方式构建知识库</el-text>
                   </div>
                 </div>
               </el-card>
               <el-card shadow="never" class="mb-8" v-if="detail?.type === '1'">
                 <div class="flex align-center">
-                  <el-icon size="32" class="mr-8 info"><Monitor /></el-icon>
+                  <AppAvatar class="mr-8 avatar-purple" shape="square" :size="32">
+                    <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                  </AppAvatar>
                   <div>
-                    <p>Web 站点</p>
+                    <div>Web 站点</div>
                     <el-text type="info"> 通过网站链接同步方式构建知识库 </el-text>
                   </div>
                 </div>

ui/src/views/dataset/step/StepFirst.vue

@@ -18,7 +18,9 @@
                 <el-card shadow="never" class="mb-16" :class="form.type === '0' ? 'active' : ''">
                   <el-radio label="0" size="large">
                     <div class="flex align-center">
-                      <el-icon size="32" class="mr-8 info"><Document /></el-icon>
+                      <AppAvatar class="mr-8" shape="square" :size="32">
+                        <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
                       <div>
                         <p class="mb-4">通用型</p>
                         <el-text type="info">可以通过上传文件或手动录入方式构建知识库</el-text>
@@ -31,7 +33,9 @@
                 <el-card shadow="never" class="mb-16" :class="form.type === '1' ? 'active' : ''">
                   <el-radio label="1" size="large">
                     <div class="flex align-center">
-                      <el-icon size="32" class="mr-8 info"><Monitor /></el-icon>
+                      <AppAvatar class="mr-8 avatar-purple" shape="square" :size="32">
+                        <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                      </AppAvatar>
                       <div>
                         <p class="mb-4">Web 站点</p>
                         <el-text type="info">通过网站链接同步方式构建知识库 </el-text>