Figma 标签输入框与多选标记系统（Tag Input & Token Field Architecture）组件架构实战：从 Auto Layout Wrap 自动换行、标签增删动效、折叠截断（Max Tag Count）到 Variables 状态机与 Dev Mode 现代前端交付

2026 年 11 月 13 日

一、引言与架构全景：为什么标签输入框是多维数据录入与分类治理的核心？ #

在现代企业级应用中，无论是项目协同平台（如 Jira 需求标签、Linear 议题分类）、CRM 客户关系中台（如用户画像分群、行业属性归属）、即时通讯与协作软件（如邮件收件人 Token 栏、群聊成员提及），还是复杂搜索筛选系统，标签输入框（Tag Input / Token Field） 都扮演着结构化元数据采集与高密度标记呈现的绝对枢纽。

与常规的单行文本框（Single-line Input）或标准下拉选择器（Select）相比，标签输入框具有独特的动态复合形态：它既是一个可供键盘实时键入、检索过滤的文本输入框，又是一个容纳动态新增、撤销移除、可自由换行堆叠的胶囊容器（Pill Container）。

然而，在日常的设计系统搭建与跨团队协作交付中，标签输入框往往暴露出以下高频结构与交互缺陷：

  1. Auto Layout 刚性定宽导致换行排版崩塌：传统设计习惯使用绝对定位或固宽容器，当标签数量激增或标签文本长度不一时，要么被无情裁剪隐藏，要么生硬撑破父级卡片或弹窗外框，未启用现代 Auto Layout 的 Wrap（自动换行）弹性能力；
  2. 标签胶囊（Tag Capsule）与输入光标缺乏层级解耦：将所有标签文本硬编码在一个文本图层中，导致无法对单个标签进行独立的悬浮高亮、鼠标选中、复制或一键点击叉号（Delete Icon）删除操作；
  3. 缺乏防溢出折叠（Max Tag Count）与降级机制：在表格单元格、紧凑型筛选栏等垂直空间高度受限的场景下，大量标签无限制多行展开会导致页面布局产生严重的累积布局位移（CLS），缺少“+N 更多”的优雅折叠浮层规范；
  4. 原型交互停留在静态画板假象：无法通过键盘的 Enter 确认键完成标签即时实例化，也无法通过 Backspace 退格键按序逆向删除已有标签，使得可用性测试与研发评审缺乏真实的反馈链路；
  5. Dev Mode 前端属性映射模糊：前端研发人员在审查标注时，难以从设计稿中直观获取 CSS Flexbox 换行规则（flex-wrap: wrap）、间距令牌（gap）以及 WAI-ARIA 针对 role="combobox" 与 role="listbox" 的键盘可访问性无障碍规范。

为了让设计规范与代码实现达到 1:1 的工业级严谨度，我们将企业级标签输入框体系抽象为四层拓扑结构：

+------------------------------------------------------------------------+
|   Figma 标签输入框与多选标记系统（Tag Input Architecture）四层拓扑结构   |
+------------------------------------------------------------------------+
| 1. 外层容器与 Auto Layout 弹性换行层 (Container & Wrap Layout Layer)     |
|    - 容器模式 (Width: Fill container, Height: Hug contents)            |
|    - Auto Layout 开启 Wrap 自动换行 (Horizontal + Wrap, Gap: 6px/8px)   |
|    - 聚焦态光环与语义边框 (Border: 1px/2px Focus Ring, Radius: 6px/8px)|
+------------------------------------------------------------------------+
| 2. 标签胶囊与原子解耦层 (Tag Capsule & Atomic Tokens Layer)              |
|    - 胶囊三段式结构 (前置图标/头像 + 文本内容 + 右侧关闭叉号)              |
|    - 文本超长防撑破截断 (Text Truncation: 120px Max-Width + Ellipsis)  |
|    - 6 态流转矩阵 (Default, Hover, Selected, Readonly, Disabled, Error)|
+------------------------------------------------------------------------+
| 3. 溢出折叠与计数标记层 (Overflow Collapse & +N Badge Layer)            |
|    - 阈值控制 (Max Tag Count: 显示前 K 个标签，其余收拢)                |
|    - 计数胶囊标牌 (+N 胶囊, 如 "+3 更多...")                            |
|    - 悬浮展开 Popover 浮层 (Open Overlay 展示完整折叠标签列表)           |
+------------------------------------------------------------------------+
| 4. 变量状态机与 Dev Mode 交付层 (Variables & Engineering Layer)         |
|    - Variables 变量驱动 (tagCount, isFocused, inputDraft, errorState)  |
|    - 键盘 Enter 生成 / Backspace 删除双向原型交互闭环                    |
|    - 生产级 React + Tailwind + Ant Design 映射与 WAI-ARIA 无障碍规范    |
+------------------------------------------------------------------------+

二、Auto Layout Wrap 弹性流式换行与光标输入流对齐 #

在 Figma 推出 Auto Layout Wrap（自动换行） 功能之前，实现一个能够容纳多个标签并能自动换行的输入框，需要手工计算高度并创建复杂的嵌套图层。如今，借助 Wrap 机制，我们可以创建完全响应真实内容数量的流体标签容器。

1. 外层弹性容器的参数配置规范 #

  1. 创建外层容器 Frame：选中所有元素，按下快捷键 Shift + A 转化为 Auto Layout；
  2. 开启换行模式：在右侧属性面板的 Auto Layout 区域，将排列方向设置为 Wrap（自动换行图标）；
  3. 尺寸伸缩约束（Resizing）：
    • 水平宽度（Horizontal Sizing）：设置为 Fill container（填充父容器）。这样无论外层画板或父级网格如何缩放，输入框的宽度都能平滑自适应；
    • 垂直高度（Vertical Sizing）：设置为 Hug contents（抱紧内容）。当内部标签数量增多、自动换行到第二行或第三行时，输入框整体高度将根据内容自然向下平滑延伸；
  4. 内边距与元素间距（Padding & Gap）：
    • 水平内边距（Horizontal Padding）：8px 或 12px；
    • 垂直内边距（Vertical Padding）：6px 或 8px；
    • 水平间距（Horizontal Gap / Spacing between items）：6px 或 8px；
    • 垂直换行行间距（Vertical Gap / Counter axis spacing）：6px 或 8px；
  5. 视觉边框与圆角：
    • 边框（Stroke）：1px 实线，绑定浅灰色中性色令牌（如 Token: border-default）；
    • 圆角（Corner Radius）：6px 或 8px。

2. 光标输入占位符（Input Cursor & Placeholder）的流体排版 #

标签输入框必须允许用户在最后一个标签后面继续键入新文字。为了在 Figma 中完美模拟光标流：

  • 在标签之后放置一个由竖线（模拟光标 |）与占位文本构成的横向 Auto Layout，命名为 Input/GhostCursor；
  • 将其水平宽度设置为 Fill container 或赋予一个最小宽度（Min Width: 80px）：
    • 当当前行剩余空间大于 80px 时，光标紧跟在最后一个标签右侧；
    • 当当前行已排满标签、剩余空间不足以容纳光标时，Wrap 引擎会自动将光标推送到下一行首部起始位置，完全契合真实浏览器的 Flex-wrap 流体渲染特性！

深入理解弹性容器与断点规则，可参阅 Auto Layout 自动布局 与 约束系统详解。

三、标签胶囊（Tag Capsule）原子化解耦与多态流转矩阵 #

标签胶囊是整个输入框中的核心原子组件。一个优秀的设计系统绝不会把标签做成不可变动的纯色块，而是将其封装为具备丰富插槽（Component Slot）与属性支持的组件资产。

1. 标签规格与尺寸梯度对比表 #

规格档次 (Size Tier) 胶囊高度 (Height) 文字字阶与行高 内部 Padding (L/R) 关闭叉号尺寸 典型业务适用场景
紧凑型 (Compact / Small) 22px 12px / 16px 4px / 6px 10px * 10px 复杂数据表格行内多选、高密度看板筛选
标准型 (Standard / Medium) 28px 14px / 20px 6px / 8px 12px * 12px 常规 SaaS 业务表单、工单分类与系统设置
宽松型 (Comfortable / Large) 36px 14px / 22px 8px / 12px 14px * 14px 移动端触控场景、主要标签录入、新手向导
头像型 (Avatar / Token) 28px 14px / 20px 2px 8px 2px 4px 12px * 12px 邮件收件人、项目负责人分配、成员协作群组

2. 胶囊内部原子结构与防撑破截断 #

单个标签组件采用三段式 Horizontal Auto Layout 架构：

  1. 前置插槽（Leading Slot）：支持 Boolean 属性一键显隐。可自由切换为 Mini 头像（Avatar 16x16px）、状态圆点（Status Dot 6x6px）或业务分类图标（Category Icon 14x14px）；
  2. 文本核心（Label Text）：
    • 文本图层宽度必须设置为 Hug contents，但在组件属性中配置 Max Width（最大宽度限制）（例如限制为 120px 或 160px）；
    • 开启文本截断模式（Text Truncation: Ellipsis）。当标签内容极长（如“智能硬件研发三组-高级嵌入式软件架构委员会”）时，文字会自动显示为 智能硬件研发...，防止单个极端超长标签直接占满整个输入框甚至横向溢出；
  3. 后置关闭图标（Trailing Close Button）：
    • 包含一个 12px 的叉号矢量图标；
    • 关键工程细节：不要将点击热区局限在 12px，在图标外部套一层 18px * 18px 的无填充 Frame 作为透明点击热区（Hit Slop），以便用户在桌面端或移动端均能精准点击删除，避免误触。

3. 标签胶囊 6 态流转矩阵 #

通过 Figma 的 Component Properties（组件属性） 与 Variants（变体），为标签胶囊定义 6 种标准物理状态：

  • Default（默认态）：背景浅灰（如 #F4F5F7），文本中性深灰（#172B4D），边框透明；
  • Hover（悬浮态）：背景略微加深（#EBECF0），关闭叉号颜色对比度提高；
  • Selected（选中/按住态）：键盘导航选中该标签准备删除时，呈现半透明主色描边（Focus Ring: 2px）；
  • Readonly（只读态）：用于已发布不可修改的标签，隐藏后置关闭叉号；
  • Disabled（禁用态）：文本与背景透明度降为 40%，光标状态为禁止点击；
  • Error/Duplicate（重复/错误态）：当用户输入了已存在的重复标签或不合法字符时，背景变为浅红（#FFECEB），边框变为报警红（#DE350B），视觉强提示。

变体与组件属性高级配置技巧见 组件与变体深度指南 与 团队组件库管理。

四、溢出折叠截断（Max Tag Count + Popover）防撑破机制 #

在复杂后台界面中，若输入框位于表格行或固定高度的工具栏内，一旦选入 10~20 个标签，原本 32px 的表单行会被撑高到数百像素，彻底破坏界面的垂直韵律。为此，必须在设计系统中引入 Max Tag Count 折叠与浮层预览机制。

+------------------------------------------------------------------------+
|   [ Figma ]  [ Design Tokens ]  [ Auto Layout ]  [ +5 更多... v ]      |
+------------------------------------------------------------------------+
                                                           | (鼠标悬浮/点击)
                                                           v
                                            +----------------------------+
                                            | 完整已选标签列表 (共 8 个)   |
                                            | -------------------------- |
                                            | [ Figma ]   [ Design ... ] |
                                            | [ Auto Layout ] [ Dev ... ]|
                                            | [ Variables ]   [ A11y ]   |
                                            | [ Smart Animate ] [ Slots ]|
                                            +----------------------------+

1. 折叠计数胶囊（+N Counter Badge）建模 #

  1. 当已选标签数量超过设定的阈值（例如 maxTagCount = 3）时，第 4 个及后续标签在主输入框中自动转为隐藏；
  2. 在第 3 个标签之后，自动插入一个专门的计数胶囊，命名为 Tag/Counter；
  3. 文本动态显示为 +N 更多（如 +5 更多...）；
  4. 背景使用淡蓝或高亮中性色（如 #E9F2FF），文字使用品牌主色（#0052CC），视觉上与普通标签形成鲜明反差，明确传达“此处可交互展开”的语义。

2. 悬浮展开完整 Popover 气泡浮层 #

在 Figma 原型中构建无损折叠预览流程：

  1. 单独设计一个自适应宽度的卡片画板，命名为 Popover/FullTagList；
  2. 内部采用纵向或换行 Auto Layout，罗列出当前所有已选入的完整标签胶囊；
  3. 为主输入框内的 Tag/Counter 胶囊配置交互连线：
    • 触发时机（Trigger）：While hovering（悬浮时） 或 On click（点击时）；
    • 交互动作（Action）：选择 Open overlay（打开浮层）；
    • 覆盖层位置（Overlay Position）：设置为 Manual（手动定位），将其精准放置在 +N 胶囊正下方 4px 处；
    • 关闭条件：勾选 Close when clicking outside（点击空白处收起）；
    • 转场动效：设置为 Dissolve（溶解），持续时间 150ms。

气泡浮层与定位原理可参考 文字提示与气泡卡片系统 与 下拉菜单与级联选择器。

五、Variables 状态机与键盘 Enter/Backspace 交互原型构建 #

为了向业务方、高管及前端研发呈现真实可用的标签动态输入体验，我们可以利用 Figma 的 Variables（变量） 引擎构建具备双向增删能力的原型状态机。

1. 核心变量表规划 #

变量名称 (Variable Name) 变量类型 (Type) 初始值 (Default) 语义说明与驱动目标
tagCount Number 2 当前已激活显示的标签总数
inputString String "" 用户当前键入的输入框草稿文字
isInputFocused Boolean false 输入框是否处于激活聚焦态（控制光环与光标闪烁）
isTag1Visible Boolean true 第 1 个预制标签胶囊的可见性
isTag2Visible Boolean true 第 2 个预制标签胶囊的可见性
isTag3Visible Boolean false 第 3 个动态生成标签胶囊的可见性
hasDuplicateError Boolean false 是否检测到重复标签冲突错误

2. 键盘事件与增删交互闭环构建 #

  1. 聚焦交互（Focus Event）：
    • 选中输入框整体，绑定 On click；
    • 触发动作：Set variable isInputFocused = true；
    • 边框颜色与聚焦光环即刻响应切换为主色高亮。
  2. 键入与 Enter 确认新增标签：
    • 选中虚拟键盘或输入草稿框，配置快捷键交互（Key/gamepad: Enter）；
    • 触发动作流（Action Sequence）：
      • 动作 1：Set variable isTag3Visible = true（将原本隐藏的第 3 个标签激活呈现）；
      • 动作 2：Set variable tagCount = tagCount + 1；
      • 动作 3：Set variable inputString = ""（清空当前键入草稿）；
      • 动作 4：Scroll to 输入框末尾，确保新标签与光标保持在视口可见区域。
  3. 点击叉号或 Backspace 退格删除标签：
    • 选中标签胶囊内部的关闭叉号图标，绑定 On click（或为选中的标签绑定 Key: Delete / Backspace）；
    • 触发动作：
      • 动作 1：Set variable isTag3Visible = false；
      • 动作 2：Set variable tagCount = tagCount - 1；
    • 此时在 Smart Animate 智能动画引擎加持下，被删除的标签平滑淡出，后方紧随的标签与输入光标会自动以弹性插值向前平滑回弹吸附！

深入变量运算逻辑与高阶交互，可参阅 Figma 变量 Variables 实战 与 原型交互高级配置。

六、Dev Mode 现代前端工程交付：React + Tailwind + Ant Design 规范 #

进入 Dev Mode（开发者模式），前端工程师不再需要靠目测猜测布局规则。标签输入框的本质是标准 Web 表单中基于 Flexbox 的复合无障碍交互组件。

+------------------------------------------------------------------------+
| Figma Dev Mode Inspect Panel                                           |
| ---------------------------------------------------------------------- |
| CSS Box Model: display: flex; flex-wrap: wrap; gap: 8px;               |
| Tokens Mapped: var(--color-border-focus), var(--spacing-sm)            |
| Code Connect: <TagInput maxTagCount={3} allowClear onTagCreate={...} />|
+------------------------------------------------------------------------+

1. 核心 CSS 布局属性与无障碍语义规范 #

在将样式交付给研发时，必须强调以下关键属性：

  • 容器 Flex 换行：必须显式声明 display: flex; flex-wrap: wrap; gap: 8px; align-items: center;，严禁使用 float 或硬编码定位；
  • 动态光标输入：内部 <input> 元素样式必须声明 flex: 1 1 80px; min-width: 60px; border: none; outline: none;，使其在行末灵活占满剩余空隙并在空间不足时自动换行；
  • WAI-ARIA 属性合规：
    • 容器声明 role="combobox" 与 aria-expanded="false"；
    • 胶囊列表声明 role="listbox" 或语义化标签容器；
    • 每个胶囊内部的关闭按钮必须声明 aria-label="删除标签 [名称]"，以便盲人屏幕阅读器能够清晰播报该动作。

2. 生产级 React + TypeScript + Tailwind 规范实现 #

import React, { useState, useRef, KeyboardEvent } from 'react';
import { X, Plus, AlertCircle } from 'lucide-react';

export interface TagItem {
  id: string;
  label: string;
  type?: 'default' | 'primary' | 'success' | 'warning';
}

interface TagInputProps {
  initialTags?: TagItem[];
  placeholder?: string;
  maxTags?: number;
  maxTagLength?: number;
  onChange?: (tags: TagItem[]) => void;
  className?: string;
}

export const EnterpriseTagInput: React.FC<TagInputProps> = ({
  initialTags = [
    { id: '1', label: 'Figma Variables' },
    { id: '2', label: 'Design Tokens' },
  ],
  placeholder = '键入新标签并按 Enter 确认...',
  maxTags = 10,
  maxTagLength = 20,
  onChange,
  className = '',
}) => {
  const [tags, setTags] = useState<TagItem[]>(initialTags);
  const [inputValue, setInputValue] = useState('');
  const [isFocused, setIsFocused] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  // 处理键盘回车新增与退格删除
  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      const trimmed = inputValue.trim();

      if (!trimmed) return;

      if (trimmed.length > maxTagLength) {
        setErrorMessage(`标签长度不能超过 ${maxTagLength} 个字符`);
        return;
      }

      if (tags.some((t) => t.label.toLowerCase() === trimmed.toLowerCase())) {
        setErrorMessage(`标签 "${trimmed}" 已存在，请勿重复添加`);
        return;
      }

      if (tags.length >= maxTags) {
        setErrorMessage(`最多只能添加 ${maxTags} 个标签`);
        return;
      }

      const newTags: TagItem[] = [
        ...tags,
        { id: `${Date.now()}`, label: trimmed, type: 'default' },
      ];
      setTags(newTags);
      setInputValue('');
      setErrorMessage(null);
      onChange?.(newTags);
    } else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
      // 当输入框为空时按下退格键，按序移除末尾最后一个标签
      const newTags = tags.slice(0, -1);
      setTags(newTags);
      setErrorMessage(null);
      onChange?.(newTags);
    }
  };

  // 点击关闭按钮移除指定标签
  const removeTag = (idToRemove: string) => {
    const newTags = tags.filter((t) => t.id !== idToRemove);
    setTags(newTags);
    setErrorMessage(null);
    onChange?.(newTags);
    inputRef.current?.focus();
  };

  return (
    <div className={`w-full flex flex-col gap-1.5 ${className}`}>
      {/* 外部弹性换行输入容器 */}
      <div
        onClick={() => inputRef.current?.focus()}
        className={`min-h-[42px] px-3 py-1.5 rounded-lg border bg-white transition-all duration-200 cursor-text
          flex flex-wrap items-center gap-2
          ${
            errorMessage
              ? 'border-red-500 ring-2 ring-red-100'
              : isFocused
              ? 'border-blue-600 ring-2 ring-blue-100 shadow-sm'
              : 'border-slate-300 hover:border-slate-400'
          }`}
      >
        {/* 渲染标签胶囊列表 */}
        {tags.map((tag) => (
          <span
            key={tag.id}
            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-800 border border-slate-200/80 animate-in fade-in zoom-in-95 duration-150"
          >
            {/* 标签文字支持最大宽度与省略号截断 */}
            <span className="max-w-[140px] truncate select-none" title={tag.label}>
              {tag.label}
            </span>
            <button
              type="button"
              aria-label={`移除标签 ${tag.label}`}
              onClick={(e) => {
                e.stopPropagation();
                removeTag(tag.id);
              }}
              className="p-0.5 rounded-full hover:bg-slate-300/60 text-slate-500 hover:text-slate-800 transition-colors focus:outline-none"
            >
              <X className="w-3 h-3" />
            </button>
          </span>
        ))}

        {/* 内部弹性输入光标流 */}
        <input
          ref={inputRef}
          type="text"
          value={inputValue}
          onChange={(e) => {
            setInputValue(e.target.value);
            if (errorMessage) setErrorMessage(null);
          }}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          onKeyDown={handleKeyDown}
          placeholder={tags.length === 0 ? placeholder : ''}
          className="flex-1 min-w-[80px] bg-transparent text-sm text-slate-900 placeholder:text-slate-400 border-none outline-none focus:ring-0 p-0"
        />
      </div>

      {/* 错误提示或辅助文字信息 */}
      {errorMessage && (
        <div className="flex items-center gap-1 text-xs text-red-600 mt-0.5 animate-in fade-in duration-200">
          <AlertCircle className="w-3.5 h-3.5 flex-shrink-0" />
          <span>{errorMessage}</span>
        </div>
      )}
    </div>
  );
};

有关 Dev Mode 前端组件代码映射与 Code Connect 实践，可参阅 Dev Mode 开发者模式、Code Connect 企业落地指南 以及 无障碍设计 a11y 合规落地实战。

上一篇 Figma 浮动操作按钮与回到顶部系统（Floating Action Button & BackTop Architecture）组件架构实战：从视口绝对定位（Sticky/Fixed）、展开式快捷菜单（Speed Dial FAB）、48px 无障碍热区到 Variables 状态机与 Dev Mode 现代前端交付 下一篇 Figma 数字输入框与数值步进器系统（InputNumber & Stepper Architecture）组件架构实战：从上下微调按钮对齐、前后置单位加成、极值边界（Min/Max/Step）防溢出到 Variables 实时数学计算与 Dev Mode 前端代码交付

🔥 相关教程推荐

查看更多教程
Auto Layout 2026-11-13

Figma 滑块与双向区间选择器（Slider & Range Slider）组件架构实战：从 Auto Layout 弹性导轨、双滑块碰撞拦截、Variables 动态数值绑定到 Dev Mode 前端代码交付

深度拆解 Figma 单滑块（Single Slider）与双向区间滑块（Range Slider）工业级组件封装全流程...

阅读全文
Auto Layout 2026-11-13

Figma 日历与日期时间选择器（Calendar & Date/Time Picker System）组件架构实战：从 Auto Layout 7列网格、区间连线圆角拼接、Variables 动态选日状态机到 Dev Mode 前端交付

深度拆解 Figma 日期选择器（Date Picker）与双向日期区间选择器（Date Range Picker）工业...

阅读全文
Auto Layout 2026-11-13

Figma 文件上传与拖拽投放区系统（Upload & File Dropzone System）组件架构实战：从 Auto Layout 虚线自适应、文件卡片多态解耦、Variables 动态进度条到 Dev Mode 前端交付

全面解析 Figma 企业级文件上传器（Uploader）与拖拽投放区（Dropzone）工业级组件封装全流程：从 Au...

阅读全文

🛠️ 核心手册与速查工具

高频手册与实用设计生产力工具直达
📘
Figma 中文用户指南 官方精译
系统化官方中文指南，零基础上手到进阶排版与组件管理。
🎯
FigJam 白板协作指南 团队协作
头脑风暴、敏捷站会、流程图与用户旅程图实战画板。
⌨️
全平台快捷键速查表 效率翻倍
macOS 与 Windows 双平台核心高频快捷键中英文对照。
📐
界面与画布上手指南 基础必读
图层面板、画布工具栏、右侧属性检查器全面图解。
🛠️
浏览器与环境优化配置 故障排查
WebGL 渲染、硬件加速开启与本地字体同步解决方案。
💡
最佳实践精选教程 深度进阶
Auto Layout v5、Variables 设计令牌与 Dev Mode 研发协同。

❓ 常见问题与答疑 (FAQ)

高频疑难解析与避坑指南
A

完全不需要。绝大多数核心功能在免费 Starter 计划中均可完整体验与实操练习，无需额外付费购买付费团队版。