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

📊 流程对比图

旧流程 ❌

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

问题：

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

新流程 ✅

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

优势：

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

🎯 详细步骤对比

场景：摄像头识别身份证

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

关键差异

旧流程：

识别 → 立即查询 → 提示 → 跳转

新流程：

识别 → 用户确认 → 查询 → 提示 → 跳转

📱 界面变化

旧界面

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

新界面（识别后）

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

🔧 代码变更

新增状态变量

// 旧代码（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()

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()

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()

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 识别错误，用户实际想要重新识别