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

fix: plt/print preview window stacking

This commit is contained in:
hyper 2026-03-31 17:28:46 +08:00
parent 246d983ad2
commit 18ea01b904
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/md-deck/PltPreview.tsx
View File

@ -1,4 +1,5 @@
import { createSignal, For, Show, createMemo } from 'solid-js'; import { createSignal, For, Show, createMemo } from 'solid-js';
import { Portal } from 'solid-js/web';
import { parsePlt, extractCutPaths } from '../../plotcutter/parser'; import { parsePlt, extractCutPaths } from '../../plotcutter/parser';
import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout'; import { generateTravelPaths, travelPathsToSvg } from '../../plotcutter/layout';
import type { CardPath } from '../../plotcutter/types'; import type { CardPath } from '../../plotcutter/types';
@ -91,10 +92,11 @@ export function PltPreview(props: PltPreviewProps) {
}; };
return ( return (
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto"> <Portal>
<div class="min-h-screen py-20 px-4"> <div class="fixed inset-0 bg-black/50 z-[60] overflow-auto">
{/* 头部控制栏 */} <div class="min-h-screen py-20 px-4">
<div class="fixed top-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-3 flex items-center gap-4 z-50"> {/* 头部控制栏 */}
<div class="fixed top-4 left-1/2 -translate-x-1/2 bg-white shadow-lg rounded-lg px-4 py-3 flex items-center gap-4 z-50">
<h2 class="text-base font-bold m-0">PLT 切割预览</h2> <h2 class="text-base font-bold m-0">PLT 切割预览</h2>
<div class="flex items-center gap-2 flex-1"> <div class="flex items-center gap-2 flex-1">
<Show when={parsedData().width > 0}> <Show when={parsedData().width > 0}>
@ -224,5 +226,6 @@ export function PltPreview(props: PltPreviewProps) {
</div> </div>
</div> </div>
</div> </div>
</Portal>
); );
} }

29
src/components/md-deck/PrintPreview.tsx
View File

@ -1,4 +1,5 @@
import { createSignal, For, Show } from 'solid-js'; import { createSignal, For, Show } from 'solid-js';
import { Portal } from 'solid-js/web';
import type { DeckStore } from './hooks/deckStore'; import type { DeckStore } from './hooks/deckStore';
import { usePageLayout } from './hooks/usePageLayout'; import { usePageLayout } from './hooks/usePageLayout';
import { usePDFExport, type ExportOptions } from './hooks/usePDFExport'; import { usePDFExport, type ExportOptions } from './hooks/usePDFExport';
@ -60,21 +61,22 @@ export function PrintPreview(props: PrintPreviewProps) {
}; };
return ( return (
<Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />}> <Portal>
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto"> <Show when={!showPltPreview()} fallback={<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />}>
<div class="min-h-screen py-20 px-4"> <div class="fixed inset-0 bg-black/50 z-[60] overflow-auto">
<PrintPreviewHeader <div class="min-h-screen py-20 px-4">
store={store} <PrintPreviewHeader
pageCount={pages().length} store={store}
onExport={handleExport} pageCount={pages().length}
onOpenPltPreview={handleOpenPltPreview} onExport={handleExport}
onClose={props.onClose} onOpenPltPreview={handleOpenPltPreview}
/> onClose={props.onClose}
/>
<PrintPreviewFooter store={store} /> <PrintPreviewFooter store={store} />
<div class="flex flex-col items-center gap-8"> <div class="flex flex-col items-center gap-8">
<For each={pages()}> <For each={pages()}>
{(page) => { {(page) => {
// 根据页面类型（正面/背面）决定使用哪个图层配置 // 根据页面类型（正面/背面）决定使用哪个图层配置
const isFrontPage = page.cards[0]?.side !== 'back'; const isFrontPage = page.cards[0]?.side !== 'back';
@ -197,5 +199,6 @@ export function PrintPreview(props: PrintPreviewProps) {
</div> </div>
</div> </div>
</Show> </Show>
</Portal>
); );
} }