## 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. 查询类设计
```csharp
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使用示例

```http
# 获取所有任务执行过程
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. 响应格式示例

```json
{
  "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. **导出功能**: 可以添加数据导出功能