Cognitive_Agent/apps/web-console/firmware-workbench.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <meta name="theme-color" content="#0f1526" id="firmwareWorkbenchThemeColor" />
    <title>座椅固件开发工作台 · 511 工程</title>
    <link rel="icon" href="/icons/app-icon-192.png" />
    <script src="/firmware-workbench-theme.js?v=1"></script>
    <link rel="stylesheet" href="/firmware-workbench.css?v=8" />
    <script src="/vendor/lucide/0.468.0/lucide.min.js" defer></script>
    <script src="/firmware-workbench.js?v=5" defer></script>
  </head>
  <body>
    <div class="shell">
      <header class="topbar">
        <div class="topbar-main">
          <a class="back-link" href="/" aria-label="返回智能座舱">
            <i data-lucide="arrow-left"></i>
          </a>
          <div class="product-mark" aria-hidden="true"><i data-lucide="blocks"></i></div>
          <h1>座椅固件开发工作台</h1>
        </div>
        <div class="topbar-status">
          <span class="server-state" id="serverState"><span></span>正在连接发布服务</span>
        </div>
      </header>

      <main>
        <section class="hero-grid" aria-label="固件开发任务">
          <article class="card command-card">
            <div class="card-heading">
              <div>
                <h2>开发指令</h2>
              </div>
              <label class="baseline-picker" for="baselineSelect">
                <i data-lucide="git-branch"></i>
                <span>固件基线</span>
                <select id="baselineSelect" aria-label="选择固件基线">
                  <option value="time_only">时间控制</option>
                </select>
              </label>
            </div>
            <label for="instructionInput">描述需要扩展的副驾座椅能力</label>
            <textarea id="instructionInput" rows="5" maxlength="2000">将副驾座椅固件从仅时间控制扩展为时间＋位置参数控制，并增加座椅通风和座椅加热功能；完成编译、测试验证、固件打包，并发布到升级服务器。</textarea>
            <div class="prompt-templates" aria-label="常用开发指令">
              <button type="button" data-prompt="增加支持座椅位置参数控制的能力">+ 位置控制</button>
              <button type="button" data-prompt="增加座椅通风功能">+ 座椅通风</button>
              <button type="button" data-prompt="增加座椅加热功能">+ 座椅加热</button>
              <button type="button" data-prompt="增加动态木马功能">+ 动态木马</button>
            </div>
            <div class="capability-brief" aria-label="固件能力升级范围">
              <div><span>当前基线</span><strong id="baselineCapabilities">时间控制</strong></div>
              <i data-lucide="chevrons-right"></i>
              <div class="capability-target"><span>目标固件能力</span><strong id="targetCapabilities">时间控制＋位置控制＋座椅通风＋座椅加热</strong></div>
            </div>
            <div class="command-footer">
              <div class="button-row">
                <button class="button button-secondary" id="cancelTaskButton" type="button" disabled>
                  <i data-lucide="square"></i>取消任务
                </button>
                <button class="button button-primary" id="startTaskButton" type="button">
                  <i data-lucide="play"></i>开始生成
                </button>
              </div>
            </div>
          </article>
        </section>

        <section class="card pipeline-card" aria-label="固件交付流水线">
          <ol class="pipeline" id="pipeline" aria-label="固件交付阶段"></ol>
          <div class="release-result" id="releaseResult" data-state="idle">
            <span class="result-icon"><i data-lucide="cloud-upload"></i></span>
            <div><small>当前交付状态</small><strong>尚未开始</strong></div>
          </div>
          <div class="status-legend" aria-label="阶段状态图例">
            <span data-status="waiting">等待</span><span data-status="running">运行中</span>
            <span data-status="pending_confirmation">待确认</span><span data-status="success">成功</span>
            <span data-status="failed">失败</span><span data-status="canceled">取消</span>
            <span data-status="blocked">阻塞</span>
          </div>
        </section>

        <section class="execution-grid">
          <article class="card log-card" aria-labelledby="logTitle">
            <div class="card-heading">
              <div>
                <h2 id="logTitle">任务执行日志</h2>
              </div>
              <div class="log-actions">
                <span class="status-badge" id="taskStatusBadge" data-status="waiting">等待</span>
                <button class="icon-button" id="retryTaskButton" type="button" title="重试失败任务" disabled><i data-lucide="refresh-cw"></i></button>
                <button class="icon-button" id="scrollLogButton" type="button" title="滚动到最新日志"><i data-lucide="arrow-down-to-line"></i></button>
              </div>
            </div>
            <dl class="metrics" id="taskMetrics">
              <div><dt>开始时间</dt><dd>—</dd></div><div><dt>结束时间</dt><dd>—</dd></div>
              <div><dt>实际耗时</dt><dd>—</dd></div><div><dt>文件变更</dt><dd>—</dd></div>
            </dl>
            <div class="log-workspace">
              <div class="log-stream" id="logStream" role="log" aria-live="polite">
                <div class="empty-state"><i data-lucide="terminal-square"></i><strong>暂无执行记录</strong><span>创建开发任务后，这里将实时显示各阶段输出。</span></div>
              </div>
              <aside class="log-details" aria-label="日志附属详情">
                <div class="inspector-tabs" role="tablist">
                  <button class="active" type="button" role="tab" data-inspector-tab="changes">文件变更</button>
                  <button type="button" role="tab" data-inspector-tab="build">编译输出</button>
                  <button type="button" role="tab" data-inspector-tab="tests">测试验证</button>
                </div>
                <div class="inspector-content" id="inspectorContent">
                  <div class="empty-inline">暂无任务数据</div>
                </div>
              </aside>
            </div>
          </article>
        </section>

        <section class="card software-card" aria-labelledby="softwareTitle">
          <div class="card-heading software-heading">
            <div>
              <h2 id="softwareTitle">固件版本与软件产物</h2>
            </div>
            <div class="server-target"><i data-lucide="server"></i><span>发布目标</span><strong id="otaServerName">车机升级服务器</strong></div>
          </div>
          <div class="table-wrap">
            <table>
              <thead><tr><th>软件 / 版本</th><th>能力</th><th>构建时间</th><th>固件文件 / 校验</th><th>状态</th><th>操作</th></tr></thead>
              <tbody id="artifactTableBody"><tr><td colspan="6"><div class="empty-table">尚未生成固件产物</div></td></tr></tbody>
            </table>
          </div>
        </section>
      </main>
    </div>

    <div class="modal-backdrop" id="detailModal" hidden>
      <section class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
        <header><h2 id="modalTitle">固件详情</h2><button class="icon-button" id="closeModalButton" type="button" aria-label="关闭"><i data-lucide="x"></i></button></header>
        <div class="modal-body" id="modalBody"></div>
        <footer><button class="button button-secondary" id="modalCloseButton" type="button">关闭</button></footer>
      </section>
    </div>
    <div class="toast-region" id="toastRegion" aria-live="polite"></div>
  </body>
</html>