diff --git a/docs/superpowers/plans/2026-08-14-wechat-notify-menu-entry.md b/docs/superpowers/plans/2026-08-14-wechat-notify-menu-entry.md new file mode 100644 index 00000000..1ce621b4 --- /dev/null +++ b/docs/superpowers/plans/2026-08-14-wechat-notify-menu-entry.md @@ -0,0 +1,559 @@ +# 开启微信通知菜单聚合入口 Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 在「抄送我的」后新增「开启微信通知」菜单,单页完成关注(步骤 1)与绑定(步骤 2),并移除登录页 / 首页顶栏旧入口。 + +**Architecture:** 新增原生页 `pages/oa/wechat-notify/index`:步骤 1 用 `openOfficialAccountProfile` / 二维码 + 本地「我已关注」;步骤 2 `navigateTo` 既有 `mp-bind` web-view。菜单 icon 由后端 `mini_menu._mobile_menu_icon` 按 path 映射到 `oa-wechat-notify` PNG。不改 bind API 与推送逻辑。 + +**Tech Stack:** uni-app Vue2/3(mobile-h5)、既有 `/mini/auth/mp-bind-status`、MySQL `sys_menu` 种子 SQL + +**Spec:** `docs/superpowers/specs/2026-08-14-wechat-notify-menu-entry-design.md` +**Demo:** `mobile-ui/zkxw-mobile-wechat-notify-menu-demo.html` + +--- + +## File map + +| 文件 | 职责 | +|------|------| +| `mobile-h5/utils/mp-follow-confirm.js` | 按 userId 读写「我已关注」本地标记 | +| `mobile-h5/utils/mp-follow-confirm.test.js` | 上述工具单测(Node 可跑则用;否则用纯函数导出测) | +| `mobile-h5/pages/oa/wechat-notify/index.vue` | 步骤 1 / 2 设置页 | +| `mobile-h5/pages.json` | 注册路由 | +| `mobile-h5/components/van-icon/van-icon.vue` | PNG 映射 `oa-wechat-notify` | +| `mobile-h5/utils/menu-icon-colors.js` | OA PNG 透明底集合 | +| `backend/app/api/mini_menu.py` | path → icon / transparent 色 | +| `docs/sql/mobile_menu_oa_wechat_notify.sql` | 菜单种子 OA007 | +| `mobile-h5/pages/login/index.vue` + `login.scss` | 删除关注入口 | +| `mobile-h5/pages/index/index.vue` | 删除顶栏通知入口 | +| `docs/superpowers/specs/2026-08-13-oa-wechat-service-notify-design.md` | §6.1/6.2 加迁移注记 | + +图标资源已存在:`mobile-h5/static/menu-icons/oa-wechat-notify.png` + +--- + +### Task 1: 本地「我已关注」工具 + 单测 + +**Files:** +- Create: `mobile-h5/utils/mp-follow-confirm.js` +- Create: `mobile-h5/utils/mp-follow-confirm.test.js` + +- [ ] **Step 1: Write failing test** + +```javascript +// mobile-h5/utils/mp-follow-confirm.test.js +const { + followStorageKey, + isFollowConfirmed, + setFollowConfirmed, + resolveStepDone +} = require('./mp-follow-confirm.js') + +describe('mp-follow-confirm', () => { + const store = new Map() + const api = { + getStorageSync: (k) => store.get(k), + setStorageSync: (k, v) => store.set(k, v) + } + + beforeEach(() => store.clear()) + + test('followStorageKey isolates by userId', () => { + expect(followStorageKey('u1')).toBe('mp_follow_confirmed:u1') + expect(followStorageKey('')).toBe('mp_follow_confirmed:anonymous') + }) + + test('set/get follow confirmed', () => { + expect(isFollowConfirmed('u1', api)).toBe(false) + setFollowConfirmed('u1', true, api) + expect(isFollowConfirmed('u1', api)).toBe(true) + expect(isFollowConfirmed('u2', api)).toBe(false) + }) + + test('resolveStepDone: bound forces both done', () => { + expect(resolveStepDone({ bound: true, followConfirmed: false })).toEqual({ + step1Done: true, + step2Done: true + }) + expect(resolveStepDone({ bound: false, followConfirmed: true })).toEqual({ + step1Done: true, + step2Done: false + }) + expect(resolveStepDone({ bound: false, followConfirmed: false })).toEqual({ + step1Done: false, + step2Done: false + }) + }) +}) +``` + +若工程无 Jest/`describe`,改为与 `oa-corner-index.test.js` 相同的断言风格(见该文件:自跑 `assert`)。先打开 `mobile-h5/utils/oa-corner-index.test.js` 对齐 runner,再写等价断言。 + +- [ ] **Step 2: Run test — expect FAIL** + +```bash +cd mobile-h5 && node --test utils/mp-follow-confirm.test.js +# 或: node utils/mp-follow-confirm.test.js +``` + +Expected: FAIL(模块不存在) + +- [ ] **Step 3: Implement utility** + +```javascript +// mobile-h5/utils/mp-follow-confirm.js +export function followStorageKey(userId) { + const id = String(userId || '').trim() || 'anonymous' + return 'mp_follow_confirmed:' + id +} + +export function isFollowConfirmed(userId, storage) { + const s = storage || (typeof uni !== 'undefined' ? uni : null) + if (!s || typeof s.getStorageSync !== 'function') return false + try { + return String(s.getStorageSync(followStorageKey(userId)) || '') === '1' + } catch (_) { + return false + } +} + +export function setFollowConfirmed(userId, confirmed, storage) { + const s = storage || (typeof uni !== 'undefined' ? uni : null) + if (!s || typeof s.setStorageSync !== 'function') return + try { + s.setStorageSync(followStorageKey(userId), confirmed ? '1' : '0') + } catch (_) { + /* ignore */ + } +} + +/** @returns {{ step1Done: boolean, step2Done: boolean }} */ +export function resolveStepDone({ bound, followConfirmed }) { + if (bound) return { step1Done: true, step2Done: true } + return { + step1Done: !!followConfirmed, + step2Done: false + } +} +``` + +若测试用 `require`,在文件末尾加: + +```javascript +if (typeof module !== 'undefined' && module.exports) { + module.exports = { + followStorageKey, + isFollowConfirmed, + setFollowConfirmed, + resolveStepDone + } +} +``` + +(或改测试为与现有 ESM 测试一致。) + +- [ ] **Step 4: Run test — expect PASS** + +```bash +cd mobile-h5 && node --test utils/mp-follow-confirm.test.js +``` + +Expected: PASS + +- [ ] **Step 5: Commit** + +```bash +git add mobile-h5/utils/mp-follow-confirm.js mobile-h5/utils/mp-follow-confirm.test.js +git commit -m "$(cat <<'EOF' +feat(mobile-h5): add local follow-confirm helpers for WeChat notify steps + +EOF +)" +``` + +--- + +### Task 2: 图标映射(van-icon + 色 + 后端 path) + +**Files:** +- Modify: `mobile-h5/components/van-icon/van-icon.vue` +- Modify: `mobile-h5/utils/menu-icon-colors.js` +- Modify: `backend/app/api/mini_menu.py` + +- [ ] **Step 1: van-icon PNG map** + +在 `PNG_ICONS` 增加: + +```javascript +'oa-wechat-notify': '/static/menu-icons/oa-wechat-notify.png' +``` + +- [ ] **Step 2: menu-icon-colors** + +`OA_PNG_ICONS` 与 `MENU_ICON_COLOR_DEFAULTS` 增加 `'oa-wechat-notify'`(transparent)。 + +- [ ] **Step 3: backend mini_menu.py** + +`_mobile_menu_icon`:在 `oa/cc` 判断后增加: + +```python +if "oa/wechat-notify" in p: + return "oa-wechat-notify" +``` + +`_mobile_menu_icon_colors` 的 `any(...)` 元组增加 `"oa/wechat-notify"`。 + +- [ ] **Step 4: Commit** + +```bash +git add mobile-h5/components/van-icon/van-icon.vue \ + mobile-h5/utils/menu-icon-colors.js backend/app/api/mini_menu.py +git commit -m "$(cat <<'EOF' +feat: map oa-wechat-notify icon for mobile menu grid + +EOF +)" +``` + +--- + +### Task 3: 新建「开启微信通知」步骤页 + pages.json + +**Files:** +- Create: `mobile-h5/pages/oa/wechat-notify/index.vue` +- Modify: `mobile-h5/pages.json` + +- [ ] **Step 1: Register in pages.json**(紧挨 `mp-bind` 条目后) + +```json +{ + "path": "pages/oa/wechat-notify/index", + "style": { + "navigationBarTitleText": "开启微信通知", + "navigationBarBackgroundColor": "#ecfdf5", + "navigationBarTextStyle": "black" + } +} +``` + +- [ ] **Step 2: Implement page** + +关键页面:无顶部「已开启」横幅;两张步骤卡。逻辑要点: + +```javascript +import { + fetchMpBindStatus, + getUser, + forceRelogin, + getToken +} from '../../../utils/auth.js' +import { + isFollowConfirmed, + setFollowConfirmed, + resolveStepDone +} from '../../../utils/mp-follow-confirm.js' +import { MP_GH_USERNAME, MP_QRCODE_URL } from '../../../utils/config.js' + +function currentUserId() { + const u = getUser() || {} + return u.id || u.userId || u.username || '' +} + +export default { + data() { + return { + bound: false, + followConfirmed: false, + showQr: false, + mpQrcodeUrl: MP_QRCODE_URL, + step1Done: false, + step2Done: false + } + }, + onShow() { + if (!getToken()) { + forceRelogin('请先登录') + return + } + this.followConfirmed = isFollowConfirmed(currentUserId()) + this.refreshBind() + }, + methods: { + applySteps() { + const r = resolveStepDone({ + bound: this.bound, + followConfirmed: this.followConfirmed + }) + this.step1Done = r.step1Done + this.step2Done = r.step2Done + }, + async refreshBind() { + try { + const res = await fetchMpBindStatus() + this.bound = !!(res && res.bound) + } catch (_) { + this.bound = false + } + this.applySteps() + }, + onFollow() { + const username = (MP_GH_USERNAME || '').trim() + const openProfile = + typeof wx !== 'undefined' && typeof wx.openOfficialAccountProfile === 'function' + if (openProfile && username) { + wx.openOfficialAccountProfile({ + username, + fail: () => { + this.showQr = true + } + }) + return + } + this.showQr = true + }, + onConfirmFollowed() { + setFollowConfirmed(currentUserId(), true) + this.followConfirmed = true + this.showQr = false + this.applySteps() + uni.showToast({ title: '已标记关注', icon: 'none' }) + }, + onBind() { + if (!this.step1Done || this.step2Done) return + uni.navigateTo({ url: '/pages/oa/mp-bind/index' }) + } + } +} +``` + +模板结构对齐 Demo(步骤角标「未完成/已完成」;步骤 2 按钮在 `!step1Done` 时 disabled,文案「请先完成步骤 1」;`step2Done` 时「已绑定」disabled)。二维码用 `MP_QRCODE_URL`,`show-menu-by-longpress`。样式用三墙 token(`#0a9f6d` 等),scoped SCSS,勿用 web-admin `#10b981`。 + +- [ ] **Step 3: Smoke in HBuilder / 微信开发者工具** + +打开 `/pages/oa/wechat-notify/index`:两步可见;未确认时步骤 2 不可点。 + +- [ ] **Step 4: Commit** + +```bash +git add mobile-h5/pages/oa/wechat-notify/index.vue mobile-h5/pages.json +git commit -m "$(cat <<'EOF' +feat(mobile-h5): add WeChat notify setup page with follow and bind steps + +EOF +)" +``` + +--- + +### Task 4: 菜单 SQL 种子 + +**Files:** +- Create: `docs/sql/mobile_menu_oa_wechat_notify.sql` + +- [ ] **Step 1: Write SQL**(风格对齐 `mobile_menu_oa_task_centers.sql`) + +```sql +-- 小程序「开启微信通知」菜单(抄送我的之后) +-- 前置:docs/sql/mobile_menu_oa_task_centers.sql(OA006)可已执行 +-- 角色授权请在 Web「角色管理」勾选本菜单。 + +SET @mini_root = ( + SELECT id FROM sys_menu + WHERE del_flag = 0 AND parent_id = '0' AND menu_name LIKE '%移动端%' + LIMIT 1 +); + +INSERT INTO sys_menu ( + id, menu_name, parent_id, menu_type, path, component, perms, + is_frame, visible, status, tenant_no, order_num, remark, + create_by, create_dept_id, create_time, update_by, update_time, del_flag +) +SELECT + 'MINI000000000000000000000000OA007', + '开启微信通知', + @mini_root, + 'C', + '/pages/oa/wechat-notify/index', + NULL, + 'mini:oa:wechat-notify', + 1, + '1', + '1', + 'zkxw', + 70, + '小程序开启微信通知(关注+绑定)', + 'admin', + '', + NOW(), + NULL, + NOW(), + 0 +FROM DUAL +WHERE @mini_root IS NOT NULL + AND NOT EXISTS ( + SELECT 1 FROM sys_menu WHERE id = 'MINI000000000000000000000000OA007' AND del_flag = 0 + ); +``` + +- [ ] **Step 2: 在测试库执行**(或提示运维执行) + +```bash +# 按本地习惯执行;示例: +# mysql ... < docs/sql/mobile_menu_oa_wechat_notify.sql +``` + +Web 角色管理给目标角色勾选「开启微信通知」。 + +- [ ] **Step 3: Commit** + +```bash +git add docs/sql/mobile_menu_oa_wechat_notify.sql +git commit -m "$(cat <<'EOF' +docs(sql): seed mobile menu for WeChat notify setup + +EOF +)" +``` + +--- + +### Task 5: 移除登录页关注入口 + +**Files:** +- Modify: `mobile-h5/pages/login/index.vue` +- Modify: `mobile-h5/styles/components/login.scss` + +- [ ] **Step 1: Remove template blocks** + +删除: + +- `关注服务号...` +- 整块 `login-mp-qrcode` 弹层 + +- [ ] **Step 2: Remove script** + +删除:`MP_GH_USERNAME` / `MP_QRCODE_URL` import(若不再使用)、`showMpQrcode`、`mpQrcodeUrl`、`onFollowMp`。 + +- [ ] **Step 3: Remove SCSS** + +删除 `.login-follow-mp`、`.login-mp-qrcode*` 相关规则。 + +- [ ] **Step 4: 目视确认登录页无关注链接** + +- [ ] **Step 5: Commit** + +```bash +git add mobile-h5/pages/login/index.vue mobile-h5/styles/components/login.scss +git commit -m "$(cat <<'EOF' +fix(mobile-h5): remove follow-MP entry from login page + +EOF +)" +``` + +--- + +### Task 6: 移除首页顶栏通知入口 + +**Files:** +- Modify: `mobile-h5/pages/index/index.vue` + +- [ ] **Step 1: Remove template** + +删除 `home-mp-notify` 的 ``;`meta__right` 仅保留「退出登录」。 + +- [ ] **Step 2: Remove script** + +删除:`fetchMpBindStatus` import(若仅用于顶栏)、`mpNotifyBound`、`refreshMpBindStatus`、`onTapMpNotify`,以及 `onShow` 里对 `refreshMpBindStatus` 的调用。 + +- [ ] **Step 3: Remove scoped styles** + +删除 `.home-mp-notify` / `--bound`;若 `.meta__right` 仅因通知入口设为 column,可简化为与退出对齐的合理布局(保持「退出登录」可见即可)。 + +- [ ] **Step 4: 确认首页菜单仍可点进新页;顶栏无旧文案** + +- [ ] **Step 5: Commit** + +```bash +git add mobile-h5/pages/index/index.vue +git commit -m "$(cat <<'EOF' +fix(mobile-h5): remove WeChat notify shortcut from home header + +EOF +)" +``` + +--- + +### Task 7: 旧设计文档迁移注记 + 图谱(若改了 backend) + +**Files:** +- Modify: `docs/superpowers/specs/2026-08-13-oa-wechat-service-notify-design.md` +- Run: `./scripts/update-graph.sh backend`(因改了 `mini_menu.py`) + +- [ ] **Step 1: Annotate §6.1 / §6.2** + +在 §6.1、§6.2 段首加: + +> **入口已迁移(2026-08-14):** 登录页关注与工作台顶栏绑定入口已废弃;统一见 `docs/superpowers/specs/2026-08-14-wechat-notify-menu-entry-design.md` 与菜单「开启微信通知」。 + +- [ ] **Step 2: Update graph** + +```bash +./scripts/update-graph.sh backend +``` + +- [ ] **Step 3: Commit** + +```bash +git add docs/superpowers/specs/2026-08-13-oa-wechat-service-notify-design.md \ + backend/graphify-out/ +git commit -m "$(cat <<'EOF' +docs: note WeChat notify entry migration to dedicated menu + +EOF +)" +``` + +--- + +### Task 8: 端到端验收 + +- [ ] **Step 1: Checklist** + +1. 登录页无「关注服务号,接收审批通知」。 +2. 首页顶栏无「开启微信审批通知 / 微信通知已开启」。 +3. 角色授权后,宫格在「抄送我的」后出现「开启微信通知」+ 铃铛 PNG。 +4. 步骤 1:去关注 → 我已关注 → 角标已完成;步骤 2 可点。 +5. 步骤 1 未确认时步骤 2 禁用。 +6. 去绑定成功返回后步骤 2 已完成。 +7. 已绑定账号进入:两步均为已完成(无需点「我已关注」)。 +8. 换账号:本地关注标记不串号。 +9. 页面无顶部「已开启」总状态条。 + +- [ ] **Step 2: 跑工具单测** + +```bash +cd mobile-h5 && node --test utils/mp-follow-confirm.test.js +``` + +Expected: PASS + +--- + +## Spec coverage (self-review) + +| Spec 要求 | Task | +|-----------|------| +| 新菜单「开启微信通知」在抄送后 | Task 4 SQL + Task 2/3 路由图标 | +| 步骤 1/2 同页、无顶部已开启条 | Task 3 | +| 我已关注本地确认 | Task 1 + 3 | +| 步骤 2 走 mp-bind | Task 3 | +| bound 则两步完成 | Task 1 `resolveStepDone` + Task 3 | +| 去掉登录关注 | Task 5 | +| 去掉首页顶栏 | Task 6 | +| icon 英文化 PNG | 已有资源 + Task 2 | +| 旧设计迁移说明 | Task 7 | + +无 TBD/占位步骤。