diff --git a/src/components/md-deck/hooks/deckStore.ts b/src/components/md-deck/hooks/deckStore.ts
index 7879aed..db8b0a8 100644
--- a/src/components/md-deck/hooks/deckStore.ts
+++ b/src/components/md-deck/hooks/deckStore.ts
@@ -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
) => void;
- toggleLayerVisible: (prop: string) => void;
+ // 图层操作 - 正面
+ setFrontLayerConfigs: (configs: LayerConfig[]) => void;
+ updateFrontLayerConfig: (prop: string, updates: Partial) => void;
+ toggleFrontLayerVisible: (prop: string) => void;
+
+ // 图层操作 - 背面
+ setBackLayerConfigs: (configs: LayerConfig[]) => void;
+ updateBackLayerConfig: (prop: string, updates: Partial) => 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;
+ loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise;
setError: (error: string | null) => void;
clearError: () => void;
// 生成代码
- generateCode: () => string;
- copyCode: () => Promise;
+ generateCode: (backLayersStr?: string) => string;
+ copyCode: (backLayersStr?: string) => Promise;
// 导出操作
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) => {
- 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) => {
+ 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) => {
+ 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 };
diff --git a/src/components/md-deck/hooks/layer-parser.ts b/src/components/md-deck/hooks/layer-parser.ts
index d0ff1a9..96dfe87 100644
--- a/src/components/md-deck/hooks/layer-parser.ts
+++ b/src/components/md-deck/hooks/layer-parser.ts
@@ -49,13 +49,13 @@ export function formatLayers(layers: LayerConfig[]): string {
}
/**
- * 初始化图层配置
+ * 初始化图层配置（用于特定面）
*/
-export function initLayerConfigs(
+export function initLayerConfigsForSide(
data: CSV,
- 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,
+ existingLayersStr: string
+): LayerConfig[] {
+ return initLayerConfigsForSide(data, existingLayersStr);
+}
diff --git a/src/components/md-deck/hooks/usePDFExport.ts b/src/components/md-deck/hooks/usePDFExport.ts
index 0c477e4..2353b0b 100644
--- a/src/components/md-deck/hooks/usePDFExport.ts
+++ b/src/components/md-deck/hooks/usePDFExport.ts
@@ -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 {
diff --git a/src/components/md-deck/hooks/usePageLayout.ts b/src/components/md-deck/hooks/usePageLayout.ts
index 27ffd37..940ffd4 100644
--- a/src/components/md-deck/hooks/usePageLayout.ts
+++ b/src/components/md-deck/hooks/usePageLayout.ts
@@ -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(() => {
diff --git a/src/components/md-deck/index.tsx b/src/components/md-deck/index.tsx
index 7a196e2..53a6eaa 100644
--- a/src/components/md-deck/index.tsx
+++ b/src/components/md-deck/index.tsx
@@ -17,6 +17,7 @@ interface DeckProps {
bleed?: number | string;
padding?: number | string;
layers?: string;
+ backLayers?: string;
fixed?: boolean | string;
}
@@ -30,6 +31,7 @@ customElement('md-deck', {
bleed: 1,
padding: 2,
layers: '',
+ backLayers: '',
fixed: false
}, (props, { element }) => {
noShadowDOM();
@@ -86,7 +88,12 @@ customElement('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(() => {
diff --git a/src/components/md-deck/types.ts b/src/components/md-deck/types.ts
index 5dab4a4..660286a 100644
--- a/src/components/md-deck/types.ts
+++ b/src/components/md-deck/types.ts
@@ -2,6 +2,8 @@ export interface CardData {
[key: string]: string;
}
+export type CardSide = 'front' | 'back';
+
export interface Layer {
prop: string;
x1: number;