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

fix: details

This commit is contained in:
hypercross 2026-02-27 15:46:42 +08:00
parent 0e2f214552
commit aa0ba2a551
5 changed files with 40 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,6 +4,7 @@ import { getLayerStyle } from './hooks/dimensions';
import { useCardSelection } from './hooks/useCardSelection'; import { useCardSelection } from './hooks/useCardSelection';
import { getSelectionBoxStyle } from './hooks/useCardSelection'; import { getSelectionBoxStyle } from './hooks/useCardSelection';
import type { DeckStore } from './hooks/deckStore'; import type { DeckStore } from './hooks/deckStore';
import type { CardData } from '../types';
export interface CardPreviewProps { export interface CardPreviewProps {
store: DeckStore; store: DeckStore;
@ -12,7 +13,7 @@ export interface CardPreviewProps {
/** /**
* 渲染 layer 内容（提取为纯工具函数） * 渲染 layer 内容（提取为纯工具函数）
*/ */
function renderLayerContent(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string { function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
const content = cardData[layer.prop] || ''; const content = cardData[layer.prop] || '';
return marked.parse(content) as string; return marked.parse(content) as string;
} }

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

@ -13,7 +13,7 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
return ( return (
<div class="w-64 flex-shrink-0"> <div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2">图层</h3> <h3 class="font-bold mb-2 mt-0">图层</h3>
<div class="space-y-2"> <div class="space-y-2">
<For each={store.state.layerConfigs}> <For each={store.state.layerConfigs}>

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

@ -12,7 +12,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
return ( return (
<div class="w-64 flex-shrink-0"> <div class="w-64 flex-shrink-0">
<h3 class="font-bold mb-2">卡牌属性</h3> <h3 class="font-bold mb-2 mt-0">卡牌属性</h3>
<div class="space-y-3"> <div class="space-y-3">
<div> <div>

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

@ -251,7 +251,7 @@ export function createDeckStore(
.filter(l => l.visible) .filter(l => l.visible)
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`) .map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
.join(' '); .join(' ');
return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" fontSize="${state.fontSize}" layers="${layersStr}"}`; return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" font-size="${state.fontSize}" layers="${layersStr}"}`;
}; };
const copyCode = async () => { const copyCode = async () => {

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

@ -1,5 +1,5 @@
import { customElement, noShadowDOM } from 'solid-element'; import { customElement, noShadowDOM } from 'solid-element';
import { Show, createEffect, onCleanup } from 'solid-js'; import { Show, onCleanup } from 'solid-js';
import { resolvePath } from '../utils/path'; import { resolvePath } from '../utils/path';
import { createDeckStore } from './hooks/deckStore'; import { createDeckStore } from './hooks/deckStore';
import { DeckHeader } from './DeckHeader'; import { DeckHeader } from './DeckHeader';
@ -85,8 +85,12 @@ customElement<DeckProps>('md-deck', {
} else { } else {
store.actions.setPadding(props.padding ?? 2); store.actions.setPadding(props.padding ?? 2);
} }
store.actions.setFontSize(props.fontSize ?? 3); if (typeof props.fontSize === 'string') {
store.actions.setFontSize(Number(props.fontSize));
} else {
store.actions.setFontSize(props.fontSize ?? 3);
}
// 加载 CSV 数据 // 加载 CSV 数据
store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || ''); store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
@ -97,39 +101,39 @@ customElement<DeckProps>('md-deck', {
}); });
return ( return (
<div class="md-deck flex gap-4"> <div class="md-deck mb-4">
{/* 左侧：CSV 数据编辑 */} {/* Tab 选择器和编辑按钮 */}
{/*<Show when={store.state.isEditing && !store.state.fixed}>*/} <Show when={store.state.cards.length > 0 && !store.state.error}>
{/* <DataEditorPanel*/} <DeckHeader store={store} />
{/* 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> </Show>
{/* 中间：卡牌预览和控制 */} <div class="flex gap-4">
<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} /> {/* 左侧：CSV 数据编辑 */}
</div> {/*<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} /> <Show when={store.state.isEditing && !store.state.fixed}>
</div> <div class="flex-1">
</Show> <LayerEditorPanel store={store} />
</div>
</Show>
</div>
</div> </div>
); );
}); });