Reverse the Code that Caused the PDF Rendering Error

ReportEngine/renderers/pdf_layout_optimizer.py

@@ -832,91 +832,69 @@ p {{
     margin-bottom: {cfg.page.section_spacing}px;
 }}
 
-/* KPI卡片优化 - WeasyPrint不支持CSS Grid，使用Flex实现等宽排布 */
+/* KPI卡片优化 - 防止溢出 */
 .kpi-grid {{
-    display: flex !important;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-auto-rows: minmax(auto, 1fr);
+    grid-auto-flow: row dense;
     gap: {cfg.grid.gap}px;
     margin: 20px 0;
     align-items: stretch;
-    page-break-inside: avoid !important;
-    break-inside: avoid !important;
-    page-break-after: avoid !important;
-    page-break-before: avoid !important;
-    break-before: avoid !important;
-    break-after: avoid !important;
 }}
 
 .kpi-grid .kpi-card {{
-    box-sizing: border-box;
+    grid-column: span 2;
-    flex: 0 1 calc(33.333% - {cfg.grid.gap}px) !important;
-    max-width: calc(33.333% - {cfg.grid.gap}px) !important;
 }}
 
 /* 单条/双条/三条的特殊列数 */
+.chapter .kpi-grid[data-kpi-count="1"] {{
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-flow: row;
+}}
 .chapter .kpi-grid[data-kpi-count="1"] .kpi-card {{
-    flex-basis: 100% !important;
+    grid-column: span 1;
-    max-width: 100% !important;
+}}
+.chapter .kpi-grid[data-kpi-count="2"] {{
+    grid-template-columns: repeat(4, minmax(0, 1fr));
 }}
 .chapter .kpi-grid[data-kpi-count="2"] .kpi-card {{
-    flex-basis: calc(50% - {cfg.grid.gap}px) !important;
+    grid-column: span 2;
-    max-width: calc(50% - {cfg.grid.gap}px) !important;
 }}
-.chapter .kpi-grid[data-kpi-count="3"] .kpi-card {{
+.chapter .kpi-grid[data-kpi-count="3"] {{
-    flex-basis: calc(33.333% - {cfg.grid.gap}px) !important;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
-    max-width: calc(33.333% - {cfg.grid.gap}px) !important;
 }}
 
 /* 四条时采用2x2排布 */
-.chapter .kpi-grid[data-kpi-count="4"] .kpi-card {{
-    flex-basis: calc(50% - {cfg.grid.gap}px) !important;
-    max-width: calc(50% - {cfg.grid.gap}px) !important;
-}}
 .chapter .kpi-grid[data-kpi-count="4"] {{
-    page-break-before: auto !important;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
-    break-before: auto !important;
+}}
-    page-break-inside: avoid !important;
+.chapter .kpi-grid[data-kpi-count="4"] .kpi-card {{
-    margin-top: 8px !important;
+    grid-column: span 2;
 }}
 
-/* hr 与紧随的KPI/正文保持同页，减少多余空白 */
+/* 五条及以上默认三列（6栅格，每卡占2） */
-hr {{
+.chapter .kpi-grid[data-kpi-count="5"],
-    page-break-before: avoid !important;
+.chapter .kpi-grid[data-kpi-count="6"],
-    page-break-after: avoid !important;
+.chapter .kpi-grid[data-kpi-count="7"],
-    break-before: avoid !important;
+.chapter .kpi-grid[data-kpi-count="8"],
-    break-after: avoid !important;
+.chapter .kpi-grid[data-kpi-count="9"],
-    margin: 12px 0 !important;
+.chapter .kpi-grid[data-kpi-count="10"],
-}}
+.chapter .kpi-grid[data-kpi-count="11"],
-
+.chapter .kpi-grid[data-kpi-count="12"],
-/* 五条及以上默认三列（6个自动两行3+3） */
+.chapter .kpi-grid[data-kpi-count="13"],
-.chapter .kpi-grid[data-kpi-count="5"] .kpi-card,
+.chapter .kpi-grid[data-kpi-count="14"],
-.chapter .kpi-grid[data-kpi-count="6"] .kpi-card,
+.chapter .kpi-grid[data-kpi-count="15"],
-.chapter .kpi-grid[data-kpi-count="7"] .kpi-card,
+.chapter .kpi-grid[data-kpi-count="16"] {{
-.chapter .kpi-grid[data-kpi-count="8"] .kpi-card,
+    grid-template-columns: repeat(6, minmax(0, 1fr));
-.chapter .kpi-grid[data-kpi-count="9"] .kpi-card,
-.chapter .kpi-grid[data-kpi-count="10"] .kpi-card,
-.chapter .kpi-grid[data-kpi-count="11"] .kpi-card,
-.chapter .kpi-grid[data-kpi-count="12"] .kpi-card,
-.chapter .kpi-grid[data-kpi-count="13"] .kpi-card,
-.chapter .kpi-grid[data-kpi-count="14"] .kpi-card,
-.chapter .kpi-grid[data-kpi-count="15"] .kpi-card,
-.chapter .kpi-grid[data-kpi-count="16"] .kpi-card {{
-    flex-basis: calc(33.333% - {cfg.grid.gap}px) !important;
-    max-width: calc(33.333% - {cfg.grid.gap}px) !important;
-}}
-
-/* 5个时最后两张拉宽为两列 */
-.chapter .kpi-grid[data-kpi-count="5"] .kpi-card:nth-last-child(-n+2) {{
-    flex-basis: calc(50% - {cfg.grid.gap}px) !important;
-    max-width: calc(50% - {cfg.grid.gap}px) !important;
 }}
 
 /* 余数为2时，最后两张平分全宽 */
+.chapter .kpi-grid[data-kpi-count="5"] .kpi-card:nth-last-child(-n+2),
 .chapter .kpi-grid[data-kpi-count="8"] .kpi-card:nth-last-child(-n+2),
 .chapter .kpi-grid[data-kpi-count="11"] .kpi-card:nth-last-child(-n+2),
 .chapter .kpi-grid[data-kpi-count="14"] .kpi-card:nth-last-child(-n+2) {{
-    flex-basis: calc(50% - {cfg.grid.gap}px) !important;
+    grid-column: span 3;
-    max-width: calc(50% - {cfg.grid.gap}px) !important;
 }}
 
 /* 余数为1时，最后一张占满全宽 */
@@ -924,8 +902,7 @@ hr {{
 .chapter .kpi-grid[data-kpi-count="10"] .kpi-card:last-child,
 .chapter .kpi-grid[data-kpi-count="13"] .kpi-card:last-child,
 .chapter .kpi-grid[data-kpi-count="16"] .kpi-card:last-child {{
-    flex-basis: 100% !important;
+    grid-column: 1 / -1;
-    max-width: 100% !important;
 }}
 
 .kpi-card {{