图片显示:输入框上方有横向可滚动的应用切换标签(胶囊形态,带图标),点击可查看详情,支持固定置顶。我来实现这个功能。
清楚了全部结构。现在新建应用切换栏组件,并更新输入框和主页面。
现在更新 chat-input,让输入框背景变白,并移除内部的 bg-muted/50:
现在更新主页面,引入 AppSwitcher,加分隔线,管理 activeAppId 和 pinnedAppIds 状态:
最后,在底部输入区域加上分隔线和 AppSwitcher:
完成以下更新:新建 AppSwitcher 组件,在输入框上方展示横向可滚动的应用标签栏(固定的应用排在前面,带蓝紫渐变激活态);点击应用标签可切换激活状态,右键/长按或点击"全部"可打开底部详情抽屉,抽屉内支持"固定到输入框"和"取消固定"操作;输入框底色改为纯白并添加轻投影,对话区与输入区之间添加了细分隔线。