feat: 新增大量社区功能与基础组件,优化站点整体体验
- 新增事件总线式toast通知系统 - 新增头像、阅读进度、404/500错误页等基础组件 - 重构页脚、布局、分页、点赞按钮等现有组件 - 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能 - 优化登录注册页面样式与交互 - 修复路径类型文件引用,更新站点元信息与字体配置
This commit is contained in:
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { fetchPostDetail, apiMe, apiUpdatePost, type Post, type User } from "@/lib/api";
|
||||
|
||||
interface EditPageProps {
|
||||
@@ -19,13 +21,11 @@ export default function EditPostPage({ params }: EditPageProps) {
|
||||
const [error, setError] = useState("");
|
||||
const [checking, setChecking] = useState(true);
|
||||
|
||||
// params 是 Promise,需要解包
|
||||
const [id, setId] = useState("");
|
||||
useEffect(() => {
|
||||
params.then((p) => setId(p.id));
|
||||
}, [params]);
|
||||
|
||||
// 加载帖子 + 校验权限
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
Promise.all([fetchPostDetail(id), apiMe()])
|
||||
@@ -36,7 +36,6 @@ export default function EditPostPage({ params }: EditPageProps) {
|
||||
setTags(postData.post.tags || "");
|
||||
const u = meData.user;
|
||||
setUser(u || null);
|
||||
// 非作者且非管理员 → 跳转
|
||||
if (!u || (u.id !== postData.post.user.id && u.role !== "admin")) {
|
||||
router.push(`/post/${id}`);
|
||||
}
|
||||
@@ -64,8 +63,8 @@ export default function EditPostPage({ params }: EditPageProps) {
|
||||
|
||||
if (checking) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto mt-12 text-center" style={{ color: "var(--text-secondary)" }}>
|
||||
加载中...
|
||||
<div className="max-w-3xl mx-auto text-center py-20">
|
||||
<p className="meta">正在加载帖子…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -74,59 +73,71 @@ export default function EditPostPage({ params }: EditPageProps) {
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<h1 className="text-2xl font-bold mb-6">编辑帖子</h1>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{error && (
|
||||
<div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm">{error}</div>
|
||||
)}
|
||||
<nav className="meta mb-5 flex items-center gap-1.5 flex-wrap text-[13px]">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
|
||||
<ChevronRight size={13} />
|
||||
<Link href={`/post/${post.id}`} className="hover:text-[var(--accent)] transition-colors truncate max-w-[12rem]">
|
||||
帖子详情
|
||||
</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--accent)" }}>编辑</span>
|
||||
</nav>
|
||||
|
||||
<div className="mb-7">
|
||||
<h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
编辑帖子
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="panel p-5 sm:p-7 space-y-5">
|
||||
{error && <div className="alert-error">{error}</div>}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标题</label>
|
||||
<label className="field-label">标题</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
maxLength={256}
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标签(逗号分隔,可选)</label>
|
||||
<label className="field-label">标签(逗号分隔,可选)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={tags}
|
||||
onChange={(e) => setTags(e.target.value)}
|
||||
placeholder="例如:技术,Go"
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
placeholder="Go, PostgreSQL, 架构"
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>内容(支持 Markdown)</label>
|
||||
<label className="field-label">正文(支持 Markdown)</label>
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
required
|
||||
rows={12}
|
||||
className="w-full px-3 py-2 rounded-lg border resize-y font-mono"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
rows={14}
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !title.trim() || !content.trim()}
|
||||
className="px-6 py-2 rounded-lg text-white disabled:opacity-50"
|
||||
style={{ background: "var(--primary)" }}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{loading ? "保存中..." : "保存修改"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push(`/post/${post.id}`)}
|
||||
className="px-6 py-2 rounded-lg"
|
||||
style={{ background: "var(--bg-secondary)", color: "var(--text)" }}
|
||||
className="btn btn-line"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user