docs: add OA list circle index implementation plan.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-08-13 14:24:29 +08:00
1 parent b091751f4d
commit ba7f625865
1 file changed
+101
@@ -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 |