定制StepView设计需求：实现周报追踪的步骤视图设计

嘿，我来帮你搞定这个周报追踪的StepView！这类步骤视图用来跟踪周报的草稿撰写、提交审核、主管审批、归档完成这类流程超实用，我给你整理了一套完整的实现方案，从结构到样式再到动态交互都有，你可以直接参考：

一、核心需求梳理 #

首先得明确这个StepView要承载的周报流程节点，通常这类视图需要区分三种状态：

• 已完成：节点和对应分隔线高亮显示
• 当前进行中：节点放大+高亮，突出显示
• 未开始：保持默认灰色样式

常见的周报流程节点可以参考：

• 草稿撰写
• 提交审核
• 主管审批
• 归档完成

二、HTML基础结构 #

先搭好视图的骨架，用清晰的类名区分不同元素：

<div class="week-report-step-view">
  <div class="step-item completed">
    <div class="step-number">1</div>
    <div class="step-label">草稿撰写</div>
  </div>
  <div class="step-divider completed"></div>
  <div class="step-item active">
    <div class="step-number">2</div>
    <div class="step-label">提交审核</div>
  </div>
  <div class="step-divider"></div>
  <div class="step-item">
    <div class="step-number">3</div>
    <div class="step-label">主管审批</div>
  </div>
  <div class="step-divider"></div>
  <div class="step-item">
    <div class="step-number">4</div>
    <div class="step-label">归档完成</div>
  </div>
</div>

三、CSS样式实现 #

通过CSS来控制不同状态的视觉表现，让每个步骤的状态一目了然：

.week-report-step-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  max-width: 800px;
  margin: 20px auto;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 14px;
  color: #6c757d;
  text-align: center;
}

/* 已完成状态样式 */
.step-item.completed .step-number {
  background-color: #28a745;
  color: white;
}
.step-item.completed .step-label {
  color: #28a745;
}
.step-divider.completed {
  background-color: #28a745;
}

/* 当前活跃状态样式 */
.step-item.active .step-number {
  background-color: #007bff;
  color: white;
  transform: scale(1.2);
}
.step-item.active .step-label {
  color: #007bff;
  font-weight: bold;
}

/* 分隔线样式 */
.step-divider {
  flex: 1;
  height: 2px;
  background-color: #dee2e6;
  margin: 0 8px;
}

四、JavaScript动态状态切换 #

如果需要根据周报的实际进度动态更新步骤状态，可以用这段JS来切换类名：

// 更新步骤状态的函数，currentStepIndex为当前步骤的索引（从0开始）
function updateWeekReportStep(currentStepIndex) {
  const stepItems = document.querySelectorAll('.step-item');
  const stepDividers = document.querySelectorAll('.step-divider');
  
  // 遍历所有步骤节点，设置对应状态
  stepItems.forEach((item, index) => {
    item.classList.remove('completed', 'active');
    if (index < currentStepIndex) {
      item.classList.add('completed');
    } else if (index === currentStepIndex) {
      item.classList.add('active');
    }
  });
  
  // 更新分隔线的状态
  stepDividers.forEach((divider, index) => {
    divider.classList.remove('completed');
    if (index < currentStepIndex) {
      divider.classList.add('completed');
    }
  });
}

// 调用示例：设置当前进度为「提交审核」（对应索引1）
updateWeekReportStep(1);

内容的提问来源于stack exchange，提问作者Vasudev Vyas