feat: 新增大量社区功能与基础组件，优化站点整体体验

- 新增事件总线式toast通知系统
- 新增头像、阅读进度、404/500错误页等基础组件
- 重构页脚、布局、分页、点赞按钮等现有组件
- 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能
- 优化登录注册页面样式与交互
- 修复路径类型文件引用，更新站点元信息与字体配置

frontend/app/page.tsx

@@ -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>
   );
 }