Mentions 提及输入

Mentions 用于在一段多行文本里快速插入成员、标签或任务代号。Mentions 不是简单包一层 textarea，而是一次性覆盖 Rue 里真正够用的核心能力：prefix 识别、候选面板、键盘选择、异步检索、placement、allowClear、autoSize、状态与变体，同时保持 Rue 自己的表单视觉节奏。

核心交互

先把最常见的三类场景补充：基础插入、多 trigger token 和远程搜索。

# Basic

直接输入 @ 触发候选面板，支持 rich label、键盘上下选择和 Enter 插入。

最近动作：等待输入 @ 或 #

候选项设计

这里没有照搬其它组件库的面板视觉，而是使用 Rue 更轻、更卡片化的输入体验，候选项支持头像块、角色说明与团队信息。

# Multiple Prefix Tokens

一段文本里同时支持 @ 人员与 # 话题，候选列表跟随当前 prefix 切换。

当前前缀：@支持同一输入框里混合人员和话题标签。

适用场景：任务协作说明、变更日志、评论流、内部工单备注。

当前候选源

@ sakura@ lin@ nano@ ops@ mika@ ria

# Async Search

结合 onSearch、loading 与 filterOption=false，就能接远程检索或服务端搜索。

当前候选数：4，请求状态： idle

用 searchDebounce 控制请求频率，再配合 filterOption=false 接远程搜索。

loading 会保持输入可编辑，同时把面板切到轻量加载态。

请求完成后直接替换 options，即可复用同一套面板和键盘行为。

表单整合

placement、allowClear、autoSize、status 与 variant 都是实际表单里最容易一起出现的组合。

# Placement and allowClear

当输入框靠近容器底部时，可以把候选面板翻到上方；clear 按钮也保持同一层交互。

Review notepanel: top

# Auto Size and Resize Callback

长内容输入时自动增高，同时通过 onResize 把尺寸变化暴露给上层布局。

最新尺寸：宽 0 / 高 0

这个组合适合更新日志、周报、复盘和工单备注。候选面板仍然跟随当前 caret 所在 token 工作，不会因为 textarea 变高而失效。

# Status, Variants, ReadOnly and Disabled

Mentions 直接复用 Rue 当前 textarea 的状态和视觉层级，避免单独维护一套表单皮肤。

辅助能力

除了输入时的候选面板，还补上了静态解析 helper，方便在提交前做 token 分析和二次处理。

# Mentions.getMentions

从最终文本里提取 mentions 结果，适合在提交评论、生成任务引用或做埋点时复用。

解析文本：@sakura #release-notes @lin

提取结果

@ sakura# release-notes@ lin

这个 helper 只负责解析，不依赖当前候选列表，因此适合在输入完成后用于服务端 payload 清洗或前端摘要生成。

API

下表聚焦 Mentions 的关键属性。原生 textarea 的 rows、placeholder、maxLength、name、required 等属性仍会继续透传。

属性	说明	类型	默认值
`allowClear`	显示清空按钮，支持传入 clearIcon 自定义图标	`boolean \| { clearIcon?: any }`	`false`
`autoSize`	根据内容自动撑高 textarea，可限制最小和最大行数	`boolean \| { minRows?: number; maxRows?: number }`	`false`
`filterOption`	本地过滤逻辑；传 false 时跳过内置过滤，适合远程搜索	`false \| (input: string, option: MentionsOption) => boolean`	`内置 value/label 模糊匹配`
`notFoundContent`	没有候选项时展示的空态内容，传 null 可直接隐藏空态面板	`any`	`未找到匹配项`
`onChange`	内容变化时返回当前文本，便于同步输入状态	`(text: string) => void`	`-`
`onSearch`	命中触发词时返回当前搜索片段与 prefix，可用于异步请求	`(text: string, prefix: string) => void`	`-`
`onSelect`	选中候选项后返回 option 与 prefix，便于日志和埋点	`(option: MentionsOption, prefix: string) => void`	`-`
`options`	候选项数组，支持 rich label、禁用项和额外 class/style	`MentionsOption[]`	`[]`
`placement`	控制候选面板出现在输入框上方或下方	`'top' \| 'bottom'`	`'bottom'`
`prefix`	触发 mentions 的前缀字符，支持单个或多个 trigger token	`string \| string[]`	`'@'`
`searchDebounce`	对 trigger 搜索和候选列表刷新做防抖，适合本地过滤或远程检索场景	`number`	`0`
`split`	插入 mentions 后自动补在末尾的分隔符，默认是空格	`string`	`' '`
`status`	语义状态，映射到 Rue 当前 textarea 的 success / warning / error / info 色阶	`'success' \| 'warning' \| 'error' \| 'validating'`	`-`
`validateSearch`	控制某段搜索词是否继续触发候选面板；默认会拦截 split 和换行	`(text: string, props: MentionsProps) => boolean`	`内置校验`
`variant`	输入框视觉变体，使用 Rue 当前表单体系	`'outlined' \| 'filled' \| 'ghost' \| 'borderless' \| 'underlined'`	`'outlined'`
`Mentions.getMentions`	静态 helper，用于从现成文本里提取 mentions 结果	`(value: string, config?: { prefix?: string \| string[]; split?: string }) => Array<{ prefix: string; value: string }>`	`-`