@lokvis/ui-react 0.1.0 → 0.2.0

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

package/src/components/ExifPanel.tsx

@@ -0,0 +1,187 @@
+/**
+ * ExifPanel - EXIF 元数据查看面板(W7.4)
+ *
+ * 监听当前选中的 image asset,通过 runtime.readAssetExif 桥接调用
+ * plugin-image 注册的 MetadataReader,展示结构化 EXIF 字段。
+ *
+ * 架构合规(长期方案):
+ * - UI 只依赖 @lokvis/schema(ExifData 类型 + formatExifRows)和 @lokvis/runtime
+ * - 不直接依赖 plugin-image / engine-image(五层单向依赖)
+ * - ExifData 类型不含 raw 字段(schema 层类型分层),UI 缓存无需手动剔除
+ *
+ * 设计要点:
+ * - 独立可折叠面板(渲染在 Inspector 顶部)
+ * - 仅 image 类型 asset 显示;非 image 隐藏整个面板
+ * - 缓存:按 assetId 缓存(LRU 上限 16),切换 asset 不重复解析
+ * - effect 依赖 selectedAssetId(而非 asset 对象引用),避免 assets 数组
+ *   重渲染时触发重复 effect
+ * - 取消:effect 重跑/卸载时不更新 state(避免 stale update)
+ * - 加载/空态/错误三态明确
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { formatExifRows, type ExifData } from '@lokvis/schema';
+import { useWorkspaceStore } from '../store/index.js';
+
+export interface ExifPanelProps {
+  className?: string;
+}
+
+/** cache LRU 上限:防止长会话切换大量图片时 Map 无限增长 */
+const EXIF_CACHE_LIMIT = 16;
+
+export function ExifPanel({ className = '' }: ExifPanelProps) {
+  const selectedAssetId = useWorkspaceStore((s) => s.selectedAssetId);
+  const assets = useWorkspaceStore((s) => s.assets);
+  const runtime = useWorkspaceStore((s) => s.runtime);
+
+  const selectedAsset = React.useMemo(
+    () => assets.find((a) => a.id === selectedAssetId) ?? null,
+    [assets, selectedAssetId]
+  );
+
+  // 仅 image 类型 asset 显示 EXIF 面板
+  const isImage = selectedAsset?.type === 'image';
+  // effect 依赖用 id 而非 asset 引用:避免 assets 数组重渲染触发重复 effect
+  const selectedAssetIdForEffect = selectedAsset?.id;
+
+  const [open, setOpen] = React.useState(true);
+  const [exif, setExif] = React.useState<ExifData | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // 按 assetId 缓存解析结果,避免切换来回重复解析
+  const cacheRef = React.useRef<Map<string, ExifData | null>>(new Map());
+
+  React.useEffect(() => {
+    if (!isImage || !selectedAssetIdForEffect || !runtime) {
+      setExif(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    const assetId = selectedAssetIdForEffect;
+    const cache = cacheRef.current;
+
+    // 命中缓存:同步设置,不发请求(LRU 命中后重排到末尾)
+    if (cache.has(assetId)) {
+      const cached = cache.get(assetId) ?? null;
+      cache.delete(assetId);
+      cache.set(assetId, cached);
+      setExif(cached);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    (async () => {
+      try {
+        // 通过 runtime.readAssetExif 桥接(MetadataReader 依赖反转),
+        // UI 不直接依赖 plugin-image / engine-image
+        const data = await runtime.readAssetExif(assetId);
+        if (cancelled) return;
+        // LRU 上限:超出时删除最旧 entry(Map 第一个,即最近最少命中)
+        if (cache.size >= EXIF_CACHE_LIMIT) {
+          const oldestKey = cache.keys().next().value;
+          if (oldestKey !== undefined) cache.delete(oldestKey);
+        }
+        cache.set(assetId, data);
+        setExif(data);
+        setError(null);
+      } catch (err) {
+        if (cancelled) return;
+        const msg = err instanceof Error ? err.message : 'Failed to read EXIF';
+        setError(msg);
+        setExif(null);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isImage, selectedAssetIdForEffect, runtime]);
+
+  // 非 image 或无选中 asset:不渲染(避免占用布局空间)
+  if (!isImage || !selectedAsset) return null;
+
+  const rows = exif ? formatExifRows(exif) : [];
+
+  return (
+    <div
+      className={`shrink-0 border-b border-zinc-200 dark:border-zinc-800 ${className}`}
+    >
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center justify-between px-3 h-10 text-left transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50"
+        aria-expanded={open}
+      >
+        <div className="flex items-center gap-2">
+          <Icon
+            size={12}
+            className={`text-zinc-400 transition-transform ${open ? 'rotate-90' : ''}`}
+          >
+            <path d="m9 5 7 7-7 7" />
+          </Icon>
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400">
+            EXIF
+          </span>
+        </div>
+        {loading ? (
+          <span className="text-[10px] text-zinc-400">loading…</span>
+        ) : exif ? (
+          <span className="font-mono text-[10px] text-emerald-600 bg-emerald-50 dark:bg-emerald-950/30 dark:text-emerald-400 px-1.5 py-0.5 rounded">
+            {rows.length} fields
+          </span>
+        ) : error ? (
+          <span className="text-[10px] text-red-500">error</span>
+        ) : (
+          <span className="text-[10px] text-zinc-400">none</span>
+        )}
+      </button>
+
+      {open && (
+        <div className="px-3 pb-3 max-h-60 overflow-y-auto">
+          {loading ? (
+            <div className="py-4 text-center text-[11px] text-zinc-400">
+              Reading EXIF…
+            </div>
+          ) : error ? (
+            <div className="py-3 text-center">
+              <p className="text-[11px] text-red-500">{error}</p>
+            </div>
+          ) : rows.length === 0 ? (
+            <div className="py-4 text-center">
+              <p className="text-[11px] text-zinc-400">No EXIF data</p>
+              <p className="mt-1 text-[10px] text-zinc-500">
+                This image has no embedded metadata
+              </p>
+            </div>
+          ) : (
+            <dl className="space-y-1">
+              {rows.map((row) => (
+                <div
+                  key={row.label}
+                  className="flex items-baseline justify-between gap-3 text-[11px]"
+                >
+                  <dt className="shrink-0 text-zinc-400">{row.label}</dt>
+                  <dd className="truncate text-right font-mono text-zinc-700 dark:text-zinc-300">
+                    {row.value}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}