refactor(asl): ASL frontend architecture refactoring with left navigation
- feat: Create ASLLayout component with 7-module left navigation - feat: Implement Title Screening Settings page with optimized PICOS layout - feat: Add placeholder pages for Workbench and Results - fix: Fix nested routing structure for React Router v6 - fix: Resolve Spin component warning in MainLayout - fix: Add QueryClientProvider to App.tsx - style: Optimize PICOS form layout (P+I left, C+O+S right) - style: Align Inclusion/Exclusion criteria side-by-side - docs: Add architecture refactoring and routing fix reports Ref: Week 2 Frontend Development Scope: ASL module MVP - Title Abstract Screening
This commit is contained in:
221
【给新AI】快速开始.md
Normal file
221
【给新AI】快速开始.md
Normal file
@@ -0,0 +1,221 @@
|
||||
# 【给新AI】ASL模块 - 5分钟快速上手
|
||||
|
||||
**当前时间**: 2025-11-18
|
||||
**当前任务**: Week 2 前端UI开发
|
||||
**阅读时间**: 3分钟
|
||||
|
||||
---
|
||||
|
||||
## 这是什么项目？
|
||||
|
||||
**AIclinicalresearch** = 医学文献AI筛选平台
|
||||
|
||||
**当前开发**: ASL模块（AI Smart Literature）- 帮助医生用AI筛选医学文献
|
||||
|
||||
---
|
||||
|
||||
## 当前进度
|
||||
|
||||
```
|
||||
✅ Week 1: 后端完成（数据库+API+LLM筛选）
|
||||
🔄 Week 2: 前端开发 ← 你现在在这里
|
||||
⬜ Week 3: 批量筛选
|
||||
⬜ Week 4: 测试上线
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Week 2 要做什么？
|
||||
|
||||
### 3个页面开发
|
||||
|
||||
**Day 1-2**: 项目管理
|
||||
- 项目列表页
|
||||
- 创建项目表单（含PICOS + 筛选风格选择）
|
||||
|
||||
**Day 3-4**: 文献导入
|
||||
- Excel上传界面
|
||||
- 文献预览表格
|
||||
|
||||
**Day 5**: 筛选结果展示 ⭐ **重点**
|
||||
- 结果列表
|
||||
- **显示两个模型的判断理由**（最重要！）
|
||||
|
||||
---
|
||||
|
||||
## 核心功能：双模型筛选
|
||||
|
||||
```
|
||||
用户上传文献
|
||||
↓
|
||||
DeepSeek-V3 ────┐
|
||||
├─→ 对比 → 最终决策
|
||||
Qwen-Max ───────┘
|
||||
|
||||
一致 → 采纳
|
||||
冲突 → 人工复核
|
||||
```
|
||||
|
||||
**关键**: 前端必须显示**两个模型的完整理由**
|
||||
|
||||
---
|
||||
|
||||
## 技术栈
|
||||
|
||||
```
|
||||
前端: React 18 + Ant Design 5 + TypeScript
|
||||
后端: Fastify + Prisma + PostgreSQL
|
||||
LLM: DeepSeek-V3 + Qwen-Max（已集成✅）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 快速启动
|
||||
|
||||
```bash
|
||||
# 1. 启动后端
|
||||
cd backend && npm run dev
|
||||
# → http://localhost:3001
|
||||
|
||||
# 2. 启动前端
|
||||
cd frontend-v2 && npm run dev
|
||||
# → http://localhost:5173
|
||||
|
||||
# 3. 测试API
|
||||
curl http://localhost:3001/api/v1/asl/health
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 关键文档（只需看这3个）
|
||||
|
||||
1. **任务清单**: `docs/03-业务模块/ASL-AI智能文献/04-开发计划/03-任务分解.md`
|
||||
- Week 2详细任务
|
||||
|
||||
2. **UI原型**: `docs/03-业务模块/ASL-AI智能文献/03-UI设计/AI智能文献-标题摘要初筛原型.html`
|
||||
- 界面参考
|
||||
|
||||
3. **API文档**: `docs/03-业务模块/ASL-AI智能文献/02-技术设计/02-API设计规范.md`
|
||||
- 接口调用
|
||||
|
||||
---
|
||||
|
||||
## API示例
|
||||
|
||||
### 创建项目
|
||||
```typescript
|
||||
POST /api/v1/asl/projects
|
||||
{
|
||||
"projectName": "卒中预防研究",
|
||||
"picoCriteria": {
|
||||
"population": "非心源性缺血性卒中患者",
|
||||
"intervention": "抗血小板药物",
|
||||
"comparison": "安慰剂",
|
||||
"outcome": "卒中复发",
|
||||
"studyDesign": "RCT"
|
||||
},
|
||||
"inclusionCriteria": "...",
|
||||
"exclusionCriteria": "...",
|
||||
"screeningConfig": {
|
||||
"style": "lenient", // ← 筛选风格：lenient/standard/strict
|
||||
"models": ["deepseek-chat", "qwen-max"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 获取筛选结果
|
||||
```typescript
|
||||
GET /api/v1/asl/projects/:id/results
|
||||
|
||||
Response:
|
||||
{
|
||||
"literatureId": "uuid",
|
||||
"title": "...",
|
||||
"finalDecision": "pending",
|
||||
|
||||
// ⭐ 两个模型的完整结果
|
||||
"model1Result": {
|
||||
"modelName": "DeepSeek-V3",
|
||||
"conclusion": "exclude",
|
||||
"confidence": 0.92,
|
||||
"reason": "虽然P、I、S维度匹配，但对照组..." // ← 必须显示
|
||||
},
|
||||
"model2Result": {
|
||||
"modelName": "Qwen-Max",
|
||||
"conclusion": "include",
|
||||
"confidence": 0.85,
|
||||
"reason": "研究人群和干预措施匹配..." // ← 必须显示
|
||||
},
|
||||
|
||||
"hasConflict": true
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Week 2 关键任务 ⭐
|
||||
|
||||
### 1. 筛选风格选择器
|
||||
```jsx
|
||||
<Radio.Group defaultValue="standard">
|
||||
<Radio value="lenient">宽松模式（初筛）</Radio>
|
||||
<Radio value="standard">标准模式</Radio>
|
||||
<Radio value="strict">严格模式</Radio>
|
||||
</Radio.Group>
|
||||
```
|
||||
|
||||
### 2. 模型理由展示（最重要！）
|
||||
```jsx
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Card title="🤖 DeepSeek-V3">
|
||||
<Tag>{model1.conclusion}</Tag>
|
||||
<p><strong>理由:</strong> {model1.reason}</p>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card title="🤖 Qwen-Max">
|
||||
<Tag>{model2.conclusion}</Tag>
|
||||
<p><strong>理由:</strong> {model2.reason}</p>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 重要提醒
|
||||
|
||||
1. ✅ **后端已完成** - 10个API都可以直接调用
|
||||
2. ✅ **三种Prompt已实现** - 后端支持style参数
|
||||
3. ⭐ **理由展示是核心** - 用户强调必须看到AI思考过程
|
||||
4. ⚠️ **JWT暂时绕过** - 使用测试用户（生产需修复）
|
||||
|
||||
---
|
||||
|
||||
## 成功标准
|
||||
|
||||
- [ ] 3个页面开发完成
|
||||
- [ ] 用户可以选择筛选风格
|
||||
- [ ] **两个模型的理由清晰展示**
|
||||
- [ ] 冲突文献有明显标记
|
||||
- [ ] UI符合Ant Design规范
|
||||
|
||||
---
|
||||
|
||||
## 需要帮助？
|
||||
|
||||
**详细交接文档**: `docs/03-业务模块/ASL-AI智能文献/00-新AI交接文档.md`
|
||||
|
||||
**系统总览**: `docs/00-系统总体设计/00-系统当前状态与开发指南.md`
|
||||
|
||||
---
|
||||
|
||||
**祝开发顺利！** 🚀
|
||||
|
||||
---
|
||||
|
||||
**文档版本**: v1.0 - 极简版
|
||||
**用途**: 新AI 3分钟快速上手
|
||||
**详细版本**: 见`00-新AI交接文档.md`
|
||||
|
||||
Reference in New Issue
Block a user