feat(mode_workflow): 工具解构结果由卡片改为分区表头表格

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

examples/mode_workflow/index.html

@@ -184,16 +184,12 @@ select:focus,input:focus{border-color:var(--navy)}
   padding:0 4px;border-radius:0 0 0 4px;font-weight:700}
 .anchor{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);white-space:nowrap}
 
-/* 工具卡 */
-.tool{border:1px solid var(--line-dark);border-radius:8px;margin-bottom:16px;overflow:hidden;background:#fff}
-.tool-head{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--navy);color:#fff}
-.tool-head b{font-family:'Noto Serif SC',serif;font-size:14px;letter-spacing:.5px}
-.tool-head .pill{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#ffe9b8}
-.tool-body{padding:13px 15px;display:grid;gap:10px}
-.trow{display:grid;grid-template-columns:78px 1fr;gap:10px;font-size:12.5px;line-height:1.7}
-.trow .k{color:var(--ink-faint);font-size:11px;letter-spacing:1px;padding-top:2px}
-.trow ul{padding-left:16px}
-.case{border:1px dashed var(--line-dark);border-radius:6px;padding:8px 10px;margin-top:4px;font-size:12px}
+/* 工具表格(复用 .steps 分区表头) */
+.tools-table td{min-width:88px}
+.tools-table td:first-child{min-width:120px}
+.tools-table .tcell-ul{padding-left:15px;margin:0}
+.tools-table .pill{margin:1px 3px 2px 0;display:inline-block}
+.case{border:1px dashed var(--line-dark);border-radius:6px;padding:6px 9px;margin:0 0 5px;font-size:11.5px;min-width:200px}
 .case .ck{color:var(--amber);font-weight:700;margin-right:6px}
 
 /* 任务面板 */
@@ -588,33 +584,44 @@ function ioCell(x, kind){
     <td class="${cls}"><span class="anchor">${esc(x.anchor||'')}</span></td>`;
 }
 
-/* ── 工具渲染 ── */
+/* ── 工具渲染(表格,与工序分区表头同语言)── */
 function renderTools(data){
-  return (data.tools || []).map(t => {
-    const li = a => (a||[]).map(x=>`<li>${esc(x)}</li>`).join('');
-    const scope = a => (Array.isArray(a)?a:(a?[a]:[])).flatMap(x=>String(x).split('、')).map(x=>`<span class="pill amber">${esc(x)}</span>`).join(' ');
-    const fscope = a => (Array.isArray(a)?a:(a?[a]:[])).flatMap(x=>String(x).split('、')).map(x=>`<span class="pill teal">${esc(x)}</span>`).join(' ');
+  const tools = data.tools || [];
+  if (!tools.length) return '<div class="empty">本版本无工具</div>';
+  const pills = (a, cls) => (Array.isArray(a)?a:(a?[a]:[]))
+    .flatMap(x=>String(x).split('、')).filter(Boolean)
+    .map(x=>`<span class="pill ${cls}">${esc(x)}</span>`).join(' ');
+  const ul = (a, style) => (a&&a.length) ? `<ul class="tcell-ul"${style?` style="${style}"`:''}>${a.map(x=>`<li>${esc(x)}</li>`).join('')}</ul>` : '';
+  const rows = tools.map(t => {
     const cases = (t['案例']||[]).map(c=>`<div class="case">
       <div><span class="ck">入</span>${esc(c['输入']||'')}</div>
       <div><span class="ck">出</span>${esc(c['输出']||'')}</div>
       ${c['效果']?`<div><span class="ck">效</span>${esc(c['效果'])}</div>`:''}</div>`).join('');
-    return `<div class="tool">
-      <div class="tool-head"><b>${esc(t['工具名称']||'(未命名工具)')}</b>
-        ${t['创作层级']?`<span class="pill">${esc(t['创作层级'])}</span>`:''}
-        ${t['最新更新时间']?`<span class="pill">更新:${esc(t['最新更新时间'])}</span>`:''}
-      </div>
-      <div class="tool-body">
-        ${t['实质作用域']?.length?`<div class="trow"><div class="k">实质作用域</div><div>${scope(t['实质作用域'])}</div></div>`:''}
-        ${t['形式作用域']?.length?`<div class="trow"><div class="k">形式作用域</div><div>${fscope(t['形式作用域'])}</div></div>`:''}
-        ${t['输入']?`<div class="trow"><div class="k">输入</div><div>${esc(t['输入'])}</div></div>`:''}
-        ${t['输出']?`<div class="trow"><div class="k">输出</div><div>${esc(t['输出'])}</div></div>`:''}
-        ${t['用法']?.length?`<div class="trow"><div class="k">用法</div><ul>${li(t['用法'])}</ul></div>`:''}
-        ${cases?`<div class="trow"><div class="k">案例</div><div>${cases}</div></div>`:''}
-        ${t['缺点']?.length?`<div class="trow"><div class="k">缺点</div><ul style="color:var(--seal)">${li(t['缺点'])}</ul></div>`:''}
-        ${t['来源链接']?`<div class="trow"><div class="k">来源</div><div><a href="${esc(t['来源链接'])}" target="_blank">${esc(t['来源链接'])}</a></div></div>`:''}
-      </div>
-    </div>`;
-  }).join('') || '<div class="empty">本版本无工具</div>';
+    const name = `<b>${esc(t['工具名称']||'(未命名)')}</b>
+      ${t['来源链接']?`<br><a class="anchor" href="${esc(t['来源链接'])}" target="_blank">来源 ↗</a>`:''}
+      ${t['最新更新时间']?`<br><span class="anchor">更新 ${esc(t['最新更新时间'])}</span>`:''}`;
+    return `<tr>
+      <td>${name}</td>
+      <td>${t['创作层级']?`<span class="pill navy">${esc(t['创作层级'])}</span>`:''}</td>
+      <td>${pills(t['实质作用域'],'amber')}</td>
+      <td>${pills(t['形式作用域'],'teal')}</td>
+      <td class="c-in">${esc(t['输入']||'')}</td>
+      <td class="c-out">${esc(t['输出']||'')}</td>
+      <td>${ul(t['用法'])}</td>
+      <td>${cases}</td>
+      <td>${ul(t['缺点'],'color:var(--seal)')}</td>
+    </tr>`;
+  }).join('');
+  return `<div style="overflow-x:auto"><table class="steps tools-table">
+    <thead>
+      <tr><th class="h-req" colspan="2">工 具</th><th class="h-in" colspan="2">作 用 域</th><th class="h-im" colspan="2">输 入 / 输 出</th><th class="h-out" colspan="3">详 情</th></tr>
+      <tr>
+        <th class="h-req2">名称</th><th class="h-req2">创作层级</th>
+        <th class="h-in2">实质作用域</th><th class="h-in2">形式作用域</th>
+        <th class="h-im2">输入</th><th class="h-im2">输出</th>
+        <th class="h-out2">用法</th><th class="h-out2">案例</th><th class="h-out2">缺点</th>
+      </tr>
+    </thead><tbody>${rows}</tbody></table></div>`;
 }
 
 /* ════ 解构任务 ════ */