# Enterprise Patterns

> 设计企业级 UI 模式时使用。适用于后台管理、SaaS 控制台、表格表单密集页面。优先使用表单/表格/导航/危险操作的成熟模式。

- Skill: `zhaoxuya520/enterprise-patterns` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add zhaoxuya520/enterprise-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zhaoxuya520/enterprise-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zhaoxuya520 (https://skillmd.com/u/zhaoxuya520)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zhaoxuya520/enterprise-patterns

---


# 企业 UI 模式

## 适用场景

- B 端后台管理系统
- SaaS 控制台
- 数据密集型应用
- 工具型产品（设计工具、IDE）

## 不适用场景

- C 端营销页（用 visual-style）
- 移动 App（用 hig-principles）

## 核心模式

### 1. 表单（Form）

```text
布局：
  - 单列：移动端 / 简单表单
  - 双列：桌面端 / 字段较多
  - 分组：相关字段放一起

字段类型：
  - 必填字段：红色 * 标记 + label 加粗
  - 选填字段：灰色"选填"提示
  - 关联字段：联动隐藏/显示
  - 长字段：多行输入框 / 抽屉式编辑

校验：
  - 实时校验（失焦后）
  - 提交前完整校验
  - 错误信息：字段级 + 顶部汇总

帮助：
  - Tooltip：简短提示
  - Helper text：下方说明
  - 示例值：placeholder 或下方"例如"

提交：
  - 主按钮：右下 / 底部
  - 取消：主按钮左侧
  - 保存草稿：可选
  - 提交后：成功提示 + 跳转 或 错误提示

错误恢复：
  - 错误字段聚焦
  - 错误信息靠近字段
  - 不清空已填内容
```

### 2. 数据表格（Data Table）

```text
列：
  - 主列：宽度自适应
  - 操作列：固定右侧
  - 可配置列（用户可选显示）

排序：
  - 列头点击切换升降序
  - 当前排序列高亮
  - 多列排序（高级功能）

筛选：
  - 列头筛选（下拉菜单）
  - 顶部筛选栏（多字段组合）
  - 已选筛选条件可见且可删

分页：
  - 底部居中
  - 每页数量可选（10/20/50/100）
  - 显示当前/总数

批量操作：
  - 复选框列（最左）
  - 全选 + 跨页选择
  - 批量操作栏（顶部固定）

行操作：
  - Hover 显示
  - 主操作 + 次操作（下拉）
  - 危险操作分离

空状态：
  - 完全无数据：引导创建
  - 筛选无结果：清除筛选

加载：
  - Skeleton（首次）
  - 刷新（保留旧数据）

行内编辑：
  - 双击启用
  - Esc 取消
  - Enter 保存
  - 修改未保存有视觉提示
```

### 3. 导航（Navigation）

```text
顶部导航：
  - Logo（可点击回首页）
  - 主菜单（最多 7 项）
  - 全局搜索
  - 通知 / 用户头像

侧边栏：
  - 多级菜单（最多 3 级）
  - 当前位置高亮
  - 可折叠
  - 移动端转抽屉式

面包屑：
  - 位置：内容区顶部
  - 当前页面文字（不可点）
  - 上级页面链接（可点）

Tab 页：
  - 顶部对齐
  - 当前 Tab 下划线 + 加粗
  - URL 同步（刷新保留状态）
```

### 4. 危险操作

```text
原则：
  - 视觉警示（红色）
  - 二次确认
  - 可撤销（提供撤销窗口）
  - 操作日志（可追溯）

确认对话框：
  - 标题：明确说明影响（"删除 5 个用户？"）
  - 内容：列出影响 + 不可恢复警告
  - 按钮：左"取消" 右"危险操作"（红色）
  - 输入确认（高危）："请输入 DELETE 确认"

撤销：
  - 删除后 5~10 秒可撤销
  - Toast 提示 + 撤销按钮
  - 超时后才真正删除

操作日志：
  - 谁 / 什么时间 / 做了什么 / 影响范围
  - 可查询（详情页）
```

### 5. 通知和反馈

```text
Toast（轻量提示）：
  - 位置：右下或顶部居中
  - 时长：3~5 秒
  - 类型：成功 / 警告 / 错误 / 信息
  - 操作：可选"撤销"按钮

Banner（页面级）：
  - 顶部固定
  - 系统级公告 / 持久警告

Alert（对话框）：
  - 阻塞式
  - 严重错误 / 重要确认

Empty State：
  - 插图（不要用 AI 通用图）
  - 标题：解释原因
  - 描述：下一步建议
  - 主操作：引导创建/导入

Progress：
  - 长操作（>3s）必须显示
  - 进度条（可估算）
  - Spinner（不可估算）
  - 文字描述（"正在导入第 30/100 条"）
```

### 6. 搜索

```text
全局搜索：
  - 顶部导航中
  - 快捷键（Cmd+K / Ctrl+K）
  - 结果分组（按类型）
  - 历史记录 / 推荐

筛选搜索：
  - 列表页顶部
  - 多字段组合
  - URL 同步

搜索建议：
  - 实时联想
  - 高亮匹配
  - 最近搜索
```

## 输出格式

```markdown
## 企业模式应用：[页面名]

### 选用模式
- 表单：双列 + 分组
- 表格：主列 + 操作列 + 批量操作
- 导航：顶部 + 侧边栏 + 面包屑

### 表单设计
[字段清单 + 校验规则 + 错误处理]

### 表格设计
[列定义 + 排序/筛选/分页 + 行操作]

### 危险操作
[二次确认 + 撤销窗口 + 操作日志]
```

## 工作流程

```text
1. 识别页面类型（列表/详情/表单/仪表盘）
2. 选择对应的企业模式
3. 应用模式的标准结构
4. 根据业务调整细节
5. 检查危险操作是否有保护
6. 输出模式应用说明
```

## 质量自检

```text
□ 表单是否有错误恢复机制
□ 表格是否覆盖所有状态（空/错/加载）
□ 导航是否清晰（用户知道在哪）
□ 危险操作是否有二次确认 + 撤销
□ 通知是否合适（不打扰但能看见）
□ 搜索是否够强（高频功能）
```

## 常见坑

1. **表单没有错误恢复**——清空已填字段
2. **表格批量操作隔在三层菜单里**
3. **导航当前位置不高亮**——用户迷路
4. **删除直接执行不确认**——用户误删无法恢复
5. **Toast 时长过短**——用户没看到就消失
6. **空状态只是空白**——没有引导
7. **进度无文字描述**——用户不知道还要等多久

## 配套模板

- `templates/form-pattern-template.md`
- `templates/data-table-pattern-template.md`
- `templates/navigation-pattern-template.md`
- `templates/ui-pattern-library-template.md`

## 与其他 skill 的协作

```text
上游：
  page-structure → 提供页面骨架

平行：
  component-states → 详细状态
  design-system-mapping → 参考成熟设计系统
  accessibility → 企业产品对可访问性要求高

下游：
  design-handoff → 模式应用交接前端
```