From f53dc847cad8c1755e5c53a805fde5b4d061b001 Mon Sep 17 00:00:00 2001 From: hypercross Date: Sat, 28 Feb 2026 12:18:52 +0800 Subject: [PATCH] refactor: clean up deck wise font size --- src/components/md-deck/CardLayer.tsx | 2 +- src/components/md-deck/PrintPreview.tsx | 1 - .../editor-panel/PropertiesEditorPanel.tsx | 30 +++++-------------- src/components/md-deck/hooks/deckStore.ts | 16 ++-------- src/components/md-deck/hooks/dimensions.ts | 2 -- src/components/md-deck/hooks/usePDFExport.ts | 1 - src/components/md-deck/index.tsx | 10 +------ src/components/md-deck/types.ts | 1 - 8 files changed, 12 insertions(+), 51 deletions(-) diff --git a/src/components/md-deck/CardLayer.tsx b/src/components/md-deck/CardLayer.tsx index 80fc3ee..76948b3 100644 --- a/src/components/md-deck/CardLayer.tsx +++ b/src/components/md-deck/CardLayer.tsx @@ -36,7 +36,7 @@ export function CardLayer(props: CardLayerProps) { class="absolute flex items-center justify-center text-center prose prose-sm" style={{ ...getLayerStyle(layer, props.dimensions), - 'font-size': `${props.dimensions.fontSize}mm` + 'font-size': `${layer.fontSize || 3}mm` }} innerHTML={renderLayerContent(layer, props.cardData)} /> diff --git a/src/components/md-deck/PrintPreview.tsx b/src/components/md-deck/PrintPreview.tsx index 82ddda5..10facf5 100644 --- a/src/components/md-deck/PrintPreview.tsx +++ b/src/components/md-deck/PrintPreview.tsx @@ -31,7 +31,6 @@ export function PrintPreview(props: PrintPreviewProps) { gridOriginY: store.state.dimensions?.gridOriginY || 0, gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56, gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88, - fontSize: store.state.dimensions?.fontSize || 3, visibleLayers: visibleLayers(), dimensions: store.state.dimensions! }; diff --git a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx index f102ced..8cd7f5e 100644 --- a/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx +++ b/src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx @@ -5,7 +5,7 @@ export interface PropertiesEditorPanelProps { } /** - * 卡牌属性编辑面板：尺寸、网格、字体、出血、内边距 + * 卡牌属性编辑面板：尺寸、网格、出血、内边距 */ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) { const { store } = props; @@ -56,17 +56,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
- - store.actions.setFontSize(Number(e.target.value))} - /> -
- -
- +
store.actions.setBleed(Number(e.target.value))} placeholder="出血" /> -
-
- -
- -
store.actions.setPadding(Number(e.target.value))} - placeholder="内边距" + 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="内边距" />
diff --git a/src/components/md-deck/hooks/deckStore.ts b/src/components/md-deck/hooks/deckStore.ts index 9e39112..3237e08 100644 --- a/src/components/md-deck/hooks/deckStore.ts +++ b/src/components/md-deck/hooks/deckStore.ts @@ -13,8 +13,7 @@ export const DECK_DEFAULTS = { GRID_W: 5, GRID_H: 8, BLEED: 1, - PADDING: 2, - FONT_SIZE: 3 + PADDING: 2 } as const; export interface DeckState { @@ -25,7 +24,6 @@ export interface DeckState { gridH: number; bleed: number; padding: number; - fontSize: number; fixed: boolean; src: string; rawSrc: string; // 原始 CSV 路径（用于生成代码时保持相对路径） @@ -74,7 +72,6 @@ export interface DeckActions { setGridH: (grid: number) => void; setBleed: (bleed: number) => void; setPadding: (padding: number) => void; - setFontSize: (size: number) => void; // 数据设置 setCards: (cards: CardData[]) => void; @@ -138,7 +135,6 @@ export function createDeckStore( gridH: DECK_DEFAULTS.GRID_H, bleed: DECK_DEFAULTS.BLEED, padding: DECK_DEFAULTS.PADDING, - fontSize: DECK_DEFAULTS.FONT_SIZE, fixed: false, src: initialSrc, rawSrc: initialSrc, @@ -169,8 +165,7 @@ export function createDeckStore( gridW: state.gridW, gridH: state.gridH, bleed: state.bleed, - padding: state.padding, - fontSize: state.fontSize + padding: state.padding }); setState({ dimensions: dims }); }; @@ -199,10 +194,6 @@ 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 }); @@ -278,7 +269,7 @@ export function createDeckStore( const generateCode = () => { const layersStr = formatLayers(state.layerConfigs); - return `:md-deck[${state.rawSrc || 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}"}`; + return `:md-deck[${state.rawSrc || state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" layers="${layersStr}"}`; }; const copyCode = async () => { @@ -323,7 +314,6 @@ export function createDeckStore( 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 687cd5b..15bc6a7 100644 --- a/src/components/md-deck/hooks/dimensions.ts +++ b/src/components/md-deck/hooks/dimensions.ts @@ -7,7 +7,6 @@ export interface DimensionOptions { padding: number; gridW: number; gridH: number; - fontSize?: number; } /** @@ -41,7 +40,6 @@ export function calculateDimensions(options: DimensionOptions): Dimensions { gridH: options.gridH, gridOriginX, gridOriginY, - fontSize: options.fontSize ?? 3 }; } diff --git a/src/components/md-deck/hooks/usePDFExport.ts b/src/components/md-deck/hooks/usePDFExport.ts index 994535e..0c477e4 100644 --- a/src/components/md-deck/hooks/usePDFExport.ts +++ b/src/components/md-deck/hooks/usePDFExport.ts @@ -29,7 +29,6 @@ export interface ExportOptions { gridOriginY: number; gridAreaWidth: number; gridAreaHeight: number; - fontSize: number; visibleLayers: LayerConfig[]; dimensions: Dimensions; } diff --git a/src/components/md-deck/index.tsx b/src/components/md-deck/index.tsx index cb786f2..7a196e2 100644 --- a/src/components/md-deck/index.tsx +++ b/src/components/md-deck/index.tsx @@ -16,7 +16,6 @@ interface DeckProps { gridH?: number; bleed?: number | string; padding?: number | string; - fontSize?: number; layers?: string; fixed?: boolean | string; } @@ -30,7 +29,6 @@ customElement('md-deck', { gridH: 8, bleed: 1, padding: 2, - fontSize: 3, layers: '', fixed: false }, (props, { element }) => { @@ -80,19 +78,13 @@ customElement('md-deck', { } 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); } - if (typeof props.fontSize === 'string') { - store.actions.setFontSize(Number(props.fontSize)); - } else { - store.actions.setFontSize(props.fontSize ?? 3); - } - // 加载 CSV 数据 store.actions.loadCardsFromPath(resolvedSrc, csvPath, (props.layers as string) || ''); diff --git a/src/components/md-deck/types.ts b/src/components/md-deck/types.ts index 0b7c753..5dab4a4 100644 --- a/src/components/md-deck/types.ts +++ b/src/components/md-deck/types.ts @@ -34,7 +34,6 @@ export interface Dimensions { gridH: number; gridOriginX: number; gridOriginY: number; - fontSize: number; } export interface SelectionState {