支持公开用户主页、帖子图缩略图与编辑器图组排版。

新增用户签名与活动统计、图片灯箱；正文按需生成缩略图；TipTap 支持多图分组与环绕排版，并注入站点标题避免刷新闪烁。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-01 12:29:50 +08:00
parent 822eef96be
commit 060b7707cb
51 changed files with 3563 additions and 397 deletions
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -0,0 +1,158 @@
 # 姜十三论坛：为小圈子而生的轻量论坛
 > 轻量 · 好看 · 单文件部署  
 > 面向内部交流，不堆功能，把「能聊、好看、好装」做到位。
 ---
 ## 它是什么
 **姜十三论坛（Jiang13 Forum）** 是一款面向小圈子、团队与兴趣社群的现代化论坛软件。
 它不做「大而全」的社区平台，而是聚焦一件事：让几个人到几百人的内部交流，有一个干净、顺手、自己能掌控的地方。
 技术上，它是一个编译为 **单个 Go 二进制** 的 Web 应用：前端 SPA（单页应用）通过 `go:embed` 内嵌，数据库用内置 **SQLite**，拷贝到服务器就能跑——没有复杂的中间件矩阵，也没有「先装一堆依赖再祈祷能起来」的仪式感。
 ---
 ## 为什么做它
 市面上的论坛方案往往落在两端：
 - **重型产品**（Discourse、phpBB 等）：功能完整，但部署与运维成本高，对小团队过重。
 - **即时通讯 / 文档工具**：适合聊天与协作，却缺少「发帖—回复—沉淀」的社区节奏。
 小圈子真正需要的，常常是中间态：
 - 有板块、帖子、楼层回复，讨论可追溯；
 - 界面清爽、信息密度够高，桌面与手机都好用；
 - 部署简单到「一个文件 + 一份配置」；
 - 数据在自己手里，备份一眼能懂。
 姜十三论坛正是为这个缺口而生。
 ---
 ## 谁适合用
 | 场景 | 说明 |
 |------|------|
 | 团队 / 工作室内部论坛 | 需求讨论、进度同步、知识沉淀 |
 | 兴趣小圈子 | 同好交流、作品分享、活动组织 |
 | 开源 / 私有项目配套社区 | 与 Gitea 等工具通过 OIDC（开放身份连接）做 SSO（单点登录） |
 | 想自己托管的个人站长 | 单机即可，无需云数据库与一堆微服务 |
 如果你需要百万用户级的公网社区、复杂插件生态或企业级工单流，它可能不是最优选；如果你要的是 **小而美、自己能装、自己能管**，它会对胃口。
 ---
 ## 用起来是什么感觉
 ### 浏览：高密度、不臃肿
 前台采用熟悉的 **三栏布局**：
 - **左栏**：板块导航，可折叠；
 - **中间**：帖子 Feed（信息流），支持虚拟滚动，长列表依然流畅；
 - **右栏**：热门帖与最新评论，社区动态一目了然。
 Feed 可按 **最新发帖 / 最新回复 / 热门讨论** 切换。浅色与暗色主题一键切换，并会记住你的偏好。平板与手机上侧栏会自动收起，触控浏览同样顺手。
 整体气质更接近 V2EX / NGA 一类的信息密度——一屏能看更多内容，而不是大留白的营销站。
 ### 发帖：富文本，够用就好
 发帖使用 **TipTap** 富文本编辑器：标题、排版、标签、板块选择、正文图片本地上传，日常写帖够用。帖子支持置顶；编辑后保留 **修订历史**，可做 diff（差异）对比。管理员还可配置普通用户的 **编辑时限**，避免无限制改稿。
 ### 讨论：楼层回复，聊得清楚
 评论是楼层式的：可回复指定楼层、引用原文、@ 高亮。点赞、收藏、热门帖，把活跃内容自然推到前面。
 ### 管理：后台也是 SPA
 管理后台统一在 `/admin`，与前台同一套 React 体验：
 - 仪表盘、板块与帖子管理
 - 用户禁言、删帖删评
 - 论坛参数、限流、敏感词
 - SQLite **一键备份**
 权限模型很简单：**普通用户 / 管理员**；站点 **第一个注册用户自动成为管理员**，省去安装向导里的一堆步骤。
 ---
 ## 部署：一个文件，真正开箱
 这大概是姜十三论坛最「硬核」的卖点之一。
 ```text
 编译 → 得到一个 jiang13（或 jiang13.exe）
 放到目录里运行 → 自动生成 app.ini
 打开浏览器注册 → 第一个账号就是管理员
 ```
 要点：
 - **单二进制**：静态资源已内嵌，不必再配 Nginx 专门反代前端文件；
 - **零外部数据库**：SQLite 落在数据目录，备份就是拷贝文件；
 - **app.ini 配置**：风格类似 Gitea，端口、数据目录、站点根地址一眼能改；
 - **系统服务**：内置 Linux systemd / Windows Service 安装与启停；
 - **跨平台**：Windows / Linux / macOS 均可编译与运行。
 典型启动后访问 `http://localhost:3000`，注册即可开始。
 ---
 ## 技术素描（给好奇的人）
 | 层级 | 技术 |
 |------|------|
 | 后端 | Go · Gin · GORM · SQLite |
 | 前端 | React 18 · TipTap · Radix UI · Tailwind CSS · TanStack Virtual |
 | 构建 | Vite 构建 SPA，再由 `go:embed` 打进二进制 |
 | 认证 | bcrypt + JWT Cookie；可选 OIDC Provider，对接 Gitea 等 SSO |
 对运维者：数据目录结构清晰（数据库、日志、上传、敏感词、备份）。对开发者：前后端分离开发，`dev` 模式下 Vite HMR（热模块替换）可秒级预览前端改动。
 ---
 ## 现在走到哪一步
 项目仍在积极开发中，核心体验已经可用：
 - ✅ 三栏布局、主题切换、虚拟滚动、Feed 排序
 - ✅ 发帖 / 评论 / 点赞收藏 / 修订历史
 - ✅ React 管理后台与论坛参数配置
 - ✅ OIDC Provider（可作 Gitea 等站点的登录源）
 - ✅ 单二进制部署与系统服务
 计划中的方向包括通知动态优化、搜索增强、邮件提醒等——完整列表见仓库 [ROADMAP.md](../ROADMAP.md)。
 ---
 ## 一句话总结
 **姜十三论坛** = 小圈子论坛该有的功能 × 清新好用的界面 × 真正能单文件带走的部署方式。
 如果你正在给团队或同好找一个「自己的小论坛」，不妨编译跑一下：注册第一个账号，从发第一帖开始。
 ---
 ## 快速上手
 ```bash
 # Windows
 .\build.bat
 # Linux / macOS
 make build
 # 运行
 ./dist/jiang13        # 或 Windows: .\dist\jiang13.exe
 ```
 浏览器打开 `http://localhost:3000/register`，第一个注册用户即为管理员。
 更多细节（配置项、系统服务、前端开发）见项目 [README](../README.md)。欢迎通过 Issue / PR 参与共建。
 **许可证：** MIT
--- a/embed_static/embed.go
+++ b/embed_static/embed.go
@@ -2,9 +2,11 @@ package embed_static
 import (
 	"embed"
 	"html"
 	"html/template"
 	"io/fs"
 	"net/http"
 	"regexp"
 	"strings"
 	"github.com/gin-gonic/gin"
@@ -16,6 +18,16 @@ var staticFS embed.FS
 //go:embed templates/*
 var templatesFS embed.FS
 var (
 	spaTitleRe      = regexp.MustCompile(`(?s)<title>.*?</title>`)
 	spaBrandTitleFn func() string
 )
 // SetSPADocumentTitle 注册站点标题提供者，ServeSPA 会注入到入口 HTML，避免刷新闪烁
 func SetSPADocumentTitle(fn func() string) {
 	spaBrandTitleFn = fn
 }
 // SetupEmbed 配置内嵌资源：SPA 前端 + 后台 HTML 模板
 func SetupEmbed(r *gin.Engine) error {
 	tmpl, err := LoadTemplates()
@@ -44,6 +56,12 @@ func ServeSPA(c *gin.Context) {
 		c.String(http.StatusNotFound, "前端未构建，请运行: cd frontend && npm run build")
 		return
 	}
 	if spaBrandTitleFn != nil {
 		if title := strings.TrimSpace(spaBrandTitleFn()); title != "" {
 			escaped := html.EscapeString(title)
 			data = spaTitleRe.ReplaceAll(data, []byte("<title>"+escaped+"</title>"))
 		}
 	}
 	c.Data(http.StatusOK, "text/html; charset=utf-8", data)
 }
@@ -52,6 +70,7 @@ func IsSPARoute(path string) bool {
 	if strings.HasPrefix(path, "/api") ||
 		strings.HasPrefix(path, "/admin") ||
 		strings.HasPrefix(path, "/uploads") ||
 		strings.HasPrefix(path, "/media") ||
 		strings.HasPrefix(path, "/legacy") ||
 		strings.HasPrefix(path, "/assets") ||
 		strings.HasPrefix(path, "/oauth") ||
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>姜十三论坛 Jiang13 Forum</title>
+    <title>姜十三论坛 - 拾三一隅，自在交流</title>
    <style>
      /* 关键布局样式：在 JS/CSS 包加载前即固定三栏结构，避免刷新时组件错位 */
      html { scrollbar-gutter: stable; }
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -22,6 +22,7 @@ const RegisterPage = lazy(() => import('./pages/RegisterPage'));
 const ComposePage = lazy(() => import('./pages/ComposePage'));
 const BoardsManagePage = lazy(() => import('./pages/BoardsManagePage'));
 const ProfilePage = lazy(() => import('./pages/ProfilePage'));
 const UserProfilePage = lazy(() => import('./pages/UserProfilePage'));
 const FavoritesPage = lazy(() => import('./pages/FavoritesPage'));
 const ProjectsPage = lazy(() => import('./pages/ProjectsPage'));
 const AdminDashboardPage = lazy(() => import('./pages/admin/AdminDashboardPage'));
@@ -51,6 +52,7 @@ const router = createBrowserRouter(
        <Route path="/post/:id/edit" element={<ComposePage />} />
        <Route path="/compose" element={<ComposePage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/user/:id" element={<UserProfilePage />} />
        <Route path="/favorites" element={<FavoritesPage />} />
        <Route path="/projects" element={<ProjectsPage />} />
      </Route>
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -1,4 +1,4 @@
-import type { User, Board, PostItem, Comment, RecentComment, ForumStats, TagCount, AdminDashboard, AdminSettings, ForumLimits, ForumLimitsPublic, PostDetailResponse, PostRevision, MailConfig, OIDCConfig, OAuthClient, OAuthClientInput, GiteaProject, GiteaSyncConfig, SiteBranding, RegisterConfig } from './types';
+import type { User, UserPublic, UserActivityStats, Board, PostItem, Comment, RecentComment, ForumStats, TagCount, AdminDashboard, AdminSettings, ForumLimits, ForumLimitsPublic, PostDetailResponse, PostRevision, MailConfig, OIDCConfig, OAuthClient, OAuthClientInput, GiteaProject, GiteaSyncConfig, SiteBranding, RegisterConfig } from './types';
 const BASE = '';
@@ -156,11 +156,21 @@ export const api = {
    }),
  adminBackup: () =>
    request<{ message: string; filename: string; download: string }>('/api/admin/backup', { method: 'POST' }),
  profileStats: () => request<{ stats: UserActivityStats }>('/api/profile/stats'),
  userProfile: (id: number) =>
    request<{ user: UserPublic; stats: UserActivityStats }>(`/api/users/${id}`),
  updateNickname: (nickname: string) => {
    const fd = new FormData();
    fd.append('nickname', nickname);
    return request('/api/profile/nickname', { method: 'POST', body: fd, headers: {} });
  },
  updateSignature: (signature: string) => {
    const fd = new FormData();
    fd.append('signature', signature);
    return request<{ message: string; user: User }>('/api/profile/signature', {
      method: 'POST', body: fd, headers: {},
    });
  },
  updatePassword: (oldPassword: string, newPassword: string) => {
    const fd = new FormData();
    fd.append('old_password', oldPassword);
--- a/frontend/src/api/types.ts
+++ b/frontend/src/api/types.ts
@@ -3,6 +3,7 @@ export interface User {
  username: string;
  email?: string;
  nickname: string;
  signature?: string;
  avatar: string;
  role: 'user' | 'admin';
  banned?: boolean;
@@ -13,6 +14,27 @@ export interface User {
  updated_at?: string;
 }
 /** 公开用户主页（无邮箱） */
 export interface UserPublic {
  id: number;
  username: string;
  nickname: string;
  signature: string;
  avatar: string;
  role: 'user' | 'admin';
  banned?: boolean;
  banned_at?: string;
  created_at: string;
 }
 /** 个人中心活动统计 */
 export interface UserActivityStats {
  post_count: number;
  comment_count: number;
  favorite_count: number;
  like_received: number;
 }
 export interface Board {
  id: number;
  name: string;
@@ -119,6 +141,7 @@ export interface ForumLimits {
  page_size_default: number;
  password_min_len: number;
  avatar_max_mb: number;
  signature_max: number;
  open_posts_in_new_tab: boolean;
  open_content_links_in_new_tab: boolean;
 }
@@ -133,6 +156,7 @@ export interface ForumLimitsPublic {
  page_size_default: number;
  password_min_len: number;
  avatar_max_mb: number;
  signature_max: number;
  open_posts_in_new_tab: boolean;
  open_content_links_in_new_tab: boolean;
 }
@@ -247,6 +271,7 @@ export interface Paginated<T> {
 export interface RecentComment {
  id: number;
  post_id: number;
  user_id?: number;
  author: string;
  avatar: string;
  excerpt: string;
--- a/frontend/src/components/ArticleEditor.tsx
+++ b/frontend/src/components/ArticleEditor.tsx
@@ -5,7 +5,6 @@ import { useEditor, EditorContent, type Editor } from '@tiptap/react';
 import { TextSelection } from '@tiptap/pm/state';
 import StarterKit from '@tiptap/starter-kit';
 import Link from '@tiptap/extension-link';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
 import Underline from '@tiptap/extension-underline';
 import DOMPurify from 'dompurify';
@@ -13,6 +12,7 @@ import {
  Bold, Italic, Underline as UnderlineIcon, Strikethrough, Link as LinkIcon, Code, Quote,
  List, ListOrdered, Image as ImageIcon, Minus, LockKeyhole,
  FileCode, PenLine, Maximize2, Minimize2,
  Columns2, PanelLeft, PanelRight, StretchHorizontal,
 } from 'lucide-react';
 import { POST_CONTENT_PURIFY_CONFIG } from '../utils/postContent';
 import { htmlToMarkdown, markdownToHtml } from '../utils/markdownContent';
@@ -30,6 +30,9 @@ import { api } from '../api/client';
 import { notify } from '@/lib/notify';
 import { MembersOnly } from './editor/MembersOnlyExtension';
 import { TabIndent } from './editor/TabIndentExtension';
 import { ArticleImage, type ImageDisplay } from './editor/ArticleImageExtension';
 import { ImageGroup, suggestImageGroupLayout } from './editor/ImageGroupExtension';
 import { ClearFloatParagraph, ClearFloatSync } from './editor/ClearFloatParagraph';
 import { ArticleLinkDialog } from './editor/ArticleLinkDialog';
 import { Tooltip } from './ui/Tooltip';
@@ -85,25 +88,29 @@ function cycleHeading(editor: Editor) {
  editor.chain().focus().toggleHeading({ level: 2 }).run();
 }
-/** 触发图片文件选择并上传 */
+/** 触发图片文件选择并上传（支持多选） */
-async function uploadPostImageFile(): Promise<string | null> {
+async function uploadPostImageFiles(multiple = true): Promise<string[]> {
  return new Promise(resolve => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/jpeg,image/png,image/gif,image/webp';
    input.multiple = multiple;
    input.onchange = async () => {
-      const file = input.files?.[0];
+      const files = [...(input.files ?? [])];
-      if (!file) {
+      if (!files.length) {
-        resolve(null);
+        resolve([]);
        return;
      }
-      try {
+      const urls: string[] = [];
-        const { url } = await api.uploadPostImage(file);
+      for (const file of files) {
-        resolve(url);
+        try {
-      } catch (e: unknown) {
+          const { url } = await api.uploadPostImage(file);
-        notify.error(e instanceof Error ? e.message : '图片上传失败');
+          urls.push(url);
-        resolve(null);
+        } catch (e: unknown) {
          notify.error(e instanceof Error ? e.message : '图片上传失败');
        }
      }
      resolve(urls);
    };
    input.click();
  });
@@ -149,14 +156,18 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
    extensions: [
      StarterKit.configure({
        heading: { levels: [2, 3, 4, 5, 6] },
        paragraph: false,
      }),
      ClearFloatParagraph,
      ClearFloatSync,
      Underline,
      Link.configure({
        openOnClick: false,
        autolink: true,
        defaultProtocol: 'https',
      }),
-      Image.configure({ inline: false, allowBase64: false }),
+      ArticleImage.configure({ inline: false, allowBase64: false }),
      ImageGroup,
      Placeholder.configure({
        placeholder: ({ node }) => {
          if (node.type.name === 'paragraph' && node.parent?.type.name === 'membersOnly') {
@@ -302,9 +313,24 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
  const setImage = useCallback(async () => {
    if (!editor) return;
-    const url = await uploadPostImageFile();
+    const urls = await uploadPostImageFiles(true);
-    if (url) {
+    if (!urls.length) return;
-      editor.chain().focus().setImage({ src: url }).run();
+    if (urls.length === 1) {
      editor.chain().focus().setImage({ src: urls[0] }).run();
      return;
    }
    editor.chain().focus().insertImageGroup(urls, suggestImageGroupLayout(urls.length)).run();
  }, [editor]);
  const setImageDisplay = useCallback((display: ImageDisplay) => {
    if (!editor) return;
    editor.chain().focus().setImageDisplay(display).run();
  }, [editor]);
  const wrapSelectedAsGroup = useCallback(() => {
    if (!editor) return;
    if (!editor.commands.wrapImagesInGroup()) {
      notify.warning('请先点击或靠近至少两张连续图片，再合并为图组');
    }
  }, [editor]);
@@ -356,9 +382,16 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
  const insertMarkdownImage = useCallback(async () => {
    const textarea = markdownRef.current;
    if (!textarea) return;
-    const url = await uploadPostImageFile();
+    const urls = await uploadPostImageFiles(true);
-    if (!url) return;
+    if (!urls.length) return;
-    insertAtCursor(textarea, markdownSource, `\n\n![图片](${url})\n\n`, handleMarkdownChange);
+    if (urls.length === 1) {
      insertAtCursor(textarea, markdownSource, `\n\n![图片](${urls[0]})\n\n`, handleMarkdownChange);
      return;
    }
    const layout = suggestImageGroupLayout(urls.length);
    const imgs = urls.map(u => `<img src="${u}" alt="">`).join('');
    const block = `\n\n<div data-image-group data-layout="${layout}" class="image-group image-group--${layout}">${imgs}</div>\n\n`;
    insertAtCursor(textarea, markdownSource, block, handleMarkdownChange);
  }, [markdownSource, handleMarkdownChange]);
  const markdownPreviewHtml = useMemo(
@@ -368,7 +401,11 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
  const buildRichTools = useCallback((): ToolBtn[] => {
    if (!editor) return [];
-    return [
+    const imageActive = editor.isActive('image');
    const groupActive = editor.isActive('imageGroup');
    const currentDisplay = (editor.getAttributes('image').display as ImageDisplay) || 'default';
    const tools: ToolBtn[] = [
      { icon: <strong>H</strong>, title: '标题', hint: 'H2 → H6 循环', active: editor.isActive('heading'), action: () => cycleHeading(editor) },
      { icon: <Bold size={15} />, title: '加粗', active: editor.isActive('bold'), action: () => editor.chain().focus().toggleBold().run() },
      { icon: <Italic size={15} />, title: '斜体', active: editor.isActive('italic'), action: () => editor.chain().focus().toggleItalic().run() },
@@ -380,17 +417,57 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
      { icon: <ListOrdered size={15} />, title: '有序列表', active: editor.isActive('orderedList'), action: () => editor.chain().focus().toggleOrderedList().run() },
      { icon: <Code size={15} />, title: '代码块', active: editor.isActive('codeBlock'), action: () => editor.chain().focus().toggleCodeBlock().run() },
      { icon: <LinkIcon size={15} />, title: '链接', active: editor.isActive('link'), action: () => openLinkDialog('rich') },
      { icon: <ImageIcon size={15} />, title: '上传图片', action: setImage },
      {
-        icon: <LockKeyhole size={15} />,
+        icon: <ImageIcon size={15} />,
-        title: '登录可见',
+        title: '上传图片',
-        hint: '插入或包裹；区块内 Ctrl+Enter 退出',
+        hint: '可多选；多张自动并排成图组',
-        active: editor.isActive('membersOnly'),
+        action: setImage,
-        className: 'article-tool-btn--members',
+      },
-        action: wrapMembersOnly,
+      {
        icon: <Columns2 size={15} />,
        title: '合并为图组',
        hint: '点击一张图后合并其附近连续图片（无需框选多张）',
        active: groupActive,
        action: wrapSelectedAsGroup,
      },
    ];
-  }, [editor, openLinkDialog, setImage, wrapMembersOnly]);
+
    if (imageActive && !groupActive) {
      tools.push(
        {
          icon: <StretchHorizontal size={15} />,
          title: '通栏大图',
          active: currentDisplay === 'wide',
          action: () => setImageDisplay(currentDisplay === 'wide' ? 'default' : 'wide'),
        },
        {
          icon: <PanelLeft size={15} />,
          title: '左绕排',
          hint: '图片居左，文字环绕',
          active: currentDisplay === 'float-left',
          action: () => setImageDisplay(currentDisplay === 'float-left' ? 'default' : 'float-left'),
        },
        {
          icon: <PanelRight size={15} />,
          title: '右绕排',
          hint: '图片居右，文字环绕',
          active: currentDisplay === 'float-right',
          action: () => setImageDisplay(currentDisplay === 'float-right' ? 'default' : 'float-right'),
        },
      );
    }
    tools.push({
      icon: <LockKeyhole size={15} />,
      title: '登录可见',
      hint: '插入或包裹；区块内 Ctrl+Enter 退出',
      active: editor.isActive('membersOnly'),
      className: 'article-tool-btn--members',
      action: wrapMembersOnly,
    });
    return tools;
  }, [editor, openLinkDialog, setImage, wrapMembersOnly, wrapSelectedAsGroup, setImageDisplay]);
  const buildMarkdownTools = useCallback((): ToolBtn[] => [
    { icon: <strong>H</strong>, title: '标题', hint: 'H2 → H6 循环', action: withMarkdown(cycleMarkdownHeading) },
@@ -463,12 +540,10 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
      <div className="article-editor-status">
        <div className="article-editor-status-meta">
-          <span>{words} 字</span>
+          <span className="article-editor-wordcount">{words} 字</span>
-          <span className="article-editor-status-sep">·</span>
+          <span className="article-editor-status-sep" aria-hidden>·</span>
-          <span>
+          <span className="article-editor-mode-label">
-            {mode === 'rich' ? '富文本' : 'Markdown 源码'}
+            {mode === 'rich' ? '所见即所得' : 'Markdown'}
            {' · Tab 缩进 / Shift+Tab 回退'}
            {mode === 'rich' ? ' · 登录可见内 Ctrl+Enter 退出' : ''}
          </span>
        </div>
@@ -498,12 +573,12 @@ const ArticleEditor = forwardRef<ArticleEditorHandle, Props>(function ArticleEdi
          >
            <button
              type="button"
-              className="article-editor-view-btn"
+              className={`article-editor-view-btn${fullscreen ? ' active' : ''}`}
              onMouseDown={e => e.preventDefault()}
              onClick={() => setFullscreen(v => !v)}
            >
              {fullscreen ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
-              <span>{fullscreen ? '退出全屏' : '全屏'}</span>
+              <span>{fullscreen ? '退出' : '全屏'}</span>
            </button>
          </Tooltip>
        </div>
--- a/frontend/src/components/AvatarCropDialog.tsx
+++ b/frontend/src/components/AvatarCropDialog.tsx
@@ -11,12 +11,14 @@ import {
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import { notify } from '@/lib/notify';
-import { getCroppedAvatarFile } from '../utils/avatarCrop';
+import { getCroppedAvatarFile, validateAvatarOutput } from '../utils/avatarCrop';
 interface Props {
  open: boolean;
  imageSrc: string | null;
  fileName?: string;
  /** 裁剪后文件体积上限（MB） */
  maxMb: number;
  onOpenChange: (open: boolean) => void;
  onConfirm: (file: File) => void;
 }
@@ -25,6 +27,7 @@ export default function AvatarCropDialog({
  open,
  imageSrc,
  fileName,
  maxMb,
  onOpenChange,
  onConfirm,
 }: Props) {
@@ -50,6 +53,11 @@ export default function AvatarCropDialog({
    setConfirming(true);
    try {
      const file = await getCroppedAvatarFile(imageSrc, croppedAreaPixels, fileName);
      const sizeErr = validateAvatarOutput(file, maxMb);
      if (sizeErr) {
        notify.error(sizeErr);
        return;
      }
      onConfirm(file);
      onOpenChange(false);
    } catch {
--- a/frontend/src/components/CommentThreadList.tsx
+++ b/frontend/src/components/CommentThreadList.tsx
@@ -24,6 +24,7 @@ import {
 } from '../utils/comment';
 import { isTimeDiffSignificant } from '../utils/content';
 import { useForumLimits } from '../hooks/useForumLimits';
 import UserLink from './UserLink';
 function canManageComment(c: Comment, user?: User | null): boolean {
  if (!user) return false;
@@ -97,20 +98,40 @@ function CommentItem({
      id={`floor-${c.floor}`}
      className={`waline-comment ${nested ? 'nested' : ''} ${isHighlighted ? 'highlight' : ''}`}
    >
-      <div className={`waline-comment-avatar ${guest && !c.user?.avatar ? 'guest' : ''}`}>
+      {!guest && c.user_id ? (
-        {c.user?.avatar ? (
+        <UserLink
-          <img src={c.user.avatar} alt="" loading="lazy" decoding="async" />
+          user={c.user ?? { id: c.user_id, nickname: nick }}
-        ) : (
+          showAvatar={false}
-          commentInitial(c)
+          showName={false}
-        )}
+          className={`waline-comment-avatar user-link--avatar-only${!c.user?.avatar ? ' guest' : ''}`}
-      </div>
+        >
          {c.user?.avatar ? (
            <img src={c.user.avatar} alt="" loading="lazy" decoding="async" />
          ) : (
            commentInitial(c)
          )}
        </UserLink>
      ) : (
        <div className={`waline-comment-avatar ${!c.user?.avatar ? 'guest' : ''}`}>
          {c.user?.avatar ? (
            <img src={c.user.avatar} alt="" loading="lazy" decoding="async" />
          ) : (
            commentInitial(c)
          )}
        </div>
      )}
      <div className="waline-comment-main">
        <div className="waline-comment-head">
-          {c.guest_url ? (
+          {guest && c.guest_url ? (
            <a href={c.guest_url} target="_blank" rel="noopener noreferrer" className="waline-comment-author">
              {nick}
            </a>
          ) : !guest && c.user_id ? (
            <UserLink
              user={c.user ?? { id: c.user_id, nickname: nick }}
              className="waline-comment-author"
            />
          ) : (
            <span className="waline-comment-author">{nick}</span>
          )}
--- a/frontend/src/components/ImageLightbox.tsx
+++ b/frontend/src/components/ImageLightbox.tsx
@@ -0,0 +1,58 @@
 import { useEffect } from 'react';
 import { X } from 'lucide-react';
 import { createPortal } from 'react-dom';
 interface Props {
  src: string | null;
  alt?: string;
  open: boolean;
  onClose: () => void;
 }
 /** 帖子正文图片灯箱：展示原图，点击遮罩 / Esc / 关闭按钮退出 */
 export default function ImageLightbox({ src, alt = '', open, onClose }: Props) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose();
    };
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prev;
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);
  if (!open || !src) return null;
  return createPortal(
    <div className="image-lightbox" role="dialog" aria-modal="true" aria-label="查看原图">
      <button
        type="button"
        className="image-lightbox-backdrop"
        aria-label="关闭"
        onClick={onClose}
      />
      <button
        type="button"
        className="image-lightbox-close"
        aria-label="关闭"
        onClick={onClose}
      >
        <X size={20} aria-hidden />
      </button>
      <div className="image-lightbox-stage">
        <img
          src={src}
          alt={alt || '原图'}
          className="image-lightbox-img"
          decoding="async"
        />
      </div>
      <p className="image-lightbox-hint">点击空白处关闭</p>
    </div>,
    document.body,
  );
 }
--- a/frontend/src/components/PostContent.tsx
+++ b/frontend/src/components/PostContent.tsx
@@ -1,10 +1,11 @@
-import { useMemo, useCallback, useEffect } from 'react';
+import { useMemo, useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { renderPostContentHtml } from '../utils/postContent';
 import { extractHeadingsFromHtml, type PostHeading } from '../utils/postHeadings';
 import { loginPath, registerPath } from '../utils/authRedirect';
 import { useForumLimits } from '../hooks/useForumLimits';
 import { notify } from '@/lib/notify';
 import ImageLightbox from './ImageLightbox';
 interface Props {
  html: string;
@@ -14,7 +15,7 @@ interface Props {
  onHeadingsChange?: (headings: PostHeading[]) => void;
 }
-/** 帖子正文渲染（含会员专属区块、代码块美化） */
+/** 帖子正文渲染（含会员专属区块、代码块美化、图片灯箱） */
 export default function PostContent({
  html,
  isLoggedIn,
@@ -23,6 +24,8 @@ export default function PostContent({
 }: Props) {
  const nav = useNavigate();
  const { limits } = useForumLimits();
  const [lightboxSrc, setLightboxSrc] = useState<string | null>(null);
  const [lightboxAlt, setLightboxAlt] = useState('');
  const prepared = useMemo(() => {
    const rendered = renderPostContentHtml(html, isLoggedIn, {
@@ -38,6 +41,13 @@ export default function PostContent({
    onHeadingsChange?.(prepared.headings);
  }, [prepared.headings, onHeadingsChange]);
  const openLightbox = useCallback((img: HTMLImageElement) => {
    const full = img.getAttribute('data-full') || img.currentSrc || img.src;
    if (!full) return;
    setLightboxSrc(full);
    setLightboxAlt(img.getAttribute('alt') || '');
  }, []);
  const handleClick = useCallback(async (e: React.MouseEvent) => {
    const target = e.target as HTMLElement;
    if (target.closest('[data-members-login]')) {
@@ -50,6 +60,12 @@ export default function PostContent({
      nav(registerPath());
      return;
    }
    const zoomImg = target.closest<HTMLImageElement>('img.post-content-img--zoomable');
    if (zoomImg) {
      e.preventDefault();
      openLightbox(zoomImg);
      return;
    }
    const copyBtn = target.closest<HTMLElement>('[data-code-copy]');
    if (copyBtn) {
      e.preventDefault();
@@ -68,13 +84,30 @@ export default function PostContent({
        notify.error('复制失败');
      }
    }
-  }, [nav]);
+  }, [nav, openLightbox]);
  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key !== 'Enter' && e.key !== ' ') return;
    const zoomImg = (e.target as HTMLElement).closest?.('img.post-content-img--zoomable');
    if (!zoomImg || !(zoomImg instanceof HTMLImageElement)) return;
    e.preventDefault();
    openLightbox(zoomImg);
  }, [openLightbox]);
  return (
-    <div
+    <>
-      className={className}
+      <div
-      onClick={handleClick}
+        className={className}
-      dangerouslySetInnerHTML={{ __html: prepared.html }}
+        onClick={handleClick}
-    />
+        onKeyDown={handleKeyDown}
        dangerouslySetInnerHTML={{ __html: prepared.html }}
      />
      <ImageLightbox
        src={lightboxSrc}
        alt={lightboxAlt}
        open={!!lightboxSrc}
        onClose={() => setLightboxSrc(null)}
      />
    </>
  );
 }
--- a/frontend/src/components/PostListItem.tsx
+++ b/frontend/src/components/PostListItem.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react';
 import { MessageCircle, ThumbsUp } from 'lucide-react';
 import BoardBadge from '@/components/BoardBadge';
 import PinnedIcon from '@/components/PinnedIcon';
 import UserLink from '@/components/UserLink';
 import type { PostItem } from '../api/types';
 import type { FeedSort } from './FeedSortBar';
 import { formatTime } from '../utils/content';
@@ -22,13 +23,33 @@ function PostListItem({ post, sort = 'latest', onSelect }: Props) {
  const commentCount = post.comment_count ?? 0;
  const likeCount = post.like_count ?? 0;
  const openPost = () => onSelect(post.id);
  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      openPost();
    }
  };
  return (
-    <button type="button" className="post-row" onClick={() => onSelect(post.id)}>
+    <div
-      <div className="post-avatar">
+      className="post-row"
      role="button"
      tabIndex={0}
      onClick={openPost}
      onKeyDown={onKeyDown}
    >
      <UserLink
        user={post.user}
        showAvatar={false}
        showName={false}
        stopPropagation
        className="post-avatar user-link--avatar-only"
      >
        {post.user?.avatar
          ? <img src={post.user.avatar} alt="" loading="lazy" decoding="async" />
          : initial}
-      </div>
+      </UserLink>
      <div className="post-body">
        <div className="post-title">
          {post.pinned && <PinnedIcon className="mr-1.5" />}
@@ -36,7 +57,7 @@ function PostListItem({ post, sort = 'latest', onSelect }: Props) {
        </div>
        <div className="post-meta">
          {post.board && <BoardBadge board={post.board} />}
-          <span>{post.user?.nickname || '匿名'}</span>
+          <UserLink user={post.user} stopPropagation className="post-meta-user" />
          <span>{timeLabel}</span>
        </div>
      </div>
@@ -50,7 +71,7 @@ function PostListItem({ post, sort = 'latest', onSelect }: Props) {
          {likeCount}
        </span>
      </div>
-    </button>
+    </div>
  );
 }
--- a/frontend/src/components/PostRevisionPanel.tsx
+++ b/frontend/src/components/PostRevisionPanel.tsx
@@ -9,6 +9,7 @@ import type { PostRevision } from '../api/types';
 import PostContent from './PostContent';
 import { formatDateTime } from '../utils/content';
 import { moveTabIndex, useOverlayA11y } from '../hooks/useOverlayA11y';
 import UserLink from './UserLink';
 import {
  type PostSnapshot,
  htmlToDiffText,
@@ -273,7 +274,14 @@ export default function PostRevisionPanel({ postId, currentPost, open, onClose,
                      </div>
                      <span className="post-revision-item-title">{entry.rev.title}</span>
                      <span className="post-revision-item-meta">
-                        {entry.rev.editor?.nickname ?? '未知'} · {formatDateTime(entry.rev.created_at)}
+                        <UserLink
                          user={entry.rev.editor
                            ? entry.rev.editor
                            : { nickname: '未知' }}
                          stopPropagation
                          className="post-revision-editor-link"
                        />
                        {' · '}{formatDateTime(entry.rev.created_at)}
                      </span>
                    </button>
                  </li>
@@ -291,7 +299,12 @@ export default function PostRevisionPanel({ postId, currentPost, open, onClose,
                  <div className="post-revision-main-head">
                    <div>
                      <span className="post-revision-main-editor">
-                        {selected.rev.editor?.nickname ?? '未知'}
+                        <UserLink
                          user={selected.rev.editor
                            ? selected.rev.editor
                            : { nickname: '未知' }}
                          className="post-revision-editor-link"
                        />
                      </span>
                      <span className="post-revision-main-time">
                        {formatDateTime(selected.rev.created_at)}
--- a/frontend/src/components/RightPanel.tsx
+++ b/frontend/src/components/RightPanel.tsx
@@ -4,6 +4,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import type { PostItem, RecentComment, TagCount } from '../api/types';
 import { useSiteBranding } from '../hooks/useSiteBranding';
 import TagCloud from './TagCloud';
 import UserLink from './UserLink';
 interface Props {
  hot: PostItem[];
@@ -110,21 +111,39 @@ export default function RightPanel({
          ) : commentList.length === 0 ? (
            <div className="widget-empty">暂无评论</div>
          ) : commentList.map(item => (
-            <button
+            <div
              key={item.id}
              type="button"
              className="widget-item widget-item--comment"
              title={item.post_title ? `${item.author} · ${item.post_title}` : item.author}
              onClick={() => onPostClick(item.post_id)}
            >
-              <span className="widget-item-avatar" aria-hidden>
+              {item.user_id ? (
-                {item.avatar
+                <UserLink
-                  ? <img src={item.avatar} alt="" loading="lazy" decoding="async" />
+                  user={{ id: item.user_id, nickname: item.author, avatar: item.avatar }}
-                  : (item.author?.[0] || '?')}
+                  showAvatar={false}
-              </span>
+                  showName={false}
-              <span className="widget-item-title">{item.excerpt}</span>
+                  stopPropagation
-              <span className="widget-item-time">{item.created_at}</span>
+                  className="widget-item-avatar user-link--avatar-only"
-            </button>
+                >
                  {item.avatar
                    ? <img src={item.avatar} alt="" loading="lazy" decoding="async" />
                    : (item.author?.[0] || '?')}
                </UserLink>
              ) : (
                <span className="widget-item-avatar" aria-hidden>
                  {item.avatar
                    ? <img src={item.avatar} alt="" loading="lazy" decoding="async" />
                    : (item.author?.[0] || '?')}
                </span>
              )}
              <button
                type="button"
                className="widget-item-comment-main"
                onClick={() => onPostClick(item.post_id)}
              >
                <span className="widget-item-title">{item.excerpt}</span>
                <span className="widget-item-time">{item.created_at}</span>
              </button>
            </div>
          ))}
        </div>
      </div>
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -14,7 +14,7 @@ import { getBoardThemeIndex } from '../utils/boardTheme';
 import ArticleOutline from './ArticleOutline';
 // 内容页不参与左侧栏高亮（非 feed 浏览上下文）
-const NEUTRAL_SIDEBAR_PREFIXES = ['/post/', '/profile'];
+const NEUTRAL_SIDEBAR_PREFIXES = ['/post/', '/profile', '/user/'];
 export function isNeutralSidebarRoute(pathname: string): boolean {
  return NEUTRAL_SIDEBAR_PREFIXES.some(prefix => pathname.startsWith(prefix));
--- a/frontend/src/components/UserLink.tsx
+++ b/frontend/src/components/UserLink.tsx
@@ -0,0 +1,77 @@
 import type { MouseEvent, ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { userPath } from '../utils/userPath';
 export type UserLinkUser = {
  id?: number;
  nickname?: string;
  avatar?: string;
 } | null | undefined;
 interface Props {
  user: UserLinkUser;
  className?: string;
  avatarClassName?: string;
  nameClassName?: string;
  showAvatar?: boolean;
  showName?: boolean;
  /** 嵌在可点击父级内时阻止冒泡（如帖子列表行） */
  stopPropagation?: boolean;
  children?: ReactNode;
  title?: string;
 }
 /** 统一用户入口：点击进入 /user/:id 公开主页 */
 export default function UserLink({
  user,
  className,
  avatarClassName,
  nameClassName,
  showAvatar = false,
  showName = true,
  stopPropagation = false,
  children,
  title,
 }: Props) {
  const id = user?.id && user.id > 0 ? user.id : 0;
  const nick = user?.nickname?.trim() || '匿名';
  const initial = nick[0] || '?';
  const tip = title || nick;
  const onClick = stopPropagation
    ? (e: MouseEvent) => { e.stopPropagation(); }
    : undefined;
  const body = children ?? (
    <>
      {showAvatar && (
        <span className={cn('user-link-avatar', avatarClassName)} aria-hidden>
          {user?.avatar
            ? <img src={user.avatar} alt="" loading="lazy" decoding="async" />
            : initial}
        </span>
      )}
      {showName && <span className={cn('user-link-name', nameClassName)}>{nick}</span>}
    </>
  );
  if (!id) {
    return (
      <span className={cn('user-link user-link--static', className)} title={tip}>
        {body}
      </span>
    );
  }
  return (
    <Link
      to={userPath(id)}
      className={cn('user-link', className)}
      title={tip}
      onClick={onClick}
    >
      {body}
    </Link>
  );
 }
--- a/frontend/src/components/editor/ArticleImageExtension.tsx
+++ b/frontend/src/components/editor/ArticleImageExtension.tsx
@@ -0,0 +1,67 @@
 import Image from '@tiptap/extension-image';
 import { mergeAttributes } from '@tiptap/core';
 /** 单图展示形态（对齐 Notion / Medium 常见选项） */
 export type ImageDisplay = 'default' | 'wide' | 'float-left' | 'float-right';
 declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    articleImage: {
      setImageDisplay: (display: ImageDisplay) => ReturnType;
    };
  }
 }
 /**
 * 文章图片：在 TipTap Image 上增加 data-display，
 * 支持通栏 / 左绕排 / 右绕排。
 */
 export const ArticleImage = Image.extend({
  name: 'image',
  addAttributes() {
    return {
      ...this.parent?.(),
      display: {
        default: 'default' satisfies ImageDisplay,
        parseHTML: (el) =>
          (el.getAttribute('data-display') as ImageDisplay) || 'default',
        renderHTML: (attrs) => {
          const display = (attrs.display as ImageDisplay) || 'default';
          if (display === 'default') return {};
          return {
            'data-display': display,
            class: `article-img article-img--${display}`,
          };
        },
      },
    };
  },
  renderHTML({ HTMLAttributes }) {
    const display = (HTMLAttributes['data-display'] as ImageDisplay) || 'default';
    const cls = [
      HTMLAttributes.class,
      'article-img',
      display !== 'default' ? `article-img--${display}` : '',
    ]
      .filter(Boolean)
      .join(' ');
    return [
      'img',
      mergeAttributes(HTMLAttributes, {
        class: cls || undefined,
        draggable: false,
      }),
    ];
  },
  addCommands() {
    return {
      ...this.parent?.(),
      setImageDisplay: (display) => ({ commands }) =>
        commands.updateAttributes(this.name, { display }),
    };
  },
 });
--- a/frontend/src/components/editor/ClearFloatParagraph.ts
+++ b/frontend/src/components/editor/ClearFloatParagraph.ts
@@ -0,0 +1,144 @@
 import Paragraph from '@tiptap/extension-paragraph';
 import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
 import type { Node as ProseMirrorNode, NodeType } from '@tiptap/pm/model';
 import type { Transaction } from '@tiptap/pm/state';
 function isFloatImage(node: ProseMirrorNode): boolean {
  if (node.type.name !== 'image') return false;
  const display = node.attrs.display as string | undefined;
  return display === 'float-left' || display === 'float-right';
 }
 function isBlankParagraph(node: ProseMirrorNode): boolean {
  if (node.type.name !== 'paragraph') return false;
  if (node.content.size === 0) return true;
  let blank = true;
  node.forEach(child => {
    if (child.type.name === 'hardBreak') return;
    if (child.isText && !(child.text || '').replace(/\u00a0/g, ' ').trim()) return;
    blank = false;
  });
  return blank;
 }
 function isHardClearBlock(node: ProseMirrorNode): boolean {
  const name = node.type.name;
  if (name === 'image') return !isFloatImage(node);
  return name === 'imageGroup'
    || name === 'heading'
    || name === 'horizontalRule'
    || name === 'codeBlock'
    || name === 'blockquote'
    || name === 'table'
    || name === 'bulletList'
    || name === 'orderedList';
 }
 /**
 * 计算顶层块是否应带 clearFloat。
 * - 双空行后自动打开
 * - 一旦打开，只要仍在绕排图之后就保持（避免源码往返丢空段后失效）
 */
 function computeClearFloatFlags(doc: ProseMirrorNode): boolean[] {
  const flags: boolean[] = [];
  let seenFloat = false;
  let blankRun = 0;
  doc.forEach(node => {
    if (isFloatImage(node)) {
      seenFloat = true;
      blankRun = 0;
      flags.push(false);
      return;
    }
    if (isHardClearBlock(node)) {
      seenFloat = false;
      blankRun = 0;
      flags.push(false);
      return;
    }
    if (!seenFloat) {
      flags.push(false);
      blankRun = 0;
      return;
    }
    if (isBlankParagraph(node)) {
      blankRun += 1;
      flags.push(false);
      return;
    }
    const already = Boolean(node.attrs.clearFloat);
    flags.push(blankRun >= 2 || already);
    blankRun = 0;
  });
  return flags;
 }
 function syncClearFloatAttrs(doc: ProseMirrorNode, paragraphType: NodeType, tr: Transaction): boolean {
  const flags = computeClearFloatFlags(doc);
  let modified = false;
  let index = 0;
  doc.forEach((node, offset) => {
    const should = flags[index] ?? false;
    index += 1;
    if (node.type !== paragraphType) return;
    const current = Boolean(node.attrs.clearFloat);
    if (current === should) return;
    tr.setNodeMarkup(offset, undefined, { ...node.attrs, clearFloat: should });
    modified = true;
  });
  return modified;
 }
 /** 段落：支持 data-clear-float，源码往返可保留「写到绕排图下方」 */
 export const ClearFloatParagraph = Paragraph.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      clearFloat: {
        default: false,
        parseHTML: (el) => el.hasAttribute('data-clear-float'),
        renderHTML: (attrs) => (
          attrs.clearFloat
            ? { 'data-clear-float': '', class: 'article-clear-float' }
            : {}
        ),
      },
    };
  },
 });
 const syncKey = new PluginKey('clearFloatSync');
 /** 根据双空行自动写入/保持段落 clearFloat 属性 */
 export const ClearFloatSync = Extension.create({
  name: 'clearFloatSync',
  addProseMirrorPlugins() {
    return [
      new Plugin({
        key: syncKey,
        appendTransaction(transactions, _oldState, newState) {
          if (!transactions.some(tr => tr.docChanged)) return null;
          if (transactions.some(tr => tr.getMeta(syncKey))) return null;
          const paragraphType = newState.schema.nodes.paragraph;
          if (!paragraphType) return null;
          const tr = newState.tr;
          if (!syncClearFloatAttrs(newState.doc, paragraphType, tr)) return null;
          tr.setMeta(syncKey, true);
          return tr;
        },
      }),
    ];
  },
 });
--- a/frontend/src/components/editor/ImageGroupExtension.tsx
+++ b/frontend/src/components/editor/ImageGroupExtension.tsx
@@ -0,0 +1,371 @@
 import { Node, mergeAttributes } from '@tiptap/core';
 import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
 import { NodeSelection } from '@tiptap/pm/state';
 import type { EditorState } from '@tiptap/pm/state';
 import {
  ReactNodeViewRenderer,
  NodeViewWrapper,
  NodeViewContent,
  type NodeViewProps,
 } from '@tiptap/react';
 import { Columns2, Columns3, LayoutGrid, Plus, Ungroup } from 'lucide-react';
 import { api } from '../../api/client';
 import { notify } from '@/lib/notify';
 export type ImageGroupLayout = 'cols-2' | 'cols-3' | 'cols-4';
 const LAYOUTS: { key: ImageGroupLayout; label: string; icon: typeof Columns2; hint: string }[] = [
  { key: 'cols-2', label: '两列', icon: Columns2, hint: '并排两张' },
  { key: 'cols-3', label: '三列', icon: Columns3, hint: '并排三张' },
  { key: 'cols-4', label: '四列', icon: LayoutGrid, hint: '四宫格' },
 ];
 /** 按张数推荐默认布局 */
 export function suggestImageGroupLayout(count: number): ImageGroupLayout {
  if (count >= 4) return 'cols-4';
  if (count === 3) return 'cols-3';
  return 'cols-2';
 }
 function findImageGroupDepth($pos: {
  depth: number;
  node: (d: number) => { type: { name: string } };
 }): number {
  for (let d = $pos.depth; d > 0; d -= 1) {
    if ($pos.node(d).type.name === 'imageGroup') return d;
  }
  return -1;
 }
 /** 空段落可夹在连续图片之间，合并时一并吃掉 */
 function isEmptyParagraph(node: ProseMirrorNode): boolean {
  return node.type.name === 'paragraph' && node.content.size === 0;
 }
 /** 定位一张可作为合并起点的图片位置 */
 function findAnchorImagePos(state: EditorState): number | null {
  const { selection, doc } = state;
  if (selection instanceof NodeSelection && selection.node.type.name === 'image') {
    return selection.from;
  }
  const { $from, from, to } = selection;
  if (findImageGroupDepth($from) >= 0) return null;
  let firstImagePos: number | null = null;
  doc.nodesBetween(from, Math.max(to, from + 1), (node, pos) => {
    if (node.type.name === 'image' && firstImagePos == null) {
      firstImagePos = pos;
      return false;
    }
    return undefined;
  });
  if (firstImagePos != null) return firstImagePos;
  if ($from.nodeBefore?.type.name === 'image') {
    return $from.pos - $from.nodeBefore.nodeSize;
  }
  if ($from.nodeAfter?.type.name === 'image') {
    return $from.pos;
  }
  // 光标在图片之间的段落时：沿祖先层级找相邻图片块
  for (let depth = $from.depth; depth >= 1; depth -= 1) {
    const parent = $from.node(depth);
    const index = $from.index(depth);
    for (let i = index - 1; i >= 0; i -= 1) {
      const n = parent.child(i);
      if (n.type.name === 'image') return $from.posAtIndex(i, depth);
      if (!isEmptyParagraph(n)) break;
    }
    for (let i = index + 1; i < parent.childCount; i += 1) {
      const n = parent.child(i);
      if (n.type.name === 'image') return $from.posAtIndex(i, depth);
      if (!isEmptyParagraph(n)) break;
    }
  }
  return null;
 }
 /**
 * 以某张图为锚点，向两侧扩展「连续图片块」
 * （允许中间夹空段落；富文本难以框选多张 atom 图片）
 */
 function collectConsecutiveImageRun(
  state: EditorState,
  imagePos: number,
 ): { from: number; to: number; images: ProseMirrorNode[] } | null {
  const node = state.doc.nodeAt(imagePos);
  if (!node || node.type.name !== 'image') return null;
  const $pos = state.doc.resolve(imagePos);
  const parent = $pos.parent;
  const index = $pos.index();
  if (parent.child(index) !== node) return null;
  let start = index;
  while (start > 0) {
    const prev = parent.child(start - 1);
    if (prev.type.name === 'image' || isEmptyParagraph(prev)) start -= 1;
    else break;
  }
  while (start < index && isEmptyParagraph(parent.child(start))) start += 1;
  let end = index;
  while (end < parent.childCount - 1) {
    const next = parent.child(end + 1);
    if (next.type.name === 'image' || isEmptyParagraph(next)) end += 1;
    else break;
  }
  while (end > index && isEmptyParagraph(parent.child(end))) end -= 1;
  const images: ProseMirrorNode[] = [];
  for (let i = start; i <= end; i += 1) {
    const child = parent.child(i);
    if (child.type.name === 'image') images.push(child);
  }
  if (images.length < 2) return null;
  let from = $pos.start();
  for (let i = 0; i < start; i += 1) from += parent.child(i).nodeSize;
  let to = from;
  for (let i = start; i <= end; i += 1) to += parent.child(i).nodeSize;
  return { from, to, images };
 }
 function ImageGroupView({ selected, editor, node, getPos }: NodeViewProps) {
  const layout = (node.attrs.layout as ImageGroupLayout) || 'cols-2';
  const count = node.childCount;
  const setLayout = (next: ImageGroupLayout) => {
    const pos = getPos();
    if (typeof pos !== 'number') {
      editor.chain().focus().setImageGroupLayout(next).run();
      return;
    }
    editor
      .chain()
      .focus()
      .command(({ tr, dispatch }) => {
        if (dispatch) tr.setNodeMarkup(pos, undefined, { ...node.attrs, layout: next });
        return true;
      })
      .run();
  };
  const unwrap = () => {
    const pos = getPos();
    if (typeof pos !== 'number') {
      editor.chain().focus().unwrapImageGroup().run();
      return;
    }
    editor
      .chain()
      .focus()
      .command(({ tr, dispatch }) => {
        if (dispatch) tr.replaceWith(pos, pos + node.nodeSize, node.content);
        return true;
      })
      .run();
  };
  const addImage = () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/jpeg,image/png,image/gif,image/webp';
    input.multiple = true;
    input.onchange = async () => {
      const files = [...(input.files ?? [])];
      if (!files.length) return;
      const urls: string[] = [];
      for (const file of files) {
        try {
          const { url } = await api.uploadPostImage(file);
          urls.push(url);
        } catch (e: unknown) {
          notify.error(e instanceof Error ? e.message : '图片上传失败');
        }
      }
      if (!urls.length) return;
      const pos = getPos();
      if (typeof pos !== 'number') return;
      editor
        .chain()
        .focus()
        .command(({ tr, dispatch, state }) => {
          const imageType = state.schema.nodes.image;
          if (!imageType || !dispatch) return false;
          let cur = pos + node.nodeSize - 1;
          for (const src of urls) {
            const img = imageType.create({ src });
            tr.insert(cur, img);
            cur += img.nodeSize;
          }
          const nextLayout = suggestImageGroupLayout(count + urls.length);
          tr.setNodeMarkup(pos, undefined, { ...node.attrs, layout: nextLayout });
          return true;
        })
        .run();
    };
    input.click();
  };
  return (
    <NodeViewWrapper
      className={`image-group image-group--${layout}${selected ? ' image-group--selected' : ''}`}
      data-image-group=""
      data-layout={layout}
    >
      <div className="image-group__toolbar" contentEditable={false}>
        <span className="image-group__toolbar-label">图组 · {count} 张</span>
        <div className="image-group__toolbar-actions">
          {LAYOUTS.map(item => {
            const Icon = item.icon;
            return (
              <button
                key={item.key}
                type="button"
                className={`image-group__layout-btn${layout === item.key ? ' is-active' : ''}`}
                title={item.hint}
                onMouseDown={e => e.preventDefault()}
                onClick={() => setLayout(item.key)}
              >
                <Icon size={14} />
                <span>{item.label}</span>
              </button>
            );
          })}
          <button
            type="button"
            className="image-group__layout-btn"
            title="向本组追加图片"
            onMouseDown={e => e.preventDefault()}
            onClick={addImage}
          >
            <Plus size={14} />
            <span>添加</span>
          </button>
          <button
            type="button"
            className="image-group__layout-btn"
            title="拆开为单独图片"
            onMouseDown={e => e.preventDefault()}
            onClick={unwrap}
          >
            <Ungroup size={14} />
            <span>拆开</span>
          </button>
        </div>
      </div>
      <NodeViewContent className="image-group__grid" as="div" />
    </NodeViewWrapper>
  );
 }
 declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    imageGroup: {
      insertImageGroup: (srcs: string[], layout?: ImageGroupLayout) => ReturnType;
      setImageGroupLayout: (layout: ImageGroupLayout) => ReturnType;
      unwrapImageGroup: () => ReturnType;
      wrapImagesInGroup: () => ReturnType;
    };
  }
 }
 /** TipTap 图组：多图并排 / 宫格布局 */
 export const ImageGroup = Node.create({
  name: 'imageGroup',
  group: 'block',
  content: 'image+',
  defining: true,
  isolating: true,
  addAttributes() {
    return {
      layout: {
        default: 'cols-2' satisfies ImageGroupLayout,
        parseHTML: (el) => (el.getAttribute('data-layout') as ImageGroupLayout) || 'cols-2',
        renderHTML: (attrs) => ({ 'data-layout': attrs.layout || 'cols-2' }),
      },
    };
  },
  parseHTML() {
    return [{ tag: 'div[data-image-group]' }];
  },
  renderHTML({ HTMLAttributes }) {
    const layout = HTMLAttributes['data-layout'] || 'cols-2';
    return [
      'div',
      mergeAttributes(HTMLAttributes, {
        'data-image-group': '',
        'data-layout': layout,
        class: `image-group image-group--${layout}`,
      }),
      0,
    ];
  },
  addNodeView() {
    return ReactNodeViewRenderer(ImageGroupView);
  },
  addCommands() {
    return {
      insertImageGroup: (srcs, layout) => ({ chain }) => {
        if (!srcs.length) return false;
        const nextLayout = layout || suggestImageGroupLayout(srcs.length);
        return chain()
          .insertContent({
            type: this.name,
            attrs: { layout: nextLayout },
            content: srcs.map(src => ({ type: 'image', attrs: { src } })),
          })
          .run();
      },
      setImageGroupLayout: (layout) => ({ commands }) =>
        commands.updateAttributes(this.name, { layout }),
      unwrapImageGroup: () => ({ tr, state, dispatch }) => {
        const { $from } = state.selection;
        const depth = findImageGroupDepth($from);
        if (depth < 0) return false;
        const pos = $from.before(depth);
        const node = $from.node(depth);
        tr.replaceWith(pos, pos + node.nodeSize, node.content);
        if (dispatch) dispatch(tr);
        return true;
      },
      /**
       * 将光标/选区附近的连续图片包成图组。
       * TipTap 图片是 atom，无法像文本那样拖选多张，因此自动扩展相邻图片。
       */
      wrapImagesInGroup: () => ({ tr, state, dispatch }) => {
        const anchor = findAnchorImagePos(state);
        if (anchor == null) return false;
        const run = collectConsecutiveImageRun(state, anchor);
        if (!run) return false;
        const groupType = state.schema.nodes.imageGroup;
        if (!groupType) return false;
        const group = groupType.create(
          { layout: suggestImageGroupLayout(run.images.length) },
          run.images,
        );
        if (dispatch) {
          tr.replaceWith(run.from, run.to, group);
          // 选中新建图组，便于立刻改列数
          tr.setSelection(NodeSelection.create(tr.doc, run.from));
        }
        return true;
      },
    };
  },
 });
--- a/frontend/src/hooks/useForumLimits.ts
+++ b/frontend/src/hooks/useForumLimits.ts
@@ -12,6 +12,7 @@ const DEFAULT_LIMITS: ForumLimitsPublic = {
  page_size_default: 30,
  password_min_len: 6,
  avatar_max_mb: 2,
  signature_max: 200,
  open_posts_in_new_tab: true,
  open_content_links_in_new_tab: true,
 };
--- a/frontend/src/hooks/useSiteBranding.ts
+++ b/frontend/src/hooks/useSiteBranding.ts
@@ -29,8 +29,15 @@ function fetchBranding(): Promise<SiteBranding> {
  return inflight;
 }
 /** 浏览器标签标题：站点名 - 副标题（标语） */
 export function formatDocumentTitle(brand: SiteBranding): string {
  const name = brand.name.trim();
  const subtitle = brand.slogan.trim();
  return subtitle ? `${name} - ${subtitle}` : name;
 }
 function applyDocumentBrand(brand: SiteBranding) {
-  const title = brand.name_en ? `${brand.name} ${brand.name_en}` : brand.name;
+  const title = formatDocumentTitle(brand);
  if (document.title !== title) document.title = title;
  let link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/frontend/src/layouts/MainLayout.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useRef, useMemo, Suspense } from 'rea
 import PageLoader from '../components/PageLoader';
 import FeedPageSkeleton from '../components/FeedPageSkeleton';
 import { Outlet, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
-import { Moon, Sun, Search, Plus, PanelRight, X } from 'lucide-react';
+import { Menu, Moon, Sun, Search, Plus, PanelRight, X } from 'lucide-react';
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -54,6 +54,7 @@ export default function MainLayout() {
    title?: string;
  } | null>(null);
  const [asideOpen, setAsideOpen] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [asideLoading, setAsideLoading] = useState(() => !hasCachedAside());
  const [boardsLoading, setBoardsLoading] = useState(() => getCachedBoards().length === 0);
  const asideEverLoaded = useRef(false);
@@ -64,16 +65,34 @@ export default function MainLayout() {
  const asideDrawerRef = useRef<HTMLElement>(null);
  const asideCloseRef = useRef<HTMLButtonElement>(null);
  const sidebarDrawerRef = useRef<HTMLElement>(null);
  const sidebarCloseRef = useRef<HTMLButtonElement>(null);
  const boardBarRef = useRef<HTMLDivElement>(null);
  const closeAside = useCallback(() => setAsideOpen(false), []);
  const closeSidebar = useCallback(() => setSidebarOpen(false), []);
  const openAside = useCallback(() => {
    setSidebarOpen(false);
    setAsideOpen(true);
  }, []);
  const openSidebar = useCallback(() => {
    setAsideOpen(false);
    setSidebarOpen(true);
  }, []);
  useOverlayA11y(asideOpen && hideAside && !isCompose, closeAside, asideDrawerRef, {
    initialFocusRef: asideCloseRef,
  });
  useOverlayA11y(sidebarOpen && isMobile && !isCompose, closeSidebar, sidebarDrawerRef, {
    initialFocusRef: sidebarCloseRef,
  });
  useEffect(() => { setBoardId(Number(params.get('board')) || 0); }, [params]);
  useEffect(() => { setKeyword(params.get('keyword') || ''); }, [params]);
-  useEffect(() => { setAsideOpen(false); }, [loc.pathname, loc.search]);
+  useEffect(() => {
    setAsideOpen(false);
    setSidebarOpen(false);
  }, [loc.pathname, loc.search]);
  useEffect(() => {
    if (!/^\/post\/\d+/.test(loc.pathname)) setPostOutline(null);
  }, [loc.pathname]);
@@ -81,11 +100,14 @@ export default function MainLayout() {
    if (!hideAside) setAsideOpen(false);
  }, [hideAside]);
  useEffect(() => {
-    if (!asideOpen) return;
+    if (!isMobile) setSidebarOpen(false);
  }, [isMobile]);
  useEffect(() => {
    if (!asideOpen && !sidebarOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
-  }, [asideOpen]);
+  }, [asideOpen, sidebarOpen]);
  const refreshBoards = useCallback(() => {
    return Promise.all([
@@ -237,6 +259,19 @@ export default function MainLayout() {
      <div className="app-frame">
      <header className="app-header">
        <div className="header-inner">
          {isMobile && !isCompose && (
            <button
              type="button"
              className="header-icon-btn"
              onClick={openSidebar}
              aria-label={isPostDetail ? '打开目录与导航' : '打开导航菜单'}
              aria-expanded={sidebarOpen}
              aria-controls="sidebar-drawer"
              title="导航"
            >
              <Menu size={18} aria-hidden />
            </button>
          )}
          <button type="button" className="header-brand" onClick={() => navigateFeed(nav, '/')}>
            <SiteBrandMark branding={branding} className="header-logo-mark" />
            {!isMobile && <span className="header-logo-text">{branding.name}</span>}
@@ -284,7 +319,7 @@ export default function MainLayout() {
                <button
                  type="button"
                  className="header-icon-btn"
-                  onClick={() => setAsideOpen(true)}
+                  onClick={openAside}
                  aria-label="打开社区动态"
                  aria-expanded={asideOpen}
                  aria-controls="aside-drawer"
@@ -320,7 +355,8 @@ export default function MainLayout() {
                    className="w-40"
                    onCloseAutoFocus={(e) => e.preventDefault()}
                  >
-                    <DropdownMenuItem onClick={() => nav('/profile')}>个人中心</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => nav(`/user/${user.id}`)}>个人主页</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => nav('/profile')}>账号设置</DropdownMenuItem>
                    <DropdownMenuItem onClick={() => nav('/favorites')}>我的收藏</DropdownMenuItem>
                    {user.role === 'admin' && (
                      <>
@@ -419,6 +455,51 @@ export default function MainLayout() {
      </div>
      </div>
      {sidebarOpen && isMobile && !isCompose && (
        <div className="sidebar-drawer-root">
          <button
            type="button"
            className="aside-drawer-backdrop"
            aria-label="关闭导航菜单"
            tabIndex={-1}
            onClick={closeSidebar}
          />
          <aside
            id="sidebar-drawer"
            ref={sidebarDrawerRef}
            className="sidebar-drawer"
            role="dialog"
            aria-modal="true"
            aria-label={isPostDetail ? '目录与导航' : '导航菜单'}
          >
            <div className="aside-drawer-head">
              <span>{isPostDetail ? '目录与导航' : '导航'}</span>
              <button
                ref={sidebarCloseRef}
                type="button"
                className="header-icon-btn"
                aria-label="关闭"
                onClick={closeSidebar}
              >
                <X size={18} aria-hidden />
              </button>
            </div>
            <div className="aside-drawer-body sidebar-drawer-body">
              <Sidebar
                boards={boards}
                activeBoard={boardId}
                onSelectBoard={setBoardId}
                boardsLoading={boardsLoading}
                outlineMode={isPostDetail}
                outlineHeadings={postOutline?.headings ?? []}
                outlineScrollRoot={postOutline?.scrollRoot ?? null}
                outlineTitle={postOutline?.title}
              />
            </div>
          </aside>
        </div>
      )}
      {asideOpen && hideAside && !isCompose && (
        <div className="aside-drawer-root">
          <button
--- a/frontend/src/pages/ComposePage.tsx
+++ b/frontend/src/pages/ComposePage.tsx
@@ -323,85 +323,90 @@ export default function ComposePage() {
  return (
    <div className="compose-page">
      <div className="compose-canvas">
-        <header className="compose-header">
+        <div className="compose-shell">
-          <button
+          <header className="compose-header">
-            type="button"
+            <div className="compose-header-left">
-            className="compose-back"
+              <button
-            onClick={() => requestLeave(() => {
+                type="button"
-              if (isEdit) nav(`/post/${editId}`);
+                className="compose-back"
-              else nav(-1);
+                onClick={() => requestLeave(() => {
-            })}
+                  if (isEdit) nav(`/post/${editId}`);
-          >
+                  else nav(-1);
-            <ArrowLeft size={16} />
+                })}
-            <span>返回</span>
+              >
-          </button>
+                <ArrowLeft size={16} />
-          <div className="compose-header-actions">
+                <span>返回</span>
-            {(draftHint || editWindowHint) && (
+              </button>
-              <span className="compose-draft-hint" title={editWindowHint || draftHint}>
+              <h1 className="compose-header-title">{isEdit ? '编辑帖子' : '写新帖'}</h1>
-                {editWindowHint || draftHint}
+              {(draftHint || editWindowHint) && (
-              </span>
+                <span className="compose-draft-hint" title={editWindowHint || draftHint}>
-            )}
+                  {editWindowHint || draftHint}
-            <button
+                </span>
              type="button"
              className="compose-publish-btn"
              disabled={publishing}
              onClick={handleSubmit}
            >
              <Send size={16} />
              {publishing ? (isEdit ? '保存中…' : '发布中…') : (isEdit ? '保存修改' : '发布帖子')}
            </button>
          </div>
        </header>
        <div className="compose-meta">
          {!isEdit ? (
            <div className="compose-board-pills">
              {boards.map(b => (
                <button
                  key={b.id}
                  type="button"
                  className={`compose-board-pill${String(b.id) === boardId ? ' active' : ''}`}
                  onClick={() => setBoardId(String(b.id))}
                >
                  {b.name}
                </button>
              ))}
            </div>
          ) : currentBoard && (
            <div className="compose-board-pills">
              <span className="compose-board-pill active">{currentBoard.name}</span>
            </div>
          )}
          <TagInput
            value={tags}
            onChange={setTags}
            placeholder="输入标签后回车"
            maxLength={limits.post_tags_max > 0 ? limits.post_tags_max : undefined}
          />
        </div>
        <div className="compose-writing">
          <input
            className="compose-title"
            type="text"
            placeholder="输入文章标题…"
            value={title}
            onChange={e => setTitle(e.target.value)}
            maxLength={limits.post_title_max > 0 ? limits.post_title_max : undefined}
          />
          {currentBoard && (
            <div className="compose-subtitle">
              {isEdit ? '编辑于' : '发布至'} <strong>{currentBoard.name}</strong>
              {editWindowHint && (
                <span className="compose-edit-window"> · {editWindowHint}</span>
              )}
            </div>
-          )}
+            <div className="compose-header-actions">
-          <ArticleEditor
+              <button
-            value={content}
+                type="button"
-            onChange={setContent}
+                className="compose-publish-btn"
-            placeholder="开始写作。所见即所得，选中文字后使用工具栏设置格式。"
+                disabled={publishing}
-          />
+                onClick={handleSubmit}
              >
                <Send size={16} />
                {publishing ? (isEdit ? '保存中…' : '发布中…') : (isEdit ? '保存修改' : '发布')}
              </button>
            </div>
          </header>
          <section className="compose-context" aria-label="发布设置">
            <div className="compose-context-row">
              <span className="compose-context-label">板块</span>
              {!isEdit ? (
                <div className="compose-board-pills" role="listbox" aria-label="选择板块">
                  {boards.map(b => (
                    <button
                      key={b.id}
                      type="button"
                      role="option"
                      aria-selected={String(b.id) === boardId}
                      className={`compose-board-pill${String(b.id) === boardId ? ' active' : ''}`}
                      onClick={() => setBoardId(String(b.id))}
                    >
                      {b.name}
                    </button>
                  ))}
                </div>
              ) : currentBoard ? (
                <div className="compose-board-pills">
                  <span className="compose-board-pill active">{currentBoard.name}</span>
                </div>
              ) : null}
            </div>
            <div className="compose-context-row compose-context-row--tags">
              <span className="compose-context-label">标签</span>
              <TagInput
                value={tags}
                onChange={setTags}
                placeholder="添加标签，回车确认"
                maxLength={limits.post_tags_max > 0 ? limits.post_tags_max : undefined}
              />
            </div>
          </section>
          <div className="compose-document">
            <input
              className="compose-title"
              type="text"
              placeholder="输入文章标题…"
              value={title}
              onChange={e => setTitle(e.target.value)}
              maxLength={limits.post_title_max > 0 ? limits.post_title_max : undefined}
            />
            <ArticleEditor
              value={content}
              onChange={setContent}
              placeholder="开始写作。按回车分段，选中文字后用工具栏设置格式。"
            />
          </div>
        </div>
      </div>
      <UnsavedChangesDialog
--- a/frontend/src/pages/PostDetailPage.tsx
+++ b/frontend/src/pages/PostDetailPage.tsx
@@ -5,6 +5,7 @@ import PinnedIcon from '@/components/PinnedIcon';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import BoardBadge from '@/components/BoardBadge';
 import UserLink from '@/components/UserLink';
 import { Spinner } from '@/components/ui/spinner';
 import {
  AlertDialog,
@@ -340,11 +341,18 @@ export default function PostDetailPage() {
            {post.title}
          </h1>
          <div className="post-detail-author-row">
-            <div className="post-avatar post-avatar-lg">
+            <UserLink
-              {post.user?.avatar ? <img src={post.user.avatar} alt="" loading="lazy" decoding="async" /> : authorInitial}
+              user={post.user}
-            </div>
+              showAvatar={false}
              showName={false}
              className="post-avatar post-avatar-lg user-link--avatar-only"
            >
              {post.user?.avatar
                ? <img src={post.user.avatar} alt="" loading="lazy" decoding="async" />
                : authorInitial}
            </UserLink>
            <div className="post-detail-author-info">
-              <span className="post-detail-author-name">{post.user?.nickname}</span>
+              <UserLink user={post.user} className="post-detail-author-name" />
              <span className="post-detail-meta-line">
                发布于 {formatDateTime(post.created_at)}
                {showEdited && (
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -1,26 +1,52 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { ArrowLeft, Camera, LayoutDashboard, Settings, Upload, X } from 'lucide-react';
+import {
  ArrowLeft,
  Camera,
  Check,
  Copy,
  FileText,
  Hash,
  Heart,
  LayoutDashboard,
  MessageCircle,
  PenLine,
  Settings,
  Star,
  Upload,
  X,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Badge } from '@/components/ui/badge';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Spinner } from '@/components/ui/spinner';
 import { notify } from '@/lib/notify';
 import { useAuth } from '../hooks/useAuth';
 import { api } from '../api/client';
 import type { PostItem, UserActivityStats } from '../api/types';
 import { useForumLimits } from '../hooks/useForumLimits';
 import AvatarCropDialog from '../components/AvatarCropDialog';
 import PostListItem from '../components/PostListItem';
 import FeedPagination from '../components/FeedPagination';
 import { AVATAR_ACCEPT, validateAvatarFile } from '../utils/avatarCrop';
 import { loginPath } from '../utils/authRedirect';
 import { openForumPost } from '../utils/openPost';
 import { formatDateTime } from '../utils/content';
 import { userPath } from '../utils/userPath';
 const nickSchema = z.object({
  nickname: z.string().min(1, '请输入昵称').max(64),
 });
 const sigSchema = (maxLen: number) => z.object({
  signature: z.string().max(maxLen > 0 ? maxLen : 512, `签名不能超过 ${maxLen || 512} 字`),
 });
 const pwdSchema = (minLen: number) => z.object({
  old_password: z.string().min(1, '请输入当前密码'),
  new_password: z.string().min(minLen, `新密码至少 ${minLen} 位`),
@@ -31,12 +57,22 @@ const pwdSchema = (minLen: number) => z.object({
 });
 type NickValues = z.infer<typeof nickSchema>;
 type SigValues = z.infer<ReturnType<typeof sigSchema>>;
 type PwdValues = z.infer<ReturnType<typeof pwdSchema>>;
 type ProfileTab = 'posts' | 'settings' | 'security';
 function parseTab(raw: string | null): ProfileTab {
  if (raw === 'settings' || raw === 'security' || raw === 'posts') return raw;
  return 'posts';
 }
 export default function ProfilePage() {
  const nav = useNavigate();
  const [params, setParams] = useSearchParams();
  const tab = parseTab(params.get('tab'));
  const { user, loading: authLoading, refresh } = useAuth();
  const [nickLoading, setNickLoading] = useState(false);
  const [sigLoading, setSigLoading] = useState(false);
  const [pwdLoading, setPwdLoading] = useState(false);
  const [avatarLoading, setAvatarLoading] = useState(false);
  const [pendingAvatar, setPendingAvatar] = useState<File | null>(null);
@@ -45,21 +81,44 @@ export default function ProfilePage() {
  const [cropImageSrc, setCropImageSrc] = useState<string | null>(null);
  const [cropFileName, setCropFileName] = useState('');
  const [dragOver, setDragOver] = useState(false);
  const [idCopied, setIdCopied] = useState(false);
  const [stats, setStats] = useState<UserActivityStats | null>(null);
  const [statsLoading, setStatsLoading] = useState(true);
  const [posts, setPosts] = useState<PostItem[]>([]);
  const [postsLoading, setPostsLoading] = useState(false);
  const [postPage, setPostPage] = useState(1);
  const [postTotal, setPostTotal] = useState(0);
  const fileRef = useRef<HTMLInputElement>(null);
  const dragCounter = useRef(0);
  const copyTimer = useRef<ReturnType<typeof setTimeout>>();
  const { limits } = useForumLimits();
  const pageSize = limits.page_size_default > 0 ? limits.page_size_default : 20;
  const totalPages = Math.max(1, Math.ceil(postTotal / pageSize));
  const nickForm = useForm<NickValues>({
    resolver: zodResolver(nickSchema),
    values: { nickname: user?.nickname ?? '' },
  });
  const sigMax = limits.signature_max > 0 ? limits.signature_max : 200;
  const sigForm = useForm<SigValues>({
    resolver: zodResolver(sigSchema(sigMax)),
    values: { signature: user?.signature ?? '' },
  });
  const pwdForm = useForm<PwdValues>({
    resolver: zodResolver(pwdSchema(limits.password_min_len)),
    defaultValues: { old_password: '', new_password: '', confirm_password: '' },
  });
  const setTab = (next: ProfileTab) => {
    const nextParams = new URLSearchParams(params);
    if (next === 'posts') nextParams.delete('tab');
    else nextParams.set('tab', next);
    setParams(nextParams, { replace: true });
  };
  useEffect(() => {
    if (!authLoading && !user) {
      nav(loginPath('/profile'));
@@ -78,6 +137,42 @@ export default function ProfilePage() {
    };
  }, [cropImageSrc]);
  useEffect(() => () => {
    if (copyTimer.current) clearTimeout(copyTimer.current);
  }, []);
  const loadStats = useCallback(() => {
    setStatsLoading(true);
    api.profileStats()
      .then(d => setStats(d.stats))
      .catch(() => setStats(null))
      .finally(() => setStatsLoading(false));
  }, []);
  useEffect(() => {
    if (!user) return;
    loadStats();
  }, [user, loadStats]);
  useEffect(() => {
    if (!user || tab !== 'posts') return;
    let cancelled = false;
    setPostsLoading(true);
    api.posts({ user_id: user.id, page: postPage, size: pageSize, sort: 'latest' })
      .then(d => {
        if (cancelled) return;
        setPosts(Array.isArray(d.posts) ? d.posts : []);
        setPostTotal(d.total ?? 0);
      })
      .catch(e => {
        if (!cancelled) notify.error(e instanceof Error ? e.message : '加载帖子失败');
      })
      .finally(() => {
        if (!cancelled) setPostsLoading(false);
      });
    return () => { cancelled = true; };
  }, [user, tab, postPage, pageSize]);
  const closeCropDialog = useCallback((open: boolean) => {
    if (!open) {
      setCropOpen(false);
@@ -109,6 +204,19 @@ export default function ProfilePage() {
    }
  };
  const onUpdateSig = async (values: SigValues) => {
    setSigLoading(true);
    try {
      await api.updateSignature(values.signature);
      await refresh();
      notify.success('签名已更新');
    } catch (e: unknown) {
      notify.error(e instanceof Error ? e.message : '更新失败');
    } finally {
      setSigLoading(false);
    }
  };
  const onUpdatePwd = async (values: PwdValues) => {
    setPwdLoading(true);
    try {
@@ -132,7 +240,7 @@ export default function ProfilePage() {
  };
  const openCropForFile = (file: File) => {
-    const err = validateAvatarFile(file, limits.avatar_max_mb);
+    const err = validateAvatarFile(file);
    if (err) {
      notify.error(err);
      if (fileRef.current) fileRef.current.value = '';
@@ -204,7 +312,26 @@ export default function ProfilePage() {
    if (file) openCropForFile(file);
  };
  const copyUserId = async () => {
    try {
      await navigator.clipboard.writeText(String(user.id));
      setIdCopied(true);
      notify.success('已复制用户 ID');
      if (copyTimer.current) clearTimeout(copyTimer.current);
      copyTimer.current = setTimeout(() => setIdCopied(false), 1600);
    } catch {
      notify.error('复制失败，请手动选择');
    }
  };
  const displayAvatar = avatarPreview ?? user.avatar;
  const joinedAt = user.created_at ? formatDateTime(user.created_at) : '';
  const tabs: { key: ProfileTab; label: string; count?: number }[] = [
    { key: 'posts', label: '我的帖子', count: stats?.post_count },
    { key: 'settings', label: '资料设置' },
    { key: 'security', label: '安全设置' },
  ];
  return (
    <div className="page-wrap">
@@ -254,12 +381,58 @@ export default function ProfilePage() {
              </span>
            </div>
          </button>
          <div className="profile-header-info">
            <div className="profile-header-main">
-              <h1 className="profile-display-name">{user.nickname}</h1>
+              <div className="profile-name-row">
                <h2 className="profile-display-name">{user.nickname}</h2>
                {user.role === 'admin' && <Badge variant="green">管理员</Badge>}
              </div>
              <div className="profile-username">@{user.username}</div>
-              <p className="profile-avatar-tip">点击头像选择图片，或拖拽到此处</p>
+              <div className="profile-id-row">
-              {user.role === 'admin' && <Badge variant="green" className="mt-1.5">管理员</Badge>}
+                <span className="profile-id-chip" title="用户 ID">
                  <Hash size={13} aria-hidden />
                  UID {user.id}
                </span>
                <button
                  type="button"
                  className="profile-id-copy"
                  onClick={copyUserId}
                  aria-label="复制用户 ID"
                >
                  {idCopied ? <Check size={14} /> : <Copy size={14} />}
                  {idCopied ? '已复制' : '复制'}
                </button>
                <button
                  type="button"
                  className="profile-id-copy"
                  onClick={() => nav(userPath(user.id))}
                >
                  公开主页
                </button>
              </div>
              {user.signature?.trim() ? (
                <p className="profile-signature">{user.signature}</p>
              ) : (
                <p className="profile-signature profile-signature--empty">尚未设置签名</p>
              )}
              <dl className="profile-meta-list">
                <div>
                  <dt>用户名</dt>
                  <dd>{user.username}</dd>
                </div>
                <div>
                  <dt>邮箱</dt>
                  <dd>{user.email || '未设置'}</dd>
                </div>
                {joinedAt && (
                  <div>
                    <dt>注册时间</dt>
                    <dd>{joinedAt}</dd>
                  </div>
                )}
              </dl>
              <p className="profile-avatar-tip">点击头像选择图片，或拖拽到此处更换</p>
            </div>
            {pendingAvatar && (
              <div className="profile-avatar-actions">
@@ -279,12 +452,36 @@ export default function ProfilePage() {
              </div>
            )}
          </div>
          <div className="profile-stat-grid" aria-label="活动统计">
            <button type="button" className="profile-stat" onClick={() => setTab('posts')}>
              <FileText size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.post_count ?? 0)}</strong>
              <span>帖子</span>
            </button>
            <div className="profile-stat">
              <MessageCircle size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.comment_count ?? 0)}</strong>
              <span>评论</span>
            </div>
            <button type="button" className="profile-stat" onClick={() => nav('/favorites')}>
              <Star size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.favorite_count ?? 0)}</strong>
              <span>收藏</span>
            </button>
            <div className="profile-stat">
              <Heart size={16} aria-hidden />
              <strong>{statsLoading ? '—' : (stats?.like_received ?? 0)}</strong>
              <span>获赞</span>
            </div>
          </div>
        </div>
        <AvatarCropDialog
          open={cropOpen}
          imageSrc={cropImageSrc}
          fileName={cropFileName}
          maxMb={limits.avatar_max_mb}
          onOpenChange={closeCropDialog}
          onConfirm={onCropConfirm}
        />
@@ -308,96 +505,190 @@ export default function ProfilePage() {
          </div>
        )}
-        <div className="section-card">
+        <div className="profile-tabs" role="tablist" aria-label="个人中心分区">
-          <div className="section-card-title">基本资料</div>
+          {tabs.map(t => (
-          <Form {...nickForm}>
+            <button
-            <form onSubmit={nickForm.handleSubmit(onUpdateNick)} className="profile-form">
+              key={t.key}
-              <FormItem>
+              type="button"
-                <FormLabel>用户名</FormLabel>
+              role="tab"
-                <FormControl>
+              aria-selected={tab === t.key}
-                  <Input value={user.username} disabled />
+              className={`profile-tab${tab === t.key ? ' active' : ''}`}
-                </FormControl>
+              onClick={() => setTab(t.key)}
-              </FormItem>
+            >
-              <FormItem>
+              {t.label}
-                <FormLabel>邮箱</FormLabel>
+              {typeof t.count === 'number' && (
-                <FormControl>
+                <span className="profile-tab-count">{t.count}</span>
-                  <Input value={user.email || '未设置'} disabled />
+              )}
-                </FormControl>
+            </button>
-              </FormItem>
+          ))}
              <FormField
                control={nickForm.control}
                name="nickname"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>昵称</FormLabel>
                    <FormControl>
                      <Input maxLength={64} placeholder="显示名称" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="profile-form-footer">
                <span className="profile-form-hint">
                  支持 JPG、PNG、GIF、WebP，头像不超过 {limits.avatar_max_mb}MB
                </span>
                <Button type="submit" loading={nickLoading}>保存</Button>
              </div>
            </form>
          </Form>
        </div>
-        <div className="section-card">
+        {tab === 'posts' && (
-          <div className="section-card-title">修改密码</div>
+          <div className="profile-panel">
-          <Form {...pwdForm}>
+            {postsLoading ? (
-            <form onSubmit={pwdForm.handleSubmit(onUpdatePwd)} className="profile-form">
+              <div className="flex justify-center py-12"><Spinner size="lg" /></div>
-              <FormField
+            ) : posts.length === 0 ? (
-                control={pwdForm.control}
+              <div className="empty-state">
-                name="old_password"
+                <PenLine className="empty-state-icon" aria-hidden size={36} strokeWidth={1.5} />
-                render={({ field }) => (
+                <p>还没有发布过帖子</p>
-                  <FormItem>
+                <Button onClick={() => nav('/compose')}>去发帖</Button>
                    <FormLabel>当前密码</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="输入当前密码" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={pwdForm.control}
                name="new_password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>新密码</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder={`至少 ${limits.password_min_len} 位`} {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={pwdForm.control}
                name="confirm_password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>确认新密码</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="再次输入新密码" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="profile-form-footer profile-form-footer--end">
                <Button type="submit" variant="destructive" loading={pwdLoading}>
                  修改密码
                </Button>
              </div>
-            </form>
+            ) : (
-          </Form>
+              <>
-        </div>
+                <div className="content-surface">
                  {posts.map(post => (
                    <PostListItem
                      key={post.id}
                      post={post}
                      onSelect={(id) => openForumPost(nav, id, limits.open_posts_in_new_tab)}
                    />
                  ))}
                </div>
                {totalPages > 1 && (
                  <FeedPagination
                    page={postPage}
                    totalPages={totalPages}
                    postTotal={postTotal}
                    loading={postsLoading}
                    onPageChange={setPostPage}
                  />
                )}
              </>
            )}
          </div>
        )}
        {tab === 'settings' && (
          <div className="section-card">
            <div className="section-card-title">基本资料</div>
            <Form {...nickForm}>
              <form onSubmit={nickForm.handleSubmit(onUpdateNick)} className="profile-form">
                <FormItem>
                  <FormLabel>用户 ID</FormLabel>
                  <FormControl>
                    <Input value={String(user.id)} disabled />
                  </FormControl>
                </FormItem>
                <FormItem>
                  <FormLabel>用户名</FormLabel>
                  <FormControl>
                    <Input value={user.username} disabled />
                  </FormControl>
                </FormItem>
                <FormItem>
                  <FormLabel>邮箱</FormLabel>
                  <FormControl>
                    <Input value={user.email || '未设置'} disabled />
                  </FormControl>
                </FormItem>
                <FormField
                  control={nickForm.control}
                  name="nickname"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>昵称</FormLabel>
                      <FormControl>
                        <Input maxLength={64} placeholder="显示名称" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="profile-form-footer">
                  <span className="profile-form-hint">
                    用户名与 ID 不可修改；头像支持 JPG / PNG / GIF / WebP，裁剪后不超过 {limits.avatar_max_mb}MB
                  </span>
                  <Button type="submit" loading={nickLoading}>保存昵称</Button>
                </div>
              </form>
            </Form>
            <div className="profile-form-divider" />
            <Form {...sigForm}>
              <form onSubmit={sigForm.handleSubmit(onUpdateSig)} className="profile-form">
                <FormField
                  control={sigForm.control}
                  name="signature"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>个人签名</FormLabel>
                      <FormControl>
                        <Textarea
                          rows={3}
                          maxLength={sigMax}
                          placeholder="写一句介绍自己的话，会显示在公开主页"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="profile-form-footer">
                  <span className="profile-form-hint">
                    {(sigForm.watch('signature') || '').length}/{sigMax}
                  </span>
                  <Button type="submit" loading={sigLoading}>保存签名</Button>
                </div>
              </form>
            </Form>
          </div>
        )}
        {tab === 'security' && (
          <div className="section-card">
            <div className="section-card-title">修改密码</div>
            <Form {...pwdForm}>
              <form onSubmit={pwdForm.handleSubmit(onUpdatePwd)} className="profile-form">
                <FormField
                  control={pwdForm.control}
                  name="old_password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>当前密码</FormLabel>
                      <FormControl>
                        <Input type="password" placeholder="输入当前密码" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={pwdForm.control}
                  name="new_password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>新密码</FormLabel>
                      <FormControl>
                        <Input type="password" placeholder={`至少 ${limits.password_min_len} 位`} {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={pwdForm.control}
                  name="confirm_password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>确认新密码</FormLabel>
                      <FormControl>
                        <Input type="password" placeholder="再次输入新密码" {...field} />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <div className="profile-form-footer profile-form-footer--end">
                  <Button type="submit" variant="destructive" loading={pwdLoading}>
                    修改密码
                  </Button>
                </div>
              </form>
            </Form>
          </div>
        )}
      </div>
    </div>
  );
--- a/frontend/src/pages/UserProfilePage.tsx
+++ b/frontend/src/pages/UserProfilePage.tsx
@@ -0,0 +1,211 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
  ArrowLeft,
  FileText,
  Hash,
  Heart,
  MessageCircle,
  PenLine,
  Settings,
  Star,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Spinner } from '@/components/ui/spinner';
 import { notify } from '@/lib/notify';
 import { api } from '../api/client';
 import type { PostItem, UserActivityStats, UserPublic } from '../api/types';
 import { useAuth } from '../hooks/useAuth';
 import { useForumLimits } from '../hooks/useForumLimits';
 import PostListItem from '../components/PostListItem';
 import FeedPagination from '../components/FeedPagination';
 import { openForumPost } from '../utils/openPost';
 import { formatDateTime } from '../utils/content';
 export default function UserProfilePage() {
  const { id: idParam } = useParams();
  const userId = Number(idParam);
  const nav = useNavigate();
  const { user: me } = useAuth();
  const { limits } = useForumLimits();
  const pageSize = limits.page_size_default > 0 ? limits.page_size_default : 20;
  const [profile, setProfile] = useState<UserPublic | null>(null);
  const [stats, setStats] = useState<UserActivityStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [posts, setPosts] = useState<PostItem[]>([]);
  const [postsLoading, setPostsLoading] = useState(false);
  const [postPage, setPostPage] = useState(1);
  const [postTotal, setPostTotal] = useState(0);
  const isSelf = !!me && me.id === userId;
  const totalPages = Math.max(1, Math.ceil(postTotal / pageSize));
  useEffect(() => {
    if (!userId || Number.isNaN(userId)) {
      notify.error('无效用户');
      nav('/');
      return;
    }
    setLoading(true);
    setPostPage(1);
    api.userProfile(userId)
      .then(d => {
        setProfile(d.user);
        setStats(d.stats);
      })
      .catch(e => {
        notify.error(e instanceof Error ? e.message : '用户不存在');
        nav('/');
      })
      .finally(() => setLoading(false));
  }, [userId, nav]);
  useEffect(() => {
    if (!userId || Number.isNaN(userId) || !profile) return;
    let cancelled = false;
    setPostsLoading(true);
    api.posts({ user_id: userId, page: postPage, size: pageSize, sort: 'latest' })
      .then(d => {
        if (cancelled) return;
        setPosts(Array.isArray(d.posts) ? d.posts : []);
        setPostTotal(d.total ?? 0);
      })
      .catch(e => {
        if (!cancelled) notify.error(e instanceof Error ? e.message : '加载帖子失败');
      })
      .finally(() => {
        if (!cancelled) setPostsLoading(false);
      });
    return () => { cancelled = true; };
  }, [userId, profile, postPage, pageSize]);
  if (loading) {
    return <div className="flex justify-center py-16"><Spinner size="lg" /></div>;
  }
  if (!profile) return null;
  const joinedAt = profile.created_at ? formatDateTime(profile.created_at) : '';
  const signature = profile.signature?.trim() || '';
  return (
    <div className="page-wrap">
      <div className="page-inner-wide page-inner-wide--profile">
        <Button variant="ghost" className="mb-3" onClick={() => nav(-1)}>
          <ArrowLeft />
          返回
        </Button>
        <div className="profile-header-card profile-header-card--public">
          <div className="profile-avatar-lg" aria-hidden>
            {profile.avatar
              ? <img src={profile.avatar} alt="" loading="lazy" decoding="async" />
              : profile.nickname[0]}
          </div>
          <div className="profile-header-info">
            <div className="profile-header-main">
              <div className="profile-name-row">
                <h1 className="profile-display-name">{profile.nickname}</h1>
                {profile.role === 'admin' && <Badge variant="green">管理员</Badge>}
                {profile.banned && <Badge variant="destructive">已禁言</Badge>}
              </div>
              <div className="profile-username">@{profile.username}</div>
              <div className="profile-id-row">
                <span className="profile-id-chip" title="用户 ID">
                  <Hash size={13} aria-hidden />
                  UID {profile.id}
                </span>
              </div>
              {signature ? (
                <p className="profile-signature">{signature}</p>
              ) : (
                <p className="profile-signature profile-signature--empty">这个人很懒，还没有签名</p>
              )}
              <dl className="profile-meta-list">
                {joinedAt && (
                  <div>
                    <dt>注册时间</dt>
                    <dd>{joinedAt}</dd>
                  </div>
                )}
              </dl>
            </div>
            {isSelf && (
              <div className="profile-avatar-actions">
                <Button size="sm" variant="outline" onClick={() => nav('/profile?tab=settings')}>
                  <Settings size={14} />
                  编辑资料
                </Button>
              </div>
            )}
          </div>
          <div className="profile-stat-grid" aria-label="活动统计">
            <div className="profile-stat">
              <FileText size={16} aria-hidden />
              <strong>{stats?.post_count ?? 0}</strong>
              <span>帖子</span>
            </div>
            <div className="profile-stat">
              <MessageCircle size={16} aria-hidden />
              <strong>{stats?.comment_count ?? 0}</strong>
              <span>评论</span>
            </div>
            <div className="profile-stat">
              <Heart size={16} aria-hidden />
              <strong>{stats?.like_received ?? 0}</strong>
              <span>获赞</span>
            </div>
            {isSelf && (
              <button type="button" className="profile-stat" onClick={() => nav('/favorites')}>
                <Star size={16} aria-hidden />
                <strong>{stats?.favorite_count ?? 0}</strong>
                <span>收藏</span>
              </button>
            )}
          </div>
        </div>
        <div className="section-card-title profile-posts-heading">
          {isSelf ? '我的帖子' : `${profile.nickname} 的帖子`}
          {postTotal > 0 && <span className="profile-tab-count">{postTotal}</span>}
        </div>
        <div className="profile-panel">
          {postsLoading ? (
            <div className="flex justify-center py-12"><Spinner size="lg" /></div>
          ) : posts.length === 0 ? (
            <div className="empty-state">
              <PenLine className="empty-state-icon" aria-hidden size={36} strokeWidth={1.5} />
              <p>{isSelf ? '还没有发布过帖子' : '暂无公开帖子'}</p>
              {isSelf && <Button onClick={() => nav('/compose')}>去发帖</Button>}
            </div>
          ) : (
            <>
              <div className="content-surface">
                {posts.map(post => (
                  <PostListItem
                    key={post.id}
                    post={post}
                    onSelect={(id) => openForumPost(nav, id, limits.open_posts_in_new_tab)}
                  />
                ))}
              </div>
              {totalPages > 1 && (
                <FeedPagination
                  page={postPage}
                  totalPages={totalPages}
                  postTotal={postTotal}
                  loading={postsLoading}
                  onPageChange={setPostPage}
                />
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
 }
--- a/frontend/src/pages/admin/AdminCommentsPage.tsx
+++ b/frontend/src/pages/admin/AdminCommentsPage.tsx
@@ -84,7 +84,13 @@ export default function AdminCommentsPage() {
                        {c.post?.title ?? `#${c.post_id}`}
                      </button>
                    </td>
-                    <td>{c.user?.nickname || c.guest_nick || '游客'}</td>
+                    <td>
                      {c.user_id && c.user ? (
                        <button type="button" className="admin-text-link" onClick={() => nav(`/user/${c.user_id}`)}>
                          {c.user.nickname}
                        </button>
                      ) : (c.guest_nick || '游客')}
                    </td>
                    <td className="max-w-[200px] truncate">{c.content}</td>
                    <td>{c.is_private ? <Badge variant="secondary">是</Badge> : '—'}</td>
                    <td>{new Date(c.created_at).toLocaleString('zh-CN')}</td>
--- a/frontend/src/pages/admin/AdminDashboardPage.tsx
+++ b/frontend/src/pages/admin/AdminDashboardPage.tsx
@@ -73,7 +73,13 @@ export default function AdminDashboardPage() {
                    {p.title}
                  </button>
                </td>
-                <td>{p.user?.nickname ?? '—'}</td>
+                <td>
                  {p.user?.id ? (
                    <button type="button" className="admin-text-link" onClick={() => nav(`/user/${p.user!.id}`)}>
                      {p.user.nickname}
                    </button>
                  ) : '—'}
                </td>
                <td>{p.pinned ? <Badge variant="orange">是</Badge> : '—'}</td>
                <td>{new Date(p.created_at).toLocaleString('zh-CN')}</td>
              </tr>
--- a/frontend/src/pages/admin/AdminPostsPage.tsx
+++ b/frontend/src/pages/admin/AdminPostsPage.tsx
@@ -145,7 +145,13 @@ export default function AdminPostsPage() {
                      {edited && <Badge variant="secondary" className="ml-1">已编辑</Badge>}
                    </td>
                    <td>{p.board?.name ?? '—'}</td>
-                    <td>{p.user?.nickname ?? '—'}</td>
+                    <td>
                      {p.user?.id ? (
                        <button type="button" className="admin-text-link" onClick={() => nav(`/user/${p.user!.id}`)}>
                          {p.user.nickname}
                        </button>
                      ) : '—'}
                    </td>
                    <td className="max-w-[120px] truncate text-muted-foreground">{p.tags || '—'}</td>
                    <td>{p.comment_count ?? 0}</td>
                    <td>{p.pinned ? <Badge variant="orange">是</Badge> : '—'}</td>
--- a/frontend/src/pages/admin/AdminSettingsPage.tsx
+++ b/frontend/src/pages/admin/AdminSettingsPage.tsx
@@ -78,10 +78,11 @@ const SETTING_SECTIONS: SettingSection[] = [
  {
    id: 'user',
    title: '用户账号',
-    summary: '注册、改密与头像上传限制',
+    summary: '注册、改密、头像与签名限制',
    rows: [
      { key: 'password_min_len', label: '密码最短', unit: '位', min: 4 },
      { key: 'avatar_max_mb', label: '头像上限', unit: 'MB', min: 1 },
      { key: 'signature_max', label: '签名上限', unit: '字', min: 0 },
    ],
  },
 ];
--- a/frontend/src/pages/admin/AdminUsersPage.tsx
+++ b/frontend/src/pages/admin/AdminUsersPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Spinner } from '@/components/ui/spinner';
@@ -8,6 +9,7 @@ import { useAdminGuard } from '../../layouts/AdminLayout';
 import type { User } from '../../api/types';
 export default function AdminUsersPage() {
  const nav = useNavigate();
  const { ready } = useAdminGuard();
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
@@ -79,7 +81,11 @@ export default function AdminUsersPage() {
                  <tr key={u.id}>
                    <td>{u.id}</td>
                    <td>{u.username}</td>
-                    <td>{u.nickname}</td>
+                    <td>
                      <button type="button" className="admin-text-link" onClick={() => nav(`/user/${u.id}`)}>
                        {u.nickname}
                      </button>
                    </td>
                    <td className="admin-table-email">{u.email || '—'}</td>
                    <td>
                      {u.role === 'admin'
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
--- a/frontend/src/utils/avatarCrop.ts
+++ b/frontend/src/utils/avatarCrop.ts
@@ -6,6 +6,12 @@ export const AVATAR_MIME_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image
 /** 头像输出尺寸 */
 export const AVATAR_OUTPUT_SIZE = 512;
 /**
 * 原图体积软上限：仅防止浏览器加载过大文件卡死。
 * 实际上传限额看裁剪后的文件（见 validateAvatarOutput）。
 */
 export const AVATAR_SOURCE_MAX_MB = 20;
 function loadImage(src: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
@@ -15,13 +21,21 @@ function loadImage(src: string): Promise<HTMLImageElement> {
  });
 }
-/** 校验头像文件，返回错误信息或 null */
+/** 选择/拖入原图时：只校验格式与可读性上限，不按上传限额卡死 */
-export function validateAvatarFile(file: File, maxMb: number): string | null {
+export function validateAvatarFile(file: File): string | null {
  if (!AVATAR_MIME_TYPES.includes(file.type)) {
    return '仅支持 JPG、PNG、GIF、WebP 格式';
  }
  if (file.size > AVATAR_SOURCE_MAX_MB * 1024 * 1024) {
    return `原图过大（超过 ${AVATAR_SOURCE_MAX_MB}MB），请换一张较小的图片`;
  }
  return null;
 }
 /** 裁剪完成后：按实际上传体积校验 */
 export function validateAvatarOutput(file: File, maxMb: number): string | null {
  if (file.size > maxMb * 1024 * 1024) {
-    return `头像不能超过 ${maxMb}MB`;
+    return `裁剪后头像仍超过 ${maxMb}MB，请缩小裁剪区域或换图`;
  }
  return null;
 }
--- a/frontend/src/utils/markdownContent.ts
+++ b/frontend/src/utils/markdownContent.ts
@@ -50,16 +50,50 @@ function splitParagraphBreaks(html: string): string {
 /** 为 Turndown 注册通用正文规则（不含 members-only） */
 function addTurndownContentRules(service: TurndownService): void {
  service.addRule('imageGroup', {
    filter: (node) =>
      node.nodeName === 'DIV' && (node as HTMLElement).hasAttribute('data-image-group'),
    replacement: (_content, node) => {
      const el = node as HTMLElement;
      const layout = el.getAttribute('data-layout') || 'cols-2';
      const imgs = [...el.querySelectorAll(':scope > img, :scope .image-group__grid > img')]
        .map(img => {
          const src = img.getAttribute('src') || '';
          const alt = img.getAttribute('alt') || '';
          return src ? `<img src="${src}" alt="${alt}">` : '';
        })
        .filter(Boolean)
        .join('');
      if (!imgs) return '';
      return `\n\n<div data-image-group data-layout="${layout}" class="image-group image-group--${layout}">${imgs}</div>\n\n`;
    },
  });
  service.addRule('image', {
    filter: 'img',
    replacement: (_content, node) => {
      const el = node as HTMLImageElement;
      // 已由图组规则处理的子图跳过
      if (el.closest('[data-image-group]')) return '';
      const alt = el.getAttribute('alt') ?? '';
      const src = el.getAttribute('src') ?? '';
-      return src ? `![${alt}](${src})` : '';
+      if (!src) return '';
      const display = el.getAttribute('data-display');
      if (display && display !== 'default') {
        return `\n\n<img src="${src}" alt="${alt}" data-display="${display}" class="article-img article-img--${display}">\n\n`;
      }
      return `![${alt}](${src})`;
    },
  });
  // 清浮动段落：保留为 HTML，避免空行被 Markdown 折叠后绕排失效
  service.addRule('clearFloatParagraph', {
    filter: (node) =>
      node.nodeName === 'P' && (node as HTMLElement).hasAttribute('data-clear-float'),
    replacement: (content) =>
      `\n\n<p data-clear-float class="article-clear-float">${content}</p>\n\n`,
  });
  service.addRule('underline', {
    filter: ['u'],
    replacement: (content) => `<u>${content}</u>`,
--- a/frontend/src/utils/postContent.ts
+++ b/frontend/src/utils/postContent.ts
@@ -6,7 +6,13 @@ import { enhanceHeadingAnchors } from './postHeadings';
 /** DOMPurify 配置：允许会员专属自定义标签与链接 target */
 export const POST_CONTENT_PURIFY_CONFIG: Config = {
  ADD_TAGS: ['members-only'],
-  ADD_ATTR: ['data-locked', 'data-length', 'target', 'rel', 'data-code-copy', 'data-lang'],
+  ADD_ATTR: [
    'data-locked', 'data-length', 'target', 'rel',
    'data-code-copy', 'data-lang', 'data-full',
    'data-image-group', 'data-layout', 'data-display',
    'data-clear-float',
    'class',
  ],
 };
 const LOCK_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`;
@@ -81,8 +87,37 @@ export function renderPostContentHtml(
  doc.querySelectorAll('img').forEach(img => {
    if (!img.getAttribute('loading')) img.setAttribute('loading', 'lazy');
    if (!img.getAttribute('decoding')) img.setAttribute('decoding', 'async');
    const rawSrc = img.getAttribute('src') || '';
    const full = img.getAttribute('data-full') || rawSrc;
    const thumb = toPostImageThumbSrc(full) || toPostImageThumbSrc(rawSrc);
    if (thumb && full) {
      // 正文加载缩略图，点击灯箱用原图
      if (!img.getAttribute('data-full')) img.setAttribute('data-full', full);
      if (rawSrc !== thumb) img.setAttribute('src', thumb);
      img.classList.add('post-content-img--zoomable');
      img.setAttribute('role', 'button');
      img.setAttribute('tabindex', '0');
      img.setAttribute('title', img.getAttribute('title') || '点击查看原图');
    }
  });
  // 规范化图组 class，保证阅读态宫格样式生效
  doc.querySelectorAll('div[data-image-group]').forEach(el => {
    const layout = el.getAttribute('data-layout') || 'cols-2';
    el.classList.add('image-group', `image-group--${layout}`);
  });
  // 单图展示形态 class
  doc.querySelectorAll('img[data-display]').forEach(img => {
    const display = img.getAttribute('data-display');
    if (!display || display === 'default') return;
    img.classList.add('article-img', `article-img--${display}`);
  });
  // 绕排图后：连续 ≥2 个空段落，则其后首个有内容块清除浮动（写到图下）
  markClearFloatAfterBlankRuns(doc.body);
  if (opts?.openLinksInNewTab) {
    doc.querySelectorAll('a[href]').forEach(a => {
      const href = a.getAttribute('href') || '';
@@ -100,3 +135,110 @@ export function renderPostContentHtml(
  return doc.body.innerHTML;
 }
 function isFloatDisplayImage(el: Element): boolean {
  if (el.tagName !== 'IMG') return false;
  const display = el.getAttribute('data-display') || '';
  return display === 'float-left' || display === 'float-right'
    || el.classList.contains('article-img--float-left')
    || el.classList.contains('article-img--float-right');
 }
 /** 空段落 / 仅含 br、空白 */
 function isBlankParagraph(el: Element): boolean {
  if (el.tagName !== 'P') return false;
  const text = (el.textContent || '').replace(/\u00a0/g, ' ').trim();
  if (text.length > 0) return false;
  return !el.querySelector('img, video, iframe, table, pre, blockquote, members-only');
 }
 /**
 * 浮动绕排后若作者连按多次回车再写字，给后续块加 clear，
 * 避免「明明写在图下却仍贴在图右侧」。
 * 阅读态与编辑器 DOM 均可调用。
 */
 export function markClearFloatAfterBlankRuns(root: HTMLElement): void {
  const blocks = [...root.children];
  let seenFloat = false;
  let blankRun = 0;
  for (const el of blocks) {
    // 已持久化的清浮动标记始终生效
    if (el.hasAttribute('data-clear-float')) {
      el.classList.add('article-clear-float');
    }
    if (isFloatDisplayImage(el)) {
      seenFloat = true;
      blankRun = 0;
      continue;
    }
    // 通栏块本身会清浮动，重置状态
    if (
      el.tagName === 'IMG'
      || el.classList.contains('image-group')
      || /^H[1-6]$/.test(el.tagName)
      || el.tagName === 'HR'
      || el.tagName === 'PRE'
      || el.tagName === 'TABLE'
      || el.tagName === 'BLOCKQUOTE'
    ) {
      seenFloat = isFloatDisplayImage(el);
      blankRun = 0;
      continue;
    }
    if (!seenFloat) {
      if (!el.hasAttribute('data-clear-float')) {
        el.classList.remove('article-clear-float');
      }
      blankRun = 0;
      continue;
    }
    if (isBlankParagraph(el)) {
      blankRun += 1;
      continue;
    }
    // 双空行 或 已有 data-clear-float：保持写到图下
    if (blankRun >= 2 || el.hasAttribute('data-clear-float')) {
      el.classList.add('article-clear-float');
      if (!el.hasAttribute('data-clear-float')) {
        el.setAttribute('data-clear-float', '');
      }
    } else {
      el.classList.remove('article-clear-float');
    }
    blankRun = 0;
  }
 }
 /**
 * 将帖子上传图 URL 转为缩略图地址。
 * /uploads/posts/a.jpg → /media/thumb/posts/a.jpg
 */
 export function toPostImageThumbSrc(src: string): string | null {
  const path = extractUploadPath(src);
  if (!path) return null;
  if (path.startsWith('/media/thumb/')) return path;
  if (!path.startsWith('/uploads/posts/')) return null;
  return `/media/thumb/${path.slice('/uploads/'.length)}`;
 }
 /** 提取同源相对路径（忽略 query / hash） */
 function extractUploadPath(src: string): string | null {
  const raw = (src || '').trim();
  if (!raw || raw.startsWith('data:') || raw.startsWith('blob:')) return null;
  try {
    if (raw.startsWith('http://') || raw.startsWith('https://')) {
      const u = new URL(raw);
      if (typeof window !== 'undefined' && u.origin !== window.location.origin) return null;
      return u.pathname;
    }
  } catch {
    return null;
  }
  const path = raw.split('?')[0].split('#')[0];
  return path.startsWith('/') ? path : null;
 }
--- a/frontend/src/utils/userPath.ts
+++ b/frontend/src/utils/userPath.ts
@@ -0,0 +1,4 @@
 /** 用户公开主页路径 */
 export function userPath(id: number | string): string {
  return `/user/${id}`;
 }
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -41,6 +41,7 @@ export default defineConfig({
    proxy: {
      '/api': apiTarget,
      '/uploads': apiTarget,
      '/media': apiTarget,
    },
  },
 });
--- a/go.mod
+++ b/go.mod
@@ -39,9 +39,10 @@ require (
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
 	github.com/ugorji/go/codec v1.2.12 // indirect
 	golang.org/x/arch v0.8.0 // indirect
 	golang.org/x/image v0.44.0 // indirect
 	golang.org/x/net v0.25.0 // indirect
 	golang.org/x/sys v0.28.0 // indirect
-	golang.org/x/text v0.21.0 // indirect
+	golang.org/x/text v0.40.0 // indirect
 	google.golang.org/protobuf v1.34.1 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 	modernc.org/libc v1.22.5 // indirect
--- a/go.sum
+++ b/go.sum
@@ -90,6 +90,8 @@ golang.org/x/arch v0.8.0 h1:3wRIsP3pM4yUptoR96otTUOXI367OS0+c9eeRi9doIc=
 golang.org/x/arch v0.8.0/go.mod h1:FEVrYAQjsQXMVJ1nsMoVVXPZg6p2JE2mx8psSWTDQys=
 golang.org/x/crypto v0.31.0 h1:ihbySMvVjLAeSH1IbfcRTkD/iNscyz8rGzjF/E5hV6U=
 golang.org/x/crypto v0.31.0/go.mod h1:kDsLvtWBEx7MV9tJOj9bnXsPbxwJQ6csT/x4KIN4Ssk=
 golang.org/x/image v0.44.0 h1:+tDekMZED9+LrtB3G5xzRggpVh9CARjZqROla3R3R+I=
 golang.org/x/image v0.44.0/go.mod h1:V8K3KE9KKKE+pLpQDOeN18w9oacNSvy1tDOirTu4xtY=
 golang.org/x/net v0.25.0 h1:d/OCCoBEUq33pjydKrGQhw7IlUPI2Oylr+8qLx49kac=
 golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
 golang.org/x/sys v0.0.0-20201015000850-e3ed0017c211/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -99,6 +101,8 @@ golang.org/x/sys v0.28.0 h1:Fksou7UEQUWlKvIdsqzJmUmCX3cZuD2+P3XyyzwMhlA=
 golang.org/x/sys v0.28.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
 golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
 golang.org/x/text v0.40.0 h1:Ub2Z6/xjgF1WrYQz2nuITOEegKFtiIy+rieRJ5lHZKs=
 golang.org/x/text v0.40.0/go.mod h1:hpnzDAfGV753zIKo+wk3u1bVKCGPbrnF7+7LBF/UHVY=
 golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=
 golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 google.golang.org/protobuf v1.34.1 h1:9ddQBjfCyZPOHPUiPxpYESBLc+T8P3E+Vo4IbKZgFWg=
--- a/handler/api.go
+++ b/handler/api.go
@@ -662,10 +662,12 @@ func (h *Handlers) APIPosts(c *gin.Context) {
 	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
 	size, _ := strconv.Atoi(c.DefaultQuery("size", strconv.Itoa(h.Settings.PageSizeDefault())))
 	boardID, _ := strconv.ParseUint(c.Query("board_id"), 10, 64)
 	userID, _ := strconv.ParseUint(c.Query("user_id"), 10, 64)
 	keyword := c.Query("keyword")
 	q := service.PostListQuery{
 		BoardID: uint(boardID),
 		UserID:  uint(userID),
 		Page:    page,
 		Size:    size,
 		Keyword: keyword,
--- a/handler/handlers.go
+++ b/handler/handlers.go
@@ -279,6 +279,44 @@ func (h *Handlers) APILogout(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{"message": "已退出"})
 }
 // APIProfileStats 当前用户活动统计（发帖 / 评论 / 收藏 / 获赞）
 func (h *Handlers) APIProfileStats(c *gin.Context) {
 	st, err := h.User.ActivityStats(h.currentUserID(c))
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		return
 	}
 	c.JSON(http.StatusOK, gin.H{"stats": st})
 }
 // APIUserPublic 公开用户主页（资料 + 公开统计）
 func (h *Handlers) APIUserPublic(c *gin.Context) {
 	id, err := strconv.ParseUint(c.Param("id"), 10, 64)
 	if err != nil || id == 0 {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "无效用户"})
 		return
 	}
 	user, err := h.User.GetByID(uint(id))
 	if err != nil {
 		c.JSON(http.StatusNotFound, gin.H{"error": "用户不存在"})
 		return
 	}
 	st, err := h.User.ActivityStats(user.ID)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
 		return
 	}
 	// 收藏数仅本人可见
 	viewerID := h.currentUserID(c)
 	if viewerID != user.ID {
 		st.FavoriteCount = 0
 	}
 	c.JSON(http.StatusOK, gin.H{
 		"user":  user.ToPublic(),
 		"stats": st,
 	})
 }
 func (h *Handlers) APIUpdateProfile(c *gin.Context) {
 	nickname := c.PostForm("nickname")
 	if err := h.User.UpdateNickname(h.currentUserID(c), nickname); err != nil {
@@ -293,6 +331,20 @@ func (h *Handlers) APIUpdateProfile(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{"message": "昵称已更新", "user": userView})
 }
 func (h *Handlers) APIUpdateSignature(c *gin.Context) {
 	signature := c.PostForm("signature")
 	if err := h.User.UpdateSignature(h.currentUserID(c), signature); err != nil {
 		c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
 		return
 	}
 	user, _ := h.User.GetByID(h.currentUserID(c))
 	var userView any
 	if user != nil {
 		userView = user.ToSelf()
 	}
 	c.JSON(http.StatusOK, gin.H{"message": "签名已更新", "user": userView})
 }
 func (h *Handlers) APIUpdatePassword(c *gin.Context) {
 	oldPass := c.PostForm("old_password")
 	newPass := c.PostForm("new_password")
--- a/handler/thumb.go
+++ b/handler/thumb.go
@@ -0,0 +1,32 @@
 package handler
 import (
 	"net/http"
 	"os"
 	"path/filepath"
 	"strings"
 	"github.com/gin-gonic/gin"
 	"git.iioio.com/freefire/jiang13-forum/service"
 )
 // ServeImageThumb 帖子图片缩略图（按需生成并缓存）
 // GET /media/thumb/posts/xxx.jpg → 最长边 1280 的 JPEG 预览
 func (h *Handlers) ServeImageThumb(c *gin.Context) {
 	rel := strings.TrimPrefix(c.Param("filepath"), "/")
 	uploadsRoot := filepath.Join(h.Cfg.DataDir, "uploads")
 	thumbPath, err := service.EnsureUploadThumb(uploadsRoot, rel)
 	if err != nil {
 		// 生成失败时回退原图，避免正文裂图
 		orig := filepath.Join(uploadsRoot, filepath.FromSlash(rel))
 		if st, e := os.Stat(orig); e == nil && !st.IsDir() {
 			c.Header("Cache-Control", "public, max-age=3600")
 			c.File(orig)
 			return
 		}
 		c.Status(http.StatusNotFound)
 		return
 	}
 	c.Header("Cache-Control", "public, max-age=604800, immutable")
 	c.File(thumbPath)
 }
--- a/model/models.go
+++ b/model/models.go
@@ -23,6 +23,7 @@ type User struct {
 	Email       string         `gorm:"index;size:128;default:''" json:"-"`
 	Password    string         `gorm:"size:128;not null" json:"-"`
 	Nickname    string         `gorm:"size:64" json:"nickname"`
 	Signature   string         `gorm:"size:512;default:''" json:"signature"` // 个人签名
 	Avatar      string         `gorm:"size:256" json:"avatar"`
 	Role        Role           `gorm:"size:16;default:user" json:"role"`
 	Banned      bool           `gorm:"default:false" json:"banned"`
--- a/model/user_view.go
+++ b/model/user_view.go
@@ -2,14 +2,28 @@ package model
 import "time"
 // UserPublic 公开用户主页视图（无邮箱与登录信息）
 type UserPublic struct {
 	ID        uint       `json:"id"`
 	Username  string     `json:"username"`
 	Nickname  string     `json:"nickname"`
 	Signature string     `json:"signature"`
 	Avatar    string     `json:"avatar"`
 	Role      Role       `json:"role"`
 	Banned    bool       `json:"banned"`
 	BannedAt  *time.Time `json:"banned_at,omitempty"`
 	CreatedAt time.Time  `json:"created_at"`
 }
 // UserSelf 当前登录用户视图（含邮箱，不含登录 IP）
 type UserSelf struct {
-	ID        uint      `json:"id"`
+	ID        uint       `json:"id"`
-	Username  string    `json:"username"`
+	Username  string     `json:"username"`
-	Email     string    `json:"email"`
+	Email     string     `json:"email"`
-	Nickname  string    `json:"nickname"`
+	Nickname  string     `json:"nickname"`
-	Avatar    string    `json:"avatar"`
+	Signature string     `json:"signature"`
-	Role      Role      `json:"role"`
+	Avatar    string     `json:"avatar"`
 	Role      Role       `json:"role"`
 	Banned    bool       `json:"banned"`
 	BannedAt  *time.Time `json:"banned_at,omitempty"`
 	CreatedAt time.Time  `json:"created_at"`
@@ -22,6 +36,7 @@ type UserAdmin struct {
 	Username    string     `json:"username"`
 	Email       string     `json:"email"`
 	Nickname    string     `json:"nickname"`
 	Signature   string     `json:"signature"`
 	Avatar      string     `json:"avatar"`
 	Role        Role       `json:"role"`
 	Banned      bool       `json:"banned"`
@@ -32,6 +47,21 @@ type UserAdmin struct {
 	UpdatedAt   time.Time  `json:"updated_at"`
 }
 // ToPublic 转为公开主页视图
 func (u *User) ToPublic() UserPublic {
 	return UserPublic{
 		ID:        u.ID,
 		Username:  u.Username,
 		Nickname:  u.Nickname,
 		Signature: u.Signature,
 		Avatar:    u.Avatar,
 		Role:      u.Role,
 		Banned:    u.Banned,
 		BannedAt:  u.BannedAt,
 		CreatedAt: u.CreatedAt,
 	}
 }
 // ToSelf 转为个人中心 /api/me 视图
 func (u *User) ToSelf() UserSelf {
 	return UserSelf{
@@ -39,6 +69,7 @@ func (u *User) ToSelf() UserSelf {
 		Username:  u.Username,
 		Email:     u.Email,
 		Nickname:  u.Nickname,
 		Signature: u.Signature,
 		Avatar:    u.Avatar,
 		Role:      u.Role,
 		Banned:    u.Banned,
@@ -55,6 +86,7 @@ func (u *User) ToAdmin() UserAdmin {
 		Username:    u.Username,
 		Email:       u.Email,
 		Nickname:    u.Nickname,
 		Signature:   u.Signature,
 		Avatar:      u.Avatar,
 		Role:        u.Role,
 		Banned:      u.Banned,
--- a/router/router.go
+++ b/router/router.go
@@ -36,6 +36,10 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	)
 	settingsSvc.MigrateLegacyOIDCClient()
 	settingsSvc.SeedGiteaFromINI(cfg.GiteaBaseURL, cfg.GiteaToken, cfg.GiteaSyncEnabled)
 	// SPA 入口 HTML 注入后台配置的标签标题，避免刷新时先闪默认文案
 	embed_static.SetSPADocumentTitle(func() string {
 		return settingsSvc.SiteBranding().DocumentTitle()
 	})
 	authSvc := service.NewAuthService(cfg.JWTSecret, filter, settingsSvc)
 	userSvc := service.NewUserService(filter, settingsSvc)
 	boardSvc := service.NewBoardService()
@@ -62,6 +66,8 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	}
 	authMW := middleware.NewAuthMiddleware(authSvc)
 	// 缩略图使用独立前缀，避免与 Static("/uploads/*filepath") 路由冲突
 	r.GET("/media/thumb/*filepath", h.ServeImageThumb)
 	r.Static("/uploads", filepath.Join(cfg.DataDir, "uploads"))
 	// OIDC Provider（Gitea 等外部站点 SSO）
@@ -89,6 +95,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 		pubAPI.GET("/posts/hot", h.APIHotPosts)
 		pubAPI.GET("/tags", h.APITags)
 		pubAPI.GET("/comments/recent", h.APIRecentComments)
 		pubAPI.GET("/users/:id", h.APIUserPublic)
 		pubAPI.GET("/posts/:id", h.APIPostDetail)
 		pubAPI.GET("/posts/:id/comments", h.APIPostComments)
 		pubAPI.POST("/posts/:id/comments", middleware.RateLimitMiddleware(limiter, "comment"), h.APICreateComment)
@@ -102,7 +109,9 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	{
 		api.POST("/logout", h.APILogout)
 		api.GET("/favorites", h.APIFavorites)
 		api.GET("/profile/stats", h.APIProfileStats)
 		api.POST("/profile/nickname", h.APIUpdateProfile)
 		api.POST("/profile/signature", h.APIUpdateSignature)
 		api.POST("/profile/password", h.APIUpdatePassword)
 		api.POST("/profile/avatar", h.APIUploadAvatar)
 		api.POST("/uploads/image", h.APIUploadPostImage)
--- a/service/comment.go
+++ b/service/comment.go
@@ -209,6 +209,7 @@ func (s *CommentService) AdminDelete(commentID uint) error {
 type RecentCommentItem struct {
 	ID        uint   `json:"id"`
 	PostID    uint   `json:"post_id"`
 	UserID    uint   `json:"user_id,omitempty"`
 	Author    string `json:"author"`
 	Avatar    string `json:"avatar"`
 	Excerpt   string `json:"excerpt"`
@@ -251,6 +252,7 @@ func (s *CommentService) ListRecentPublic(limit int) ([]RecentCommentItem, error
 		out = append(out, RecentCommentItem{
 			ID:        c.ID,
 			PostID:    c.PostID,
 			UserID:    c.UserID,
 			Author:    author,
 			Avatar:    avatar,
 			Excerpt:   excerpt,
--- a/service/post.go
+++ b/service/post.go
@@ -21,6 +21,7 @@ func NewPostService(filter *SensitiveFilter, settings *ForumSettingsService) *Po
 type PostListQuery struct {
 	BoardID uint
 	UserID  uint // >0 时仅返回该用户的帖子
 	Page    int
 	Size    int
 	Keyword string
@@ -210,6 +211,9 @@ func (s *PostService) List(q PostListQuery) ([]model.Post, int64, error) {
 	if q.BoardID > 0 {
 		db = db.Where("board_id = ?", q.BoardID)
 	}
 	if q.UserID > 0 {
 		db = db.Where("user_id = ?", q.UserID)
 	}
 	if q.Keyword != "" {
 		kw := "%" + q.Keyword + "%"
 		db = db.Where("title LIKE ? OR content_plain LIKE ? OR tags LIKE ?", kw, kw, kw)
--- a/service/settings.go
+++ b/service/settings.go
@@ -31,6 +31,7 @@ const (
 	SettingPasswordMinLen = "password_min_len"
 	SettingAvatarMaxMB    = "avatar_max_mb"
 	SettingSignatureMax   = "signature_max"
 	SettingOpenPostsInNewTab        = "open_posts_in_new_tab"
 	SettingOpenContentLinksInNewTab = "open_content_links_in_new_tab"
@@ -93,6 +94,7 @@ type ForumLimits struct {
 	PasswordMinLen int `json:"password_min_len"`
 	AvatarMaxMB    int `json:"avatar_max_mb"`
 	SignatureMax   int `json:"signature_max"`
 	OpenPostsInNewTab        bool `json:"open_posts_in_new_tab"`
 	OpenContentLinksInNewTab bool `json:"open_content_links_in_new_tab"`
@@ -109,6 +111,7 @@ type ForumLimitsPublic struct {
 	PageSizeDefault  int `json:"page_size_default"`
 	PasswordMinLen   int `json:"password_min_len"`
 	AvatarMaxMB      int `json:"avatar_max_mb"`
 	SignatureMax     int `json:"signature_max"`
 	OpenPostsInNewTab        bool `json:"open_posts_in_new_tab"`
 	OpenContentLinksInNewTab bool `json:"open_content_links_in_new_tab"`
@@ -143,6 +146,7 @@ var forumSettingDefs = []settingDef{
 	{SettingPasswordMinLen, "6", 4, 128},
 	{SettingAvatarMaxMB, "2", 1, 20},
 	{SettingSignatureMax, "200", 0, 512},
 	{SettingOpenPostsInNewTab, "1", 0, 1},
 	{SettingOpenContentLinksInNewTab, "1", 0, 1},
@@ -196,6 +200,16 @@ type SiteBranding struct {
 	Favicon  string `json:"favicon"`
 }
 // DocumentTitle 浏览器标签标题：站点名 - 副标题（标语）
 func (b SiteBranding) DocumentTitle() string {
 	name := strings.TrimSpace(b.Name)
 	subtitle := strings.TrimSpace(b.Slogan)
 	if subtitle != "" {
 		return name + " - " + subtitle
 	}
 	return name
 }
 // GiteaSyncConfig Gitea 仓库同步配置
 type GiteaSyncConfig struct {
 	Enabled         bool   `json:"enabled"`
@@ -337,6 +351,7 @@ func (s *ForumSettingsService) Limits() ForumLimits {
 		PasswordMinLen: s.PasswordMinLen(),
 		AvatarMaxMB:    s.AvatarMaxMB(),
 		SignatureMax:   s.SignatureMax(),
 		OpenPostsInNewTab:        s.OpenPostsInNewTab(),
 		OpenContentLinksInNewTab: s.OpenContentLinksInNewTab(),
@@ -355,6 +370,7 @@ func (s *ForumSettingsService) PublicLimits() ForumLimitsPublic {
 		PageSizeDefault:  limits.PageSizeDefault,
 		PasswordMinLen:   limits.PasswordMinLen,
 		AvatarMaxMB:      limits.AvatarMaxMB,
 		SignatureMax:     limits.SignatureMax,
 		OpenPostsInNewTab:        limits.OpenPostsInNewTab,
 		OpenContentLinksInNewTab: limits.OpenContentLinksInNewTab,
@@ -378,6 +394,7 @@ func (s *ForumSettingsService) UpdateLimits(in ForumLimits) error {
 		SettingPageSizeDefault:     in.PageSizeDefault,
 		SettingPasswordMinLen:      in.PasswordMinLen,
 		SettingAvatarMaxMB:         in.AvatarMaxMB,
 		SettingSignatureMax:        in.SignatureMax,
 	}
 	if in.SearchKeywordMax > 0 && in.SearchKeywordMin > in.SearchKeywordMax {
 		return ErrInvalidSetting
@@ -438,6 +455,7 @@ func (s *ForumSettingsService) PageSizeDefault() int { return s.getInt(SettingPa
 func (s *ForumSettingsService) PasswordMinLen() int { return s.getInt(SettingPasswordMinLen, 6) }
 func (s *ForumSettingsService) AvatarMaxMB() int    { return s.getInt(SettingAvatarMaxMB, 2) }
 func (s *ForumSettingsService) SignatureMax() int   { return s.getInt(SettingSignatureMax, 200) }
 func (s *ForumSettingsService) OpenPostsInNewTab() bool {
 	return s.getString(SettingOpenPostsInNewTab, "1") == "1"
--- a/service/thumb.go
+++ b/service/thumb.go
@@ -0,0 +1,182 @@
 package service
 import (
 	"errors"
 	"fmt"
 	"image"
 	"image/jpeg"
 	"os"
 	"path/filepath"
 	"strings"
 	"sync"
 	"time"
 	"golang.org/x/image/draw"
 	// 注册解码器
 	_ "image/gif"
 	_ "image/png"
 	_ "golang.org/x/image/webp"
 )
 const (
 	// PostThumbMaxSide 正文预览图最长边（像素）
 	PostThumbMaxSide = 1280
 	// PostThumbJPEGQuality 预览图 JPEG 质量
 	PostThumbJPEGQuality = 82
 )
 var thumbLocks sync.Map // 同一原图并发生成时串行化
 // ThumbURLFromUpload 将 /uploads/posts/xxx.jpg 转为 /media/thumb/posts/xxx.jpg
 func ThumbURLFromUpload(uploadURL string) string {
 	u := strings.TrimSpace(uploadURL)
 	if u == "" {
 		return ""
 	}
 	if strings.HasPrefix(u, "/media/thumb/") {
 		return u
 	}
 	if strings.HasPrefix(u, "/uploads/") {
 		return "/media/thumb/" + strings.TrimPrefix(u, "/uploads/")
 	}
 	return ""
 }
 // WarmPostImageThumb 上传后预热缩略图（失败忽略，首次访问仍会生成）
 func WarmPostImageThumb(uploadsRoot, relativePath string) {
 	_, _ = EnsureUploadThumb(uploadsRoot, relativePath)
 }
 // EnsureUploadThumb 确保缩略图存在，返回磁盘路径
 // relativePath 形如 posts/1_123.jpg（相对 uploads 根目录）
 func EnsureUploadThumb(uploadsRoot, relativePath string) (string, error) {
 	rel, err := sanitizeUploadRel(relativePath)
 	if err != nil {
 		return "", err
 	}
 	// 仅处理帖子正文图
 	if !strings.HasPrefix(rel, "posts/") {
 		return "", errors.New("仅支持帖子图片缩略图")
 	}
 	origPath := filepath.Join(uploadsRoot, filepath.FromSlash(rel))
 	if st, err := os.Stat(origPath); err != nil || st.IsDir() {
 		return "", errors.New("原图不存在")
 	}
 	thumbPath := filepath.Join(uploadsRoot, ".thumbs", filepath.FromSlash(rel)+".jpg")
 	if fresh, err := thumbFresherThan(thumbPath, origPath); err == nil && fresh {
 		return thumbPath, nil
 	}
 	lockKey := rel
 	muIface, _ := thumbLocks.LoadOrStore(lockKey, &sync.Mutex{})
 	mu := muIface.(*sync.Mutex)
 	mu.Lock()
 	defer mu.Unlock()
 	// 双检
 	if fresh, err := thumbFresherThan(thumbPath, origPath); err == nil && fresh {
 		return thumbPath, nil
 	}
 	if err := generateJPEGThumb(origPath, thumbPath, PostThumbMaxSide, PostThumbJPEGQuality); err != nil {
 		return "", err
 	}
 	return thumbPath, nil
 }
 func thumbFresherThan(thumbPath, origPath string) (bool, error) {
 	ts, err := os.Stat(thumbPath)
 	if err != nil {
 		return false, err
 	}
 	os_, err := os.Stat(origPath)
 	if err != nil {
 		return false, err
 	}
 	return !ts.ModTime().Before(os_.ModTime()), nil
 }
 func sanitizeUploadRel(relativePath string) (string, error) {
 	rel := strings.TrimSpace(relativePath)
 	rel = strings.TrimPrefix(rel, "/")
 	rel = strings.ReplaceAll(rel, "\\", "/")
 	if rel == "" || strings.Contains(rel, "..") {
 		return "", errors.New("非法路径")
 	}
 	cleaned := filepath.Clean(filepath.FromSlash(rel))
 	if cleaned == "." || strings.HasPrefix(cleaned, "..") {
 		return "", errors.New("非法路径")
 	}
 	return filepath.ToSlash(cleaned), nil
 }
 func generateJPEGThumb(srcPath, dstPath string, maxSide, quality int) error {
 	f, err := os.Open(srcPath)
 	if err != nil {
 		return err
 	}
 	defer f.Close()
 	img, _, err := image.Decode(f)
 	if err != nil {
 		return fmt.Errorf("解码图片失败: %w", err)
 	}
 	out := resizeToMax(img, maxSide)
 	if err := os.MkdirAll(filepath.Dir(dstPath), 0755); err != nil {
 		return err
 	}
 	tmp := fmt.Sprintf("%s.%d.tmp", dstPath, time.Now().UnixNano())
 	dst, err := os.Create(tmp)
 	if err != nil {
 		return err
 	}
 	encErr := jpeg.Encode(dst, out, &jpeg.Options{Quality: quality})
 	closeErr := dst.Close()
 	if encErr != nil {
 		_ = os.Remove(tmp)
 		return encErr
 	}
 	if closeErr != nil {
 		_ = os.Remove(tmp)
 		return closeErr
 	}
 	if err := os.Rename(tmp, dstPath); err != nil {
 		_ = os.Remove(tmp)
 		return err
 	}
 	return nil
 }
 func resizeToMax(src image.Image, maxSide int) image.Image {
 	b := src.Bounds()
 	w, h := b.Dx(), b.Dy()
 	if w <= 0 || h <= 0 {
 		return src
 	}
 	if w <= maxSide && h <= maxSide {
 		return src
 	}
 	var nw, nh int
 	if w >= h {
 		nw = maxSide
 		nh = int(float64(h) * float64(maxSide) / float64(w))
 	} else {
 		nh = maxSide
 		nw = int(float64(w) * float64(maxSide) / float64(h))
 	}
 	if nw < 1 {
 		nw = 1
 	}
 	if nh < 1 {
 		nh = 1
 	}
 	dst := image.NewRGBA(image.Rect(0, 0, nw, nh))
 	draw.CatmullRom.Scale(dst, dst.Bounds(), src, b, draw.Over, nil)
 	return dst
 }
--- a/service/upload.go
+++ b/service/upload.go
@@ -49,5 +49,14 @@ func SaveUploadedImage(file *multipart.FileHeader, dir, urlPrefix, namePrefix st
 	}
 	prefix := strings.TrimSuffix(urlPrefix, "/")
-	return prefix + "/" + filename, nil
+	url := prefix + "/" + filename
 	// 帖子正文图：后台预热缩略图，加速首次打开详情
 	if strings.Contains(prefix, "/posts") {
 		uploadsRoot := filepath.Dir(dir) // .../uploads/posts → .../uploads
 		rel := filepath.ToSlash(filepath.Join(filepath.Base(dir), filename))
 		go WarmPostImageThumb(uploadsRoot, rel)
 	}
 	return url, nil
 }
--- a/service/user.go
+++ b/service/user.go
@@ -28,6 +28,40 @@ func (s *UserService) GetByID(id uint) (*model.User, error) {
 	return &user, nil
 }
 // UserActivityStats 个人主页活动统计
 type UserActivityStats struct {
 	PostCount     int64 `json:"post_count"`
 	CommentCount  int64 `json:"comment_count"`
 	FavoriteCount int64 `json:"favorite_count"`
 	LikeReceived  int64 `json:"like_received"`
 }
 // ActivityStats 统计用户发帖、评论、收藏与帖子获赞
 func (s *UserService) ActivityStats(userID uint) (UserActivityStats, error) {
 	var st UserActivityStats
 	if userID == 0 {
 		return st, errors.New("无效用户")
 	}
 	if err := model.DB.Model(&model.Post{}).Where("user_id = ?", userID).Count(&st.PostCount).Error; err != nil {
 		return st, err
 	}
 	if err := model.DB.Model(&model.Comment{}).Where("user_id = ?", userID).Count(&st.CommentCount).Error; err != nil {
 		return st, err
 	}
 	if err := model.DB.Model(&model.PostFavorite{}).Where("user_id = ?", userID).Count(&st.FavoriteCount).Error; err != nil {
 		return st, err
 	}
 	var likeSum int64
 	if err := model.DB.Model(&model.Post{}).
 		Select("COALESCE(SUM(like_count), 0)").
 		Where("user_id = ?", userID).
 		Scan(&likeSum).Error; err != nil {
 		return st, err
 	}
 	st.LikeReceived = likeSum
 	return st, nil
 }
 // GetByUsername 按用户名查询
 func (s *UserService) GetByUsername(username string) (*model.User, error) {
 	var user model.User
@@ -47,6 +81,22 @@ func (s *UserService) UpdateNickname(userID uint, nickname string) error {
 	return model.DB.Model(&model.User{}).Where("id = ?", userID).Update("nickname", nickname).Error
 }
 // UpdateSignature 修改个人签名
 func (s *UserService) UpdateSignature(userID uint, signature string) error {
 	signature = strings.TrimSpace(signature)
 	maxLen := s.settings.SignatureMax()
 	if maxLen > 0 {
 		runes := []rune(signature)
 		if len(runes) > maxLen {
 			return fmt.Errorf("签名不能超过 %d 字", maxLen)
 		}
 	}
 	if signature != "" {
 		signature = s.filter.Filter(signature)
 	}
 	return model.DB.Model(&model.User{}).Where("id = ?", userID).Update("signature", signature).Error
 }
 // UpdatePassword 修改密码
 func (s *UserService) UpdatePassword(userID uint, oldPass, newPass string) error {
 	if err := ValidatePassword(newPass, s.settings.PasswordMinLen()); err != nil {