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

refactor: break down & clean up

This commit is contained in:
hypercross 2026-02-27 15:21:21 +08:00
parent 8ddc2a672a
commit c6580b7c69
14 changed files with 404 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/card-preview.tsx
View File

@ -1,105 +0,0 @@
import { Show, For } from 'solid-js';
import { marked } from '../markdown';
import { getLayerStyle } from './utils/dimensions';
import { getSelectionBoxStyle, useSelection } from './stores/use-selection';
import type { DeckStore } from "./stores/deckStore";
export interface CardPreviewProps {
store: DeckStore;
}
/**
* 渲染 layer 内容
*/
function renderLayer(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string {
const content = cardData[layer.prop] || '';
return marked.parse(content) as string;
}
export function CardPreview(props: CardPreviewProps) {
const currentCard = () => props.store.state.cards[props.store.state.activeTab];
const visibleLayers = () => props.store.state.layerConfigs.filter((l) => l.visible);
const selectionStyle = () =>
getSelectionBoxStyle(props.store.state.selectStart, props.store.state.selectEnd, props.store.state.dimensions);
const selection = useSelection(props.store);
let cardRef: HTMLDivElement | undefined;
return (
<div class="flex justify-center">
<Show when={props.store.state.activeTab < props.store.state.cards.length}>
<div
ref={cardRef}
class="relative bg-white border border-gray-300 shadow-lg"
style={{
width: `${props.store.state.dimensions?.cardWidth}mm`,
height: `${props.store.state.dimensions?.cardHeight}mm`
}}
onMouseDown={(e) => selection.onMouseDown(e, cardRef!)}
onMouseMove={(e) => selection.onMouseMove(e, cardRef!)}
onMouseUp={selection.onMouseUp}
onMouseLeave={selection.onMouseLeave}
>
{/* 框选遮罩 */}
<Show when={props.store.state.isSelecting && selectionStyle()}>
<div
class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
style={selectionStyle()!}
/>
</Show>
{/* 网格区域容器 */}
<div
class="absolute"
style={{
left: `${props.store.state.dimensions?.gridOriginX}mm`,
top: `${props.store.state.dimensions?.gridOriginY}mm`,
width: `${props.store.state.dimensions?.gridAreaWidth}mm`,
height: `${props.store.state.dimensions?.gridAreaHeight}mm`
}}
>
{/* 编辑模式下的网格线 */}
<Show when={props.store.state.isEditing && !props.store.state.fixed}>
<div class="absolute inset-0 pointer-events-none">
<For each={Array.from({ length: (props.store.state.dimensions?.gridW || 0) - 1 })}>
{(_, i) => (
<div
class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
style={{ left: `${(i() + 1) * (props.store.state.dimensions?.cellWidth || 0)}mm` }}
/>
)}
</For>
<For each={Array.from({ length: (props.store.state.dimensions?.gridH || 0) - 1 })}>
{(_, i) => (
<div
class="absolute left-0 right-0 border-b border-dashed border-gray-300"
style={{ top: `${(i() + 1) * (props.store.state.dimensions?.cellHeight || 0)}mm` }}
/>
)}
</For>
</div>
</Show>
{/* 渲染每个 layer */}
<For each={visibleLayers()}>
{(layer) => {
const style = getLayerStyle(layer, props.store.state.dimensions!);
return (
<div
class={`absolute flex items-center justify-center text-center prose prose-sm ${
props.store.state.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
}`}
style={style}
innerHTML={renderLayer(layer, currentCard())}
/>
);
}}
</For>
</div>
</div>
</Show>
</div>
);
}

154
src/components/md-deck.tsx
View File

@ -1,154 +0,0 @@
import { customElement, noShadowDOM } from 'solid-element';
import { Show, createEffect, createResource, For, onCleanup } from 'solid-js';
import { resolvePath } from './utils/path';
import { loadCSV } from './utils/csv-loader';
import { initLayerConfigs } from './utils/layer-parser';
import { createDeckStore } from './stores/deckStore';
import { CardPreview } from './card-preview';
import { DataEditorPanel, PropertiesEditorPanel } from './editor-panel';
interface DeckProps {
size?: string;
grid?: string;
bleed?: string;
padding?: string;
layers?: string;
fixed?: boolean | string;
}
customElement<DeckProps>('md-deck', {
size: '54x86',
grid: '5x8',
bleed: '1',
padding: '2',
layers: '',
fixed: false
}, (props, { element }) => {
noShadowDOM();
// 创建统一的 store
const store = createDeckStore();
// 从 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 属性
store.actions.setSize(props.size || '54x86');
store.actions.setGrid(props.grid || '5x8');
store.actions.setBleed(props.bleed || '1');
store.actions.setPadding(props.padding || '2');
// 加载 CSV 文件
const [csvData, { refetch }] = createResource(() => resolvedSrc, loadCSV);
// 处理 CSV 数据加载结果
createEffect(() => {
const data = csvData();
const loading = csvData.loading;
const error = csvData.error;
if (error) {
store.actions.setError(`加载 CSV 失败：${error.message}`);
return;
}
if (!loading && data) {
store.actions.loadCards(data);
store.actions.setLayerConfigs(initLayerConfigs(data, (props.layers as string) || ''));
}
});
// 清理函数
onCleanup(() => {
// 可以在这里清理资源
});
return (
<div class="md-deck 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>
{/* 中间：卡牌预览和控制 */}
<div class="flex-1">
{/* Tab 选择器 */}
<div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
<button
onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
class={`px-3 py-1 rounded text-sm font-medium transition-colors ${
store.state.isEditing && !store.state.fixed
? 'bg-blue-100 text-blue-600'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
} cursor-pointer`}
>
{store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
</button>
<div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
<For each={store.state.cards}>
{(card, index) => (
<button
onClick={() => store.actions.setActiveTab(index())}
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
store.state.activeTab === index()
? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
}`}
>
{card.label || card.name || `Card ${index() + 1}`}
</button>
)}
</For>
</div>
</div>
{/* 错误提示 */}
<Show when={store.state.error}>
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
{store.state.error}
</div>
</Show>
{/* 加载状态 */}
<Show when={csvData.loading}>
<div class="text-center text-gray-500 py-8">
加载卡牌数据中...
</div>
</Show>
{/* 卡牌预览 */}
<Show when={!csvData.loading && store.state.cards.length > 0 && !store.state.error}>
<CardPreview store={store} />
</Show>
{/* 空状态 */}
<Show when={!csvData.loading && store.state.cards.length === 0 && !store.state.error}>
<div class="text-center text-gray-500 py-8">
暂无卡牌数据
</div>
</Show>
</div>
{/* 右侧：属性编辑表单 */}
<Show when={store.state.isEditing && !store.state.fixed}>
<PropertiesEditorPanel store={store} />
</Show>
</div>
);
});

113
src/components/md-deck/CardPreview.tsx Normal file
View File

@ -0,0 +1,113 @@
import { Show, For, createMemo } from 'solid-js';
import { marked } from '../../markdown';
import { getLayerStyle } from './hooks/dimensions';
import { useCardSelection } from './hooks/useCardSelection';
import { getSelectionBoxStyle } from './hooks/useCardSelection';
import type { DeckStore } from './hooks/deckStore';
export interface CardPreviewProps {
store: DeckStore;
}
/**
* 渲染 layer 内容（提取为纯工具函数）
*/
function renderLayerContent(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string {
const content = cardData[layer.prop] || '';
return marked.parse(content) as string;
}
/**
* 卡牌预览组件
*/
export function CardPreview(props: CardPreviewProps) {
const { store } = props;
// 使用 createMemo 优化计算
const currentCard = createMemo(() => store.state.cards[store.state.activeTab]);
const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
const selectionStyle = createMemo(() =>
getSelectionBoxStyle(store.state.selectStart, store.state.selectEnd, store.state.dimensions)
);
const selection = useCardSelection(store);
let cardRef: HTMLDivElement | undefined;
return (
<div class="flex justify-center">
<Show when={store.state.activeTab < store.state.cards.length}>
<div
ref={cardRef}
class="relative bg-white border border-gray-300 shadow-lg"
style={{
width: `${store.state.dimensions?.cardWidth}mm`,
height: `${store.state.dimensions?.cardHeight}mm`
}}
onMouseDown={(e) => selection.onMouseDown(e, cardRef!)}
onMouseMove={(e) => selection.onMouseMove(e, cardRef!)}
onMouseUp={selection.onMouseUp}
onMouseLeave={selection.onMouseLeave}
>
{/* 框选遮罩 */}
<Show when={store.state.isSelecting && selectionStyle()}>
<div
class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
style={selectionStyle()!}
/>
</Show>
{/* 网格区域容器 */}
<div
class="absolute"
style={{
left: `${store.state.dimensions?.gridOriginX}mm`,
top: `${store.state.dimensions?.gridOriginY}mm`,
width: `${store.state.dimensions?.gridAreaWidth}mm`,
height: `${store.state.dimensions?.gridAreaHeight}mm`
}}
>
{/* 编辑模式下的网格线 */}
<Show when={store.state.isEditing && !store.state.fixed}>
<div class="absolute inset-0 pointer-events-none">
<For each={Array.from({ length: (store.state.dimensions?.gridW || 0) - 1 })}>
{(_, i) => (
<div
class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
style={{ left: `${(i() + 1) * (store.state.dimensions?.cellWidth || 0)}mm` }}
/>
)}
</For>
<For each={Array.from({ length: (store.state.dimensions?.gridH || 0) - 1 })}>
{(_, i) => (
<div
class="absolute left-0 right-0 border-b border-dashed border-gray-300"
style={{ top: `${(i() + 1) * (store.state.dimensions?.cellHeight || 0)}mm` }}
/>
)}
</For>
</div>
</Show>
{/* 渲染每个 layer */}
<For each={visibleLayers()}>
{(layer) => {
const style = getLayerStyle(layer, store.state.dimensions!);
return (
<div
class={`absolute flex items-center justify-center text-center prose prose-sm ${
store.state.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
}`}
style={style}
innerHTML={renderLayerContent(layer, currentCard())}
/>
);
}}
</For>
</div>
</div>
</Show>
</div>
);
}

43
src/components/md-deck/DeckContent.tsx Normal file
View File

@ -0,0 +1,43 @@
import { Show } from 'solid-js';
import { CardPreview } from './CardPreview';
import type { DeckStore } from './hooks/deckStore';
export interface DeckContentProps {
store: DeckStore;
isLoading: boolean;
}
/**
* 卡牌预览内容区域：错误/加载/卡牌预览/空状态
*/
export function DeckContent(props: DeckContentProps) {
return (
<>
{/* 错误提示 */}
<Show when={props.store.state.error}>
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
{props.store.state.error}
</div>
</Show>
{/* 加载状态 */}
<Show when={props.isLoading}>
<div class="text-center text-gray-500 py-8">
加载卡牌数据中...
</div>
</Show>
{/* 卡牌预览 */}
<Show when={!props.isLoading && props.store.state.cards.length > 0 && !props.store.state.error}>
<CardPreview store={props.store} />
</Show>
{/* 空状态 */}
<Show when={!props.isLoading && props.store.state.cards.length === 0 && !props.store.state.error}>
<div class="text-center text-gray-500 py-8">
暂无卡牌数据
</div>
</Show>
</>
);
}

47
src/components/md-deck/DeckHeader.tsx Normal file
View File

@ -0,0 +1,47 @@
import { For } from 'solid-js';
import type { DeckStore } from './hooks/deckStore';
export interface DeckHeaderProps {
store: DeckStore;
}
/**
* 卡牌预览头部：编辑按钮和 Tab 选择器
*/
export function DeckHeader(props: DeckHeaderProps) {
const { store } = props;
return (
<div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
{/* 编辑按钮 */}
<button
onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
store.state.isEditing && !store.state.fixed
? 'bg-blue-100 text-blue-600'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
>
{store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
</button>
{/* Tab 选择器 */}
<div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
<For each={store.state.cards}>
{(card, index) => (
<button
onClick={() => store.actions.setActiveTab(index())}
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
store.state.activeTab === index()
? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
}`}
>
{card.label || card.name || `Card ${index() + 1}`}
</button>
)}
</For>
</div>
</div>
);
}

34
src/components/md-deck/editor-panel/DataEditorPanel.tsx Normal file
View File

@ -0,0 +1,34 @@
import { For } from 'solid-js';
import type { DeckStore } from '../hooks/deckStore';
export interface DataEditorPanelProps {
activeTab: number;
cards: DeckStore['state']['cards'];
updateCardData: DeckStore['actions']['updateCardData'];
}
/**
* 左侧：CSV 数据编辑面板
*/
export function DataEditorPanel(props: DataEditorPanelProps) {
return (
<div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2">卡牌数据</h3>
<div class="space-y-2 max-h-96 overflow-y-auto">
<For each={Object.keys(props.cards[props.activeTab] || {})}>
{(key) => (
<div>
<label class="block text-sm font-medium text-gray-700">{key}</label>
<textarea
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
rows={3}
value={props.cards[props.activeTab]?.[key] || ''}
onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
/>
</div>
)}
</For>
</div>
</div>
);
}

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

@ -1,42 +1,10 @@
import { For } from 'solid-js';
import type { DeckStore } from './stores/deckStore';
export interface DataEditorPanelProps {
activeTab: number;
cards: DeckStore['state']['cards'];
updateCardData: DeckStore['actions']['updateCardData'];
}
import type { DeckStore } from '../hooks/deckStore';
export interface PropertiesEditorPanelProps {
store: DeckStore;
}
/**
* 左侧：CSV 数据编辑面板
*/
export function DataEditorPanel(props: DataEditorPanelProps) {
return (
<div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2">卡牌数据</h3>
<div class="space-y-2 max-h-96 overflow-y-auto">
<For each={Object.keys(props.cards[props.activeTab] || {})}>
{(key) => (
<div>
<label class="block text-sm font-medium text-gray-700">{key}</label>
<textarea
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
rows={3}
value={props.cards[props.activeTab]?.[key] || ''}
onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
/>
</div>
)}
</For>
</div>
</div>
);
}
/**
* 右侧：卡牌属性编辑面板
*/

3
src/components/md-deck/editor-panel/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { DataEditorPanel } from './DataEditorPanel';
export { PropertiesEditorPanel } from './PropertiesEditorPanel';
export type { DataEditorPanelProps } from './DataEditorPanel';

91
src/components/stores/deckStore.ts → src/components/md-deck/hooks/deckStore.ts
View File

@ -1,7 +1,19 @@
import { createStore } from 'solid-js/store';
import { calculateDimensions } from '../utils/dimensions';
import { calculateDimensions } from './dimensions';
import { loadCSV } from '../../utils/csv-loader';
import { initLayerConfigs } from './layer-parser';
import type { CardData, LayerConfig, Dimensions } from '../types';
/**
* 默认配置常量
*/
export const DECK_DEFAULTS = {
SIZE: '54x86',
GRID: '5x8',
BLEED: '1',
PADDING: '2'
} as const;
export interface DeckState {
// 基本属性
size: string;
@ -30,6 +42,9 @@ export interface DeckState {
selectStart: { x: number; y: number } | null;
selectEnd: { x: number; y: number } | null;
// 加载状态
isLoading: boolean;
// 错误状态
error: string | null;
}
@ -62,13 +77,14 @@ export interface DeckActions {
setSelectEnd: (pos: { x: number; y: number } | null) => void;
cancelSelection: () => void;
// 初始化和数据加载
loadCards: (cards: CardData[]) => void;
// 数据加载
loadCardsFromPath: (path: string, layersStr?: string) => Promise<void>;
setError: (error: string | null) => void;
clearError: () => void;
// 生成代码
generateCode: () => string;
copyCode: () => void;
copyCode: () => Promise<void>;
}
export interface DeckStore {
@ -79,14 +95,17 @@ export interface DeckStore {
/**
* 创建 deck store
*/
export function createDeckStore(): DeckStore {
export function createDeckStore(
initialSrc: string = '',
initialLayers: string = ''
): DeckStore {
const [state, setState] = createStore<DeckState>({
size: '54x86',
grid: '5x8',
bleed: '1',
padding: '2',
size: DECK_DEFAULTS.SIZE,
grid: DECK_DEFAULTS.GRID,
bleed: DECK_DEFAULTS.BLEED,
padding: DECK_DEFAULTS.PADDING,
fixed: false,
src: '',
src: initialSrc,
dimensions: null,
cards: [],
activeTab: 0,
@ -96,6 +115,7 @@ export function createDeckStore(): DeckStore {
isSelecting: false,
selectStart: null,
selectEnd: null,
isLoading: false,
error: null
});
@ -161,17 +181,43 @@ export function createDeckStore(): DeckStore {
setState({ isSelecting: false, selectStart: null, selectEnd: null });
};
// 加载卡牌数据并初始化 dimensions 和 layerConfigs
const loadCards = (cards: CardData[]) => {
if (cards.length === 0) {
setState({ error: 'CSV 文件为空或格式不正确' });
// 加载卡牌数据（核心逻辑）
const loadCardsFromPath = async (path: string, layersStr: string = '') => {
if (!path) {
setState({ error: '未指定 CSV 文件路径' });
return;
}
setState({ cards, activeTab: 0, error: null });
updateDimensions();
setState({ isLoading: true, error: null, src: path });
try {
const data = await loadCSV(path);
if (data.length === 0) {
setState({
error: 'CSV 文件为空或格式不正确',
isLoading: false
});
return;
}
setState({
cards: data,
activeTab: 0,
layerConfigs: initLayerConfigs(data, layersStr),
isLoading: false
});
updateDimensions();
} catch (err) {
setState({
error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
isLoading: false
});
}
};
const setError = (error: string | null) => setState({ error });
const clearError = () => setState({ error: null });
const generateCode = () => {
const layersStr = state.layerConfigs
@ -181,13 +227,15 @@ export function createDeckStore(): DeckStore {
return `:md-deck[${state.src}]{size="${state.size}" grid="${state.grid}" bleed="${state.bleed}" padding="${state.padding}" layers="${layersStr}"}`;
};
const copyCode = () => {
const copyCode = async () => {
const code = generateCode();
navigator.clipboard.writeText(code).then(() => {
try {
await navigator.clipboard.writeText(code);
alert('已复制到剪贴板！');
}).catch(err => {
} catch (err) {
console.error('复制失败:', err);
});
alert('复制失败，请手动复制');
}
};
const actions: DeckActions = {
@ -208,8 +256,9 @@ export function createDeckStore(): DeckStore {
setSelectStart,
setSelectEnd,
cancelSelection,
loadCards,
loadCardsFromPath,
setError,
clearError,
generateCode,
copyCode
};

0
src/components/utils/dimensions.ts → src/components/md-deck/hooks/dimensions.ts
View File

0
src/components/utils/layer-parser.ts → src/components/md-deck/hooks/layer-parser.ts
View File

10
src/components/stores/use-selection.ts → src/components/md-deck/hooks/useCardSelection.ts
View File

@ -2,9 +2,9 @@ import type { DeckStore } from './deckStore';
/**
* 框选相关的操作（已整合到 deckStore）
* 此 hook 保留用于向后兼容或提取特定逻辑
* 此 hook 用于处理卡牌预览区域的鼠标交互
*/
export function useSelection(store: DeckStore) {
export function useCardSelection(store: DeckStore) {
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['state']['dimensions']) => {
if (!dimensions) return { gridX: 1, gridY: 1 };
@ -67,9 +67,9 @@ export function useSelection(store: DeckStore) {
* 计算框选区域的样式
*/
export function getSelectionBoxStyle(
selectStart: { x: number; y: number } | null,
selectEnd: { x: number; y: number } | null,
dims: { gridOriginX: number; gridOriginY: number; cellWidth: number; cellHeight: number } | null
selectStart: { x: number; y: number } | null,
selectEnd: { x: number; y: number } | null,
dims: { gridOriginX: number; gridOriginY: number; cellWidth: number; cellHeight: number } | null
): { left: string; top: string; width: string; height: string } | null {
if (!selectStart || !selectEnd || !dims) return null;

88
src/components/md-deck/index.tsx Normal file
View File

@ -0,0 +1,88 @@
import { customElement, noShadowDOM } from 'solid-element';
import { Show, createEffect, onCleanup } from 'solid-js';
import { resolvePath } from '../utils/path';
import { createDeckStore } from './hooks/deckStore';
import { DeckHeader } from './DeckHeader';
import { DeckContent } from './DeckContent';
import { DataEditorPanel, PropertiesEditorPanel } from './editor-panel';
interface DeckProps {
size?: string;
grid?: string;
bleed?: string;
padding?: string;
layers?: string;
fixed?: boolean | string;
}
customElement<DeckProps>('md-deck', {
size: '54x86',
grid: '5x8',
bleed: '1',
padding: '2',
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) || '');
// 初始化 store 属性
store.actions.setSize(props.size || '54x86');
store.actions.setGrid(props.grid || '5x8');
store.actions.setBleed(props.bleed || '1');
store.actions.setPadding(props.padding || '2');
// 加载 CSV 数据
store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
// 清理函数
onCleanup(() => {
store.actions.clearError();
});
return (
<div class="md-deck 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>
{/* 中间：卡牌预览和控制 */}
<div class="flex-1">
{/* Tab 选择器和编辑按钮 */}
<Show when={store.state.cards.length > 0 && !store.state.error}>
<DeckHeader store={store} />
</Show>
{/* 内容区域：错误/加载/卡牌预览/空状态 */}
<DeckContent store={store} isLoading={store.state.isLoading} />
</div>
{/* 右侧：属性编辑表单 */}
<Show when={store.state.isEditing && !store.state.fixed}>
<PropertiesEditorPanel store={store} />
</Show>
</div>
);
});

0
src/components/types.ts → src/components/md-deck/types.ts
View File