From f6154f7147c41c19272ef3c1a5ad7742ae8a10bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Thu, 24 Apr 2025 15:14:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(knowledge):=20=E4=BC=98=E5=8C=96=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E5=BA=93=E5=88=9B=E5=BB=BA=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-调整步骤条样式，增加图标和文本样式
- 优化上传区域样式，添加自定义提示文本
- 调整按钮布局和样式，增加"取消"按钮
- 统一表单项样式
- 优化对话框样式
---
 src/assets/images/konwledge/magic.png         | Bin 0 -> 574 bytes
 src/assets/images/konwledge/upload.png        | Bin 0 -> 1159 bytes
 src/assets/sass/common.scss                   |   3 +-
 src/assets/sass/renderSass/dialog.scss        |   2 +-
 src/assets/sass/renderSass/label.scss         |   3 +
 src/assets/sass/renderSass/steps.scss         |   6 +-
 .../detail/components/preprocessing.vue       |  36 ++++-
 src/views/knowledge/detail/create.vue         | 143 +++++++++++-------
 8 files changed, 132 insertions(+), 61 deletions(-)
 create mode 100644 src/assets/images/konwledge/magic.png
 create mode 100644 src/assets/images/konwledge/upload.png

diff --git a/src/assets/images/konwledge/magic.png b/src/assets/images/konwledge/magic.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3e3b1376df965ba2a42e28d2e56603c5abdde27
GIT binary patch
literal 574
zcmV-E0>S->P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px$_(?=TR7gv;l|4vTQ5eR5PYDr0ON(U@kwZg>S=bUmEkP0GCb|@4i1e|vM7RjG
zwnPzqKoC?@5S0$PIH?gqwFwb~lZ#SB1oifR;}x#gd+xp3zXNx;_nh<m&UxOCD=LPW
zT>>rxoszy*t<TS^Y=fDt13m*gfI&%jn+-S)yb95`k`6Q*@Ekau5$%%nZZ(jkMP}9t
zd;wZAf_EehH4AVRxRDcE1hz@~UKg_B266JUz%a0}Kxh)U4vb6sT?P6Jh-^6q3;-u{
zwxl#XyB_)@X)d)$k>^(;6{`+ZH2(`2^;(hiX+<5FnSb217UkTYGm;(^0X74DVNcg8
zLEnI<z&%MbMSGV8+06C@s2^}}YP@k#;E5!MBu8N#nAs-aHE_6K=P5}q>fW@h&^)Wg
zazZnb4%QX-b!7l=be;e^GlBz>?iT^f>}Vq%dnDb?&R2C)FSe1`;9hS{d2VJCKu04s
zZIXU2L8<`Tqg}6$OgW!8{cd139O;$xtQH`u{3URr5%g|Jo;}NknYsAQ=m0+V5jZDl
zx-<q$Dj{$vUqs>gHQ-1hmLD8kYEfCXn3=b2kI$CGx*v`9^I*+@ux|s<1Ncq$253IO
zk0mYq6Ch)w*Tz)5UzBvKc9829m6^Q<+T(|`@IL_lliDxoLiSL90I|cK2xYvMxBvhE
M07*qoM6N<$f+)}QL;wH)

literal 0
HcmV?d00001

diff --git a/src/assets/images/konwledge/upload.png b/src/assets/images/konwledge/upload.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8f53df6ca36a3cca0773e9ce453e7cf0aaa5a1b
GIT binary patch
literal 1159
zcmV;21bF+2P)<h;3K|Lk000e1NJLTq001%o002A)1^@s6BsJ;500001b5ch_0Itp)
z=>Px(K}keGRA@u(nrp~SSs2HEh8YsmluJTBk(ddI(1^xmCXzHV&86HgA(z}s<AY3M
z+>%iEzz0K^nVRCmd>DKnNt63EO^wSS6ca`a>#x1EEc=|Z_c?p-vtON6Z>M+fwbp)q
zYdw3dXZ`n6kGIRmz(nA4pdHX8q)t+oo&nc^lfX~FUO?AkmwHZ%4}dkmRN%eXJtfmX
zK;wWv<92631aSZu5VwOA>OTa&Fn>qm^ld>l0Mp|%Ou6oTpa*a@>T?95cjA=iPS=11
zz(L?<)Xrkodjd2p(nfC92Y4K%UxBOzW;>My(G|ECrGpCU_#i(3i@pAK0Ar#&Lm+2?
z&Q9fTgB2u7`%3EgAdLVS{*~A1G+<My2MI(km%GHaPSKrQd%{582ab6I`xNLGTrbEY
zkQd%vcS$Za5S82y1NqN*Lr35^(A0DH?q)%{Q|N(t1d**@0{c9p{{RL9&%<Ey3L;xq
z1S_X&_e!&hEv#!G^?~1k&pg9N0zdmOd7cs3+7dVcv~>*E;?xtk=)&Y3M7H)evvLSf
z7-h>j6H@g8{<RmX38EcadxtHJi|pbGWH);5v>W(34<HKPwP)G#sX00vDYBk#H?h}f
z@BW-1GNGC?@(VD+G3+n1w0;lhH>@Zw+YGdKZfdhsICY_#Aew>037ma?1BO=<L<74T
zkb6{8{s)>>8>9iS2v`Cr&MLR`tu}}?T+z3}^-s)k`@<46-9mJP$$0^ZGZTupW&*>U
zM)T_;i0uE-Y=-k{AaUkD<+_>Ah*qQtfw-YC<90%TnS%JDhO`0cW=X(g2I525iAV}2
z6Ocj>Ny4NKQVJp|m{dWcLL>o`8b}z#125e8$Asanyj82*cP15(FbL^S%Y)Ap*7je6
z<Lb}^U=jzJ1+4Q76U0EEgQrbN`H&o|Umr&5q6BMSEG)F`Bn~3AzQ6M{3voI`WD|g-
z9G&#SV5F4j_#34p4ze^jp6cN)g#P!{LJOjMKFnpHQy~>Gge-9oiD)`U=v(796OR1t
zJhT{ys_9TQK3D*@#1zgG2Px(Tr9h&%P-gE)4WyFk$ogPabFB!oReRYZ4ANUw-Wk`D
zTq8NtmR;tX#y91RNERDnF}qrr*y@sr#XbrujRmBrCs8teM`W-9$5AH6Qtai<PNguJ
zgH&p8E_U{`Ak=SdM$#PJa{7K}W@MGgp_%K9z$-OgB7vLt(FV9t&M;-zW~a9&O%ceM
zAo<MN@g1Owc`f>~btO2=SsRChC7$WrtS_Z^b4s$zOHfmmQFDRlvzJl<b!@douBGG^
zi3@pfGbI*u0i@czP7(-=-D*UONj5iYy_ta-Ih}!GX31*=c*BCo@Ad<O>JZGMKp#_{
z%B#!=TLhzJO=+{Po8^)1JfKDCb)s`v+Mo0#rIhRIsbn5^X|5KO(#&rKhVKcIN8iY#
ZdkI2E9>K6+1fBo@002ovPDHLkV1k$T7j6Im

literal 0
HcmV?d00001

diff --git a/src/assets/sass/common.scss b/src/assets/sass/common.scss
index da021af..2ed84a3 100644
--- a/src/assets/sass/common.scss
+++ b/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 {
diff --git a/src/assets/sass/renderSass/dialog.scss b/src/assets/sass/renderSass/dialog.scss
index 77510f9..51b2e25 100644
--- a/src/assets/sass/renderSass/dialog.scss
+++ b/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;
diff --git a/src/assets/sass/renderSass/label.scss b/src/assets/sass/renderSass/label.scss
index cade089..7f54a6a 100644
--- a/src/assets/sass/renderSass/label.scss
+++ b/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;
diff --git a/src/assets/sass/renderSass/steps.scss b/src/assets/sass/renderSass/steps.scss
index 41b1b36..4f24efe 100644
--- a/src/assets/sass/renderSass/steps.scss
+++ b/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 {
diff --git a/src/views/knowledge/detail/components/preprocessing.vue b/src/views/knowledge/detail/components/preprocessing.vue
index 341a622..41ad78e 100644
--- a/src/views/knowledge/detail/components/preprocessing.vue
+++ b/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 {
diff --git a/src/views/knowledge/detail/create.vue b/src/views/knowledge/detail/create.vue
index 613cabe..73c9e12 100644
--- a/src/views/knowledge/detail/create.vue
+++ b/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;