feat: 新增大量社区功能与基础组件，优化站点整体体验
- 新增事件总线式toast通知系统 - 新增头像、阅读进度、404/500错误页等基础组件 - 重构页脚、布局、分页、点赞按钮等现有组件 - 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能 - 优化登录注册页面样式与交互 - 修复路径类型文件引用，更新站点元信息与字体配置
This commit is contained in:
@@ -1,9 +1,11 @@
|
||||
import Link from "next/link";
|
||||
import { Metadata } from "next";
|
||||
import type { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import { PenSquare, MessagesSquare, ChevronRight } from "lucide-react";
|
||||
import { fetchPosts, fetchBoards } from "@/lib/api";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import LikeButton from "@/components/LikeButton";
|
||||
import PostRow from "@/components/PostRow";
|
||||
import PinnedPosts from "@/components/PinnedPosts";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
@@ -15,7 +17,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
|
||||
const { boards } = await fetchBoards();
|
||||
const board = boards.find((b) => b.id === Number(id));
|
||||
return {
|
||||
title: board ? `${board.name} - 姜十三论坛` : "板块 - 姜十三论坛",
|
||||
title: board ? `${board.name} · 姜十三论坛` : "板块 · 姜十三论坛",
|
||||
description: board?.description || "板块帖子列表",
|
||||
};
|
||||
}
|
||||
@@ -29,62 +31,111 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
|
||||
fetchPosts(page, 20, Number(id), "latest", "", cookie),
|
||||
fetchBoards(),
|
||||
]);
|
||||
const board = boardsData.boards.find((b) => b.id === Number(id));
|
||||
const boardIndex = boardsData.boards.findIndex((b) => b.id === Number(id));
|
||||
const board = boardIndex >= 0 ? boardsData.boards[boardIndex] : null;
|
||||
|
||||
// 第一页：置顶帖独立成区，列表只保留非置顶
|
||||
const pinned = page === 1 ? postsData.posts.filter((p) => p.pinned > 0) : [];
|
||||
const rows = page === 1 ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
|
||||
<Link href="/" className="hover:underline">首页</Link>
|
||||
<span className="mx-2">/</span>
|
||||
<span>{board?.name || "板块"}</span>
|
||||
{/* 面包屑 */}
|
||||
<nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--accent)" }}>{board?.name || "未知板块"}</span>
|
||||
</nav>
|
||||
|
||||
<h1 className="text-2xl font-bold mb-2">{board?.name}</h1>
|
||||
<p className="mb-6" style={{ color: "var(--text-secondary)" }}>{board?.description}</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
{postsData.posts.map((post) => (
|
||||
<div
|
||||
key={post.id}
|
||||
className="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-1">
|
||||
{post.pinned > 0 && (
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
|
||||
<div className="panel p-6 sm:p-7 mb-6 relative overflow-hidden">
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute -top-16 -right-12 w-48 h-48 rounded-full"
|
||||
style={{ background: "var(--accent-soft)" }}
|
||||
/>
|
||||
<div className="relative flex items-end justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-4">
|
||||
<span
|
||||
className={`av-${Math.max(0, boardIndex) % 8} w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center text-2xl font-extrabold shrink-0`}
|
||||
>
|
||||
{board?.name.slice(0, 1) || "?"}
|
||||
</span>
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
{board?.name || "未知板块"}
|
||||
</h1>
|
||||
{board?.description && (
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--ink-2)" }}>
|
||||
{board.description}
|
||||
</p>
|
||||
)}
|
||||
{post.recommended && (
|
||||
<span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
|
||||
)}
|
||||
</div>
|
||||
<Link href={`/post/${post.id}`}>
|
||||
<h2 className="font-semibold mb-1 hover:underline">{post.title}</h2>
|
||||
</Link>
|
||||
<div className="flex items-center justify-between gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
|
||||
{post.user.nickname}
|
||||
</Link>
|
||||
<span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
|
||||
<span>💬 {post.comment_count}</span>
|
||||
<span>👁 {post.view_count}</span>
|
||||
</div>
|
||||
<LikeButton postId={String(post.id)} liked={post.liked} likeCount={post.like_count} variant="compact" />
|
||||
<p className="meta mt-1.5">{postsData.total} 篇讨论</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{postsData.posts.length === 0 && (
|
||||
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
|
||||
该板块暂无帖子
|
||||
</p>
|
||||
)}
|
||||
<Link href="/compose" className="btn btn-primary">
|
||||
<PenSquare size={15} /> 在此板块发帖
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_290px] gap-6">
|
||||
<div>
|
||||
<PinnedPosts posts={pinned} showBoard={false} />
|
||||
{rows.length > 0 ? (
|
||||
<div className="panel overflow-hidden">
|
||||
<div className="px-4 sm:px-5 py-3.5 flex items-center justify-between" style={{ borderBottom: "1px solid var(--line)" }}>
|
||||
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>全部讨论</span>
|
||||
<span className="meta text-xs">第 {page} 页</span>
|
||||
</div>
|
||||
{rows.map((post) => (
|
||||
<PostRow key={post.id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
pinned.length === 0 && (
|
||||
<div className="panel text-center py-20 px-6">
|
||||
<span
|
||||
className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<MessagesSquare size={26} />
|
||||
</span>
|
||||
<p className="font-bold text-lg" style={{ color: "var(--ink)" }}>该板块还没有帖子</p>
|
||||
<p className="meta mt-1.5">来发第一篇，抢占沙发</p>
|
||||
<Link href="/compose" className="btn btn-primary mt-6">
|
||||
<PenSquare size={15} /> 写新帖
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<Pagination total={postsData.total} page={page} size={20} basePath={`/board/${id}`} />
|
||||
</div>
|
||||
|
||||
<aside>
|
||||
<div className="panel p-5">
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>其他板块</p>
|
||||
<div className="space-y-1">
|
||||
{boardsData.boards
|
||||
.map((b, i) => ({ b, i }))
|
||||
.filter(({ b }) => b.id !== Number(id))
|
||||
.map(({ b, i }) => (
|
||||
<Link
|
||||
key={b.id}
|
||||
href={`/board/${b.id}`}
|
||||
className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-xl transition-colors hover:bg-[var(--panel-2)]"
|
||||
>
|
||||
<span className={`av-${i % 8} w-8 h-8 rounded-xl flex items-center justify-center text-[13px] font-bold shrink-0`}>
|
||||
{b.name.slice(0, 1)}
|
||||
</span>
|
||||
<span className="text-sm font-medium flex-1 truncate group-hover:text-[var(--accent)] transition-colors" style={{ color: "var(--ink)" }}>
|
||||
{b.name}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<Pagination
|
||||
total={postsData.total}
|
||||
page={page}
|
||||
size={20}
|
||||
basePath={`/board/${id}`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ChevronRight, PenSquare } from "lucide-react";
|
||||
import { apiCreatePost, apiMe, fetchBoards, type Board } from "@/lib/api";
|
||||
|
||||
export default function ComposePage() {
|
||||
@@ -15,7 +17,6 @@ export default function ComposePage() {
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
// 通过 /api/me 检查登录态（HttpOnly cookie 自动携带）
|
||||
apiMe()
|
||||
.then((res) => {
|
||||
if (!res.user) {
|
||||
@@ -54,68 +55,93 @@ export default function ComposePage() {
|
||||
|
||||
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 text-[13px]">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--accent)" }}>发布新帖</span>
|
||||
</nav>
|
||||
|
||||
<div className="mb-7 flex items-center gap-3.5">
|
||||
<span
|
||||
className="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<PenSquare size={22} />
|
||||
</span>
|
||||
<div>
|
||||
<label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>板块</label>
|
||||
<h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight leading-tight" style={{ color: "var(--ink)" }}>
|
||||
发布新帖
|
||||
</h1>
|
||||
<p className="meta mt-0.5">清晰的标题和内容，更容易获得回应</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="panel p-5 sm:p-7 space-y-5">
|
||||
{error && <div className="alert-error">{error}</div>}
|
||||
|
||||
<div>
|
||||
<label className="field-label">选择板块</label>
|
||||
<select
|
||||
value={boardId}
|
||||
onChange={(e) => setBoardId(Number(e.target.value))}
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
>
|
||||
{boards.map((b) => (
|
||||
<option key={b.id} value={b.id}>{b.name}</option>
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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}
|
||||
placeholder="帖子标题"
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
placeholder="一句话说清楚你要讨论什么"
|
||||
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}
|
||||
placeholder="帖子内容，支持 Markdown 格式..."
|
||||
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}
|
||||
placeholder="# 开头写结论 支持 Markdown 语法..."
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<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)" }}
|
||||
>
|
||||
{loading ? "发布中..." : "发布帖子"}
|
||||
</button>
|
||||
|
||||
<div className="flex gap-3 pt-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !title.trim() || !content.trim()}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{loading ? "发布中..." : "发布帖子"}
|
||||
</button>
|
||||
<Link href="/" className="btn btn-line">
|
||||
取消
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
|
||||
45
frontend/app/error.tsx
Normal file
45
frontend/app/error.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { CloudOff, RotateCcw } from "lucide-react";
|
||||
|
||||
export default function Error({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string };
|
||||
reset: () => void;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
console.error(error);
|
||||
}, [error]);
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto text-center py-20 sm:py-28">
|
||||
<span
|
||||
className="inline-flex w-16 h-16 rounded-full items-center justify-center mb-6"
|
||||
style={{ background: "var(--clay-soft)", color: "var(--clay)" }}
|
||||
>
|
||||
<CloudOff size={30} />
|
||||
</span>
|
||||
<p className="text-[15px] font-extrabold tracking-wide mb-1" style={{ color: "var(--clay)" }}>
|
||||
500
|
||||
</p>
|
||||
<h1 className="text-2xl font-extrabold mb-2" style={{ color: "var(--ink)" }}>
|
||||
页面出了点问题
|
||||
</h1>
|
||||
<p className="text-sm mb-8" style={{ color: "var(--ink-2)" }}>
|
||||
可以重试，或先回首页看看其他内容
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<button onClick={reset} className="btn btn-primary">
|
||||
<RotateCcw size={15} /> 重试
|
||||
</button>
|
||||
<Link href="/" className="btn btn-line">
|
||||
返回首页
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +1,472 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ============================================================
|
||||
姜十三论坛 · WARM CORNER 设计系统
|
||||
暖白纸面 / 圆润卡片 / 柔和投影 / 青绿主色 / 陶土辅色
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--text: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--border: #e2e8f0;
|
||||
--primary: #3b82f6;
|
||||
--primary-hover: #2563eb;
|
||||
/* 浅色（默认） */
|
||||
--bg: #f6f2ea;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #faf6ef;
|
||||
--tint: #f1ebe0;
|
||||
--ink: #2c2620;
|
||||
--ink-2: #6b6257;
|
||||
--ink-3: #7c7365;
|
||||
--line: #ece4d8;
|
||||
--line-2: #ddd2c1;
|
||||
|
||||
--accent: #0e6f66;
|
||||
--accent-hi: #0b5c54;
|
||||
--accent-soft: rgba(14, 111, 102, 0.1);
|
||||
--accent-on: #fdfbf6; /* 暖白，与暖纸底色协调，而非冷纯白 */
|
||||
|
||||
--clay: #b85c42;
|
||||
--clay-soft: rgba(200, 105, 77, 0.12);
|
||||
--gold: #9a6b1f;
|
||||
--gold-soft: rgba(176, 124, 30, 0.13);
|
||||
|
||||
--danger: #d23b32;
|
||||
--danger-soft: rgba(210, 59, 50, 0.09);
|
||||
--ok: #2f8f4e;
|
||||
--ok-soft: rgba(47, 143, 78, 0.1);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(87, 66, 36, 0.05);
|
||||
--shadow: 0 2px 8px rgba(87, 66, 36, 0.05), 0 10px 28px rgba(87, 66, 36, 0.05);
|
||||
--shadow-lg: 0 6px 16px rgba(87, 66, 36, 0.07), 0 20px 48px rgba(87, 66, 36, 0.1);
|
||||
|
||||
--font-display: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, "PingFang SC",
|
||||
"Microsoft YaHei", system-ui, sans-serif;
|
||||
--font-sans: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, "PingFang SC",
|
||||
"Microsoft YaHei", system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, "Cascadia Code",
|
||||
Consolas, monospace;
|
||||
|
||||
--r: 18px;
|
||||
--r-sm: 12px;
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--bg: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--text: #e2e8f0;
|
||||
--text-secondary: #94a3b8;
|
||||
--border: #334155;
|
||||
--primary: #60a5fa;
|
||||
--primary-hover: #3b82f6;
|
||||
--bg: #181510;
|
||||
--panel: #221e18;
|
||||
--panel-2: #2a251e;
|
||||
--tint: #312b22;
|
||||
--ink: #f3ede2;
|
||||
--ink-2: #c3b9a9;
|
||||
--ink-3: #9d9383;
|
||||
--line: rgba(243, 237, 226, 0.09);
|
||||
--line-2: rgba(243, 237, 226, 0.17);
|
||||
|
||||
--accent: #2dd4bf;
|
||||
--accent-hi: #5eead4;
|
||||
--accent-soft: rgba(45, 212, 191, 0.15);
|
||||
--accent-on: #0c2420;
|
||||
|
||||
--clay: #e89070;
|
||||
--clay-soft: rgba(232, 144, 112, 0.16);
|
||||
--gold: #d8ae5e;
|
||||
--gold-soft: rgba(216, 174, 94, 0.16);
|
||||
|
||||
--danger: #f26b5e;
|
||||
--danger-soft: rgba(242, 107, 94, 0.15);
|
||||
--ok: #6fcf8e;
|
||||
--ok-soft: rgba(111, 207, 142, 0.15);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.22);
|
||||
--shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.3);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: var(--line);
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: var(--line-2) transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--text);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* Markdown 内容样式 */
|
||||
.prose-content h1 { font-size: 1.875rem; font-weight: 700; margin: 1rem 0; }
|
||||
.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0; }
|
||||
.prose-content h3 { font-size: 1.25rem; font-weight: 600; margin: 0.75rem 0; }
|
||||
.prose-content p { margin: 0.75rem 0; line-height: 1.7; }
|
||||
.prose-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.75rem 0; }
|
||||
.prose-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.75rem 0; }
|
||||
.prose-content code { background: var(--bg-secondary); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
|
||||
.prose-content pre { background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; }
|
||||
.prose-content pre code { background: none; padding: 0; }
|
||||
.prose-content blockquote { border-left: 4px solid var(--border); padding-left: 1rem; color: var(--text-secondary); margin: 1rem 0; }
|
||||
.prose-content a { color: var(--primary); text-decoration: underline; }
|
||||
.prose-content img { max-width: 100%; border-radius: 0.5rem; }
|
||||
::selection {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--line-2);
|
||||
border-radius: 99px;
|
||||
border: 3px solid var(--bg);
|
||||
}
|
||||
|
||||
/* 链接重置放入 base 层：避免未分层规则击败 components 层的 .btn-primary 等类
|
||||
（Tailwind v4 中未分层样式优先级高于任何 @layer） */
|
||||
@layer base {
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2.5px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* ----- 小标签（旧名 .kicker 保留兼容） ----- */
|
||||
.kicker {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
/* ----- 卡片 ----- */
|
||||
.panel {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.hover-lift {
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow);
|
||||
border-color: var(--line-2);
|
||||
}
|
||||
|
||||
/* ----- 按钮（胶囊） ----- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s,
|
||||
transform 0.12s ease, box-shadow 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn:active { transform: scale(0.97); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
box-shadow: 0 1px 2px rgba(87, 66, 36, 0.12), 0 2px 8px rgba(14, 111, 102, 0.16);
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-hi);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 6px rgba(87, 66, 36, 0.1), 0 8px 20px rgba(14, 111, 102, 0.24);
|
||||
}
|
||||
.btn-primary:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-line {
|
||||
background: var(--panel);
|
||||
border-color: var(--line-2);
|
||||
color: var(--ink);
|
||||
}
|
||||
.btn-line:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-sm { padding: 7px 14px; font-size: 13px; }
|
||||
|
||||
/* ----- 表单 ----- */
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.field {
|
||||
width: 100%;
|
||||
padding: 12px 15px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--line-2);
|
||||
border-radius: var(--r-sm);
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
font-family: var(--font-sans);
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
}
|
||||
.field::placeholder { color: var(--ink-3); opacity: 0.8; }
|
||||
.field:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3.5px var(--accent-soft);
|
||||
background: var(--panel);
|
||||
}
|
||||
textarea.field {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 15px;
|
||||
line-height: 1.75;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ----- 标签 / 徽标 ----- */
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
padding: 4px 12px;
|
||||
background: var(--tint);
|
||||
color: var(--ink-2);
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
a.chip:hover {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
}
|
||||
.badge-pin {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 11px;
|
||||
background: var(--clay-soft);
|
||||
color: var(--clay);
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge-rec {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 11px;
|
||||
background: var(--gold-soft);
|
||||
color: var(--gold);
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ----- 分页 ----- */
|
||||
.pager-btn {
|
||||
background: var(--panel);
|
||||
border-color: var(--line);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.pager-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.pager-btn.is-current,
|
||||
.pager-btn.is-current:hover {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-on);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ----- 辅助 ----- */
|
||||
.meta {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12.5px;
|
||||
color: var(--ink-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.link-accent { color: var(--accent); }
|
||||
.link-accent:hover { color: var(--accent-hi); }
|
||||
|
||||
.alert-error {
|
||||
padding: 12px 15px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
border-radius: var(--r-sm);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.alert-ok {
|
||||
padding: 12px 15px;
|
||||
border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
|
||||
background: var(--ok-soft);
|
||||
color: var(--ok);
|
||||
border-radius: var(--r-sm);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Markdown 正文
|
||||
============================================================ */
|
||||
.prose-content { font-size: 16.5px; line-height: 1.85; color: var(--ink); }
|
||||
.prose-content h1 { font-size: 1.75rem; font-weight: 800; margin: 1.6rem 0 0.8rem; }
|
||||
.prose-content h2 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
margin: 1.9rem 0 0.7rem;
|
||||
padding-bottom: 0.45rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.prose-content h3 { font-size: 1.18rem; font-weight: 700; margin: 1.5rem 0 0.6rem; }
|
||||
.prose-content p { margin: 0.9rem 0; }
|
||||
.prose-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.9rem 0; }
|
||||
.prose-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.9rem 0; }
|
||||
.prose-content li { margin: 0.35rem 0; }
|
||||
.prose-content code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--tint);
|
||||
padding: 0.12rem 0.45rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.86em;
|
||||
}
|
||||
.prose-content pre {
|
||||
background: var(--panel-2) !important;
|
||||
border: 1px solid var(--line);
|
||||
padding: 1.05rem 1.15rem;
|
||||
border-radius: var(--r-sm);
|
||||
overflow-x: auto;
|
||||
margin: 1.15rem 0;
|
||||
}
|
||||
.prose-content pre code { background: none; padding: 0; border-radius: 0; }
|
||||
.prose-content blockquote {
|
||||
border-left: 3px solid var(--accent);
|
||||
background: var(--accent-soft);
|
||||
border-radius: 0 var(--r-sm) var(--r-sm) 0;
|
||||
padding: 0.7rem 1.1rem;
|
||||
color: var(--ink-2);
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
.prose-content a {
|
||||
color: var(--accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.prose-content img {
|
||||
max-width: 100%;
|
||||
border-radius: var(--r-sm);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.prose-content hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }
|
||||
.prose-content strong { font-weight: 700; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
|
||||
}
|
||||
|
||||
/* 头像配色（浅/暗各自保证可读） */
|
||||
.av-0 { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
|
||||
.av-1 { background: rgba(200, 105, 77, 0.14); color: #b85c42; }
|
||||
.av-2 { background: rgba(176, 124, 30, 0.15); color: #9a6b1f; }
|
||||
.av-3 { background: rgba(91, 111, 181, 0.14); color: #4c61ab; }
|
||||
.av-4 { background: rgba(122, 92, 168, 0.14); color: #6f50a0; }
|
||||
.av-5 { background: rgba(79, 138, 95, 0.15); color: #477e55; }
|
||||
.av-6 { background: rgba(192, 106, 139, 0.14); color: #b1557a; }
|
||||
.av-7 { background: rgba(63, 134, 147, 0.14); color: #357985; }
|
||||
.dark .av-0 { background: rgba(45, 212, 191, 0.16); color: #5eead4; }
|
||||
.dark .av-1 { background: rgba(232, 144, 112, 0.18); color: #f0a484; }
|
||||
.dark .av-2 { background: rgba(216, 174, 94, 0.18); color: #e3bf74; }
|
||||
.dark .av-3 { background: rgba(130, 150, 224, 0.18); color: #a7b8f0; }
|
||||
.dark .av-4 { background: rgba(178, 150, 224, 0.18); color: #c3abe8; }
|
||||
.dark .av-5 { background: rgba(129, 201, 148, 0.18); color: #99ddac; }
|
||||
.dark .av-6 { background: rgba(235, 148, 180, 0.18); color: #f0a5c2; }
|
||||
.dark .av-7 { background: rgba(102, 190, 206, 0.18); color: #84d4e0; }
|
||||
|
||||
/* ============================================================
|
||||
微交互
|
||||
============================================================ */
|
||||
@keyframes j13-toast-in {
|
||||
from { opacity: 0; transform: translateY(10px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
.j13-toast-in { animation: j13-toast-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
|
||||
|
||||
@keyframes j13-heart-pop {
|
||||
0% { transform: scale(1); }
|
||||
45% { transform: scale(1.4); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
.j13-heart-pop { animation: j13-heart-pop 0.26s ease-out; }
|
||||
|
||||
@keyframes j13-fade-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.j13-fade-up { animation: j13-fade-up 0.3s ease-out both; }
|
||||
|
||||
/* 跳到主内容 */
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10001;
|
||||
padding: 10px 18px;
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
background: var(--accent);
|
||||
color: var(--accent-on);
|
||||
border-radius: 999px;
|
||||
transform: translateY(-200%);
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
.skip-link:focus-visible {
|
||||
transform: translateY(0);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* 阅读进度条 */
|
||||
.reading-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
z-index: 60;
|
||||
background: var(--accent);
|
||||
transform-origin: 0 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -3,12 +3,16 @@ import { cookies } from "next/headers";
|
||||
import "./globals.css";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import Toaster from "@/components/Toaster";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "姜十三论坛",
|
||||
title: {
|
||||
default: "姜十三论坛 · J13 FORUM",
|
||||
template: "%s · 姜十三论坛",
|
||||
},
|
||||
description: "姜十三论坛 - 技术分享与讨论社区",
|
||||
openGraph: {
|
||||
title: "姜十三论坛",
|
||||
title: "姜十三论坛 · J13 FORUM",
|
||||
description: "姜十三论坛 - 技术分享与讨论社区",
|
||||
type: "website",
|
||||
},
|
||||
@@ -20,16 +24,33 @@ export default async function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const cookieStore = await cookies();
|
||||
const theme = cookieStore.get("j13-theme")?.value || "light";
|
||||
// 浅色优先的设计系统，仅在显式选择暗色时挂 .dark
|
||||
const theme = cookieStore.get("j13-theme")?.value === "dark" ? "dark" : "light";
|
||||
|
||||
return (
|
||||
<html lang="zh-CN" className={theme === "dark" ? "dark" : ""}>
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body className="min-h-screen flex flex-col">
|
||||
<a href="#main" className="skip-link">
|
||||
跳到主要内容
|
||||
</a>
|
||||
<Header />
|
||||
<main className="flex-1 max-w-5xl mx-auto w-full px-4 py-6">
|
||||
<main
|
||||
id="main"
|
||||
tabIndex={-1}
|
||||
className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-7 sm:py-9 outline-none"
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
<Toaster />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { MessagesSquare } from "lucide-react";
|
||||
import { apiLogin } from "@/lib/api";
|
||||
|
||||
export default function LoginPage() {
|
||||
@@ -32,45 +33,57 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto mt-12">
|
||||
<h1 className="text-2xl font-bold mb-6 text-center">登录</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>
|
||||
)}
|
||||
<div className="max-w-md mx-auto pt-8 sm:pt-14">
|
||||
<div className="mb-7 text-center">
|
||||
<span
|
||||
className="inline-flex w-14 h-14 rounded-2xl items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<MessagesSquare size={26} />
|
||||
</span>
|
||||
<h1 className="text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
欢迎回来
|
||||
</h1>
|
||||
<p className="text-sm mt-2" style={{ color: "var(--ink-2)" }}>
|
||||
登录后发帖、评论与点赞
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="panel p-6 sm:p-7 space-y-4">
|
||||
{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={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
autoFocus
|
||||
className="field"
|
||||
placeholder="testuser"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>密码</label>
|
||||
<label className="field-label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
placeholder="••••••"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-2 rounded-lg text-white disabled:opacity-50"
|
||||
style={{ background: "var(--primary)" }}
|
||||
>
|
||||
<button type="submit" disabled={loading} className="btn btn-primary w-full justify-center mt-2">
|
||||
{loading ? "登录中..." : "登录"}
|
||||
</button>
|
||||
</form>
|
||||
<p className="text-center mt-4 text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
还没有账号？<Link href="/register" className="hover:underline" style={{ color: "var(--primary)" }}>立即注册</Link>
|
||||
|
||||
<p className="meta text-center mt-5">
|
||||
还没有账号？
|
||||
<Link href="/register" className="ml-1 font-semibold" style={{ color: "var(--accent)" }}>
|
||||
立即注册
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
32
frontend/app/not-found.tsx
Normal file
32
frontend/app/not-found.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import Link from "next/link";
|
||||
import { Compass, Home } from "lucide-react";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="max-w-md mx-auto text-center py-20 sm:py-28">
|
||||
<span
|
||||
className="inline-flex w-16 h-16 rounded-full items-center justify-center mb-6"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<Compass size={30} />
|
||||
</span>
|
||||
<p className="text-[15px] font-extrabold tracking-wide mb-1" style={{ color: "var(--accent)" }}>
|
||||
404
|
||||
</p>
|
||||
<h1 className="text-2xl font-extrabold mb-2" style={{ color: "var(--ink)" }}>
|
||||
这一页走丢了
|
||||
</h1>
|
||||
<p className="text-sm mb-8" style={{ color: "var(--ink-2)" }}>
|
||||
链接可能已失效，或帖子已被作者删除
|
||||
</p>
|
||||
<div className="flex items-center justify-center gap-3">
|
||||
<Link href="/" className="btn btn-primary">
|
||||
<Home size={15} /> 返回首页
|
||||
</Link>
|
||||
<Link href="/board/1" className="btn btn-line">
|
||||
逛逛板块
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { Heart, MessageCircle, CheckCheck } from "lucide-react";
|
||||
import { Heart, MessageCircle, CheckCheck, Bell, ChevronRight } from "lucide-react";
|
||||
import {
|
||||
apiFetchNotifications,
|
||||
apiMarkRead,
|
||||
@@ -60,68 +60,84 @@ export default function NotificationsPage() {
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold" style={{ color: "var(--text)" }}>通知中心</h1>
|
||||
<nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--accent)" }}>通知中心</span>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-end justify-between mb-6 gap-4">
|
||||
<h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
通知中心
|
||||
</h1>
|
||||
{hasUnread && (
|
||||
<button
|
||||
onClick={handleMarkAll}
|
||||
className="flex items-center gap-1 text-sm hover:opacity-80"
|
||||
style={{ color: "var(--primary)" }}
|
||||
>
|
||||
<CheckCheck size={16} /> 全部标记已读
|
||||
<button onClick={handleMarkAll} className="btn btn-line btn-sm">
|
||||
<CheckCheck size={14} /> 全部已读
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>加载中...</p>
|
||||
<div className="panel text-center py-16">
|
||||
<p className="meta">正在加载通知…</p>
|
||||
</div>
|
||||
) : notifications.length === 0 ? (
|
||||
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>暂无通知</p>
|
||||
<div className="panel text-center py-20 px-6">
|
||||
<span
|
||||
className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<Bell size={26} />
|
||||
</span>
|
||||
<p className="font-bold text-lg" style={{ color: "var(--ink)" }}>还没有通知</p>
|
||||
<p className="meta mt-1.5">当有人评论或点赞你的帖子时，会在这里提醒你</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{notifications.map((n) => (
|
||||
<div className="panel overflow-hidden p-0">
|
||||
{notifications.map((n, i) => (
|
||||
<button
|
||||
key={n.id}
|
||||
onClick={() => handleClick(n)}
|
||||
className="w-full text-left p-4 rounded-lg border hover:shadow-sm transition-shadow"
|
||||
className="w-full text-left px-4 sm:px-5 py-4 flex items-start gap-3.5 transition-colors hover:bg-[var(--panel-2)]"
|
||||
style={{
|
||||
borderColor: "var(--border)",
|
||||
background: n.is_read ? "var(--bg)" : "var(--bg-secondary)",
|
||||
borderTop: i === 0 ? "none" : "1px solid var(--line)",
|
||||
background: n.is_read ? "transparent" : "var(--panel-2)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span style={{ color: n.type === "like" ? "#ef4444" : "var(--primary)" }}>
|
||||
{n.type === "like" ? <Heart size={18} /> : <MessageCircle size={18} />}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm" style={{ color: "var(--text)" }}>
|
||||
<Link
|
||||
href={`/u/${n.actor.id}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="font-medium hover:underline"
|
||||
>
|
||||
{n.actor.nickname}
|
||||
</Link>{" "}
|
||||
<span style={{ color: "var(--text-secondary)" }}>
|
||||
{n.type === "comment" ? "评论了你的帖子" : "点赞了你的帖子"}
|
||||
</span>
|
||||
<span
|
||||
className="w-10 h-10 shrink-0 rounded-full flex items-center justify-center"
|
||||
style={{
|
||||
color: n.type === "like" ? "var(--clay)" : "var(--accent)",
|
||||
background:
|
||||
n.type === "like" ? "var(--clay-soft)" : "var(--accent-soft)",
|
||||
}}
|
||||
>
|
||||
{n.type === "like" ? <Heart size={16} /> : <MessageCircle size={16} />}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-snug" style={{ color: "var(--ink)" }}>
|
||||
<Link
|
||||
href={`/u/${n.actor.id}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="font-semibold hover:text-[var(--accent)] transition-colors"
|
||||
>
|
||||
{n.actor.nickname}
|
||||
</Link>{" "}
|
||||
<span className="meta">{n.type === "comment" ? "评论了你的帖子" : "点赞了你的帖子"}</span>
|
||||
</p>
|
||||
<p className="text-sm mt-1 truncate" style={{ color: "var(--ink-2)" }}>
|
||||
《{n.post.title}》
|
||||
</p>
|
||||
{n.content && (
|
||||
<p className="text-[13px] mt-1.5 line-clamp-2" style={{ color: "var(--ink-3)" }}>
|
||||
{n.content}
|
||||
</p>
|
||||
<p className="text-sm mt-1 font-medium truncate" style={{ color: "var(--text)" }}>
|
||||
《{n.post.title}》
|
||||
</p>
|
||||
{n.content && (
|
||||
<p className="text-sm mt-1 line-clamp-2" style={{ color: "var(--text-secondary)" }}>
|
||||
{n.content}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs mt-2" style={{ color: "var(--text-secondary)" }}>
|
||||
{formatTime(n.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
{!n.is_read && (
|
||||
<span className="w-2.5 h-2.5 rounded-full shrink-0 mt-1.5" style={{ background: "var(--primary)" }} />
|
||||
)}
|
||||
<p className="meta text-xs mt-2">{formatTime(n.created_at)}</p>
|
||||
</div>
|
||||
{!n.is_read && (
|
||||
<span className="w-2.5 h-2.5 shrink-0 mt-2 rounded-full" style={{ background: "var(--clay)" }} />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
import Link from "next/link";
|
||||
import { Metadata } from "next";
|
||||
import type { Metadata } from "next";
|
||||
import { cookies } from "next/headers";
|
||||
import { PenSquare, SearchX, MessagesSquare, Check, ArrowRight } from "lucide-react";
|
||||
import { fetchPosts, fetchBoards } from "@/lib/api";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import LikeButton from "@/components/LikeButton";
|
||||
import PostRow from "@/components/PostRow";
|
||||
import FeaturePost from "@/components/FeaturePost";
|
||||
import PinnedPosts from "@/components/PinnedPosts";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "姜十三论坛 - 技术分享与讨论社区",
|
||||
title: "姜十三论坛 · 技术讨论社区",
|
||||
description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
|
||||
openGraph: {
|
||||
title: "姜十三论坛 - 技术分享与讨论社区",
|
||||
description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
|
||||
type: "website",
|
||||
},
|
||||
};
|
||||
|
||||
interface HomePageProps {
|
||||
@@ -29,84 +27,179 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
fetchBoards(),
|
||||
]);
|
||||
|
||||
// 第一页且非搜索时拆分为三段：管理员置顶 → 今日精选（首条非置顶）→ 普通列表
|
||||
const split = page === 1 && !keyword;
|
||||
const pinned = split ? postsData.posts.filter((p) => p.pinned > 0) : [];
|
||||
const normal = split ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
|
||||
const feature = split && normal.length > 0 ? normal[0] : null;
|
||||
const rows = feature ? normal.slice(1) : normal;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
{/* 主内容：帖子列表 */}
|
||||
<div className="md:col-span-3">
|
||||
<h1 className="text-2xl font-bold mb-4">
|
||||
{keyword ? `搜索结果："${keyword}"` : "最新帖子"}
|
||||
</h1>
|
||||
<div className="space-y-3">
|
||||
{postsData.posts.map((post) => (
|
||||
<div
|
||||
key={post.id}
|
||||
className="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)" }}
|
||||
>
|
||||
{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>
|
||||
<Link href={`/post/${post.id}`}>
|
||||
<h2 className="font-semibold mb-1 hover:underline" style={{ color: "var(--text)" }}>
|
||||
{post.title}
|
||||
</h2>
|
||||
</Link>
|
||||
<div className="flex items-center justify-between gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
|
||||
{post.user.nickname}
|
||||
</Link>
|
||||
<span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
|
||||
<span>💬 {post.comment_count}</span>
|
||||
<span>👁 {post.view_count}</span>
|
||||
</div>
|
||||
<LikeButton postId={String(post.id)} liked={post.liked} likeCount={post.like_count} variant="compact" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{postsData.posts.length === 0 && (
|
||||
<p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
|
||||
{keyword ? "没有找到相关帖子" : "暂无帖子，来发第一篇吧！"}
|
||||
</p>
|
||||
)}
|
||||
<div>
|
||||
{/* 页头 */}
|
||||
<div className="flex items-end justify-between gap-4 mb-6">
|
||||
<div>
|
||||
<h1 className="text-[26px] sm:text-[32px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
{keyword ? (
|
||||
<>
|
||||
搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
|
||||
</>
|
||||
) : (
|
||||
"最新讨论"
|
||||
)}
|
||||
</h1>
|
||||
<p className="meta mt-2">
|
||||
{keyword
|
||||
? `共找到 ${postsData.total} 篇相关帖子`
|
||||
: `共 ${postsData.total} 篇帖子 · ${boardsData.boards.length} 个板块，欢迎加入讨论`}
|
||||
</p>
|
||||
</div>
|
||||
<Pagination
|
||||
total={postsData.total}
|
||||
page={page}
|
||||
size={20}
|
||||
basePath="/"
|
||||
query={keyword ? { q: keyword } : {}}
|
||||
/>
|
||||
<Link href="/compose" className="btn btn-primary hidden sm:inline-flex">
|
||||
<PenSquare size={16} /> 写新帖
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 侧边栏：板块列表 */}
|
||||
<aside className="md:col-span-1">
|
||||
<h2 className="text-lg font-bold mb-3">板块</h2>
|
||||
<div className="space-y-2">
|
||||
{boardsData.boards.map((board) => (
|
||||
<Link
|
||||
key={board.id}
|
||||
href={`/board/${board.id}`}
|
||||
className="block p-3 rounded-lg border hover:shadow-sm transition-shadow"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg-secondary)" }}
|
||||
>
|
||||
<div className="font-medium" style={{ color: "var(--text)" }}>{board.name}</div>
|
||||
<div className="text-xs mt-1" style={{ color: "var(--text-secondary)" }}>{board.description}</div>
|
||||
</Link>
|
||||
))}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_290px] gap-6">
|
||||
{/* 主列 */}
|
||||
<div>
|
||||
<PinnedPosts posts={pinned} />
|
||||
{feature && (
|
||||
<div className="mb-6">
|
||||
<FeaturePost post={feature} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="panel overflow-hidden">
|
||||
{rows.length > 0 ? (
|
||||
<>
|
||||
<div className="px-4 sm:px-5 py-3.5 flex items-center justify-between" style={{ borderBottom: "1px solid var(--line)" }}>
|
||||
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
|
||||
{keyword ? "搜索结果" : "全部讨论"}
|
||||
</span>
|
||||
<span className="meta text-xs">共 {postsData.total} 篇</span>
|
||||
</div>
|
||||
{rows.map((post) => (
|
||||
<PostRow key={post.id} post={post} boardHref />
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-center py-20 px-6">
|
||||
<span
|
||||
className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
{keyword ? <SearchX size={26} /> : <MessagesSquare size={26} />}
|
||||
</span>
|
||||
<p className="font-bold text-lg" style={{ color: "var(--ink)" }}>
|
||||
{keyword ? "没有找到相关帖子" : "还没有帖子"}
|
||||
</p>
|
||||
<p className="meta mt-1.5">
|
||||
{keyword ? `换个关键词试试，或者发起“${keyword}”相关的话题` : "成为第一个发起讨论的人吧"}
|
||||
</p>
|
||||
{keyword ? (
|
||||
<div className="flex items-center justify-center gap-3 mt-6">
|
||||
<Link href="/" className="btn btn-line">
|
||||
清除搜索
|
||||
</Link>
|
||||
<Link href="/compose" className="btn btn-primary">
|
||||
<PenSquare size={15} /> 发起这个话题
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<Link href="/compose" className="btn btn-primary mt-6">
|
||||
<PenSquare size={15} /> 写新帖
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
total={postsData.total}
|
||||
page={page}
|
||||
size={20}
|
||||
basePath="/"
|
||||
query={keyword ? { q: keyword } : undefined}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* 侧栏 */}
|
||||
<aside className="space-y-5">
|
||||
{/* 发帖引导 */}
|
||||
{!keyword && (
|
||||
<div
|
||||
className="p-5"
|
||||
style={{
|
||||
background: "var(--accent-soft)",
|
||||
borderRadius: "var(--r)",
|
||||
}}
|
||||
>
|
||||
<p className="font-extrabold text-[16px] mb-1" style={{ color: "var(--ink)" }}>
|
||||
有什么想聊的？
|
||||
</p>
|
||||
<p className="text-[13px] leading-relaxed mb-4" style={{ color: "var(--ink-2)" }}>
|
||||
分享你的想法、问题或经验，社区里有人正在等你的回答。
|
||||
</p>
|
||||
<Link
|
||||
href="/compose"
|
||||
className="btn btn-primary w-full justify-center"
|
||||
>
|
||||
<PenSquare size={15} /> 发起讨论
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="panel p-5">
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>板块导航</p>
|
||||
<div className="space-y-1">
|
||||
{boardsData.boards.map((b, i) => (
|
||||
<Link
|
||||
key={b.id}
|
||||
href={`/board/${b.id}`}
|
||||
className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-xl transition-colors hover:bg-[var(--panel-2)]"
|
||||
>
|
||||
<span
|
||||
className={`av-${i % 8} w-8 h-8 rounded-xl flex items-center justify-center text-[13px] font-bold shrink-0`}
|
||||
>
|
||||
{b.name.slice(0, 1)}
|
||||
</span>
|
||||
<span
|
||||
className="text-sm font-medium flex-1 truncate group-hover:text-[var(--accent)] transition-colors"
|
||||
style={{ color: "var(--ink)" }}
|
||||
>
|
||||
{b.name}
|
||||
</span>
|
||||
<ArrowRight size={14} className="opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" style={{ color: "var(--accent)" }} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="panel p-5">
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>社区守则</p>
|
||||
<ul className="space-y-3 text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
|
||||
<li className="flex gap-2.5">
|
||||
<span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
|
||||
<Check size={12} strokeWidth={3} />
|
||||
</span>
|
||||
标题清晰，内容支持 Markdown
|
||||
</li>
|
||||
<li className="flex gap-2.5">
|
||||
<span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
|
||||
<Check size={12} strokeWidth={3} />
|
||||
</span>
|
||||
友善讨论，就事论事
|
||||
</li>
|
||||
<li className="flex gap-2.5">
|
||||
<span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
|
||||
<Check size={12} strokeWidth={3} />
|
||||
</span>
|
||||
违规内容可向管理员举报
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Metadata } from "next";
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { cookies } from "next/headers";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
@@ -6,6 +6,10 @@ import { fetchPostDetail, fetchComments } from "@/lib/api";
|
||||
import CommentSection from "@/components/CommentSection";
|
||||
import PostActions from "@/components/PostActions";
|
||||
import LikeButton from "@/components/LikeButton";
|
||||
import ReadingProgress from "@/components/ReadingProgress";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import { IconComment, IconEye } from "@/components/Icons";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
@@ -16,7 +20,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
|
||||
try {
|
||||
const { post } = await fetchPostDetail(id);
|
||||
return {
|
||||
title: `${post.title} - 姜十三论坛`,
|
||||
title: post.title,
|
||||
description: post.content.slice(0, 160),
|
||||
openGraph: {
|
||||
title: post.title,
|
||||
@@ -25,7 +29,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
|
||||
},
|
||||
};
|
||||
} catch {
|
||||
return { title: "帖子不存在 - 姜十三论坛" };
|
||||
return { title: "帖子不存在" };
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,10 +46,7 @@ export default async function PostDetailPage({ params }: PageProps) {
|
||||
articleBody: post.content,
|
||||
datePublished: post.created_at,
|
||||
dateModified: post.updated_at,
|
||||
author: {
|
||||
"@type": "Person",
|
||||
name: post.user.nickname,
|
||||
},
|
||||
author: { "@type": "Person", name: post.user.nickname },
|
||||
commentCount: post.comment_count,
|
||||
interactionStatistic: {
|
||||
"@type": "InteractionCounter",
|
||||
@@ -56,42 +57,79 @@ export default async function PostDetailPage({ params }: PageProps) {
|
||||
|
||||
return (
|
||||
<article className="max-w-3xl mx-auto">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
<ReadingProgress />
|
||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
|
||||
<nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
|
||||
<Link href="/" className="hover:underline">首页</Link>
|
||||
<span className="mx-2">/</span>
|
||||
<Link href={`/board/${post.board.id}`} className="hover:underline">{post.board.name}</Link>
|
||||
<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>
|
||||
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{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>
|
||||
<h1 className="text-3xl font-bold mb-4">{post.title}</h1>
|
||||
<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 mb-6 pb-4 border-b" style={{ borderColor: "var(--border)" }}>
|
||||
<div className="flex items-center gap-4" style={{ color: "var(--text-secondary)" }}>
|
||||
<Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
|
||||
{post.user.nickname}
|
||||
</Link>
|
||||
<span>{new Date(post.created_at).toLocaleString("zh-CN")}</span>
|
||||
<span>👁 {post.view_count}</span>
|
||||
<span>💬 {post.comment_count}</span>
|
||||
<LikeButton postId={id} liked={post.liked} likeCount={post.like_count} />
|
||||
<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>
|
||||
</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>
|
||||
|
||||
{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="prose-content">
|
||||
<ReactMarkdown>{post.content}</ReactMarkdown>
|
||||
</div>
|
||||
<PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
|
||||
</div>
|
||||
|
||||
<div className="prose-content mb-8" style={{ color: "var(--text)" }}>
|
||||
<ReactMarkdown>{post.content}</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<CommentSection postId={id} comments={comments} />
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { UserPlus } from "lucide-react";
|
||||
import { apiRegister } from "@/lib/api";
|
||||
|
||||
export default function RegisterPage() {
|
||||
@@ -30,14 +31,26 @@ export default function RegisterPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto mt-12">
|
||||
<h1 className="text-2xl font-bold mb-6 text-center">注册</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>
|
||||
)}
|
||||
<div className="max-w-md mx-auto pt-8 sm:pt-14">
|
||||
<div className="mb-7 text-center">
|
||||
<span
|
||||
className="inline-flex w-14 h-14 rounded-2xl items-center justify-center mb-4"
|
||||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||||
>
|
||||
<UserPlus size={26} />
|
||||
</span>
|
||||
<h1 className="text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
创建账号
|
||||
</h1>
|
||||
<p className="text-sm mt-2" style={{ color: "var(--ink-2)" }}>
|
||||
加入姜十三，开始你的第一帖
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="panel p-6 sm:p-7 space-y-4">
|
||||
{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={username}
|
||||
@@ -45,43 +58,43 @@ export default function RegisterPage() {
|
||||
required
|
||||
minLength={3}
|
||||
maxLength={32}
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
autoFocus
|
||||
className="field"
|
||||
placeholder="3–32 位"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>邮箱（可选）</label>
|
||||
<label className="field-label">邮箱（可选）</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>密码</label>
|
||||
<label className="field-label">密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
className="w-full px-3 py-2 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
placeholder="至少 6 位"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-2 rounded-lg text-white disabled:opacity-50"
|
||||
style={{ background: "var(--primary)" }}
|
||||
>
|
||||
<button type="submit" disabled={loading} className="btn btn-primary w-full justify-center mt-2">
|
||||
{loading ? "注册中..." : "注册"}
|
||||
</button>
|
||||
</form>
|
||||
<p className="text-center mt-4 text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
已有账号？<Link href="/login" className="hover:underline" style={{ color: "var(--primary)" }}>去登录</Link>
|
||||
|
||||
<p className="meta text-center mt-5">
|
||||
已有账号？
|
||||
<Link href="/login" className="ml-1 font-semibold" style={{ color: "var(--accent)" }}>
|
||||
去登录
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { apiChangePassword, apiMe, type User } from "@/lib/api";
|
||||
import Avatar from "@/components/Avatar";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const router = useRouter();
|
||||
@@ -57,79 +59,78 @@ export default function SettingsPage() {
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return <p style={{ color: "var(--text-secondary)" }}>加载中...</p>;
|
||||
return (
|
||||
<div className="max-w-md mx-auto text-center py-20">
|
||||
<p className="meta">正在加载…</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-md mx-auto">
|
||||
<nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
|
||||
<Link href="/" className="hover:underline">首页</Link>
|
||||
<span className="mx-2">/</span>
|
||||
<span>账号设置</span>
|
||||
<nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--accent)" }}>账号设置</span>
|
||||
</nav>
|
||||
|
||||
<h1 className="text-2xl font-bold mb-6">账号设置</h1>
|
||||
|
||||
<div className="p-4 rounded-lg mb-6" style={{ background: "var(--bg-secondary)" }}>
|
||||
<div className="text-sm" style={{ color: "var(--text-secondary)" }}>当前账号</div>
|
||||
<div className="font-medium mt-1" style={{ color: "var(--text)" }}>{user.nickname}（{user.username}）</div>
|
||||
<div className="mb-7">
|
||||
<h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
账号设置
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h2 className="text-lg font-semibold mb-4">修改密码</h2>
|
||||
|
||||
{success && (
|
||||
<div className="p-3 rounded-lg mb-4 text-sm" style={{ background: "var(--success-bg, #dcfce7)", color: "#166534" }}>
|
||||
密码修改成功，正在跳转登录页...
|
||||
<div className="panel p-5 mb-7 flex items-center gap-4">
|
||||
<Avatar name={user.nickname || user.username} size={46} />
|
||||
<div className="min-w-0">
|
||||
<div className="font-bold truncate" style={{ color: "var(--ink)" }}>
|
||||
{user.nickname}
|
||||
</div>
|
||||
<div className="meta">@{user.username} · {user.role === "admin" ? "管理员" : "普通用户"}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 rounded-lg mb-4 text-sm" style={{ background: "var(--error-bg, #fee2e2)", color: "#991b1b" }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
<p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>修改密码</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<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="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>当前密码</label>
|
||||
<label className="field-label">当前密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
required
|
||||
className="w-full p-3 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>新密码</label>
|
||||
<label className="field-label">新密码（至少 6 位）</label>
|
||||
<input
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
className="w-full p-3 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>确认新密码</label>
|
||||
<label className="field-label">确认新密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
required
|
||||
minLength={6}
|
||||
className="w-full p-3 rounded-lg border"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
|
||||
className="field"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || success}
|
||||
className="w-full py-3 rounded-lg text-white font-medium disabled:opacity-50"
|
||||
style={{ background: "var(--primary)" }}
|
||||
className="btn btn-primary w-full justify-center mt-2"
|
||||
>
|
||||
{submitting ? "提交中..." : "修改密码"}
|
||||
</button>
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import Link from "next/link";
|
||||
import { Metadata } from "next";
|
||||
import { ChevronRight, FileText, MessageCircle } from "lucide-react";
|
||||
import { fetchUserProfile, type UserProfile } from "@/lib/api";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import UserProfileClient from "./UserProfileClient";
|
||||
import Avatar from "@/components/Avatar";
|
||||
|
||||
interface UserPageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
@@ -11,10 +12,15 @@ interface UserPageProps {
|
||||
|
||||
export async function generateMetadata({ params }: UserPageProps): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
return {
|
||||
title: `用户资料 - 姜十三论坛`,
|
||||
description: `查看用户 ${id} 的资料、发帖与评论`,
|
||||
};
|
||||
try {
|
||||
const data = await fetchUserProfile(id, 1);
|
||||
return {
|
||||
title: data.user.nickname || data.user.username,
|
||||
description: `查看 ${data.user.nickname} 的资料、发帖与评论`,
|
||||
};
|
||||
} catch {
|
||||
return { title: "用户不存在" };
|
||||
}
|
||||
}
|
||||
|
||||
export default async function UserPage({ params, searchParams }: UserPageProps) {
|
||||
@@ -27,9 +33,12 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
|
||||
data = await fetchUserProfile(id, page);
|
||||
} catch {
|
||||
return (
|
||||
<div className="text-center py-16" style={{ color: "var(--text-secondary)" }}>
|
||||
<p className="text-lg">用户不存在</p>
|
||||
<Link href="/" className="mt-4 inline-block hover:underline" style={{ color: "var(--primary)" }}>
|
||||
<div className="max-w-md mx-auto text-center py-24">
|
||||
<p className="text-lg font-extrabold mb-1.5" style={{ color: "var(--ink)" }}>
|
||||
用户不存在
|
||||
</p>
|
||||
<p className="meta mb-5">该用户可能已注销或链接有误</p>
|
||||
<Link href="/" className="btn btn-line btn-sm">
|
||||
返回首页
|
||||
</Link>
|
||||
</div>
|
||||
@@ -37,54 +46,65 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
|
||||
}
|
||||
|
||||
const u = data.user;
|
||||
const roleLabel = u.role === "admin" ? "管理员" : "用户";
|
||||
const stats = [
|
||||
{ label: "发帖", value: data.stats.post_count, icon: <FileText size={15} /> },
|
||||
{ label: "评论", value: data.stats.comment_count, icon: <MessageCircle size={15} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
|
||||
<ChevronRight size={13} />
|
||||
<span style={{ color: "var(--accent)" }}>{u.nickname || u.username}</span>
|
||||
</nav>
|
||||
|
||||
{/* 用户信息卡片 */}
|
||||
<div
|
||||
className="rounded-xl border p-6 mb-6 flex items-start gap-5"
|
||||
style={{ borderColor: "var(--border)", background: "var(--bg)" }}
|
||||
>
|
||||
<div
|
||||
className="w-20 h-20 rounded-full flex items-center justify-center text-2xl font-bold shrink-0"
|
||||
style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
|
||||
>
|
||||
{u.avatar ? (
|
||||
<img src={u.avatar} alt={u.nickname} className="w-full h-full rounded-full object-cover" />
|
||||
) : (
|
||||
(u.nickname || u.username).charAt(0).toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h1 className="text-2xl font-bold" style={{ color: "var(--text)" }}>
|
||||
{u.nickname || u.username}
|
||||
</h1>
|
||||
{u.role === "admin" && (
|
||||
<span
|
||||
className="text-xs px-2 py-0.5 rounded font-medium"
|
||||
style={{ background: "var(--primary)", color: "white" }}
|
||||
>
|
||||
{roleLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm mt-1" style={{ color: "var(--text-secondary)" }}>
|
||||
@{u.username} · 加入于 {new Date(u.created_at).toLocaleDateString("zh-CN")}
|
||||
</p>
|
||||
<div className="flex gap-6 mt-3 text-sm">
|
||||
<span style={{ color: "var(--text)" }}>
|
||||
<strong>{data.stats.post_count}</strong>{" "}
|
||||
<span style={{ color: "var(--text-secondary)" }}>帖子</span>
|
||||
</span>
|
||||
<span style={{ color: "var(--text)" }}>
|
||||
<strong>{data.stats.comment_count}</strong>{" "}
|
||||
<span style={{ color: "var(--text-secondary)" }}>评论</span>
|
||||
</span>
|
||||
<section className="panel relative overflow-hidden p-6 sm:p-8 mb-6">
|
||||
<span
|
||||
aria-hidden
|
||||
className="absolute -top-20 -right-16 w-60 h-60 rounded-full"
|
||||
style={{ background: "var(--accent-soft)" }}
|
||||
/>
|
||||
<div className="relative flex items-start gap-5 sm:gap-6">
|
||||
<Avatar
|
||||
name={u.nickname || u.username}
|
||||
src={u.avatar || undefined}
|
||||
size={80}
|
||||
className="sm:!w-[88px] sm:!h-[88px]"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2.5 flex-wrap">
|
||||
<h1 className="text-[24px] sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||||
{u.nickname || u.username}
|
||||
</h1>
|
||||
{u.role === "admin" && (
|
||||
<span
|
||||
className="text-[11.5px] font-bold px-2.5 py-1 rounded-full"
|
||||
style={{ background: "var(--gold-soft)", color: "var(--gold)" }}
|
||||
>
|
||||
管理员
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="meta mt-1.5 text-[13px]">
|
||||
@{u.username} · {new Date(u.created_at).toLocaleDateString("zh-CN")} 加入
|
||||
</p>
|
||||
<div className="flex gap-2.5 mt-4">
|
||||
{stats.map((s) => (
|
||||
<span
|
||||
key={s.label}
|
||||
className="inline-flex items-center gap-2 px-3.5 py-2 rounded-full text-[13px] font-semibold"
|
||||
style={{ background: "var(--panel-2)", color: "var(--ink-2)" }}
|
||||
>
|
||||
<span style={{ color: "var(--accent)" }}>{s.icon}</span>
|
||||
{s.value} {s.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 发帖 / 评论 切换 */}
|
||||
<UserProfileClient userId={id} initialPosts={data} initialPage={page} />
|
||||
|
||||
Reference in New Issue
Block a user