feat: Phase 1-3 全部完成 — 沙盒增强、学情分析、学习路径

2026-05-18 09:48:51 +08:00
commit 11bb86854c
277 changed files with 37755 additions and 0 deletions
@@ -0,0 +1,122 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { apiFetch } from '../../../lib/auth';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface Profile {
+  nickname: string;
+  email: string;
+  phone: string;
+  avatar: string;
+}
+
+export default function SettingsPage() {
+  const router = useRouter();
+  const [profile, setProfile] = useState<Profile>({ nickname: '', email: '', phone: '', avatar: '' });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [nickname, setNickname] = useState('');
+  const [email, setEmail] = useState('');
+
+  useEffect(() => {
+    loadProfile();
+  }, []);
+
+  async function loadProfile() {
+    try {
+      const res = await apiFetch('/dashboard/profile');
+      const data = await res.json();
+      setProfile(data);
+      setNickname(data.nickname || '');
+      setEmail(data.email || '');
+    } catch (e) { console.error(e) }
+    setLoading(false);
+  }
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      await apiFetch('/dashboard/profile', {
+        method: 'PUT',
+        body: JSON.stringify({ nickname, email }),
+      });
+      alert('保存成功');
+    } catch (e) { console.error(e) }
+    setSaving(false);
+  }
+
+  async function handleLogout() {
+    localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
+    router.push('/auth');
+  }
+
+  if (loading) return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Skeleton className="h-8 w-48 mb-6" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <Skeleton className="h-24 rounded-xl" />
+        <Skeleton className="h-24 rounded-xl" />
+        <Skeleton className="h-24 rounded-xl" />
+      </div>
+      <Skeleton className="h-64 w-full rounded-xl" />
+    </div>
+  );
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="mb-8">
+        <button onClick={() => router.back()} className="text-sm text-muted-foreground hover:text-foreground mb-4 block">&larr; 返回</button>
+        <h1 className="text-3xl font-bold text-foreground">设置</h1>
+        <p className="mt-2 text-muted-foreground">管理你的账号偏好</p>
+      </div>
+
+      <form onSubmit={handleSave} className="bg-card rounded-2xl border border-border p-6 space-y-6">
+        <h2 className="text-lg font-semibold text-foreground">个人信息</h2>
+        
+        <div>
+          <label className="block text-sm font-medium text-foreground mb-1.5">昵称</label>
+          <input
+            type="text"
+            value={nickname}
+            onChange={e => setNickname(e.target.value)}
+            className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-foreground mb-1.5">邮箱</label>
+          <input
+            type="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            className="w-full px-4 py-2.5 border border-border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
+          />
+        </div>
+
+        <div className="flex gap-3">
+          <button
+            type="submit"
+            disabled={saving}
+            className="px-6 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-medium hover:bg-brand-700 disabled:opacity-50"
+          >
+            {saving ? '保存中...' : '保存修改'}
+          </button>
+        </div>
+      </form>
+
+      <div className="bg-card rounded-2xl border border-border p-6 mt-6">
+        <h2 className="text-lg font-semibold text-foreground mb-4">账号安全</h2>
+        <button
+          onClick={handleLogout}
+          className="px-6 py-2.5 border border-red-200 text-red-600 rounded-xl text-sm font-medium hover:bg-red-50"
+        >
+          退出登录
+        </button>
+      </div>
+    </div>
+  );
+}