issue-ai/.superpowers/brainstorm/9392-1778134394/content/reports-list.html

<h2>报告管理页 — 新流程重构</h2>
<p class="subtitle">核心理念：预览数据先行（1-2s），确认后再生成 DOCX（10-30s）。</p>

<div class="section">
  <h3>流程对比</h3>
</div>

<div class="split">
  <div class="mockup">
    <div class="mockup-header">旧流程</div>
    <div class="mockup-body" style="padding:16px;font-size:13px;text-align:center;line-height:2.2">
      选择月份 → 点"生成报告" →<br/>
      <span style="color:#94a3b8">等待 10-30s（数据+图表+DOCX+OLE）</span> →<br/>
      报告完成 → 点"查看"预览 →<br/>
      发现数据有误 → 删除重来
    </div>
  </div>
  <div class="mockup">
    <div class="mockup-header">新流程</div>
    <div class="mockup-body" style="padding:16px;font-size:13px;text-align:center;line-height:2.2">
      选择月份 → 点"预览报告" →<br/>
      <span style="color:#059669">等待 1-2s（仅数据采集）</span> →<br/>
      自动跳转预览页 → 确认数据无误 →<br/>
      点"生成报告文档" → 下载 DOCX
    </div>
  </div>
</div>

<div class="section">
  <h3>报告列表页 — 新版布局</h3>
</div>

<div class="mockup">
  <div class="mockup-header">报告管理页面（列表）</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:16px">
      <div>
        <h2 style="font-size:20px;font-weight:700;color:#0f172a;margin:0">报告管理</h2>
        <span style="font-size:12px;color:#94a3b8">数据预览与文档生成</span>
      </div>
      <button class="mock-button" style="background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:10px;font-size:13px;font-weight:600">+ 新建报告</button>
    </div>

    <!-- Table -->
    <table style="width:100%;font-size:13px;border-collapse:collapse">
      <thead>
        <tr style="border-bottom:2px solid #e2e8f0;text-align:left">
          <th style="padding:10px 12px;color:#64748b;font-weight:500;width:40px">
            <input type="checkbox" style="width:16px;height:16px;border-radius:4px;border:1px solid #cbd5e1">
          </th>
          <th style="padding:10px 12px;color:#64748b;font-weight:500">报告名称</th>
          <th style="padding:10px 12px;color:#64748b;font-weight:500">类型</th>
          <th style="padding:10px 12px;color:#64748b;font-weight:500">时间段</th>
          <th style="padding:10px 12px;color:#64748b;font-weight:500">状态</th>
          <th style="padding:10px 12px;color:#64748b;font-weight:500">创建时间</th>
          <th style="padding:10px 12px;color:#64748b;font-weight:500">操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- Row 1: preview status -->
        <tr style="border-bottom:1px solid #f1f5f9">
          <td style="padding:10px 12px"><input type="checkbox" style="width:16px;height:16px;border-radius:4px;border:1px solid #cbd5e1"></td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="2026年4月图灵IT基础设施运营月报">2026年4月图灵IT基础设施运营月报</td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a">月报</td>
          <td style="padding:10px 12px;color:#64748b">2026-04-01 ~ 2026-04-30</td>
          <td style="padding:10px 12px">
            <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:500;background:#fef3c7;color:#92400e">
              <span style="width:6px;height:6px;border-radius:50%;background:#f59e0b"></span>
              数据已就绪
            </span>
          </td>
          <td style="padding:10px 12px;color:#94a3b8;font-size:12px">2026-05-07 14:30</td>
          <td style="padding:10px 12px">
            <div style="display:flex;gap:4px">
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;background:#eff6ff;color:#2563eb">预览</span>
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;background:#f0fdf4;color:#059669">生成文档</span>
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;color:#dc2626">🗑</span>
            </div>
          </td>
        </tr>
        <!-- Row 2: generating status -->
        <tr style="border-bottom:1px solid #f1f5f9">
          <td style="padding:10px 12px"><input type="checkbox" style="width:16px;height:16px;border-radius:4px;border:1px solid #cbd5e1"></td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="图灵IT基础设施运营周报（4月28日-5月4日）">图灵IT基础设施运营周报（4月28日-5月4日）</td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a">周报</td>
          <td style="padding:10px 12px;color:#64748b">2026-04-28 ~ 2026-05-04</td>
          <td style="padding:10px 12px">
            <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:500;background:#dbeafe;color:#1e40af">
              <span style="display:inline-block;width:10px;height:10px;border:2px solid #3b82f6;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite"></span>
              文档生成中
            </span>
          </td>
          <td style="padding:10px 12px;color:#94a3b8;font-size:12px">2026-05-07 14:35</td>
          <td style="padding:10px 12px">
            <div style="display:flex;gap:4px">
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;background:#eff6ff;color:#2563eb">预览</span>
            </div>
          </td>
        </tr>
        <!-- Row 3: completed status -->
        <tr style="border-bottom:1px solid #f1f5f9">
          <td style="padding:10px 12px"><input type="checkbox" style="width:16px;height:16px;border-radius:4px;border:1px solid #cbd5e1"></td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="2026年3月图灵IT基础设施运营月报">2026年3月图灵IT基础设施运营月报</td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a">月报</td>
          <td style="padding:10px 12px;color:#64748b">2026-03-01 ~ 2026-03-31</td>
          <td style="padding:10px 12px">
            <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:500;background:#dcfce7;color:#15803d">
              <span style="width:6px;height:6px;border-radius:50%;background:#22c55e"></span>
              已完成
            </span>
          </td>
          <td style="padding:10px 12px;color:#94a3b8;font-size:12px">2026-05-06 10:15</td>
          <td style="padding:10px 12px">
            <div style="display:flex;gap:4px">
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;background:#eff6ff;color:#2563eb">预览</span>
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;background:#f0fdf4;color:#059669">⬇ 下载</span>
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;color:#dc2626">🗑</span>
            </div>
          </td>
        </tr>
        <!-- Row 4: failed -->
        <tr style="border-bottom:1px solid #f1f5f9">
          <td style="padding:10px 12px"><input type="checkbox" style="width:16px;height:16px;border-radius:4px;border:1px solid #cbd5e1"></td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="图灵IT基础设施运营周报（4月21日-4月27日）">图灵IT基础设施运营周报（4月21日-4月27日）</td>
          <td style="padding:10px 12px;font-weight:500;color:#0f172a">周报</td>
          <td style="padding:10px 12px;color:#64748b">2026-04-21 ~ 2026-04-27</td>
          <td style="padding:10px 12px">
            <span style="display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:500;background:#fef2f2;color:#b91c1c">
              <span style="width:6px;height:6px;border-radius:50%;background:#ef4444"></span>
              生成失败
            </span>
          </td>
          <td style="padding:10px 12px;color:#94a3b8;font-size:12px">2026-05-06 11:00</td>
          <td style="padding:10px 12px">
            <div style="display:flex;gap:4px">
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;background:#eff6ff;color:#2563eb">预览</span>
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;background:#fef3c7;color:#92400e">重试</span>
              <span style="cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;color:#dc2626">🗑</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- Batch actions bar -->
    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 0;margin-top:12px;border-top:1px solid #e2e8f0">
      <span style="font-size:12px;color:#94a3b8">已选 2 项</span>
      <div style="display:flex;gap:8px">
        <span style="cursor:pointer;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:500;background:#eff6ff;color:#2563eb">📦 批量下载</span>
        <span style="cursor:pointer;padding:6px 14px;border-radius:8px;font-size:12px;font-weight:500;background:#fef2f2;color:#dc2626">🗑 批量删除</span>
      </div>
    </div>

  </div>
</div>

<div class="section">
  <h3>状态体系总览</h3>
</div>

<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px">
  <div style="background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:12px;text-align:center">
    <div style="font-weight:700;color:#92400e;font-size:14px;margin-bottom:4px">数据已就绪</div>
    <div style="font-size:11px;color:#a16207">数据采集完成<br/>文档未生成</div>
    <div style="display:flex;gap:4px;justify-content:center;margin-top:8px">
      <span style="padding:3px 8px;border-radius:4px;font-size:10px;background:#eff6ff;color:#2563eb">预览</span>
      <span style="padding:3px 8px;border-radius:4px;font-size:10px;background:#f0fdf4;color:#059669">生成文档</span>
    </div>
  </div>
  <div style="background:#dbeafe;border:1px solid #bfdbfe;border-radius:8px;padding:12px;text-align:center">
    <div style="font-weight:700;color:#1e40af;font-size:14px;margin-bottom:4px">文档生成中</div>
    <div style="font-size:11px;color:#3b82f6">DOCX 构建中<br/>图表+OLE嵌入</div>
    <div style="margin-top:8px">
      <span style="padding:3px 8px;border-radius:4px;font-size:10px;background:#eff6ff;color:#2563eb">预览</span>
    </div>
  </div>
  <div style="background:#dcfce7;border:1px solid #bbf7d0;border-radius:8px;padding:12px;text-align:center">
    <div style="font-weight:700;color:#15803d;font-size:14px;margin-bottom:4px">已完成</div>
    <div style="font-size:11px;color:#16a34a">文档就绪<br/>可下载</div>
    <div style="display:flex;gap:4px;justify-content:center;margin-top:8px">
      <span style="padding:3px 8px;border-radius:4px;font-size:10px;background:#eff6ff;color:#2563eb">预览</span>
      <span style="padding:3px 8px;border-radius:4px;font-size:10px;background:#f0fdf4;color:#059669">下载</span>
    </div>
  </div>
  <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px;text-align:center">
    <div style="font-weight:700;color:#b91c1c;font-size:14px;margin-bottom:4px">生成失败</div>
    <div style="font-size:11px;color:#dc2626">文档构建出错<br/>可查看预览数据</div>
    <div style="display:flex;gap:4px;justify-content:center;margin-top:8px">
      <span style="padding:3px 8px;border-radius:4px;font-size:10px;background:#eff6ff;color:#2563eb">预览</span>
      <span style="padding:3px 8px;border-radius:4px;font-size:10px;background:#fef3c7;color:#92400e">重试</span>
    </div>
  </div>
</div>

<div class="section" style="margin-top:20px">
  <h3>与预览页的衔接</h3>
</div>

<div class="mockup">
  <div class="mockup-header">用户操作流程</div>
  <div class="mockup-body" style="padding:20px;text-align:center">
    <div style="display:flex;align-items:center;justify-content:center;gap:16px;font-size:13px">
      <div style="background:#f1f5f9;padding:12px 20px;border-radius:8px;font-weight:600;color:#0f172a">
        列表页<br/>点"新建报告"
      </div>
      <span style="font-size:18px;color:#94a3b8">→</span>
      <div style="background:#f1f5f9;padding:12px 20px;border-radius:8px;font-weight:600;color:#0f172a">
        弹窗选择<br/>月份/日期
      </div>
      <span style="font-size:18px;color:#94a3b8">→</span>
      <div style="background:#fef3c7;padding:12px 20px;border-radius:8px;font-weight:600;color:#92400e">
        1-2s 数据采集<br/>自动跳转预览页
      </div>
      <span style="font-size:18px;color:#94a3b8">→</span>
      <div style="background:#eff6ff;padding:12px 20px;border-radius:8px;font-weight:600;color:#2563eb">
        预览页<br/>确认数据
      </div>
      <span style="font-size:18px;color:#94a3b8">→</span>
      <div style="background:#f0fdf4;padding:12px 20px;border-radius:8px;font-weight:600;color:#059669">
        点"生成文档"<br/>下载 DOCX
      </div>
    </div>
  </div>
</div>