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" class="absolute flex items-center justify-center text-center prose prose-sm"
style={{ style={{
...getLayerStyle(layer, props.dimensions), ...getLayerStyle(layer, props.dimensions),
'font-size': `${props.dimensions.fontSize}mm` 'font-size': `${layer.fontSize || 3}mm`
}} }}
innerHTML={renderLayerContent(layer, props.cardData)} innerHTML={renderLayerContent(layer, props.cardData)}
/> />

View File

@ -31,7 +31,6 @@ export function PrintPreview(props: PrintPreviewProps) {
gridOriginY: store.state.dimensions?.gridOriginY || 0, gridOriginY: store.state.dimensions?.gridOriginY || 0,
gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56, gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56,
gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88, gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88,
fontSize: store.state.dimensions?.fontSize || 3,
visibleLayers: visibleLayers(), visibleLayers: visibleLayers(),
dimensions: store.state.dimensions! dimensions: store.state.dimensions!
}; };

View File

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

View File

@ -13,8 +13,7 @@ export const DECK_DEFAULTS = {
GRID_W: 5, GRID_W: 5,
GRID_H: 8, GRID_H: 8,
BLEED: 1, BLEED: 1,
PADDING: 2, PADDING: 2
FONT_SIZE: 3
} as const; } as const;
export interface DeckState { export interface DeckState {
@ -25,7 +24,6 @@ export interface DeckState {
gridH: number; gridH: number;
bleed: number; bleed: number;
padding: number; padding: number;
fontSize: number;
fixed: boolean; fixed: boolean;
src: string; src: string;
rawSrc: string; // 原始 CSV 路径(用于生成代码时保持相对路径) rawSrc: string; // 原始 CSV 路径(用于生成代码时保持相对路径)
@ -74,7 +72,6 @@ export interface DeckActions {
setGridH: (grid: number) => void; setGridH: (grid: number) => void;
setBleed: (bleed: number) => void; setBleed: (bleed: number) => void;
setPadding: (padding: number) => void; setPadding: (padding: number) => void;
setFontSize: (size: number) => void;
// 数据设置 // 数据设置
setCards: (cards: CardData[]) => void; setCards: (cards: CardData[]) => void;
@ -138,7 +135,6 @@ export function createDeckStore(
gridH: DECK_DEFAULTS.GRID_H, gridH: DECK_DEFAULTS.GRID_H,
bleed: DECK_DEFAULTS.BLEED, bleed: DECK_DEFAULTS.BLEED,
padding: DECK_DEFAULTS.PADDING, padding: DECK_DEFAULTS.PADDING,
fontSize: DECK_DEFAULTS.FONT_SIZE,
fixed: false, fixed: false,
src: initialSrc, src: initialSrc,
rawSrc: initialSrc, rawSrc: initialSrc,
@ -169,8 +165,7 @@ export function createDeckStore(
gridW: state.gridW, gridW: state.gridW,
gridH: state.gridH, gridH: state.gridH,
bleed: state.bleed, bleed: state.bleed,
padding: state.padding, padding: state.padding
fontSize: state.fontSize
}); });
setState({ dimensions: dims }); setState({ dimensions: dims });
}; };
@ -199,10 +194,6 @@ export function createDeckStore(
setState({ padding }); setState({ padding });
updateDimensions(); updateDimensions();
}; };
const setFontSize = (size: number) => {
setState({ fontSize: size });
updateDimensions();
};
const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 }); const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 });
const setActiveTab = (index: number) => setState({ activeTab: index }); const setActiveTab = (index: number) => setState({ activeTab: index });
@ -278,7 +269,7 @@ export function createDeckStore(
const generateCode = () => { const generateCode = () => {
const layersStr = formatLayers(state.layerConfigs); 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 () => { const copyCode = async () => {
@ -323,7 +314,6 @@ export function createDeckStore(
setGridH, setGridH,
setBleed, setBleed,
setPadding, setPadding,
setFontSize,
setCards, setCards,
setActiveTab, setActiveTab,
updateCardData, updateCardData,

View File

@ -7,7 +7,6 @@ export interface DimensionOptions {
padding: number; padding: number;
gridW: number; gridW: number;
gridH: number; gridH: number;
fontSize?: number;
} }
/** /**
@ -41,7 +40,6 @@ export function calculateDimensions(options: DimensionOptions): Dimensions {
gridH: options.gridH, gridH: options.gridH,
gridOriginX, gridOriginX,
gridOriginY, gridOriginY,
fontSize: options.fontSize ?? 3
}; };
} }

View File

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

View File

@ -16,7 +16,6 @@ interface DeckProps {
gridH?: number; gridH?: number;
bleed?: number | string; bleed?: number | string;
padding?: number | string; padding?: number | string;
fontSize?: number;
layers?: string; layers?: string;
fixed?: boolean | string; fixed?: boolean | string;
} }
@ -30,7 +29,6 @@ customElement<DeckProps>('md-deck', {
gridH: 8, gridH: 8,
bleed: 1, bleed: 1,
padding: 2, padding: 2,
fontSize: 3,
layers: '', layers: '',
fixed: false fixed: false
}, (props, { element }) => { }, (props, { element }) => {
@ -87,12 +85,6 @@ customElement<DeckProps>('md-deck', {
store.actions.setPadding(props.padding ?? 2); 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 数据 // 加载 CSV 数据
store.actions.loadCardsFromPath(resolvedSrc, csvPath, (props.layers as string) || ''); store.actions.loadCardsFromPath(resolvedSrc, csvPath, (props.layers as string) || '');

View File

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