zkxw/docs/superpowers/plans/2026-08-13-oa-list-corner-index-pagination.md

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

• [x] Step 1: 写失败单测

// 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: 跑测确认失败

cd mobile-h5 && node utils/oa-corner-index.test.js

Expected: module not found / 失败。

• Step 3: 实现

// 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: 跑测通过

cd mobile-h5 && node utils/oa-corner-index.test.js

Expected: oa-corner-index: ok

• Step 5: Commit

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 末尾追加

/* 钉钉风列表卡 · 左上折角序号（五中心共用） */
.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

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 内最前插入：

        <view class="dd-card__corner" aria-hidden="true">
          <text class="dd-card__corner-num">{{ cornerIndex(idx) }}</text>
        </view>

1. script：

  import { formatCornerIndex } from '../../../utils/oa-corner-index.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

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 端