From ba7f62586542417c5b0f0351ac466da0e598cb13 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Thu, 13 Aug 2026 14:24:29 +0800
Subject: [PATCH] docs: add OA list circle index implementation plan.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../plans/2026-08-13-oa-list-circle-index.md  | 101 ++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-08-13-oa-list-circle-index.md

diff --git a/docs/superpowers/plans/2026-08-13-oa-list-circle-index.md b/docs/superpowers/plans/2026-08-13-oa-list-circle-index.md
new file mode 100644
index 00000000..3c476ddc
--- /dev/null
+++ b/docs/superpowers/plans/2026-08-13-oa-list-circle-index.md
@@ -0,0 +1,101 @@
+# 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:** 仅改全局 `oa-task-list.scss` 中 `.dd-card` / `.dd-card__corner` / `.dd-card__corner-num`；五页 Vue DOM 与 `formatCornerIndex` 不动。
+
+**Tech Stack:** uni-app（mobile-h5）、SCSS
+
+**Spec:** `docs/superpowers/specs/2026-08-13-oa-list-circle-index-design.md`  
+**Demo:** `mobile-ui/zkxw-mobile-oa-list-circle-index-demo.html`（方案 A）
+
+---
+
+## File map
+
+| 文件 | 职责 |
+|------|------|
+| Modify: `mobile-h5/styles/components/oa-task-list.scss` | 折角 → 实心圆；卡片左 padding |
+
+---
+
+### Task 1: 全局圆圈序号样式
+
+**Files:**
+- Modify: `mobile-h5/styles/components/oa-task-list.scss`（「钉钉风列表卡 · 左上折角序号」段，约 L184–212）
+
+- [ ] **Step 1: 替换折角样式为方案 A 圆圈**
+
+将注释与样式块替换为：
+
+```scss
+/* 钉钉风列表卡 · 左上圆圈序号（五中心共用 · 方案 A） */
+.dd-card {
+  position: relative;
+  overflow: hidden;
+  padding-left: 84rpx;
+}
+
+.dd-card__corner {
+  position: absolute;
+  top: 20rpx;
+  left: 20rpx;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0a9f6d;
+  box-shadow: 0 4rpx 12rpx rgba(10, 159, 109, 0.28);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.dd-card__corner-num {
+  position: static;
+  font-size: 20rpx;
+  font-weight: 800;
+  line-height: 1;
+  color: #fff;
+  letter-spacing: -0.02em;
+}
+```
+
+说明：
+- 48rpx / 20rpx / 84rpx 对齐 Demo @375 的 24px / 10px / 42px（rpx≈2×）
+- `__corner-num` 取消折角负定位，由父级 flex 居中
+- 若某页 `.dd-card` 已有 `padding` 简写且覆盖本全局规则，以页面 scoped 为准再补一层；当前五页主样式依赖全局段，以本改为准
+
+- [ ] **Step 2: 目视核对（H5）**
+
+打开草稿箱 / 待办 / 已办 / 我发起的 / 抄送我的：
+1. 左上为绿圆白字，无三角折角
+2. 标题不被圆圈遮挡
+3. 第 12 条（或造数据）显示 `12` 完整
+4. 管理多选勾选仍可用
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add mobile-h5/styles/components/oa-task-list.scss
+git commit -m "$(cat <<'EOF'
+feat(mobile-h5): use solid circle badge for OA list card indexes.
+
+EOF
+)"
+```
+
+---
+
+## Spec coverage
+
+| Spec 要求 | Task |
+|-----------|------|
+| 实心绿圆 + 白字 | Task 1 |
+| 左内边距防挡标题 | Task 1 `padding-left: 84rpx` |
+| 仅改全局 SCSS | Task 1 |
+| 五页一致 / 行为不变 | Task 1 Step 2 |
+| 不改 formatCornerIndex / Vue | 无额外 Task |