feat: enhance ExportDialog with customizable import/export code and localStorage support

- Added textarea inputs for customizable 'before' and 'after' code snippets.
- Introduced a checkbox to toggle the removal of view items in the export.
- Implemented localStorage functionality to persist user preferences for 'before', 'after', and 'removeViewItem'.
- Updated the code generation logic to incorporate new options.

src/app/studio/components/ExportDialog.tsx

@@ -6,8 +6,16 @@ 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';
+import { useState, useEffect } from 'react';
+import { clone, cloneDeep, pick } from 'es-toolkit';
+import { Textarea } from '@/components/ui/textarea';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+type CreateOptions = {
+  removeViewItem?: boolean;
+  before?: string;
+  after?: string;
+}
 export const ExportDialog = () => {
   const { showExportDialog, setShowExportDialog, exportRoutes } = useStudioStore(
     useShallow((state) => ({
@@ -17,13 +25,51 @@ export const ExportDialog = () => {
     }))
   );
   const [copied, setCopied] = useState(false);
+  const [before, setBefore] = useState(() => {
+    const defaultBefore = `import { createQueryApi } from '@kevisual/query/api';`;  
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('exportBefore') || defaultBefore;
+    }
+    return defaultBefore;
+  });
+  const [after, setAfter] = useState(() => {
+    const defaultAfter = `const queryApi = createQueryApi({ api });\n\nexport { queryApi };`;
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('exportAfter') || defaultAfter;
+    }
+    return defaultAfter;
+  });
+  const [removeViewItem, setRemoveViewItem] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('exportRemoveViewItem') === 'true';
+    }
+    return false;
+  });
+
+  // 保存配置到 localStorage
+  useEffect(() => {
+    localStorage.setItem('exportBefore', before);
+  }, [before]);
+
+  useEffect(() => {
+    localStorage.setItem('exportAfter', after);
+  }, [after]);
+
+  useEffect(() => {
+    localStorage.setItem('exportRemoveViewItem', String(removeViewItem));
+  }, [removeViewItem]);
 
   const code = useMemo(() => {
     if (!exportRoutes) return '';
     let routeInfo = exportRoutes.map(route => pick(route, ['path', 'key', 'id', 'description', 'metadata']));
-    const query = createQueryByRoutes(routeInfo as any);
+    const options: CreateOptions = {
+      before,
+      after,
+      removeViewItem,
+    };
+    const query = createQueryByRoutes(cloneDeep(routeInfo as any), options);
     return query;
-  }, [exportRoutes]);
+  }, [exportRoutes, before, after, removeViewItem]);
 
   const handleCopy = async () => {
     try {
@@ -38,12 +84,45 @@ export const ExportDialog = () => {
 
   return (
     <Dialog open={showExportDialog} onOpenChange={setShowExportDialog}>
-      <DialogContent className="max-w-3xl! max-h-[80vh] overflow-hidden">
+      <DialogContent className="max-w-4xl! 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">
+        <div className="flex gap-4 w-full overflow-hidden">
+          <div className="w-90 shrink-0 space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="before">Before (import)</Label>
+              <Textarea
+                id="before"
+                value={before}
+                onChange={(e) => setBefore(e.target.value)}
+                placeholder="import ..."
+                rows={3}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="after">After (export)</Label>
+              <Textarea
+                id="after"
+                value={after}
+                onChange={(e) => setAfter(e.target.value)}
+                placeholder="export ..."
+                rows={3}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="removeViewItem"
+                checked={removeViewItem}
+                onCheckedChange={(checked) => {
+                  const value = checked === true;
+                  setRemoveViewItem(value);
+                }}
+              />
+              <Label htmlFor="removeViewItem">Remove View Item</Label>
+            </div>
+          </div>
+          <div className="flex-1 p-4 border border-gray-300 rounded-md bg-gray-50">
             <pre className="text-xs max-h-[60vh] overflow-auto scrollbar">
               {code}
             </pre>