# AI智能文献模块 - 前端组件设计

> **文档版本：** v1.0  
> **创建日期：** 2025-10-29  
> **维护者：** AI智能文献开发团队  
> **最后更新：** 2025-10-29

---

## 📋 文档说明

本文档描述AI智能文献模块的前端组件设计，包括组件结构、组件接口、交互设计等。

---

## 🧩 组件架构

### 标题摘要初筛模块组件结构

```
LiteratureScreeningModule/
├── TitleAbstractScreening/
│   ├── SetupView/                    # 设置与启动视图
│   │   ├── CriteriaReference.tsx     # 标准参考面板
│   │   ├── CriteriaAdjustment.tsx    # 临时调整标准
│   │   ├── LiteratureImport.tsx      # 文献导入组件
│   │   └── StartScreeningButton.tsx  # 启动筛选按钮
│   │
│   ├── ReviewTableView/              # 表格化审核工作台 ⭐核心
│   │   ├── ScreeningTable.tsx        # 主表格组件
│   │   ├── TableHeader.tsx           # 表头（双行结构）
│   │   ├── TableRow.tsx              # 表格行
│   │   ├── ExpandableRow.tsx         # 可展开行（证据展示）
│   │   ├── JudgmentCell.tsx          # 判断单元格（✓/✗/?）
│   │   ├── ConflictIndicator.tsx     # 冲突状态指示器
│   │   └── DecisionSelector.tsx      # 最终决策选择器
│   │
│   ├── EvidenceModal/                # 双视图原文审查模态框
│   │   ├── ModalContainer.tsx        # 模态框容器
│   │   ├── AbstractView.tsx          # 左侧：摘要视图
│   │   ├── EvidenceView.tsx          # 右侧：证据视图
│   │   └── HighlightedText.tsx       # 高亮文本组件
│   │
│   ├── ResultView/                   # 结果展示视图
│   │   ├── StatisticsCards.tsx       # 统计卡片
│   │   ├── PrismaSummary.tsx         # PRISMA式排除总结
│   │   ├── ResultTabs.tsx            # 结果Tab页
│   │   └── ResultTable.tsx           # 结果表格
│   │
│   └── shared/                       # 共享组件
│       ├── ProtocolOverview.tsx      # 研究方案概览面板
│       ├── BatchOperation.tsx        # 批量操作组件
│       └── ExportButton.tsx          # 导出按钮
```

---

## 🎨 核心组件设计

### 1. ScreeningTable (表格化审核工作台)

**组件职责**:
- 展示文献列表和筛选结果
- 支持展开/收起查看证据
- 支持点击判断查看详情
- 支持批量操作

**Props接口**:
```typescript
interface ScreeningTableProps {
  projectId: string;
  items: LiteratureItem[];
  results: ScreeningResult[];
  onDecisionChange: (itemId: string, decision: string) => void;
  onBatchUpdate: (itemIds: string[], decision: string) => void;
}
```

### 2. EvidenceModal (双视图原文审查模态框)

**组件职责**:
- 左侧显示摘要/全文
- 右侧显示AI判断和证据
- 支持文本高亮
- 支持查看引用来源

**Props接口**:
```typescript
interface EvidenceModalProps {
  visible: boolean;
  itemId: string;
  dimension: 'P' | 'I' | 'C' | 'S';
  onClose: () => void;
}
```

### 3. ReviewTableView (审核工作台主视图)

**组件职责**:
- 整合表格和模态框
- 管理筛选状态
- 处理用户交互

---

## 🔄 状态管理

### 使用Zustand管理筛选状态

```typescript
interface ScreeningStore {
  currentProject: Project | null;
  items: LiteratureItem[];
  results: ScreeningResult[];
  selectedItems: string[];
  loading: boolean;
  
  // Actions
  loadProject: (projectId: string) => Promise<void>;
  updateDecision: (itemId: string, decision: string) => Promise<void>;
  batchUpdate: (itemIds: string[], decision: string) => Promise<void>;
}
```

---

## 📱 响应式设计

### 表格布局适配
- **桌面端**: 完整表格显示
- **平板端**: 可横向滚动，关键列固定
- **移动端**: 卡片式布局替代表格

---

## ⏳ 待完善内容

后续将补充：
- 详细组件接口定义
- 组件交互流程图
- 样式设计规范
- 组件使用示例

---

**文档版本：** v1.0  
**最后更新：** 2025-10-29