feat: added export workflow as img (#17904)

This commit is contained in:
诗浓 2025-04-14 11:18:18 +08:00 committed by GitHub
parent 0975c3c399
commit f84832e0c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 4682 additions and 4097 deletions

View File

@ -21,6 +21,7 @@ import { useStore } from '../store'
import Divider from '../../base/divider'
import AddBlock from './add-block'
import TipPopup from './tip-popup'
import ExportImage from './export-image'
import { useOperator } from './hooks'
import cn from '@/utils/classnames'
@ -83,6 +84,7 @@ const Control = () => {
</div>
</TipPopup>
<Divider type='vertical' className='mx-0.5 h-3.5' />
<ExportImage />
<TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
<div
className={cn(

View File

@ -0,0 +1,131 @@
import type { FC } from 'react'
import {
memo,
useCallback,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import { toJpeg, toPng, toSvg } from 'html-to-image'
import { useNodesReadOnly } from '../hooks'
import TipPopup from './tip-popup'
import { RiExportLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import { useStore as useAppStore } from '@/app/components/app/store'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
const ExportImage: FC = () => {
const { t } = useTranslation()
const { getNodesReadOnly } = useNodesReadOnly()
const appDetail = useAppStore(s => s.appDetail)
const [open, setOpen] = useState(false)
const handleExportImage = useCallback(async (type: 'png' | 'jpeg' | 'svg') => {
if (!appDetail)
return
if (getNodesReadOnly())
return
setOpen(false)
const flowElement = document.querySelector('.react-flow__viewport') as HTMLElement
if (!flowElement) return
try {
const filter = (node: HTMLElement) => {
if (node instanceof HTMLImageElement)
return node.complete && node.naturalHeight !== 0
return true
}
let dataUrl
switch (type) {
case 'png':
dataUrl = await toPng(flowElement, { filter })
break
case 'jpeg':
dataUrl = await toJpeg(flowElement, { filter })
break
case 'svg':
dataUrl = await toSvg(flowElement, { filter })
break
default:
dataUrl = await toPng(flowElement, { filter })
}
const link = document.createElement('a')
link.href = dataUrl
link.download = `${appDetail.name}.${type}`
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
catch (error) {
console.error('Export image failed:', error)
}
}, [getNodesReadOnly, appDetail])
const handleTrigger = useCallback(() => {
if (getNodesReadOnly())
return
setOpen(v => !v)
}, [getNodesReadOnly])
return (
<PortalToFollowElem
open={open}
onOpenChange={setOpen}
placement="top-start"
offset={{
mainAxis: 4,
crossAxis: -8,
}}
>
<PortalToFollowElemTrigger>
<TipPopup title={t('workflow.common.exportImage')}>
<div
className={cn(
'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
`${getNodesReadOnly() && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)}
onClick={handleTrigger}
>
<RiExportLine className='h-4 w-4' />
</div>
</TipPopup>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'>
<div className='min-w-[120px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-text-secondary shadow-lg'>
<div className='p-1'>
<div
className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
onClick={() => handleExportImage('png')}
>
{t('workflow.common.exportPNG')}
</div>
<div
className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
onClick={() => handleExportImage('jpeg')}
>
{t('workflow.common.exportJPEG')}
</div>
<div
className='system-md-regular flex h-8 cursor-pointer items-center rounded-lg px-2 hover:bg-state-base-hover'
onClick={() => handleExportImage('svg')}
>
{t('workflow.common.exportSVG')}
</div>
</div>
</div>
</PortalToFollowElemContent>
</PortalToFollowElem>
)
}
export default memo(ExportImage)

View File

@ -70,6 +70,10 @@ const translation = {
pasteHere: 'Paste Here',
pointerMode: 'Pointer Mode',
handMode: 'Hand Mode',
exportImage: 'Export Image',
exportPNG: 'Export as PNG',
exportJPEG: 'Export as JPEG',
exportSVG: 'Export as SVG',
model: 'Model',
workflowAsTool: 'Workflow as Tool',
configureRequired: 'Configure Required',

View File

@ -69,6 +69,10 @@ const translation = {
pasteHere: '粘贴到这里',
pointerMode: '指针模式',
handMode: '手模式',
exportImage: '导出图片',
exportPNG: '导出为 PNG',
exportJPEG: '导出为 JPEG',
exportSVG: '导出为 SVG',
model: '模型',
workflowAsTool: '发布为工具',
configureRequired: '需要进行配置',

View File

@ -69,6 +69,7 @@
"emoji-mart": "^5.5.2",
"fast-deep-equal": "^3.1.3",
"globals": "^15.11.0",
"html-to-image": "1.11.11",
"i18next": "^23.16.4",
"i18next-resources-to-backend": "^1.2.1",
"immer": "^9.0.19",

8637
web/pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff