0.3.1.2

app/timeline/page.tsx

@@ -2,7 +2,7 @@
 import { SiteHeader } from "@/components/site-header"
 import { useFamily } from "@/context/family-context"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { ChineseCard, ChineseCardContent, ChineseCardHeader, ChineseCardTitle } from "@/components/ui/chinese-card"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Clock, Map as MapIcon, ArrowRight, Calendar, User, Loader2 } from 'lucide-react'
 import { useMemo, useEffect, useState, useRef, useCallback } from 'react'
@@ -601,8 +601,8 @@ export default function TimelinePage() {
           </TabsList>
 
           <TabsContent value="timeline" className="flex-1 overflow-y-auto">
-            <Card className="border-none shadow-none bg-transparent">
-              <CardContent className="p-0">
+            <ChineseCard variant="scroll" className="border-none shadow-none bg-transparent">
+              <ChineseCardContent className="p-0">
                 <div className="relative border-l-2 border-primary/20 ml-6 md:ml-12 space-y-8 py-4">
                   {events.map((event, idx) => (
                     <div key={idx} className="relative pl-8 md:pl-12 group">
@@ -713,17 +713,17 @@ export default function TimelinePage() {
                     </div>
                   )}
                 </div>
-              </CardContent>
-            </Card>
+              </ChineseCardContent>
+            </ChineseCard>
           </TabsContent>
 
           <TabsContent value="migration" className="flex-1 overflow-y-auto">
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-              <Card>
-                <CardHeader>
-                  <CardTitle className="font-serif">迁徙记录</CardTitle>
-                </CardHeader>
-                <CardContent>
+              <ChineseCard variant="bamboo" className="shadow-sm">
+                <ChineseCardHeader>
+                  <ChineseCardTitle className="font-serif">迁徙记录</ChineseCardTitle>
+                </ChineseCardHeader>
+                <ChineseCardContent>
                   <ScrollArea className="h-[600px] pr-4">
                     <div className="space-y-6">
                       {migrations.map((mig, idx) => (
@@ -770,14 +770,14 @@ export default function TimelinePage() {
                       )}
                     </div>
                   </ScrollArea>
-                </CardContent>
-              </Card>
+                </ChineseCardContent>
+              </ChineseCard>
 
-              <Card className="bg-gradient-to-br from-primary/5 via-background to-secondary/5 border-primary/20">
-                <CardHeader>
-                  <CardTitle className="font-serif">迁徙路径图</CardTitle>
-                </CardHeader>
-                <CardContent>
+              <ChineseCard variant="default" cornerOrnament className="bg-gradient-to-br from-primary/5 via-background to-secondary/5 border-primary/20 shadow-sm">
+                <ChineseCardHeader>
+                  <ChineseCardTitle className="font-serif">迁徙路径图</ChineseCardTitle>
+                </ChineseCardHeader>
+                <ChineseCardContent>
                   <div className="relative h-[600px] overflow-hidden rounded-lg bg-background/50 backdrop-blur border border-border/50">
                     {!mapLoaded ? (
                       <div className="flex items-center justify-center h-full text-muted-foreground">
@@ -793,8 +793,8 @@ export default function TimelinePage() {
                       />
                     )}
                   </div>
-                </CardContent>
-              </Card>
+                </ChineseCardContent>
+              </ChineseCard>
             </div>
           </TabsContent>
         </Tabs>