# 修改记录
## 2025-01-21 - 修复ReactFlowDesigner节点类型不对称问题
### 问题描述
在ReactFlowDesigner.tsx中,所有节点的type都被硬编码为'testStep',导致保存的数据中所有节点类型都是相同的,无法区分不同类型的节点。
### 修改内容
#### 1. ReactFlowDesigner.tsx
- **文件位置**: `X1.WebUI/src/pages/testcases/ReactFlowDesigner.tsx`
- **修改内容**:
- 扩展了nodeTypes映射,添加了不同类型的节点类型:
- `startStep`: 开始步骤 (stepType=1)
- `endStep`: 结束步骤 (stepType=2)
- `processStep`: 处理步骤 (stepType=3)
- `decisionStep`: 判断步骤 (stepType=4)
- `testStep`: 默认类型
- 在节点创建逻辑中添加了`getNodeType`函数,根据`stepType`返回对应的节点类型
- 修改了`onDrop`函数中的节点创建逻辑,使用动态的节点类型而不是硬编码的'testStep'
#### 2. TestCaseDetailDrawer.tsx
- **文件位置**: `X1.WebUI/src/components/testcases/TestCaseDetailDrawer.tsx`
- **修改内容**:
- 扩展了nodeTypes映射,添加了相同的节点类型映射
- 在`getReactFlowData`函数中添加了`getNodeType`函数
- 修改了节点数据转换逻辑,使用动态的节点类型
### 修改前后对比
#### 修改前
```typescript
// 所有节点都是相同的类型
const nodeTypes = {
testStep: TestStepNode,
};
const newNode = {
id: `node-${Date.now()}`,
type: 'testStep', // 硬编码
// ...
};
```
#### 修改后
```typescript
// 支持多种节点类型
const nodeTypes = {
testStep: TestStepNode,
startStep: TestStepNode,
endStep: TestStepNode,
processStep: TestStepNode,
decisionStep: TestStepNode,
};
const getNodeType = (stepType: number) => {
switch (stepType) {
case 1: return 'startStep';
case 2: return 'endStep';
case 3: return 'processStep';
case 4: return 'decisionStep';
default: return 'testStep';
}
};
const newNode = {
id: `node-${Date.now()}`,
type: getNodeType(step.stepType), // 动态类型
// ...
};
```
### 影响范围
- 修复了保存数据中节点类型不对称的问题
- 现在不同类型的节点会有不同的type值,便于区分和管理
- 保持了向后兼容性,所有节点仍然使用相同的TestStepNode组件进行渲染
### 测试建议
1. 测试不同类型节点的创建和保存
2. 验证保存的数据中节点类型是否正确
3. 测试导入导出功能是否正常工作
4. 确认节点显示和交互功能正常
---
## 2024年修改记录
### 分析相关页面搜索栏和按钮主题修复
**修改时间**: 2024年
**修改文件**:
- `X1.WebUI/src/pages/analysis/FunctionalAnalysisView.tsx`
- `X1.WebUI/src/pages/analysis/IssueAnalysisView.tsx`
- `X1.WebUI/src/pages/analysis/PerformanceAnalysisView.tsx`
- `X1.WebUI/src/pages/analysis/UEAnalysisView.tsx`
**修改内容**:
1. **搜索栏背景修复**:
- 将硬编码的 `bg-white` 改为 `bg-background`
- 添加 `border-border` 类,使用主题变量
- 确保搜索栏背景与系统主题保持一致
2. **输入框样式优化**:
- 移除自定义的 `input` 类,使用默认的 Input 组件样式
- 确保输入框样式与系统主题一致
3. **选择框样式修复**:
- 将选择框样式从简单的 `input` 类改为完整的主题样式
- 添加焦点状态、禁用状态等完整的样式支持
- 使用主题变量:`border-input`、`bg-background`、`text-sm` 等
4. **按钮主题修复**:
- 将硬编码的蓝色查询按钮改为使用主题变量 `bg-primary` 和 `text-primary-foreground`
- 重置和展开按钮使用 `bg-background`、`border-input` 等主题变量
- 添加悬停效果:`hover:bg-primary/90`、`hover:bg-accent` 等
**修改原因**:
- 修复分析相关页面搜索栏和按钮与系统主题不匹配的问题
- 确保在深色模式和浅色模式下都能正确显示
- 提供一致的用户体验和视觉效果
**具体变更**:
```diff
-
+
-
+
-