Pre_Seg_Server/工程分析/实现方案-2026-04-29-23-10-27.md

实现方案 - 2026-04-29-23-10-27

对应需求

• 需求分析文档: 需求分析-2026-04-29-23-10-27.md

方案概述

修复前后端数据结构不匹配、上传后未创建项目、WebSocket 连接状态处理不当三个问题。

修改文件清单

文件 1: src/lib/api.ts（修改 uploadMedia 类型）

• 修改类型: 修正返回类型以匹配后端
• 修改内容: { url: string; id: string } → { object_name: string; file_url: string; size: number; message: string }

文件 2: src/components/ProjectLibrary.tsx（修改上传逻辑）

• 修改类型: 修复字段引用 + 上传后创建项目
• 修改内容:
  • result.url → result.file_url
  • 上传成功后调用 createProject 创建新项目（名称=文件名）
  • 然后刷新项目列表

文件 3: src/lib/websocket.ts（修复 disconnect）

• 修改类型: 增加 readyState 判断
• 修改内容: disconnect() 中：
  • readyState === CONNECTING: 设置 shouldCloseAfterOpen = true，在 onopen 中关闭
  • readyState === OPEN: 正常 close()
  • 其他状态: 直接置 null

文件 4: src/components/Dashboard.tsx（增加清理保护）

• 修改类型: 延迟 connect / 增加 mounted 标志
• 修改内容: useEffect 中增加 mounted ref，卸载时置 false，避免卸载后回调执行

新增依赖

无

兼容性分析

• 返回类型修改需确保调用方同步更新
• WebSocket 修复不影响正常连接流程

预估工作量

• 10 分钟