3db7af209c
详细说明: - 修复了@n8n/config包的TypeScript配置错误 - 移除了不存在的jest-expect-message类型引用 - 清理了所有TypeScript构建缓存 - 更新了可行性分析文档，添加了技术实施方案 - 更新了Agent prompt文档 - 添加了会展策划工作流文档 - 包含了n8n-chinese-translation子项目 - 添加了exhibition-demo展示系统框架
261 lines
8.5 KiB
TypeScript
261 lines
8.5 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import {
|
||
FileText,
|
||
Target,
|
||
TrendingUp,
|
||
Calendar,
|
||
DollarSign,
|
||
AlertTriangle,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
RotateCcw,
|
||
Download
|
||
} from 'lucide-react';
|
||
import { useDemoStore } from '../store/demoStore';
|
||
|
||
interface ResultPageProps {
|
||
onRestart: () => void;
|
||
}
|
||
|
||
const sections = [
|
||
{ id: 'overview', title: '策划案概述', icon: FileText },
|
||
{ id: 'introduction', title: '展会介绍与预期效果', icon: Target },
|
||
{ id: 'marketing', title: '营销方案', icon: TrendingUp },
|
||
{ id: 'operation', title: '现场运营方案', icon: Calendar },
|
||
{ id: 'budget', title: '预算与收益分析', icon: DollarSign },
|
||
{ id: 'risk', title: '风险评估与应急预案', icon: AlertTriangle },
|
||
];
|
||
|
||
const ResultPage: React.FC<ResultPageProps> = ({ onRestart }) => {
|
||
const [currentSection, setCurrentSection] = useState(0);
|
||
const { generatedContent } = useDemoStore();
|
||
|
||
const handlePrevious = () => {
|
||
if (currentSection > 0) {
|
||
setCurrentSection(currentSection - 1);
|
||
}
|
||
};
|
||
|
||
const handleNext = () => {
|
||
if (currentSection < sections.length - 1) {
|
||
setCurrentSection(currentSection + 1);
|
||
}
|
||
};
|
||
|
||
// Mock content for demonstration
|
||
const getSectionContent = (sectionId: string) => {
|
||
const mockContent = {
|
||
overview: {
|
||
title: '2024长三角国际新能源汽车与智能交通产业博览会',
|
||
content: `
|
||
## 策划背景
|
||
在全球碳中和目标推动下，新能源汽车产业迎来爆发式增长。长三角地区作为中国汽车产业核心集群，聚集了特斯拉、上汽、蔚来等龙头企业。
|
||
|
||
## 策划目的
|
||
- 打造长三角地区新能源汽车与智能交通领域第一展会品牌
|
||
- 吸引300家优质展商，实现现场意向交易额超8亿元人民币
|
||
- 促进产业链上下游合作，推动技术创新和产业升级
|
||
- 推广绿色出行理念，助力碳中和目标实现
|
||
`,
|
||
images: ['/api/placeholder/600/400', '/api/placeholder/600/400']
|
||
},
|
||
introduction: {
|
||
title: '展会规模与预期',
|
||
content: `
|
||
## 展会主题
|
||
「智行未来，绿动长三角」
|
||
|
||
## 预计规模
|
||
- 展览面积：50,000平方米
|
||
- 标准展位：1,200个（9平米/个）
|
||
- 特装展位：20,000平方米
|
||
- 参展商家数：350家
|
||
- 参观人次：50,000人次
|
||
|
||
## 预期效果
|
||
- 现场成交额预计超10亿元
|
||
- 带动相关产业收入约30亿元
|
||
- 媒体曝光量超1亿次
|
||
`,
|
||
images: []
|
||
},
|
||
// Add more sections...
|
||
};
|
||
|
||
return mockContent[sectionId] || generatedContent[sectionId] || mockContent.overview;
|
||
};
|
||
|
||
const currentSectionData = getSectionContent(sections[currentSection].id);
|
||
|
||
return (
|
||
<div className="min-h-screen p-6">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="mb-8"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-4xl font-bold text-gradient">
|
||
会展策划方案
|
||
</h1>
|
||
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
onClick={() => {}}
|
||
className="px-4 py-2 glass-morphism rounded-xl hover:scale-105 transition-transform flex items-center gap-2"
|
||
>
|
||
<Download className="w-4 h-4" />
|
||
导出方案
|
||
</button>
|
||
|
||
<button
|
||
onClick={onRestart}
|
||
className="px-4 py-2 glass-morphism rounded-xl hover:scale-105 transition-transform flex items-center gap-2"
|
||
>
|
||
<RotateCcw className="w-4 h-4" />
|
||
重新演示
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Section Tabs */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.2 }}
|
||
className="mb-8"
|
||
>
|
||
<div className="flex items-center gap-2 overflow-x-auto scrollbar-thin pb-2">
|
||
{sections.map((section, index) => {
|
||
const Icon = section.icon;
|
||
return (
|
||
<button
|
||
key={section.id}
|
||
onClick={() => setCurrentSection(index)}
|
||
className={`
|
||
flex items-center gap-2 px-4 py-2 rounded-xl transition-all whitespace-nowrap
|
||
${currentSection === index
|
||
? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
|
||
: 'glass-morphism hover:scale-105'
|
||
}
|
||
`}
|
||
>
|
||
<Icon className="w-4 h-4" />
|
||
<span className="font-medium">{section.title}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Content Area */}
|
||
<AnimatePresence mode="wait">
|
||
<motion.div
|
||
key={currentSection}
|
||
initial={{ opacity: 0, x: 20 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
exit={{ opacity: 0, x: -20 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="glass-morphism rounded-2xl p-8"
|
||
>
|
||
{/* Section Header */}
|
||
<div className="mb-6">
|
||
<h2 className="text-3xl font-bold mb-2">
|
||
{currentSectionData.title}
|
||
</h2>
|
||
<div className="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full" />
|
||
</div>
|
||
|
||
{/* Section Content */}
|
||
<div className="prose prose-neutral dark:prose-invert max-w-none">
|
||
<div className="whitespace-pre-wrap text-neutral-700 dark:text-neutral-300">
|
||
{currentSectionData.content}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Images */}
|
||
{currentSectionData.images && currentSectionData.images.length > 0 && (
|
||
<div className="mt-8 grid grid-cols-2 gap-4">
|
||
{currentSectionData.images.map((src, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ delay: index * 0.1 }}
|
||
className="rounded-xl overflow-hidden shadow-lg"
|
||
>
|
||
<img
|
||
src={src}
|
||
alt={`Section image ${index + 1}`}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</motion.div>
|
||
</AnimatePresence>
|
||
|
||
{/* Navigation */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.4 }}
|
||
className="mt-8 flex items-center justify-between"
|
||
>
|
||
<button
|
||
onClick={handlePrevious}
|
||
disabled={currentSection === 0}
|
||
className={`
|
||
px-4 py-2 rounded-xl flex items-center gap-2 transition-all
|
||
${currentSection === 0
|
||
? 'opacity-50 cursor-not-allowed glass-morphism'
|
||
: 'glass-morphism hover:scale-105'
|
||
}
|
||
`}
|
||
>
|
||
<ChevronLeft className="w-4 h-4" />
|
||
上一页
|
||
</button>
|
||
|
||
{/* Page Indicators */}
|
||
<div className="flex items-center gap-2">
|
||
{sections.map((_, index) => (
|
||
<div
|
||
key={index}
|
||
className={`
|
||
w-2 h-2 rounded-full transition-all
|
||
${currentSection === index
|
||
? 'w-8 bg-gradient-to-r from-blue-500 to-purple-500'
|
||
: 'bg-neutral-400'
|
||
}
|
||
`}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
<button
|
||
onClick={handleNext}
|
||
disabled={currentSection === sections.length - 1}
|
||
className={`
|
||
px-4 py-2 rounded-xl flex items-center gap-2 transition-all
|
||
${currentSection === sections.length - 1
|
||
? 'opacity-50 cursor-not-allowed glass-morphism'
|
||
: 'glass-morphism hover:scale-105'
|
||
}
|
||
`}
|
||
>
|
||
下一页
|
||
<ChevronRight className="w-4 h-4" />
|
||
</button>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ResultPage; |