# 模块详细设计规范

> DDS-Section: Frontend DDS - 7. 模块详细设计规范
> DDS-Lines: L586-L693

## 基本信息模块 (Basic Info)

| 字段 | 类型 | 只读模式 | 编辑模式 |
|:---|:---|:---|:---|
| 项目名称 | String | 文本展示 + 复制 | `v-text-field` |
| 命名空间 | String | 文本展示 + 复制 | `disabled` 不可编辑 |
| 省份 | Enum | 文本展示 | 级联选择器 |
| 城市 | Enum | 文本展示 | 级联选择器（依赖省份） |
| 项目性质 | Enum | 文本展示 | `v-select` |
| 行业组人员 | String | 文本展示 | `v-text-field` |
| 行业组电话 | String | 文本展示 | `v-text-field` |
| 项目描述 | String | 多行文本 | `v-textarea` |

## 部署业务模块 (Deployment Business)

| 字段 | 类型 | 只读模式 | 编辑模式 |
|:---|:---|:---|:---|
| 部署人姓名 | String | 文本展示 | `v-text-field` 或用户搜索 |
| 部署人电话 | String | 文本展示 | `v-text-field` |
| 部署系统 | Enum | 文本展示 | `v-select` |
| 系统版本 | String | 文本展示 | `v-text-field` |
| 业务入口 URL | String | 可点击链接 | `v-text-field` |
| 超管账号 | String | 文本展示 + 复制 | `v-text-field` |
| 超管密码 | Password | 脱敏 + 查看按钮 | `v-text-field` 密码输入 |

## 部署环境模块 (Deployment Environment)

| 字段 | 类型 | 只读模式 | 编辑模式 |
|:---|:---|:---|:---|
| 网络环境 | Enum | 文本展示 | `v-select` |
| 主公网 IP | String | 文本展示 + 复制 | `v-text-field` IP 校验 |
| 域名 URL | String | 可点击链接 | `v-text-field` |
| 启用 SSL | Boolean | 图标显示 | `v-switch` |
| 主机管理方式 | Enum | 文本展示 | `v-select` |
| 管理控制台 URL | String | 可点击链接 | `v-text-field` |
| 主机数量 | Number | 文本展示 | `v-text-field type=number` |
| CPU 总核数 | Number | 统计卡片 | `v-text-field type=number` |
| 内存总量 | Number | 统计卡片 | `v-text-field type=number` |
| 存储总量 | Number | 统计卡片 | `v-text-field type=number` |

## 中间件模块 (Middleware)

采用 **卡片网格 (Card Grid)** 设计。

### 数据结构

```typescript
interface MiddlewareFormItem {
  middleware_type: string
  public_ip: string
  public_port: number
  internal_ip: string
  internal_port: number
  admin_user: string
  admin_password?: string
}
```

### 只读模式
- 每个中间件一张卡片，响应式网格布局
- 卡片包含：类型图标 + 标题 + IP/Port 信息
- 图标映射逻辑：

```typescript
const MIDDLEWARE_ICONS: Record<string, string> = {
  'mysql': 'mdi-database',
  'redis': 'mdi-database-clock',
  'emqx': 'mdi-broadcast',
  'minio': 'mdi-bucket',
  'influxdb': 'mdi-chart-timeline-variant',
  'nacos': 'mdi-cog-outline',
  'k8s-dashboard': 'mdi-kubernetes'
}
```

### 编辑模式
- 现有卡片右上角显示「编辑」「删除」按钮
- 列表末尾显示「添加中间件」虚线框卡片
- 点击添加/编辑弹出对话框：
  - 类型选择：`v-combobox` 支持预设 + 自定义
  - 选择预设类型时自动填充默认端口

## 主机管理模块 (Hosts Management)

- 复用 `HostsManagement.vue` 组件
- 支持表格展示所有主机信息
- 编辑模式支持添加/删除主机

## 授权信息模块 (Authorization) - SuperAdmin Only

| 功能 | 说明 |
|:---|:---|
| TOTP 密钥展示 | 二维码 + 文本形式 |
| 授权类型切换 | 永久/限时 |
| 授权天数设置 | 数字输入 |
| 下发授权 | 调用 Exchange-Hub 接口 |
| 撤销授权 | 调用 Exchange-Hub 接口 |

## 版本历史模块 (Version History) - SuperAdmin Only

| 功能 | 说明 |
|:---|:---|
| 版本列表 | 时间轴形式展示 |
| 版本详情 | 点击查看完整快照 |
| 版本对比 | 选择两个版本进行 Diff |
| 工单关联 | 点击跳转关联工单 |
