HaHafeng
e52020409c
- System architecture and design documentation - Business module docs (ASL/AIA/PKB/RVW/DC/SSA/ST) - ASL module complete design (quality assurance, tech selection) - Platform layer and common capabilities docs - Development standards and API specifications - Deployment and operations guides - Project management and milestone tracking - Architecture implementation reports - Documentation templates and guides
156 lines
4.1 KiB
Markdown
156 lines
4.1 KiB
Markdown
# 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
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|