From 060b7707cb883f33c6f23265c961145734c11562 Mon Sep 17 00:00:00 2001
From: freefire <aarbbs@88.com>
Date: Sat, 1 Aug 2026 12:29:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=85=AC=E5=BC=80=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=B8=BB=E9=A1=B5=E3=80=81=E5=B8=96=E5=AD=90=E5=9B=BE?=
 =?UTF-8?q?=E7=BC=A9=E7=95=A5=E5=9B=BE=E4=B8=8E=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=9B=BE=E7=BB=84=E6=8E=92=E7=89=88=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增用户签名与活动统计、图片灯箱；正文按需生成缩略图；TipTap 支持多图分组与环绕排版，并注入站点标题避免刷新闪烁。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/introduction.md                          |  158 +++
 embed_static/embed.go                         |   19 +
 frontend/index.html                           |    2 +-
 frontend/src/App.tsx                          |    2 +
 frontend/src/api/client.ts                    |   12 +-
 frontend/src/api/types.ts                     |   25 +
 frontend/src/components/ArticleEditor.tsx     |  147 ++-
 frontend/src/components/AvatarCropDialog.tsx  |   10 +-
 frontend/src/components/CommentThreadList.tsx |   37 +-
 frontend/src/components/ImageLightbox.tsx     |   58 +
 frontend/src/components/PostContent.tsx       |   49 +-
 frontend/src/components/PostListItem.tsx      |   31 +-
 frontend/src/components/PostRevisionPanel.tsx |   17 +-
 frontend/src/components/RightPanel.tsx        |   41 +-
 frontend/src/components/Sidebar.tsx           |    2 +-
 frontend/src/components/UserLink.tsx          |   77 ++
 .../editor/ArticleImageExtension.tsx          |   67 ++
 .../components/editor/ClearFloatParagraph.ts  |  144 +++
 .../components/editor/ImageGroupExtension.tsx |  371 ++++++
 frontend/src/hooks/useForumLimits.ts          |    1 +
 frontend/src/hooks/useSiteBranding.ts         |    9 +-
 frontend/src/layouts/MainLayout.tsx           |   93 +-
 frontend/src/pages/ComposePage.tsx            |  159 +--
 frontend/src/pages/PostDetailPage.tsx         |   16 +-
 frontend/src/pages/ProfilePage.tsx            |  477 ++++++--
 frontend/src/pages/UserProfilePage.tsx        |  211 ++++
 .../src/pages/admin/AdminCommentsPage.tsx     |    8 +-
 .../src/pages/admin/AdminDashboardPage.tsx    |    8 +-
 frontend/src/pages/admin/AdminPostsPage.tsx   |    8 +-
 .../src/pages/admin/AdminSettingsPage.tsx     |    3 +-
 frontend/src/pages/admin/AdminUsersPage.tsx   |    8 +-
 frontend/src/styles/global.css                | 1071 +++++++++++++++--
 frontend/src/utils/avatarCrop.ts              |   20 +-
 frontend/src/utils/markdownContent.ts         |   36 +-
 frontend/src/utils/postContent.ts             |  144 ++-
 frontend/src/utils/userPath.ts                |    4 +
 frontend/vite.config.ts                       |    1 +
 go.mod                                        |    3 +-
 go.sum                                        |    4 +
 handler/api.go                                |    2 +
 handler/handlers.go                           |   52 +
 handler/thumb.go                              |   32 +
 model/models.go                               |    1 +
 model/user_view.go                            |   44 +-
 router/router.go                              |    9 +
 service/comment.go                            |    2 +
 service/post.go                               |    4 +
 service/settings.go                           |   18 +
 service/thumb.go                              |  182 +++
 service/upload.go                             |   11 +-
 service/user.go                               |   50 +
 51 files changed, 3563 insertions(+), 397 deletions(-)
 create mode 100644 docs/introduction.md
 create mode 100644 frontend/src/components/ImageLightbox.tsx
 create mode 100644 frontend/src/components/UserLink.tsx
 create mode 100644 frontend/src/components/editor/ArticleImageExtension.tsx
 create mode 100644 frontend/src/components/editor/ClearFloatParagraph.ts
 create mode 100644 frontend/src/components/editor/ImageGroupExtension.tsx
 create mode 100644 frontend/src/pages/UserProfilePage.tsx
 create mode 100644 frontend/src/utils/userPath.ts
 create mode 100644 handler/thumb.go
 create mode 100644 service/thumb.go

diff --git a/docs/introduction.md b/docs/introduction.md
new file mode 100644
index 0000000..40ae6e7
--- /dev/null
+++ 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
diff --git a/embed_static/embed.go b/embed_static/embed.go
index 1b22d2d..fa77bd1 100644
--- 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") ||
diff --git a/frontend/index.html b/frontend/index.html
index 0dbe26d..b2d5884 100644
--- 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; }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bbc05a6..23d53f9 100644
--- 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>
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 9937b65..195c1d8 100644
--- 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);
diff --git a/frontend/src/api/types.ts b/frontend/src/api/types.ts
index a63c699..3a353e0 100644
--- 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;
diff --git a/frontend/src/components/ArticleEditor.tsx b/frontend/src/components/ArticleEditor.tsx
index ea2a8fe..593391b 100644
--- 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];
-      if (!file) {
-        resolve(null);
+      const files = [...(input.files ?? [])];
+      if (!files.length) {
+        resolve([]);
         return;
       }
-      try {
-        const { url } = await api.uploadPostImage(file);
-        resolve(url);
-      } catch (e: unknown) {
-        notify.error(e instanceof Error ? e.message : '图片上传失败');
-        resolve(null);
+      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 : '图片上传失败');
+        }
       }
+      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();
-    if (url) {
-      editor.chain().focus().setImage({ src: url }).run();
+    const urls = await uploadPostImageFiles(true);
+    if (!urls.length) return;
+    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();
-    if (!url) return;
-    insertAtCursor(textarea, markdownSource, `\n\n![图片](${url})\n\n`, handleMarkdownChange);
+    const urls = await uploadPostImageFiles(true);
+    if (!urls.length) return;
+    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} />,
-        title: '登录可见',
-        hint: '插入或包裹；区块内 Ctrl+Enter 退出',
-        active: editor.isActive('membersOnly'),
-        className: 'article-tool-btn--members',
-        action: wrapMembersOnly,
+        icon: <ImageIcon size={15} />,
+        title: '上传图片',
+        hint: '可多选；多张自动并排成图组',
+        action: setImage,
+      },
+      {
+        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-status-sep">·</span>
-          <span>
-            {mode === 'rich' ? '富文本' : 'Markdown 源码'}
-            {' · Tab 缩进 / Shift+Tab 回退'}
-            {mode === 'rich' ? ' · 登录可见内 Ctrl+Enter 退出' : ''}
+          <span className="article-editor-wordcount">{words} 字</span>
+          <span className="article-editor-status-sep" aria-hidden>·</span>
+          <span className="article-editor-mode-label">
+            {mode === 'rich' ? '所见即所得' : 'Markdown'}
           </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>
diff --git a/frontend/src/components/AvatarCropDialog.tsx b/frontend/src/components/AvatarCropDialog.tsx
index f008da1..dbdc862 100644
--- 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 {
diff --git a/frontend/src/components/CommentThreadList.tsx b/frontend/src/components/CommentThreadList.tsx
index 5828d11..9460adb 100644
--- 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' : ''}`}>
-        {c.user?.avatar ? (
-          <img src={c.user.avatar} alt="" loading="lazy" decoding="async" />
-        ) : (
-          commentInitial(c)
-        )}
-      </div>
+      {!guest && c.user_id ? (
+        <UserLink
+          user={c.user ?? { id: c.user_id, nickname: nick }}
+          showAvatar={false}
+          showName={false}
+          className={`waline-comment-avatar user-link--avatar-only${!c.user?.avatar ? ' guest' : ''}`}
+        >
+          {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>
           )}
diff --git a/frontend/src/components/ImageLightbox.tsx b/frontend/src/components/ImageLightbox.tsx
new file mode 100644
index 0000000..308ea38
--- /dev/null
+++ 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,
+  );
+}
diff --git a/frontend/src/components/PostContent.tsx b/frontend/src/components/PostContent.tsx
index 29f5e42..96416d7 100644
--- 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}
-      onClick={handleClick}
-      dangerouslySetInnerHTML={{ __html: prepared.html }}
-    />
+    <>
+      <div
+        className={className}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        dangerouslySetInnerHTML={{ __html: prepared.html }}
+      />
+      <ImageLightbox
+        src={lightboxSrc}
+        alt={lightboxAlt}
+        open={!!lightboxSrc}
+        onClose={() => setLightboxSrc(null)}
+      />
+    </>
   );
 }
diff --git a/frontend/src/components/PostListItem.tsx b/frontend/src/components/PostListItem.tsx
index 96df959..0997367 100644
--- 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 className="post-avatar">
+    <div
+      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>
   );
 }
 
diff --git a/frontend/src/components/PostRevisionPanel.tsx b/frontend/src/components/PostRevisionPanel.tsx
index b8f5b47..4004e40 100644
--- 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)}
diff --git a/frontend/src/components/RightPanel.tsx b/frontend/src/components/RightPanel.tsx
index bf075b7..bd832fe 100644
--- 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.avatar
-                  ? <img src={item.avatar} alt="" loading="lazy" decoding="async" />
-                  : (item.author?.[0] || '?')}
-              </span>
-              <span className="widget-item-title">{item.excerpt}</span>
-              <span className="widget-item-time">{item.created_at}</span>
-            </button>
+              {item.user_id ? (
+                <UserLink
+                  user={{ id: item.user_id, nickname: item.author, avatar: item.avatar }}
+                  showAvatar={false}
+                  showName={false}
+                  stopPropagation
+                  className="widget-item-avatar user-link--avatar-only"
+                >
+                  {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>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 95b656f..d030cd1 100644
--- 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));
diff --git a/frontend/src/components/UserLink.tsx b/frontend/src/components/UserLink.tsx
new file mode 100644
index 0000000..596a87c
--- /dev/null
+++ 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>
+  );
+}
diff --git a/frontend/src/components/editor/ArticleImageExtension.tsx b/frontend/src/components/editor/ArticleImageExtension.tsx
new file mode 100644
index 0000000..2257e48
--- /dev/null
+++ 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 }),
+    };
+  },
+});
diff --git a/frontend/src/components/editor/ClearFloatParagraph.ts b/frontend/src/components/editor/ClearFloatParagraph.ts
new file mode 100644
index 0000000..597ecfe
--- /dev/null
+++ 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;
+        },
+      }),
+    ];
+  },
+});
diff --git a/frontend/src/components/editor/ImageGroupExtension.tsx b/frontend/src/components/editor/ImageGroupExtension.tsx
new file mode 100644
index 0000000..2e9bc05
--- /dev/null
+++ 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;
+      },
+    };
+  },
+});
diff --git a/frontend/src/hooks/useForumLimits.ts b/frontend/src/hooks/useForumLimits.ts
index 84dc04d..fb6513e 100644
--- 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,
 };
diff --git a/frontend/src/hooks/useSiteBranding.ts b/frontend/src/hooks/useSiteBranding.ts
index 37237c6..d43385d 100644
--- 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"]');
diff --git a/frontend/src/layouts/MainLayout.tsx b/frontend/src/layouts/MainLayout.tsx
index 57e3fd0..856db35 100644
--- 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
diff --git a/frontend/src/pages/ComposePage.tsx b/frontend/src/pages/ComposePage.tsx
index e6ccec5..6e29538 100644
--- 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">
-          <button
-            type="button"
-            className="compose-back"
-            onClick={() => requestLeave(() => {
-              if (isEdit) nav(`/post/${editId}`);
-              else nav(-1);
-            })}
-          >
-            <ArrowLeft size={16} />
-            <span>返回</span>
-          </button>
-          <div className="compose-header-actions">
-            {(draftHint || editWindowHint) && (
-              <span className="compose-draft-hint" title={editWindowHint || draftHint}>
-                {editWindowHint || draftHint}
-              </span>
-            )}
-            <button
-              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 className="compose-shell">
+          <header className="compose-header">
+            <div className="compose-header-left">
+              <button
+                type="button"
+                className="compose-back"
+                onClick={() => requestLeave(() => {
+                  if (isEdit) nav(`/post/${editId}`);
+                  else nav(-1);
+                })}
+              >
+                <ArrowLeft size={16} />
+                <span>返回</span>
+              </button>
+              <h1 className="compose-header-title">{isEdit ? '编辑帖子' : '写新帖'}</h1>
+              {(draftHint || editWindowHint) && (
+                <span className="compose-draft-hint" title={editWindowHint || draftHint}>
+                  {editWindowHint || draftHint}
+                </span>
               )}
             </div>
-          )}
-          <ArticleEditor
-            value={content}
-            onChange={setContent}
-            placeholder="开始写作。所见即所得，选中文字后使用工具栏设置格式。"
-          />
+            <div className="compose-header-actions">
+              <button
+                type="button"
+                className="compose-publish-btn"
+                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
diff --git a/frontend/src/pages/PostDetailPage.tsx b/frontend/src/pages/PostDetailPage.tsx
index 22594b1..d4080f9 100644
--- 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">
-              {post.user?.avatar ? <img src={post.user.avatar} alt="" loading="lazy" decoding="async" /> : authorInitial}
-            </div>
+            <UserLink
+              user={post.user}
+              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 && (
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 401202e..9c4aeed 100644
--- 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>
-              {user.role === 'admin' && <Badge variant="green" className="mt-1.5">管理员</Badge>}
+              <div className="profile-id-row">
+                <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="section-card-title">基本资料</div>
-          <Form {...nickForm}>
-            <form onSubmit={nickForm.handleSubmit(onUpdateNick)} className="profile-form">
-              <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">
-                  支持 JPG、PNG、GIF、WebP，头像不超过 {limits.avatar_max_mb}MB
-                </span>
-                <Button type="submit" loading={nickLoading}>保存</Button>
-              </div>
-            </form>
-          </Form>
+        <div className="profile-tabs" role="tablist" aria-label="个人中心分区">
+          {tabs.map(t => (
+            <button
+              key={t.key}
+              type="button"
+              role="tab"
+              aria-selected={tab === t.key}
+              className={`profile-tab${tab === t.key ? ' active' : ''}`}
+              onClick={() => setTab(t.key)}
+            >
+              {t.label}
+              {typeof t.count === 'number' && (
+                <span className="profile-tab-count">{t.count}</span>
+              )}
+            </button>
+          ))}
         </div>
 
-        <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>
+        {tab === 'posts' && (
+          <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>还没有发布过帖子</p>
+                <Button onClick={() => nav('/compose')}>去发帖</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>
   );
diff --git a/frontend/src/pages/UserProfilePage.tsx b/frontend/src/pages/UserProfilePage.tsx
new file mode 100644
index 0000000..60487e5
--- /dev/null
+++ 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>
+  );
+}
diff --git a/frontend/src/pages/admin/AdminCommentsPage.tsx b/frontend/src/pages/admin/AdminCommentsPage.tsx
index fc36fb5..3da9653 100644
--- 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>
diff --git a/frontend/src/pages/admin/AdminDashboardPage.tsx b/frontend/src/pages/admin/AdminDashboardPage.tsx
index 0c6cc40..ab636a0 100644
--- 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>
diff --git a/frontend/src/pages/admin/AdminPostsPage.tsx b/frontend/src/pages/admin/AdminPostsPage.tsx
index 7d43981..404ea0d 100644
--- 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>
diff --git a/frontend/src/pages/admin/AdminSettingsPage.tsx b/frontend/src/pages/admin/AdminSettingsPage.tsx
index 0633618..404734d 100644
--- 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 },
     ],
   },
 ];
diff --git a/frontend/src/pages/admin/AdminUsersPage.tsx b/frontend/src/pages/admin/AdminUsersPage.tsx
index 938452e..493567c 100644
--- 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'
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index e6ef74c..d4585ec 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -906,7 +906,8 @@ img.site-brand-logo-img {
 @media (max-width: 1100px) { .aside-panel { display: none; } }
 
 /* 窄屏社区动态抽屉（替代隐藏的右侧栏） */
-.aside-drawer-root {
+.aside-drawer-root,
+.sidebar-drawer-root {
   position: fixed;
   inset: 0;
   z-index: 95;
@@ -935,11 +936,44 @@ img.site-brand-logo-img {
   animation: aside-drawer-in 0.2s ease;
 }
 
+/* 手机端左侧导航抽屉（替代隐藏的左侧栏） */
+.sidebar-drawer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(300px, 86vw);
+  background: var(--j13-bg-surface);
+  border-right: 1px solid var(--j13-border);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12);
+  animation: sidebar-drawer-in 0.2s ease;
+}
+
+.sidebar-drawer-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-drawer-body .sidebar {
+  display: block;
+  width: 100%;
+  border-right: none;
+  flex: 1;
+  min-height: 0;
+}
+
 @keyframes aside-drawer-in {
   from { transform: translateX(12px); opacity: 0.6; }
   to { transform: translateX(0); opacity: 1; }
 }
 
+@keyframes sidebar-drawer-in {
+  from { transform: translateX(-12px); opacity: 0.6; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
 .aside-drawer-head {
   height: var(--j13-header-h);
   flex-shrink: 0;
@@ -960,7 +994,8 @@ img.site-brand-logo-img {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .aside-drawer { animation: none; }
+  .aside-drawer,
+  .sidebar-drawer { animation: none; }
 }
 @media (max-width: 768px) {
   .app-frame { border-left: none; border-right: none; }
@@ -1255,7 +1290,7 @@ img.site-brand-logo-img {
 
 .page-inner { padding: 20px 24px; max-width: 720px; }
 .page-inner-wide { padding: 20px 24px; }
-.page-inner-wide--profile { max-width: 640px; }
+.page-inner-wide--profile { max-width: 820px; }
 .page-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
 .page-desc { font-size: 13px; color: var(--color-text-3); margin: 0 0 20px; }
 
@@ -2765,6 +2800,9 @@ img.site-brand-logo-img {
   margin-top: 28px;
   padding-top: 20px;
   border-top: 1px solid var(--j13-border-light);
+  /* 防止正文绕排 float 把操作栏卷到图片旁 */
+  clear: both;
+  position: relative;
 }
 
 .post-detail-content {
@@ -2773,6 +2811,8 @@ img.site-brand-logo-img {
   word-break: break-word;
   color: var(--color-text-1);
   letter-spacing: 0.01em;
+  /* 建立 BFC，把浮动图限制在正文容器内 */
+  display: flow-root;
 }
 
 .post-detail-content h1,
@@ -3094,7 +3134,111 @@ img.site-brand-logo-img {
   border-radius: 10px;
   margin: 0.75em 0;
   box-shadow: var(--j13-shadow-soft);
+  /* 非绕排图通栏显示，避免挤进左侧浮动图旁边 */
+  display: block;
+  clear: both;
 }
+
+.post-detail-content img.post-content-img--zoomable {
+  cursor: zoom-in;
+  transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.post-detail-content img.post-content-img--zoomable:hover {
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.14);
+}
+
+.post-detail-content img.post-content-img--zoomable:focus-visible {
+  outline: 2px solid var(--j13-green);
+  outline-offset: 3px;
+}
+
+/* 帖子图片灯箱 */
+.image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 220;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.image-lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: rgba(8, 12, 20, 0.88);
+  cursor: zoom-out;
+}
+
+.image-lightbox-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.image-lightbox-close:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.image-lightbox-stage {
+  position: relative;
+  z-index: 1;
+  max-width: min(96vw, 1400px);
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-lightbox-img {
+  max-width: 100%;
+  max-height: 90vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+  user-select: none;
+}
+
+.image-lightbox-hint {
+  position: absolute;
+  bottom: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  margin: 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.55);
+  pointer-events: none;
+}
+
+@media (max-width: 768px) {
+  .image-lightbox {
+    padding: 12px;
+  }
+
+  .image-lightbox-hint {
+    display: none;
+  }
+}
+
 .post-detail-content p { margin: 0 0 1em; }
 .post-detail-content p:last-child { margin-bottom: 0; }
 .post-detail-content a {
@@ -4039,9 +4183,13 @@ a.waline-comment-author:hover { color: var(--j13-green); }
 
 .profile-header-card {
   position: relative;
-  display: flex;
-  align-items: center;
-  gap: 20px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "avatar info"
+    "stats stats";
+  align-items: start;
+  gap: 20px 24px;
   padding: 24px;
   margin-bottom: 16px;
   background: var(--j13-bg-block);
@@ -4051,6 +4199,23 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
+.profile-header-card > .profile-avatar-btn { grid-area: avatar; }
+.profile-header-card > .profile-header-info { grid-area: info; }
+.profile-header-card > .profile-stat-grid { grid-area: stats; }
+
+/* 避免隐藏的 file input 占用 grid 单元格 */
+.profile-header-card > input[type="file"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .profile-header-card--dragover {
   border-color: color-mix(in srgb, var(--j13-green) 50%, var(--j13-border-light));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--j13-green) 15%, transparent);
@@ -4128,7 +4293,7 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   flex: 1;
   min-width: 0;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
 }
@@ -4137,9 +4302,17 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   min-width: 0;
 }
 
+.profile-name-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
 .profile-display-name {
-  margin: 0 0 4px;
-  font-size: 20px;
+  margin: 0;
+  font-size: 22px;
   font-weight: 600;
   line-height: 1.3;
 }
@@ -4149,13 +4322,285 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   color: var(--color-text-3);
 }
 
+.profile-id-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.profile-id-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--j13-green) 10%, var(--j13-bg-surface));
+  color: var(--j13-green);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.profile-id-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 1px solid var(--j13-border-light);
+  border-radius: 6px;
+  background: var(--j13-bg-surface);
+  color: var(--color-text-3);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.profile-id-copy:hover {
+  border-color: var(--j13-green);
+  color: var(--j13-green);
+}
+
+.profile-meta-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 8px 16px;
+  margin: 14px 0 0;
+}
+
+.profile-meta-list dt {
+  margin: 0;
+  font-size: 11px;
+  color: var(--color-text-4);
+  letter-spacing: 0.02em;
+}
+
+.profile-meta-list dd {
+  margin: 2px 0 0;
+  font-size: 13px;
+  color: var(--color-text-2);
+  word-break: break-all;
+}
+
 .profile-avatar-tip {
-  margin: 6px 0 0;
+  margin: 10px 0 0;
   font-size: 12px;
   color: var(--color-text-3);
   line-height: 1.4;
 }
 
+.profile-signature {
+  margin: 12px 0 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--color-text-2);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.profile-signature--empty {
+  color: var(--color-text-4);
+  font-style: italic;
+}
+
+.profile-form-divider {
+  height: 1px;
+  margin: 24px 0;
+  background: var(--j13-border-light);
+}
+
+.profile-posts-heading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0 12px;
+}
+
+.profile-header-card--public .profile-stat-grid {
+  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
+}
+
+/* 全站用户链接 */
+.user-link {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.12s;
+}
+
+.user-link:hover,
+.user-link:focus-visible {
+  color: var(--j13-green);
+}
+
+.user-link--static {
+  cursor: default;
+}
+
+.user-link--avatar-only {
+  flex-shrink: 0;
+}
+
+a.user-link--avatar-only:hover,
+a.user-link--avatar-only:focus-visible {
+  color: #fff;
+  outline: none;
+}
+
+.post-meta-user {
+  font-weight: 500;
+}
+
+.post-detail-author-name.user-link {
+  font-size: inherit;
+  font-weight: 600;
+}
+
+.waline-comment-author.user-link {
+  font-weight: 600;
+}
+
+.widget-item--comment {
+  cursor: default;
+}
+
+.widget-item--comment:hover {
+  color: inherit;
+}
+
+.widget-item-comment-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.widget-item-comment-main:hover .widget-item-title,
+.widget-item-comment-main:focus-visible .widget-item-title {
+  color: var(--j13-green);
+}
+
+a.widget-item-avatar.user-link {
+  text-decoration: none;
+}
+
+.post-revision-editor-link {
+  font-weight: 500;
+}
+
+.profile-stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  padding-top: 4px;
+  border-top: 1px solid var(--j13-border-light);
+}
+
+.profile-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 12px 8px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  background: var(--j13-bg-surface);
+  color: var(--color-text-3);
+  font: inherit;
+  cursor: default;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+button.profile-stat {
+  cursor: pointer;
+}
+
+button.profile-stat:hover {
+  border-color: color-mix(in srgb, var(--j13-green) 35%, var(--j13-border-light));
+  color: var(--j13-green);
+  background: color-mix(in srgb, var(--j13-green) 6%, var(--j13-bg-surface));
+}
+
+.profile-stat strong {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--color-text-1);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+button.profile-stat:hover strong {
+  color: var(--j13-green);
+}
+
+.profile-stat span {
+  font-size: 12px;
+}
+
+.profile-tabs {
+  display: flex;
+  gap: 4px;
+  margin: 4px 0 16px;
+  padding: 4px;
+  border: 1px solid var(--j13-border-light);
+  border-radius: 12px;
+  background: var(--j13-bg-block);
+  overflow-x: auto;
+}
+
+.profile-tab {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--color-text-3);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s, color 0.15s;
+}
+
+.profile-tab:hover {
+  color: var(--color-text-1);
+  background: var(--j13-bg-surface);
+}
+
+.profile-tab.active {
+  color: var(--j13-green);
+  background: color-mix(in srgb, var(--j13-green) 10%, var(--j13-bg-surface));
+  box-shadow: var(--j13-shadow-soft);
+}
+
+.profile-tab-count {
+  min-width: 1.4em;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--j13-green) 14%, transparent);
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.profile-panel {
+  margin-bottom: 24px;
+}
+
 .profile-avatar-actions {
   display: flex;
   align-items: center;
@@ -4193,9 +4638,14 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   line-height: 1.4;
 }
 
-@media (max-width: 520px) {
+@media (max-width: 640px) {
   .profile-header-card {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "avatar"
+      "info"
+      "stats";
+    justify-items: center;
     text-align: center;
     padding: 20px 16px;
   }
@@ -4203,6 +4653,25 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   .profile-header-info {
     flex-direction: column;
     align-items: center;
+    width: 100%;
+  }
+
+  .profile-name-row {
+    justify-content: center;
+  }
+
+  .profile-id-row {
+    justify-content: center;
+  }
+
+  .profile-meta-list {
+    width: 100%;
+    text-align: left;
+  }
+
+  .profile-stat-grid {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .profile-form-footer {
@@ -4366,7 +4835,7 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   line-height: 1.5;
 }
 
-/* 发帖页 — 沉浸式写作 */
+/* 发帖页 — 与帖子详情同套工作区语言 */
 .app-body--compose {
   background: var(--j13-bg-workspace);
 }
@@ -4378,17 +4847,18 @@ a.waline-comment-author:hover { color: var(--j13-green); }
 .main-content--compose {
   overflow-y: auto;
   overflow-x: hidden;
+  background: var(--j13-bg-workspace);
 }
 
 .compose-page {
+  /* 与 .compose-header 实际高度对齐，供编辑器工具栏 sticky 偏移 */
+  --compose-header-sticky-h: 57px;
   flex: 1;
   display: flex;
   flex-direction: column;
   min-height: min(100%, 100vh - var(--j13-header-h));
   overflow: visible;
-  background:
-    radial-gradient(ellipse 80% 50% at 50% -10%, var(--j13-green-bg), transparent),
-    var(--j13-bg-workspace);
+  background: var(--j13-bg-workspace);
 }
 
 .compose-page--empty {
@@ -4458,76 +4928,117 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   display: flex;
   flex-direction: column;
   min-height: min(100%, 100vh - var(--j13-header-h));
-  max-width: 1200px;
+  /* 富文本：接近阅读宽度；源码双栏时拉宽 */
+  max-width: 1120px;
   width: 100%;
   margin: 0 auto;
-  padding: 0 32px 32px;
+  padding: 16px 20px 24px;
+  transition: max-width 0.2s ease;
+}
+
+.compose-page:has(.article-editor--markdown) .compose-canvas {
+  max-width: min(1560px, 100%);
+}
+
+.compose-shell {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--j13-bg-surface);
+  border: 1px solid var(--j13-border-light);
+  border-radius: 12px;
+  box-shadow: var(--j13-shadow-card);
+  overflow: visible;
 }
 
 .compose-header {
+  position: sticky;
+  top: 0;
+  z-index: 40;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 0 12px;
+  gap: 12px;
+  padding: 12px 20px;
   flex-shrink: 0;
+  background: var(--j13-bg-surface);
+  border-bottom: 1px solid var(--j13-border-light);
+  border-radius: 12px 12px 0 0;
+}
+
+.compose-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.compose-header-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  line-height: 1.3;
+  white-space: nowrap;
 }
 
 .compose-back {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 14px;
+  padding: 6px 10px;
   border: 1px solid var(--j13-border);
   border-radius: 8px;
   background: var(--j13-bg-surface);
   color: var(--color-text-2);
   font-size: 13px;
   cursor: pointer;
-  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
-  box-shadow: var(--j13-shadow-soft);
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  flex-shrink: 0;
 }
 
 .compose-back:hover {
   border-color: var(--j13-green);
   color: var(--j13-green);
+  background: var(--j13-green-bg);
 }
 
 .compose-publish-btn {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 22px;
+  gap: 7px;
+  padding: 8px 16px;
   border: none;
   border-radius: 8px;
-  background: linear-gradient(135deg, var(--j13-green), var(--j13-green-hover));
+  background: var(--j13-green);
   color: #fff;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
-  box-shadow: 0 2px 8px rgba(24, 160, 88, 0.3);
-  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
+  transition: background 0.15s, opacity 0.15s;
 }
 
 .compose-publish-btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 14px rgba(24, 160, 88, 0.35);
+  background: var(--j13-green-hover);
 }
 
 .compose-publish-btn:disabled {
-  opacity: 0.65;
+  opacity: 0.6;
   cursor: not-allowed;
 }
 
 .compose-header-actions {
   display: inline-flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
+  flex-shrink: 0;
 }
 
 .compose-draft-hint {
   font-size: 12px;
   color: var(--color-text-3);
-  max-width: 180px;
+  max-width: 220px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4538,36 +5049,63 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   font-weight: 400;
 }
 
-.compose-meta {
+.compose-context {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding-bottom: 20px;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--j13-border-light);
+  background: var(--j13-bg-surface);
+}
+
+.compose-context-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.compose-context-label {
   flex-shrink: 0;
-  flex-wrap: wrap;
+  width: 32px;
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text-3);
+}
+
+.compose-context-row--tags .compose-context-label {
+  margin-top: 9px;
+}
+
+.compose-context-row--tags .compose-tags-field {
+  flex: 1;
+  min-width: 0;
 }
 
 .compose-board-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  min-width: 0;
 }
 
 .compose-board-pill {
-  padding: 6px 14px;
+  padding: 5px 12px;
   border: 1px solid var(--j13-border);
-  border-radius: 20px;
-  background: var(--j13-bg-surface);
+  border-radius: 999px;
+  background: var(--j13-bg-block-muted);
   color: var(--color-text-2);
   font-size: 13px;
+  line-height: 1.3;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
 
 .compose-board-pill:hover {
   border-color: var(--j13-green);
   color: var(--j13-green);
+  background: var(--j13-green-bg);
 }
 
 .compose-board-pill.active {
@@ -4581,18 +5119,19 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  padding: 6px 10px 6px 14px;
+  padding: 6px 12px;
   border: 1px solid var(--j13-border);
-  border-radius: 20px;
-  background: var(--j13-bg-surface);
-  min-width: 220px;
+  border-radius: 8px;
+  background: var(--j13-bg-block-muted);
+  min-width: 0;
   max-width: 100%;
   cursor: text;
-  transition: border-color 0.15s;
+  transition: border-color 0.15s, background 0.15s;
 }
 
 .compose-tags-field:focus-within {
   border-color: var(--j13-green);
+  background: var(--j13-bg-surface);
 }
 
 .compose-tags-field--disabled {
@@ -4703,33 +5242,31 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   color: var(--color-text-4);
 }
 
-.compose-writing {
+.compose-document {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: var(--j13-bg-surface);
-  border: 1px solid var(--j13-border);
-  border-radius: 16px;
-  box-shadow: var(--j13-shadow-card);
-  padding: 28px 32px 0;
-  overflow: visible;
+  min-height: 0;
+  padding: 0 0 0;
 }
 
 .compose-title {
   width: 100%;
-  padding: 0;
+  margin: 0;
+  padding: 20px 24px 12px;
   border: none;
   background: transparent;
-  font-size: 32px;
-  font-weight: 700;
-  line-height: 1.3;
-  letter-spacing: -0.02em;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
   color: var(--color-text-1);
   outline: none;
 }
 
 .compose-title::placeholder {
   color: var(--color-text-4);
+  font-weight: 500;
 }
 
 .compose-subtitle {
@@ -4748,24 +5285,24 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   flex: 1;
   display: flex;
   flex-direction: column;
-  margin-top: 24px;
   border-top: 1px solid var(--j13-border-light);
 }
 
 .article-editor-bar {
   position: sticky;
-  top: 0;
+  /* 停在发布栏下方，避免与 .compose-header 重叠 */
+  top: var(--compose-header-sticky-h, 0px);
   z-index: 30;
   display: flex;
   align-items: center;
   gap: 12px;
-  margin: 0 -32px;
-  padding: 10px 32px;
+  margin: 0;
+  padding: 8px 16px;
   flex-shrink: 0;
   flex-wrap: wrap;
   background: var(--j13-bg-surface);
   border-bottom: 1px solid var(--j13-border-light);
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
 }
 
 /* 即时气泡提示（替代原生 title） */
@@ -4924,16 +5461,19 @@ a.waline-comment-author:hover { color: var(--j13-green); }
 .article-editor-pane {
   display: flex;
   flex: 1;
-  min-height: 280px;
-  border: 1px solid var(--j13-border);
-  border-radius: 10px;
+  min-height: 320px;
+  border: none;
+  border-radius: 0;
   overflow: hidden;
-  background: var(--j13-bg-block);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
+  background: transparent;
+  box-shadow: none;
 }
 
 .article-editor-pane--source {
   min-height: 320px;
+  border: 1px solid var(--j13-border-light);
+  border-radius: 12px;
+  background: var(--j13-bg-block);
 }
 
 /* 编辑器选区：淡色高亮，避免浏览器默认深蓝 */
@@ -4964,6 +5504,10 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   flex: 1;
   min-width: 0;
   overflow: auto;
+  background: transparent;
+}
+
+.article-editor-pane--source .article-editor-scroll {
   background: var(--j13-bg-block);
 }
 
@@ -4976,9 +5520,20 @@ a.waline-comment-author:hover { color: var(--j13-green); }
 .article-editor-content .tiptap,
 .article-prosemirror {
   flex: 1;
-  min-height: 280px;
-  padding: 14px 20px 20px;
+  min-height: 360px;
+  padding: 16px 24px 32px;
   outline: none;
+  font-size: 15.5px;
+  line-height: 1.7;
+}
+
+/* 源码双栏：充分利用加宽画布 */
+.article-editor--markdown .article-editor-body {
+  min-height: 480px;
+}
+
+.compose-page:has(.article-editor--markdown) .article-editor-markdown {
+  min-height: min(70vh, 720px);
 }
 
 .article-prosemirror p.is-editor-empty:first-child::before {
@@ -5013,6 +5568,212 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   margin: 12px 0;
 }
 
+/* —— 图组：多图并排 / 宫格 —— */
+.image-group {
+  margin: 1.25em 0;
+  border-radius: 12px;
+}
+
+.image-group__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--j13-border-light);
+  border-radius: 10px;
+  background: var(--j13-bg-block-muted);
+}
+
+.image-group__toolbar-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-3);
+}
+
+.image-group__toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.image-group__layout-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-text-3);
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+
+.image-group__layout-btn:hover {
+  color: var(--j13-green);
+  background: color-mix(in srgb, var(--j13-green) 8%, transparent);
+}
+
+.image-group__layout-btn.is-active {
+  color: var(--j13-green);
+  border-color: color-mix(in srgb, var(--j13-green) 35%, transparent);
+  background: color-mix(in srgb, var(--j13-green) 10%, transparent);
+}
+
+.image-group--selected {
+  outline: 2px solid color-mix(in srgb, var(--j13-green) 45%, transparent);
+  outline-offset: 3px;
+}
+
+.image-group__grid,
+.image-group[data-image-group]:not(:has(.image-group__toolbar)) {
+  display: grid;
+  gap: 8px;
+}
+
+/*
+ * TipTap React NodeView 会在 contentDOM 内再包一层 div，
+ * 若不打通则 grid 只有一个子项，编辑态会一直竖排。
+ */
+.article-prosemirror .image-group__grid > div {
+  display: contents;
+}
+
+.image-group--cols-2 .image-group__grid,
+.image-group--cols-2[data-image-group]:not(:has(.image-group__toolbar)) {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.image-group--cols-3 .image-group__grid,
+.image-group--cols-3[data-image-group]:not(:has(.image-group__toolbar)) {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.image-group--cols-4 .image-group__grid,
+.image-group--cols-4[data-image-group]:not(:has(.image-group__toolbar)) {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.image-group__grid img,
+.image-group__grid .ProseMirror-selectednode,
+.image-group[data-image-group]:not(:has(.image-group__toolbar)) > img {
+  width: 100%;
+  max-width: none;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  margin: 0;
+  border-radius: 10px;
+  box-shadow: var(--j13-shadow-soft);
+}
+
+.article-prosemirror .image-group__grid img {
+  margin: 0;
+  max-width: none;
+}
+
+/* 单图展示形态 */
+.post-detail-content img.article-img--wide,
+.article-prosemirror img.article-img--wide {
+  width: 100%;
+  max-width: min(100%, 960px);
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  clear: both;
+  float: none;
+}
+
+.post-detail-content img.article-img--float-left,
+.article-prosemirror img.article-img--float-left {
+  float: left;
+  clear: none;
+  display: block;
+  width: min(42%, 280px);
+  max-width: 42%;
+  /* 顶对齐：无上边距，避免图顶高于/错位文字 */
+  margin: 0 1em 0.75em 0;
+  shape-outside: margin-box;
+}
+
+.post-detail-content img.article-img--float-right,
+.article-prosemirror img.article-img--float-right {
+  float: right;
+  clear: none;
+  display: block;
+  width: min(42%, 280px);
+  max-width: 42%;
+  margin: 0 0 0.75em 1em;
+  shape-outside: margin-box;
+}
+
+/*
+ * 绕排后首段与图顶视觉对齐：
+ * 正文 line-height: 1.8 会让字面落在行框中部，看起来比图顶更低。
+ * 上移半行距；中间若夹空段落也一并照顾。
+ */
+.post-detail-content img.article-img--float-left + p,
+.post-detail-content img.article-img--float-right + p,
+.article-prosemirror img.article-img--float-left + p,
+.article-prosemirror img.article-img--float-right + p,
+.post-detail-content img.article-img--float-left + p:is(:empty, :has(> br:only-child)) + p,
+.post-detail-content img.article-img--float-right + p:is(:empty, :has(> br:only-child)) + p,
+.article-prosemirror img.article-img--float-left + p:is(:empty, :has(> br:only-child)) + p,
+.article-prosemirror img.article-img--float-right + p:is(:empty, :has(> br:only-child)) + p {
+  margin-top: calc((1em - 1.8em) / 2);
+}
+
+/* 图组内图片参与宫格，不要 clear/通栏 block 打散 */
+.post-detail-content .image-group img,
+.article-prosemirror .image-group img {
+  clear: none;
+  float: none;
+}
+
+.post-detail-content .image-group,
+.article-prosemirror .image-group {
+  clear: both;
+}
+
+/* 写到绕排图下方：双空行触发，并以 data-clear-float 持久化（源码往返可保留） */
+.post-detail-content .article-clear-float,
+.article-prosemirror .article-clear-float,
+.post-detail-content [data-clear-float],
+.article-prosemirror [data-clear-float] {
+  clear: both;
+}
+
+.article-prosemirror {
+  display: flow-root;
+}
+
+@media (max-width: 640px) {
+  .image-group--cols-3 .image-group__grid,
+  .image-group--cols-3[data-image-group]:not(:has(.image-group__toolbar)),
+  .image-group--cols-4 .image-group__grid,
+  .image-group--cols-4[data-image-group]:not(:has(.image-group__toolbar)) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .image-group__layout-btn span {
+    display: none;
+  }
+
+  .post-detail-content img.article-img--float-left,
+  .post-detail-content img.article-img--float-right,
+  .article-prosemirror img.article-img--float-left,
+  .article-prosemirror img.article-img--float-right {
+    float: none;
+    width: 100%;
+    max-width: 100%;
+    margin: 0.75em 0;
+  }
+}
+
 .editor-members-only.post-members-only--visible {
   border: none;
   border-left: 3px solid rgba(24, 160, 88, 0.5);
@@ -5082,18 +5843,15 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin: 0 -32px;
-  padding: 10px 32px 14px;
+  margin: 0;
+  padding: 10px 20px;
   border-top: 1px solid var(--j13-border-light);
   background: var(--j13-bg-surface);
-  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04);
+  box-shadow: none;
   font-size: 12px;
   color: var(--color-text-4);
   flex-shrink: 0;
-}
-
-.dark .article-editor-status {
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
+  border-radius: 0 0 12px 12px;
 }
 
 .article-editor-status-meta {
@@ -5104,26 +5862,36 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   min-width: 0;
 }
 
+.article-editor-wordcount {
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-3);
+  font-weight: 500;
+}
+
+.article-editor-mode-label {
+  color: var(--color-text-4);
+}
+
 .article-editor-status-sep {
   color: var(--color-text-4);
-  opacity: 0.6;
+  opacity: 0.55;
 }
 
 .article-editor-status-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   flex-shrink: 0;
 }
 
 .article-editor-view-btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
+  gap: 5px;
+  padding: 5px 10px;
   border: 1px solid var(--j13-border-light);
-  border-radius: 8px;
-  background: var(--j13-bg-block);
+  border-radius: 6px;
+  background: var(--j13-bg-block-muted);
   color: var(--color-text-2);
   font-size: 12px;
   font-weight: 500;
@@ -5135,11 +5903,11 @@ a.waline-comment-author:hover { color: var(--j13-green); }
 .article-editor-view-btn:hover {
   border-color: var(--j13-green);
   color: var(--j13-green);
-  background: rgba(24, 160, 88, 0.06);
+  background: var(--j13-green-bg);
 }
 
 .article-editor-view-btn.active {
-  border-color: rgba(24, 160, 88, 0.45);
+  border-color: rgba(24, 160, 88, 0.4);
   color: var(--j13-green);
   background: rgba(24, 160, 88, 0.1);
 }
@@ -5149,19 +5917,21 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   inset: 0;
   z-index: 120;
   margin: 0 !important;
-  padding: 0 32px;
+  padding: 12px 24px 0;
   background: var(--j13-bg-surface);
   border-top: none;
 }
 
 .article-editor--fullscreen .article-editor-bar {
-  margin: 0;
-  padding: 12px 0;
+  top: 0;
+  margin: 0 auto;
+  padding: 6px 8px;
 }
 
 .article-editor--fullscreen .article-editor-status {
-  margin: 0 -32px;
-  padding: 10px 32px 14px;
+  margin: 0 -24px;
+  padding: 10px 24px 14px;
+  border-radius: 0;
 }
 
 /* 全屏富文本：工具栏与编辑区同宽居中 */
@@ -5188,6 +5958,10 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   max-width: var(--j13-article-read-w);
   margin: 0 auto;
   min-height: calc(100vh - 176px);
+  border-radius: 14px;
+  background: var(--j13-bg-surface);
+  border: 1px solid var(--j13-border-light);
+  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
 }
 
 .article-editor--fullscreen .article-editor-scroll,
@@ -5225,8 +5999,21 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   flex: 1;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 12px;
-  min-height: 320px;
+  gap: 0;
+  min-height: 420px;
+  padding: 0;
+  border-top: none;
+}
+
+.article-editor--markdown .article-editor-pane--source {
+  border: none;
+  border-radius: 0;
+  border-right: 1px solid var(--j13-border-light);
+}
+
+.article-editor--markdown .article-editor-markdown-preview {
+  border: none;
+  border-radius: 0;
 }
 
 .article-editor-markdown-input {
@@ -5272,22 +6059,64 @@ a.waline-comment-author:hover { color: var(--j13-green); }
 }
 
 @media (max-width: 768px) {
-  .compose-canvas {
-    padding: 0 16px;
+  .compose-page {
+    --compose-header-sticky-h: 53px;
   }
 
-  .compose-writing {
-    padding: 20px 16px 0;
-    border-radius: 12px;
+  .compose-canvas {
+    padding: 10px 12px 20px;
+  }
+
+  .compose-shell {
+    border-radius: 10px;
+  }
+
+  .compose-header {
+    padding: 10px 12px;
+    gap: 8px;
+    border-radius: 10px 10px 0 0;
+  }
+
+  .compose-draft-hint {
+    display: none;
+  }
+
+  .compose-back span {
+    display: none;
+  }
+
+  .compose-back {
+    padding: 6px 8px;
+  }
+
+  .compose-context {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .compose-context-row {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .compose-context-label,
+  .compose-context-row--tags .compose-context-label {
+    margin-top: 0;
+    width: auto;
+  }
+
+  .compose-title {
+    font-size: 20px;
+    padding: 14px 14px 8px;
   }
 
   .article-editor--fullscreen {
-    padding: 0 16px;
+    padding: 8px 12px 0;
   }
 
   .article-editor--fullscreen .article-editor-bar {
     margin: 0;
-    padding: 10px 0;
+    padding: 8px 0;
   }
 
   .article-editor-markdown {
@@ -5295,6 +6124,11 @@ a.waline-comment-author:hover { color: var(--j13-green); }
     grid-template-rows: minmax(240px, 1fr) minmax(240px, 1fr);
   }
 
+  .article-editor--markdown .article-editor-pane--source {
+    border-right: none;
+    border-bottom: 1px solid var(--j13-border-light);
+  }
+
   .article-editor-pane--source {
     min-height: 240px;
   }
@@ -5305,20 +6139,26 @@ a.waline-comment-author:hover { color: var(--j13-green); }
   }
 
   .article-editor-bar {
-    margin: 0 -16px;
-    padding: 10px 16px;
+    padding: 8px 10px;
+  }
+
+  .article-editor-content .tiptap,
+  .article-prosemirror {
+    min-height: 280px;
+    padding: 12px 14px 20px;
   }
 
   .article-editor-status {
-    margin: 0 -16px;
-    padding: 10px 16px 14px;
+    padding: 10px 12px;
     flex-wrap: wrap;
     align-items: flex-start;
+    border-radius: 0 0 10px 10px;
   }
 
   .article-editor--fullscreen .article-editor-status {
-    margin: 0 -16px;
-    padding: 10px 16px 14px;
+    margin: 0 -12px;
+    padding: 10px 12px;
+    border-radius: 0;
   }
 
   .article-editor-status-actions {
@@ -5326,26 +6166,9 @@ a.waline-comment-author:hover { color: var(--j13-green); }
     justify-content: flex-end;
   }
 
-  .compose-title {
-    font-size: 24px;
-  }
-
-  .compose-meta {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
   .compose-tags-field {
     min-width: 0;
   }
-
-  .compose-header {
-    padding-top: 12px;
-  }
-
-  .compose-publish-btn span {
-    display: none;
-  }
 }
 
 /* 路由懒加载占位已改为 FeedPageSkeleton，保留类名兼容 */
diff --git a/frontend/src/utils/avatarCrop.ts b/frontend/src/utils/avatarCrop.ts
index 78a4704..390824b 100644
--- 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;
 }
diff --git a/frontend/src/utils/markdownContent.ts b/frontend/src/utils/markdownContent.ts
index ee2f6c3..cba18a7 100644
--- 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>`,
diff --git a/frontend/src/utils/postContent.ts b/frontend/src/utils/postContent.ts
index 66ceb77..cf65530 100644
--- 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;
+}
diff --git a/frontend/src/utils/userPath.ts b/frontend/src/utils/userPath.ts
new file mode 100644
index 0000000..23e8fe1
--- /dev/null
+++ b/frontend/src/utils/userPath.ts
@@ -0,0 +1,4 @@
+/** 用户公开主页路径 */
+export function userPath(id: number | string): string {
+  return `/user/${id}`;
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c7991b5..4eb1d2a 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -41,6 +41,7 @@ export default defineConfig({
     proxy: {
       '/api': apiTarget,
       '/uploads': apiTarget,
+      '/media': apiTarget,
     },
   },
 });
diff --git a/go.mod b/go.mod
index 5a03ea6..1816c29 100644
--- 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
diff --git a/go.sum b/go.sum
index b509d0e..0debeae 100644
--- 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=
diff --git a/handler/api.go b/handler/api.go
index d9117d4..d28cc92 100644
--- 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,
diff --git a/handler/handlers.go b/handler/handlers.go
index 2532329..09e93c4 100644
--- 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")
diff --git a/handler/thumb.go b/handler/thumb.go
new file mode 100644
index 0000000..f17c65d
--- /dev/null
+++ 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)
+}
diff --git a/model/models.go b/model/models.go
index a4effc7..9a83a78 100644
--- 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"`
diff --git a/model/user_view.go b/model/user_view.go
index af4592d..4a02c6a 100644
--- 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"`
-	Username  string    `json:"username"`
-	Email     string    `json:"email"`
-	Nickname  string    `json:"nickname"`
-	Avatar    string    `json:"avatar"`
-	Role      Role      `json:"role"`
+	ID        uint       `json:"id"`
+	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"`
 	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,
diff --git a/router/router.go b/router/router.go
index 9c94d8e..34a9bd4 100644
--- 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)
diff --git a/service/comment.go b/service/comment.go
index 37b162c..760c177 100644
--- 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,
diff --git a/service/post.go b/service/post.go
index 331e9d2..f682330 100644
--- 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)
diff --git a/service/settings.go b/service/settings.go
index 7b1dc2d..d852cf6 100644
--- 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"
diff --git a/service/thumb.go b/service/thumb.go
new file mode 100644
index 0000000..761ce8e
--- /dev/null
+++ 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
+}
diff --git a/service/upload.go b/service/upload.go
index 3313b82..0160791 100644
--- 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
 }
diff --git a/service/user.go b/service/user.go
index 9e10253..3776189 100644
--- 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 {