openyida 2026.7.18 → 2026.7.21

package/project/pages/src/demo-ppt.oyd.jsx

@@ -1,1192 +0,0 @@
-// ══════════════════════════════════════════════════════════════
-// OpenYida PPT 演示 — 包含数字键翻页、导航隐藏、全屏、中英文切换
-// ══════════════════════════════════════════════════════════════
-
-// ── 国际化文案 ──────────────────────────────────────────────
-var I18N = {
-  zh: {
-    prev: '← 上一页',
-    next: '下一页 →',
-    pageOf: function(c, t) { return c + ' / ' + t; },
-    fullscreen: '全屏',
-    exitFullscreen: '退出全屏',
-    darkMode: '深色',
-    lightMode: '浅色',
-    langSwitch: 'EN',
-  },
-  en: {
-    prev: '← Prev',
-    next: 'Next →',
-    pageOf: function(c, t) { return c + ' / ' + t; },
-    fullscreen: 'Fullscreen',
-    exitFullscreen: 'Exit Fullscreen',
-    darkMode: 'Dark',
-    lightMode: 'Light',
-    langSwitch: '中',
-  },
-};
-
-// ── 幻灯片数据 ──────────────────────────────────────────────
-var SLIDES = [
-  {
-    type: 'cover',
-    bg: '#1a1a2e', bgLight: '#ffffff',
-    accent: '#0089ff',
-    eyebrow: '2026 技术分享',
-    title: 'OpenYida 2.0',
-    subtitle: 'AI 驱动的低代码开发平台',
-    tags: ['AI 原生', '低代码', '企业级'],
-  },
-  {
-    type: 'toc',
-    bg: '#1a1a2e', bgLight: '#ffffff',
-    accent: '#0089ff',
-    title: '目录 / Agenda',
-    items: [
-      '核心能力 Core Features',
-      '应用场景 Use Cases',
-      '技术架构 Architecture',
-      '快速上手 Quick Start',
-    ],
-  },
-  {
-    type: 'chapter',
-    bg: '#16213e', bgLight: '#f0f7ff',
-    accent: '#0089ff',
-    partNum: '01',
-    title: '核心能力',
-    subtitle: 'Core Features',
-    desc: 'AI 对话驱动，一句话生成完整应用',
-  },
-  {
-    type: 'key-points',
-    bg: '#1a1a2e', bgLight: '#ffffff',
-    accent: '#0089ff',
-    chapter: '01 核心能力',
-    title: 'AI 对话驱动开发',
-    subtitle: '从需求到上线，最快 5 分钟',
-    points: [
-      { icon: '🤖', title: 'AI 表单设计', desc: '描述需求，自动生成字段结构' },
-      { icon: '⚡', title: '秒级发布', desc: '编译 + 发布一键完成' },
-      { icon: '🔗', title: '全流程覆盖', desc: '创建 → 配置 → 发布 → 数据管理' },
-      { icon: '🌐', title: '多语言支持', desc: '中英日韩等 12 种语言' },
-    ],
-  },
-  {
-    type: 'chapter',
-    bg: '#16213e', bgLight: '#f0f7ff',
-    accent: '#0089ff',
-    partNum: '02',
-    title: '应用场景',
-    subtitle: 'Use Cases',
-    desc: '覆盖企业数字化的各类场景',
-  },
-  {
-    type: 'key-points',
-    bg: '#1a1a2e', bgLight: '#ffffff',
-    accent: '#0089ff',
-    chapter: '02 应用场景',
-    title: '典型应用',
-    subtitle: '从 CRM 到项目管理，一站式搞定',
-    points: [
-      { icon: '📊', title: 'CRM 客户管理', desc: '客户跟进、商机管理、数据看板' },
-      { icon: '📋', title: '项目管理', desc: '任务分配、进度追踪、甘特图' },
-      { icon: '💰', title: '财务报销', desc: '费用申请、审批流程、报表分析' },
-      { icon: '🏭', title: '生产管理', desc: '工单管理、质量检测、产能分析' },
-    ],
-  },
-  {
-    type: 'chapter',
-    bg: '#16213e', bgLight: '#f0f7ff',
-    accent: '#0089ff',
-    partNum: '03',
-    title: '技术架构',
-    subtitle: 'Architecture',
-    desc: 'CLI + 宜搭 API + AI 的三层架构',
-  },
-  {
-    type: 'key-points',
-    bg: '#1a1a2e', bgLight: '#ffffff',
-    accent: '#0089ff',
-    chapter: '03 技术架构',
-    title: '三层架构',
-    subtitle: 'CLI → API → Platform',
-    points: [
-      { icon: '🖥️', title: 'CLI 层', desc: 'openyida 命令行工具，Node.js 实现' },
-      { icon: '🔌', title: 'API 层', desc: '宜搭 OpenAPI，RESTful 接口' },
-      { icon: '☁️', title: '平台层', desc: '宜搭低代码平台，阿里云基础设施' },
-    ],
-  },
-  {
-    type: 'chapter',
-    bg: '#16213e', bgLight: '#f0f7ff',
-    accent: '#0089ff',
-    partNum: '04',
-    title: '快速上手',
-    subtitle: 'Quick Start',
-    desc: '三步开始你的低代码之旅',
-  },
-  {
-    type: 'key-points',
-    bg: '#1a1a2e', bgLight: '#ffffff',
-    accent: '#0089ff',
-    chapter: '04 快速上手',
-    title: '三步上手',
-    subtitle: '安装 → 登录 → 创建',
-    points: [
-      { icon: '1️⃣', title: '安装', desc: 'npm install -g openyida' },
-      { icon: '2️⃣', title: '登录', desc: 'openyida login（扫码登录）' },
-      { icon: '3️⃣', title: '创建', desc: 'openyida create-app "我的应用"' },
-    ],
-  },
-  {
-    type: 'echarts-race',
-    bg: '#1a1a2e', bgLight: '#ffffff',
-    accent: '#0089ff',
-    chapter: '附录',
-    title: '中国历代经济全球排名',
-    subtitle: 'GDP 占全球比重变迁（公元前 2000 年 — 2025 年）',
-  },
-  {
-    type: 'ending',
-    bg: '#0089ff', bgLight: '#0089ff',
-    accent: '#ffffff',
-    title: '立即体验 OpenYida',
-    subtitle: 'npm install -g openyida',
-    quote: '让 AI 成为你的低代码开发伙伴',
-  },
-];
-
-// ── 状态管理 ────────────────────────────────────────────────
-var _customState = {
-  currentIndex: 0,
-  navVisible: false,
-  isFullscreen: false,
-  darkMode: true,
-  lang: 'zh',
-  numBuffer: '',
-  numTimer: null,
-  echartsLoaded: false,
-  echartsInstance: null,
-  raceTimer: null,
-  raceIndex: 0,
-  raceFinished: false,
-  echartsInitTimer: null,
-};
-
-// ── 中国历代经济全球排名数据（GDP 估算，单位：亿 1990 国际元）──
-// 数据来源参考：Angus Maddison 历史统计、世界银行
-// 统一 8 个实体：中国(朝代)、印度、欧洲、中东、美国、日本、俄国、其他
-// chinaLabel 字段控制中国柱子显示的朝代名
-var RACE_ENTITIES = ['china', 'india', 'europe', 'mideast', 'usa', 'japan', 'russia', 'other'];
-var RACE_LABELS = {
-  china: '华夏', india: '印度', europe: '欧洲', mideast: '中东',
-  usa: '美国', japan: '日本', russia: '俄国', other: '其他',
-};
-var RACE_KEYFRAMES = [
-  { year: -2000, chinaLabel: '华夏',   values: [450, 350, 100, 400, 0, 0, 0, 200] },
-  { year: -500,  chinaLabel: '春秋列国', values: [800, 600, 300, 650, 0, 0, 0, 400] },
-  { year: -200,  chinaLabel: '大秦',   values: [1200, 700, 500, 400, 0, 0, 0, 600] },
-  { year: 100,   chinaLabel: '大汉',   values: [1500, 800, 1100, 350, 0, 0, 0, 700] },
-  { year: 600,   chinaLabel: '大隋',   values: [1600, 1100, 500, 450, 0, 50, 0, 800] },
-  { year: 800,   chinaLabel: '大唐',   values: [2200, 1400, 600, 900, 0, 80, 0, 1000] },
-  { year: 1000,  chinaLabel: '北宋',   values: [2650, 1600, 800, 700, 0, 120, 0, 1100] },
-  { year: 1200,  chinaLabel: '南宋',   values: [2800, 1500, 1000, 600, 0, 150, 0, 1200] },
-  { year: 1400,  chinaLabel: '大明',   values: [2500, 1800, 1400, 400, 0, 200, 0, 1300] },
-  { year: 1600,  chinaLabel: '大明',   values: [3600, 2800, 2800, 350, 0, 350, 0, 1500] },
-  { year: 1700,  chinaLabel: '大清',   values: [4100, 3600, 3500, 280, 0, 500, 0, 1600] },
-  { year: 1820,  chinaLabel: '大清',   values: [5500, 2800, 3400, 250, 500, 600, 700, 1800] },
-  { year: 1870,  chinaLabel: '大清',   values: [3800, 2600, 5500, 200, 3100, 700, 1400, 2200] },
-  { year: 1913,  chinaLabel: '中华民国', values: [3200, 2500, 6800, 180, 5300, 1100, 2300, 2800] },
-  { year: 1950,  chinaLabel: '新中国',  values: [2400, 2200, 5800, 300, 9600, 1100, 3100, 3200] },
-  { year: 1978,  chinaLabel: '中国',   values: [3500, 2800, 8200, 800, 12000, 5500, 4800, 4500] },
-  { year: 2001,  chinaLabel: '中国',   values: [8200, 4200, 12000, 1500, 19000, 6800, 3200, 7000] },
-  { year: 2010,  chinaLabel: '中国',   values: [14000, 6500, 14000, 2000, 21000, 5800, 4200, 9000] },
-  { year: 2020,  chinaLabel: '中国',   values: [24000, 9500, 15000, 2500, 22000, 5200, 4500, 12000] },
-  { year: 2025,  chinaLabel: '中国',   values: [28000, 11000, 15500, 2800, 23000, 4800, 4200, 13000] },
-];
-
-// ── 幻灯片内容渲染 ──────────────────────────────────────────
-function renderSlideContent(slide, accent, isMobile) {
-  var type = slide.type;
-  var isDark = slide.bg !== '#ffffff' && slide.bg !== '#f0f7ff';
-  var textColor = isDark ? '#ffffff' : '#1a1a2e';
-  var subColor = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(26,26,46,0.6)';
-
-  if (type === 'cover') {
-    return (
-      <div style={{
-        display: 'flex', flexDirection: 'column', justifyContent: 'center',
-        alignItems: 'center', height: '100%', textAlign: 'center',
-        padding: isMobile ? '40px 20px' : '60px 80px',
-      }}>
-        {slide.eyebrow && (
-          <div style={{
-            fontSize: isMobile ? '13px' : '15px', fontWeight: 600,
-            color: accent, letterSpacing: '2px', textTransform: 'uppercase',
-            marginBottom: '20px',
-          }}>
-            {slide.eyebrow}
-          </div>
-        )}
-        <h1 style={{
-          fontSize: isMobile ? '36px' : '64px', fontWeight: 900,
-          color: textColor, lineHeight: 1.1, margin: '0 0 16px 0',
-        }}>
-          {slide.title}
-        </h1>
-        {slide.subtitle && (
-          <p style={{
-            fontSize: isMobile ? '18px' : '28px', color: subColor,
-            margin: '0 0 32px 0', fontWeight: 300,
-          }}>
-            {slide.subtitle}
-          </p>
-        )}
-        {slide.tags && (
-          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', justifyContent: 'center' }}>
-            {slide.tags.map(function(tag, idx) {
-              return (
-                <span key={idx} style={{
-                  padding: '6px 16px', borderRadius: '20px', fontSize: '13px',
-                  fontWeight: 600, background: accent + '15', color: accent,
-                }}>
-                  {tag}
-                </span>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  if (type === 'toc') {
-    return (
-      <div style={{
-        display: 'flex', flexDirection: 'column', justifyContent: 'center',
-        height: '100%', padding: isMobile ? '40px 24px' : '60px 120px',
-      }}>
-        <h2 style={{
-          fontSize: isMobile ? '28px' : '42px', fontWeight: 800,
-          color: textColor, marginBottom: '40px',
-        }}>
-          {slide.title}
-        </h2>
-        {slide.items && slide.items.map(function(item, idx) {
-          return (
-            <div key={idx} style={{
-              display: 'flex', alignItems: 'center', gap: '16px',
-              padding: '16px 0',
-              borderBottom: idx < slide.items.length - 1 ? '1px solid rgba(26,26,46,0.08)' : 'none',
-            }}>
-              <span style={{
-                fontSize: isMobile ? '20px' : '28px', fontWeight: 800,
-                color: accent, minWidth: '40px',
-              }}>
-                {'0' + (idx + 1)}
-              </span>
-              <span style={{
-                fontSize: isMobile ? '16px' : '22px', color: textColor, fontWeight: 500,
-              }}>
-                {item}
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  if (type === 'chapter') {
-    return (
-      <div style={{
-        display: 'flex', flexDirection: 'column', justifyContent: 'center',
-        alignItems: 'center', height: '100%', textAlign: 'center',
-        padding: isMobile ? '40px 24px' : '60px 80px',
-      }}>
-        <div style={{
-          fontSize: isMobile ? '48px' : '80px', fontWeight: 900,
-          color: accent, opacity: 0.15, marginBottom: '-20px',
-        }}>
-          {slide.partNum}
-        </div>
-        <h2 style={{
-          fontSize: isMobile ? '32px' : '52px', fontWeight: 800,
-          color: textColor, margin: '0 0 8px 0',
-        }}>
-          {slide.title}
-        </h2>
-        {slide.subtitle && (
-          <p style={{
-            fontSize: isMobile ? '16px' : '22px', color: subColor,
-            margin: '0 0 16px 0', fontWeight: 300,
-          }}>
-            {slide.subtitle}
-          </p>
-        )}
-        {slide.desc && (
-          <p style={{
-            fontSize: isMobile ? '14px' : '18px', color: subColor,
-            margin: 0, maxWidth: '600px',
-          }}>
-            {slide.desc}
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  if (type === 'key-points') {
-    return (
-      <div style={{
-        display: 'flex', flexDirection: 'column', justifyContent: 'center',
-        height: '100%', padding: isMobile ? '40px 20px' : '48px 80px',
-      }}>
-        {slide.chapter && (
-          <div style={{
-            fontSize: '13px', fontWeight: 600, color: accent,
-            letterSpacing: '1px', marginBottom: '8px',
-          }}>
-            {slide.chapter}
-          </div>
-        )}
-        <h2 style={{
-          fontSize: isMobile ? '24px' : '38px', fontWeight: 800,
-          color: textColor, margin: '0 0 6px 0',
-        }}>
-          {slide.title}
-        </h2>
-        {slide.subtitle && (
-          <p style={{
-            fontSize: isMobile ? '14px' : '18px', color: subColor,
-            margin: '0 0 32px 0',
-          }}>
-            {slide.subtitle}
-          </p>
-        )}
-        <div style={{
-          display: 'grid',
-          gridTemplateColumns: isMobile ? '1fr' : 'repeat(' + Math.min(slide.points.length, 4) + ', 1fr)',
-          gap: isMobile ? '16px' : '24px',
-        }}>
-          {slide.points.map(function(point, idx) {
-            return (
-              <div key={idx} style={{
-                padding: isMobile ? '16px' : '24px',
-                borderRadius: '12px',
-                background: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(26,26,46,0.02)',
-                border: isDark ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(26,26,46,0.06)',
-              }}>
-                <div style={{ fontSize: '28px', marginBottom: '12px' }}>{point.icon}</div>
-                <div style={{
-                  fontSize: isMobile ? '15px' : '17px', fontWeight: 700,
-                  color: textColor, marginBottom: '6px',
-                }}>
-                  {point.title}
-                </div>
-                <div style={{
-                  fontSize: isMobile ? '13px' : '14px', color: subColor, lineHeight: 1.5,
-                }}>
-                  {point.desc}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-
-  if (type === 'echarts-race') {
-    return (
-      <div style={{
-        display: 'flex', flexDirection: 'column',
-        height: '100%', padding: isMobile ? '20px 12px' : '32px 60px',
-      }}>
-        {slide.chapter && (
-          <div style={{
-            fontSize: '13px', fontWeight: 600, color: accent,
-            letterSpacing: '1px', marginBottom: '6px',
-          }}>
-            {slide.chapter}
-          </div>
-        )}
-        <h2 style={{
-          fontSize: isMobile ? '20px' : '32px', fontWeight: 800,
-          color: textColor, margin: '0 0 4px 0',
-        }}>
-          {slide.title}
-        </h2>
-        {slide.subtitle && (
-          <p style={{
-            fontSize: isMobile ? '13px' : '16px', color: subColor,
-            margin: '0 0 12px 0',
-          }}>
-            {slide.subtitle}
-          </p>
-        )}
-        <div
-          id="ppt-echarts-race"
-          style={{
-            flex: 1, width: '100%', minHeight: '300px',
-            borderRadius: '12px',
-            background: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(26,26,46,0.02)',
-          }}
-        />
-      </div>
-    );
-  }
-
-  if (type === 'ending') {
-    return (
-      <div style={{
-        display: 'flex', flexDirection: 'column', justifyContent: 'center',
-        alignItems: 'center', height: '100%', textAlign: 'center',
-        padding: isMobile ? '40px 24px' : '60px 80px',
-      }}>
-        <h1 style={{
-          fontSize: isMobile ? '32px' : '56px', fontWeight: 900,
-          color: textColor, margin: '0 0 16px 0',
-        }}>
-          {slide.title}
-        </h1>
-        {slide.subtitle && (
-          <div style={{
-            fontSize: isMobile ? '16px' : '22px', color: subColor,
-            margin: '0 0 32px 0', fontFamily: 'monospace',
-            padding: '12px 24px', borderRadius: '8px',
-            background: 'rgba(255,255,255,0.15)',
-          }}>
-            {slide.subtitle}
-          </div>
-        )}
-        {slide.quote && (
-          <p style={{
-            fontSize: isMobile ? '14px' : '18px', color: subColor,
-            fontStyle: 'italic', margin: 0,
-          }}>
-            "{slide.quote}"
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  // 默认：简单标题 + 副标题
-  return (
-    <div style={{
-      display: 'flex', flexDirection: 'column', justifyContent: 'center',
-      height: '100%', padding: isMobile ? '40px 20px' : '48px 80px',
-    }}>
-      <h2 style={{ fontSize: isMobile ? '24px' : '38px', fontWeight: 800, color: textColor }}>
-        {slide.title}
-      </h2>
-      {slide.subtitle && (
-        <p style={{ fontSize: isMobile ? '16px' : '22px', color: subColor }}>
-          {slide.subtitle}
-        </p>
-      )}
-    </div>
-  );
-}
-
-// ── 生命周期 ────────────────────────────────────────────────
-export function didMount() {
-  var self = this;
-  _customState.total = SLIDES.length;
-
-  // ── 从 URL hash 读取初始页码（如 #3 跳到第 3 页）──
-  var hash = window.location.hash;
-  if (hash) {
-    var pageNum = parseInt(hash.replace('#', ''), 10);
-    if (pageNum >= 1 && pageNum <= SLIDES.length) {
-      _customState.currentIndex = pageNum - 1;
-    }
-  }
-
-  // ── 监听 hash 变化（浏览器前进/后退）──
-  this._handleHashChange = function() {
-    var h = window.location.hash;
-    if (h) {
-      var p = parseInt(h.replace('#', ''), 10);
-      if (p >= 1 && p <= SLIDES.length && p - 1 !== _customState.currentIndex) {
-        _customState.currentIndex = p - 1;
-        self.forceUpdate();
-      }
-    }
-  };
-  window.addEventListener('hashchange', this._handleHashChange);
-
-  // 键盘翻页（方向键 + 演讲笔 + 数字键快速跳页）
-  this._handleKeyDown = function(e) {
-    // ── 数字键快速跳页（300ms 延迟缓冲，支持双位数）──
-    var digit = null;
-    if (e.key >= '0' && e.key <= '9') {
-      digit = e.key;
-    }
-    if (digit !== null) {
-      if (_customState.numTimer) {
-        clearTimeout(_customState.numTimer);
-      }
-      _customState.numBuffer += digit;
-      _customState.numTimer = setTimeout(function() {
-        var targetIndex = parseInt(_customState.numBuffer, 10) - 1;
-        if (targetIndex >= 0 && targetIndex < SLIDES.length) {
-          _customState.currentIndex = targetIndex;
-          self.forceUpdate();
-        }
-        _customState.numBuffer = '';
-        _customState.numTimer = null;
-      }, 300);
-      return;
-    }
-
-    // ── 方向键 / 演讲笔翻页 ──
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === 'PageDown') {
-      if (_customState.currentIndex < SLIDES.length - 1) {
-        _customState.currentIndex++;
-        self.forceUpdate();
-      }
-    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'PageUp') {
-      if (_customState.currentIndex > 0) {
-        _customState.currentIndex--;
-        self.forceUpdate();
-      }
-    }
-  };
-  document.addEventListener('keydown', this._handleKeyDown);
-
-  // 触摸滑动（移动端）
-  this._touchStartX = 0;
-  this._handleTouchStart = function(e) {
-    this._touchStartX = e.changedTouches[0].screenX;
-  }.bind(this);
-  this._handleTouchEnd = function(e) {
-    var touchEndX = e.changedTouches[0].screenX;
-    if (this._touchStartX - touchEndX > 50) {
-      if (_customState.currentIndex < SLIDES.length - 1) {
-        _customState.currentIndex++;
-        self.forceUpdate();
-      }
-    }
-    if (touchEndX - this._touchStartX > 50) {
-      if (_customState.currentIndex > 0) {
-        _customState.currentIndex--;
-        self.forceUpdate();
-      }
-    }
-  }.bind(this);
-  document.addEventListener('touchstart', this._handleTouchStart);
-  document.addEventListener('touchend', this._handleTouchEnd);
-
-  // 鼠标移到底部显示导航栏
-  this._handleMouseMove = function(e) {
-    var isNearBottom = e.clientY > window.innerHeight - 80;
-    if (isNearBottom !== _customState.navVisible) {
-      _customState.navVisible = isNearBottom;
-      self.forceUpdate();
-    }
-  };
-  document.addEventListener('mousemove', this._handleMouseMove);
-
-  // 全屏状态变化监听
-  this._handleFullscreenChange = function() {
-    _customState.isFullscreen = !!document.fullscreenElement;
-    self.forceUpdate();
-  };
-  document.addEventListener('fullscreenchange', this._handleFullscreenChange);
-
-  // ── 加载 ECharts CDN ──
-  if (!window.echarts) {
-    var script = document.createElement('script');
-    script.src = 'https://g.alicdn.com/code/lib/echarts/5.6.0/echarts.min.js';
-    script.onload = function() {
-      _customState.echartsLoaded = true;
-      _tryInitEchartsRace();
-    };
-    document.head.appendChild(script);
-  } else {
-    _customState.echartsLoaded = true;
-  }
-}
-
-// ── ECharts 动态柱状图初始化 ────────────────────────────────
-var _entityColors = {
-  china: '#ff4444',
-  india: '#4d96ff',
-  europe: '#9b59b6',
-  mideast: '#6bcb77',
-  usa: '#4d96ff',
-  japan: '#ffd93d',
-  russia: '#6bcb77',
-  other: '#95a5a6',
-};
-
-function _tryInitEchartsRace() {
-  if (!_customState.echartsLoaded || !window.echarts) return;
-  var currentSlide = SLIDES[_customState.currentIndex];
-  if (!currentSlide || currentSlide.type !== 'echarts-race') {
-    _destroyEchartsRace();
-    return;
-  }
-  var dom = document.getElementById('ppt-echarts-race');
-  if (!dom) return;
-  if (_customState.echartsInstance) return;
-
-  var isDark = _customState.darkMode;
-  var chart = window.echarts.init(dom, isDark ? 'dark' : null);
-  _customState.echartsInstance = chart;
-  _customState.raceIndex = 0;
-  _customState.raceYearTimer = null;
-
-  // 渲染首帧并立即开始动画
-  _renderRaceFrame(chart, 0, RACE_KEYFRAMES[0].values, RACE_KEYFRAMES[0].chinaLabel, RACE_KEYFRAMES[0].year, isDark);
-  _advanceRaceSegment(chart);
-}
-
-// 推进到下一段（两个关键帧之间逐帧插值）
-function _advanceRaceSegment(chart) {
-  var fromIdx = _customState.raceIndex;
-  var toIdx = fromIdx + 1;
-  if (toIdx >= RACE_KEYFRAMES.length) {
-    // 播放完毕，在图表中央显示重播按钮
-    _customState.raceFinished = true;
-    _showReplayButton(chart);
-    return;
-  }
-
-  var fromKf = RACE_KEYFRAMES[fromIdx];
-  var toKf = RACE_KEYFRAMES[toIdx];
-  var fromYear = fromKf.year;
-  var toYear = toKf.year;
-  var totalFrames = 30;
-  var frame = 0;
-
-  _customState.raceYearTimer = setInterval(function() {
-    // 防御：chart 已被销毁时立即停止
-    if (!_customState.echartsInstance || _customState.echartsInstance !== chart) {
-      clearInterval(_customState.raceYearTimer);
-      _customState.raceYearTimer = null;
-      return;
-    }
-    frame++;
-    var progress = frame / totalFrames;
-    // 线性插值每个实体的数值
-    var interpolated = [];
-    for (var i = 0; i < RACE_ENTITIES.length; i++) {
-      interpolated.push(Math.round(fromKf.values[i] + (toKf.values[i] - fromKf.values[i]) * progress));
-    }
-    // 插值年份
-    var currentYear = Math.round(fromYear + (toYear - fromYear) * progress);
-    // 朝代名：后半段切换到目标朝代
-    var chinaLabel = progress < 0.5 ? fromKf.chinaLabel : toKf.chinaLabel;
-
-    _renderRaceFrame(chart, toIdx, interpolated, chinaLabel, currentYear, _customState.darkMode);
-
-    if (frame >= totalFrames) {
-      clearInterval(_customState.raceYearTimer);
-      _customState.raceYearTimer = null;
-      _customState.raceIndex = toIdx;
-      // 立即开始下一段，无停顿
-      _advanceRaceSegment(chart);
-    }
-  }, 80);
-}
-
-// 格式化数值显示（如 28000 → 2.8万）
-function _formatGdpValue(value) {
-  if (value >= 10000) return (value / 10000).toFixed(1) + '万';
-  if (value >= 1000) return (value / 1000).toFixed(1) + '千';
-  return '' + value;
-}
-
-// 渲染一帧
-function _renderRaceFrame(chart, keyframeIdx, values, chinaLabel, displayYear, isDark) {
-  // 构建 {name, value, color, entity} 数组
-  var pairs = [];
-  for (var i = 0; i < RACE_ENTITIES.length; i++) {
-    var entity = RACE_ENTITIES[i];
-    var label = entity === 'china' ? chinaLabel : RACE_LABELS[entity];
-    pairs.push({
-      name: label,
-      value: values[i],
-      color: _entityColors[entity],
-      entity: entity,
-    });
-  }
-  // 按值排序（小的在下，大的在上）
-  pairs = _.sortBy(pairs, 'value');
-
-  var categories = [];
-  var barData = [];
-  for (var j = 0; j < pairs.length; j++) {
-    categories.push(pairs[j].name);
-    barData.push({
-      value: pairs[j].value,
-      itemStyle: { color: pairs[j].color, borderRadius: [0, 6, 6, 0] },
-    });
-  }
-
-  // 年份显示
-  var yearText = displayYear < 0 ? ('BC ' + Math.abs(displayYear)) : ('' + displayYear);
-  var titleText = displayYear < 0
-    ? ('公元前 ' + Math.abs(displayYear) + ' 年 · ' + chinaLabel)
-    : ('公元 ' + displayYear + ' 年 · ' + chinaLabel);
-
-  // 底部时间轴
-  var timelineElements = _buildTimelineGraphic(chart, keyframeIdx, isDark);
-
-  // 动态计算 xAxis max（取当前最大值的 1.3 倍，至少 500）
-  var maxVal = 500;
-  for (var m = 0; m < values.length; m++) {
-    if (values[m] > maxVal) maxVal = values[m];
-  }
-  maxVal = Math.ceil(maxVal * 1.3 / 1000) * 1000;
-
-  var option = {
-    backgroundColor: 'transparent',
-    title: {
-      text: titleText,
-      left: 'center',
-      top: 6,
-      textStyle: { fontSize: 18, fontWeight: 800, color: isDark ? '#ffffff' : '#1a1a2e' },
-    },
-    graphic: {
-      elements: [{
-        type: 'text',
-        right: 30,
-        bottom: 55,
-        style: {
-          text: yearText,
-          fontSize: 90,
-          fontWeight: 900,
-          fill: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(26,26,46,0.04)',
-          textAlign: 'right',
-        },
-        z: 1,
-      }].concat(timelineElements),
-    },
-    grid: { left: '12%', right: '15%', top: 45, bottom: '16%' },
-    xAxis: {
-      type: 'value',
-      max: maxVal,
-      axisLabel: {
-        formatter: function(v) { return _formatGdpValue(v); },
-        color: isDark ? 'rgba(255,255,255,0.5)' : 'rgba(26,26,46,0.5)',
-        fontSize: 11,
-      },
-      splitLine: {
-        lineStyle: { color: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(26,26,46,0.06)' },
-      },
-      axisLine: { show: false },
-      axisTick: { show: false },
-    },
-    yAxis: {
-      type: 'category',
-      data: categories,
-      inverse: false,
-      axisLabel: { fontSize: 13, fontWeight: 600, color: isDark ? '#ffffff' : '#1a1a2e' },
-      axisTick: { show: false },
-      axisLine: { show: false },
-    },
-    series: [{
-      type: 'bar',
-      data: barData,
-      barWidth: '55%',
-      label: {
-        show: true,
-        position: 'right',
-        formatter: function(params) { return _formatGdpValue(params.value); },
-        fontSize: 12,
-        fontWeight: 700,
-        color: isDark ? '#ffffff' : '#1a1a2e',
-      },
-    }],
-    animationDuration: 0,
-    animationDurationUpdate: 80,
-    animationEasing: 'linear',
-    animationEasingUpdate: 'linear',
-  };
-
-  chart.setOption(option, true);
-}
-
-// 构建底部时间轴 graphic 元素
-function _buildTimelineGraphic(chart, activeIdx, isDark) {
-  var nodes = [];
-  var totalNodes = RACE_KEYFRAMES.length;
-  var chartWidth = chart.getWidth() || 800;
-
-  // 底线
-  nodes.push({
-    type: 'line',
-    position: ['10%', '93%'],
-    shape: { x1: 0, y1: 0, x2: chartWidth * 0.8, y2: 0 },
-    style: { stroke: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(26,26,46,0.08)', lineWidth: 2 },
-    z: 5,
-  });
-  // 进度线
-  var progressX = totalNodes > 1 ? (activeIdx / (totalNodes - 1)) * chartWidth * 0.8 : 0;
-  nodes.push({
-    type: 'line',
-    position: ['10%', '93%'],
-    shape: { x1: 0, y1: 0, x2: progressX, y2: 0 },
-    style: { stroke: '#0089ff', lineWidth: 2 },
-    z: 6,
-  });
-
-  for (var t = 0; t < totalNodes; t++) {
-    var isActive = t === activeIdx;
-    var isPast = t < activeIdx;
-    var nodeX = (t / (totalNodes - 1)) * 80 + 10;
-    var yr = RACE_KEYFRAMES[t].year;
-    var yrLabel = yr < 0 ? ('BC' + Math.abs(yr)) : ('' + yr);
-
-    nodes.push({
-      type: 'circle',
-      shape: { cx: 0, cy: 0, r: isActive ? 5 : 2.5 },
-      position: [nodeX + '%', '93%'],
-      style: {
-        fill: isActive ? '#0089ff' : (isPast ? (isDark ? 'rgba(255,255,255,0.5)' : 'rgba(26,26,46,0.4)') : (isDark ? 'rgba(255,255,255,0.15)' : 'rgba(26,26,46,0.12)')),
-      },
-      z: 10,
-    });
-
-    if (isActive || t === 0 || t === totalNodes - 1 || t % 5 === 0) {
-      nodes.push({
-        type: 'text',
-        position: [nodeX + '%', '97%'],
-        style: {
-          text: yrLabel,
-          fontSize: isActive ? 10 : 8,
-          fontWeight: isActive ? 700 : 400,
-          fill: isActive ? '#0089ff' : (isDark ? 'rgba(255,255,255,0.35)' : 'rgba(26,26,46,0.3)'),
-          textAlign: 'center',
-        },
-        z: 10,
-      });
-    }
-  }
-  return nodes;
-}
-
-// 播放完毕后在图表中央显示重播按钮
-function _showReplayButton(chart) {
-  var isDark = _customState.darkMode;
-  chart.setOption({
-    graphic: {
-      elements: [
-        {
-          type: 'circle',
-          shape: { cx: 0, cy: 0, r: 36 },
-          left: 'center',
-          top: 'middle',
-          style: {
-            fill: isDark ? 'rgba(0,137,255,0.9)' : 'rgba(0,137,255,0.85)',
-            shadowBlur: 20,
-            shadowColor: 'rgba(0,137,255,0.3)',
-          },
-          cursor: 'pointer',
-          onclick: function() { _replayRace(chart); },
-          z: 100,
-        },
-        {
-          type: 'text',
-          left: 'center',
-          top: 'middle',
-          style: {
-            text: '▶',
-            fontSize: 28,
-            fill: '#ffffff',
-            textAlign: 'center',
-            textVerticalAlign: 'middle',
-          },
-          cursor: 'pointer',
-          onclick: function() { _replayRace(chart); },
-          z: 101,
-        },
-      ],
-    },
-  });
-}
-
-// 重新播放
-function _replayRace(chart) {
-  // 先清理旧的播放定时器，防止多个 interval 并行
-  if (_customState.raceYearTimer) {
-    clearInterval(_customState.raceYearTimer);
-    _customState.raceYearTimer = null;
-  }
-  _customState.raceIndex = 0;
-  _customState.raceFinished = false;
-  var isDark = _customState.darkMode;
-  _renderRaceFrame(chart, 0, RACE_KEYFRAMES[0].values, RACE_KEYFRAMES[0].chinaLabel, RACE_KEYFRAMES[0].year, isDark);
-  _advanceRaceSegment(chart);
-}
-
-function _destroyEchartsRace() {
-  if (_customState.echartsInitTimer) {
-    clearTimeout(_customState.echartsInitTimer);
-    _customState.echartsInitTimer = null;
-  }
-  if (_customState.raceYearTimer) {
-    clearInterval(_customState.raceYearTimer);
-    _customState.raceYearTimer = null;
-  }
-  if (_customState.raceTimer) {
-    clearTimeout(_customState.raceTimer);
-    _customState.raceTimer = null;
-  }
-  if (_customState.echartsInstance) {
-    _customState.echartsInstance.dispose();
-    _customState.echartsInstance = null;
-  }
-  _customState.raceIndex = 0;
-  _customState.raceFinished = false;
-}
-
-export function didUnmount() {
-  window.removeEventListener('hashchange', this._handleHashChange);
-  document.removeEventListener('keydown', this._handleKeyDown);
-  document.removeEventListener('touchstart', this._handleTouchStart);
-  document.removeEventListener('touchend', this._handleTouchEnd);
-  document.removeEventListener('mousemove', this._handleMouseMove);
-  document.removeEventListener('fullscreenchange', this._handleFullscreenChange);
-  if (_customState.numTimer) {
-    clearTimeout(_customState.numTimer);
-  }
-  _destroyEchartsRace();
-}
-
-export function getCustomState(key) {
-  if (key) return _customState[key];
-  return _.clone(_customState);
-}
-
-export function setCustomState(newState) {
-  _.assign(_customState, newState);
-  this.forceUpdate();
-}
-
-export function forceUpdate() {
-  this.setState({ timestamp: new Date().getTime() });
-}
-
-// ── 主渲染函数 ──────────────────────────────────────────────
-export function renderJsx() {
-  var state = _customState;
-  var slideData = SLIDES[state.currentIndex];
-  var slideBg = state.darkMode ? slideData.bg : (slideData.bgLight || slideData.bg);
-  var accent = slideData.accent || '#0089ff';
-  var isMobile = this.utils.isMobile();
-  var total = SLIDES.length;
-  var self = this;
-  var lang = I18N[state.lang] || I18N.zh;
-
-  // 构造当前 slide 对象（用动态 bg 替换原始 bg）
-  var slide = {};
-  for (var k in slideData) { slide[k] = slideData[k]; }
-  slide.bg = slideBg;
-
-  var isDarkSlide = slideBg !== '#ffffff' && slideBg !== '#f0f7ff';
-
-  // ── 事件处理函数（顶部定义，避免内联创建）──
-  var handlePrev = function() {
-    if (state.currentIndex > 0) {
-      state.currentIndex--;
-      self.forceUpdate();
-    }
-  };
-  var handleNext = function() {
-    if (state.currentIndex < total - 1) {
-      state.currentIndex++;
-      self.forceUpdate();
-    }
-  };
-  var handleToggleFullscreen = function() {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen().catch(function() {});
-    } else {
-      document.exitFullscreen().catch(function() {});
-    }
-  };
-  var handleLangSwitch = function() {
-    state.lang = state.lang === 'zh' ? 'en' : 'zh';
-    self.forceUpdate();
-  };
-  var handleToggleDarkMode = function() {
-    state.darkMode = !state.darkMode;
-    _destroyEchartsRace();
-    self.forceUpdate();
-  };
-
-  // ── 同步 URL hash（翻页时更新，方便分享定位）──
-  var expectedHash = '#' + (state.currentIndex + 1);
-  if (window.location.hash !== expectedHash) {
-    history.replaceState(null, '', expectedHash);
-  }
-
-  // ── 每次渲染后检测是否需要初始化/销毁 ECharts ──
-  if (_customState.echartsInitTimer) {
-    clearTimeout(_customState.echartsInitTimer);
-  }
-  _customState.echartsInitTimer = setTimeout(function() {
-    _customState.echartsInitTimer = null;
-    _tryInitEchartsRace();
-  }, 100);
-
-  // ── 导航栏样式（默认隐藏，鼠标移到底部显示）──
-  var navStyle = {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    padding: '16px 0',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: '16px',
-    background: isDarkSlide ? 'linear-gradient(transparent, rgba(0,0,0,0.3))' : 'linear-gradient(transparent, rgba(0,0,0,0.05))',
-    opacity: state.navVisible ? 1 : 0,
-    transform: state.navVisible ? 'translateY(0)' : 'translateY(10px)',
-    transition: 'opacity 0.3s ease, transform 0.3s ease',
-    pointerEvents: state.navVisible ? 'auto' : 'none',
-  };
-
-  // ── 分页点 ──
-  var handleDotClick = function(idx) {
-    return function() {
-      state.currentIndex = idx;
-      self.forceUpdate();
-    };
-  };
-  var dots = [];
-  var maxVisible = 7;
-  var dotStart = Math.max(0, Math.min(state.currentIndex - Math.floor(maxVisible / 2), total - maxVisible));
-  var dotEnd = Math.min(total, dotStart + maxVisible);
-  for (var i = dotStart; i < dotEnd; i++) {
-    var isActive = i === state.currentIndex;
-    dots.push(
-      <div
-        key={i}
-        style={{
-          width: isActive ? '24px' : '7px',
-          height: '7px',
-          borderRadius: '4px',
-          background: isActive ? accent : (isDarkSlide ? 'rgba(255,255,255,0.25)' : 'rgba(26,26,46,0.2)'),
-          transition: 'all 0.3s ease',
-          cursor: 'pointer',
-        }}
-        onClick={handleDotClick(i)}
-      />
-    );
-  }
-
-  return (
-    <div style={{
-      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
-      background: slide.bg, overflow: 'hidden',
-      padding: '0 !important', borderRadius: '0 !important', margin: '0 !important',
-    }}>
-      {/* 隐藏时间戳（触发重渲染）*/}
-      <div style={{ display: 'none' }}>{this.state.timestamp}</div>
-
-      {/* 隐藏宜搭低代码开发工具开关 */}
-      <style>{'\
-        #__lowcode_devtool_switch__,\
-        [id="__lowcode_devtool_switch__"] {\
-          display: none !important;\
-          visibility: hidden !important;\
-          opacity: 0 !important;\
-          pointer-events: none !important;\
-        }\
-      '}</style>
-
-      {/* ── 右上角工具栏：深浅切换 + 语言切换 + 全屏按钮 ── */}
-      <div style={{
-        position: 'absolute', top: '16px', right: '16px',
-        display: 'flex', gap: '8px', zIndex: 100,
-      }}>
-        <div
-          onClick={(e) => { handleToggleDarkMode(); }}
-          style={{
-            width: '36px', height: '36px', borderRadius: '8px',
-            background: isDarkSlide ? 'rgba(255,255,255,0.1)' : 'rgba(26,26,46,0.06)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', fontSize: '16px',
-            color: isDarkSlide ? '#ffffff' : '#1a1a2e',
-          }}
-          title={state.darkMode ? lang.lightMode : lang.darkMode}
-        >
-          {state.darkMode ? '☀️' : '🌙'}
-        </div>
-        <div
-          onClick={(e) => { handleLangSwitch(); }}
-          style={{
-            height: '36px', padding: '0 12px', borderRadius: '8px',
-            background: isDarkSlide ? 'rgba(255,255,255,0.1)' : 'rgba(26,26,46,0.06)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', fontSize: '13px', fontWeight: 600,
-            color: isDarkSlide ? '#ffffff' : '#1a1a2e',
-          }}
-        >
-          {lang.langSwitch}
-        </div>
-        <div
-          onClick={(e) => { handleToggleFullscreen(); }}
-          style={{
-            width: '36px', height: '36px', borderRadius: '8px',
-            background: isDarkSlide ? 'rgba(255,255,255,0.1)' : 'rgba(26,26,46,0.06)',
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', fontSize: '16px',
-            color: isDarkSlide ? '#ffffff' : '#1a1a2e',
-          }}
-          title={state.isFullscreen ? lang.exitFullscreen : lang.fullscreen}
-        >
-          {state.isFullscreen ? '⊡' : '⛶'}
-        </div>
-      </div>
-
-      {/* ── 幻灯片内容区 ── */}
-      {renderSlideContent(slide, accent, isMobile)}
-
-      {/* ── 导航栏（默认隐藏，鼠标移到底部显示）── */}
-      <div style={navStyle}>
-        <button
-          onClick={(e) => { handlePrev(); }}
-          style={{
-            padding: '8px 20px', borderRadius: '20px',
-            border: isDarkSlide ? '1px solid rgba(255,255,255,0.2)' : '1px solid #d9d9d9',
-            cursor: 'pointer',
-            background: isDarkSlide ? 'rgba(255,255,255,0.1)' : '#fff',
-            color: isDarkSlide ? '#fff' : '#333',
-            fontSize: '14px',
-          }}
-        >
-          {lang.prev}
-        </button>
-
-        {/* 分页点 */}
-        <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
-          {dots}
-        </div>
-
-        <span style={{ lineHeight: '36px', color: isDarkSlide ? 'rgba(255,255,255,0.6)' : '#666', fontSize: '14px', minWidth: '60px', textAlign: 'center' }}>
-          {lang.pageOf(state.currentIndex + 1, total)}
-        </span>
-
-        <button
-          onClick={(e) => { handleNext(); }}
-          style={{
-            padding: '8px 20px', borderRadius: '20px',
-            border: 'none', cursor: 'pointer',
-            background: accent, color: '#fff', fontSize: '14px',
-          }}
-        >
-          {lang.next}
-        </button>
-      </div>
-    </div>
-  );
-}