0.2.0.2

app/help/page.tsx

@@ -7,21 +7,22 @@ import { BookOpen, Users, Network, Settings, Shield, FileText } from "lucide-rea
 
 export default function HelpPage() {
   return (
-    <div className="min-h-screen flex flex-col bg-background">
+    <div className="h-screen flex flex-col bg-background">
       <SiteHeader />
       
-      <main className="flex-1 container mx-auto px-4 py-8">
-        <div className="max-w-5xl mx-auto space-y-8">
-          {/* 标题 */}
-          <div>
-            <h1 className="text-3xl font-serif font-bold mb-2">使用帮助</h1>
-            <p className="text-muted-foreground">
-              华夏家谱系统使用指南
-            </p>
-          </div>
+      <main className="flex-1 overflow-y-auto">
+        <div className="container mx-auto px-4 py-8">
+          <div className="max-w-5xl mx-auto space-y-8">
+            {/* 标题 */}
+            <div>
+              <h1 className="text-3xl font-serif font-bold mb-2">使用帮助</h1>
+              <p className="text-muted-foreground">
+                华夏家谱系统使用指南
+              </p>
+            </div>
 
-          <Tabs defaultValue="guide" className="space-y-6">
-            <TabsList className="grid w-full grid-cols-3">
+            <Tabs defaultValue="guide" className="space-y-6">
+              <TabsList className="grid w-full grid-cols-3">
               <TabsTrigger value="guide">快速入门</TabsTrigger>
               <TabsTrigger value="roles">角色权限</TabsTrigger>
               <TabsTrigger value="features">功能说明</TabsTrigger>
@@ -288,7 +289,8 @@ export default function HelpPage() {
                 </Card>
               </div>
             </TabsContent>
-          </Tabs>
+            </Tabs>
+          </div>
         </div>
       </main>
     </div>

app/members/page.tsx

@@ -381,10 +381,10 @@ export default function MembersPage() {
   }
 
   return (
-    <div className="min-h-screen bg-background flex flex-col font-sans">
+    <div className="h-screen bg-background flex flex-col font-sans overflow-hidden">
       <SiteHeader />
-      <main className="container mx-auto py-8 px-4 md:px-6 flex-1 flex flex-col">
-        <div className="flex flex-col gap-6 mb-8">
+      <main className="container mx-auto py-8 px-4 md:px-6 flex-1 flex flex-col overflow-hidden">
+        <div className="flex flex-col gap-6 mb-8 flex-shrink-0">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4">
             <h1 className="text-3xl font-serif font-bold">家族成员列表</h1>
             <div className="flex items-center gap-2 w-full md:w-auto">
@@ -510,7 +510,7 @@ export default function MembersPage() {
             </div>
           </div>
         ) : (
-          <div className="space-y-8">
+          <div className="space-y-8 overflow-y-auto flex-1 pb-8">
             {membersByGeneration.map(({ generation, members, actualCount }) => (
               <div key={generation}>
                 <div className="flex items-center gap-3 mb-4">

app/page.tsx

@@ -344,11 +344,11 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-background font-sans">
+    <div className="flex h-screen flex-col bg-background font-sans overflow-hidden">
       <SiteHeader />
 
-      <main className="flex-1 container mx-auto py-8 px-4 md:px-6">
-        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8">
+      <main className="flex-1 container mx-auto py-8 px-4 md:px-6 flex flex-col overflow-hidden">
+        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-8 flex-shrink-0">
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-3xl font-serif font-bold text-foreground">
@@ -387,7 +387,7 @@ export default function DashboardPage() {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8 flex-shrink-0">
           {/* 第一个卡片：家族成员 + 在世/已故 */}
           <Link href={currentTree?.id ? `/members?treeId=${currentTree.id}` : '#'}>
             <Card className="relative overflow-hidden border border-border/50 shadow-sm bg-gradient-to-br from-card to-card/50 backdrop-blur transition-all hover:shadow-lg hover:border-primary/30 group cursor-pointer">
@@ -464,8 +464,8 @@ export default function DashboardPage() {
           </Link>
         </div>
 
-        <Tabs defaultValue="recent" className="w-full">
-          <div className="flex items-center justify-between mb-4">
+        <Tabs defaultValue="recent" className="w-full flex-1 flex flex-col overflow-hidden">
+          <div className="flex items-center justify-between mb-4 flex-shrink-0">
             <TabsList className="bg-muted/50">
               <TabsTrigger value="recent">最近更新</TabsTrigger>
               <TabsTrigger value="anniversaries">近期纪念日</TabsTrigger>
@@ -479,7 +479,7 @@ export default function DashboardPage() {
             </Link>
           </div>
 
-          <TabsContent value="recent" className="mt-0">
+          <TabsContent value="recent" className="mt-0 flex-1 overflow-y-auto">
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               <div className="space-y-6">
                 <Card className="border-none shadow-sm bg-primary/5">
@@ -644,7 +644,7 @@ export default function DashboardPage() {
           </TabsContent>
 
           {/* 近期纪念日标签页 */}
-          <TabsContent value="anniversaries" className="mt-0">
+          <TabsContent value="anniversaries" className="mt-0 flex-1 overflow-y-auto">
             <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
               <CardHeader>
                 <CardTitle className="font-serif">近期纪念日</CardTitle>
@@ -823,12 +823,12 @@ export default function DashboardPage() {
           </TabsContent>
 
           {/* 统计图表标签页 */}
-          <TabsContent value="statistics" className="mt-0">
+          <TabsContent value="statistics" className="mt-0 flex-1 overflow-y-auto">
             <StatisticsCharts members={Object.values(treeData.members)} />
           </TabsContent>
 
           {/* 迁徙记录标签页 */}
-          <TabsContent value="migration" className="mt-0">
+          <TabsContent value="migration" className="mt-0 flex-1 overflow-y-auto">
             <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
               <CardHeader>
                 <CardTitle className="font-serif">家族迁徙记录</CardTitle>

app/relationship/page.tsx

@@ -75,21 +75,22 @@ export default function RelationshipTestPage() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-background">
+    <div className="h-screen flex flex-col bg-background">
       <SiteHeader />
       
-      <main className="flex-1 container mx-auto px-4 py-6">
-        <div className="max-w-4xl mx-auto space-y-6">
-          {/* 标题 */}
-          <div>
-            <h1 className="text-2xl font-serif font-bold mb-1">家族关系计算器</h1>
-            <p className="text-sm text-muted-foreground">
-              选择两个家族成员，自动计算他们之间的亲属关系
-            </p>
-          </div>
+      <main className="flex-1 overflow-y-auto">
+        <div className="container mx-auto px-4 py-6">
+          <div className="max-w-4xl mx-auto space-y-6">
+            {/* 标题 */}
+            <div>
+              <h1 className="text-2xl font-serif font-bold mb-1">家族关系计算器</h1>
+              <p className="text-sm text-muted-foreground">
+                选择两个家族成员，自动计算他们之间的亲属关系
+              </p>
+            </div>
 
-          {/* 选择成员 */}
-          <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
+            {/* 选择成员 */}
+            <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
             <CardHeader className="text-center pb-4">
               <CardTitle className="text-xl font-serif font-light">选择成员</CardTitle>
               <CardDescription className="text-sm font-light">请选择要计算关系的两个成员</CardDescription>
@@ -501,6 +502,7 @@ export default function RelationshipTestPage() {
               )}
             </div>
           )}
+          </div>
         </div>
       </main>
     </div>

app/settings/page.tsx

@@ -101,10 +101,10 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-background flex flex-col font-sans">
+    <div className="h-screen bg-background flex flex-col font-sans overflow-hidden">
       <SiteHeader />
-      <main className="container mx-auto py-8 px-4 md:px-6 flex-1 max-w-6xl">
-        <div className="flex items-center justify-between mb-8">
+      <main className="container mx-auto py-8 px-4 md:px-6 flex-1 max-w-6xl flex flex-col overflow-hidden">
+        <div className="flex items-center justify-between mb-8 flex-shrink-0">
           <h1 className="text-3xl font-serif font-bold">系统设置</h1>
           {userProfile?.isAdmin && (
             <Link href="/admin">
@@ -116,7 +116,7 @@ export default function SettingsPage() {
           )}
         </div>
 
-        <div className="space-y-6">
+        <div className="space-y-6 overflow-y-auto flex-1 pb-8">
           {/* 用户信息和密码修改 - 两列布局 */}
           {session && (
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">

app/timeline/page.tsx

@@ -520,16 +520,16 @@ export default function TimelinePage() {
   }
 
   return (
-    <div className="min-h-screen bg-background flex flex-col font-sans">
+    <div className="h-screen bg-background flex flex-col font-sans overflow-hidden">
       <SiteHeader />
-      <main className="container mx-auto py-8 px-4 md:px-6 flex-1">
-        <div className="mb-8">
+      <main className="container mx-auto py-8 px-4 md:px-6 flex-1 flex flex-col overflow-hidden">
+        <div className="mb-8 flex-shrink-0">
           <h1 className="text-3xl font-serif font-bold mb-2">家族历史</h1>
           <p className="text-muted-foreground">纵览家族发展的时间脉络与迁徙足迹。</p>
         </div>
 
-        <Tabs defaultValue="timeline" className="w-full">
-          <TabsList className="mb-6 w-full md:w-auto">
+        <Tabs defaultValue="timeline" className="w-full flex-1 flex flex-col overflow-hidden">
+          <TabsList className="mb-6 w-full md:w-auto flex-shrink-0">
             <TabsTrigger value="timeline" className="flex items-center gap-2">
               <Clock className="h-4 w-4" /> 时间轴
             </TabsTrigger>
@@ -538,7 +538,7 @@ export default function TimelinePage() {
             </TabsTrigger>
           </TabsList>
 
-          <TabsContent value="timeline">
+          <TabsContent value="timeline" className="flex-1 overflow-y-auto">
             <Card className="border-none shadow-none bg-transparent">
               <CardContent className="p-0">
                 <div className="relative border-l-2 border-primary/20 ml-6 md:ml-12 space-y-8 py-4">
@@ -655,7 +655,7 @@ export default function TimelinePage() {
             </Card>
           </TabsContent>
 
-          <TabsContent value="migration">
+          <TabsContent value="migration" className="flex-1 overflow-y-auto">
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
               <Card>
                 <CardHeader>

app/tree/page.tsx

@@ -101,6 +101,13 @@ export default function TreePage() {
     setIsDragging(false)
   }
 
+  // 鼠标滚轮缩放
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault()
+    const delta = e.deltaY > 0 ? -0.1 : 0.1
+    setScale((s) => Math.min(Math.max(s + delta, 0.1), 2))
+  }
+
   // 处理成员选择（关系查询模式）
   const handleMemberClick = (memberId: string) => {
     if (selectedMembers.length === 0) {
@@ -433,7 +440,7 @@ export default function TreePage() {
       </div>
 
       {viewMode === 'traditional' ? (
-        <div className="flex-1 relative">
+        <div className="flex-1 relative min-h-0">
           {/* Toolbar */}
           <div className="absolute top-4 left-4 z-20 flex flex-col gap-2 bg-background/80 backdrop-blur p-2 rounded-lg border shadow-sm">
             <Button variant="outline" size="icon" onClick={() => setScale((s) => Math.min(s + 0.1, 2))}>
@@ -459,6 +466,7 @@ export default function TreePage() {
             onMouseMove={handleMouseMove}
             onMouseUp={handleMouseUp}
             onMouseLeave={handleMouseUp}
+            onWheel={handleWheel}
           >
             <div
               style={{
@@ -478,7 +486,7 @@ export default function TreePage() {
           </div>
         </div>
       ) : (
-        <div className="flex-1 relative">
+        <div className="flex-1 relative min-h-0">
           {/* 统一的控制按钮 */}
           <div className="absolute top-4 left-4 z-20 flex flex-col gap-2 bg-background/80 backdrop-blur p-2 rounded-lg border shadow-sm">
             <Button variant="outline" size="icon" onClick={() => d3ChartRef.current?.expandAll()} title="展开全部">