From 0e2f214552d1ec28025b38e778c33d6300164937 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Fri, 27 Feb 2026 15:40:52 +0800
Subject: [PATCH] fix: details

---
 src/components/md-deck/CardPreview.tsx        |  4 +-
 .../editor-panel/PropertiesEditorPanel.tsx    | 30 +++++++------
 src/components/md-deck/hooks/deckStore.ts     | 16 +++----
 src/components/md-deck/hooks/dimensions.ts    | 23 ++++------
 src/components/md-deck/index.tsx              | 42 +++++++++++++------
 5 files changed, 64 insertions(+), 51 deletions(-)

diff --git a/src/components/md-deck/CardPreview.tsx b/src/components/md-deck/CardPreview.tsx
index c58fdea..f0870a2 100644
--- a/src/components/md-deck/CardPreview.tsx
+++ b/src/components/md-deck/CardPreview.tsx
@@ -92,15 +92,13 @@ export function CardPreview(props: CardPreviewProps) {
             {/* 渲染每个 layer */}
             <For each={visibleLayers()}>
               {(layer) => {
-                const style = getLayerStyle(layer, store.state.dimensions!);
-
                 return (
                   <div
                     class={`absolute flex items-center justify-center text-center prose prose-sm ${
                       store.state.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
                     }`}
                     style={{
-                      ...style,
+                      ...getLayerStyle(layer, store.state.dimensions!),
                       'font-size': `${store.state.dimensions?.fontSize}mm`
                     }}
                     innerHTML={renderLayerContent(layer, currentCard())}
diff --git a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
index e27b2d7..b98f43d 100644
--- a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
@@ -67,22 +67,28 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
 
         <div>
           <label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
-          <input
-            type="text"
-            class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={store.state.bleed}
-            onInput={(e) => store.actions.setBleed(e.target.value)}
-          />
+          <div class="flex gap-2">
+            <input
+              type="number"
+              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+              value={store.state.bleed}
+              onChange={(e) => store.actions.setBleed(Number(e.target.value))}
+              placeholder="出血"
+            />
+          </div>
         </div>
 
         <div>
           <label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
-          <input
-            type="text"
-            class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={store.state.padding}
-            onInput={(e) => store.actions.setPadding(e.target.value)}
-          />
+          <div class="flex gap-2">
+            <input
+              type="number"
+              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+              value={store.state.padding}
+              onChange={(e) => store.actions.setPadding(Number(e.target.value))}
+              placeholder="内边距"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/md-deck/hooks/deckStore.ts b/src/components/md-deck/hooks/deckStore.ts
index 0bdbd80..bbfe636 100644
--- a/src/components/md-deck/hooks/deckStore.ts
+++ b/src/components/md-deck/hooks/deckStore.ts
@@ -12,8 +12,8 @@ export const DECK_DEFAULTS = {
   SIZE_H: 86,
   GRID_W: 5,
   GRID_H: 8,
-  BLEED: '1',
-  PADDING: '2',
+  BLEED: 1,
+  PADDING: 2,
   FONT_SIZE: 3
 } as const;
 
@@ -23,8 +23,8 @@ export interface DeckState {
   sizeH: number;
   gridW: number;
   gridH: number;
-  bleed: string;
-  padding: string;
+  bleed: number;
+  padding: number;
   fontSize: number;
   fixed: boolean;
   src: string;
@@ -61,8 +61,8 @@ export interface DeckActions {
   setSizeH: (size: number) => void;
   setGridW: (grid: number) => void;
   setGridH: (grid: number) => void;
-  setBleed: (bleed: string) => void;
-  setPadding: (padding: string) => void;
+  setBleed: (bleed: number) => void;
+  setPadding: (padding: number) => void;
   setFontSize: (size: number) => void;
 
   // 数据设置
@@ -161,11 +161,11 @@ export function createDeckStore(
     setState({ gridH: grid });
     updateDimensions();
   };
-  const setBleed = (bleed: string) => {
+  const setBleed = (bleed: number) => {
     setState({ bleed });
     updateDimensions();
   };
-  const setPadding = (padding: string) => {
+  const setPadding = (padding: number) => {
     setState({ padding });
     updateDimensions();
   };
diff --git a/src/components/md-deck/hooks/dimensions.ts b/src/components/md-deck/hooks/dimensions.ts
index 09935d8..ef7d770 100644
--- a/src/components/md-deck/hooks/dimensions.ts
+++ b/src/components/md-deck/hooks/dimensions.ts
@@ -3,8 +3,8 @@ import type { Dimensions } from '../types';
 export interface DimensionOptions {
   sizeW: number;
   sizeH: number;
-  bleed: string;
-  padding: string;
+  bleed: number;
+  padding: number;
   gridW: number;
   gridH: number;
   fontSize?: number;
@@ -14,28 +14,21 @@ export interface DimensionOptions {
  * 解析卡牌尺寸和网格配置
  */
 export function calculateDimensions(options: DimensionOptions): Dimensions {
-  const [bleedW, bleedH] = options.bleed.includes('x')
-    ? options.bleed.split('x').map(Number)
-    : [Number(options.bleed), Number(options.bleed)];
-  const [padW, padH] = options.padding.includes('x')
-    ? options.padding.split('x').map(Number)
-    : [Number(options.padding), Number(options.padding)];
-
   // 实际卡牌尺寸（含出血）
-  const cardWidth = options.sizeW + bleedW * 2;
-  const cardHeight = options.sizeH + bleedH * 2;
+  const cardWidth = options.sizeW + options.bleed * 2;
+  const cardHeight = options.sizeH + options.bleed * 2;
 
   // 网格区域尺寸（减去 padding）
-  const gridAreaWidth = options.sizeW - padW * 2;
-  const gridAreaHeight = options.sizeH - padH * 2;
+  const gridAreaWidth = options.sizeW - options.padding * 2;
+  const gridAreaHeight = options.sizeH - options.padding * 2;
 
   // 每个网格单元的尺寸（mm）
   const cellWidth = gridAreaWidth / options.gridW;
   const cellHeight = gridAreaHeight / options.gridH;
 
   // 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
-  const gridOriginX = bleedW + padW;
-  const gridOriginY = bleedH + padH;
+  const gridOriginX = options.bleed + options.padding;
+  const gridOriginY = options.bleed + options.padding;
 
   return {
     cardWidth,
diff --git a/src/components/md-deck/index.tsx b/src/components/md-deck/index.tsx
index 4065ad4..9cdffda 100644
--- a/src/components/md-deck/index.tsx
+++ b/src/components/md-deck/index.tsx
@@ -13,8 +13,8 @@ interface DeckProps {
   grid?: string;
   gridW?: number;
   gridH?: number;
-  bleed?: string;
-  padding?: string;
+  bleed?: number | string;
+  padding?: number | string;
   fontSize?: number;
   layers?: string;
   fixed?: boolean | string;
@@ -27,8 +27,8 @@ customElement<DeckProps>('md-deck', {
   grid: '',
   gridW: 5,
   gridH: 8,
-  bleed: '1',
-  padding: '2',
+  bleed: 1,
+  padding: 2,
   fontSize: 3,
   layers: '',
   fixed: false
@@ -73,8 +73,19 @@ customElement<DeckProps>('md-deck', {
     store.actions.setGridH(props.gridH ?? 8);
   }
 
-  store.actions.setBleed(props.bleed || '1');
-  store.actions.setPadding(props.padding || '2');
+  // 解析 bleed 和 padding（支持旧字符串格式和新数字格式）
+  if (typeof props.bleed === 'string') {
+    store.actions.setBleed(Number(props.bleed));
+  } else {
+    store.actions.setBleed(props.bleed ?? 1);
+  }
+  
+  if (typeof props.padding === 'string') {
+    store.actions.setPadding(Number(props.padding));
+  } else {
+    store.actions.setPadding(props.padding ?? 2);
+  }
+  
   store.actions.setFontSize(props.fontSize ?? 3);
 
   // 加载 CSV 数据
@@ -88,12 +99,18 @@ customElement<DeckProps>('md-deck', {
   return (
     <div class="md-deck flex gap-4">
       {/* 左侧：CSV 数据编辑 */}
+      {/*<Show when={store.state.isEditing && !store.state.fixed}>*/}
+      {/*  <DataEditorPanel*/}
+      {/*    activeTab={store.state.activeTab}*/}
+      {/*    cards={store.state.cards}*/}
+      {/*    updateCardData={store.actions.updateCardData}*/}
+      {/*  />*/}
+      {/*</Show>*/}
+
       <Show when={store.state.isEditing && !store.state.fixed}>
-        <DataEditorPanel
-          activeTab={store.state.activeTab}
-          cards={store.state.cards}
-          updateCardData={store.actions.updateCardData}
-        />
+        <div class="flex-1">
+          <PropertiesEditorPanel store={store} />
+        </div>
       </Show>
 
       {/* 中间：卡牌预览和控制 */}
@@ -109,8 +126,7 @@ customElement<DeckProps>('md-deck', {
 
       {/* 右侧：属性/图层编辑面板 */}
       <Show when={store.state.isEditing && !store.state.fixed}>
-        <div class="flex gap-4">
-          <PropertiesEditorPanel store={store} />
+        <div class="flex-1">
           <LayerEditorPanel store={store} />
         </div>
       </Show>