目录
- 前言
- 示例一 仿 Agent 输入条
- 用 inline component 封装内部小部件
- 四个菜单的互斥状态同步
- 多行输入框自动增高与 Shift+Enter 换行
- 生成状态切换与固定占位的状态指示器
- 示例二 仿微信输入框
- 带尖角的聊天气泡与延迟滚动到底部
- 用 closeFlyouts 统一管理多个浮层
- 语音转文字的光标处插入
- 工程下载
前言
在对话类桌面应用中，输入区域往往不仅是单个文本框，还会集成多行自适应高度、工具栏按钮、上浮菜单、表情面板和语音录入等功能，上方同时关联着实时刷新的消息列表。
本文实现两个常见的复合输入框组件。第一个是仿 Agent 输入条，多行文本随内容自动增高，底部带附件、分支、权限和模型四个胶囊选择器，支持回车发送并在生成过程中切换为停止按钮。第二个是仿微信桌面端输入框，上方为带尖角尾巴的聊天气泡列表，底部集成表情面板、表情包面板、文件与截图菜单、按住说话的录音浮层以及语音转文字功能。目前暂时将UI部分组成合集，后续单独出一个完整的功能。
示例一 仿 Agent 输入条
用 inline component 封装内部小部件
底部工具栏包含纯图标按钮、带文字的胶囊下拉钮以及向上弹出的
