@lokvis/ui-react 0.2.1 → 0.2.2

package/src/components/DownloadPanel.tsx

@@ -2,9 +2,9 @@
  * DownloadPanel - 工作流输出下载面板(W9.5)
  *
  * 展示上次工作流执行的输出资产,提供:
- *   - 单项下载(从 runtime.exportAsset 取 blob,触发浏览器下载)
- *   - 全部下载(逐项触发,BATCH_DOWNLOAD_DELAY_MS 间隔,避免浏览器拦截;长期方案见该常量注释)
- *   - 清空输出列表
+ * - 单项下载(从 runtime.exportAsset 取 blob,触发浏览器下载)
+ * - 全部下载(逐项触发,BATCH_DOWNLOAD_DELAY_MS 间隔,避免浏览器拦截;长期方案见该常量注释)
+ * - 清空输出列表
  *
  * 与 apps/playground 的 DownloadManager(独立工具页)不同:本组件是 Workspace
  * 内嵌的轻量面板,数据来自 store.lastOutputIds(由 workflow-slice.run 写入)。
@@ -18,14 +18,14 @@ import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 
 export interface DownloadPanelProps {
-  className?: string;
+ 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`;
+ if (bytes < 1024) return `${bytes} B`;
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+ return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
 }
 
 /**
@@ -46,207 +46,207 @@ 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;
+ 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);
+ 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>
-  );
+ 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-[var(--lokvis-border)] bg-[var(--lokvis-surface)] ${className}`}
+ aria-label="Outputs panel"
+ >
+ <div className="flex items-center justify-between px-3 h-9 shrink-0 border-b border-[var(--lokvis-border)]">
+ <span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)]">
+ Outputs
+ </span>
+ <span className="text-[11px] tabular-nums text-[var(--lokvis-fg-subtle)]">
+ {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-[var(--lokvis-border)] p-2"
+ >
+ <div className="flex items-center gap-2">
+ <span className="rounded bg-[var(--lokvis-surface-muted)] px-1 py-0.5 text-[9px] font-medium text-[var(--lokvis-fg-muted)]">
+ {asset.metadata.format.toUpperCase()}
+ </span>
+ {dims && (
+ <span className="text-[10px] text-[var(--lokvis-fg-muted)] tabular-nums">
+ {dims.width}×{dims.height}
+ </span>
+ )}
+ <span className="text-[10px] text-[var(--lokvis-fg-subtle)] 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-[var(--lokvis-success)]/15 text-[var(--lokvis-success)]'
+ : 'bg-[var(--lokvis-primary)]/15 text-[var(--lokvis-primary)] hover:bg-[var(--lokvis-primary)]/25'
+ }`}
+ >
+ <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-[var(--lokvis-primary-hover)] px-2.5 py-1 text-[10px] font-medium text-[var(--lokvis-primary-fg)] hover:bg-[var(--lokvis-primary)] 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-[var(--lokvis-fg-muted)] hover:bg-[var(--lokvis-surface-muted)] hover:text-[var(--lokvis-fg-muted)]"
+ >
+ Clear
+ </button>
+ </div>
+ </div>
+
+ {error && (
+ <p className="px-3 pb-2 text-[10px] text-[var(--lokvis-danger)]" role="alert">
+ {error}
+ </p>
+ )}
+ </div>
+ );
 }

package/src/components/ErrorBanner.tsx

@@ -2,8 +2,8 @@
  * ErrorBanner - 错误信息横幅(W11.3)
  *
  * 当 store.error 非空时显示,展示错误信息并提供:
- *   - 关闭按钮(清除 error)
- *   - 重试按钮(重新执行工作流)
+ * - 关闭按钮(清除 error)
+ * - 重试按钮(重新执行工作流)
  *
  * 节点失败高亮由 WorkflowEditor 的节点状态颜色处理(已实现);
  * 本组件负责全局错误信息的可见性。
@@ -20,76 +20,76 @@ import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 
 export interface ErrorBannerProps {
-  className?: string;
+ 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);
+ 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);
+ // 用户关闭后隐藏;新错误(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 visible = error !== null && dismissedSeq !== errorSeq;
 
-  const handleDismiss = React.useCallback(() => {
-    setDismissedSeq(errorSeq);
-    setError(null);
-  }, [errorSeq, setError]);
+ 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]);
+ const handleRetry = React.useCallback(() => {
+ // 先清 error 再 run,避免 run 同步抛错时 banner 已隐藏且 errorSeq 未变化
+ setError(null);
+ void run();
+ }, [setError, run]);
 
-  if (!visible || !error) return null;
+ if (!visible || !error) return null;
 
-  const canRetry = nodes.length > 0 && !running;
+ 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>
-  );
+ return (
+ <div
+ className={`flex items-start gap-2 border-b border-[var(--lokvis-danger)]/30 bg-[var(--lokvis-danger)]/10 px-3 py-2 ${className}`}
+ role="alert"
+ >
+ <Icon size={14} className="mt-0.5 shrink-0 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 className="flex-1 min-w-0">
+ <p className="text-[11px] font-medium text-[var(--lokvis-danger)]">
+ 执行出错
+ </p>
+ <p className="mt-0.5 break-words text-[10px] text-[var(--lokvis-danger)]/80">
+ {error}
+ </p>
+ </div>
+ <div className="flex shrink-0 items-center gap-1">
+ {canRetry && (
+ <button
+ type="button"
+ onClick={handleRetry}
+ className="rounded bg-[var(--lokvis-danger)]/15 px-2 py-0.5 text-[10px] font-medium text-[var(--lokvis-danger)] transition-colors hover:bg-[var(--lokvis-danger)]/30"
+ >
+ 重试
+ </button>
+ )}
+ <button
+ type="button"
+ onClick={handleDismiss}
+ aria-label="关闭错误信息"
+ className="rounded p-0.5 text-[var(--lokvis-danger)] transition-colors hover:bg-[var(--lokvis-danger)]/15 hover:text-[var(--lokvis-danger)]"
+ >
+ <Icon size={12} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
+ </button>
+ </div>
+ </div>
+ );
 }