153 lines
4.0 KiB
Markdown
153 lines
4.0 KiB
Markdown
# 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
|