55 行
1.4 KiB
TypeScript
55 行
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { apiFetch } from "@/lib/api";
|
|
import { readToken } from "@/lib/auth";
|
|
|
|
type Me = {
|
|
id: number;
|
|
username: string;
|
|
rating: number;
|
|
created_at: number;
|
|
};
|
|
|
|
export default function MePage() {
|
|
const [data, setData] = useState<Me | null>(null);
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const load = async () => {
|
|
setLoading(true);
|
|
setError("");
|
|
try {
|
|
const token = readToken();
|
|
if (!token) throw new Error("请先登录");
|
|
const d = await apiFetch<Me>("/api/v1/me", {}, token);
|
|
setData(d);
|
|
} catch (e: unknown) {
|
|
setError(String(e));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
void load();
|
|
}, []);
|
|
|
|
return (
|
|
<main className="mx-auto max-w-3xl px-6 py-8">
|
|
<h1 className="text-2xl font-semibold">我的信息</h1>
|
|
{loading && <p className="mt-3 text-sm text-zinc-500">加载中...</p>}
|
|
{error && <p className="mt-3 text-sm text-red-600">{error}</p>}
|
|
|
|
{data && (
|
|
<div className="mt-4 rounded-xl border bg-white p-4 text-sm">
|
|
<p>ID: {data.id}</p>
|
|
<p>用户名: {data.username}</p>
|
|
<p>Rating: {data.rating}</p>
|
|
<p>创建时间: {new Date(data.created_at * 1000).toLocaleString()}</p>
|
|
</div>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|