fix: details

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;
 }

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

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>

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 () => {

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';
@@ -86,7 +86,11 @@ customElement<DeckProps>('md-deck', {
     store.actions.setPadding(props.padding ?? 2);
   }
 
+  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,7 +101,15 @@ customElement<DeckProps>('md-deck', {
   });
 
   return (
-    <div class="md-deck flex gap-4">
+    <div class="md-deck mb-4">
+      {/* Tab 选择器和编辑按钮 */}
+      <Show when={store.state.cards.length > 0 && !store.state.error}>
+        <DeckHeader store={store} />
+      </Show>
+
+      <div class="flex gap-4">
+
+        {/* 内容区域：错误/加载/卡牌预览/空状态 */}
         {/* 左侧：CSV 数据编辑 */}
         {/*<Show when={store.state.isEditing && !store.state.fixed}>*/}
         {/*  <DataEditorPanel*/}
@@ -113,16 +125,7 @@ customElement<DeckProps>('md-deck', {
           </div>
         </Show>
 
-      {/* 中间：卡牌预览和控制 */}
-      <div class="flex-1">
-        {/* Tab 选择器和编辑按钮 */}
-        <Show when={store.state.cards.length > 0 && !store.state.error}>
-          <DeckHeader store={store} />
-        </Show>
-
-        {/* 内容区域：错误/加载/卡牌预览/空状态 */}
         <DeckContent store={store} isLoading={store.state.isLoading} />
-      </div>
 
         {/* 右侧：属性/图层编辑面板 */}
         <Show when={store.state.isEditing && !store.state.fixed}>
@@ -131,5 +134,6 @@ customElement<DeckProps>('md-deck', {
           </div>
         </Show>
       </div>
+    </div>
   );
 });