feat(appointment): 新增 StepIndicator 步骤指示器 + WeekCalendar 周视图日历组件

2026-04-24 12:40:59 +08:00
parent 4f2efdb643
commit 487432b4e9
4 changed files with 260 additions and 0 deletions
--- a/apps/miniprogram/src/components/StepIndicator/index.tsx
+++ b/apps/miniprogram/src/components/StepIndicator/index.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, Text } from '@tarojs/components';
+import './index.scss';
+
+interface Step {
+  label: string;
+}
+
+interface StepIndicatorProps {
+  steps: Step[];
+  current: number;
+  onChange?: (index: number) => void;
+}
+
+export default function StepIndicator({ steps, current, onChange }: StepIndicatorProps) {
+  return (
+    <View className='step-indicator'>
+      {steps.map((step, idx) => {
+        const isCurrent = idx === current;
+        const isDone = idx < current;
+        const isClickable = isDone && !!onChange;
+
+        return (
+          <View className='step-item' key={step.label}>
+            {idx > 0 && (
+              <View className={`step-line ${isDone ? 'step-line-done' : ''}`} />
+            )}
+            <View
+              className={`step-dot ${isCurrent ? 'step-current' : ''} ${isDone ? 'step-done' : ''}`}
+              onClick={isClickable ? () => onChange(idx) : undefined}
+            >
+              {isDone ? <Text className='step-check'>&#10003;</Text> : <Text className='step-num'>{idx + 1}</Text>}
+            </View>
+            <Text className={`step-label ${isCurrent ? 'step-current' : ''} ${isDone ? 'step-done' : ''}`}>
+              {step.label}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}