feat(dc/tool-c): 完成前端基础框架(Day 4 MVP)

核心功能:
- 新增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
This commit is contained in:
2025-12-07 17:40:07 +08:00
parent f01981bf78
commit 2c7ed94161
20 changed files with 3173 additions and 105 deletions

View File

@@ -0,0 +1,103 @@
/**
* Tool C Toolbar组件
*
* 扁平化工具栏7个快捷操作按钮 + 搜索框
*/
import {
Calculator,
CalendarClock,
ArrowLeftRight,
FileSearch,
Wand2,
Filter,
Search,
} from 'lucide-react';
interface ToolbarButtonProps {
icon: React.ElementType;
label: string;
colorClass: string;
onClick?: () => void;
disabled?: boolean;
}
const ToolbarButton: React.FC<ToolbarButtonProps> = ({
icon: Icon,
label,
colorClass,
onClick,
disabled = true, // MVP阶段暂不可用
}) => {
return (
<button
onClick={onClick}
disabled={disabled}
className={`flex flex-col items-center justify-center w-20 h-14 rounded-lg transition-all hover:shadow-sm disabled:opacity-50 disabled:cursor-not-allowed ${colorClass}`}
title={disabled ? '开发中...' : label}
>
<Icon className="w-5 h-5 mb-1" />
<span className="text-[10px] font-medium">{label}</span>
</button>
);
};
const Toolbar = () => {
return (
<div className="bg-white border-b border-slate-200 px-4 py-2 flex items-center gap-1 overflow-x-auto flex-none shadow-sm z-10">
{/* 7个快捷按钮 */}
<ToolbarButton
icon={Calculator}
label="生成新变量"
colorClass="text-emerald-600 bg-emerald-50 hover:bg-emerald-100"
/>
<ToolbarButton
icon={CalendarClock}
label="时间差"
colorClass="text-blue-600 bg-blue-50 hover:bg-blue-100"
/>
<ToolbarButton
icon={ArrowLeftRight}
label="横纵转换"
colorClass="text-cyan-600 bg-cyan-50 hover:bg-cyan-100"
/>
<div className="w-[1px] h-8 bg-slate-200 mx-2"></div>
<ToolbarButton
icon={FileSearch}
label="查重"
colorClass="text-orange-600 bg-orange-50 hover:bg-orange-100"
/>
<ToolbarButton
icon={Wand2}
label="多重插补"
colorClass="text-rose-600 bg-rose-50 hover:bg-rose-100"
/>
<div className="w-[1px] h-8 bg-slate-200 mx-2"></div>
<ToolbarButton
icon={Filter}
label="筛选分析集"
colorClass="text-indigo-600 bg-indigo-50 hover:bg-indigo-100"
/>
<div className="flex-1"></div>
{/* 搜索框 */}
<div className="relative">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
<input
className="pl-9 pr-4 py-1.5 text-sm bg-slate-100 border-none rounded-full w-48 focus:w-64 transition-all outline-none focus:ring-2 focus:ring-emerald-500/20"
placeholder="搜索值..."
disabled
title="开发中..."
/>
</div>
</div>
);
};
export default Toolbar;