@lokvis/ui-react 0.2.1 → 0.4.1

package/src/components/WorkflowTemplates.tsx

@@ -5,97 +5,120 @@
  * 适合新用户快速上手,无需从零编排。
  *
  * 集成位置:
- *   - 可作为独立组件渲染(如在 Inspector 底部或 Command Palette 中)
- *   - Workspace 默认不渲染;由消费方按需挂载
+ * - 可作为独立组件渲染(如在 Inspector 底部或 Command Palette 中)
+ * - Workspace 默认不渲染;由消费方按需挂载
  *
  * @module WorkflowTemplates
  */
 
 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';
 
 export interface WorkflowTemplatesProps {
-  className?: string;
-  /** 应用模板前是否需要确认(当前有节点时默认 true) */
-  confirmIfNotEmpty?: boolean;
-  /** 模板应用后的回调 */
-  onApply?: (template: WorkflowTemplate) => void;
+ className?: string;
+ /** 应用模板前是否需要确认(当前有节点时默认 true) */
+ confirmIfNotEmpty?: boolean;
+ /** 模板应用后的回调 */
+ onApply?: (template: WorkflowTemplate) => void;
 }
 
 export function WorkflowTemplates({
-  className = '',
-  confirmIfNotEmpty = true,
-  onApply,
+ className = '',
+ confirmIfNotEmpty = true,
+ onApply,
 }: WorkflowTemplatesProps) {
-  const loadWorkflowTemplate = useWorkspaceStore((s) => s.loadWorkflowTemplate);
-  const nodes = useWorkspaceStore((s) => s.nodes);
+ 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} 个节点,继续?`)) {
-        return;
-      }
-    }
-    loadWorkflowTemplate(
-      tpl.nodes.map((n) => ({ capability: n.capability, params: n.params }))
-    );
-    onApply?.(tpl);
-  };
+ const handleApply = (tpl: WorkflowTemplate) => {
+ if (confirmIfNotEmpty && nodes.length > 0) {
+ setPendingTpl(tpl);
+ return;
+ }
+ applyTemplate(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>
-  );
+ const applyTemplate = (tpl: WorkflowTemplate) => {
+ 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-[var(--lokvis-border)]">
+ <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
+ Templates
+ </span>
+ <span className="text-[10px] text-[var(--lokvis-fg-subtle)]">{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-[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">
+ <div className="flex items-center justify-between gap-1">
+ <span className="truncate text-[11px] font-medium text-[var(--lokvis-fg-muted)]">
+ {tpl.name}
+ </span>
+ <span className="shrink-0 rounded bg-[var(--lokvis-surface-muted)] px-1 py-0.5 text-[9px] font-medium uppercase text-[var(--lokvis-fg-muted)]">
+ {tpl.nodes.length} 步
+ </span>
+ </div>
+ <p className="mt-0.5 truncate text-[10px] text-[var(--lokvis-fg-muted)]">
+ {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-[var(--lokvis-fg-subtle)]">
+ <path d="m5 5 5 5-5 5" />
+ </Icon>
+ )}
+ <code className="rounded bg-[var(--lokvis-surface-muted)] px-1 py-0.5 text-[9px] text-[var(--lokvis-fg-muted)]">
+ {n.capability}
+ </code>
+ </React.Fragment>
+ ))}
+ </div>
+ </div>
+ </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>
+ );
 }