跳到主内容
创建时间:最后更新:作者:白川

UI 库技术选型

上一篇搭好了桌面应用的基础工程,接下来要让它具备工作台的样子:左侧可以切换项目和聊天,中间展示回答,底部输入要求,设置则通过菜单和弹窗完成。

这些界面可以借助 UI 库来搭建。UI 库提供可以重复使用的部件,例如按钮、输入框、菜单和消息列表。选好这些部件,就能从已有的交互基础开始,把更多精力放在工作台自己的功能上。

当前项目的主要组合是 Animate UI + assistant-ui:前者完善弹窗、菜单等通用交互,后者组织聊天界面。基础控件沿用 shadcn 的源码组织方式和统一主题,回答内容由 Streamdown 渲染,ReUI 则提供布局与复杂组件参考。

先分清:通用界面与聊天界面

创建项目时,需要填写名称、选择文件夹、点击保存。这类操作与普通应用相似,重点是控件清楚、反馈及时、操作一致。

聊天则有另外一组要求:回答会逐步出现,用户可以停止、重试,消息中还可能包含代码和文件操作结果。它需要让输入框、消息和操作按钮共同理解当前对话状态。

因此,这几种方案承担的是不同工作,可以组合使用:

方案在工作台中的用途选择它的主要理由
Animate UI
弹窗、菜单、提示与折叠区域
保留已有组件外观,补充连贯的交互过渡
assistant-ui
输入、消息、生成状态、停止与重试
从可组合的对话结构开始,减少重复组织聊天交互
ReUI
应用布局与复杂组件参考
有现成示例,便于按具体页面需求取用
Streamdown
回答中的文字、代码、表格和图表
适应内容逐步到达、格式尚未完整的情况

Animate UI:保留自己的外观,完善操作过程

工作台里,打开设置、展开项目菜单、收起侧栏,都会发生界面状态变化。适度的过渡能让用户看清内容从哪里出现、哪一部分刚刚改变。

选择 Animate UI 的一个主要理由,是它可以在已有组件的基础交互部件中加入动效。项目仍然保留自己的按钮尺寸、圆角、颜色和布局,不必为了动画重新换一套外观。Animate UI 官方介绍

当前项目采用它的 Radix 对应实现,用于弹窗、菜单和提示等位置。键盘导航、焦点管理等基础行为可以沿用底层方案,再由业务页面补上标题、字段和具体操作。

这样的好处是,设置页和项目弹窗能够共用相同组件,后续调整也更集中。应用自己的页面和侧栏过渡则由 Motion 补充。动效只用在有助于理解状态变化的位置,聊天正文保持稳定,并尊重系统的减少动态效果偏好。

assistant-ui:把聊天做成一组配合工作的组件

一个聊天区域除了显示文字,还要知道什么时候正在生成、停止按钮是否可用、重试应该对应哪条回复。如果每个按钮和消息都单独维护状态,功能增加后就容易出现不同步。

assistant-ui 提供消息、输入区和操作栏等可组合组件,并通过前端 runtime 将状态与操作连接起来。这里的 runtime 可以理解为“驱动聊天界面的那部分程序”,负责让组件读到一致的对话状态。

选择它的优势,是既有现成的对话结构,又能保留工作台自己的布局。 项目可以调整消息样式、组合输入区、单独展示文件操作结果,不必把所有内容塞进固定的聊天模板。

它也允许界面通过适配器连接自己的服务。当前项目保留本机服务和 Agent 执行逻辑,将返回的正文、思考和工具事件转换成消息片段,再交给聊天组件展示。UI 方案因而不会要求项目重新选择后台执行方式。

不过,聊天组件不会自动完成模型调用、文件权限或历史保存。这些仍由工作台实现。理解这条边界,才能分清“界面已经搭好”和“真实任务已经接通”。

ReUI:复杂页面有现成的起点

ReUI 的优势在于组件和组合示例丰富。除了基础控件,还可以找到 Tree、Data Grid、Kanban 等适合层级导航、数据列表和任务看板的方案。

对工作台来说,它提供了可以考察的页面结构。例如,任务记录确实需要筛选和排序时,可以从 Data Grid 开始;内容需要分层导航时,再考虑 Tree。这样不必每次从空白页面拼装复杂交互。

当前项目已经参考了 ReUI 的应用布局,部分公共控件也保留了来源说明。复杂组件则按需要取用,并统一到已有的字体、间距和主题中。免费的组件与示例、Pro 区块和模板范围不同,接入时需要核对对应许可。

因此,ReUI 与 Animate UI 并不需要二选一:前者帮助选择结构与组件,后者改善已有控件的交互过程。

Streamdown:让逐步生成的回答也容易阅读

AI 生成代码时,界面可能先收到代码块的开头,过一会儿才收到结尾。直接按完整文章处理,难以兼顾这段尚未结束的内容。

Streamdown 面向流式 Markdown,适合处理持续到达的文字和未闭合标记。项目通过 assistant-ui 的适配器接入它,并补充代码高亮、公式和图表等展示能力。Streamdown 介绍、assistant-ui 集成说明

选择它,是为了让用户在回答生成期间就能阅读内容。复制、外链打开和格式异常回退仍按工作台自己的规则处理,文件工具结果也由独立组件展示。

为什么这组方案适合当前工作台

当前工作台主要围绕项目聊天、设置和本机文件处理展开。它需要一套可以持续调整的界面,同时保留自己的模型与工具服务。

这组方案分别回应了这些需要:Animate UI 完善通用交互,assistant-ui 组织对话,Streamdown 处理回答内容,ReUI 提供可以按需采用的结构参考。底下共用本地公共组件、Tailwind 和主题规则,避免每个功能区形成不同风格。shadcn 的源码方式也允许项目直接调整组件,相应的维护工作由项目承担。shadcn/ui 官方介绍

后续增加功能时,可以先判断需要改变什么:设置弹窗优先复用公共组件,聊天操作沿用 assistant-ui,复杂列表再考察 ReUI。这样,每加入一个库都有具体用途,也能知道接入后哪些工作仍需要自己完成。