HaHafeng
66255368b7
Features - User Management (Phase 4.1): - Database: Add user_modules table for fine-grained module permissions - Database: Add 4 user permissions (view/create/edit/delete) to role_permissions - Backend: UserService (780 lines) - CRUD with tenant isolation - Backend: UserController + UserRoutes (648 lines) - 13 API endpoints - Backend: Batch import users from Excel - Frontend: UserListPage (412 lines) - list/filter/search/pagination - Frontend: UserFormPage (341 lines) - create/edit with module config - Frontend: UserDetailPage (393 lines) - details/tenant/module management - Frontend: 3 modal components (592 lines) - import/assign/configure - API: GET/POST/PUT/DELETE /api/admin/users/* endpoints Architecture Upgrade - Module Permission System: - Backend: Add getUserModules() method in auth.service - Backend: Login API returns modules array in user object - Frontend: AuthContext adds hasModule() method - Frontend: Navigation filters modules based on user.modules - Frontend: RouteGuard checks requiredModule instead of requiredVersion - Frontend: Remove deprecated version-based permission system - UX: Only show accessible modules in navigation (clean UI) - UX: Smart redirect after login (avoid 403 for regular users) Fixes: - Fix UTF-8 encoding corruption in ~100 docs files - Fix pageSize type conversion in userService (String to Number) - Fix authUser undefined error in TopNavigation - Fix login redirect logic with role-based access check - Update Git commit guidelines v1.2 with UTF-8 safety rules Database Changes: - CREATE TABLE user_modules (user_id, tenant_id, module_code, is_enabled) - ADD UNIQUE CONSTRAINT (user_id, tenant_id, module_code) - INSERT 4 permissions + role assignments - UPDATE PUBLIC tenant with 8 module subscriptions Technical: - Backend: 5 new files (~2400 lines) - Frontend: 10 new files (~2500 lines) - Docs: 1 development record + 2 status updates + 1 guideline update - Total: ~4900 lines of code Status: User management 100% complete, module permission system operational
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
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|