@lokvis/ui-react 0.2.2 → 0.4.2

package/src/components/ToolRunner.tsx

@@ -0,0 +1,352 @@
+/**
+ * ToolRunner - 单工具页组合组件
+ *
+ * 为单工具操作场景(压缩、裁剪、格式转换等)提供一站式 UI:
+ * 上传 → 调参 → 处理 → 对比 → 下载。
+ *
+ * 不依赖 Workspace Store(zustand),通过 engine prop 注入处理函数,
+ * 可在任何 React 应用中独立使用。
+ *
+ * 五层架构:UI 层不直接依赖 Engine 层,engine 函数由消费方传入。
+ * 消费方需自行实现按 capability.name 路由到对应 Blob↔Blob 操作的 wrapper
+ * (engine-image 已不再提供 runTool 统一入口,各 operation 需直接组合调用)。
+ *
+ * @example
+ * ```tsx
+ * import { ToolRunner } from '@lokvis/ui-react';
+ * import { IMAGE_COMPRESS, compress } from '@lokvis/engine-image';
+ *
+ * <ToolRunner
+ *   capability={IMAGE_COMPRESS}
+ *   engine={(name, input, params, opts) => compress(input, params, opts?.signal)}
+ *   onOpenInWorkspace={(state) => { ... }}
+ * />
+ * ```
+ */
+
+import * as React from 'react';
+import type { Capability } from '@lokvis/schema';
+import { Button, Card } from '@lokvis/ui-core';
+import { ParamForm } from './ParamForm.js';
+
+type EngineFn = (
+ toolName: string,
+ input: Blob,
+ params: Record<string, unknown>,
+ options?: { signal?: AbortSignal; onProgress?: (p: number) => void },
+) => Promise<Blob>;
+
+export interface ToolRunnerProps {
+ /** 工具能力定义(决定参数表单和输入类型) */
+ capability: Capability;
+ /** 处理函数(按 capability.name 路由到对应 Blob↔Blob 操作的 wrapper) */
+  engine: EngineFn;
+ /** 在 Workspace 中打开的回调(携带当前状态) */
+ onOpenInWorkspace?: (state: {
+  inputBlob: Blob;
+  outputBlob: Blob | null;
+  params: Record<string, unknown>;
+ }) => void;
+ className?: string;
+}
+
+/**
+ * ToolRunner - 单工具操作组件。
+ *
+ * 内部组合:上传区 + 参数表单 + 预览/对比 + 进度 + 下载。
+ * 所有状态自管理,不依赖外部 store。
+ */
+export function ToolRunner({
+ capability,
+ engine,
+ onOpenInWorkspace,
+ className = '',
+}: ToolRunnerProps) {
+ const [inputBlob, setInputBlob] = React.useState<Blob | null>(null);
+ const [inputUrl, setInputUrl] = React.useState<string | null>(null);
+ const [outputBlob, setOutputBlob] = React.useState<Blob | null>(null);
+ const [outputUrl, setOutputUrl] = React.useState<string | null>(null);
+ const [params, setParams] = React.useState<Record<string, unknown>>(() => {
+  const defaults: Record<string, unknown> = {};
+  for (const p of capability.params) {
+   if (p.default !== undefined) defaults[p.name] = p.default;
+  }
+  return defaults;
+ });
+ const [progress, setProgress] = React.useState(0);
+ const [processing, setProcessing] = React.useState(false);
+ const [error, setError] = React.useState<string | null>(null);
+ const [dragging, setDragging] = React.useState(false);
+ const abortRef = React.useRef<AbortController | null>(null);
+
+ // 清理 ObjectURL
+ React.useEffect(() => {
+  return () => {
+   if (inputUrl) URL.revokeObjectURL(inputUrl);
+   if (outputUrl) URL.revokeObjectURL(outputUrl);
+  };
+ }, [inputUrl, outputUrl]);
+
+ // W21.6: unmount 时 abort 进行中的处理,防止后台泄漏
+ // (engine 函数持有 Worker/Canvas 资源,卸载后继续运行是浪费 + 潜在内存泄漏)
+ React.useEffect(() => {
+  return () => {
+   if (abortRef.current) {
+    abortRef.current.abort();
+    abortRef.current = null;
+   }
+  };
+ }, []);
+
+ const accept = capability.inputTypes.join(',');
+
+ function handleFiles(files: FileList | File[] | null) {
+  if (!files || files.length === 0) return;
+  const file = files[0];
+  if (!file) return;
+
+  setInputBlob(file);
+  if (inputUrl) URL.revokeObjectURL(inputUrl);
+  setInputUrl(URL.createObjectURL(file));
+
+  // 重置输出
+  setOutputBlob(null);
+  if (outputUrl) {
+   URL.revokeObjectURL(outputUrl);
+   setOutputUrl(null);
+  }
+ }
+
+ async function handleProcess() {
+  if (!inputBlob) return;
+  setProcessing(true);
+  setProgress(0);
+  setError(null);
+
+  abortRef.current = new AbortController();
+  try {
+   const result = await engine(capability.name, inputBlob, params, {
+    signal: abortRef.current.signal,
+    onProgress: setProgress,
+   });
+   setOutputBlob(result);
+   if (outputUrl) URL.revokeObjectURL(outputUrl);
+   setOutputUrl(URL.createObjectURL(result));
+  } catch (err) {
+   if (err instanceof Error && err.name === 'AbortError') return;
+   setError(err instanceof Error ? err.message : String(err));
+  } finally {
+   setProcessing(false);
+   abortRef.current = null;
+  }
+ }
+
+ function handleCancel() {
+  abortRef.current?.abort();
+ }
+
+ const downloadName = outputBlob
+  ? `output.${outputBlob.type.split('/')[1] ?? 'bin'}`
+  : 'output';
+
+ return (
+  <div className={`flex flex-col gap-6 ${className}`}>
+   {/* Upload zone */}
+   {!inputBlob && (
+    <label
+     className={`block cursor-pointer rounded-xl border-2 border-dashed p-10 text-center transition-all ${
+      dragging
+       ? 'border-[var(--lokvis-primary)] bg-[var(--lokvis-primary)]/10'
+       : 'border-[var(--lokvis-border)] hover:border-[var(--lokvis-primary)]/50 hover:bg-[var(--lokvis-surface-muted)]'
+     }`}
+     onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
+     onDragLeave={() => setDragging(false)}
+     onDrop={(e) => {
+      e.preventDefault();
+      setDragging(false);
+      handleFiles(e.dataTransfer.files);
+     }}
+    >
+     <input
+      type="file"
+      accept={accept}
+      className="hidden"
+      onChange={(e) => handleFiles(e.target.files)}
+     />
+     <div className="flex flex-col items-center gap-3">
+      <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[var(--lokvis-surface-muted)]">
+       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-[var(--lokvis-fg-subtle)]">
+        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" y1="3" x2="12" y2="15" />
+       </svg>
+      </div>
+      <div>
+       <p className="text-sm font-medium text-[var(--lokvis-fg)]">
+        Drop file here or click to upload
+       </p>
+       <p className="mt-1 text-xs text-[var(--lokvis-fg-subtle)]">
+        Accepted: {accept || 'any file'}
+       </p>
+      </div>
+     </div>
+    </label>
+   )}
+
+   {/* Processing area */}
+   {inputBlob && (
+    <div className="grid gap-6 md:grid-cols-2">
+     {/* Left: Parameters */}
+     <div className="space-y-4">
+      <Card>
+       <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-sm font-semibold text-[var(--lokvis-fg)]">
+         Parameters
+        </h3>
+        <span className="rounded bg-[var(--lokvis-surface-muted)] px-2 py-0.5 font-mono text-xs text-[var(--lokvis-primary)]">
+         {capability.name}
+        </span>
+       </div>
+       <ParamForm
+        capability={capability}
+        values={params}
+        onChange={setParams}
+       />
+      </Card>
+
+      {/* Actions */}
+      <div className="flex gap-3">
+       <Button
+        variant="primary"
+        size="md"
+        onClick={handleProcess}
+        loading={processing}
+        disabled={!inputBlob}
+       >
+        {processing ? 'Processing...' : 'Process'}
+       </Button>
+       <Button
+        variant="secondary"
+        size="md"
+        onClick={() => {
+         setInputBlob(null);
+         if (inputUrl) URL.revokeObjectURL(inputUrl);
+         setInputUrl(null);
+         setOutputBlob(null);
+         if (outputUrl) {
+          URL.revokeObjectURL(outputUrl);
+          setOutputUrl(null);
+         }
+        }}
+       >
+        Change file
+       </Button>
+       {onOpenInWorkspace && (
+        <Button
+         variant="ghost"
+         size="md"
+         onClick={() => onOpenInWorkspace({ inputBlob, outputBlob, params })}
+        >
+         Open in Workspace →
+        </Button>
+       )}
+      </div>
+
+      {/* Progress */}
+      {processing && (
+       <div className="space-y-2">
+        <div className="flex items-center justify-between text-xs text-[var(--lokvis-fg-muted)]">
+         <span>Processing...</span>
+         <span className="tabular-nums">{Math.round(progress)}%</span>
+        </div>
+        <div className="h-1.5 overflow-hidden rounded-full bg-[var(--lokvis-border)]">
+         <div
+          className="h-full rounded-full bg-[var(--lokvis-primary)] transition-all duration-200"
+          style={{ width: `${progress}%` }}
+         />
+        </div>
+        <button
+         type="button"
+         onClick={handleCancel}
+         className="text-xs text-[var(--lokvis-danger)] hover:underline"
+        >
+         Cancel
+        </button>
+       </div>
+      )}
+
+      {/* Error */}
+      {error && (
+       <div className="rounded-lg border border-[var(--lokvis-danger)]/30 bg-[var(--lokvis-danger)]/10 px-4 py-3 text-sm text-[var(--lokvis-danger)]">
+        {error}
+       </div>
+      )}
+
+      {/* Download */}
+      {outputBlob && outputUrl && (
+       <Card>
+        <div className="flex items-center justify-between">
+         <div>
+          <p className="text-sm font-medium text-[var(--lokvis-fg)]">Ready to download</p>
+          <p className="mt-1 text-xs text-[var(--lokvis-fg-muted)]">
+           {(outputBlob.size / 1024).toFixed(1)} KB · {outputBlob.type.split('/')[1] ?? 'file'}
+          </p>
+         </div>
+         <a
+          href={outputUrl}
+          download={downloadName}
+          className="inline-flex items-center gap-1.5 rounded-lg bg-[var(--lokvis-primary)] px-4 py-2 text-sm font-medium text-[var(--lokvis-primary-fg)] transition-colors hover:bg-[var(--lokvis-primary-hover)]"
+         >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+           <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+           <polyline points="7 10 12 15 17 10" />
+           <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+          Download
+         </a>
+        </div>
+       </Card>
+      )}
+     </div>
+
+     {/* Right: Preview */}
+     <div className="space-y-4">
+      {/* Input preview */}
+      {inputUrl && (
+       <Card>
+        <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
+         Input
+        </h4>
+        <img
+         src={inputUrl}
+         alt="Input preview"
+         className="max-h-80 w-full rounded-lg object-contain"
+        />
+        <p className="mt-2 text-xs text-[var(--lokvis-fg-muted)]">
+         {(inputBlob.size / 1024).toFixed(1)} KB · {inputBlob.type.split('/')[1] ?? 'file'}
+        </p>
+       </Card>
+      )}
+
+      {/* Output preview */}
+      {outputUrl && (
+       <Card>
+        <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
+         Output
+        </h4>
+        <img
+         src={outputUrl}
+         alt="Output preview"
+         className="max-h-80 w-full rounded-lg object-contain"
+        />
+        <p className="mt-2 text-xs text-[var(--lokvis-fg-muted)]">
+         {(outputBlob!.size / 1024).toFixed(1)} KB · {outputBlob!.type.split('/')[1] ?? 'file'}
+        </p>
+       </Card>
+      )}
+     </div>
+    </div>
+   )}
+  </div>
+ );
+}

package/src/components/Toolbar.tsx

@@ -36,13 +36,13 @@ export function Toolbar({ title = 'Lokvis Workspace', rightExtra }: ToolbarProps
  }
 
  return (
- <header className="flex h-12 shrink-0 items-center justify-between border-b border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-4">
+ <header className="flex h-[var(--lokvis-toolbar-h)] shrink-0 items-center justify-between border-b border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-4">
  {/* Left: Brand */}
  <div className="flex items-center gap-2.5 min-w-0">
  <span
  className="shrink-0 text-base font-bold leading-none"
  style={{
- background: 'linear-gradient(135deg, #6366f1, #a855f7)',
+ background: 'linear-gradient(135deg, var(--lokvis-primary), var(--lokvis-info))',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  }}

package/src/components/WorkflowEditor.tsx

@@ -18,9 +18,11 @@
  */
 
 import * as React from 'react';
-import { Icon } from '@lokvis/ui-core';
+import { ConfirmDialog, Icon, Input } from '@lokvis/ui-core';
 import type { Capability } from '@lokvis/schema';
 import { useWorkspaceStore, MAX_WORKFLOW_STEPS } from '../store/index.js';
+import { filterCapabilities } from '../utils.js';
+import { StatusDot } from './StatusDot.js';
 
 export interface WorkflowEditorProps {
  className?: string;
@@ -34,11 +36,14 @@ export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
  const moveNode = useWorkspaceStore((s) => s.moveNode);
  const insertNodeAt = useWorkspaceStore((s) => s.insertNodeAt);
  const capabilities = useWorkspaceStore((s) => s.capabilities);
+ const stubCapabilities = useWorkspaceStore((s) => s.stubCapabilities);
  const clearWorkflow = useWorkspaceStore((s) => s.clearWorkflow);
 
  // 拖拽状态:被拖拽的节点索引 + 当前 hover 的插入位置
  const [dragIndex, setDragIndex] = React.useState<number | null>(null);
  const [hoverIndex, setHoverIndex] = React.useState<number | null>(null);
+ // 清空确认对话框
+ const [clearOpen, setClearOpen] = React.useState(false);
 
  const handleDragStart = (e: React.DragEvent, index: number) => {
  setDragIndex(index);
@@ -115,11 +120,7 @@ export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
  {nodes.length > 0 && (
  <button
  type="button"
- onClick={() => {
- if (window.confirm('清空当前工作流?所有节点将被移除。')) {
- clearWorkflow();
- }
- }}
+ onClick={() => setClearOpen(true)}
  className="text-[10px] text-[var(--lokvis-fg-subtle)] transition-colors hover:text-[var(--lokvis-danger)]"
  aria-label="清空工作流"
  >
@@ -148,6 +149,7 @@ export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
  <InsertConnector
  index={0}
  capabilities={capabilities}
+ stubCapabilities={stubCapabilities}
  onInsert={insertNodeAt}
  disabled={nodes.length >= MAX_WORKFLOW_STEPS}
  />
@@ -159,6 +161,8 @@ export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
  const isHoverTarget = hoverIndex === i && dragIndex !== null && dragIndex !== i;
  return (
  <React.Fragment key={node.id}>
+ {/* D7: remove button 作为 node button 的兄弟而非子元素(HTML 规范禁止 button 嵌套) */}
+ <div className="group relative flex shrink-0 items-center">
  <button
  type="button"
  draggable
@@ -170,7 +174,7 @@ export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
  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 ${
+ className={`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
@@ -192,27 +196,24 @@ export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
  </span>
  <span className="font-mono">{node.capability}</span>
  <StatusDot status={node.status} />
- {/* 删除按钮:作为兄弟 button 而非嵌套(HTML 规范禁止 button 嵌套)
- 使用 position absolute 浮在节点 button 之上,避免叠加在 capability 文字上;
- group-hover 显示;stopPropagation 避免触发 selectNode */}
+ </button>
+ {/* 删除按钮:兄弟 button(position absolute 浮在节点右上角),group-hover 显示 */}
  <button
  type="button"
- onClick={(e) => {
- e.stopPropagation();
- removeNode(node.id);
- }}
+ onClick={() => 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-[var(--lokvis-danger)]/15 hover:text-[var(--lokvis-danger)]"
  >
  <Icon size={10} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
  </button>
- </button>
+ </div>
 
  {/* W11.1: 每个节点后的插入连接器(最后一个用于追加到 Output 前) */}
  <InsertConnector
  index={i + 1}
  capabilities={capabilities}
+ stubCapabilities={stubCapabilities}
  onInsert={insertNodeAt}
  disabled={nodes.length >= MAX_WORKFLOW_STEPS}
  />
@@ -238,27 +239,24 @@ export function WorkflowEditor({ className = '' }: WorkflowEditorProps) {
  <span>拖拽重排 · 方向键移动 · Delete 删除 · hover 箭头处插入节点</span>
  </div>
  )}
+
+ {/* 清空确认对话框(替代 window.confirm) */}
+ <ConfirmDialog
+ open={clearOpen}
+ title="清空工作流"
+ message="清空当前工作流?所有节点将被移除。"
+ confirmText="清空"
+ variant="danger"
+ onConfirm={() => {
+ clearWorkflow();
+ setClearOpen(false);
+ }}
+ onClose={() => setClearOpen(false)}
+ />
  </div>
  );
 }
 
-function StatusDot({ status }: { status: string }) {
- const color =
- status === 'running'
- ? 'bg-[var(--lokvis-warning)]'
- : status === 'success'
- ? 'bg-[var(--lokvis-success)]'
- : status === 'failed'
- ? 'bg-[var(--lokvis-danger)]'
- : status === 'pending'
- ? 'bg-[var(--lokvis-fg-subtle)]'
- : 'bg-[var(--lokvis-fg-subtle)]';
-
- const animate = status === 'running' ? 'animate-pulse' : '';
-
- return <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${color} ${animate}`} />;
-}
-
 /**
  * InsertConnector - 节点之间的连接器 + 插入按钮(W11.1)
  *
@@ -268,11 +266,13 @@ function StatusDot({ status }: { status: string }) {
 function InsertConnector({
  index,
  capabilities,
+ stubCapabilities,
  onInsert,
  disabled,
 }: {
  index: number;
  capabilities: Capability[];
+ stubCapabilities: Set<string>;
  onInsert: (index: number, capability: string) => void;
  disabled?: boolean;
 }) {
@@ -296,12 +296,7 @@ function InsertConnector({
  }, [open]);
 
  const filtered = React.useMemo(
- () =>
- capabilities.filter(
- (c) =>
- c.name.toLowerCase().includes(filter.toLowerCase()) ||
- c.description.toLowerCase().includes(filter.toLowerCase())
- ),
+ () => filterCapabilities(capabilities, filter),
  [capabilities, filter]
  );
 
@@ -340,16 +335,16 @@ function InsertConnector({
 
  {/* 弹出菜单 */}
  {open && (
- <div className="absolute top-full left-1/2 z-50 mt-1 w-56 -translate-x-1/2 rounded-lg border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] shadow-lg">
+ <div className="absolute top-full left-1/2 z-50 mt-1 w-56 -translate-x-1/2 rounded-lg border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] shadow-[var(--lokvis-elevation-2)]">
  {/* 搜索 */}
  <div className="border-b border-[var(--lokvis-border)] p-1.5">
- <input
+ <Input
  type="text"
+ size="sm"
  autoFocus
  placeholder="搜索 capability..."
  value={filter}
  onChange={(e) => setFilter(e.target.value)}
- className="w-full rounded border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-2 py-1 text-[11px] placeholder-zinc-400 focus:border-[var(--lokvis-primary)] focus:outline-none"
  />
  </div>
  {/* 列表 */}
@@ -357,21 +352,33 @@ function InsertConnector({
  {filtered.length === 0 ? (
  <p className="px-2 py-2 text-center text-[10px] text-[var(--lokvis-fg-subtle)]">无匹配 capability</p>
  ) : (
- filtered.map((cap) => (
+ filtered.map((cap) => {
+ // A7: stub-only 能力显示 "Coming Soon" 标记
+ const isStubOnly = stubCapabilities.has(cap.name);
+ return (
  <button
  key={cap.name}
  type="button"
  onClick={() => handleSelect(cap.name)}
+ title={isStubOnly ? 'Coming soon — no engine installed yet' : undefined}
  className="block w-full rounded px-2 py-1 text-left transition-colors hover:bg-[var(--lokvis-primary)]/10"
  >
+ <span className="flex items-center justify-between gap-1.5">
  <span className="block font-mono text-[10px] font-medium text-[var(--lokvis-fg-muted)]">
  {cap.name}
  </span>
+ {isStubOnly && (
+ <span className="shrink-0 rounded px-1 py-0.5 text-[8px] font-medium uppercase bg-[var(--lokvis-warning)]/15 text-[var(--lokvis-warning)]">
+ Soon
+ </span>
+ )}
+ </span>
  <span className="block truncate text-[9px] text-[var(--lokvis-fg-muted)]">
  {cap.description}
  </span>
  </button>
- ))
+ );
+ })
  )}
  </div>
  </div>

package/src/components/WorkflowTemplates.tsx

@@ -12,7 +12,7 @@
  */
 
 import * as React from 'react';
-import { Icon } from '@lokvis/ui-core';
+import { ConfirmDialog, Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 import { WORKFLOW_TEMPLATES, type WorkflowTemplate } from '../data/workflow-templates.js';
 
@@ -31,13 +31,18 @@ export function WorkflowTemplates({
 }: WorkflowTemplatesProps) {
  const loadWorkflowTemplate = useWorkspaceStore((s) => s.loadWorkflowTemplate);
  const nodes = useWorkspaceStore((s) => s.nodes);
+ // 待确认应用的模板(非空工作流替换前需用户确认)
+ const [pendingTpl, setPendingTpl] = React.useState<WorkflowTemplate | null>(null);
 
  const handleApply = (tpl: WorkflowTemplate) => {
  if (confirmIfNotEmpty && nodes.length > 0) {
- if (!window.confirm(`应用模板「${tpl.name}」将替换当前 ${nodes.length} 个节点,继续?`)) {
+ setPendingTpl(tpl);
  return;
  }
- }
+ applyTemplate(tpl);
+ };
+
+ const applyTemplate = (tpl: WorkflowTemplate) => {
  loadWorkflowTemplate(
  tpl.nodes.map((n) => ({ capability: n.capability, params: n.params }))
  );
@@ -62,7 +67,7 @@ export function WorkflowTemplates({
  key={tpl.id}
  type="button"
  onClick={() => handleApply(tpl)}
- className="group flex items-start gap-2 rounded-md border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-2.5 py-2 text-left transition-all hover:border-[var(--lokvis-primary)]/50 hover:bg-[var(--lokvis-primary)]/10/50"
+ className="group flex items-start gap-2 rounded-md border border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-2.5 py-2 text-left transition-all hover:border-[var(--lokvis-primary)]/50 hover:bg-[var(--lokvis-primary)]/10"
  >
  <span className="mt-0.5 text-base leading-none">{tpl.icon}</span>
  <div className="flex-1 min-w-0">
@@ -96,6 +101,24 @@ export function WorkflowTemplates({
  </button>
  ))}
  </div>
+
+ {/* 替换确认对话框(替代 window.confirm) */}
+ <ConfirmDialog
+ open={pendingTpl !== null}
+ title="应用模板"
+ message={
+ pendingTpl
+ ? `应用模板「${pendingTpl.name}」将替换当前 ${nodes.length} 个节点,继续?`
+ : ''
+ }
+ confirmText="替换"
+ variant="danger"
+ onConfirm={() => {
+ if (pendingTpl) applyTemplate(pendingTpl);
+ setPendingTpl(null);
+ }}
+ onClose={() => setPendingTpl(null)}
+ />
  </div>
  );
 }