issue-ai/.superpowers/brainstorm/9392-1778134394/content/full-layout.html

<h2>报告预览页 — 融合方案全景</h2>
<p class="subtitle">B（摘要+详情分区）+ C（报告章节结构）。周报/月报共用同一布局，章节内容自适应。</p>

<div class="mockup">
  <div class="mockup-header">完整页面布局 — 月报示例（2026年4月）</div>
  <div class="mockup-body">

    <!-- Header -->
    <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #e2e8f0;margin-bottom:20px">
      <div style="display:flex;align-items:center;gap:16px">
        <span style="color:#94a3b8;font-size:18px">←</span>
        <div>
          <h2 style="font-size:22px;font-weight:700;color:#0f172a;margin:0">月报</h2>
          <span style="font-size:13px;color:#64748b">2026-04-01 ~ 2026-04-30</span>
        </div>
        <span style="background:#dcfce7;color:#15803d;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600">已完成</span>
      </div>
      <button class="mock-button">⬇ 下载报告</button>
    </div>

    <!-- KPI Row -->
    <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px">
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px">工单总数</div>
        <div style="font-size:28px;font-weight:700;color:#0f172a">12</div>
      </div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px">已解决</div>
        <div style="font-size:28px;font-weight:700;color:#059669">10</div>
        <div style="font-size:11px;color:#94a3b8">83.3%</div>
      </div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px">可用性均值</div>
        <div style="font-size:28px;font-weight:700;color:#f59e0b">98.52%</div>
      </div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px">SLA 达标率</div>
        <div style="font-size:28px;font-weight:700;color:#059669">91.7%</div>
      </div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px">平均处理时长</div>
        <div style="font-size:28px;font-weight:700;color:#0f172a">240</div>
        <div style="font-size:11px;color:#94a3b8">分钟</div>
      </div>
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center">
        <div style="font-size:12px;color:#64748b;margin-bottom:4px">进行中</div>
        <div style="font-size:28px;font-weight:700;color:#0369a1">2</div>
      </div>
    </div>

    <!-- Chapter Sections -->
    <div style="display:flex;flex-direction:column;gap:12px">

      <!-- Ch1: 设备概况 -->
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;color:#fff;border-radius:6px;font-size:12px;font-weight:700">1</span>
            <span style="font-size:15px;font-weight:600;color:#1e293b">设备概况</span>
          </div>
          <span style="font-size:20px;color:#94a3b8">▾</span>
        </div>
        <div style="display:flex;gap:32px;padding:16px 20px">
          <div style="display:flex;align-items:center;gap:12px">
            <div style="width:44px;height:44px;border-radius:10px;background:#dbeafe;display:flex;align-items:center;justify-content:center;font-size:20px">🖥</div>
            <div><span style="font-size:24px;font-weight:700;color:#0f172a">8</span><span style="font-size:13px;color:#64748b;margin-left:4px">台 GPU 服务器</span></div>
          </div>
          <div style="display:flex;align-items:center;gap:12px">
            <div style="width:44px;height:44px;border-radius:10px;background:#fef3c7;display:flex;align-items:center;justify-content:center;font-size:20px">🗄</div>
            <div><span style="font-size:24px;font-weight:700;color:#0f172a">3</span><span style="font-size:13px;color:#64748b;margin-left:4px">台 存储服务器</span></div>
          </div>
        </div>
      </div>

      <!-- Ch2: 运营数据 -->
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#8b5cf6;color:#fff;border-radius:6px;font-size:12px;font-weight:700">2</span>
            <span style="font-size:15px;font-weight:600;color:#1e293b">运营数据</span>
          </div>
          <span style="font-size:20px;color:#94a3b8">▸</span>
        </div>
        <div style="display:flex;gap:24px;padding:16px 20px">
          <div style="font-size:13px;color:#64748b">故障工单 <span style="font-weight:700;color:#d97706;font-size:16px;margin-left:4px">8</span> 件</div>
          <div style="font-size:13px;color:#64748b">涉及设备 <span style="font-weight:700;color:#0f172a;font-size:16px;margin-left:4px">5</span> 台</div>
          <div style="font-size:13px;color:#64748b">无故障天数 <span style="font-weight:700;color:#059669;font-size:16px;margin-left:4px">24</span> 天</div>
        </div>
      </div>

      <!-- Ch3: 故障分类 -->
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#f59e0b;color:#fff;border-radius:6px;font-size:12px;font-weight:700">3</span>
            <span style="font-size:15px;font-weight:600;color:#1e293b">故障分类</span>
          </div>
          <span style="font-size:20px;color:#94a3b8">▾</span>
        </div>
        <div style="display:flex;gap:16px;padding:16px 20px">
          <div style="flex:1;padding:12px;border-radius:8px;background:#fff7ed;text-align:center">
            <div style="font-size:20px;font-weight:700;color:#f59e0b">5</div>
            <div style="font-size:12px;color:#64748b">GPU 故障</div>
            <div style="width:100%;height:4px;background:#fef3c7;border-radius:2px;margin-top:6px"><div style="width:62.5%;height:100%;background:#f59e0b;border-radius:2px"></div></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px">62.5%</div>
          </div>
          <div style="flex:1;padding:12px;border-radius:8px;background:#fff7ed;text-align:center">
            <div style="font-size:20px;font-weight:700;color:#f59e0b">1</div>
            <div style="font-size:12px;color:#64748b">存储故障</div>
            <div style="width:100%;height:4px;background:#fef3c7;border-radius:2px;margin-top:6px"><div style="width:12.5%;height:100%;background:#f59e0b;border-radius:2px"></div></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px">12.5%</div>
          </div>
          <div style="flex:1;padding:12px;border-radius:8px;background:#eff6ff;text-align:center">
            <div style="font-size:20px;font-weight:700;color:#3b82f6">2</div>
            <div style="font-size:12px;color:#64748b">其他工单</div>
            <div style="width:100%;height:4px;background:#dbeafe;border-radius:2px;margin-top:6px"><div style="width:25%;height:100%;background:#3b82f6;border-radius:2px"></div></div>
            <div style="font-size:11px;color:#94a3b8;margin-top:2px">25.0%</div>
          </div>
        </div>
      </div>

      <!-- Ch4: 服务可用性 -->
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0">
          <div style="display:flex;align-items:center;gap:10px">
            <span style="display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:#10b981;color:#fff;border-radius:6px;font-size:12px;font-weight:700">4</span>
            <span style="font-size:15px;font-weight:600;color:#1e293b">服务可用性</span>
          </div>
          <span style="font-size:20px;color:#94a3b8">▸</span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px">
          <div>
            <span style="font-size:28px;font-weight:700;color:#f59e0b">98.52%</span>
            <span style="font-size:13px;color:#64748b;margin-left:6px">整体可用性</span>
          </div>
          <div style="font-size:12px;color:#64748b">
            <span>最低可用 IP：</span>
            <span style="font-weight:600;color:#dc2626">10.0.0.35</span>
            <span style="color:#dc2626;font-weight:600;margin-left:4px">(95.12%)</span>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>

<!-- Key features -->
<div class="section">
  <h3>设计要点</h3>
</div>

<div class="pros-cons">
  <div class="pros">
    <h4>交互特性</h4>
    <ul>
      <li>章节卡片默认全部展开，可折叠</li>
      <li>折叠态显示摘要数据，不丢失关键信息</li>
      <li>有数据的章节正常展示，无数据的章节（如无GPU故障）保留卡片但数量为 0</li>
      <li>周报/月报章节内容自适应（周报无"按IP可用性"明细，改为按日统计）</li>
    </ul>
  </div>
  <div class="cons">
    <h4>待确认</h4>
    <ul>
      <li>KPI 行 5-6 个指标是否太多？是否需要精简到 4 个？</li>
      <li>章节是否默认全部展开，还是默认折叠只显示摘要？</li>
      <li>故障分类是否需要按 fault_subcategory 二级展开？</li>
    </ul>
  </div>
</div>