const { useState, useEffect, useRef } = React; // ===== 图标组件 ===== const LogoIcon = ({ size = 36 }) => ( ); const HomeIcon = () => ( ); const TeamIcon = () => ( ); const ChildrenIcon = () => ( ); const PartnersIcon = () => ( ); const EarthIcon = () => ( ); const ToolIcon = () => ( ); const ChevronDownIcon = () => ( ); const CheckIcon = () => ( ); const ArrowRightIcon = () => ( ); const ArrowUpIcon = () => ( ); const LoginIcon = () => ( ); const CloseIcon = () => ( ); const SparkleIcon = () => ( ); const BellIcon = () => ( ); const TaskIcon = () => ( ); const LogoutIcon = () => ( ); const UserIcon = () => ( ); const BuildingIcon = () => ( ); const ClientIcon = () => ( ); const GlobeIcon = () => ( ); // ===== 数据 ===== const navItems = [ { key: 'home', label: '首页', icon: HomeIcon }, { key: 'team', label: '关爱团队', icon: TeamIcon }, { key: 'children', label: '关爱儿童', icon: ChildrenIcon }, { key: 'partners', label: '关爱伙伴', icon: PartnersIcon }, { key: 'earth', label: '关爱地球', icon: EarthIcon }, { key: 'tools', label: '工具', icon: ToolIcon }, ]; const languages = [ { code: 'zh-CN', label: '简体中文' }, ]; const identityTabs = [ { key: 'employee', label: '员工', desc: '内部员工使用，可访问团队知识库与工作系统', icon: UserIcon, color: '#FF9F43', user: { name: '张晓明', dept: '人事行政部' }, }, { key: 'supplier', label: '供应商', desc: '供应商伙伴使用，可查看合作订单与采购信息', icon: BuildingIcon, color: '#5F27CD', user: { name: '李建国', dept: '厦门优品塑胶制品有限公司' }, }, { key: 'client', label: '客户', desc: '客户伙伴使用，可查看产品信息与服务进度', icon: ClientIcon, color: '#54A0FF', user: { name: '王美琪', dept: '广州启智玩具有限公司' }, }, ]; const plans = [ { key: 'team', title: '我们关爱团队', slogan: '我们对事业根基的守护', color: '#FF9F43', image: 'assets/plan-team.jpg', }, { key: 'children', title: '我们关爱儿童', slogan: '我们对未来世代的投资', color: '#54A0FF', image: 'assets/plan-children.jpg', }, { key: 'partners', title: '我们关爱伙伴', slogan: '我们对价值共生的承诺', color: '#5F27CD', image: 'assets/plan-partners.jpg', }, { key: 'earth', title: '我们关爱地球', slogan: '我们对生命家园的契约', color: '#10AC84', image: 'assets/plan-earth.jpg', }, ]; // ===== 页头组件 ===== function Header({ scrolled, activeNav, onNavClick, currentLang, onLangChange }) { const [langOpen, setLangOpen] = useState(false); const langRef = useRef(null); useEffect(() => { const handleClick = (e) => { if (langRef.current && !langRef.current.contains(e.target)) { setLangOpen(false); } }; document.addEventListener('click', handleClick); return () => document.removeEventListener('click', handleClick); }, []); const headerStyle = { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, padding: '0 40px', height: '72px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', transition: 'all 0.3s ease', background: scrolled ? 'rgba(255, 255, 255, 0.85)' : 'transparent', backdropFilter: scrolled ? 'blur(12px)' : 'none', WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none', borderBottom: scrolled ? '1px solid var(--border-color)' : '1px solid transparent', boxShadow: scrolled ? '0 2px 12px rgba(0,0,0,0.06)' : 'none', }; const currentLangObj = languages.find(l => l.code === currentLang); return (
邦纳生态系统
{currentLangObj.label}
); } // ===== 登录弹窗 ===== function LoginModal({ isOpen, onClose, onLogin }) { const [activeTab, setActiveTab] = useState('employee'); const [phone, setPhone] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); useEffect(() => { if (isOpen) { setPhone(''); setError(''); setLoading(false); } }, [isOpen]); if (!isOpen) return null; const handleLogin = () => { const phoneRegex = /^1[3-9]\d{9}$/; if (!phoneRegex.test(phone)) { setError('请输入正确的中国大陆11位手机号码'); return; } setError(''); setLoading(true); setTimeout(() => { setLoading(false); const identity = identityTabs.find(t => t.key === activeTab); onLogin(identity); }, 1000); }; return (
e.stopPropagation()} >

登录邦纳生态系统

请选择身份类型并输入手机号，首次登录由管理员审核后开通。

{/* 身份标签 */}
{identityTabs.map(tab => { const Icon = tab.icon; const isActive = activeTab === tab.key; return ( ); })}
{/* 身份说明 */}
{identityTabs.find(t => t.key === activeTab)?.desc}
{/* 手机号输入 */}
{ const val = e.target.value.replace(/\D/g, '').slice(0, 11); setPhone(val); if (error) setError(''); }} placeholder="请输入手机号码" style={{ width: '100%', height: '48px', padding: '0 16px', borderRadius: '10px', border: `1px solid ${error ? '#FF4D4F' : 'var(--border-color)'}`, fontSize: '15px', color: 'var(--text-primary)', outline: 'none', transition: 'border-color 0.2s ease', }} onFocus={e => { if (!error) e.target.style.borderColor = 'var(--brand-orange)'; }} onBlur={e => { if (!error) e.target.style.borderColor = 'var(--border-color)'; }} /> {error && (

{error}

)}
{/* 登录按钮 */}
); } // ===== 欢迎弹窗 ===== function WelcomeModal({ isOpen, onClose, onExplore }) { if (!isOpen) return null; return (
e.stopPropagation()} > {/* 顶部渐变横幅 */}
BANATOYS ECOSYSTEM

欢迎来到邦纳生态系统

感谢您加入邦纳生态系统。在这里，您可以参与四大关爱计划，与我们一起用爱守护，共创未来。探索更多精彩内容，开启您的生态之旅。

); } // ===== Hero区 ===== function Hero({ user, onLoginClick, onLogout }) { const heroRef = useRef(null); const scrollToPlans = () => { const el = document.getElementById('plans-section'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }; return (
{/* 背景图 */}
{/* 静止轨道 + 光点装饰 */} {/* 外层淡色轨道圆 */} {/* 内层轨道圆 */} {/* 轨道上的固定光点 */} {/* 内层固定光点 */} {/* 渐变遮罩 - 更浅更暖的色调，减少深蓝压迫感 */}
{/* 底部融合层 - 平滑过渡到下方板块背景色 */}
{/* 顶部柔光层 - 增加通透感 */}
{/* 内容 */}
{/* 徽章 */}
BANA SUNSHARE ECOSYSTEM
{/* 大标题 */}

邦纳生态系统

{/* 副标题 */}

以爱为纽带，共建美好世界. 四大关爱计划，共筑美好未来。

{/* 登录按钮 / 用户信息卡 */} {!user ? ( ) : (
{/* 用户信息卡 */}
{user.name.charAt(0)}
{user.name} {user.identityLabel}
{user.dept}
{/* 快捷按钮 */}
)}
{/* 底部滚动指示 */}
); } // ===== 计划卡片 ===== function PlanCard({ plan }) { return (
{ e.currentTarget.style.transform = 'translateY(-6px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }} > {/* 主题色小圆点 */}
{/* 图片区 */}
{plan.title} { e.currentTarget.style.transform = 'scale(1.06)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }} />
{/* 内容区 */}

{plan.title}

{plan.slogan}

); } // ===== 四大关爱计划区 ===== function PlansSection() { return (
{/* 标题区 */}
四大关爱计划

一个品牌，四种温度

四大关爱计划，构建温暖而有力量的品牌生态

{/* 卡片网格 */}
{plans.map(plan => ( ))}
); } // ===== 品牌口号区 ===== function SloganSection() { return (
{/* 顶部融合渐变 - 与计划区白色自然过渡 */}
{/* 中心柔光氛围 */}
{/* 底部融合渐变 - 与页脚白色自然衔接 */}
"
用心守护每一份热爱，用爱共建一个更美好的世界。
— 邦纳生态系统
); } // ===== 页脚 ===== function Footer() { return ( ); } // ===== 回到顶部按钮 ===== function BackToTop({ visible }) { const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }; return ( ); } // ===== 主应用 ===== function App() { const [scrolled, setScrolled] = useState(false); const [activeNav, setActiveNav] = useState('home'); const [currentLang, setCurrentLang] = useState('zh-CN'); const [loginOpen, setLoginOpen] = useState(false); const [welcomeOpen, setWelcomeOpen] = useState(false); const [user, setUser] = useState(null); const [showBackTop, setShowBackTop] = useState(false); useEffect(() => { const handleScroll = () => { const scrollY = window.scrollY; setScrolled(scrollY > 20); setShowBackTop(scrollY > 400); }; window.addEventListener('scroll', handleScroll, { passive: true }); return () => window.removeEventListener('scroll', handleScroll); }, []); const handleNavClick = (key) => { setActiveNav(key); if (key === 'home') { window.scrollTo({ top: 0, behavior: 'smooth' }); } }; const handleLogin = (identity) => { setUser({ name: identity.user.name, dept: identity.user.dept, identityLabel: identity.label, color: identity.color, }); setLoginOpen(false); setTimeout(() => setWelcomeOpen(true), 300); }; const handleLogout = () => { setUser(null); setActiveNav('home'); }; const handleExplore = () => { setWelcomeOpen(false); const el = document.getElementById('plans-section'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }; return ( <>
setLoginOpen(true)} onLogout={handleLogout} />