From b091751f4d3d51ce5423d596dd4bd5b7bb286938 Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Thu, 13 Aug 2026 14:23:47 +0800 Subject: [PATCH] docs: add OA list circle index badge design spec. Co-authored-by: Cursor --- .../2026-08-13-oa-list-circle-index-design.md | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 docs/superpowers/specs/2026-08-13-oa-list-circle-index-design.md diff --git a/docs/superpowers/specs/2026-08-13-oa-list-circle-index-design.md b/docs/superpowers/specs/2026-08-13-oa-list-circle-index-design.md new file mode 100644 index 00000000..565c686e --- /dev/null +++ b/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`（「钉钉风列表卡 · 左上折角序号」段）