fix: details
This commit is contained in:
parent
0e2f214552
commit
aa0ba2a551
|
|
@ -4,6 +4,7 @@ import { getLayerStyle } from './hooks/dimensions';
|
|||
import { useCardSelection } from './hooks/useCardSelection';
|
||||
import { getSelectionBoxStyle } from './hooks/useCardSelection';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
import type { CardData } from '../types';
|
||||
|
||||
export interface CardPreviewProps {
|
||||
store: DeckStore;
|
||||
|
|
@ -12,7 +13,7 @@ export interface CardPreviewProps {
|
|||
/**
|
||||
* 渲染 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] || '';
|
||||
return marked.parse(content) as string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
|
|||
|
||||
return (
|
||||
<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">
|
||||
<For each={store.state.layerConfigs}>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
|||
|
||||
return (
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -251,7 +251,7 @@ export function createDeckStore(
|
|||
.filter(l => l.visible)
|
||||
.map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
|
||||
.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 () => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
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 { createDeckStore } from './hooks/deckStore';
|
||||
import { DeckHeader } from './DeckHeader';
|
||||
|
|
@ -85,8 +85,12 @@ customElement<DeckProps>('md-deck', {
|
|||
} else {
|
||||
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 数据
|
||||
store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
|
||||
|
|
@ -97,39 +101,39 @@ customElement<DeckProps>('md-deck', {
|
|||
});
|
||||
|
||||
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>*/}
|
||||
|
||||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||
<div class="flex-1">
|
||||
<PropertiesEditorPanel store={store} />
|
||||
</div>
|
||||
<div class="md-deck mb-4">
|
||||
{/* Tab 选择器和编辑按钮 */}
|
||||
<Show when={store.state.cards.length > 0 && !store.state.error}>
|
||||
<DeckHeader store={store} />
|
||||
</Show>
|
||||
|
||||
{/* 中间：卡牌预览和控制 */}
|
||||
<div class="flex-1">
|
||||
{/* Tab 选择器和编辑按钮 */}
|
||||
<Show when={store.state.cards.length > 0 && !store.state.error}>
|
||||
<DeckHeader store={store} />
|
||||
</Show>
|
||||
<div class="flex gap-4">
|
||||
|
||||
{/* 内容区域：错误/加载/卡牌预览/空状态 */}
|
||||
<DeckContent store={store} isLoading={store.state.isLoading} />
|
||||
</div>
|
||||
{/* 左侧：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>
|
||||
|
||||
{/* 右侧：属性/图层编辑面板 */}
|
||||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||
<div class="flex-1">
|
||||
<LayerEditorPanel 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>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue