# 🚀 快速测试指南

## ⚡ 3 分钟快速验证

### 第 1 步：启动项目（如果还未启动）
```bash
pnpm run dev
```

### 第 2 步：打开浏览器
访问：http://localhost:5666/workflow/process-design

### 第 3 步：核心功能验证

#### ✅ 1. 页面加载
- [ ] 页面正常显示，无白屏
- [ ] 左侧工具栏显示正常
- [ ] 中间画布显示流程图
- [ ] 右侧属性面板显示正常

#### ✅ 2. 属性面板样式
打开浏览器开发者工具（F12），检查：
- [ ] Console 中没有 CSS 加载错误
- [ ] 属性面板不溢出容器
- [ ] 输入框、按钮样式正常
- [ ] 字体清晰可读

#### ✅ 3. 基础属性（中文）
点击画布中的"流程开始"节点，检查右侧属性面板：
- [ ] 显示"基础属性"（不是 "General"）
- [ ] 显示"名称"输入框（不是 "Name"）
- [ ] 显示"ID"输入框（不是 "Id"）

#### ✅ 4. Camunda 属性（中文）
1. 在画布中拖拽一个"用户任务"（User Task）
2. 点击该任务
3. 在属性面板中查找"执行监听器"或"任务监听器"
4. 点击"+"添加按钮
5. 检查弹出的字段：
   - [ ] "事件类型"（不是 "Event Type"）
   - [ ] "监听器类型"（不是 "Listener Type"）
   - [ ] "Java类"、"表达式"等选项都是中文

#### ✅ 5. 样式主题适配
在属性面板中：
1. 点击任意输入框
2. 检查聚焦状态：
   - [ ] 边框变为蓝色（Ant Design 主题色）
   - [ ] 有蓝色阴影效果
3. 鼠标悬停按钮：
   - [ ] 边框/文字变为蓝色

---

## 🔍 详细测试（如果需要）

### 测试 1：导出 XML
1. 点击工具栏的"导出 XML"按钮
2. 打开浏览器控制台（F12）
3. 检查：
   - [ ] Console 中显示 XML 内容
   - [ ] 右上角显示"导出成功"提示
   - [ ] XML 中包含 `xmlns:camunda` 命名空间

### 测试 2：导出 SVG
1. 点击工具栏的"导出 SVG"按钮
2. 检查：
   - [ ] 自动下载一个 `process-diagram.svg` 文件
   - [ ] 右上角显示"SVG 导出成功"提示
   - [ ] 打开 SVG 文件，流程图显示正常

### 测试 3：撤销/重做
1. 在画布中添加一个节点
2. 点击"撤销"按钮
3. 检查：
   - [ ] 节点被移除
4. 点击"重做"按钮
5. 检查：
   - [ ] 节点重新出现

### 测试 4：缩放功能
1. 点击"放大"按钮
   - [ ] 画布放大
2. 点击"缩小"按钮
   - [ ] 画布缩小
3. 点击"适应窗口"按钮
   - [ ] 画布自动调整到合适大小

### 测试 5：清空画布
1. 在画布中添加多个节点
2. 点击"清空画布"按钮
3. 在弹出的确认框中点击"确定"
4. 检查：
   - [ ] 画布恢复到初始状态（只有一个开始节点）
   - [ ] 右上角显示"画布已清空"提示

---

## 🎯 重点检查项

### 必须通过的测试（核心功能）
1. ✅ 页面无报错
2. ✅ 属性面板样式正常（无错位、无溢出）
3. ✅ 基础属性全部中文
4. ✅ Camunda 属性（监听器）全部中文
5. ✅ 主题色正确（蓝色）

### 可以忽略的问题（非核心）
- ⚠️ 某些不常用的字段可能还是英文（可以后续补充翻译）
- ⚠️ 图标样式可能与 Ant Design 不完全一致（不影响使用）

---

## ❌ 如果测试失败

### 问题 1：CSS 加载错误
**症状：** Console 显示 "Failed to resolve import @bpmn-io/properties-panel/assets/properties-panel.css"

**解决方案：**
```bash
# 重新安装依赖
pnpm install

# 重启开发服务器
pnpm run dev
```

### 问题 2：属性面板样式错位
**症状：** 属性面板宽度不对、内容溢出

**检查：**
1. 打开开发者工具（F12）
2. 选择属性面板容器
3. 检查 `.bio-properties-panel` 是否有样式
4. 检查是否有全局样式冲突

**临时解决：** 清除浏览器缓存并硬刷新（Ctrl + Shift + R）

### 问题 3：还有英文内容
**症状：** 某些字段仍然显示英文

**解决方案：**
1. 记录下英文内容（完整的文本）
2. 打开 `src/views/workflow/process-design/translate/zh-CN.ts`
3. 添加翻译条目：
   ```typescript
   export const translations: Record<string, string> = {
     // ... 现有翻译 ...
     '英文文本': '中文翻译',
   };
   ```
4. 保存文件，页面会自动刷新

### 问题 4：主题色不对
**症状：** 聚焦时显示的不是蓝色

**检查：**
1. 确认项目主题色配置
2. 如果需要修改，编辑 `src/views/workflow/process-design/index.vue` 的样式部分
3. 修改 `--ant-primary-color` 的值

---

## 📊 测试结果记录

### 测试环境
- 操作系统：Windows 10
- 浏览器：Chrome / Edge / Firefox
- Node 版本：v18+
- 测试日期：2025-10-11

### 测试结果
| 测试项 | 状态 | 备注 |
|--------|------|------|
| 页面加载 | ✅ / ❌ | |
| 属性面板样式 | ✅ / ❌ | |
| 基础属性中文 | ✅ / ❌ | |
| Camunda 属性中文 | ✅ / ❌ | |
| 主题色适配 | ✅ / ❌ | |
| 导出 XML | ✅ / ❌ | |
| 导出 SVG | ✅ / ❌ | |
| 撤销/重做 | ✅ / ❌ | |
| 缩放功能 | ✅ / ❌ | |
| 清空画布 | ✅ / ❌ | |

---

## 🎉 测试通过后

### 确认清单
- [ ] 所有核心功能正常
- [ ] 样式符合预期
- [ ] 中文翻译完整
- [ ] 主题色正确
- [ ] 无 Console 错误

### 下一步
1. 开始正式使用
2. 如发现新的英文标签，及时补充翻译
3. 根据实际需求定制样式
4. 集成后端 API（保存、加载流程图）

---

**祝测试顺利！** 🚀

如有问题，请查看：
- `SOLUTION.md` - 完整解决方案
- `UPGRADE.md` - 升级详细说明
- `TESTING.md` - 详细测试文档

