diff --git a/apps/suika/src/components/Header/components/Toolbar/menu/Menu.tsx b/apps/suika/src/components/Header/components/Toolbar/menu/Menu.tsx index e2eadd33e..d13f0063e 100644 --- a/apps/suika/src/components/Header/components/Toolbar/menu/Menu.tsx +++ b/apps/suika/src/components/Header/components/Toolbar/menu/Menu.tsx @@ -33,12 +33,22 @@ export const Menu: FC = () => { const items: IDropdownProps['items'] = [ { - key: 'import', - label: t({ id: 'import.originFile' }), - }, - { - key: 'export', - label: t({ id: 'export.originFile' }), + key: 'file', + label: t({ id: 'file' }), + children: [ + { + key: 'import', + label: t({ id: 'import.originFile' }), + }, + { + key: 'export', + label: t({ id: 'export.originFile' }), + }, + { + key: 'exportCurrentPageAsSVG', + label: t({ id: 'export.currentPageAsSVG' }), + }, + ], }, { type: 'divider', @@ -88,6 +98,9 @@ export const Menu: FC = () => { case 'export': exportService.exportOriginFile(editor); break; + case 'exportCurrentPageAsSVG': + exportService.exportCurrentPageSVG(editor); + break; case 'keepToolSelectedAfterUse': case 'invertZoomDirection': case 'highlightLayersOnHover': diff --git a/apps/suika/src/locale/en.json b/apps/suika/src/locale/en.json index c2bf3f7c3..b514eb55e 100644 --- a/apps/suika/src/locale/en.json +++ b/apps/suika/src/locale/en.json @@ -56,8 +56,10 @@ "flip.horizontal": "Flip horizontal", "flip.vertical": "Flip vertical", + "file": "File", "import.originFile": "Import local file", "export.originFile": "Save local copy", + "export.currentPageAsSVG": "Export current page as SVG", "preference": "Preference", "keepToolSelectedAfterUse": "Keep tool selected after use", diff --git a/apps/suika/src/locale/zh.json b/apps/suika/src/locale/zh.json index ff5e42524..c88cd4ff5 100644 --- a/apps/suika/src/locale/zh.json +++ b/apps/suika/src/locale/zh.json @@ -55,8 +55,10 @@ "flip.horizontal": "水平翻转", "flip.vertical": "垂直翻转", + "file": "文件", "import.originFile": "从本地导入", "export.originFile": "导出到本地", + "export.currentPageAsSVG": "导出当前页面为 SVG", "preference": "偏好设置", "keepToolSelectedAfterUse": "使用工具后保持选中状态", diff --git a/packages/core/src/service/export_service.ts b/packages/core/src/service/export_service.ts index bed256dd5..4251653ba 100644 --- a/packages/core/src/service/export_service.ts +++ b/packages/core/src/service/export_service.ts @@ -1,4 +1,5 @@ import { type SuikaEditor } from '../editor'; +import { toSVG } from '../to_svg'; export const exportService = { exportOriginFile: (editor: SuikaEditor, filename = 'design') => { @@ -8,6 +9,23 @@ export const exportService = { }); download(blob, filename + '.suika'); }, + + exportCurrentPageSVG: (editor: SuikaEditor) => { + const currentPage = editor.doc.getCurrentCanvas(); + const graphicsItems = currentPage.getChildren(); + + if (graphicsItems.length === 0) { + // TODO: if no graphics items, show error message + console.error('No graphics items to export'); + return; + } + + const svg = toSVG(graphicsItems); + const blob = new Blob([svg], { + type: 'image/svg+xml', + }); + download(blob, 'design.svg'); + }, }; const download = (blob: Blob, filename: string) => {