Gradio UI 原理说明¶

前端定位¶

当前系统采用 Gradio Blocks，而不是 Vue。核心目标是让 Python 服务、数据处理、可视化和页面回调在同一进程内交付，降低本地部署复杂度。

页面组织¶

主入口采用可折叠的左侧二级导航，右侧复用持久工作台内容区；九个独立 Gradio 模块按需构建、切换，外层不另开页面。
顶部 Tab 只承担当前模块内仍需分级的工作流；兼容单体入口保留原有 Tab 结构。
表格和图表优先直接展示结果，减少解释性装饰。
帮助页采用分类导航和详情视图，覆盖适用说明、系统原理、流程、排障和风险边界，不做营销式落地页。

AI 悬浮窗¶

AI 悬浮窗是跨页面工具，而不是某个模块的子页面。它需要支持模型问答、知识问答和 CLI 助手三类任务，并保持可关闭、可拖动、不会长期遮挡主内容。

当前模型 API 问答与 CLI 入口的能力不同：Codex 使用只读 JSONL 事件流，Trae/WorkBuddy 未配置真实命令时明确未接入；策略构建页旧产物模拟器仍是独立兼容能力。工作台支持 Enter、Shift+Enter、附件和状态；悬浮助手支持 Enter 和实际事件更新，不能据此推断拥有主工作台的全部附件及持久会话能力。控件存在、事件已绑定，都需要浏览器实际操作验证。

智能洞察按子页进入、账户切换及手动刷新加载，摘要与明细有独立回调和缓存；强制刷新可能重复读取行情。优化需同时考虑首次加载、远端请求与重排，不能只用热缓存或配置接口响应时间代表页面可用时间。

视觉检查原则¶

中英标签由共用字典与egs/config/ui/ui_translations.yaml维护，在浏览器翻译已渲染文案。文本缓存同时保存原文和已显示译文；组件生成新文字时重新识别来源，避免“全屏”切换后仍显示旧按钮。输入框只翻译占位/辅助属性；下拉框的非编辑显示可翻译，聚焦前恢复组件原文，提交仍使用Gradio状态中的标识。自由输入和原始模型/资料正文不作为英文界面实录中的翻译结果。

页面打开后不应出现大面积空白。
表格高度要足够，避免重要数据被折叠到不可见区域。
图表标题、坐标轴和 hover 信息要能解释当前数据。
按钮、输入框和输出区要靠近对应工作流。
桌面视口下不能出现明显遮挡、重叠、按钮文字溢出。