docs: add OA list circle index badge design spec.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/superpowers/specs/2026-08-13-oa-list-circle-index-design.md

@@ -0,0 +1,59 @@
+# OA 五列表 · 序号圆圈背景 Design
+
+| 项 | 内容 |
+|----|------|
+| 日期 | 2026-08-13 |
+| 状态 | 已定稿（用户确认：方案 A） |
+| 范围 | `mobile-h5` 草稿箱 / 待办 / 已办 / 我发起的 / 抄送我的 |
+| Demo | `mobile-ui/zkxw-mobile-oa-list-circle-index-demo.html`（方案 A） |
+| 前序 | `2026-08-13-oa-list-corner-index-pagination-design.md`（折角序号） |
+
+## 背景
+
+五列表卡片左上已统一为**三角折角序号**。产品要求改为**圆圈背景序号**，视觉对齐 Demo 方案 A（实心品牌绿圆 + 白字）。
+
+## 目标
+
+| 能力 | 要求 |
+|------|------|
+| 圆圈序号 | 左上实心圆 `#0a9f6d` + 白色两位序号；跨页连续规则不变 |
+| 标题不被挡 | 卡片正文区留左内边距，圆圈不压标题 |
+| 五页一致 | 仅改全局样式，五页观感同步 |
+
+## 非目标
+
+- 改 Vue 模板结构或 `formatCornerIndex` 逻辑
+- 序号随状态变色
+- 浅绿圆 / 描边圆 / 贴角出入圆（Demo B/C/D）
+- Web 管理端列表改造
+- 分页逻辑变更
+
+## 决策
+
+| 项 | 选定 |
+|----|------|
+| 样式 | 方案 A：24px（约 48rpx）实心绿圆 + 白字 |
+| 位置 | `top/left` 约 20rpx（对齐 Demo 10px@375） |
+| 阴影 | 轻阴影 `0 2px 6px rgba(10, 159, 109, 0.28)` |
+| 左内边距 | `.dd-card` 左 padding 约 84rpx（对齐 Demo 42px），避免压标题 |
+| 改动面 | 仅 `mobile-h5/styles/components/oa-task-list.scss` 中 `.dd-card` / `.dd-card__corner` / `.dd-card__corner-num` |
+| 序号文案 | 继续 `formatCornerIndex(listIndex + 1)`；DOM 仍用现有 `__corner` / `__corner-num` 类名 |
+
+## UI 规格
+
+- `.dd-card__corner`：改为圆形容器（固定宽高、`border-radius: 50%`、flex 居中），不再用三角 `border` 折角
+- `.dd-card__corner-num`：白字、约 20rpx、字重 800；相对圆容器静态居中（取消折角时代的负定位）
+- `.dd-card`：保留 `position: relative`；左 padding 加大；`overflow: hidden` 可保留（圆圈完全在卡片内）
+- 管理多选行（草稿/待办/抄送）：圆圈仍在 `.dd-card` 内，不挡左侧勾选
+
+## 验收
+
+1. 五页列表序号均为实心绿圆 + 白字，无残留三角折角
+2. 标题不被圆圈遮挡；两位数（如 `12`）完整可读
+3. 搜索/筛选/下拉刷新后序号仍从 `01` 重计；触底分页序号连续
+4. 点击 / 长按 / 管理多选行为不变
+
+## 参考
+
+- Demo A：`mobile-ui/zkxw-mobile-oa-list-circle-index-demo.html`
+- 现样式：`mobile-h5/styles/components/oa-task-list.scss`（「钉钉风列表卡 · 左上折角序号」段）