Boss Command Center - 技术方案¶

技术定位：面向 Landing Page 的现代化前端实现，预留未来系统扩展的架构空间 核心原则：简单可维护、性能优先、可渐进增强

1. 技术栈选型¶

1.1 前端技术栈¶

层级	技术选型	版本	选型理由
框架	Next.js 15 (App Router)	^15.0.0	React 生态成熟方案，SSR/SSG 支持，部署友好
语言	TypeScript	^5.0.0	类型安全，IDE 支持好，团队协作必需
样式	Tailwind CSS	^4.0.0	原子化 CSS，与设计方案完美契合，开发效率高
图标	Lucide React	^0.400.0	与设计方案一致，SVG 矢量，Tree-shaking
字体	Inter (Google Fonts)	-	设计方案指定字体，加载稳定

1.2 开发工具链¶

包管理器：pnpm（速度快、磁盘占用低）
代码规范：ESLint + Prettier + @tailwindcss/typography
Git 规范：Conventional Commits
构建输出：Static Export（适合静态部署）

1.3 部署方案¶

环境	方案	域名
Dev	开发环境对外联调入口	https://dev.w.kkworld.top/boss-command-center/
Preview	Static Export + Nginx	https://preview.w.kkworld.top/boss-command-center/
Production	Static Export + CDN	https://1.w.kkworld.top/boss-command-center/

2. 项目结构¶

boss-command-center/
├── app/                          # Next.js App Router
│   ├── layout.tsx               # 根布局（字体、全局样式）
│   ├── page.tsx                 # 首页 Landing Page
│   ├── globals.css              # 全局 CSS + Tailwind
│   └── sections/                # 页面区块组件
│       ├── Navbar.tsx           # 导航栏
│       ├── Hero.tsx             # Hero 区域
│       ├── Features.tsx         # 核心功能展示
│       ├── Demo.tsx             # 口令演示区
│       ├── Workflow.tsx         # 工作流程
│       ├── CTA.tsx              # 行动号召
│       └── Footer.tsx           # 页脚
├── components/                   # 共享组件
│   ├── ui/                      # 基础 UI 组件
│   │   ├── Button.tsx           # 按钮组件
│   │   ├── Card.tsx             # 卡片组件
│   │   └── Badge.tsx            # 标签组件
│   └── icons/                   # 自定义图标
├── lib/                         # 工具函数
│   └── utils.ts                 # 通用工具（cn 函数等）
├── public/                      # 静态资源
│   └── images/                  # 图片资源
├── docs/                        # 项目文档
├── prototype/                   # HTML 原型参考
├── next.config.js               # Next.js 配置
├── tailwind.config.ts           # Tailwind 配置（设计令牌）
├── tsconfig.json                # TypeScript 配置
└── package.json

3. 设计令牌配置¶

3.1 Tailwind 扩展配置¶

// tailwind.config.ts 核心扩展
colors: {
  'deep-black': '#0A0A0F',
  'card-bg': '#12121A',
  'hover-bg': '#1A1A24',
  'primary': '#3B82F6',
  'primary-hover': '#2563EB',
  'success': '#10B981',
  'warning': '#F59E0B',
  'error': '#EF4444',
  'info': '#8B5CF6',
  'text-primary': '#FAFAFA',
  'text-secondary': '#A1A1AA',
  'text-tertiary': '#71717A',
}

3.2 关键动画¶

animate-float: 6s ease-in-out infinite（悬浮效果）
animate-pulse-glow: 8s ease-in-out infinite（光晕呼吸）
卡片悬停：translateY(-4px) + 边框高亮

4. 组件设计¶

4.1 基础 UI 组件¶

Button: variant (primary/secondary/ghost) × size (sm/md/lg) Card: 背景 card-bg，圆角 12px，边框 1px white/10 Badge: 用于标签展示，支持多色主题

4.2 页面区块组件¶

组件	职责	复杂度
Navbar	固定导航、滚动毛玻璃、响应式	中
Hero	主标题、副标题、CTA、统计数据	低
Features	4 卡片网格展示	低
Demo	口令输入/解析左右分栏	中
Workflow	5 步骤时间线	中
CTA	行动号召区	低
Footer	页脚链接	低

5. 响应式断点¶

断点	范围	布局策略
< 768px	移动端	单列堆叠，字号缩小 20%
768-1024px	平板	双列网格，简化导航
>= 1024px	桌面	完整三列布局

6. 性能优化¶

Static Export 预渲染
字体 display: swap
动画使用 transform/opacity（GPU 加速）
支持 prefers-reduced-motion
Lighthouse 目标 >= 90

7. 关键技术风险¶

风险	等级	缓解措施
Tailwind v4 兼容性	低	使用稳定版，逐步升级
字体加载闪烁	低	font-display: swap
低端设备动画性能	中	支持 prefers-reduced-motion
未来系统对接	中	预留清晰接口边界

8. 扩展性预留¶

// lib/api/client.ts 预留
export const apiClient = {
  parseIntent: async (command: string) => { /* TODO */ },
  getTaskStatus: async (taskId: string) => { /* TODO */ },
  getAgents: async () => { /* TODO */ },
}

未来路由规划：/ (当前) → /dashboard → /docs

技术方案 v1.0 | 2026-03-07