# 品牌列表页面

> 最后更新：2026-04-25
> 状态：已设计

---

### 1. 基本信息

| 项 | 值 |
|----|-----|
| 路由 | /brand |
| 权限 | admin |
| 入口 | 侧边栏品牌模板 |
| 面包屑 | 首页 / 品牌模板管理 |

### 2. 界面布局

┌──────────────────────────────────────────────────────────┐
│ [面包屑] 首页 / 品牌模板管理                               │
├──────────────────────────────────────────────────────────┤
│ [操作栏]  [+ 新增品牌]                                    │
├──────────────────────────────────────────────────────────┤
│ [列表区]                                                  │
│ 品牌名称     | 状态 | 映射字段数 | 操作                    │
│ FANUC       | 启用 | 16       | [编辑][禁用][复制]        │
│ SIEMENS     | 启用 | 12       | [编辑][禁用][复制]        │
│ MITSUBISHI  | 停用 | 8        | [编辑][启用][复制]        │
└──────────────────────────────────────────────────────────┘

### 3. 查询条件

无（品牌数量少，无需筛选）。

### 4. 列表字段

| 字段名 | 列宽 | 排序 | 超长处理 | 对齐 |
|--------|------|------|---------|------|
| 品牌名称 | - | y | tooltip | center |
| 状态 | - | - | - | center |
| 映射字段数 | - | - | - | center |
| 操作 | 180 | - | - | center |

> 列宽规则见 `02-前端全局规范.md` el-table列宽均分规则：数据列不设width自动均分，操作列固定180。

### 5. 操作按钮

| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|------|---------|------|---------|---------|
| 新增品牌 | brand:create | 页头 | 始终 | 打开新增页 |
| 编辑 | brand:update | 行操作 | 始终 | 跳转编辑页 |
| 启用/禁用 | brand:toggle | 行操作 | 始终 | 确认->切换状态 |
| 复制 | brand:copy | 行操作 | 始终 | 复制模板到新增页 |

### 6. 弹窗规格

无弹窗，使用独立编辑页。

### 7. 状态机

品牌is_enabled：
- 1(启用): el-tag success -> 可编辑/禁用/复制
- 0(停用): el-tag danger -> 可编辑/启用/复制

### 8. 交互流程

- 加载：请求品牌列表->渲染表格
- 新增：跳转新增编辑页(/brand/create)
- 编辑：跳转编辑页(/brand/:id/edit)
- 启用/禁用：确认框->调API->刷新列表
- 复制：复制品牌模板数据到新增页

### 9. 空状态

列表无数据：el-empty 暂无品牌数据，点击新增品牌添加

### 10. 接口引用与数据结构

> Mock/正式API的URL、HTTP方法均定义在 `03-API接口设计.md` §3.4 端点清单，本节仅引用编号并定义返回数据结构。

#### 接口引用

| 接口名称 | 端点编号 | 界面用途 |
|---------|---------|---------|
| 品牌列表 | §3.4 #1 | 品牌表格渲染 |
| 新增品牌 | §3.4 #3 | 新增弹窗保存 |
| 删除品牌 | §3.4 #5 | 删除操作 |
| 复制品牌 | §3.4 #6 | 复制操作 |
| 启停品牌 | §3.4 #7 | 启停切换 |

#### 数据结构

**品牌列表（§3.4 #1）：**

Response：
```json
{ "code": 0, "data": { "items": [
  { "id": 1, "brandName": "FANUC", "deviceField": "device", "tagsPath": "tags", "isEnabled": 1, "fieldCount": 16 },
  { "id": 2, "brandName": "SIEMENS", "deviceField": "device", "tagsPath": "tags", "isEnabled": 1, "fieldCount": 12 },
  { "id": 3, "brandName": "MITSUBISHI", "deviceField": "device", "tagsPath": "tags", "isEnabled": 0, "fieldCount": 8 }
]}}
```

**新增品牌（§3.4 #3）/ 删除品牌（§3.4 #5）/ 复制品牌（§3.4 #6）/ 启停品牌（§3.4 #7）：**

Response：
```json
{ "code": 0, "message": "success", "data": null }
```

### 10. 数据需求

> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。

| 数据需求 | 草案对应 | 说明 |
|---------|---------|------|
| 品牌列表 | cnc_brand | 主表 |
| 映射字段数 | cnc_brand_field_mapping | 按brand_id计数 |