@lokvis/ui-react 0.1.0 → 0.2.0

package/src/components/Canvas.tsx

@@ -3,24 +3,64 @@
  *
  * 只负责展示当前选中资产的预览，以及空状态引导。
  * 工作流节点链已移至独立的 PipelineBar 组件。
+ *
+ * W9.4: 当存在 lastOutputIds 时,可切换到 CompareSlider 模式,
+ *       并排展示 before/after。
  */
 
 import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
+import { CompareSlider } from './CompareSlider.js';
 
 export interface CanvasProps {
   className?: string;
+  /**
+   * 是否启用 before/after 对比模式(W9.4)。
+   * 默认 true;关闭后即使有 outputs 也只显示单图预览。
+   */
+  enableCompare?: boolean;
 }
 
-export function Canvas({ className = '' }: CanvasProps) {
+export function Canvas({ className = '', enableCompare = true }: CanvasProps) {
   const selectedAssetId = useWorkspaceStore((s) => s.selectedAssetId);
   const assets = useWorkspaceStore((s) => s.assets);
   const thumbnails = useWorkspaceStore((s) => s.thumbnails);
   const importFiles = useWorkspaceStore((s) => s.importFiles);
+  const lastOutputIds = useWorkspaceStore((s) => s.lastOutputIds);
+  const selectedOutputId = useWorkspaceStore((s) => s.selectedOutputId);
 
   const selected = assets.find((a) => a.id === selectedAssetId);
   const preview = selected ? thumbnails[selected.id] : undefined;
 
+  // W9.4 是否有可对比的输出
+  const outputId = selectedOutputId ?? lastOutputIds[0] ?? null;
+  const outputThumbnail = outputId ? thumbnails[outputId] : undefined;
+  const canCompare = enableCompare && !!(preview && outputThumbnail);
+
+  // W9.4 默认开启 compare 模式:当 outputs 生成后,用户首次希望对比
+  // 切换状态由用户控制,直到下次 outputs 重新生成时再默认开启
+  const [compareMode, setCompareMode] = React.useState(false);
+  // 记录上次已自动切到 compare 模式的 outputId。
+  // 修复 review:原 effect 依赖 [lastOutputIds, preview, outputThumbnail],
+  // 当用户手动切到 Single 后再切换选中资产,preview 变化会触发 effect
+  // 把 compareMode 强制重置为 true,覆盖用户选择。
+  // 现在仅在 outputId 真正变化(新 run 完成 / 切换输出)且 preview/outputThumbnail
+  // 都就绪时才自动切换;同一 outputId 下 preview / outputThumbnail 的异步变化
+  // 不会覆盖用户已选择的 Single 模式。
+  const lastAutoSwitchedOutputId = React.useRef<string | null>(null);
+  React.useEffect(() => {
+    if (
+      outputId !== null &&
+      outputId !== lastAutoSwitchedOutputId.current &&
+      preview &&
+      outputThumbnail
+    ) {
+      lastAutoSwitchedOutputId.current = outputId;
+      setCompareMode(true);
+    }
+  }, [outputId, preview, outputThumbnail]);
+
   // 全局拖拽支持（直接拖到画布区）
   const [dragOver, setDragOver] = React.useState(false);
 
@@ -31,6 +71,9 @@ export function Canvas({ className = '' }: CanvasProps) {
       onDragLeave={() => setDragOver(false)}
       onDrop={(e) => {
         e.preventDefault();
+        // stopPropagation 防止事件冒泡到 window 的 GlobalDropzone 监听,
+        // 否则文件会被导入两次(Canvas 处理一次 + GlobalDropzone 再处理一次)
+        e.stopPropagation();
         setDragOver(false);
         if (e.dataTransfer.files.length > 0) {
           void importFiles(Array.from(e.dataTransfer.files));
@@ -48,16 +91,51 @@ export function Canvas({ className = '' }: CanvasProps) {
           }}
         />
 
+        {/* W9.4 Compare 模式切换按钮(右上) */}
+        {canCompare && (
+          <div className="absolute top-2 right-2 z-20 flex items-center gap-1 rounded-md bg-white/90 p-0.5 shadow-sm backdrop-blur-sm dark:bg-zinc-900/90">
+            <button
+              type="button"
+              onClick={() => setCompareMode(false)}
+              aria-pressed={!compareMode}
+              className={`rounded px-2 py-1 text-[10px] font-medium transition-colors ${
+                !compareMode
+                  ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300'
+                  : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'
+              }`}
+            >
+              Single
+            </button>
+            <button
+              type="button"
+              onClick={() => setCompareMode(true)}
+              aria-pressed={compareMode}
+              className={`rounded px-2 py-1 text-[10px] font-medium transition-colors ${
+                compareMode
+                  ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300'
+                  : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'
+              }`}
+            >
+              Compare
+            </button>
+          </div>
+        )}
+
         {dragOver && (
           <div className="absolute inset-4 z-10 rounded-xl border-2 border-dashed border-indigo-400 bg-indigo-50/80 flex items-center justify-center dark:border-indigo-600 dark:bg-indigo-950/60">
             <div className="text-center">
-              <svg className="mx-auto h-8 w-8 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}><path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
+              <Icon size={32} className="mx-auto text-indigo-500" strokeWidth={1.5}><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.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" /></Icon>
               <p className="mt-2 text-sm font-medium text-indigo-600 dark:text-indigo-400">Drop files to import</p>
             </div>
           </div>
         )}
 
-        {selected ? (
+        {/* W9.4 Compare 模式:展示 before/after 滑块 */}
+        {compareMode && canCompare ? (
+          <div className="relative flex max-h-[calc(100%-4rem)] max-w-[calc(100%-4rem)] items-center justify-center">
+            <CompareSlider className="max-h-[calc(100vh-12rem)] max-w-full" />
+          </div>
+        ) : selected ? (
           preview ? (
             <div className="relative">
               <img
@@ -89,9 +167,9 @@ export function Canvas({ className = '' }: CanvasProps) {
         ) : (
           <div className="relative flex flex-col items-center gap-5 px-6 text-center">
             <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-white shadow-sm ring-1 ring-zinc-200/80 dark:bg-zinc-800 dark:ring-zinc-700">
-              <svg className="h-9 w-9 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
-              </svg>
+              <Icon size={36} className="text-zinc-300 dark:text-zinc-600" strokeWidth={1.5}>
+                <path d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
+              </Icon>
             </div>
             <div>
               <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">No asset selected</p>
@@ -103,7 +181,7 @@ export function Canvas({ className = '' }: CanvasProps) {
             </div>
             {assets.length === 0 && (
               <label className="mt-2 inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium text-white shadow-sm cursor-pointer transition-colors hover:bg-indigo-500">
-                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                <Icon size={14}><path d="M12 4.5v15m7.5-7.5h-15" /></Icon>
                 Import Files
                 <input
                   type="file"

package/src/components/CommandPalette.tsx

@@ -0,0 +1,300 @@
+/**
+ * CommandPalette - ⌘K 工具选择器(W9.2)
+ *
+ * Command Palette 风格的快捷工具入口:
+ *   - ⌘K / Ctrl+K 打开
+ *   - ESC 关闭
+ *   - 输入关键词过滤能力列表
+ *   - ↑↓ 选择,Enter 添加到工作流,or 鼠标点击
+ *
+ * 数据源:`store.capabilities`,与 Inspector 右侧能力列表同源。
+ * 选中后调用 `store.addNode(cap.name)` 添加到工作流,并关闭面板。
+ *
+ * 实现:基于 ui-core 的 Dialog 组件提供模态基底 + 焦点 trap。
+ */
+
+import * as React from 'react';
+import { Dialog, Icon } from '@lokvis/ui-core';
+import type { Capability } from '@lokvis/schema';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface CommandPaletteProps {
+  /** 是否打开(受控) */
+  open: boolean;
+  /** 关闭回调 */
+  onClose: () => void;
+  className?: string;
+}
+
+export function CommandPalette({ open, onClose, className = '' }: CommandPaletteProps) {
+  const capabilities = useWorkspaceStore((s) => s.capabilities);
+  const addNode = useWorkspaceStore((s) => s.addNode);
+  const undo = useWorkspaceStore((s) => s.undo);
+  const redo = useWorkspaceStore((s) => s.redo);
+  const clearWorkflow = useWorkspaceStore((s) => s.clearWorkflow);
+  const running = useWorkspaceStore((s) => s.running);
+
+  const [query, setQuery] = React.useState('');
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const listRef = React.useRef<HTMLUListElement>(null);
+
+  // 命令项:capability 添加 + 工作流操作
+  type Command =
+    | { kind: 'capability'; cap: Capability }
+    | { kind: 'action'; id: string; label: string; description: string; run: () => void; disabled?: boolean };
+
+  const commands: Command[] = React.useMemo(() => {
+    const caps = capabilities.map((cap) => ({ kind: 'capability' as const, cap }));
+    const actions: Command[] = [
+      {
+        kind: 'action',
+        id: 'undo',
+        label: 'Undo',
+        description: '回退到上一步历史',
+        run: () => void undo(),
+        disabled: false,
+      },
+      {
+        kind: 'action',
+        id: 'redo',
+        label: 'Redo',
+        description: '重做一步',
+        run: () => void redo(),
+        disabled: false,
+      },
+      {
+        kind: 'action',
+        id: 'clear',
+        label: 'Clear Workflow',
+        description: '清空当前工作流节点',
+        run: () => clearWorkflow(),
+        disabled: running,
+      },
+    ];
+    return [...caps, ...actions];
+  }, [capabilities, undo, redo, clearWorkflow, running]);
+
+  const filtered = React.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return commands;
+    return commands.filter((cmd) => {
+      if (cmd.kind === 'capability') {
+        return (
+          cmd.cap.name.toLowerCase().includes(q) ||
+          cmd.cap.description.toLowerCase().includes(q)
+        );
+      }
+      return cmd.label.toLowerCase().includes(q) || cmd.description.toLowerCase().includes(q);
+    });
+  }, [commands, query]);
+
+  // 打开时重置 query + activeIndex + 聚焦输入
+  React.useEffect(() => {
+    if (!open) return;
+    setQuery('');
+    setActiveIndex(0);
+    // Dialog 聚焦首个可聚焦元素(input)后,input ref 才有值
+    // 用 timer 句柄 + cleanup 避免卸载后 setState 警告
+    const t = setTimeout(() => inputRef.current?.focus(), 0);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  // filtered 变化时校正 activeIndex 越界
+  React.useEffect(() => {
+    if (activeIndex >= filtered.length) {
+      setActiveIndex(filtered.length === 0 ? 0 : filtered.length - 1);
+    }
+  }, [filtered.length, activeIndex]);
+
+  // 滚动 active 项进入视区
+  React.useEffect(() => {
+    if (!open || !listRef.current) return;
+    const active = listRef.current.querySelector<HTMLElement>(`[data-index="${activeIndex}"]`);
+    active?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex, open]);
+
+  function handleSelect(cmd: Command) {
+    if (cmd.kind === 'capability') {
+      addNode(cmd.cap.name);
+    } else {
+      if (cmd.disabled) return;
+      cmd.run();
+    }
+    onClose();
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIndex((i) => (i + 1) % Math.max(1, filtered.length));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIndex((i) => (i - 1 + filtered.length) % Math.max(1, filtered.length));
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      const cmd = filtered[activeIndex];
+      if (cmd) handleSelect(cmd);
+    }
+  }
+
+  return (
+    <Dialog open={open} onClose={onClose} size="md" closeOnOverlay>
+      <div className={`-mx-5 -my-5 ${className}`}>
+        {/* 搜索输入 */}
+        <div className="flex items-center gap-2 border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
+          <Icon size={16} className="text-zinc-400">
+            <circle cx="11" cy="11" r="8" />
+            <path d="m21 21-4.3-4.3" />
+          </Icon>
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search commands or capabilities..."
+            aria-label="Search commands"
+            className="flex-1 bg-transparent text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none dark:text-zinc-100"
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <kbd className="rounded border border-zinc-200 px-1.5 py-0.5 text-[9px] font-medium text-zinc-400 dark:border-zinc-700 dark:text-zinc-500">
+            ESC
+          </kbd>
+        </div>
+
+        {/* 命令列表 */}
+        <ul
+          ref={listRef}
+          className="max-h-80 overflow-y-auto py-1"
+          role="listbox"
+          aria-label="Available commands"
+        >
+          {filtered.length === 0 ? (
+            <li className="px-4 py-6 text-center text-xs text-zinc-400">
+              No matching commands
+            </li>
+          ) : (
+            filtered.map((cmd, i) => {
+              const isActive = i === activeIndex;
+              const isCap = cmd.kind === 'capability';
+              const primary = isCap ? cmd.cap.name : cmd.label;
+              const secondary = isCap ? cmd.cap.description : cmd.description;
+              const disabled = !isCap && cmd.disabled;
+              return (
+                <li
+                  key={isCap ? `cap:${cmd.cap.name}` : `act:${cmd.id}`}
+                  data-index={i}
+                  role="option"
+                  aria-selected={isActive}
+                  aria-disabled={disabled}
+                >
+                  <button
+                    type="button"
+                    onMouseEnter={() => setActiveIndex(i)}
+                    onClick={() => !disabled && handleSelect(cmd)}
+                    disabled={disabled}
+                    className={`flex w-full items-center gap-3 px-4 py-2 text-left transition-colors ${
+                      isActive && !disabled
+                        ? 'bg-indigo-50 dark:bg-indigo-950/30'
+                        : ''
+                    } ${disabled ? 'cursor-not-allowed opacity-40' : 'hover:bg-zinc-50 dark:hover:bg-zinc-800/50'}`}
+                  >
+                    <span
+                      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded ${
+                        isCap
+                          ? 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400'
+                          : 'bg-indigo-100 text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-400'
+                      }`}
+                    >
+                      <Icon size={12} strokeWidth={2}>
+                        {isCap ? (
+                          <path d="M12 4.5v15m7.5-7.5h-15" />
+                        ) : (
+                          <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" />
+                        )}
+                      </Icon>
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="truncate text-xs font-medium text-zinc-900 dark:text-zinc-100">
+                          {primary}
+                        </span>
+                        {isCap && (
+                          <span className="shrink-0 rounded px-1 py-0.5 text-[9px] font-medium uppercase bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+                            {cmd.cap.performance}
+                          </span>
+                        )}
+                      </div>
+                      <p className="truncate text-[10px] text-zinc-500 dark:text-zinc-400">
+                        {secondary}
+                      </p>
+                    </div>
+                  </button>
+                </li>
+              );
+            })
+          )}
+        </ul>
+
+        {/* 底部提示 */}
+        <div className="flex items-center justify-between border-t border-zinc-200 px-4 py-2 text-[10px] text-zinc-400 dark:border-zinc-800">
+          <span className="flex items-center gap-1">
+            <kbd className="rounded border border-zinc-200 px-1 dark:border-zinc-700">↑↓</kbd>
+            <span>navigate</span>
+            <kbd className="ml-2 rounded border border-zinc-200 px-1 dark:border-zinc-700">↵</kbd>
+            <span>select</span>
+          </span>
+          <span>{filtered.length} command{filtered.length !== 1 ? 's' : ''}</span>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+/**
+ * useCommandPalette - 在组件中注册 ⌘K / Ctrl+K 全局快捷键打开面板。
+ *
+ * 返回 [open, setOpen]。在 useEffect 中绑定 keydown 监听。
+ * 兼容 macOS(⌘K)与 Windows/Linux(Ctrl+K)。Shift+⌘K / Ctrl+Shift+K 也触发,
+ * 方便用户在 ⌘K 被浏览器拦截时使用。
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useCommandPalette();
+ * // 或禁用快捷键(仍可受控使用 open/setOpen):
+ * const [open, setOpen] = useCommandPalette({ enabled: false });
+ * return (
+ *   <>
+ *     <CommandPalette open={open} onClose={() => setOpen(false)} />
+ *   </>
+ * );
+ * ```
+ */
+export interface UseCommandPaletteOptions {
+  /** 是否注册 ⌘K 全局快捷键(默认 true)。设为 false 时仍可受控使用 open/setOpen */
+  enabled?: boolean;
+}
+
+export function useCommandPalette(
+  options: UseCommandPaletteOptions = {}
+): [boolean, React.Dispatch<React.SetStateAction<boolean>>] {
+  const { enabled = true } = options;
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e: KeyboardEvent) => {
+      // ⌘K (mac) / Ctrl+K (win/linux),忽略纯 K(避免拦截输入)
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setOpen((v) => !v);
+      }
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [enabled]);
+
+  return [open, setOpen];
+}

package/src/components/CompareSlider.tsx

@@ -0,0 +1,186 @@
+/**
+ * CompareSlider - before/after 对比滑块(W9.4)
+ *
+ * 把输入资产(原)与输出资产(处理后)叠加展示,通过可拖拽的分隔条左右揭示
+ * before / after 两张图。用于直观展示工作流处理效果。
+ *
+ * 交互:
+ *   - 鼠标拖拽分隔条(或点击容器任意位置)调整揭示比例
+ *   - 触摸:touchmove 同步
+ *   - 键盘:← → 调整 5% 步长(聚焦分隔条时)
+ *
+ * 数据来源:
+ *   - before: `store.selectedAssetId` 对应的 thumbnails(由 AssetPanel 自动生成)
+ *   - after: `store.selectedOutputId` 对应的 thumbnails
+ *   - 任一缺失则不渲染(返回 null)
+ *
+ * 注:本组件只负责"展示对比",不负责生成缩略图。缩略图由 AssetPanel
+ * 的 effect 统一生成并存入 store.thumbnails,本组件按 assetId 取用。
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface CompareSliderProps {
+  className?: string;
+}
+
+export function CompareSlider({ className = '' }: CompareSliderProps) {
+  const assets = useWorkspaceStore((s) => s.assets);
+  const thumbnails = useWorkspaceStore((s) => s.thumbnails);
+  const selectedAssetId = useWorkspaceStore((s) => s.selectedAssetId);
+  const selectedOutputId = useWorkspaceStore((s) => s.selectedOutputId);
+  const lastOutputIds = useWorkspaceStore((s) => s.lastOutputIds);
+
+  // before:用户选中的输入资产;after:用户选中的输出资产(默认第一个)
+  const beforeId = selectedAssetId;
+  const afterId = selectedOutputId ?? lastOutputIds[0] ?? null;
+
+  const beforeAsset = beforeId ? assets.find((a) => a.id === beforeId) : null;
+  const afterAsset = afterId ? assets.find((a) => a.id === afterId) : null;
+  const beforeUrl = beforeId ? thumbnails[beforeId] : undefined;
+  const afterUrl = afterId ? thumbnails[afterId] : undefined;
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [pos, setPos] = React.useState(50); // 0-100,分隔条位置百分比
+  const [dragging, setDragging] = React.useState(false);
+
+  // 切换资产时重置位置到中央
+  React.useEffect(() => {
+    setPos(50);
+  }, [beforeId, afterId]);
+
+  const updatePos = React.useCallback((clientX: number) => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const ratio = (clientX - rect.left) / rect.width;
+    setPos(Math.max(0, Math.min(100, ratio * 100)));
+  }, []);
+
+  // 鼠标拖拽
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setDragging(true);
+    updatePos(e.clientX);
+  };
+  React.useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e: MouseEvent) => updatePos(e.clientX);
+    const onUp = () => setDragging(false);
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+    return () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+  }, [dragging, updatePos]);
+
+  // 触摸拖拽
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setDragging(true);
+    if (e.touches[0]) updatePos(e.touches[0].clientX);
+  };
+  React.useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e: TouchEvent) => {
+      if (e.touches[0]) updatePos(e.touches[0].clientX);
+    };
+    const onEnd = () => setDragging(false);
+    document.addEventListener('touchmove', onMove, { passive: true });
+    document.addEventListener('touchend', onEnd);
+    return () => {
+      document.removeEventListener('touchmove', onMove);
+      document.removeEventListener('touchend', onEnd);
+    };
+  }, [dragging, updatePos]);
+
+  // 键盘:← → 调整 5%
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      setPos((p) => Math.max(0, p - 5));
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      setPos((p) => Math.min(100, p + 5));
+    }
+  };
+
+  if (!beforeUrl || !afterUrl) return null;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`relative select-none overflow-hidden rounded-lg ring-1 ring-black/5 dark:ring-black/30 ${className}`}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+    >
+      {/* after 全图(底层)——决定容器尺寸 */}
+      <img
+        src={afterUrl}
+        alt="After"
+        draggable={false}
+        className="block max-h-full max-w-full object-contain pointer-events-none"
+      />
+
+      {/* before 覆盖层:绝对定位同尺寸,用 clip-path 从右侧裁剪到 pos%
+          (避免读取 containerRef.current.clientWidth 这种"渲染期读 ref"反模式) */}
+      <div
+        className="absolute inset-0"
+        style={{ clipPath: `inset(0 ${100 - pos}% 0 0)` }}
+      >
+        <img
+          src={beforeUrl}
+          alt="Before"
+          draggable={false}
+          className="block max-h-full max-w-full object-contain pointer-events-none"
+        />
+      </div>
+
+      {/* before/after 标签 */}
+      <span className="absolute top-2 left-2 rounded bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white">
+        Before
+      </span>
+      <span className="absolute top-2 right-2 rounded bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white">
+        After
+      </span>
+
+      {/* 分隔条 */}
+      <div
+        className="absolute top-0 bottom-0 z-10 cursor-ew-resize"
+        style={{ left: `${pos}%`, transform: 'translateX(-50%)' }}
+        role="separator"
+        aria-valuenow={Math.round(pos)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label="Comparison slider position"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+      >
+        <div className="absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-white shadow-md" />
+        <div className="absolute top-1/2 left-1/2 flex h-8 w-8 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-black/10">
+          <Icon size={14} className="text-zinc-600">
+            <path d="M9 5l-5 7 5 7M15 5l5 7-5 7" />
+          </Icon>
+        </div>
+      </div>
+
+      {/* 元数据对比(底部叠加) */}
+      {(beforeAsset || afterAsset) && (
+        <div className="absolute bottom-2 inset-x-2 flex justify-between text-[10px] text-white">
+          {beforeAsset?.metadata.dimensions && (
+            <span className="rounded bg-black/60 px-1.5 py-0.5">
+              {beforeAsset.metadata.dimensions.width}×{beforeAsset.metadata.dimensions.height}
+            </span>
+          )}
+          {afterAsset?.metadata.dimensions && (
+            <span className="rounded bg-black/60 px-1.5 py-0.5">
+              {afterAsset.metadata.dimensions.width}×{afterAsset.metadata.dimensions.height}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}