From b2a30d78d8e12653287014ed8e6f888604ead4bd Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Thu, 13 Aug 2026 11:27:36 +0800 Subject: [PATCH] =?UTF-8?q?docs(oa):=20=E6=88=91=E5=8F=91=E8=B5=B7?= =?UTF-8?q?=E7=9A=84=E5=88=97=E8=A1=A8=E5=8D=A1=E7=89=87=E6=8A=98=E8=A7=92?= =?UTF-8?q?=E5=BA=8F=E5=8F=B7=E8=AE=BE=E8=AE=A1=E4=B8=8E=20Demo=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 选定方案 A（左上品牌绿折角 + 两位序号），供实现前评审。 Co-authored-by: Cursor --- ...-08-13-oa-mine-card-corner-index-design.md | 56 ++ ...-mobile-oa-mine-card-index-badge-demo.html | 622 ++++++++++++++++++ 2 files changed, 678 insertions(+) create mode 100644 docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md create mode 100644 mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html diff --git a/docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md b/docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md new file mode 100644 index 00000000..4a5fe36c --- /dev/null +++ b/docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md @@ -0,0 +1,56 @@ +# 我发起的 · 列表卡片左上折角序号 Design + +| 项 | 内容 | +|----|------| +| 日期 | 2026-08-13 | +| 状态 | 已定稿（用户确认方案 A） | +| 范围 | `mobile-h5`「我发起的」列表卡片左上角序号 | +| Demo | `mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html`（方案 A） | + +## 背景 + +「我发起的」列表卡片（`pages/oa/mine/index`）与待办等同为钉钉风白卡片，缺少与 Web 表格「序号」对应的视觉锚点。产品选型对比了折角 / 圆点 / 左色条 / 胶囊 / 金额角标，确认落地 **A 折角序号**。 + +## 目标 + +在每张列表卡片左上角展示跨页连续序号，样式对齐 Demo A，不改变现有点击 / 长按行为。 + +## 非目标 + +- 待办 / 已办 / 抄送 / 草稿列表不同步改造 +- 折角不随审批状态变色 +- 不在角标展示金额（金额仍走 `previewFields` meta） +- 不新增接口字段 + +## 决策 + +| 项 | 选定 | +|----|------| +| 样式 | 左上直角三角折角 + 白色两位序号（`<10` 补零） | +| 颜色 | 品牌绿 `#0a9f6d`（三墙 Token，固定色） | +| 序号 | `(page - 1) * pageSize + index + 1`；当前页 `PAGE_SIZE = 10` | +| 范围 | 仅 `mine/index.vue` | + +## UI 规格 + +- 卡片：`position: relative; overflow: hidden`（现有圆角保留） +- 折角：CSS 三角（约 `34px` 直角边，按 rpx 换算对齐 Demo），位于 `top:0; left:0` +- 数字：白字、字重 ≥700、约 10–11px 量级，贴在折角内侧，不溢出三角 +- 内容区：保持现有 padding；标题不被折角遮挡可读区（折角仅占左上小三角） + +## 数据与交互 + +- 序号由前端根据当前 `page` / `PAGE_SIZE` / `v-for` 下标计算；列表 `reset` 后从 1 起算正确 +- 纯展示；点卡片进详情、长按打印 / 复制重开不变 + +## 验收 + +1. 第 1 页前 10 条显示 `01`–`10`；加载更多后第 11 条为 `11`（或 `11` 不强制补零到三位，两位数原样） +2. 搜索重置后序号从 `01` 重新计 +3. 折角色与 Demo A 一致；状态文案 / hint 色逻辑不变 +4. 无金额角标、无其它列表回归改动 + +## 参考 + +- Demo：`mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html` → Tab「A 折角序号」 +- Web 序号语义：`docs/superpowers/specs/2026-08-11-oa-task-centers-pagination-design.md` diff --git a/mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html b/mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html new file mode 100644 index 00000000..3933fe03 --- /dev/null +++ b/mobile-ui/zkxw-mobile-oa-mine-card-index-badge-demo.html @@ -0,0 +1,622 @@ + + + + + + 我发起的 · 列表卡片左上角序号 Demo + + + +
+
+

我发起的 · 列表卡片左上角序号 / 价格角标

+

+ 对齐 mobile-h5/pages/oa/mine/index 现有钉钉风卡片（标题 / 相对时间 / previewFields / 待处理人 + 状态）。 + 对比五种「左上角」处理方式，便于选型后落地。 +

+
+ 已选定：A 折角序号 —— 左上品牌绿三角 + 白字两位序号（01、02…）； + 序号跨页连续；不随状态变色。详见 + docs/superpowers/specs/2026-08-13-oa-mine-card-corner-index-design.md。 +
+
+ +
+ + + + + +
+ +
+ + +
+
+
A 折角序号 · 选定 · 375px
+
+ +
我发起的
+
+
+
+
+ + 搜索流程名称 +
+
+
+
+
+
+
+ +
+
+

序号规则

+ 与 Web 四个中心一致：跨页连续
+ (page - 1) * pageSize + index + 1
+ 本 Demo 假设第 1 页，pageSize=10。 +
+
+

「价格」从哪来

+ D 方案从 previewFields 里识别含「金额」的字段； + 无金额则显示「无金额」灰角标或隐藏（可配置）。 +
+
+

落地范围建议

+ 先只改「我发起的」；若观感好，再同步待办 / 已办 / 抄送 / 草稿，避免五页风格分裂。 +
+
+
+ + + +