CellularManagement/src/modify_20250121_testscenariotaskexecution_feature.md

2025-01-21 创建测试场景任务执行过程Feature

概述

为测试场景任务系统创建树形结构Feature，将三个核心表（tb_testscenario_task、tb_testscenario_task_execution_detail、tb_testscenario_task_execution_case_detail）组合生成层次化的树形结构，便于前端展示和管理。

主要变更

1. 创建 TestScenarioTaskTree Feature

• 目录: X1.Application/Features/TestScenarioTaskTree/Queries/GetTestScenarioTaskTree/
• 功能: 提供测试场景任务执行过程查询功能
• 架构: 遵循CQRS模式，使用MediatR进行查询处理

2. 实现的功能组件

• 查询类: GetTestScenarioTaskTreeQuery.cs - 定义查询参数和条件
• 响应类: GetTestScenarioTaskTreeResponse.cs - 定义树形结构响应格式
• 处理器: GetTestScenarioTaskTreeQueryHandler.cs - 实现树形结构构建逻辑
• DTO类: 包含任务树、执行树、用例树的数据传输对象

3. 树形结构设计

• 第一层: 测试场景任务（TestScenarioTaskTreeDto）
• 第二层: 任务执行详情（TaskExecutionTreeDto）
• 第三层: 用例执行详情（TaskExecutionCaseTreeDto）

4. 查询参数支持

• 场景过滤: ScenarioCode - 按场景编码过滤
• 设备过滤: DeviceCode - 按设备编码过滤
• 执行详情: IncludeExecutionDetails - 是否包含执行详情
• 用例详情: IncludeCaseDetails - 是否包含用例详情

5. 技术特点

• 性能优化: 支持按需加载，可选择是否包含执行和用例详情
• 数据完整性: 提供完整的统计信息（任务数量、执行数量、用例数量）
• 错误处理: 完整的异常处理和日志记录
• 类型安全: 强类型的DTO设计，确保数据一致性

技术实现

1. 查询类设计

public class GetTestScenarioTaskTreeQuery : IRequest<OperationResult<GetTestScenarioTaskTreeResponse>>
{
    public string? ScenarioCode { get; set; }
    public string? DeviceCode { get; set; }
    public bool IncludeExecutionDetails { get; set; } = true;
    public bool IncludeCaseDetails { get; set; } = true;
}

2. 树形结构DTO

• TestScenarioTaskTreeDto: 任务树节点，包含任务基本信息和执行列表
• TaskExecutionTreeDto: 执行树节点，包含执行信息和用例列表
• TaskExecutionCaseTreeDto: 用例树节点，包含用例执行详情

3. 处理器逻辑

• 分层构建: 先构建任务层，再构建执行层，最后构建用例层
• 按需加载: 根据参数决定是否加载执行和用例详情
• 统计计算: 自动计算各层级的数量统计

4. 数据关系

• 任务 → 执行: 一对多关系，通过TaskId关联
• 执行 → 用例: 一对多关系，通过ExecutionId关联
• 完整链路: 任务 → 执行详情 → 用例详情

使用场景

1. 任务管理界面: 展示完整的任务执行层次结构
2. 执行监控: 实时查看任务执行状态和进度
3. 用例分析: 分析用例执行情况和性能数据
4. 报告生成: 生成包含完整执行链路的报告

文件清单

Application Layer

• X1.Application/Features/TestScenarioTaskTree/Queries/GetTestScenarioTaskTree/GetTestScenarioTaskTreeQuery.cs
• X1.Application/Features/TestScenarioTaskTree/Queries/GetTestScenarioTaskTree/GetTestScenarioTaskTreeResponse.cs
• X1.Application/Features/TestScenarioTaskTree/Queries/GetTestScenarioTaskTree/GetTestScenarioTaskTreeQueryHandler.cs

Presentation Layer

• X1.Presentation/Controllers/TestScenarioTaskExecutionController.cs

Frontend Layer

• X1.WebUI/src/services/testScenarioTaskExecutionService.ts - 任务执行过程服务
• X1.WebUI/src/pages/task-execution-process/TaskExecutionProcessView.tsx - 任务执行过程主视图组件
• X1.WebUI/src/pages/task-execution-process/TaskExecutionTree.tsx - 左侧树形结构组件
• X1.WebUI/src/pages/task-execution-process/TaskExecutionTable.tsx - 右侧表格组件
• X1.WebUI/src/components/ui/collapsible.tsx - 可折叠组件（新增）
• X1.WebUI/src/constants/api.ts - 更新API常量配置
• X1.WebUI/src/constants/navigationMenuPresets.ts - 更新导航菜单预设配置
• X1.WebUI/src/pages/navigation-menus/NavigationMenuForm_Examples.md - 更新导航菜单示例文档
• X1.WebUI/src/routes/AppRouter.tsx - 添加任务执行过程页面路由配置

Controller实现

1. 控制器设计

• 基类: 继承自 ApiController 基类
• 路由: api/testscenariotaskexecution
• 权限: 需要授权访问 [Authorize]
• 日志: 完整的操作日志记录

2. API端点

• 获取任务执行过程: GET /api/testscenariotaskexecution - 支持场景和设备过滤，可控制是否包含执行和用例详情

设计说明: 基于现有Controller的实现模式，采用单一端点设计，通过查询参数控制不同的过滤条件和数据包含选项，这与现有的TestScenarioTasksController和TestScenariosController的设计保持一致。

3. 查询参数

• scenarioCode: 场景编码过滤
• deviceCode: 设备编码过滤
• includeExecutionDetails: 是否包含执行详情（默认true）
• includeCaseDetails: 是否包含用例详情（默认true）

4. 技术特点

• 统一响应: 使用 OperationResult<T> 统一响应格式
• 错误处理: 完整的错误处理和用户友好的错误消息
• 日志记录: 详细的操作日志，包括开始、成功、失败状态
• 参数验证: 自动参数验证和类型转换

5. API使用示例

# 获取所有任务执行过程
GET /api/testscenariotaskexecution

# 获取指定场景的任务执行过程
GET /api/testscenariotaskexecution?scenarioCode=SCENARIO_001

# 获取指定设备的任务执行过程
GET /api/testscenariotaskexecution?deviceCode=DEVICE_001

# 获取任务执行过程概览（不包含执行详情）
GET /api/testscenariotaskexecution?scenarioCode=SCENARIO_001&includeExecutionDetails=false&includeCaseDetails=false

# 获取完整任务执行过程（包含执行和用例详情）
GET /api/testscenariotaskexecution?scenarioCode=SCENARIO_001&includeExecutionDetails=true&includeCaseDetails=true

# 获取任务执行过程（仅包含执行详情，不包含用例详情）
GET /api/testscenariotaskexecution?deviceCode=DEVICE_001&includeExecutionDetails=true&includeCaseDetails=false

6. 响应格式示例

{
  "isSuccess": true,
  "data": {
    "taskTrees": [
      {
        "taskId": "TASK_001",
        "taskCode": "TASK_001",
        "taskName": "测试任务1",
        "scenarioCode": "SCENARIO_001",
        "deviceCode": "DEVICE_001",
        "executionCount": 2,
        "executions": [
          {
            "executionId": "EXEC_001",
            "taskId": "TASK_001",
            "status": "Success",
            "caseCount": 3,
            "caseDetails": [
              {
                "caseDetailId": "CASE_001",
                "executionId": "EXEC_001",
                "testCaseFlowId": "FLOW_001",
                "status": "Success"
              }
            ]
          }
        ]
      }
    ],
    "totalTaskCount": 1,
    "totalExecutionCount": 2,
    "totalCaseCount": 3
  },
  "errorMessages": null
}

### 数据库表关系

tb_testscenario_task (任务表) ├── Id (主键) ├── TaskCode (任务编码) ├── TaskName (任务名称) ├── ScenarioCode (场景编码) ├── DeviceCode (设备编码) └── ... (其他字段)

tb_testscenario_task_execution_detail (执行详情表) ├── Id (主键) ├── TaskId (外键 → tb_testscenario_task.Id) ├── ScenarioCode (场景编码) ├── ExecutorId (执行人ID) ├── Status (执行状态) └── ... (其他字段)

tb_testscenario_task_execution_case_detail (用例详情表) ├── Id (主键) ├── ExecutionId (外键 → tb_testscenario_task_execution_detail.Id) ├── ScenarioCode (场景编码) ├── TestCaseFlowId (测试用例流程ID) ├── ExecutorId (执行人ID) └── ... (其他字段)

### 树形结构示例

任务1 (TestScenarioTaskTreeDto) ├── 执行1 (TaskExecutionTreeDto) │ ├── 用例1 (TaskExecutionCaseTreeDto) │ ├── 用例2 (TaskExecutionCaseTreeDto) │ └── 用例3 (TaskExecutionCaseTreeDto) ├── 执行2 (TaskExecutionTreeDto) │ ├── 用例4 (TaskExecutionCaseTreeDto) │ └── 用例5 (TaskExecutionCaseTreeDto) └── 执行3 (TaskExecutionTreeDto) └── 用例6 (TaskExecutionCaseTreeDto)

任务2 (TestScenarioTaskTreeDto) └── 执行4 (TaskExecutionTreeDto) ├── 用例7 (TaskExecutionCaseTreeDto) └── 用例8 (TaskExecutionCaseTreeDto)

### 性能优化

1. **按需加载**: 通过参数控制是否加载执行和用例详情
2. **批量查询**: 使用仓储的批量查询方法减少数据库访问次数
3. **内存优化**: 避免N+1查询问题，使用高效的关联查询
4. **缓存友好**: 设计支持后续缓存优化的数据结构

### 前端实现

#### 1. 服务层设计
- **服务类**: `TestScenarioTaskExecutionService` - 完全对应后端Controller
- **API路径**: `/testscenariotaskexecution` - 与后端路由保持一致
- **类型定义**: 与后端DTO完全对应的TypeScript接口
- **错误处理**: 统一的错误处理和用户友好的提示

#### 2. 视图组件设计
- **主组件**: `TaskExecutionProcessView` - 避免与现有组件重名
- **功能定位**: 专门用于查看任务执行结果和过程
- **布局设计**: 左右分栏布局，左侧树形结构，右侧详细信息表格
- **UI特点**: 
  - 左侧可折叠的树形结构展示任务层次
  - 右侧表格展示选中任务的详细执行信息
  - 状态图标和颜色区分不同执行状态
  - 支持按场景和设备过滤
  - 可控制是否显示执行和用例详情

#### 3. 组件拆分架构
- **TaskExecutionProcessView**: 主视图组件，负责数据获取和状态管理
- **TaskExecutionTree**: 左侧树形组件，展示任务列表和层次结构
- **TaskExecutionTable**: 右侧表格组件，展示选中任务的详细信息
- **组件通信**: 通过props传递数据和回调函数实现组件间通信

#### 4. 组件特性
- **响应式设计**: 适配不同屏幕尺寸，大屏显示左右布局，小屏堆叠显示
- **交互友好**: 左侧树形结构可折叠展开，右侧表格支持搜索和过滤
- **状态可视化**: 不同颜色和图标表示执行状态
- **实时更新**: 支持刷新和重新查询
- **性能优化**: 按需加载执行和用例详情
- **数据联动**: 左侧选择任务，右侧自动更新对应详细信息
- **主题适配**: 使用主题变量，支持明暗主题切换
- **布局优化**: 任务列表铺满容器，内部滚动条优化用户体验
- **Card布局**: 为Card组件添加flex布局确保子组件正确继承高度

#### 5. 步骤详情功能扩展

##### 5.1 新增功能概述
基于用户需求，在现有的TestScenarioTaskTree功能基础上，新增了通过CaseDetailId获取StepId，然后关联tb_testscenario_task_execution_step_log表的功能。

##### 5.2 数据流程
1. **输入**: CaseDetailId (用例执行明细ID)
2. **查询步骤**: 通过CaseDetailId从tb_testscenario_task_execution_case_step_detail表获取StepId列表
3. **关联日志**: 使用StepDetailId关联tb_testscenario_task_execution_step_log表获取步骤执行日志
4. **输出**: 包含步骤详情和日志的完整数据结构

##### 5.3 新增文件

**X1.Application/Features/TestScenarioTaskTree/Queries/GetTestScenarioTaskStepDetails/GetTestScenarioTaskStepDetailsResponse.cs**
- 定义了步骤详情和日志的DTO结构
- `GetTestScenarioTaskStepDetailsResponse`: 响应容器
- `TestScenarioTaskStepDetailDto`: 步骤详情DTO
- `TestScenarioTaskStepLogDto`: 步骤日志DTO

**X1.Application/Features/TestScenarioTaskTree/Queries/GetTestScenarioTaskStepDetails/GetTestScenarioTaskStepDetailsQuery.cs**
- 定义了查询参数
- 支持日志类型过滤、时间范围过滤等条件

**X1.Application/Features/TestScenarioTaskTree/Queries/GetTestScenarioTaskStepDetails/GetTestScenarioTaskStepDetailsQueryHandler.cs**
- 实现了查询逻辑
- 通过Repository获取步骤详情和日志数据
- 支持条件过滤和排序

##### 5.4 Controller扩展

**X1.Presentation/Controllers/TestScenarioTaskExecutionController.cs**
- 新增 `GetTestScenarioTaskStepDetails` 端点
- 路由: `GET /api/testscenariotaskexecution/step-details`
- 支持查询参数: caseDetailId, includeStepLogs, logTypeFilter, startTimeFilter, endTimeFilter

##### 5.5 技术特性
- **CQRS模式**: 遵循现有的Command Query Responsibility Segregation模式
- **MediatR**: 使用MediatR进行查询处理
- **Repository模式**: 利用现有的Repository接口和实现
- **日志记录**: 完整的日志记录和错误处理
- **参数验证**: 输入参数验证和错误处理
- **条件过滤**: 支持多种过滤条件

#### 6. 前端服务实现

##### 6.1 服务层扩展

**X1.WebUI/src/services/testScenarioTaskExecutionService.ts**
- 新增步骤日志类型枚举 `StepLogType`
- 新增步骤详情相关DTO接口：
  - `TestScenarioTaskStepLogDto`: 步骤日志DTO
  - `TestScenarioTaskStepDetailDto`: 步骤详情DTO
  - `GetTestScenarioTaskStepDetailsRequest`: 请求接口
  - `GetTestScenarioTaskStepDetailsResponse`: 响应接口
- 新增服务方法 `getTestScenarioTaskStepDetails()`: 获取步骤详情和日志

##### 6.2 组件层实现

**X1.WebUI/src/pages/task-execution-process/StepDetailsView.tsx**
- 步骤日志视图组件
- 直接显示所有步骤的日志，按时间排序
- 支持日志类型过滤和搜索功能
- 每个日志项包含对应的步骤信息
- 完整的错误处理和加载状态

**X1.WebUI/src/pages/task-execution-process/TaskExecutionTree.tsx**
- 修改用例执行详情组件，添加点击事件
- 支持用例点击查看步骤详情
- 传递用例点击回调函数

**X1.WebUI/src/pages/task-execution-process/TaskExecutionProcessView.tsx**
- 添加步骤详情状态管理
- 移除TaskExecutionTable组件，直接使用StepDetailsView
- 实现固定两列布局：任务树 + 步骤详情
- 添加用例点击处理逻辑
- 集成步骤详情视图

##### 6.3 交互流程
1. **用例点击**: 用户在任务树中点击用例执行详情
2. **状态更新**: 设置选中的用例明细ID，显示步骤日志视图
3. **数据获取**: 自动调用步骤详情API获取数据
4. **日志展示**: 在右侧面板展示所有步骤的日志，按时间排序
5. **关闭功能**: 用户可点击关闭按钮清空选择

##### 6.4 技术特性
- **响应式布局**: 支持不同屏幕尺寸的布局适配
- **状态管理**: 完整的组件状态管理
- **错误处理**: 统一的错误处理和用户提示
- **加载状态**: 友好的加载状态显示
- **搜索过滤**: 支持步骤搜索和日志类型过滤
- **主题适配**: 使用主题变量，支持明暗主题

#### 7. 技术实现
- **React Hooks**: 使用useState和useEffect管理状态
- **TypeScript**: 强类型定义确保数据安全
- **Tailwind CSS**: 现代化的样式设计，支持响应式布局
- **Lucide Icons**: 统一的图标系统
- **Toast通知**: 用户友好的操作反馈
- **组件化设计**: 模块化的组件结构，便于维护和扩展
- **状态管理**: 集中式状态管理，通过props传递数据

#### 6. 导航菜单配置
- **菜单位置**: 任务管理 → 查看任务
- **菜单路径**: `/dashboard/tasks/execution-process`
- **权限代码**: `testscenariotaskexecution.view`
- **图标**: `ClipboardList` - 表示查看和列表
- **排序**: 6 - 在任务管理子菜单中排在最后
- **描述**: 查看任务执行过程和结果

#### 7. 路由配置
- **路由路径**: `/dashboard/tasks/execution-process`
- **组件**: `TaskExecutionProcessView`
- **权限控制**: `testscenariotaskexecution.view`
- **懒加载**: 使用React.lazy进行代码分割
- **动画容器**: 使用AnimatedContainer包装
- **保护路由**: 使用ProtectedRoute进行权限验证

### 最新更新 (2025-01-21)

#### 任务列表显示优化
- **文件**: `X1.WebUI/src/pages/task-execution-process/TaskExecutionTree.tsx`
- **变更**: 移除不必要的字段显示，优化任务列表显示为更紧凑的格式
- **具体修改**:
  - 移除用例流程 (`testCaseFlowId`) 显示
  - 移除场景 (`scenarioCode`) 显示
  - 移除执行人 (`executorId`) 显示
  - 移除执行ID (`executionId`) 显示
  - 优化间距和内边距，使显示更紧凑
  - 减少组件间距：`space-y-2` → `space-y-1`
  - 减少内边距：`p-3` → `p-2`，`p-4` → `p-2`
  - 移除未使用的 `User` 图标导入

#### 步骤日志显示优化
- **文件**: `X1.WebUI/src/pages/task-execution-process/StepDetailsView.tsx`
- **变更**: 移除步骤日志信息中的执行人和ID显示，优化显示内容
- **具体修改**:
  - 移除 `log.logId` 的显示
  - 移除 `stepDetail.executorId` 的显示
  - 简化步骤信息显示，只保留步骤名称、状态和耗时
  - 优化布局，减少不必要的空白空间
  - 为日志内容添加滚动条：`max-h-32 overflow-y-auto`
  - 进一步紧凑化显示：减少间距和内边距

### 扩展性

1. **层级扩展**: 可以轻松添加更多层级（如步骤详情）
2. **过滤扩展**: 可以添加更多过滤条件（如时间范围、状态等）
3. **排序扩展**: 可以添加排序功能（如按时间、状态等）
4. **分页扩展**: 可以添加分页功能以处理大量数据
5. **实时更新**: 可以添加WebSocket支持实时状态更新
6. **导出功能**: 可以添加数据导出功能