新增 UI 编辑器保存结果弹窗

新增保存成功、代码生成成功和失败状态弹窗提供项目相对路径复制按钮及复制失败提示
2026-09-14 18:37:09 +08:00
parent a1f9149c27
commit 43f3780a38
1 changed files with 169 additions and 0 deletions
@@ -0,0 +1,169 @@
+import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { Copy } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { ThemedModal } from '../../../components/modal/ThemedModal';
+
+export type UiEditorSaveResultNotice =
+  | {
+      kind: 'saved';
+    }
+  | {
+      kind: 'generated';
+      relativePath: string;
+    }
+  | {
+      kind: 'failure';
+      message: string;
+      retryLabel?: string;
+      onRetry?: () => void;
+    };
+
+export function UiEditorSaveResultModal({
+  notice,
+  onClose,
+}: {
+  notice: UiEditorSaveResultNotice | null;
+  onClose: () => void;
+}) {
+  return (
+    <ThemedModal
+      open={notice !== null}
+      onClose={onClose}
+      ariaLabel={ariaLabelForNotice(notice)}
+      panelClassName="w-[min(460px,calc(100vw-2rem))] rounded-2xl p-5"
+    >
+      {notice?.kind === 'generated' ? (
+        <GeneratedNotice relativePath={notice.relativePath} onClose={onClose} />
+      ) : notice?.kind === 'saved' ? (
+        <SimpleNotice title="保存成功" onClose={onClose} />
+      ) : notice?.kind === 'failure' ? (
+        <FailureNotice notice={notice} onClose={onClose} />
+      ) : null}
+    </ThemedModal>
+  );
+}
+
+function GeneratedNotice({
+  relativePath,
+  onClose,
+}: {
+  relativePath: string;
+  onClose: () => void;
+}) {
+  const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>(
+    'idle',
+  );
+
+  useEffect(() => setCopyState('idle'), [relativePath]);
+
+  async function copyPath() {
+    setCopyState('idle');
+    try {
+      await writeText(relativePath);
+      setCopyState('copied');
+    } catch {
+      setCopyState('failed');
+    }
+  }
+
+  return (
+    <>
+      <h2 className="m-0 text-base font-semibold">代码已生成</h2>
+      <p className="mt-3 text-sm text-(--platform-text-soft)">生成文件路径</p>
+      <code className="mt-2 block select-text break-all rounded-lg bg-black/5 px-3 py-2 text-xs leading-5">
+        {relativePath}
+      </code>
+      {copyState === 'failed' ? (
+        <p className="mt-2 text-xs text-red-600" role="alert">
+          复制失败，请手动复制路径。
+        </p>
+      ) : null}
+      <div className="mt-5 flex flex-wrap justify-end gap-2">
+        <button
+          type="button"
+          className="inline-flex items-center gap-1.5 rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
+          onClick={() => void copyPath()}
+        >
+          <Copy size={14} aria-hidden="true" />
+          {copyState === 'copied' ? '已复制' : '复制路径'}
+        </button>
+        <button
+          type="button"
+          className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
+          onClick={onClose}
+        >
+          关闭
+        </button>
+      </div>
+    </>
+  );
+}
+
+function SimpleNotice({
+  title,
+  onClose,
+}: {
+  title: string;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <h2 className="m-0 text-base font-semibold">{title}</h2>
+      <div className="mt-5 flex justify-end">
+        <button
+          type="button"
+          className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
+          onClick={onClose}
+        >
+          关闭
+        </button>
+      </div>
+    </>
+  );
+}
+
+function FailureNotice({
+  notice,
+  onClose,
+}: {
+  notice: Extract<UiEditorSaveResultNotice, { kind: 'failure' }>;
+  onClose: () => void;
+}) {
+  return (
+    <>
+      <h2 className="m-0 text-base font-semibold">操作失败</h2>
+      <p className="mt-3 whitespace-pre-line text-sm leading-6 text-red-700">
+        {notice.message}
+      </p>
+      <div className="mt-5 flex flex-wrap justify-end gap-2">
+        <button
+          type="button"
+          className="rounded-lg border border-(--platform-subpanel-border) px-3 py-2 text-xs"
+          onClick={onClose}
+        >
+          关闭
+        </button>
+        {notice.onRetry ? (
+          <button
+            type="button"
+            className="rounded-lg bg-orange-600 px-3 py-2 text-xs font-semibold text-white"
+            onClick={() => {
+              onClose();
+              notice.onRetry?.();
+            }}
+          >
+            {notice.retryLabel ?? '重试'}
+          </button>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+function ariaLabelForNotice(notice: UiEditorSaveResultNotice | null) {
+  if (notice?.kind === 'generated') return '代码已生成';
+  if (notice?.kind === 'saved') return '保存成功';
+  if (notice?.kind === 'failure') return '操作失败';
+  return '保存结果';
+}