97 lines
4.8 KiB
HTML
97 lines
4.8 KiB
HTML
<h2>Semantic Facts 状态页设计稿</h2>
|
||
<p class="subtitle">先确认页面信息架构和操作区布局。后端统一按“提交后自动入队 + 失活旧 facts + 手动重抽入口”设计。</p>
|
||
|
||
<div class="cards">
|
||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div class="mockup">
|
||
<div class="mockup-header">A. 总览台 + 队列栏 + 对象表 + 详情抽屉</div>
|
||
<div class="mockup-body">
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;">
|
||
<div class="placeholder" style="height:68px;">对象总数</div>
|
||
<div class="placeholder" style="height:68px;">active facts</div>
|
||
<div class="placeholder" style="height:68px;">失败队列</div>
|
||
<div class="placeholder" style="height:68px;">积压时长</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1.2fr 0.8fr;gap:10px;margin-bottom:10px;">
|
||
<div class="placeholder" style="height:92px;">按对象类型统计：项目 / 任务 / 信号 / 文档 / 人员 / 宪章 / 发布 / 复盘</div>
|
||
<div class="placeholder" style="height:92px;">抽取队列状态：pending / running / retry / dead_letter</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 0.55fr;gap:10px;">
|
||
<div class="placeholder" style="height:170px;">可搜索对象表：对象类型 / 标题 / facts 条数 / 最后抽取 / 队列状态 / 操作</div>
|
||
<div class="placeholder" style="height:170px;">右侧详情抽屉：facts 列表 / 证据 / 最近 run / 重抽按钮</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>方案 A</h3>
|
||
<p>一页看全：先看风险和积压，再搜对象，再在右侧展开 facts 详情。我推荐这个，最适合排查“哪个对象没抽上、为什么失败、要不要重跑”。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div class="mockup">
|
||
<div class="mockup-header">B. 双栏工作台</div>
|
||
<div class="mockup-body">
|
||
<div style="display:grid;grid-template-columns:0.9fr 1.1fr;gap:10px;">
|
||
<div>
|
||
<div class="placeholder" style="height:78px;margin-bottom:10px;">队列状态总览</div>
|
||
<div class="placeholder" style="height:194px;">对象列表 + 类型筛选 + 搜索</div>
|
||
</div>
|
||
<div>
|
||
<div class="placeholder" style="height:88px;margin-bottom:10px;">当前对象摘要：facts 数 / 最后抽取 / 最近失败</div>
|
||
<div class="placeholder" style="height:184px;">facts 明细、run 时间线、手动重抽</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>方案 B</h3>
|
||
<p>偏“工作台”操作感，适合长时间盯一个对象排障；但全局统计和横向比较会弱一点。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||
<div class="card-image">
|
||
<div class="mockup">
|
||
<div class="mockup-header">C. Tab 分对象类型</div>
|
||
<div class="mockup-body">
|
||
<div class="mock-nav" style="margin-bottom:10px;">概览 | 项目 | 任务 | 信号 | 文档 | 人员 | 宪章 | 发布 | 复盘</div>
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px;">
|
||
<div class="placeholder" style="height:76px;">当前 tab facts 数</div>
|
||
<div class="placeholder" style="height:76px;">失败数</div>
|
||
<div class="placeholder" style="height:76px;">最后抽取</div>
|
||
</div>
|
||
<div class="placeholder" style="height:190px;">当前对象类型的列表和详情</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>方案 C</h3>
|
||
<p>对象边界最清楚，但你要横向看整体积压和失败会来回切 tab，运营效率最低。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pros-cons" style="margin-top:18px;">
|
||
<div class="pros">
|
||
<h4>我推荐 A 的原因</h4>
|
||
<ul>
|
||
<li>既能看全局积压，也能快速钻到单对象 facts。</li>
|
||
<li>和现有治理子页风格更一致，适合放到智能配置中心。</li>
|
||
<li>后面要加 bulk backfill、失败重放、对象覆盖率都比较自然。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="cons">
|
||
<h4>设计约束</h4>
|
||
<ul>
|
||
<li>这轮“需求”按宪章（charter）展示，不含运行中 draft。</li>
|
||
<li>队列状态会直接暴露 pending / retry / dead_letter，不做粉饰。</li>
|
||
<li>对象详情默认展示 active facts，历史失活 facts 放二级查看。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|