屈光手术诺莫图管理系统 版本：V1.0 ## 角色 你是一名屈光手术临床工程专家 + 资深前端工程师，为眼科屈光手术中心搭建一个「屈光手术诺莫图管理系统」。它把病例数据收集、术后效果分析、诺莫图（Nomogram）回归拟合与版本管理、双眼激光器参数计算、手术参数单输出整合进一个网页应用，帮助医生用真实术后随访数据持续修正个性化矫正模型。 硬性要求： 1. **所有功能必须真实可操作**，不允许出现点了没反应的按钮、写死的假界面、只有标题没有内容的空卡片。 2. **所有计算必须真实**：等效球镜、线性/二次最小二乘回归、决定系数 R²、Pearson r、RMSE、顶点距离换算、诺莫图反算，全部用纯 JS 实现，禁止假数据假装算过。 3. **医学严谨性**：计算结果页必须带免责声明（"参数需由主刀医师复核确认后方可用于设备输入；本系统计算结果不替代临床判断"）；缺少术后随访数据的眼不得参与回归拟合。 4. **零依赖**：不引入任何 CDN、框架、图表库；图表用原生 Canvas 2D 手写；数据存 localStorage。 5. **内置自检**：系统自带一套可实际执行的单元测试页面，对公式做对拍验证。 --- ## 一、界面与视觉规范 - **深色专业风**（医疗数据系统）：页面底色 `#0b1017`，面板 `#141d28`/`#19232f`，边框 `#26333f`，正文 `#e6edf3`。 - 主色 `#3b9dff`（蓝），辅助 `#22d3b6`（青）、`#f5b544`（琥珀）、`#ff6b6b`（红）、`#3ecf8e`（绿）、`#a78bfa`（紫）。图表调色板固定 8 色。 - 布局：**顶部水平导航条**（高 58px：Logo 渐变方块 + 应用名 + 5 个模块 Tab + 右侧当前诺莫图 chip 与操作按钮）+ 主内容区 + **底部状态栏**（26px：实时显示系统状态、当前版本、数据量）。 - 字体 13px 微软雅黑/PingFang SC；数值用等宽字体（Consolas）展示回归方程与系数；带符号数值统一显示正负号（如 +0.25 / -4.50）。 - 内容节奏：页头（标题 + 副标题 + 右侧操作按钮组）→ 筛选/表单面板 → 图表卡片网格 → 明细面板。面板 = 白描边深色圆角卡片（8px 圆角 + 深阴影）。 - 交互反馈：操作后右上角 toast（成功绿/信息蓝/错误红，1.8~3 秒自动消失）；删除与覆盖类操作一律弹确认 Modal（红色危险样式需二次确认）；表单走 Modal 或面板内联。 - 顶点距离 VD、R² 等关键参数在结果卡中加粗高亮。 --- ## 二、技术架构（按此分层，文件名前缀决定拼接顺序） ``` template.html HTML 骨架 + 占位符 /*__CSS__*/ 与 /*__JS__*/ build.py 构建脚本：把 src/*.css 与 src/*.js 按文件名前缀排序拼接， 注入模板占位符，产出「屈光手术诺莫图管理系统.html」单文件 src/ 00-style.css 全部样式（CSS 变量定义配色） 10-core.js App 命名空间、工具函数 U（uid/esc/round/CSV 解析/下载等）、 默认配置（字典/字段映射/报告模板）、演示数据（mulberry32 确定性随机）、 状态管理 App.Store（localStorage 读写 + 状态栏） 20-math.js 算法层 M：等效球镜、计划/实际矫正量、样本点抽取、 线性+二次最小二乘拟合（高斯消元解正规方程）、预测/反算、 顶点距离换算、诺莫图构建、8 维筛选、直方图/分组/月度统计 30-charts.js 图表引擎 C：纯 Canvas 2D，散点/柱状/折线/直方图， devicePixelRatio 适配，坐标轴 nice 取整，PNG 导出 40-ui.js 通用 UI：data-act 事件委托、Toast、Modal、Esc 关闭、roundRect polyfill 50-collect.js 模块 01 收集数据 60-analyze.js 模块 02 分析数据 70-create.js 模块 03 创建诺莫图 80-select.js 模块 04 选择诺莫图 90-settings.js 模块 05 系统设置 95-tests.js 模块 06 内置自检（可执行单元测试） 99-app.js 启动入口：加载/初始化、全局错误捕获、10 分钟定时备份 tests/ Node 冒烟测试 + math.test.js + 截图脚本（开发期用） ``` 约定： - 持久化键名 `refractive_nomogram_db_v1`，定时备份键 `refractive_nomogram_db_v1_bak`（每 10 分钟快照一次，存储满时静默跳过，手动备份始终可用）。 - 数据对象 `App.state = { cases, nomograms, activeNomogramId, calcLogs, dictionaries, fieldMap, report, settings }`；UI 瞬态放 `App.ui`（选中病例、筛选器、临时区等），不持久化。 - 渲染 = 各视图 render() 返回 HTML 字符串；事件全部用 `data-act` 委托到 `App.handlers`，禁止散落的内联 onclick。 - 所有用户输入进入 HTML 前必须经 `U.esc()` 转义。 - 首次启动载入约 40 例确定性生成的演示病例（mulberry32 固定种子），并 toast 提示可导入真实数据或重置。 --- ## 三、顶部导航与 5+1 个模块 ``` 01 收集数据 病例库 · 双眼屈光录入 · 数据导入 02 分析数据 多维筛选 · 回归散点 · 统计图表 03 创建诺莫图 拟合工作台 · 参数开关 · 版本保存 04 选择诺莫图 版本应用 · 双眼参数计算 · 参数单打印 05 系统设置 字典 · 导入模板 · 报告模板 · 备份 06 系统自检 内置单元测试（在系统设置内提供入口，逐项可执行） ``` --- ## 四、各模块功能细则 ### 模块 01 收集数据 - **三栏布局**：左侧病例列表面板（搜索框按姓名/病历号/日期过滤、按手术日期倒序、「＋ 病例数据导入」按钮、选中高亮）；中部患者信息面板 + 双眼屈光数据面板 + 激光器输入值面板；右侧辅助信息。 - **患者信息**：姓名、性别/年龄、病历号、手术日期、主刀医生、激光器、治疗术式（SMILE / FS-LASIK / TransPRK / LASEK / ICL）、屈光不正类型（单纯近视 / 近视伴散光 / 远视 / 远视伴散光 / 混合散光）。 - **OD/OS 双眼录入**（左右眼各一组）：球镜 sph、柱镜 cyl、轴向 axis、目标屈光度 target、术后球镜 postSph、术后柱镜 postCyl、术前视力 preVa、术后视力 postVa。所有数值输入即时校验（轴向 0~180 等），改动后保存按钮高亮。 - **病例数据导入**：弹窗支持粘贴/上传 CSV 或 TSV，自动识别分隔符；按「字段映射模板」匹配表头别名（多别名竖线分隔、忽略大小写与首尾空格）；导入预览（逐列识别成功/失败标记）→ 确认入库；提供「下载 CSV 模板」。 - **打印**：输出单例病例核对页。 ### 模块 02 分析数据 - **筛选器（8 类基础 + 3 类高级）**：主刀医生、激光器、治疗术式、屈光不正类型、性别、年龄上下限、术前 SE 上下限、手术日期起止；高级折叠区：检查次数上下限、术后视力下限、「仅完整随访」（排除缺少术后数据的病例）。显示「已启用 N 项条件」徽标 + 一键重置。 - **核心散点图**：计划矫正量（x）vs 实际矫正量（y），叠加当前拟合曲线与 45° 参考线，标注 n 眼数；支持 PNG 导出。 - **双眼视力 4 图**：各术式双眼术后视力均值（OD/OS 对比）、屈光度区间双眼术后视力（按术前 SE 分组）、双眼术前 vs 术后视力均值对比、双眼术后视力差值分布（OD − OS）。 - **统计 6 图**：① 治疗术式分布（横向柱状）② 术前等效球镜分布（直方图 12 bins）③ 医生手术量 ④ 术后视力 ≥1.0 达成率（按术式，百分比）⑤ 月度手术量趋势（折线）⑥ 检查次数分布。 - 所有图表响应式重绘，随筛选条件实时联动。 ### 模块 03 创建诺莫图 - **双区布局**：左侧「工作区域」散点图 + 拟合参数卡，右侧「临时区域」可做对比试验（改参数立即在临时区重算，不影响工作区）。 - **目标量切换**：等效球镜 SE（sph + cyl/2）或柱镜 CYL（取绝对值建模）。 - **参数开关（Switch）**：二次回归（y = a + b·x + c·x²）、轴向对齐等，开关切换后自动重拟合。 - **拟合呈现**：回归方程（等宽字体、4 位小数）、R² 决定系数 / Pearson r、RMSE (D)、样本量 n 眼、样本 X 范围 (D)、顶点距离 VD。 - **样本阈值保护**：低于设置的最小样本量（默认 20 眼）时禁止保存并 toast 警告。 - **保存 / 导出 / 对比**：保存为命名版本（自动带版本号与创建时间）；导出诺莫图 JSON；支持两版本并排对比关键系数。 - **实时模式**：开关开启时筛选条件或参数变化即时重算（缓存 key 判断 dirty）。 ### 模块 04 选择诺莫图 - **版本选择器**：下拉列出全部诺莫图（名称 + 版本号 + 创建日期），激活后右上角 chip 同步显示。 - **双统计卡**：SE 模型卡与 CYL 模型卡并排，展示回归方程、系数 a/b/c（二次项未启用显示 —）、R²、r、RMSE、样本量、样本范围、VD。 - **双眼参数计算**：输入目标矫正量后，用诺莫图反算 `x = inverse(y = T)` 得到镜架平面矫正量，再经顶点距离换算到角膜平面（VD 默认 12mm），输出双眼各自应输入激光器的带符号参数。 - **回填与留痕**：「回填激光器参数」把计算结果写回病例并写入计算留痕（时间、操作员、诺莫图版本、输入/输出参数）；留痕可导出、可清空（危险确认）。 - **版本维护**：「按当前条件重拟合」用当前筛选集重算并覆盖为新版本号（历史留痕不受影响）；「另存新版本」fork。 - **打印手术参数单**：按打印模板（医院名、标题、页眉说明、参数表、页脚签名栏、免责声明开关）输出，可与所选诺莫图版本关联追溯。 ### 模块 05 系统设置（7 个 Tab） 1. **基础字典维护**：医生、激光器、治疗术式、屈光不正类型 4 组字典，pill 标签增删。 2. **数据源与导入模板**：24 个系统字段的表头别名映射表（如 `odSph: 'OD球镜|右眼球镜'`），可编辑、保存、恢复默认、下载 CSV 模板。 3. **打印与报告模板**：医院名称、报告标题、页眉、页脚签名栏、免责声明开关与文案。 4. **基础参数**：最小样本量（默认 20）、顶点距离 VD（默认 12mm）、操作员姓名、小数位数、自动备份开关。 5. **备份与恢复**：导出完整 JSON、导入恢复、定时备份快照的手动恢复。 6. **数据管理**：病例列表清理、重置演示数据、清空全部数据（三重确认）。 7. **关于系统**：版本、架构说明、算法说明、免责声明。 ### 模块 06 内置自检（95-tests.js） 系统内置**可实际执行**的测试用例，每项显示通过/失败与实测值： - localStorage 写入/回读、演示数据结构完整性（双眼字段 + 日期格式） - 等效球镜公式对拍（sph -4.00 + cyl -1.00 / 2 = -4.50 D） - 线性回归对拍（y = 2x + 1 精确还原系数，R² → 1） - 二次回归对拍（y = 0.5x² − 2x + 1 精确还原 a/b/c） - 顶点距离换算对拍、诺莫图反算往返一致性、CSV 解析转义、筛选统计等 全部通过才视为「可上线」，并在页面给出整体结论徽标。 --- ## 五、算法与公式（必须精确实现） ``` 等效球镜 SE = sph + cyl / 2 计划矫正量 planned = SE术前 − 目标屈光度 实际矫正量 achieved = SE术前 − SE术后 回归模型 线性 y = a + b·x；二次 y = a + b·x + c·x² 最小二乘正规方程 + 高斯列主元消元求解 质量指标 R²（决定系数）、Pearson r、RMSE、样本量 n、X 范围 诺莫图反算 给定目标矫正量 T，解 y(x) = T 得镜架平面矫正量（二次取有效根） 顶点距离换算 F(角膜平面) = F(镜架平面) / (1 − d · F(镜架平面))，d = VD(mm)/1000 （负值矫正量时换算量小于绝对值，此物理特性必须保留） 样本规则 任一眼缺少术后球镜/柱镜数据 → 该眼不进入回归样本；CYL 建模时 x = |术前柱镜|，y = |术前柱镜| − |术后柱镜| ```