diff --git a/docs/superpowers/specs/2026-08-12-oa-person-picker-scheme-c-design.md b/docs/superpowers/specs/2026-08-12-oa-person-picker-scheme-c-design.md new file mode 100644 index 00000000..0418bc19 --- /dev/null +++ b/docs/superpowers/specs/2026-08-12-oa-person-picker-scheme-c-design.md @@ -0,0 +1,75 @@ +# OA 表单【人员】弹窗列表对齐方案 C + +## 背景 + +发起审批表单中,自定义控件【人员】(`OaPersonSelect`)弹出的选择列表,与【审批流程】区域「选择审批人 / 选择抄送人」(`OaFlowPreview` 内弹窗)视觉不一致。权威对照:`docs/oa-start-picker-list-style-demo.html` **方案 C · 分割线行表**,以及已落地的流程弹窗样式。 + +## 目标 + +- 【人员】弹窗列表与流程弹窗列表视觉一致:方案 C。 +- 行内文案:姓名 + 副信息(手机优先,否则工号)**同一行**。 + +## 非目标 + +- 不抽公共弹窗组件。 +- 不改部门 / 岗位选择弹窗(除非其 CSS 已共享且无需改模板)。 +- 不改 `OaFlowPreview` 流程弹窗行为或样式(以其为参照基线)。 + +## 设计 + +### 视觉(方案 C) + +- 白底连续行;行间发丝分割线 `#f1f5f9`。 +- 无圆角卡片间距;`padding: 12px 16px`。 +- 选中:整行浅绿底 `var(--brand-green-soft, #ecfdf5)`;姓名色 `#15803d`。 +- 左侧 checkbox / radio;勾选区与文案间距约 10px。 + +上述行外观已由 `mobile-oa-h5/src/styles/oa-form.css` 中 `.oa-pick__list` 落地;本次以**模板结构**对齐流程弹窗为主。 + +### 列表项结构 + +对齐 `OaFlowPreview` 弹窗: + +```vue + + + + +``` + +- 去掉 `:title` / `:label` 双行展示。 +- 多选、单选两套列表均改。 + +### 数据与副信息 + +在 `loadUsers` 映射中: + +- `label`:昵称 / 工号 / id(现有逻辑)。 +- `sub`:有 `phoneNo` 用手机号,否则有 `userNo` 且与姓名不同时用工号,否则空。 +- 搜索仍覆盖姓名、工号、id;若有手机号一并纳入过滤。 + +### 样式补充 + +在 `oa-form.css`(与现有 `.oa-pick__list` 同区)增加: + +- `.oa-pick__name`:14px,主文字色。 +- `.oa-pick__sub`:`margin-left: 8px`,12px,muted(对齐 `.oa-flow-picker__phone`)。 +- 选中态:优先让 `.oa-pick__name` 变深绿(与流程弹窗一致);可保留对 `.van-cell__title` 的现有规则作为兜底。 + +## 验收 + +1. 打开含【人员】字段的发起审批表单,点开选择弹窗。 +2. 列表为白底分割线行;选中后行底浅绿、姓名变深绿。 +3. 姓名与副信息同一行;有手机显示手机,否则工号。 +4. 与同页「选择审批人 / 抄送人」弹窗并排对比,行结构与方案 C 观感一致。 +5. 多选 / 单选模式均正常勾选与确定回填。 + +## 涉及文件 + +- 修改:`mobile-oa-h5/src/oa/components/OaPersonSelect.vue` +- 修改:`mobile-oa-h5/src/styles/oa-form.css`(仅补充 name/sub 同行样式与选中态)