穿梭框怎么设计？搜索、勾选与批量转移

穿梭框要区分“正在勾选”和“已经加入”。左侧展示可添加对象，勾选只是准备动作，执行转移后才进入右侧；右侧再勾选表示准备移除。两侧搜索各自过滤本列，不能改变已添加集合。全选要说清范围，隐藏的勾选项要计数，最终保存前还应检查成员是否仍符合加入条件。

以培训任务配置参与人为例：成员库有500人，负责人要加入设计组的几位同事，同时保留原来的参与人。下面用12条虚构成员记录演示完整过程，500只是业务规模设定。使用Pixso 的 UI 组件与页面设计功能时，可先摆出左右集合和计数，再画搜索与转移后的变化，避免界面看似整齐却让人分不清当前选中了谁。

勾选、添加、移除与保存，是四个不同动作

一个成员可能处于“左侧未勾选”“左侧已勾选待添加”“右侧已添加”“右侧已勾选待移除”四种交互状态。它们属于两个维度：成员在不在培训名单里，以及本次操作有没有勾选他。取消左侧勾选只放弃准备动作，不能被当作移除参与人。

顶部可以使用“可添加成员”和“已添加参与人”作为列名。中央按钮写“添加已勾选成员”“移除已勾选成员”，比单独的左右箭头更明确；空间紧张时保留图标，也需要可识别的动作名称。整个配置页另有“保存参与人”，右侧集合的变化在本例中属于未保存草稿。

Ant Design 的穿梭框文档分别用 selectedKeys 表示勾选项、targetKeys 表示右侧集合，也分别提供勾选与转移变化的回调。这个区分可以帮助产品与开发对齐语义，但本例的保存、禁用和搜索范围仍需按培训业务定义。

用12名成员走一遍，计数才能对上

初始右侧是方悦、许舟，共2人。左侧有10条记录，其中贺琪因账号停用不可添加，因此“左侧10人”和“可操作9人”不是同一个计数。本例把停用成员保留在结果里并标出原因，让负责人能知道为什么找得到却不能选。

1. 在左侧搜索“设计”，结果为刘宁、林可、江雨，共3人。方悦已经在右侧，不应再次出现在左侧待添加结果。
2. 勾选这3人，按钮显示“添加3人”。此时右侧仍是2人，因为勾选尚未改变参与名单。
3. 点击添加后，右侧变为5人。成功转移的3人离开左侧结果，左侧勾选清空；当前搜索结果为空时，显示“设计组符合条件的成员已添加”，同时保留清空搜索入口。
4. 清空左侧搜索，剩余7条记录可见，其中1条停用。右侧搜索“设计”则显示4人，同时说明“显示4人，已添加共5人”，许舟只是被筛选隐藏。
5. 在右侧勾选林可并执行移除，右侧剩4人：方悦、许舟、刘宁、江雨。左侧恢复为8条，林可重新可添加；最后保存这个4人名单。

转移后的计数可以按成员唯一标识核对，不能只按姓名去重。两个同名“刘宁”可能是不同人，列表需要部门或编号辅助识别。单纯把名字从一栏复制到另一栏，容易留下重复项或移错同名成员。

搜索只缩小当前视图，全选必须说明范围

两侧搜索框应有各自的提示，例如“搜索可添加成员”和“搜索已添加参与人”。清空左侧搜索不应清空右侧搜索，也不能重置右侧名单。右侧“无搜索结果”要与“尚未添加参与人”分开：前者应提示改关键词，后者才需要引导从左侧添加。

本例采用保留已勾选项的规则：搜索前已经勾选的成员，在换关键词后仍保持勾选。于是按钮旁必须显示总勾选数及隐藏数量，例如“已勾选4人，其中1人不在当前结果中”。可提供“查看已勾选”或“清空全部勾选”，让用户先确认再转移；不能只显示当前结果里的3个勾选框，却一次添加4人。

顶部复选框在本例表示“全选当前结果中可添加的成员”。取消全选也只影响当前结果，隐藏的勾选项继续保留。文案、半选状态和中央按钮计数必须遵守同一个范围，否则用户以为清空了全部选择，实际还有隐藏成员等待转移。

当500人成员库需要分页或远程搜索时，不能把“当前显示的一页”写成“全部结果”。可直接用“全选本页可添加成员”描述动作；如果业务确实需要一次选择全部匹配结果，则需另行确认范围及数量。此时还应评估列表批量操作是否更合适，穿梭框不必承担无边界的批处理任务。

禁用原因靠近成员，保存失败保留选择

贺琪的停用原因放在该行文字附近，不能只有灰色复选框，也不能只在鼠标悬停时可见。搜索“贺琪”时保留该条记录和说明，有助于区分“人不存在”和“当前不能加入”。如果显示这位成员本身就超出了访问范围，则应按真实权限规则处理，不能为了说明原因暴露不该展示的对象。

名单编辑过程中，刘宁可能被移出可参加范围，或江雨的账号刚被停用。点击保存时，应再次确认成员资格。本例采用整份配置校验：发现无效项就保留当前草稿，在右侧标出具体成员和原因，让负责人移除或处理后再保存，不悄悄丢掉无效项然后提示“保存成功”。

若服务端支持部分保存，也必须明确告知成功与未成功的人员及最终名单，不能沿用本例“整体保存”的反馈。设计稿应先选定一种行为，避免接口部分成功，前端却假定所有人都已加入。

另一位管理员同时修改名单时，直接覆盖会丢掉对方新增的参与人。界面可以提示“参与名单已更新”，展示最新名单与本次增删差异，让用户确认新的结果；至少应保留本次草稿供参考。失败后整页刷新并清空搜索和勾选，会迫使负责人重新找人，也隐藏了冲突原因。

窄屏不用硬塞两个半宽列表

双列穿梭框适合需要来回核对两个集合的桌面配置页。手机屏幕较窄时，可以改成“添加成员”选择页与“已添加参与人”清单：搜索和勾选在一页完成，底部显示待添加数量，确认后返回名单。移除在名单行上操作，最终保存范围与桌面保持一致。

这类适配应复用成员标识、资格规则和保存结果，不必复用左右并排的视觉。即使改成上下堆叠，也要看用户是否需要滚动很远才能看到转移结果。触摸和键盘操作都应能到达选择、添加、移除及保存入口，结果反馈要说明人数和对象，而不是只让箭头闪一下。

沿着2、5、4三次人数变化评审

在 Pixso 画布里，把同一组成员排成四个连续画板：“初始已添加2人”“搜索设计并勾选3人”“转移后已添加5人”“移除林可后剩4人”。每个画板都保留两侧标题、当前搜索词、集合总数和待操作按钮，让评审者能沿着数字核对发生了什么。

画出正常路径后，再增加两张分支画板：一张显示“已勾选4人，1人被搜索隐藏”，另一张显示“刘宁已不符合加入条件，尚未保存”。可在 Pixso 中制作这组成员配置页面，请同事先预测点击添加后的名单，再查看结果。若预测人数与实际结果不同，检查的是集合范围和按钮文案，而不是让用户记住系统规则。

最后回到最初的任务：“加入设计组可参加培训的同事，同时保留原有参与人。”正确结果应包含许舟，即使右侧搜索“设计”时看不到他；已移除的林可应留在可添加集合；停用的贺琪从未加入。用这三个具体对象核对最终页面，比只检查两侧总数是否相加一致更能发现选择错误。