前端交互指南

TradingCopilot 前端使用 Vue 3 和 Element Plus。工作流页面应保持信息密度、可预期性和面向操作的体验。

列表

• 数据列表在网络刷新期间必须展示加载状态。
• 空状态应描述当前列表状态，而不是使用说明。
• 宽屏桌面表格必须提供移动端卡片视图，或放入 .table-scroll 容器。
• 可点击的选中行或卡片必须展示持久的选中反馈。
• 高增长列表必须使用基于游标的分页，客户端必须把游标视为不透明的透传值。

表单与对话框

• 业务对话框必须使用响应式宽度，并在移动端全屏显示。
• 移动端表单必须使用顶部对齐标签。
• 保存按钮应在请求进行中展示加载状态。

操作

• 创建、更新、删除、切换、重置和测试操作必须提供成功或错误反馈。
• 删除数据、取消工作或重置默认值的危险操作必须要求确认。
• API 错误消息应使用统一错误格式化函数。

易变数据

• 可能由后台 worker 创建或修改的页面必须使用共享自动刷新能力。
• 浏览器标签页隐藏时自动刷新必须暂停，并在标签页再次可见时刷新一次。
• 后台刷新不得清空当前过滤条件、置空当前表格，也不得造成整页加载闪烁。
• 最新模式和历史模式要有明确区分，加载历史记录后暂停自动刷新直到用户返回最新模式。

日志

• 日志视图必须提供表格和移动端卡片兜底视图。
• 详情抽屉展示结构化字段，不展示请求体。
• 默认隐藏噪声较大的静态资源、前端和日志查看器请求。
• durationMs: null 和 not_applicable 应显示为不适用。