fix(整合): 使用 React Portal 修复模态框层级遮挡问题

根本原因：
- 模态框被渲染在 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

@@ -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
   )
 }

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",