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

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