fix(POSTV1-07): 固定画布布局与文字贴纸选择

apps/web/src/editor-page.css

@@ -1,9 +1,12 @@
 .editor-page-shell {
-  min-height: 100vh;
+  height: 100vh;
+  height: 100dvh;
+  min-height: 0;
   display: grid;
   grid-template-rows: 56px minmax(0, 1fr) 32px;
   background: #e8e8e5;
   color: #111111;
+  overflow: hidden;
 }
 
 .editor-page-shell :focus-visible {
@@ -124,6 +127,7 @@
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr) 320px;
   min-height: 0;
+  overflow: hidden;
 }
 
 .editor-assets-panel,
@@ -542,13 +546,13 @@
 }
 
 @media (max-width: 760px) {
-  .editor-page-shell { grid-template-rows: auto minmax(0, 1fr) auto; }
+  .editor-page-shell { height: auto; min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; overflow: visible; }
   .editor-toolbar { display: flex; min-height: 56px; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
   .editor-title { min-width: 0; flex: 1 1 calc(100% - 56px); }
   .editor-history-actions { order: 3; }
   .editor-save-status { order: 4; flex: 1 1 128px; }
   .editor-toolbar-controls > button { display: block; order: 5; }
-  .editor-layout { grid-template-columns: 1fr; }
+  .editor-layout { grid-template-columns: 1fr; overflow: visible; }
   .editor-assets-panel, .editor-inspector { border: 0; }
   .editor-assets-panel { order: 2; }
   .editor-inspector { order: 3; }

apps/web/src/editor-stage.tsx

@@ -12,12 +12,17 @@ import { drawColorCard } from "./palette-provider.js";
 
 interface Gesture {
   append: boolean;
+  bounds: DOMRect;
   hit: boolean;
   longPressOpened: boolean;
+  moved: boolean;
   pointerId: number;
   start: CanvasPoint;
+  startClient: CanvasPoint;
 }
 
+const DRAG_THRESHOLD_PX = 4;
+
 interface EditorStageProps {
   assetId: string | null;
   canvasState: CanvasState;
@@ -38,11 +43,10 @@ interface EditorStageProps {
   selectedIds: readonly string[];
 }
 
-function pointFromEvent(event: PointerEvent<HTMLCanvasElement>): CanvasPoint {
-  const bounds = event.currentTarget.getBoundingClientRect();
+function pointFromClient(clientX: number, clientY: number, bounds: DOMRect): CanvasPoint {
   return {
-    x: Math.max(0, Math.min(1, (event.clientX - bounds.left) / bounds.width)),
-    y: Math.max(0, Math.min(1, (event.clientY - bounds.top) / bounds.height)),
+    x: Math.max(0, Math.min(1, (clientX - bounds.left) / bounds.width)),
+    y: Math.max(0, Math.min(1, (clientY - bounds.top) / bounds.height)),
   };
 }
 
@@ -356,10 +360,14 @@ export function EditorStage(props: EditorStageProps) {
 
   function handlePointerDown(event: PointerEvent<HTMLCanvasElement>) {
     if (event.button !== 0) return;
-    const start = pointFromEvent(event);
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const start = pointFromClient(event.clientX, event.clientY, bounds);
     const append = event.shiftKey;
     const hit = props.onSelect(start, append);
-    gestureRef.current = { append, hit, longPressOpened: false, pointerId: event.pointerId, start };
+    gestureRef.current = {
+      append, bounds, hit, longPressOpened: false, moved: false, pointerId: event.pointerId, start,
+      startClient: { x: event.clientX, y: event.clientY },
+    };
     event.currentTarget.setPointerCapture(event.pointerId);
     longPressRef.current = setTimeout(() => {
       const gesture = gestureRef.current;
@@ -375,9 +383,11 @@ export function EditorStage(props: EditorStageProps) {
       props.onPointerMoved();
       return;
     }
-    const point = pointFromEvent(event);
+    const clientDistance = Math.hypot(event.clientX - gesture.startClient.x, event.clientY - gesture.startClient.y);
+    if (!gesture.moved && clientDistance < DRAG_THRESHOLD_PX) return;
+    gesture.moved = true;
+    const point = pointFromClient(event.clientX, event.clientY, gesture.bounds);
     const delta = { x: point.x - gesture.start.x, y: point.y - gesture.start.y };
-    if (Math.abs(delta.x) + Math.abs(delta.y) < 0.003) return;
     if (longPressRef.current) clearTimeout(longPressRef.current);
     props.onPointerMoved();
     if (gesture.hit && !gesture.longPressOpened) props.onMovePreview(delta);
@@ -388,11 +398,18 @@ export function EditorStage(props: EditorStageProps) {
     const gesture = gestureRef.current;
     if (!gesture || gesture.pointerId !== event.pointerId) return;
     if (longPressRef.current) clearTimeout(longPressRef.current);
-    const point = pointFromEvent(event);
-    const delta = { x: point.x - gesture.start.x, y: point.y - gesture.start.y };
-    const moved = Math.abs(delta.x) + Math.abs(delta.y) >= 0.003;
+    const clientDistance = Math.hypot(event.clientX - gesture.startClient.x, event.clientY - gesture.startClient.y);
+    const moved = gesture.moved || clientDistance >= DRAG_THRESHOLD_PX;
+    if (moved && !gesture.moved && !gesture.longPressOpened) {
+      const point = pointFromClient(event.clientX, event.clientY, gesture.bounds);
+      const delta = { x: point.x - gesture.start.x, y: point.y - gesture.start.y };
+      if (gesture.hit) props.onMovePreview(delta);
+    }
     if (gesture.hit && moved && !gesture.longPressOpened) props.onMoveCommit();
-    else if (!gesture.hit && moved) props.onMarquee({ height: delta.y, width: delta.x, x: gesture.start.x, y: gesture.start.y }, gesture.append);
+    else if (!gesture.hit && moved) {
+      const point = pointFromClient(event.clientX, event.clientY, gesture.bounds);
+      props.onMarquee({ height: point.y - gesture.start.y, width: point.x - gesture.start.x, x: gesture.start.x, y: gesture.start.y }, gesture.append);
+    }
     setMarquee(undefined);
     gestureRef.current = undefined;
     event.currentTarget.releasePointerCapture(event.pointerId);