feat(workbench): AI脚本诊断列表支持分页——每页20条前端切片，复用pager组件，空态colspan改动态(09-02)

project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js

@@ -881,7 +881,10 @@ async function renderReviews(view) {
   const fmtScore = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : '-');
   const GEN = { rewrite: '爆款视频创作', new: '账号列表创作', abc: 'ABC融合创作' };
 
-  const rows = items.map((row) => {
+  // 分页：每页 20 条，前端切片；详情/查找仍用全量 items
+  const PAGE_SIZE = 20;
+  let page = 1;
+  const buildRows = () => items.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE).map((row) => {
     const sd = dimsOf(row);
     const rv = reviewOf(row);
     const dimsTd = DIMS.map((dim) => {
@@ -900,27 +903,32 @@ async function renderReviews(view) {
     </tr>`;
   }).join('');
 
-  view.innerHTML = `
-  <div class="page">
-    <div class="page-toolbar">${toolbarBack()}<span class="page-title">AI脚本诊断</span><span class="pager-info">按生成时间倒序 · 共 ${items.length} 条</span></div>
-    <div class="table-wrap"><table class="table">
-      <thead><tr><th>ID</th><th>账号</th><th>生成方式</th><th>脚本标题</th><th>生成时间</th>${DIMS.map((h) => `<th style="text-align:center">${h}</th>`).join('')}<th>操作</th></tr></thead>
-      <tbody>${rows || '<tr><td colspan="13" class="empty">暂无 AI 写脚本（AI 创作的脚本会出现在这里）</td></tr>'}</tbody>
-    </table></div>
-  </div>`;
-  bindBack(view);
-  view.querySelectorAll('[data-open]').forEach((a) => a.addEventListener('click', () => openScriptDetail(a.dataset.open)));
-  view.querySelectorAll('[data-review]').forEach((a) => a.addEventListener('click', () => openReviewDetail(a.dataset.review)));
-  view.querySelectorAll('[data-review-row]').forEach((b) => b.addEventListener('click', () => {
-    confirmRun({
-      title: '复盘评分',
-      desc: '将对该 AI 脚本做复盘评分（AI脚本 / 原视频脚本 / 对比分析三种模式），按 mcn-script-review（脚本复盘）技能执行。',
-      prompt: '请对这条 AI 脚本做复盘评分（AI脚本 / 原视频脚本 / 对比分析三种模式），按 mcn-script-review（脚本复盘）技能执行。',
-      label: '复盘指令',
-      skills: ['脚本复盘'],
-      btn: b,
-    });
-  }));
+  const render = () => {
+    view.innerHTML = `
+    <div class="page">
+      <div class="page-toolbar">${toolbarBack()}<span class="page-title">AI脚本诊断</span><span class="pager-info">按生成时间倒序 · 共 ${items.length} 条</span></div>
+      <div class="table-wrap"><table class="table">
+        <thead><tr><th>ID</th><th>账号</th><th>生成方式</th><th>脚本标题</th><th>生成时间</th>${DIMS.map((h) => `<th style="text-align:center">${h}</th>`).join('')}<th>操作</th></tr></thead>
+        <tbody>${buildRows() || `<tr><td colspan="${5 + DIMS.length + 1}" class="empty">暂无 AI 写脚本（AI 创作的脚本会出现在这里）</td></tr>`}</tbody>
+      </table></div>
+      <div class="list-footer">${pagerHtml(items.length, page, PAGE_SIZE)}</div>
+    </div>`;
+    bindBack(view);
+    bindPager(view, (p) => { page = p; render(); });
+    view.querySelectorAll('[data-open]').forEach((a) => a.addEventListener('click', () => openScriptDetail(a.dataset.open)));
+    view.querySelectorAll('[data-review]').forEach((a) => a.addEventListener('click', () => openReviewDetail(a.dataset.review)));
+    view.querySelectorAll('[data-review-row]').forEach((b) => b.addEventListener('click', () => {
+      confirmRun({
+        title: '复盘评分',
+        desc: '将对该 AI 脚本做复盘评分（AI脚本 / 原视频脚本 / 对比分析三种模式），按 mcn-script-review（脚本复盘）技能执行。',
+        prompt: '请对这条 AI 脚本做复盘评分（AI脚本 / 原视频脚本 / 对比分析三种模式），按 mcn-script-review（脚本复盘）技能执行。',
+        label: '复盘指令',
+        skills: ['脚本复盘'],
+        btn: b,
+      });
+    }));
+  };
+  render();
 
   async function openScriptDetail(rewriteId) {
     // 打开源 vs AI 对比（复用视频脚本弹窗逻辑的精简版）