07 组件与页面开发

7.1 页面组织

管理端页面通常由查询区、操作区、数据区和弹窗/抽屉组成：

页面 → 查询表单 → 操作按钮 → 表格/卡片列表 → 分页 → 新增/编辑/详情

页面负责业务编排，通用表格、表单、上传、选择器和弹窗沉淀到公共组件。

7.2 组件职责

• 公共组件：展示、交互和通用校验，不绑定单一业务接口。
• 业务组件：封装某业务域的重复交互。
• 页面组件：负责 API、页面状态和路由参数。
• 布局组件：负责导航、菜单、标签页和内容容器。

7.3 表格页面

处理首次加载、查询、分页、排序、空数据、错误状态、批量选择、删除确认和操作后刷新。状态标签、时间和金额格式化优先复用已有工具。

7.4 表单页面

填写 → 前端校验 → 提交中 → API → 成功提示并关闭/跳转
                              └→ 失败提示并保留输入

编辑场景区分创建和更新接口；详情加载完成前不要用不完整数据覆盖表单默认值。

7.5 复用规范

Props、事件和插槽命名应明确；组件不直接修改传入对象；复杂组件拆分展示、配置和请求层；销毁时清理定时器、监听器和未完成任务。