企业 UI 模式
适用场景
- B 端后台管理系统
- SaaS 控制台
- 数据密集型应用
- 工具型产品（设计工具、IDE）
不适用场景
- C 端营销页（用 visual-style）
- 移动 App（用 hig-principles）
核心模式
1. 表单（Form）
布局：
- 单列：移动端 / 简单表单
- 双列：桌面端 / 字段较多
- 分组：相关字段放一起
字段类型：
- 必填字段：红色 * 标记 + label 加粗
- 选填字段：灰色"选填"提示
- 关联字段：联动隐藏/显示
- 长字段：多行输入框 / 抽屉式编辑
校验：
- 实时校验（失焦后）
- 提交前完整校验
- 错误信息：字段级 + 顶部汇总
帮助：
- Tooltip：简短提示
- Helper text：下方说明
- 示例值：placeholder 或下方"例如"
提交：
- 主按钮：右下 / 底部
- 取消：主按钮左侧
- 保存草稿：可选
- 提交后：成功提示 + 跳转 或 错误提示
错误恢复：
- 错误字段聚焦
- 错误信息靠近字段
- 不清空已填内容
2. 数据表格（Data Table）
列：
- 主列：宽度自适应
- 操作列：固定右侧
- 可配置列（用户可选显示）
排序：
- 列头点击切换升降序
- 当前排序列高亮
- 多列排序（高级功能）
筛选：
- 列头筛选（下拉菜单）
- 顶部筛选栏（多字段组合）
- 已选筛选条件可见且可删
分页：
- 底部居中
- 每页数量可选（10/20/50/100）
- 显示当前/总数
批量操作：
- 复选框列（最左）
- 全选 + 跨页选择
- 批量操作栏（顶部固定）
行操作：
- Hover 显示
- 主操作 + 次操作（下拉）
- 危险操作分离
空状态：
- 完全无数据：引导创建
- 筛选无结果：清除筛选
加载：
- Skeleton（首次）
- 刷新（保留旧数据）
行内编辑：
- 双击启用
- Esc 取消
- Enter 保存
- 修改未保存有视觉提示
3. 导航（Navigation）
顶部导航：
- Logo（可点击回首页）
- 主菜单（最多 7 项）
- 全局搜索
- 通知 / 用户头像
侧边栏：
- 多级菜单（最多 3 级）
- 当前位置高亮
- 可折叠
- 移动端转抽屉式
面包屑：
- 位置：内容区顶部
- 当前页面文字（不可点）
- 上级页面链接（可点）
Tab 页：
- 顶部对齐
- 当前 Tab 下划线 + 加粗
- URL 同步（刷新保留状态）
4. 危险操作
原则：
- 视觉警示（红色）
- 二次确认
- 可撤销（提供撤销窗口）
- 操作日志（可追溯）
确认对话框：
- 标题：明确说明影响（"删除 5 个用户？"）
- 内容：列出影响 + 不可恢复警告
- 按钮：左"取消" 右"危险操作"（红色）
- 输入确认（高危）："请输入 DELETE 确认"
撤销：
- 删除后 5~10 秒可撤销
- Toast 提示 + 撤销按钮
- 超时后才真正删除
操作日志：
- 谁 / 什么时间 / 做了什么 / 影响范围
- 可查询（详情页）
5. 通知和反馈
Toast（轻量提示）：
- 位置：右下或顶部居中
- 时长：3~5 秒
- 类型：成功 / 警告 / 错误 / 信息
- 操作：可选"撤销"按钮
Banner（页面级）：
- 顶部固定
- 系统级公告 / 持久警告
Alert（对话框）：
- 阻塞式
- 严重错误 / 重要确认
Empty State：
- 插图（不要用 AI 通用图）
- 标题：解释原因
- 描述：下一步建议
- 主操作：引导创建/导入
Progress：
- 长操作（>3s）必须显示
- 进度条（可估算）
- Spinner（不可估算）
- 文字描述（"正在导入第 30/100 条"）
6. 搜索
全局搜索：
- 顶部导航中
- 快捷键（Cmd+K / Ctrl+K）
- 结果分组（按类型）
- 历史记录 / 推荐
筛选搜索：
- 列表页顶部
- 多字段组合
- URL 同步
搜索建议：
- 实时联想
- 高亮匹配
- 最近搜索
输出格式
## 企业模式应用：[页面名]
### 选用模式
- 表单：双列 + 分组
- 表格：主列 + 操作列 + 批量操作
- 导航：顶部 + 侧边栏 + 面包屑
### 表单设计
[字段清单 + 校验规则 + 错误处理]
### 表格设计
[列定义 + 排序/筛选/分页 + 行操作]
### 危险操作
[二次确认 + 撤销窗口 + 操作日志]
工作流程
1. 识别页面类型（列表/详情/表单/仪表盘）
2. 选择对应的企业模式
3. 应用模式的标准结构
4. 根据业务调整细节
5. 检查危险操作是否有保护
6. 输出模式应用说明
质量自检
□ 表单是否有错误恢复机制
□ 表格是否覆盖所有状态（空/错/加载）
□ 导航是否清晰（用户知道在哪）
□ 危险操作是否有二次确认 + 撤销
□ 通知是否合适（不打扰但能看见）
□ 搜索是否够强（高频功能）
常见坑
- 表单没有错误恢复——清空已填字段
- 表格批量操作隔在三层菜单里
- 导航当前位置不高亮——用户迷路
- 删除直接执行不确认——用户误删无法恢复
- Toast 时长过短——用户没看到就消失
- 空状态只是空白——没有引导
- 进度无文字描述——用户不知道还要等多久
配套模板
templates/form-pattern-template.mdtemplates/data-table-pattern-template.mdtemplates/navigation-pattern-template.mdtemplates/ui-pattern-library-template.md
与其他 skill 的协作
上游：
page-structure → 提供页面骨架
平行：
component-states → 详细状态
design-system-mapping → 参考成熟设计系统
accessibility → 企业产品对可访问性要求高
下游：
design-handoff → 模式应用交接前端
zhaoxuya520