04-前端设计

# 前端设计

> **文档版本**: v1.0.0
> **创建日期**: 2024-01-25
> **最后更新**: 2024-01-25
> **维护人**: 未来鸟FutureBird码巢企业服务引擎开发组
> **状态**: [最新]

> **搜索标签**: 开放平台, 前端设计, 页面设计, UI规范

---

## &#128203; 目录

- [1. 页面结构](#1-页面结构)
- [2. 页面设计](#2-页面设计)
- [3. 交互规范](#3-交互规范)
- [4. 响应式设计](#4-响应式设计)

---

## 1. 页面结构

### 1.1 入口路径

```
管理后台: /admin
└── 开放平台: /admin/open-platform
    ├── 概览          /overview
    ├── 应用管理      /applications
    ├── 密钥管理      /api-keys
    ├── API文档       /docs
    ├── 权限配置      /permissions
    ├── 调用日志      /logs
    ├── 回调管理      /webhooks
    ├── 统计分析      /analytics
    └── 设置          /settings
```

### 1.2 页面布局

```
┌─────────────────────────────────────────────────────────────────┐
│  Logo    管理平台   ▼  开放平台                    用户头像 ▼   │
├────────────┬────────────────────────────────────────────────────┤
│            │                                                    │
│  概览      │              内容区域                               │
│            │                                                    │
│  应用管理  │  ┌──────────────────────────────────────────────┐ │
│   ├ 应用列表│  │                                              │ │
│   └ 创建应用│  │              页面内容                        │ │
│            │  │                                              │ │
│  密钥管理  │  │                                              │ │
│            │  │                                              │ │
│  API文档   │  │                                              │ │
│            │  │                                              │ │
│  权限配置  │  │                                              │ │
│            │  │                                              │ │
│  调用日志  │  └──────────────────────────────────────────────┘ │
│            │                                                    │
│  回调管理  │                                                    │
│            │                                                    │
│  统计分析  │                                                    │
│            │                                                    │
│  设置      │                                                    │
│            │                                                    │
└────────────┴────────────────────────────────────────────────────┘
```

---

## 2. 页面设计

### 2.1 概览页

#### 数据卡片

| 指标 | 说明 | 样式 |
|------|------|------|
| 应用总数 | 已注册应用数量 | 数字 + 趋势箭头 |
| 今日调用 | 今日API调用次数 | 数字 + 趋势箭头 |
| 成功率 | API调用成功率 | 百分比 + 颜色标识 |
| 活跃密钥 | 正在使用的密钥数 | 数字 + 趋势箭头 |

#### 快捷入口

| 入口 | 功能 |
|------|------|
| 创建应用 | 跳转创建应用页面 |
| 生成密钥 | 跳转密钥管理页面 |
| 查看文档 | 跳转API文档页面 |
| 配置回调 | 跳转回调管理页面 |

### 2.2 应用管理页

#### 应用列表

| 列名 | 说明 |
|------|------|
| 应用图标 | 应用标识 |
| 应用名称 | 应用名称 |
| 应用类型 | ERP/电商/OA/财务/其他 |
| 状态 | 待审核/已通过/已拒绝/已停用 |
| 创建时间 | 创建日期 |
| 操作 | 详情/编辑/密钥/删除 |

#### 应用状态

| 状态 | 标识颜色 | 说明 |
|------|---------|------|
| 待审核 | 黄色 | 等待管理员审核 |
| 已通过 | 绿色 | 审核通过，正常使用 |
| 已拒绝 | 红色 | 审核拒绝 |
| 已停用 | 灰色 | 管理员停用 |

### 2.3 密钥管理页

#### 密钥列表

| 列名 | 说明 |
|------|------|
| 密钥ID | 密钥标识 |
| 所属应用 | 绑定的应用 |
| 环境 | 测试/生产 |
| 状态 | 正常/禁用/过期/已撤销 |
| 创建时间 | 创建日期 |
| 操作 | 查看/轮换/禁用 |

#### 密钥详情

| 字段 | 说明 |
|------|------|
| 密钥ID | 公钥标识 |
| API Key | 完整公钥（可复制） |
| API Secret | 私钥（仅显示一次） |
| 环境 | 测试/生产 |
| 状态 | 当前状态 |
| 创建时间 | 创建时间 |
| 过期时间 | 到期时间 |
| 今日调用 | 今日调用次数 |
| 成功率 | 调用成功率 |

### 2.4 API文档页

#### 文档结构

| 模块 | 说明 |
|------|------|
| 认证接口 | 令牌获取、刷新 |
| 企业管理 | 企业信息、列表 |
| 人事管理 | 员工增删改查 |
| 工资管理 | 工资单查询、同步 |

#### 文档内容

| 内容 | 说明 |
|------|------|
| 接口名称 | 接口描述 |
| 请求方法 | GET/POST/PUT/DELETE |
| 请求路径 | 接口URL |
| 请求参数 | 参数列表 |
| 请求示例 | 请求体示例 |
| 响应示例 | 响应体示例 |

### 2.5 调用日志页

#### 日志列表

| 列名 | 说明 |
|------|------|
| 时间 | 调用时间 |
| 应用 | 调用的应用 |
| 接口 | 调用的接口 |
| 状态 | HTTP状态码 |
| 耗时 | 响应时间 |
| 操作 | 查看详情 |

#### 日志详情

| 内容 | 说明 |
|------|------|
| 请求信息 | 方法、路径、参数 |
| 认证信息 | API Key、签名 |
| 响应信息 | 状态码、响应体 |
| 性能信息 | 耗时、时间戳 |

### 2.6 回调管理页

#### 回调列表

| 列名 | 说明 |
|------|------|
| 回调名称 | 名称标识 |
| 回调地址 | Webhook地址 |
| 订阅事件 | 订阅的事件类型 |
| 状态 | 正常/暂停/失败 |
| 操作 | 测试/编辑/删除 |

---

## 3. 交互规范

### 3.1 状态标识

| 状态 | 标识 | 颜色 |
|------|------|------|
| 正常/启用 | ● | text-success |
| 警告 | ◐ | text-warning |
| 错误/禁用 | ○ | text-destructive |
| 待处理 | ○ | text-muted |

### 3.2 操作按钮

| 类型 | 样式 | 使用场景 |
|------|------|---------|
| 主要操作 | btn-primary | 创建、保存、确认 |
| 次要操作 | btn-secondary | 取消、返回 |
| 危险操作 | btn-destructive | 删除、禁用 |
| 链接操作 | btn-link | 详情、编辑 |

### 3.3 表单验证

| 规则 | 说明 |
|------|------|
| 必填校验 | 不能为空 |
| 格式校验 | 符合指定格式 |
| 范围校验 | 在有效范围内 |
| 唯一性校验 | 不与已有数据重复 |

### 3.4 加载状态

| 场景 | 样式 |
|------|------|
| 页面加载 | 骨架屏 |
| 按钮加载 | 旋转图标 + 文字 |
| 数据加载 | 表格骨架 |

---

## 4. 响应式设计

### 4.1 断点定义

| 断点 | 宽度 | 布局 |
|------|------|------|
| xs | < 640px | 单列，侧边栏收起 |
| sm | ≥ 640px | 单列，侧边栏抽屉 |
| md | ≥ 768px | 双列布局 |
| lg | ≥ 1024px | 侧边栏固定 |
| xl | ≥ 1280px | 内容区最大宽 |

### 4.2 移动端适配

- 侧边栏转为抽屉式导航
- 表格转为卡片列表
- 对话框全屏显示
- 底部固定操作栏