diff --git a/packages/editor/src/editor/EditorApp.tsx b/packages/editor/src/editor/EditorApp.tsx index 272793f..18d8cd3 100644 --- a/packages/editor/src/editor/EditorApp.tsx +++ b/packages/editor/src/editor/EditorApp.tsx @@ -8,6 +8,7 @@ import { Space, Tabs, Typography, + message, } from 'antd'; import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; import { bindEditorHotkeys } from './hotkeys'; @@ -15,6 +16,7 @@ import { Canvas } from './Canvas'; import { ContextMenu, type ContextMenuState } from './ContextMenu'; import { Inspector } from './Inspector'; import { selectionKeyOf } from './selection'; +import { goViewSamples } from './samples/goviewSamples'; import { createInitialState, editorReducer, exportScreenJSON } from './store'; const { Header, Sider, Content } = Layout; @@ -335,7 +337,10 @@ export function EditorApp() { dispatch({ type: 'importJSON', json: importText })} + onClick={() => { + dispatch({ type: 'importJSON', json: importText }); + message.success('已导入'); + }} disabled={!importText.trim()} > Import @@ -346,11 +351,80 @@ export function EditorApp() { const json = api.exportJSON(); setImportText(json); void navigator.clipboard?.writeText(json); + message.success('已导出并复制到剪贴板'); }} > Export + + + {goViewSamples.length}} /> + + {goViewSamples.map((s) => ( + + + goView + + + + {s.title} + + + {s.subtitle ?? s.description ?? ''} + + + + { + setImportText(s.json); + dispatch({ type: 'importJSON', json: s.json }); + if (s.focusId) dispatch({ type: 'setSelection', ids: [s.focusId] }); + message.success('已加载样例'); + }} + > + Load + + { + void navigator.clipboard?.writeText(s.json); + message.success('已复制 JSON'); + }} + > + Copy + + + + ))} + {/* Center */} diff --git a/packages/editor/src/editor/samples/goviewSamples.ts b/packages/editor/src/editor/samples/goviewSamples.ts new file mode 100644 index 0000000..4b0fedb --- /dev/null +++ b/packages/editor/src/editor/samples/goviewSamples.ts @@ -0,0 +1,103 @@ +export type GoViewSample = { + id: string; + title: string; + subtitle?: string; + description?: string; + json: string; + focusId?: string; +}; + +function prettyJson(v: unknown): string { + return JSON.stringify(v, null, 2); +} + +export const goViewSamples: GoViewSample[] = [ + { + id: 'goview-iframe-url', + title: '网页(iframe)- 直接 URL', + subtitle: 'Embed / iframe', + description: '典型 goView 网页组件:src/url 在 option 中。', + focusId: 'iframe_1', + json: prettyJson({ + editCanvasConfig: { projectName: 'Sample: iframe url', width: 1920, height: 1080, background: '#0b1220' }, + componentList: [ + { + id: 'iframe_1', + chartConfig: { key: 'Iframe' }, + attr: { x: 200, y: 140, w: 960, h: 540 }, + option: { src: 'https://example.com' }, + }, + { + id: 'text_1', + chartConfig: { key: 'TextCommon' }, + attr: { x: 200, y: 60, w: 600, h: 60 }, + option: { text: 'goView Sample: iframe URL' }, + }, + ], + }), + }, + { + id: 'goview-video-mp4', + title: '视频(video)- mp4', + subtitle: 'Media / video', + description: '典型媒体直链:mp4/m3u8/rtsp 等。', + focusId: 'video_1', + json: prettyJson({ + editCanvasConfig: { projectName: 'Sample: video mp4', width: 1920, height: 1080, background: '#0b1220' }, + componentList: [ + { + id: 'video_1', + chartConfig: { key: 'Video' }, + attr: { x: 240, y: 140, w: 960, h: 540 }, + option: { url: 'https://www.w3schools.com/html/mov_bbb.mp4', autoplay: false }, + }, + { + id: 'text_1', + chartConfig: { key: 'TextCommon' }, + attr: { x: 240, y: 60, w: 700, h: 60 }, + option: { text: 'goView Sample: video mp4 (w3schools)' }, + }, + ], + }), + }, + { + id: 'goview-iframe-embed-html', + title: '网页(iframe)- embed HTML', + subtitle: 'Embed / ', + description: '某些低代码导出会把整段 HTML 存进 option。', + focusId: 'iframe_1', + json: prettyJson({ + editCanvasConfig: { projectName: 'Sample: iframe embed html', width: 1920, height: 1080, background: '#0b1220' }, + componentList: [ + { + id: 'iframe_1', + chartConfig: { key: 'IframeCommon' }, + attr: { x: 200, y: 140, w: 960, h: 540 }, + option: { + embed: '', + }, + }, + ], + }), + }, + { + id: 'goview-video-embed-html', + title: '视频(video)- embed HTML', + subtitle: 'Media / ', + description: '从 / 里提取 src 的场景。', + focusId: 'video_1', + json: prettyJson({ + editCanvasConfig: { projectName: 'Sample: video embed html', width: 1920, height: 1080, background: '#0b1220' }, + componentList: [ + { + id: 'video_1', + chartConfig: { key: 'Video' }, + attr: { x: 240, y: 140, w: 960, h: 540 }, + option: { + html: '', + }, + }, + ], + }), + }, +];