150 lines
4.2 KiB
TypeScript
150 lines
4.2 KiB
TypeScript
import { customElement, noShadowDOM } from 'solid-element';
|
||
import { Show, onCleanup } from 'solid-js';
|
||
import { resolvePath } from '../utils/path';
|
||
import { createDeckStore } from './hooks/deckStore';
|
||
import { DeckHeader } from './DeckHeader';
|
||
import { DeckContent } from './DeckContent';
|
||
import { PrintPreview } from './PrintPreview';
|
||
import {DataEditorPanel, LayerEditorPanel, PropertiesEditorPanel} from './editor-panel';
|
||
|
||
interface DeckProps {
|
||
size?: string;
|
||
sizeW?: number;
|
||
sizeH?: number;
|
||
grid?: string;
|
||
gridW?: number;
|
||
gridH?: number;
|
||
bleed?: number | string;
|
||
padding?: number | string;
|
||
fontSize?: number;
|
||
layers?: string;
|
||
fixed?: boolean | string;
|
||
}
|
||
|
||
customElement<DeckProps>('md-deck', {
|
||
size: '',
|
||
sizeW: 54,
|
||
sizeH: 86,
|
||
grid: '',
|
||
gridW: 5,
|
||
gridH: 8,
|
||
bleed: 1,
|
||
padding: 2,
|
||
fontSize: 3,
|
||
layers: '',
|
||
fixed: false
|
||
}, (props, { element }) => {
|
||
noShadowDOM();
|
||
|
||
// 从 element 的 textContent 获取 CSV 路径
|
||
const csvPath = element?.textContent?.trim() || '';
|
||
|
||
// 隐藏原始文本内容
|
||
if (element) {
|
||
element.textContent = '';
|
||
}
|
||
|
||
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
|
||
const articleEl = element?.closest('article[data-src]');
|
||
const articlePath = articleEl?.getAttribute('data-src') || '';
|
||
|
||
// 解析相对路径
|
||
const resolvedSrc = resolvePath(articlePath, csvPath);
|
||
|
||
// 创建 store 并加载数据
|
||
const store = createDeckStore(resolvedSrc, (props.layers as string) || '');
|
||
|
||
// 解析 size 属性（支持旧格式 "54x86" 和新格式）
|
||
if (props.size && props.size.includes('x')) {
|
||
const [w, h] = props.size.split('x').map(Number);
|
||
store.actions.setSizeW(w);
|
||
store.actions.setSizeH(h);
|
||
} else {
|
||
store.actions.setSizeW(props.sizeW ?? 54);
|
||
store.actions.setSizeH(props.sizeH ?? 86);
|
||
}
|
||
|
||
// 解析 grid 属性（支持旧格式 "5x8" 和新格式）
|
||
if (props.grid && props.grid.includes('x')) {
|
||
const [w, h] = props.grid.split('x').map(Number);
|
||
store.actions.setGridW(w);
|
||
store.actions.setGridH(h);
|
||
} else {
|
||
store.actions.setGridW(props.gridW ?? 5);
|
||
store.actions.setGridH(props.gridH ?? 8);
|
||
}
|
||
|
||
// 解析 bleed 和 padding（支持旧字符串格式和新数字格式）
|
||
if (typeof props.bleed === 'string') {
|
||
store.actions.setBleed(Number(props.bleed));
|
||
} 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, (props.layers as string) || '');
|
||
|
||
// 清理函数
|
||
onCleanup(() => {
|
||
store.actions.clearError();
|
||
});
|
||
|
||
return (
|
||
<div class="md-deck mb-4">
|
||
{/* 导出 PDF 预览弹窗 */}
|
||
<Show when={store.state.isExporting}>
|
||
<PrintPreview
|
||
store={store}
|
||
onClose={() => store.actions.setExporting(false)}
|
||
onExport={() => {}}
|
||
/>
|
||
</Show>
|
||
|
||
{/* Tab 选择器和编辑按钮 */}
|
||
<Show when={store.state.cards.length > 0 && !store.state.error}>
|
||
<DeckHeader store={store} />
|
||
</Show>
|
||
|
||
<div class="flex gap-4">
|
||
|
||
{/* 内容区域：错误/加载/卡牌预览/空状态 */}
|
||
{/* 左侧：CSV 数据编辑 */}
|
||
{/*<Show when={store.state.isEditing && !store.state.fixed}>*/}
|
||
{/* <DataEditorPanel*/}
|
||
{/* activeTab={store.state.activeTab}*/}
|
||
{/* cards={store.state.cards}*/}
|
||
{/* updateCardData={store.actions.updateCardData}*/}
|
||
{/* />*/}
|
||
{/*</Show>*/}
|
||
|
||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||
<div class="flex-1">
|
||
<PropertiesEditorPanel store={store} />
|
||
</div>
|
||
</Show>
|
||
|
||
<DeckContent store={store} isLoading={store.state.isLoading} />
|
||
|
||
{/* 右侧：属性/图层编辑面板 */}
|
||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||
<div class="flex-1">
|
||
<LayerEditorPanel store={store} />
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|