feat: 新增大量社区功能与基础组件，优化站点整体体验
- 新增事件总线式toast通知系统 - 新增头像、阅读进度、404/500错误页等基础组件 - 重构页脚、布局、分页、点赞按钮等现有组件 - 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能 - 优化登录注册页面样式与交互 - 修复路径类型文件引用，更新站点元信息与字体配置
This commit is contained in:
@@ -2,8 +2,10 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { FileText, MessageCircle } from "lucide-react";
|
||||
import { fetchUserComments, type UserProfile, type UserCommentsResponse } from "@/lib/api";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import { IconComment, IconEye, IconHeart } from "@/components/Icons";
|
||||
|
||||
interface UserProfileClientProps {
|
||||
userId: string;
|
||||
@@ -38,65 +40,85 @@ export default function UserProfileClient({ userId, initialPosts, initialPage }:
|
||||
}
|
||||
};
|
||||
|
||||
const tabBtn = (t: Tab, label: string) => (
|
||||
<button
|
||||
onClick={() => handleTabChange(t)}
|
||||
className="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
style={
|
||||
tab === t
|
||||
? { background: "var(--primary)", color: "white" }
|
||||
: { background: "var(--bg-secondary)", color: "var(--text-secondary)" }
|
||||
}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
const tabBtn = (t: Tab, label: string, count: number, icon: React.ReactNode) => {
|
||||
const active = tab === t;
|
||||
return (
|
||||
<button
|
||||
onClick={() => handleTabChange(t)}
|
||||
className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-full text-sm font-semibold transition-all"
|
||||
style={{
|
||||
background: active ? "var(--panel)" : "transparent",
|
||||
color: active ? "var(--accent)" : "var(--ink-3)",
|
||||
boxShadow: active ? "var(--shadow-sm)" : "none",
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
{label}
|
||||
<span
|
||||
className="text-[11px] font-bold px-1.5 py-px rounded-full"
|
||||
style={{
|
||||
background: active ? "var(--accent-soft)" : "var(--tint)",
|
||||
color: active ? "var(--accent)" : "var(--ink-3)",
|
||||
}}
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex gap-2 mb-5">
|
||||
{tabBtn("posts", `发帖 (${initialPosts.stats.post_count})`)}
|
||||
{tabBtn("comments", `评论 (${initialPosts.stats.comment_count})`)}
|
||||
<div
|
||||
className="inline-flex w-full sm:w-auto items-center gap-1 mb-6 p-1 rounded-full"
|
||||
style={{ background: "var(--panel-2)" }}
|
||||
>
|
||||
{tabBtn("posts", "发帖", initialPosts.stats.post_count, <FileText size={15} />)}
|
||||
{tabBtn("comments", "评论", initialPosts.stats.comment_count, <MessageCircle size={15} />)}
|
||||
</div>
|
||||
|
||||
{tab === "posts" ? (
|
||||
<div className="space-y-3">
|
||||
{initialPosts.posts.map((post) => (
|
||||
<Link
|
||||
key={post.id}
|
||||
href={`/post/${post.id}`}
|
||||
className="block p-4 rounded-lg border hover:shadow-md transition-shadow"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)" }}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span
|
||||
className="text-xs px-2 py-0.5 rounded"
|
||||
style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
|
||||
<div>
|
||||
{initialPosts.posts.length > 0 ? (
|
||||
<div className="panel overflow-hidden p-0">
|
||||
{initialPosts.posts.map((post, i) => (
|
||||
<Link
|
||||
key={post.id}
|
||||
href={`/post/${post.id}`}
|
||||
className="block px-4 sm:px-5 py-4 transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
|
||||
>
|
||||
{post.board.name}
|
||||
</span>
|
||||
{post.pinned > 0 && (
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
|
||||
)}
|
||||
{post.recommended && (
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="font-semibold mb-1 hover:underline" style={{ color: "var(--text)" }}>
|
||||
{post.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
<span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
|
||||
<span>💬 {post.comment_count}</span>
|
||||
<span>👁 {post.view_count}</span>
|
||||
<span>❤️ {post.like_count}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
{initialPosts.posts.length === 0 && (
|
||||
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
|
||||
暂无发帖
|
||||
</p>
|
||||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||||
<span className="chip">{post.board.name}</span>
|
||||
{post.pinned > 0 && <span className="badge-pin">置顶</span>}
|
||||
{post.recommended && <span className="badge-rec">推荐</span>}
|
||||
</div>
|
||||
<h2
|
||||
className="font-semibold mb-2 leading-snug group-hover:text-[var(--accent)]"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{post.title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-4 meta text-[12px]">
|
||||
<span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<IconComment size={12} /> {post.comment_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<IconEye size={12} /> {post.view_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<IconHeart size={12} /> {post.like_count}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="panel text-center py-16 px-6">
|
||||
<FileText size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
|
||||
<p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无发帖</p>
|
||||
</div>
|
||||
)}
|
||||
<Pagination
|
||||
total={initialPosts.posts_total}
|
||||
@@ -106,27 +128,36 @@ export default function UserProfileClient({ userId, initialPosts, initialPage }:
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
{commentLoading ? (
|
||||
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>加载中...</p>
|
||||
<div className="panel text-center py-16">
|
||||
<p className="meta">正在加载评论…</p>
|
||||
</div>
|
||||
) : commentData && commentData.comments.length > 0 ? (
|
||||
<>
|
||||
{commentData.comments.map((c) => (
|
||||
<Link
|
||||
key={c.id}
|
||||
href={`/post/${c.post_id}`}
|
||||
className="block p-4 rounded-lg border hover:shadow-md transition-shadow"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)" }}
|
||||
>
|
||||
<div className="text-sm mb-2" style={{ color: "var(--text-secondary)" }}>
|
||||
评论于 <span className="hover:underline" style={{ color: "var(--primary)" }}>{c.post_title}</span>
|
||||
</div>
|
||||
<p className="line-clamp-2" style={{ color: "var(--text)" }}>{c.content}</p>
|
||||
<div className="text-xs mt-2" style={{ color: "var(--text-secondary)" }}>
|
||||
{new Date(c.created_at).toLocaleString("zh-CN")}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
<div className="panel overflow-hidden p-0">
|
||||
{commentData.comments.map((c, i) => (
|
||||
<Link
|
||||
key={c.id}
|
||||
href={`/post/${c.post_id}`}
|
||||
className="block px-4 sm:px-5 py-4 transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
|
||||
>
|
||||
<div className="meta text-xs mb-2">
|
||||
评论于《<span style={{ color: "var(--accent)" }}>{c.post_title}</span>》
|
||||
</div>
|
||||
<p
|
||||
className="text-[15px] leading-relaxed line-clamp-2"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{c.content}
|
||||
</p>
|
||||
<div className="meta text-xs mt-2">
|
||||
{new Date(c.created_at).toLocaleString("zh-CN")}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
total={commentData.total}
|
||||
page={commentPage}
|
||||
@@ -137,9 +168,10 @@ export default function UserProfileClient({ userId, initialPosts, initialPage }:
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
|
||||
暂无评论
|
||||
</p>
|
||||
<div className="panel text-center py-16 px-6">
|
||||
<MessageCircle size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
|
||||
<p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无评论</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user