From 53e4a52b4f095b4ab327a4ebb8d50d543a4ced39 Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Thu, 13 Aug 2026 11:30:08 +0800 Subject: [PATCH] docs(oa): expand corner index design and plan to all five mobile lists. Co-authored-by: Cursor --- ...6-08-13-oa-list-corner-index-pagination.md | 247 ++++++++++++++++++ .../2026-08-13-oa-mine-card-corner-index.md | 5 + ...-oa-list-corner-index-pagination-design.md | 75 ++++++ ...-08-13-oa-mine-card-corner-index-design.md | 59 +---- 4 files changed, 332 insertions(+), 54 deletions(-) create mode 100644 docs/superpowers/plans/2026-08-13-oa-list-corner-index-pagination.md create mode 100644 docs/superpowers/plans/2026-08-13-oa-mine-card-corner-index.md create mode 100644 docs/superpowers/specs/2026-08-13-oa-list-corner-index-pagination-design.md diff --git a/docs/superpowers/plans/2026-08-13-oa-list-corner-index-pagination.md b/docs/superpowers/plans/2026-08-13-oa-list-corner-index-pagination.md new file mode 100644 index 00000000..2d85087c --- /dev/null +++ b/docs/superpowers/plans/2026-08-13-oa-list-corner-index-pagination.md @@ -0,0 +1,247 @@ +# OA 五列表 · 折角序号 + 滚动分页加固 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:** 五个 OA 列表统一左上折角序号（方案 A），并加固触底滚动分页可触发性。 + +**Architecture:** `formatCornerIndex` 纯函数 + 全局 `.dd-card__corner` 样式；五页模板在 `.dd-card` 内插入折角并用累计 `list` 下标；`pages.json` 为五页补 `onReachBottomDistance`。分页数据逻辑已存在，不重写。 + +**Tech Stack:** uni-app（mobile-h5）、SCSS、Node assert + +**Spec:** `docs/superpowers/specs/2026-08-13-oa-list-corner-index-pagination-design.md` +**Demo:** `mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html`（A） +**取代计划:** `docs/superpowers/plans/2026-08-13-oa-mine-card-corner-index.md`（仅 mine） + +--- + +## File map + +| 文件 | 职责 | +|------|------| +| Create: `mobile-h5/utils/oa-corner-index.js` | 序号文案 | +| Create: `mobile-h5/utils/oa-corner-index.test.js` | 单测 | +| Modify: `mobile-h5/styles/components/oa-task-list.scss` | 全局折角样式 | +| Modify: `mobile-h5/pages.json` | 五页 `onReachBottomDistance: 80` | +| Modify: `mobile-h5/pages/oa/{drafts,pending,done,mine,cc}/index.vue` | 折角 DOM + `cornerIndex` | + +--- + +### Task 1: `formatCornerIndex`（TDD） + +**Files:** +- Create: `mobile-h5/utils/oa-corner-index.js` +- Create: `mobile-h5/utils/oa-corner-index.test.js` + +- [ ] **Step 1: 写失败单测** + +```js +// mobile-h5/utils/oa-corner-index.test.js +import assert from 'node:assert/strict' +import { formatCornerIndex } from './oa-corner-index.js' + +assert.equal(formatCornerIndex(1), '01') +assert.equal(formatCornerIndex(9), '09') +assert.equal(formatCornerIndex(10), '10') +assert.equal(formatCornerIndex(11), '11') +assert.equal(formatCornerIndex(99), '99') +assert.equal(formatCornerIndex(100), '100') + +console.log('oa-corner-index: ok') +``` + +- [ ] **Step 2: 跑测确认失败** + +```bash +cd mobile-h5 && node utils/oa-corner-index.test.js +``` + +Expected: module not found / 失败。 + +- [ ] **Step 3: 实现** + +```js +// mobile-h5/utils/oa-corner-index.js +/** + * @param {number} n 从 1 起的序号 + * @returns {string} + */ +export function formatCornerIndex(n) { + const num = Number(n) + if (!Number.isFinite(num) || num < 1) return '01' + const i = Math.floor(num) + if (i < 10) return '0' + i + return String(i) +} +``` + +- [ ] **Step 4: 跑测通过** + +```bash +cd mobile-h5 && node utils/oa-corner-index.test.js +``` + +Expected: `oa-corner-index: ok` + +- [ ] **Step 5: Commit** + +```bash +git add mobile-h5/utils/oa-corner-index.js mobile-h5/utils/oa-corner-index.test.js +git commit -m "$(cat <<'EOF' +feat(mobile-h5): add formatCornerIndex for OA list corner badges. + +EOF +)" +``` + +--- + +### Task 2: 全局折角样式 + 触底距离 + +**Files:** +- Modify: `mobile-h5/styles/components/oa-task-list.scss` +- Modify: `mobile-h5/pages.json` + +- [ ] **Step 1: 在 `oa-task-list.scss` 末尾追加** + +```scss +/* 钉钉风列表卡 · 左上折角序号（五中心共用） */ +.dd-card { + position: relative; + overflow: hidden; +} + +.dd-card__corner { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 68rpx 68rpx 0 0; + border-color: #0a9f6d transparent transparent transparent; + pointer-events: none; + z-index: 1; +} + +.dd-card__corner-num { + position: absolute; + top: -60rpx; + left: 8rpx; + font-size: 20rpx; + font-weight: 800; + line-height: 1; + color: #fff; + letter-spacing: -0.02em; +} +``` + +说明：`App.vue` 已 `@import` 本文件，无需改各页 scoped 重复写折角色。 + +- [ ] **Step 2: `pages.json` — 五页 style 增加触底距离** + +对以下 path 的 `style` 对象各加一行 `"onReachBottomDistance": 80`（与现有 `enablePullDownRefresh` 并列）： + +- `pages/oa/drafts/index` +- `pages/oa/pending/index` +- `pages/oa/done/index` +- `pages/oa/mine/index` +- `pages/oa/cc/index` + +- [ ] **Step 3: Commit** + +```bash +git add mobile-h5/styles/components/oa-task-list.scss mobile-h5/pages.json +git commit -m "$(cat <<'EOF' +feat(mobile-h5): add shared OA card corner styles and reach-bottom distance. + +EOF +)" +``` + +--- + +### Task 3: 五页模板接入折角 + +**Files:** +- Modify: `mobile-h5/pages/oa/drafts/index.vue` +- Modify: `mobile-h5/pages/oa/pending/index.vue` +- Modify: `mobile-h5/pages/oa/done/index.vue` +- Modify: `mobile-h5/pages/oa/mine/index.vue` +- Modify: `mobile-h5/pages/oa/cc/index.vue` + +每页做相同三件事（草稿/待办/抄送的 `v-for` 在 row 上，折角仍放在内层 `.dd-card`）。 + +- [ ] **Step 1: `mine/index.vue`** + +1. `v-for="(row, idx) in list"` +2. 在 `.dd-card` 内最前插入： + +```vue + +``` + +3. script： + +```js + import { formatCornerIndex } from '../../../utils/oa-corner-index.js' +``` + +```js + cornerIndex(idx) { + return formatCornerIndex(Number(idx) + 1) + }, +``` + +- [ ] **Step 2: `done/index.vue`** — 同 Step 1（结构与 mine 最接近） + +- [ ] **Step 3: `drafts/index.vue`** + +`v-for="(row, idx) in list"` 在 `.draft-row` 上；折角放进内层 `.dd-card` 开头；同样 import + `cornerIndex`。 + +- [ ] **Step 4: `pending/index.vue`** — 同 drafts（`.pending-row` + 内层 `.dd-card`） + +- [ ] **Step 5: `cc/index.vue`** — 同 pending（管理多选行 + 内层 `.dd-card`） + +- [ ] **Step 6: 手工验收** + +| 页 | 路径 | 检查 | +|----|------|------| +| 草稿箱 | `/#/pages/oa/drafts/index` | 折角 + 触底 + 搜索重置 `01` | +| 待办 | `/#/pages/oa/pending/index` | 同上；管理勾选不受折角影响 | +| 已办 | `/#/pages/oa/done/index` | 同上 | +| 我发起的 | `/#/pages/oa/mine/index` | 同上；长按仍可用 | +| 抄送 | `/#/pages/oa/cc/index` | 同上；未读点仍可见 | + +- [ ] **Step 7: Commit** + +```bash +git add \ + mobile-h5/pages/oa/drafts/index.vue \ + mobile-h5/pages/oa/pending/index.vue \ + mobile-h5/pages/oa/done/index.vue \ + mobile-h5/pages/oa/mine/index.vue \ + mobile-h5/pages/oa/cc/index.vue +git commit -m "$(cat <<'EOF' +feat(mobile-h5): show corner index on all five OA task list cards. + +EOF +)" +``` + +--- + +## Spec coverage + +| Spec | Task | +|------|------| +| 折角样式 / `#0a9f6d` / 补零规则 | Task 1–2 | +| 五页序号 | Task 3 | +| 滚动分页保持 + 触底距离 | Task 2 Step 2 + 既有 `loadList` | +| 搜索重置从 01 | 既有 reset + `idx` | +| 管理多选不挡 | 折角在 card 内、`pointer-events: none` | + +## Out of scope + +- 金额角标、状态变色折角、后端改动、Web 端 diff --git a/docs/superpowers/plans/2026-08-13-oa-mine-card-corner-index.md b/docs/superpowers/plans/2026-08-13-oa-mine-card-corner-index.md new file mode 100644 index 00000000..becc32d0 --- /dev/null +++ b/docs/superpowers/plans/2026-08-13-oa-mine-card-corner-index.md @@ -0,0 +1,5 @@ +# 我发起的 · 列表卡片折角序号 Implementation Plan（已升级） + +> **已由** [`2026-08-13-oa-list-corner-index-pagination.md`](./2026-08-13-oa-list-corner-index-pagination.md) **替代。** +> +> 新计划覆盖五个 OA 列表的折角序号 + 触底距离加固。请勿按本文仅改 mine。 diff --git a/docs/superpowers/specs/2026-08-13-oa-list-corner-index-pagination-design.md b/docs/superpowers/specs/2026-08-13-oa-list-corner-index-pagination-design.md new file mode 100644 index 00000000..09e71327 --- /dev/null +++ b/docs/superpowers/specs/2026-08-13-oa-list-corner-index-pagination-design.md @@ -0,0 +1,75 @@ +# OA 五列表 · 滚动分页 + 折角序号 Design + +| 项 | 内容 | +|----|------| +| 日期 | 2026-08-13 | +| 状态 | 已定稿（用户确认：五页统一） | +| 范围 | `mobile-h5` 草稿箱 / 待办 / 已办 / 我发起的 / 抄送我的 | +| Demo | `mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html`（方案 A） | +| 替代 | 原 `2026-08-13-oa-mine-card-corner-index-design.md` 范围升级为本篇 | + +## 背景 + +五页列表卡片均为钉钉风白卡片，需统一： + +1. **触底滚动分页加载**（累计列表） +2. **左上折角序号**（方案 A） + +## 现状 + +五页均已实现 `PAGE_SIZE=10`、`onReachBottom`、`loadList(reset)` 累计拼接、`hasMore` / 「加载更多…」/「已经到底了」。本期以**核对与加固**为主，不为分页另起架构。 + +折角序号尚未落地。 + +## 目标 + +| 能力 | 要求 | +|------|------| +| 滚动分页 | 触底加载下一页；下拉刷新 / 搜索或筛选重置回到第 1 页并清空累计列表 | +| 折角序号 | 左上品牌绿三角 + 白字序号；跨页连续；`01`…`09`，`10`/`11` 不补三位 | + +## 非目标 + +- 金额角标、折角随状态变色 +- 新增分页/序号相关 API 字段 +- Web 管理端列表改造 + +## 决策 + +| 项 | 选定 | +|----|------| +| 折角样式 | 方案 A：`#0a9f6d` 直角三角 + 白色序号 | +| 序号文案 | `formatCornerIndex(listIndex + 1)`；累计 `list` 下标，**勿**用已自增的 `page` 套公式 | +| 样式放置 | 全局 `styles/components/oa-task-list.scss`（`App.vue` 已引入），五页共用 | +| 工具函数 | `mobile-h5/utils/oa-corner-index.js` | +| 分页 | 保持现有逻辑；五页 `pages.json` 统一补 `onReachBottomDistance: 80`（便于触底触发） | + +## 分页规格（验收基线） + +各页已有行为须保持： + +- `reset=true`：`page=1`、清空/替换 `list`、重拉 +- `reset=false`：`concat`、`page++`（有数据时） +- `hasMore = loaded < total && rows.length > 0` +- 底栏：加载中「加载更多…」，无更多「已经到底了」 + +涉及页：`drafts` / `pending` / `done` / `mine` / `cc`。 + +## UI 规格（折角） + +- `.dd-card`：`position: relative; overflow: hidden` +- 折角：直角边约 `68rpx`（对齐 Demo 34px@375） +- 数字：约 `20rpx`、字重 800、白色，贴折角内侧 +- 管理多选行（草稿/待办/抄送）：折角在卡片上，不挡左侧勾选 + +## 验收 + +1. 五页均可触底加载；不足一页显示「已经到底了」 +2. 搜索/筛选/下拉刷新后序号从 `01` 重计 +3. 第 1～10 条为 `01`–`10`，第 11 条为 `11` +4. 五页折角色一致；点击 / 长按 / 管理多选行为不变 + +## 参考 + +- Demo A：`mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html` +- 分页语义：`docs/superpowers/specs/2026-08-11-oa-task-centers-pagination-design.md` diff --git a/docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md b/docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md index 4a5fe36c..99ece54d 100644 --- a/docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md +++ b/docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md @@ -1,56 +1,7 @@ -# 我发起的 · 列表卡片左上折角序号 Design +# 原 mine-only 折角序号设计（已升级） -| 项 | 内容 | -|----|------| -| 日期 | 2026-08-13 | -| 状态 | 已定稿（用户确认方案 A） | -| 范围 | `mobile-h5`「我发起的」列表卡片左上角序号 | -| Demo | `mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html`（方案 A） | +> **已由** [`2026-08-13-oa-list-corner-index-pagination-design.md`](./2026-08-13-oa-list-corner-index-pagination-design.md) **替代。** +> +> 范围从仅「我发起的」扩展为五个 OA 列表（草稿 / 待办 / 已办 / 我发起 / 抄送）统一滚动分页验收 + 方案 A 折角序号。 -## 背景 - -「我发起的」列表卡片（`pages/oa/mine/index`）与待办等同为钉钉风白卡片，缺少与 Web 表格「序号」对应的视觉锚点。产品选型对比了折角 / 圆点 / 左色条 / 胶囊 / 金额角标，确认落地 **A 折角序号**。 - -## 目标 - -在每张列表卡片左上角展示跨页连续序号，样式对齐 Demo A，不改变现有点击 / 长按行为。 - -## 非目标 - -- 待办 / 已办 / 抄送 / 草稿列表不同步改造 -- 折角不随审批状态变色 -- 不在角标展示金额（金额仍走 `previewFields` meta） -- 不新增接口字段 - -## 决策 - -| 项 | 选定 | -|----|------| -| 样式 | 左上直角三角折角 + 白色两位序号（`<10` 补零） | -| 颜色 | 品牌绿 `#0a9f6d`（三墙 Token，固定色） | -| 序号 | `(page - 1) * pageSize + index + 1`；当前页 `PAGE_SIZE = 10` | -| 范围 | 仅 `mine/index.vue` | - -## UI 规格 - -- 卡片：`position: relative; overflow: hidden`（现有圆角保留） -- 折角：CSS 三角（约 `34px` 直角边，按 rpx 换算对齐 Demo），位于 `top:0; left:0` -- 数字：白字、字重 ≥700、约 10–11px 量级，贴在折角内侧，不溢出三角 -- 内容区：保持现有 padding；标题不被折角遮挡可读区（折角仅占左上小三角） - -## 数据与交互 - -- 序号由前端根据当前 `page` / `PAGE_SIZE` / `v-for` 下标计算；列表 `reset` 后从 1 起算正确 -- 纯展示；点卡片进详情、长按打印 / 复制重开不变 - -## 验收 - -1. 第 1 页前 10 条显示 `01`–`10`；加载更多后第 11 条为 `11`（或 `11` 不强制补零到三位，两位数原样） -2. 搜索重置后序号从 `01` 重新计 -3. 折角色与 Demo A 一致；状态文案 / hint 色逻辑不变 -4. 无金额角标、无其它列表回归改动 - -## 参考 - -- Demo：`mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html` → Tab「A 折角序号」 -- Web 序号语义：`docs/superpowers/specs/2026-08-11-oa-task-centers-pagination-design.md` +保留本文档以免旧链接失效；实现与评审请以新设计为准。