feat(knowledge): 优化知识库创建页面样式和布局

-调整步骤条样式，增加图标和文本样式
- 优化上传区域样式，添加自定义提示文本
- 调整按钮布局和样式，增加"取消"按钮
- 统一表单项样式
- 优化对话框样式

src/assets/sass/common.scss

@@ -17,7 +17,8 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
 }
 
 label {

src/assets/sass/renderSass/dialog.scss

@@ -23,7 +23,7 @@
   .el-dialog__body {
     padding: 15px;
     .render-dialog-body {
-      max-height: 50vh;
+      max-height: 70vh;
       overflow-y: scroll;
       &::-webkit-scrollbar {
         width: 0;

src/assets/sass/renderSass/label.scss

@@ -14,6 +14,9 @@
   }
 }
 
+.el-form-item__label {
+  color: $--color-primary-label;
+}
 //.top-label {
 //  & .el-form-item__label {
 //    float: none;

src/assets/sass/renderSass/steps.scss

@@ -48,7 +48,10 @@
     & .el-step__title {
       background: #fff;
       z-index: 9;
-      padding-right: 20px;
+      padding: 0 20px 0 10px;
+    }
+    & .el-step__head {
+      padding-right: 0px;
     }
     & .el-step__head,
     & .el-step__title {
@@ -81,6 +84,7 @@
   padding: 2px 5px;
   border-radius: 8px;
   border: 1px solid #eee;
+  background: #fff;
 }
 
 .el-step__title {

src/views/knowledge/detail/components/preprocessing.vue

@@ -22,9 +22,15 @@
           :class="{ 'drag-over': isDragOver }"
         >
           <el-empty v-if="!filed">
+            <template #image>
+              <img :src="uloadPng" alt="" style='width: 50px;height: 50px;'></img>
+            </template>
             <template #description>
-              <p>点击或将文件拖拽到这里上传</p>
-              <p>支持扩展名：.xlsx .doc .docx .pdf .txt...</p>
+              <div class='flex flex-direction-c'>
+                <span class='upload-tip'>点击或将文件拖拽到这里上传</span>
+                <span class='upload-tip-field'>支持扩展名：.xlsx.doc.pdf.txt.docx</span>
+              </div>
+
             </template>
           </el-empty>
           <el-result
@@ -84,11 +90,12 @@
 <script>
 import { uploadFileByCustom, uploadFileByTemplate } from '@/api/generatedApi'
 import { downloadKnowledgeTemplate } from '@/api/knowledge/task-page'
-
+import uloadPng from '@/assets/images/konwledge/upload.png'
 export default {
   name: 'preprocessing',
   data() {
     return {
+      uloadPng,
       filed: null,
       uploadLoading: false,
       headers: {},
@@ -231,17 +238,32 @@ export default {
 </script>
 <style scoped lang="scss">
 @import '@/assets/sass/renderSass/theme.scss';
-.inline {
+.flex-direction-c{
+  flex-direction: column;
+  line-height: 20px;
+}
+.upload-tip{
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #5F5E68;
+  font-style: normal;
+}
+.upload-tip-field{
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 13px;
+  color: #B1B5C7;
+  font-style: normal;
 }
-
 .upload-demo {
   //dashed 间隔大一点
   border-radius: 6px;
   border-style: dashed;
   border-width: 1px;
   border-color: #d9d9d9;
-  height: 330px;
-  width: 50%;
+  //height: 130px;
+  //width: 50%;
   text-align: center;
 
   &:hover {

src/views/knowledge/detail/create.vue

@@ -1,60 +1,99 @@
 <template>
   <div class="render-container create-container">
-    <el-card shadow="hover">
-      <div slot="header" class="clearfix">
-        <h3>创建知识库</h3>
-      </div>
-      <div class="card-body">
-        <el-steps :active="active" simple finish-status="success" class="render-steps">
-          <el-step title="文件上传/预处理">
-            <template slot="icon">
-              <div class="icon-text" v-if="active === 0">STEP1</div>
-              <div class="icon-text" v-else>1</div>
-            </template>
-          </el-step>
-          <el-step title="拆分配置">
-            <template slot="icon">
-              <div class="icon-text" v-if="active === 1">STEP2</div>
-              <div class="icon-text" v-else>2</div>
-            </template>
-          </el-step>
-          <el-step title="题词配置">
-            <template slot="icon">
-              <div class="icon-text" v-if="active === 2">STEP3</div>
-              <div class="icon-text" v-else>3</div>
-            </template>
-          </el-step>
-        </el-steps>
+    <div slot="header" class="clearfix">
+      <h3>创建知识库</h3>
+    </div>
+    <div class="card-body mt20">
+      <el-steps
+        :active="active"
+        simple
+        finish-status="success"
+        class="render-steps"
+      >
+        <el-step title="文件上传/预处理">
+          <template slot="icon">
+            <div class="icon-text" v-if="active === 0">STEP1</div>
+            <div class="icon-text" v-else>1</div>
+          </template>
+        </el-step>
+        <el-step title="拆分配置">
+          <template slot="icon">
+            <div class="icon-text" v-if="active === 1">STEP2</div>
+            <div class="icon-text" v-else>2</div>
+          </template>
+        </el-step>
+        <el-step title="题词配置">
+          <template slot="icon">
+            <div class="icon-text" v-if="active === 2">STEP3</div>
+            <div class="icon-text" v-else>3</div>
+          </template>
+        </el-step>
+      </el-steps>
 
-        <div class="components">
-          <transition name="slide" appear mode="out-in">
-            <step-preprocessing ref="stepPreProcessing" v-if="active === 0" @getForm="getForm" @getDocumentId="getDocumentId"></step-preprocessing>
-            <step-split-config
-              ref="splitConfig"
-              v-if="active === 1"
-              @previewConfirmed="handlePreviewConfirm"
-              @handleReUpload="handleReUpload"
-              :documentId="documentId"
-            ></step-split-config>
-            <step-words ref="words" v-if="active === 2"></step-words>
-          </transition>
-        </div>
+      <div class="components">
+        <transition name="slide" appear mode="out-in">
+          <step-preprocessing
+            ref="stepPreProcessing"
+            v-if="active === 0"
+            @getForm="getForm"
+            @getDocumentId="getDocumentId"
+          ></step-preprocessing>
+          <step-split-config
+            ref="splitConfig"
+            v-if="active === 1"
+            @previewConfirmed="handlePreviewConfirm"
+            @handleReUpload="handleReUpload"
+            :documentId="documentId"
+          ></step-split-config>
+          <step-words ref="words" v-if="active === 2"></step-words>
+        </transition>
       </div>
-      <div class="card-bottom">
-        <el-button v-if="active === 0" type="primary" size="medium" @click="fetchApi">
-          一键处理
-        </el-button>
-        <el-button size="medium" @click="active--" v-if="active > 1">上一步</el-button>
-        <el-button type="primary" size="medium" @click="nextStep" v-if="active < 2">下一步</el-button>
-        <el-button type="primary" size="medium" @click="nextStep" v-if="active === 2">确定</el-button>
-        <el-button type="primary" size="medium" @click="$router.history.go(-1)">取消</el-button>
-      </div>
-    </el-card>
+    </div>
+    <div class="card-bottom text-right">
+      <el-button size="medium" @click="$router.history.go(-1)">取消</el-button>
+      <el-button size="medium" @click="active--" v-if="active > 1"
+        >上一步</el-button
+      >
+      <el-button
+        type="primary"
+        size="medium"
+        @click="nextStep"
+        v-if="active < 2"
+        >下一步</el-button
+      >
+      <el-button
+        type="primary"
+        size="medium"
+        @click="nextStep"
+        v-if="active === 2"
+        >确定</el-button
+      >
+      <el-button
+        v-if="active === 0"
+        type="primary"
+        size="medium"
+        class="line-button"
+        @click="fetchApi"
+      >
+        <img :src="magic" alt="" style="width: 12px;" />
+        一键处理
+      </el-button>
+    </div>
 
     <!-- 添加预处理结果预览对话框 -->
-    <el-drawer :visible.sync="visible" size="80%" title="预处理结果预览" :wrapperClosable="false" :destroy-on-close="true">
+    <el-drawer
+      :visible.sync="visible"
+      size="80%"
+      title="预处理结果预览"
+      :wrapperClosable="false"
+      :destroy-on-close="true"
+    >
       <div style="height:calc(100% - 55px);">
-        <r-miner-u :documentId="documentId" @saveMarkDown="saveMarkDown" :visible="visible"></r-miner-u>
+        <r-miner-u
+          :documentId="documentId"
+          @saveMarkDown="saveMarkDown"
+          :visible="visible"
+        ></r-miner-u>
       </div>
     </el-drawer>
   </div>
@@ -63,11 +102,13 @@
 import StepPreprocessing from './components/preprocessing.vue'
 import SplitConfig from '@/views/knowledge/detail/components/split/Index.vue'
 import Words from '@/views/knowledge/detail/components/words/Index.vue'
+import magic from '@/assets/images/konwledge/magic.png'
 // import StepC
 export default {
   name: 'create',
   data() {
     return {
+      magic,
       visible: false,
       active: 0,
       documentId: '1364315544778543104'
@@ -142,7 +183,7 @@ export default {
 
   &::after {
     content: '';
-    border-top: 1px solid #ebeef5;
+    //border-top: 1px solid #ebeef5;
     position: absolute;
     top: 0;
     left: 0;