# 实现方案 - 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 分钟