refactor: break down & clean up
This commit is contained in:
parent
8ddc2a672a
commit
c6580b7c69
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,42 +1,10 @@
|
||||||
import { For } from 'solid-js';
|
import { For } from 'solid-js';
|
||||||
import type { DeckStore } from './stores/deckStore';
|
import type { DeckStore } from '../hooks/deckStore';
|
||||||
|
|
||||||
export interface DataEditorPanelProps {
|
|
||||||
activeTab: number;
|
|
||||||
cards: DeckStore['state']['cards'];
|
|
||||||
updateCardData: DeckStore['actions']['updateCardData'];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PropertiesEditorPanelProps {
|
export interface PropertiesEditorPanelProps {
|
||||||
store: DeckStore;
|
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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 右侧：卡牌属性编辑面板
|
* 右侧：卡牌属性编辑面板
|
||||||
*/
|
*/
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
export { DataEditorPanel } from './DataEditorPanel';
|
||||||
|
export { PropertiesEditorPanel } from './PropertiesEditorPanel';
|
||||||
|
export type { DataEditorPanelProps } from './DataEditorPanel';
|
||||||
|
|
@ -1,7 +1,19 @@
|
||||||
import { createStore } from 'solid-js/store';
|
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';
|
import type { CardData, LayerConfig, Dimensions } from '../types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 默认配置常量
|
||||||
|
*/
|
||||||
|
export const DECK_DEFAULTS = {
|
||||||
|
SIZE: '54x86',
|
||||||
|
GRID: '5x8',
|
||||||
|
BLEED: '1',
|
||||||
|
PADDING: '2'
|
||||||
|
} as const;
|
||||||
|
|
||||||
export interface DeckState {
|
export interface DeckState {
|
||||||
// 基本属性
|
// 基本属性
|
||||||
size: string;
|
size: string;
|
||||||
|
|
@ -30,6 +42,9 @@ export interface DeckState {
|
||||||
selectStart: { x: number; y: number } | null;
|
selectStart: { x: number; y: number } | null;
|
||||||
selectEnd: { x: number; y: number } | null;
|
selectEnd: { x: number; y: number } | null;
|
||||||
|
|
||||||
|
// 加载状态
|
||||||
|
isLoading: boolean;
|
||||||
|
|
||||||
// 错误状态
|
// 错误状态
|
||||||
error: string | null;
|
error: string | null;
|
||||||
}
|
}
|
||||||
|
|
@ -62,13 +77,14 @@ export interface DeckActions {
|
||||||
setSelectEnd: (pos: { x: number; y: number } | null) => void;
|
setSelectEnd: (pos: { x: number; y: number } | null) => void;
|
||||||
cancelSelection: () => void;
|
cancelSelection: () => void;
|
||||||
|
|
||||||
// 初始化和数据加载
|
// 数据加载
|
||||||
loadCards: (cards: CardData[]) => void;
|
loadCardsFromPath: (path: string, layersStr?: string) => Promise<void>;
|
||||||
setError: (error: string | null) => void;
|
setError: (error: string | null) => void;
|
||||||
|
clearError: () => void;
|
||||||
|
|
||||||
// 生成代码
|
// 生成代码
|
||||||
generateCode: () => string;
|
generateCode: () => string;
|
||||||
copyCode: () => void;
|
copyCode: () => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DeckStore {
|
export interface DeckStore {
|
||||||
|
|
@ -79,14 +95,17 @@ export interface DeckStore {
|
||||||
/**
|
/**
|
||||||
* 创建 deck store
|
* 创建 deck store
|
||||||
*/
|
*/
|
||||||
export function createDeckStore(): DeckStore {
|
export function createDeckStore(
|
||||||
|
initialSrc: string = '',
|
||||||
|
initialLayers: string = ''
|
||||||
|
): DeckStore {
|
||||||
const [state, setState] = createStore<DeckState>({
|
const [state, setState] = createStore<DeckState>({
|
||||||
size: '54x86',
|
size: DECK_DEFAULTS.SIZE,
|
||||||
grid: '5x8',
|
grid: DECK_DEFAULTS.GRID,
|
||||||
bleed: '1',
|
bleed: DECK_DEFAULTS.BLEED,
|
||||||
padding: '2',
|
padding: DECK_DEFAULTS.PADDING,
|
||||||
fixed: false,
|
fixed: false,
|
||||||
src: '',
|
src: initialSrc,
|
||||||
dimensions: null,
|
dimensions: null,
|
||||||
cards: [],
|
cards: [],
|
||||||
activeTab: 0,
|
activeTab: 0,
|
||||||
|
|
@ -96,6 +115,7 @@ export function createDeckStore(): DeckStore {
|
||||||
isSelecting: false,
|
isSelecting: false,
|
||||||
selectStart: null,
|
selectStart: null,
|
||||||
selectEnd: null,
|
selectEnd: null,
|
||||||
|
isLoading: false,
|
||||||
error: null
|
error: null
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -161,17 +181,43 @@ export function createDeckStore(): DeckStore {
|
||||||
setState({ isSelecting: false, selectStart: null, selectEnd: null });
|
setState({ isSelecting: false, selectStart: null, selectEnd: null });
|
||||||
};
|
};
|
||||||
|
|
||||||
// 加载卡牌数据并初始化 dimensions 和 layerConfigs
|
// 加载卡牌数据（核心逻辑）
|
||||||
const loadCards = (cards: CardData[]) => {
|
const loadCardsFromPath = async (path: string, layersStr: string = '') => {
|
||||||
if (cards.length === 0) {
|
if (!path) {
|
||||||
setState({ error: 'CSV 文件为空或格式不正确' });
|
setState({ error: '未指定 CSV 文件路径' });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setState({ cards, activeTab: 0, error: null });
|
|
||||||
|
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();
|
updateDimensions();
|
||||||
|
} catch (err) {
|
||||||
|
setState({
|
||||||
|
error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const setError = (error: string | null) => setState({ error });
|
const setError = (error: string | null) => setState({ error });
|
||||||
|
const clearError = () => setState({ error: null });
|
||||||
|
|
||||||
const generateCode = () => {
|
const generateCode = () => {
|
||||||
const layersStr = state.layerConfigs
|
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}"}`;
|
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();
|
const code = generateCode();
|
||||||
navigator.clipboard.writeText(code).then(() => {
|
try {
|
||||||
|
await navigator.clipboard.writeText(code);
|
||||||
alert('已复制到剪贴板！');
|
alert('已复制到剪贴板！');
|
||||||
}).catch(err => {
|
} catch (err) {
|
||||||
console.error('复制失败:', err);
|
console.error('复制失败:', err);
|
||||||
});
|
alert('复制失败，请手动复制');
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const actions: DeckActions = {
|
const actions: DeckActions = {
|
||||||
|
|
@ -208,8 +256,9 @@ export function createDeckStore(): DeckStore {
|
||||||
setSelectStart,
|
setSelectStart,
|
||||||
setSelectEnd,
|
setSelectEnd,
|
||||||
cancelSelection,
|
cancelSelection,
|
||||||
loadCards,
|
loadCardsFromPath,
|
||||||
setError,
|
setError,
|
||||||
|
clearError,
|
||||||
generateCode,
|
generateCode,
|
||||||
copyCode
|
copyCode
|
||||||
};
|
};
|
||||||
|
|
@ -2,9 +2,9 @@ import type { DeckStore } from './deckStore';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 框选相关的操作（已整合到 deckStore）
|
* 框选相关的操作（已整合到 deckStore）
|
||||||
* 此 hook 保留用于向后兼容或提取特定逻辑
|
* 此 hook 用于处理卡牌预览区域的鼠标交互
|
||||||
*/
|
*/
|
||||||
export function useSelection(store: DeckStore) {
|
export function useCardSelection(store: DeckStore) {
|
||||||
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['state']['dimensions']) => {
|
const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['state']['dimensions']) => {
|
||||||
if (!dimensions) return { gridX: 1, gridY: 1 };
|
if (!dimensions) return { gridX: 1, gridY: 1 };
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue