HaHafeng
2c7ed94161
核心功能： - 新增Tool C主入口（index.tsx, 258行）：状态管理+布局 - 新增Header组件（91行）：顶栏+返回按钮+导出 - 新增Toolbar组件（104行）：7个快捷按钮+搜索框 - 新增DataGrid组件（111行）：AG Grid Community集成 - 新增Sidebar组件（149行）：右侧栏骨架版 - 新增API封装（toolC.ts, 218行）：8个API方法 - 新增类型定义（types/index.ts, 62行） AG Grid集成： - 安装ag-grid-community + ag-grid-react - Excel风格表格渲染 - 列排序、过滤、调整宽度 - 缺失值高亮显示（红色斜体） - 数值右对齐 - 自定义Emerald绿色主题（ag-grid-custom.css, 113行） - 虚拟滚动支持大数据 路由配置： - 更新dc/index.tsx：新增ToolCModule懒加载 - 更新Portal.tsx：Tool C状态改为ready - 路径：/data-cleaning/tool-c API封装（8个方法）： - uploadFile（上传CSV/Excel） - getSession（获取Session元数据） - getPreviewData（获取预览数据） - updateHeartbeat（延长10分钟） - generateCode（生成代码，不执行） - executeCode（执行代码） - processMessage（生成+执行，一步到位）核心API - getChatHistory（对话历史） 文档更新： - 新增Day 4前端基础完成总结（213行） - 更新工具C当前状态文档 - 更新TODO清单（Day 1-4标记完成） - 更新系统总体设计文档 测试数据准备： - cqol-demo.csv（21列x313行真实医疗数据） - G鼓膜穿孔数据.xlsx（备用） Day 5待完成： - MessageItem组件（消息渲染） - CodeBlock组件（Prism.js代码高亮） - InputArea组件（输入框交互） - InsightsPanel组件（数据洞察） - 完善Sidebar（完整Chat交互） - 端到端测试 影响范围： - frontend-v2/src/modules/dc/pages/tool-c/*（新增11个文件） - frontend-v2/src/modules/dc/api/toolC.ts（新增） - frontend-v2/src/modules/dc/index.tsx（更新路由） - frontend-v2/src/modules/dc/pages/Portal.tsx（启用Tool C） - docs/03-业务模块/DC-数据清洗整理/*（文档更新） - package.json（新增依赖） Breaking Changes: 无 总代码行数：+1106行（前端基础框架） Refs: #Tool-C-Day4
AI临床研究平台 - Frontend V2
版本： V2.0
创建日期： 2025-11-12
技术栈： React 18 + TypeScript + Vite + Ant Design + Tailwind CSS
📋 项目说明
这是AI临床研究平台的全新前端架构，采用模块化设计，支持：
- ✅ 顶部导航布局
- ✅ 模块化架构（5个业务模块）
- ✅ 动态模块加载
- ✅ 懒加载和代码分割
- ✅ 统一的开发规范
🚀 快速开始
安装依赖
npm install
启动开发服务器
npm run dev
构建生产版本
npm run build
预览生产构建
npm run preview
📁 项目结构
src/
├── framework/ # 框架层（平台级基础设施）
│ ├── layout/ # 布局系统
│ ├── modules/ # 模块注册系统
│ ├── router/ # 路由系统
│ ├── permission/ # 权限控制
│ └── config/ # 全局配置
│
├── modules/ # 业务模块（完全独立）
│ ├── asl/ # AI智能文献
│ ├── aia/ # AI智能问答
│ ├── pkb/ # 个人知识库
│ ├── rvw/ # 审稿系统
│ └── dc/ # 数据清洗
│
├── shared/ # 共享资源
│ ├── components/ # 通用组件
│ ├── hooks/ # 通用Hooks
│ ├── utils/ # 工具函数
│ └── api/ # API客户端
│
├── pages/ # 页面组件
│ └── HomePage.tsx # 首页
│
├── App.tsx # 应用根组件
└── main.tsx # 应用入口
🎯 模块说明
已实现
- ✅ 框架层：顶部导航、主布局、模块注册
- ✅ 占位页面：5个模块的占位展示
- ✅ 首页：模块入口和统计信息
开发中
- 🚧 ASL模块：Week 3 开发（AI智能文献）
待开发
- 📋 AIA模块：AI智能问答（后续重写）
- 📋 PKB模块：个人知识库（后续重写）
- 📋 RVW模块：审稿系统（后续重写）
- 📋 DC模块：数据清洗（占位）
🔧 开发规范
命名规范
- 组件文件：PascalCase（
TopNavigation.tsx） - Hooks文件：camelCase + use前缀（
useAuth.ts） - 工具函数：camelCase（
formatDate.ts） - 类型定义：PascalCase（
types.ts）
路径别名
使用 @/ 作为 src/ 的别名：
import TopNavigation from '@/framework/layout/TopNavigation'
import Placeholder from '@/shared/components/Placeholder'
模块开发
每个新模块需要：
- 在
src/modules/[模块名]/创建目录 - 创建
index.tsx作为模块入口 - 在
moduleRegistry.ts中注册模块 - 实现模块的
ModuleDefinition接口
📚 相关文档
🔗 API代理
开发环境下，所有 /api/* 请求会被代理到后端服务器：
Frontend: http://localhost:3000
Backend: http://localhost:3001
📝 TODO
- 实现权限控制系统
- 添加用户认证流程
- 实现面包屑导航
- 添加全局状态管理
- 完善错误处理
- 添加单元测试
维护者： 开发团队
最后更新： 2025-11-12