0.0.8.1

app/trees/new/page.tsx

@@ -83,51 +83,36 @@ export default function NewTreePage() {
   return (
     <div className="min-h-screen bg-background flex flex-col">
       <SiteHeader />
-      <main className="container mx-auto py-8 px-4 md:px-6 flex-1">
+      <main className="container mx-auto py-12 px-4 md:px-6 flex-1">
         <div className="max-w-2xl mx-auto">
-          <div className="mb-6">
-            <Button
-              variant="ghost"
-              size="sm"
-              asChild
-              className="mb-4"
-            >
-              <Link href="/">
-                <ArrowLeft className="h-4 w-4 mr-2" />
-                返回首页
-              </Link>
-            </Button>
-            <h1 className="text-3xl font-serif font-bold mb-2">创建新家族树</h1>
-            <p className="text-muted-foreground">
-              开始记录您的家族历史和传承
+          <div className="mb-8 text-center">
+            <h1 className="text-4xl font-serif font-light mb-3 tracking-wide">创建家族树</h1>
+            <p className="text-muted-foreground font-light">
+              记录家族历史，传承家族文化
             </p>
           </div>
 
-          <Card>
+          <Card className="border-none shadow-sm bg-card/50 backdrop-blur">
             <form onSubmit={handleSubmit}>
-              <CardHeader>
-                <div className="flex items-center gap-3">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-                    <TreePine className="h-6 w-6" />
-                  </div>
-                  <div>
-                    <CardTitle>家族树信息</CardTitle>
-                    <CardDescription>
-                      填写基本信息以创建您的家族树
-                    </CardDescription>
-                  </div>
+              <CardHeader className="text-center pb-8">
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4 mx-auto">
+                  <TreePine className="h-8 w-8" strokeWidth={1.5} />
                 </div>
+                <CardTitle className="text-2xl font-serif font-light">基本信息</CardTitle>
+                <CardDescription className="font-light">
+                  填写家族树的名称和描述
+                </CardDescription>
               </CardHeader>
 
-              <CardContent className="space-y-6">
+              <CardContent className="space-y-8 px-8">
                 {error && (
                   <Alert variant="destructive">
                     <AlertDescription>{error}</AlertDescription>
                   </Alert>
                 )}
 
-                <div className="space-y-2">
-                  <Label htmlFor="name">
+                <div className="space-y-3">
+                  <Label htmlFor="name" className="text-base font-normal">
                     家族树名称 <span className="text-destructive">*</span>
                   </Label>
                   <Input
@@ -137,14 +122,15 @@ export default function NewTreePage() {
                     onChange={(e) => setName(e.target.value)}
                     maxLength={50}
                     required
+                    className="h-12"
                   />
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-xs text-muted-foreground font-light">
                     建议使用姓氏+家族/宗谱等命名
                   </p>
                 </div>
 
-                <div className="space-y-2">
-                  <Label htmlFor="description">家族树描述（可选）</Label>
+                <div className="space-y-3">
+                  <Label htmlFor="description" className="text-base font-normal">家族树描述（可选）</Label>
                   <Textarea
                     id="description"
                     placeholder="简要描述您的家族历史、祖籍地等信息"
@@ -152,36 +138,34 @@ export default function NewTreePage() {
                     onChange={(e) => setDescription(e.target.value)}
                     rows={4}
                     maxLength={500}
+                    className="resize-none"
                   />
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-xs text-muted-foreground font-light">
                     {description.length}/500 字
                   </p>
                 </div>
 
-                <div className="rounded-lg border bg-muted/50 p-4">
-                  <h3 className="font-medium mb-2">💡 温馨提示</h3>
-                  <ul className="text-sm text-muted-foreground space-y-1">
-                    <li>• 创建后可以随时修改家族树信息</li>
-                    <li>• 您可以邀请家族成员共同编辑</li>
-                    <li>• 支持导入已有的家族数据</li>
-                  </ul>
+                <div className="rounded-lg bg-muted/30 p-6 space-y-2">
+                  <p className="text-sm text-muted-foreground font-light leading-relaxed">
+                    创建后可以随时修改信息、邀请家族成员协作编辑、导入已有数据
+                  </p>
                 </div>
               </CardContent>
 
-              <CardFooter className="flex gap-3">
+              <CardFooter className="flex gap-4 px-8 pt-8 pb-8">
                 <Button
                   type="button"
                   variant="outline"
                   onClick={() => router.back()}
                   disabled={loading}
-                  className="flex-1"
+                  className="flex-1 h-12"
                 >
-                  取消
+                  返回
                 </Button>
                 <Button
                   type="submit"
                   disabled={loading || !name.trim()}
-                  className="flex-1"
+                  className="flex-1 h-12 bg-primary text-primary-foreground hover:bg-primary/90"
                 >
                   {loading ? "创建中..." : "创建家族树"}
                 </Button>