From e22a8da12a3d0f344a53c7f88d31db9ac6d82ae8 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Fri, 27 Feb 2026 17:02:38 +0800
Subject: [PATCH] fix: print paging

---
 src/App.tsx                             |  2 +-
 src/components/md-deck/CardPreview.tsx  |  2 +-
 src/components/md-deck/PrintPreview.tsx |  8 ++++----
 src/styles.css                          | 11 +++++++----
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 770d619..761b516 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -42,7 +42,7 @@ const App: Component = () => {
           <h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
         </div>
       </header>
-      <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64">
+      <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64 print:p-0">
         <Article src={currentPath()} />
       </main>
     </div>
diff --git a/src/components/md-deck/CardPreview.tsx b/src/components/md-deck/CardPreview.tsx
index b654510..3edc37a 100644
--- a/src/components/md-deck/CardPreview.tsx
+++ b/src/components/md-deck/CardPreview.tsx
@@ -36,7 +36,7 @@ export function CardPreview(props: CardPreviewProps) {
   let cardRef: HTMLDivElement | undefined;
 
   return (
-    <div class="flex justify-center">
+    <div class="flex justify-center overflow-hidden">
       <Show when={store.state.activeTab < store.state.cards.length}>
         <div
           ref={cardRef}
diff --git a/src/components/md-deck/PrintPreview.tsx b/src/components/md-deck/PrintPreview.tsx
index 7949dac..e576504 100644
--- a/src/components/md-deck/PrintPreview.tsx
+++ b/src/components/md-deck/PrintPreview.tsx
@@ -159,8 +159,8 @@ export function PrintPreview(props: PrintPreviewProps) {
   const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
 
   return (
-    <div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
-      <div class="min-h-screen py-20 px-4">
+    <div class="fixed inset-0 bg-black/50 z-50 overflow-auto print:overflow-visible print:absolute">
+      <div class="min-h-screen py-20 px-4 print:p-0">
         {/* 打印预览控制栏 */}
         <div class="fixed top-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mt-4 px-4 py-1 flex items-center justify-between gap-4">
           <div class="flex items-center gap-4">
@@ -185,11 +185,11 @@ export function PrintPreview(props: PrintPreviewProps) {
         </div>
 
         {/* A4 纸张预览 */}
-        <div class="flex flex-col items-center gap-8">
+        <div class="flex flex-col items-center gap-8 print-root">
           <For each={pages()}>
             {(page) => (
               <div
-                class="bg-white shadow-xl print:shadow-none print:w-full in-print"
+                class="bg-white shadow-xl print:shadow-none print:w-full"
                 style={{
                   width: `${A4_WIDTH}mm`,
                   height: `${A4_HEIGHT}mm`
diff --git a/src/styles.css b/src/styles.css
index e09368d..3377b3d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -7,13 +7,16 @@
     visibility: hidden;
   }
   
-  body .in-print {
+  article > div > *:nth-child(1) {
+    margin-top: 0;
+  }
+  
+  body .print-root {
     visibility: visible;
     -webkit-print-color-adjust: exact !important;
     print-color-adjust: exact !important;
-    position: absolute;
-    top: 0;
-    left: 0;
+    width: 100vw;
+    gap: 0;
   }
   
   @page {