Terax Composer状态管理设计多表面共享输入背后的架构解析【免费下载链接】terax-aiLightweight (7MB) Terminal-first AI-native dev workspace项目地址: https://gitcode.com/GitHub_Trending/te/terax-ai在 Terax 这个终端优先的轻量级 AI 原生开发工作区仅 7MB中ComposerAI 输入框的状态管理是一个精巧的设计样本同一个输入框状态被底部输入栏、状态栏、浮动迷你窗口等多个界面表面Surface共享。本文将从新手视角拆解这套单一数据源 信号总线的架构让你看懂多表面共享输入背后的关键机制。为什么一个输入框要分身到整个工作区Terax 的 AI 能力不只藏在某个面板里而是渗透在多个位置底部输入栏WorkspaceInputBar在 Shell 与 AI 模式间无缝切换还能展示文件、片段、命令芯片状态栏控件AiStatusBarControls随时唤起与操作 AI 会话浮动迷你窗口AiMiniWindow一个可拖动、可缩小的悬浮对话窗如果每个表面各维护一份输入状态就会出现这里打了字、那里却看不到的割裂体验。Terax 的解法是状态只存一份所有表面只是它的不同投影。核心AiComposerProvider 单一数据源整个设计的枢纽是一个 React Context Provider挂载在应用根部一次性包裹整个界面壳见 App.tsx。Provider 的源码在 composer.tsx它集中管理状态作用value/setValue输入框文本files附件文件、图片、选区pickedSnippets/pickedCommands#选中的代码片段与/命令isBusy是否正在思考/流式输出submit/stop发送与中止任何表面只需调用一个 hook 即可接入useComposer()— 见 composer.tsx在 Provider 外使用会直接抛错从机制上保证了单一来源不被绕过。三个表面如何共享同一份输入状态1. 输入区本体— AiComposerInput.tsx 负责文本渲染与智能触发输入#弹出片段/命令选择器输入弹出工作区文件选择器如 L170-L187 的选文件逻辑。它本身不存状态全部读写都走useComposer()。2. 底部输入栏— WorkspaceInputBar.tsx 通过ChipsRow渲染c.files、c.pickedSnippets等芯片L133-L147。注意删除芯片时还会反向同步文本如 L138-L144 从正文里移除对应的#handle保持芯片与文本两种视图一致——这正是共享状态的红利。3. 浮动迷你窗口— AiMiniWindow.tsx 迷你窗口展示的是同一个会话读activeSessionId因此你在任意表面发送的消息、迷你窗口都同步可见。跨表面协作chatStore 的信号 一次性消费模式表面之间如何通信答案是一个基于 Zustand 的聊天状态仓库 chatStore.ts。其中两个模式最值得学习 焦点信号focusSignalchatStore.ts 里focusInput()会打开面板、把focusSignal计数器加一并可携带一段预填文本pendingPrefill。Composer 侧监听计数器变化后聚焦输入框并**消费consume**预填文本——消费即清空保证同一段预填文本只生效一次。这种递增信号 一次性消费避免了复杂的 props 穿透。 选区待办队列pendingSelections在终端或编辑器里选中文字松开鼠标useSelectionAskAi.ts 会在终端/CodeMirror 内容区捕获mouseup弹出Ask AI浮层。点击后调用 App.tsx 的askFromSelection把选中文本与来源terminal或editor写入attachSelectionchatStore.ts。Composer 的 effect 监听队列排空后把每条选区转成带来源标签的附件芯片composer.tsx。 妙处在于选区捕获完全不知道 Composer 长什么样Composer 也不知道选区从哪来——双方只约定了 chatStore 里的信箱格式。松耦合文件浏览器如何递文件给 Composer文件浏览器要支持附加到 Agent但浏览器模块不应依赖 AI 模块。Terax 用浏览器级自定义事件解耦App.tsx 的handleAttachFileToAgent派发terax:ai-attach-file事件并打开面板聚焦输入Composer 侧监听该事件composer.tsx调用 Tauri 命令fs_read_file读取文本文件后挂为附件。事件模式同样被终端块视图复用如 BlockOverlay.tsx 直接把命令 输出作为终端选区附加。从提交到会话消息如何组装与落盘submit()composer.tsx把各类上下文拼装为带标签的文本块file、selection sourceterminal|editor、snippet再附上图片附件交给会话运行层 chatRuntime。随后清空本地状态并立刻重新聚焦方便连续追问。会话层还有两个工程化亮点LRU 会话缓存chats映射最多保留 8 个活跃会话超出后淘汰最旧的非活跃会话chatStore.ts防抖持久化流式输出每个 token 都会触发保存300ms 防抖合并写盘避免 UI 卡顿chatStore.ts设计要点速览机制解决的问题Context Provider 单一数据源多表面输入状态天然一致Zustand 仓库 getState()React 树外的模块也能读写状态递增信号 一次性消费跨表面聚焦/预填避免 props 穿透待办队列pendingSelections终端/编辑器选区异步投递为附件自定义 DOM 事件文件浏览器与 AI 模块互不依赖LRU 缓存 防抖持久化长会话性能与 IO 平衡一句话总结Terax 的 Composer 把输入框从 UI 组件提升为工作区级的应用状态表面只是视图通信靠信箱队列与信号而非引用。这种文档模型 多视图的思路是任何需要多表面共享状态的前端项目都能借鉴的完整范式。【免费下载链接】terax-aiLightweight (7MB) Terminal-first AI-native dev workspace项目地址: https://gitcode.com/GitHub_Trending/te/terax-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考