From 18461b685cd1eef2be3bf00f076d426edddb445c Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Sun, 8 Mar 2026 03:43:24 +0000
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B4=E5=90=88):=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20React=20Portal=20=E4=BF=AE=E5=A4=8D=E6=A8=A1=E6=80=81?=
 =?UTF-8?q?=E6=A1=86=E5=B1=82=E7=BA=A7=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根本原因：
- 模态框被渲染在 Header 内部
- Header 本身是 z-10 的层叠上下文
- 导致模态框无法超越侧边栏(z-30)和全屏矩阵(z-50)等根级元素

解决方案：
- 使用 createPortal 将模态框直接渲染到 document.body
- 脱离 Header 的层叠上下文限制
- z-[9999]/z-[10000] 现在真正作用在根层级

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 src/components/ChangelogModal.tsx | 9 +++++++--
 src/data/changelog.json           | 7 +++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/ChangelogModal.tsx b/src/components/ChangelogModal.tsx
index b312f90..2965780 100644
--- a/src/components/ChangelogModal.tsx
+++ b/src/components/ChangelogModal.tsx
@@ -1,4 +1,5 @@
 import { motion, AnimatePresence } from 'framer-motion'
+import { createPortal } from 'react-dom'
 import { X, History, CalendarDays, Tag } from 'lucide-react'
 import { changelogEntries } from '@/data'
 import type { ChangelogType } from '@/types/itto'
@@ -59,7 +60,10 @@ function groupByDate(entries: typeof changelogEntries) {
 export function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
   const groupedEntries = groupByDate(changelogEntries)
 
-  return (
+  // 使用 Portal 将模态框渲染到 body，避免被 Header 的层叠上下文限制
+  if (typeof document === 'undefined') return null
+
+  return createPortal(
     <AnimatePresence>
       {isOpen && (
         <>
@@ -171,6 +175,7 @@ export function ChangelogModal({ isOpen, onClose }: ChangelogModalProps) {
           </motion.div>
         </>
       )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body
   )
 }
diff --git a/src/data/changelog.json b/src/data/changelog.json
index 3dae3e8..80705b5 100644
--- a/src/data/changelog.json
+++ b/src/data/changelog.json
@@ -1,5 +1,12 @@
 {
   "changelogEntries": [
+    {
+      "id": "2026-03-08-fix-modal-portal",
+      "date": "2026-03-08",
+      "type": "fix",
+      "title": "使用 React Portal 修复模态框层级遮挡问题",
+      "scope": "整合"
+    },
     {
       "id": "2026-03-08-changelog-group-by-date",
       "date": "2026-03-08",