logo
0
0
WeChat Login
cnb<cnb@cnb.cool>
refactor: 所有emoji图标替换为SVG格式(TabBar/Profile/Discover/CircleManage)

鸿爪派 (HongZaoPai) — Connect Web

企业主专属商务社交平台

项目结构(Monorepo)

├── package.json                  # 根 monorepo 配置
├── README.md                     # 本文件
├── .cnb.yml                      # CI/CD 流水线配置
│
├── h5/                           # 前端(React 18 + TypeScript + Vite)
│   ├── package.json
│   ├── vite.config.ts            # Vite 配置(含 BFF 代理)
│   ├── index.html
│   └── src/
│       ├── api/
│       │   ├── index.ts          # API 层(对接 BFF 后端)
│       │   └── mock.ts           # Mock 数据(BFF 开发模式使用)
│       ├── components/           # 公共组件
│       ├── pages/                # 页面
│       │   ├── home/             # 首页(动态流)
│       │   ├── supply/           # 供需列表 & 详情
│       │   ├── square/           # 资源广场(活动列表)
│       │   ├── discover/         # 发现(推荐圈子、动态、推广)
│       │   ├── login/            # 登录
│       │   └── profile/          # 个人中心
│       ├── stores/               # Zustand 状态管理
│       ├── types/                # TypeScript 类型定义
│       └── styles/               # 全局样式
│
├── server/                       # BFF 代理层(Express)
│   ├── package.json
│   └── index.js                  # BFF Server(代理前端请求到 CloudBase)
│
├── cloudbase-functions/          # 后端(CloudBase 云函数)
│   ├── package.json
│   ├── common/
│   │   ├── response.js           # 统一响应格式 { code, data, message }
│   │   └── database.js           # 数据库操作封装
│   ├── supply/index.js           # 供需模块(列表、详情、创建)
│   ├── activity/index.js         # 活动模块(列表、详情)
│   ├── discover/index.js         # 发现模块(推荐接口)
│   ├── circle/index.js           # 圈子模块(列表、详情)
│   ├── user/index.js             # 用户模块(登录、注册、个人信息)
│   └── init-db/index.js          # 数据库初始化脚本
│
├── design-system/                # 设计系统
│   ├── MASTER.md
│   └── design-system-preview.html
│
├── docs/                         # 文档
│   └── PRD.md
│
└── prototypes/                   # 原型页面(纯 HTML)
    └── *.html

快速开始

环境要求

  • Node.js >= 18.0.0
  • npm >= 9.0.0

安装依赖

# 一键安装所有子项目依赖
npm run install:all

# 或分别安装
cd h5 && npm install
cd server && npm install
cd cloudbase-functions && npm install

本地开发

需要同时启动 BFF Server 和前端开发服务器:

# 方式一:一键启动(推荐)
npm run dev

# 方式二:分别启动
# 终端 1:启动 BFF Server(端口 3001)
npm run dev:server

# 终端 2:启动前端开发服务器(端口 3000)
npm run dev:h5

启动后访问:

构建生产版本

npm run build:h5

构建产物输出到 h5/dist/,可部署到任意静态托管服务。

架构说明

┌─────────┐       Vite Proxy       ┌──────────┐      SDK / HTTP     ┌────────────────┐
│  H5 前端 │ ──── /api/* ──────▶  │ BFF 代理层 │ ──────────────▶  │ CloudBase 云函数 │
│ (Port 3000)│                      │ (Port 3001)│                   │               │
└─────────┘                       └──────────┘                   └───────┬───────┘
                                                                        │
                                                                  ┌─────▼─────┐
                                                                  │  数据库    │
                                                                  │ (CloudBase)│
                                                                  └───────────┘

BFF 代理层

  • 本地开发(默认):DEV_MODE=mock,BFF 直接返回 Mock 数据,无需连接 CloudBase
  • 生产环境:设置 CLOUDBASE_ENV 环境变量,BFF 通过 CloudBase SDK 调用云函数

API 响应格式

所有接口统一返回:

{
  "code": 0,
  "data": {},
  "message": ""
}
  • code === 0:成功
  • code !== 0:失败,message 为错误描述

API 接口列表

云函数Action说明请求参数
supplylist供需列表(分页+筛选){ type, category, keyword, page, pageSize }
supplydetail供需详情{ id }
supplycreate发布供需{ token, type, title, desc, category, ... }
activitylist活动列表{ status, page, pageSize }
activitydetail活动详情{ id }
discoverrecommend发现推荐{ page, pageSize }
circlelist圈子列表{ category, keyword, page, pageSize }
circledetail圈子详情{ id }
userlogin手机号登录{ phone, code }
userregister手机号注册{ phone, code, nickname }
userprofile获取用户信息{ token }

部署说明

前端部署

cd h5 && npm run build
# 将 h5/dist/ 部署到 CDN 或静态托管

BFF 部署

  • CloudBase 云托管:将 server/ 部署为云托管服务
  • Serverless:可改为函数计算入口
  • 传统服务器node server/index.js

云函数部署

cd cloudbase-functions
# 通过 CloudBase CLI 或控制台部署各云函数
# 首次部署需初始化数据库:
npm run init-db

环境变量

变量名说明必填
CLOUDBASE_ENVCloudBase 环境ID生产环境必填
DEV_MODE设为 mock 启用 Mock 模式否(默认 mock)
PORTBFF Server 端口否(默认 3001)

技术栈

  • 前端:React 18 + TypeScript + Vite + Zustand + antd-mobile + React Router
  • BFF:Express + CORS
  • 后端:CloudBase 云函数 + @cloudbase/node-sdk
  • 数据库:CloudBase 数据库(NoSQL)

相关链接

About

鸿爪派 H5 — 企业商务社交平台

Language
HTML48.9%
TypeScript28.8%
JavaScript15.5%
CSS6.6%
Others0.2%