AIclinicalresearch/docs/03-业务模块/ASL-AI智能文献/05-开发记录/2025-11-21-用户体验优化.md

# 用户体验优化报告

**日期**: 2025-11-21  
**任务**: 审核工作å<C593>°UX优化  
**状�*: �已完� 

---

## 📋 优化内容

### 1. 进度显示优化 �

#### 问题
- 进度æ<C2A6>¡ä»Ž0%直接跳到100%
- 看ä¸<C3A4>到中间过ç¨?
- 用户体验ä¸<C3A4>å<EFBFBD>‹å¥½ï¼Œç­‰å¾…时没有å<E280B0><C3A5>é¦?

#### 原因分æž<C3A6>
1. **å‰<C3A5>端轮询间隔太长**ï¼?ç§?æ¬?
2. **å<>Žç«¯æ›´æ–°é¢‘率ä½?*：æ¯<C3A6>10æ<30>¡æ›´æ–°ä¸€æ¬?

对于少é‡<EFBFBD>文献ï¼?-20篇），æ¯<C3A6>10æ<30>¡æ›´æ–°æ„<C3A6>味ç<C2B3>€å‡ ä¹Žçœ‹ä¸<C3A4>到中间过程ã€?

#### 解决方案

**å‰<C3A5>端优化** (`useScreeningTask.ts`):
```typescript
// 修改�
pollingInterval = 2000  // 2�

// 修改å<C2B9>?
pollingInterval = 1000  // 1秒，更å<C2B4>Šæ—?
```

**å<>Žç«¯ä¼˜åŒ–** (`screeningService.ts`):
```typescript
// 修改å‰<C3A5>：æ¯?0æ<30>¡æ›´æ–°ä¸€æ¬?
if (processedCount % 10 === 0 || processedCount === literatures.length) {
  await prisma.aslScreeningTask.update({ ... });
}

// 修改å<C2B9>Žï¼šæ¯?æ<>¡æ›´æ–°ä¸€æ¬?
await prisma.aslScreeningTask.update({
  where: { id: taskId },
  data: {
    processedItems: processedCount,
    successItems: successCount,
    conflictItems: conflictCount,
    failedItems: processedCount - successCount,
  },
});
```

**效果**�
- âœ?æ¯<C3A6>处ç<E2809E>†å®Œ1篇文献，立å<E280B9>³æ›´æ–°æ•°æ<C2B0>®åº?
- âœ?å‰<C3A5>端æ¯?秒轮询一æ¬?
- �用户能看到平滑的进度增长

---

### 2. 添加模型处ç<E2809E>†æ•°é‡<C3A9>显示 â­?

#### 需�
在进度æ<EFBFBD>¡ä¸‹æ–¹æ˜¾ç¤ºï¼?
- DeepSeek 处ç<E2809E>†äº†å‡ ç¯?
- Qwen-Max 处ç<E2809E>†äº†å‡ ç¯?

#### 实现

**å‰<C3A5>端** (`ScreeningWorkbench.tsx`):
```tsx
{task && (
  <>
    <div className="text-sm text-gray-500 mt-2">
      已处ç<EFBFBD>? {task.processedItems} / {task.totalItems} ç¯?· 
      æˆ<EFBFBD>功: {task.successItems} · 
      冲çª<EFBFBD>: {task.conflictItems} · 
      失败: {task.failedItems}
    </div>
    <div className="text-xs text-gray-400 mt-1">
      <Tag color="blue" className="text-xs">DeepSeek-V3</Tag> 
      已处ç<EFBFBD>?{task.processedItems} ç¯?· 
      <Tag color="purple" className="text-xs">Qwen-Max</Tag> 
      已处ç<EFBFBD>?{task.processedItems} ç¯?
    </div>
  </>
)}
```

**显示效果**�
```
已处ç<EFBFBD>? 3 / 5 ç¯?· æˆ<C3A6>功: 3 · 冲çª<C3A7>: 1 · 失败: 0
[DeepSeek-V3] 已处ç<E2809E>?3 ç¯?· [Qwen-Max] 已处ç<E2809E>?3 ç¯?
```

**说明**�
- å<>Œæ¨¡åž‹æ˜¯å¹¶è¡Œå¤„ç<E2809E>†ï¼Œæ‰€ä»¥ä¸¤ä¸ªæ¨¡åž‹çš„处ç<E2809E>†æ•°é‡<C3A9>始终相å<C2B8>Œ
- 使用ä¸<C3A4>å<EFBFBD>Œé¢œè‰²çš„Tag区分模型（è“<C3A8>è‰?紫色ï¼?

---

### 3. ä¿®å¤<C3A5>列表显示顺åº<C3A5> â­?

#### 问题
- Excel顺åº<C3A5>：aã€<C3A3>bã€<C3A3>cã€<C3A3>d
- 设置与å<C5BD>¯åŠ¨é¢„览：aã€<C3A3>bã€<C3A3>cã€<C3A3>d âœ?
- 审核工作å<C593>°æ˜¾ç¤ºï¼šdã€<C3A3>cã€<C3A3>bã€<C3A3>a â<>?**å<><C3A5>了ï¼?*

#### 原因
å<EFBFBD>Žç«¯æŸ¥è¯¢ä½¿ç”¨äº?`orderBy: { createdAt: 'desc' }`（é™<EFBFBD>åº<EFBFBD>），导致最新创建的排在å‰<EFBFBD>é<EFBFBD>¢ã€?

由于文献是按Excel顺åº<EFBFBD>ä¾<EFBFBD>次导入的：
```
a（最早创建） �b �c �d（最晚创建）
```

é™<EFBFBD>åº<EFBFBD>排列å<EFBFBD>Žï¼š
```
d（最晚创建，排第1ï¼?â†?c â†?b â†?a（最早创建，排最å<E282AC>Žï¼‰
```

#### 解决方案

**å<>Žç«¯** (`screeningController.ts`):
```typescript
// 修改�
orderBy: [
  { conflictStatus: 'desc' },
  { createdAt: 'desc' },  // â<>?é™<C3A9>åº<C3A5>，最新的在å‰<C3A5>
]

// 修改å<C2B9>?
orderBy: [
  { conflictStatus: 'desc' },  // ä¿<C3A4>æŒ<C3A6>冲çª<C3A7>的排å‰<C3A5>é<EFBFBD>¢
  { createdAt: 'asc' },        // âœ?å<>‡åº<C3A5>，ä¿<C3A4>æŒ<C3A6>Excel原始顺åº<C3A5>
]
```

**排åº<C3A5>逻辑**ï¼?
1. **优先çº?**：冲çª<C3A7>状æ€<C3A6>（conflict > noneï¼?
   - 有冲çª<C3A7>的文献排在å‰<C3A5>é<EFBFBD>¢
   - 方便用户优先处ç<E2809E>†å†²çª<C3A7>
2. **优先çº?**：创建时间（å<CB86>‡åº<C3A5>ï¼?
   - ä¿<C3A4>æŒ<C3A6>Excel原始顺åº<C3A5>
   - 符å<C2A6>ˆç”¨æˆ·é¢„期

**效果**�
```
审核工作å<EFBFBD>°æ˜¾ç¤ºï¼šaã€<EFBFBD>bã€<EFBFBD>cã€<EFBFBD>d  âœ?
（如果c有冲çª<EFBFBD>：cã€<EFBFBD>aã€<EFBFBD>bã€<EFBFBD>dï¼?
```

---

## 📊 优化效果对比

### 进度显示

| æ–¹é<C2B9>¢ | 优化å‰?| 优化å<E28093>?|
|-----|-------|--------|
| 轮询间隔 | 2�| 1�|
| å<>Žç«¯æ›´æ–° | æ¯?0æ<30>?| æ¯?æ<>?|
| 用户体验 | 0% �等待 �100% | 0% �20% �40% �60% �80% �100% |
| 模型信æ<C2A1>¯ | æ—?| 显示DeepSeekå’ŒQwen处ç<E2809E>†æ•?|

### 列表顺åº<C3A5>

| 场景 | 优化å‰?| 优化å<E28093>?|
|-----|-------|--------|
| Excel顺åº<C3A5> | a, b, c, d | a, b, c, d |
| 预览顺åº<C3A5> | a, b, c, d | a, b, c, d |
| 审核工作å<C593>?| d, c, b, a â<>?| a, b, c, d âœ?|

---

## 🔧 修改文件清å<E280A6>•

### å‰<C3A5>端
1. �`frontend-v2/src/modules/asl/hooks/useScreeningTask.ts`
   - 轮询间隔���1�

2. �`frontend-v2/src/modules/asl/pages/ScreeningWorkbench.tsx`
   - 添加模型处ç<E2809E>†æ•°é‡<C3A9>显示

### å<>Žç«¯
3. �`backend/src/modules/asl/services/screeningService.ts`
   - 进度更新：æ¯<C3A6>10æ<30>?â†?æ¯?æ<>?

4. �`backend/src/modules/asl/controllers/screeningController.ts`
   - 排åº<C3A5>：`createdAt: 'desc'` â†?`createdAt: 'asc'`

---

## 🧪 测试验è¯<C3A8>

### 测试场景
1. 上传5篇文�
2. 点击"开始AIåˆ<C3A5>ç­›"
3. 观察审核工作å<C593>?

### 预期效果

#### 1. 进度显示
```
åˆ<EFBFBD>始: 0%
10秒å<EFBFBD>Ž: 20% â†?âœ?能看到进度ï¼<C3AF>
20秒å<EFBFBD>Ž: 40%
30秒å<EFBFBD>Ž: 60%
40秒å<EFBFBD>Ž: 80%
50秒å<EFBFBD>Ž: 100%

底部显示:
已处ç<EFBFBD>? 3 / 5 ç¯?· æˆ<C3A6>功: 3 · 冲çª<C3A7>: 1 · 失败: 0
[DeepSeek-V3] 已处ç<E2809E>?3 ç¯?· [Qwen-Max] 已处ç<E2809E>?3 ç¯?
```

#### 2. 列表顺åº<C3A5>
```
Excel: 文献A, 文献B, 文献C, 文献D, 文献E
审核工作å<EFBFBD>? 文献A, 文献B, 文献C, 文献D, 文献E  âœ?

（如果文献C有冲çª<EFBFBD>）
审核工作å<EFBFBD>? 文献C, 文献A, 文献B, 文献D, 文献E  âœ?
```

---

## 💡 技术细�

### 为什么æ¯<C3A6>1æ<31>¡å°±æ›´æ–°ï¼?
**æ<>ƒè¡¡**ï¼?
- **优点**：实时å<C2B6><C3A5>馈，用户体验å¥?
- **缺点**：数æ<C2B0>®åº“写入频ç¹<C3A7>
- **评估**：对于少é‡<C3A9>文献（5-200篇），数æ<C2B0>®åº“压力å<E280BA>¯æŽ¥å<C2A5>?

**如果文献数é‡<C3A9>很大**ï¼?000+篇），å<C592>¯ä»¥ä¼˜åŒ–为ï¼?
```typescript
// 动æ€<C3A6>调整更新频çŽ?
const updateInterval = literatures.length > 500 ? 10 : 1;
if (processedCount % updateInterval === 0 || processedCount === literatures.length) {
  await prisma.aslScreeningTask.update({ ... });
}
```

### 为什么轮询间隔是1秒？
**æ<>ƒè¡¡**ï¼?
- **优点**：å<C5A1>Šæ—¶æ›´æ–°ï¼Œå»¶è¿Ÿå°?
- **缺点**：API调用频ç¹<C3A7>
- **评估**�
  - æ¯<C3A6>次API调用耗时 < 100ms
  - 筛选过程æŒ<C3A6>续时间：1-30分钟
  - API调用次数ï¼?0-1800次（å<CB86>¯æŽ¥å<C2A5>—）

**如果需è¦<C3A8>优åŒ?*，å<C592>¯ä»¥ä½¿ç”?WebSocket 实时推é€<C3A9>：
```typescript
// 未æ<C2AA>¥ä¼˜åŒ–方案
socket.on('screening-progress', (data) => {
  setProgress(data.progress);
});
```

---

## ðŸ“<C5B8> 关于æµ<C3A6>览器警å‘?

### 警告信æ<C2A1>¯
```
[Violation]'setTimeout' handler took 72ms
[Violation]'setTimeout' handler took 269ms
```

### 说明
- 这是Chrome性能æ<C2BD><C3A6>示，ä¸<C3A4>是错è¯?
- 表示æŸ<C3A6>个setTimeout处ç<E2809E>†å‡½æ•°æ‰§è¡Œæ—¶é—´è¾ƒé•¿
- 通常由React大é‡<C3A9>DOM更新引起

### 是å<C2AF>¦éœ€è¦<C3A8>优化？
**短期**：ä¸<C3A4>需è¦?
- ä¸<C3A4>å½±å“<C3A5>功èƒ?
- 用户体验正常
- 处ç<E2809E>†æ—¶é—´åœ¨å<C2A8>¯æŽ¥å<C2A5>—范围内（< 300msï¼?

**长期**：å<C5A1>¯ä»¥ä¼˜åŒ?
1. 使用 `React.memo` å‡<C3A5>å°‘é‡<C3A9>渲æŸ?
2. 使用虚拟列表（如果文献很多）
3. 优化大型组件的渲染逻辑

---

## 🎯 å<>Žç»­ä¼˜åŒ–建议

### 短期（å<CB86>¯é€‰ï¼‰
1. 添加"æš‚å<E2809A>œ"按钮（暂å<E2809A>œç­›é€‰ä»»åŠ¡ï¼‰
2. 添加"估计剩余时间"（基于已处ç<E2809E>†é€Ÿåº¦ï¼?
3. 显示当å‰<C3A5>正在处ç<E2809E>†çš„文献标é¢?

### 中期
1. 使用WebSocket替代轮询（实时推é€<C3A9>）
2. 添加批é‡<C3A9>é‡<C3A9>试失败文献功能
3. 支æŒ<C3A6>任务å<C2A1>–消

### 长期
1. 分布å¼<C3A5>处ç<E2809E>†ï¼ˆå¤šä¸ªworker并行ï¼?
2. 断点续传（任务中断å<C2AD>Žå<C5BD>¯æ<C2AF>¢å¤<C3A5>）
3. 性能监控和分�

---

## 📊 性能数æ<C2B0>®

### 优化å‰<C3A5>å<EFBFBD>Žå¯¹æ¯”ï¼?篇文献）

| 指标 | 优化å‰?| 优化å<E28093>?| 改善 |
|-----|-------|--------|-----|
| 进度å<C2A6>¯è§<C3A8>æ€?| 0% â†?100% | 0â†?0â†?0â†?0â†?0â†?00% | âœ?5å€<C3A5>æ<EFBFBD><C3A6>å<EFBFBD>?|
| å<><C3A5>馈延迟 | ~20ç§?| ~1ç§?| âœ?20å€<C3A5>æ<EFBFBD><C3A6>å<EFBFBD>?|
| 列表顺åº<C3A5> | å<><C3A5>å<EFBFBD>‘ | 正确 | âœ?ä¿®å¤<C3A5> |
| ä¿¡æ<C2A1>¯å®Œæ•´æ€?| 基本 | 详细（å<CB86>«æ¨¡åž‹æ•°ï¼‰ | âœ?æ<><C3A6>å<EFBFBD>‡ |

---

**报告�*: AI Assistant  
**日期**: 2025-11-21  
**版本**: v1.0.0