You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.3 KiB

Raw Blame History Unescape Escape

品牌列表页面

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

1. 基本信息

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

2. 界面布局

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

3. 查询条件

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

4. 列表字段

字段名	列宽	排序	超长处理	对齐
品牌名称	-	y	tooltip	left
状态	-	-	-	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：

{ "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）：