Checkpoint: Tennis Training Hub v1.0 - 完整功能版本：用户名登录、AI训练计划生成、MediaPipe视频姿势识别、击球统计、挥拍速度分析、NTRP自动评分系统、训练进度追踪、视频库管理、AI矫正建议

client/src/pages/Login.tsx

@@ -0,0 +1,102 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { trpc } from "@/lib/trpc";
+import { useLocation } from "wouter";
+import { toast } from "sonner";
+import { Target, Loader2 } from "lucide-react";
+
+export default function Login() {
+  const [username, setUsername] = useState("");
+  const [, setLocation] = useLocation();
+  const loginMutation = trpc.auth.loginWithUsername.useMutation({
+    onSuccess: (data) => {
+      toast.success(data.isNew ? `欢迎加入，${data.user.name}！` : `欢迎回来，${data.user.name}！`);
+      setLocation("/dashboard");
+    },
+    onError: (err) => {
+      toast.error("登录失败: " + err.message);
+    },
+  });
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!username.trim()) {
+      toast.error("请输入用户名");
+      return;
+    }
+    loginMutation.mutate({ username: username.trim() });
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-background to-emerald-50 p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-primary/10 mb-4">
+            <Target className="w-8 h-8 text-primary" />
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight">Tennis Training Hub</h1>
+          <p className="text-muted-foreground mt-2">AI驱动的在家网球训练助手</p>
+        </div>
+
+        <Card className="border-0 shadow-xl">
+          <CardHeader className="text-center pb-2">
+            <CardTitle className="text-xl">开始训练</CardTitle>
+            <CardDescription>输入用户名即可开始使用</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleLogin} className="space-y-4">
+              <div className="space-y-2">
+                <Input
+                  type="text"
+                  placeholder="请输入您的用户名"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  className="h-12 text-base"
+                  autoFocus
+                  maxLength={64}
+                />
+              </div>
+              <Button
+                type="submit"
+                className="w-full h-12 text-base font-medium"
+                disabled={loginMutation.isPending || !username.trim()}
+              >
+                {loginMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    登录中...
+                  </>
+                ) : (
+                  "进入训练"
+                )}
+              </Button>
+            </form>
+
+            <div className="mt-6 pt-4 border-t">
+              <div className="grid grid-cols-3 gap-3 text-center text-xs text-muted-foreground">
+                <div className="flex flex-col items-center gap-1">
+                  <div className="w-8 h-8 rounded-lg bg-primary/5 flex items-center justify-center text-primary font-bold text-sm">AI</div>
+                  <span>姿势识别</span>
+                </div>
+                <div className="flex flex-col items-center gap-1">
+                  <div className="w-8 h-8 rounded-lg bg-primary/5 flex items-center justify-center text-primary font-bold text-sm">📊</div>
+                  <span>训练计划</span>
+                </div>
+                <div className="flex flex-col items-center gap-1">
+                  <div className="w-8 h-8 rounded-lg bg-primary/5 flex items-center justify-center text-primary font-bold text-sm">🎯</div>
+                  <span>NTRP评分</span>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <p className="text-center text-xs text-muted-foreground mt-6">
+          无需注册，输入用户名即可使用全部功能
+        </p>
+      </div>
+    </div>
+  );
+}