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;
|