在现代化协同办公软件（如 Slack、Notion、Linear、飞书、Jira）以及具备社交与富文本属性的中后台产品中，提及与标签输入框（Mentions & Tag Input） 已经成为人机交互的核心枢纽。用户在输入框中键入普通文字的同时，可以通过 @ 呼出成员列表、键入 # 关联业务工单、输入 : 调出表情符号，或者将输入的短语以回车键固化为一个带有独立背景色和删除按钮的标签胶囊（Tag Pill / Chip）。

然而，在 Figma 中构建一套兼具工业级弹性和高保真交互的原型资产，常常令高级 UI/UX 设计师深感棘手：

1. 容器排版坍塌：在输入框内混排静态文本与可变宽度的标签胶囊时，图层极易撑破边界；一旦没有合理配置换行逻辑，标签甚至直接横向穿透外层表单；
2. 多前缀状态爆炸：当同一个输入框需要同时支持 @（人员）、#（工单）、:（表情）多种联想实体时，传统做法需要克隆出数十个变体分支，导致文件内存剧增；
3. 交付脱节与逻辑漏洞：画稿往往只体现了“已有标签”的静态形态，却未能向前端工程师交代表单失焦（Blur）、退格键连续回删（Backspace Deletion）以及无障碍屏幕阅读器辅助属性（ARIA Attributes）。

本文将系统拆解企业级提及与标签输入框的拓扑模型，演示如何利用 Auto Layout Wrap、组件属性与 Figma Variables 状态机构建逼真原型，并打通面向 React Mentions 与 Ant Design 的前端工程交付流水线。

提及与标签输入系统的物理拓扑解耦

为了确保组件在极端长文本或多标签填充下依然保持鲁棒性，必须将组件自底向上解耦为四个层级：

Mentions & Tag Input 物理拓扑架构：
Tag Input Container (外层输入框容器: Auto Layout Wrap)
  ├── Prefix Slot (可选: 搜索或表单前缀图标)
  ├── Tag Capsule Array (已选标签胶囊动态集合)
  │     ├── Tag Pill 1 (图标 + 文本 + 删除叉号 Hover 态)
  │     ├── Tag Pill 2 (高亮人员头像 + 成员姓名 + 移除按钮)
  │     └── Overflow Pill (+3 溢出计数折叠胶囊)
  ├── Inline Ghost Input (内联幽灵输入流: 动态文字 + 闪烁光标)
  └── Suggestions Popover (悬浮联想推荐弹窗: 绝对定位或 Overlay)
        ├── Filter Header (分类过滤标牌: 人员 / 工单 / 标签)
        ├── Suggestion Item (高亮悬停态: 头像/图标 + 匹配字符粗体 + 角色信息)
        └── Suggestion Item (常规默认态)

1. 标签胶囊原子（Tag Pill / Token Chip）

标签是输入框中的最小实体原子，必须具备独立的交互状态集：

• 布局参数：创建水平（Horizontal）Auto Layout，内边距（Padding）设为 4px 8px，元素间距（Gap）设为 4px，圆角设置为 4px 或全圆角胶囊状（999px）。
• 内容编排：左侧预留头像或实体图标插槽（16×16px，支持 组件与变体高阶指南 中的实例交换属性）；中间为 12px 或 13px 实体名称；右侧配置 12×12px 的关闭微图标（Icon: Close / Dismiss）。
• 多态矩阵：封装 Default、Hover（关闭叉号高亮）、Selected（键盘方向键选中准备删除）以及 Disabled（禁用只读）四种变体。

2. 内联幽灵输入流（Inline Ghost Input）

在已有标签的后方，必须跟随一个承载用户当前键入文本与闪烁光标的子容器：

• 容器属性：水平 Auto Layout，高度对齐标签胶囊高度（如 24px），左右内边距为 0，紧贴最后一个标签之后。
• 宽度自适应策略：文本图层设置为 Hug contents（抱紧内容），外层容器设置为 Fill container（充满剩余空间），确保光标始终跟随在最新字符右侧，同时保证用户点击输入框任意空白区域均可唤醒输入焦点。

3. 外层自适应包裹容器（Input Wrapper）

作为容纳所有标签胶囊与输入流的顶层组件：

• 核心布局属性：采用 Auto Layout 模式，方向设为 Horizontal（水平），并将换行属性切换为 Wrap（自动换行）。
• 对齐与间距：横向间距（Horizontal Gap）设为 6px，纵向行间距（Vertical Gap）设为 6px，内部内边距设为 8px 12px。
• 边界约束与尺寸保障：宽度设为 Fill container，最小高度设为 40px。当标签数量增多排满第一行时，后续标签将自动平滑折入第二行，外层输入框高度自然由 40px 弹性撑开至 70px，完全消除传统固定高度引发的溢出穿帮。

4. 联想推荐浮层（Suggestions Popover）

用于展示前缀字符唤起的匹配列表：

• 采用独立 Frame 绘制，配置垂直 Auto Layout，内部包含最大高度限制（如 Max Height: 240px）并勾选 Clip content。
• 配置阴影（Drop Shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1)）与边框，在视觉上形成高层级悬浮感，遵循 设计系统图层规范。

布局核心技巧：Auto Layout Wrap 与折叠降维

在实际项目中，多标签输入框常用于表格单元格（Table Cell）或侧边筛选抽屉（Filter Drawer）。在这类空间受限场景下，任由输入框垂直无限撑高会破坏整页布局节奏。

技巧 A：双模式排版切换（Wrap vs Single-line Ellipsis）

为输入框组件配置一个名为 Layout Mode 的变体属性：

1. Wrap (展开编辑态)：用于详情页或聚焦编辑时，容器允许纵向弹性撑高，展示所有标签；
2. Truncated (紧凑浏览态)：用于只读列表或表格视口，方向保持水平且禁用 Wrap。在最后预留一个 +N 的折叠胶囊（如 +3），其文本图层绑定组件文本属性（Text Property），其余超宽标签自动应用弹性截断（Ellipsis），保持单行高度（32px）。

技巧 B：点击热区增强（Transparent Focus Trap）

为避免用户无法在极小间隙中点击激活光标，可在内联幽灵输入容器后方加入一个宽度为 1fr（Fill container） 的透明辅助 Frame。无论当前行排布了多少个标签，右侧余留的空白区域均被该透明热区覆盖，保证点击后直接进入 Focused 状态。

Variables 状态机实战：前缀触发与实体回填

借助 Figma Variables（变量）与高级条件逻辑（Conditionals），我们可以在单个画板上实现逼真的键盘输入与下拉联想交互。

前缀触发状态机流转逻辑：
[用户在幽灵输入框键入 "@"]
       │
       ├── Set Variable: isPopoverOpen = true
       ├── Set Variable: activePrefix = "@"
       └── Set Variable: popoverTitle = "提及团队成员"
              │
              ▼
[弹出浮层高亮显示成员列表 (Alice / Bob / Charlie)]
       │
       ▼ (用户点击候选项 "Alice")
       ├── Set Variable: isPopoverOpen = false
       ├── Set Variable: hasTagAlice = true
       └── Set Variable: inlineInputText = "" (清空幽灵输入框)
              │
              ▼
[输入框内即刻渲染出 Alice 标签胶囊，光标向后平滑位移]

1. 定义核心状态变量

在 Local Variables 面板中创建专用集合 MentionsSystem：

• isFocused (Boolean)：输入框是否处于聚焦激活状态；
• isPopoverOpen (Boolean)：联想推荐浮层显隐开关；
• activePrefix (String)：当前触发的前缀，枚举包括 "none"、"@"、"#"；
• tagCount (Number)：当前容器内有效标签数量；
• hasTag1 / hasTag2 (Boolean)：用于控制预置实体标签的显隐；
• currentInputValue (String)：记录内联文本框的文字内容。

2. 交互动作编排配置

1. 输入框点击聚焦：
   • 触发条件：On click
   • 动作：Set variable: isFocused = true，使边框从默认灰色切换至品牌主题高亮色。
2. 键入前缀唤起浮层：
   • 在原型演示中，为幽灵文本设置点击或键盘触发：
   • On key down: Shift + 2 (@) -> 执行条件动作：
     • Set variable: isPopoverOpen = true
     • Set variable: activePrefix = "@"
3. 点击选项回填标签：
   • 选中浮层中的第一项（如“张伟 - 前端架构师”），添加 On click 交互：
     • Set variable: hasTag1 = true
     • Set variable: isPopoverOpen = false
     • Set variable: currentInputValue = ""
   • 将对应标签胶囊图层的眼睛图标（Layer Visibility）绑定至 hasTag1 == true。点击瞬间，原本隐藏的标签胶囊立即出现在 Auto Layout 流中，后续元素自动弹性后移！
4. 点击删除叉号（Dismiss）：
   • 为胶囊上的关闭小图标添加 On click 事件：
     • Set variable: hasTag1 = false
   • 胶囊瞬间消失，输入框在 Auto Layout Wrap 作用下自动回缩尺寸。

提及与标签输入实现方案多维横向对比

评估维度	传统纯静态切图画板	基础变体集（Variants）	Figma Variables 状态机	前端生产级 Web 标准
画布维护成本	极高（每次增改状态画板×10）	中等（易遭遇组合爆炸）	极低（单一容器+条件显隐）	依赖组件代码仓库统一管理
动态换行表现	死板（无法根据内容自适应）	有限（需手工预制换行变体）	优秀（Auto Layout Wrap 原生支持）	完美（CSS Flex Wrap 自动换行）
多前缀识别模拟	无法模拟	仅支持固定静态截图展示	支持动态切换成员/工单列表	依据光标正前方字符正则匹配
删除回退响应	需跳转画板	难以真实模拟	真实点击移除，布局瞬时回弹	监听 Backspace 键依次剥离实体
Dev Mode 交付度	差（开发无法获取结构关系）	中等（图层层级较深）	极佳（组件属性与变量完全对齐）	1:1 映射组件 Props 与状态

Dev Mode 现代前端工程交付与无障碍规范

将设计稿交付给工程团队时，必须在 Figma Dev Mode 深度指南 中标注文档契约，确保无障碍与前端逻辑高度一致。

1. W3C WAI-ARIA 无障碍规范契约

提及与标签输入框属于复合型控件（Combobox & Token List），屏幕阅读器用户依赖严格的 ARIA 属性进行交互：

• 输入框主体：容器需声明 role="combobox"，并配置 aria-expanded="true/false" 指示浮层是否展开；
• 关联列表：输入框需通过 aria-controls="mentions-listbox" 关联浮层 ID，并声明 aria-autocomplete="list"；
• 标签胶囊无障碍描述：每个标签内部的删除按钮必须具备明确的无障碍标签，如 aria-label="移除标签：张伟"，避免盲人用户只听到单纯的“按钮”提示；
• 键盘焦点陷阱防护：在浮层展开时，用户按上下方向键（ArrowUp / ArrowDown）应在候选项间流转，并将当前项 ID 动态映射至输入框的 aria-activedescendant 属性。

2. 现代前端代码对齐范式 (React Mentions & Ant Design)

在前端实现中，React 团队常借助成熟的 react-mentions 或 @ant-design 中的 Mentions 组件进行还原：

import React, { useState } from 'react';
import { Mentions, Tag } from 'antd';
import type { MentionProps } from 'antd';

interface EntityItem {
  id: string;
  name: string;
  type: 'user' | 'issue';
}

export const CollaborativeMentionsInput: React.FC = () => {
  const [selectedTags, setSelectedTags] = useState<EntityItem[]>([]);
  const [prefix, setPrefix] = useState<'@' | '#'>('@');

  const users = [
    { value: 'alice', label: 'Alice (UI Designer)' },
    { value: 'bob', label: 'Bob (Frontend Engineer)' }
  ];

  const handleSelect: MentionProps['onSelect'] = (option, prefix) => {
    // 捕获前缀并生成固化标签胶囊
    setSelectedTags(prev => [...prev, { id: option.value, name: option.label as string, type: prefix === '@' ? 'user' : 'issue' }]);
  };

  const handleRemoveTag = (removedId: string) => {
    setSelectedTags(prev => prev.filter(tag => tag.id !== removedId));
  };

  return (
    <div className="tag-input-wrapper" style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', padding: '8px', border: '1px solid #d9d9d9', borderRadius: '6px' }}>
      {selectedTags.map(tag => (
        <Tag key={tag.id} closable onClose={() => handleRemoveTag(tag.id)} color={tag.type === 'user' ? 'blue' : 'green'}>
          {tag.name}
        </Tag>
      ))}
      <Mentions
        style={{ flex: 1, minWidth: '120px', border: 'none', boxShadow: 'none' }}
        prefix={['@', '#']}
        onSearch={(_, currentPrefix) => setPrefix(currentPrefix as '@' | '#')}
        onSelect={handleSelect}
        options={users}
        placeholder="输入 @ 提及成员，输入 # 关联工单..."
      />
    </div>
  );
};

3. CSS 盒模型与光标定位细节建议

告知前端工程师在布局时注意：

• 幽灵输入框应使用 flex-grow: 1 占据行内剩余宽度；
• 避免在标签胶囊中使用固定的 margin，而应完全依赖父级 Flexbox 容器的 gap: 6px，确保换行边缘时首尾标签贴合边框，对齐 设计令牌标准化规范 中的空间比例。

企业级输入系统规范演进与自查清单

构建完善的提及与标签输入系统，是打磨团队协作产品体验的重要基石。在日常设计评审中，可依循以下要点展开快速验收：

1. 边界检查：在多行标签堆叠时，检查外层弹窗或卡片是否被撑破，必要时结合 Figma 常见报错排查手册 检查父级容器高度是否误设为固定高度；
2. 快捷操作：设计师在制作标签排版时，可参考 全平台快捷键终极速查字典 熟练使用 Shift + A 快速嵌套 Auto Layout 与调整内边距；
3. 颜色模式映射：确保标签胶囊的背景色与文字对比度符合 WCAG AA 级标准，尤其在暗黑模式（Dark Mode）下配置专有的背景 Alpha 透明度通道。

通过科学合理的物理分层、Auto Layout Wrap 弹性换行以及 Variables 驱动的前缀联想状态机，团队能够打造出极具专业感与工程鲁棒性的现代提及与标签输入交互系统。