YG-Soft/YG_FT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 评测创建步骤导航条结构优化

Browse Source 
步骤连接符独立为单独元素并随完成状态高亮，修复窄屏连接线显示。
This commit is contained in:
caoxiaozhu
2026-07-13 17:12:49 +08:00
parent 8c1a0d785c
commit 42f2efb449
1 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/views/eval/EvalCreateView.vue
View File

@@ -194,28 +194,32 @@ onMounted(loadData)
<main v-loading="loading" class="wizard-main"> <main v-loading="loading" class="wizard-main">
<div class="wizard-steps-container" aria-label="评测任务创建步骤"> <div class="wizard-steps-container" aria-label="评测任务创建步骤">
<div class="custom-wizard-steps"> <div class="custom-wizard-steps">
<div <template v-for="(step, index) in WIZARD_STEPS" :key="step.title">
v-for="(step, index) in WIZARD_STEPS" <div
:key="step.title" v-if="index !== 0"
class="step-item" class="step-connector"
:class="{ :class="{ 'is-active': currentStep >= index }"
'is-active': currentStep === index, ></div>
'is-completed': currentStep > index, <div
}" class="step-item"
:aria-current="currentStep === index ? 'step' : undefined" :class="{
> 'is-active': currentStep === index,
<div v-if="index !== 0" class="step-connector"></div> 'is-completed': currentStep > index,
<div class="step-node"> }"
<div class="step-icon" aria-hidden="true"> :aria-current="currentStep === index ? 'step' : undefined"
<i v-if="currentStep > index" class="fa fa-check" /> >
<span v-else>{{ index + 1 }}</span> <div class="step-node">
</div> <div class="step-icon" aria-hidden="true">
<div class="step-text"> <i v-if="currentStep > index" class="fa fa-check" />
<div class="step-title">{{ step.title }}</div> <span v-else>{{ index + 1 }}</span>
<div class="step-description">{{ step.description }}</div> </div>
<div class="step-text">
<div class="step-title">{{ step.title }}</div>
<div class="step-description">{{ step.description }}</div>
</div>
</div> </div>
</div> </div>
</div> </template>
</div> </div>
</div> </div>
@@ -308,14 +312,10 @@ onMounted(loadData)
.step-item { .step-item {
display: flex; display: flex;
flex: 1; flex: none;
align-items: center; align-items: center;
} }
.step-item:first-child {
flex: 0;
}
.step-connector { .step-connector {
flex: 1; flex: 1;
height: 2px; height: 2px;
@@ -324,8 +324,7 @@ onMounted(loadData)
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
.step-item.is-active .step-connector, .step-connector.is-active {
.step-item.is-completed .step-connector {
background: #5146e5; background: #5146e5;
} }