feat: 新增站点公告系统与多项体验优化
此提交完成了以下核心功能与优化： 1. 新增站点公告全流程支持：包含公告模型、CRUD接口、管理后台页面、公告详情页与首页展示 2. 实现评论楼层化与回复嵌套：重构评论系统为树状结构，支持回复评论与层级限制 3. 添加用户在线状态追踪：异步更新用户最后活跃时间并做SQL限频 4. 优化用户体验：移动端浮动操作条、统一板块标签样式、用户页签到积分展示、注册即登录优化 5. 其他细节优化：SEO站点地图新增公告页、评论分页与统计、登录/注册表单增强等
This commit is contained in:
106
frontend/app/settings/PasswordForm.tsx
Normal file
106
frontend/app/settings/PasswordForm.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { apiChangePassword } from "@/lib/api";
|
||||
|
||||
/**
|
||||
* 修改密码表单：提交成功后后端已递增 TokenVersion 并清除全部登录 cookie，
|
||||
* 刷新 layout 使 Header 回到游客态，随后跳转登录页重新登录。
|
||||
*/
|
||||
export default function PasswordForm() {
|
||||
const router = useRouter();
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
setError("新密码至少 6 位");
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError("两次输入的新密码不一致");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const res = await apiChangePassword(oldPassword, newPassword);
|
||||
if (res.message) {
|
||||
setSuccess(true);
|
||||
// 后端已使全部 token 失效并清 cookie，刷新 layout 让 Header 回到游客态
|
||||
router.refresh();
|
||||
setTimeout(() => router.push("/login"), 1500);
|
||||
} else {
|
||||
setError(res.error || "修改失败");
|
||||
}
|
||||
} catch {
|
||||
setError("网络错误，请重试");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>修改密码</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="panel p-5 sm:p-6 space-y-4">
|
||||
{success && <div className="alert-ok" role="status">密码修改成功，正在跳转登录页...</div>}
|
||||
{error && <div className="alert-error" role="alert">{error}</div>}
|
||||
<div>
|
||||
<label className="field-label" htmlFor="pwd-old">当前密码</label>
|
||||
<input
|
||||
id="pwd-old"
|
||||
type="password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
required
|
||||
autoComplete="current-password"
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label" htmlFor="pwd-new">新密码（至少 6 位）</label>
|
||||
<input
|
||||
id="pwd-new"
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
autoComplete="new-password"
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label" htmlFor="pwd-confirm">确认新密码</label>
|
||||
<input
|
||||
id="pwd-confirm"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
autoComplete="new-password"
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || success}
|
||||
className="btn btn-primary w-full justify-center mt-2"
|
||||
>
|
||||
{submitting ? "提交中..." : "修改密码"}
|
||||
</button>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,71 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { redirect } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { cookies } from "next/headers";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { apiChangePassword, apiMe, type User } from "@/lib/api";
|
||||
import { authCookieHeader } from "@/lib/cookies";
|
||||
import { getMeCached } from "@/lib/serverData";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import PasswordForm from "./PasswordForm";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const router = useRouter();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
apiMe()
|
||||
.then((res) => {
|
||||
if (!res.user) {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
setUser(res.user);
|
||||
})
|
||||
.catch(() => router.push("/login"));
|
||||
}, [router]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (newPassword.length < 6) {
|
||||
setError("新密码至少 6 位");
|
||||
return;
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
setError("两次输入的新密码不一致");
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const res = await apiChangePassword(oldPassword, newPassword);
|
||||
if (res.message) {
|
||||
setSuccess(true);
|
||||
// 后端已使全部 token 失效并清 cookie，刷新 layout 让 Header 回到游客态
|
||||
router.refresh();
|
||||
setTimeout(() => router.push("/login"), 1500);
|
||||
} else {
|
||||
setError(res.error || "修改失败");
|
||||
}
|
||||
} catch (e) {
|
||||
setError("网络错误，请重试");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// SSR 直出账号信息：未登录直接跳登录页，登录后 F5 不再有"正在加载…"闪动
|
||||
export default async function SettingsPage() {
|
||||
const cookie = authCookieHeader(await cookies());
|
||||
const me = await getMeCached(cookie || undefined);
|
||||
const user = me.user;
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="max-w-md mx-auto text-center py-20">
|
||||
<p className="meta">正在加载…</p>
|
||||
</div>
|
||||
);
|
||||
redirect(`/login?redirect=${encodeURIComponent(`/settings`)}`);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -92,51 +40,7 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>修改密码</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="panel p-5 sm:p-6 space-y-4">
|
||||
{success && <div className="alert-ok">密码修改成功，正在跳转登录页...</div>}
|
||||
{error && <div className="alert-error">{error}</div>}
|
||||
<div>
|
||||
<label className="field-label">当前密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
required
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">新密码（至少 6 位）</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="field-label">确认新密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || success}
|
||||
className="btn btn-primary w-full justify-center mt-2"
|
||||
>
|
||||
{submitting ? "提交中..." : "修改密码"}
|
||||
</button>
|
||||
</form>
|
||||
<PasswordForm />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user