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

---
 src/components/md-deck/CardPreview.tsx        |  3 +-
 .../md-deck/editor-panel/LayerEditorPanel.tsx |  2 +-
 .../editor-panel/PropertiesEditorPanel.tsx    |  2 +-
 src/components/md-deck/hooks/deckStore.ts     |  2 +-
 src/components/md-deck/index.tsx              | 66 ++++++++++---------
 5 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/components/md-deck/CardPreview.tsx b/src/components/md-deck/CardPreview.tsx
index f0870a2..b654510 100644
--- a/src/components/md-deck/CardPreview.tsx
+++ b/src/components/md-deck/CardPreview.tsx
@@ -4,6 +4,7 @@ import { getLayerStyle } from './hooks/dimensions';
 import { useCardSelection } from './hooks/useCardSelection';
 import { getSelectionBoxStyle } from './hooks/useCardSelection';
 import type { DeckStore } from './hooks/deckStore';
+import type { CardData } from '../types';
 
 export interface CardPreviewProps {
   store: DeckStore;
@@ -12,7 +13,7 @@ export interface CardPreviewProps {
 /**
  * 渲染 layer 内容（提取为纯工具函数）
  */
-function renderLayerContent(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string {
+function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
   const content = cardData[layer.prop] || '';
   return marked.parse(content) as string;
 }
diff --git a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
index ef6944f..8cc4fc0 100644
--- a/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/LayerEditorPanel.tsx
@@ -13,7 +13,7 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
 
   return (
     <div class="w-64 flex-shrink-0">
-      <h3 class="font-bold mb-2">图层</h3>
+      <h3 class="font-bold mb-2 mt-0">图层</h3>
 
       <div class="space-y-2">
         <For each={store.state.layerConfigs}>
diff --git a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
index b98f43d..f102ced 100644
--- a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
+++ b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
@@ -12,7 +12,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
 
   return (
     <div class="w-64 flex-shrink-0">
-      <h3 class="font-bold mb-2">卡牌属性</h3>
+      <h3 class="font-bold mb-2 mt-0">卡牌属性</h3>
 
       <div class="space-y-3">
         <div>
diff --git a/src/components/md-deck/hooks/deckStore.ts b/src/components/md-deck/hooks/deckStore.ts
index bbfe636..75833a1 100644
--- a/src/components/md-deck/hooks/deckStore.ts
+++ b/src/components/md-deck/hooks/deckStore.ts
@@ -251,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.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" fontSize="${state.fontSize}" 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}" font-size="${state.fontSize}" layers="${layersStr}"}`;
   };
 
   const copyCode = async () => {
diff --git a/src/components/md-deck/index.tsx b/src/components/md-deck/index.tsx
index 9cdffda..04932b7 100644
--- a/src/components/md-deck/index.tsx
+++ b/src/components/md-deck/index.tsx
@@ -1,5 +1,5 @@
 import { customElement, noShadowDOM } from 'solid-element';
-import { Show, createEffect, onCleanup } from 'solid-js';
+import { Show, onCleanup } from 'solid-js';
 import { resolvePath } from '../utils/path';
 import { createDeckStore } from './hooks/deckStore';
 import { DeckHeader } from './DeckHeader';
@@ -85,8 +85,12 @@ customElement<DeckProps>('md-deck', {
   } else {
     store.actions.setPadding(props.padding ?? 2);
   }
-  
-  store.actions.setFontSize(props.fontSize ?? 3);
+
+  if (typeof props.fontSize === 'string') {
+    store.actions.setFontSize(Number(props.fontSize));
+  } else {
+    store.actions.setFontSize(props.fontSize ?? 3);
+  }
 
   // 加载 CSV 数据
   store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
@@ -97,39 +101,39 @@ 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}>
-        <div class="flex-1">
-          <PropertiesEditorPanel store={store} />
-        </div>
+    <div class="md-deck mb-4">
+      {/* Tab 选择器和编辑按钮 */}
+      <Show when={store.state.cards.length > 0 && !store.state.error}>
+        <DeckHeader store={store} />
       </Show>
 
-      {/* 中间：卡牌预览和控制 */}
-      <div class="flex-1">
-        {/* Tab 选择器和编辑按钮 */}
-        <Show when={store.state.cards.length > 0 && !store.state.error}>
-          <DeckHeader store={store} />
-        </Show>
+      <div class="flex gap-4">
 
         {/* 内容区域：错误/加载/卡牌预览/空状态 */}
-        <DeckContent store={store} isLoading={store.state.isLoading} />
-      </div>
+        {/* 左侧：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}>
+          <div class="flex-1">
+            <PropertiesEditorPanel store={store} />
+          </div>
+        </Show>
 
-      {/* 右侧：属性/图层编辑面板 */}
-      <Show when={store.state.isEditing && !store.state.fixed}>
-        <div class="flex-1">
-          <LayerEditorPanel store={store} />
-        </div>
-      </Show>
+        <DeckContent store={store} isLoading={store.state.isLoading} />
+
+        {/* 右侧：属性/图层编辑面板 */}
+        <Show when={store.state.isEditing && !store.state.fixed}>
+          <div class="flex-1">
+            <LayerEditorPanel store={store} />
+          </div>
+        </Show>
+      </div>
     </div>
   );
 });