# BuildFlow 门户网站

> 极简低代码开发平台 —— 拖拽即应用，无需编写代码即可构建专业级 Web 应用。

基于设计稿 1:1 还原的独立门户网站系统，采用 Apple-inspired Pinguo 设计系统、深色模式默认、响应式多端适配。

## 技术栈

| 分类 | 选型 |
| --- | --- |
| 框架 | React 18 + TypeScript |
| 构建 | Vite 6 |
| 样式 | Tailwind CSS 3.4 + CSS Variables（Pinguo design tokens） |
| 路由 | React Router 7 |
| 图标 | lucide-react |
| 字体 | DM Sans + JetBrains Mono（@fontsource 自托管） |
| 包管理 | pnpm |
| 部署 | Docker + Nginx |

## 页面结构

| 路由 | 页面 | 说明 |
| --- | --- | --- |
| `/` | 首页 | Hero + 核心能力 + 数据展示 + 特性大图 + CTA |
| `/features` | 功能展示 | 工作流 + 三步流程 + 6 项核心能力 + 技术集成 |
| `/components` | 组件库 | 200+ 组件 + 8 个分类 + 拖拽搭建示意 + 主题预览 |
| `/pricing` | 定价方案 | 3 个套餐 + 4 列对比表 + FAQ 手风琴 |

## 本地开发

### 环境要求

- Node.js ≥ 20
- pnpm ≥ 9（`corepack enable` 或 `npm i -g pnpm`）

### 命令

```bash
# 安装依赖
pnpm install

# 启动开发服务器（默认 http://localhost:5173）
pnpm dev

# 类型检查
pnpm check

# 生产构建（产物输出到 dist/）
pnpm build

# 本地预览构建产物
pnpm preview
```

## 目录结构

```
buildflow/
├── public/
│   ├── images/                # 设计稿图片资源
│   └── favicon.svg
├── src/
│   ├── components/            # 通用组件（Button/Header/Footer/Layout）
│   ├── data/                  # 静态数据（site/features/components/pricing）
│   ├── hooks/                 # 自定义 hook（useMobileMenu）
│   ├── lib/                   # 工具函数（cn）
│   ├── pages/                 # 4 个页面
│   ├── App.tsx                # 路由配置
│   ├── index.css              # Pinguo design tokens + Tailwind
│   └── main.tsx               # 应用入口
├── Dockerfile                 # 多阶段构建（Node 构建 + Nginx 托管）
├── docker-compose.yml         # 容器编排
├── nginx.conf                 # Nginx 配置（SPA 路由 + 缓存 + Gzip）
├── tailwind.config.js         # Tailwind 扩展配置
└── package.json
```

## 部署到 192.168.1.154

目标服务器为 Linux + Docker 环境。

### 方式一：服务器上构建（推荐）

```bash
# 1. 将项目同步到服务器
scp -r buildflow/ user@192.168.1.154:/opt/buildflow

# 2. SSH 登录服务器
ssh user@192.168.1.154

# 3. 启动容器（自动构建镜像 + 启动）
cd /opt/buildflow
docker compose up -d --build

# 4. 查看状态
docker compose ps
docker compose logs -f
```

访问 `http://192.168.1.154/` 即可。

### 方式二：本地构建镜像后推送

```bash
# 本地构建
docker build -t buildflow-web:latest .

# 推送到服务器（通过私有 registry 或 save/load）
docker save buildflow-web:latest | gzip > buildflow-web.tar.gz
scp buildflow-web.tar.gz user@192.168.1.154:/tmp/

# 服务器加载并运行
ssh user@192.168.1.154
docker load < /tmp/buildflow-web.tar.gz
cd /opt/buildflow && docker compose up -d
```

### 常用运维命令

```bash
# 停止
docker compose down

# 重新构建并启动（发布新版本）
docker compose up -d --build

# 查看实时日志
docker compose logs -f

# 健康检查
curl -I http://192.168.1.154/
```

## 设计令牌

完整迁移 Pinguo 设计系统的语义令牌，定义在 [src/index.css](src/index.css)：

- **Primitive 色阶**：brand / background / text / icon 各 10 级
- **Semantic 角色**：`--primary`、`--foreground`、`--background`、`--muted`、`--border` 等
- **深色模式默认**：`<html class="dark">`
- **圆角**：`--radius` (1.2rem)
- **阴影**：6 级（`shadow-sm` → `shadow-2xl`）

## 浏览器支持

- Chrome / Edge ≥ 100
- Safari ≥ 15
- Firefox ≥ 100

## License

Proprietary — BuildFlow