diff --git a/.kiro/specs/odf-v1021-optical-box/design.md b/.kiro/specs/odf-v1021-optical-box/design.md new file mode 100644 index 0000000..7030912 --- /dev/null +++ b/.kiro/specs/odf-v1021-optical-box/design.md @@ -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 +/// +/// 机架类型：0=ODF机架, 1=光交箱 +/// +public int RackType { get; set; } + +/// +/// 左侧端子数量（光交箱侧） +/// +public int? LeftPortsCount { get; set; } + +/// +/// 右侧端子数量（ODF侧） +/// +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 + + {{ item.rackName }} + 类型：{{ item.rackType === 1 ? '光交箱' : 'ODF' }} + +``` + +样式： +```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 格式导出行号和端口名 diff --git a/.kiro/specs/odf-v1021-optical-box/requirements.md b/.kiro/specs/odf-v1021-optical-box/requirements.md new file mode 100644 index 0000000..8a30216 --- /dev/null +++ b/.kiro/specs/odf-v1021-optical-box/requirements.md @@ -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 等命名格式 diff --git a/.kiro/specs/odf-v1021-optical-box/tasks.md b/.kiro/specs/odf-v1021-optical-box/tasks.md new file mode 100644 index 0000000..0b57b00 --- /dev/null +++ b/.kiro/specs/odf-v1021-optical-box/tasks.md @@ -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 等） +- [ ] 导出逻辑适配光交箱端子命名格式 diff --git a/docs/v1.0.2.1/光交箱机架详情页.png b/docs/v1.0.2.1/光交箱机架详情页.png new file mode 100644 index 0000000..df446bb Binary files /dev/null and b/docs/v1.0.2.1/光交箱机架详情页.png differ diff --git a/docs/v1.0.2.1/设计图.png b/docs/v1.0.2.1/设计图.png new file mode 100644 index 0000000..b68f44a Binary files /dev/null and b/docs/v1.0.2.1/设计图.png differ diff --git a/docs/v1.0.2.1/需求文档.md b/docs/v1.0.2.1/需求文档.md new file mode 100644 index 0000000..f70a419 --- /dev/null +++ b/docs/v1.0.2.1/需求文档.md @@ -0,0 +1,43 @@ +# ODF v1.0.2.1 需求文档 + +## 1. 机架类型扩展 + +管理后台创建机房内的 ODF 机架时，可选择创建类型：**"ODF机架"** 或 **"光交箱"**。 + +> 理论上一个机房内所有的机架，都是同一类型。 + +![机房详情页](设计图.png) + +## 2. 机房详情页 + +- 显示每个机架的类型标识（ODF机架 / 光交箱）。 + +## 3. 机架详情页 + +- 显示该机架的类型。 + +## 4. 光交箱机架详情页 + +在原 ODF 机架详情页基础上进行修改。 + +![光交箱机架详情页](光交箱机架详情页.png) + +### 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 导入导出 + +- 同步更新导入导出功能，适配新的机架类型和端子结构。