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() { + + + {goViewSamples.length}} /> +
+ {goViewSamples.map((s) => ( +
+
+ goView +
+
+
+ {s.title} +
+
+ {s.subtitle ?? s.description ?? ''} +
+
+ + + + +
+ ))} +
{/* 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 / ', + }, + }, + ], + }), + }, + { + id: 'goview-video-embed-html', + title: '视频(video)- embed HTML', + subtitle: 'Media /