表格转网页

概述

表格 → 可播放网站（一区一播风格）

把任意"多条目、每条含若干字段"的表格/清单，渲染成一个左侧导航 + 上一/下一 + 自动播放的单文件 HTML。风格与你之前看到的"杭州市各区补贴"页面完全一致：浅色主题、蓝色渐变顶栏、侧边栏点击切换、进度条、逐行淡入动画、金额红色高亮。

何时使用

• 用户说"整理成这种网站 / 做成播放网站 / 一区一播那种 / 转成可直接打开的网页"。
• 用户手上有表格数据（CSV、Markdown 表格、粘贴的行、或"从这 N 个文件里提取"），希望变成可点击浏览的网页。
• 用户给了一批网址 / 网页链接（如"把这 10 个政策页做成可播放网页"），希望逐个抓取并浏览。
• 数据天然可分组成"多个条目"（区、产品、方案、步骤、人物、文章、网页……），每个条目下有多条记录。

输入

• 用户提供的原始表格（直接粘贴 / 文件 / 让我先抽取再整理皆可）。
• 网址 / 网页链接：用户给一批 URL（政策页、文章、产品页……），先用 WebFetch 逐个抓取页面，抽取标题、要点、来源，整理成条目；模板字段支持 <a href="..."> 直接放可点链接，每条都能跳回原网页。
• 文档 / 资料：PDF、Word、Markdown 等，先抽取文本再结构化（表格类可跳过抽取）。
• 表头通常形如：条目名、官方文号/来源、类型、内容、条件…… 字段可多可少，取最有信息量的 2~4 列即可。

工作流程

1. 判断来源类型：若是网址 / 网页链接列表，先用 WebFetch 逐个抓取并抽取标题、要点、链接等结构化信息，再进入分组；若是表格 / 文档则直接分组。
2. 理解数据 & 分组：确定"一个条目"是什么（一区/一产品/一章/一网页……）。把每条记录归到对应条目下；同一来源可拆成多个"章节(section)"。
3. 结构化：按下方"数据格式"把数据整理成 DATA 数组。金额/关键数字用 <span class='amt'>…</span> 包起来会变红高亮。
4. 读模板：Read 本技能目录下的 assets/template.html，拿到完整可运行 HTML（已含全部样式与交互逻辑）。
5. 替换数据区：把模板里 /* ====== 数据区 ====== */ 注释之间的 DATA 数组整体换成你的数据；按需改 COMMON（底部共性说明）。不要改动其它 CSS/JS，以保证风格一致。
6. 写出 HTML：写到用户工作区，文件名用中文语义，如 xxx展示.html。
7. 呈现：调用 present_files 把该 HTML 交给用户（会自动开预览，且文件可双击在浏览器打开）。

数据格式（JS 数组，直接替换模板里的 DATA）

const DATA = [
  {
    name: "条目名称（如：临平区）",        // 侧边栏 & 大标题
    meta: "副标题/来源说明",               // 灰字一行
    highlight: "一句话重点标签",           // 金色高亮
    sections: [                            // 一个条目可有多个章节
      {
        title: "章节标题（如：算力产业专项）",
        doc:   "文号徽标（如：临经科〔2024〕88号）",
        rows: [
          ["类型列", "内容列（金额用 <span class='amt'>红色</span>）", "条件列"],
          // 列数 = 表格字段数，建议 2~4 列
        ]
      }
    ]
  }
  // ……更多条目
];

风格一致性规则（必须满足，勿自行改版式）

• 单文件、零外部依赖（不引 CDN、不引图片），双击即开。
• 浅色背景 #f4f6fb，顶栏蓝色渐变（#2f6fed→#5b8def），文字深灰 #1f2733。
• 左侧固定侧边栏（宽度 ~210px）列出所有条目，点击切换，当前项高亮为蓝底白字。
• 底部控制条：← 上一区 / 第 x / N 区 / 下一区 → / 回到开头；顶部右上角 ▶ 自动播放（每区约 9 秒轮播）。
• 方向键 ← → 翻页；切换时表格逐行 fadeUp 淡入；顶部进度条按比例填充。
• 金额、关键比例/上限一律用 <span class='amt'> 红色（#d4380d）高亮。

注意

• 条目数很多时（>20），侧边栏会自动滚动；无需特殊处理。
• 若用户只要"全部平铺在一页"而非播放式，本技能不适用，改用普通表格 HTML。
• 模板已内置动画与响应式，移动端侧边栏收窄、字号缩小，无需改。
• 网址抓取依赖 WorkBuddy 内置联网能力；若运行环境无外网，请先让用户提供抓取好的文本，再套模板。
• 字段里写 <a href="https://...">原文链接</a> 即可在页面上放可点跳转。