Haonan S005-4 前端 LLD

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

个人 Skill产品研发4 个文件浏览次数 0

获取完整包获取 SKILL.md

开始使用

下载前阅读 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 节：全局数据字典、组件拓… 阅读本节完整说明

获取完整包，保留配套文件的目录结构。
按照原文准备所需工具、依赖与输入资料。
阅读对应使用步骤与输入输出说明，在自己的环境中验证结果。

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

正文

获取原文件

references/frontend-contract.md

路由追溯

route_id,path,screen_id,roles,fr_refs,ac_refs,api_refs,states,guards,layout

组件职责

component,responsibility,inputs,outputs,owned_state,side_effects,a11y,tests

组件按用户任务、复用和变更边界组织，明确实际使用页面。

状态

本地交互状态。
URL/导航状态。
表单与校验状态。
服务端数据、缓存和失效状态。
会话/权限/租户状态。
流式任务和后台任务状态。

每个状态记录来源、所有者、转换事件、持久化、恢复和 UI 反馈。业务对象、操作者、角色和请求版本贯穿选择、切换、异步返回、跳转及采用；旧结果不得覆盖新上下文。

API/事件适配

contract_id,backend_ref,frontend_type,request_mapping,response_mapping,error_mapping,cancel,retry,cache,telemetry

UI 恢复矩阵

condition,user_message,preserved_state,primary_action,secondary_action,telemetry,severity

前端质量

XSS/Markdown/URL/文件处理。
键盘、焦点、语义、触控、对比度和减少动态。
长文本、多语言、时区、数字/日期和 RTL（适用时）。
性能预算、分包、图片、缓存和弱网。
单元、组件、接口、a11y、视觉回归和 E2E 分层。
共享组件覆盖所有实际受影响页面及长内容、结果出现、弹层和滚动状态；视觉工具遵守用户限制。

测试交接

将路由、角色、页面状态、真实控件语义、API 及验收 ID 交给 S009，按浏览器测试确定定位与异步断言。设计资料描述预期控件；运行测试仍需核查当前 DOM。状态转换和共享组件变化时，列出全部实际调用页面、上下文切换与回归入口。