From d310da15234a9ff7195f4b4aced369d20fa9fa5c Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Wed, 12 Aug 2026 14:19:09 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20OA=20=E4=BA=BA=E5=91=98=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=BC=B9=E7=AA=97=E5=AF=B9=E9=BD=90=E6=96=B9=E6=A1=88?=
 =?UTF-8?q?=20C=20=E7=9A=84=E8=AE=BE=E8=AE=A1=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

明确以流程审批人/抄送人弹窗与 Demo 方案 C 为基线，仅改 OaPersonSelect 行内结构与副信息展示。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 ...-08-12-oa-person-picker-scheme-c-design.md | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-12-oa-person-picker-scheme-c-design.md

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
+<van-cell clickable @click="...">
+  <template #icon>
+    <van-checkbox|van-radio class="oa-pick__check" :name="..." @click.stop />
+  </template>
+  <template #title>
+    <span class="oa-pick__name">{{ 姓名 }}</span>
+    <span v-if="副信息" class="oa-pick__sub">{{ 副信息 }}</span>
+  </template>
+</van-cell>
+```
+
+- 去掉 `: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 同行样式与选中态）