ClawLab
/
MathLab


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OpenClaw 对话任务看板</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="app-shell">
    <header class="top-bar">
      <div class="brand-block">
        <h1>OpenClaw 对话任务看板</h1>
        <p>每次对话为主节点，向后发散子节点，像思维导图一样持续延展。</p>
      </div>

      <form id="rootForm" class="root-form">
        <label for="rootNameInput">新建主对话</label>
        <div class="inline-group">
          <input
            id="rootNameInput"
            name="rootName"
            type="text"
            maxlength="120"
            placeholder="例如：发布版本 v2.1"
            required
          >
          <button type="submit" class="btn btn-primary">新增主节点</button>
        </div>
      </form>

      <div class="toolbar-actions">
        <button id="fitViewBtn" type="button" class="btn">适配视图</button>
        <button id="resetViewBtn" type="button" class="btn">重置缩放</button>
        <button id="exportJsonBtn" type="button" class="btn">导出 JSON</button>
        <button id="exportSvgBtn" type="button" class="btn">导出 SVG</button>
      </div>
    </header>

    <main class="board-layout">
      <aside class="side-panel">
        <section class="panel-card">
          <h2>状态说明</h2>
          <ul class="legend-list">
            <li><span class="legend-dot pending"></span>待开始</li>
            <li><span class="legend-dot in-progress"></span>执行中</li>
            <li><span class="legend-dot completed"></span>已完成</li>
            <li><span class="legend-dot bug"></span>Bug 终止</li>
          </ul>
        </section>

        <section class="panel-card">
          <h2>统计</h2>
          <dl id="statsPanel" class="stats-list">
            <div><dt>主对话</dt><dd id="statRoots">0</dd></div>
            <div><dt>总节点</dt><dd id="statTotal">0</dd></div>
            <div><dt>执行中</dt><dd id="statRunning">0</dd></div>
            <div><dt>有 Bug</dt><dd id="statBug">0</dd></div>
          </dl>
        </section>

        <section class="panel-card hint-card">
          <h2>交互提示</h2>
          <p>拖动画布可平移，滚轮可缩放，点击节点可查看完整卡片信息并编辑。</p>
        </section>
      </aside>

      <section class="canvas-panel">
        <div class="canvas-wrapper" id="canvasWrapper">
          <svg id="mindmapSvg" viewBox="0 0 1800 1100" role="img" aria-label="OpenClaw 任务导图">
            <g id="viewportGroup">
              <g id="linksLayer"></g>
              <g id="nodesLayer"></g>
            </g>
          </svg>
        </div>
      </section>
    </main>
  </div>

  <div id="nodeModal" class="modal hidden" aria-hidden="true">
    <div class="modal-mask" data-close="true"></div>
    <div class="modal-card" role="dialog" aria-modal="true">
      <button id="closeModalBtn" class="modal-close" type="button" aria-label="关闭详情">×</button>
      <h2>节点详情</h2>

      <form id="nodeForm" class="node-form">
        <input id="nodeIdInput" name="nodeId" type="hidden">

        <label>
          节点标题
          <input id="nameInput" name="name" type="text" maxlength="120" required>
        </label>

        <label>
          状态
          <select id="statusInput" name="status" required>
            <option value="pending">待开始</option>
            <option value="in-progress">执行中</option>
            <option value="completed">已完成</option>
            <option value="bug">Bug 终止</option>
          </select>
        </label>

        <div class="time-grid">
          <label>
            开始时间
            <input id="startTimeInput" name="startTime" type="datetime-local">
          </label>
          <label>
            结束时间
            <input id="endTimeInput" name="endTime" type="datetime-local">
          </label>
        </div>

        <label>
          准备如何进行
          <textarea id="planInput" name="plannedApproach" rows="4" maxlength="2000" placeholder="写下执行策略、预期路径"></textarea>
        </label>

        <label>
          遇到什么 Bug 而终止
          <textarea id="bugInput" name="bugDetails" rows="4" maxlength="2000" placeholder="记录触发条件、报错、临时结论"></textarea>
        </label>

        <label>
          补充说明
          <textarea id="notesInput" name="notes" rows="3" maxlength="3000" placeholder="可写检查结果、风险、后续动作"></textarea>
        </label>

        <div class="meta-row">
          <span id="createdAtInfo">创建时间：-</span>
          <span id="updatedAtInfo">更新时间：-</span>
        </div>

        <div class="child-create">
          <input id="childNameInput" type="text" maxlength="120" placeholder="新增子节点标题">
          <button id="addChildBtn" type="button" class="btn">新增子节点</button>
        </div>

        <div class="modal-actions">
          <button id="deleteNodeBtn" type="button" class="btn btn-danger">删除该节点</button>
          <button type="submit" class="btn btn-primary">保存变更</button>
        </div>
      </form>
    </div>
  </div>

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