fix: details

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())}

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
+          <div class="flex gap-2">
-            type="text"
+            <input
-            class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+              type="number"
-            value={store.state.bleed}
+              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            onInput={(e) => store.actions.setBleed(e.target.value)}
+              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
+          <div class="flex gap-2">
-            type="text"
+            <input
-            class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+              type="number"
-            value={store.state.padding}
+              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            onInput={(e) => store.actions.setPadding(e.target.value)}
+              value={store.state.padding}
-          />
+              onChange={(e) => store.actions.setPadding(Number(e.target.value))}
+              placeholder="内边距"
+            />
+          </div>
         </div>
       </div>
     </div>

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',
+  BLEED: 1,
-  PADDING: '2',
+  PADDING: 2,
   FONT_SIZE: 3
 } as const;
 
@@ -23,8 +23,8 @@ export interface DeckState {
   sizeH: number;
   gridW: number;
   gridH: number;
-  bleed: string;
+  bleed: number;
-  padding: string;
+  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;
+  setBleed: (bleed: number) => void;
-  setPadding: (padding: string) => 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();
   };

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;
+  bleed: number;
-  padding: string;
+  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 cardWidth = options.sizeW + options.bleed * 2;
-  const cardHeight = options.sizeH + bleedH * 2;
+  const cardHeight = options.sizeH + options.bleed * 2;
 
   // 网格区域尺寸（减去 padding）
-  const gridAreaWidth = options.sizeW - padW * 2;
+  const gridAreaWidth = options.sizeW - options.padding * 2;
-  const gridAreaHeight = options.sizeH - padH * 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 gridOriginX = options.bleed + options.padding;
-  const gridOriginY = bleedH + padH;
+  const gridOriginY = options.bleed + options.padding;
 
   return {
     cardWidth,

src/components/md-deck/index.tsx

@@ -13,8 +13,8 @@ interface DeckProps {
   grid?: string;
   gridW?: number;
   gridH?: number;
-  bleed?: string;
+  bleed?: number | string;
-  padding?: 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',
+  bleed: 1,
-  padding: '2',
+  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');
+  // 解析 bleed 和 padding（支持旧字符串格式和新数字格式）
-  store.actions.setPadding(props.padding || '2');
+  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
+        <div class="flex-1">
-          activeTab={store.state.activeTab}
+          <PropertiesEditorPanel store={store} />
-          cards={store.state.cards}
+        </div>
-          updateCardData={store.actions.updateCardData}
-        />
       </Show>
 
       {/* 中间：卡牌预览和控制 */}
@@ -109,8 +126,7 @@ customElement<DeckProps>('md-deck', {
 
       {/* 右侧：属性/图层编辑面板 */}
       <Show when={store.state.isEditing && !store.state.fixed}>
-        <div class="flex gap-4">
+        <div class="flex-1">
-          <PropertiesEditorPanel store={store} />
           <LayerEditorPanel store={store} />
         </div>
       </Show>