Yida Ppt Slider

# 1. 只读检测
openyida env --json
openyida login --check-only --json

# 2. 已获授权后创建应用/页面（已有则跳过）
openyida create-app "<应用名>"
openyida create-page <appType> "<页面名>"

# 3. 编写 `.canvas.jsx` 源码
# project/pages/src/<页面名>.canvas.jsx

# 4. 本地快检（以 yida-canvas-custom-page 的 compileCanvasLocal 为准）

# 5. 用户确认内容与主题后发布
openyida publish project/pages/src/<页面名>.canvas.jsx <appType> <formUuid>

# 6. 隐藏宜搭导航并回读验证
openyida update-form-config <appType> <formUuid> false "<页面名>"
openyida get-schema <appType> <formUuid>

import React, { useCallback, useEffect, useMemo, useState } from 'react';

function clampPage(value, total) {
  return Math.max(0, Math.min(total - 1, value));
}

function readHashPage(total) {
  const raw = Number(window.location.hash.replace(/^#/, ''));
  return Number.isFinite(raw) && raw >= 1 ? clampPage(raw - 1, total) : 0;
}

function YidaComp() {
  const total = SLIDES.length;
  const [current, setCurrent] = useState(() => readHashPage(total));
  const [navVisible, setNavVisible] = useState(false);
  const [isFullscreen, setIsFullscreen] = useState(Boolean(document.fullscreenElement));

  const goTo = useCallback((next) => {
    setCurrent((previous) => clampPage(
      typeof next === 'function' ? next(previous) : next,
      total,
    ));
  }, [total]);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (['ArrowRight', 'ArrowDown', 'PageDown', ' '].includes(event.key)) {
        event.preventDefault();
        goTo((page) => page + 1);
      } else if (['ArrowLeft', 'ArrowUp', 'PageUp'].includes(event.key)) {
        event.preventDefault();
        goTo((page) => page - 1);
      } else if (event.key === 'Home') {
        goTo(0);
      } else if (event.key === 'End') {
        goTo(total - 1);
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [goTo, total]);

  useEffect(() => {
    const handleHashChange = () => setCurrent(readHashPage(total));
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, [total]);

  useEffect(() => {
    const hash = '#' + String(current + 1);
    if (window.location.hash !== hash) history.replaceState(null, '', hash);
  }, [current]);

  useEffect(() => {
    const handleFullscreen = () => setIsFullscreen(Boolean(document.fullscreenElement));
    document.addEventListener('fullscreenchange', handleFullscreen);
    return () => document.removeEventListener('fullscreenchange', handleFullscreen);
  }, []);

  const slide = useMemo(() => SLIDES[current], [current]);
  return (
    <PresentationShell
      slide={slide}
      current={current}
      total={total}
      navVisible={navVisible}
      isFullscreen={isFullscreen}
      onNavigate={goTo}
      onNavVisibleChange={setNavVisible}
    />
  );
}

export default YidaComp;