2026-05-25: 等级体系升级(20级)+论坛二级分类+会员空间

.trae/specs/modules/04-components-and-styles.md

@@ -6,10 +6,11 @@
 
 #### Header (`src/components/layout/Header.tsx`)
 - 前台顶部导航栏
-- Logo + 导航链接(工具库/技能库/分类浏览) + 搜索框 + 登录/用户按钮
+- Logo + 导航链接(工具库/技能库/评测/日报) + 搜索框 + 登录/用户按钮
 - 移动端汉堡菜单
 - 滚动时背景模糊效果（bg-white/80 backdrop-blur-2xl）
 - 搜索框: bg-muted/50 focus:bg-white focus:ring-2 focus:ring-primary/10
+- 容器宽度: max-w-[1440px]
 
 #### Footer (`src/components/layout/Footer.tsx`)
 - 前台底部页脚
@@ -23,11 +24,19 @@
 
 ### 公共组件
 
+#### HeroBanner (`src/components/common/HeroBanner.tsx`)
+- 首页横幅组件
+- 渐变背景 + 渐变文字标题 + CTA按钮
+
 #### LoginModal (`src/components/common/LoginModal.tsx`)
 - 登录/注册弹窗，支持模式切换
 - 邮箱+密码认证，注册可选填昵称
 - bg-white/95 backdrop-blur-xl
 
+#### LoginForm (`src/components/common/LoginForm.tsx`)
+- 登录表单组件
+- 邮箱+密码输入 + 提交按钮 + 错误提示
+
 #### SkillReviewCard (五维评测雷达图)
 - 文件: `src/components/common/SkillReviewCard.tsx`
 - 用途: 技能详情页展示五维评测雷达图和维度详情卡片
@@ -38,10 +47,15 @@
 - 评分色标: ≥4绿色(emerald) / ≥3黄色(amber) / <3红色(red)
 - 设计规范: 遵循浅色主题设计系统，紫色(violet)主色调雷达图
 
-### ReviewSection (`src/components/common/ReviewSection.tsx`)
+#### ReviewSection (`src/components/common/ReviewSection.tsx`)
 - 用户评论/评价组件，支持评分和文字评论
 - 支持tool和skill两种类型
 - bg-white/80卡片，bg-white/60评论项
+- 支持嵌套回复、点赞、排序
+
+#### CommentForm (`src/components/common/CommentForm.tsx`)
+- 评论输入表单，支持评分选择
+- 字数限制、评分验证
 
 #### FavoriteButton (`src/components/common/FavoriteButton.tsx`)
 - 收藏按钮，乐观更新
@@ -56,6 +70,7 @@
 #### Button (`src/components/ui/button.tsx`)
 - 6种变体: default, outline, secondary, ghost, destructive, link
 - 4种尺寸: default, sm, lg, icon
+- 基于 class-variance-authority
 
 #### Card (`src/components/ui/card.tsx`)
 - Card/CardHeader/CardTitle/CardDescription/CardContent/CardFooter
@@ -90,6 +105,13 @@
 - 动画: fade-in, slide-up, float, glow-pulse
 - 自定义字体: Geist Sans, Geist Mono
 
+### Next.js配置 (`next.config.mjs`)
+- 图片域名: remotePatterns 允许所有https域名
+- 图片格式: avif, webp
+- 缓存: 静态资源365天不可变，API安全头
+- 安全头: X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy
+- Logo缓存: 开发环境no-cache，生产环境1天immutable
+
 ### 设计规范
 - 圆角: 统一使用 rounded-xl (12px) 或 rounded-2xl (16px)
 - 边框: border-border/40 (40%透明度)