feat: richer 1080p demo BI screen
This commit is contained in:
parent
510d478be3
commit
2255cf0e78
@ -260,11 +260,106 @@ export function createInitialState(): EditorRuntimeState {
|
||||
name: 'Demo Screen',
|
||||
nodes: [
|
||||
{
|
||||
id: 'text_1',
|
||||
id: 'title',
|
||||
type: 'text',
|
||||
rect: { x: 100, y: 80, w: 300, h: 60 },
|
||||
props: { text: 'Hello AstralView', fontSize: 32, color: '#ffffff', fontWeight: 600 },
|
||||
rect: { x: 80, y: 48, w: 1000, h: 64 },
|
||||
props: {
|
||||
text: 'AstralView Demo — BI Dashboard',
|
||||
fontSize: 36,
|
||||
fontWeight: 700,
|
||||
color: '#e2e8f0',
|
||||
letterSpacing: 0.4,
|
||||
},
|
||||
} satisfies TextWidgetNode,
|
||||
{
|
||||
id: 'logo',
|
||||
type: 'image',
|
||||
rect: { x: 1600, y: 40, w: 260, h: 80 },
|
||||
props: { src: 'https://placehold.co/260x80/png?text=AstralView', fit: 'contain', borderRadius: 8 },
|
||||
},
|
||||
{
|
||||
id: 'kpi_1',
|
||||
type: 'text',
|
||||
rect: { x: 80, y: 140, w: 360, h: 140 },
|
||||
props: {
|
||||
text: 'Active Users\n12,384',
|
||||
fontSize: 28,
|
||||
fontWeight: 700,
|
||||
color: '#ffffff',
|
||||
backgroundColor: 'rgba(16,185,129,0.10)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(16,185,129,0.35)',
|
||||
borderRadius: 12,
|
||||
paddingX: 18,
|
||||
paddingY: 14,
|
||||
},
|
||||
} satisfies TextWidgetNode,
|
||||
{
|
||||
id: 'kpi_2',
|
||||
type: 'text',
|
||||
rect: { x: 460, y: 140, w: 360, h: 140 },
|
||||
props: {
|
||||
text: 'Conversion\n3.72%',
|
||||
fontSize: 28,
|
||||
fontWeight: 700,
|
||||
color: '#ffffff',
|
||||
backgroundColor: 'rgba(59,130,246,0.10)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(59,130,246,0.35)',
|
||||
borderRadius: 12,
|
||||
paddingX: 18,
|
||||
paddingY: 14,
|
||||
},
|
||||
} satisfies TextWidgetNode,
|
||||
{
|
||||
id: 'kpi_3',
|
||||
type: 'text',
|
||||
rect: { x: 840, y: 140, w: 360, h: 140 },
|
||||
props: {
|
||||
text: 'Revenue\n¥ 1,284,120',
|
||||
fontSize: 28,
|
||||
fontWeight: 700,
|
||||
color: '#ffffff',
|
||||
backgroundColor: 'rgba(168,85,247,0.10)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(168,85,247,0.35)',
|
||||
borderRadius: 12,
|
||||
paddingX: 18,
|
||||
paddingY: 14,
|
||||
},
|
||||
} satisfies TextWidgetNode,
|
||||
{
|
||||
id: 'chart_iframe',
|
||||
type: 'iframe',
|
||||
rect: { x: 80, y: 320, w: 1120, h: 680 },
|
||||
props: {
|
||||
src: 'https://example.com',
|
||||
title: 'Embedded chart / report',
|
||||
borderRadius: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'note',
|
||||
type: 'text',
|
||||
rect: { x: 1240, y: 320, w: 600, h: 240 },
|
||||
props: {
|
||||
text: 'Tips:\n• Try multi-select (Shift) and resize the group bbox\n• Right-click for context menu\n• Edit x/y/w/h in inspector\n• Paste a JSON screen to import',
|
||||
fontSize: 18,
|
||||
color: '#cbd5e1',
|
||||
backgroundColor: 'rgba(255,255,255,0.04)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
borderRadius: 12,
|
||||
paddingX: 16,
|
||||
paddingY: 14,
|
||||
},
|
||||
} satisfies TextWidgetNode,
|
||||
{
|
||||
id: 'preview_img',
|
||||
type: 'image',
|
||||
rect: { x: 1240, y: 580, w: 600, h: 420 },
|
||||
props: { src: 'https://placehold.co/600x420/png?text=Widget+Preview', fit: 'cover', borderRadius: 12 },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user