| 1 | # Home 首页组件开发规范 |
| 2 | |
| 3 | ## 布局规范 |
| 4 | |
| 5 | ### 容器宽度 |
| 6 | |
| 7 | 所有首页模块必须使用统一的最大宽度，确保视觉对齐： |
| 8 | |
| 9 | ```tsx |
| 10 | <section className="py-8 px-4 md:px-6 lg:px-8"> |
| 11 | <div className="w-full max-w-5xl mx-auto">{/* 组件内容 */}</div> |
| 12 | </section> |
| 13 | ``` |
| 14 | |
| 15 | **关键规则：** |
| 16 | |
| 17 | - 最大宽度：`max-w-5xl`（1024px） |
| 18 | - 水平居中：`mx-auto` |
| 19 | - 响应式内边距：`px-4 md:px-6 lg:px-8` |
| 20 | |
| 21 | ### 垂直间距 |
| 22 | |
| 23 | - section 垂直内边距：`py-8` 或 `py-12` |
| 24 | - 标题与内容间距：`mb-6` 或 `mb-8` |
| 25 | |
| 26 | ## 现有组件 |
| 27 | |
| 28 | | 组件 | 路径 | 说明 | |
| 29 | | ------------- | ----------------- | ------------------------------- | |
| 30 | | HomeChat | `./HomeChat` | 首页聊天输入框 | |
| 31 | | AgentFeatures | `./AgentFeatures` | AI Agent 功能亮点展示（跑马灯） | |
| 32 | | PromptGallery | `./PromptGallery` | 提示词灵感库 | |
| 33 | | TaskPreview | `./TaskPreview` | 任务预览展示 | |
| 34 | |
| 35 | ## 常见错误 |
| 36 | |
| 37 | ### ❌ 错误示例 |
| 38 | |
| 39 | ```tsx |
| 40 | // 宽度不统一 |
| 41 | <div className="max-w-6xl mx-auto"> // 错误！应该用 max-w-5xl |
| 42 | <div className="max-w-4xl mx-auto"> // 错误！应该用 max-w-5xl |
| 43 | ``` |
| 44 | |
| 45 | ### ✅ 正确示例 |
| 46 | |
| 47 | ```tsx |
| 48 | <div className="w-full max-w-5xl mx-auto"> |
| 49 | ``` |
| 50 | |
| 51 | ## 主题色规范 |
| 52 | |
| 53 | 参考项目根目录 `.claude/rules/default.md`： |
| 54 | |
| 55 | - 使用 shadcn/ui 语义化颜色变量（`text-foreground`、`bg-muted` 等） |
| 56 | - 不使用硬编码颜色（如 `text-gray-900`、`bg-white`） |
| 57 | - 不使用 `var.css` 中的旧变量 |
| 58 |