Refactor image handling to unify image transmission via HTTP; remove base64 handling for small images and update related frontend logic for improved performance and compatibility.

docs/07-图片预览（Base64内联显示）.md

@@ -1,29 +1,27 @@
-# 07 - 图片预览（Base64 内联显示）
+# 07 - 图片预览（HTTP 传输与内联显示）
 
 ## 功能目标
 - 在消息列表中对图片进行缩略图预览与放大查看。
-- 支持通过“文件传输通道”或“图片专用消息”传输图片数据。
+- 图片与文件一致，统一走 **HTTP 上传/下载**，仅通过 WebSocket 广播 FILE 元数据（fileId、fileName、mimeType 等），避免 WebSocket 消息大小限制（如 200KB）与长传断连。
 
 ## 前端（Vue）
 - **识别规则**
-  - `mimeType` 满足 `image/*` 时按图片渲染。
-- **展示形态（建议）**
+  - `mimeType` 满足 `image/*` 时按图片渲染；消息类型为 `FILE`（或历史兼容的 `IMAGE`）。
+- **展示形态**
   - 消息卡片中显示缩略图（限制最大宽高）。
-  - 点击后弹窗预览（Element Plus `el-dialog`/`el-image` 预览）。
-- **传输策略（两种可选）**
-  - **复用文件分片**（推荐一致性）：图片走 `FILE + CHUNK`，接收端完成后生成 Blob 并预览。
-  - **小图直发**：当图片小于阈值（如 200KB）时发送 `IMAGE`，payload 直接携带 base64（需限制大小）。
+  - 点击后弹窗预览。
+- **传输策略**
+  - **图片一律走 HTTP**：与普通文件相同，使用 `POST /api/room/{roomCode}/file/upload` 上传，服务端落盘后广播一条 `FILE` 消息（含 `storage: 'server'`）；展示时使用 `GET /api/room/{roomCode}/file/{fileId}` 作为图片 `src`，无需 base64 或 WebSocket 传图。
 
 ## 后端（Spring Boot）
-- 默认透传（与 FILE/CHUNK 一致）；在生产环境建议增加大小限制与频率限制。
+- 复用 `RoomFileController` 的上传/下载接口；与普通文件相同的大小与频率限制。
 
-## 协议与数据（建议）
-- 若使用 `IMAGE`：
-  - `payload.data`：base64（不带 dataURL 前缀或带前缀需约定）
-  - `payload.mimeType`：如 `image/png`
-  - `payload.fileName`：（可选）
+## 协议与数据
+- 图片消息使用 **FILE** 类型，与文件一致：
+  - `type: 'FILE'`，`storage: 'server'`，`fileId`、`fileName`、`fileSize`、`mimeType`（如 `image/png`）。
+- 历史兼容：若存在旧版 `IMAGE` 类型且带 `imageData`（base64），前端仍可解析并显示。
 
 ## 边界与注意点
-- **性能**：图片 base64 可能导致消息体很大，优先走分片。
-- **安全**：只当作图片二进制展示，不执行任何脚本；避免把 payload 当 HTML 渲染。
+- **性能**：大图不再经 WebSocket，无 200KB 限制，由 HTTP 与服务器磁盘承载。
+- **安全**：图片仅作二进制展示，不执行脚本；避免将 payload 当 HTML 渲染。