FranklinWH-Toolbox/service/cmd/mcp/.kiro/skills/lieflat-charts/templates/reports/index.html

<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>报告模板库 · Lieflat Charts</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%231C1C1A'/%3E%3Ccircle cx='16' cy='16' r='6' fill='%23F0EFEB'/%3E%3C/svg%3E" />
<style>
  :root{--bg:#F0EFEB;--ink:#1C1C1A;--mut:#77766F;--grid:#D5D4CD;--soft:#E7E6E0}
  *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Noto Sans SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased;padding:48px 24px 64px}
  .sheet{max-width:1120px;margin:auto}.mast{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--ink);padding-bottom:12px}.mast b{font-size:15px}.mast span{font-size:10px;color:var(--mut);letter-spacing:.12em}
  h1{font-size:clamp(30px,5vw,48px);line-height:1.1;max-width:680px;margin:42px 0 16px}.lede{max-width:680px;color:#4A4944;line-height:1.8;font-size:13px}.lede code{background:var(--soft);padding:2px 5px}
  .how{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-top:1px solid var(--grid);margin-top:38px;padding-top:20px}.how h2{font-size:10px;letter-spacing:.14em;color:var(--mut);margin:0 0 10px}.how p{font-size:12px;line-height:1.8;margin:0;color:#4A4944}.how table{width:100%;border-collapse:collapse;font-size:11px}.how td{border-bottom:1px dotted var(--grid);padding:6px 0}.how td:last-child{text-align:right;color:var(--mut)}
  .group{border-top:1px solid var(--ink);margin-top:48px;padding-top:11px}.group h2{font-size:20px;margin:0}.group .when{color:var(--mut);font-size:11px;margin-top:5px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px;margin-top:20px}.card{display:flex;flex-direction:column}.shot{display:block;aspect-ratio:4/5;border:1px solid var(--grid);background:var(--soft);overflow:hidden;position:relative}.shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .4s}.shot:hover img{transform:scale(1.03)}.no{position:absolute;left:0;top:0;background:var(--ink);color:var(--bg);font-size:9px;padding:4px 7px;font-weight:800}.card h3{font-size:12px;line-height:1.5;margin:10px 0 0}.en{font-size:9px;color:var(--mut);margin-top:2px}.use{font-size:10.5px;line-height:1.7;color:var(--mut);margin:6px 0 0}.links{display:flex;gap:12px;border-top:1px solid var(--grid);margin-top:10px;padding-top:8px;font-size:10px;font-weight:700}.links a{color:inherit;text-decoration:none;border-bottom:1px solid var(--grid)}
  .foot{border-top:1px solid var(--ink);margin-top:54px;padding-top:12px;color:var(--mut);font-size:9px;letter-spacing:.08em;display:flex;justify-content:space-between;gap:20px}
  @media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){body{padding:28px 14px}.how{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.foot{display:block;line-height:2}}
  @media(prefers-reduced-motion:reduce){.shot img{transition:none}.shot:hover img{transform:none}}
</style>
</head>
<body><main class="sheet">
  <div class="mast"><b>Lieflat Charts / 报告模板库</b><span>12 个模板 · 中英双版</span></div>
  <h1>先想清楚这一页要替谁说话，再挑版式。</h1>
  <p class="lede">每个模板是一整页可发布的报告骨架，不是单张图。复制对应语言的 HTML，替换数据、标题和来源即可。页内图表仍须从 <code>catalog.md</code> 选择真实图型；缩略图仅展示版式和信息密度。</p>
  <div class="how"><section><h2>怎么挑</h2><p>先按报告类型、内容结构和阅读任务筛，再看版心和密度。调研 / 研究看 R01、R07、R08、R11；业务数据 / 财务经营看 R04、R09、R12；年度 / 长周期复盘看 R02、R03、R06；产品、项目和个人数据记录看 R05、R10。模板名称只是版式线索，不是行业限制。</p></section><section><h2>版心</h2><table><tr><td>760</td><td>窄栏叙事</td></tr><tr><td>880</td><td>中张单位图</td></tr><tr><td>980</td><td>常规报告</td></tr><tr><td>1080</td><td>宽版海报 / 仪表盘</td></tr><tr><td>600×1000</td><td>定尺社媒卡</td></tr></table></section></div>
  <section class="group"><h2>调研、研究与外部发布</h2><div class="when">调研报告、研究简报、政策 / 市场洞察、白皮书和对外数据海报。</div><div class="cards">
    <article class="card"><a class="shot" href="report-01.zh.html"><span class="no">R01</span><img src="../../docs/assets/reports/report-01.png" alt="调研报告 / 研究一页预览"></a><h3>调研报告 / 研究一页 · 青瓷侧栏</h3><div class="en">Survey One-Pager · Porcelain Rail</div><p class="use">主栏放结论，侧栏走方法与样本轨道。</p><div class="links"><a href="report-01.zh.html">中文版</a><a href="report-01.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-07.zh.html"><span class="no">R07</span><img src="../../docs/assets/reports/report-07.png" alt="调研 / 市场数据拼贴海报预览"></a><h3>调研 / 市场数据拼贴海报 · 椰林集市</h3><div class="en">Survey Collage Poster · Palm Bazaar</div><p class="use">巨号数字和多张图穿插成杂志拼贴。</p><div class="links"><a href="report-07.zh.html">中文版</a><a href="report-07.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-08.zh.html"><span class="no">R08</span><img src="../../docs/assets/reports/report-08.png" alt="人群 / 社会经济数据一页预览"></a><h3>人群 / 社会经济数据一页 · 百点场</h3><div class="en">Population One-Pager · Wire Hundred Field</div><p class="use">一句大字配一片可数的单位点阵。</p><div class="links"><a href="report-08.zh.html">中文版</a><a href="report-08.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-11.zh.html"><span class="no">R11</span><img src="../../docs/assets/reports/report-11.png" alt="研究 / 金融经济简报卡预览"></a><h3>研究 / 金融经济简报卡 · 灰阶定尺</h3><div class="en">Research Brief Card · Mono Fixed Frame</div><p class="use">600×1000 定尺，不滚动，适合单张分享。</p><div class="links"><a href="report-11.zh.html">中文版</a><a href="report-11.en.html">英文版</a></div></article>
  </div></section>
  <section class="group"><h2>经营、财务、年度与个人记录</h2><div class="when">业务数据报告、财报、dashboard、产品 / 项目复盘，以及运动、旅行和年度生活数据。</div><div class="cards">
    <article class="card"><a class="shot" href="report-04.zh.html"><span class="no">R04</span><img src="../../docs/assets/reports/report-04.png" alt="月度业务 / 财务经营报告预览"></a><h3>月度业务 / 财务经营报告 · 青瓷月报</h3><div class="en">Monthly Ops · Mono Broadsheet</div><p class="use">按日折线、底部大数和榜单。</p><div class="links"><a href="report-04.zh.html">中文版</a><a href="report-04.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-09.zh.html"><span class="no">R09</span><img src="../../docs/assets/reports/report-09.png" alt="业务数据 / 财务经营 Dashboard 预览"></a><h3>业务数据 / 财务经营 Dashboard · 青瓷峰会</h3><div class="en">Data Story Dashboard · Porcelain Summit</div><p class="use">多模块一屏总览，右栏配 KPI。</p><div class="links"><a href="report-09.zh.html">中文版</a><a href="report-09.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-12.zh.html"><span class="no">R12</span><img src="../../docs/assets/reports/report-12.png" alt="周期数据快报 / 监控摘要预览"></a><h3>周期数据快报 / 监控摘要 · 椰林三秒</h3><div class="en">Weekly Glance · Palm Three Second</div><p class="use">区间、排序和指标在一屏内快速扫读。</p><div class="links"><a href="report-12.zh.html">中文版</a><a href="report-12.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-02.zh.html"><span class="no">R02</span><img src="../../docs/assets/reports/report-02.png" alt="年度复盘 / 业绩回顾预览"></a><h3>年度复盘 / 业绩回顾 · 椰林年报</h3><div class="en">Annual Milestones · Palm Kraft</div><p class="use">里程碑、趋势谱系和年度大数。</p><div class="links"><a href="report-02.zh.html">中文版</a><a href="report-02.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-03.zh.html"><span class="no">R03</span><img src="../../docs/assets/reports/report-03.png" alt="年度数据报告 / 年度海报预览"></a><h3>年度数据报告 / 年度海报 · 编辑部书脊</h3><div class="en">Year in Data · Wire Spine Poster</div><p class="use">书脊大标题、同构小图和时刻分布。</p><div class="links"><a href="report-03.zh.html">中文版</a><a href="report-03.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-05.zh.html"><span class="no">R05</span><img src="../../docs/assets/reports/report-05.png" alt="项目 / 产品影响力故事预览"></a><h3>项目 / 产品影响力故事 · 反色高亮</h3><div class="en">Impact Story · Mono Highlight</div><p class="use">窄栏主线叙事，关键词用反色高亮。</p><div class="links"><a href="report-05.zh.html">中文版</a><a href="report-05.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-06.zh.html"><span class="no">R06</span><img src="../../docs/assets/reports/report-06.png" alt="长周期产品 / 业务年鉴预览"></a><h3>长周期产品 / 业务年鉴 · 椰林深水区</h3><div class="en">Eight-Year Product Almanac · Palm Deep Water</div><p class="use">长周期、多维度、复杂证据的整页复盘。</p><div class="links"><a href="report-06.zh.html">中文版</a><a href="report-06.en.html">英文版</a></div></article>
    <article class="card"><a class="shot" href="report-10.zh.html"><span class="no">R10</span><img src="../../docs/assets/reports/report-10.png" alt="个人数据 / 运动 / 旅行记录预览"></a><h3>个人数据 / 运动 / 旅行记录 · 椰林慢刊</h3><div class="en">Travel Notebook · Palm Slow Journal</div><p class="use">故事段落、小图和行程表交替向下。</p><div class="links"><a href="report-10.zh.html">中文版</a><a href="report-10.en.html">英文版</a></div></article>
  </div></section>
  <footer class="foot"><span>页内数字均为演示数据 · 生成报告时必须替换</span><span>LIEFLAT CHARTS</span></footer>
</main></body></html>