mlt131220/AstralView
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

editor: editable screen size (default 1920x1080)

Browse Source
This commit is contained in:
clawdbot 2026-01-29 13:47:05 +08:00
parent 2255cf0e78
commit 4a9134d91d
2 changed files with 55 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/editor/src/editor/EditorApp.tsx
View File

@ -639,10 +639,32 @@ export function EditorApp() {
<PanelTitle title="页面配置" />
<div style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 10, alignItems: 'center' }}>
<Typography.Text style={{ color: '#94a3b8', fontSize: 12 }}>宽度</Typography.Text>
<InputNumber size="small" value={state.doc.screen.width} controls={false} readOnly style={{ width: 160 }} />
<InputNumber
size="small"
value={state.doc.screen.width}
controls={false}
min={320}
step={10}
onChange={(v) => {
if (typeof v !== 'number') return;
dispatch({ type: 'updateScreenSize', width: v });
}}
style={{ width: 160 }}
/>
<Typography.Text style={{ color: '#94a3b8', fontSize: 12 }}>高度</Typography.Text>
<InputNumber size="small" value={state.doc.screen.height} controls={false} readOnly style={{ width: 160 }} />
<InputNumber
size="small"
value={state.doc.screen.height}
controls={false}
min={240}
step={10}
onChange={(v) => {
if (typeof v !== 'number') return;
dispatch({ type: 'updateScreenSize', height: v });
}}
style={{ width: 160 }}
/>
</div>
<Divider style={{ borderColor: 'rgba(255,255,255,0.08)' }} />

31
packages/editor/src/editor/store.ts
View File

@ -57,6 +57,7 @@ export type EditorAction =
| { type: 'updateResize'; current: { screenX: number; screenY: number }; bounds: { w: number; h: number } }
| { type: 'endResize' }
| { type: 'addTextAt'; x: number; y: number }
| { type: 'updateScreenSize'; width?: number; height?: number }
| { type: 'importJSON'; json: string }
| { type: 'deleteSelected' }
| { type: 'nudgeSelected'; dx: number; dy: number }
@ -1355,6 +1356,36 @@ export function editorReducer(state: EditorRuntimeState, action: EditorAction):
};
}
case 'updateScreenSize': {
const minW = 320;
const minH = 240;
const width = action.width ?? state.doc.screen.width;
const height = action.height ?? state.doc.screen.height;
if (!Number.isFinite(width) || !Number.isFinite(height)) return state;
const nextW = Math.max(minW, Math.round(width));
const nextH = Math.max(minH, Math.round(height));
if (nextW === state.doc.screen.width && nextH === state.doc.screen.height) return state;
const bounds = { w: nextW, h: nextH };
const nextNodes = state.doc.screen.nodes.map((n) => ({
...n,
rect: clampRectToBounds(n.rect, bounds),
}));
return {
...historyPush(state),
doc: {
screen: {
...state.doc.screen,
width: nextW,
height: nextH,
nodes: nextNodes,
},
},
};
}
case 'importJSON': {
const parsed: unknown = JSON.parse(action.json);
try {