日报生成 HTML 输出规范

本文件定义新建日报 HTML 的必要模板元素，供 Claude Code / AI 助手生成新日报时参照。

必需结构

1. \x3Chtml> 根元素

必须包含 data-theme="dark" 属性（默认深色），以支持主题切换：

\x3Chtml lang="zh-CN" data-theme="dark">

2. CSS 变量（:root）与字体规范

字体： 统一使用系统字体栈，不指定中文特定字体：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

CSS 变量（必须声明）：

:root {
  --bg-primary:    \x3C深色背景值>;
  --bg-card:       \x3C卡片深色背景值>;
  --bg-card-hover: \x3C卡片悬浮深色背景值>;
  --border:        \x3C边框深色值>;
  --text-primary:  \x3C主文字深色值>;
  --text-secondary:\x3C次文字深色值>;
  /* accent 色根据当日配色主题设置 */
}

各元素字号参考（基于 16px body）：

3. 亮色主题 CSS 覆盖（必须包含，放在 \x3C/style> 前）

/* ── 主题切换按钮 ── */
.theme-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.theme-btn:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}
/* ── 亮色主题变量覆盖 ── */
[data-theme="light"] {
  --bg-primary:    #f5f3ee;
  --bg-card:       #ffffff;
  --bg-card-hover: #edeae0;
  --border:        #d4cfc0;
  --text-primary:  #1e1b14;
  --text-secondary:#6b6555;
}
[data-theme="light"] blockquote {
  background: rgba(0,0,0,0.04);
  color: #3a3525;
}
[data-theme="light"] .analysis-box {
  background: rgba(0,0,0,0.04);
  color: #3a3525;
}
[data-theme="light"] .newspaper-header {
  background: linear-gradient(135deg, #f0ede2, #f7f5ee);
}
[data-theme="light"] .block-teacher {
  background: linear-gradient(135deg, #f0ede2, #edeae0);
}

4. 主题切换按钮 HTML（放在 \x3Cdiv class="header-top"> 末尾，\x3C/div> 前）

\x3Cdiv class="header-top">
  \x3Cspan class="issue-info">...\x3C/span>
  \x3Ch1 class="newspaper-title">...\x3C/h1>
  \x3Cspan class="stats-badge">...\x3C/span>
  \x3Cbutton class="theme-btn" id="themeToggle" onclick="toggleTheme()">☀️ 明亮\x3C/button>
\x3C/div>

按钮文字：☀️ 明亮 = 当前深色（点击切换亮色）；🌙 暗黑 = 当前亮色（点击切换深色）

5. FOUC 防闪烁脚本（放在 \x3Chead> 内，\x3Cstyle> 之前）

\x3Cscript>
  /* 防闪烁：阻塞执行，在样式渲染前设定主题 */
  (function () {
    const t = localStorage.getItem('pusa-theme') || 'dark';
    document.documentElement.setAttribute('data-theme', t);
  })();
\x3C/script>

6. 主题切换 JavaScript（放在 \x3C/body> 前，独立 \x3Cscript> 块）

\x3Cscript>
  /* ── 主题切换 ── */
  (function () {
    /* data-theme 已在 \x3Chead> 设置，这里只更新按钮图标 */
    const saved = localStorage.getItem('pusa-theme') || 'dark';
    document.addEventListener('DOMContentLoaded', function () {
      const btn = document.getElementById('themeToggle');
      if (btn) btn.textContent = saved === 'dark' ? '☀️ 明亮' : '🌙 暗黑';
    });
  })();
  function toggleTheme() {
    const html = document.documentElement;
    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
    html.setAttribute('data-theme', next);
    localStorage.setItem('pusa-theme', next);
    const btn = document.getElementById('themeToggle');
    if (btn) btn.textContent = next === 'dark' ? '☀️ 明亮' : '🌙 暗黑';
  }
  /* 接收父页面（index.html）的主题同步消息 */
  window.addEventListener('message', function (e) {
    if (e.data && e.data.type === 'pusa-theme') {
      const theme = e.data.theme;
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem('pusa-theme', theme);
      const btn = document.getElementById('themeToggle');
      if (btn) btn.textContent = theme === 'dark' ? '☀️ 明亮' : '🌙 暗黑';
    }
  });
\x3C/script>

localStorage key：pusa-theme（所有页面统一，浏览器记忆主题偏好）

布局规范：瀑布流（Masonry Layout）

7. 瀑布流布局 CSS

日报采用 三栏瀑布流布局，内容自动分配到最短的列，确保视觉平衡：

.newspaper-grid {
  column-count: 3;
  column-gap: 32px;
  max-width: 1600px;
  margin: 24px auto;
  padding: 0 40px;
}

@media (max-width: 1200px) {
  .newspaper-grid {
    column-count: 1;
    padding: 0 20px;
  }
}

section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  break-inside: avoid;  /* 关键：防止section被截断 */
}

核心原理：

• column-count: 3 — 三栏布局
• break-inside: avoid — 防止内容块在列中间断开
• 浏览器自动将后续 \x3Csection> 填充到最短的列

8. HTML 结构要求

✅ 正确的扁平结构：

\x3Cmain class="newspaper-grid">
  \x3Csection class="block-announcement">...\x3C/section>
  \x3Csection class="block-honor">...\x3C/section>
  \x3Csection class="block-teacher">...\x3C/section>
  \x3Csection class="block-hot">...\x3C/section>  \x3C!-- 话题1 -->
  \x3Csection class="block-hot">...\x3C/section>  \x3C!-- 话题2 -->
  \x3Csection class="block-hot">...\x3C/section>  \x3C!-- 话题3 -->
  \x3Csection class="block-ai">...\x3C/section>
  \x3Csection class="block-community">...\x3C/section>
\x3C/main>

❌ 错误的嵌套结构：

\x3C!-- 不要这样写！ -->
\x3Cmain class="newspaper-grid">
  \x3Caside class="col-left">
    \x3Csection>...\x3C/section>
    \x3Csection>...\x3C/section>
  \x3C/aside>
  \x3Carticle class="col-center">
    \x3Csection>...\x3C/section>
  \x3C/article>
  \x3Caside class="col-right">
    \x3Csection>...\x3C/section>
  \x3C/aside>
\x3C/main>

原则： \x3Cmain class="newspaper-grid"> 下只能有平级的 \x3Csection> 元素，不允许额外的包裹层。

9. 内容拆分规则（视觉平衡策略）

核心目标： 确保瀑布流三列高度接近，避免某列过长或过短。

拆分判断标准

拆分示例：热议话题

原结构（不拆分，当话题 ≤ 3 个时）：

\x3Csection class="block-hot">
  \x3Ch2 class="block-title">\x3Cspan class="icon">🔥\x3C/span>热议话题\x3C/h2>
  \x3Cdiv class="hot-topic">...\x3C/div>  \x3C!-- 话题1 -->
  \x3Cdiv class="hot-topic">...\x3C/div>  \x3C!-- 话题2 -->
  \x3Cdiv class="hot-topic">...\x3C/div>  \x3C!-- 话题3 -->
\x3C/section>

拆分后（当话题 > 3 个时）：

\x3C!-- 话题1 -->
\x3Csection class="block-hot">
  \x3Ch2 class="block-title">
    \x3Cspan class="icon">🔥\x3C/span>
    \x3Cspan class="author-tag">作者\x3C/span>话题标题
    \x3Cspan class="heat-stats">👥 15人参与\x3C/span>
  \x3C/h2>
  \x3C!-- 话题内容 -->
\x3C/section>

\x3C!-- 话题2 -->
\x3Csection class="block-hot">
  \x3Ch2 class="block-title">
    \x3Cspan class="icon">🔥\x3C/span>
    \x3Cspan class="author-tag">作者\x3C/span>话题标题
    \x3Cspan class="heat-stats">💬 8人参与\x3C/span>
  \x3C/h2>
  \x3C!-- 话题内容 -->
\x3C/section>

\x3C!-- 话题3、4、5... 以此类推 -->

删除多余样式： 拆分后不再需要 .hot-topic / .hot-topic-title 样式，直接用 section + h2.block-title。

经验法则

• 每个 section 的理想高度： 400-800px（约30-60行内容）
• 拆分时机： 生成HTML后，如发现某个section明显过长（>1000px 或 >80行），应考虑拆分
• 优先拆分： 热议话题（最容易过长）> AI资讯 > 社群动态

注意事项

• accent 颜色（蓝/绿/橙/紫/金）在亮色背景下保持不变，无需覆盖。
• 若日报中有硬编码深色背景的 class（如 .block-teacher），需在亮色覆盖块中单独处理。
• index.html 的主题按钮放在 .nav-btns 内，toggleTheme() 额外用 postMessage 同步 iframe：

  const iframe = document.querySelector('#iframeContainer iframe');
  if (iframe && iframe.contentWindow) {
    try { iframe.contentWindow.postMessage({ type: 'pusa-theme', theme: next }, '*'); } catch(e) {}
  }
  

  iframe.onload 中也同步：

  iframe.onload = () => {
    const theme = document.documentElement.getAttribute('data-theme');
    try { iframe.contentWindow.postMessage({ type: 'pusa-theme', theme }, '*'); } catch(e) {}
  };