# 流程对比 - 旧流程 vs 新流程

## 📊 流程对比图

### 旧流程 ❌
```
拍照/手动输入
    ↓
立即查询建档状态
    ↓
显示3秒提示
    ↓
跳转表单
```

**问题：**
- ❌ 用户无法核对身份证号
- ❌ AI 识别错误无法修改
- ❌ 无效查询浪费资源

---

### 新流程 ✅
```
拍照/手动输入
    ↓
显示确认框（可修改）
    ↓
用户点击"确认"
    ↓
查询建档状态
    ↓
显示3秒提示
    ↓
跳转表单
```

**优势：**
- ✅ 用户可核对身份证号
- ✅ AI 识别错误可修改
- ✅ 减少无效查询

---

## 🎯 详细步骤对比

### 场景：摄像头识别身份证

| 步骤 | 旧流程 | 新流程 |
|------|--------|--------|
| 1 | 拍摄身份证 | 拍摄身份证 |
| 2 | 点击"识别身份证" | 点击"识别身份证" |
| 3 | **立即查询**建档状态 | **显示确认框**，身份证号已填充 |
| 4 | 显示3秒提示 | 用户核对/修改身份证号 |
| 5 | 跳转表单 | 点击"确认身份证号，继续建档" |
| 6 | - | **查询建档状态** |
| 7 | - | 显示3秒提示 |
| 8 | - | 跳转表单 |

### 关键差异

**旧流程：**
- 识别 → **立即查询** → 提示 → 跳转

**新流程：**
- 识别 → **用户确认** → 查询 → 提示 → 跳转

---

## 📱 界面变化

### 旧界面

```
┌─────────────────────────────────┐
│ 身份证信息采集                   │
├─────────────────────────────────┤
│ [摄像头区域]                     │
│                                 │
│ [打开摄像头] [拍摄身份证]        │
│                                 │
├─────────────────────────────────┤
│ 或者手动输入身份证号             │
│ [________身份证号输入框________]│
│ [使用手动输入的身份证号]         │
└─────────────────────────────────┘
```

### 新界面（识别后）

```
┌─────────────────────────────────┐
│ 身份证信息采集                   │
├─────────────────────────────────┤
│ [摄像头区域]                     │
│                                 │
│ [重新拍摄] [识别身份证]          │
├─────────────────────────────────┤
│ 📋 识别结果                     │
│ 请核对并确认身份证号：           │
│ ┌─────────────────────────────┐│
│ │110101199001011234      18/18 ││ ← 可编辑
│ └─────────────────────────────┘│
│                                 │
│ [确认身份证号，继续建档]         │
│ [重新识别]                      │
└─────────────────────────────────┘
```

---

## 🔧 代码变更

### 新增状态变量

```javascript
// 旧代码（2个变量）
const capturedImage = ref(null);
const manualIdCard = ref('');

// 新代码（5个变量）
const capturedImage = ref(null);
const manualIdCard = ref('');
const recognizedIdCard = ref('');   // 新增
const confirmedIdCard = ref('');     // 新增
const checking = ref(false);         // 新增
```

### 函数变更

#### 旧版 recognizeIdCard()
```javascript
const recognizeIdCard = async () => {
    // 识别
    const res = await axios.post('/api/patient/recognize', formData);

    if (res.data.code === 200) {
        // ❌ 立即查询建档状态
        const isRegistered = res.data.data.registered;

        // 显示提示
        ElMessage({ message, duration: 3000 });

        // 等待3秒
        await new Promise(resolve => setTimeout(resolve, 3000));

        // 跳转
        await checkPatientExists();
    }
};
```

#### 新版 recognizeIdCard()
```javascript
const recognizeIdCard = async () => {
    // 识别
    const res = await axios.post('/api/patient/recognize', formData);

    if (res.data.code === 200) {
        // ✅ 只填充到确认框，不查询
        recognizedIdCard.value = res.data.data.idCardNumber;
        confirmedIdCard.value = res.data.data.idCardNumber;

        ElMessage.success('身份证识别成功，请核对身份证号');
    }
};
```

#### 新增 confirmIdCard()
```javascript
const confirmIdCard = async () => {
    // 验证格式
    const idCardRegex = /^\d{17}[\dXx]$/;
    if (!idCardRegex.test(confirmedIdCard.value)) {
        ElMessage.error('身份证号格式不正确');
        return;
    }

    checking.value = true;
    patientInfo.idCardNumber = confirmedIdCard.value.toUpperCase();

    // ✅ 现在才查询建档状态
    const isRegistered = await axios.get('/api/patient/exists', {
        params: { idCardNumber: patientInfo.idCardNumber }
    }).then(res => res.data.code === 200 ? res.data.data : false);

    // 显示3秒提示
    ElMessage({ message, duration: 3000, showClose: false });

    // 等待3秒
    await new Promise(resolve => setTimeout(resolve, 3000));

    // 跳转
    await checkPatientExists();
};
```

---

## 🎨 用户体验提升

### 1. 核对环节

**旧流程：** 无核对环节，AI 识别结果直接使用
**新流程：** 专门的确认界面，醒目显示

### 2. 纠错能力

**旧流程：** AI 识别错误无法修改，只能重新识别
**新流程：** 可以直接在确认框修改

### 3. 操作确认

**旧流程：** 自动查询，用户无感知
**新流程：** 用户主动点击"确认"，更加明确

### 4. 心理预期

**旧流程：** 识别后立即跳转，用户可能困惑
**新流程：** 清晰的步骤：识别 → 确认 → 查询 → 跳转

---

## 📈 性能优化

### 减少无效查询

**场景：** AI 识别错误，用户实际想要重新识别

**旧流程：**
```
识别错误 → 查询建档（无效）→ 用户发现错误 → 重新识别
```

**新流程：**
```
识别错误 → 用户发现错误 → 修改或重新识别 → 查询建档（有效）
```

**优势：**
- ✅ 减少无效的 API 调用
- ✅ 降低服务器负载
- ✅ 提升响应速度

---

## ✅ 测试清单

### 功能测试
- [ ] 摄像头识别后显示确认框
- [ ] 确认框中身份证号可编辑
- [ ] 点击"确认"后查询建档状态
- [ ] 显示3秒提示
- [ ] 自动跳转到表单页面

### 交互测试
- [ ] 点击"重新识别"清空确认框
- [ ] 手动输入后也显示确认框
- [ ] 格式验证正确
- [ ] 错误提示友好

### 样式测试
- [ ] 确认框样式醒目
- [ ] 按钮布局合理
- [ ] 加载状态显示
- [ ] 响应式设计正常

---

## 🎉 总结

新流程的优势：
1. **更准确**：用户可核对身份证号
2. **更灵活**：AI 识别错误可修改
3. **更高效**：减少无效查询
4. **更友好**：操作步骤清晰明确

**更新已完成，立即体验新流程！** 🚀