yidaconnector 2026.6.11

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

@@ -0,0 +1,1192 @@
+// ══════════════════════════════════════════════════════════════
+// YidaConnector 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: 'YidaConnector 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: 'yidaconnector 命令行工具，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 yidaconnector' },
+      { icon: '2️⃣', title: '登录', desc: 'yidaconnector login（扫码登录）' },
+      { icon: '3️⃣', title: '创建', desc: 'yidaconnector 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: '立即体验 YidaConnector',
+    subtitle: 'npm install -g yidaconnector',
+    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>
+  );
+}