Boss Command Center - 开发任务拆解¶
阶段划分¶
Phase 1: 项目脚手架（预估 2h）
Phase 2: 基础组件（预估 3h）
Phase 3: 页面区块开发（预估 6h）
Phase 4: 集成优化（预估 2h）
Phase 5: 构建部署（预估 2h）
─────────────────────────────
总计: 约 15 工时
Phase 1: 项目脚手架（P0）¶
1.1 初始化 Next.js 项目¶
- 执行
pnpm create next-app@latest选择： - TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
- App Router: Yes
- Import alias:
@/* - 验证项目可运行
pnpm dev - 输出: 可运行的基础项目骨架
1.2 配置 Tailwind 设计令牌¶
- 创建
tailwind.config.ts扩展： - 自定义颜色（deep-black, card-bg, primary, success 等）
- 自定义动画（float, pulse-glow）
- 字体配置（Inter）
- 更新
app/globals.css： - 基础样式 reset
- 自定义工具类（glow-blue, glow-success）
- 输出: 与设计方案一致的样式系统
1.3 项目结构整理¶
- 创建目录结构：
- 配置路径别名
@/components,@/lib - 输出: 清晰的项目目录
Phase 2: 基础组件（P0）¶
2.1 工具函数¶
-
lib/utils.ts: cn() 函数（clsx + tailwind-merge） - 输出: 类型安全的工具函数
2.2 UI 组件 - Button¶
接口定义:
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
children: React.ReactNode;
className?: string;
onClick?: () => void;
}
2.3 UI 组件 - Card¶
接口定义:
- [ ] 基础卡片样式（背景、边框、圆角） - [ ] 可选 hover 效果（上移 + 边框高亮） - [ ] 输出: 可复用的 Card 组件2.4 UI 组件 - Badge¶
接口定义:
interface BadgeProps {
children: React.ReactNode;
variant?: 'primary' | 'success' | 'warning' | 'error' | 'info';
}
Phase 3: 页面区块开发（P0）¶
3.1 Navbar 导航栏¶
设计要点: - 固定顶部，高度 64px - Logo + 导航链接 + CTA 按钮 - 滚动时添加毛玻璃效果
任务列表: - [ ] 基础布局（flex 三栏） - [ ] Logo 组件（图标 + 文字） - [ ] 导航链接（平滑滚动） - [ ] CTA 按钮 - [ ] 滚动监听 + 毛玻璃效果 - [ ] 移动端响应式（可选：汉堡菜单） - [ ] 输出: Navbar.tsx
3.2 Hero 区域¶
设计要点: - 垂直居中，min-height: 80vh - 标签 + 主标题 + 副标题 + 双 CTA + 统计数据 - 背景光晕动画
任务列表: - [ ] 容器布局（居中、间距） - [ ] 标签组件（状态指示器） - [ ] 主标题（渐变文字效果） - [ ] 副标题 - [ ] 双 CTA 按钮组 - [ ] 统计数据展示（3 列网格） - [ ] 背景光晕动画元素 - [ ] 入场动画（淡入上移） - [ ] 输出: Hero.tsx
3.3 Features 核心功能¶
设计要点: - 4 卡片网格布局（桌面） - 每个卡片：图标 + 标题 + 描述 - 悬停上移效果
任务列表: - [ ] Section 标题区 - [ ] 4 列网格布局 - [ ] FeatureCard 组件 - [ ] 图标容器（带背景色） - [ ] 标题 - [ ] 描述文字 - [ ] 悬停动画 - [ ] 响应式适配（移动端单列） - [ ] 输出: Features.tsx
3.4 Demo 口令演示区¶
设计要点: - 左右分栏（输入示例 / 解析结果） - 代码块样式展示口令 - 8 类任务标签网格
任务列表: - [ ] Section 标题 - [ ] 左右分栏布局 - [ ] 左侧：代码块样式输入框 - [ ] 窗口控制按钮装饰 - [ ] 语法高亮（彩色参数） - [ ] 右侧：解析结果列表 - [ ] 键值对行 - [ ] Badge 展示类型 - [ ] 底部：8 类任务标签网格 - [ ] 输出: Demo.tsx
3.5 Workflow 工作流程¶
设计要点: - 5 步骤水平时间线（桌面） - 渐变连接线 - 完成态样式区分
任务列表: - [ ] Section 标题 - [ ] 水平时间线布局 - [ ] 渐变连接线（::before 伪元素） - [ ] Step 节点组件 - [ ] 圆形节点（数字/图标） - [ ] 标题 - [ ] 描述 - [ ] 状态样式（进行中/完成） - [ ] 移动端垂直布局适配 - [ ] 输出: Workflow.tsx
3.6 CTA 区域¶
设计要点: - 居中布局 - 标题 + 描述 + 双按钮 - 背景色区分
任务列表: - [ ] 背景色区块 - [ ] 标题 - [ ] 描述文字 - [ ] 双按钮组 - [ ] 输出: CTA.tsx
3.7 Footer 页脚¶
设计要点: - 简洁单行布局 - Logo + 版权 + 链接
任务列表: - [ ] 分割线 - [ ] 左侧：Logo + 版权 - [ ] 右侧：文档/GitHub/联系链接 - [ ] 输出: Footer.tsx
3.8 页面集成¶
-
app/page.tsx组装所有 Section -
app/layout.tsx配置字体和元数据 - 平滑滚动行为
- 输出: 完整首页
Phase 4: 集成优化（P0）¶
4.1 动画效果完善¶
- Hero 入场动画（stagger 效果）
- 卡片悬停动画调优
- 背景光晕动画调优
- 数字统计动画（可选）
4.2 响应式适配¶
- 移动端布局测试（< 768px）
- 平板布局测试（768-1024px）
- 桌面布局测试（> 1024px）
- 修复断点处的问题
4.3 代码质量¶
- TypeScript strict 检查
- ESLint 检查修复
- Prettier 格式化
- 删除未使用代码
4.4 可访问性¶
- 语义化 HTML 标签
- 图片 alt 属性
- 按钮键盘导航
- 颜色对比度检查
Phase 5: 构建部署（P0）¶
5.1 构建配置¶
-
next.config.js配置 Static Export - 验证
pnpm build成功 - 检查
dist/输出
5.2 部署文档¶
- 编写
docs/deployment.md - 环境变量清单
- 部署步骤
- 健康检查
- 回滚方案
5.3 预览部署¶
- 部署到 preview 环境
- 验证所有功能正常
- 记录预览地址
任务依赖图¶
Phase 1: 项目脚手架
│
├──→ Phase 2: 基础组件
│ │
│ └──→ Phase 3: 页面区块 (可并行)
│ │
│ ├──→ Navbar
│ ├──→ Hero
│ ├──→ Features
│ ├──→ Demo
│ ├──→ Workflow
│ ├──→ CTA
│ └──→ Footer
│ │
│ ↓
│ Phase 4: 集成优化
│ │
│ ↓
│ Phase 5: 构建部署
优先级说明¶
- P0: 首页 Landing Page 必需功能，阻塞上线
- P1: 优化体验，可在迭代中补充
- P2: 未来扩展，当前不考虑
任务拆解 v1.0 | 2026-03-07