editor: editable screen size (default 1920x1080)

packages/editor/src/editor/EditorApp.tsx

@@ -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)' }} />

packages/editor/src/editor/store.ts

@@ -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 {