feat(ExportImage): enhance image export functionality by integrating download service, adding support for multiple formats (PNG, JPEG, SVG, JSON, YAML), and improving user feedback during export process.

Author: windbytes

src/views/integrated/Workflow/tools/ExportImage.tsx

@@ -1,37 +1,75 @@
 import { FileImageOutlined } from '@ant-design/icons';
+import { FlowDownloadFormat, FlowDownloadService } from '@flowgram.ai/export-plugin';
+import { usePlayground, useService } from '@flowgram.ai/free-layout-editor';
 import type { MenuProps } from 'antd';
-import { Button, Dropdown, Tooltip } from 'antd';
+import { App, Button, Dropdown, Tooltip } from 'antd';
+import { useEffect, useState } from 'react';
 
 /**
  * 导出图片组件
  * @returns
  */
 const ExportImage: React.FC = () => {
+  const { message } = App.useApp();
+  // 正在导出中
+  const [isExporting, setIsExporting] = useState(false);
+  const playground = usePlayground();
+  const { readonly } = playground.config;
+  const downloadService = useService(FlowDownloadService);
+
+  // 监听导出进度
+  useEffect(() => {
+    const subscription = downloadService.onDownloadingChange((v) => {
+      setIsExporting(v);
+    });
+    return () => subscription.dispose();
+  }, [downloadService, readonly]);
+
+  // 处理下载导出
+  const handleDownload = async (format: FlowDownloadFormat) => {
+    await downloadService.download({ format });
+    const formatOption = exportImageMenuItems?.find((option) => option?.key === format);
+    if (formatOption) {
+      message.success(`导出${formatOption.key}成功`);
+    }
+  };
+
   // 导出图片菜单项
   const exportImageMenuItems: MenuProps['items'] = [
     {
-      key: 'current-view-png',
+      key: 'png',
       label: '导出为 PNG',
-      onClick: () => console.log('导出当前视图为 PNG'),
+      onClick: () => handleDownload(FlowDownloadFormat.PNG),
     },
     {
-      key: 'current-view-jpeg',
+      key: 'jpeg',
       label: '导出为 JPEG',
-      onClick: () => console.log('导出当前视图为 JPEG'),
+      onClick: () => handleDownload(FlowDownloadFormat.JPEG),
     },
     {
-      key: 'current-view-svg',
+      key: 'svg',
       label: '导出为 SVG',
-      onClick: () => console.log('导出当前视图为 SVG'),
+      onClick: () => handleDownload(FlowDownloadFormat.SVG),
+    },
+    {
+      key: 'json',
+      label: '导出为 JSON',
+      onClick: () => handleDownload(FlowDownloadFormat.JSON),
+    },
+    {
+      key: 'yaml',
+      label: '导出为 YAML',
+      onClick: () => handleDownload(FlowDownloadFormat.YAML),
     },
   ];
 
   return (
-    <Tooltip title="导出图片" color="white">
+    <Tooltip title="导出" color="white">
       <Dropdown
         menu={{
           items: exportImageMenuItems,
         }}
+        disabled={isExporting}
         trigger={['click']}
         placement="bottomRight"
       >