+ {/* Animated background elements */}
+
+ {/* Central AI Brain with breathing effect */}
+
+ {/* Glow effect */}
+
+
+
+
+
+
+ ))}
+
+
+ {/* Particle effects */}
+ {Array.from({length: 8}).map((_, i) => (
+
+
+ {/* Main title with typewriter effect */}
+
+ {typedText}
+
+
+ {/* Subtitle */}
+
+ AI时代，1个懂AI的员工 > 5个传统员工
上传组织架构图，AI一键测算你的 + 隐形降本空间 +
+
+ {/* Counter */}
+
+
+ {count.toLocaleString()}
+
+ 位老板获取了降本方案
+
+
+ {/* CTA Button */}
+
+ {/* Flowing light effect */}
+
+
+ {/* Trust indicators */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Screen2Upload.tsx b/src/components/Screen2Upload.tsx
new file mode 100644
index 0000000..c572913
--- /dev/null
+++ b/src/components/Screen2Upload.tsx
@@ -0,0 +1,205 @@
+import {motion} from 'motion/react';
+import {type ChangeEvent, useState} from 'react';
+import {FileImage, Shield, Upload} from 'lucide-react';
+
+interface Screen2UploadProps {
+ onSuccess: (file:File) => void;
+}
+
+const templates = [
+ {id: 'ecommerce', name: '电商型', icon: '🛒'},
+ {id: 'traditional', name: '传统型', icon: '🏢'},
+ {id: 'tech', name: '科技型', icon: '💻'},
+];
+
+export function Screen2Upload(props: Screen2UploadProps) {
+ // const userStore = useUserStore()
+ const [scanning, setScanning] = useState(false);
+ const [selectedTemplate, setSelectedTemplate] = useState
+
+
+ {/* Orbiting icons */}
+ {[
+ {Icon: Sparkles, delay: 0, color: '#00F0FF'},
+ {Icon: Cpu, delay: 1, color: '#7B61FF'},
+ {Icon: Database, delay: 2, color: '#00F0FF'},
+ {Icon: Zap, delay: 3, color: '#7B61FF'},
+ ].map((item, index) => (
+ 上传组织架构图，AI一键测算你的 + 隐形降本空间 +
+
+ 银行级加密
+
+
+
+ 3秒出结果
+
+
+
+ 数据即时销毁
+
+
+
+ {/* Title */}
+
+ 上传您的组织架构图
+
+
+
+ AI将智能分析各岗位的优化潜力
+
+
+ {/* Upload area */}
+
+ {scanning ? (
+ // Scanning animation
+
+
+ {/* Divider */}
+ {/**/}
+ {/* */}
+ {/* 选择分析类型*/}
+ {/* */}
+ {/**/}
+
+ {/* Templates */}
+ {/**/}
+ {/* {templates.map((template, index) => (*/}
+ {/* handleTemplateSelect(template.id)}*/}
+ {/* whileHover={{scale: 1.05}}*/}
+ {/* whileTap={{scale: 0.95}}*/}
+ {/* >*/}
+ {/* {template.icon}*/}
+ {/* {template.name}*/}
+ {/* */}
+ {/* ))}*/}
+ {/**/}
+
+ {/* Privacy notice */}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Screen3Analysis.tsx b/src/components/Screen3Analysis.tsx
new file mode 100644
index 0000000..ef2d3d8
--- /dev/null
+++ b/src/components/Screen3Analysis.tsx
@@ -0,0 +1,253 @@
+import {motion} from 'motion/react';
+import {useEffect, useState} from 'react';
+import {Brain, Cpu, TrendingUp, Zap} from 'lucide-react';
+
+
+const analysisSteps = [
+ { dept: '组织架构', message: '发现重复劳动节点...', icon: '🎨' },
+ { dept: 'AI替代方案', message: 'AI替代率 85%...', icon: '✍️' },
+ { dept: 'AI优化方案', message: '智能接入可节省 70%...', icon: '💬' },
+ { dept: 'AI优化空间', message: '数据分析优化空间 60%...', icon: '📊' },
+ { dept: 'AI部署方案', message: '自动化流程提升 75%...', icon: '⚙️' },
+];
+
+export function Screen3Analysis() {
+ const [currentStep, setCurrentStep] = useState(0);
+ const [nodes, setNodes] = useState
+ {/* Pulsing background */}
+
+
+ {templates.find(t => t.id === selectedTemplate)?.icon}
+ {templates.find(t => t.id === selectedTemplate)?.name}
+
+ )}
+
+
+ ) : (
+ // Upload interface
+ 正在扫描架构图...
+ + {/* Selected template info */} + {selectedTemplate && ( +
+
+ )}
+
+ {/* Corner decorations */}
+
+
+
+
+ 拖拽图片到此处
+或
+ +
+
+
+
+ {/* Radar scanning effect */}
+
+
+
+ {/* Analysis progress */}
+
+
+
+ {/* Progress bar */}
+
+
+
+ );
+}
diff --git a/src/components/Screen4Payment.tsx b/src/components/Screen4Payment.tsx
new file mode 100644
index 0000000..e78f348
--- /dev/null
+++ b/src/components/Screen4Payment.tsx
@@ -0,0 +1,285 @@
+import {motion} from 'motion/react';
+import {useEffect, useState} from 'react';
+import {AlertCircle, Check, Lock, Sparkles, TrendingDown, Users} from 'lucide-react';
+import {createAnalyzeOrderApi} from "@/api/service";
+import {wxPay} from "@/wx/wxPay";
+import {useUserStore} from "@/store/user-store";
+import toast from "react-hot-toast";
+
+interface Screen4PaymentProps {
+ onPayment: () => void;
+}
+
+const testimonials = [
+ '某杭州电商公司使用后，设计部成本降低60%',
+ '某深圳外贸公司使用后，客服响应速度提升5倍',
+ '某上海科技公司使用后，年度成本节省120万',
+];
+
+export function Screen4Payment({onPayment}: Screen4PaymentProps) {
+ const userStore = useUserStore()
+ const [countdown, setCountdown] = useState(599); // 9:59
+ const [currentTestimonial, setCurrentTestimonial] = useState(0);
+ //防抖
+ let debounce = true
+
+ /**
+ * 创建订单，吊起微信支付
+ */
+ const onCreateOrder = async () => {
+ if (!debounce) return
+ debounce = false
+ let res = await createAnalyzeOrderApi({
+ record_id: userStore.analysis.record_id
+ });
+ wxPay(res).then((state) => {
+ debounce = true
+ if (state) {
+ onPayment()
+ } else {
+ toast.error("支付失败")
+ }
+ })
+ }
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setCountdown((prev) => (prev > 0 ? prev - 1 : 0));
+ }, 1000);
+ return () => clearInterval(timer);
+ }, []);
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setCurrentTestimonial((prev) => (prev + 1) % testimonials.length);
+ }, 3000);
+ return () => clearInterval(timer);
+ }, []);
+
+ const minutes = Math.floor(countdown / 60);
+ const seconds = countdown % 60;
+
+ return (
+
+
+
+ {/* Node visualization */}
+
+ {nodes.map((node) => (
+
+ {/* Pulse effect */}
+
+ ))}
+
+
+ {/* Central AI brain */}
+
+
+
+
+ {/* Orbiting icons */}
+ {[Cpu, Zap, TrendingUp].map((Icon, index) => (
+
+
+
+
+ ))}
+
+
+
+
+ {analysisSteps.map((step, index) => (
+
+ {step.icon}
+
+ ))}
+
+
+ {/* Status text */}
+
+
+ {index === currentStep && (
+ 正在分析{step.dept}
+ {step.message}
+
+
+
+ )}
+ AI深度分析中，请稍候...
+
+ {/* Blurred background report preview */}
+
+ {/* Alert header */}
+
+
+
+ {/* Blurred teaser */}
+
+ {/* Blur overlay with preview data */}
+
+
+ {/* Unlock section */}
+
+
+
+
+ {/* Countdown */}
+
+
+
+
+ {/* Trust indicators */}
+
+
+
+
+
+ {/* Footer guarantees */}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Screen5Report.tsx b/src/components/Screen5Report.tsx
new file mode 100644
index 0000000..c22532a
--- /dev/null
+++ b/src/components/Screen5Report.tsx
@@ -0,0 +1,512 @@
+import {AnimatePresence, motion} from 'motion/react';
+import {FormEvent, useState} from 'react';
+import {ArrowRight, CheckCircle, FileText, Gift, MessageSquare, Sparkles, Users, X, Zap} from 'lucide-react';
+import {submitContactInfoApi} from "@/api/service";
+import {useUserStore} from "@/store/user-store";
+
+export function Screen5Report() {
+ const userStore = useUserStore()
+ const [formData, setFormData] = useState({
+ name: '',
+ phone: '',
+ company: '',
+ });
+ const [showReport, setShowReport] = useState(false);
+ const [showAdvisorModal, setShowAdvisorModal] = useState(false);
+
+
+ const handleSubmit = async (e: FormEvent) => {
+ e.preventDefault();
+
+ await submitContactInfoApi({
+ contact_name: formData.name,
+ contact_phone: formData.phone,
+ enterprise_name: formData.company,
+ record_id: userStore.analysis.record_id,
+ })
+ setShowReport(true);
+ };
+
+ if (!showReport) {
+ return (
+
+
+
+ {/* Main content */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 预计年度节省
+
+ ¥ {userStore.analysis.analysis_result.analyze_data.annual_savings_cost}
+
+ 效率提升
+
+ {userStore.analysis.analysis_result.analyze_data.efficiency_improvement} %
+
+
+
+
+
+
+
+
+ 经测算，您的企业每年由于员工不使用AI
+额外支出成本约为
+
+ ¥???{','}???
+
+
+
+ 优化后，预计每年可节省
+
+ ¥???{','}???
+
+
+
+
+ 解锁完整报告
+
+ {[
+ '各部门AI替代率精准评估',
+ '具体的降本金额明细',
+ '推荐的AI工具组合清单',
+ ].map((item, index) => (
+
+
+ ))}
+
+
+ {/* Price */}
+
+
+ {item}
+
+
+
+ {/* Payment button */}
+
+ ¥999
+ 限时特惠
+
+
+ ¥
+
+ 9.9
+
+
+
+
+
+
+
+
+
+
+ {/* Success icon */}
+
+
+
+
+ 报告已生成！
+
+
+
+ 请输入接收人信息以存档
+
+
+ {/* Form */}
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ setFormData({...formData, name: e.target.value})}
+ />
+
+
+
+
+ setFormData({...formData, phone: e.target.value})}
+ />
+
+
+
+
+ setFormData({...formData, company: e.target.value})}
+ />
+
+
+
+
+ {/* Header */}
+
+
+
+ {/* Summary cards */}
+
+
+
+
+
+
+ {/* AI Tools recommendation */}
+
+
+
+
+
+
+ {/* CTA section - Redesigned */}
+
+ {/* Animated background pattern */}
+
+
+
+ {/* Floating Action Button */}
+ setShowAdvisorModal(true)}
+ >
+
+
+ {/* Advisor Modal */}
+
+ {showAdvisorModal && (
+
+ {/* Backdrop */}
+ setShowAdvisorModal(false)}
+ />
+
+ {/* Modal */}
+
+ {/* Close button */}
+
+
+ {/* Animated icon */}
+
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+ 顾问微信二维码，长按识别添加
+
+ 添加后回复「{formData.company || formData.name}」 +
+ 立即获取专属方案 +
+
+
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..7ea4efd
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,6 @@
+import {createRoot} from "react-dom/client";
+import App from "./App";
+import "./styles/index.css";
+
+createRoot(document.getElementById("root")!).render(AI降本增效诊断报告
+为 {formData.company || formData.name} 定制
+
+
+
+
+
+
+
+
+ {/* Department analysis */}
+ 年度额外支出
+
+ ¥{userStore.analysis.analysis_result.analyze_data.annual_original_cost}
+
+ 预计年节省
+
+ ¥{userStore.analysis.analysis_result.analyze_data.annual_savings_cost}
+
+
+
+
+
+ {
+ userStore.analysis.analysis_result.analyze_data.analyze_postion_detail.map((dept: any, index) => {
+ let level = 0; // 0低，1普通，2高
+ if (dept.replace_save_rate < 30) {
+ level = 0
+ } else if (dept.replace_save_rate < 70) {
+ level = 1
+ } else {
+ level = 2
+ }
+ return (
+
+
+ )
+ })
+ }
+
+
+
+
+
+ {/* Progress bar */}
+
+
+
+ {dept.position}
+ {level == 2 && (
+ 急需优化
+ )}
+
+
+ {dept.original_number}人 → {dept.replace_with_ai_number}人 + AI
+
+
+
+
+ -{dept.replace_save_rate}%
+
+ 成本降低
+
+
+
+
+
+
+ {['文案生成AI', '设计辅助AI', '智能客服系统', '数据分析AI', '自动化运营工具', '会议记录AI'].map(
+ (tool, index) => (
+
+ {tool}
+
+ )
+ )}
+
+
+
+
+
+ setShowAdvisorModal(true)}
+ >
+
+
+
+
+
+ 知道问题了，不知道怎么落地？
+
+ 专属AI顾问为您提供
+
+ 行业定制版AI工具包 + 员工培训方案
+
添加专属AI顾问
++ 扫描下方二维码，即可获得： +
+ +
+ {[
+ '1对1定制化AI落地方案',
+ '行业专属AI工具包推荐',
+ '全员AI技能培训指导',
+ '《2025企业AI工具白皮书》PDF',
+ ].map((item, index) => (
+
+
+ ))}
+
+
+ {/* QR Code */}
+
+
+ {item}
+
+ ![]({"https://keyang2.tuzuu.com/%E6%95%88%E7%81%B5/kf.jpg"}/)
+
+
+ + 添加后回复「{formData.company || formData.name}」 +
+ 立即获取专属方案 +