# 系统设置页面

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

---

### 1. 基本信息

| 项 | 值 |
|----|-----|
| 路由 | /settings |
| 权限 | admin |
| 入口 | 侧边栏系统设置 |
| 面包屑 | 首页 / 系统设置 |

### 2. 界面布局

```
┌──────────────────────────────────────────────────────────┐
│ [面包屑] 首页 / 系统设置                                   │
├──────────────────────────────────────────────────────────┤
│ [Tab切换]  [系统配置]  [车间管理]  [修改密码]               │
├──────────────────────────────────────────────────────────┤
│                                                          │
│ ====== Tab1: 系统配置 ======                             │
│                                                          │
│ [查询条件区]                                              │
│ 关键字[___________]                          [查询] [重置]  │
│                                                          │
│ [列表区]                                                  │
│ 配置项           | 值              | 类型  | 说明    | 操作 │
│ ping_interval    | 60              | number| Ping间隔| [编辑] │
│ collect_retry    | 3               | number| 重试次数| [编辑] │
│ daily_summary    | 01:00           | string| 汇总时间| [编辑] │
│ log_retention    | 90              | number| 日志保留| [编辑] │
│ api_token        | ********        | string| API Token| [编辑][重置] │
│                                                          │
│ ====== Tab2: 车间管理 ======                             │
│                                                          │
│ [+ 新增车间]                                              │
│ [列表区]                                                  │
│ 车间名称  | 排序 | 状态 | 操作                             │
│ A栋      | 1    | 启用 | [编辑][删除]                      │
│ B栋      | 2    | 启用 | [编辑][删除]                      │
│ C栋      | 3    | 停用 | [编辑][启用]                      │
│                                                          │
│ ====== Tab3: 修改密码 ======                             │
│                                                          │
│ ┌──────────────────────────┐                              │
│ │ 当前密码  [__________]   │                              │
│ │ 新密码    [__________]   │                              │
│ │ 确认密码  [__________]   │                              │
│ │           [确认修改]      │                              │
│ └──────────────────────────┘                              │
└──────────────────────────────────────────────────────────┘
```

### 3. Tab1-系统配置

#### 查询条件

| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|------|------|------|--------|------|------|
| 关键字 | el-input placeholder=配置项/说明 | 否 | 空 | - | 无 |

#### 列表字段

| 字段名 | 列宽 | 排序 | 超长处理 | 对齐 |
|--------|------|------|---------|------|
| 配置项(config_key) | - | - | tooltip | center |
| 配置值(config_value) | - | - | tooltip | center |
| 值类型(value_type) | - | - | - | center |
| 说明(description) | - | - | tooltip | center |
| 操作 | 160 | - | - | center |

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

#### 操作按钮

| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|------|---------|------|---------|---------|
| 编辑 | settings:update | 行操作 | 始终 | 打开编辑弹窗 |
| 重置Token | settings:reset-token | 行操作 | config_key=api_token或collector_api_key | 确认"确定重置{配置项}？重置后需同步更新相关服务配置。 "->调API |

#### 弹窗规格

**编辑配置项弹窗：**
- 宽度500px，标题=编辑配置项

| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|------|------|------|--------|------|------|
| 配置项 | el-input disabled | - | config_key | - | - |
| 配置值 | el-input(根据value_type切换number/string) | 是 | 当前值 | 必填 | value_type=number时控件为el-input-number |
| 说明 | el-input disabled | - | description | - | - |

说明：敏感字段(api_token/collector_api_key)显示为"********"，编辑弹窗中也默认遮蔽，点击眼睛图标切换可见。

### 4. Tab2-车间管理

#### 列表字段

| 字段名 | 列宽 | 排序 | 超长处理 | 对齐 |
|--------|------|------|---------|------|
| 车间名称 | - | - | tooltip | center |
| 排序 | - | y | - | center |
| 状态 | - | - | - | center |
| 操作 | 160 | - | - | center |

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

#### 操作按钮

| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|------|---------|------|---------|---------|
| 新增车间 | workshop:create | 页头 | 始终 | 打开新增弹窗 |
| 编辑 | workshop:update | 行操作 | 始终 | 打开编辑弹窗 |
| 删除 | workshop:delete | 行操作 | 启用状态且无关联机床 | 确认->删除 |
| 启用/停用 | workshop:toggle | 行操作 | 始终 | 确认->切换状态 |

#### 弹窗规格

**新增/编辑车间弹窗：**
- 宽度400px，标题=新增车间/编辑车间

| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|------|------|------|--------|------|------|
| 车间名称 | el-input maxlength=100 | 是 | - | 必填+唯一性 | - |
| 排序号 | el-input-number min=0 max=99 | 是 | 末尾 | 必填+正整数 | - |

### 5. Tab3-修改密码

#### 表单字段

| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|------|------|------|--------|------|------|
| 当前密码 | el-input type=password show-password | 是 | - | 必填 | - |
| 新密码 | el-input type=password show-password | 是 | - | 必填+长度8-32位 | - |
| 确认密码 | el-input type=password show-password | 是 | - | 必填+与新密码一致 | 新密码变化时重新校验 |

#### 操作按钮

| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|------|---------|------|---------|---------|
| 确认修改 | - | 表单底部 | 始终 | 校验通过->调API->成功提示+清空表单 |

### 6. 状态机

车间is_enabled：
- 1(启用): el-tag success -> 可编辑/停用/删除(无机床关联时)
- 0(停用): el-tag danger -> 可编辑/启用

删除前提：该车间下无机床（有关联机床的不可删除）

### 7. 交互流程

**Tab1-系统配置：**
- 加载：请求配置项列表->渲染
- 查询：关键字搜索->重置page=1->请求列表
- 编辑：弹窗->修改值->保存->关闭->刷新列表
- 重置Token：确认->调API重置->显示新值->提示"请同步更新相关服务配置"

**Tab2-车间管理：**
- 加载：请求车间列表->渲染（数据量极小，无需分页）
- 新增：弹窗->填写->保存->关闭->刷新
- 编辑：弹窗(回填)->修改->保存->关闭->刷新
- 删除：确认"确定删除车间【{名称}】？此操作不可恢复。 "->调API->刷新
- 启停：确认->调API->刷新

**Tab3-修改密码：**
- 填写表单->确认修改->校验->调API->成功提示"密码修改成功，请重新登录"->清除Token->跳转/login

### 8. 空状态

系统配置列表无数据：el-empty 暂无配置项
车间列表无数据：el-empty 暂无车间数据，点击新增车间添加

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

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

#### 接口引用

| 接口名称 | 端点编号 | 界面用途 |
|---------|---------|---------|
| 配置项列表 | §3.9 #1 | Tab1系统配置列表，渲染表格 |
| 编辑配置项 | §3.9 #2 | Tab1编辑弹窗保存 |
| 重置Token | §3.9 #3 | Tab1重置Token操作 |
| 车间列表 | §3.9 #4 | Tab2车间管理列表，渲染表格 |
| 新增车间 | §3.9 #5 | Tab2新增弹窗保存 |
| 编辑车间 | §3.9 #6 | Tab2编辑弹窗保存 |
| 删除车间 | §3.9 #7 | Tab2删除操作 |
| 启停车间 | §3.9 #8 | Tab2启停切换 |
| 修改密码 | §3.9 #9 | Tab3修改密码表单提交 |

#### 数据结构

**配置项列表（§3.9 #1）：**

Response：
```json
{ "code": 0, "data": { "items": [
  { "id": 1, "configKey": "ping_interval", "configValue": "60", "valueType": "number", "description": "Ping检测间隔(秒)" },
  { "id": 2, "configKey": "collect_retry_count", "configValue": "3", "valueType": "number", "description": "采集失败重试次数" },
  { "id": 3, "configKey": "collect_retry_interval", "configValue": "30", "valueType": "number", "description": "采集重试间隔(秒)" },
  { "id": 4, "configKey": "collect_fail_alert_threshold", "configValue": "5", "valueType": "number", "description": "连续失败N次触发告警" },
  { "id": 5, "configKey": "daily_summary_time", "configValue": "01:00", "valueType": "string", "description": "日终汇总执行时间" },
  { "id": 6, "configKey": "log_retention_days", "configValue": "90", "valueType": "number", "description": "原始采集日志保留天数" },
  { "id": 7, "configKey": "bigscreen_refresh_interval", "configValue": "10", "valueType": "number", "description": "大屏刷新间隔(秒)" },
  { "id": 8, "configKey": "api_token", "configValue": "********", "valueType": "string", "description": "前端API Token" },
  { "id": 9, "configKey": "collector_api_port", "configValue": "5800", "valueType": "number", "description": "采集服务管理API端口" },
  { "id": 10, "configKey": "collector_api_key", "configValue": "********", "valueType": "string", "description": "采集服务间通信API Key" }
]}}
```

**编辑配置项（§3.9 #2）：**

Request body：
```json
{ "id": 1, "configValue": "120" }
```

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

**重置Token（§3.9 #3）：**

Request body：
```json
{ "id": 8 }
```

Response：
```json
{ "code": 0, "data": { "configKey": "api_token", "newValue": "eyJhbGciOiJIUzI1NiJ9.new.token" }}
```

**车间列表（§3.9 #4）：**

Response：
```json
{ "code": 0, "data": { "items": [
  { "id": 1, "name": "A栋", "sortOrder": 1, "isEnabled": 1, "machineCount": 32 },
  { "id": 2, "name": "B栋", "sortOrder": 2, "isEnabled": 1, "machineCount": 28 },
  { "id": 3, "name": "C栋", "sortOrder": 3, "isEnabled": 0, "machineCount": 0 }
]}}
```

**新增车间（§3.9 #5）：**

Request body：
```json
{ "name": "D栋", "sortOrder": 4 }
```

Response：
```json
{ "code": 0, "message": "success", "data": { "id": 4, "name": "D栋" }}
```

**编辑车间（§3.9 #6）：**

Request body：
```json
{ "id": 1, "name": "A栋-新", "sortOrder": 1 }
```

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

**删除车间（§3.9 #7）：**

Request body：
```json
{ "id": 3 }
```

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

**启停车间（§3.9 #8）：**

Request body：
```json
{ "id": 3 }
```

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

**修改密码（§3.9 #9）：**

Request body：
```json
{ "currentPassword": "admin123", "newPassword": "newpass123" }
```

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

失败 Response（旧密码错误）：
```json
{ "code": 40001, "message": "当前密码不正确", "data": null }
```

### 10. 数据需求

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

| 数据需求 | 草案对应 | 说明 |
|---------|---------|------|
| 系统配置列表 | cnc_sys_config | 主表 |
| 编辑配置项 | cnc_sys_config.config_value | 按config_key更新 |
| 重置Token | cnc_sys_config | 生成新随机Token写入 |
| 车间列表 | cnc_workshop | 主表+关联机床数 |
| 车间名称唯一性 | cnc_workshop.name UNIQUE | 新增/编辑时校验 |
| 车间删除约束 | cnc_machine.workshop_id | 有关联机床时禁止删除 |
| 修改密码 | admin密码校验 | 验证旧密码+写入新密码哈希 |