feat(miniprogram): 温润东方风全面 UI 重设计

73 文件变更，覆盖全部 40 个页面 SCSS + TabBar 图标 + 组件样式。
统一赤陶主色 #C4623A + 暖米背景 + 衬线标题字体 + 12px 圆角体系。

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useCallback } from 'react';
 import { View, Text } from '@tarojs/components';
-import { EChart } from 'echarts-taro3-react';
+import EcCanvas from '../EcCanvas';
+import type { EcCanvasRef } from '../EcCanvas';
 import './index.scss';
 
 interface TrendChartProps {
@@ -11,8 +12,14 @@ interface TrendChartProps {
   height?: number;
 }
 
-export default function TrendChart({ data, referenceMin, referenceMax, unit = '', height = 500 }: TrendChartProps) {
-  const chartRef = useRef<any>(null);
+export default function TrendChart({
+  data,
+  referenceMin,
+  referenceMax,
+  unit = '',
+  height = 500,
+}: TrendChartProps) {
+  const chartRef = useRef<EcCanvasRef>(null);
 
   const getOption = useCallback(() => {
     if (!data || data.length === 0) return null;
@@ -21,10 +28,15 @@ export default function TrendChart({ data, referenceMin, referenceMax, unit = ''
     const markArea: any = {};
 
     if (referenceMin != null && referenceMax != null) {
-      markArea.data = [[
-        { yAxis: referenceMin, itemStyle: { color: 'rgba(5,150,105,0.08)' } },
-        { yAxis: referenceMax },
-      ]];
+      markArea.data = [
+        [
+          {
+            yAxis: referenceMin,
+            itemStyle: { color: 'rgba(5,150,105,0.08)' },
+          },
+          { yAxis: referenceMax },
+        ],
+      ];
     }
 
     series.push({
@@ -35,17 +47,34 @@ export default function TrendChart({ data, referenceMin, referenceMax, unit = ''
       symbolSize: 6,
       lineStyle: { color: '#0891B2', width: 2 },
       itemStyle: { color: '#0891B2' },
-      areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(8,145,178,0.15)' }, { offset: 1, color: 'rgba(8,145,178,0.01)' }] } },
-      markArea: markArea.data ? { silent: true, data: markArea.data } : undefined,
-      markPoint: (referenceMin != null && referenceMax != null) ? {
-        data: data
-          .filter((d) => d.value < referenceMin || d.value > referenceMax)
-          .map((d) => ({
-            coord: [data.indexOf(d), d.value],
-            itemStyle: { color: '#DC2626' },
-            symbolSize: 12,
-          })),
-      } : undefined,
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(8,145,178,0.15)' },
+            { offset: 1, color: 'rgba(8,145,178,0.01)' },
+          ],
+        },
+      },
+      markArea: markArea.data
+        ? { silent: true, data: markArea.data }
+        : undefined,
+      markPoint:
+        referenceMin != null && referenceMax != null
+          ? {
+              data: data
+                .filter((d) => d.value < referenceMin || d.value > referenceMax)
+                .map((d) => ({
+                  coord: [data.indexOf(d), d.value],
+                  itemStyle: { color: '#DC2626' },
+                  symbolSize: 12,
+                })),
+            }
+          : undefined,
     });
 
     return {
@@ -77,7 +106,7 @@ export default function TrendChart({ data, referenceMin, referenceMax, unit = ''
     if (chartRef.current && data && data.length > 0) {
       const option = getOption();
       if (option) {
-        chartRef.current.refresh(option);
+        chartRef.current.setOption(option);
       }
     }
   }, [data, getOption]);
@@ -92,7 +121,7 @@ export default function TrendChart({ data, referenceMin, referenceMax, unit = ''
 
   return (
     <View className='trend-chart' style={{ height: `${height}rpx` }}>
-      <EChart canvasId='trend-chart-canvas' ref={chartRef} />
+      <EcCanvas canvasId='trend-chart-canvas' ref={chartRef} height={height} />
     </View>
   );
 }