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

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>
+  );
+}

package/src/components/DownloadPanel.tsx

@@ -0,0 +1,252 @@
+/**
+ * DownloadPanel - 工作流输出下载面板(W9.5)
+ *
+ * 展示上次工作流执行的输出资产,提供:
+ *   - 单项下载(从 runtime.exportAsset 取 blob,触发浏览器下载)
+ *   - 全部下载(逐项触发,BATCH_DOWNLOAD_DELAY_MS 间隔,避免浏览器拦截;长期方案见该常量注释)
+ *   - 清空输出列表
+ *
+ * 与 apps/playground 的 DownloadManager(独立工具页)不同:本组件是 Workspace
+ * 内嵌的轻量面板,数据来自 store.lastOutputIds(由 workflow-slice.run 写入)。
+ *
+ * 下载命名:`lokvis-output-{assetId前8位}.{ext}`,简洁且避免覆盖。
+ * 不引入 JSZip(需新增依赖),用浏览器原生 downloadBlob 实现。
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface DownloadPanelProps {
+  className?: string;
+}
+
+/** 格式化字节数 */
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+/**
+ * 批量下载时每项之间的延迟毫秒数。
+ *
+ * 短期方案:浏览器(尤其 Chrome)会拦截同一 tick 内触发的多个 programmatic
+ * `<a download>` 点击,把第一个之后的视为"非用户手势"弹窗拦截。两次下载之间
+ * 插入小延迟可绕过该启发式判定。该值是经验值,不是规范要求 —— 不同浏览器
+ * 版本行为可能变化。
+ *
+ * 长期方案:用 JSZip 将多个输出打包成单个 ZIP 下载(只需一次用户手势)。
+ * 本组件暂未引入 JSZip 依赖(见文件头注释),待 M2 引入 archive capability 后
+ * 一并迁移,届时可移除此常量与 sleep 调用。
+ */
+const BATCH_DOWNLOAD_DELAY_MS = 200;
+
+const sleep = (ms: number): Promise<void> => new Promise((r) => setTimeout(r, ms));
+
+/** 从扩展名或 mime 推断下载扩展名 */
+function extFromMime(mime: string): string {
+  const sub = mime.split('/')[1] ?? 'bin';
+  // image/svg+xml → svg+xml → svg(取 + 前部分)
+  return sub.split('+')[0] ?? sub;
+}
+
+/** 触发浏览器下载 */
+function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+export function DownloadPanel({ className = '' }: DownloadPanelProps) {
+  const assets = useWorkspaceStore((s) => s.assets);
+  const lastOutputIds = useWorkspaceStore((s) => s.lastOutputIds);
+  const runtime = useWorkspaceStore((s) => s.runtime);
+  const clearOutputs = useWorkspaceStore((s) => s.clearOutputs);
+  const setStatus = useWorkspaceStore((s) => s.setStatus);
+
+  const [downloaded, setDownloaded] = React.useState<Set<string>>(new Set());
+  const [batchDownloading, setBatchDownloading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // 卸载标志:批量下载是异步循环,卸载后不应再 setState
+  const mountedRef = React.useRef(true);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // 输出资产列表(从 store.assets 中按 lastOutputIds 顺序取)
+  const outputAssets = React.useMemo(() => {
+    return lastOutputIds
+      .map((id) => assets.find((a) => a.id === id))
+      .filter((a): a is NonNullable<typeof a> => a !== undefined);
+  }, [lastOutputIds, assets]);
+
+  // outputs 变化时清空 downloaded 状态
+  React.useEffect(() => {
+    setDownloaded(new Set());
+    setError(null);
+  }, [lastOutputIds]);
+
+  const totalSize = outputAssets.reduce((sum, a) => sum + a.metadata.size, 0);
+  const downloadedCount = outputAssets.filter((a) => downloaded.has(a.id)).length;
+  const allDownloaded = outputAssets.length > 0 && downloadedCount === outputAssets.length;
+
+  async function handleDownloadOne(id: string) {
+    if (!runtime) return;
+    const asset = outputAssets.find((a) => a.id === id);
+    if (!asset) return;
+    try {
+      const blob = await runtime.exportAsset(id);
+      const ext = extFromMime(asset.metadata.mimeType);
+      const filename = `lokvis-output-${asset.id.slice(0, 8)}.${ext}`;
+      downloadBlob(blob, filename);
+      if (mountedRef.current) {
+        setDownloaded((prev) => new Set(prev).add(id));
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+    }
+  }
+
+  async function handleDownloadAll() {
+    if (!runtime || batchDownloading) return;
+    setBatchDownloading(true);
+    setError(null);
+    setStatus('Downloading outputs...');
+    // 用本地 Set 跟踪本次循环已下载 id,避免 downloaded 闭包快照与 state 不同步
+    // (review 反馈:循环中 setDownloaded 更新 state 但闭包 downloaded 不变,
+    //  虽有 batchDownloading guard 阻止并发,逻辑上仍应读取最新已下载集合)
+    const localDownloaded = new Set(downloaded);
+    try {
+      for (const asset of outputAssets) {
+        // 卸载后立即停止循环(避免对已卸载组件 setState)
+        if (!mountedRef.current) return;
+        if (localDownloaded.has(asset.id)) continue;
+        try {
+          const blob = await runtime.exportAsset(asset.id);
+          const ext = extFromMime(asset.metadata.mimeType);
+          const filename = `lokvis-output-${asset.id.slice(0, 8)}.${ext}`;
+          downloadBlob(blob, filename);
+          localDownloaded.add(asset.id);
+          if (mountedRef.current) {
+            setDownloaded((prev) => new Set(prev).add(asset.id));
+          }
+          await sleep(BATCH_DOWNLOAD_DELAY_MS);
+        } catch (err) {
+          if (mountedRef.current) {
+            setError(err instanceof Error ? err.message : String(err));
+          }
+          // 单项失败不阻断后续
+        }
+      }
+      if (mountedRef.current) {
+        setStatus('Downloads complete');
+      }
+    } finally {
+      if (mountedRef.current) {
+        setBatchDownloading(false);
+      }
+    }
+  }
+
+  function handleClear() {
+    clearOutputs();
+    setDownloaded(new Set());
+  }
+
+  if (outputAssets.length === 0) return null;
+
+  return (
+    <div
+      className={`flex flex-col border-t border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-900 ${className}`}
+      aria-label="Outputs panel"
+    >
+      <div className="flex items-center justify-between px-3 h-9 shrink-0 border-b border-zinc-200 dark:border-zinc-800">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
+          Outputs
+        </span>
+        <span className="text-[11px] tabular-nums text-zinc-400">
+          {downloadedCount}/{outputAssets.length} · {formatBytes(totalSize)}
+        </span>
+      </div>
+
+      <div className="flex items-center gap-2 px-3 py-2 overflow-x-auto">
+        {outputAssets.map((asset) => {
+          const isDownloaded = downloaded.has(asset.id);
+          const dims = asset.metadata.dimensions;
+          return (
+            <div
+              key={asset.id}
+              className="flex shrink-0 flex-col gap-1 rounded-md border border-zinc-200 p-2 dark:border-zinc-700"
+            >
+              <div className="flex items-center gap-2">
+                <span className="rounded bg-zinc-100 px-1 py-0.5 text-[9px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+                  {asset.metadata.format.toUpperCase()}
+                </span>
+                {dims && (
+                  <span className="text-[10px] text-zinc-500 dark:text-zinc-400 tabular-nums">
+                    {dims.width}×{dims.height}
+                  </span>
+                )}
+                <span className="text-[10px] text-zinc-400 tabular-nums">
+                  {formatBytes(asset.metadata.size)}
+                </span>
+              </div>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => void handleDownloadOne(asset.id)}
+                  className={`flex items-center gap-1 rounded px-2 py-0.5 text-[10px] font-medium transition-colors ${
+                    isDownloaded
+                      ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
+                      : 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-300 dark:hover:bg-indigo-900/40'
+                  }`}
+                >
+                  <Icon size={10} strokeWidth={2}>
+                    <path d="M12 3v12m0 0l-4-4m4 4l4-4M3 17v2a2 2 0 002 2h14a2 2 0 002-2v-2" />
+                  </Icon>
+                  {isDownloaded ? 'Downloaded' : 'Download'}
+                </button>
+              </div>
+            </div>
+          );
+        })}
+
+        <div className="flex shrink-0 items-center gap-1">
+          <button
+            type="button"
+            onClick={() => void handleDownloadAll()}
+            disabled={batchDownloading || allDownloaded}
+            className="rounded-md bg-indigo-600 px-2.5 py-1 text-[10px] font-medium text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {batchDownloading ? 'Downloading...' : 'Download All'}
+          </button>
+          <button
+            type="button"
+            onClick={handleClear}
+            className="rounded-md px-2 py-1 text-[10px] text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <p className="px-3 pb-2 text-[10px] text-red-500" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/ErrorBanner.tsx

@@ -0,0 +1,95 @@
+/**
+ * ErrorBanner - 错误信息横幅(W11.3)
+ *
+ * 当 store.error 非空时显示,展示错误信息并提供:
+ *   - 关闭按钮(清除 error)
+ *   - 重试按钮(重新执行工作流)
+ *
+ * 节点失败高亮由 WorkflowEditor 的节点状态颜色处理(已实现);
+ * 本组件负责全局错误信息的可见性。
+ *
+ * 显式错误计数器作为可见性派生依据:
+ * store.error 是字符串,相同错误多次设置时引用不变,useEffect 依赖 [error] 不会触发。
+ * 改为依赖 errorSeq(error 出现的序号),每次 setError(非 null)都递增,确保 banner 重新弹出。
+ *
+ * @module ErrorBanner
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface ErrorBannerProps {
+  className?: string;
+}
+
+export function ErrorBanner({ className = '' }: ErrorBannerProps) {
+  const error = useWorkspaceStore((s) => s.error);
+  const errorSeq = useWorkspaceStore((s) => s.errorSeq);
+  const setError = useWorkspaceStore((s) => s.setError);
+  const run = useWorkspaceStore((s) => s.run);
+  const nodes = useWorkspaceStore((s) => s.nodes);
+  const running = useWorkspaceStore((s) => s.running);
+
+  // 用户关闭后隐藏;新错误(errorSeq 变化)时重新显示。
+  // 用 errorSeq 而非 error 字符串本身:store.run() 在 setError(null) 之后才设新 error,
+  // errorSeq 在 setError(非 null) 时递增,即使错误消息相同也能感知到"新的错误事件"。
+  const [dismissedSeq, setDismissedSeq] = React.useState<number | null>(null);
+
+  const visible = error !== null && dismissedSeq !== errorSeq;
+
+  const handleDismiss = React.useCallback(() => {
+    setDismissedSeq(errorSeq);
+    setError(null);
+  }, [errorSeq, setError]);
+
+  const handleRetry = React.useCallback(() => {
+    // 先清 error 再 run,避免 run 同步抛错时 banner 已隐藏且 errorSeq 未变化
+    setError(null);
+    void run();
+  }, [setError, run]);
+
+  if (!visible || !error) return null;
+
+  const canRetry = nodes.length > 0 && !running;
+
+  return (
+    <div
+      className={`flex items-start gap-2 border-b border-red-200 bg-red-50 px-3 py-2 dark:border-red-800/50 dark:bg-red-950/20 ${className}`}
+      role="alert"
+    >
+      <Icon size={14} className="mt-0.5 shrink-0 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 className="flex-1 min-w-0">
+        <p className="text-[11px] font-medium text-red-700 dark:text-red-400">
+          执行出错
+        </p>
+        <p className="mt-0.5 break-words text-[10px] text-red-600/80 dark:text-red-400/70">
+          {error}
+        </p>
+      </div>
+      <div className="flex shrink-0 items-center gap-1">
+        {canRetry && (
+          <button
+            type="button"
+            onClick={handleRetry}
+            className="rounded bg-red-100 px-2 py-0.5 text-[10px] font-medium text-red-700 transition-colors hover:bg-red-200 dark:bg-red-900/40 dark:text-red-400 dark:hover:bg-red-900/60"
+          >
+            重试
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handleDismiss}
+          aria-label="关闭错误信息"
+          className="rounded p-0.5 text-red-400 transition-colors hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/40"
+        >
+          <Icon size={12} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
+        </button>
+      </div>
+    </div>
+  );
+}