Toolbox/public/tools/web_order_box/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="theme-color" content="#080b12">
  <title>框子 - 运动提醒宝</title>
  <link rel="icon" href="/tools/web_order_box/favicon.ico">
  <link rel="stylesheet" href="/tools/web_order_box/order_box.css">
</head>
<body>
  <!-- ===== Hub 首页 ===== -->
  <div id="viewHub" class="view">
    <div class="hub-header">
      <h1 class="hub-title">框子</h1>
      <p class="hub-subtitle">kit 聚合壳。当前阶段先落地第一个工具：运动提醒宝。</p>
    </div>
    <div class="hub-kit-list">
      <button class="kit-card" id="btnEnterMotion" disabled>
        <div class="kit-icon-wrap">
          <svg class="kit-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5h11M6.5 17.5h11M3 10v4M21 10v4M6.5 6.5v11M17.5 6.5v11"/></svg>
        </div>
        <div class="kit-info">
          <span class="kit-name">运动提醒宝</span>
          <span class="kit-desc">流程卡片、自动切步、语音播报、大字倒计时、下一个动作常驻显示。</span>
        </div>
        <svg class="kit-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
    </div>
  </div>

  <!-- ===== 运动提醒宝 主容器 ===== -->
  <div id="viewMotion" class="view" style="display:none">
    <!-- 顶部栏 -->
    <div class="motion-header">
      <button class="btn-back" id="btnBackHub">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        <span>返回框子</span>
      </button>
    </div>

    <!-- 页面内容区 -->
    <div class="motion-body">
      <!-- 卡片页 -->
      <div id="pageCards" class="page">
        <!-- 残留 session 警告 -->
        <div id="staleWarning" class="stale-warning" style="display:none">
          <div class="stale-title">检测到服务端仍保留一个运行中的 session</div>
          <div class="stale-desc">如果这是上次异常退出遗留，可以先清理占用再重新启动。</div>
          <button class="btn-stale-clean" id="btnCleanStale">清理占用</button>
        </div>
        <!-- 新建按钮 -->
        <div class="cards-toolbar">
          <button class="btn-primary" id="btnNewCard">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            <span>新建卡片</span>
          </button>
        </div>
        <!-- 卡片列表 -->
        <div id="cardsList" class="cards-list"></div>
        <!-- 空状态 -->
        <div id="cardsEmpty" class="empty-state" style="display:none">
          <div class="empty-title">还没有流程卡片</div>
          <div class="empty-desc">先建一个训练流程，再从卡片直接启动执行界面。</div>
        </div>
        <!-- 加载 -->
        <div id="cardsLoading" class="loading-wrap"><div class="spinner"></div></div>
      </div>

      <!-- 历史页 -->
      <div id="pageHistory" class="page" style="display:none">
        <div id="historyList" class="history-list"></div>
        <div id="historyEmpty" class="empty-state" style="display:none">
          <div class="empty-title">还没有执行记录</div>
          <div class="empty-desc">从卡片页启动一次流程后，这里会出现历史记录。</div>
        </div>
        <div id="historyLoading" class="loading-wrap"><div class="spinner"></div></div>
      </div>
    </div>

    <!-- 底部 Tab -->
    <div class="tab-bar">
      <button class="tab-item active" data-tab="cards">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        <span>卡片</span>
      </button>
      <button class="tab-item" data-tab="history">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 15"/></svg>
        <span>历史</span>
      </button>
    </div>
  </div>

  <!-- ===== 卡片编辑器 Modal ===== -->
  <div id="editorModal" class="modal-overlay" style="display:none">
    <div class="modal-sheet">
      <div class="sheet-header">
        <span class="sheet-title" id="editorTitle">新建流程卡片</span>
        <button class="btn-icon" id="btnEditorClose">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>
      <div class="sheet-body" id="editorBody">
        <!-- 动态渲染 -->
      </div>
    </div>
  </div>

  <!-- ===== 执行器 Modal ===== -->
  <div id="runnerModal" class="modal-overlay modal-fullscreen" style="display:none">
    <div class="runner-container" id="runnerContainer">
      <!-- 动态渲染 -->
    </div>
  </div>

  <!-- ===== 通用弹窗 ===== -->
  <div id="dialogOverlay" class="dialog-overlay" style="display:none">
    <div class="dialog-box" id="dialogBox">
      <div class="dialog-title" id="dialogTitle"></div>
      <div class="dialog-body" id="dialogBody"></div>
      <div class="dialog-actions" id="dialogActions"></div>
    </div>
  </div>

  <!-- ===== 交互详情弹窗 ===== -->
  <div id="interactionOverlay" class="dialog-overlay" style="display:none">
    <div class="dialog-box dialog-interaction" id="interactionBox">
      <div class="dialog-header-row">
        <span class="dialog-title" id="interactionTitle">交互详情</span>
        <button class="btn-icon btn-copy" id="btnInteractionCopy" title="复制">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
        </button>
      </div>
      <pre class="interaction-content" id="interactionContent"></pre>
      <div class="dialog-actions" id="interactionActions"></div>
    </div>
  </div>

  <!-- ===== Toast ===== -->
  <div id="toast" class="toast"></div>

  <script src="/tools/web_order_box/order_box.js"></script>
</body>
</html>