hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: card back support?

This commit is contained in:
hypercross 2026-03-13 17:26:00 +08:00
parent 748f57dd55
commit b3dc768786
12 changed files with 430 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/md-deck/CardLayer.tsx
View File

@ -1,7 +1,7 @@
import {createMemo, For} from 'solid-js';
import {parseMarkdown} from '../../markdown';
import { getLayerStyle } from './hooks/dimensions';
import type { CardData } from './types';
import type { CardData, CardSide } from './types';
import {DeckStore} from "./hooks/deckStore";
import {processVariables} from "../utils/csv-loader";
import {resolvePath} from "../utils/path";
@ -9,13 +9,19 @@ import {resolvePath} from "../utils/path";
export interface CardLayerProps {
cardData: CardData;
store: DeckStore;
side?: CardSide;
}
export function CardLayer(props: CardLayerProps) {
const layers = createMemo(() => props.store.state.layerConfigs.filter((l) => l.visible));
const side = () => props.side || 'front';
const layers = createMemo(() =>
side() === 'front'
? props.store.state.frontLayerConfigs.filter((l) => l.visible)
: props.store.state.backLayerConfigs.filter((l) => l.visible)
);
const dimensions = () => props.store.state.dimensions!;
const showBounds = () => props.store.state.isEditing;
function renderLayerContent(content: string) {
const iconPath = resolvePath(props.store.state.cards.sourcePath, props.cardData.iconPath);
return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), iconPath) as string;

1
src/components/md-deck/CardPreview.tsx
View File

@ -79,6 +79,7 @@ export function CardPreview(props: CardPreviewProps) {
<CardLayer
cardData={currentCard()}
store={store}
side={store.state.activeSide}
/>
</div>
</div>

200
src/components/md-deck/PrintPreview.tsx
View File

@ -20,7 +20,8 @@ export function PrintPreview(props: PrintPreviewProps) {
const { getA4Size, pages, cropMarks } = usePageLayout(store);
const { exportToPDF } = usePDFExport(store, props.onClose);
const visibleLayers = () => store.state.layerConfigs.filter((l) => l.visible);
const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
const handleExport = async () => {
const options: ExportOptions = {
@ -31,7 +32,7 @@ export function PrintPreview(props: PrintPreviewProps) {
gridOriginY: store.state.dimensions?.gridOriginY || 0,
gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56,
gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88,
visibleLayers: visibleLayers(),
visibleLayers: frontVisibleLayers(),
dimensions: store.state.dimensions!
};
await exportToPDF(pages(), cropMarks(), options);
@ -51,103 +52,112 @@ export function PrintPreview(props: PrintPreviewProps) {
<div class="flex flex-col items-center gap-8">
<For each={pages()}>
{(page) => (
<svg
class="bg-white shadow-xl"
viewBox={`0 0 ${getA4Size().width}mm ${getA4Size().height}mm`}
style={{
width: `${getA4Size().width}mm`,
height: `${getA4Size().height}mm`
}}
data-page={page.pageIndex + 1}
xmlns="http://www.w3.org/2000/svg"
>
<rect
x={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.x}mm`}
y={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.y}mm`}
width={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.width}mm`}
height={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.height}mm`}
fill="none"
stroke="black"
stroke-width="0.2"
/>
{(page) => {
// 根据页面类型（正面/背面）决定使用哪个图层配置
const isFrontPage = page.cards[0]?.side !== 'back';
const visibleLayersForPage = isFrontPage ? frontVisibleLayers() : backVisibleLayers();
return (
<svg
class="bg-white shadow-xl"
viewBox={`0 0 ${getA4Size().width}mm ${getA4Size().height}mm`}
style={{
width: `${getA4Size().width}mm`,
height: `${getA4Size().height}mm`
}}
data-page={page.pageIndex + 1}
xmlns="http://www.w3.org/2000/svg"
>
<rect
x={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.x}mm`}
y={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.y}mm`}
width={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.width}mm`}
height={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.height}mm`}
fill="none"
stroke="black"
stroke-width="0.2"
/>
<For each={cropMarks()[page.pageIndex]?.horizontalLines}>
{(line) => (
<>
<line
x1={`${line.xStart}mm`}
y1={`${line.y}mm`}
x2={`${page.frameBounds.minX}mm`}
y2={`${line.y}mm`}
stroke="#888"
stroke-width="0.1"
/>
<line
x1={`${page.frameBounds.maxX}mm`}
y1={`${line.y}mm`}
x2={`${line.xEnd}mm`}
y2={`${line.y}mm`}
stroke="#888"
stroke-width="0.1"
/>
</>
)}
</For>
<For each={cropMarks()[page.pageIndex]?.horizontalLines}>
{(line) => (
<>
<line
x1={`${line.xStart}mm`}
y1={`${line.y}mm`}
x2={`${page.frameBounds.minX}mm`}
y2={`${line.y}mm`}
stroke="#888"
stroke-width="0.1"
/>
<line
x1={`${page.frameBounds.maxX}mm`}
y1={`${line.y}mm`}
x2={`${line.xEnd}mm`}
y2={`${line.y}mm`}
stroke="#888"
stroke-width="0.1"
/>
</>
)}
</For>
<For each={cropMarks()[page.pageIndex]?.verticalLines}>
{(line) => (
<>
<line
x1={`${line.x}mm`}
y1={`${line.yStart}mm`}
x2={`${line.x}mm`}
y2={`${page.frameBounds.minY}mm`}
stroke="#888"
stroke-width="0.1"
/>
<line
x1={`${line.x}mm`}
y1={`${page.frameBounds.maxY}mm`}
x2={`${line.x}mm`}
y2={`${line.yEnd}mm`}
stroke="#888"
stroke-width="0.1"
/>
</>
)}
</For>
<For each={cropMarks()[page.pageIndex]?.verticalLines}>
{(line) => (
<>
<line
x1={`${line.x}mm`}
y1={`${line.yStart}mm`}
x2={`${line.x}mm`}
y2={`${page.frameBounds.minY}mm`}
stroke="#888"
stroke-width="0.1"
/>
<line
x1={`${line.x}mm`}
y1={`${page.frameBounds.maxY}mm`}
x2={`${line.x}mm`}
y2={`${line.yEnd}mm`}
stroke="#888"
stroke-width="0.1"
/>
</>
)}
</For>
<For each={page.cards}>
{(card) => (
<g class="card-group">
<foreignObject
x={`${card.x}mm`}
y={`${card.y}mm`}
width={`${store.state.dimensions?.cardWidth || 56}mm`}
height={`${store.state.dimensions?.cardHeight || 88}mm`}
>
<div class="w-full h-full bg-white" {...({ xmlns: 'http://www.w3.org/1999/xhtml' } as any)}>
<div
class="absolute"
style={{
position: 'absolute',
left: `${store.state.dimensions?.gridOriginX}mm`,
top: `${store.state.dimensions?.gridOriginY}mm`,
width: `${store.state.dimensions?.gridAreaWidth}mm`,
height: `${store.state.dimensions?.gridAreaHeight}mm`
}}
>
<CardLayer store={store} cardData={card.data}
/>
<For each={page.cards}>
{(card) => (
<g class="card-group">
<foreignObject
x={`${card.x}mm`}
y={`${card.y}mm`}
width={`${store.state.dimensions?.cardWidth || 56}mm`}
height={`${store.state.dimensions?.cardHeight || 88}mm`}
>
<div class="w-full h-full bg-white" {...({ xmlns: 'http://www.w3.org/1999/xhtml' } as any)}>
<div
class="absolute"
style={{
position: 'absolute',
left: `${store.state.dimensions?.gridOriginX}mm`,
top: `${store.state.dimensions?.gridOriginY}mm`,
width: `${store.state.dimensions?.gridAreaWidth}mm`,
height: `${store.state.dimensions?.gridAreaHeight}mm`
}}
>
<CardLayer
store={store}
cardData={card.data}
side={card.side || 'front'}
/>
</div>
</div>
</div>
</foreignObject>
</g>
)}
</For>
</svg>
)}
</foreignObject>
</g>
)}
</For>
</svg>
);
}}
</For>
</div>
</div>

28
src/components/md-deck/PrintPreviewHeader.tsx
View File

@ -10,8 +10,9 @@ export interface PrintPreviewHeaderProps {
export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
const { store } = props;
const orientation = () => store.state.printOrientation;
const oddPageOffsetX = () => store.state.printOddPageOffsetX;
const oddPageOffsetY = () => store.state.printOddPageOffsetY;
const frontOddPageOffsetX = () => store.state.printFrontOddPageOffsetX;
const frontOddPageOffsetY = () => store.state.printFrontOddPageOffsetY;
const doubleSided = () => store.state.printDoubleSided;
return (
<div class="fixed top-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mt-4 px-4 py-3 flex items-center justify-between gap-4">
@ -45,14 +46,27 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
</button>
</div>
</div>
<div class="flex items-center gap-2">
<label class="text-sm text-gray-600">奇数页偏移:</label>
<label class="flex items-center gap-1 cursor-pointer">
<input
type="checkbox"
checked={doubleSided()}
onChange={(e) => store.actions.setPrintDoubleSided(e.target.checked)}
class="cursor-pointer"
/>
<span class="text-sm text-gray-600">双面打印</span>
</label>
</div>
<div class="flex items-center gap-2">
<label class="text-sm text-gray-600">正面奇数页偏移:</label>
<div class="flex items-center gap-1">
<span class="text-xs text-gray-500">X:</span>
<input
type="number"
value={oddPageOffsetX()}
onChange={(e) => store.actions.setPrintOddPageOffsetX(Number(e.target.value))}
value={frontOddPageOffsetX()}
onChange={(e) => store.actions.setPrintFrontOddPageOffsetX(Number(e.target.value))}
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
step="0.1"
/>
@ -62,8 +76,8 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
<span class="text-xs text-gray-500">Y:</span>
<input
type="number"
value={oddPageOffsetY()}
onChange={(e) => store.actions.setPrintOddPageOffsetY(Number(e.target.value))}
value={frontOddPageOffsetY()}
onChange={(e) => store.actions.setPrintFrontOddPageOffsetY(Number(e.target.value))}
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
step="0.1"
/>

52
src/components/md-deck/editor-panel/LayerEditorPanel.tsx
View File

@ -18,33 +18,54 @@ const ORIENTATION_OPTIONS = [
export function LayerEditorPanel(props: LayerEditorPanelProps) {
const { store } = props;
// 根据当前激活的面获取图层配置
const currentLayerConfigs = () =>
store.state.activeSide === 'front'
? store.state.frontLayerConfigs
: store.state.backLayerConfigs;
const updateLayerOrientation = (layerProp: string, orientation: 'n' | 's' | 'e' | 'w') => {
const layer = store.state.layerConfigs.find(l => l.prop === layerProp);
if (layer) {
store.actions.updateLayerConfig(layerProp, { ...layer, orientation });
}
const updateFn = store.state.activeSide === 'front'
? store.actions.updateFrontLayerConfig
: store.actions.updateBackLayerConfig;
updateFn(layerProp, { orientation });
};
const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
const layer = store.state.layerConfigs.find(l => l.prop === layerProp);
if (layer) {
store.actions.updateLayerConfig(layerProp, { ...layer, fontSize });
}
const updateFn = store.state.activeSide === 'front'
? store.actions.updateFrontLayerConfig
: store.actions.updateBackLayerConfig;
updateFn(layerProp, { fontSize });
};
const toggleLayerVisible = (layerProp: string) => {
const toggleFn = store.state.activeSide === 'front'
? store.actions.toggleFrontLayerVisible
: store.actions.toggleBackLayerVisible;
toggleFn(layerProp);
};
const setEditingLayer = (layerProp: string) => {
store.actions.setEditingLayer(
store.state.editingLayer === layerProp ? null : layerProp
);
};
return (
<div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2 mt-0">图层</h3>
<h3 class="font-bold mb-2 mt-0">
图层 ({store.state.activeSide === 'front' ? '正面' : '背面'})
</h3>
<div class="space-y-2">
<For each={store.state.layerConfigs}>
<For each={currentLayerConfigs()}>
{(layer) => (
<div class="flex flex-row flex-wrap gap-1 p-2 bg-gray-50 rounded">
<div class="flex items-center gap-2">
<input
type="checkbox"
checked={layer.visible}
onChange={() => store.actions.toggleLayerVisible(layer.prop)}
onChange={() => toggleLayerVisible(layer.prop)}
class="cursor-pointer"
/>
<span class="text-sm flex-1">{layer.prop}</span>
@ -52,7 +73,7 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
{layer.visible && (
<>
<button
onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
onClick={() => setEditingLayer(layer.prop)}
class={`text-xs px-2 py-1 rounded cursor-pointer ${
store.state.editingLayer === layer.prop
? 'bg-blue-500 text-white'
@ -99,10 +120,11 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
<hr class="my-4" />
<button
onClick={store.actions.copyCode}
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
onClick={() => store.actions.copyCode()}
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer flex items-center gap-2 justify-center"
>
📋 复制代码
<span>📋</span>
<span>复制代码</span>
</button>
</div>
);

28
src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx
View File

@ -5,7 +5,7 @@ export interface PropertiesEditorPanelProps {
}
/**
* 卡牌属性编辑面板：尺寸、网格、出血、内边距
* 卡牌属性编辑面板：尺寸、网格、出血、内边距、正背面切换
*/
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
const { store } = props;
@ -14,6 +14,32 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
<div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2 mt-0">卡牌属性</h3>
{/* 正面/背面切换标签页 */}
<div class="mb-4">
<div class="flex gap-1">
<button
onClick={() => store.actions.setActiveSide('front')}
class={`flex-1 px-3 py-1.5 rounded text-sm font-medium cursor-pointer border ${
store.state.activeSide === 'front'
? 'bg-blue-600 text-white border-blue-600'
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
}`}
>
正面
</button>
<button
onClick={() => store.actions.setActiveSide('back')}
class={`flex-1 px-3 py-1.5 rounded text-sm font-medium cursor-pointer border ${
store.state.activeSide === 'back'
? 'bg-blue-600 text-white border-blue-600'
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
}`}
>
背面
</button>
</div>
</div>
<div class="space-y-3">
<div>
<label class="block text-sm font-medium text-gray-700">尺寸 (mm)</label>

143
src/components/md-deck/hooks/deckStore.ts
View File

@ -1,8 +1,8 @@
import { createStore } from 'solid-js/store';
import { calculateDimensions } from './dimensions';
import { loadCSV, CSV } from '../../utils/csv-loader';
import { initLayerConfigs, formatLayers } from './layer-parser';
import type { CardData, LayerConfig, Dimensions } from '../types';
import { initLayerConfigs, formatLayers, initLayerConfigsForSide } from './layer-parser';
import type { CardData, LayerConfig, Dimensions, CardSide } from '../types';
/**
* 默认配置常量
@ -36,11 +36,13 @@ export interface DeckState {
activeTab: number;
// 图层配置
layerConfigs: LayerConfig[];
frontLayerConfigs: LayerConfig[];
backLayerConfigs: LayerConfig[];
// 编辑状态
isEditing: boolean;
editingLayer: string | null;
activeSide: CardSide;
// 框选状态
isSelecting: boolean;
@ -60,8 +62,9 @@ export interface DeckState {
// 打印设置
printOrientation: 'portrait' | 'landscape';
printOddPageOffsetX: number;
printOddPageOffsetY: number;
printFrontOddPageOffsetX: number;
printFrontOddPageOffsetY: number;
printDoubleSided: boolean;
}
export interface DeckActions {
@ -78,15 +81,21 @@ export interface DeckActions {
setActiveTab: (index: number) => void;
updateCardData: (index: number, key: string, value: string) => void;
// 图层操作
setLayerConfigs: (configs: LayerConfig[]) => void;
updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
toggleLayerVisible: (prop: string) => void;
// 图层操作 - 正面
setFrontLayerConfigs: (configs: LayerConfig[]) => void;
updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
toggleFrontLayerVisible: (prop: string) => void;
// 图层操作 - 背面
setBackLayerConfigs: (configs: LayerConfig[]) => void;
updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
toggleBackLayerVisible: (prop: string) => void;
// 编辑状态
setIsEditing: (editing: boolean) => void;
setEditingLayer: (layer: string | null) => void;
updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
setActiveSide: (side: CardSide) => void;
// 框选操作
setIsSelecting: (selecting: boolean) => void;
@ -95,13 +104,13 @@ export interface DeckActions {
cancelSelection: () => void;
// 数据加载
loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string) => Promise<void>;
loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
setError: (error: string | null) => void;
clearError: () => void;
// 生成代码
generateCode: () => string;
copyCode: () => Promise<void>;
generateCode: (backLayersStr?: string) => string;
copyCode: (backLayersStr?: string) => Promise<void>;
// 导出操作
setExporting: (exporting: boolean) => void;
@ -112,8 +121,9 @@ export interface DeckActions {
// 打印设置
setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
setPrintOddPageOffsetX: (offset: number) => void;
setPrintOddPageOffsetY: (offset: number) => void;
setPrintFrontOddPageOffsetX: (offset: number) => void;
setPrintFrontOddPageOffsetY: (offset: number) => void;
setPrintDoubleSided: (doubleSided: boolean) => void;
}
export interface DeckStore {
@ -141,9 +151,11 @@ export function createDeckStore(
dimensions: null,
cards: [] as any,
activeTab: 0,
layerConfigs: [],
frontLayerConfigs: [],
backLayerConfigs: [],
isEditing: false,
editingLayer: null,
activeSide: 'front',
isSelecting: false,
selectStart: null,
selectEnd: null,
@ -153,8 +165,9 @@ export function createDeckStore(
exportProgress: 0,
exportError: null,
printOrientation: 'portrait',
printOddPageOffsetX: 0,
printOddPageOffsetY: 0
printFrontOddPageOffsetX: 0,
printFrontOddPageOffsetY: 0,
printDoubleSided: false
});
// 更新尺寸并重新计算 dimensions
@ -201,22 +214,39 @@ export function createDeckStore(
setState('cards', index, key, value);
};
const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
// 正面图层操作
const setFrontLayerConfigs = (configs: LayerConfig[]) => setState({ frontLayerConfigs: configs });
const updateFrontLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
setState('frontLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
};
const toggleLayerVisible = (prop: string) => {
setState('layerConfigs', (prev) => prev.map((config) =>
const toggleFrontLayerVisible = (prop: string) => {
setState('frontLayerConfigs', (prev) => prev.map((config) =>
config.prop === prop ? { ...config, visible: !config.visible } : config
));
};
// 背面图层操作
const setBackLayerConfigs = (configs: LayerConfig[]) => setState({ backLayerConfigs: configs });
const updateBackLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
setState('backLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
};
const toggleBackLayerVisible = (prop: string) => {
setState('backLayerConfigs', (prev) => prev.map((config) =>
config.prop === prop ? { ...config, visible: !config.visible } : config
));
};
const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
const setActiveSide = (side: CardSide) => setState({ activeSide: side });
const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
const layer = state.editingLayer;
if (!layer) return;
setState('layerConfigs', (prev) => prev.map((config) =>
const currentSide = state.activeSide;
const configs = currentSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
const setter = currentSide === 'front' ? setFrontLayerConfigs : setBackLayerConfigs;
setter(configs.map((config) =>
config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
));
setState({ editingLayer: null });
@ -230,7 +260,7 @@ export function createDeckStore(
};
// 加载卡牌数据（核心逻辑）
const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '') => {
const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
if (!path) {
setState({ error: '未指定 CSV 文件路径' });
return;
@ -240,26 +270,27 @@ export function createDeckStore(
try {
const data = await loadCSV(path);
if (data.length === 0) {
setState({
setState({
error: 'CSV 文件为空或格式不正确',
isLoading: false
isLoading: false
});
return;
}
setState({
cards: data,
setState({
cards: data,
activeTab: 0,
layerConfigs: initLayerConfigs(data, layersStr),
isLoading: false
frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
isLoading: false
});
updateDimensions();
} catch (err) {
setState({
setState({
error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
isLoading: false
isLoading: false
});
}
};
@ -267,14 +298,15 @@ export function createDeckStore(
const setError = (error: string | null) => setState({ error });
const clearError = () => setState({ error: null });
const generateCode = () => {
const layersStr = formatLayers(state.layerConfigs);
const generateCode = (backLayersStr?: string) => {
const frontLayersStr = formatLayers(state.frontLayerConfigs);
const backLayersString = backLayersStr || formatLayers(state.backLayerConfigs);
const parts = [
`:md-deck[${state.rawSrc || state.src}]`,
`{size="${state.sizeW}x${state.sizeH} "`,
`grid="${state.gridW}x${state.gridH} "`
];
// 仅在非默认值时添加 bleed 和 padding
if (state.bleed !== DECK_DEFAULTS.BLEED) {
parts.push(`bleed="${state.bleed} "`);
@ -282,13 +314,17 @@ export function createDeckStore(
if (state.padding !== DECK_DEFAULTS.PADDING) {
parts.push(`padding="${state.padding} "`);
}
parts.push(`layers="${layersStr}"}`);
parts.push(`layers="${frontLayersStr}"`);
if (backLayersString) {
parts.push(` backLayers="${backLayersString}"`);
}
parts.push('}');
return parts.join('');
};
const copyCode = async () => {
const code = generateCode();
const copyCode = async (backLayersStr?: string) => {
const code = generateCode(backLayersStr);
try {
await navigator.clipboard.writeText(code);
alert('已复制到剪贴板！');
@ -314,12 +350,16 @@ export function createDeckStore(
setState({ printOrientation: orientation });
};
const setPrintOddPageOffsetX = (offset: number) => {
setState({ printOddPageOffsetX: offset });
const setPrintFrontOddPageOffsetX = (offset: number) => {
setState({ printFrontOddPageOffsetX: offset });
};
const setPrintOddPageOffsetY = (offset: number) => {
setState({ printOddPageOffsetY: offset });
const setPrintFrontOddPageOffsetY = (offset: number) => {
setState({ printFrontOddPageOffsetY: offset });
};
const setPrintDoubleSided = (doubleSided: boolean) => {
setState({ printDoubleSided: doubleSided });
};
const actions: DeckActions = {
@ -332,12 +372,16 @@ export function createDeckStore(
setCards,
setActiveTab,
updateCardData,
setLayerConfigs,
updateLayerConfig,
toggleLayerVisible,
setFrontLayerConfigs,
updateFrontLayerConfig,
toggleFrontLayerVisible,
setBackLayerConfigs,
updateBackLayerConfig,
toggleBackLayerVisible,
setIsEditing,
setEditingLayer,
updateLayerPosition,
setActiveSide,
setIsSelecting,
setSelectStart,
setSelectEnd,
@ -353,8 +397,9 @@ export function createDeckStore(
setExportError,
clearExportError,
setPrintOrientation,
setPrintOddPageOffsetX,
setPrintOddPageOffsetY
setPrintFrontOddPageOffsetX,
setPrintFrontOddPageOffsetY,
setPrintDoubleSided
};
return { state, actions };

18
src/components/md-deck/hooks/layer-parser.ts
View File

@ -49,13 +49,13 @@ export function formatLayers(layers: LayerConfig[]): string {
}
/**
* 初始化图层配置
* 初始化图层配置（用于特定面）
*/
export function initLayerConfigs(
export function initLayerConfigsForSide(
data: CSV<any>,
existingLayersStr: string
layersStr: string
): LayerConfig[] {
const parsed = parseLayers(existingLayersStr);
const parsed = parseLayers(layersStr);
const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
return allProps.map(prop => {
@ -72,3 +72,13 @@ export function initLayerConfigs(
};
});
}
/**
* 初始化图层配置（向后兼容）
*/
export function initLayerConfigs(
data: CSV<any>,
existingLayersStr: string
): LayerConfig[] {
return initLayerConfigsForSide(data, existingLayersStr);
}

3
src/components/md-deck/hooks/usePDFExport.ts
View File

@ -1,10 +1,11 @@
import type { DeckStore } from './deckStore';
import type { CardData, LayerConfig, Dimensions } from '../types';
import type { CardData, LayerConfig, Dimensions, CardSide } from '../types';
export interface PageCard {
data: CardData;
x: number;
y: number;
side?: CardSide;
}
export interface PageData {

156
src/components/md-deck/hooks/usePageLayout.ts
View File

@ -24,8 +24,9 @@ const PRINT_MARGIN = 5;
*/
export function usePageLayout(store: DeckStore): UsePageLayoutReturn {
const orientation = () => store.state.printOrientation;
const oddPageOffsetX = () => store.state.printOddPageOffsetX;
const oddPageOffsetY = () => store.state.printOddPageOffsetY;
const doubleSided = () => store.state.printDoubleSided;
const frontOddPageOffsetX = () => store.state.printFrontOddPageOffsetX;
const frontOddPageOffsetY = () => store.state.printFrontOddPageOffsetY;
const getA4Size = () => {
if (orientation() === 'landscape') {
@ -52,56 +53,119 @@ export function usePageLayout(store: DeckStore): UsePageLayoutReturn {
const baseOffsetY = (a4Height - maxGridHeight) / 2;
const result: PageData[] = [];
let currentPage: PageData = {
pageIndex: 0,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
if (doubleSided()) {
// 双面打印模式：每张卡牌需要 2 页（正面 + 背面）
// 背面卡牌顺序在长边方向上逆转
const totalCards = cards.length;
for (let i = 0; i < totalCards; i++) {
const frontPageIndex = i * 2;
const backPageIndex = i * 2 + 1;
// 确保页面数组有足够长度
while (result.length <= backPageIndex) {
result.push({
pageIndex: result.length,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
});
}
const frontPage = result[frontPageIndex];
const backPage = result[backPageIndex];
// 正面：正常顺序排列
const frontRow = Math.floor(i / cardsPerRow);
const frontCol = i % cardsPerRow;
const frontX = baseOffsetX + frontCol * cardWidth + frontOddPageOffsetX();
const frontY = baseOffsetY + frontRow * cardHeight + frontOddPageOffsetY();
frontPage.cards.push({ data: cards[i], x: frontX, y: frontY, side: 'front' as const });
frontPage.bounds.minX = Math.min(frontPage.bounds.minX, frontX);
frontPage.bounds.minY = Math.min(frontPage.bounds.minY, frontY);
frontPage.bounds.maxX = Math.max(frontPage.bounds.maxX, frontX + cardWidth);
frontPage.bounds.maxY = Math.max(frontPage.bounds.maxY, frontY + cardHeight);
// 背面：逆转顺序排列（长边方向）
// 对于竖向打印，长边是垂直方向，所以逆转行
// 对于横向打印，长边是水平方向，所以逆转列
const backIndex = totalCards - 1 - i;
const backRow = orientation() === 'portrait'
? Math.floor(backIndex / cardsPerRow)
: Math.floor(i / cardsPerRow);
const backCol = orientation() === 'portrait'
? backIndex % cardsPerRow
: (cardsPerRow - 1 - (i % cardsPerRow));
const backX = baseOffsetX + backCol * cardWidth;
const backY = baseOffsetY + backRow * cardHeight;
backPage.cards.push({ data: cards[i], x: backX, y: backY, side: 'back' as const });
backPage.bounds.minX = Math.min(backPage.bounds.minX, backX);
backPage.bounds.minY = Math.min(backPage.bounds.minY, backY);
backPage.bounds.maxX = Math.max(backPage.bounds.maxX, backX + cardWidth);
backPage.bounds.maxY = Math.max(backPage.bounds.maxY, backY + cardHeight);
}
} else {
// 单面打印模式：原有逻辑
let currentPage: PageData = {
pageIndex: 0,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
for (let i = 0; i < cards.length; i++) {
const pageIndex = Math.floor(i / cardsPerPage);
const indexInPage = i % cardsPerPage;
const row = Math.floor(indexInPage / cardsPerRow);
const col = indexInPage % cardsPerRow;
for (let i = 0; i < cards.length; i++) {
const pageIndex = Math.floor(i / cardsPerPage);
const indexInPage = i % cardsPerPage;
const row = Math.floor(indexInPage / cardsPerRow);
const col = indexInPage % cardsPerRow;
if (pageIndex !== currentPage.pageIndex) {
if (pageIndex !== currentPage.pageIndex) {
result.push(currentPage);
currentPage = {
pageIndex,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
}
const isOddPage = pageIndex % 2 === 0;
const pageOffsetX = isOddPage ? frontOddPageOffsetX() : 0;
const pageOffsetY = isOddPage ? frontOddPageOffsetY() : 0;
const cardX = baseOffsetX + col * cardWidth + pageOffsetX;
const cardY = baseOffsetY + row * cardHeight + pageOffsetY;
currentPage.cards.push({ data: cards[i], x: cardX, y: cardY, side: 'front' as const });
currentPage.bounds.minX = Math.min(currentPage.bounds.minX, cardX);
currentPage.bounds.minY = Math.min(currentPage.bounds.minY, cardY);
currentPage.bounds.maxX = Math.max(currentPage.bounds.maxX, cardX + cardWidth);
currentPage.bounds.maxY = Math.max(currentPage.bounds.maxY, cardY + cardHeight);
}
if (currentPage.cards.length > 0) {
result.push(currentPage);
currentPage = {
pageIndex,
cards: [],
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
};
}
const isOddPage = pageIndex % 2 === 0;
const pageOffsetX = isOddPage ? oddPageOffsetX() : 0;
const pageOffsetY = isOddPage ? oddPageOffsetY() : 0;
const cardX = baseOffsetX + col * cardWidth + pageOffsetX;
const cardY = baseOffsetY + row * cardHeight + pageOffsetY;
currentPage.cards.push({ data: cards[i], x: cardX, y: cardY });
currentPage.bounds.minX = Math.min(currentPage.bounds.minX, cardX);
currentPage.bounds.minY = Math.min(currentPage.bounds.minY, cardY);
currentPage.bounds.maxX = Math.max(currentPage.bounds.maxX, cardX + cardWidth);
currentPage.bounds.maxY = Math.max(currentPage.bounds.maxY, cardY + cardHeight);
}
if (currentPage.cards.length > 0) {
result.push(currentPage);
}
return result.map(page => ({
...page,
frameBounds: {
minX: baseOffsetX + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
minY: baseOffsetY + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0),
maxX: baseOffsetX + maxGridWidth + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
maxY: baseOffsetY + maxGridHeight + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0)
}
}));
return result.map(page => {
const offsetX = doubleSided() && page.pageIndex % 2 === 0 ? frontOddPageOffsetX() : 0;
const offsetY = doubleSided() && page.pageIndex % 2 === 0 ? frontOddPageOffsetY() : 0;
return {
...page,
frameBounds: {
minX: baseOffsetX + offsetX,
minY: baseOffsetY + offsetY,
maxX: baseOffsetX + maxGridWidth + offsetX,
maxY: baseOffsetY + maxGridHeight + offsetY
}
};
});
});
const cropMarks = createMemo<CropMarkData[]>(() => {

9
src/components/md-deck/index.tsx
View File

@ -17,6 +17,7 @@ interface DeckProps {
bleed?: number | string;
padding?: number | string;
layers?: string;
backLayers?: string;
fixed?: boolean | string;
}
@ -30,6 +31,7 @@ customElement<DeckProps>('md-deck', {
bleed: 1,
padding: 2,
layers: '',
backLayers: '',
fixed: false
}, (props, { element }) => {
noShadowDOM();
@ -86,7 +88,12 @@ customElement<DeckProps>('md-deck', {
}
// 加载 CSV 数据
store.actions.loadCardsFromPath(resolvedSrc, csvPath, (props.layers as string) || '');
store.actions.loadCardsFromPath(
resolvedSrc,
csvPath,
(props.layers as string) || '',
(props.backLayers as string) || ''
);
// 清理函数
onCleanup(() => {

2
src/components/md-deck/types.ts
View File

@ -2,6 +2,8 @@ export interface CardData {
[key: string]: string;
}
export type CardSide = 'front' | 'back';
export interface Layer {
prop: string;
x1: number;