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

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

frontend/app/settings/page.tsx

@@ -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>