Mycontent/reactH5

卡若创业派对 · 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）：

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。

本地开发

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 未接微信分享，需在小程序内分享时保持真源行为

构建

npm run build

产物在 reactH5/dist/，可部署到任意静态站点，并按上文配置 /api 反代或 CORS。