分包加载(主包从 517KB 降至 275KB,-47%): - 将 27 个页面拆入 6 个分包(health/doctor/mall/profile/content/device) - vendors.js 从 192KB 降至 36KB(-81%) - echarts 514KB 仅在访问健康趋势页时按需加载 请求层优化: - GET 请求增加 in-flight 去重 + 60s TTL 响应缓存 - 新建 points store 集中管理积分/签到状态(消除 5 处重复调用) - health store todaySummary 增加 60s TTL - mutation 后自动失效缓存(health input/daily-monitoring) - logout 时清空请求缓存 渲染优化: - 7 个组件添加 React.memo(EcCanvas/TrendChart/Loading/EmptyState 等) - 修复 TrendChart setChartReady 导致的双重渲染 - 静态数组(quickServices/quickActions/trendLinks)提取到模块级 - restoreAuth 从页面级提升到 App 级别 - 文章列表图片添加 lazyLoad 构建优化: - prod 配置添加 terser(drop_console + drop_debugger) - crypto-js 从全量引入改为按需引入(AES + Utf8)
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
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 React.memo(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'>✓</Text> : <Text className='step-num'>{idx + 1}</Text>}
|
|
</View>
|
|
<Text className={`step-label ${isCurrent ? 'step-current' : ''} ${isDone ? 'step-done' : ''}`}>
|
|
{step.label}
|
|
</Text>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
});
|