minimal-agent 0.8.2 → 0.10.0

package/skills/ui-design/tests/e2e/runs/nebula-console-iteration-1/outputs/console.html

@@ -0,0 +1,600 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Nebula Console 星云控制台产品样张</title>
+  <style>
+    :root {
+      --ink: #eef6ff;
+      --ink-soft: #d9e8f7;
+      --muted: #9fb3c8;
+      --paper: #050812;
+      --paper-blue: #08111f;
+      --surface: rgba(13, 27, 48, 0.74);
+      --surface-raised: rgba(24, 45, 76, 0.8);
+      --line: rgba(174, 219, 255, 0.18);
+      --line-strong: rgba(174, 219, 255, 0.34);
+      --accent: #3aa7ff;
+      --signal: #39d6d6;
+      --violet: #7b61ff;
+      --amber: #f2b84b;
+      --shadow: rgba(0, 8, 24, 0.5);
+      --glass-alpha: 0.74;
+      --grid-alpha: 0.16;
+      --glow-strength: 0.28;
+      --mono: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
+      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Inter", sans-serif;
+    }
+
+    * { box-sizing: border-box; }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 76% 12%, rgba(58,167,255,var(--glow-strength)), transparent 28%),
+        radial-gradient(circle at 18% 78%, rgba(57,214,214,0.14), transparent 30%),
+        linear-gradient(135deg, var(--paper) 0%, #07101f 48%, #0c1830 100%);
+      overflow-x: hidden;
+    }
+
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      background:
+        linear-gradient(rgba(174,219,255,var(--grid-alpha)) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(174,219,255,calc(var(--grid-alpha) * 0.65)) 1px, transparent 1px);
+      background-size: 64px 64px;
+      mask-image: linear-gradient(180deg, rgba(0,0,0,0.78), transparent 92%);
+    }
+
+    button, input { font: inherit; }
+
+    .app {
+      display: grid;
+      grid-template-columns: 240px minmax(0, 1fr);
+      gap: 18px;
+      width: min(1360px, calc(100vw - 28px));
+      margin: 0 auto;
+      padding: 18px 0 42px;
+    }
+
+    .glass {
+      border: 1px solid var(--line);
+      background:
+        linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018)),
+        rgba(13, 27, 48, var(--glass-alpha));
+      box-shadow: 0 22px 72px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
+      backdrop-filter: blur(16px);
+    }
+
+    .sidebar {
+      position: sticky;
+      top: 18px;
+      height: calc(100vh - 36px);
+      min-height: 680px;
+      padding: 16px;
+      border-radius: 20px;
+      overflow: hidden;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+
+    .mark {
+      width: 38px;
+      height: 38px;
+      border-radius: 13px;
+      border: 1px solid var(--line-strong);
+      background:
+        radial-gradient(circle at 62% 34%, rgba(238,246,255,0.9), transparent 10%),
+        conic-gradient(from 220deg, var(--accent), var(--signal), rgba(123,97,255,0.42), var(--accent));
+      box-shadow: 0 0 26px rgba(58,167,255,0.28);
+    }
+
+    .brand strong { display: block; font-size: 15px; }
+    .brand span, .nav-item, .label, .mono {
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 12px;
+      letter-spacing: 0.08em;
+    }
+
+    .nav-list {
+      display: grid;
+      gap: 8px;
+    }
+
+    .nav-item {
+      display: flex;
+      justify-content: space-between;
+      gap: 10px;
+      padding: 12px;
+      border: 1px solid transparent;
+      border-radius: 12px;
+      background: rgba(255,255,255,0.025);
+    }
+
+    .nav-item.active {
+      color: var(--ink);
+      border-color: rgba(58,167,255,0.35);
+      background: rgba(58,167,255,0.1);
+      box-shadow: inset 3px 0 0 var(--accent);
+    }
+
+    .side-status {
+      position: absolute;
+      left: 16px;
+      right: 16px;
+      bottom: 16px;
+      padding: 14px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: rgba(255,255,255,0.035);
+    }
+
+    .side-status strong {
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    .scan {
+      height: 7px;
+      margin-top: 12px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.07);
+      overflow: hidden;
+    }
+
+    .scan span {
+      display: block;
+      width: 68%;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, transparent, var(--accent), var(--signal));
+      box-shadow: 0 0 20px rgba(58,167,255,0.42);
+    }
+
+    .main {
+      min-width: 0;
+    }
+
+    .topbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+      padding: 14px;
+      border-radius: 20px;
+      margin-bottom: 18px;
+    }
+
+    .topbar h1 {
+      margin: 0;
+      font-size: clamp(28px, 3vw, 44px);
+      line-height: 1.1;
+      letter-spacing: 0;
+    }
+
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+
+    .pill {
+      padding: 8px 10px;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      color: var(--muted);
+      background: rgba(255,255,255,0.035);
+      font-family: var(--mono);
+      font-size: 12px;
+      letter-spacing: 0.06em;
+      white-space: nowrap;
+    }
+
+    .pill.online {
+      color: var(--signal);
+      border-color: rgba(57,214,214,0.38);
+    }
+
+    .dashboard {
+      display: grid;
+      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+      gap: 18px;
+    }
+
+    .panel {
+      position: relative;
+      overflow: hidden;
+      border-radius: 20px;
+      padding: 20px;
+    }
+
+    h2, h3, p { margin-top: 0; }
+
+    h2 {
+      margin-bottom: 8px;
+      font-size: 24px;
+      line-height: 1.18;
+      letter-spacing: 0;
+    }
+
+    .panel > p {
+      color: var(--muted);
+      line-height: 1.58;
+      font-weight: 600;
+    }
+
+    .map {
+      height: 350px;
+      margin-top: 18px;
+      border: 1px solid rgba(174,219,255,0.18);
+      border-radius: 18px;
+      background:
+        radial-gradient(circle at 50% 50%, rgba(58,167,255,0.26), transparent 18%),
+        radial-gradient(circle at 50% 50%, rgba(57,214,214,0.12), transparent 42%),
+        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012));
+      overflow: hidden;
+      position: relative;
+    }
+
+    .map::before {
+      content: "";
+      position: absolute;
+      inset: 44px;
+      border: 1px solid rgba(174,219,255,0.2);
+      border-radius: 50%;
+      box-shadow:
+        0 0 0 56px rgba(174,219,255,0.035),
+        0 0 0 112px rgba(174,219,255,0.02);
+    }
+
+    .map::after {
+      content: "";
+      position: absolute;
+      left: -20%;
+      right: -20%;
+      top: 46%;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, rgba(57,214,214,0.75), transparent);
+      box-shadow: 0 0 18px rgba(57,214,214,0.52);
+      transform: rotate(-14deg);
+    }
+
+    .map-node {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--signal);
+      box-shadow: 0 0 18px rgba(57,214,214,0.72);
+    }
+
+    .map-node:nth-child(1) { left: 22%; top: 30%; }
+    .map-node:nth-child(2) { right: 24%; top: 22%; background: var(--accent); }
+    .map-node:nth-child(3) { left: 57%; bottom: 20%; }
+    .map-node:nth-child(4) { left: 34%; bottom: 24%; background: var(--amber); }
+
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 12px;
+      margin-top: 18px;
+    }
+
+    .stat {
+      padding: 15px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: rgba(255,255,255,0.035);
+    }
+
+    .stat strong {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 24px;
+    }
+
+    .queue {
+      display: grid;
+      gap: 10px;
+      margin-top: 18px;
+    }
+
+    .task {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 12px;
+      padding: 14px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: rgba(255,255,255,0.035);
+    }
+
+    .task strong {
+      display: block;
+      margin-bottom: 6px;
+    }
+
+    .task small {
+      color: var(--muted);
+      font-weight: 600;
+    }
+
+    .badge {
+      align-self: start;
+      padding: 6px 9px;
+      border: 1px solid rgba(57,214,214,0.34);
+      border-radius: 999px;
+      color: var(--signal);
+      background: rgba(57,214,214,0.08);
+      font-family: var(--mono);
+      font-size: 11px;
+      letter-spacing: 0.08em;
+    }
+
+    .badge.warn {
+      color: var(--amber);
+      border-color: rgba(242,184,75,0.34);
+      background: rgba(242,184,75,0.08);
+    }
+
+    .lower {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 18px;
+      margin-top: 18px;
+    }
+
+    .mini {
+      min-height: 220px;
+    }
+
+    .bars {
+      display: grid;
+      gap: 12px;
+      margin-top: 18px;
+    }
+
+    .bar {
+      display: grid;
+      grid-template-columns: 74px 1fr 46px;
+      gap: 10px;
+      align-items: center;
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+    }
+
+    .track {
+      height: 7px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.07);
+      overflow: hidden;
+    }
+
+    .track span {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, var(--accent), var(--signal));
+      box-shadow: 0 0 18px rgba(58,167,255,0.34);
+    }
+
+    .notice {
+      border-color: rgba(242,184,75,0.28);
+      background:
+        linear-gradient(145deg, rgba(242,184,75,0.08), rgba(255,255,255,0.018)),
+        rgba(13, 27, 48, var(--glass-alpha));
+    }
+
+    .tweaks-panel {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 20;
+      display: none;
+      gap: 10px;
+      width: 250px;
+      padding: 14px;
+      border: 1px solid var(--line-strong);
+      border-radius: 16px;
+      color: var(--ink);
+      background: rgba(5, 8, 18, 0.9);
+      box-shadow: 0 18px 60px rgba(0,0,0,0.42);
+    }
+
+    .tweaks-panel label {
+      display: grid;
+      gap: 6px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    @media (max-width: 980px) {
+      .app { grid-template-columns: 1fr; width: min(100vw - 24px, 760px); padding-top: 12px; }
+      .sidebar { position: relative; top: auto; height: auto; min-height: auto; }
+      .side-status { position: relative; left: auto; right: auto; bottom: auto; margin-top: 18px; }
+      .dashboard, .lower { grid-template-columns: 1fr; }
+      .stats { grid-template-columns: repeat(2, 1fr); }
+      .topbar { align-items: flex-start; flex-direction: column; }
+      .filters { justify-content: flex-start; }
+      .map { height: 280px; }
+      body::before { background-size: 52px 52px; opacity: 0.62; }
+    }
+
+    @media (max-width: 520px) {
+      .stats { grid-template-columns: 1fr; }
+      .task { grid-template-columns: 1fr; }
+      .bar { grid-template-columns: 58px 1fr 40px; }
+      .panel { padding: 18px; }
+    }
+  </style>
+</head>
+<body>
+  <main class="app" data-screen-label="02 星云控制台产品界面">
+    <aside class="sidebar glass" aria-label="侧边导航">
+      <div class="brand">
+        <div class="mark" aria-hidden="true"></div>
+        <div>
+          <strong>澜核智能</strong>
+          <span>AI 控制台</span>
+        </div>
+      </div>
+      <nav class="nav-list">
+        <div class="nav-item active"><span>任务轨道</span><span>01</span></div>
+        <div class="nav-item"><span>模型部署</span><span>02</span></div>
+        <div class="nav-item"><span>数据入口</span><span>03</span></div>
+        <div class="nav-item"><span>安全策略</span><span>04</span></div>
+        <div class="nav-item"><span>审计记录</span><span>05</span></div>
+      </nav>
+      <div class="side-status">
+        <strong>系统健康</strong>
+        <span class="label">在线节点 128 / 异常 2</span>
+        <div class="scan"><span></span></div>
+      </div>
+    </aside>
+
+    <section class="main">
+      <header class="topbar glass">
+        <div>
+          <span class="label">实时推理网络</span>
+          <h1>模型任务轨道</h1>
+        </div>
+        <div class="filters">
+          <span class="pill online">在线</span>
+          <span class="pill">华东一区</span>
+          <span class="pill">最近 15 分钟</span>
+          <span class="pill">自动扩容</span>
+        </div>
+      </header>
+
+      <div class="dashboard">
+        <section class="panel glass">
+          <h2>节点拓扑</h2>
+          <p>控制台样张验证半透明深玻璃能否承载真实产品信息：背景有空间感，但主数据仍有稳定阅读面。</p>
+          <div class="map" aria-label="节点拓扑图">
+            <span class="map-node"></span>
+            <span class="map-node"></span>
+            <span class="map-node"></span>
+            <span class="map-node"></span>
+          </div>
+          <div class="stats">
+            <div class="stat"><strong>128</strong><span class="label">推理节点</span></div>
+            <div class="stat"><strong>42ms</strong><span class="label">链路延迟</span></div>
+            <div class="stat"><strong>7.8K</strong><span class="label">分钟任务</span></div>
+            <div class="stat"><strong>2</strong><span class="label">待处理风险</span></div>
+          </div>
+        </section>
+
+        <section class="panel glass">
+          <h2>任务队列</h2>
+          <p>状态标签、扫描条和蓝青信号只用于帮助判断，不把界面推向电影道具。</p>
+          <div class="queue">
+            <article class="task">
+              <div><strong>知识库重排模型</strong><small>正在扩容 4 个节点，预计 48 秒完成。</small></div>
+              <span class="badge">同步中</span>
+            </article>
+            <article class="task">
+              <div><strong>客服摘要链路</strong><small>延迟稳定，已完成新策略灰度。</small></div>
+              <span class="badge">健康</span>
+            </article>
+            <article class="task">
+              <div><strong>合同解析队列</strong><small>发现输入峰值，建议开启临时缓存。</small></div>
+              <span class="badge warn">提醒</span>
+            </article>
+            <article class="task">
+              <div><strong>图像标签服务</strong><small>冷启动完成，等待人工确认发布。</small></div>
+              <span class="badge">待发布</span>
+            </article>
+          </div>
+        </section>
+      </div>
+
+      <div class="lower">
+        <section class="panel glass mini">
+          <h3>资源利用</h3>
+          <div class="bars">
+            <div class="bar"><span>算力</span><div class="track"><span style="width: 74%"></span></div><strong>74%</strong></div>
+            <div class="bar"><span>缓存</span><div class="track"><span style="width: 58%"></span></div><strong>58%</strong></div>
+            <div class="bar"><span>带宽</span><div class="track"><span style="width: 66%"></span></div><strong>66%</strong></div>
+          </div>
+        </section>
+
+        <section class="panel glass mini notice">
+          <h3>风险提示</h3>
+          <p>一个外部数据源出现波动，建议在下一次任务合并前启用缓冲策略，避免摘要结果延迟。</p>
+          <span class="pill">建议处理</span>
+        </section>
+
+        <section class="panel glass mini">
+          <h3>视觉边界</h3>
+          <p>本界面使用网格、轨道和扫描光带建立科技感，但主要阅读区不直接叠在复杂背景上。</p>
+          <span class="pill online">可读优先</span>
+        </section>
+      </div>
+    </section>
+  </main>
+
+  <aside class="tweaks-panel" aria-label="调整">
+    <strong>调整</strong>
+    <label>主蓝色 <input data-tweak-accent type="color" value="#3aa7ff"></label>
+    <label>透明层级 <input data-tweak-glass type="range" min="60" max="88" value="74"></label>
+    <label>发光强度 <input data-tweak-glow type="range" min="12" max="42" value="28"></label>
+  </aside>
+
+  <script>
+    const initialTweaks = /*EDITMODE-BEGIN*/{
+      "accentColor": "#3aa7ff",
+      "glassAlpha": 74,
+      "glowStrength": 28
+    }/*EDITMODE-END*/;
+    window.UI_DESIGN_TWEAKS = initialTweaks;
+
+    const root = document.documentElement;
+    const panel = document.querySelector('.tweaks-panel');
+
+    function applyTweaks(values) {
+      if (values.accentColor) root.style.setProperty('--accent', values.accentColor);
+      if (values.glassAlpha) root.style.setProperty('--glass-alpha', String(Number(values.glassAlpha) / 100));
+      if (values.glowStrength) root.style.setProperty('--glow-strength', String(Number(values.glowStrength) / 100));
+    }
+
+    window.addEventListener('message', (event) => {
+      const data = event.data || {};
+      if (data.type === '__activate_edit_mode') panel.style.display = 'grid';
+      if (data.type === '__deactivate_edit_mode') panel.style.display = 'none';
+      if (data.type === '__edit_mode_set_keys' && data.keys) applyTweaks(data.keys);
+    });
+
+    document.querySelector('[data-tweak-accent]').addEventListener('input', (event) => {
+      const keys = { accentColor: event.target.value };
+      applyTweaks(keys);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', keys }, '*');
+    });
+    document.querySelector('[data-tweak-glass]').addEventListener('input', (event) => {
+      const keys = { glassAlpha: Number(event.target.value) };
+      applyTweaks(keys);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', keys }, '*');
+    });
+    document.querySelector('[data-tweak-glow]').addEventListener('input', (event) => {
+      const keys = { glowStrength: Number(event.target.value) };
+      applyTweaks(keys);
+      window.parent.postMessage({ type: '__edit_mode_set_keys', keys }, '*');
+    });
+
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+  </script>
+</body>
+</html>