feat: 知识库管理样式

ui/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
-    "element-plus": "^2.5.3",
+    "element-plus": "^2.5.6",
     "install": "^0.13.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.2",

ui/src/components/app-table/index.vue

@@ -15,7 +15,7 @@
           <el-button @click="showInput = false" :disabled="loading">取消</el-button>
         </div>
         <div v-else @click="quickCreateHandel" class="w-full">
-          <el-button type="primary" link>
+          <el-button type="primary" link class="quich-button">
             <el-icon><Plus /></el-icon>
             <span class="ml-4">快速创建空白文档</span>
           </el-button>
@@ -111,5 +111,10 @@ onMounted(() => {
     display: flex;
     justify-content: flex-end;
   }
+  .quich-button {
+    &:hover {
+      color: var(--el-button-text-color);
+    }
+  }
 }
 </style>

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

@@ -1,12 +1,12 @@
 <template>
   <el-dialog v-model="resetPasswordDialog" title="修改密码">
     <el-form
-      class="reset-password-form"
+      class="reset-password-form mb-24"
       ref="resetPasswordFormRef"
       :model="resetPasswordForm"
       :rules="rules"
     >
-      <p class="mb-8 lighter">新密码</p>
+      <p class="mt-16 mb-8 lighter">新密码</p>
       <el-form-item prop="password" style="margin-bottom: 8px">
         <el-input
           type="password"
@@ -48,10 +48,10 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
         <el-button @click="resetPasswordDialog = false"> 取消 </el-button>
         <el-button type="primary" @click="resetPassword"> 保存 </el-button>
-      </span>
+      </div>
     </template>
   </el-dialog>
 </template>

ui/src/styles/element-plus.scss

@@ -64,7 +64,6 @@
     margin: 5px 0;
   }
   .el-dialog__body {
-    padding: 16px var(--el-dialog-padding-primary) 8px !important;
     color: var(--app-text-color);
   }
 }

ui/src/views/dataset/CreateDataset.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
     <div class="create-dataset__footer text-right border-t" v-if="active !== 2">
-      <el-button @click="router.go(-1)" :disabled="loading">取 消</el-button>
+      <el-button @click="router.go(-1)" :disabled="loading">取消</el-button>
       <el-button @click="prev" v-if="active === 1" :disabled="loading">上一步</el-button>
       <el-button @click="next" type="primary" v-if="active === 0" :disabled="loading">
         创建并导入

ui/src/views/dataset/component/ParagraphPreview.vue

@@ -25,7 +25,7 @@
                 <div>
                   <!-- 编辑分段按钮 -->
                   <el-button link @click="editHandle(child, index, cIndex)">
-                    <el-icon><Edit /></el-icon>
+                    <el-icon><EditPen /></el-icon>
                   </el-button>
                   <!-- 删除分段按钮  -->
                   <el-button link @click="deleteHandle(child, index, cIndex)">
@@ -138,6 +138,6 @@ onMounted(() => {})
   }
 }
 .paragraph-list {
-  height: calc(var(--create-dataset-height) - 95px);
+  height: calc(var(--create-dataset-height) - 131px);
 }
 </style>

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

@@ -201,6 +201,9 @@ defineExpose({
       position: absolute;
       top: 16px;
     }
+    :deep(.el-radio__input.is-checked + .el-radio__label) {
+      color: var(--app-text-color);
+    }
     .active {
       border: 1px solid var(--el-color-primary);
     }

ui/src/views/paragraph/component/ParagraphDialog.vue

@@ -8,8 +8,8 @@
   >
     <el-row v-loading="loading">
       <el-col :span="16">
-        <el-scrollbar>
-          <div class="p-24" style="height: 350px">
+        <el-scrollbar height="370" wrap-class="paragraph-scrollbar">
+          <div class="p-24" style="padding-bottom: 8px;">
             <div class="flex-between mb-16">
               <div class="bold title align-center">分段内容</div>
               <el-button text @click="isEdit = true" v-if="problemId && !isEdit">
@@ -19,14 +19,13 @@
 
             <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="isEdit" />
           </div>
-
-          <div class="text-right p-24 pt-0" v-if="problemId && isEdit">
-            <el-button @click.prevent="isEdit = false"> 取消 </el-button>
-            <el-button type="primary" :disabled="loading" @click="submitHandle"> 保存 </el-button>
-          </div>
         </el-scrollbar>
+        <div class="text-right p-24 pt-0" v-if="problemId && isEdit">
+          <el-button @click.prevent="isEdit = false"> 取消 </el-button>
+          <el-button type="primary" :disabled="loading" @click="submitHandle"> 保存 </el-button>
+        </div>
       </el-col>
-      <el-col :span="8" class="border-l p-24">
+      <el-col :span="8" class="border-l">
         <!-- 关联问题 -->
         <ProblemComponent
           :problemId="problemId"
@@ -134,17 +133,23 @@ defineExpose({ open })
 </script>
 <style lang="scss" scope>
 .paragraph-dialog {
+  padding: 0 !important;
+  .el-scrollbar {
+    height: auto !important;
+  }
   .el-dialog__header {
-    padding-bottom: 16px;
+    padding: 16px 24px;
   }
   .el-dialog__body {
     border-top: 1px solid var(--el-border-color);
-    padding: 0 !important;
   }
   .el-dialog__footer {
     padding-top: 16px;
     border-top: 1px solid var(--el-border-color);
   }
+  .el-dialog__headerbtn {
+    top: 6px;
+  }
   .title {
     color: var(--app-text-color);
   }

ui/src/views/paragraph/component/ProblemComponent.vue

@@ -1,33 +1,38 @@
 <template>
-  <p class="bold title mb-16">
-    关联问题 <el-divider direction="vertical" />
-    <el-button text @click="addProblem">
-      <el-icon><Plus /></el-icon>
-    </el-button>
+  <p class="bold title p-24" style="padding-bottom: 0">
+    <span class="flex align-center">
+      <span>关联问题</span>
+      <el-divider direction="vertical" class="mr-4"/>
+      <el-button text @click="addProblem">
+        <el-icon><Plus /></el-icon>
+      </el-button>
+    </span>
   </p>
-  <div v-loading="loading" style="height: 350px">
-    <el-scrollbar>
-      <el-input
-        ref="inputRef"
-        v-if="isAddProblem"
-        v-model="problemValue"
-        @change="addProblemHandle"
-        placeholder="请输入问题，回车保存"
-        class="mb-8"
-        autofocus
-      />
+  <div v-loading="loading">
+    <el-scrollbar height="359px">
+      <div class="p-24" style="padding-top: 16px">
+        <el-input
+          ref="inputRef"
+          v-if="isAddProblem"
+          v-model="problemValue"
+          @change="addProblemHandle"
+          placeholder="请输入问题，回车保存"
+          class="mb-8"
+          autofocus
+        />
 
-      <template v-for="(item, index) in problemList" :key="index">
-        <TagEllipsis
-          @close="delProblemHandle(item, index)"
-          class="question-tag"
-          type="info"
-          effect="plain"
-          closable
-        >
-          {{ item.content }}
-        </TagEllipsis>
-      </template>
+        <template v-for="(item, index) in problemList" :key="index">
+          <TagEllipsis
+            @close="delProblemHandle(item, index)"
+            class="question-tag"
+            type="info"
+            effect="plain"
+            closable
+          >
+            {{ item.content }}
+          </TagEllipsis>
+        </template>
+      </div>
     </el-scrollbar>
   </div>
 </template>

ui/src/views/paragraph/index.vue

@@ -13,7 +13,7 @@
     </template>
     <div
       class="document-detail__main p-16"
-      v-loading="paginationConfig.current_page === 1 && loading"
+      v-loading="(paginationConfig.current_page === 1 && loading) || changeStateloading"
     >
       <div class="flex-between p-8">
         <span>{{ paginationConfig.total }} 段落</span>
@@ -110,6 +110,7 @@ const {
 
 const ParagraphDialogRef = ref()
 const loading = ref(false)
+const changeStateloading = ref(false)
 const documentDetail = ref<any>({})
 const paragraphDetail = ref<any[]>([])
 const title = ref('')
@@ -132,8 +133,7 @@ function changeState(bool: Boolean, row: any) {
   const obj = {
     is_active: bool
   }
-  loading.value = true
-  paragraph.asyncPutParagraph(id, documentId, row.id, obj, loading).then((res) => {})
+  paragraph.asyncPutParagraph(id, documentId, row.id, obj, changeStateloading).then((res) => {})
 }
 
 function deleteParagraph(row: any) {