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

apps/miniprogram/src/components/StepIndicator/index.scss

@@ -0,0 +1,71 @@
+@import '../../styles/variables.scss';
+
+.step-indicator {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 24px 32px;
+  background: $card;
+}
+
+.step-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+.step-line {
+  position: absolute;
+  top: 24px;
+  left: -50%;
+  right: 50%;
+  height: 4px;
+  background: $bd-l;
+  transition: background 0.3s ease;
+
+  &.step-line-done {
+    background: $acc;
+  }
+}
+
+.step-dot {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $bd-l;
+  color: $tx3;
+  font-size: 24px;
+  transition: all 0.3s ease;
+  z-index: 1;
+
+  &.step-current {
+    background: $pri;
+    color: white;
+  }
+
+  &.step-done {
+    background: $acc;
+    color: white;
+  }
+}
+
+.step-label {
+  font-size: 22px;
+  color: $tx3;
+  margin-top: 8px;
+  text-align: center;
+
+  &.step-current {
+    color: $pri;
+    font-weight: bold;
+  }
+
+  &.step-done {
+    color: $acc;
+  }
+}

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>
+  );
+}