@lokvis/ui-react 0.2.1 → 0.4.1

package/src/components/Workspace.tsx

@@ -2,30 +2,30 @@
  * Workspace - 完整工作台组件
  *
  * W9 布局:
- *   ┌──────────────────────────────────────────────┐
- *   │ Toolbar                                       │
- *   ├──────┬──────────────┬───────────────────────┤
- *   │Asset │   Canvas     │   Inspector           │
- *   │Panel │   (center)   │   (right)             │
- *   ├──────┴──────────────┴───────────────────────┤
- *   │ PipelineBar                                  │
- *   ├──────────────────────────────────────────────┤
- *   │ HistoryPanel (horizontal, W9.1)              │
- *   ├──────────────────────────────────────────────┤
- *   │ DownloadPanel (W9.5,条件渲染)                │
- *   ├──────────────────────────────────────────────┤
- *   │ StatusBar                                    │
- *   └──────────────────────────────────────────────┘
+ * ┌──────────────────────────────────────────────┐
+ * │ Toolbar │
+ * ├──────┬──────────────┬───────────────────────┤
+ * │Asset │ Canvas │ Inspector │
+ * │Panel │ (center) │ (right) │
+ * ├──────┴──────────────┴───────────────────────┤
+ * │ PipelineBar │
+ * ├──────────────────────────────────────────────┤
+ * │ HistoryPanel (horizontal, W9.1) │
+ * ├──────────────────────────────────────────────┤
+ * │ DownloadPanel (W9.5,条件渲染) │
+ * ├──────────────────────────────────────────────┤
+ * │ StatusBar │
+ * └──────────────────────────────────────────────┘
  *
  * W9 集成:
- *   - 9.1 HistoryPanel 移到底部(horizontal variant)
- *   - 9.2 CommandPalette(⌘K)挂载在 Workspace 内
- *   - 9.3 GlobalDropzone 全屏拖拽 + MIME 校验
- *   - 9.4 Canvas 内置 CompareSlider(before/after)
- *   - 9.5 DownloadPanel 在 HistoryPanel 下方,有 outputs 时显示
- *   - 9.6 StatusBar 已增强(当前工具/进度/在线)
- *   - 9.7 ThemeToggle 通过 Toolbar rightExtra 挂载
- *   - 9.8 响应式:移动端折叠为 drawer 模式
+ * - 9.1 HistoryPanel 移到底部(horizontal variant)
+ * - 9.2 CommandPalette(⌘K)挂载在 Workspace 内
+ * - 9.3 GlobalDropzone 全屏拖拽 + MIME 校验
+ * - 9.4 Canvas 内置 CompareSlider(before/after)
+ * - 9.5 DownloadPanel 在 HistoryPanel 下方,有 outputs 时显示
+ * - 9.6 StatusBar 已增强(当前工具/进度/在线)
+ * - 9.7 ThemeToggle 通过 Toolbar rightExtra 挂载
+ * - 9.8 响应式:移动端折叠为 drawer 模式
  *
  * 通过 useLokvis 自动初始化 Runtime 与插件。
  *
@@ -39,7 +39,7 @@
  */
 
 import * as React from 'react';
-import { Icon } from '@lokvis/ui-core';
+import { ConfirmDialog, Icon } from '@lokvis/ui-core';
 import { useLokvis, type UseLokvisOptions } from '../hooks/useLokvis.js';
 import { useBreakpoints } from '../hooks/useMediaQuery.js';
 import { Toolbar } from './Toolbar.js';
@@ -56,233 +56,320 @@ import { DownloadPanel } from './DownloadPanel.js';
 import { CommandPalette, useCommandPalette } from './CommandPalette.js';
 import { GlobalDropzone } from './GlobalDropzone.js';
 import { ThemeToggle } from './ThemeToggle.js';
+import { ErrorBoundary } from './ErrorBoundary.js';
 import { useShareLink } from '../hooks/useShareLink.js';
 import { useWorkspaceStore } from '../store/index.js';
 
 export interface WorkspaceProps extends UseLokvisOptions {
-  /** 顶部标题 */
-  title?: string;
-  /** 是否显示状态栏（默认 true） */
-  showStatusBar?: boolean;
-  /** 是否显示历史面板（默认 true,W7.1） */
-  showHistoryPanel?: boolean;
-  /** 是否启用全屏拖拽导入（默认 true,W9.3） */
-  enableGlobalDropzone?: boolean;
-  /** 是否启用 Command Palette ⌘K（默认 true,W9.2） */
-  enableCommandPalette?: boolean;
-  /** 是否启用 ThemeToggle（默认 true,W9.7） */
-  enableThemeToggle?: boolean;
-  /** 是否启用 CompareSlider（默认 true,W9.4） */
-  enableCompare?: boolean;
-  /** 是否启用 DownloadPanel（默认 true,W9.5） */
-  enableDownloadPanel?: boolean;
-  /** 是否启用拖拽式 WorkflowEditor（默认 false,W10.4;关闭则用只读 PipelineBar） */
-  enableWorkflowEditor?: boolean;
-  /** 是否启用 ProgressBar + Cancel 按钮（默认 true,W11.6） */
-  enableProgressBar?: boolean;
-  /** 是否启用 ErrorBanner 错误信息横幅（默认 true,W11.3） */
-  enableErrorBanner?: boolean;
-  /** 是否从 URL ?workflow= 参数加载分享工作流（默认 true,W11.5） */
-  enableShareLink?: boolean;
-  className?: string;
+ /** 顶部标题 */
+ title?: string;
+ /** 是否显示状态栏（默认 true） */
+ showStatusBar?: boolean;
+ /** 是否显示历史面板（默认 true,W7.1） */
+ showHistoryPanel?: boolean;
+ /** 是否启用全屏拖拽导入（默认 true,W9.3） */
+ enableGlobalDropzone?: boolean;
+ /** 是否启用 Command Palette ⌘K（默认 true,W9.2） */
+ enableCommandPalette?: boolean;
+ /** 是否启用 ThemeToggle（默认 true,W9.7） */
+ enableThemeToggle?: boolean;
+ /** 是否启用 CompareSlider（默认 true,W9.4） */
+ enableCompare?: boolean;
+ /** 是否启用 DownloadPanel（默认 true,W9.5） */
+ enableDownloadPanel?: boolean;
+ /** 是否启用拖拽式 WorkflowEditor（默认 false,W10.4;关闭则用只读 PipelineBar） */
+ enableWorkflowEditor?: boolean;
+ /** 是否启用 ProgressBar + Cancel 按钮（默认 true,W11.6） */
+ enableProgressBar?: boolean;
+ /** 是否启用 ErrorBanner 错误信息横幅（默认 true,W11.3） */
+ enableErrorBanner?: boolean;
+ /** 是否从 URL ?workflow= 参数加载分享工作流（默认 true,W11.5） */
+ enableShareLink?: boolean;
+
+ /**
+  * 初始化时自动导入的资产列表。
+  * Runtime 就绪后,通过 runtime.importAsset() 逐个导入。
+  */
+ initialAssets?: Array<{ blob: Blob; name: string }>;
+ /**
+  * 初始化时预选的能力名称(自动添加到工作流节点)。
+  */
+ initialCapability?: string;
+ /**
+  * 初始化时预填的参数(与 initialCapability 配合使用)。
+  */
+ initialParams?: Record<string, unknown>;
+ /**
+  * 布局模式:
+  * - 'full': 完整三栏布局(默认)
+  * - 'focused': 精简模式,隐藏 AssetPanel 和 PipelineBar,适合单工具页跳转进入
+  */
+ mode?: 'full' | 'focused';
+
+ className?: string;
 }
 
 /** W9.8 移动端抽屉切换状态 */
 type MobilePanel = 'asset' | 'inspector' | null;
 
 export function Workspace({
-  title,
-  showStatusBar = true,
-  showHistoryPanel = true,
-  enableGlobalDropzone = true,
-  enableCommandPalette = true,
-  enableThemeToggle = true,
-  enableCompare = true,
-  enableDownloadPanel = true,
-  enableWorkflowEditor = false,
-  enableProgressBar = true,
-  enableErrorBanner = true,
-  enableShareLink = true,
-  className = '',
-  ...lokvisOptions
+ title,
+ showStatusBar = true,
+ showHistoryPanel = true,
+ enableGlobalDropzone = true,
+ enableCommandPalette = true,
+ enableThemeToggle = true,
+ enableCompare = true,
+ enableDownloadPanel = true,
+ enableWorkflowEditor = false,
+ enableProgressBar = true,
+ enableErrorBanner = true,
+ enableShareLink = true,
+ initialAssets,
+ initialCapability,
+ initialParams,
+ mode = 'full',
+ className = '',
+ ...lokvisOptions
 }: WorkspaceProps) {
-  const { status, error } = useLokvis(lokvisOptions);
-  const { isMobile } = useBreakpoints();
-  const [paletteOpen, setPaletteOpen] = useCommandPalette({ enabled: enableCommandPalette });
-  // W9.8 移动端抽屉:Asset / Inspector 切换显示
-  const [mobilePanel, setMobilePanel] = React.useState<MobilePanel>(null);
+ const { status, error } = useLokvis(lokvisOptions);
+ const { isMobile } = useBreakpoints();
+ const [paletteOpen, setPaletteOpen] = useCommandPalette({ enabled: enableCommandPalette });
+ // W9.8 移动端抽屉:Asset / Inspector 切换显示
+ const [mobilePanel, setMobilePanel] = React.useState<MobilePanel>(null);
+
+ // W11.5: 从 URL ?workflow= 参数加载分享工作流(runtime 就绪后执行一次)
+ // 保护:若用户已通过其它路径(如 localStorage 恢复或手动添加)有 nodes,
+ // 不静默替换 —— 用 ConfirmDialog 让用户显式选择,避免丢失未保存工作。
+ // 注:不用 useWorkspaceStore 订阅 nodes.length 做 effect 依赖
+ // (review 反馈:那样 nodesLength 变化会触发 effect 重跑,而 ref 已 true
+ // 时重跑无意义,且语义上 effect 只应在 status 切换时跑一次)。
+ // 改用 getState() 在体内读取最新值,既不订阅也不进 deps。
+ const { loadFromCurrentUrl } = useShareLink();
+ const shareLoadedRef = React.useRef(false);
+ // 待确认的分享链接替换(nodes>0 时需用户确认才替换)
+ const [shareConfirmOpen, setShareConfirmOpen] = React.useState(false);
+ const [shareConfirmNodes, setShareConfirmNodes] = React.useState(0);
+ React.useEffect(() => {
+ if (enableShareLink && !shareLoadedRef.current && status !== 'initializing' && status !== 'error') {
+ shareLoadedRef.current = true;
+ // 仅在 URL 含 ?workflow= 参数时才提示(避免无谓弹窗)
+ const hasShareParam = typeof window !== 'undefined'
+ && new URLSearchParams(window.location.search).has('workflow');
+ if (!hasShareParam) return;
+ // 读取当前 nodes 长度(最新值,非订阅快照)
+ const currentNodesLength = useWorkspaceStore.getState().nodes.length;
+ if (currentNodesLength > 0) {
+ setShareConfirmNodes(currentNodesLength);
+ setShareConfirmOpen(true);
+ return;
+ }
+ loadFromCurrentUrl();
+ }
+ }, [enableShareLink, status, loadFromCurrentUrl]);
 
-  // W11.5: 从 URL ?workflow= 参数加载分享工作流(runtime 就绪后执行一次)
-  // 保护:若用户已通过其它路径(如 localStorage 恢复或手动添加)有 nodes,
-  // 不静默替换 —— 用 confirm 让用户显式选择,避免丢失未保存工作。
-  // 注:不用 useWorkspaceStore 订阅 nodes.length 做 effect 依赖
-  //   (review 反馈:那样 nodesLength 变化会触发 effect 重跑,而 ref 已 true
-  //   时重跑无意义,且语义上 effect 只应在 status 切换时跑一次)。
-  //   改用 getState() 在体内读取最新值,既不订阅也不进 deps。
-  const { loadFromCurrentUrl } = useShareLink();
-  const shareLoadedRef = React.useRef(false);
-  React.useEffect(() => {
-    if (enableShareLink && !shareLoadedRef.current && status !== 'initializing' && status !== 'error') {
-      shareLoadedRef.current = true;
-      // 仅在 URL 含 ?workflow= 参数时才提示(避免无谓 confirm 弹窗)
-      const hasShareParam = typeof window !== 'undefined'
-        && new URLSearchParams(window.location.search).has('workflow');
-      if (!hasShareParam) return;
-      // 读取当前 nodes 长度(最新值,非订阅快照)
-      const currentNodesLength = useWorkspaceStore.getState().nodes.length;
-      if (currentNodesLength > 0) {
-        const ok = window.confirm(
-          `检测到分享工作流链接,但当前已有 ${currentNodesLength} 个节点。是否替换为分享的工作流?`
-        );
-        if (!ok) return;
-      }
-      loadFromCurrentUrl();
+ // 初始化 props:runtime 就绪后导入资产、添加节点、填充参数
+ const initDoneRef = React.useRef(false);
+ React.useEffect(() => {
+  if (initDoneRef.current || status !== 'ready') return;
+  const store = useWorkspaceStore.getState();
+  if (!store.runtime) return;
+  initDoneRef.current = true;
+
+  (async () => {
+   // 导入初始资产
+   if (initialAssets?.length) {
+    for (const { blob, name } of initialAssets) {
+     const file = new File([blob], name, { type: blob.type });
+     await store.runtime!.importAsset({ kind: 'file', file });
+    }
+    await store.refreshAssets();
+    // 自动选中第一个资产
+    const assets = store.assets;
+    if (assets.length > 0) {
+     store.selectAsset(assets[0]!.id);
     }
-  }, [enableShareLink, status, loadFromCurrentUrl]);
+   }
+
+   // 添加初始能力节点并填充参数
+   if (initialCapability) {
+    store.addNode(initialCapability);
+    if (initialParams) {
+     const nodes = useWorkspaceStore.getState().nodes;
+     const lastNode = nodes[nodes.length - 1];
+     if (lastNode) {
+      store.updateNodeParams(lastNode.id, initialParams);
+     }
+    }
+   }
+  })();
+ }, [status, initialAssets, initialCapability, initialParams]);
+
+ const isFocused = mode === 'focused';
+
+ if (status === 'initializing') {
+ return (
+ <div className="flex h-full items-center justify-center">
+ <div className="flex flex-col items-center gap-4">
+ <div className="relative flex h-12 w-12 items-center justify-center">
+ <div className="absolute inset-0 rounded-full border-2 border-[var(--lokvis-primary)]/40" />
+ <div className="h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-[var(--lokvis-primary)]" />
+ </div>
+ <div className="text-center">
+ <p className="text-sm font-medium text-[var(--lokvis-fg-muted)]">Initializing Runtime</p>
+ <p className="mt-1 text-xs text-[var(--lokvis-fg-subtle)]">Loading plugins and capabilities...</p>
+ </div>
+ </div>
+ </div>
+ );
+ }
 
-  if (status === 'initializing') {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <div className="relative flex h-12 w-12 items-center justify-center">
-            <div className="absolute inset-0 rounded-full border-2 border-indigo-200 dark:border-indigo-800" />
-            <div className="h-8 w-8 animate-spin rounded-full border-2 border-transparent border-t-indigo-500" />
-          </div>
-          <div className="text-center">
-            <p className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Initializing Runtime</p>
-            <p className="mt-1 text-xs text-zinc-400">Loading plugins and capabilities...</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
+ if (status === 'error') {
+ return (
+ <div className="flex h-full items-center justify-center px-6">
+ <div className="max-w-md rounded-xl border border-[var(--lokvis-danger)]/30 bg-[var(--lokvis-danger)]/10 p-6 text-center">
+ <div className="mb-3 flex h-10 w-10 mx-auto items-center justify-center rounded-full bg-[var(--lokvis-danger)]/15">
+ <Icon size={20} className="text-[var(--lokvis-danger)]"><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></Icon>
+ </div>
+ <p className="font-semibold text-[var(--lokvis-danger)]">Failed to initialize</p>
+ <p className="mt-1.5 text-sm text-[var(--lokvis-danger)]/80">{error}</p>
+ </div>
+ </div>
+ );
+ }
 
-  if (status === 'error') {
-    return (
-      <div className="flex h-full items-center justify-center px-6">
-        <div className="max-w-md rounded-xl border border-red-200 bg-red-50 p-6 text-center dark:border-red-800/50 dark:bg-red-950/20">
-          <div className="mb-3 flex h-10 w-10 mx-auto items-center justify-center rounded-full bg-red-100 dark:bg-red-900/40">
-            <Icon size={20} className="text-red-500"><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></Icon>
-          </div>
-          <p className="font-semibold text-red-700 dark:text-red-400">Failed to initialize</p>
-          <p className="mt-1.5 text-sm text-red-600/80 dark:text-red-400/70">{error}</p>
-        </div>
-      </div>
-    );
-  }
+ // W9.7 Toolbar rightExtra: ThemeToggle + ⌘K hint
+ const toolbarRight = (
+ <>
+ {enableCommandPalette && (
+ <button
+ type="button"
+ onClick={() => setPaletteOpen(true)}
+ aria-label="Open command palette"
+ title="Command palette (⌘K)"
+ className="flex h-7 items-center gap-1 rounded-md border border-[var(--lokvis-border)] px-1.5 text-[10px] text-[var(--lokvis-fg-muted)] transition-colors hover:bg-[var(--lokvis-surface-muted)] hover:text-[var(--lokvis-fg-muted)]"
+ >
+ <Icon size={11}><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></Icon>
+ <kbd className="font-sans">⌘K</kbd>
+ </button>
+ )}
+ {enableThemeToggle && <ThemeToggle />}
+ {/* W9.8 移动端面板切换按钮 */}
+ {isMobile && (
+ <>
+ <button
+ type="button"
+ onClick={() => setMobilePanel(mobilePanel === 'asset' ? null : 'asset')}
+ aria-label="Toggle asset panel"
+ aria-pressed={mobilePanel === 'asset'}
+ className="flex h-7 w-7 items-center justify-center rounded-md text-[var(--lokvis-fg-muted)] hover:bg-[var(--lokvis-surface-muted)] hover:text-[var(--lokvis-fg-muted)]"
+ >
+ <Icon size={14}><rect x="3" y="3" width="7" height="18" rx="1" /><path d="M14 3h7v18h-7z" opacity="0.3" /></Icon>
+ </button>
+ <button
+ type="button"
+ onClick={() => setMobilePanel(mobilePanel === 'inspector' ? null : 'inspector')}
+ aria-label="Toggle inspector panel"
+ aria-pressed={mobilePanel === 'inspector'}
+ className="flex h-7 w-7 items-center justify-center rounded-md text-[var(--lokvis-fg-muted)] hover:bg-[var(--lokvis-surface-muted)] hover:text-[var(--lokvis-fg-muted)]"
+ >
+ <Icon size={14}><path d="M3 3h7v18H3z" opacity="0.3" /><rect x="14" y="3" width="7" height="18" rx="1" /></Icon>
+ </button>
+ </>
+ )}
+ </>
+ );
 
-  // W9.7 Toolbar rightExtra: ThemeToggle + ⌘K hint
-  const toolbarRight = (
-    <>
-      {enableCommandPalette && (
-        <button
-          type="button"
-          onClick={() => setPaletteOpen(true)}
-          aria-label="Open command palette"
-          title="Command palette (⌘K)"
-          className="flex h-7 items-center gap-1 rounded-md border border-zinc-200 px-1.5 text-[10px] text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:border-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
-        >
-          <Icon size={11}><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></Icon>
-          <kbd className="font-sans">⌘K</kbd>
-        </button>
-      )}
-      {enableThemeToggle && <ThemeToggle />}
-      {/* W9.8 移动端面板切换按钮 */}
-      {isMobile && (
-        <>
-          <button
-            type="button"
-            onClick={() => setMobilePanel(mobilePanel === 'asset' ? null : 'asset')}
-            aria-label="Toggle asset panel"
-            aria-pressed={mobilePanel === 'asset'}
-            className="flex h-7 w-7 items-center justify-center rounded-md text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
-          >
-            <Icon size={14}><rect x="3" y="3" width="7" height="18" rx="1" /><path d="M14 3h7v18h-7z" opacity="0.3" /></Icon>
-          </button>
-          <button
-            type="button"
-            onClick={() => setMobilePanel(mobilePanel === 'inspector' ? null : 'inspector')}
-            aria-label="Toggle inspector panel"
-            aria-pressed={mobilePanel === 'inspector'}
-            className="flex h-7 w-7 items-center justify-center rounded-md text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
-          >
-            <Icon size={14}><path d="M3 3h7v18H3z" opacity="0.3" /><rect x="14" y="3" width="7" height="18" rx="1" /></Icon>
-          </button>
-        </>
-      )}
-    </>
-  );
+ return (
+ // D6: ErrorBoundary 捕获子组件渲染异常,避免整个 workspace 白屏。
+ // useLokvis 异常不在本组件树内(早于本 return),由消费方在外层包裹处理。
+ <ErrorBoundary>
+ <div className={`flex h-full flex-col bg-[var(--lokvis-surface)] ${className}`}>
+ {/* Top: Toolbar */}
+ <Toolbar title={title} rightExtra={toolbarRight} />
 
-  return (
-    <div className={`flex h-full flex-col bg-white dark:bg-zinc-900 ${className}`}>
-      {/* Top: Toolbar */}
-      <Toolbar title={title} rightExtra={toolbarRight} />
+ {/* W11.3 ErrorBanner (有 error 时显示) */}
+ {enableErrorBanner && <ErrorBanner />}
 
-      {/* W11.3 ErrorBanner (有 error 时显示) */}
-      {enableErrorBanner && <ErrorBanner />}
+ {/* W9.3 全屏拖拽 */}
+ {enableGlobalDropzone && <GlobalDropzone />}
 
-      {/* W9.3 全屏拖拽 */}
-      {enableGlobalDropzone && <GlobalDropzone />}
+ {/* W9.2 Command Palette */}
+ {enableCommandPalette && (
+ <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
+ )}
 
-      {/* W9.2 Command Palette */}
-      {enableCommandPalette && (
-        <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
-      )}
+ {/* Middle: Panel area */}
+ <div className="flex flex-1 overflow-hidden relative">
+ {/* W9.8 桌面:三栏并列;移动:Canvas 单独,其他为 overlay drawer */}
+ {!isFocused && (
+ <div
+ className={`${
+ isMobile
+ ? `absolute inset-y-0 left-0 z-20 w-64 max-w-[80vw] transition-transform duration-200 ${
+ mobilePanel === 'asset' ? 'translate-x-0' : '-translate-x-full'
+ }`
+ : 'relative'
+ }`}
+ >
+ <AssetPanel className="h-full" />
+ </div>
+ )}
 
-      {/* Middle: Panel area */}
-      <div className="flex flex-1 overflow-hidden relative">
-        {/* W9.8 桌面:三栏并列;移动:Canvas 单独,其他为 overlay drawer */}
-        <div
-          className={`${
-            isMobile
-              ? `absolute inset-y-0 left-0 z-20 w-64 max-w-[80vw] transition-transform duration-200 ${
-                  mobilePanel === 'asset' ? 'translate-x-0' : '-translate-x-full'
-                }`
-              : 'relative'
-          }`}
-        >
-          <AssetPanel className="h-full" />
-        </div>
+ <Canvas enableCompare={enableCompare} />
 
-        <Canvas enableCompare={enableCompare} />
+ <div
+ className={`${
+ isMobile
+ ? `absolute inset-y-0 right-0 z-20 w-72 max-w-[80vw] transition-transform duration-200 ${
+ mobilePanel === 'inspector' ? 'translate-x-0' : 'translate-x-full'
+ }`
+ : 'relative'
+ }`}
+ >
+ <Inspector className="h-full" />
+ </div>
 
-        <div
-          className={`${
-            isMobile
-              ? `absolute inset-y-0 right-0 z-20 w-72 max-w-[80vw] transition-transform duration-200 ${
-                  mobilePanel === 'inspector' ? 'translate-x-0' : 'translate-x-full'
-                }`
-              : 'relative'
-          }`}
-        >
-          <Inspector className="h-full" />
-        </div>
+ {/* W9.8 移动端遮罩:点击关闭抽屉 */}
+ {isMobile && mobilePanel !== null && !isFocused && (
+ <button
+ type="button"
+ aria-label="Close panel"
+ onClick={() => setMobilePanel(null)}
+ className="absolute inset-0 z-10 bg-[var(--lokvis-overlay)]"
+ />
+ )}
+ </div>
 
-        {/* W9.8 移动端遮罩:点击关闭抽屉 */}
-        {isMobile && mobilePanel !== null && (
-          <button
-            type="button"
-            aria-label="Close panel"
-            onClick={() => setMobilePanel(null)}
-            className="absolute inset-0 z-10 bg-black/30"
-          />
-        )}
-      </div>
+ {/* Pipeline bar */}
+ {!isFocused && (enableWorkflowEditor ? <WorkflowEditor /> : <PipelineBar />)}
 
-      {/* Pipeline bar */}
-      {enableWorkflowEditor ? <WorkflowEditor /> : <PipelineBar />}
+ {/* W11.6 ProgressBar + Cancel */}
+ {enableProgressBar && <ProgressBar />}
 
-      {/* W11.6 ProgressBar + Cancel */}
-      {enableProgressBar && <ProgressBar />}
+ {/* W9.1 History panel (horizontal at bottom) */}
+ {showHistoryPanel && <HistoryPanel variant="horizontal" />}
 
-      {/* W9.1 History panel (horizontal at bottom) */}
-      {showHistoryPanel && <HistoryPanel variant="horizontal" />}
+ {/* W9.5 Download panel (条件渲染:有 outputs 时显示) */}
+ {enableDownloadPanel && <DownloadPanel />}
 
-      {/* W9.5 Download panel (条件渲染:有 outputs 时显示) */}
-      {enableDownloadPanel && <DownloadPanel />}
+ {/* Bottom: StatusBar */}
+ {showStatusBar && <StatusBar />}
 
-      {/* Bottom: StatusBar */}
-      {showStatusBar && <StatusBar />}
-    </div>
-  );
+ {/* W11.5 分享链接替换确认(替代 window.confirm) */}
+ <ConfirmDialog
+ open={shareConfirmOpen}
+ title="加载分享工作流"
+ message={`检测到分享工作流链接,但当前已有 ${shareConfirmNodes} 个节点。是否替换为分享的工作流?`}
+ confirmText="替换"
+ variant="danger"
+ onConfirm={() => {
+ setShareConfirmOpen(false);
+ loadFromCurrentUrl();
+ }}
+ onClose={() => setShareConfirmOpen(false)}
+ />
+ </div>
+ </ErrorBoundary>
+ );
 }

package/src/css-modules.d.ts

@@ -0,0 +1,3 @@
+/** 允许在 TypeScript 中 import CSS 文件(side-effect import) */
+declare module '*.css';
+declare module '@lokvis/ui-core/styles.css';