fix: state tracking

src/components/stores/deckStore.ts

@@ -71,7 +71,10 @@ export interface DeckActions {
   copyCode: () => void;
 }
 
-export interface DeckStore extends DeckState, DeckActions {}
+export interface DeckStore {
+  state: DeckState;
+  actions: DeckActions;
+}
 
 /**
  * 创建 deck store
@@ -187,8 +190,7 @@ export function createDeckStore(): DeckStore {
     });
   };
 
-  return {
-    ...state,
+  const actions: DeckActions = {
     setSize,
     setGrid,
     setBleed,
@@ -211,4 +213,6 @@ export function createDeckStore(): DeckStore {
     generateCode,
     copyCode
   };
+
+  return { state, actions };
 }

src/components/stores/use-selection.ts

@@ -5,9 +5,9 @@ import type { DeckStore } from './deckStore';
  * 此 hook 保留用于向后兼容或提取特定逻辑
  */
 export function useSelection(store: DeckStore) {
-  const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['dimensions']) => {
+  const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['state']['dimensions']) => {
     if (!dimensions) return { gridX: 1, gridY: 1 };
-    
+
     const rect = cardEl.getBoundingClientRect();
 
     const offsetX = (e.clientX - rect.left) / rect.width * dimensions.cardWidth;
@@ -23,36 +23,36 @@ export function useSelection(store: DeckStore) {
   };
 
   const handleMouseDown = (e: MouseEvent, cardEl: HTMLElement) => {
-    if (!store.isEditing || !store.editingLayer) return;
+    if (!store.state.isEditing || !store.state.editingLayer) return;
 
-    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.dimensions);
+    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
 
-    store.setSelectStart({ x: gridX, y: gridY });
-    store.setSelectEnd({ x: gridX, y: gridY });
-    store.setIsSelecting(true);
+    store.actions.setSelectStart({ x: gridX, y: gridY });
+    store.actions.setSelectEnd({ x: gridX, y: gridY });
+    store.actions.setIsSelecting(true);
   };
 
   const handleMouseMove = (e: MouseEvent, cardEl: HTMLElement) => {
-    if (!store.isSelecting) return;
+    if (!store.state.isSelecting) return;
 
-    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.dimensions);
+    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
 
-    store.setSelectEnd({ x: gridX, y: gridY });
+    store.actions.setSelectEnd({ x: gridX, y: gridY });
   };
 
   const handleMouseUp = () => {
-    if (!store.isSelecting || !store.editingLayer) return;
+    if (!store.state.isSelecting || !store.state.editingLayer) return;
 
-    const start = store.selectStart!;
-    const end = store.selectEnd!;
+    const start = store.state.selectStart!;
+    const end = store.state.selectEnd!;
 
     const x1 = Math.min(start.x, end.x);
     const y1 = Math.min(start.y, end.y);
     const x2 = Math.max(start.x, end.x);
     const y2 = Math.max(start.y, end.y);
 
-    store.updateLayerPosition(x1, y1, x2, y2);
-    store.cancelSelection();
+    store.actions.updateLayerPosition(x1, y1, x2, y2);
+    store.actions.cancelSelection();
   };
 
   return {