AIclinicalresearch/docs/03-业务模块/ASL-AI智能文献/02-技术设计/03-前端组件设计.md

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接口:

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

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

组件职责:

• 左侧显示摘要/全文
• 右侧显示AI判断和证据
• 支持文本高亮
• 支持查看引用来源

Props接口:

interface EvidenceModalProps {
  visible: boolean;
  itemId: string;
  dimension: 'P' | 'I' | 'C' | 'S';
  onClose: () => void;
}

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

组件职责:

• 整合表格和模态框
• 管理筛选状态
• 处理用户交互

---

🔄 状态管理

使用Zustand管理筛选状态

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