对话输入抽屉
@astryxdesign/core v0.7.1 · ChatComposerDrawer
design-spec.pdfapi-schema.jsonscreenshot.pngmeeting-notes.md
使用方法
ChatComposerDrawer 放在 ChatComposer 的 drawer 插槽里,用来装附件、上下文标签、预览这类补充内容。只有当你希望用户能把这部分收起来时,才传 count。
ts
import { ChatComposerDrawer } from '@astryx-vue/core/Chat'解剖
| 部分 | 说明 |
|---|---|
| 抽屉表面 | 抽屉本身,叠在对话输入区主体之上。 |
| 收起开关 | 传了 count 才出现,键盘和鼠标都能操作。 |
| 收起摘要 | 收起时显示的东西:默认是总数徽标加一行文字,也可以换成调用方给的内容。 |
| 内容区 | 调用方给的补充内容;收起来时里面的东西键盘和读屏都碰不到。 |
建议
| 指引 | 实践 |
|---|---|
| 推荐 | label 用一个具体的复数名词,例如 “Attachments”,这样“展开”“收起”读出来才有意义。 |
| 推荐 | 抽屉的开关状态归页面别处管时,用 v-model:is-collapsed 配合 collapsedChange;否则用 defaultIsCollapsed。 |
| 避免 | 把输入区的主要操作放进抽屉。这类控件要用 ChatComposer 的 footerActions 或 sendActions,抽屉收起来时它们还在。 |
示例
常见的用法、变化和状态。
ChatComposerDrawer — 附件





quarterly-report.pdfbudget-forecast.xlsx
抽屉里有两行:一行是可以横向滚动的图片缩略图,一行是可以逐个删掉的文件标签。不传 count,抽屉就一直展开。
ChatComposerDrawer — 可收起
design-spec.pdfapi-schema.jsonscreenshot.pngmeeting-notes.mdtest-results.csvdeploy-log.txt
条目很多、带收起开关的抽屉。传了 count 才有这个开关;收起来以后显示一个带总数的徽标和一行文字。
ChatComposerDrawer — 确认反馈
- Do you want to proceed?
- A
- B
- C
抽屉里放一个确认提问和几个带字母的可选项。用户必须先明确选一个才能继续时用它。
ChatComposerDrawer — 带进度
design-spec.pdfapi-schema.jsonscreenshot.png
抽屉配一条放在页眉的上下文进度条。附件吃掉了一部分可用字数时,用它把用量显示出来。