udpate

src/app/studio/components/ExportDialog.tsx

@@ -0,0 +1,79 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
+import { useStudioStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { createQueryByRoutes } from '@kevisual/query/api'
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Copy, Check } from 'lucide-react';
+import { toast } from 'sonner';
+import { useState } from 'react';
+import { pick } from 'es-toolkit';
+export const ExportDialog = () => {
+  const { showExportDialog, setShowExportDialog, exportRoutes } = useStudioStore(
+    useShallow((state) => ({
+      showExportDialog: state.showExportDialog,
+      setShowExportDialog: state.setShowExportDialog,
+      exportRoutes: state.exportRoutes,
+    }))
+  );
+  const [copied, setCopied] = useState(false);
+
+  const code = useMemo(() => {
+    if (!exportRoutes) return '';
+    let routeInfo = exportRoutes.map(route => pick(route, ['path', 'key', 'id', 'description', 'metadata']));
+    const query = createQueryByRoutes(routeInfo as any);
+    return query;
+  }, [exportRoutes]);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      toast.success('代码已复制到剪贴板');
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      toast.error('复制失败，请重试');
+    }
+  };
+
+  return (
+    <Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
+      <DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>导出API代码</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 w-full overflow-hidden">
+          <div className="p-4 border border-gray-300 rounded-md bg-gray-50">
+            <pre className="text-xs max-h-[60vh] overflow-auto scrollbar">
+              {code}
+            </pre>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => setShowExportDialog(false)}
+          >
+            取消
+          </Button>
+          <Button
+            onClick={handleCopy}
+            className="gap-2"
+          >
+            {copied ? (
+              <>
+                <Check size={16} />
+                已复制
+              </>
+            ) : (
+              <>
+                <Copy size={16} />
+                复制代码
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};