Cognitive_Agent/experiments/device-capability-card-demo/index.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" />
    <title>设备能力卡片实验室</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main class="demo-shell">
      <header class="page-header">
        <div>
          <p class="eyebrow">独立实验 · 不连接车辆</p>
          <h1>设备能力卡片实验室</h1>
          <p class="page-intro">修改设备名称、别名和功能说法，观察自然语言如何匹配为结构化控制指令。</p>
        </div>
        <button class="secondary-button" id="resetDemo" type="button">恢复示例</button>
      </header>

      <section class="safety-note" aria-label="实验边界">
        <span aria-hidden="true">◇</span>
        <p><strong>安全边界</strong> 本页面只在浏览器内生成演示数据，不导入当前项目模块，也不会调用控制接口或发送 CAN 指令。</p>
      </section>

      <div class="workspace-grid">
        <aside class="configuration-panel" aria-labelledby="configurationTitle">
          <div class="section-heading">
            <span>01</span>
            <h2 id="configurationTitle">设备定义</h2>
          </div>

          <div class="field-grid">
            <label class="field">
              <span>设备名称</span>
              <input id="deviceName" autocomplete="off" />
            </label>
            <label class="field">
              <span>设备 ID</span>
              <input id="deviceId" autocomplete="off" spellcheck="false" />
            </label>
            <label class="field">
              <span>所属领域</span>
              <input id="deviceDomain" autocomplete="off" spellcheck="false" />
            </label>
            <label class="field">
              <span>设备类型</span>
              <select id="deviceCategory">
                <option value="vehicle_electrical">车端电器</option>
                <option value="seat">座椅设备</option>
                <option value="peripheral">扩展外设</option>
              </select>
            </label>
            <label class="field field-wide">
              <span>设备别名</span>
              <input id="deviceAliases" autocomplete="off" placeholder="使用顿号或逗号分隔" />
              <small>解析时优先匹配最长别名；避免使用“灯、开关、设备”等过宽名称。</small>
            </label>
            <label class="field">
              <span>默认目标</span>
              <select id="deviceScope">
                <option value="vehicle">全车</option>
                <option value="driver">主驾</option>
                <option value="passenger">副驾</option>
                <option value="rear_row">后排</option>
              </select>
            </label>
            <label class="field">
              <span>执行通道</span>
              <select id="deviceTransport">
                <option value="native_can">原生 CAN</option>
                <option value="domain_runtime">领域执行器</option>
                <option value="gscu_tcp">红外网关</option>
                <option value="mqtt">MQTT</option>
              </select>
            </label>
          </div>

          <div class="section-heading compact-heading">
            <span>02</span>
            <h2>功能定义</h2>
          </div>
          <div id="capabilityEditor" class="capability-editor"></div>

          <details class="schema-details">
            <summary>查看卡片声明</summary>
            <pre id="descriptorPreview" aria-label="设备卡片声明"></pre>
          </details>
        </aside>

        <section class="experiment-panel">
          <div class="pipeline" aria-label="匹配流程">
            <span>设备别名</span><i aria-hidden="true">→</i>
            <span>功能说法</span><i aria-hidden="true">→</i>
            <span>参数校验</span><i aria-hidden="true">→</i>
            <span>执行载荷</span>
          </div>

          <section class="preview-section" aria-labelledby="previewTitle">
            <div class="section-heading">
              <span>03</span>
              <h2 id="previewTitle">功能卡片</h2>
            </div>
            <article class="device-card" id="deviceCardPreview"></article>
          </section>

          <section class="parser-section" aria-labelledby="parserTitle">
            <div class="section-heading">
              <span>04</span>
              <h2 id="parserTitle">指令解析</h2>
            </div>

            <div class="example-row" id="exampleCommands" aria-label="示例指令"></div>

            <label class="command-composer">
              <span class="sr-only">自然语言控制指令</span>
              <textarea id="utterance" rows="2" maxlength="180">把冰箱温度调到4度</textarea>
              <button class="primary-button" id="parseCommand" type="button">解析指令</button>
            </label>

            <div class="result-banner" id="resultBanner" data-status="idle" aria-live="polite">
              <span class="result-dot" aria-hidden="true"></span>
              <div>
                <strong id="resultTitle">等待解析</strong>
                <p id="resultMessage">输入一句话，查看设备、功能和参数的匹配过程。</p>
              </div>
            </div>

            <div class="result-grid">
              <section class="trace-panel" aria-labelledby="traceTitle">
                <h3 id="traceTitle">匹配轨迹</h3>
                <ol id="traceList"></ol>
              </section>
              <section class="payload-panel" aria-labelledby="payloadTitle">
                <div class="payload-heading">
                  <h3 id="payloadTitle">结构化结果</h3>
                  <button id="copyPayload" class="text-button" type="button" disabled>复制</button>
                </div>
                <pre id="payloadOutput">{}</pre>
              </section>
            </div>
          </section>
        </section>
      </div>
    </main>

    <script type="module" src="./app.js"></script>
  </body>
</html>