穿梭框

Transfer

UI 组件也叫：穿梭选择器、双栏选择、Transfer List、左右选择框

一句话：左右两个列表加中间的箭头按钮，把项目从「可选」一侧移到「已选」一侧，用来批量挑选。

详细解释

穿梭框由左右两栏组成：左边是全部可选项，右边是已选项，中间有向右、向左两个箭头按钮。用户在左边勾选若干项，点向右箭头就把它们移到右边；反过来也能移回去。每栏顶部通常有搜索框和「全选」复选框，并显示「已选 3 / 共 20 项」。典型场景：给角色分配权限、选择要导出的字段、把成员加入项目组。

和 下拉选择（多选模式）相比，穿梭框能同时看到「选了什么」和「还剩什么」，适合在几十到几百项里挑一批。和 树形控件 的区别：数据有层级时用带复选框的树，数据是平铺的一列时用穿梭框。和 级联选择 差别更大：级联选择是沿层级选出一个值。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

做一个成员分配穿梭框：左栏「全部成员」、右栏「已加入」，每栏顶部有搜索框和全选复选框，列表项前有复选框；中间上下两个箭头按钮，没有勾选时置灰；每栏标题右侧显示「已选 2 / 共 30 人」，列表超过 8 项时栏内滚动。

由左右两个带标题、搜索框和复选框列表的面板，以及中间的左右移动按钮组成。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。