docs(odf-v1021): Add optical box rack type specifications and design documentation
- Add design specification for ODF v1.0.2.1 optical box rack type support - Add requirements document outlining optical box feature scope and constraints - Add task breakdown for implementation across backend, frontend, and database layers - Add design mockups for rack list page and optical box detail page layout - Add requirements document detailing dual-column layout for optical box racks - Document port naming conventions for optical box (A-1, B-2) vs ODF (1-1, 2-2) formats - Establish database schema changes for rack_type and port count fields - Define API contract changes for OdfRacksDto with new type and port count properties
This commit is contained in:
zpc
parent
a96ccf846c
commit
2b46490d54
197
.kiro/specs/odf-v1021-optical-box/design.md
Normal file
197
.kiro/specs/odf-v1021-optical-box/design.md
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
# 设计：ODF v1.0.2.1 - 光交箱机架类型支持
|
||||
|
||||
## 设计图参考
|
||||
- `docs/v1.0.2.1/设计图.png` — 机架列表页（机房详情），机架卡片右侧显示"类型：ODF"或"类型：光交箱"，光交箱卡片有浅蓝色左边框
|
||||
- `docs/v1.0.2.1/光交箱机架详情页.png` — 光交箱机架详情页，每个框内左右两栏并排显示
|
||||
|
||||
## 涉及文件
|
||||
|
||||
### 后端（C# .NET）
|
||||
- `server/ZR.Model/Business/OdfRacks.cs` - 机架模型，新增字段
|
||||
- `server/ZR.Model/Business/Dto/OdfRacksDto.cs` - 机架 DTO，新增字段
|
||||
- `server/ZR.Model/Business/Dto/OdfPortsDto.cs` - 端口 DTO，导入导出适配
|
||||
- `server/ZR.Service/Business/OdfRacksService.cs` - 机架服务层
|
||||
- `server/ZR.Vue/src/views/business/OdfRacks.vue` - 管理后台机架列表页
|
||||
- `server/ZR.Vue/src/components/business/OdfRackForm.vue` - 管理后台机架表单
|
||||
|
||||
### 前端（uni-app）
|
||||
- `odf-uniapp/pages/rack/index.vue` - 机架列表页（机房详情）
|
||||
- `odf-uniapp/pages/rack-detail/index.vue` - 机架详情页（核心改动）
|
||||
- `odf-uniapp/services/machine.js` - API 服务层
|
||||
|
||||
## 数据库变更
|
||||
|
||||
### odf_racks 表新增字段
|
||||
```sql
|
||||
ALTER TABLE odf_racks ADD COLUMN rack_type INT NOT NULL DEFAULT 0 COMMENT '机架类型：0=ODF机架, 1=光交箱';
|
||||
ALTER TABLE odf_racks ADD COLUMN left_ports_count INT NULL COMMENT '左侧端子数量（光交箱侧）';
|
||||
ALTER TABLE odf_racks ADD COLUMN right_ports_count INT NULL COMMENT '右侧端子数量（ODF侧）';
|
||||
```
|
||||
|
||||
## 后端模型变更
|
||||
|
||||
### OdfRacks.cs 新增属性
|
||||
```csharp
|
||||
/// <summary>
|
||||
/// 机架类型：0=ODF机架, 1=光交箱
|
||||
/// </summary>
|
||||
public int RackType { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 左侧端子数量（光交箱侧）
|
||||
/// </summary>
|
||||
public int? LeftPortsCount { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 右侧端子数量（ODF侧）
|
||||
/// </summary>
|
||||
public int? RightPortsCount { get; set; }
|
||||
```
|
||||
|
||||
### OdfRacksDto.cs 新增属性
|
||||
```csharp
|
||||
public int RackType { get; set; }
|
||||
public int? LeftPortsCount { get; set; }
|
||||
public int? RightPortsCount { get; set; }
|
||||
```
|
||||
|
||||
## 管理后台变更
|
||||
|
||||
### OdfRackForm.vue
|
||||
- 新增"机架类型"选择器（el-select），选项：ODF机架(0) / 光交箱(1)
|
||||
- 新增"左侧端子数"和"右侧端子数"输入框（el-input-number）
|
||||
- 光交箱类型时标签显示为"光交箱端子数"和"ODF端子数"
|
||||
|
||||
### OdfRacks.vue
|
||||
- 表格新增"机架类型"列，使用标签展示（ODF机架 / 光交箱）
|
||||
|
||||
## uni-app 前端变更
|
||||
|
||||
### rack/index.vue（机架列表页 - 参考设计图2）
|
||||
|
||||
根据设计图，机架卡片布局为：
|
||||
- 卡片内左侧显示机架名称，右侧显示"类型：ODF"或"类型：光交箱"
|
||||
- 光交箱类型的卡片有浅蓝色左边框（`border-left: 6rpx solid #1A73EC`）区分
|
||||
- 布局为 flex row，justify-content: space-between
|
||||
|
||||
```html
|
||||
<view class="rack-card" v-for="item in rackList" :key="item.id"
|
||||
:class="{ 'rack-card-optical': item.rackType === 1 }"
|
||||
@click="goDetail(item)">
|
||||
<text class="rack-name">{{ item.rackName }}</text>
|
||||
<text class="rack-type">类型：{{ item.rackType === 1 ? '光交箱' : 'ODF' }}</text>
|
||||
</view>
|
||||
```
|
||||
|
||||
样式：
|
||||
```css
|
||||
.rack-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* ...existing styles... */
|
||||
}
|
||||
.rack-card-optical {
|
||||
border-left: 6rpx solid #1A73EC;
|
||||
}
|
||||
.rack-type {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
```
|
||||
|
||||
### rack-detail/index.vue（机架详情页 - 核心改动，参考设计图1）
|
||||
|
||||
根据设计图，详情页布局如下：
|
||||
|
||||
#### 顶部信息区
|
||||
- 导航栏标题：`{rackName}详情`
|
||||
- 导航栏下方显示：左侧"机房名称机房名称"，右侧"类型：类型名称"
|
||||
- 图例栏：绿色=已连接，红色=已断开
|
||||
|
||||
#### 光交箱类型 - 框内双栏并排布局（核心）
|
||||
|
||||
每个 frame-card 内部分为**左右两栏并排**（flex row）：
|
||||
|
||||
- **左栏（光交箱端子）**：粉色背景 `#FFB6C1` / `#FFC0CB`
|
||||
- 6行，每行12个端口
|
||||
- 行命名：第1行=A，第2行=B，第3行=C，第4行=D，第5行=E，第6行=F
|
||||
- 端口命名：A-1, A-2, A-3...A-12；B-1, B-2...B-12；以此类推
|
||||
- 行号显示在行左侧（1, 2, 3, 4, 5, 6）
|
||||
|
||||
- **右栏（ODF端子）**：浅蓝色背景 `#B3E5FC` / `#E0F7FA`
|
||||
- 6行，每行12个端口
|
||||
- 端口命名：1-1, 1-2...1-12；2-1, 2-2...2-12；3-1, 3-2...3-12；以此类推
|
||||
- 行号显示在行左侧（1, 2, 3, 4, 5, 6）
|
||||
|
||||
- 左右两栏之间无明显间距，紧密排列
|
||||
- 整个框可横向滚动（scroll-x）
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ 1框 │
|
||||
│ ┌──────────────────────────┐┌──────────────────────────────────┐│
|
||||
│ │ 粉色背景（光交箱端子） ││ 浅蓝色背景（ODF端子） ││
|
||||
│ │ 1 ││ 1 ││
|
||||
│ │ ● ● ● ● ● ● ● ● ● ● ● ●││ ● ● ● ● ● ● ● ● ● ● ● ● ││
|
||||
│ │ A-1 A-2 A-3 ... A-12 ││ 1-1 1-1 1-1 ... 1-12 ││
|
||||
│ │ 2 ││ 2 ││
|
||||
│ │ ● ● ● ● ● ● ● ● ● ● ● ●││ ● ● ● ● ● ● ● ● ● ● ● ● ││
|
||||
│ │ B-1 B-2 ... B-12 ││ 2-1 2-2 ... 2-12 ││
|
||||
│ │ ... ││ ... ││
|
||||
│ │ 6 ││ 6 ││
|
||||
│ │ ● ● ● ● ● ● ● ● ● ● ● ●││ ● ● ● ● ● ● ● ● ● ● ● ● ││
|
||||
│ │ F-1 ... F-12││ 1-1 ... 1-12 ││
|
||||
│ └──────────────────────────┘└──────────────────────────────────┘│
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### ODF 类型 - 保持现有布局不变
|
||||
|
||||
现有的单栏布局，白色背景，不做任何改动。
|
||||
|
||||
#### 端子命名逻辑
|
||||
|
||||
```javascript
|
||||
// 光交箱侧端子命名（左栏）
|
||||
// 行按 A/B/C/D/E/F 命名，端口为 A-1, A-2, A-3...
|
||||
function getOpticalBoxPortName(rowIndex, portIndex) {
|
||||
const rowLetter = String.fromCharCode(65 + rowIndex) // A=65, B=66...
|
||||
return `${rowLetter}-${portIndex + 1}` // A-1, A-2, B-1, B-2...
|
||||
}
|
||||
|
||||
// ODF侧端子命名（右栏）
|
||||
// 行按 1/2/3/4/5/6 命名，端口为 1-1, 1-2, 2-1, 2-2...
|
||||
function getOdfPortName(rowIndex, portIndex) {
|
||||
return `${rowIndex + 1}-${portIndex + 1}` // 1-1, 1-2, 2-1, 2-2...
|
||||
}
|
||||
```
|
||||
|
||||
#### 参数传递
|
||||
|
||||
`goDetail` 跳转时需传递 `rackType` 参数：
|
||||
```javascript
|
||||
function goDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/rack-detail/index?rackId=' + item.id
|
||||
+ '&rackName=' + encodeURIComponent(item.rackName)
|
||||
+ '&roomName=' + encodeURIComponent(roomName.value)
|
||||
+ '&rackType=' + (item.rackType || 0)
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### services/machine.js
|
||||
- `getRackList` 返回数据已包含 rackType（后端 DTO 自动映射，无需改动）
|
||||
- `getRackDetail` 返回数据需包含机架类型信息，可能需要后端调整接口或通过 URL 参数传递
|
||||
|
||||
## 导入导出适配
|
||||
|
||||
### 导入
|
||||
- 导入模板新增"机架类型"列
|
||||
- 解析时根据机架类型判断端子命名格式
|
||||
- 光交箱端子支持 A-1、B-2 格式的行号/端口号解析
|
||||
|
||||
### 导出
|
||||
- 导出数据新增"机架类型"列
|
||||
- 光交箱端子按 A-1 格式导出行号和端口名
|
||||
50
.kiro/specs/odf-v1021-optical-box/requirements.md
Normal file
50
.kiro/specs/odf-v1021-optical-box/requirements.md
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
# 需求：ODF v1.0.2.1 - 光交箱机架类型支持
|
||||
|
||||
## 需求来源
|
||||
#[[file:docs/v1.0.2.1/需求文档.md]]
|
||||
|
||||
## 概述
|
||||
在现有 ODF 机架管理系统基础上，新增"光交箱"机架类型支持。管理后台可选择创建"ODF机架"或"光交箱"类型，前端详情页根据类型展示不同布局。
|
||||
|
||||
## 需求列表
|
||||
|
||||
### REQ-1: 机架类型字段扩展
|
||||
- 数据库 `odf_racks` 表新增 `rack_type` 字段（0=ODF机架, 1=光交箱）
|
||||
- 后端模型 `OdfRacks`、`OdfRacksDto` 同步新增 `RackType` 属性
|
||||
- 默认值为 0（ODF机架），兼容已有数据
|
||||
|
||||
### REQ-2: 端子数量可配置
|
||||
- `odf_racks` 表新增 `left_ports_count`（左侧端子数）和 `right_ports_count`（右侧端子数）字段
|
||||
- 光交箱类型：左侧为光交箱端子，右侧为 ODF 端子，数量分别可配置
|
||||
- ODF 类型：也支持配置端子数量
|
||||
- 后端模型同步新增对应属性
|
||||
|
||||
### REQ-3: 管理后台创建机架时选择类型
|
||||
- `OdfRackForm.vue` 表单新增"机架类型"下拉选择（ODF机架 / 光交箱）
|
||||
- 新增左侧端子数、右侧端子数输入框
|
||||
- 光交箱类型时显示左右端子数配置；ODF 类型时显示端子数配置
|
||||
|
||||
### REQ-4: 管理后台机架列表显示类型
|
||||
- `OdfRacks.vue` 列表表格新增"机架类型"列
|
||||
|
||||
### REQ-5: uni-app 机房详情页（机架列表）显示类型
|
||||
- `odf-uniapp/pages/rack/index.vue` 每个机架卡片显示类型标识（ODF机架 / 光交箱）
|
||||
|
||||
### REQ-6: uni-app 机架详情页显示类型
|
||||
- `odf-uniapp/pages/rack-detail/index.vue` 导航栏或顶部区域显示当前机架类型
|
||||
|
||||
### REQ-7: 光交箱机架详情页双侧布局
|
||||
- 光交箱类型的机架详情页，每个框内分为左右两侧
|
||||
- 左侧为光交箱端子（背景色区分），右侧为 ODF 端子（背景色区分）
|
||||
- 左右两侧中间有分隔线
|
||||
- ODF 类型保持现有布局不变
|
||||
|
||||
### REQ-8: 光交箱端子命名规则
|
||||
- 光交箱侧端子每行按 A、B、C、D、E、F… 命名
|
||||
- 每行端点以 "A-1""A-2""B-1""B-2" 等格式命名
|
||||
- ODF 侧保持原有数字命名
|
||||
|
||||
### REQ-9: 导入导出功能适配
|
||||
- 导入模板适配新的机架类型和端子命名
|
||||
- 导出数据包含机架类型信息
|
||||
- 兼容光交箱端子的 A-1、B-2 等命名格式
|
||||
41
.kiro/specs/odf-v1021-optical-box/tasks.md
Normal file
41
.kiro/specs/odf-v1021-optical-box/tasks.md
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
# 任务：ODF v1.0.2.1 - 光交箱机架类型支持
|
||||
|
||||
## 任务列表
|
||||
|
||||
### Task 1: 数据库迁移脚本
|
||||
- [ ] 创建 SQL 迁移脚本 `docs/v1.0.2.1/migration.sql`
|
||||
- [ ] `odf_racks` 表新增 `rack_type`（INT, DEFAULT 0）
|
||||
- [ ] `odf_racks` 表新增 `left_ports_count`（INT, NULL）
|
||||
- [ ] `odf_racks` 表新增 `right_ports_count`（INT, NULL）
|
||||
|
||||
### Task 2: 后端模型更新
|
||||
- [ ] `server/ZR.Model/Business/OdfRacks.cs` 新增 `RackType`、`LeftPortsCount`、`RightPortsCount` 属性
|
||||
- [ ] `server/ZR.Model/Business/Dto/OdfRacksDto.cs` 的 `OdfRacksDto` 和 `OdfRacksExpertDto` 新增对应属性
|
||||
|
||||
### Task 3: 管理后台 - 机架表单增加类型选择
|
||||
- [ ] `server/ZR.Vue/src/components/business/OdfRackForm.vue` 新增机架类型选择器
|
||||
- [ ] 新增左侧端子数、右侧端子数输入框
|
||||
- [ ] 表单验证规则更新
|
||||
- [ ] 表单重置逻辑更新
|
||||
|
||||
### Task 4: 管理后台 - 机架列表显示类型
|
||||
- [ ] `server/ZR.Vue/src/views/business/OdfRacks.vue` 表格新增"机架类型"列
|
||||
- [ ] 使用标签样式区分 ODF机架 / 光交箱
|
||||
|
||||
### Task 5: uni-app 机架列表页显示类型
|
||||
- [ ] `odf-uniapp/pages/rack/index.vue` 机架卡片新增类型标签
|
||||
- [ ] 样式适配
|
||||
|
||||
### Task 6: uni-app 机架详情页 - 类型显示与光交箱双侧布局
|
||||
- [ ] `odf-uniapp/pages/rack-detail/index.vue` 显示机架类型
|
||||
- [ ] 光交箱类型时实现左右双栏布局（左侧光交箱端子，右侧 ODF 端子）
|
||||
- [ ] 左右区域不同背景色（左侧浅蓝 #E3F2FD，右侧浅橙 #FFF3E0）
|
||||
- [ ] 中间分隔线
|
||||
- [ ] 光交箱端子命名：行按 A/B/C... 命名，端点为 A-1、A-2 格式
|
||||
- [ ] ODF 类型保持现有布局不变
|
||||
- [ ] 传递 rackType 参数到详情页
|
||||
|
||||
### Task 7: 导入导出功能适配
|
||||
- [ ] `server/ZR.Model/Business/Dto/OdfPortsDto.cs` 导入/导出 DTO 新增机架类型相关字段
|
||||
- [ ] 导入逻辑适配光交箱端子命名格式（A-1、B-2 等）
|
||||
- [ ] 导出逻辑适配光交箱端子命名格式
|
||||
BIN
docs/v1.0.2.1/光交箱机架详情页.png
Normal file
BIN
docs/v1.0.2.1/光交箱机架详情页.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
docs/v1.0.2.1/设计图.png
Normal file
BIN
docs/v1.0.2.1/设计图.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
43
docs/v1.0.2.1/需求文档.md
Normal file
43
docs/v1.0.2.1/需求文档.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# ODF v1.0.2.1 需求文档
|
||||
|
||||
## 1. 机架类型扩展
|
||||
|
||||
管理后台创建机房内的 ODF 机架时，可选择创建类型：**"ODF机架"** 或 **"光交箱"**。
|
||||
|
||||
> 理论上一个机房内所有的机架，都是同一类型。
|
||||
|
||||
|
||||
|
||||
## 2. 机房详情页
|
||||
|
||||
- 显示每个机架的类型标识（ODF机架 / 光交箱）。
|
||||
|
||||
## 3. 机架详情页
|
||||
|
||||
- 显示该机架的类型。
|
||||
|
||||
## 4. 光交箱机架详情页
|
||||
|
||||
在原 ODF 机架详情页基础上进行修改。
|
||||
|
||||
|
||||
|
||||
### 4.1 布局结构
|
||||
|
||||
- 框内**左侧区域**为光交箱端子，**右侧区域**为 ODF 端子。
|
||||
- 左右两侧的区域背景颜色做区分。
|
||||
- 左右两侧中间区域有分隔线。
|
||||
|
||||
### 4.2 端子数量配置
|
||||
|
||||
- 左右两侧的端子数量，在后台创建时可配置。例如：光交箱一侧 16 个，ODF 一侧 8 个。
|
||||
- 若机架类型为"ODF"，也可以配置端子数量。
|
||||
|
||||
### 4.3 光交箱端子命名规则
|
||||
|
||||
- 每行按 A、B、C、D、E、F…… 命名。
|
||||
- 每行端点以 "A-1""A-2""B-1""B-2" 等命名。
|
||||
|
||||
### 4.4 导入导出
|
||||
|
||||
- 同步更新导入导出功能，适配新的机架类型和端子结构。
|
||||
Loading…
Reference in New Issue
Block a user