用 Vue3 + fetch-event-source 打造流式 AI 翻译平台：OCR + 大模型 + SSE 全链路实战

从 UI 工程师到 AI 应用架构者13 年前，我的工作是让按钮在 IE6 上对齐；13 年后，我用fetch-event-source订阅大模型的“思维流”，用 OCR 解锁图片中的文字——前端，正在成为 AI 产品的第一道体验防线。最近，我基于Vue 3 + Vite + TypeScript + Ant Design Vue开发了一款企业级 AI 多语翻译平台。它支持：✅ 文本/图片/文档多模态输入✅ 大模型动态切换（通义千问、DeepSeek 等）✅ 行业领域定制（医疗、法律、金融）✅SSE 流式输出（使用fetch-event-source）今天，我将逐行拆解核心代码，带你复现这一高价值 AI 应用的前端架构。一、技术选型：为什么是fetch-event-source？虽然浏览器原生支持EventSource，但在现代前端工程中，我们更倾向使用@microsoft/fetch-event-source：✅ 基于fetch，天然支持AbortController（可取消请求）✅ 支持自定义 headers（用于鉴权）✅ 更好的TypeScript 类型支持✅ 与 Axios/Vite 生态无缝集成安装：npm install @microsoft/fetch-event-source二、OCR 图片识别：前端只管“传”和“显”用户上传一张英文菜单截图，系统自动提取文字并翻译。前端不碰 OCR 算法，但要管理全流程状态。🔧 真实代码实现（来自文本_r9uv.txt）1.系统配置加载（含文件大小限制）// src/views/translation/index.vue const loadSystemPublicConfig = async () = { try { const response = await findSystemPublicConfig({ configKey: 'upload_file_max_limit_mb' }); const config = response.data[0]; systemConfig.value.uploadFileMaxLimit = parseInt(config.value) || 10; // 默认10MB } catch (error) { ElMessage.error('加载系统配置失败'); } };2.