smart-project/.superpowers/brainstorm/3293659-1777006577/content/core-pages-v1.html

<h2>Section 3 - 核心业务页结构</h2>
<p class="subtitle">沿用你选的更亮、更轻的企业产品气质，但骨架仍然是任务驱动，不做传统 dashboard。</p>

<div class="cards">
  <div class="card" data-choice="hazards-list" onclick="toggleSelect(this)">
    <div class="card-image" style="background:#f8fafc;padding:16px;">
      <div style="background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:14px;box-shadow:0 10px 24px rgba(37,99,235,.06);">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
          <div>
            <div style="font-size:12px;color:#64748b;">隐患任务</div>
            <div style="font-size:20px;font-weight:700;color:#0f172a;margin-top:4px;">待我处理 3</div>
          </div>
          <div style="background:#2563eb;color:#fff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;">+ 上报</div>
        </div>
        <div style="display:flex;gap:8px;margin-bottom:12px;overflow:hidden;">
          <span style="background:#dbeafe;color:#1d4ed8;padding:6px 10px;border-radius:999px;font-size:12px;">全部</span>
          <span style="background:#f1f5f9;color:#475569;padding:6px 10px;border-radius:999px;font-size:12px;">待分派</span>
          <span style="background:#f1f5f9;color:#475569;padding:6px 10px;border-radius:999px;font-size:12px;">整改中</span>
        </div>
        <div style="display:grid;gap:10px;">
          <div style="border:1px solid #e2e8f0;border-radius:16px;padding:12px;">
            <div style="display:flex;justify-content:space-between;gap:8px;">
              <div style="font-weight:700;color:#0f172a;">配电箱未加锁</div>
              <span style="background:#fff7ed;color:#c2410c;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;">待处理</span>
            </div>
            <div style="font-size:13px;color:#64748b;margin-top:6px;">东侧加工区 · 10分钟前</div>
          </div>
          <div style="border:1px solid #e2e8f0;border-radius:16px;padding:12px;">
            <div style="display:flex;justify-content:space-between;gap:8px;">
              <div style="font-weight:700;color:#0f172a;">临边防护缺失</div>
              <span style="background:#eff6ff;color:#1d4ed8;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;">整改中</span>
            </div>
            <div style="font-size:13px;color:#64748b;margin-top:6px;">2号楼南侧 · 今天 09:20</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>隐患列表</h3>
      <p>从“模块页”改成“任务页”：默认先给我看待处理事项，再允许切换全部/状态筛选。</p>
    </div>
  </div>

  <div class="card" data-choice="report-page" onclick="toggleSelect(this)">
    <div class="card-image" style="background:#f8fafc;padding:16px;">
      <div style="background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:14px;box-shadow:0 10px 24px rgba(37,99,235,.06);">
        <div style="font-size:12px;color:#64748b;">快速上报</div>
        <div style="font-size:20px;font-weight:700;color:#0f172a;margin-top:4px;margin-bottom:12px;">隐患上报</div>
        <div style="display:grid;gap:10px;">
          <div style="border:1px solid #dbe4ee;border-radius:16px;padding:12px;">
            <div style="font-size:12px;color:#64748b;">拍照 / 上传</div>
            <div style="height:84px;border:1px dashed #93c5fd;border-radius:12px;background:#eff6ff;margin-top:8px;"></div>
          </div>
          <div style="border:1px solid #dbe4ee;border-radius:16px;padding:12px;">
            <div style="font-size:12px;color:#64748b;">位置</div>
            <div style="font-weight:600;margin-top:6px;">点击选择区域</div>
          </div>
          <div style="display:flex;gap:10px;">
            <div style="flex:1;border:1px solid #dbe4ee;border-radius:16px;padding:12px;">
              <div style="font-size:12px;color:#64748b;">严重等级</div>
              <div style="font-weight:600;margin-top:6px;">一般 / 较重 / 紧急</div>
            </div>
            <div style="flex:1;border:1px solid #dbe4ee;border-radius:16px;padding:12px;">
              <div style="font-size:12px;color:#64748b;">分类</div>
              <div style="font-weight:600;margin-top:6px;">临电 / 防护 / 消防</div>
            </div>
          </div>
          <div style="border:1px solid #dbe4ee;border-radius:16px;padding:12px;">
            <div style="font-size:12px;color:#64748b;">补充描述</div>
            <div style="color:#94a3b8;margin-top:6px;">一句话说明发生了什么</div>
          </div>
        </div>
        <div style="background:#2563eb;color:#fff;border-radius:16px;padding:13px 14px;text-align:center;font-weight:700;margin-top:12px;">提交上报</div>
      </div>
    </div>
    <div class="card-body">
      <h3>上报页</h3>
      <p>把现在偏表单式的原型，改成更强引导的移动端提交面板，先拍照，再补关键信息。</p>
    </div>
  </div>

  <div class="card" data-choice="logs-page" onclick="toggleSelect(this)">
    <div class="card-image" style="background:#f8fafc;padding:16px;">
      <div style="background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:14px;box-shadow:0 10px 24px rgba(37,99,235,.06);">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
          <div>
            <div style="font-size:12px;color:#64748b;">施工日志</div>
            <div style="font-size:20px;font-weight:700;color:#0f172a;margin-top:4px;">今日日志</div>
          </div>
          <div style="background:#e0f2fe;color:#0369a1;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;">未完成</div>
        </div>
        <div style="border:1px solid #dbe4ee;border-radius:16px;padding:12px;margin-bottom:10px;">
          <div style="font-size:12px;color:#64748b;">今日天气 / 班组 / 人数</div>
          <div style="font-weight:600;margin-top:6px;">晴 · 土建二组 · 26人</div>
        </div>
        <div style="border:1px solid #dbe4ee;border-radius:16px;padding:12px;margin-bottom:10px;">
          <div style="font-size:12px;color:#64748b;">今日施工内容</div>
          <div style="color:#94a3b8;margin-top:6px;">用更短的结构化方式填写，而不是整屏长表单</div>
        </div>
        <div style="display:flex;gap:10px;">
          <div style="flex:1;background:#2563eb;color:#fff;border-radius:14px;padding:12px;text-align:center;font-weight:700;">继续填写</div>
          <div style="flex:1;background:#fff;border:1px solid #bfdbfe;color:#1d4ed8;border-radius:14px;padding:12px;text-align:center;font-weight:700;">查看历史</div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <h3>日志页</h3>
      <p>不是把日志当普通表单，而是当成“今日必须完成的例行动作”，突出补填和连续性。</p>
    </div>
  </div>
</div>

<div class="section">
  <div class="label">这一节的核心判断</div>
  <p>如果你认同这一节，后面的 written spec 就会把产品重心定成：<strong>首页给任务、列表给队列、详情给动作、上报给引导、日志给今日完成感</strong>。</p>
</div>

<div class="options">
  <div class="option" data-choice="approve-structure" onclick="toggleSelect(this)">
    <div class="letter">A</div>
    <div class="content">
      <h3>结构对了</h3>
      <p>按这个方向写最终设计说明。</p>
    </div>
  </div>
  <div class="option" data-choice="denser-list" onclick="toggleSelect(this)">
    <div class="letter">B</div>
    <div class="content">
      <h3>列表还要更密一点</h3>
      <p>可以更像任务清单，单屏容纳更多条目。</p>
    </div>
  </div>
  <div class="option" data-choice="simpler-report" onclick="toggleSelect(this)">
    <div class="letter">C</div>
    <div class="content">
      <h3>上报页还要更简单</h3>
      <p>希望再减少字段暴露，先做最短路径提交。</p>
    </div>
  </div>
</div>