zkxw/docs/superpowers/plans/2026-08-13-oa-list-circle-index.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: 仅改全局 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
Modify: mobile-h5/pages/oa/{drafts,pending,done,mine,cc}/index.vue	scoped .dd-card 左 padding=84rpx（覆盖简写）

---

Task 1: 全局圆圈序号样式

Files:

• Modify: mobile-h5/styles/components/oa-task-list.scss（「钉钉风列表卡 · 左上折角序号」段，约 L184–212）

• Modify: mobile-h5/pages/oa/{drafts,pending,done,mine,cc}/index.vue（scoped padding）

• [x] Step 1: 替换折角样式为方案 A 圆圈

将注释与样式块替换为：

/* 钉钉风列表卡 · 左上圆圈序号（五中心共用 · 方案 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 为准再补一层；当前五页主样式依赖全局段，以本改为准

• [x] Step 1b: 五页 scoped 左 padding

各页 .dd-card：padding: 28rpx 28rpx 24rpx 84rpx;（避免简写覆盖全局 padding-left）

• Step 2: 目视核对（H5）

打开草稿箱 / 待办 / 已办 / 我发起的 / 抄送我的：

1. 左上为绿圆白字，无三角折角
2. 标题不被圆圈遮挡
3. 第 12 条（或造数据）显示 12 完整
4. 管理多选勾选仍可用

（实现侧已做代码核对；实机目视由人工收尾确认。）

• Step 3: Commit

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
)"

git add mobile-h5/pages/oa/{drafts,pending,done,mine,cc}/index.vue
git commit -m "$(cat <<'EOF'
fix(mobile-h5): reserve left padding so OA circle indexes clear titles.

EOF
)"

---

Spec coverage

Spec 要求	Task
实心绿圆 + 白字	Task 1
左内边距防挡标题	Task 1 padding-left: 84rpx
仅改全局 SCSS	Task 1
五页一致 / 行为不变	Task 1 Step 2
不改 formatCornerIndex / Vue	无额外 Task