# 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