minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/comfort-vision-preview-1/outputs/index.html

@@ -0,0 +1,641 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>衡枢运营工作台</title>
+  <style>
+    :root {
+      --ink: #102022;
+      --paper: #eef1eb;
+      --surface: #fbfaf3;
+      --surface-deep: #dfe7df;
+      --muted: #627171;
+      --line: rgba(16, 32, 34, 0.16);
+      --accent: #c85f3d;
+      --signal: #1f9eaa;
+      --amber: #c89c35;
+      --danger: #9f3d36;
+      --shadow: 0 24px 54px rgba(16, 32, 34, 0.12);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--ink);
+      font-family: "Aptos", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
+      background:
+        linear-gradient(rgba(16, 32, 34, 0.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(16, 32, 34, 0.04) 1px, transparent 1px),
+        radial-gradient(circle at 18% 12%, rgba(200, 95, 61, 0.13), transparent 30%),
+        radial-gradient(circle at 86% 4%, rgba(31, 158, 170, 0.10), transparent 28%),
+        var(--paper);
+      background-size: 32px 32px, 32px 32px, auto, auto, auto;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .page {
+      width: min(1180px, calc(100% - 40px));
+      margin: 0 auto;
+      padding: 28px 0 40px;
+    }
+
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 18px;
+      min-height: 56px;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-weight: 850;
+    }
+
+    .mark {
+      width: 34px;
+      height: 34px;
+      border: 1px solid var(--line);
+      background:
+        linear-gradient(135deg, rgba(200, 95, 61, 0.95), rgba(200, 156, 53, 0.78)),
+        var(--surface);
+      display: grid;
+      place-items: center;
+      box-shadow: inset 0 0 0 5px rgba(251, 250, 243, 0.72);
+    }
+
+    .mark::after {
+      content: "";
+      width: 10px;
+      height: 10px;
+      border: 2px solid var(--ink);
+      border-radius: 50%;
+    }
+
+    .nav {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      color: var(--muted);
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .nav .active {
+      color: var(--ink);
+    }
+
+    .button {
+      min-height: 44px;
+      padding: 0 18px;
+      border: 1px solid var(--ink);
+      background: var(--ink);
+      color: var(--surface);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 800;
+    }
+
+    main {
+      margin-top: 34px;
+    }
+
+    .hero {
+      position: relative;
+      overflow: hidden;
+      border: 1px solid var(--line);
+      background:
+        linear-gradient(105deg, rgba(251, 250, 243, 0.98), rgba(251, 250, 243, 0.90)),
+        var(--surface);
+      box-shadow: var(--shadow);
+    }
+
+    .hero::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background:
+        linear-gradient(90deg, rgba(16, 32, 34, 0.08), transparent 1px),
+        linear-gradient(rgba(16, 32, 34, 0.06), transparent 1px);
+      background-size: 86px 100%, 100% 72px;
+      opacity: 0.42;
+    }
+
+    .hero-grid {
+      position: relative;
+      display: grid;
+      grid-template-columns: 1.1fr 0.9fr;
+      gap: 32px;
+      padding: clamp(28px, 5vw, 56px);
+    }
+
+    .eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 18px;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 850;
+      letter-spacing: 0.08em;
+    }
+
+    .eyebrow::before {
+      content: "";
+      width: 32px;
+      height: 2px;
+      background: var(--accent);
+    }
+
+    h1 {
+      max-width: 760px;
+      margin: 0;
+      font-size: clamp(42px, 5.2vw, 68px);
+      line-height: 0.96;
+      letter-spacing: 0;
+    }
+
+    .no-break {
+      white-space: nowrap;
+    }
+
+    .lead {
+      max-width: 660px;
+      margin: 22px 0 0;
+      color: var(--muted);
+      font-size: 17px;
+      line-height: 1.72;
+      font-weight: 650;
+    }
+
+    .hero-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 28px;
+    }
+
+    .button.secondary {
+      background: transparent;
+      color: var(--ink);
+    }
+
+    .ledger {
+      display: grid;
+      gap: 12px;
+      align-self: stretch;
+    }
+
+    .status-card {
+      border: 1px solid var(--line);
+      background: rgba(251, 250, 243, 0.82);
+      padding: 18px;
+      min-height: 118px;
+    }
+
+    .status-card.dark {
+      background: var(--ink);
+      color: var(--surface);
+    }
+
+    .status-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 850;
+    }
+
+    .dark .status-top {
+      color: rgba(251, 250, 243, 0.68);
+    }
+
+    .metric {
+      margin-top: 16px;
+      font-size: 42px;
+      line-height: 1;
+      font-weight: 900;
+    }
+
+    .metric small {
+      color: var(--muted);
+      font-size: 15px;
+      font-weight: 800;
+    }
+
+    .dark .metric small {
+      color: rgba(251, 250, 243, 0.62);
+    }
+
+    .rail {
+      height: 9px;
+      margin-top: 16px;
+      background: rgba(16, 32, 34, 0.12);
+      overflow: hidden;
+    }
+
+    .rail span {
+      display: block;
+      width: var(--value);
+      height: 100%;
+      background: var(--bar, var(--accent));
+    }
+
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      border: 1px solid var(--line);
+      border-top: none;
+      background: rgba(251, 250, 243, 0.74);
+    }
+
+    .summary-item {
+      min-height: 128px;
+      padding: 22px;
+      border-right: 1px solid var(--line);
+    }
+
+    .summary-item:last-child {
+      border-right: 0;
+    }
+
+    .summary-item strong {
+      display: block;
+      margin-bottom: 18px;
+      font-size: 13px;
+      color: var(--muted);
+    }
+
+    .summary-item .num {
+      font-size: 32px;
+      font-weight: 900;
+      line-height: 1;
+    }
+
+    .summary-item p {
+      margin: 10px 0 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.55;
+      font-weight: 650;
+    }
+
+    .section-grid {
+      display: grid;
+      grid-template-columns: 1fr 0.82fr;
+      gap: 22px;
+      margin-top: 22px;
+    }
+
+    .panel {
+      border: 1px solid var(--line);
+      background: rgba(251, 250, 243, 0.82);
+      padding: 24px;
+    }
+
+    .panel-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: 16px;
+      margin-bottom: 22px;
+    }
+
+    h2 {
+      margin: 0;
+      font-size: clamp(24px, 3vw, 34px);
+      line-height: 1.08;
+      letter-spacing: 0;
+    }
+
+    .stamp {
+      border: 1px solid var(--line);
+      padding: 7px 10px;
+      color: var(--accent);
+      font-size: 12px;
+      font-weight: 850;
+      white-space: nowrap;
+    }
+
+    .timeline {
+      display: grid;
+      gap: 12px;
+    }
+
+    .task {
+      display: grid;
+      grid-template-columns: 96px 1fr auto;
+      gap: 16px;
+      align-items: center;
+      padding: 15px 0;
+      border-top: 1px solid var(--line);
+    }
+
+    .time {
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 800;
+    }
+
+    .task h3 {
+      margin: 0;
+      font-size: 16px;
+      line-height: 1.35;
+    }
+
+    .task p {
+      margin: 5px 0 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.5;
+      font-weight: 650;
+    }
+
+    .tag {
+      min-width: 74px;
+      padding: 7px 9px;
+      text-align: center;
+      color: var(--ink);
+      border: 1px solid var(--line);
+      background: var(--surface-deep);
+      font-size: 12px;
+      font-weight: 850;
+    }
+
+    .tag.signal {
+      color: #0b5f66;
+      background: rgba(31, 158, 170, 0.12);
+    }
+
+    .tag.amber {
+      color: #71510f;
+      background: rgba(200, 156, 53, 0.16);
+    }
+
+    .tag.danger {
+      color: #733029;
+      background: rgba(159, 61, 54, 0.12);
+    }
+
+    .notes {
+      display: grid;
+      gap: 12px;
+    }
+
+    .note {
+      position: relative;
+      padding: 16px 16px 16px 18px;
+      border: 1px solid var(--line);
+      background: rgba(238, 241, 235, 0.62);
+    }
+
+    .note::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background: var(--accent);
+    }
+
+    .note:nth-child(2)::before {
+      background: var(--signal);
+    }
+
+    .note:nth-child(3)::before {
+      background: var(--amber);
+    }
+
+    .note h3 {
+      margin: 0;
+      font-size: 16px;
+    }
+
+    .note p {
+      margin: 8px 0 0;
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.55;
+      font-weight: 650;
+    }
+
+    @media (max-width: 860px) {
+      .page {
+        width: min(100% - 24px, 680px);
+        padding-top: 18px;
+      }
+
+      .topbar {
+        align-items: flex-start;
+      }
+
+      .nav {
+        display: none;
+      }
+
+      .hero-grid,
+      .section-grid {
+        grid-template-columns: 1fr;
+      }
+
+      h1 {
+        font-size: clamp(40px, 12vw, 58px);
+        line-height: 1.02;
+      }
+
+      .lead {
+        font-size: 16px;
+      }
+
+      .summary {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .summary-item:nth-child(2) {
+        border-right: 0;
+      }
+
+      .summary-item:nth-child(-n + 2) {
+        border-bottom: 1px solid var(--line);
+      }
+
+      .task {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+
+      .tag {
+        justify-self: start;
+      }
+    }
+
+    @media (max-width: 520px) {
+      .summary {
+        grid-template-columns: 1fr;
+      }
+
+      .summary-item,
+      .summary-item:nth-child(2) {
+        border-right: 0;
+        border-bottom: 1px solid var(--line);
+      }
+
+      .summary-item:last-child {
+        border-bottom: 0;
+      }
+
+      .hero-grid,
+      .panel {
+        padding: 22px;
+      }
+
+      h1 {
+        font-size: 40px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="page" data-screen-label="01 运营工作台">
+    <header class="topbar">
+      <a class="brand" href="#" aria-label="衡枢运营工作台">
+        <span class="mark" aria-hidden="true"></span>
+        <span>衡枢运营工作台</span>
+      </a>
+      <nav class="nav" aria-label="主导航">
+        <a class="active" href="#">总览</a>
+        <a href="#">风险</a>
+        <a href="#">容量</a>
+        <a href="#">行动</a>
+      </nav>
+      <a class="button" href="#">导出简报</a>
+    </header>
+
+    <main>
+      <section class="hero" aria-labelledby="page-title">
+        <div class="hero-grid">
+          <div>
+            <div class="eyebrow">区域经营 · 今日 09:40 更新</div>
+            <h1 id="page-title">把分散信号整理成<span class="no-break">行动账本</span></h1>
+            <p class="lead">面向能源、物流与公共基础设施团队，将容量、风险、窗口期和行动责任收束到同一张工作台。所有判断都能回到数据来源、负责人和下一步动作。</p>
+            <div class="hero-actions">
+              <a class="button" href="#">查看今日动作</a>
+              <a class="button secondary" href="#">打开风险账本</a>
+            </div>
+          </div>
+
+          <aside class="ledger" aria-label="关键状态">
+            <article class="status-card dark">
+              <div class="status-top"><span>总体可控度</span><span>较昨日 +4%</span></div>
+              <div class="metric">82<small> / 100</small></div>
+              <div class="rail"><span style="--value: 82%; --bar: var(--signal);"></span></div>
+            </article>
+            <article class="status-card">
+              <div class="status-top"><span>高优先级行动</span><span>3 项待确认</span></div>
+              <div class="metric">17<small> 条</small></div>
+              <div class="rail"><span style="--value: 64%; --bar: var(--accent);"></span></div>
+            </article>
+          </aside>
+        </div>
+
+        <div class="summary" aria-label="经营指标">
+          <div class="summary-item">
+            <strong>容量余量</strong>
+            <div class="num">18.6%</div>
+            <p>晚高峰前仍有缓冲，但东区节点需要提前转移负荷。</p>
+          </div>
+          <div class="summary-item">
+            <strong>风险暴露</strong>
+            <div class="num">5 处</div>
+            <p>两处来自设备检修窗口，一处来自临时需求上浮。</p>
+          </div>
+          <div class="summary-item">
+            <strong>执行准点率</strong>
+            <div class="num">94%</div>
+            <p>调度单回执正常，跨部门确认平均延迟 11 分钟。</p>
+          </div>
+          <div class="summary-item">
+            <strong>建议可信度</strong>
+            <div class="num">0.87</div>
+            <p>模型依据近 30 天负荷曲线和人工复核结果计算。</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section-grid" aria-label="行动与备注">
+        <div class="panel">
+          <div class="panel-title">
+            <h2>下一步行动</h2>
+            <span class="stamp">需要负责人确认</span>
+          </div>
+          <div class="timeline">
+            <article class="task">
+              <span class="time">10:30 前</span>
+              <div>
+                <h3>东区负荷削峰预案进入二级准备</h3>
+                <p>备用容量低于阈值 12 分钟，建议先切换两条非关键负载。</p>
+              </div>
+              <span class="tag amber">预警</span>
+            </article>
+            <article class="task">
+              <span class="time">11:10 前</span>
+              <div>
+                <h3>更新检修窗口对西线供给的影响</h3>
+                <p>三家下游单位已回执，仍缺一份储能站可用容量确认。</p>
+              </div>
+              <span class="tag signal">推进中</span>
+            </article>
+            <article class="task">
+              <span class="time">今日内</span>
+              <div>
+                <h3>复核异常需求曲线并归档为训练样本</h3>
+                <p>昨日 21:00 的尖峰不符合季节性规律，需要人工标注原因。</p>
+              </div>
+              <span class="tag danger">复核</span>
+            </article>
+          </div>
+        </div>
+
+        <aside class="panel">
+          <div class="panel-title">
+            <h2>判断备注</h2>
+            <span class="stamp">三条证据</span>
+          </div>
+          <div class="notes">
+            <article class="note">
+              <h3>先行动，后扩容</h3>
+              <p>当前瓶颈不是总容量，而是两个局部节点在短窗口内的压力重叠。</p>
+            </article>
+            <article class="note">
+              <h3>保留人工确认链路</h3>
+              <p>涉及外部单位承诺时，系统只给建议，不自动生成最终调度令。</p>
+            </article>
+            <article class="note">
+              <h3>简报可直接复用</h3>
+              <p>本页信息结构适合转成管理层日报：结论、指标、行动、证据。</p>
+            </article>
+          </div>
+        </aside>
+      </section>
+    </main>
+  </div>
+</body>
+</html>