docs: 更新主题解耦与登录接入说明
This commit is contained in:
@@ -16,23 +16,32 @@
|
||||
```
|
||||
smart-engraving-miniapp/
|
||||
├── config/ # Taro 配置文件
|
||||
│ └── index.js # 构建配置（含 copy patterns：icon、img 资源复制）
|
||||
│ └── index.js # 构建配置（含 copy patterns：icon、img、theme.json 复制）
|
||||
├── src/
|
||||
│ ├── app.tsx # 应用入口（全局 ThemeProvider 挂载）
|
||||
│ ├── app.scss # 全局样式（CSS 变量 + 主题工具类）
|
||||
│ ├── app.config.ts # 应用配置（页面路由、tabBar、window）
|
||||
│ ├── app.config.ts # 应用配置（页面路由、tabBar、window、darkmode/themeLocation）
|
||||
│ ├── custom-tab-bar/ # 自定义底部导航（5 tab：首页/商品/设计清单/订单/我的）
|
||||
│ ├── hooks/
|
||||
│ │ ├── useSafeArea.ts # 状态栏/胶囊安全区避让
|
||||
│ │ ├── useStatusBar.ts # 页面状态栏文字/导航条颜色同步
|
||||
│ │ └── useTheme.ts # 主题读写 Hook
|
||||
│ ├── types/
|
||||
│ │ └── index.ts # TypeScript 类型定义（ProductCategory、DesignItem、OrderItem 等）
|
||||
│ ├── utils/
|
||||
│ │ ├── productConfig.ts # 产品品类配置（5 个品类 + iconImg 映射）
|
||||
│ │ └── store.ts # Data Access 层（Storage 读写，openid 隔离）
|
||||
│ │ ├── store.ts # Data Access 层（Storage 读写，openid 隔离）
|
||||
│ │ ├── api.ts / request.ts # 后端 HTTP 封装（wx.request + token）
|
||||
│ │ ├── authState.ts # 登录态校验缓存（isAuthVerified / invalidateAuthCache）
|
||||
│ │ └── themeBackground.ts # 页面窗口背景同步（backgroundColorTop/Bottom）
|
||||
│ ├── context/
|
||||
│ │ └── ThemeContext.tsx # 全局主题 Context（light/dark）
|
||||
│ │ └── ThemeContext.tsx # 全局主题 Context（light/dark/auto）
|
||||
│ ├── components/
|
||||
│ │ ├── ThemeToggle/ # 主题切换按钮（onTap 触发）
|
||||
│ │ ├── LoginGuard/ # 登录守卫（未登录时居中提示）
|
||||
│ │ ├── ThemedPageMeta/ # page-meta + navigation-bar 原生顶栏控制
|
||||
│ │ ├── ThemeToggle/ # 主题切换按钮（历史组件，现收敛到设置页）
|
||||
│ │ ├── LoginGuard/ # 登录守卫（登录态事件驱动刷新）
|
||||
│ │ └── LoginModal/ # 登录弹窗（历史组件）
|
||||
│ ├── theme.json # darkmode 主题映射（用于跟随系统探测）
|
||||
│ └── pages/
|
||||
│ ├── index/ # 首页（品类入口、成品轮播、搜索）
|
||||
│ ├── shop/ # 商品浏览页（2列网格 + 沉浸式详情 overlay）
|
||||
@@ -102,12 +111,13 @@ smart-engraving-miniapp/
|
||||
|
||||
## 关键配置与实现细节
|
||||
|
||||
### 主题系统（Light / Dark）
|
||||
### 主题系统（浅色 / 深色 / 跟随系统）
|
||||
|
||||
- 全局 CSS 变量定义在 `app.scss`：`var(--bg-card)`、`var(--text-primary)`、`var(--text-secondary)`、`var(--line-star)` 等
|
||||
- 切换方式：根节点 `className={theme-${theme}}`（`theme-light` / `theme-dark`）
|
||||
- 状态管理：`src/context/ThemeContext.tsx`（React Context），支持全局同步
|
||||
- 切换按钮：`src/components/ThemeToggle/index.tsx`（使用 `onTap`，非 `onClick`）
|
||||
- 主题模式：`light` / `dark` / `auto`，设置入口在 `src/pages/settings/index.tsx`；`ThemeContext` 产出最终生效的 `resolvedTheme`
|
||||
- 页面根节点使用 `className={theme-${resolvedTheme}}`（`theme-light` / `theme-dark`），CSS 变量定义在 `app.scss`
|
||||
- `app.config.ts` 保留 `darkmode: true + themeLocation`，仅作为 `onThemeChange` / `getAppBaseInfo().theme` 的系统主题探测通道
|
||||
- 顶部/状态栏颜色由每个页面的 `ThemedPageMeta`（`page-meta + navigation-bar`）按 `resolvedTheme` 强覆盖，固定浅色/深色时不跟随系统；`useStatusBar` 负责页面显示时再次同步
|
||||
- “跟随系统”模式下，系统切换深浅色会通过 `wx.onThemeChange` 实时更新 `resolvedTheme`，CSS `prefers-color-scheme` 探测器作为兜底
|
||||
|
||||
### 事件绑定规范（Taro 小程序兼容）
|
||||
|
||||
@@ -150,13 +160,13 @@ pages/
|
||||
|
||||
详见 `docs/mask-config-guide.md`。当实际产品尺寸确定后，仅需修改 `src/utils/productConfig.ts` 中的 `PRODUCTS` 数组。
|
||||
|
||||
### 后端接口（待接入）
|
||||
### 后端接口（登录已接入，业务接口待接入）
|
||||
|
||||
当前代码中以下功能需要接入后端 API：
|
||||
当前代码中以下业务接口仍待接入后端 API：
|
||||
1. 词云生成：调用 `/api/wordcloud/generate` 提交底图+名单，生成词云图
|
||||
2. 图片保存：调用 `/api/upload` 上传用户设计图
|
||||
3. 订单创建：调用 `/api/order/create` 提交订单
|
||||
4. 登录授权：当前 `openid` 为 mock 值，接入真实后端后替换 `wx.login` 的 `code`
|
||||
4. 登录授权：已接入 `/api/auth/login`（`wx.login` code 换取 `accessToken` + 真实 `openid`），不再使用 mock openid
|
||||
|
||||
## 启动开发
|
||||
|
||||
@@ -218,6 +228,17 @@ npm run dev:h5
|
||||
|
||||
---
|
||||
|
||||
## 最近更新记录（2026-08-06）
|
||||
|
||||
### Batch 13 — 顶栏主题解耦 + 跟随系统恢复 + 登录态缓存
|
||||
|
||||
| 序号 | 修改内容 |
|
||||
|------|----------|
|
||||
| 1 | **顶栏颜色与系统解耦**：所有页面新增 `ThemedPageMeta`（`page-meta + navigation-bar`），顶部/状态栏颜色按 `resolvedTheme` 强制覆盖 |
|
||||
| 2 | **跟随系统恢复**：保留 `darkmode: true` 仅用于 `onThemeChange`/`getAppBaseInfo` 探测；设置固定浅色/深色时不跟随系统 |
|
||||
| 3 | **登录守卫重构**：新增 `authState.ts` 登录态缓存，`LoginGuard` 监听 `authStateChanged/tabBarChange/themeChange` 自动刷新 |
|
||||
| 4 | **自定义 tabBar 状态同步**：切换 tab 后选中态立即更新，并随主题/登录事件同步刷新 |
|
||||
|
||||
## 最近更新记录（2026-08-04）
|
||||
|
||||
### Batch 12 — 主题跟随 + 贴纸编辑 + 安全区适配
|
||||
@@ -235,8 +256,8 @@ npm run dev:h5
|
||||
|------|------|------|
|
||||
| 1 | **地址在设计中添加后无法及时同步** | ❌ 未修复 — checkout 页从 store 读取地址时，design 数据写入和读取生命周期不一致 |
|
||||
| 2 | **贴纸编辑页无法运行** | ❌ 未修复 — Canvas 2D `createImage` 在某些基础库版本返回 `undefined`；线稿 AI 接口未接入 |
|
||||
| 3 | **个人主页登录后页面失灵** | ❌ 未修复 — Profile 页 `useDidShow` 与 `LoginGuard` 状态竞争，导致登录后菜单点击事件丢失 |
|
||||
| 4 | **跟随系统的主题切换按钮无法及时切换** | ⚠️ 部分修复 — `darkmode: true` + `useDidShow` 已加，但部分华为/小米机型 `wx.onThemeChange` 仍不触发，需进一步排查 |
|
||||
| 3 | **个人主页登录后页面失灵** | ✅ 已修复 — LoginGuard 改为登录态缓存 + 事件驱动重新校验，登录完成后自动放行 |
|
||||
| 4 | **跟随系统的主题切换按钮无法及时切换** | ✅ 已修复 — 改用 `onThemeChange`/`getAppBaseInfo` 实时同步，`PageMeta` 按 `resolvedTheme` 覆盖顶栏 |
|
||||
|
||||
---
|
||||
|
||||
@@ -283,7 +304,6 @@ npm run dev:h5
|
||||
- [ ] 接入后端词云生成 API，替换模拟数据
|
||||
- [ ] 实现图片上传接口
|
||||
- [ ] 实现订单创建与支付流程
|
||||
- [ ] 接入真实微信登录授权（替换 mock openid）
|
||||
- [ ] 订单物流接口接入（目前为静态 mock）
|
||||
|
||||
### 中优先级
|
||||
|
||||
Reference in New Issue
Block a user