fix: details

2026-02-27 15:40:52 +08:00 · 2026-02-27 15:40:52 +08:00 · 0e2f214552
parent 23d6d81532
commit 0e2f214552
5 changed files with 64 additions and 51 deletions
--- 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())}
--- 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>
--- 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();
  };
--- 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,
--- 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>