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

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

frontend/app/compose/page.tsx

@@ -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="# 开头写结论&#10;&#10;支持 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>
   );