feat: 完成社区首页功能迭代，新增首页聚合与工作台组件

本次提交实现了完整的社区首页功能：
1. 新增首页聚合接口与服务，包含社区统计、热门帖、活跃用户与板块数据
2. 实现帖子推荐排序、SSR缓存与点赞态同步逻辑
3. 重构导航与布局系统，新增工作台侧边栏与移动端适配
4. 优化主题色与UI样式，统一设计系统风格
5. 修复登录注册页自动跳转与组件状态同步问题

backend/handler/handlers.go

@@ -14,4 +14,5 @@ type Handlers struct {
 	Comment      *service.CommentService
 	Like         *service.LikeService
 	Notification *service.NotificationService
+	OverviewSvc  *service.OverviewService
 }

backend/handler/overview.go

@@ -0,0 +1,34 @@
+package handler
+
+import (
+	"net/http"
+
+	"github.com/freefire/jiang13-bbs/middleware"
+	"github.com/gin-gonic/gin"
+)
+
+// Overview 首页聚合数据：统计、热门榜、活跃用户、板块计数
+func (h *Handlers) Overview(c *gin.Context) {
+	data, err := h.OverviewSvc.Get()
+	if err != nil {
+		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+		return
+	}
+	// 热门榜按当前登录用户填充点赞态
+	if claims := middleware.CurrentUser(c); claims != nil {
+		ids := make([]uint, 0, len(data.Hot))
+		for _, p := range data.Hot {
+			ids = append(ids, p.ID)
+		}
+		likedMap := h.Like.BatchHasLiked(ids, claims.ID)
+		for i := range data.Hot {
+			data.Hot[i].Liked = likedMap[data.Hot[i].ID]
+		}
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"stats":        data.Stats,
+		"hot":          data.Hot,
+		"active_users": data.ActiveUsers,
+		"boards":       data.Boards,
+	})
+}

backend/handler/post.go

@@ -16,6 +16,7 @@ func (h *Handlers) Posts(c *gin.Context) {
 	boardID, _ := strconv.ParseUint(c.Query("board_id"), 10, 64)
 	sort := c.DefaultQuery("sort", "latest")
 	keyword := c.Query("keyword")
+	recommended := c.Query("recommended") == "true"
 
 	items, total, err := h.Post.List(service.PostListQuery{
 		BoardID:     uint(boardID),
@@ -23,6 +24,7 @@ func (h *Handlers) Posts(c *gin.Context) {
 		Size:        size,
 		Sort:        sort,
 		Keyword:     keyword,
+		Recommended: recommended,
 	})
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})

backend/router/router.go

@@ -43,6 +43,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	commentSvc := service.NewCommentService(model.DB)
 	likeSvc := service.NewLikeService(model.DB)
 	notifSvc := service.NewNotificationService(model.DB)
+	overviewSvc := service.NewOverviewService(model.DB)
 	limiter := service.DefaultRateLimiter()
 
 	h := &handler.Handlers{
@@ -53,6 +54,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 		Comment:      commentSvc,
 		Like:         likeSvc,
 		Notification: notifSvc,
+		OverviewSvc:  overviewSvc,
 	}
 
 	authMW := middleware.NewAuthMiddleware(authSvc)
@@ -67,6 +69,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) {
 	{
 		pubAPI.GET("/me", h.Me)
 		pubAPI.GET("/boards", h.Boards)
+		pubAPI.GET("/overview", h.Overview)
 		pubAPI.GET("/posts", h.Posts)
 		pubAPI.GET("/posts/:id", h.PostDetail)
 		pubAPI.GET("/posts/:id/comments", h.PostComments)

backend/service/overview.go

@@ -0,0 +1,167 @@
+package service
+
+import (
+	"time"
+
+	"github.com/freefire/jiang13-bbs/model"
+	"gorm.io/gorm"
+)
+
+// OverviewService 首页聚合服务：一次请求返回统计、热门榜、活跃用户、板块计数
+type OverviewService struct {
+	db *gorm.DB
+}
+
+func NewOverviewService(db *gorm.DB) *OverviewService {
+	return &OverviewService{db: db}
+}
+
+// OverviewStats 社区整体统计
+type OverviewStats struct {
+	Posts      int64 `json:"posts"`
+	Users      int64 `json:"users"`
+	Comments   int64 `json:"comments"`
+	TodayPosts int64 `json:"today_posts"`
+}
+
+// ActiveUser 近 14 天活跃用户
+type ActiveUser struct {
+	ID            uint   `json:"id"`
+	Username      string `json:"username"`
+	Nickname      string `json:"nickname"`
+	Avatar        string `json:"avatar"`
+	ActivityCount int64  `json:"activity_count"`
+}
+
+// BoardCount 板块及其已发布帖子计数（Board 字段被 encoding/json 展平）
+type BoardCount struct {
+	model.Board
+	PostCount int64 `json:"post_count"`
+}
+
+// OverviewData 首页聚合数据
+type OverviewData struct {
+	Stats       OverviewStats  `json:"stats"`
+	Hot         []PostListItem `json:"hot"`
+	ActiveUsers []ActiveUser   `json:"active_users"`
+	Boards      []BoardCount   `json:"boards"`
+}
+
+const activeUserWindow = 14 * 24 * time.Hour
+
+// Get 聚合首页数据。hot 的 liked 态由 handler 层按当前用户填充。
+func (s *OverviewService) Get() (*OverviewData, error) {
+	data := &OverviewData{
+		Hot:         []PostListItem{},
+		ActiveUsers: []ActiveUser{},
+		Boards:      []BoardCount{},
+	}
+
+	now := time.Now()
+	dayStart := time.Date(now.Year(), now.Month(), now.Day(), 0, 0, 0, 0, now.Location())
+	since := now.Add(-activeUserWindow)
+
+	// 统计
+	postQ := s.db.Model(&model.Post{}).Where("status = ?", model.ContentStatusPublished)
+	if err := postQ.Count(&data.Stats.Posts).Error; err != nil {
+		return nil, err
+	}
+	if err := s.db.Model(&model.User{}).Count(&data.Stats.Users).Error; err != nil {
+		return nil, err
+	}
+	if err := s.db.Model(&model.Comment{}).Where("status = ?", model.ContentStatusPublished).Count(&data.Stats.Comments).Error; err != nil {
+		return nil, err
+	}
+	if err := s.db.Model(&model.Post{}).
+		Where("status = ? AND created_at >= ?", model.ContentStatusPublished, dayStart).
+		Count(&data.Stats.TodayPosts).Error; err != nil {
+		return nil, err
+	}
+
+	// 热门榜：非置顶，按 赞 + 评论×2
+	var hotPosts []model.Post
+	if err := s.db.Where("status = ? AND pinned = 0", model.ContentStatusPublished).
+		Order("(like_count + comment_count * 2) DESC, created_at DESC").
+		Limit(5).Preload("Board").Preload("User").Find(&hotPosts).Error; err != nil {
+		return nil, err
+	}
+	data.Hot = toPostListItems(hotPosts)
+
+	// 活跃用户：近 14 天发帖+评论合并计数，JOIN 用户过滤封禁/软删
+	type activityRow struct {
+		UserID        uint
+		ActivityCount int64
+	}
+	var rows []activityRow
+	activitySQL := `
+SELECT a.user_id AS user_id, COUNT(*) AS activity_count
+FROM (
+	SELECT user_id FROM posts WHERE status = ? AND created_at >= ? AND deleted_at IS NULL
+	UNION ALL
+	SELECT user_id FROM comments WHERE status = ? AND created_at >= ? AND deleted_at IS NULL
+) AS a
+JOIN users AS u ON u.id = a.user_id
+WHERE u.banned = ? AND u.deleted_at IS NULL
+GROUP BY a.user_id
+ORDER BY activity_count DESC, a.user_id ASC
+LIMIT 5`
+	if err := s.db.Raw(activitySQL,
+		model.ContentStatusPublished, since,
+		model.ContentStatusPublished, since,
+		false).Scan(&rows).Error; err != nil {
+		return nil, err
+	}
+	if len(rows) > 0 {
+		ids := make([]uint, 0, len(rows))
+		for _, r := range rows {
+			ids = append(ids, r.UserID)
+		}
+		var users []model.User
+		if err := s.db.Where("id IN ?", ids).Find(&users).Error; err != nil {
+			return nil, err
+		}
+		userMap := make(map[uint]model.User, len(users))
+		for _, u := range users {
+			userMap[u.ID] = u
+		}
+		for _, r := range rows {
+			u, ok := userMap[r.UserID]
+			if !ok {
+				continue
+			}
+			data.ActiveUsers = append(data.ActiveUsers, ActiveUser{
+				ID:            u.ID,
+				Username:      u.Username,
+				Nickname:      u.Nickname,
+				Avatar:        u.Avatar,
+				ActivityCount: r.ActivityCount,
+			})
+		}
+	}
+
+	// 板块 + 各自帖子计数（一条 GROUP BY）
+	var boards []model.Board
+	if err := s.db.Order("sort_order ASC, id ASC").Find(&boards).Error; err != nil {
+		return nil, err
+	}
+	type countRow struct {
+		BoardID uint
+		Cnt     int64
+	}
+	var counts []countRow
+	if err := s.db.Model(&model.Post{}).
+		Select("board_id, COUNT(*) AS cnt").
+		Where("status = ?", model.ContentStatusPublished).
+		Group("board_id").Scan(&counts).Error; err != nil {
+		return nil, err
+	}
+	countMap := make(map[uint]int64, len(counts))
+	for _, c := range counts {
+		countMap[c.BoardID] = c.Cnt
+	}
+	for _, b := range boards {
+		data.Boards = append(data.Boards, BoardCount{Board: b, PostCount: countMap[b.ID]})
+	}
+
+	return data, nil
+}

backend/service/post.go

@@ -25,6 +25,22 @@ type PostListQuery struct {
 	Size        int
 	Sort        string // latest | hot
 	Keyword     string // 搜索关键词
+	Recommended bool   // 仅精华帖
+}
+
+// toPostListItems 将 Post 模型批量转为不含正文的列表项
+func toPostListItems(posts []model.Post) []PostListItem {
+	items := make([]PostListItem, 0, len(posts))
+	for _, p := range posts {
+		items = append(items, PostListItem{
+			ID: p.ID, BoardID: p.BoardID, UserID: p.UserID,
+			Title: p.Title, Tags: p.Tags, PostType: p.PostType,
+			Pinned: p.Pinned, Recommended: p.Recommended, LikeCount: p.LikeCount, ViewCount: p.ViewCount,
+			CommentCount: p.CommentCount, CreatedAt: p.CreatedAt,
+			Board: p.Board, User: p.User,
+		})
+	}
+	return items
 }
 
 // PostListItem 帖子列表项（不含正文）
@@ -63,6 +79,9 @@ func (s *PostService) List(q PostListQuery) ([]PostListItem, int64, error) {
 		kw := "%" + q.Keyword + "%"
 		query = query.Where("title ILIKE ? OR content ILIKE ? OR tags ILIKE ?", kw, kw, kw)
 	}
+	if q.Recommended {
+		query = query.Where("recommended = ?", true)
+	}
 
 	var total int64
 	if err := query.Count(&total).Error; err != nil {
@@ -71,7 +90,12 @@ func (s *PostService) List(q PostListQuery) ([]PostListItem, int64, error) {
 
 	var posts []model.Post
 	offset := (q.Page - 1) * q.Size
-	order := "pinned DESC, created_at DESC"
+	// latest：按"最后活跃时间"排序——新帖与新评论都会浮到顶部。
+	// 取发帖时间与该帖最新一条已发布评论时间的较大值，相关子查询走 comments.post_id 索引
+	order := `pinned DESC, GREATEST(created_at, COALESCE((
+		SELECT MAX(c.created_at) FROM comments c
+		WHERE c.post_id = posts.id AND c.status = 'published' AND c.deleted_at IS NULL
+	), created_at)) DESC`
 	if q.Sort == "hot" {
 		order = "pinned DESC, (like_count + comment_count * 2) DESC, created_at DESC"
 	}
@@ -80,17 +104,7 @@ func (s *PostService) List(q PostListQuery) ([]PostListItem, int64, error) {
 		return nil, 0, err
 	}
 
-	items := make([]PostListItem, 0, len(posts))
+	return toPostListItems(posts), total, nil
-	for _, p := range posts {
-		items = append(items, PostListItem{
-			ID: p.ID, BoardID: p.BoardID, UserID: p.UserID,
-			Title: p.Title, Tags: p.Tags, PostType: p.PostType,
-			Pinned: p.Pinned, Recommended: p.Recommended, LikeCount: p.LikeCount, ViewCount: p.ViewCount,
-			CommentCount: p.CommentCount, CreatedAt: p.CreatedAt,
-			Board: p.Board, User: p.User,
-		})
-	}
-	return items, total, nil
 }
 
 // ListByUser 获取指定用户发布的帖子（公开已发布）
@@ -112,17 +126,7 @@ func (s *PostService) ListByUser(userID uint, page, size int) ([]PostListItem, i
 		Preload("Board").Preload("User").Find(&posts).Error; err != nil {
 		return nil, 0, err
 	}
-	items := make([]PostListItem, 0, len(posts))
+	return toPostListItems(posts), total, nil
-	for _, p := range posts {
-		items = append(items, PostListItem{
-			ID: p.ID, BoardID: p.BoardID, UserID: p.UserID,
-			Title: p.Title, Tags: p.Tags, PostType: p.PostType,
-			Pinned: p.Pinned, Recommended: p.Recommended, LikeCount: p.LikeCount, ViewCount: p.ViewCount,
-			CommentCount: p.CommentCount, CreatedAt: p.CreatedAt,
-			Board: p.Board, User: p.User,
-		})
-	}
-	return items, total, nil
 }
 
 // GetAuthorID 获取帖子作者 ID（不增加浏览量）

frontend/app/board/[id]/page.tsx

@@ -29,7 +29,7 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
   const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
   const cookie = authCookieHeader(await cookies());
   const [postsData, boardsData] = await Promise.all([
-    fetchPosts(page, 20, Number(id), "latest", "", cookie),
+    fetchPosts(page, 20, Number(id), "latest", "", false, cookie),
     fetchBoards(),
   ]);
   const boardIndex = boardsData.boards.findIndex((b) => b.id === Number(id));
@@ -88,8 +88,8 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
                 <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>全部讨论</span>
                 <span className="meta text-xs">第 {page} 页</span>
               </div>
-              {rows.map((post) => (
+              {rows.map((post, i) => (
-                <PostRow key={post.id} post={post} />
+                <PostRow key={post.id} post={post} index={i} />
               ))}
             </div>
           ) : (

frontend/app/globals.css

@@ -1,40 +1,48 @@
 @import "tailwindcss";
 
 /* ============================================================
-   姜十三论坛 · WARM CORNER 设计系统
+   姜十三论坛 · GRAPHITE INDIGO 设计系统
-   暖白纸面 / 圆润卡片 / 柔和投影 / 青绿主色 / 陶土辅色
+   冷调石墨灰阶 / 纯白卡片 / 靛蓝主色 / 近黑锌灰暗色
    ============================================================ */
 
 :root {
-  /* 浅色（默认） */
+  /* 浅色（默认）——冷调石墨：底色微蓝灰，面板纯白浮起，层次干净锐利 */
-  --bg: #f6f2ea;
+  --bg: #f6f7f9;
   --panel: #ffffff;
-  --panel-2: #faf6ef;
+  --panel-2: #f2f4f7;
-  --tint: #f1ebe0;
+  --tint: #eceff3;
-  --ink: #2c2620;
+  --ink: #161a22;
-  --ink-2: #6b6257;
+  --ink-2: #4b5260;
-  --ink-3: #7c7365;
+  --ink-3: #5b6270;
-  --line: #ece4d8;
+  --line: #e4e7ec; /* 装饰性分隔/卡片边（非交互，配合阴影与底色高差） */
-  --line-2: #ddd2c1;
+  --line-2: #7c8698; /* 功能性边界：输入框/按钮/分页等可交互控件，满足 1.4.11 ≥3:1 */
 
-  --accent: #0e6f66;
+  --accent: #3b5bdb;
-  --accent-hi: #0b5c54;
+  --accent-hi: #3451c8;
-  --accent-soft: rgba(14, 111, 102, 0.1);
+  --accent-soft: rgba(59, 91, 219, 0.1);
-  --accent-on: #fdfbf6; /* 暖白，与暖纸底色协调，而非冷纯白 */
+  --accent-on: #ffffff;
 
-  --clay: #b85c42;
+  --clay: #a5420a;
-  --clay-soft: rgba(200, 105, 77, 0.12);
+  --clay-soft: rgba(165, 66, 10, 0.12);
-  --gold: #9a6b1f;
+  --gold: #825700;
-  --gold-soft: rgba(176, 124, 30, 0.13);
+  --gold-soft: rgba(130, 87, 0, 0.13);
 
-  --danger: #d23b32;
+  --danger: #c8281e;
-  --danger-soft: rgba(210, 59, 50, 0.09);
+  --danger-soft: rgba(200, 40, 30, 0.09);
-  --ok: #2f8f4e;
+  --ok: #137333;
-  --ok-soft: rgba(47, 143, 78, 0.1);
+  --ok-soft: rgba(19, 115, 51, 0.1);
 
-  --shadow-sm: 0 1px 2px rgba(87, 66, 36, 0.05);
+  /* 工作台语义：导航选中态 / 榜单奖牌色 */
-  --shadow: 0 2px 8px rgba(87, 66, 36, 0.05), 0 10px 28px rgba(87, 66, 36, 0.05);
+  --nav-active-bg: var(--accent-soft);
-  --shadow-lg: 0 6px 16px rgba(87, 66, 36, 0.07), 0 20px 48px rgba(87, 66, 36, 0.1);
+  --nav-active-ink: var(--accent);
+  --nav-active-line: rgba(59, 91, 219, 0.22);
+  --rank-1: #96620f;
+  --rank-2: #5d6676;
+  --rank-3: #a05a2c;
+
+  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow: 0 2px 8px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.06);
+  --shadow-lg: 0 6px 16px rgba(16, 24, 40, 0.08), 0 20px 48px rgba(16, 24, 40, 0.12);
 
   /* next/font 构建期自托管，变量由 layout.tsx 注入；
      本地系统字体仅作网络字体分片就绪前的回退（PingFang/雅黑与 Noto 观感接近） */
@@ -52,30 +60,39 @@
 }
 
 .dark {
-  --bg: #181510;
+  /* 近黑锌灰：面板逐层浮起，靛蓝提亮为长春花蓝 */
-  --panel: #221e18;
+  --bg: #0f1115;
-  --panel-2: #2a251e;
+  --panel: #181b21;
-  --tint: #312b22;
+  --panel-2: #20242c;
-  --ink: #f3ede2;
+  --tint: #282d37;
-  --ink-2: #c3b9a9;
+  --ink: #eef1f6;
-  --ink-3: #9d9383;
+  --ink-2: #b6bdc9;
-  --line: rgba(243, 237, 226, 0.09);
+  --ink-3: #98a1b2;
-  --line-2: rgba(243, 237, 226, 0.17);
+  --line: rgba(238, 241, 246, 0.08); /* 装饰性分隔/卡片边 */
+  --line-2: rgba(238, 241, 246, 0.38); /* 功能性控件边界，1.4.11 ≥3:1 */
 
-  --accent: #2dd4bf;
+  --accent: #8ea2ff;
-  --accent-hi: #5eead4;
+  --accent-hi: #a9b8ff;
-  --accent-soft: rgba(45, 212, 191, 0.15);
+  --accent-soft: rgba(141, 163, 255, 0.16);
-  --accent-on: #0c2420;
+  --accent-on: #10162b;
 
-  --clay: #e89070;
+  --clay: #f0875a;
-  --clay-soft: rgba(232, 144, 112, 0.16);
+  --clay-soft: rgba(240, 135, 90, 0.16);
-  --gold: #d8ae5e;
+  --gold: #e0b259;
-  --gold-soft: rgba(216, 174, 94, 0.16);
+  --gold-soft: rgba(224, 178, 89, 0.16);
 
-  --danger: #f26b5e;
+  --danger: #ff6b60;
-  --danger-soft: rgba(242, 107, 94, 0.15);
+  --danger-soft: rgba(255, 107, 96, 0.15);
-  --ok: #6fcf8e;
+  --ok: #58d18a;
-  --ok-soft: rgba(111, 207, 142, 0.15);
+  --ok-soft: rgba(88, 209, 138, 0.15);
+
+  /* 工作台语义 */
+  --nav-active-bg: rgba(141, 163, 255, 0.14);
+  --nav-active-ink: #a9b8ff;
+  --nav-active-line: rgba(141, 163, 255, 0.3);
+  --rank-1: #e3bf74;
+  --rank-2: #b9c1cd;
+  --rank-3: #e0a06e;
 
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.22);
@@ -84,10 +101,6 @@
   color-scheme: dark;
 }
 
-* {
-  border-color: var(--line);
-}
-
 html {
   scrollbar-color: var(--line-2) transparent;
 }
@@ -118,6 +131,13 @@ body {
 /* 链接重置放入 base 层：避免未分层规则击败 components 层的 .btn-primary 等类
    （Tailwind v4 中未分层样式优先级高于任何 @layer） */
 @layer base {
+  /* 必须在 base 层：未分层的 * 选择器会击败 @layer components 中所有
+     border-color（.field/.btn-line/.pager-btn 等曾因此实际渲染成 --line） */
+  *,
+  ::before,
+  ::after {
+    border-color: var(--line);
+  }
   a {
     color: inherit;
     text-decoration: none;
@@ -161,6 +181,19 @@ h1, h2, h3, h4 {
     border-color: var(--line-2);
   }
 
+  /* 整行可点：标题链接的 ::after 铺满最近的 relative 行容器，
+     行内其他交互元素加 .above-link 抬到点击层之上 */
+  .stretch-link::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+  .above-link {
+    position: relative;
+    z-index: 2;
+  }
+
   /* ----- 按钮（胶囊） ----- */
   .btn {
     display: inline-flex;
@@ -184,12 +217,12 @@ h1, h2, h3, h4 {
   .btn-primary {
     background: var(--accent);
     color: var(--accent-on);
-    box-shadow: 0 1px 2px rgba(87, 66, 36, 0.12), 0 2px 8px rgba(14, 111, 102, 0.16);
+    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(59, 91, 219, 0.22);
   }
   .btn-primary:hover:not(:disabled) {
     background: var(--accent-hi);
     transform: translateY(-1px);
-    box-shadow: 0 2px 6px rgba(87, 66, 36, 0.1), 0 8px 20px rgba(14, 111, 102, 0.24);
+    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.1), 0 8px 20px rgba(59, 91, 219, 0.3);
   }
   .btn-primary:active:not(:disabled) {
     transform: translateY(0);
@@ -213,6 +246,10 @@ h1, h2, h3, h4 {
     background: var(--danger);
     color: #fff;
   }
+  .dark .btn-danger:hover:not(:disabled) {
+    /* 暗色 danger 为亮红，白字仅 2.79:1，改用深色文字 */
+    color: #1a0c0b;
+  }
 
   .btn-sm { padding: 7px 14px; font-size: 13px; }
 
@@ -235,7 +272,8 @@ h1, h2, h3, h4 {
     font-family: var(--font-sans);
     transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
   }
-  .field::placeholder { color: var(--ink-3); opacity: 0.8; }
+  /* 占位符不使用 opacity：透明度与底色合成后浅色仅 3.7:1，实色 ink-3 达 5.72:1 */
+  .field::placeholder { color: var(--ink-3); }
   .field:focus {
     outline: none;
     border-color: var(--accent);
@@ -295,7 +333,7 @@ h1, h2, h3, h4 {
   /* ----- 分页 ----- */
   .pager-btn {
     background: var(--panel);
-    border-color: var(--line);
+    border-color: var(--line-2);
     color: var(--ink-2);
   }
   .pager-btn:hover {
@@ -339,6 +377,199 @@ h1, h2, h3, h4 {
     font-size: 14px;
     font-weight: 500;
   }
+
+  /* ============================================================
+     工作台组件（WORKSPACE EDITION）
+     ============================================================ */
+
+  /* 分段控件：凹陷轨道 + 凸起的白色选中胶囊 */
+  .j13-seg {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px;
+    background: var(--tint);
+    border: 1px solid var(--line);
+    border-radius: 999px;
+  }
+  .j13-seg [role="tab"] {
+    appearance: none;
+    border: 1px solid transparent;
+    background: transparent;
+    border-radius: 999px;
+    padding: 6.5px 15px;
+    font-family: var(--font-sans);
+    font-size: 13.5px;
+    font-weight: 600;
+    color: var(--ink-3);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease,
+      transform 0.12s ease;
+  }
+  .j13-seg [role="tab"]:hover {
+    color: var(--ink);
+  }
+  .j13-seg [role="tab"][aria-selected="true"] {
+    background: var(--panel);
+    color: var(--accent);
+    box-shadow: var(--shadow-sm);
+    font-weight: 700;
+  }
+  .j13-seg [role="tab"]:active {
+    transform: scale(0.97);
+  }
+
+  /* 侧栏导航项 */
+  .j13-raillink {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border: 1px solid transparent;
+    border-radius: var(--r-sm);
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--ink-2);
+    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
+  }
+  .j13-raillink:hover {
+    background: var(--panel-2);
+    color: var(--ink);
+  }
+  .j13-raillink[aria-current="page"] {
+    background: var(--nav-active-bg);
+    border-color: var(--nav-active-line);
+    color: var(--nav-active-ink);
+    font-weight: 700;
+  }
+
+  /* 工作台模块卡 */
+  .j13-module {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: var(--r);
+    box-shadow: var(--shadow-sm);
+    padding: 16px;
+  }
+  .j13-module-title {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    color: var(--ink);
+  }
+
+  /* 统计数字格 */
+  .j13-stat {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+    padding: 11px 13px;
+    background: var(--panel-2);
+    border: 1px solid var(--line);
+    border-radius: var(--r-sm);
+  }
+  .j13-stat .j13-stat-num {
+    font-size: 22px;
+    font-weight: 800;
+    line-height: 1.15;
+    letter-spacing: -0.015em;
+    color: var(--ink);
+    font-variant-numeric: tabular-nums;
+  }
+  .j13-stat .j13-stat-lab {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--ink-3);
+    white-space: nowrap;
+  }
+
+  /* 热门榜单 */
+  .j13-rank {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 8px 8px;
+    border-radius: 10px;
+    transition: background 0.16s ease;
+  }
+  .j13-rank:hover {
+    background: var(--panel-2);
+  }
+  .j13-rank .j13-rank-no {
+    width: 18px;
+    padding-top: 2px;
+    text-align: center;
+    font-size: 13px;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+    color: var(--ink-3);
+    flex-shrink: 0;
+  }
+  .j13-rank:nth-child(1) .j13-rank-no { color: var(--rank-1); }
+  .j13-rank:nth-child(2) .j13-rank-no { color: var(--rank-2); }
+  .j13-rank:nth-child(3) .j13-rank-no { color: var(--rank-3); }
+
+  /* 精选置顶卡 */
+  .j13-feature {
+    position: relative;
+    display: block;
+    padding: 15px 17px;
+    background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
+    border: 1px solid var(--line);
+    border-radius: var(--r);
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  }
+  .j13-feature:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
+  }
+
+  /* 移动端横向板块条（滚动条隐藏，保留触控惯性） */
+  .j13-chips {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 2px;
+  }
+  .j13-chips::-webkit-scrollbar {
+    display: none;
+  }
+  .j13-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    padding: 7px 14px;
+    border: 1px solid var(--line-2);
+    background: var(--panel);
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ink-2);
+    white-space: nowrap;
+    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
+  }
+  .j13-chip:hover {
+    border-color: var(--line-2);
+    color: var(--ink);
+  }
+  .j13-chip[aria-current="page"] {
+    background: var(--nav-active-bg);
+    border-color: var(--nav-active-line);
+    color: var(--nav-active-ink);
+  }
 }
 
 /* ============================================================
@@ -401,22 +632,22 @@ h1, h2, h3, h4 {
 }
 
 /* 头像配色（浅/暗各自保证可读） */
-.av-0 { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
+.av-0 { background: rgba(52, 81, 200, 0.12); color: #3451c8; }
-.av-1 { background: rgba(200, 105, 77, 0.14); color: #b85c42; }
+.av-1 { background: rgba(10, 99, 117, 0.12); color: #0a6375; }
-.av-2 { background: rgba(176, 124, 30, 0.15); color: #9a6b1f; }
+.av-2 { background: rgba(109, 71, 192, 0.12); color: #6d47c0; }
-.av-3 { background: rgba(91, 111, 181, 0.14); color: #4c61ab; }
+.av-3 { background: rgba(27, 99, 158, 0.12); color: #1b639e; }
-.av-4 { background: rgba(122, 92, 168, 0.14); color: #6f50a0; }
+.av-4 { background: rgba(12, 102, 95, 0.13); color: #0c665f; }
-.av-5 { background: rgba(79, 138, 95, 0.15); color: #477e55; }
+.av-5 { background: rgba(171, 56, 93, 0.12); color: #ab385d; }
-.av-6 { background: rgba(192, 106, 139, 0.14); color: #b1557a; }
+.av-6 { background: rgba(133, 88, 0, 0.14); color: #855800; }
-.av-7 { background: rgba(63, 134, 147, 0.14); color: #357985; }
+.av-7 { background: rgba(82, 96, 122, 0.13); color: #52607a; }
-.dark .av-0 { background: rgba(45, 212, 191, 0.16); color: #5eead4; }
+.dark .av-0 { background: rgba(169, 184, 255, 0.18); color: #a9b8ff; }
-.dark .av-1 { background: rgba(232, 144, 112, 0.18); color: #f0a484; }
+.dark .av-1 { background: rgba(92, 201, 224, 0.18); color: #5cc9e0; }
-.dark .av-2 { background: rgba(216, 174, 94, 0.18); color: #e3bf74; }
+.dark .av-2 { background: rgba(192, 168, 245, 0.18); color: #c0a8f5; }
-.dark .av-3 { background: rgba(130, 150, 224, 0.18); color: #a7b8f0; }
+.dark .av-3 { background: rgba(125, 184, 238, 0.18); color: #7db8ee; }
-.dark .av-4 { background: rgba(178, 150, 224, 0.18); color: #c3abe8; }
+.dark .av-4 { background: rgba(94, 211, 189, 0.18); color: #5ed3bd; }
-.dark .av-5 { background: rgba(129, 201, 148, 0.18); color: #99ddac; }
+.dark .av-5 { background: rgba(240, 147, 181, 0.18); color: #f093b5; }
-.dark .av-6 { background: rgba(235, 148, 180, 0.18); color: #f0a5c2; }
+.dark .av-6 { background: rgba(224, 178, 89, 0.18); color: #e0b259; }
-.dark .av-7 { background: rgba(102, 190, 206, 0.18); color: #84d4e0; }
+.dark .av-7 { background: rgba(170, 182, 207, 0.18); color: #aab6cf; }
 
 /* ============================================================
    微交互
@@ -432,13 +663,13 @@ h1, h2, h3, h4 {
   45% { transform: scale(1.4); }
   100% { transform: scale(1); }
 }
-.j13-heart-pop { animation: j13-heart-pop 0.26s ease-out; }
+.j13-heart-pop { animation: j13-heart-pop 0.18s ease-out; }
 
 @keyframes j13-fade-up {
   from { opacity: 0; transform: translateY(10px); }
   to { opacity: 1; transform: translateY(0); }
 }
-.j13-fade-up { animation: j13-fade-up 0.3s ease-out both; }
+.j13-fade-up { animation: j13-fade-up 0.2s ease-out both; }
 
 /* 跳到主内容 */
 .skip-link {

frontend/app/layout.tsx

@@ -5,7 +5,8 @@ import "./globals.css";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import Toaster from "@/components/Toaster";
-import { fetchMe, type User } from "@/lib/api";
+import type { User } from "@/lib/api";
+import { getMeCached } from "@/lib/serverData";
 import { TOKEN_COOKIE, REFRESH_COOKIE, authCookieHeader } from "@/lib/cookies";
 
 // 构建期下载并自托管字体：同源加载 + 自动 preload + fallback 度量校正，
@@ -63,7 +64,7 @@ export default async function RootLayout({
     !!cookieStore.get(TOKEN_COOKIE)?.value || !!cookieStore.get(REFRESH_COOKIE)?.value;
   if (hasAuthCookie) {
     // 用户信息与未读数合并为一次请求；只转发最小化的 access cookie
-    const me = await fetchMe(authCookieHeader(cookieStore) || undefined);
+    const me = await getMeCached(authCookieHeader(cookieStore) || undefined);
     user = me.user;
     unread = me.unread_count;
   }
@@ -81,7 +82,7 @@ export default async function RootLayout({
         <main
           id="main"
           tabIndex={-1}
-          className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-7 sm:py-9 outline-none"
+          className="flex-1 w-full max-w-[1440px] mx-auto px-4 sm:px-6 py-7 sm:py-9 outline-none"
         >
           {children}
         </main>

frontend/app/login/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { MessagesSquare } from "lucide-react";
-import { apiLogin } from "@/lib/api";
+import { apiLogin, apiMe } from "@/lib/api";
+import { hasAuthCookieHint } from "@/lib/cookies";
 
 // 仅允许同源相对路径跳转，拦截 //host、/\\host 与绝对 URL 形式的开放重定向
 function safeRedirect(to: string | null): string {
@@ -23,6 +24,17 @@ export default function LoginPage() {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
+  // 已登录用户访问登录页：直接回落到安全的跳转目标
+  useEffect(() => {
+    if (!hasAuthCookieHint()) return;
+    apiMe()
+      .then((res) => {
+        if (res.user) router.replace(redirect);
+      })
+      .catch(() => {});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");

frontend/app/page.tsx

@@ -1,12 +1,19 @@
-import Link from "next/link";
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
-import { PenSquare, SearchX, MessagesSquare, Check, ArrowRight } from "lucide-react";
+import Link from "next/link";
-import { fetchPosts, fetchBoards } from "@/lib/api";
+import { PenSquare, SearchX, MessagesSquare } from "lucide-react";
+import {
+  fetchPosts,
+  fetchOverview,
+  type OverviewResponse,
+} from "@/lib/api";
 import { authCookieHeader } from "@/lib/cookies";
+import { getMeCached } from "@/lib/serverData";
 import Pagination from "@/components/Pagination";
 import PostRow from "@/components/PostRow";
-import PinnedPosts from "@/components/PinnedPosts";
+import FeedTabs, { type FeedSort } from "@/components/home/FeedTabs";
+import { WorkspaceNav, WorkspaceNavMobile } from "@/components/home/WorkspaceNav";
+import { CommunityPanels, CommunityPanelsMobile } from "@/components/home/CommunityPanels";
 
 export const metadata: Metadata = {
   title: "姜十三论坛 · 技术讨论社区",
@@ -14,69 +21,16 @@ export const metadata: Metadata = {
 };
 
 interface HomePageProps {
-  searchParams: Promise<{ q?: string; page?: string }>;
+  searchParams: Promise<{ q?: string; page?: string; sort?: string; board?: string }>;
 }
 
-export default async function HomePage({ searchParams }: HomePageProps) {
+function normalizeSort(v?: string): FeedSort {
-  const { q, page: pageStr } = await searchParams;
+  return v === "hot" || v === "recommended" ? v : "latest";
-  const keyword = q?.trim() || "";
+}
-  const page = Math.max(1, parseInt(pageStr || "1", 10) || 1);
-  // 仅转发最小化的 access cookie 供后端填充 liked 状态（不携带 refresh 等）
-  const cookie = authCookieHeader(await cookies());
-  const [postsData, boardsData] = await Promise.all([
-    fetchPosts(page, 20, undefined, "latest", keyword, cookie),
-    fetchBoards(),
-  ]);
-
-  // 第一页且非搜索时：管理员置顶独立成区，其余进入普通列表
-  const split = page === 1 && !keyword;
-  const pinned = split ? postsData.posts.filter((p) => p.pinned > 0) : [];
-  const rows = split ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
 
+// 空结果面板（无帖 / 无搜索结果）
+function EmptyState({ keyword }: { keyword: string }) {
   return (
-    <div>
-      {/* 页头 */}
-      <div className="flex items-end justify-between gap-4 mb-6">
-        <div>
-          <h1 className="text-[26px] sm:text-[32px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
-            {keyword ? (
-              <>
-                搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
-              </>
-            ) : (
-              "最新讨论"
-            )}
-          </h1>
-          <p className="meta mt-2">
-            {keyword
-              ? `共找到 ${postsData.total} 篇相关帖子`
-              : `共 ${postsData.total} 篇帖子 · ${boardsData.boards.length} 个板块，欢迎加入讨论`}
-          </p>
-        </div>
-        <Link href="/compose" className="btn btn-primary hidden sm:inline-flex">
-          <PenSquare size={16} /> 写新帖
-        </Link>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_290px] gap-6">
-        {/* 主列 */}
-        <div>
-          <PinnedPosts posts={pinned} />
-
-          <div className="panel overflow-hidden">
-            {rows.length > 0 ? (
-              <>
-                <div className="px-4 sm:px-5 py-3.5 flex items-center justify-between" style={{ borderBottom: "1px solid var(--line)" }}>
-                  <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
-                    {keyword ? "搜索结果" : "全部讨论"}
-                  </span>
-                  <span className="meta text-xs">共 {postsData.total} 篇</span>
-                </div>
-                {rows.map((post) => (
-                  <PostRow key={post.id} post={post} boardHref />
-                ))}
-              </>
-            ) : (
     <div className="text-center py-20 px-6">
       <span
         className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
@@ -105,6 +59,134 @@ export default async function HomePage({ searchParams }: HomePageProps) {
         </Link>
       )}
     </div>
+  );
+}
+
+export default async function HomePage({ searchParams }: HomePageProps) {
+  const sp = await searchParams;
+  const keyword = sp.q?.trim() || "";
+  const page = Math.max(1, parseInt(sp.page || "1", 10) || 1);
+  const sort = normalizeSort(sp.sort);
+  const boardId = Math.max(0, parseInt(sp.board || "0", 10) || 0);
+  const isSearch = keyword.length > 0;
+
+  const cookie = authCookieHeader(await cookies());
+  // 与 layout 共享同一份 /me 请求（React cache 去重）
+  const mePromise = getMeCached(cookie || undefined);
+  const postsPromise = fetchPosts(
+    page,
+    20,
+    isSearch || boardId <= 0 ? undefined : boardId,
+    sort === "recommended" ? "hot" : sort,
+    keyword,
+    sort === "recommended",
+    cookie
+  );
+  // 聚合面板失败不阻塞帖子流
+  const overviewPromise: Promise<OverviewResponse | null> = fetchOverview(cookie).catch(() => null);
+
+  const [me, postsData, overview] = await Promise.all([
+    mePromise,
+    postsPromise,
+    overviewPromise,
+  ]);
+  const user = me.user;
+  const boards = overview?.boards ?? [];
+  const activeBoard = boards.find((b) => b.id === boardId) || null;
+
+  // 搜索态：单栏占满，无 Tabs/侧栏
+  if (isSearch) {
+    return (
+      <div className="max-w-3xl mx-auto">
+        <div className="mb-5">
+          <h1 className="text-[24px] sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+            搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
+          </h1>
+          <p className="meta mt-2">共 {postsData.total} 篇结果 · 按相关度与时间排序</p>
+        </div>
+        <div className="panel overflow-hidden">
+          {postsData.posts.length > 0 ? (
+            postsData.posts.map((post, i) => (
+              <PostRow key={post.id} post={post} boardHref index={i} showViews={false} showLike={false} />
+            ))
+          ) : (
+            <EmptyState keyword={keyword} />
+          )}
+        </div>
+        <Pagination
+          total={postsData.total}
+          page={page}
+          size={20}
+          basePath="/"
+          query={{ q: keyword }}
+        />
+      </div>
+    );
+  }
+
+  // 置顶帖直接按后端 pinned DESC 顺序并入统一信息流，同样的行布局
+  const heading = activeBoard
+    ? activeBoard.name
+    : sort === "hot"
+      ? "热门讨论"
+      : sort === "recommended"
+        ? "精华内容"
+        : "最新讨论";
+  const headingHint = activeBoard
+    ? sort === "hot"
+      ? "该板块按点赞与评论热度排序"
+      : sort === "recommended"
+        ? "该板块管理员精选的优质内容"
+        : "该板块新发帖与新评论都会浮到顶部"
+    : sort === "hot"
+      ? "按点赞与评论热度排序"
+      : sort === "recommended"
+        ? "管理员精选的优质内容"
+        : "新发帖与新评论都会浮到顶部";
+
+  const pageQuery: Record<string, string> = {};
+  if (boardId > 0) pageQuery.board = String(boardId);
+  if (sort !== "latest") pageQuery.sort = sort;
+
+  return (
+    <div>
+      <WorkspaceNavMobile boards={boards} user={user} />
+
+      <div className="flex items-start gap-6 xl:gap-7 mt-5 lg:mt-0">
+        <WorkspaceNav boards={boards} user={user} />
+
+        {/* 中栏：帖子流（左栏切板块只替换这一列） */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-end justify-between gap-3 flex-wrap mb-4">
+            <div className="min-w-0">
+              <h1
+                className="text-[23px] sm:text-[27px] font-extrabold tracking-tight"
+                style={{ color: "var(--ink)" }}
+              >
+                {heading}
+              </h1>
+              <p className="meta mt-1.5">
+                共 {postsData.total} 篇 · {headingHint}
+              </p>
+            </div>
+            <FeedTabs current={sort} boardId={boardId} />
+          </div>
+
+          <div className="panel overflow-hidden">
+            {postsData.posts.length > 0 ? (
+              postsData.posts.map((post, i) => (
+                <PostRow
+                  key={post.id}
+                  post={post}
+                  boardHref={!activeBoard}
+                  compact
+                  index={i}
+                  showViews={false}
+                  showLike={false}
+                />
+              ))
+            ) : (
+              <EmptyState keyword="" />
             )}
           </div>
 
@@ -113,87 +195,30 @@ export default async function HomePage({ searchParams }: HomePageProps) {
             page={page}
             size={20}
             basePath="/"
-            query={keyword ? { q: keyword } : undefined}
+            query={Object.keys(pageQuery).length > 0 ? pageQuery : undefined}
           />
         </div>
 
-        {/* 侧栏 */}
+        {/* 右栏：社区面板 */}
-        <aside className="space-y-5">
+        {overview && (
-          {/* 发帖引导 */}
+          <CommunityPanels
-          {!keyword && (
+            stats={overview.stats}
-            <div
+            hot={overview.hot}
-              className="p-5"
+            activeUsers={overview.active_users}
-              style={{
+          />
-                background: "var(--accent-soft)",
+        )}
-                borderRadius: "var(--r)",
+      </div>
-              }}
+
-            >
+      {/* 窄屏：面板下沉到帖子流之后 */}
-              <p className="font-extrabold text-[16px] mb-1" style={{ color: "var(--ink)" }}>
+      {overview && (
-                有什么想聊的？
+        <div className="mt-6">
-              </p>
+          <CommunityPanelsMobile
-              <p className="text-[13px] leading-relaxed mb-4" style={{ color: "var(--ink-2)" }}>
+            stats={overview.stats}
-                分享你的想法、问题或经验，社区里有人正在等你的回答。
+            hot={overview.hot}
-              </p>
+            activeUsers={overview.active_users}
-              <Link
+          />
-                href="/compose"
-                className="btn btn-primary w-full justify-center"
-              >
-                <PenSquare size={15} /> 发起讨论
-              </Link>
         </div>
       )}
-
-          <div className="panel p-5">
-            <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>板块导航</p>
-            <div className="space-y-1">
-              {boardsData.boards.map((b, i) => (
-                <Link
-                  key={b.id}
-                  href={`/board/${b.id}`}
-                  className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-xl transition-colors hover:bg-[var(--panel-2)]"
-                >
-                  <span
-                    className={`av-${i % 8} w-8 h-8 rounded-xl flex items-center justify-center text-[13px] font-bold shrink-0`}
-                  >
-                    {b.name.slice(0, 1)}
-                  </span>
-                  <span
-                    className="text-sm font-medium flex-1 truncate group-hover:text-[var(--accent)] transition-colors"
-                    style={{ color: "var(--ink)" }}
-                  >
-                    {b.name}
-                  </span>
-                  <ArrowRight size={14} className="opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" style={{ color: "var(--accent)" }} />
-                </Link>
-              ))}
-            </div>
-          </div>
-
-          <div className="panel p-5">
-            <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>社区守则</p>
-            <ul className="space-y-3 text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
-              <li className="flex gap-2.5">
-                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
-                  <Check size={12} strokeWidth={3} />
-                </span>
-                标题清晰，内容支持 Markdown
-              </li>
-              <li className="flex gap-2.5">
-                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
-                  <Check size={12} strokeWidth={3} />
-                </span>
-                友善讨论，就事论事
-              </li>
-              <li className="flex gap-2.5">
-                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
-                  <Check size={12} strokeWidth={3} />
-                </span>
-                违规内容可向管理员举报
-              </li>
-            </ul>
-          </div>
-        </aside>
-      </div>
     </div>
   );
 }

frontend/app/register/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { UserPlus } from "lucide-react";
-import { apiRegister } from "@/lib/api";
+import { apiRegister, apiMe } from "@/lib/api";
+import { hasAuthCookieHint } from "@/lib/cookies";
 
 export default function RegisterPage() {
   const router = useRouter();
@@ -14,6 +15,16 @@ export default function RegisterPage() {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
+  // 已登录用户不必再注册，直接回首页
+  useEffect(() => {
+    if (!hasAuthCookieHint()) return;
+    apiMe()
+      .then((res) => {
+        if (res.user) router.replace("/");
+      })
+      .catch(() => {});
+  }, [router]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");

frontend/components/Footer.tsx

@@ -1,34 +1,20 @@
-import Link from "next/link";
+import pkg from "../package.json";
+import FooterTiming from "./FooterTiming";
 
+// 仅把明确发布过的版本视为"真实版本"；脚手架默认号视为未设计，传空显示占位
+function realVersion(v: string): string {
+  return !v || v === "0.0.0" || v === "0.1.0" ? "" : v;
+}
+
+// 极简页脚：版权 + 实时性能指标（版本 / 页面加载 / 模板生成）
 export default function Footer() {
+  const year = new Date().getFullYear();
+
   return (
     <footer className="mt-14" style={{ borderTop: "1px solid var(--line)" }}>
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <div className="max-w-[1440px] mx-auto px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
-        <div className="flex items-center gap-2.5">
+        <span className="meta text-[12px] whitespace-nowrap">© {year} 姜十三社区</span>
-          <span
+        <FooterTiming version={realVersion(pkg.version)} />
-            className="w-7 h-7 rounded-lg flex items-center justify-center"
-            style={{ background: "var(--accent)", color: "var(--accent-on)" }}
-          >
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
-            </svg>
-          </span>
-          <span className="text-[13.5px] font-bold" style={{ color: "var(--ink)" }}>
-            姜十三社区
-          </span>
-        </div>
-        <nav className="flex items-center gap-5 text-[13px]" style={{ color: "var(--ink-2)" }}>
-          <Link href="/" className="hover:text-[var(--accent)] transition-colors">
-            首页
-          </Link>
-          <Link href="/board/1" className="hover:text-[var(--accent)] transition-colors">
-            板块
-          </Link>
-          <span className="meta">Go × Next.js</span>
-        </nav>
-        <span className="meta text-[12.5px]">
-          © 2026 姜十三
-        </span>
       </div>
     </footer>
   );

frontend/components/FooterTiming.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { Suspense, useEffect, useRef, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+// 版本由 Footer（RSC）从 package.json 注入；未正式设计版本号时传入空串，显示占位
+const PLACEHOLDER = "—";
+
+interface Metrics {
+  page: number; // 页面：整页加载/客户端导航总耗时
+  tpl: number; // 模板：服务端响应（SSR / RSC）耗时
+}
+
+// 硬加载：页面=loadEventEnd，模板≈TTFB（localhost 下基本等于服务端生成时间）
+function readHardNav(): Metrics {
+  const n = performance.getEntriesByType("navigation")[0] as
+    | PerformanceNavigationTiming
+    | undefined;
+  if (!n) return { page: 0, tpl: 0 };
+  return {
+    page: Math.round((n.loadEventEnd || n.domComplete || n.responseEnd) - n.startTime),
+    tpl: Math.max(0, Math.round(n.responseStart - n.requestStart)),
+  };
+}
+
+function TimingInner({ version }: { version: string }) {
+  const pathname = usePathname();
+  const search = useSearchParams().toString();
+  // 初始必须为 null：performance 仅客户端可读，直接参与首帧渲染会导致水合不一致
+  const [metrics, setMetrics] = useState<Metrics | null>(null);
+  // 记录一次站内链接点击，作为客户端导航计时起点
+  const pending = useRef<{ start: number; path: string; search: string } | null>(null);
+
+  // 挂载后读取硬加载指标；load 事件后 loadEventEnd 才有完整值，再补一次
+  useEffect(() => {
+    setMetrics(readHardNav());
+    const apply = () => setMetrics(readHardNav());
+    if (document.readyState !== "complete") {
+      window.addEventListener("load", apply, { once: true });
+      return () => window.removeEventListener("load", apply);
+    }
+  }, []);
+
+  // 捕获阶段监听站内点击（不干预任何默认行为）
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.defaultPrevented) return;
+      const a = (e.target as HTMLElement).closest("a");
+      if (!a || !a.href || a.target === "_blank" || a.hasAttribute("download")) return;
+      let u: URL;
+      try {
+        u = new URL(a.href);
+      } catch {
+        return;
+      }
+      if (u.origin !== location.origin) return;
+      pending.current = { start: performance.now(), path: u.pathname, search: u.search };
+    };
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, []);
+
+  // 路由切换后两帧（绘制完成）结算；模板耗时取本次 RSC fetch 的资源条目
+  useEffect(() => {
+    const p = pending.current;
+    if (!p) return;
+    if (p.path !== pathname || p.search !== (search ? `?${search}` : "")) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        const page = Math.round(performance.now() - p.start);
+        let tpl = 0;
+        const resources = performance.getEntriesByType("resource") as PerformanceResourceTiming[];
+        for (let i = resources.length - 1; i >= 0; i--) {
+          const r = resources[i];
+          if (
+            r.initiatorType === "fetch" &&
+            r.startTime >= p.start - 10 &&
+            r.name.startsWith(location.origin + p.path)
+          ) {
+            tpl = Math.round(r.responseEnd - r.startTime);
+            break;
+          }
+        }
+        setMetrics((prev) => ({ page: Math.max(1, page), tpl: tpl || prev?.tpl || 0 }));
+        pending.current = null;
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [pathname, search]);
+
+  return (
+    <span
+      className="inline-flex items-center gap-2 text-[12px] tabular-nums whitespace-nowrap"
+      style={{ color: "var(--ink-3)" }}
+    >
+      <span>版本:{version || PLACEHOLDER}</span>
+      <span aria-hidden="true">·</span>
+      <span suppressHydrationWarning>页面:{metrics ? `${metrics.page}ms` : PLACEHOLDER}</span>
+      <span aria-hidden="true">·</span>
+      <span suppressHydrationWarning>模板:{metrics ? `${metrics.tpl}ms` : PLACEHOLDER}</span>
+    </span>
+  );
+}
+
+export default function FooterTiming({ version = "" }: { version?: string }) {
+  return (
+    <Suspense
+      fallback={
+        <span className="text-[12px] meta whitespace-nowrap">
+          版本:{version || PLACEHOLDER}
+        </span>
+      }
+    >
+      <TimingInner version={version} />
+    </Suspense>
+  );
+}

frontend/components/Header.tsx

@@ -16,6 +16,8 @@ import {
   Settings,
   Bell,
   Home,
+  User as UserIcon,
+  ChevronDown,
 } from "lucide-react";
 import { apiLogout, apiMe, type User } from "@/lib/api";
 import { hasAuthCookieHint } from "@/lib/cookies";
@@ -140,7 +142,7 @@ export default function Header({
         WebkitBackdropFilter: "blur(14px)",
       }}
     >
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
+      <div className="max-w-[1440px] mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
         {/* 品牌 */}
         <Link href="/" className="flex items-center gap-2.5 shrink-0 group">
           <span
@@ -166,9 +168,6 @@ export default function Header({
           <NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
             首页
           </NavPill>
-          <NavPill href="/board/1" active={pathname.startsWith("/board")}>
-            板块
-          </NavPill>
           <form onSubmit={handleSearch} className="relative ml-2">
             <Search
               size={15}
@@ -199,51 +198,38 @@ export default function Header({
           </form>
         </nav>
 
-        <div className="hidden lg:flex items-center gap-2">
+        {/* 右侧操作区：桌面/移动共用铃铛（仅挂载一次，避免重复轮询），
-          <button onClick={toggleTheme} className={iconBtn} style={iconBtnStyle} aria-label="切换主题">
+            桌面额外显示主题/发帖/用户菜单，移动端收进汉堡抽屉 */}
+        <div className="flex items-center gap-2">
+          <button
+            onClick={toggleTheme}
+            className={`${iconBtn} hidden lg:inline-flex`}
+            style={iconBtnStyle}
+            aria-label="切换主题"
+          >
             {theme === "dark" ? <Sun size={17} /> : <Moon size={17} />}
           </button>
           {user && <NotificationBell initialUnread={unread} />}
           {user ? (
             <>
-              <Link href="/compose" className="btn btn-primary btn-sm ml-1">
+              <Link href="/compose" className="btn btn-primary btn-sm hidden lg:inline-flex">
                 <PenSquare size={14} /> 发帖
               </Link>
-              <Link
+              <UserMenu user={user} onLogout={handleLogout} />
-                href={`/u/${user.id}`}
-                className="flex items-center gap-2 rounded-full pl-1 pr-3 py-1 transition-colors"
-                style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
-              >
-                <Avatar name={user.nickname || user.username} size={28} />
-                <span className="text-[13px] font-semibold max-w-[90px] truncate" style={{ color: "var(--ink)" }}>
-                  {user.nickname}
-                </span>
-              </Link>
-              <button onClick={() => router.push("/settings")} className={iconBtn} style={iconBtnStyle} aria-label="设置">
-                <Settings size={16} />
-              </button>
-              <button onClick={handleLogout} className={iconBtn} style={iconBtnStyle} aria-label="退出登录">
-                <LogOut size={16} />
-              </button>
             </>
           ) : (
-            <>
+            <div className="hidden lg:flex items-center gap-2">
               <Link href="/login" className="btn btn-line btn-sm">
                 <LogIn size={14} /> 登录
               </Link>
               <Link href="/register" className="btn btn-primary btn-sm">
                 <UserPlus size={14} /> 注册
               </Link>
-            </>
-          )}
             </div>
-
+          )}
-        {/* 移动端按钮 */}
-        <div className="flex items-center gap-2 lg:hidden">
-          {user && <NotificationBell initialUnread={unread} />}
           <button
             onClick={() => setMenuOpen(!menuOpen)}
-            className="w-10 h-10 flex items-center justify-center rounded-full"
+            className="w-10 h-10 flex items-center justify-center rounded-full lg:hidden"
             style={{ border: "1px solid var(--line)", background: "var(--panel)", color: "var(--ink)" }}
             aria-label="菜单"
             aria-expanded={menuOpen}
@@ -274,7 +260,6 @@ export default function Header({
           </form>
           <div className="flex flex-col">
             <MobileLink href="/" active={pathname === "/"}>首页</MobileLink>
-            <MobileLink href="/board/1" active={pathname.startsWith("/board")}>板块</MobileLink>
             {user && <MobileLink href="/compose">发帖</MobileLink>}
             {user && (
               <MobileLink href="/notifications">
@@ -351,3 +336,109 @@ function MobileLink({
     </Link>
   );
 }
+
+/**
+ * 桌面端用户菜单：头像 + 昵称触发器，下拉承载个人主页/设置/登出，
+ * 把零散的图标按钮收拢为一个语义明确的控件
+ */
+function UserMenu({ user, onLogout }: { user: User; onLogout: () => void }) {
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const itemCls =
+    "w-full flex items-center gap-2.5 px-4 py-2.5 text-[13.5px] font-semibold transition-colors hover:bg-[var(--panel-2)]";
+
+  return (
+    <div className="relative hidden lg:block" ref={menuRef}>
+      <button
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="flex items-center gap-2 rounded-full pl-1 pr-2.5 py-1 transition-colors"
+        style={{
+          border: "1px solid " + (open ? "var(--accent)" : "var(--line)"),
+          background: open ? "var(--accent-soft)" : "var(--panel)",
+        }}
+      >
+        <Avatar name={user.nickname || user.username} size={28} />
+        <span
+          className="text-[13px] font-semibold max-w-[90px] truncate"
+          style={{ color: open ? "var(--accent)" : "var(--ink)" }}
+        >
+          {user.nickname}
+        </span>
+        <ChevronDown
+          size={14}
+          className="transition-transform duration-200"
+          style={{
+            color: "var(--ink-3)",
+            transform: open ? "rotate(180deg)" : "none",
+          }}
+        />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 mt-2.5 w-60 overflow-hidden z-50 j13-toast-in"
+          style={{
+            background: "var(--panel)",
+            border: "1px solid var(--line)",
+            borderRadius: "var(--r)",
+            boxShadow: "var(--shadow-lg)",
+          }}
+        >
+          <div
+            className="flex items-center gap-3 px-4 py-3.5"
+            style={{ borderBottom: "1px solid var(--line)" }}
+          >
+            <Avatar name={user.nickname || user.username} size={38} />
+            <div className="min-w-0">
+              <p className="text-[14px] font-bold truncate" style={{ color: "var(--ink)" }}>
+                {user.nickname}
+              </p>
+              <p className="meta text-xs truncate">@ {user.username}</p>
+            </div>
+          </div>
+          <div className="p-1.5">
+            <Link href={`/u/${user.id}`} onClick={() => setOpen(false)} className={itemCls} role="menuitem">
+              <UserIcon size={15} style={{ color: "var(--ink-3)" }} /> 个人主页
+            </Link>
+            <Link href="/settings" onClick={() => setOpen(false)} className={itemCls} role="menuitem">
+              <Settings size={15} style={{ color: "var(--ink-3)" }} /> 账号设置
+            </Link>
+          </div>
+          <div className="p-1.5" style={{ borderTop: "1px solid var(--line)" }}>
+            <button
+              onClick={() => {
+                setOpen(false);
+                onLogout();
+              }}
+              className={itemCls}
+              role="menuitem"
+              style={{ color: "var(--danger)" }}
+            >
+              <LogOut size={15} /> 退出登录
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/LikeButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import { IconHeart } from "./Icons";
 import { apiToggleLike } from "@/lib/api";
@@ -25,6 +25,13 @@ export default function LikeButton({
   const [count, setCount] = useState(initialCount);
   const [loading, setLoading] = useState(false);
 
+  // router.refresh()（登录/登出后）服务端会重新下发 liked 态，同步到本地，
+  // 避免客户端状态停留在刷新前的用户视角
+  useEffect(() => {
+    setLiked(initialLiked);
+    setCount(initialCount);
+  }, [initialLiked, initialCount]);
+
   const handleClick = async () => {
     if (loading) return;
     setLoading(true);

frontend/components/PinnedPosts.tsx

@@ -44,8 +44,11 @@ export default function PinnedPosts({
           <Link
             key={p.id}
             href={`/post/${p.id}`}
-            className="group flex items-center gap-3 sm:gap-3.5 px-4 sm:px-5 py-3.5 transition-colors hover:bg-[var(--panel-2)]"
+            className="group relative flex items-center gap-3 sm:gap-3.5 px-4 sm:px-5 py-3.5 transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
-            style={i > 0 ? { borderTop: "1px solid var(--line)" } : undefined}
+            style={{
+              ...(i > 0 ? { borderTop: "1px solid var(--line)" } : {}),
+              animationDelay: `${i * 35}ms`,
+            }}
           >
             <Avatar name={p.user.nickname || p.user.username} size={36} />
             <div className="flex-1 min-w-0">

frontend/components/PostRow.tsx

@@ -18,18 +18,35 @@ function formatTime(dateStr: string) {
 export default function PostRow({
   post,
   boardHref,
+  index = 0,
+  compact = false,
+  showViews = true,
+  showLike = true,
 }: {
   post: PostListItem;
   index?: number;
   boardHref?: boolean;
+  compact?: boolean;
+  showViews?: boolean;
+  showLike?: boolean;
 }) {
   return (
     <div
-      className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-4 border-t transition-colors hover:bg-[var(--panel-2)]"
+      className="group relative flex items-center gap-3 sm:gap-4 px-4 sm:px-5 border-t transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
-      style={{ borderColor: "var(--line)" }}
+      style={{
+        borderColor: "var(--line)",
+        paddingTop: compact ? 13 : 16,
+        paddingBottom: compact ? 13 : 16,
+        animationDelay: `${Math.min(index, 9) * 35}ms`,
+      }}
     >
-      <Link href={`/u/${post.user.id}`} className="shrink-0" aria-label={post.user.nickname}>
+      <Link
-        <Avatar name={post.user.nickname || post.user.username} size={42} />
+        href={`/u/${post.user.id}`}
+        className="shrink-0 above-link"
+        aria-label={post.user.nickname}
+        tabIndex={-1}
+      >
+        <Avatar name={post.user.nickname || post.user.username} size={compact ? 38 : 42} />
       </Link>
 
       <div className="flex-1 min-w-0">
@@ -39,7 +56,7 @@ export default function PostRow({
             {post.recommended && <span className="badge-rec">推荐</span>}
           </div>
         )}
-        <Link href={`/post/${post.id}`}>
+        <Link href={`/post/${post.id}`} className="stretch-link" aria-label={post.title}>
           <h3
             className="font-semibold text-[15px] sm:text-[16px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
             style={{ color: "var(--ink)" }}
@@ -47,7 +64,7 @@ export default function PostRow({
             {post.title}
           </h3>
         </Link>
-        <div className="meta flex items-center gap-2.5 mt-1.5 flex-wrap">
+        <div className="meta relative z-[2] flex items-center gap-2.5 mt-1.5 flex-wrap">
           <Link
             href={`/u/${post.user.id}`}
             className="hover:text-[var(--accent)] transition-colors"
@@ -70,21 +87,28 @@ export default function PostRow({
         </div>
       </div>
 
-      <div className="flex items-center gap-2.5 sm:gap-3.5 shrink-0">
+      <div className="above-link flex items-center gap-2.5 sm:gap-3.5 shrink-0">
-        <span className="hidden sm:inline-flex items-center gap-1.5 meta" aria-label={`${post.comment_count} 条评论`}>
+        <span
+          className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta`}
+          aria-label={`${post.comment_count} 条评论`}
+        >
           <IconComment size={15} />
           {post.comment_count}
         </span>
+        {showViews && (
           <span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
             <IconEye size={15} />
             {post.view_count}
           </span>
+        )}
+        {showLike && (
           <LikeButton
             postId={String(post.id)}
             liked={post.liked}
             likeCount={post.like_count}
             variant="compact"
           />
+        )}
       </div>
     </div>
   );

frontend/components/home/CommunityPanels.tsx

@@ -0,0 +1,142 @@
+import Link from "next/link";
+import { BarChart3, Flame, Users, MessagesSquare, MessageCircle, Heart, Sparkles } from "lucide-react";
+import type { OverviewStats, PostListItem, ActiveUser } from "@/lib/api";
+import Avatar from "@/components/Avatar";
+
+/* ---------- 统计 2×2 ---------- */
+
+function StatsGrid({ stats }: { stats: OverviewStats }) {
+  const items = [
+    { icon: MessagesSquare, label: "讨论", value: stats.posts },
+    { icon: Users, label: "成员", value: stats.users },
+    { icon: MessageCircle, label: "评论", value: stats.comments },
+    { icon: Sparkles, label: "今日", value: stats.today_posts },
+  ];
+  return (
+    <section className="j13-module" aria-label="社区数据">
+      <p className="j13-module-title mb-3">
+        <BarChart3 size={15} style={{ color: "var(--accent)" }} /> 社区数据
+      </p>
+      <div className="grid grid-cols-2 gap-2">
+        {items.map(({ icon: Icon, label, value }) => (
+          <div key={label} className="j13-stat">
+            <span className="j13-stat-num">{value}</span>
+            <span className="j13-stat-lab">
+              <Icon size={12} /> {label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+/* ---------- 热门榜 ---------- */
+
+function HotRanking({ posts }: { posts: PostListItem[] }) {
+  return (
+    <section className="j13-module" aria-label="热门讨论">
+      <p className="j13-module-title mb-1.5">
+        <Flame size={15} style={{ color: "var(--clay)" }} /> 热门讨论
+      </p>
+      {posts.length === 0 ? (
+        <p className="meta px-1.5 py-3">还没有热门讨论</p>
+      ) : (
+        <ol className="j13-ranklist">
+          {posts.map((p, i) => (
+            <li key={p.id}>
+              <Link href={`/post/${p.id}`} className="j13-rank" title={p.title}>
+                <span className="j13-rank-no">{i + 1}</span>
+                <span className="min-w-0 flex-1">
+                  <span
+                    className="block text-[13.5px] font-semibold leading-snug line-clamp-2"
+                    style={{ color: "var(--ink)" }}
+                  >
+                    {p.title}
+                  </span>
+                  <span className="mt-1 flex items-center gap-2.5 meta text-[11.5px]">
+                    <span className="inline-flex items-center gap-1">
+                      <MessageCircle size={11.5} /> {p.comment_count}
+                    </span>
+                    <span className="inline-flex items-center gap-1">
+                      <Heart size={11.5} /> {p.like_count}
+                    </span>
+                    <span className="truncate">{p.board.name}</span>
+                  </span>
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}
+
+/* ---------- 活跃用户 ---------- */
+
+function ActiveUsers({ users }: { users: ActiveUser[] }) {
+  return (
+    <section className="j13-module" aria-labelledby="active-users-title">
+      <p className="j13-module-title mb-3" id="active-users-title">
+        <Users size={15} style={{ color: "var(--accent)" }} /> 活跃成员
+      </p>
+      {users.length === 0 ? (
+        <p className="meta px-1.5 py-2">近 14 天还没有人互动</p>
+      ) : (
+        <ul className="space-y-1">
+          {users.map((u) => (
+            <li key={u.id}>
+              <Link href={`/u/${u.id}`} className="j13-raillink">
+                <Avatar name={u.nickname || u.username} src={u.avatar} size={28} />
+                <span className="flex-1 truncate text-[13.5px]">{u.nickname || u.username}</span>
+                <span className="meta text-[11.5px]">{u.activity_count} 次</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+      <p className="meta mt-3 px-1 text-[11px]">按近 14 天发帖与评论计数</p>
+    </section>
+  );
+}
+
+/* ---------- 桌面 / 移动两种装配 ---------- */
+
+export function CommunityPanels({
+  stats,
+  hot,
+  activeUsers,
+}: {
+  stats: OverviewStats;
+  hot: PostListItem[];
+  activeUsers: ActiveUser[];
+}) {
+  return (
+    <aside className="hidden lg:block w-[280px] xl:w-[300px] shrink-0" aria-label="社区面板">
+      <div className="sticky top-24 space-y-4">
+        <StatsGrid stats={stats} />
+        <HotRanking posts={hot} />
+        <ActiveUsers users={activeUsers} />
+      </div>
+    </aside>
+  );
+}
+
+export function CommunityPanelsMobile({
+  stats,
+  hot,
+  activeUsers,
+}: {
+  stats: OverviewStats;
+  hot: PostListItem[];
+  activeUsers: ActiveUser[];
+}) {
+  return (
+    <div className="lg:hidden space-y-4" aria-label="社区面板">
+      <StatsGrid stats={stats} />
+      <HotRanking posts={hot} />
+      <ActiveUsers users={activeUsers} />
+    </div>
+  );
+}

frontend/components/home/FeedTabs.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useRef } from "react";
+
+export type FeedSort = "latest" | "hot" | "recommended";
+
+const TAB_KEYS: FeedSort[] = ["latest", "hot", "recommended"];
+const TAB_LABELS: Record<FeedSort, string> = {
+  latest: "最新",
+  hot: "热门",
+  recommended: "精华",
+};
+
+// 在指定板块内切换排序时保留 ?board=
+function tabHref(key: FeedSort, boardId: number) {
+  const params = new URLSearchParams();
+  if (boardId > 0) params.set("board", String(boardId));
+  if (key !== "latest") params.set("sort", key);
+  const qs = params.toString();
+  return qs ? `/?${qs}` : "/";
+}
+
+// 中栏排序分段控件：URL query 驱动、SSR 直出，键盘 ←/→ 可切换
+export default function FeedTabs({ current, boardId = 0 }: { current: FeedSort; boardId?: number }) {
+  const router = useRouter();
+  const tabRefs = useRef<(HTMLAnchorElement | null)[]>([]);
+
+  const handleKeyDown = (e: React.KeyboardEvent, i: number) => {
+    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+    e.preventDefault();
+    const next = (i + (e.key === "ArrowRight" ? 1 : TAB_KEYS.length - 1)) % TAB_KEYS.length;
+    tabRefs.current[next]?.focus();
+    router.push(tabHref(TAB_KEYS[next], boardId));
+  };
+
+  return (
+    <div className="j13-seg" role="tablist" aria-label="帖子排序">
+      {TAB_KEYS.map((key, i) => (
+        <Link
+          key={key}
+          ref={(el) => {
+            tabRefs.current[i] = el;
+          }}
+          href={tabHref(key, boardId)}
+          role="tab"
+          aria-selected={current === key}
+          tabIndex={current === key ? 0 : -1}
+          onKeyDown={(e) => handleKeyDown(e, i)}
+        >
+          {TAB_LABELS[key]}
+        </Link>
+      ))}
+    </div>
+  );
+}

frontend/components/home/WorkspaceNav.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { PenSquare, Home, Bell, Settings, LogIn, UserPlus } from "lucide-react";
+import type { BoardWithCount, User } from "@/lib/api";
+
+// 首页壳内板块切换：仅替换中栏帖子流，不离开工作台
+function boardHref(id: number) {
+  return `/?board=${id}`;
+}
+
+// 桌面左栏：发帖 CTA + 板块导航 + 登录态快捷入口
+export function WorkspaceNav({ boards, user }: { boards: BoardWithCount[]; user: User | null }) {
+  const params = useSearchParams();
+  const activeBoard = Number(params.get("board")) || 0;
+  const composeHref = user ? "/compose" : "/login?redirect=/compose";
+
+  return (
+    <nav className="hidden lg:block w-56 xl:w-60 shrink-0" aria-label="工作台导航">
+      <div className="sticky top-24 space-y-5">
+        <Link href={composeHref} className="btn btn-primary w-full justify-center">
+          <PenSquare size={16} /> 发起讨论
+        </Link>
+
+        <div>
+          <p className="px-2.5 mb-1.5 text-[11.5px] font-bold tracking-[0.08em] uppercase" style={{ color: "var(--ink-3)" }}>
+            板块
+          </p>
+          <div className="space-y-0.5">
+            <Link
+              href="/"
+              className="j13-raillink"
+              aria-current={activeBoard === 0 ? "page" : undefined}
+            >
+              <Home size={16} className="shrink-0" />
+              <span className="flex-1 truncate">全部讨论</span>
+            </Link>
+            {boards.map((b, i) => (
+              <Link
+                key={b.id}
+                href={boardHref(b.id)}
+                className="j13-raillink"
+                aria-current={activeBoard === b.id ? "page" : undefined}
+              >
+                <span
+                  className={`av-${i % 8} w-7 h-7 rounded-lg flex items-center justify-center text-[12px] font-bold shrink-0`}
+                >
+                  {b.name.slice(0, 1)}
+                </span>
+                <span className="flex-1 truncate">{b.name}</span>
+                <span className="meta text-[11.5px]">{b.post_count}</span>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div style={{ borderTop: "1px solid var(--line)" }} className="pt-3 space-y-0.5">
+          {user ? (
+            <>
+              <Link href="/notifications" className="j13-raillink">
+                <Bell size={16} className="shrink-0" /> 通知中心
+              </Link>
+              <Link href="/settings" className="j13-raillink">
+                <Settings size={16} className="shrink-0" /> 账号设置
+              </Link>
+            </>
+          ) : (
+            <>
+              <Link href="/login" className="j13-raillink">
+                <LogIn size={16} className="shrink-0" /> 登录
+              </Link>
+              <Link href="/register" className="j13-raillink">
+                <UserPlus size={16} className="shrink-0" /> 注册账号
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+// 移动端：发帖入口 + 横向滑动板块条
+export function WorkspaceNavMobile({
+  boards,
+  user,
+}: {
+  boards: BoardWithCount[];
+  user: User | null;
+}) {
+  const params = useSearchParams();
+  const activeBoard = Number(params.get("board")) || 0;
+  const composeHref = user ? "/compose" : "/login?redirect=/compose";
+
+  return (
+    <div className="lg:hidden -mx-4 sm:-mx-6 px-4 sm:px-6">
+      <div className="j13-chips">
+        <Link href={composeHref} className="btn btn-primary btn-sm shrink-0">
+          <PenSquare size={14} /> 发帖
+        </Link>
+        <Link
+          href="/"
+          className="j13-chip"
+          aria-current={activeBoard === 0 ? "page" : undefined}
+        >
+          <Home size={13} /> 全部
+        </Link>
+        {boards.map((b) => (
+          <Link
+            key={b.id}
+            href={boardHref(b.id)}
+            className="j13-chip"
+            aria-current={activeBoard === b.id ? "page" : undefined}
+          >
+            {b.name}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/lib/api.ts

@@ -39,9 +39,37 @@ export interface Board {
   name: string;
   description: string;
   icon: string;
+  color_index?: number;
   sort_order: number;
 }
 
+// 首页聚合接口
+export interface OverviewStats {
+  posts: number;
+  users: number;
+  comments: number;
+  today_posts: number;
+}
+
+export interface ActiveUser {
+  id: number;
+  username: string;
+  nickname: string;
+  avatar: string;
+  activity_count: number;
+}
+
+export interface BoardWithCount extends Board {
+  post_count: number;
+}
+
+export interface OverviewResponse {
+  stats: OverviewStats;
+  hot: PostListItem[];
+  active_users: ActiveUser[];
+  boards: BoardWithCount[];
+}
+
 export interface PostListItem {
   id: number;
   board_id: number;
@@ -222,16 +250,25 @@ export async function fetchPosts(
   boardId?: number,
   sort = "latest",
   keyword = "",
+  recommended = false,
   cookieHeader?: string
 ): Promise<PostsResponse> {
   const params = new URLSearchParams({ page: String(page), size: String(size), sort });
   if (boardId) params.set("board_id", String(boardId));
   if (keyword) params.set("keyword", keyword);
+  if (recommended) params.set("recommended", "true");
   const res = await fetch(`${API_BASE}/api/posts?${params}`, ssrInit(cookieHeaders(cookieHeader)));
   if (!res.ok) throw new Error("获取帖子失败");
   return res.json();
 }
 
+// SSR 首页聚合数据；失败时抛错，由首页调用方 try/catch 降级为无侧栏模块
+export async function fetchOverview(cookieHeader?: string): Promise<OverviewResponse> {
+  const res = await fetch(`${API_BASE}/api/overview`, ssrInit(cookieHeaders(cookieHeader)));
+  if (!res.ok) throw new Error("获取社区概览失败");
+  return res.json();
+}
+
 export async function fetchBoards(): Promise<{ boards: Board[] }> {
   const res = await fetch(`${API_BASE}/api/boards`, ssrInit());
   if (!res.ok) throw new Error("获取板块失败");

frontend/lib/serverData.ts

@@ -0,0 +1,6 @@
+import { cache } from "react";
+import { fetchMe } from "./api";
+
+// 同一 SSR 请求内去重：layout 与页面可能同时需要当前用户，
+// 相同 Cookie 头参数下只产生一次 /api/me 调用。
+export const getMeCached = cache((cookieHeader?: string) => fetchMe(cookieHeader));

frontend/next-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
-import "./.next/dev/types/root-params.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.