docs: add OA list circle index implementation plan.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
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 |
|
||||
Reference in new issue
Block a user