kangshifu-board/docs/workshop-report-layout-20261111/preview.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>报告阅读样式预览 · 康师傅工作坊</title>
  <base href="/">
  <script type="importmap">
  {"imports":{
    "lit":"/lib/vendor/lit/v3.3.3/index.js",
    "lit/":"/lib/vendor/lit/v3.3.3/",
    "lit-html":"/lib/vendor/lit-html/v3.3.3/lit-html.js",
    "lit-html/":"/lib/vendor/lit-html/v3.3.3/",
    "lit-element":"/lib/vendor/lit-element/v4.2.2/index.js",
    "lit-element/":"/lib/vendor/lit-element/v4.2.2/",
    "@lit/reactive-element":"/lib/vendor/@lit/reactive-element/v2.1.2/reactive-element.js",
    "@lit/reactive-element/":"/lib/vendor/@lit/reactive-element/v2.1.2/"
  }}
  </script>
</head>
<body>
  <header class="preview-note">报告样式预览 · 使用既有案例内容 <a href="/">返回成果看板 ↗</a></header>
  <main><view-report></view-report><p id="load-state" role="status">正在加载报告预览…</p></main>
  <kf-drawer layout="center"></kf-drawer>
  <script type="module">
    import { html } from 'lit';
    import { adoptDocument } from '/src/components/base.js';
    import '/src/components/index.js';
    import '/src/components/kf-source-detail.js';
    import '/src/pages/view-report.js';
    import { buildModel, reportEvidence } from '/src/core/index.js';

    adoptDocument();
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(`
      body { background:#f5f6fa; }
      .preview-note { padding:14px 28px; border-bottom:1px solid var(--kf-line); background:white; color:var(--kf-ink-3); font-size:13px; line-height:1.8; display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; }
      .preview-note a { color:var(--kf-accent-ink); }
      main { max-width:1300px; margin:0 auto; padding:28px; }
      @media(max-width:767px) { main { padding:18px 12px; } .preview-note { padding:12px 16px; } }
    `);
    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
    const view = document.querySelector('view-report'), drawer = document.querySelector('kf-drawer');
    const previewPath = location.pathname;
    try {
      const response = await fetch('/docs/workshop-argument-quality-20261111/example-fixture.json');
      if (!response.ok) throw new Error('报告示例读取失败');
      const db = buildModel(await response.json()), id = 'argument-preview';
      view.db = db;
      view.artifactId = id;
      view.routeQuery = Object.fromEntries(new URLSearchParams(location.search));
      document.querySelector('#load-state').remove();
      window.addEventListener('popstate', () => {
        if (location.pathname === '/report/' + id || location.pathname === previewPath) {
          const query = location.search;
          history.replaceState(history.state, '', previewPath + query);
          view.routeQuery = Object.fromEntries(new URLSearchParams(query));
        } else location.assign(location.href);
      });
      view.addEventListener('source-open', event => {
        const source = db.sourceById[event.detail.id];
        drawer.heading = source?.title || '来源记录';
        drawer.label = '原始资料';
        drawer.content = html`<kf-source-detail .source=${source}></kf-source-detail>`;
        drawer.open = true;
      });
      view.addEventListener('evidence-open', event => {
        const evidence = reportEvidence(db, event.detail.reportId, event.detail.evId);
        if (!evidence) return;
        drawer.heading = evidence.claim;
        drawer.label = '证据详情';
        drawer.content = html`<div style="display:grid;gap:18px">${evidence.quotes.map(quote => html`
          <section style="padding:18px;border:1px solid var(--kf-line);border-radius:12px;overflow-wrap:anywhere">
            <p style="margin:0 0 14px;line-height:1.95;white-space:pre-wrap">${quote.text}</p>
            <p style="margin:0;padding-top:12px;border-top:1px solid var(--kf-line);font-size:12px;line-height:1.9;color:var(--kf-ink-3)">${quote.ref}</p>
          </section>`)}</div>`;
        drawer.open = true;
      });
      drawer.addEventListener('drawer-close', () => { drawer.open = false; });
    } catch (error) {
      document.querySelector('#load-state').textContent = error.message;
    }
  </script>
</body>
</html>