v0.11.1: 权限体系重构 + AI管线优化 + 内容整理

2026-05-22 18:36:41 +08:00
parent 7955d11c52
commit b33fe1e8e1
397 changed files with 30940 additions and 161 deletions
@@ -0,0 +1,117 @@
+# 组件与样式模块
+
+## 组件
+
+### 布局组件
+
+#### 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