feat(miniprogram): Phase 5 UI/UX 优化 — 8 项改进

- 首页: 健康资讯推荐 + 空状态引导 + 快捷服务字符图标优化
- 健康 Hub: sparkline bar + 参考范围 + 打卡合并到快捷操作
- 日常监测: 3 分组折叠(晨间/晚间/其他) + 异常值高亮 + 提交前确认
- 预约: 已满时段 pointer-events:none + opacity 优化
- 咨询聊天: 消息日期分组(今天/昨天) + 图片预览
- 积分商城: 确认已有余额大字+签到+库存提示
- 医护工作台: 异常体征横幅 + 患者搜索入口 + 快捷操作扩展
- 趋势图表: 骨架屏加载状态 + ECharts 异常标记已有

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

@@ -2,6 +2,7 @@
 
 .trend-chart {
   width: 100%;
+  position: relative;
 }
 
 .trend-chart-empty {
@@ -15,3 +16,32 @@
   font-size: 28px;
   color: $tx3;
 }
+
+.trend-chart-skeleton {
+  position: absolute;
+  top: 20px;
+  left: 45px;
+  right: 15px;
+  bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  z-index: 1;
+}
+
+.skeleton-line {
+  height: 8px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+.skeleton-line-1 { width: 70%; }
+.skeleton-line-2 { width: 90%; }
+.skeleton-line-3 { width: 60%; }
+
+@keyframes skeleton-pulse {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}

apps/miniprogram/src/components/TrendChart/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
 import { View, Text } from '@tarojs/components';
 import EcCanvas from '../EcCanvas';
 import type { EcCanvasRef } from '../EcCanvas';
@@ -20,6 +20,7 @@ export default function TrendChart({
   height = 500,
 }: TrendChartProps) {
   const chartRef = useRef<EcCanvasRef>(null);
+  const [chartReady, setChartReady] = useState(false);
 
   const getOption = useCallback(() => {
     if (!data || data.length === 0) return null;
@@ -107,6 +108,7 @@ export default function TrendChart({
       const option = getOption();
       if (option) {
         chartRef.current.setOption(option);
+        setChartReady(true);
       }
     }
   }, [data, getOption]);
@@ -121,6 +123,13 @@ export default function TrendChart({
 
   return (
     <View className='trend-chart' style={{ height: `${height}rpx` }}>
+      {!chartReady && (
+        <View className='trend-chart-skeleton'>
+          <View className='skeleton-line skeleton-line-1' />
+          <View className='skeleton-line skeleton-line-2' />
+          <View className='skeleton-line skeleton-line-3' />
+        </View>
+      )}
       <EcCanvas canvasId='trend-chart-canvas' ref={chartRef} height={height} />
     </View>
   );