c78a0d531f
- Updated the login modal to include a user agreement section with clickable links to the user agreement and privacy policy. - Improved button styling and layout for better user experience. - Refactored avatar selection process to utilize local image paths, enhancing compatibility and reliability across different environments. - Added utility functions for resolving avatar file paths and selecting images from the gallery or camera. This update aims to streamline user interactions during login and avatar selection, ensuring a smoother experience.
92 lines
6.5 KiB
Markdown
92 lines
6.5 KiB
Markdown
# 卡若创业派对 · React H5（预览）
|
||
|
||
由 `miniprogram/` 对照迁移的 **Vite + TypeScript + React Router** 工程，P1 为 Tab 四页：首页、目录、找伙伴、我的。
|
||
|
||
## 界面与小程序对齐（要点）
|
||
|
||
- **根布局**（`src/index.css`）：已去掉 Vite 模板的 `#root` 超宽/浅色/居中，改为 **整页黑底、内容左对齐、全宽**；宽屏时 `#root` **最大约 430px 居中**，接近真机宽度，避免布局被拉散。
|
||
- **全局与页面样式**：`app-global.css` 与各页 `*.css` 自 `app.wxss` / 页 `*.wxss` 同步；`rpx` 由 `postcss-rpx-750` 换算（与 375 视口下小程序一致）。
|
||
- **TabBar**：色值与 `app.json` 一致（未选中 `#8e8e93`、选中 `#00CED1`）；**文案**与 `custom-tab-bar` 一致，读取 `mpConfig.mpUi.tabBar`（`home` / `chapters` / `match` / `my`），缺省为 首页/目录/找伙伴/我的；**找伙伴**显隐与 `features.matchEnabled` 一致（数据来自 `AppContext` 中的配置缓存，与 `app.getConfig()` 结果一致）。
|
||
|
||
## P1 接口与小程序对照
|
||
|
||
所有请求均为 **`/api/miniprogram/*`**，与小程序 `app.request` 路径一致；基域与现网一致为 **`https://soulapi.quwanzhi.com`**（同 `miniprogram/app.js` 中 `API_BASE_URL_PROD`）。实现见 `src/api/request.ts`（Bearer、JSON、`success:false` 处理等与小程序对齐）。
|
||
|
||
| 区域 | 主要接口 |
|
||
|------|----------|
|
||
| 配置 | `GET /config/core`、`GET /config/audit-mode`（`getConfig.ts` 内组合，对齐小程序 `getConfig`） |
|
||
| 首页 | `ckb/pinned-person`、`book/parts`、`vip/members?limit=24`、`earnings/leaderboard`、`book/recommended`、`book/latest-chapters`、`book/hot` |
|
||
| 目录 | `book/books`、`book/parts?bookId=`、`book/chapters-by-part?partId=`、`vip/status` |
|
||
| 找伙伴 | `match/config`、`user/purchase-status`、`user/profile`、`POST match/users`、`ckb/match`、`POST ckb/join` |
|
||
| 我的 | `user/dashboard-stats`、`earnings`、`withdraw/pending-confirm`、`vip/status`、`my/super-stats`、`balance`、`user/profile` |
|
||
| 登录 / 留资等 | `POST h5/login-by-phone`；`soulBridge` 内 `ckb/lead`；与小程序同名路径一致 |
|
||
|
||
## 样式与图标资源（与小程序同步）
|
||
|
||
仓库内 **无** `iconfont.woff2` 等字体二进制时，构建会提示字体 path 未解析，运行时可从 `public/static/` 加载（需自行放入与 iconfont 项目一致的 woff2/woff/ttf，或从你们 iconfont 工程下载到 `reactH5/public/static/`）。
|
||
|
||
**一键从 `miniprogram/` 同步**（`app.wxss`、P1 四页、TabBar、登录弹窗、开发登录的 `wxss` → 对应 `css`，并合并 `miniprogram/assets` → `public/assets`、`static` → `public/static`）：
|
||
|
||
```bash
|
||
python reactH5/scripts/sync_styles_from_miniprogram.py
|
||
```
|
||
|
||
`app.wxss` 中的 `page` 已映射为 `:root, html, body, #root`；`Icon` 字形表仍以 `miniprogram/components/icon/icon.js` 为准；更新后可于 `reactH5/` 下执行 `node scripts/extract-icon-map.mjs`。
|
||
|
||
## 本地开发
|
||
|
||
```bash
|
||
cd reactH5
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
从首页/我的等页进入 **`/login` 手机号登录**（旧链接 `/dev-login` 会重定向到 `/login`）时，登录成功后会 **回到进入前的路由**（内部路径，避免跳回登录页循环）。
|
||
|
||
### 对接本地 soul-api
|
||
|
||
1. 启动 **soul-api**（本仓库联调约定 **`PORT=9100`**，需在 soul-api 环境变量中设置；另需 `DB_DSN` 等，见 `soul-api` 文档）。
|
||
2. **可不建 `.env`**：Vite 已默认把 `/api` 代理到 **`http://127.0.0.1:9100`**。若本机 API 端口不同，复制 **`.env.development.example`** 为 **`.env.development`** 并设置 `VITE_PROXY_TARGET`。保持 **`VITE_API_BASE_URL` 为空** 即走代理。
|
||
3. **直连模式**（不用代理）：`.env.development` 中设 `VITE_API_BASE_URL=http://127.0.0.1:9100`；soul-api 默认 CORS 已包含 `http://localhost:5173` / `127.0.0.1:5173`，其它端口请加环境变量 **`CORS_ORIGINS`**（逗号分隔）与 soul-api 合并。
|
||
|
||
未配置 `.env` 时：Vite 默认将 `/api` 代理到 **`http://127.0.0.1:9100`**，便于本地联调且避免误连线上导致 **`h5/login-by-phone` 403**。
|
||
若需打线上 API，在 `.env.development` 设置 **`VITE_PROXY_TARGET=https://soulapi.quwanzhi.com`**（或你的 API 根），且服务端须 **`H5_PHONE_LOGIN_ENABLED=1`**。
|
||
|
||
- 请求基址：生产/预览通过 `VITE_API_BASE_URL` 指向 API 根（含协议与端口，**无尾部斜杠**）；开发态通常留空走代理。
|
||
- 详见 **`vite.config.ts`**（`VITE_PROXY_TARGET`）与 **`src/api/request.ts`**（`getApiBaseUrl`）。
|
||
|
||
## 生产环境（CORS / 反代）
|
||
|
||
浏览器访问独立 H5 域名时，需满足其一：
|
||
|
||
- **网关/Nginx 反代**：与开发一致，将站点所在域的 `/api` 反代到 `soulapi.quwanzhi.com`（或实际 API 主机），页面仍只请求 `/api/miniprogram/...`；或
|
||
- **后端 CORS**：由 API 对 H5 来源放行；否则预检/跨域会拦截。
|
||
|
||
## 视口与样式验收（375 设计宽）
|
||
|
||
- 与小程序 **750rpx 画布** 对照时，在 **375px 逻辑宽** 下 `1rpx ≈ 0.5px`（`postcss-rpx-750` 或手算一致即可）。
|
||
- 色值/间距：对迁移后的 `*.css` 与 `miniprogram` 对应 `*.wxss` 做色值与关键尺寸 **grep 对照**。
|
||
|
||
## 手机号登录（与小程序同账号）
|
||
|
||
- 接口：`POST /api/miniprogram/h5/login-by-phone`（与 `/api/miniprogram/dev/login-by-phone` 为同一实现），**按库内已绑定手机**匹配用户；**须至少 6 位密码**（库中尚无 `password_hash` 时首次提交会写入并登录，已有则校验 bcrypt）。
|
||
- 忘记密码：`POST /api/miniprogram/h5/reset-password`，body `{ "phone", "newPassword" }`（≥6 位），与登录共用 `H5_PHONE_LOGIN_ENABLED` / 开发环境开关；**无短信验码**，生产请配合网关限流与风控。
|
||
- 开发环境（`APP_ENV=development`）下默认可用；**生产**需在 soul-api 环境变量中设置 `H5_PHONE_LOGIN_ENABLED=1`（或 `true`），否则上述接口会返回 403。
|
||
|
||
## 微信能力（H5 与小程序差异）
|
||
|
||
| 能力 | 说明 |
|
||
|------|------|
|
||
| 登录 | H5 为 **手机号登录**；小程序侧仍以微信能力为准，账号数据在 `users` 表统一 |
|
||
| 本地存储 | `localStorage`：`token`、`userInfo`、`user_phone`、`user_wechat` 等，对齐小程序 key |
|
||
| 支付 / 商户收款 / 跳转其它小程序 | P1 以 Toast 提示使用 **完整小程序**；不调用 `wx.requestPayment` 等 |
|
||
| 分享 | P1 未接微信分享，需在小程序内分享时保持真源行为 |
|
||
|
||
## 构建
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
产物在 `reactH5/dist/`，可部署到任意静态站点，并按上文配置 `/api` 反代或 CORS。
|