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:
103
frontend-v2/src/modules/dc/pages/tool-c/components/Toolbar.tsx
Normal file
103
frontend-v2/src/modules/dc/pages/tool-c/components/Toolbar.tsx
Normal 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;
|
||||
|
||||
Reference in New Issue
Block a user