@lokvis/ui-react 0.1.1-beta.0 → 0.2.0

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,122 @@
+/**
+ * ThemeToggle - 暗色模式切换按钮(W9.7)
+ *
+ * 使用 `useTheme()` hook 读写 localStorage + 跟随系统偏好。
+ * 与 `tokens.css` 的 `.dark` / `.light` 类双触发机制对齐。
+ *
+ * 交互:
+ *   - 左键单击:在 light / dark 之间切换(基于当前 resolvedTheme 决定下一态)
+ *   - 右键单击:弹出菜单(light / dark / system 三态)
+ *   - ESC:关闭菜单
+ *   - 点击菜单外部:关闭菜单
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { useTheme, type ThemeMode } from '../hooks/useTheme.js';
+
+export interface ThemeToggleProps {
+  className?: string;
+  /** 是否显示文字标签(默认仅图标) */
+  showLabel?: boolean;
+}
+
+export function ThemeToggle({ className = '', showLabel = false }: ThemeToggleProps) {
+  const { theme, resolvedTheme, toggleTheme, setTheme } = useTheme();
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const btnRef = React.useRef<HTMLButtonElement>(null);
+
+  // 点击外部关闭菜单 + ESC 关闭
+  React.useEffect(() => {
+    if (!menuOpen) return;
+    const onDown = (e: MouseEvent) => {
+      // e.target 可能是任意 EventTarget;用 instanceof Node 类型守卫收窄,
+      // 避免 as 断言(与 WorkflowEditor 等处统一)
+      if (e.target instanceof Node && btnRef.current && !btnRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [menuOpen]);
+
+  const isDark = resolvedTheme === 'dark';
+
+  const icon = isDark ? (
+    <Icon size={14} strokeWidth={2}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </Icon>
+  ) : (
+    <Icon size={14} strokeWidth={2}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+    </Icon>
+  );
+
+  const label = theme === null ? 'System' : theme === 'dark' ? 'Dark' : 'Light';
+
+  return (
+    <div className={`relative ${className}`}>
+      <button
+        ref={btnRef}
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        onClick={() => toggleTheme()}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setMenuOpen((v) => !v);
+        }}
+        aria-label={`Theme: ${label}. Click to toggle, right-click for options.`}
+        title={`Theme: ${label} (right-click for options)`}
+        className="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+      >
+        {icon}
+        {showLabel && <span className="ml-1 text-xs">{label}</span>}
+      </button>
+
+      {menuOpen && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full z-50 mt-1 w-32 overflow-hidden rounded-md border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          {(['light', 'dark', null] as Array<ThemeMode | null>).map((mode) => {
+            const isActive = theme === mode;
+            const text = mode === null ? 'System' : mode === 'dark' ? 'Dark' : 'Light';
+            return (
+              <button
+                key={mode ?? 'system'}
+                type="button"
+                role="menuitemradio"
+                aria-checked={isActive}
+                onClick={() => {
+                  setTheme(mode);
+                  setMenuOpen(false);
+                }}
+                className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition-colors ${
+                  isActive
+                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-300'
+                    : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800'
+                }`}
+              >
+                <span>{text}</span>
+                {isActive && (
+                  <Icon size={12} strokeWidth={3}>
+                    <path d="M5 13l4 4L19 7" />
+                  </Icon>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/WorkflowEditor.tsx

@@ -0,0 +1,382 @@
+/**
+ * WorkflowEditor - 拖拽式工作流编辑器(W10.4)
+ *
+ * 增强 PipelineBar,提供节点拖拽重排能力:
+ *   - 拖拽节点到任意位置重排线性链
+ *   - 拖拽时显示插入指示器
+ *   - 键盘支持:选中节点后 ← → 移动(无障碍)
+ *   - 节点数上限 MAX_WORKFLOW_STEPS=5(M1 MVP 约束,UI 层常量)
+ *
+ * 与 PipelineBar 区别:
+ *   - PipelineBar:只读 + 选中/删除(快速预览)
+ *   - WorkflowEditor:可编辑 + 拖拽重排(编辑模式)
+ *
+ * 使用原生 HTML5 Drag and Drop API,无额外依赖。
+ * 触摸设备降级为按钮上下移动(HTML5 DnD 在移动端支持不佳)。
+ *
+ * @module WorkflowEditor
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import type { Capability } from '@lokvis/schema';
+import { useWorkspaceStore, MAX_WORKFLOW_STEPS } from '../store/index.js';
+
+export interface WorkflowEditorProps {
+  className?: string;
+}
+
+export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+  const selectNode = useWorkspaceStore((s) => s.selectNode);
+  const removeNode = useWorkspaceStore((s) => s.removeNode);
+  const moveNode = useWorkspaceStore((s) => s.moveNode);
+  const insertNodeAt = useWorkspaceStore((s) => s.insertNodeAt);
+  const capabilities = useWorkspaceStore((s) => s.capabilities);
+  const clearWorkflow = useWorkspaceStore((s) => s.clearWorkflow);
+
+  // 拖拽状态:被拖拽的节点索引 + 当前 hover 的插入位置
+  const [dragIndex, setDragIndex] = React.useState<number | null>(null);
+  const [hoverIndex, setHoverIndex] = React.useState<number | null>(null);
+
+  const handleDragStart = (e: React.DragEvent, index: number) => {
+    setDragIndex(index);
+    e.dataTransfer.effectAllowed = 'move';
+    // Firefox 需要设置 data 才能触发 dragstart
+    e.dataTransfer.setData('text/plain', String(index));
+  };
+
+  const handleDragOver = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    if (dragIndex !== null && dragIndex !== index) {
+      setHoverIndex(index);
+    }
+  };
+
+  const handleDragLeave = () => {
+    // 不立即清空 hoverIndex,因为 dragleave 在子元素间会误触发
+    // 由 handleDrop / handleDragEnd 统一清空
+  };
+
+  const handleDrop = (e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    if (dragIndex !== null && dragIndex !== index) {
+      moveNode(dragIndex, index);
+    }
+    setDragIndex(null);
+    setHoverIndex(null);
+  };
+
+  const handleDragEnd = () => {
+    setDragIndex(null);
+    setHoverIndex(null);
+  };
+
+  // 键盘支持:选中节点后用 ← → 移动。传 node.id 而非 index 避免异步操作后 stale index
+  const handleKeyDown = (e: React.KeyboardEvent, nodeId: string, index: number) => {
+    if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      moveNode(index, index - 1);
+    } else if (e.key === 'ArrowRight' && index < nodes.length - 1) {
+      e.preventDefault();
+      moveNode(index, index + 1);
+    } else if (e.key === 'Delete' || e.key === 'Backspace') {
+      e.preventDefault();
+      removeNode(nodeId);
+    }
+  };
+
+  const canAddMore = nodes.length < MAX_WORKFLOW_STEPS;
+
+  return (
+    <div
+      className={`flex flex-col border-b border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900 ${className}`}
+      role="region"
+      aria-label="工作流编辑器"
+    >
+      {/* 顶部:标题 + 步数 + 清空 */}
+      <div className="flex h-9 shrink-0 items-center justify-between border-b border-zinc-100 px-3 dark:border-zinc-800/50">
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">
+            Workflow Editor
+          </span>
+          <span
+            className={`rounded px-1.5 py-0.5 text-[10px] tabular-nums ${
+              canAddMore
+                ? 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400'
+                : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
+            }`}
+          >
+            {nodes.length}/{MAX_WORKFLOW_STEPS}
+          </span>
+        </div>
+        {nodes.length > 0 && (
+          <button
+            type="button"
+            onClick={() => {
+              if (window.confirm('清空当前工作流?所有节点将被移除。')) {
+                clearWorkflow();
+              }
+            }}
+            className="text-[10px] text-zinc-400 transition-colors hover:text-red-500"
+            aria-label="清空工作流"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+
+      {/* 节点链 */}
+      <div className="flex min-h-[3rem] items-center gap-1 overflow-x-auto px-3 py-2">
+        {nodes.length === 0 ? (
+          <div className="flex flex-1 items-center justify-center py-2 text-center">
+            <p className="text-[11px] text-zinc-400">
+              空工作流 &mdash; 从右侧 <span className="font-mono">Capabilities</span> 面板点击添加节点
+            </p>
+          </div>
+        ) : (
+          <>
+            {/* Source indicator */}
+            <div className="flex shrink-0 items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+              <Icon size={12}><path d="M12 4.5v15m7.5-7.5h-15" /></Icon>
+              Source
+            </div>
+
+            {/* W11.1: 节点之间可插入的连接器(+ 按钮) */}
+            <InsertConnector
+              index={0}
+              capabilities={capabilities}
+              onInsert={insertNodeAt}
+              disabled={nodes.length >= MAX_WORKFLOW_STEPS}
+            />
+
+            {/* 节点 */}
+            {nodes.map((node, i) => {
+              const selected = node.id === selectedNodeId;
+              const isDragging = dragIndex === i;
+              const isHoverTarget = hoverIndex === i && dragIndex !== null && dragIndex !== i;
+              return (
+                <React.Fragment key={node.id}>
+                  <button
+                    type="button"
+                    draggable
+                    onDragStart={(e) => handleDragStart(e, i)}
+                    onDragOver={(e) => handleDragOver(e, i)}
+                    onDragLeave={handleDragLeave}
+                    onDrop={(e) => handleDrop(e, i)}
+                    onDragEnd={handleDragEnd}
+                    onClick={() => selectNode(node.id)}
+                    onKeyDown={(e) => handleKeyDown(e, node.id, i)}
+                    aria-label={`节点 ${node.capability},位置 ${i + 1},拖拽或方向键重排,Delete 删除`}
+                    className={`group relative flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[11px] font-medium transition-all ${
+                      isDragging
+                        ? 'opacity-40'
+                        : isHoverTarget
+                        ? 'ring-2 ring-indigo-400 ring-offset-1 dark:ring-offset-zinc-900'
+                        : selected
+                        ? 'bg-indigo-100 text-indigo-700 ring-1 ring-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:ring-indigo-700'
+                        : node.status === 'running'
+                        ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400'
+                        : node.status === 'success'
+                        ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
+                        : node.status === 'failed'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-950/30 dark:text-red-400'
+                        : 'bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700'
+                    } cursor-grab active:cursor-grabbing`}
+                  >
+                    {/* 步骤序号 */}
+                    <span className="flex h-4 w-4 items-center justify-center rounded-full bg-black/5 text-[9px] tabular-nums dark:bg-white/10">
+                      {i + 1}
+                    </span>
+                    <span className="font-mono">{node.capability}</span>
+                    <StatusDot status={node.status} />
+                    {/* 删除按钮:作为兄弟 button 而非嵌套(HTML 规范禁止 button 嵌套)
+                        使用 position absolute 浮在节点 button 之上,避免叠加在 capability 文字上;
+                        group-hover 显示;stopPropagation 避免触发 selectNode */}
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        removeNode(node.id);
+                      }}
+                      aria-label="删除节点"
+                      tabIndex={-1}
+                      className="absolute -right-1 -top-1 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/40"
+                    >
+                      <Icon size={10} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
+                    </button>
+                  </button>
+
+                  {/* W11.1: 每个节点后的插入连接器(最后一个用于追加到 Output 前) */}
+                  <InsertConnector
+                    index={i + 1}
+                    capabilities={capabilities}
+                    onInsert={insertNodeAt}
+                    disabled={nodes.length >= MAX_WORKFLOW_STEPS}
+                  />
+                </React.Fragment>
+              );
+            })}
+
+            {/* Output indicator */}
+            {nodes.length > 0 && (
+              <div className="flex shrink-0 items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+                <Icon size={12}><path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></Icon>
+                Output
+              </div>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* 提示行 */}
+      {nodes.length > 0 && (
+        <div className="flex shrink-0 items-center gap-2 border-t border-zinc-100 px-3 py-1 text-[10px] text-zinc-400 dark:border-zinc-800/50">
+          <Icon size={10}><path d="M13 5.5a1 1 0 1 1 2 0 1-1 0 0 0-.5.86L16.5 9l1.5-.5a1 1 0 1 1 0 2l-1.5-.5-1 1.5a1 1 0 1 1-2 0l1-1.5-1-1.5a1 1 0 0 1 0-2z" /></Icon>
+          <span>拖拽重排 · 方向键移动 · Delete 删除 · hover 箭头处插入节点</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusDot({ status }: { status: string }) {
+  const color =
+    status === 'running'
+      ? 'bg-amber-500'
+      : status === 'success'
+      ? 'bg-emerald-500'
+      : status === 'failed'
+      ? 'bg-red-500'
+      : status === 'pending'
+      ? 'bg-zinc-400 dark:bg-zinc-500'
+      : 'bg-zinc-300 dark:bg-zinc-600';
+
+  const animate = status === 'running' ? 'animate-pulse' : '';
+
+  return <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${color} ${animate}`} />;
+}
+
+/**
+ * InsertConnector - 节点之间的连接器 + 插入按钮(W11.1)
+ *
+ * 默认显示箭头;hover 时变为 + 按钮,点击弹出 capability 选择菜单。
+ * 选择后调用 onInsert(index, capability)。
+ */
+function InsertConnector({
+  index,
+  capabilities,
+  onInsert,
+  disabled,
+}: {
+  index: number;
+  capabilities: Capability[];
+  onInsert: (index: number, capability: string) => void;
+  disabled?: boolean;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [filter, setFilter] = React.useState('');
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  // 点击外部关闭菜单
+  React.useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      // 用 instanceof guard 替代 as Node 断言:运行时安全 + 类型安全
+      if (!(e.target instanceof Node)) return;
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+        setFilter('');
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const filtered = React.useMemo(
+    () =>
+      capabilities.filter(
+        (c) =>
+          c.name.toLowerCase().includes(filter.toLowerCase()) ||
+          c.description.toLowerCase().includes(filter.toLowerCase())
+      ),
+    [capabilities, filter]
+  );
+
+  const handleSelect = (capName: string) => {
+    onInsert(index, capName);
+    setOpen(false);
+    setFilter('');
+  };
+
+  if (disabled) {
+    // 5 步上限时只显示箭头,不显示 +
+    return (
+      <Icon size={12} className="shrink-0 text-zinc-300 dark:text-zinc-600">
+        <path d="m9 5 7 7-7 7" />
+      </Icon>
+    );
+  }
+
+  return (
+    <div ref={ref} className="relative flex shrink-0 items-center">
+      {/* 箭头 / + 按钮切换 */}
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        aria-label={`在位置 ${index + 1} 插入节点`}
+        title="插入节点"
+        className="group flex h-5 w-5 items-center justify-center rounded text-zinc-300 transition-colors hover:bg-indigo-100 hover:text-indigo-500 dark:text-zinc-600 dark:hover:bg-indigo-950/40"
+      >
+        <Icon size={12} className="group-hover:hidden">
+          <path d="m9 5 7 7-7 7" />
+        </Icon>
+        <Icon size={12} className="hidden group-hover:block" strokeWidth={2.5}>
+          <path d="M12 5v14M5 12h14" />
+        </Icon>
+      </button>
+
+      {/* 弹出菜单 */}
+      {open && (
+        <div className="absolute top-full left-1/2 z-50 mt-1 w-56 -translate-x-1/2 rounded-lg border border-zinc-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
+          {/* 搜索 */}
+          <div className="border-b border-zinc-100 p-1.5 dark:border-zinc-800">
+            <input
+              type="text"
+              autoFocus
+              placeholder="搜索 capability..."
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              className="w-full rounded border border-zinc-200 bg-white px-2 py-1 text-[11px] placeholder-zinc-400 focus:border-indigo-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900"
+            />
+          </div>
+          {/* 列表 */}
+          <div className="max-h-48 overflow-y-auto p-1">
+            {filtered.length === 0 ? (
+              <p className="px-2 py-2 text-center text-[10px] text-zinc-400">无匹配 capability</p>
+            ) : (
+              filtered.map((cap) => (
+                <button
+                  key={cap.name}
+                  type="button"
+                  onClick={() => handleSelect(cap.name)}
+                  className="block w-full rounded px-2 py-1 text-left transition-colors hover:bg-indigo-50 dark:hover:bg-indigo-950/30"
+                >
+                  <span className="block font-mono text-[10px] font-medium text-zinc-700 dark:text-zinc-300">
+                    {cap.name}
+                  </span>
+                  <span className="block truncate text-[9px] text-zinc-500 dark:text-zinc-400">
+                    {cap.description}
+                  </span>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/WorkflowTemplates.tsx

@@ -0,0 +1,101 @@
+/**
+ * WorkflowTemplates - 工作流模板选择器(W11.4)
+ *
+ * 展示 5 个内置模板,点击即应用到当前工作流(替换现有 nodes)。
+ * 适合新用户快速上手,无需从零编排。
+ *
+ * 集成位置:
+ *   - 可作为独立组件渲染(如在 Inspector 底部或 Command Palette 中)
+ *   - Workspace 默认不渲染;由消费方按需挂载
+ *
+ * @module WorkflowTemplates
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+import { WORKFLOW_TEMPLATES, type WorkflowTemplate } from '../data/workflow-templates.js';
+
+export interface WorkflowTemplatesProps {
+  className?: string;
+  /** 应用模板前是否需要确认(当前有节点时默认 true) */
+  confirmIfNotEmpty?: boolean;
+  /** 模板应用后的回调 */
+  onApply?: (template: WorkflowTemplate) => void;
+}
+
+export function WorkflowTemplates({
+  className = '',
+  confirmIfNotEmpty = true,
+  onApply,
+}: WorkflowTemplatesProps) {
+  const loadWorkflowTemplate = useWorkspaceStore((s) => s.loadWorkflowTemplate);
+  const nodes = useWorkspaceStore((s) => s.nodes);
+
+  const handleApply = (tpl: WorkflowTemplate) => {
+    if (confirmIfNotEmpty && nodes.length > 0) {
+      if (!window.confirm(`应用模板「${tpl.name}」将替换当前 ${nodes.length} 个节点,继续?`)) {
+        return;
+      }
+    }
+    loadWorkflowTemplate(
+      tpl.nodes.map((n) => ({ capability: n.capability, params: n.params }))
+    );
+    onApply?.(tpl);
+  };
+
+  return (
+    <div
+      className={`flex flex-col ${className}`}
+      role="region"
+      aria-label="工作流模板"
+    >
+      <div className="flex items-center justify-between px-3 py-2 border-b border-zinc-200 dark:border-zinc-800">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
+          Templates
+        </span>
+        <span className="text-[10px] text-zinc-400">{WORKFLOW_TEMPLATES.length} 内置</span>
+      </div>
+      <div className="grid grid-cols-1 gap-1.5 p-2">
+        {WORKFLOW_TEMPLATES.map((tpl) => (
+          <button
+            key={tpl.id}
+            type="button"
+            onClick={() => handleApply(tpl)}
+            className="group flex items-start gap-2 rounded-md border border-zinc-200 bg-white px-2.5 py-2 text-left transition-all hover:border-indigo-300 hover:bg-indigo-50/50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/30"
+          >
+            <span className="mt-0.5 text-base leading-none">{tpl.icon}</span>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-1">
+                <span className="truncate text-[11px] font-medium text-zinc-700 dark:text-zinc-300">
+                  {tpl.name}
+                </span>
+                <span className="shrink-0 rounded bg-zinc-100 px-1 py-0.5 text-[9px] font-medium uppercase text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+                  {tpl.nodes.length} 步
+                </span>
+              </div>
+              <p className="mt-0.5 truncate text-[10px] text-zinc-500 dark:text-zinc-400">
+                {tpl.description}
+              </p>
+              {/* 节点链预览 */}
+              <div className="mt-1 flex flex-wrap items-center gap-0.5">
+                {tpl.nodes.map((n, i) => (
+                  <React.Fragment key={i}>
+                    {i > 0 && (
+                      <Icon size={8} className="text-zinc-300 dark:text-zinc-600">
+                        <path d="m5 5 5 5-5 5" />
+                      </Icon>
+                    )}
+                    <code className="rounded bg-zinc-100 px-1 py-0.5 text-[9px] text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400">
+                      {n.capability}
+                    </code>
+                  </React.Fragment>
+                ))}
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}