134 lines
7.3 KiB
TypeScript
134 lines
7.3 KiB
TypeScript
import React from 'react';
|
||
import {
|
||
Server,
|
||
ClipboardList,
|
||
Plus,
|
||
XCircle,
|
||
Image as ImageIcon,
|
||
Sparkles
|
||
} from 'lucide-react';
|
||
import { Step } from '../../types';
|
||
|
||
interface ContextStepProps {
|
||
setCurrentStep: (step: Step) => void;
|
||
}
|
||
|
||
export const ContextStep: React.FC<ContextStepProps> = ({ setCurrentStep }) => (
|
||
<div className="flex-1 p-8 bg-slate-50 overflow-y-auto animate-fade-in flex justify-center min-h-0">
|
||
<div className="max-w-4xl w-full h-full bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden flex flex-col">
|
||
<div className="p-6 border-b border-slate-100 flex-none">
|
||
<h3 className="text-xl font-bold text-slate-900">业务背景调研 (Business Context)</h3>
|
||
<p className="text-sm text-slate-500 mt-1">请补充企业的数字化现状与存量应用场景，AI 将基于此生成定制化的优化建议。</p>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-8 space-y-8">
|
||
<div className="grid grid-cols-2 gap-6">
|
||
<div className="col-span-2">
|
||
<label className="block text-sm font-bold text-slate-700 mb-2">企业及主营业务简介</label>
|
||
<textarea className="w-full p-3 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none" rows={3} placeholder="例如：某连锁生鲜零售企业，主营水果、蔬菜、肉禽蛋奶等生鲜产品，拥有线下门店500家..."></textarea>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-bold text-slate-700 mb-2">所属行业</label>
|
||
<select className="w-full p-3 border border-slate-300 rounded-lg text-sm bg-white">
|
||
<option>零售 - 生鲜连锁</option>
|
||
<option>金融 - 商业银行</option>
|
||
<option>制造 - 汽车供应链</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-bold text-slate-700 mb-2">数据规模 (估算)</label>
|
||
<div className="flex">
|
||
<input type="text" className="flex-1 p-3 border border-slate-300 rounded-l-lg text-sm" placeholder="100"/>
|
||
<select className="p-3 border-y border-r border-slate-300 rounded-r-lg text-sm bg-slate-50 text-slate-600 w-24">
|
||
<option>TB</option>
|
||
<option>PB</option>
|
||
<option>亿行</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-slate-50 p-6 rounded-lg border border-slate-200">
|
||
<h4 className="text-sm font-bold text-slate-800 mb-4 flex items-center">
|
||
<Server size={16} className="mr-2 text-blue-500"/> 数字化底座状况
|
||
</h4>
|
||
<div className="grid grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-xs font-bold text-slate-500 mb-2 uppercase">数据来源 (多选)</label>
|
||
<div className="space-y-2">
|
||
{['内部业务系统 (ERP/CRM/POS)', '外部采购/合作', '网络爬虫/公开数据', 'IoT 设备采集'].map(opt => (
|
||
<label key={opt} className="flex items-center space-x-2 cursor-pointer">
|
||
<input type="checkbox" className="rounded text-blue-600 focus:ring-blue-500"/>
|
||
<span className="text-sm text-slate-700">{opt}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-xs font-bold text-slate-500 mb-2 uppercase">数字化平台简介</label>
|
||
<input type="text" className="w-full p-2 border border-slate-300 rounded text-sm" placeholder="例如：使用金蝶云星空作为核心ERP..."/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs font-bold text-slate-500 mb-2 uppercase">数据存储及管控</label>
|
||
<div className="flex space-x-4">
|
||
{['公有云', '私有云/本地', '混合部署'].map(opt => (
|
||
<label key={opt} className="flex items-center space-x-2">
|
||
<input type="radio" name="storage" className="text-blue-600 focus:ring-blue-500"/>
|
||
<span className="text-sm text-slate-700">{opt}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border border-blue-100 bg-blue-50/30 p-6 rounded-lg">
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h4 className="text-sm font-bold text-slate-800 flex items-center">
|
||
<ClipboardList size={16} className="mr-2 text-blue-500"/>
|
||
当前数据应用场景 (存量)
|
||
</h4>
|
||
<button className="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center">
|
||
<Plus size={14} className="mr-1"/> 添加场景
|
||
</button>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<div className="flex items-start space-x-3 p-3 bg-white border border-slate-200 rounded-md shadow-sm">
|
||
<div className="flex-1 grid grid-cols-2 gap-4">
|
||
<input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="场景名称 (如: 月度销售报表)" defaultValue="月度销售经营报表" />
|
||
<input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="简述 (如: 统计各门店销售额)" defaultValue="统计各区域门店的月度GMV，维度单一" />
|
||
</div>
|
||
<button className="p-2 text-slate-400 hover:text-red-500"><XCircle size={18}/></button>
|
||
</div>
|
||
<div className="flex items-start space-x-3 p-3 bg-white border border-slate-200 rounded-md shadow-sm">
|
||
<div className="flex-1 grid grid-cols-2 gap-4">
|
||
<input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="场景名称 (如: 月度销售报表)" defaultValue="物流配送监控大屏" />
|
||
<input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="简述 (如: 统计各门店销售额)" defaultValue="实时展示车辆位置，但缺乏预警功能" />
|
||
</div>
|
||
<button className="p-2 text-slate-400 hover:text-red-500"><XCircle size={18}/></button>
|
||
</div>
|
||
|
||
<div className="mt-4 border-2 border-dashed border-slate-300 rounded-lg p-4 text-center cursor-pointer hover:bg-white transition-colors">
|
||
<p className="text-xs text-slate-500 flex items-center justify-center">
|
||
<ImageIcon size={14} className="mr-2"/> 上传现有报表/大屏截图 (辅助 AI 诊断)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-6 border-t border-slate-100 bg-slate-50 flex justify-end flex-none">
|
||
<button
|
||
onClick={() => setCurrentStep('value')}
|
||
className="px-8 py-3 bg-slate-900 text-white rounded-lg font-bold shadow-lg hover:bg-slate-800 transition-all flex items-center"
|
||
>
|
||
<Sparkles size={18} className="mr-2"/> 生成场景挖掘与优化建议
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|