refactor: deckStore

src/components/card-preview.tsx

@@ -1,56 +1,48 @@
 import { Show, For } from 'solid-js';
 import { marked } from '../markdown';
-import type { CardData, LayerConfig, Dimensions } from './types';
 import { getLayerStyle } from './utils/dimensions';
-import { getSelectionBoxStyle } from './hooks/use-selection';
+import {getSelectionBoxStyle, useSelection} from './hooks/use-selection';
+import {DeckStore} from "./stores/deckStore";
 
 export interface CardPreviewProps {
-  cards: CardData[];
+  store: DeckStore;
-  activeTab: number;
-  layerConfigs: LayerConfig[];
-  dimensions: Dimensions;
-  isEditing: boolean;
-  isFixed: boolean;
-  editingLayer: string | null;
-  isSelecting: boolean;
-  selectStart: { x: number; y: number } | null;
-  selectEnd: { x: number; y: number } | null;
-  onMouseDown: (e: MouseEvent) => void;
-  onMouseMove: (e: MouseEvent) => void;
-  onMouseUp: () => void;
-  onMouseLeave: () => void;
 }
 
 /**
  * 渲染 layer 内容
  */
-function renderLayer(layer: { prop: string }, cardData: CardData): string {
+function renderLayer(layer: { prop: string }, cardData: DeckStore['cards'][number]): string {
   const content = cardData[layer.prop] || '';
   return marked.parse(content) as string;
 }
 
 export function CardPreview(props: CardPreviewProps) {
-  const currentCard = () => props.cards[props.activeTab];
+  const currentCard = () => props.store.cards[props.store.activeTab];
-  const visibleLayers = () => props.layerConfigs.filter(l => l.visible);
+  const visibleLayers = () => props.store.layerConfigs.filter((l) => l.visible);
   const selectionStyle = () =>
-    getSelectionBoxStyle(props.selectStart, props.selectEnd, props.dimensions);
+    getSelectionBoxStyle(props.store.selectStart, props.store.selectEnd, props.store.dimensions);
+  
+  const selection = useSelection(props.store);
+
+  let cardRef: HTMLDivElement | undefined;
 
   return (
     <div class="flex justify-center">
-      <Show when={props.activeTab < props.cards.length}>
+      <Show when={props.store.activeTab < props.store.cards.length}>
         <div
+          ref={cardRef}
           class="relative bg-white border border-gray-300 shadow-lg"
           style={{
-            width: `${props.dimensions.cardWidth}mm`,
+            width: `${props.store.dimensions?.cardWidth}mm`,
-            height: `${props.dimensions.cardHeight}mm`
+            height: `${props.store.dimensions?.cardHeight}mm`
           }}
-          onMouseDown={props.onMouseDown}
+          onMouseDown={(e) => selection.onMouseDown(e, cardRef!)}
-          onMouseMove={props.onMouseMove}
+          onMouseMove={(e) => selection.onMouseMove(e, cardRef!)}
-          onMouseUp={props.onMouseUp}
+          onMouseUp={selection.onMouseUp}
-          onMouseLeave={props.onMouseLeave}
+          onMouseLeave={selection.onMouseLeave}
         >
           {/* 框选遮罩 */}
-          <Show when={props.isSelecting && selectionStyle()}>
+          <Show when={props.store.isSelecting && selectionStyle()}>
             <div
               class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
               style={selectionStyle()!}
@@ -61,28 +53,28 @@ export function CardPreview(props: CardPreviewProps) {
           <div
             class="absolute"
             style={{
-              left: `${props.dimensions.gridOriginX}mm`,
+              left: `${props.store.dimensions?.gridOriginX}mm`,
-              top: `${props.dimensions.gridOriginY}mm`,
+              top: `${props.store.dimensions?.gridOriginY}mm`,
-              width: `${props.dimensions.gridAreaWidth}mm`,
+              width: `${props.store.dimensions?.gridAreaWidth}mm`,
-              height: `${props.dimensions.gridAreaHeight}mm`
+              height: `${props.store.dimensions?.gridAreaHeight}mm`
             }}
           >
             {/* 编辑模式下的网格线 */}
-            <Show when={props.isEditing && !props.isFixed}>
+            <Show when={props.store.isEditing && !props.store.fixed}>
               <div class="absolute inset-0 pointer-events-none">
-                <For each={Array.from({ length: props.dimensions.gridW - 1 })}>
+                <For each={Array.from({ length: (props.store.dimensions?.gridW || 0) - 1 })}>
                   {(_, i) => (
                     <div
                       class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
-                      style={{ left: `${(i() + 1) * props.dimensions.cellWidth}mm` }}
+                      style={{ left: `${(i() + 1) * (props.store.dimensions?.cellWidth || 0)}mm` }}
                     />
                   )}
                 </For>
-                <For each={Array.from({ length: props.dimensions.gridH - 1 })}>
+                <For each={Array.from({ length: (props.store.dimensions?.gridH || 0) - 1 })}>
                   {(_, i) => (
                     <div
                       class="absolute left-0 right-0 border-b border-dashed border-gray-300"
-                      style={{ top: `${(i() + 1) * props.dimensions.cellHeight}mm` }}
+                      style={{ top: `${(i() + 1) * (props.store.dimensions?.cellHeight || 0)}mm` }}
                     />
                   )}
                 </For>
@@ -92,12 +84,12 @@ export function CardPreview(props: CardPreviewProps) {
             {/* 渲染每个 layer */}
             <For each={visibleLayers()}>
               {(layer) => {
-                const style = getLayerStyle(layer, props.dimensions);
+                const style = getLayerStyle(layer, props.store.dimensions!);
 
                 return (
                   <div
                     class={`absolute flex items-center justify-center text-center prose prose-sm ${
-                      props.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
+                      props.store.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
                     }`}
                     style={style}
                     innerHTML={renderLayer(layer, currentCard())}

src/components/editor-panel.tsx

@@ -1,26 +1,14 @@
-import { Show, For } from 'solid-js';
+import { For } from 'solid-js';
-import type { CardData, LayerConfig } from './types';
+import { DeckStore } from './stores/deckStore';
 
 export interface DataEditorPanelProps {
-  cards: CardData[];
   activeTab: number;
-  updateCardData: (key: string, value: string) => void;
+  cards: DeckStore['cards'];
+  updateCardData: DeckStore['updateCardData'];
 }
 
 export interface PropertiesEditorPanelProps {
-  localSize: string;
+  store: DeckStore;
-  localGrid: string;
-  localBleed: string;
-  localPadding: string;
-  layerConfigs: LayerConfig[];
-  editingLayer: string | null;
-  onSizeChange: (value: string) => void;
-  onGridChange: (value: string) => void;
-  onBleedChange: (value: string) => void;
-  onPaddingChange: (value: string) => void;
-  onToggleLayerVisible: (prop: string) => void;
-  onStartEditingLayer: (prop: string) => void;
-  onCopyCode: () => void;
 }
 
 /**
@@ -39,7 +27,7 @@ export function DataEditorPanel(props: DataEditorPanelProps) {
                 class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                 rows={3}
                 value={props.cards[props.activeTab]?.[key] || ''}
-                onInput={(e) => props.updateCardData(key, e.target.value)}
+                onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
               />
             </div>
           )}
@@ -53,6 +41,8 @@ export function DataEditorPanel(props: DataEditorPanelProps) {
  * 右侧：卡牌属性编辑面板
  */
 export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
+  const { store } = props;
+  
   return (
     <div class="w-64 flex-shrink-0">
       <h3 class="font-bold mb-2">卡牌属性</h3>
@@ -63,8 +53,8 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
           <input
             type="text"
             class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={props.localSize}
+            value={store.size}
-            onInput={(e) => props.onSizeChange(e.target.value)}
+            onInput={(e) => store.setSize(e.target.value)}
           />
         </div>
 
@@ -73,8 +63,8 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
           <input
             type="text"
             class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={props.localGrid}
+            value={store.grid}
-            onInput={(e) => props.onGridChange(e.target.value)}
+            onInput={(e) => store.setGrid(e.target.value)}
           />
         </div>
 
@@ -83,8 +73,8 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
           <input
             type="text"
             class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={props.localBleed}
+            value={store.bleed}
-            onInput={(e) => props.onBleedChange(e.target.value)}
+            onInput={(e) => store.setBleed(e.target.value)}
           />
         </div>
 
@@ -93,33 +83,33 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
           <input
             type="text"
             class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={props.localPadding}
+            value={store.padding}
-            onInput={(e) => props.onPaddingChange(e.target.value)}
+            onInput={(e) => store.setPadding(e.target.value)}
           />
         </div>
 
         <hr class="my-4" />
 
         <h4 class="font-medium text-sm text-gray-700">图层</h4>
-        <For each={props.layerConfigs}>
+        <For each={store.layerConfigs}>
           {(layer) => (
             <div class="flex items-center gap-2">
               <input
                 type="checkbox"
                 checked={layer.visible}
-                onChange={() => props.onToggleLayerVisible(layer.prop)}
+                onChange={() => store.toggleLayerVisible(layer.prop)}
                 class="cursor-pointer"
               />
               <span class="text-sm flex-1">{layer.prop}</span>
               <button
-                onClick={() => props.onStartEditingLayer(layer.prop)}
+                onClick={() => store.setEditingLayer(layer.prop)}
                 class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
-                  props.editingLayer === layer.prop
+                  store.editingLayer === layer.prop
                     ? 'bg-blue-500 text-white'
                     : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                 }`}
               >
-                {props.editingLayer === layer.prop ? '✓ 框选' : '编辑位置'}
+                {store.editingLayer === layer.prop ? '✓ 框选' : '编辑位置'}
               </button>
             </div>
           )}
@@ -128,7 +118,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
         <hr class="my-4" />
 
         <button
-          onClick={props.onCopyCode}
+          onClick={store.copyCode}
           class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
         >
           📋 复制代码

src/components/hooks/use-layer-editor.ts

@@ -1,70 +0,0 @@
-import { createSignal } from 'solid-js';
-import type { LayerConfig } from '../types';
-import { formatLayers } from '../utils/layer-parser';
-
-/**
- * 图层编辑相关的状态和操作
- */
-export function useLayerEditor(
-  props: any,
-  src: string,
-  localSize: () => string,
-  localGrid: () => string,
-  localBleed: () => string,
-  localPadding: () => string
-) {
-  const [isEditing, setIsEditing] = createSignal(false);
-  const [editingLayer, setEditingLayer] = createSignal<string | null>(null);
-  const [layerConfigs, setLayerConfigs] = createSignal<LayerConfig[]>([]);
-
-  const toggleLayerVisible = (prop: string) => {
-    setLayerConfigs(configs => configs.map(c =>
-      c.prop === prop ? { ...c, visible: !c.visible } : c
-    ));
-  };
-
-  const startEditingLayer = (prop: string) => {
-    setEditingLayer(prop);
-  };
-
-  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
-    const layer = editingLayer();
-    if (!layer) return;
-
-    setLayerConfigs(configs => configs.map(c =>
-      c.prop === layer ? { ...c, x1, y1, x2, y2 } : c
-    ));
-    setEditingLayer(null);
-  };
-
-  const generateCode = () => {
-    const layersStr = formatLayers(layerConfigs());
-    return `:md-deck[${src}]{size="${localSize()}" grid="${localGrid()}" bleed="${localBleed()}" padding="${localPadding()}" layers="${layersStr}"}`;
-  };
-
-  const copyCode = () => {
-    const code = generateCode();
-    navigator.clipboard.writeText(code).then(() => {
-      alert('已复制到剪贴板！');
-    }).catch(err => {
-      console.error('复制失败:', err);
-    });
-  };
-
-  const isFixed = () => props.fixed === true || props.fixed === 'true';
-
-  return {
-    isEditing,
-    setIsEditing,
-    editingLayer,
-    setEditingLayer,
-    layerConfigs,
-    setLayerConfigs,
-    toggleLayerVisible,
-    startEditingLayer,
-    updateLayerPosition,
-    generateCode,
-    copyCode,
-    isFixed
-  };
-}

src/components/hooks/use-selection.ts

@@ -1,82 +1,65 @@
-import { createSignal } from 'solid-js';
+import type { DeckStore } from '../stores/deckStore';
-import type { Dimensions, LayerConfig } from '../types';
 
 /**
- * 框选相关的状态和操作
+ * 框选相关的操作（已整合到 deckStore）
+ * 此 hook 保留用于向后兼容或提取特定逻辑
  */
-export function useSelection(
+export function useSelection(store: DeckStore) {
-  isEditing: () => boolean,
+  const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['dimensions']) => {
-  editingLayer: () => string | null,
+    if (!dimensions) return { gridX: 1, gridY: 1 };
-  dimensions: () => Dimensions
-) {
-  const [isSelecting, setIsSelecting] = createSignal(false);
-  const [selectStart, setSelectStart] = createSignal<{ x: number; y: number } | null>(null);
-  const [selectEnd, setSelectEnd] = createSignal<{ x: number; y: number } | null>(null);
     
-  const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement) => {
     const rect = cardEl.getBoundingClientRect();
-    const dims = dimensions();
 
-    const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
+    const offsetX = (e.clientX - rect.left) / rect.width * dimensions.cardWidth;
-    const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
+    const offsetY = (e.clientY - rect.top) / rect.height * dimensions.cardHeight;
 
-    const gridX = Math.max(1, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1);
+    const gridX = Math.max(1, Math.floor((offsetX - dimensions.gridOriginX) / dimensions.cellWidth) + 1);
-    const gridY = Math.max(1, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1);
+    const gridY = Math.max(1, Math.floor((offsetY - dimensions.gridOriginY) / dimensions.cellHeight) + 1);
 
     return {
-      gridX: Math.max(1, Math.min(dims.gridW, gridX)),
+      gridX: Math.max(1, Math.min(dimensions.gridW, gridX)),
-      gridY: Math.max(1, Math.min(dims.gridH, gridY))
+      gridY: Math.max(1, Math.min(dimensions.gridH, gridY))
     };
   };
 
-  const handleMouseDown = (e: MouseEvent) => {
+  const handleMouseDown = (e: MouseEvent, cardEl: HTMLElement) => {
-    if (!isEditing() || !editingLayer()) return;
+    if (!store.isEditing || !store.editingLayer) return;
 
-    const cardEl = e.currentTarget as HTMLElement;
+    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.dimensions);
-    const { gridX, gridY } = calculateGridCoords(e, cardEl);
 
-    setSelectStart({ x: gridX, y: gridY });
+    store.setSelectStart({ x: gridX, y: gridY });
-    setSelectEnd({ x: gridX, y: gridY });
+    store.setSelectEnd({ x: gridX, y: gridY });
-    setIsSelecting(true);
+    store.setIsSelecting(true);
   };
 
-  const handleMouseMove = (e: MouseEvent) => {
+  const handleMouseMove = (e: MouseEvent, cardEl: HTMLElement) => {
-    if (!isSelecting()) return;
+    if (!store.isSelecting) return;
 
-    const cardEl = e.currentTarget as HTMLElement;
+    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.dimensions);
-    const { gridX, gridY } = calculateGridCoords(e, cardEl);
 
-    setSelectEnd({ x: gridX, y: gridY });
+    store.setSelectEnd({ x: gridX, y: gridY });
   };
 
   const handleMouseUp = () => {
-    if (!isSelecting() || !editingLayer()) return;
+    if (!store.isSelecting || !store.editingLayer) return;
 
-    const start = selectStart()!;
+    const start = store.selectStart!;
-    const end = selectEnd()!;
+    const end = store.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);
 
-    return { x1, y1, x2, y2 };
+    store.updateLayerPosition(x1, y1, x2, y2);
-  };
+    store.cancelSelection();
-
-  const cancelSelection = () => {
-    setIsSelecting(false);
-    setSelectStart(null);
-    setSelectEnd(null);
   };
 
   return {
-    isSelecting,
+    onMouseDown: handleMouseDown,
-    selectStart,
+    onMouseMove: handleMouseMove,
-    selectEnd,
+    onMouseUp: handleMouseUp,
-    handleMouseDown,
+    onMouseLeave: handleMouseUp
-    handleMouseMove,
-    handleMouseUp,
-    cancelSelection
   };
 }
 
@@ -86,9 +69,9 @@ export function useSelection(
 export function getSelectionBoxStyle(
   selectStart: { x: number; y: number } | null,
   selectEnd: { x: number; y: number } | null,
-  dims: Dimensions
+  dims: { gridOriginX: number; gridOriginY: number; cellWidth: number; cellHeight: number } | null
 ): { left: string; top: string; width: string; height: string } | null {
-  if (!selectStart || !selectEnd) return null;
+  if (!selectStart || !selectEnd || !dims) return null;
 
   const x1 = Math.min(selectStart.x, selectEnd.x);
   const y1 = Math.min(selectStart.y, selectEnd.y);

src/components/md-deck.tsx

@@ -1,12 +1,9 @@
 import { customElement, noShadowDOM } from 'solid-element';
-import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
+import { Show, createEffect, createResource, For } from 'solid-js';
 import { resolvePath } from './utils/path';
-import type { CardData, Dimensions } from './types';
 import { loadCSV } from './utils/csv-loader';
 import { initLayerConfigs } from './utils/layer-parser';
-import { calculateDimensions } from './utils/dimensions';
+import { createDeckStore } from './stores/deckStore';
-import { useSelection } from './hooks/use-selection';
-import { useLayerEditor } from './hooks/use-layer-editor';
 import { CardPreview } from './card-preview';
 import { DataEditorPanel, PropertiesEditorPanel } from './editor-panel';
 
@@ -20,25 +17,8 @@ customElement('md-deck', {
 }, (props, { element }) => {
   noShadowDOM();
 
-  const [cards, setCards] = createSignal<CardData[]>([]);
+  // 创建统一的 store
-  const [activeTab, setActiveTab] = createSignal(0);
+  const store = createDeckStore();
-  let tabsContainer: HTMLDivElement | undefined;
-
-  // 本地编辑的属性
-  const [localSize, setLocalSize] = createSignal(props.size as string || '54x86');
-  const [localGrid, setLocalGrid] = createSignal(props.grid as string || '5x8');
-  const [localBleed, setLocalBleed] = createSignal(props.bleed as string || '1');
-  const [localPadding, setLocalPadding] = createSignal(props.padding as string || '2');
-
-  // 使用图层编辑器 hook
-  const layerEditor = useLayerEditor(
-    props,
-    '',
-    localSize,
-    localGrid,
-    localBleed,
-    localPadding
-  );
 
   // 从 element 的 textContent 获取 CSV 路径
   const src = element?.textContent?.trim() || '';
@@ -55,63 +35,28 @@ customElement('md-deck', {
   // 解析相对路径
   const resolvedSrc = resolvePath(articlePath, src);
 
+  // 初始化 store
+  store.initialize(props, src);
+
   // 加载 CSV 文件
   const [csvData] = createResource(() => resolvedSrc, loadCSV);
 
   createEffect(() => {
-    const data = csvData();
+    const data = !csvData.loading && csvData();
     if (data) {
-      setCards(data);
+      store.setCards(data);
-      layerEditor.setLayerConfigs(initLayerConfigs(data, props.layers as string || ''));
+      store.setLayerConfigs(initLayerConfigs(data, props.layers as string || ''));
     }
   });
 
-  // 更新 src 到 layerEditor
-  createEffect(() => {
-    (layerEditor as any).src = src;
-  });
-
-  // 解析尺寸
-  const dimensions = createMemo((): Dimensions => {
-    return calculateDimensions({
-      size: localSize(),
-      bleed: localBleed(),
-      padding: localPadding(),
-      grid: localGrid()
-    });
-  });
-
-  // 使用框选 hook
-  const selection = useSelection(
-    layerEditor.isEditing,
-    layerEditor.editingLayer,
-    dimensions
-  );
-
-  // 处理框选完成
-  const handleMouseUp = () => {
-    const result = selection.handleMouseUp();
-    if (result) {
-      layerEditor.updateLayerPosition(result.x1, result.y1, result.x2, result.y2);
-      selection.cancelSelection();
-    }
-  };
-
-  // 更新 CSV 数据
-  const updateCardData = (key: string, value: string) => {
-    setCards(cards => cards.map((card, i) =>
-      i === activeTab() ? { ...card, [key]: value } : card
-    ));
-  };
-
   return (
     <div class="md-deck flex gap-4">
       {/* 左侧：CSV 数据编辑 */}
-      <Show when={layerEditor.isEditing() && !layerEditor.isFixed()}>
+      <Show when={store.isEditing && !store.fixed}>
         <DataEditorPanel
-          cards={cards()}
+          activeTab={store.activeTab}
-          activeTab={activeTab()}
+          cards={store.cards}
-          updateCardData={updateCardData}
+          updateCardData={store.updateCardData}
         />
       </Show>
 
@@ -120,22 +65,22 @@ customElement('md-deck', {
         {/* Tab 选择器 */}
         <div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
           <button
-            onClick={() => layerEditor.setIsEditing(!layerEditor.isEditing())}
+            onClick={() => store.setIsEditing(!store.isEditing)}
             class={`px-3 py-1 rounded text-sm font-medium transition-colors ${
-              layerEditor.isEditing() && !layerEditor.isFixed()
+              store.isEditing && !store.fixed
                 ? 'bg-blue-100 text-blue-600'
                 : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
             } cursor-pointer`}
           >
-            {layerEditor.isEditing() ? '✓ 编辑中' : '✏️ 编辑'}
+            {store.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
           </button>
-          <div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
+          <div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
-            <For each={cards()}>
+            <For each={store.cards}>
               {(card, index) => (
                 <button
-                  onClick={() => setActiveTab(index())}
+                  onClick={() => store.setActiveTab(index())}
                   class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
-                    activeTab() === index()
+                    store.activeTab === index()
                       ? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
                       : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
                   }`}
@@ -148,43 +93,14 @@ customElement('md-deck', {
         </div>
 
         {/* 卡牌预览 */}
-        <Show when={!csvData.loading && cards().length > 0}>
+        <Show when={!csvData.loading && store.cards.length > 0}>
-          <CardPreview
+          <CardPreview store={store}/>
-            cards={cards()}
-            activeTab={activeTab()}
-            layerConfigs={layerEditor.layerConfigs()}
-            dimensions={dimensions()}
-            isEditing={layerEditor.isEditing()}
-            isFixed={layerEditor.isFixed()}
-            editingLayer={layerEditor.editingLayer()}
-            isSelecting={selection.isSelecting()}
-            selectStart={selection.selectStart()}
-            selectEnd={selection.selectEnd()}
-            onMouseDown={selection.handleMouseDown}
-            onMouseMove={selection.handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
-          />
         </Show>
       </div>
 
       {/* 右侧：属性编辑表单 */}
-      <Show when={layerEditor.isEditing() && !layerEditor.isFixed()}>
+      <Show when={store.isEditing && !store.fixed}>
-        <PropertiesEditorPanel
+        <PropertiesEditorPanel store={store} />
-          localSize={localSize()}
-          localGrid={localGrid()}
-          localBleed={localBleed()}
-          localPadding={localPadding()}
-          layerConfigs={layerEditor.layerConfigs()}
-          editingLayer={layerEditor.editingLayer()}
-          onSizeChange={setLocalSize}
-          onGridChange={setLocalGrid}
-          onBleedChange={setLocalBleed}
-          onPaddingChange={setLocalPadding}
-          onToggleLayerVisible={layerEditor.toggleLayerVisible}
-          onStartEditingLayer={layerEditor.startEditingLayer}
-          onCopyCode={layerEditor.copyCode}
-        />
       </Show>
     </div>
   );

src/components/stores/deckStore.ts

@@ -0,0 +1,182 @@
+import { createStore, produce } from 'solid-js/store';
+import type { CardData, LayerConfig, Dimensions } from '../types';
+
+export interface DeckState {
+  // 基本属性
+  size: string;
+  grid: string;
+  bleed: string;
+  padding: string;
+  fixed: boolean;
+  src: string;
+  
+  // 解析后的尺寸
+  dimensions: Dimensions | null;
+  
+  // 卡牌数据
+  cards: CardData[];
+  activeTab: number;
+  
+  // 图层配置
+  layerConfigs: LayerConfig[];
+  
+  // 编辑状态
+  isEditing: boolean;
+  editingLayer: string | null;
+  
+  // 框选状态
+  isSelecting: boolean;
+  selectStart: { x: number; y: number } | null;
+  selectEnd: { x: number; y: number } | null;
+}
+
+export interface DeckActions {
+  // 基本属性设置
+  setSize: (size: string) => void;
+  setGrid: (grid: string) => void;
+  setBleed: (bleed: string) => void;
+  setPadding: (padding: string) => void;
+  
+  // 数据设置
+  setCards: (cards: CardData[]) => void;
+  setActiveTab: (index: number) => void;
+  updateCardData: (index: number, key: string, value: string) => void;
+  
+  // 图层操作
+  setLayerConfigs: (configs: LayerConfig[]) => void;
+  updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
+  toggleLayerVisible: (prop: string) => void;
+  
+  // 编辑状态
+  setIsEditing: (editing: boolean) => void;
+  setEditingLayer: (layer: string | null) => void;
+  updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
+  
+  // 框选操作
+  setIsSelecting: (selecting: boolean) => void;
+  setSelectStart: (pos: { x: number; y: number } | null) => void;
+  setSelectEnd: (pos: { x: number; y: number } | null) => void;
+  cancelSelection: () => void;
+  
+  // 初始化
+  initialize: (props: Record<string, any>, csvPath: string) => void;
+  
+  // 生成代码
+  generateCode: () => string;
+  copyCode: () => void;
+}
+
+export interface DeckStore extends DeckState, DeckActions {}
+
+/**
+ * 创建 deck store
+ */
+export function createDeckStore(): DeckStore {
+  const [state, setState] = createStore<DeckState>({
+    size: '54x86',
+    grid: '5x8',
+    bleed: '1',
+    padding: '2',
+    fixed: false,
+    src: '',
+    dimensions: null,
+    cards: [],
+    activeTab: 0,
+    layerConfigs: [],
+    isEditing: false,
+    editingLayer: null,
+    isSelecting: false,
+    selectStart: null,
+    selectEnd: null
+  });
+
+  const setSize = (size: string) => setState({ size });
+  const setGrid = (grid: string) => setState({ grid });
+  const setBleed = (bleed: string) => setState({ bleed });
+  const setPadding = (padding: string) => setState({ padding });
+  
+  const setCards = (cards: CardData[]) => setState({ cards });
+  const setActiveTab = (index: number) => setState({ activeTab: index });
+  const updateCardData = (index: number, key: string, value: string) => {
+    setState('cards', index, key, value);
+  };
+  
+  const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
+  const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
+    setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  };
+  const toggleLayerVisible = (prop: string) => {
+    setState('layerConfigs', (prev) => prev.map((config) =>
+      config.prop === prop ? { ...config, visible: !config.visible } : config
+    ));
+  };
+  
+  const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
+  const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
+  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
+    const layer = state.editingLayer;
+    if (!layer) return;
+    setState('layerConfigs', (prev) => prev.map((config) =>
+      config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
+    ));
+    setState({ editingLayer: null });
+  };
+  
+  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
+  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
+  const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
+  const cancelSelection = () => {
+    setState({ isSelecting: false, selectStart: null, selectEnd: null });
+  };
+  
+  const initialize = (props: Record<string, any>, csvPath: string) => {
+    setState({
+      size: props.size as string || '54x86',
+      grid: props.grid as string || '5x8',
+      bleed: props.bleed as string || '1',
+      padding: props.padding as string || '2',
+      fixed: props.fixed === true || props.fixed === 'true',
+      src: csvPath
+    });
+  };
+  
+  const generateCode = () => {
+    const layersStr = state.layerConfigs
+      .map(l => `${l.prop}=${l.x1},${l.y1},${l.x2},${l.y2}`)
+      .join('|');
+    return `:md-deck[${state.src}]{size="${state.size}" grid="${state.grid}" bleed="${state.bleed}" padding="${state.padding}" layers="${layersStr}"}`;
+  };
+  
+  const copyCode = () => {
+    const code = generateCode();
+    navigator.clipboard.writeText(code).then(() => {
+      alert('已复制到剪贴板！');
+    }).catch(err => {
+      console.error('复制失败:', err);
+    });
+  };
+
+  return {
+    ...state,
+    setSize,
+    setGrid,
+    setBleed,
+    setPadding,
+    setCards,
+    setActiveTab,
+    updateCardData,
+    setLayerConfigs,
+    updateLayerConfig,
+    toggleLayerVisible,
+    setIsEditing,
+    setEditingLayer,
+    updateLayerPosition,
+    setIsSelecting,
+    setSelectStart,
+    setSelectEnd,
+    cancelSelection,
+    initialize,
+    generateCode,
+    copyCode
+  };
+}