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

组件与样式模块

组件

布局组件

Header (src/components/layout/Header.tsx)

• 前台顶部导航栏
• Logo + 导航链接(工具库/技能库/分类浏览) + 搜索框 + 登录/用户按钮
• 移动端汉堡菜单
• 滚动时背景模糊效果（bg-white/80 backdrop-blur-2xl）
• 搜索框: bg-muted/50 focus:bg-white focus:ring-2 focus:ring-primary/10

Footer (src/components/layout/Footer.tsx)

• 前台底部页脚
• Logo + 简介 + 发现/分类/关于链接 + 社交图标(GitHub/Twitter)

Provider组件

AuthProvider (src/components/providers/auth-provider.tsx)

• NextAuth SessionProvider 包裹组件
• 用于在客户端组件中访问session

公共组件

LoginModal (src/components/common/LoginModal.tsx)

• 登录/注册弹窗，支持模式切换
• 邮箱+密码认证，注册可选填昵称
• bg-white/95 backdrop-blur-xl

SkillReviewCard (五维评测雷达图)

• 文件: src/components/common/SkillReviewCard.tsx
• 用途: 技能详情页展示五维评测雷达图和维度详情卡片
• 依赖: chart.js, react-chartjs-2 (dynamic import, ssr: false)
• Props: { slug: string }
• 数据源: /api/skills/${slug}/review
• 五维度: 场景与能力(capability) / 开发体验(devExp) / 成本与许可(costLicense) / 社区健康(community) / 性能稳定(performance)
• 评分色标: ≥4绿色(emerald) / ≥3黄色(amber) / <3红色(red)
• 设计规范: 遵循浅色主题设计系统，紫色(violet)主色调雷达图

ReviewSection (src/components/common/ReviewSection.tsx)

• 用户评论/评价组件，支持评分和文字评论
• 支持tool和skill两种类型
• bg-white/80卡片，bg-white/60评论项

FavoriteButton (src/components/common/FavoriteButton.tsx)

• 收藏按钮，乐观更新
• text-gray-500 hover:text-red-500

CategorySidebar (src/components/common/CategorySidebar.tsx)

• 分类侧边栏，支持搜索和分类选择
• bg-muted/50搜索框

UI组件 (shadcn/ui)

Button (src/components/ui/button.tsx)

• 6种变体: default, outline, secondary, ghost, destructive, link
• 4种尺寸: default, sm, lg, icon

Card (src/components/ui/card.tsx)

• Card/CardHeader/CardTitle/CardDescription/CardContent/CardFooter

Dialog (src/components/ui/dialog.tsx)

• 基于 @radix-ui/react-dialog
• Dialog/DialogTrigger/DialogContent/DialogHeader/DialogTitle/DialogDescription/DialogFooter/DialogClose
• 遮罩层: bg-black/80

---

样式系统

全局样式 (src/app/globals.css)

• 浅色主题CSS变量（HSL色系）
• shadcn/ui 主题变量
• 自定义工具类:
  • .glow-sm / .glow-md / .glow-lg - 发光效果
  • .gradient-text - 渐变文字（蓝→紫→粉）
  • .gradient-border - 渐变边框
  • .glass / .glass-sm - 毛玻璃效果（bg-white/80 + backdrop-blur）
  • .card-shine - 卡片光泽动画
  • .dot-grid - 点阵网格背景
  • .animate-fade-in - 淡入动画
  • .animate-slide-up - 上滑动画
  • .animate-float - 浮动动画
  • .animate-pulse-glow - 脉冲发光

Tailwind配置 (tailwind.config.ts)

• 浅色模式: class策略
• 主题色系: HSL CSS变量（background: 210 20% 98%, foreground: 222 47% 11%, primary: 221 83% 53%等）
• 动画: fade-in, slide-up, float, glow-pulse
• 自定义字体: Geist Sans, Geist Mono

设计规范

• 圆角: 统一使用 rounded-xl (12px) 或 rounded-2xl (16px)
• 边框: border-border/40 (40%透明度)
• 背景: bg-white/80 (毛玻璃) / bg-white/60 (卡片) / bg-muted/50 (输入框)
• 阴影: shadow-sm (卡片) / shadow-md (悬浮)
• 间距: 统一使用 Tailwind 间距系统
• 动画: transition-all duration-200

颜色规范（浅色主题）

• 文字颜色: 使用 -600/-700 系列（如 text-blue-700, text-emerald-600）
• 背景颜色: 使用 -50 系列（如 bg-blue-50, bg-emerald-50）
• 边框颜色: 使用 -200/60 系列（如 border-blue-200/60, border-emerald-200/60）
• 严禁使用暗色主题的 -400 文字、-500/10 背景、-500/20 边框
• 输入框: bg-muted/50 focus:bg-white focus:ring-2 focus:ring-primary/10

定价模型颜色

• free: bg-emerald-50 text-emerald-700 border-emerald-200/60
• freemium: bg-blue-50 text-blue-700 border-blue-200/60
• paid: bg-amber-50 text-amber-700 border-amber-200/60
• subscription: bg-purple-50 text-purple-700 border-purple-200/60

来源类型颜色

• github: bg-slate-50 text-slate-700
• gitlab: bg-orange-50 text-orange-700
• huggingface: bg-yellow-50 text-yellow-700