中老年叨叨
检索⌘ K

Vibe Coding

Simon-GNL 选股 AI Agent 落地进度 Day 2

记录Simon-GNL第二天对首页逻辑的修正:补上宏观行业输入与研究启动入口,区分样例和真实研究任务。列出输入、创建、成功与失败状态、后端接口及测试计划,并用截图对比修改前后的研究工作台。

前文:👉👉👉 Simon-GNL潜在优选股票筛选AI智能体建模思路

昨日进展:UI改进,昨日因为太忙,匆匆忙忙设计的时候忽略了基本逻辑,犯了低级错误,漏掉最关键的逻辑起点:“需要用户输入一个宏观行业,然后才能开始启动后续流程”。

而且不是“加一个输入框”这么简单。当前首页默认用户已经有研究轮次:顶部直接进入看板,下面直接展示阶段树、指标、候选池和报告预览。现有要求从用户输入“宏观行业”启动,但前端 UI 、字段规划,以及后端API 都没有设计。

只好推倒重来,当前计划如下:

迭代方案
在首页 .screen-head 和 .workspace-grid 之间新增一个紧凑的“启动研究”控制区,不做新页面、不做弹窗、不放到 topnav、不改成聊天入口。

结构:

首页
├─ screen-head:原样保留
├─ research-start-panel:新增,宏观行业输入 + 启动动作
└─ workspace-grid:原阶段树 / 指标 / 候选池 / 证据报告,原样保留

控件内容:

  • 标题:启动研究
  • 显式 label:宏观行业
  • 输入 placeholder:例如:半导体、新能源汽车、低空经济
  • 主按钮:开始拆解
  • 次按钮:使用当前样例
  • 状态 pill:待输入 / 创建中 / 已创建研究
  • 校验:空值或过短时只在输入框下方显示一行错误,不弹窗

视觉约束:

  • 复用现有 .surface、.section、.field、.input、.btn-primary、.btn-secondary、.pill,见 组件样式[1]。
  • 不新增 hero,不用渐变,不用大色块,不用聊天框。
  • 颜色只给 开始拆解 和 focus 状态,符合 视觉系统约束[2]。

状态设计

状态用户看到什么
首次无 run输入区高优先级可见;候选池显示空状态:“输入宏观行业后开始建立候选池”
输入为空按钮不提交;输入框下显示“请输入宏观行业”
创建中按钮 disabled,pill 显示“创建中”
创建成功workspaceLabel 更新为 workspace / 半导体;阶段树激活“宏观行业”;候选池为空但有上下文
使用当前样例保留现有 seed demo,明确这是样例,不再伪装成真实起点
API 失败panel 内联错误:“研究创建失败,稍后重试”;不清空当前页面数据

后端契约调整
当前 API contract 只有 workspace/reports/artifacts/draft/pause,见 API_CONTRACT[3]。

优先级提前为 M0:

  • 新增 research_runs 表。
  • 新增 POST /api/local/research-runs。
  • 请求:{ "macroIndustry": "半导体" }
  • 响应:{ id, workspaceId, macroIndustry, status, currentStage, workspace }
  • 不自动伪造公司报告;只创建 run、workspace、阶段树和 audit event。
  • GET /api/workspace 返回当前 active run 对应 workspace。

实施计划

  1. 更新计划文档:把“宏观行业输入启动流程”列为 M0,插在当前 M1 之前。
  2. TDD 后端:先写 POST /api/local/research-runs 测试,覆盖成功、空输入、持久化、重启后仍能读取。
  3. TDD 前端契约:GNLApi.startResearchRun(),成功后刷新 workspace/reports。
  4. 首页最小改动:只在 screen-head 后插入一个 research-start-panel,不动原有结构。
  5. Playwright 验收:输入“半导体” -> 点击“开始拆解” -> workspaceLabel 更新 -> 阶段树激活宏观行业 -> 刷新后状态保留。
  6. 设计回归:移动端 375px 下输入区纵向排列,按钮 44px 可点,页面不横向溢出。

修改后交付物:

图片

对比前一版UI:

图片

01. 原文来源

原文发表于微信公众号“中老年叨叨”(2026年6月12日 08:20)。查看微信公众号原文。