feat: 新增帖子最后回复展示、文章目录与三栏布局，优化点赞按钮与导航栏
这是一次包含多个功能升级的提交： 1. 后端新增批量查询帖子最后回复的逻辑，在前端帖子列表项中展示最后回复信息 2. 重构点赞按钮，新增文章样式变体并统一样式逻辑 3. 重写工作台导航栏，精简默认展示的菜单选项 4. 新增文章目录组件，为帖子详情页添加文章目录导航 5. 重构帖子详情页，实现三栏响应式布局，新增板块卡片、作者信息栏与同板块热议推荐 6. 重构帖子列表行组件，优化排版与信息展示逻辑 7. 重构帖子管理操作组件，使用下拉菜单整合所有管理功能 8. 新增全局通用的滚动容器与点赞按钮样式
This commit is contained in:
@@ -43,23 +43,100 @@ func toPostListItems(posts []model.Post) []PostListItem {
|
||||
return items
|
||||
}
|
||||
|
||||
// LastReplyUser 最后回复人（仅列表展示所需字段）
|
||||
type LastReplyUser struct {
|
||||
ID uint `json:"id"`
|
||||
Username string `json:"username"`
|
||||
Nickname string `json:"nickname"`
|
||||
Avatar string `json:"avatar"`
|
||||
}
|
||||
|
||||
// LastReplyInfo 帖子最后一条已发布评论的摘要
|
||||
type LastReplyInfo struct {
|
||||
User LastReplyUser `json:"user"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
}
|
||||
|
||||
// PostListItem 帖子列表项（不含正文）
|
||||
type PostListItem struct {
|
||||
ID uint `json:"id"`
|
||||
BoardID uint `json:"board_id"`
|
||||
UserID uint `json:"user_id"`
|
||||
Title string `json:"title"`
|
||||
Tags string `json:"tags"`
|
||||
PostType string `json:"post_type"`
|
||||
Pinned int `json:"pinned"`
|
||||
Recommended bool `json:"recommended"`
|
||||
LikeCount int `json:"like_count"`
|
||||
ViewCount int `json:"view_count"`
|
||||
CommentCount int `json:"comment_count"`
|
||||
Liked bool `json:"liked"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
Board model.Board `json:"board"`
|
||||
User model.User `json:"user"`
|
||||
ID uint `json:"id"`
|
||||
BoardID uint `json:"board_id"`
|
||||
UserID uint `json:"user_id"`
|
||||
Title string `json:"title"`
|
||||
Tags string `json:"tags"`
|
||||
PostType string `json:"post_type"`
|
||||
Pinned int `json:"pinned"`
|
||||
Recommended bool `json:"recommended"`
|
||||
LikeCount int `json:"like_count"`
|
||||
ViewCount int `json:"view_count"`
|
||||
CommentCount int `json:"comment_count"`
|
||||
Liked bool `json:"liked"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
LastReply *LastReplyInfo `json:"last_reply,omitempty"`
|
||||
Board model.Board `json:"board"`
|
||||
User model.User `json:"user"`
|
||||
}
|
||||
|
||||
// fillLastReply 批量填充每帖最后一条已发布评论（发帖人+时间），
|
||||
// 单条 SQL 取每帖最新评论，再批量取用户，避免 N+1
|
||||
func (s *PostService) fillLastReply(items []PostListItem) {
|
||||
if len(items) == 0 {
|
||||
return
|
||||
}
|
||||
postIDs := make([]uint, 0, len(items))
|
||||
for _, it := range items {
|
||||
postIDs = append(postIDs, it.ID)
|
||||
}
|
||||
|
||||
type latestRow struct {
|
||||
PostID uint
|
||||
UserID uint
|
||||
CreatedAt time.Time
|
||||
}
|
||||
var rows []latestRow
|
||||
if err := s.db.Raw(`
|
||||
SELECT DISTINCT ON (post_id) post_id, user_id, created_at
|
||||
FROM comments
|
||||
WHERE post_id IN ? AND status = 'published' AND deleted_at IS NULL
|
||||
ORDER BY post_id, created_at DESC`, postIDs).Scan(&rows).Error; err != nil || len(rows) == 0 {
|
||||
return
|
||||
}
|
||||
|
||||
userIDs := make([]uint, 0, len(rows))
|
||||
seen := map[uint]bool{}
|
||||
for _, r := range rows {
|
||||
if !seen[r.UserID] {
|
||||
seen[r.UserID] = true
|
||||
userIDs = append(userIDs, r.UserID)
|
||||
}
|
||||
}
|
||||
var users []model.User
|
||||
if err := s.db.Select("id, username, nickname, avatar").Where("id IN ?", userIDs).Find(&users).Error; err != nil {
|
||||
return
|
||||
}
|
||||
userMap := make(map[uint]model.User, len(users))
|
||||
for _, u := range users {
|
||||
userMap[u.ID] = u
|
||||
}
|
||||
|
||||
replyMap := make(map[uint]latestRow, len(rows))
|
||||
for _, r := range rows {
|
||||
replyMap[r.PostID] = r
|
||||
}
|
||||
for i := range items {
|
||||
r, ok := replyMap[items[i].ID]
|
||||
if !ok {
|
||||
continue
|
||||
}
|
||||
u, ok := userMap[r.UserID]
|
||||
if !ok {
|
||||
continue
|
||||
}
|
||||
items[i].LastReply = &LastReplyInfo{
|
||||
User: LastReplyUser{ID: u.ID, Username: u.Username, Nickname: u.Nickname, Avatar: u.Avatar},
|
||||
CreatedAt: r.CreatedAt,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List 获取帖子列表
|
||||
@@ -104,7 +181,9 @@ func (s *PostService) List(q PostListQuery) ([]PostListItem, int64, error) {
|
||||
return nil, 0, err
|
||||
}
|
||||
|
||||
return toPostListItems(posts), total, nil
|
||||
items := toPostListItems(posts)
|
||||
s.fillLastReply(items)
|
||||
return items, total, nil
|
||||
}
|
||||
|
||||
// ListByUser 获取指定用户发布的帖子（公开已发布）
|
||||
@@ -126,7 +205,9 @@ func (s *PostService) ListByUser(userID uint, page, size int) ([]PostListItem, i
|
||||
Preload("Board").Preload("User").Find(&posts).Error; err != nil {
|
||||
return nil, 0, err
|
||||
}
|
||||
return toPostListItems(posts), total, nil
|
||||
items := toPostListItems(posts)
|
||||
s.fillLastReply(items)
|
||||
return items, total, nil
|
||||
}
|
||||
|
||||
// GetAuthorID 获取帖子作者 ID（不增加浏览量）
|
||||
|
||||
@@ -253,6 +253,54 @@ h1, h2, h3, h4 {
|
||||
|
||||
.btn-sm { padding: 7px 14px; font-size: 13px; }
|
||||
|
||||
/* ----- 点赞按钮：未赞描边态，hover 同色系填充；已赞为浅底实心态 ----- */
|
||||
.j13-like {
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink-2);
|
||||
background: var(--panel);
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
color 0.15s ease,
|
||||
background-color 0.15s ease,
|
||||
box-shadow 0.15s ease;
|
||||
}
|
||||
.j13-like svg {
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.j13-like:hover:not(:disabled),
|
||||
.j13-like.is-liked {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
/* 已赞态 hover 再加深一档，并给同色系投影；心形轻微放大（不改变布局） */
|
||||
.j13-like:hover:not(:disabled) {
|
||||
box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent);
|
||||
}
|
||||
.j13-like.is-liked:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--accent) 17%, transparent);
|
||||
}
|
||||
.j13-like:hover:not(:disabled) svg {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
.j13-like:active:not(:disabled) svg {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.j13-like:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.j13-like,
|
||||
.j13-like svg {
|
||||
transition: none;
|
||||
}
|
||||
.j13-like:hover:not(:disabled) svg,
|
||||
.j13-like:active:not(:disabled) svg {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----- 表单 ----- */
|
||||
.field-label {
|
||||
display: block;
|
||||
@@ -570,6 +618,26 @@ h1, h2, h3, h4 {
|
||||
border-color: var(--nav-active-line);
|
||||
color: var(--nav-active-ink);
|
||||
}
|
||||
|
||||
/* 帖子详情侧栏内的滚动承载区（目录 / 作者帖子列表）：
|
||||
配合栏容器的 max-height 独立滚动，细滚动条、不产生滚动链 */
|
||||
.j13-rail-scroll {
|
||||
min-height: 3.5rem;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.j13-rail-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.j13-rail-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--line-2);
|
||||
border-radius: 99px;
|
||||
border: none;
|
||||
}
|
||||
.j13-rail-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
|
||||
@@ -2,15 +2,34 @@ import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { cookies } from "next/headers";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { fetchPostDetail, fetchComments } from "@/lib/api";
|
||||
import {
|
||||
Clock,
|
||||
Heart,
|
||||
MessageCircle,
|
||||
Flame,
|
||||
Layers,
|
||||
User,
|
||||
PenLine,
|
||||
ArrowRight,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
fetchPostDetail,
|
||||
fetchComments,
|
||||
fetchPosts,
|
||||
fetchUserProfile,
|
||||
type UserProfile,
|
||||
type PostListItem,
|
||||
type Board,
|
||||
} from "@/lib/api";
|
||||
import { authCookieHeader } from "@/lib/cookies";
|
||||
import CommentSection from "@/components/CommentSection";
|
||||
import PostActions from "@/components/PostActions";
|
||||
import LikeButton from "@/components/LikeButton";
|
||||
import ReadingProgress from "@/components/ReadingProgress";
|
||||
import PostToc, { type TocItem } from "@/components/PostToc";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import { IconComment, IconEye } from "@/components/Icons";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
@@ -34,11 +53,285 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 Markdown 提取二三级标题生成目录项，id 按出现顺序编号；
|
||||
* 代码围栏内的 # 不计入
|
||||
*/
|
||||
function extractToc(content: string): TocItem[] {
|
||||
const items: TocItem[] = [];
|
||||
let inCode = false;
|
||||
for (const raw of content.split(/\r?\n/)) {
|
||||
const line = raw.trim();
|
||||
if (line.startsWith("```")) {
|
||||
inCode = !inCode;
|
||||
continue;
|
||||
}
|
||||
if (inCode) continue;
|
||||
const m = /^(#{2,3})\s+(.+?)\s*#*\s*$/.exec(line);
|
||||
if (m) items.push({ level: m[1].length as 2 | 3, text: m[2], id: `h-${items.length}` });
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
function formatYearMonth(dateStr: string) {
|
||||
const d = new Date(dateStr);
|
||||
return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatYMD(dateStr: string) {
|
||||
const d = new Date(dateStr);
|
||||
return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
|
||||
d.getDate()
|
||||
).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr: string) {
|
||||
return new Date(dateStr).toLocaleString("zh-CN", {
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
左栏模块（仅 xl 三栏时展示）
|
||||
============================================================ */
|
||||
|
||||
function BoardCard({ board }: { board: Board }) {
|
||||
const colorIdx = Math.max(0, board.color_index ?? 0) % 8;
|
||||
return (
|
||||
<section className="j13-module shrink-0" aria-labelledby="board-card-title">
|
||||
<p className="j13-module-title mb-3" id="board-card-title">
|
||||
<Layers size={15} style={{ color: "var(--accent)" }} /> 所属板块
|
||||
</p>
|
||||
<Link href={`/board/${board.id}`} className="flex items-center gap-3 group">
|
||||
<span
|
||||
className={`av-${colorIdx} w-11 h-11 rounded-xl flex items-center justify-center text-lg font-extrabold shrink-0`}
|
||||
>
|
||||
{board.name.slice(0, 1)}
|
||||
</span>
|
||||
<span
|
||||
className="font-bold text-[14.5px] truncate group-hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{board.name}
|
||||
</span>
|
||||
</Link>
|
||||
{board.description && (
|
||||
<p className="mt-2.5 text-[12.5px] leading-relaxed" style={{ color: "var(--ink-3)" }}>
|
||||
{board.description}
|
||||
</p>
|
||||
)}
|
||||
<Link
|
||||
href={`/board/${board.id}`}
|
||||
className="btn btn-line btn-sm w-full justify-center mt-3.5"
|
||||
>
|
||||
进入板块 <ArrowRight size={13} />
|
||||
</Link>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthorRailCard({ profile }: { profile: UserProfile }) {
|
||||
const u = profile.user;
|
||||
return (
|
||||
<section className="j13-module shrink-0" aria-labelledby="author-card-title">
|
||||
<p className="j13-module-title mb-3" id="author-card-title">
|
||||
<User size={15} style={{ color: "var(--accent)" }} /> 作者
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href={`/u/${u.id}`} className="shrink-0" aria-label={u.nickname}>
|
||||
<Avatar name={u.nickname || u.username} size={48} />
|
||||
</Link>
|
||||
<div className="min-w-0">
|
||||
<Link
|
||||
href={`/u/${u.id}`}
|
||||
className="block font-bold text-[14.5px] truncate hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{u.nickname}
|
||||
</Link>
|
||||
{u.role === "admin" && (
|
||||
<span
|
||||
className="chip mt-1.5"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
管理员
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="meta mt-3">{formatYearMonth(u.created_at)} 加入</p>
|
||||
<div className="grid grid-cols-2 gap-2 mt-2.5">
|
||||
<div className="j13-stat">
|
||||
<span className="j13-stat-num">{profile.stats.post_count}</span>
|
||||
<span className="j13-stat-lab">发帖</span>
|
||||
</div>
|
||||
<div className="j13-stat">
|
||||
<span className="j13-stat-num">{profile.stats.comment_count}</span>
|
||||
<span className="j13-stat-lab">评论</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/u/${u.id}`} className="btn btn-line btn-sm w-full justify-center mt-3.5">
|
||||
访问主页
|
||||
</Link>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function AuthorPosts({ posts }: { posts: PostListItem[] }) {
|
||||
if (posts.length === 0) return null;
|
||||
return (
|
||||
<section className="j13-module flex min-h-0 flex-col" aria-labelledby="author-posts-title">
|
||||
<p className="j13-module-title mb-1 shrink-0" id="author-posts-title">
|
||||
<PenLine size={15} style={{ color: "var(--accent)" }} /> TA 的其他帖子
|
||||
</p>
|
||||
<ul className="j13-rail-scroll">
|
||||
{posts.map((p) => (
|
||||
<li key={p.id}>
|
||||
<Link
|
||||
href={`/post/${p.id}`}
|
||||
title={p.title}
|
||||
className="block rounded-[10px] px-2 py-2 transition-colors hover:bg-[var(--panel-2)]"
|
||||
>
|
||||
<span
|
||||
className="block text-[13px] font-semibold leading-snug line-clamp-2"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{p.title}
|
||||
</span>
|
||||
<span className="meta mt-1 block text-[11px]">{formatYMD(p.created_at)}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
右栏模块（lg 起展示；移动端下沉到评论之后）
|
||||
============================================================ */
|
||||
|
||||
function RelatedPosts({
|
||||
posts,
|
||||
boardId,
|
||||
uid = "related",
|
||||
}: {
|
||||
posts: PostListItem[];
|
||||
boardId: number;
|
||||
// 右栏与移动端内联实例同时存在，id 必须区分以免 aria-labelledby 指向隐藏副本
|
||||
uid?: string;
|
||||
}) {
|
||||
if (posts.length === 0) return null;
|
||||
const titleId = `${uid}-title`;
|
||||
return (
|
||||
<section className="j13-module shrink-0" aria-labelledby={titleId}>
|
||||
<p className="j13-module-title mb-1.5" id={titleId}>
|
||||
<Flame size={15} style={{ color: "var(--clay)" }} /> 同板块热议
|
||||
</p>
|
||||
<ol>
|
||||
{posts.map((p, i) => (
|
||||
<li key={p.id}>
|
||||
<Link href={`/post/${p.id}`} className="j13-rank" title={p.title}>
|
||||
<span className="j13-rank-no">{i + 1}</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<span
|
||||
className="block text-[13px] font-semibold leading-snug line-clamp-2"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{p.title}
|
||||
</span>
|
||||
<span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<MessageCircle size={11.5} /> {p.comment_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<Heart size={11.5} /> {p.like_count}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<Link
|
||||
href={`/board/${boardId}`}
|
||||
className="j13-raillink justify-center mt-1.5 text-[12.5px] font-semibold"
|
||||
style={{ color: "var(--accent)" }}
|
||||
>
|
||||
查看全部 <ChevronRight size={13} />
|
||||
</Link>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* 移动端 / 窄屏作者卡（xl 以下内联在正文与评论之间，替代左栏作者模块） */
|
||||
function AuthorCardStacked({ profile }: { profile: UserProfile }) {
|
||||
return (
|
||||
<div className="panel p-5 sm:p-6">
|
||||
<p
|
||||
className="text-[11.5px] font-bold tracking-[0.08em] uppercase mb-3.5"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
关于作者
|
||||
</p>
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<Link href={`/u/${profile.user.id}`} className="shrink-0" aria-label={profile.user.nickname}>
|
||||
<Avatar name={profile.user.nickname || profile.user.username} size={52} />
|
||||
</Link>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Link
|
||||
href={`/u/${profile.user.id}`}
|
||||
className="font-bold text-[15px] hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{profile.user.nickname}
|
||||
</Link>
|
||||
{profile.user.role === "admin" && (
|
||||
<span
|
||||
className="chip"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)", borderColor: "transparent" }}
|
||||
>
|
||||
管理员
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="meta mt-1">
|
||||
{formatYearMonth(profile.user.created_at)} 加入 · 发帖 {profile.stats.post_count} · 评论{" "}
|
||||
{profile.stats.comment_count}
|
||||
</p>
|
||||
</div>
|
||||
<Link href={`/u/${profile.user.id}`} className="btn btn-line btn-sm shrink-0">
|
||||
访问主页
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default async function PostDetailPage({ params }: PageProps) {
|
||||
const { id } = await params;
|
||||
const cookie = authCookieHeader(await cookies());
|
||||
const { post } = await fetchPostDetail(id, cookie);
|
||||
const { comments } = await fetchComments(id);
|
||||
|
||||
// 评论 / 作者资料 / 同板块热议并行拉取；侧栏数据失败一律静默降级，不阻塞正文
|
||||
const [commentsData, profile, relatedData] = await Promise.all([
|
||||
fetchComments(id),
|
||||
fetchUserProfile(String(post.user.id), 1, cookie).catch(() => null),
|
||||
fetchPosts(1, 8, post.board_id, "hot", "", false, cookie).catch(() => null),
|
||||
]);
|
||||
const comments = commentsData.comments;
|
||||
const related = (relatedData?.posts ?? []).filter((p) => p.id !== post.id).slice(0, 5);
|
||||
const authorPosts = (profile?.posts ?? []).filter((p) => p.id !== post.id).slice(0, 5);
|
||||
|
||||
const toc = extractToc(post.content);
|
||||
const readingMinutes = Math.max(1, Math.ceil(post.content.length / 400));
|
||||
const edited =
|
||||
new Date(post.updated_at).getTime() - new Date(post.created_at).getTime() > 60_000;
|
||||
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
@@ -56,84 +349,162 @@ export default async function PostDetailPage({ params }: PageProps) {
|
||||
},
|
||||
};
|
||||
|
||||
// 目录项与 Markdown 标题按渲染顺序一一对应（extractToc 顺序 == 文档顺序）
|
||||
let headingIndex = 0;
|
||||
const headingRenderer = (Tag: "h2" | "h3") =>
|
||||
function Heading({ children }: { children?: React.ReactNode }) {
|
||||
const item = toc[headingIndex++];
|
||||
return (
|
||||
<Tag id={item?.id} style={{ scrollMarginTop: 90 }}>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
};
|
||||
|
||||
const tags = post.tags
|
||||
? [...new Set(post.tags.split(",").map((t) => t.trim()).filter(Boolean))]
|
||||
: [];
|
||||
|
||||
return (
|
||||
<article className="max-w-3xl mx-auto">
|
||||
<>
|
||||
<ReadingProgress />
|
||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
|
||||
<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={`/board/${post.board.id}`} className="hover:text-[var(--accent)] transition-colors">
|
||||
{post.board.name}
|
||||
</Link>
|
||||
</nav>
|
||||
{/* 三栏阅读布局：xl = 左导航240 + 正文 + 右辅助280；lg = 正文 + 右辅助260；以下单栏 */}
|
||||
<div className="grid grid-cols-1 items-start lg:grid-cols-[minmax(0,1fr)_260px] xl:grid-cols-[240px_minmax(0,1fr)_280px] gap-x-6 xl:gap-x-7">
|
||||
{/* 左栏：板块 / 作者 / 作者其他帖 */}
|
||||
{/* sticky 必须直接挂在 grid 子项上：aside 作为 grid item，其可粘行程
|
||||
等于行高（正文高度）；内层包裹会被 items-start 缩成内容高而失去行程 */}
|
||||
<aside
|
||||
className="hidden xl:flex w-[240px] shrink-0 sticky top-24 flex-col gap-4 max-h-[calc(100vh_-_7rem)] overflow-hidden"
|
||||
aria-label="帖子导航"
|
||||
>
|
||||
<BoardCard board={post.board} />
|
||||
{profile && <AuthorRailCard profile={profile} />}
|
||||
{profile && <AuthorPosts posts={authorPosts} />}
|
||||
</aside>
|
||||
|
||||
<div className="panel p-6 sm:p-9">
|
||||
<header className="mb-7">
|
||||
<div className="flex items-center gap-2 mb-4 flex-wrap">
|
||||
{post.pinned > 0 && <span className="badge-pin">置顶</span>}
|
||||
{post.recommended && <span className="badge-rec">推荐</span>}
|
||||
<Link href={`/board/${post.board.id}`} className="chip">
|
||||
{post.board.name}
|
||||
</Link>
|
||||
</div>
|
||||
<h1 className="text-[26px] sm:text-[34px] font-extrabold leading-tight tracking-tight mb-6" style={{ color: "var(--ink)" }}>
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
className="flex items-center justify-between gap-4 flex-wrap pb-5"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
<Link
|
||||
href={`/u/${post.user.id}`}
|
||||
className="flex items-center gap-2.5 group"
|
||||
>
|
||||
<Avatar name={post.user.nickname || post.user.username} size={40} />
|
||||
<span className="text-sm font-semibold group-hover:text-[var(--accent)] transition-colors" style={{ color: "var(--ink)" }}>
|
||||
{post.user.nickname}
|
||||
</span>
|
||||
{/* 中栏：正文主体 */}
|
||||
<div className="min-w-0">
|
||||
<article className="w-full max-w-[760px] mx-auto">
|
||||
<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={`/board/${post.board.id}`} className="hover:text-[var(--accent)] transition-colors">
|
||||
{post.board.name}
|
||||
</Link>
|
||||
<span className="meta">{new Date(post.created_at).toLocaleString("zh-CN")}</span>
|
||||
<span className="inline-flex items-center gap-1.5 meta">
|
||||
<IconEye size={14} /> {post.view_count}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 meta">
|
||||
<IconComment size={14} /> {post.comment_count}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<LikeButton postId={id} liked={post.liked} likeCount={post.like_count} />
|
||||
<PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</nav>
|
||||
|
||||
{post.tags && (
|
||||
<div className="flex flex-wrap gap-2 mb-7">
|
||||
{[
|
||||
...new Set(
|
||||
post.tags
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean)
|
||||
),
|
||||
].map((t, i) => (
|
||||
<span key={`${t}-${i}`} className="chip">
|
||||
# {t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="panel p-6 sm:p-8">
|
||||
<header className="mb-7">
|
||||
<div className="flex items-center gap-2 mb-4 flex-wrap">
|
||||
{post.pinned > 0 && <span className="badge-pin">置顶</span>}
|
||||
{post.recommended && <span className="badge-rec">推荐</span>}
|
||||
<Link href={`/board/${post.board.id}`} className="chip">
|
||||
{post.board.name}
|
||||
</Link>
|
||||
</div>
|
||||
<h1 className="text-[26px] sm:text-[34px] font-extrabold leading-tight tracking-tight mb-6" style={{ color: "var(--ink)" }}>
|
||||
{post.title}
|
||||
</h1>
|
||||
|
||||
<div className="prose-content">
|
||||
<ReactMarkdown>{post.content}</ReactMarkdown>
|
||||
{/* 作者行：头像 + 昵称居左，点赞/更多操作居右 */}
|
||||
<div
|
||||
className="flex items-center justify-between gap-4 flex-wrap pb-4"
|
||||
style={{ borderBottom: "1px solid var(--line)" }}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<Link href={`/u/${post.user.id}`} className="shrink-0" aria-label={post.user.nickname}>
|
||||
<Avatar name={post.user.nickname || post.user.username} size={40} />
|
||||
</Link>
|
||||
<Link
|
||||
href={`/u/${post.user.id}`}
|
||||
className="min-w-0 truncate text-[15px] font-bold hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{post.user.nickname}
|
||||
</Link>
|
||||
</div>
|
||||
{/* 管理操作已收进单个下拉按钮；普通读者此处不渲染内容 */}
|
||||
<PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
|
||||
</div>
|
||||
|
||||
{/* 元信息条：阅读数据居左、发布/更新时间居右（窄屏自动折行）；
|
||||
原右栏“帖子数据”卡已移除，点赞数由点赞按钮承载，此处不重复 */}
|
||||
<div className="mt-3.5 flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
<div className="flex items-center gap-4 meta">
|
||||
<span className="inline-flex items-center gap-1.5" aria-label={`浏览 ${post.view_count} 次`}>
|
||||
<IconEye size={14} /> {post.view_count} 浏览
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5" aria-label={`评论 ${post.comment_count} 条`}>
|
||||
<IconComment size={14} /> {post.comment_count} 评论
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5" aria-label={`阅读约需 ${readingMinutes} 分钟`}>
|
||||
<Clock size={14} /> 约 {readingMinutes} 分钟读完
|
||||
</span>
|
||||
</div>
|
||||
<p className="meta w-full text-[12px] sm:w-auto sm:ml-auto">
|
||||
发布于 {formatDateTime(post.created_at)}
|
||||
{edited && <> · 更新于 {formatDateTime(post.updated_at)}</>}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-7">
|
||||
{tags.map((t, i) => (
|
||||
<span key={`${t}-${i}`} className="chip">
|
||||
# {t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="prose-content">
|
||||
<ReactMarkdown components={{ h2: headingRenderer("h2"), h3: headingRenderer("h3") }}>
|
||||
{post.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
{/* 文末点赞：分隔线后居中，唯一的点赞入口（作者行不再放置） */}
|
||||
<div
|
||||
className="mt-9 pt-7 flex justify-center"
|
||||
style={{ borderTop: "1px solid var(--line)" }}
|
||||
>
|
||||
<LikeButton
|
||||
postId={id}
|
||||
liked={post.liked}
|
||||
likeCount={post.like_count}
|
||||
variant="article"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 窄屏作者卡（xl 起由左栏承载，避免重复展示） */}
|
||||
{profile && (
|
||||
<div className="xl:hidden mt-6">
|
||||
<AuthorCardStacked profile={profile} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<CommentSection postId={id} comments={comments} />
|
||||
|
||||
{/* 窄屏相关讨论（lg 起由右栏承载） */}
|
||||
<div className="lg:hidden mt-6">
|
||||
<RelatedPosts posts={related} boardId={post.board_id} uid="related-inline" />
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CommentSection postId={id} comments={comments} />
|
||||
</article>
|
||||
{/* 右栏：目录 / 同板块热议（阅读数据已并入标题下元信息条） */}
|
||||
<aside
|
||||
className="hidden lg:flex w-[260px] xl:w-[280px] shrink-0 sticky top-24 flex-col gap-4 max-h-[calc(100vh_-_7rem)] overflow-hidden"
|
||||
aria-label="阅读辅助"
|
||||
>
|
||||
{toc.length > 0 && <PostToc items={toc} />}
|
||||
<RelatedPosts posts={related} boardId={post.board_id} />
|
||||
</aside>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -142,33 +142,37 @@ export default function Header({
|
||||
WebkitBackdropFilter: "blur(14px)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
|
||||
{/* 品牌 */}
|
||||
<Link href="/" className="flex items-center gap-2.5 shrink-0 group">
|
||||
<span
|
||||
className="w-9 h-9 rounded-2xl flex items-center justify-center transition-transform duration-300 group-hover:rotate-[-6deg]"
|
||||
style={{ background: "var(--accent)", color: "var(--accent-on)" }}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="leading-none">
|
||||
<span className="block font-extrabold text-[17px] tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
姜十三
|
||||
<div className="max-w-[1440px] mx-auto px-4 sm:px-6 h-[68px] flex items-center gap-4 lg:gap-7">
|
||||
{/* 左组：品牌 + 主导航 */}
|
||||
<div className="flex items-center gap-3 lg:gap-5 shrink-0">
|
||||
<Link href="/" className="flex items-center gap-2.5 group">
|
||||
<span
|
||||
className="w-9 h-9 rounded-2xl flex items-center justify-center transition-transform duration-300 group-hover:rotate-[-6deg]"
|
||||
style={{ background: "var(--accent)", color: "var(--accent-on)" }}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
<span className="block text-[10.5px] font-semibold mt-0.5" style={{ color: "var(--ink-3)" }}>
|
||||
J13 社区
|
||||
<span className="leading-none">
|
||||
<span className="block font-extrabold text-[17px] tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
姜十三
|
||||
</span>
|
||||
<span className="block text-[10.5px] font-semibold mt-0.5" style={{ color: "var(--ink-3)" }}>
|
||||
J13 社区
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</Link>
|
||||
</Link>
|
||||
<nav className="hidden lg:flex items-center gap-1 pl-3" style={{ borderLeft: "1px solid var(--line)" }}>
|
||||
<NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
|
||||
首页
|
||||
</NavPill>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* 桌面端 */}
|
||||
<nav className="hidden lg:flex items-center gap-1">
|
||||
<NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
|
||||
首页
|
||||
</NavPill>
|
||||
<form onSubmit={handleSearch} className="relative ml-2">
|
||||
{/* 中组：搜索居中 */}
|
||||
<form onSubmit={handleSearch} className="hidden lg:flex flex-1 justify-center">
|
||||
<div className="relative w-full max-w-[380px] focus-within:max-w-[440px] transition-[max-width] duration-200">
|
||||
<Search
|
||||
size={15}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2"
|
||||
@@ -182,7 +186,7 @@ export default function Header({
|
||||
onKeyDown={onSearchKeyDown}
|
||||
placeholder="搜索帖子..."
|
||||
aria-label="搜索帖子"
|
||||
className="w-48 focus:w-64 transition-[width] duration-200 pl-10 pr-10 py-2.5 text-sm rounded-full"
|
||||
className="w-full pl-10 pr-10 py-2.5 text-sm rounded-full"
|
||||
style={{
|
||||
background: "var(--panel)",
|
||||
color: "var(--ink)",
|
||||
@@ -195,8 +199,8 @@ export default function Header({
|
||||
>
|
||||
/
|
||||
</kbd>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* 右侧操作区：桌面/移动共用铃铛（仅挂载一次，避免重复轮询），
|
||||
桌面额外显示主题/发帖/用户菜单，移动端收进汉堡抽屉 */}
|
||||
|
||||
@@ -10,7 +10,7 @@ interface LikeButtonProps {
|
||||
postId: string;
|
||||
liked: boolean;
|
||||
likeCount: number;
|
||||
variant?: "default" | "compact";
|
||||
variant?: "default" | "compact" | "article";
|
||||
}
|
||||
|
||||
export default function LikeButton({
|
||||
@@ -60,10 +60,13 @@ export default function LikeButton({
|
||||
}
|
||||
};
|
||||
|
||||
const compact =
|
||||
const sizeCls =
|
||||
variant === "compact"
|
||||
? "px-2.5 py-1.5 gap-1 text-[12.5px]"
|
||||
: "px-4 py-2 gap-1.5 text-sm";
|
||||
: variant === "article"
|
||||
? "px-7 py-3 gap-2 text-[15px] min-w-[148px]"
|
||||
: "px-4 py-2 gap-1.5 text-sm";
|
||||
const iconSize = variant === "compact" ? 13 : variant === "article" ? 18 : 15;
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -71,17 +74,13 @@ export default function LikeButton({
|
||||
disabled={loading}
|
||||
title={liked ? "取消点赞" : "点赞"}
|
||||
aria-pressed={liked}
|
||||
className={`inline-flex items-center font-semibold tabular-nums rounded-full border transition-colors duration-150 hover:border-[var(--accent)] disabled:opacity-50 ${compact}`}
|
||||
style={{
|
||||
borderColor: liked ? "var(--accent)" : "var(--line-2)",
|
||||
color: liked ? "var(--accent)" : "var(--ink-2)",
|
||||
background: liked ? "var(--accent-soft)" : "var(--panel)",
|
||||
}}
|
||||
className={`j13-like inline-flex items-center justify-center font-semibold tabular-nums rounded-full border disabled:opacity-50 ${liked ? "is-liked" : ""} ${sizeCls}`}
|
||||
>
|
||||
<span key={String(liked)} className={liked ? "j13-heart-pop inline-flex" : "inline-flex"}>
|
||||
<IconHeart size={variant === "compact" ? 13 : 15} filled={liked} />
|
||||
<IconHeart size={iconSize} filled={liked} />
|
||||
</span>
|
||||
<span>{count}</span>
|
||||
{variant === "article" && <span>{liked ? "已赞" : "点赞"}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { Pencil, Trash2, Pin, Star } from "lucide-react";
|
||||
import { Pencil, Trash2, Pin, Star, SlidersHorizontal, ChevronDown, Check } from "lucide-react";
|
||||
import { apiMe, apiDeletePost, apiTogglePin, apiToggleRecommend, type User } from "@/lib/api";
|
||||
import { toast } from "@/lib/toast";
|
||||
|
||||
@@ -17,10 +17,12 @@ interface PostActionsProps {
|
||||
export default function PostActions({ postId, authorId, pinned, recommended }: PostActionsProps) {
|
||||
const router = useRouter();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [isPinned, setIsPinned] = useState(pinned > 0);
|
||||
const [isRecommended, setIsRecommended] = useState(recommended);
|
||||
const [acting, setActing] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
apiMe()
|
||||
@@ -28,11 +30,28 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
|
||||
.catch(() => setUser(null));
|
||||
}, []);
|
||||
|
||||
// 点击外部 / Esc 关闭菜单（与通知铃铛同一交互模式）
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onDown = (e: MouseEvent) => {
|
||||
if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
|
||||
};
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setOpen(false);
|
||||
};
|
||||
document.addEventListener("mousedown", onDown);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", onDown);
|
||||
document.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const canManage = user && (user.id === authorId || user.role === "admin");
|
||||
const isAdmin = user?.role === "admin";
|
||||
if (!canManage) return null;
|
||||
|
||||
const handleDelete = async () => {
|
||||
setOpen(false);
|
||||
if (!confirm("确定要删除这篇帖子吗？此操作不可恢复。")) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
@@ -52,6 +71,7 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
|
||||
|
||||
const handlePin = async () => {
|
||||
setActing(true);
|
||||
setOpen(false);
|
||||
try {
|
||||
const res = await apiTogglePin(postId);
|
||||
setIsPinned(res.pinned > 0);
|
||||
@@ -66,6 +86,7 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
|
||||
|
||||
const handleRecommend = async () => {
|
||||
setActing(true);
|
||||
setOpen(false);
|
||||
try {
|
||||
const res = await apiToggleRecommend(postId);
|
||||
setIsRecommended(res.recommended);
|
||||
@@ -78,38 +99,89 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
|
||||
}
|
||||
};
|
||||
|
||||
if (!canManage) return null;
|
||||
|
||||
const itemCls =
|
||||
"w-full flex items-center gap-2.5 px-4 py-2.5 text-[13px] transition-colors hover:bg-[var(--panel-2)]";
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{isAdmin && (
|
||||
<>
|
||||
<button
|
||||
onClick={handlePin}
|
||||
disabled={acting}
|
||||
className="btn btn-line btn-sm"
|
||||
style={isPinned ? { borderColor: "var(--accent)", color: "var(--accent)" } : undefined}
|
||||
>
|
||||
<Pin size={13} /> {isPinned ? "取消置顶" : "置顶"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleRecommend}
|
||||
disabled={acting}
|
||||
className="btn btn-line btn-sm"
|
||||
style={
|
||||
isRecommended
|
||||
? { borderColor: "var(--gold)", color: "var(--gold)", background: "var(--gold-soft)" }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Star size={13} /> {isRecommended ? "取消推荐" : "推荐"}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<Link href={`/post/${postId}/edit`} className="btn btn-line btn-sm">
|
||||
<Pencil size={13} /> 编辑
|
||||
</Link>
|
||||
<button onClick={handleDelete} disabled={deleting} className="btn btn-danger btn-sm">
|
||||
<Trash2 size={13} /> {deleting ? "删除中..." : "删除"}
|
||||
<div className="relative" ref={menuRef}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
disabled={acting || deleting}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={open}
|
||||
className="btn btn-line btn-sm"
|
||||
style={open ? { borderColor: "var(--accent)", color: "var(--accent)" } : undefined}
|
||||
>
|
||||
<SlidersHorizontal size={13} /> 管理
|
||||
<ChevronDown
|
||||
size={13}
|
||||
style={{ transition: "transform .15s", transform: open ? "rotate(180deg)" : "none" }}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
role="menu"
|
||||
className="absolute right-0 mt-2 w-44 overflow-hidden z-50 j13-toast-in"
|
||||
style={{
|
||||
background: "var(--panel)",
|
||||
border: "1px solid var(--line)",
|
||||
borderRadius: "var(--r)",
|
||||
boxShadow: "var(--shadow-lg)",
|
||||
}}
|
||||
>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={handlePin}
|
||||
className={itemCls}
|
||||
style={isPinned ? { color: "var(--accent)" } : { color: "var(--ink)" }}
|
||||
>
|
||||
<Pin size={14} className="shrink-0" />
|
||||
<span className="flex-1 text-left">{isPinned ? "取消置顶" : "置顶"}</span>
|
||||
{isPinned && <Check size={14} className="shrink-0" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={handleRecommend}
|
||||
className={itemCls}
|
||||
style={isRecommended ? { color: "var(--gold)" } : { color: "var(--ink)" }}
|
||||
>
|
||||
<Star size={14} className="shrink-0" />
|
||||
<span className="flex-1 text-left">{isRecommended ? "取消推荐" : "推荐"}</span>
|
||||
{isRecommended && <Check size={14} className="shrink-0" />}
|
||||
</button>
|
||||
<div style={{ height: 1, background: "var(--line)" }} />
|
||||
</>
|
||||
)}
|
||||
<Link
|
||||
href={`/post/${postId}/edit`}
|
||||
role="menuitem"
|
||||
className={`${itemCls} items-center`}
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
<Pencil size={14} className="shrink-0" />
|
||||
<span className="flex-1 text-left">编辑帖子</span>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className={`${itemCls} items-center`}
|
||||
style={{ color: "var(--danger)" }}
|
||||
>
|
||||
<Trash2 size={14} className="shrink-0" />
|
||||
<span className="flex-1 text-left">{deleting ? "删除中..." : "删除帖子"}</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,19 +1,29 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
import type { PostListItem } from "@/lib/api";
|
||||
import LikeButton from "./LikeButton";
|
||||
import Avatar from "./Avatar";
|
||||
import { IconComment, IconEye } from "./Icons";
|
||||
|
||||
function formatTime(dateStr: string) {
|
||||
const d = new Date(dateStr);
|
||||
return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
|
||||
d.getDate()
|
||||
).padStart(2, "0")}`;
|
||||
/** 发帖/回复时间统一为相对时间：刚刚 / N分钟前 / N小时前 / N天前 / N个月前 / N年前 */
|
||||
function formatRelative(dateStr: string) {
|
||||
const t = new Date(dateStr).getTime();
|
||||
const diff = Date.now() - t;
|
||||
const min = 60_000,
|
||||
hour = 60 * min,
|
||||
day = 24 * hour;
|
||||
if (diff < min) return "刚刚";
|
||||
if (diff < hour) return `${Math.floor(diff / min)}分钟前`;
|
||||
if (diff < day) return `${Math.floor(diff / hour)}小时前`;
|
||||
if (diff < 30 * day) return `${Math.floor(diff / day)}天前`;
|
||||
if (diff < 365 * day) return `${Math.floor(diff / (30 * day))}个月前`;
|
||||
return `${Math.floor(diff / (365 * day))}年前`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 帖子列表行：头像 + 标题 + 作者元信息 + 统计 + 点赞
|
||||
* 用于首页/板块页，以细线串联，悬浮浅色反馈
|
||||
* 帖子列表行（参考社区信息流样式）：
|
||||
* 大头像 + 加粗标题（徽章内联）+ 第二行「板块 · 作者 · 发布时间 ← 最后回复」+
|
||||
* 右侧评论数等统计垂直居中。用于首页/板块页/搜索结果。
|
||||
*/
|
||||
export default function PostRow({
|
||||
post,
|
||||
@@ -30,13 +40,16 @@ export default function PostRow({
|
||||
showViews?: boolean;
|
||||
showLike?: boolean;
|
||||
}) {
|
||||
const lastReply = post.last_reply;
|
||||
const replied = lastReply && new Date(lastReply.created_at).getTime() > new Date(post.created_at).getTime() + 60_000;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group relative flex items-center gap-3 sm:gap-4 px-4 sm:px-5 border-t transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
|
||||
className="group relative flex items-center gap-3.5 sm:gap-4 px-4 sm:px-5 border-t transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
|
||||
style={{
|
||||
borderColor: "var(--line)",
|
||||
paddingTop: compact ? 13 : 16,
|
||||
paddingBottom: compact ? 13 : 16,
|
||||
paddingTop: compact ? 15 : 18,
|
||||
paddingBottom: compact ? 15 : 18,
|
||||
animationDelay: `${Math.min(index, 9) * 35}ms`,
|
||||
}}
|
||||
>
|
||||
@@ -46,57 +59,74 @@ export default function PostRow({
|
||||
aria-label={post.user.nickname}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<Avatar name={post.user.nickname || post.user.username} size={compact ? 38 : 42} />
|
||||
<Avatar name={post.user.nickname || post.user.username} size={compact ? 44 : 46} />
|
||||
</Link>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
{(post.pinned > 0 || post.recommended) && (
|
||||
<div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
|
||||
{post.pinned > 0 && <span className="badge-pin">置顶</span>}
|
||||
{post.recommended && <span className="badge-rec">推荐</span>}
|
||||
</div>
|
||||
)}
|
||||
<Link href={`/post/${post.id}`} className="stretch-link" aria-label={post.title}>
|
||||
<h3
|
||||
className="font-semibold text-[15px] sm:text-[16px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
|
||||
style={{ color: "var(--ink)" }}
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{post.pinned > 0 && <span className="badge-pin shrink-0">置顶</span>}
|
||||
{post.recommended && <span className="badge-rec shrink-0">推荐</span>}
|
||||
<Link
|
||||
href={`/post/${post.id}`}
|
||||
className="stretch-link min-w-0 flex-1"
|
||||
aria-label={post.title}
|
||||
>
|
||||
{post.title}
|
||||
</h3>
|
||||
</Link>
|
||||
<div className="meta relative z-[2] flex items-center gap-2.5 mt-1.5 flex-wrap">
|
||||
<h3
|
||||
className="font-bold text-[16px] sm:text-[17px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{post.title}
|
||||
</h3>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="meta relative z-[2] flex items-center gap-x-2 gap-y-1 mt-1.5 flex-wrap text-[13px]">
|
||||
{boardHref && (
|
||||
<Link
|
||||
href={`/board/${post.board.id}`}
|
||||
className={`av-${post.board.id % 8} rounded-md px-1.5 py-px text-[11px] font-bold leading-[1.5] transition-opacity hover:opacity-85`}
|
||||
>
|
||||
{post.board.name}
|
||||
</Link>
|
||||
)}
|
||||
<Link
|
||||
href={`/u/${post.user.id}`}
|
||||
className="hover:text-[var(--accent)] transition-colors"
|
||||
className="font-semibold hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink-2)" }}
|
||||
>
|
||||
{post.user.nickname}
|
||||
</Link>
|
||||
{boardHref && (
|
||||
<>
|
||||
<span aria-hidden>·</span>
|
||||
<Link
|
||||
href={`/board/${post.board.id}`}
|
||||
className="hover:text-[var(--accent)] transition-colors"
|
||||
>
|
||||
{post.board.name}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
<span aria-hidden>·</span>
|
||||
<span>{formatTime(post.created_at)}</span>
|
||||
<span className="tabular-nums">{formatRelative(post.created_at)}</span>
|
||||
{replied && (
|
||||
<span className="inline-flex items-center gap-1 min-w-0">
|
||||
<ArrowLeft size={13} className="shrink-0" aria-hidden />
|
||||
<Link
|
||||
href={`/u/${lastReply!.user.id}`}
|
||||
className="font-medium hover:text-[var(--accent)] transition-colors truncate max-w-[8em]"
|
||||
>
|
||||
{lastReply!.user.nickname || lastReply!.user.username}
|
||||
</Link>
|
||||
<span className="tabular-nums shrink-0">{formatRelative(lastReply!.created_at)}</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="above-link flex items-center gap-2.5 sm:gap-3.5 shrink-0">
|
||||
<span
|
||||
className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta`}
|
||||
<div className="above-link flex items-center gap-3 sm:gap-4 shrink-0">
|
||||
<Link
|
||||
href={`/post/${post.id}`}
|
||||
tabIndex={-1}
|
||||
aria-label={`${post.comment_count} 条评论`}
|
||||
className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta tabular-nums text-[13.5px] hover:text-[var(--accent)] transition-colors`}
|
||||
>
|
||||
<IconComment size={15} />
|
||||
<IconComment size={17} />
|
||||
{post.comment_count}
|
||||
</span>
|
||||
</Link>
|
||||
{showViews && (
|
||||
<span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
|
||||
<span
|
||||
className="hidden md:inline-flex items-center gap-1.5 meta tabular-nums"
|
||||
aria-label={`${post.view_count} 次浏览`}
|
||||
>
|
||||
<IconEye size={15} />
|
||||
{post.view_count}
|
||||
</span>
|
||||
|
||||
93
frontend/components/PostToc.tsx
Normal file
93
frontend/components/PostToc.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export interface TocItem {
|
||||
level: 2 | 3;
|
||||
text: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 文章目录树：右栏 flex 限高列中的可收缩模块。
|
||||
* - 标题常驻，目录列表在超高时于面板内部滚动（细滚动条，不顶出侧栏）；
|
||||
* - IntersectionObserver 高亮当前小节；
|
||||
* - 当前项被滚动到目录可视区外时，列表自动最小化跟随（首屏不滚动、尊重 reduced-motion）。
|
||||
*/
|
||||
export default function PostToc({ items }: { items: TocItem[] }) {
|
||||
const [active, setActive] = useState<string>(items[0]?.id ?? "");
|
||||
const navRef = useRef<HTMLElement>(null);
|
||||
// 首次挂载时 active 取首项，不触发跟随滚动，避免进页跳动
|
||||
const skipFollow = useRef(true);
|
||||
|
||||
useEffect(() => {
|
||||
const heads = items
|
||||
.map((i) => document.getElementById(i.id))
|
||||
.filter((el): el is HTMLElement => Boolean(el));
|
||||
if (heads.length === 0) return;
|
||||
const obs = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const e of entries) if (e.isIntersecting) setActive(e.target.id);
|
||||
},
|
||||
// 顶部让出固定头部高度，底部提前切换到下一节
|
||||
{ rootMargin: "-80px 0px -70% 0px", threshold: 0 }
|
||||
);
|
||||
heads.forEach((h) => obs.observe(h));
|
||||
return () => obs.disconnect();
|
||||
}, [items]);
|
||||
|
||||
// active 变化时把当前目录项滚入列表可视区（block: nearest 仅在贴边时最小移动）
|
||||
useEffect(() => {
|
||||
if (skipFollow.current) {
|
||||
skipFollow.current = false;
|
||||
return;
|
||||
}
|
||||
const el = navRef.current?.querySelector<HTMLElement>(`[data-toc-id="${active}"]`);
|
||||
if (!el) return;
|
||||
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
el.scrollIntoView({ block: "nearest", behavior: reduce ? "auto" : "smooth" });
|
||||
}, [active]);
|
||||
|
||||
const jump = (id: string) => (e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
};
|
||||
|
||||
return (
|
||||
<nav ref={navRef} aria-label="文章目录" className="panel p-4 flex min-h-0 flex-col">
|
||||
<p
|
||||
className="text-[11.5px] font-bold tracking-[0.08em] uppercase mb-2.5 px-1 shrink-0"
|
||||
style={{ color: "var(--ink-3)" }}
|
||||
>
|
||||
目录
|
||||
</p>
|
||||
<ul
|
||||
className="j13-rail-scroll space-y-0.5 pr-0.5"
|
||||
style={{ borderLeft: "1px solid var(--line)" }}
|
||||
>
|
||||
{items.map((it) => {
|
||||
const isActive = it.id === active;
|
||||
return (
|
||||
<li key={it.id}>
|
||||
<a
|
||||
data-toc-id={it.id}
|
||||
href={`#${it.id}`}
|
||||
onClick={jump(it.id)}
|
||||
className="block py-1.5 pr-1 text-[12.5px] leading-snug transition-colors"
|
||||
style={{
|
||||
paddingLeft: it.level === 3 ? 20 : 12,
|
||||
marginLeft: -1,
|
||||
borderLeft: `2px solid ${isActive ? "var(--accent)" : "transparent"}`,
|
||||
color: isActive ? "var(--accent)" : "var(--ink-2)",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{it.text}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { PenSquare, Home, Bell, Settings, LogIn, UserPlus } from "lucide-react";
|
||||
import { PenSquare, Home } from "lucide-react";
|
||||
import type { BoardWithCount, User } from "@/lib/api";
|
||||
|
||||
// 首页壳内板块切换：仅替换中栏帖子流，不离开工作台
|
||||
@@ -54,28 +54,6 @@ export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user:
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ borderTop: "1px solid var(--line)" }} className="pt-3 space-y-0.5">
|
||||
{user ? (
|
||||
<>
|
||||
<Link href="/notifications" className="j13-raillink">
|
||||
<Bell size={16} className="shrink-0" /> 通知中心
|
||||
</Link>
|
||||
<Link href="/settings" className="j13-raillink">
|
||||
<Settings size={16} className="shrink-0" /> 账号设置
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link href="/login" className="j13-raillink">
|
||||
<LogIn size={16} className="shrink-0" /> 登录
|
||||
</Link>
|
||||
<Link href="/register" className="j13-raillink">
|
||||
<UserPlus size={16} className="shrink-0" /> 注册账号
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
@@ -84,6 +84,10 @@ export interface PostListItem {
|
||||
comment_count: number;
|
||||
liked: boolean;
|
||||
created_at: string;
|
||||
last_reply?: {
|
||||
user: Pick<User, "id" | "username" | "nickname" | "avatar">;
|
||||
created_at: string;
|
||||
} | null;
|
||||
board: Board;
|
||||
user: User;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user