0.0.8.1

app/relationship/page.tsx

@@ -42,24 +42,24 @@ export default function RelationshipTestPage() {
     <div className="min-h-screen flex flex-col bg-background">
       <SiteHeader />
       
-      <main className="flex-1 container mx-auto px-4 py-8">
-        <div className="max-w-4xl mx-auto space-y-6">
+      <main className="flex-1 container mx-auto px-4 py-12">
+        <div className="max-w-4xl mx-auto space-y-8">
           {/* 标题 */}
           <div>
-            <h1 className="text-3xl font-bold font-serif mb-2">家族关系计算器</h1>
+            <h1 className="text-3xl font-serif font-bold mb-2">家族关系计算器</h1>
             <p className="text-muted-foreground">
               选择两个家族成员，自动计算他们之间的亲属关系
             </p>
           </div>
 
           {/* 选择成员 */}
-          <Card>
-            <CardHeader>
-              <CardTitle>选择成员</CardTitle>
-              <CardDescription>请选择要计算关系的两个成员</CardDescription>
+          <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
+            <CardHeader className="text-center">
+              <CardTitle className="text-2xl font-serif font-light">选择成员</CardTitle>
+              <CardDescription className="font-light">请选择要计算关系的两个成员</CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <CardContent className="space-y-8">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div className="space-y-2">
                   <label className="text-sm font-medium">成员A</label>
                   <Popover open={openFromCombobox} onOpenChange={setOpenFromCombobox}>
@@ -158,7 +158,7 @@ export default function RelationshipTestPage() {
               <Button 
                 onClick={handleCalculate} 
                 disabled={!fromId || !toId}
-                className="w-full"
+                className="w-full h-12 bg-primary text-primary-foreground hover:bg-primary/90"
               >
                 计算关系
               </Button>
@@ -167,23 +167,23 @@ export default function RelationshipTestPage() {
 
           {/* 计算结果 */}
           {result && (
-            <Card>
-              <CardHeader>
-                <CardTitle>计算结果</CardTitle>
+            <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
+              <CardHeader className="text-center">
+                <CardTitle className="text-2xl font-serif font-light">计算结果</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
-                <div className="flex items-center justify-center gap-4 p-6 bg-muted rounded-lg">
+                <div className="flex items-center justify-center gap-6 p-8 bg-muted/30 rounded-lg">
                   <div className="text-center">
-                    <div className="text-2xl font-bold font-serif mb-1">
+                    <div className="text-2xl font-serif font-light mb-1">
                       {result.from.fullName}
                     </div>
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-sm text-muted-foreground font-light">
                       第{result.from.generation}世
                     </div>
                   </div>
 
                   <div className="flex flex-col items-center gap-2">
-                    <Badge variant="default" className="text-lg px-4 py-2">
+                    <Badge className="text-lg px-6 py-2 bg-primary text-primary-foreground">
                       {result.relationship.term}
                     </Badge>
                     {result.relationship.path && (
@@ -194,19 +194,19 @@ export default function RelationshipTestPage() {
                   </div>
 
                   <div className="text-center">
-                    <div className="text-2xl font-bold font-serif mb-1">
+                    <div className="text-2xl font-serif font-light mb-1">
                       {result.to.fullName}
                     </div>
-                    <div className="text-sm text-muted-foreground">
+                    <div className="text-sm text-muted-foreground font-light">
                       第{result.to.generation}世
                     </div>
                   </div>
                 </div>
 
                 {result.relationship.description && (
-                  <div className="p-4 bg-blue-50 dark:bg-blue-950 rounded-lg">
-                    <div className="text-sm font-medium mb-1">关系说明：</div>
-                    <div className="text-muted-foreground">
+                  <div className="p-6 bg-primary/5 rounded-lg">
+                    <div className="text-sm font-light mb-2 text-center">关系说明</div>
+                    <div className="text-muted-foreground font-light text-center">
                       <strong>{result.from.fullName}</strong> 是 <strong>{result.to.fullName}</strong> 的 <strong className="text-primary">{result.relationship.term}</strong>
                     </div>
                   </div>
@@ -227,9 +227,9 @@ export default function RelationshipTestPage() {
           {(fromId || toId) && (
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               {fromId && (
-                <Card>
+                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                   <CardHeader>
-                    <CardTitle>
+                    <CardTitle className="text-xl font-serif font-light">
                       {treeData.members[fromId]?.fullName} 的直系亲属
                     </CardTitle>
                   </CardHeader>
@@ -311,9 +311,9 @@ export default function RelationshipTestPage() {
               )}
 
               {toId && (
-                <Card>
+                <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
                   <CardHeader>
-                    <CardTitle>
+                    <CardTitle className="text-xl font-serif font-light">
                       {treeData.members[toId]?.fullName} 的直系亲属
                     </CardTitle>
                   </CardHeader>