CommentComposer

评论输入框：上方是可长到五行的输入（支持 typeahead 触发符，以及粘贴或拖入图片），下方是添加图片、表情和 Post。它是受控的：草稿由宿主持有，评论发出后再由宿主清空。空草稿不会发出。

这是 Meta Astryx 实验室 CommentComposer 的 Vue 移植，对齐 v0.7.13（含后续焦点行为：禁用控件仍留在 Tab 顺序里，忙碌编辑器的 Cancel 链接保持 Tab 落脚点）。表情按钮复用独立的 EmojiPicker。CommentThread、Comments 和 CommentPin 不在这一刀里。

此组件在 @astryx-vue/lab 中，只通过 canary 标签发布。

导入

import { CommentComposer, CommentComposerBase } from '@astryx-vue/lab'

CommentComposer 是独立表面。之后的讨论串会用 CommentComposerBase 做回复和编辑。

Props

名称	类型	默认值	说明
value / modelValue	string	''	受控草稿。用 value + @change 或 v-model 绑定。
placeholder	string	文案 @astryx.commentComposer.placeholder	输入框占位符。
label	string	占位符	输入框的无障碍名称。
isSubmitting	boolean	false	发出过程中按住添加图片和表情。输入框保持可用，以免焦点落到 <body>。Post 仍可聚焦，但会拒绝第二次按下。
error	string	—	在输入框上方显示错误 Banner。
anchor	CommentAnchor	—	新的行内评论所附着的段落，显示在输入框上方。
highlightColor	CommentHighlightColor	'yellow'	引用段落竖线的调色板颜色。
onUploadImages	(files: readonly File[]) => CommentUploadedImage[] | Promise<...>	—	上传添加、粘贴或拖入的图片，并以 Markdown 追加到草稿。出现添加图片按钮。忙碌时不会开始上传。
triggers	readonly ChatComposerTrigger[]	[]	Typeahead 触发符，例如用 @ 搜索人员。
agentCommands	readonly CommentAgentCommand[]	[]	评论可以呼叫的智能体：输入 / 会列出它们。
hasEmojiPicker	boolean	true	是否显示表情按钮。

CommentAnchor 是 { quote: string; status?: 'anchored' \| 'orphaned' }。CommentUploadedImage 是 { url: string; alt: string }。CommentHighlightColor 是诸如 'yellow'、'green' 的调色板名。

事件

名称	载荷	说明
change / update:modelValue	value: string	草稿发生了变化。
submit	value: string	按下 Enter 或 Post。空草稿不会发出。宿主应在评论发出后清空草稿。
retry	—	错误 Banner 上的重试。
anchor-dismiss	—	移除引用文字。

插槽

名称	说明
controls	添加图片和表情按钮之后、由产品自己放的控件。只放一个短控件：页脚不会换行。
composer	替换默认输入框，同时保留它的状态和上下文。

键盘与忙碌行为

输入框最多长到五行。Enter 发出，Shift+Enter 换行。输入法正在组字时，Enter 仍留给输入法。点输入框里的空白会聚焦输入，点到它自己的控件或它打开的浮层则不会。

isSubmitting 不会给输入框、文件选择、Cancel 或 Post 加上原生 disabled。添加图片和表情使用 aria-disabled，仍可聚焦。编辑上下文里的 Cancel 仍留在 Tab 顺序中，直到发出结束才响应。忙碌时会拒绝粘贴或拖入的图片，以及第二次 Post。