# 功能更新说明 - 3秒提示功能

## 更新时间
2026-01-08 16:50

## 更新内容

在身份证识别成功后，添加3秒倒计时提示功能，提升用户体验。

### 功能描述

#### 1. 已建档用户
**提示内容：** ✅ 该用户此前已完成建档，正在读取用户信息...

**行为：**
- 识别成功后显示提示
- 等待3秒
- 自动进入表单页面，并填充已保存的信息
- 用户可以修改并保存

#### 2. 未建档用户
**提示内容：** 📝 该用户此前未建档，正在跳转到建档页面...

**行为：**
- 识别成功后显示提示
- 等待3秒
- 自动进入表单页面，身份证号已填充（置灰）
- 用户需要填写其他信息

## 技术实现

### 后端修改

#### 1. 实体类：IdCardRecognitionResult.java
添加 `registered` 字段：
```java
/**
 * 是否已建档
 */
private Boolean registered;
```

#### 2. 控制器：PatientController.java
在识别成功后查询建档状态：
```java
if (result.getIsIdCard()) {
    // 识别成功后，检查是否已建档
    boolean isRegistered = patientDataService.existsByIdCardNumber(result.getIdCardNumber());
    result.setRegistered(isRegistered);

    String message = isRegistered ? "身份证识别成功，该用户已建档" : "身份证识别成功，该用户未建档";
    return ApiResponse.success(message, result);
}
```

### 前端修改

#### 1. 识别身份证：recognizeIdCard()
```javascript
if (res.data.code === 200) {
    patientInfo.idCardNumber = res.data.data.idCardNumber;

    // 显示3秒倒计时提示
    const isRegistered = res.data.data.registered;
    const message = isRegistered
        ? '✅ 该用户此前已完成建档，正在读取用户信息...'
        : '📝 该用户此前未建档，正在跳转到建档页面...';

    ElMessage({
        message: message,
        type: 'success',
        duration: 3000,
        showClose: false  // 禁止手动关闭
    });

    // 等待3秒后再进入下一步
    await new Promise(resolve => setTimeout(resolve, 3000));

    await checkPatientExists();
}
```

#### 2. 手动输入身份证号：useManualIdCard()
```javascript
// 先查询是否已建档
const isRegistered = await axios.get('/api/patient/exists', {
    params: { idCardNumber: patientInfo.idCardNumber }
}).then(res => res.data.code === 200 ? res.data.data : false);

// 显示3秒倒计时提示
const message = isRegistered
    ? '✅ 该用户此前已完成建档，正在读取用户信息...'
    : '📝 该用户此前未建档，正在跳转到建档页面...';

ElMessage({
    message: message,
    type: 'success',
    duration: 3000,
    showClose: false
});

// 等待3秒后再进入下一步
await new Promise(resolve => setTimeout(resolve, 3000));
```

## 用户体验流程

### 场景一：摄像头拍照识别 + 已建档
1. 用户拍摄身份证照片
2. 点击"识别身份证"按钮
3. 识别成功，显示：**✅ 该用户此前已完成建档，正在读取用户信息...**
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，信息已填充
6. 用户可以修改并保存

### 场景二：摄像头拍照识别 + 未建档
1. 用户拍摄身份证照片
2. 点击"识别身份证"按钮
3. 识别成功，显示：**📝 该用户此前未建档，正在跳转到建档页面...**
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，身份证号已填充
6. 用户填写其他信息并提交

### 场景三：手动输入 + 已建档
1. 用户手动输入身份证号
2. 点击"使用手动输入的身份证号"按钮
3. 验证通过，显示：**✅ 该用户此前已完成建档，正在读取用户信息...**
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，信息已填充
6. 用户可以修改并保存

### 场景四：手动输入 + 未建档
1. 用户手动输入身份证号
2. 点击"使用手动输入的身份证号"按钮
3. 验证通过，显示：**📝 该用户此前未建档，正在跳转到建档页面...**
4. 倒计时3秒（用户无法关闭提示）
5. 自动进入表单页面，身份证号已填充
6. 用户填写其他信息并提交

## 测试步骤

### 1. 测试已建档场景
```bash
# 1. 先创建一个测试用户
# 启动项目后访问 http://localhost:8080
# 手动输入身份证号：110101199001011234
# 填写完整信息并提交

# 2. 测试识别功能
# 使用相同的身份证号进行识别
# 观察提示信息：✅ 该用户此前已完成建档，正在读取用户信息...
# 等待3秒
# 验证表单信息是否正确填充
```

### 2. 测试未建档场景
```bash
# 1. 使用新的身份证号（如：110101199001011235）
# 进行识别或手动输入

# 2. 观察提示信息：📝 该用户此前未建档，正在跳转到建档页面...
# 等待3秒
# 验证身份证号是否已填充，其他字段为空
```

## 关键特性

1. **自动等待3秒**：用户无法手动关闭提示，确保提示信息被看到
2. **区分提示**：已建档和未建档使用不同的文案和图标
3. **流畅过渡**：3秒后自动跳转，无需用户额外操作
4. **双重支持**：摄像头识别和手动输入都支持此功能

## 代码变更清单

### 后端
- ✅ `IdCardRecognitionResult.java` - 添加 `registered` 字段
- ✅ `PatientController.java` - 识别成功后查询建档状态

### 前端
- ✅ `index.html` - `recognizeIdCard()` 函数添加3秒提示
- ✅ `index.html` - `useManualIdCard()` 函数添加3秒提示

## 注意事项

1. **提示时长**：设置为3秒（3000ms），可根据需要调整
2. **不可关闭**：`showClose: false` 确保用户必须等待
3. **异步等待**：使用 `await new Promise(resolve => setTimeout(resolve, 3000))` 实现精确等待
4. **状态查询**：手动输入时需要额外调用 `/api/patient/exists` 接口

## 未来优化建议

1. **倒计时显示**：可以在提示中显示倒计时数字（3、2、1）
2. **进度条**：添加进度条显示剩余时间
3. **跳过按钮**：提供"立即跳过"按钮（可选）
4. **动画效果**：添加加载动画提升视觉效果

---

**更新完成！** 🎉