pptList/scripts/aiPptDraftRecoveryTest.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>草稿恢复回归</title>
  <style>
    body{margin:0;background:#eef1f5;font-family:"Microsoft Yahei",sans-serif;color:#283544}main{max-width:1000px;margin:24px auto;padding:24px;background:white;border-radius:8px}h1{font-size:26px;margin:0 0 16px}.test-note{color:#65758a;margin-bottom:16px}button.action{margin-top:20px;padding:12px 24px;background:#1989fa;color:white;border:0;border-radius:4px;cursor:pointer}.editor-pages{display:grid;gap:20px;margin-top:16px}.editor-pages>div{background:#eef1f5;padding:12px}#conversion-status{margin-top:16px;color:#34475c}@media(max-width:1048px){main{margin:12px;padding:16px}}
  </style>
</head>
<body><div id="app"></div>
<script type="module">
  import { createApp, h, ref, nextTick } from 'vue'
  import { createPinia } from 'pinia'
  import DraftPreview from '/src/views/Editor/EditorHeader/AiCoursewareDraftPreview.vue'
  import ThumbnailSlide from '/src/views/components/ThumbnailSlide/index.vue'
  import { aiCoursewareToSlides } from '/src/utils/aiCoursewareToSlides.ts'
  import { inspectAiPptRenderedText } from '/src/utils/aiPptRenderedQuality.ts'
  import '/src/assets/styles/global.scss'
  import '/src/assets/styles/prosemirror.scss'

  // 模拟十页均有无效模型版式；只验证生产预览组件/草稿转换，不访问线上课件。
  const titles = ['凤鸣山谷的故事','听听山谷的声音','今天我们要学会','第一次聆听','山谷里的声音','声音有什么特点','模仿声音','一起比较声音','山谷音乐会','把山谷声音带回家']
  const outline = { title: titles[0], chapterName: titles[0], templateId:'blank', style:'fresh', pages: titles.map((title,index) => ({
    pageNo:index+1,type:index===0?'cover':'knowledge',title,bullets:[],
    studentContent:{headline:index===9?'你最喜欢山谷里的哪种声音？':'仔细听，说说声音的特点。',points:['凤凰的歌声：又轻又长。','麒麟的蹄声：短而快。','山谷的风声：长而轻。']},
    classroomAction:{studentTask:index===9?'用一句话说出你最喜欢的声音，再说出它的一个特点。':'选一种声音，用动作表现它的长短和强弱。'},
    visualPlan:{composition:'text_focus',visualMode:'text_only',imageNecessity:'none'},
    pageDesign:{version:1,elements:[]}
  })) }
  const converted = ref(), status = ref(''), diagnostics = ref([])
  const app = createApp({ render:()=>h('main',[
    h('h1','凤鸣山谷的故事'),
    h('p',{class:'test-note'},'草稿恢复回归 · 模拟数据 · 不调用生成服务、不修改线上课件'),
    h(DraftPreview,{outline,templateId:'blank',message:'10页原版式未完成，完整内容已保留。',onLayoutErrors:value=>{diagnostics.value=value}}),
    h('button',{class:'action',onClick:async()=>{
      converted.value=aiCoursewareToSlides(outline,{templateId:'blank',recoverDraft:true});await nextTick();
      const errors=await inspectAiPptRenderedText(converted.value.slides)
      status.value=`已转换 ${converted.value.slides.length} 页原生可编辑草稿；${converted.value.recoveredPages.length} 页原版式问题已保留；基础排版实际文字检查：${errors.length?errors.map(e=>e.message).join('；'):'通过'}`
    }},'验证草稿转换'),
    h('p',{id:'conversion-status',role:'status'},status.value),
    converted.value?h('section',{class:'editor-pages'},converted.value.slides.map((slide,index)=>h('div',[
      h('p',`第${index+1}页 · ${slide.elements.filter(e=>e.type==='text').length}个可编辑文本元素`),
      h(ThumbnailSlide,{slide,size:Math.min(960,innerWidth-80),viewportSize:1920,viewportRatio:0.5625})
    ]))):null
  ]) })
  app.use(createPinia());app.mount('#app')
</script></body></html>