From 1f8fd0465d71f306c5238d8657cca71799d6802a Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Sun, 26 Apr 2026 09:35:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(health):=20=E8=B6=8B=E5=8A=BF=E5=9B=BE?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=B8=8D=E6=98=BE=E7=A4=BA=20=E2=80=94=20?=
 =?UTF-8?q?=E5=90=8E=E7=AB=AF=20DTO=20=E5=85=83=E7=BB=84=E2=86=92=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E4=BD=93=20+=20=E5=89=8D=E7=AB=AF=E8=A7=A3=E5=8C=85?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 后端 IndicatorTimeseriesResp.data 从 Vec<(NaiveDate, f64)> 改为 Vec<DataPoint>
  解决 JSON 序列化为数组而非对象导致前端无法识别的问题
- 前端 VitalSignsChart 正确解包 API 返回的 { indicator, data } 响应结构
- 移除趋势图无用的指标下拉选择器，固定显示收缩压(晨)趋势
- 修复 PatientDetail Card body padding 三层嵌套空白问题
---
 apps/web/src/pages/health/PatientDetail.tsx   |   6 +-
 .../health/components/VitalSignsChart.tsx     | 139 ++++++------------
 crates/erp-health/src/dto/health_data_dto.rs  |   2 +-
 .../erp-health/src/service/trend_service.rs   |  18 +--
 4 files changed, 60 insertions(+), 105 deletions(-)

diff --git a/apps/web/src/pages/health/PatientDetail.tsx b/apps/web/src/pages/health/PatientDetail.tsx
index 473b0df..41b322b 100644
--- a/apps/web/src/pages/health/PatientDetail.tsx
+++ b/apps/web/src/pages/health/PatientDetail.tsx
@@ -142,6 +142,7 @@ export default function PatientDetail() {
 
   return (
     <div>
+      <style>{`.patient-detail-tabs-card .ant-card-body { padding: 0 !important; }`}</style>
       {/* 顶部导航 */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
         <Button
@@ -216,10 +217,10 @@ export default function PatientDetail() {
         </Descriptions>
       </Card>
 
-      {/* 标签页 */}
-      <Card style={cardStyle}>
+      <Card style={cardStyle} className="patient-detail-tabs-card">
         <Tabs
           defaultActiveKey="info"
+          style={{ paddingLeft: 16, paddingRight: 16 }}
           items={[
             {
               key: 'info',
@@ -272,6 +273,7 @@ export default function PatientDetail() {
               children: id ? (
                 <Tabs
                   defaultActiveKey="vital"
+                  size="small"
                   items={[
                     { key: 'vital', label: '体征数据', children: <VitalSignsTab patientId={id} /> },
                     { key: 'lab', label: '化验报告', children: <LabReportsTab patientId={id} /> },
diff --git a/apps/web/src/pages/health/components/VitalSignsChart.tsx b/apps/web/src/pages/health/components/VitalSignsChart.tsx
index 3d054b1..f9835f8 100644
--- a/apps/web/src/pages/health/components/VitalSignsChart.tsx
+++ b/apps/web/src/pages/health/components/VitalSignsChart.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Line } from '@ant-design/charts';
-import { Spin, Select, Alert, Typography } from 'antd';
+import { Spin, Alert, Typography } from 'antd';
 import { LineChartOutlined } from '@ant-design/icons';
 import { healthDataApi } from '../../../api/health/healthData';
 
@@ -8,129 +8,86 @@ const { Text } = Typography;
 
 interface Props {
   patientId: string;
-  indicator?: string;
 }
 
-const INDICATORS = [
-  { value: 'systolic_bp_morning', label: '收缩压(晨)' },
-  { value: 'diastolic_bp_morning', label: '舒张压(晨)' },
-  { value: 'heart_rate', label: '心率' },
-  { value: 'weight', label: '体重' },
-  { value: 'blood_sugar', label: '血糖' },
-];
+const DEFAULT_INDICATOR = 'systolic_bp_morning';
+const UNIT = 'mmHg';
+const LABEL = '收缩压(晨)';
 
-const INDICATOR_UNITS: Record<string, string> = {
-  systolic_bp_morning: 'mmHg',
-  diastolic_bp_morning: 'mmHg',
-  heart_rate: 'bpm',
-  weight: 'kg',
-  blood_sugar: 'mmol/L',
-};
-
-export function VitalSignsChart({ patientId, indicator: initialIndicator }: Props) {
-  const [indicator, setIndicator] = useState(initialIndicator ?? 'systolic_bp_morning');
+export function VitalSignsChart({ patientId }: Props) {
   const [data, setData] = useState<{ date: string; value: number }[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
   useEffect(() => {
-    if (!patientId || !indicator) return;
+    if (!patientId) return;
     setLoading(true);
     setError(false);
     healthDataApi
-      .getIndicatorTimeseries(patientId, indicator)
-      .then(setData)
+      .getIndicatorTimeseries(patientId, DEFAULT_INDICATOR)
+      .then((res) => {
+        const raw = (res as { data?: { date: string; value: number }[] })?.data;
+        const points = Array.isArray(res) ? res : Array.isArray(raw) ? raw : [];
+        setData(points.filter((d) => d?.value != null));
+      })
       .catch(() => setError(true))
       .finally(() => setLoading(false));
-  }, [patientId, indicator]);
-
-  const unit = INDICATOR_UNITS[indicator] ?? '';
-
-  // 头部：选择器 + 最新值摘要
-  const latestValue = data.length > 0 ? data[data.length - 1].value : null;
-
-  const renderHeader = () => (
-    <div style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginBottom: 12,
-    }}>
-      <Select
-        value={indicator}
-        onChange={setIndicator}
-        options={INDICATORS}
-        style={{ width: 160 }}
-        size="small"
-      />
-      {latestValue != null && (
-        <Text type="secondary" style={{ fontSize: 13 }}>
-          最新：{latestValue} {unit}
-        </Text>
-      )}
-    </div>
-  );
+  }, [patientId]);
 
   if (loading) {
     return (
-      <div style={{ height: 180, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ height: 60, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
         <Spin size="small" />
       </div>
     );
   }
 
   if (error) {
-    return (
-      <div>
-        {renderHeader()}
-        <Alert type="error" message="加载数据失败" showIcon style={{ borderRadius: 8 }} />
-      </div>
-    );
+    return <Alert type="error" message="加载趋势数据失败" showIcon style={{ borderRadius: 8 }} />;
   }
 
   if (data.length === 0) {
     return (
-      <div>
-        {renderHeader()}
-        <div style={{
-          height: 120,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          background: 'var(--ant-color-bg-container, #fafafa)',
-          borderRadius: 8,
-          border: '1px dashed var(--ant-color-border, #d9d9d9)',
-        }}>
-          <LineChartOutlined style={{ fontSize: 24, color: '#bfbfbf', marginBottom: 4 }} />
-          <Text type="secondary" style={{ fontSize: 13 }}>暂无趋势数据</Text>
-        </div>
+      <div style={{
+        height: 48,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'var(--ant-color-bg-container, #fafafa)',
+        borderRadius: 6,
+        border: '1px dashed var(--ant-color-border, #d9d9d9)',
+      }}>
+        <LineChartOutlined style={{ fontSize: 14, color: '#bfbfbf', marginRight: 6 }} />
+        <Text type="secondary" style={{ fontSize: 12 }}>暂无{LABEL}趋势数据</Text>
       </div>
     );
   }
 
-  const config = {
-    data,
-    xField: 'date',
-    yField: 'value',
-    smooth: true,
-    height: 180,
-    point: { shapeField: 'circle', sizeField: 3 },
-    axis: {
-      x: { labelAutoRotate: false },
-      y: { title: unit || undefined },
-    },
-    style: {
-      lineWidth: 2,
-    },
-  };
+  const latestValue = data[data.length - 1].value;
 
   return (
     <div>
-      {renderHeader()}
-      <div style={{ width: '100%' }}>
-        <Line {...config} />
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+        <Text style={{ fontSize: 12, color: 'var(--ant-color-text-secondary)' }}>{LABEL}趋势</Text>
+        {latestValue != null && (
+          <Text style={{ fontSize: 12, color: 'var(--ant-color-text-secondary)' }}>
+            最新：{latestValue} {UNIT}
+          </Text>
+        )}
       </div>
+      <Line
+        data={data}
+        xField="date"
+        yField="value"
+        smooth
+        height={140}
+        point={{ shapeField: 'circle', sizeField: 3 }}
+        axis={{
+          x: { labelAutoRotate: false },
+          y: { title: UNIT },
+        }}
+        style={{ lineWidth: 2 }}
+      />
     </div>
   );
 }
diff --git a/crates/erp-health/src/dto/health_data_dto.rs b/crates/erp-health/src/dto/health_data_dto.rs
index 9e73f84..90b9608 100644
--- a/crates/erp-health/src/dto/health_data_dto.rs
+++ b/crates/erp-health/src/dto/health_data_dto.rs
@@ -192,7 +192,7 @@ pub struct TrendResp {
 #[derive(Debug, Clone, Serialize, Deserialize, ToSchema)]
 pub struct IndicatorTimeseriesResp {
     pub indicator: String,
-    pub data: Vec<(NaiveDate, f64)>,
+    pub data: Vec<DataPoint>,
 }
 
 // ---------------------------------------------------------------------------
diff --git a/crates/erp-health/src/service/trend_service.rs b/crates/erp-health/src/service/trend_service.rs
index 2ce542a..4c064ca 100644
--- a/crates/erp-health/src/service/trend_service.rs
+++ b/crates/erp-health/src/service/trend_service.rs
@@ -214,7 +214,7 @@ pub async fn get_indicator_timeseries(
         .all(&state.db)
         .await?;
 
-    let data: Vec<(chrono::NaiveDate, f64)> = vitals.into_iter().filter_map(|v| {
+    let data: Vec<DataPoint> = vitals.into_iter().filter_map(|v| {
         let val = match indicator.as_str() {
             "heart_rate" => v.heart_rate.map(|x| x as f64),
             "weight" => v.weight.map(|d| d.to_f64().unwrap_or(0.0)),
@@ -225,7 +225,10 @@ pub async fn get_indicator_timeseries(
             "diastolic_bp_evening" => v.diastolic_bp_evening.map(|x| x as f64),
             _ => None,
         };
-        val.map(|fv| (v.record_date, fv))
+        val.map(|fv| DataPoint {
+            date: v.record_date.to_string(),
+            value: fv,
+        })
     }).collect();
 
     Ok(IndicatorTimeseriesResp { indicator, data })
@@ -393,15 +396,8 @@ pub async fn get_mini_trend(
     )
     .await?;
 
-    // 4. 转换为 DataPoint 格式
-    let data_points = timeseries
-        .data
-        .into_iter()
-        .map(|(date, value)| DataPoint {
-            date: date.to_string(),
-            value,
-        })
-        .collect();
+    // 4. 直接使用 DataPoint
+    let data_points = timeseries.data;
 
     Ok(MiniTrendResp {
         indicator,