refactor: clean up deck wise font size

This commit is contained in:
hypercross 2026-02-28 12:18:52 +08:00
parent a2ac902129
commit f53dc847ca
8 changed files with 12 additions and 51 deletions

View File

@ -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)}
/>

View File

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

View File

@ -5,7 +5,7 @@ export interface PropertiesEditorPanelProps {
}
/**
*
*
*/
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
const { store } = props;
@ -56,17 +56,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
</div>
<div>
<label class="block text-sm font-medium text-gray-700"> (mm)</label>
<input
type="number"
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
value={store.state.fontSize}
onChange={(e) => store.actions.setFontSize(Number(e.target.value))}
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700"> (mm)</label>
<label class="block text-sm font-medium text-gray-700"> / (mm)</label>
<div class="flex gap-2">
<input
type="number"
@ -75,18 +65,12 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
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>
<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="内边距"
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>

View File

@ -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,

View File

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

View File

@ -29,7 +29,6 @@ export interface ExportOptions {
gridOriginY: number;
gridAreaWidth: number;
gridAreaHeight: number;
fontSize: number;
visibleLayers: LayerConfig[];
dimensions: Dimensions;
}

View File

@ -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<DeckProps>('md-deck', {
gridH: 8,
bleed: 1,
padding: 2,
fontSize: 3,
layers: '',
fixed: false
}, (props, { element }) => {
@ -87,12 +85,6 @@ 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, csvPath, (props.layers as string) || '');

View File

@ -34,7 +34,6 @@ export interface Dimensions {
gridH: number;
gridOriginX: number;
gridOriginY: number;
fontSize: number;
}
export interface SelectionState {