技能介绍

问题背景

在 smart-admin 或同类中后台里，列表、详情、表单、工作台往往由不同同学各自搭页面：有的把列配置写在 index.vue 里，有的在表格行上平铺 a-button，权限与 table-id 散落各处。结果是结构不一致、空错加载态遗漏、埋点与操作栏各写一套，评审和联调成本都偏高。

技能如何工作

本技能把「建页」当成信息采集 + 标准骨架输出两件事。你先说明页面类型（列表 / 详情 / 表单 / 工作台）、数据加载方式（分页、筛选、排序）、权限与路由，以及空 / 错 / 加载态的表现；执行时会按类型选骨架，并以 references/page-template.md 为基线。

固定产出是三件套：index.vue、components/、column.js。页面内划分 Header、Filter、Content、Footer，并显式覆盖五个状态块：loading、empty、error、success、forbidden。输出还包括区块结构图（文本）、状态流转、事件约定（查询、重置、刷新、导出），以及与技术栈一致的示例骨架；在 smart-admin 列表场景下会约束使用 admin-page-layout、API 从 src/api/** 引入、权限与 table-id 走常量文件、列配置只在 column.js 中维护且每列带 width，操作列命名为 operate 并用 more-button 承载行操作。

适用边界

技能侧重页面骨架与约定，不会替你实现具体业务接口或复杂交互细节。若项目不是 Vue + smart-admin 体系，仍需把输出骨架映射到你们自己的组件与目录规范；列宽、权限点命名等仍需与现有 permission-const.js、table-id-const.js 对齐后再落地。