openyida 2026.7.18 → 2026.7.21

package/project/pages/src/demo-future-vision-2026.oyd.jsx

@@ -1,1102 +0,0 @@
-// ============================================================
-// 状态管理
-// ============================================================
-
-const FORM_UUID = 'FORM-XXX';
-const APP_TYPE = 'APP_XXX';
-
-// 报名动态数据
-const REGISTRATION_NOTICES = [
-  '刚刚：张总来自字节跳动完成报名',
-  '1分钟前：李经理来自腾讯完成报名',
-  '2分钟前：王总来自华为完成报名',
-  '3分钟前：陈总来自阿里巴巴完成报名',
-  '4分钟前：刘总来自百度完成报名',
-  '5分钟前：赵经理来自小米完成报名',
-  '刚刚：孙总来自蔚来汽车完成报名',
-  '1分钟前：周总来自理想汽车完成报名',
-];
-
-const _customState = {
-  // 倒计时
-  countdownDays: 0,
-  countdownHours: 0,
-  countdownMinutes: 0,
-  countdownSeconds: 0,
-  // 报名动态
-  currentNoticeIndex: 0,
-  noticeVisible: true,
-  // 报名人数
-  registeredCount: 3847,
-  // 表单状态
-  isSubmitting: false,
-  isSubmitted: false,
-  submitError: '',
-  // 表单字段（非受控，仅静默存储）
-  formName: '',
-  formCompany: '',
-  formPosition: '',
-  formEmail: '',
-  // 进度条
-  totalSeats: 5000,
-};
-
-export function getCustomState(key) {
-  if (key) return _customState[key];
-  return { ..._customState };
-}
-
-export function setCustomState(newState) {
-  Object.keys(newState).forEach(function(key) {
-    _customState[key] = newState[key];
-  });
-  this.forceUpdate();
-}
-
-export function forceUpdate() {
-  this.setState({ timestamp: new Date().getTime() });
-}
-
-// ============================================================
-// 生命周期
-// ============================================================
-
-export function didMount() {
-  // 启动倒计时
-  this.updateCountdown();
-  _customState._countdownTimer = setInterval(function() {
-    this.updateCountdown();
-  }.bind(this), 1000);
-
-  // 启动报名动态轮播
-  _customState._noticeTimer = setInterval(function() {
-    var nextIndex = (_customState.currentNoticeIndex + 1) % REGISTRATION_NOTICES.length;
-    this.setCustomState({ currentNoticeIndex: nextIndex, noticeVisible: true });
-  }.bind(this), 4000);
-
-  // 数字跳动效果：报名人数随机小幅增加
-  _customState._countTimer = setInterval(function() {
-    if (Math.random() > 0.7) {
-      this.setCustomState({ registeredCount: _customState.registeredCount + 1 });
-    }
-  }.bind(this), 8000);
-}
-
-export function didUnmount() {
-  clearInterval(_customState._countdownTimer);
-  clearInterval(_customState._noticeTimer);
-  clearInterval(_customState._countTimer);
-}
-
-export function updateCountdown() {
-  // 目标时间：2026年3月15日 14:00 GMT+8
-  var targetTime = new Date('2026-03-15T14:00:00+08:00').getTime();
-  var now = new Date().getTime();
-  var diff = targetTime - now;
-
-  if (diff <= 0) {
-    this.setCustomState({ countdownDays: 0, countdownHours: 0, countdownMinutes: 0, countdownSeconds: 0 });
-    return;
-  }
-
-  var days = Math.floor(diff / (1000 * 60 * 60 * 24));
-  var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-  var seconds = Math.floor((diff % (1000 * 60)) / 1000);
-
-  this.setCustomState({ countdownDays: days, countdownHours: hours, countdownMinutes: minutes, countdownSeconds: seconds });
-}
-
-/**
- * 滚动到报名表单
- */
-export function scrollToForm() {
-  var formEl = document.getElementById('registration-form');
-  if (formEl) {
-    formEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  }
-}
-
-/**
- * 处理表单提交
- */
-export function handleSubmit(e) {
-  e.preventDefault();
-
-  // 获取表单值
-  var name = _customState.formName || '';
-  var company = _customState.formCompany || '';
-  var position = _customState.formPosition || '';
-  var email = _customState.formEmail || '';
-
-  // 表单验证
-  if (!name.trim()) {
-    this.setCustomState({ submitError: '请输入您的姓名' });
-    return;
-  }
-  if (!company.trim()) {
-    this.setCustomState({ submitError: '请输入您的公司名称' });
-    return;
-  }
-  if (!position || position === '请选择') {
-    this.setCustomState({ submitError: '请选择您的职位' });
-    return;
-  }
-  if (!email.trim()) {
-    this.setCustomState({ submitError: '请输入工作邮箱' });
-    return;
-  }
-  // 简单邮箱格式验证
-  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-  if (!emailRegex.test(email)) {
-    this.setCustomState({ submitError: '请输入有效的邮箱地址' });
-    return;
-  }
-
-  // 清除错误，设置提交中状态
-  this.setCustomState({ isSubmitting: true, submitError: '' });
-
-  // 保存到宜搭表单
-  var appType = window.pageConfig && window.pageConfig.appType;
-  var formUuid = 'FORM-76402507C605423DA55BB8C934E2B31509D5';
-
-  this.utils.yida.saveFormData({
-    formUuid: formUuid,
-    appType: appType,
-    formDataJson: JSON.stringify({
-      textField_8904dr89: name,
-      textField_8904s2zw: company,
-      textField_8904xumu: position,
-      textField_8904fybo: email,
-      textField_8904e54g: '未来视野2026发布会',
-      dateField_8904yv3d: new Date().getTime(),
-    }),
-  }).then(function(res) {
-    // 提交成功
-    this.setCustomState({ isSubmitting: false, isSubmitted: true });
-    this.utils.toast({ title: '报名成功！', type: 'success' });
-    
-    // 清空表单
-    _customState.formName = '';
-    _customState.formCompany = '';
-    _customState.formPosition = '';
-    _customState.formEmail = '';
-    var nameInput = document.getElementById('field-name');
-    var companyInput = document.getElementById('field-company');
-    var positionInput = document.getElementById('field-position');
-    var emailInput = document.getElementById('field-email');
-    if (nameInput) nameInput.value = '';
-    if (companyInput) companyInput.value = '';
-    if (positionInput) positionInput.value = '请选择';
-    if (emailInput) emailInput.value = '';
-  }.bind(this)).catch(function(err) {
-    // 提交失败
-    this.setCustomState({ isSubmitting: false, submitError: err.message || '提交失败，请稍后重试' });
-    this.utils.toast({ title: err.message || '提交失败', type: 'error' });
-  }.bind(this));
-}
-
-// ============================================================
-// 渲染
-// ============================================================
-
-export function renderJsx() {
-  var state = _customState;
-  var { timestamp } = this.state;
-
-  var remainingSeats = state.totalSeats - state.registeredCount;
-  var progressPercent = Math.round((state.registeredCount / state.totalSeats) * 100);
-
-  // ---- 颜色 & 样式常量 ----
-  var colors = {
-    bgDeep: '#0B0F19',
-    bgCard: 'rgba(255,255,255,0.05)',
-    bgCardHover: 'rgba(255,255,255,0.08)',
-    neonBlue: '#3B82F6',
-    electricPurple: '#8B5CF6',
-    cyberPink: '#EC4899',
-    energyOrange: '#F59E0B',
-    white: '#FFFFFF',
-    whiteAlpha60: 'rgba(255,255,255,0.6)',
-    whiteAlpha30: 'rgba(255,255,255,0.3)',
-    glass: 'rgba(255,255,255,0.08)',
-    glassBorder: 'rgba(255,255,255,0.12)',
-  };
-
-  var styles = {
-    page: {
-      background: colors.bgDeep,
-      minHeight: '100vh',
-      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif",
-      color: colors.white,
-      overflowX: 'hidden',
-      position: 'relative',
-    },
-    // 固定顶部栏
-    topBar: {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      zIndex: 100,
-      background: 'linear-gradient(135deg, rgba(11,15,25,0.95) 0%, rgba(124,58,237,0.15) 50%, rgba(236,72,153,0.1) 100%)',
-      backdropFilter: 'blur(20px)',
-      borderBottom: '1px solid ' + colors.glassBorder,
-      padding: '0 24px',
-      height: '64px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    topBarLogo: {
-      fontSize: '18px',
-      fontWeight: '700',
-      background: 'linear-gradient(135deg, #3B82F6, #8B5CF6, #EC4899)',
-      WebkitBackgroundClip: 'text',
-      WebkitTextFillColor: 'transparent',
-      backgroundClip: 'text',
-    },
-    topBarRight: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '16px',
-    },
-    countdownWrap: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '6px',
-      fontSize: '13px',
-      color: colors.whiteAlpha60,
-    },
-    countdownUnit: {
-      background: colors.glass,
-      border: '1px solid ' + colors.glassBorder,
-      borderRadius: '6px',
-      padding: '4px 8px',
-      fontFamily: "'DIN Alternate', monospace",
-      fontWeight: '700',
-      fontSize: '16px',
-      color: colors.white,
-      minWidth: '36px',
-      textAlign: 'center',
-    },
-    topBarCta: {
-      background: 'linear-gradient(135deg, #EC4899, #F59E0B)',
-      border: 'none',
-      borderRadius: '8px',
-      padding: '8px 18px',
-      color: colors.white,
-      fontWeight: '600',
-      fontSize: '14px',
-      cursor: 'pointer',
-      whiteSpace: 'nowrap',
-    },
-    // Hero 区
-    hero: {
-      paddingTop: '64px',
-      minHeight: '100vh',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-      textAlign: 'center',
-      padding: '120px 24px 80px',
-      background: 'radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,0.2) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(59,130,246,0.15) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 20% 80%, rgba(236,72,153,0.1) 0%, transparent 60%)',
-    },
-    heroBadge: {
-      display: 'inline-block',
-      background: 'rgba(139,92,246,0.2)',
-      border: '1px solid rgba(139,92,246,0.4)',
-      borderRadius: '20px',
-      padding: '6px 16px',
-      fontSize: '13px',
-      color: '#A78BFA',
-      marginBottom: '24px',
-      letterSpacing: '0.05em',
-    },
-    heroTitle: {
-      fontSize: '56px',
-      fontWeight: '800',
-      lineHeight: '1.1',
-      marginBottom: '20px',
-      background: 'linear-gradient(135deg, #FFFFFF 0%, #A78BFA 50%, #EC4899 100%)',
-      WebkitBackgroundClip: 'text',
-      WebkitTextFillColor: 'transparent',
-      backgroundClip: 'text',
-      maxWidth: '800px',
-    },
-    heroSubtitle: {
-      fontSize: '18px',
-      color: colors.whiteAlpha60,
-      marginBottom: '32px',
-      maxWidth: '560px',
-    },
-    heroInfoCard: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '24px',
-      background: colors.glass,
-      border: '1px solid ' + colors.glassBorder,
-      borderRadius: '12px',
-      padding: '14px 28px',
-      marginBottom: '36px',
-      fontSize: '14px',
-      color: colors.whiteAlpha60,
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-    },
-    heroInfoItem: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '6px',
-    },
-    heroInfoDot: {
-      width: '6px',
-      height: '6px',
-      borderRadius: '50%',
-      background: '#8B5CF6',
-      flexShrink: 0,
-    },
-    heroBtnGroup: {
-      display: 'flex',
-      gap: '16px',
-      justifyContent: 'center',
-      marginBottom: '40px',
-      flexWrap: 'wrap',
-    },
-    btnPrimary: {
-      background: 'linear-gradient(135deg, #EC4899, #F59E0B)',
-      border: 'none',
-      borderRadius: '12px',
-      padding: '14px 32px',
-      color: colors.white,
-      fontWeight: '700',
-      fontSize: '16px',
-      cursor: 'pointer',
-      boxShadow: '0 0 30px rgba(236,72,153,0.4)',
-    },
-    btnSecondary: {
-      background: 'transparent',
-      border: '1px solid ' + colors.glassBorder,
-      borderRadius: '12px',
-      padding: '14px 32px',
-      color: colors.white,
-      fontWeight: '600',
-      fontSize: '16px',
-      cursor: 'pointer',
-    },
-    // 报名动态
-    noticeBanner: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: '10px',
-      background: 'rgba(59,130,246,0.1)',
-      border: '1px solid rgba(59,130,246,0.2)',
-      borderRadius: '24px',
-      padding: '8px 20px',
-      fontSize: '13px',
-      color: colors.whiteAlpha60,
-    },
-    noticeDot: {
-      width: '8px',
-      height: '8px',
-      borderRadius: '50%',
-      background: '#3B82F6',
-      flexShrink: 0,
-      boxShadow: '0 0 8px #3B82F6',
-    },
-    // 通用 section
-    section: {
-      padding: '80px 24px',
-      maxWidth: '1100px',
-      margin: '0 auto',
-    },
-    sectionTitle: {
-      fontSize: '36px',
-      fontWeight: '800',
-      textAlign: 'center',
-      marginBottom: '12px',
-      background: 'linear-gradient(135deg, #FFFFFF, #A78BFA)',
-      WebkitBackgroundClip: 'text',
-      WebkitTextFillColor: 'transparent',
-      backgroundClip: 'text',
-    },
-    sectionSubtitle: {
-      fontSize: '16px',
-      color: colors.whiteAlpha60,
-      textAlign: 'center',
-      marginBottom: '48px',
-    },
-    // 价值主张卡片
-    valueGrid: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
-      gap: '20px',
-    },
-    valueCard: {
-      background: colors.glass,
-      border: '1px solid ' + colors.glassBorder,
-      borderRadius: '16px',
-      padding: '28px 24px',
-    },
-    valueIcon: {
-      fontSize: '32px',
-      marginBottom: '16px',
-    },
-    valueCardTitle: {
-      fontSize: '18px',
-      fontWeight: '700',
-      marginBottom: '8px',
-      color: colors.white,
-    },
-    valueCardDesc: {
-      fontSize: '14px',
-      color: colors.whiteAlpha60,
-      lineHeight: '1.6',
-    },
-    valueBadge: {
-      display: 'inline-block',
-      background: 'rgba(245,158,11,0.15)',
-      border: '1px solid rgba(245,158,11,0.3)',
-      borderRadius: '6px',
-      padding: '2px 8px',
-      fontSize: '12px',
-      color: '#F59E0B',
-      marginTop: '10px',
-    },
-    // 议程时间轴
-    agendaList: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '0',
-      position: 'relative',
-    },
-    agendaItem: {
-      display: 'flex',
-      gap: '20px',
-      paddingBottom: '28px',
-      position: 'relative',
-    },
-    agendaTimeCol: {
-      width: '120px',
-      flexShrink: 0,
-      textAlign: 'right',
-    },
-    agendaTime: {
-      fontSize: '13px',
-      color: '#8B5CF6',
-      fontFamily: 'monospace',
-      fontWeight: '600',
-    },
-    agendaLine: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: '24px',
-      flexShrink: 0,
-    },
-    agendaDot: {
-      width: '12px',
-      height: '12px',
-      borderRadius: '50%',
-      background: 'linear-gradient(135deg, #8B5CF6, #EC4899)',
-      boxShadow: '0 0 12px rgba(139,92,246,0.6)',
-      flexShrink: 0,
-    },
-    agendaConnector: {
-      flex: 1,
-      width: '2px',
-      background: 'linear-gradient(to bottom, rgba(139,92,246,0.4), rgba(139,92,246,0.1))',
-      marginTop: '4px',
-    },
-    agendaContent: {
-      flex: 1,
-      paddingBottom: '8px',
-    },
-    agendaTitle: {
-      fontSize: '16px',
-      fontWeight: '600',
-      color: colors.white,
-      marginBottom: '4px',
-    },
-    agendaDesc: {
-      fontSize: '13px',
-      color: colors.whiteAlpha60,
-    },
-    // 嘉宾
-    speakerGrid: {
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
-      gap: '20px',
-    },
-    speakerCard: {
-      background: colors.glass,
-      border: '1px solid ' + colors.glassBorder,
-      borderRadius: '16px',
-      padding: '24px 20px',
-      textAlign: 'center',
-    },
-    speakerAvatar: {
-      width: '72px',
-      height: '72px',
-      borderRadius: '50%',
-      margin: '0 auto 14px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      fontSize: '28px',
-      background: 'linear-gradient(135deg, rgba(139,92,246,0.3), rgba(236,72,153,0.3))',
-      border: '2px solid rgba(139,92,246,0.4)',
-    },
-    speakerName: {
-      fontSize: '16px',
-      fontWeight: '700',
-      color: colors.white,
-      marginBottom: '4px',
-    },
-    speakerTitle: {
-      fontSize: '12px',
-      color: colors.whiteAlpha60,
-      marginBottom: '10px',
-    },
-    speakerTag: {
-      display: 'inline-block',
-      background: 'rgba(139,92,246,0.15)',
-      border: '1px solid rgba(139,92,246,0.3)',
-      borderRadius: '6px',
-      padding: '2px 8px',
-      fontSize: '11px',
-      color: '#A78BFA',
-    },
-    speakerMystery: {
-      background: 'rgba(255,255,255,0.03)',
-      border: '1px dashed rgba(255,255,255,0.15)',
-    },
-    // 社交证明
-    logoWall: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      gap: '16px',
-      justifyContent: 'center',
-      marginBottom: '48px',
-    },
-    logoItem: {
-      background: colors.glass,
-      border: '1px solid ' + colors.glassBorder,
-      borderRadius: '10px',
-      padding: '12px 24px',
-      fontSize: '15px',
-      fontWeight: '600',
-      color: colors.whiteAlpha60,
-    },
-    statsRow: {
-      display: 'flex',
-      justifyContent: 'center',
-      gap: '48px',
-      flexWrap: 'wrap',
-      marginBottom: '48px',
-    },
-    statItem: {
-      textAlign: 'center',
-    },
-    statNumber: {
-      fontSize: '40px',
-      fontWeight: '800',
-      background: 'linear-gradient(135deg, #3B82F6, #8B5CF6)',
-      WebkitBackgroundClip: 'text',
-      WebkitTextFillColor: 'transparent',
-      backgroundClip: 'text',
-      display: 'block',
-    },
-    statLabel: {
-      fontSize: '14px',
-      color: colors.whiteAlpha60,
-      marginTop: '4px',
-    },
-    // 报名表单区
-    formSection: {
-      padding: '80px 24px',
-      background: 'radial-gradient(ellipse 80% 60% at 50% 50%, rgba(139,92,246,0.12) 0%, transparent 70%)',
-    },
-    formCard: {
-      maxWidth: '560px',
-      margin: '0 auto',
-      background: 'rgba(255,255,255,0.04)',
-      border: '1px solid rgba(255,255,255,0.1)',
-      borderRadius: '24px',
-      padding: '40px',
-      backdropFilter: 'blur(20px)',
-    },
-    formHeader: {
-      textAlign: 'center',
-      marginBottom: '32px',
-    },
-    formTitle: {
-      fontSize: '28px',
-      fontWeight: '800',
-      color: colors.white,
-      marginBottom: '8px',
-    },
-    formSubtitle: {
-      fontSize: '14px',
-      color: colors.whiteAlpha60,
-      marginBottom: '16px',
-    },
-    progressBar: {
-      background: 'rgba(255,255,255,0.1)',
-      borderRadius: '4px',
-      height: '6px',
-      overflow: 'hidden',
-      marginBottom: '8px',
-    },
-    progressFill: {
-      height: '100%',
-      background: 'linear-gradient(90deg, #8B5CF6, #EC4899)',
-      borderRadius: '4px',
-      width: progressPercent + '%',
-      transition: 'width 0.5s ease',
-    },
-    progressLabel: {
-      fontSize: '12px',
-      color: '#EC4899',
-      textAlign: 'right',
-    },
-    formGroup: {
-      marginBottom: '16px',
-    },
-    formLabel: {
-      display: 'block',
-      fontSize: '13px',
-      color: colors.whiteAlpha60,
-      marginBottom: '6px',
-      fontWeight: '500',
-    },
-    formInput: {
-      width: '100%',
-      background: 'rgba(255,255,255,0.06)',
-      border: '1px solid rgba(255,255,255,0.12)',
-      borderRadius: '10px',
-      padding: '12px 16px',
-      color: colors.white,
-      fontSize: '15px',
-      outline: 'none',
-      boxSizing: 'border-box',
-      fontFamily: 'inherit',
-    },
-    formSelect: {
-      width: '100%',
-      background: 'rgba(20,20,35,0.9)',
-      border: '1px solid rgba(255,255,255,0.12)',
-      borderRadius: '10px',
-      padding: '12px 16px',
-      color: colors.white,
-      fontSize: '15px',
-      outline: 'none',
-      boxSizing: 'border-box',
-      fontFamily: 'inherit',
-      cursor: 'pointer',
-    },
-    submitBtn: {
-      width: '100%',
-      background: 'linear-gradient(135deg, #EC4899, #F59E0B)',
-      border: 'none',
-      borderRadius: '12px',
-      padding: '16px',
-      color: colors.white,
-      fontWeight: '700',
-      fontSize: '16px',
-      cursor: state.isSubmitting ? 'not-allowed' : 'pointer',
-      marginTop: '8px',
-      opacity: state.isSubmitting ? 0.7 : 1,
-      boxShadow: '0 0 30px rgba(236,72,153,0.3)',
-    },
-    securityNote: {
-      textAlign: 'center',
-      fontSize: '12px',
-      color: colors.whiteAlpha30,
-      marginTop: '12px',
-    },
-    errorMsg: {
-      background: 'rgba(239,68,68,0.1)',
-      border: '1px solid rgba(239,68,68,0.3)',
-      borderRadius: '8px',
-      padding: '10px 14px',
-      fontSize: '13px',
-      color: '#FCA5A5',
-      marginBottom: '12px',
-    },
-    // 成功状态
-    successCard: {
-      textAlign: 'center',
-      padding: '20px 0',
-    },
-    successIcon: {
-      fontSize: '64px',
-      marginBottom: '16px',
-      display: 'block',
-    },
-    successTitle: {
-      fontSize: '24px',
-      fontWeight: '800',
-      color: colors.white,
-      marginBottom: '8px',
-    },
-    successDesc: {
-      fontSize: '14px',
-      color: colors.whiteAlpha60,
-      marginBottom: '24px',
-      lineHeight: '1.6',
-    },
-    successActions: {
-      display: 'flex',
-      gap: '12px',
-      justifyContent: 'center',
-      flexWrap: 'wrap',
-    },
-    successBtn: {
-      background: colors.glass,
-      border: '1px solid ' + colors.glassBorder,
-      borderRadius: '10px',
-      padding: '10px 20px',
-      color: colors.white,
-      fontSize: '14px',
-      cursor: 'pointer',
-      fontWeight: '500',
-    },
-    // 分隔线
-    divider: {
-      height: '1px',
-      background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)',
-      margin: '0 24px',
-    },
-    // 底部
-    footer: {
-      textAlign: 'center',
-      padding: '40px 24px',
-      color: colors.whiteAlpha30,
-      fontSize: '13px',
-    },
-  };
-
-  var padZero = function(num) {
-    return num < 10 ? '0' + num : '' + num;
-  };
-
-  var agendaItems = [
-    { time: '14:00 - 14:10', title: '开场致辞', desc: '主持人开场，发布会正式启动' },
-    { time: '14:10 - 14:50', title: 'AI 重构商业逻辑', desc: '深度解析 AI 如何颠覆传统商业模式，2026 年的机遇与挑战' },
-    { time: '14:50 - 15:30', title: '碳中和圆桌论坛', desc: '行业领袖共话绿色科技与可持续发展路径' },
-    { time: '15:30 - 15:45', title: '中场休息 & VR 抽奖', desc: '互动抽奖，赢取价值万元科技礼品' },
-    { time: '15:45 - 16:30', title: '神秘新品发布', desc: '重磅产品首发，引领行业新风向' },
-    { time: '16:30 - 17:00', title: '互动问答 & 资料包', desc: '与嘉宾实时互动，领取独家白皮书资料包' },
-  ];
-
-  var speakers = [
-    { emoji: '👨‍💼', name: '张明远', title: 'CEO · 科技领袖', tag: 'AI战略', bio: '前谷歌中国区总裁，连续创业者' },
-    { emoji: '👩‍🔬', name: '李晓雯', title: 'CTO · 技术先锋', tag: '深度学习', bio: '斯坦福AI实验室博士，10年AI研究' },
-    { emoji: '🧑‍💻', name: '王浩然', title: '创始人 · 投资人', tag: '碳中和', bio: '绿色科技基金创始人，ESG专家' },
-    { emoji: '👨‍🎤', name: '神秘嘉宾', title: '3月10日揭晓', tag: '敬请期待', bio: '来自全球顶尖科技公司的重磅嘉宾', mystery: true },
-    { emoji: '🎭', name: '神秘嘉宾', title: '3月10日揭晓', tag: '敬请期待', bio: '颠覆性创新领域的行业引领者', mystery: true },
-  ];
-
-  var logos = ['华为', '腾讯', '阿里巴巴', '蔚来汽车', '理想汽车', '小米', '字节跳动', '百度'];
-
-  return (
-    <div style={styles.page}>
-      {/* 隐藏 timestamp，触发重渲染 */}
-      <div style={{ display: 'none' }}>{timestamp}</div>
-
-      {/* ===== 固定顶部栏 ===== */}
-      <div style={styles.topBar}>
-        <div style={styles.topBarLogo}>未来视野 2026</div>
-        <div style={styles.topBarRight}>
-          <div style={styles.countdownWrap}>
-            <span>距开播</span>
-            <span style={styles.countdownUnit}>{padZero(state.countdownDays)}</span>
-            <span>天</span>
-            <span style={styles.countdownUnit}>{padZero(state.countdownHours)}</span>
-            <span>时</span>
-            <span style={styles.countdownUnit}>{padZero(state.countdownMinutes)}</span>
-            <span>分</span>
-            <span style={styles.countdownUnit}>{padZero(state.countdownSeconds)}</span>
-            <span>秒</span>
-          </div>
-          <button style={styles.topBarCta} onClick={(e) => { this.scrollToForm(); }}>立即锁定席位</button>
-        </div>
-      </div>
-
-      {/* ===== Hero 区 ===== */}
-      <div style={styles.hero}>
-        <div style={styles.heroBadge}>🚀 2026年度科技趋势发布会 · 线上直播</div>
-        <div style={styles.heroTitle}>未来视野 2026</div>
-        <div style={styles.heroSubtitle}>与全球 5000+ 创新者共同预见下一个十年</div>
-
-        <div style={styles.heroInfoCard}>
-          <div style={styles.heroInfoItem}>
-            <div style={styles.heroInfoDot}></div>
-            <span>📅 2026年3月15日</span>
-          </div>
-          <div style={styles.heroInfoItem}>
-            <div style={styles.heroInfoDot}></div>
-            <span>⏰ 14:00 - 17:00 GMT+8</span>
-          </div>
-          <div style={styles.heroInfoItem}>
-            <div style={styles.heroInfoDot}></div>
-            <span>💻 线上直播 + 互动问答</span>
-          </div>
-        </div>
-
-        <div style={styles.heroBtnGroup}>
-          <button style={styles.btnPrimary} onClick={(e) => { this.scrollToForm(); }}>🎟 免费报名</button>
-          <button style={styles.btnSecondary} onClick={(e) => {
-            var el = document.getElementById('agenda-section');
-            if (el) el.scrollIntoView({ behavior: 'smooth' });
-          }}>查看议程 →</button>
-        </div>
-
-        <div style={styles.noticeBanner}>
-          <div style={styles.noticeDot}></div>
-          <span>{REGISTRATION_NOTICES[state.currentNoticeIndex]}</span>
-        </div>
-      </div>
-
-      <div style={styles.divider}></div>
-
-      {/* ===== 价值主张 ===== */}
-      <div style={styles.section}>
-        <div style={styles.sectionTitle}>为什么要参加？</div>
-        <div style={styles.sectionSubtitle}>四大核心价值，让这场发布会与众不同</div>
-        <div style={styles.valueGrid}>
-          <div style={styles.valueCard}>
-            <div style={styles.valueIcon}>📊</div>
-            <div style={styles.valueCardTitle}>趋势首发</div>
-            <div style={styles.valueCardDesc}>2026年度科技趋势白皮书独家首发，深度解析未来三年的行业变革方向。</div>
-            <div style={styles.valueBadge}>价值 ¥1,999</div>
-          </div>
-          <div style={styles.valueCard}>
-            <div style={styles.valueIcon}>🎤</div>
-            <div style={styles.valueCardTitle}>顶级嘉宾</div>
-            <div style={styles.valueCardDesc}>3位行业领袖 + 2位神秘大咖，汇聚全球最具影响力的科技思想者。</div>
-            <div style={styles.valueBadge}>3月10日揭晓</div>
-          </div>
-          <div style={styles.valueCard}>
-            <div style={styles.valueIcon}>🌐</div>
-            <div style={styles.valueCardTitle}>资源网络</div>
-            <div style={styles.valueCardDesc}>加入 5000+ 创新者社群，与全球顶尖创业者、投资人建立深度连接。</div>
-            <div style={styles.valueBadge}>终身会员</div>
-          </div>
-          <div style={styles.valueCard}>
-            <div style={styles.valueIcon}>⭐</div>
-            <div style={styles.valueCardTitle}>口碑保证</div>
-            <div style={styles.valueCardDesc}>往届参会者 92% 满意度，平均观看时长 2.5 小时，内容价值有目共睹。</div>
-            <div style={styles.valueBadge}>92% 满意度</div>
-          </div>
-        </div>
-      </div>
-
-      <div style={styles.divider}></div>
-
-      {/* ===== 议程时间轴 ===== */}
-      <div style={Object.assign({}, styles.section, { paddingTop: '80px' })} id="agenda-section">
-        <div style={styles.sectionTitle}>发布会议程</div>
-        <div style={styles.sectionSubtitle}>精心策划的3小时，每分钟都有价值</div>
-        <div style={styles.agendaList}>
-          {agendaItems.map(function(item, index) {
-            return (
-              <div key={index} style={styles.agendaItem}>
-                <div style={styles.agendaTimeCol}>
-                  <div style={styles.agendaTime}>{item.time}</div>
-                </div>
-                <div style={styles.agendaLine}>
-                  <div style={styles.agendaDot}></div>
-                  {index < agendaItems.length - 1 && <div style={styles.agendaConnector}></div>}
-                </div>
-                <div style={styles.agendaContent}>
-                  <div style={styles.agendaTitle}>{item.title}</div>
-                  <div style={styles.agendaDesc}>{item.desc}</div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      <div style={styles.divider}></div>
-
-      {/* ===== 嘉宾阵容 ===== */}
-      <div style={styles.section}>
-        <div style={styles.sectionTitle}>嘉宾阵容</div>
-        <div style={styles.sectionSubtitle}>汇聚全球最具影响力的科技思想领袖</div>
-        <div style={styles.speakerGrid}>
-          {speakers.map(function(speaker, index) {
-            return (
-              <div key={index} style={Object.assign({}, styles.speakerCard, speaker.mystery ? styles.speakerMystery : {})}>
-                <div style={styles.speakerAvatar}>
-                  {speaker.mystery ? '❓' : speaker.emoji}
-                </div>
-                <div style={styles.speakerName}>{speaker.name}</div>
-                <div style={styles.speakerTitle}>{speaker.title}</div>
-                <div style={styles.speakerTag}>{speaker.tag}</div>
-                <div style={Object.assign({}, styles.agendaDesc, { marginTop: '10px', fontSize: '12px' })}>{speaker.bio}</div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      <div style={styles.divider}></div>
-
-      {/* ===== 社交证明 ===== */}
-      <div style={styles.section}>
-        <div style={styles.sectionTitle}>他们都在参加</div>
-        <div style={styles.sectionSubtitle}>来自全球顶尖企业的创新者共同见证</div>
-
-        <div style={styles.statsRow}>
-          <div style={styles.statItem}>
-            <span style={styles.statNumber}>{state.registeredCount.toLocaleString()}</span>
-            <div style={styles.statLabel}>已报名人数</div>
-          </div>
-          <div style={styles.statItem}>
-            <span style={styles.statNumber}>92%</span>
-            <div style={styles.statLabel}>往届满意度</div>
-          </div>
-          <div style={styles.statItem}>
-            <span style={styles.statNumber}>2.5h</span>
-            <div style={styles.statLabel}>平均观看时长</div>
-          </div>
-          <div style={styles.statItem}>
-            <span style={styles.statNumber}>5000+</span>
-            <div style={styles.statLabel}>创新者社群</div>
-          </div>
-        </div>
-
-        <div style={styles.logoWall}>
-          {logos.map(function(logo, index) {
-            return (
-              <div key={index} style={styles.logoItem}>{logo}</div>
-            );
-          })}
-        </div>
-      </div>
-
-      <div style={styles.divider}></div>
-
-      {/* ===== 报名表单 ===== */}
-      <div style={styles.formSection} id="registration-form">
-        <div style={styles.formCard}>
-          {state.isSubmitted ? (
-            <div style={styles.successCard}>
-              <span style={styles.successIcon}>🎉</span>
-              <div style={styles.successTitle}>报名成功！</div>
-              <div style={styles.successDesc}>
-                确认邮件已发送至您的邮箱<br/>
-                请查收并添加日历提醒
-              </div>
-              <div style={styles.successActions}>
-                <button 
-                  style={styles.successBtn}
-                  onClick={(e) => { this.utils.toast({ title: '白皮书预览将在活动前发送', type: 'info' }); }}
-                >
-                  📄 下载白皮书预览
-                </button>
-                <button 
-                  style={styles.successBtn}
-                  onClick={(e) => { this.utils.toast({ title: '已复制分享链接', type: 'success' }); }}
-                >
-                  🔗 分享给好友
-                </button>
-              </div>
-            </div>
-          ) : (
-            <div>
-              <div style={styles.formHeader}>
-                <div style={styles.formTitle}>🔒 锁定您的席位</div>
-                <div style={styles.formSubtitle}>免费报名 · 仅限 5,000 人</div>
-                <div style={styles.progressBar}>
-                  <div style={styles.progressFill}></div>
-                </div>
-                <div style={styles.progressLabel}>剩余 {remainingSeats.toLocaleString()} 个席位</div>
-              </div>
-
-              {state.submitError ? (
-                <div style={styles.errorMsg}>⚠️ {state.submitError}</div>
-              ) : null}
-
-              <div style={styles.formGroup}>
-                <label style={styles.formLabel}>姓名 *</label>
-                <input
-                  id="field-name"
-                  style={styles.formInput}
-                  type="text"
-                  placeholder="请输入您的姓名"
-                  defaultValue=""
-                  onChange={(e) => { _customState.formName = e.target.value; }}
-                />
-              </div>
-
-              <div style={styles.formGroup}>
-                <label style={styles.formLabel}>公司 *</label>
-                <input
-                  id="field-company"
-                  style={styles.formInput}
-                  type="text"
-                  placeholder="请输入您的公司名称"
-                  defaultValue=""
-                  onChange={(e) => { _customState.formCompany = e.target.value; }}
-                />
-              </div>
-
-              <div style={styles.formGroup}>
-                <label style={styles.formLabel}>职位 *</label>
-                <select
-                  id="field-position"
-                  style={styles.formSelect}
-                  defaultValue="请选择"
-                  onChange={(e) => { _customState.formPosition = e.target.value; }}
-                >
-                  <option value="请选择" disabled>请选择您的职位</option>
-                  <option value="CEO/创始人">CEO / 创始人</option>
-                  <option value="CTO/技术负责人">CTO / 技术负责人</option>
-                  <option value="产品经理">产品经理</option>
-                  <option value="市场营销">市场营销</option>
-                  <option value="投资人">投资人</option>
-                  <option value="其他">其他</option>
-                </select>
-              </div>
-
-              <div style={styles.formGroup}>
-                <label style={styles.formLabel}>工作邮箱 *</label>
-                <input
-                  id="field-email"
-                  style={styles.formInput}
-                  type="email"
-                  placeholder="请输入企业邮箱"
-                  defaultValue=""
-                  onChange={(e) => { _customState.formEmail = e.target.value; }}
-                />
-              </div>
-
-              <button
-                style={styles.submitBtn}
-                onClick={(e) => { this.handleSubmit(e); }}
-                disabled={state.isSubmitting}
-              >
-                {state.isSubmitting ? '⏳ 提交中...' : '🚀 立即报名，获取专属席位'}
-              </button>
-
-              <div style={styles.securityNote}>🔐 信息严格保密，不会用于任何商业推广</div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* ===== 底部 ===== */}
-      <div style={styles.footer}>
-        <div style={{ marginBottom: '8px', fontSize: '16px', fontWeight: '600', color: 'rgba(255,255,255,0.4)' }}>未来视野 2026</div>
-        <div>© 2026 Future Vision Conference. All rights reserved.</div>
-        <div style={{ marginTop: '8px' }}>2026年3月15日 14:00 - 17:00 GMT+8 · 线上直播</div>
-      </div>
-    </div>
-  );
-}