From ce01044c412f609f70f03624639d1102e5197374 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Fri, 27 Feb 2026 15:32:04 +0800
Subject: [PATCH] refactor: font size and split fields

---
 src/components/md-deck/CardPreview.tsx        |  5 +-
 .../editor-panel/PropertiesEditorPanel.tsx    | 50 +++++++++++---
 src/components/md-deck/hooks/deckStore.ts     | 68 +++++++++++++------
 src/components/md-deck/hooks/dimensions.ts    | 30 ++++----
 src/components/md-deck/index.tsx              | 38 +++++++++--
 src/components/md-deck/types.ts               |  1 +
 6 files changed, 142 insertions(+), 50 deletions(-)

diff --git a/src/components/md-deck/CardPreview.tsx b/src/components/md-deck/CardPreview.tsx
index 5f9f2d7..c58fdea 100644
--- a/src/components/md-deck/CardPreview.tsx
+++ b/src/components/md-deck/CardPreview.tsx
@@ -99,7 +99,10 @@ export function CardPreview(props: CardPreviewProps) {
                     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}
+                    style={{
+                      ...style,
+                      '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 d742471..177b62b 100644
--- a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
@@ -18,21 +18,51 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
       <div class="space-y-3">
         <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.size}
-            onInput={(e) => store.actions.setSize(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.sizeW}
+              onChange={(e) => store.actions.setSizeW(Number(e.target.value))}
+              placeholder="宽"
+            />
+            <input
+              type="number"
+              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+              value={store.state.sizeH}
+              onChange={(e) => store.actions.setSizeH(Number(e.target.value))}
+              placeholder="高"
+            />
+          </div>
         </div>
 
         <div>
           <label class="block text-sm font-medium text-gray-700">网格</label>
+          <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.gridW}
+              onChange={(e) => store.actions.setGridW(Number(e.target.value))}
+              placeholder="宽"
+            />
+            <input
+              type="number"
+              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+              value={store.state.gridH}
+              onChange={(e) => store.actions.setGridH(Number(e.target.value))}
+              placeholder="高"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-700">牌面字体 (mm)</label>
           <input
-            type="text"
+            type="number"
             class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={store.state.grid}
-            onInput={(e) => store.actions.setGrid(e.target.value)}
+            value={store.state.fontSize}
+            onChange={(e) => store.actions.setFontSize(Number(e.target.value))}
           />
         </div>
 
@@ -70,7 +100,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
               />
               <span class="text-sm flex-1">{layer.prop}</span>
               <button
-                onClick={() => store.actions.setEditingLayer(layer.prop)}
+                onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
                 class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
                   store.state.editingLayer === layer.prop
                     ? 'bg-blue-500 text-white'
diff --git a/src/components/md-deck/hooks/deckStore.ts b/src/components/md-deck/hooks/deckStore.ts
index 3cf1d9b..0bdbd80 100644
--- a/src/components/md-deck/hooks/deckStore.ts
+++ b/src/components/md-deck/hooks/deckStore.ts
@@ -8,18 +8,24 @@ import type { CardData, LayerConfig, Dimensions } from '../types';
  * 默认配置常量
  */
 export const DECK_DEFAULTS = {
-  SIZE: '54x86',
-  GRID: '5x8',
+  SIZE_W: 54,
+  SIZE_H: 86,
+  GRID_W: 5,
+  GRID_H: 8,
   BLEED: '1',
-  PADDING: '2'
+  PADDING: '2',
+  FONT_SIZE: 3
 } as const;
 
 export interface DeckState {
   // 基本属性
-  size: string;
-  grid: string;
+  sizeW: number;
+  sizeH: number;
+  gridW: number;
+  gridH: number;
   bleed: string;
   padding: string;
+  fontSize: number;
   fixed: boolean;
   src: string;
 
@@ -51,10 +57,13 @@ export interface DeckState {
 
 export interface DeckActions {
   // 基本属性设置
-  setSize: (size: string) => void;
-  setGrid: (grid: string) => void;
+  setSizeW: (size: number) => void;
+  setSizeH: (size: number) => void;
+  setGridW: (grid: number) => void;
+  setGridH: (grid: number) => void;
   setBleed: (bleed: string) => void;
   setPadding: (padding: string) => void;
+  setFontSize: (size: number) => void;
 
   // 数据设置
   setCards: (cards: CardData[]) => void;
@@ -100,10 +109,13 @@ export function createDeckStore(
   initialLayers: string = ''
 ): DeckStore {
   const [state, setState] = createStore<DeckState>({
-    size: DECK_DEFAULTS.SIZE,
-    grid: DECK_DEFAULTS.GRID,
+    sizeW: DECK_DEFAULTS.SIZE_W,
+    sizeH: DECK_DEFAULTS.SIZE_H,
+    gridW: DECK_DEFAULTS.GRID_W,
+    gridH: DECK_DEFAULTS.GRID_H,
     bleed: DECK_DEFAULTS.BLEED,
     padding: DECK_DEFAULTS.PADDING,
+    fontSize: DECK_DEFAULTS.FONT_SIZE,
     fixed: false,
     src: initialSrc,
     dimensions: null,
@@ -122,20 +134,31 @@ export function createDeckStore(
   // 更新尺寸并重新计算 dimensions
   const updateDimensions = () => {
     const dims = calculateDimensions({
-      size: state.size,
-      grid: state.grid,
+      sizeW: state.sizeW,
+      sizeH: state.sizeH,
+      gridW: state.gridW,
+      gridH: state.gridH,
       bleed: state.bleed,
-      padding: state.padding
+      padding: state.padding,
+      fontSize: state.fontSize
     });
     setState({ dimensions: dims });
   };
 
-  const setSize = (size: string) => {
-    setState({ size });
+  const setSizeW = (size: number) => {
+    setState({ sizeW: size });
     updateDimensions();
   };
-  const setGrid = (grid: string) => {
-    setState({ grid });
+  const setSizeH = (size: number) => {
+    setState({ sizeH: size });
+    updateDimensions();
+  };
+  const setGridW = (grid: number) => {
+    setState({ gridW: grid });
+    updateDimensions();
+  };
+  const setGridH = (grid: number) => {
+    setState({ gridH: grid });
     updateDimensions();
   };
   const setBleed = (bleed: string) => {
@@ -146,6 +169,10 @@ export function createDeckStore(
     setState({ padding });
     updateDimensions();
   };
+  const setFontSize = (size: number) => {
+    setState({ fontSize: size });
+    updateDimensions();
+  };
 
   const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 });
   const setActiveTab = (index: number) => setState({ activeTab: index });
@@ -224,7 +251,7 @@ export function createDeckStore(
       .filter(l => l.visible)
       .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}"}`;
+    return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" fontSize="${state.fontSize}" layers="${layersStr}"}`;
   };
 
   const copyCode = async () => {
@@ -239,10 +266,13 @@ export function createDeckStore(
   };
 
   const actions: DeckActions = {
-    setSize,
-    setGrid,
+    setSizeW,
+    setSizeH,
+    setGridW,
+    setGridH,
     setBleed,
     setPadding,
+    setFontSize,
     setCards,
     setActiveTab,
     updateCardData,
diff --git a/src/components/md-deck/hooks/dimensions.ts b/src/components/md-deck/hooks/dimensions.ts
index 8098791..09935d8 100644
--- a/src/components/md-deck/hooks/dimensions.ts
+++ b/src/components/md-deck/hooks/dimensions.ts
@@ -1,17 +1,19 @@
 import type { Dimensions } from '../types';
 
 export interface DimensionOptions {
-  size: string;
+  sizeW: number;
+  sizeH: number;
   bleed: string;
   padding: string;
-  grid: string;
+  gridW: number;
+  gridH: number;
+  fontSize?: number;
 }
 
 /**
  * 解析卡牌尺寸和网格配置
  */
 export function calculateDimensions(options: DimensionOptions): Dimensions {
-  const [width, height] = options.size.split('x').map(Number);
   const [bleedW, bleedH] = options.bleed.includes('x')
     ? options.bleed.split('x').map(Number)
     : [Number(options.bleed), Number(options.bleed)];
@@ -20,19 +22,16 @@ export function calculateDimensions(options: DimensionOptions): Dimensions {
     : [Number(options.padding), Number(options.padding)];
 
   // 实际卡牌尺寸（含出血）
-  const cardWidth = width + bleedW * 2;
-  const cardHeight = height + bleedH * 2;
+  const cardWidth = options.sizeW + bleedW * 2;
+  const cardHeight = options.sizeH + bleedH * 2;
 
   // 网格区域尺寸（减去 padding）
-  const gridAreaWidth = width - padW * 2;
-  const gridAreaHeight = height - padH * 2;
-
-  // 解析网格
-  const [gridW, gridH] = options.grid.split('x').map(Number);
+  const gridAreaWidth = options.sizeW - padW * 2;
+  const gridAreaHeight = options.sizeH - padH * 2;
 
   // 每个网格单元的尺寸（mm）
-  const cellWidth = gridAreaWidth / gridW;
-  const cellHeight = gridAreaHeight / gridH;
+  const cellWidth = gridAreaWidth / options.gridW;
+  const cellHeight = gridAreaHeight / options.gridH;
 
   // 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
   const gridOriginX = bleedW + padW;
@@ -45,10 +44,11 @@ export function calculateDimensions(options: DimensionOptions): Dimensions {
     gridAreaHeight,
     cellWidth,
     cellHeight,
-    gridW,
-    gridH,
+    gridW: options.gridW,
+    gridH: options.gridH,
     gridOriginX,
-    gridOriginY
+    gridOriginY,
+    fontSize: options.fontSize ?? 3
   };
 }
 
diff --git a/src/components/md-deck/index.tsx b/src/components/md-deck/index.tsx
index ba7b8be..fa1ec49 100644
--- a/src/components/md-deck/index.tsx
+++ b/src/components/md-deck/index.tsx
@@ -8,18 +8,28 @@ import { DataEditorPanel, PropertiesEditorPanel } from './editor-panel';
 
 interface DeckProps {
   size?: string;
+  sizeW?: number;
+  sizeH?: number;
   grid?: string;
+  gridW?: number;
+  gridH?: number;
   bleed?: string;
   padding?: string;
+  fontSize?: number;
   layers?: string;
   fixed?: boolean | string;
 }
 
 customElement<DeckProps>('md-deck', {
-  size: '54x86',
-  grid: '5x8',
+  size: '',
+  sizeW: 54,
+  sizeH: 86,
+  grid: '',
+  gridW: 5,
+  gridH: 8,
   bleed: '1',
   padding: '2',
+  fontSize: 3,
   layers: '',
   fixed: false
 }, (props, { element }) => {
@@ -43,11 +53,29 @@ customElement<DeckProps>('md-deck', {
   // 创建 store 并加载数据
   const store = createDeckStore(resolvedSrc, (props.layers as string) || '');
 
-  // 初始化 store 属性
-  store.actions.setSize(props.size || '54x86');
-  store.actions.setGrid(props.grid || '5x8');
+  // 解析 size 属性（支持旧格式 "54x86" 和新格式）
+  if (props.size && props.size.includes('x')) {
+    const [w, h] = props.size.split('x').map(Number);
+    store.actions.setSizeW(w);
+    store.actions.setSizeH(h);
+  } else {
+    store.actions.setSizeW(props.sizeW ?? 54);
+    store.actions.setSizeH(props.sizeH ?? 86);
+  }
+
+  // 解析 grid 属性（支持旧格式 "5x8" 和新格式）
+  if (props.grid && props.grid.includes('x')) {
+    const [w, h] = props.grid.split('x').map(Number);
+    store.actions.setGridW(w);
+    store.actions.setGridH(h);
+  } else {
+    store.actions.setGridW(props.gridW ?? 5);
+    store.actions.setGridH(props.gridH ?? 8);
+  }
+
   store.actions.setBleed(props.bleed || '1');
   store.actions.setPadding(props.padding || '2');
+  store.actions.setFontSize(props.fontSize ?? 3);
 
   // 加载 CSV 数据
   store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
diff --git a/src/components/md-deck/types.ts b/src/components/md-deck/types.ts
index e7f3870..09840e4 100644
--- a/src/components/md-deck/types.ts
+++ b/src/components/md-deck/types.ts
@@ -30,6 +30,7 @@ export interface Dimensions {
   gridH: number;
   gridOriginX: number;
   gridOriginY: number;
+  fontSize: number;
 }
 
 export interface SelectionState {