feat(render): 添加自定义步骤样式并应用到知识库创建页面- 新增 steps.scss 文件,定义自定义步骤样式

- 在 theme.scss 中添加成功状态颜色变量- 更新 renderUi.scss,引入新的步骤样式
- 修改知识库创建页面,使用自定义步骤样式并添加步骤图标
This commit is contained in:
陈昱达
2025-04-24 13:04:02 +08:00
parent 4ee2c0c5de
commit 6ed29643b9
4 changed files with 114 additions and 4 deletions

View File

@@ -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;
}
}

View File

@@ -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;

View File

@@ -6,6 +6,7 @@
@import 'renderSass/label';
@import 'renderSass/radio';
@import 'renderSass/drawer';
@import 'renderSass/steps';
html,
body,

View File

@@ -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">