破局流式传输占位符泄露：基于多模型协作的前端重构深度复盘

在进入具体的技术方案之前，我们不妨先聊聊很多团队在使用大模型辅助重构时容易踩入的两个极端误区。

为了用最理性的成本解决最感性的业务痛点，我们对本次重构的任务进行了精细化的阶梯式拆解，调度三种不同特性的模型各司其职：

软件重构从来不是一条坦途，即便是有了 AI 的加持，整个过程依然充满了技术上的博弈与对边界条件的反复打磨。

在第一阶段，我们将 index.vue 的核心 SSE 接收逻辑和团队的编码规范输入给 gpt-5.3-codex。它几乎在几秒钟内，就敏锐地识别出了文件中老旧的 7 处字符串拼接点（比如 this.message += chunk.data），将这些凌乱的赋值语句抽象出来，在 src/xx/streamContentFilter.js 中创建了一个相对干净的基线函数，并生成了优雅的 Diff 调用骨架。重构后 npm run build 和 eslint --fix 控制台一片绿意，无任何新增 Lint 错误。

然而，轻量级编码模型本质上是在做高级的"模式匹配"，对于业务场景中动态、不可预测的网络分片缺乏直觉。它写出来的第一版过滤器，只是简单地用 replaceAll('*data_chunk*', '') 来打补丁——对"Marker 跨包断裂"这一经典边界风险完全没有感知。

带着第一阶段的产出，我们向 gpt-5.5-medium 提出了一个极具挑衅性的问题："请从网络传输不确定性的视角，严谨地指出这段代码还存在哪些导致泄露的 Medium 或 High 级别风险？"

中模型一针见血地指出："当上一个数据包以 *data_ 结尾，下一个数据包以 chunk* 开头时，第一阶段的逻辑将彻底失效。你需要设计一个残余前缀（pendingPrefix）缓冲区，用来挂起那些疑似被截断的协议标记。"它还精准提示我们可以引用 useStreamData.js 中已定义好的底层常量。中模型只给出了清晰的解法方向和精简的伪代码思路，并没有大包大揽去写具体实现——这种"只动脑、不动手"的特性，反而帮我们省下了大量的代码生成 Token。

最后，我们将中模型的解法方案以及第一阶段的基线代码打包，交给了高吞吐的 composer-2.5-fast。快模型在理解了状态机的输入要求后，迅速落地了包含滑动窗口状态机的完整工具函数，并编写了包含 5 大核心场景 的自动化单元测试脚本，响应时间不到 3 秒。

然而，我们也遭遇了一个工程偶发事件：部分开发人员在 Windows 环境下未配置全局编辑器规范，快模型生成的中文注释在本地打开时变成了 GBK 乱码。随后我们通过调整 .editorconfig，迅速解决了这一乱码返工问题——AI 走得再快，也离不开底层工程规范的托底。

为了彻底贯彻 SOLID 原则中的单一职责原则（SRP），我们拒绝了向 Vue 视图层组件直接注入各种零散状态函数的方案。所有的复杂清洗逻辑与状态完全收拢在 src/utils/streamContentFilter.js 的闭包中，视图层只需要像管道一样进行调用。

4.1 工具流设计：闭包状态机滤网（伪代码）

// 辅助函数：检查内容末尾是否残留半截 Marker 前缀
FUNCTION getTrailingMarkerPrefix(content, marker):
    FOR i FROM marker.length - 1 DOWNTO 1:
        targetPrefix ← marker 的前 i 个字符
        IF content 以 targetPrefix 结尾:
            RETURN targetPrefix
    RETURN 空串

// 工厂函数：创建流式内容过滤器（闭包状态机）
FUNCTION createStreamContentFilter():
    pendingPrefix ← 空串          // 闭包内持久状态，挂起跨包残余
    MARKER ← '*data_chunk*'

    RETURN FUNCTION(chunk):       // 每收到一个 chunk 执行一次
        content ← pendingPrefix + chunk
        pendingPrefix ← 空串

        IF content 包含完整 MARKER:
            content ← 删除所有 MARKER

        trailingPrefix ← getTrailingMarkerPrefix(content, MARKER)
        IF trailingPrefix 非空:
            pendingPrefix ← trailingPrefix
            content ← 去掉末尾 trailingPrefix 对应长度

        RETURN content

4.2 视图层的极简"降维打击"

在未重构前，AI 曾建议我们在 Vue 的 data 里面新增好几个流状态变量（如 isMarkerPending、lastChunkTail 等）。经过架构解耦后，Vue 组件内部变得异常干净：

// 初始化流式连接，符合开闭原则（OCP）
const streamFilter = createStreamContentFilter();

sse.onMessage((chunk) => {
  // 极简调用，视图层完全不需要关心状态机与网络截断
  this.chatMessage += streamFilter(chunk);
});

这种设计让函数的认知复杂度直接归零（从原先的 18 锐减至 1），后续无论协议标记怎么变，视图层代码都无需修改一行。

为了让这次零缺陷交付不是一句空话，我们在 scripts/test-stream-content-filter.mjs 中构建了 5 个完全模拟真实网络极端环境的单元测试用例：

在人工回归阶段，我们联合 QA 团队对行程规划、快速滚动、历史回放、FAQ 打字机、OCR 表单 5 大核心业务场景进行了全面的盲测，最终实现了线上零缺陷交付，综合场景覆盖率 ≥ 90%。

虽然这次重构的结果非常圆满，但在真实的复盘会议上，我们团队也认真梳理了整个过程中暴露出的几个待改进点：

本次重构的最终数据是让人欣慰的：总 Token 消耗减少了 66%，构建耗时稳在 36.54s，零新增 Lint 错误，测试通过率 100%。但比这些冷冰冰的数据更让我们感到踏实的，是代码重构后带来的那份清爽与优雅。

软件工程从来不是一场拼谁用的模型更贵、谁写代码速度更快的奢华军备竞赛。它是一门关于平衡的艺术——在业务痛点、系统架构、以及开发成本之间，寻找那个最合理的支点。通过「轻模型编码、中模型把关、快模型迭代」的协作实践，我们不仅用极低的预算治愈了线上老旧代码的"顽疾"，更重要的是，它让我们看到了一种更具人情味、也更科学的研发姿态：把机械的、重复的骨架编写交给 AI 冲锋；把严谨的、高阶的风险审查交由中模型把关；而作为开发者的我们，则把宝贵的精力聚焦在架构的解耦、语义的抽象以及对用户体验的极致追求上。