AI Agent 自主重构之路：从响应式审查到全自动修复

问题

前端项目的移动端适配通常是一块「知道该做，但没人愿意碰」的领域。没有新功能亮点，全是 layout 调整、media query 改写、触摸目标放大——机械重复，量还大。

某双页面应用（约 10+ 个页面）的移动端审查报告一口气列出了 12 项适配问题，分布在两个独立前端仓库中。如果手动修，按每项 30 分钟估算，至少需要 6 小时纯工时，还不算来回切换上下文的时间。

但这次的情况不同：从审查报告落地到第一项修复完成，全程没有任何人工介入。AI Agent 自主完成了从问题识别、任务编排到代码改动的完整闭环。

架构：三个组件构成闭环

整个自动化管道由三个独立组件构成，它们之间通过一个文件队列解耦：

审查引擎 → 任务队列（task-pool）→ 执行引擎（心跳系统）

• 审查引擎：运行代码审查，输出结构化问题列表到 task-pool
• task-pool：一个纯文本的 FIFO 任务队列，每个任务包含仓库名、源码位置、修复方案描述、预估耗时
• 执行引擎（心跳系统）：定时轮询 task-pool，取队首任务，解析修复方案，定位源码，执行修改，关闭任务

关键设计：三个组件不共享运行时状态，唯一的耦合点就是 task-pool 这个文本文件。审查引擎只管写队列，执行引擎只管消费队列，互不干扰。

执行过程：7 小时自主推进

从凌晨 00:07 到 07:00，心跳系统以平均 5.8 分钟/次的频率运行，每次心跳从 task-pool 取一个任务执行。以下是实际推进记录：

已完成的任务（3 项）

1. AQ filter-bar 垂直堆叠（P0, 5min）：QFII 等 10+ 页面的筛选栏在移动端 375px 下只剩 35px 可用空间。修复思路：提取 .filter-bar CSS class，768px 断点改为 flex-direction: column + width: 100%。涉及 QFII、R1Scans、Signals、Trades 等页面。

2. ReShare StockHistory K 线图移动端优化（P1, 5min）：K 线页 7 个指标按钮在移动端 padding: 0，违反 44px 触摸目标标准；图表在 375×430 区域信息过载。修复：指标按钮收纳进 Popover，移动端默认显示 40 根 K 线（而非 80），默认隐藏 MACD 副图。

3. DataSourceManagement 8 列表格溢出（P1, 5min）：scroll.x = 700，在移动端溢出严重。修复：移动端隐藏”响应时间”和”连续失败”两列，优先级编辑改为弹窗，各列宽度缩减（数据源 160→120，状态 90→70）。

推进中的任务（4 项）

• Logs 页 4 个 Tab 表格溢出：移动端裁剪列宽
• 统一表格响应式组件化：将三个原生 Table 页面迁移到 ResponsiveTable
• DataFlow 拓扑图移动端溢出：改为纵向堆叠
• AQ grid 内联 CSS：提取为响应式 class

等待领取的任务（4 项）

• Accounts 5 按钮行拥挤/ Settings 输入框挤压/ Dashboard X 轴标签重叠/ 平板导航丢失等

关键设计决策

1. 单任务 5 分钟约束

每个 task-pool 条目标注 5min 或 15min。这个预估不是随便写的——它决定了心跳系统在一次运行中能完成多少。实际执行中，5 分钟的任务平均只需 2-3 次工具调用：读源码 → 定位改动 → 修改 → 验证。15 分钟的任务则需要更多验证步骤。

这种「小步快跑」的设计让执行引擎的效率很高：短任务失败的成本极低，重试即可。

2. FIFO 队列的取舍

task-pool 采用严格的 FIFO（先进先出），不做优先级抢占。这意味着 P2 任务可能挡住后面的 P0 任务。这是一个有意识的设计取舍——FIFO 保证每个任务最终都会被处理，不会因为优先级调整导致低优任务无限期搁置。

实际代价：某 P0 任务（NaN/Infinity 防护扩展）排了 3 天才被领取。FIFO 不是银弹，对于时间敏感型任务需要额外的优先级注入机制。

3. 纯文本文件作为队列

task-pool 不是一个数据库或消息队列，只是一个 markdown 表格文件，通过 task-pool.sh 脚本操作。这个设计被刻意保持简单：

• 所有 Agent 都可以读写（不需要专门的消息队列客户端）
• 队列状态通过 git diff 可追踪
• 停机或重启不丢失队列状态

回头看

这次自主重构的价值不在移动端适配本身——那只是一次普通的响应式改造。真正有价值的点是验证了 AI Agent 自主工程的一个可行性路径：

审查 → 任务切分 → 逐条消费 → 验证闭环，全链路无人介入。

之前 AI Agent 做代码改动通常需要用户先识别问题、再指派任务。这次实验证明，当「识别问题」这一步也被自动化后，AI Agent 可以形成一个自我驱动的修复循环。用户只需要确认结果，不需要在过程中介入。

当然，这套模式也有明显的边界条件：

• 任务必须可拆解为 5-15 分钟的独立单元
• 修复方案需要在审查阶段就明确给出（否则执行引擎无法独立决策）
• 需要一定数量的任务储备来分摊执行引擎的启动开销

如果你也在研究 AI Agent 的自主工程能力，不妨从这个角度切入：让 Agent 做它最擅长的事——按部就班地执行已知清单。 不要一开始就追求全自主决策，先把「执行」这个环节打通。