feat(editor): add goView sample gallery for import verification
This commit is contained in:
clawdbot
parent
82769ff37b
commit
a2c44b9f1b
@ -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() {
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => 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
|
||||
</Button>
|
||||
</Space>
|
||||
|
||||
<Divider style={{ borderColor: 'rgba(255,255,255,0.08)' }} />
|
||||
<PanelTitle title="Samples（goView）" extra={<Typography.Text style={{ color: '#64748b', fontSize: 12 }}>{goViewSamples.length}</Typography.Text>} />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{goViewSamples.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
style={{
|
||||
borderRadius: 10,
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
padding: 10,
|
||||
display: 'flex',
|
||||
gap: 10,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 72,
|
||||
height: 44,
|
||||
borderRadius: 8,
|
||||
background: 'rgba(16,185,129,0.10)',
|
||||
border: '1px solid rgba(16,185,129,0.25)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#a7f3d0',
|
||||
fontSize: 12,
|
||||
letterSpacing: 0.4,
|
||||
}}
|
||||
>
|
||||
goView
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ color: '#e2e8f0', fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{s.title}
|
||||
</div>
|
||||
<div style={{ color: '#94a3b8', fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{s.subtitle ?? s.description ?? ''}
|
||||
</div>
|
||||
</div>
|
||||
<Space size={6}>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setImportText(s.json);
|
||||
dispatch({ type: 'importJSON', json: s.json });
|
||||
if (s.focusId) dispatch({ type: 'setSelection', ids: [s.focusId] });
|
||||
message.success('已加载样例');
|
||||
}}
|
||||
>
|
||||
Load
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
void navigator.clipboard?.writeText(s.json);
|
||||
message.success('已复制 JSON');
|
||||
}}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Sider>
|
||||
|
||||
{/* Center */}
|
||||
|
||||
103
packages/editor/src/editor/samples/goviewSamples.ts
Normal file
103
packages/editor/src/editor/samples/goviewSamples.ts
Normal file
@ -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 / <iframe src="…">',
|
||||
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: '<iframe src="https://example.com" width="960" height="540" frameborder="0"></iframe>',
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'goview-video-embed-html',
|
||||
title: '视频（video）- embed HTML',
|
||||
subtitle: 'Media / <video><source>',
|
||||
description: '从 <video>/<source> 里提取 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: '<video controls><source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /></video>',
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user