80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
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>
|
|
);
|
|
};
|