From 24749057273fa3091e10f026f92bdd695aeccd06 Mon Sep 17 00:00:00 2001 From: iven Date: Sun, 26 Apr 2026 12:23:00 +0800 Subject: [PATCH] =?UTF-8?q?docs(wiki):=20=E6=9B=B4=E6=96=B0=20VitalSignsCh?= =?UTF-8?q?art=20=E9=87=8D=E8=AE=BE=E8=AE=A1=E8=AE=B0=E5=BD=95=20+=20?= =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=95=99=E8=AE=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wiki/frontend.md | 47 ++++++++++++++++++++++++++++++++++++++++++----- wiki/index.md | 2 +- 2 files changed, 43 insertions(+), 6 deletions(-) diff --git a/wiki/frontend.md b/wiki/frontend.md index 2e13b06..f6c21b7 100644 --- a/wiki/frontend.md +++ b/wiki/frontend.md @@ -22,7 +22,40 @@ tags: [frontend, react, antd, vite, spa] React 19.2.4 / Ant Design 6.3.5 / React Router 7.14.0 / Zustand 5.0.12 / Vite 8.0.4 / TypeScript 6.0.2 -## 2. 关键文件 + 数据流 +## 2. UI 规范 + +### SaaS 后台布局 + +经典 SaaS 后台管理布局(响应式,支持移动端): + +```text +┌─────────────────────────────────────────────┐ +│ LOGO 搜索... 🔔 5 👤 Admin ▾ │ ← 顶部导航栏 +├─────────┬───────────────────────────────────┤ +│ 📊 首页 │ │ +│ 👥 用户 │ 主内容区域 │ +│ 🔐 权限 │ (多标签页切换) │ +│ 📋 流程 │ │ +│ 💬 消息 │ │ +│ ⚙️ 设置 │ │ +│─────────│ │ +│ 📦 进销存│ │ +│ 🏭 生产 │ │ +│ 💰 财务 │ │ +│─────────│ │ +│ ▸ 更多 │ │ +└─────────┴───────────────────────────────────┘ +``` + +### UI 规则 + +- 使用 Ant Design 组件库,不自造轮子 +- 中文优先,所有文案通过 i18n key 引用 +- 支持暗色/亮色主题切换 +- 侧边栏按模块分组:基础模块 / 行业模块 +- 表单验证使用 Ant Design Form 的 validateRules + +## 3. 关键文件 + 数据流 ### 核心文件 @@ -78,7 +111,7 @@ React 19.2.4 / Ant Design 6.3.5 / React Router 7.14.0 / Zustand 5.0.12 / Vite 8. | `DoctorSelect` | 医护搜索选择器(远程搜索) | | `CalendarView` | 排班日历视图 | | `ExportButton` | 咨询记录导出按钮 | -| `VitalSignsChart` | 体征数据折线图 | +| `VitalSignsChart` | 多指标趋势图:概览卡片条(5 指标 sparkline) + 点击展开详情折线图 | | `VitalSignsTab` | 患者详情-体征标签页 | | `LabReportsTab` | 患者详情-化验报告标签页 | | `HealthRecordsTab` | 患者详情-健康档案标签页 | @@ -94,7 +127,7 @@ React 19.2.4 / Ant Design 6.3.5 / React Router 7.14.0 / Zustand 5.0.12 / Vite 8. | 消费 ← | 插件系统 | `plugin.toml` schema | 动态生成插件页面 | | 调用 → | [[erp-health]] | `/api/v1/health/*` | 健康模块所有数据操作 | -## 3. 代码逻辑 +## 4. 代码逻辑 ### 状态管理(4 个 Zustand Store) @@ -146,7 +179,7 @@ http://localhost:5174/api/* → http://localhost:3000/* (API) ws://localhost:5174/ws/* → ws://localhost:3000/* (WebSocket) ``` -## 4. 活跃问题 + 陷阱 +## 5. 活跃问题 + 陷阱 ⚠️ Ant Design 6 废弃 `destroyOnClose`,应使用 `destroyOnHidden` ⚠️ Ant Design 6 废弃 API 警告(`valueStyle`/`Spin tip`/`trailColor`)已在历史版本中修复 @@ -156,11 +189,15 @@ ws://localhost:5174/ws/* → ws://localhost:3000/* (WebSocket) - DatePicker 提交 dayjs 对象而非字符串 → 后端 422 `birth_date trailing input` — 必须调用 `.format('YYYY-MM-DD')` - 预约表单医护字段标为可选但后端必填 → 400 `doctor_id is required` — 医护为必填(CAS 排班需要) +- 趋势图后端 DTO `Vec<(NaiveDate, f64)>` 序列化为 JSON 数组 `[[date, value]]` 而非对象 `[{date, value}]` → 改用 `Vec` 修复;前端 `extractData` 需同时处理 `ApiResponse` 包装和裸数组两种响应格式 +- `IndicatorTimeseriesResp` 返回 `{ indicator, data: [...] }` 包装对象,不是裸数组 — `Array.isArray(res)` 为 false,必须从 `res.data` 取值 -## 5. 变更记录 +## 6. 变更记录 | 日期 | 变更 | |------|------| +| 2026-04-26 | 从 CLAUDE.md 迁移:UI 布局规范(§8) | +| 2026-04-26 | VitalSignsChart 重设计:概览卡片条 + 点击展开详情图,5 指标独立 Y 轴 | | 2026-04-25 | 全面更新:10 条健康路由、12 个共享组件、7 个健康 API 文件、3 个单元测试 | | 2026-04-24 | 添加小程序交叉引用 | | 2026-04-23 | 重构为 5 节结构,更新为当前完整前端状态 | diff --git a/wiki/index.md b/wiki/index.md index 383b233..143c382 100644 --- a/wiki/index.md +++ b/wiki/index.md @@ -17,7 +17,7 @@ | 后端测试 | 36 个(workspace)+ 57 validation 纯函数测试 | | 总代码量 | Rust ~57k 行 + 前端 TSX/TS ~174 文件 | | API 文档 | `http://localhost:3000/api/docs/openapi.json` | -| Git 提交 | 237 次 | +| Git 提交 | 270 次 | ## 症状导航