用途:对遗留 UI 模板做逆向工程,梳理路由与页面拓扑、布局层级、复用组件模式与条件逻辑,输出可指导现代化改造(如迁移到 Next.js App Router 与组件驱动设计系统)的结构蓝图,避免遗漏页面。
主要能力与步骤(按清单推进):
- 映射路由与页面拓扑:列出模板渲染的每个路由/URL,建立遗留端点(如 GET /articles)到目标路径(如 src/app/articles/page.tsx)的对照矩阵,并列各路由依赖的高层组件。
- 映射布局层级:定位父模板(如 layout.pug、base.html)与子区块,识别导航栏、侧边栏、页脚、内容区等全局区域,以及模块自身的嵌套子布局。
- 归类交互模式:导航(菜单、面包屑、分页)、表单(输入、校验错误、提交)、数据展示(列表、卡片、详情、表格)、反馈(提示消息、加载态、空状态)。
- 记录组件级意图:说明元素用途、条件渲染逻辑(如仅当 resource.owner_id === current_user.id 时显示编辑按钮)、渲染所需数据(如 user、items[]、isOwner)。
- 提取设计令牌:从遗留 CSS 或内联类(如 Bootstrap 的 bg-primary、text-muted)归纳字体层级、色彩语义(主色/次要色/危险/成功)、间距规律。
- 生成 UI_Component_Inventory.md:在 docs/legacy-audit/UI_Component_Inventory.md 汇总,突出路由与页面拓扑表;同时识别交互一致性目标(如头像链接失效时显示占位图),并将相应测试用例追加到 docs/verification/Verification_Plan.md。
适用场景:遗留前端模板的盘点、向组件化设计系统迁移前的审计与规划、跨页面路由与布局梳理。
限制:资料未说明具体运行环境、依赖版本、支持的模板扩展范围之外的内容及收费情况,暂未提供。