跳到正文

Haonan S005-4 前端 LLD

设计或审查前端路由、组件、Token 映射、类型、状态、接口和流式交互;核查业务身份、字段传播、异步结果、动态布局及可执行验收,沿用批准的工程规范。

个人 Skill产品研发4 个文件浏览次数 0
开始使用

下载前阅读 SKILL.md 中的使用条件,并确认所用工具支持对应能力。

输入资料
生成 LLD 前核查以下适用资料。已有代码和规范可提供真实接口依据,未知业务规则不得推断为已确认;必要信息缺失只阻塞相应设计部分。 【SKILL02】PRD 验收:核对核心业务闭环、大模型降级/转人工的阈值。 【SKILL03】PROTOTYPE 验收:提取 UI 组件树拓扑,拒绝凭空想象界面。 【SKILL04】HLD 验收:提取前端 BFF 契约、Hook 拦截层要求与缓存经济学策略。 【SKILL05-1/2】数据与后端契约验收:… 阅读本节完整说明
交付内容
保留以下三阶段与全部七节设计;用户要求交互评审时逐阶段确认,完整授权下连续完成。 第一阶段 (Plan: 资产继承与系统底座):输出 【第 1 至 3 节:上游资产映射、前端本能边界与 UI Token 系统篇】。输出后询问:“上游 PRD/原型/HLD 资产已完成前端映射,底层纪律与设计系统已确立。是否符合安全与体验水位?” 第二阶段 (Design: 状态契约与拓扑映射):用户确认后,输出 【第 4 至 5 节:全局数据字典、组件拓… 阅读本节完整说明
  1. 获取完整包,保留配套文件的目录结构。
  2. 按照原文准备所需工具、依赖与输入资料。
  3. 阅读对应使用步骤与输入输出说明,在自己的环境中验证结果。

使用提示摘自原文,配套文件保留来源版本;实际运行条件以各包说明为准。

正文

获取原文件

references/interaction-state.md

检查当前框架、路由、状态、样式、构建和测试约定,沿用已确认结构。缺少输入时标注假设,仅阻塞受关键未知影响的部分。

设计要求

  1. 需求与验收动作映射到页面、入口、组件、API 和结果;缺少页面的需求仍在目标清单。
  2. 明确页面、布局、共享组件及业务组件的职责、数据所有权和依赖方向。
  3. 分别管理本地、服务端、URL、表单和持久状态;显示身份与数据 ID 来自一致来源。
  4. 对操作者、角色、患者或其他业务对象、就诊等上下文定义设置、切换、清除和恢复规则,跨页面跳转必须传递对应身份。
  5. 异步请求绑定上下文和请求版本;对象切换后取消或拒绝旧结果,防止覆盖当前内容。缓存键与失效包含必要身份和配置版本。
  6. 表单覆盖校验、提交、重复操作、并发冲突、成功、错误、撤销和未保存离开;重新进入能够确认服务端实际结果。
  7. Agent 流式界面定义事件、顺序、取消、重连、工具结果、来源引用、审核和采用;只展示允许的状态与证据。
  8. 共享组件修改列明实际使用页面,检查长内容、空数据、结果出现、弹窗、滚动、固定导航、键盘焦点和遮挡。
  9. 保留设计 Token、可访问性、响应式及国际化要求;平台专项仅覆盖用户指定的目标端。
  10. 类型、枚举、错误和事件与后端一致,资源引用及生成物可追溯到源码版本,目标端分别构建与验证。

详细字段见 前端规范。用户限制视觉工具时使用获准的 DOM、样式和行为检查,未进行视觉检查时不声明视觉一致。

质量与交接

不渲染未经处理的用户或模型 HTML;文件、URL、Markdown 与敏感信息边界明确。所有适用状态有可观察反馈和恢复动作。

向 S007 提供完整组件与业务动作映射,向 S009 提供身份切换、动态状态、跨页面采用和共享组件回归范围,向 S010 提供前端攻击面。状态遵循 交付记录,typecheck 或 build 成功只证明对应检查。

Haonan S005-4 前端 LLD · 原理图

查看原图
Haonan S005-4 前端 LLD 原理图

CONTACT HAONAN

联系haonan

医疗 AI · 产品与独立开发

刘浩南

关注医疗 AI 从 demo 到真实落地,聚焦产品化、商业化与院内工作流效率提升。

12年医疗产研经验,大湾区头部医疗AI公司前产品总监,独立开发者

医疗 AI 产品化医疗 AI 商业化院内工作流效率
刘浩南的微信联系二维码
微信扫一扫,联系 haonan