匿名论坛项目亮点

/* Tailwind 断点 */
sm: 640px   /* 小屏手机横屏 */
md: 768px   /* 平板 */
lg: 1024px  /* 桌面 */
xl: 1280px  /* 大屏 */

// 侧边栏：桌面显示，移动端隐藏
<ForumSidebar className="hidden md:block" />

// 底部导航：移动端显示，桌面隐藏
<MobileBottomNav className="md:hidden" />

// 主内容区：移动端留出底部导航空间
<main className="mb-16 md:mb-0">

// PostCardSkeleton.tsx - 帖子卡片骨架屏
<div className="animate-pulse">
  <div className="h-4 bg-gray-200 rounded w-3/4" />
  <div className="h-3 bg-gray-200 rounded w-1/2 mt-2" />
</div>

// useInfiniteScroll.ts - 自定义 Hook
const { isLoading, hasMore, loadMore } = useInfiniteScroll({
  fetchData: (page) => getPosts(category, sort, page),
  threshold: 200  // 距底部 200px 触发加载
});

// useKeyboardShortcuts.ts
const shortcuts = {
  'n': '新建帖子',
  '/': '搜索',
  'j': '下一篇',
  'k': '上一篇',
  'l': '点赞',
  'f': '收藏',
  '?': '显示快捷键帮助'
};

// ThemeToggle.tsx + next-themes
<ThemeProvider attribute="class" defaultTheme="system">
  <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
    {theme === 'dark' ? <Sun /> : <Moon />}
  </button>
</ThemeProvider>

帖子
├── 1楼 回复
│   ├── 回复 @1楼: 楼中楼回复1
│   └── 回复 @1楼: 楼中楼回复2
├── 2楼 回复
└── 3楼 回复
    └── 回复 @3楼: 楼中楼回复

// Sharp 图片压缩
sharp(buffer)
  .resize(1920, 1080, { fit: 'inside', withoutEnlargement: true })
  .jpeg({ quality: 80 })
  .toBuffer();

通知类型:
├── new_reply: 帖子/回复被回复
├── like: 收到点赞
└── system: 系统通知

触发时机:
├── 创建回复 → 通知帖主/被回复者
└── 点赞 → 通知作者