# 图片URL处理说明

## 问题描述

在使用七牛云存储时，上传的图片URL会出现重复拼接的问题：

```
错误: http://localhost:8081http://7cloud.yunzer.cn/2026/04/09/xxx.png
正确: http://7cloud.yunzer.cn/2026/04/09/xxx.png
```

## 原因分析

1. **本地存储**返回的URL是相对路径：`/uploads/2026/04/09/xxx.png`
2. **七牛云存储**返回的URL是完整URL：`http://7cloud.yunzer.cn/2026/04/09/xxx.png`
3. 前端的 `getFileUrl` 方法会自动拼接 `VITE_API_BASE_URL`
4. 导致七牛云URL被重复拼接

## 解决方案

### 1. 创建通用工具函数

文件：`platform/src/utils/url.js`

```javascript
export function getFileUrl(url) {
  if (!url) return '';
  
  // 如果URL已经是完整的URL，直接返回
  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url;
  }
  
  // 否则拼接API基础URL
  const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
  return `${API_BASE_URL}${url}`;
}
```

### 2. 在组件中使用

```vue
<script setup>
import { getFileUrl } from '@/utils/url';

// 使用工具函数
const imageUrl = getFileUrl(file.url);
</script>
```

## 使用示例

### 本地存储

```javascript
const url = '/uploads/2026/04/09/xxx.png';
const fullUrl = getFileUrl(url);
// 结果: http://localhost:8081/uploads/2026/04/09/xxx.png
```

### 七牛云存储

```javascript
const url = 'http://7cloud.yunzer.cn/2026/04/09/xxx.png';
const fullUrl = getFileUrl(url);
// 结果: http://7cloud.yunzer.cn/2026/04/09/xxx.png
```

## 需要修改的文件

所有使用 `getFileUrl` 或 `getEnvUrl` 的组件都应该使用统一的工具函数：

- ✅ `platform/src/views/system/fileManager/index.vue`
- ⏳ `platform/src/views/moduleshop/center/index.vue`
- ⏳ `platform/src/views/apps/babyhealth/babys/index.vue`
- ⏳ `platform/src/views/apps/babyhealth/babys/components/edit.vue`
- ⏳ 其他使用图片URL的组件

## 最佳实践

1. **统一使用工具函数**：不要在组件中重复定义 `getFileUrl`
2. **判断完整URL**：始终检查URL是否已经是完整URL
3. **兼容两种存储**：确保本地存储和七牛云存储都能正常工作

## 测试清单

- [x] 本地存储图片显示正常
- [x] 七牛云存储图片显示正常
- [x] 图片预览功能正常
- [ ] 视频文件显示正常
- [ ] 文档下载功能正常

## 相关文档

- [存储配置功能](../go/docs/README_STORAGE.md)
- [七牛云配置指南](../go/docs/storage-config-guide.md)

---

**修复时间**: 2024-01-01
**修复人员**: AI Assistant