From 6ed29643b92dff12f74f3b46aece31fa097cc531 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 13:04:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(render):=20=E6=B7=BB=E5=8A=A0=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=AD=A5=E9=AA=A4=E6=A0=B7=E5=BC=8F=E5=B9=B6?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=88=B0=E7=9F=A5=E8=AF=86=E5=BA=93=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E9=A1=B5=E9=9D=A2-=20=E6=96=B0=E5=A2=9E=20steps.scss?=
 =?UTF-8?q?=20=E6=96=87=E4=BB=B6=EF=BC=8C=E5=AE=9A=E4=B9=89=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=AD=A5=E9=AA=A4=E6=A0=B7=E5=BC=8F=20-=20?=
 =?UTF-8?q?=E5=9C=A8=20theme.scss=20=E4=B8=AD=E6=B7=BB=E5=8A=A0=E6=88=90?=
 =?UTF-8?q?=E5=8A=9F=E7=8A=B6=E6=80=81=E9=A2=9C=E8=89=B2=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?-=20=E6=9B=B4=E6=96=B0=20renderUi.scss=EF=BC=8C=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E6=96=B0=E7=9A=84=E6=AD=A5=E9=AA=A4=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=20-=20=E4=BF=AE=E6=94=B9=E7=9F=A5=E8=AF=86=E5=BA=93=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=BD=BF=E7=94=A8=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=AD=A5=E9=AA=A4=E6=A0=B7=E5=BC=8F=E5=B9=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=AD=A5=E9=AA=A4=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/renderSass/steps.scss | 93 +++++++++++++++++++++++++++
 src/assets/sass/renderSass/theme.scss |  1 +
 src/assets/sass/renderUi.scss         |  1 +
 src/views/knowledge/detail/create.vue | 23 +++++--
 4 files changed, 114 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/sass/renderSass/steps.scss

diff --git a/src/assets/sass/renderSass/steps.scss b/src/assets/sass/renderSass/steps.scss
new file mode 100644
index 0000000..41b1b36
--- /dev/null
+++ b/src/assets/sass/renderSass/steps.scss
@@ -0,0 +1,93 @@
+.render-steps {
+  &.el-steps--simple {
+    background: #fff;
+    padding: 0;
+  }
+  & .el-step__icon {
+    width: auto !important;
+    height: auto !important;
+    &.is-text {
+      border: none;
+    }
+  }
+  & .el-step {
+    background: #fff;
+    &.is-horizontal {
+      & .el-step__line {
+        background: #ebeef2;
+        top: 9px;
+        left: 45px;
+        right: 10px;
+        height: 1px;
+      }
+    }
+    &.is-simple {
+      display: flex;
+      align-items: center;
+      & .el-step__arrow {
+        &:after,
+        &:before {
+          background: unset;
+        }
+        &:before {
+          width: 100%;
+          border-top: 1px solid #ddd;
+          top: 10px;
+          right: 20px;
+          transform: scaleY(0.4);
+        }
+      }
+      & .el-step__title {
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 600;
+        font-size: 13px;
+        font-style: normal;
+      }
+    }
+
+    & .el-step__title {
+      background: #fff;
+      z-index: 9;
+      padding-right: 20px;
+    }
+    & .el-step__head,
+    & .el-step__title {
+      &.is-process {
+        color: $--color-primary;
+
+        & .is-text {
+          & .icon-text {
+            font-family: PingFangSC, PingFang SC;
+
+            font-weight: 500;
+            font-size: 10px;
+            color: #ffffff;
+            font-style: normal;
+            background: $--color-primary;
+            padding: 2px 5px;
+            border-radius: 8px;
+            border: unset;
+          }
+        }
+      }
+    }
+  }
+}
+.icon-text {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 10px;
+  font-style: normal;
+  padding: 2px 5px;
+  border-radius: 8px;
+  border: 1px solid #eee;
+}
+
+.el-step__title {
+  &.is-success {
+    color: $--color-primary-success;
+    background: #fff;
+    z-index: 8;
+    padding: 0 20px 0 0;
+  }
+}
diff --git a/src/assets/sass/renderSass/theme.scss b/src/assets/sass/renderSass/theme.scss
index 228cc21..356dd3f 100644
--- a/src/assets/sass/renderSass/theme.scss
+++ b/src/assets/sass/renderSass/theme.scss
@@ -12,6 +12,7 @@ $--color-primary-table-button-hover: #e3e5f1;
 $--color-primary-label: #70778d;
 $--color-primary-button-color: #4f47f5;
 $--color-primary-button-background: #4f47f51a;
+$--color-primary-success: #02a838;
 
 :root {
   --swiper-theme-color: #4f47f5ff;
diff --git a/src/assets/sass/renderUi.scss b/src/assets/sass/renderUi.scss
index d4dfee8..c0a8aa9 100644
--- a/src/assets/sass/renderUi.scss
+++ b/src/assets/sass/renderUi.scss
@@ -6,6 +6,7 @@
 @import 'renderSass/label';
 @import 'renderSass/radio';
 @import 'renderSass/drawer';
+@import 'renderSass/steps';
 
 html,
 body,
diff --git a/src/views/knowledge/detail/create.vue b/src/views/knowledge/detail/create.vue
index e7584bc..613cabe 100644
--- a/src/views/knowledge/detail/create.vue
+++ b/src/views/knowledge/detail/create.vue
@@ -5,10 +5,25 @@
         <h3>创建知识库</h3>
       </div>
       <div class="card-body">
-        <el-steps :active="active" simple finish-status="success">
-          <el-step title="文件上传/预处理"></el-step>
-          <el-step title="拆分配置"></el-step>
-          <el-step title="题词配置"></el-step>
+        <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">