build-flow/build-flow.portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
build-flow.portal/README.md

4.0 KiB
Raw Blame History

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）

命令

# 安装依赖
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 环境。

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

# 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/ 即可。

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

# 本地构建
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

常用运维命令

# 停止
docker compose down

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

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

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

设计令牌

完整迁移 Pinguo 设计系统的语义令牌，定义在 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