@lokvis/ui-react 0.2.1 → 0.4.1

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,101 @@
+/**
+ * ErrorBoundary - React 错误边界(D6)
+ *
+ * 捕获子组件树渲染期间的运行时异常,避免整个 Workspace 白屏。
+ * 必须是 class 组件(React 错误边界 API 仅支持 class)。
+ *
+ * 设计:
+ * - 默认 fallback 使用 lokvis token,与 Workspace 错误态视觉一致
+ * - 可选 fallback 渲染 prop(消费方自定义 UI)
+ * - 可选 onError 回调(上报等);默认 console.error,不引入 sentry 等
+ *   app 层依赖,保持 ui-react 包架构纯净(不反向依赖消费方)
+ * - reset() 清空 error 状态,尝试重新渲染子树
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary>
+ *   <Workspace plugins={[...]} />
+ * </ErrorBoundary>
+ * ```
+ */
+
+import * as React from 'react';
+
+export interface ErrorBoundaryProps {
+ children: React.ReactNode;
+ /** 自定义 fallback;不传则用默认 UI */
+ fallback?: (error: Error, reset: () => void) => React.ReactNode;
+ /** 错误回调(上报等),不传则 console.error */
+ onError?: (error: Error, info: React.ErrorInfo) => void;
+}
+
+interface State {
+ error: Error | null;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+ state: State = { error: null };
+
+ static getDerivedStateFromError(error: Error): State {
+ return { error };
+ }
+
+ componentDidCatch(error: Error, info: React.ErrorInfo) {
+ if (this.props.onError) {
+ this.props.onError(error, info);
+ } else {
+ console.error('[lokvis ErrorBoundary]', error, info.componentStack);
+ }
+ }
+
+ reset = () => {
+ this.setState({ error: null });
+ };
+
+ render() {
+ if (this.state.error) {
+ if (this.props.fallback) {
+ return this.props.fallback(this.state.error, this.reset);
+ }
+ return <DefaultFallback error={this.state.error} onReset={this.reset} />;
+ }
+ return this.props.children;
+ }
+}
+
+function DefaultFallback({ error, onReset }: { error: Error; onReset: () => void }) {
+ return (
+ <div className="flex h-full w-full items-center justify-center p-6" role="alert">
+ <div className="max-w-md rounded-xl border border-[var(--lokvis-danger)]/30 bg-[var(--lokvis-surface)] p-6 text-center shadow-[var(--lokvis-elevation-2)]">
+ <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--lokvis-danger)]/15">
+ <svg
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ 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" />
+ </svg>
+ </div>
+ <p className="font-semibold text-[var(--lokvis-fg)]">Something went wrong</p>
+ <p className="mt-1.5 break-words text-sm text-[var(--lokvis-fg-muted)]">
+ {error.message || 'An unexpected error occurred while rendering this panel.'}
+ </p>
+ <button
+ type="button"
+ onClick={onReset}
+ className="mt-4 inline-flex items-center justify-center rounded-lg bg-[var(--lokvis-primary)] px-4 py-2 text-sm font-medium text-[var(--lokvis-primary-fg)] transition-colors hover:bg-[var(--lokvis-primary-hover)]"
+ >
+ Try again
+ </button>
+ </div>
+ </div>
+ );
+}

package/src/components/ExifPanel.tsx

@@ -14,7 +14,7 @@
  * - 仅 image 类型 asset 显示;非 image 隐藏整个面板
  * - 缓存:按 assetId 缓存(LRU 上限 16),切换 asset 不重复解析
  * - effect 依赖 selectedAssetId(而非 asset 对象引用),避免 assets 数组
- *   重渲染时触发重复 effect
+ * 重渲染时触发重复 effect
  * - 取消:effect 重跑/卸载时不更新 state(避免 stale update)
  * - 加载/空态/错误三态明确
  */
@@ -25,163 +25,163 @@ import { formatExifRows, type ExifData } from '@lokvis/schema';
 import { useWorkspaceStore } from '../store/index.js';
 
 export interface ExifPanelProps {
-  className?: string;
+ 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>
-  );
+ 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-[var(--lokvis-border)] ${className}`}
+ >
+ <button
+ type="button"
+ onClick={() => setOpen(!open)}
+ className="flex w-full items-center justify-between px-3 h-[var(--lokvis-panel-header-h)] text-left transition-colors hover:bg-[var(--lokvis-surface)]"
+ aria-expanded={open}
+ >
+ <div className="flex items-center gap-2">
+ <Icon
+ size={12}
+ className={`text-[var(--lokvis-fg-subtle)] transition-transform ${open ? 'rotate-90' : ''}`}
+ >
+ <path d="m9 5 7 7-7 7" />
+ </Icon>
+ <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
+ EXIF
+ </span>
+ </div>
+ {loading ? (
+ <span className="text-[10px] text-[var(--lokvis-fg-subtle)]">loading…</span>
+ ) : exif ? (
+ <span className="font-mono text-[10px] text-[var(--lokvis-success)] bg-[var(--lokvis-success)]/10 px-1.5 py-0.5 rounded">
+ {rows.length} fields
+ </span>
+ ) : error ? (
+ <span className="text-[10px] text-[var(--lokvis-danger)]">error</span>
+ ) : (
+ <span className="text-[10px] text-[var(--lokvis-fg-subtle)]">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-[var(--lokvis-fg-subtle)]">
+ Reading EXIF…
+ </div>
+ ) : error ? (
+ <div className="py-3 text-center">
+ <p className="text-[11px] text-[var(--lokvis-danger)]">{error}</p>
+ </div>
+ ) : rows.length === 0 ? (
+ <div className="py-4 text-center">
+ <p className="text-[11px] text-[var(--lokvis-fg-subtle)]">No EXIF data</p>
+ <p className="mt-1 text-[10px] text-[var(--lokvis-fg-muted)]">
+ 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-[var(--lokvis-fg-subtle)]">{row.label}</dt>
+ <dd className="truncate text-right font-mono text-[var(--lokvis-fg-muted)]">
+ {row.value}
+ </dd>
+ </div>
+ ))}
+ </dl>
+ )}
+ </div>
+ )}
+ </div>
+ );
 }