# 品牌列表页面 > 最后更新:2026-04-25 > 状态:已设计 --- ### 1. 基本信息 | 项 | 值 | |----|-----| | 路由 | /brand | | 权限 | admin | | 入口 | 侧边栏品牌模板 | | 面包屑 | 首页 / 品牌模板管理 | ### 2. 界面布局 ┌──────────────────────────────────────────────────────────┐ │ [面包屑] 首页 / 品牌模板管理 │ ├──────────────────────────────────────────────────────────┤ │ [操作栏] [+ 新增品牌] │ ├──────────────────────────────────────────────────────────┤ │ [列表区] │ │ 品牌名称 | 状态 | 映射字段数 | 操作 │ │ FANUC | 启用 | 16 | [编辑][禁用][复制] │ │ SIEMENS | 启用 | 12 | [编辑][禁用][复制] │ │ MITSUBISHI | 停用 | 8 | [编辑][启用][复制] │ └──────────────────────────────────────────────────────────┘ ### 3. 查询条件 无(品牌数量少,无需筛选)。 ### 4. 列表字段 | 字段名 | 列宽 | 排序 | 超长处理 | 对齐 | |--------|------|------|---------|------| | 品牌名称 | 150px | y | tooltip | left | | 状态 | 80px | - | - | center | | 映射字段数 | 100px | - | - | center | | 操作 | 180px | - | - | center | ### 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数据 **GET /api/admin/brand 品牌列表:** ```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 } ]}} ### 10. 数据需求 > 以下为本页面需要的数据,数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。 | 数据需求 | 草案对应 | 说明 | |---------|---------|------| | 品牌列表 | cnc_brand | 主表 | | 映射字段数 | cnc_brand_field_mapping | 按brand_id计数 |