diff --git a/.kilocode/rules/memory-bank/tasks.md b/.kilocode/rules/memory-bank/tasks.md index cabba5b..07e1aa8 100644 --- a/.kilocode/rules/memory-bank/tasks.md +++ b/.kilocode/rules/memory-bank/tasks.md @@ -751,3 +751,44 @@ list: { 2. **保持翻译一致性**:相同含义的文本使用相同的翻译键 3. **定期审查**:定期检查是否有硬编码文本遗漏 4. **测试验证**:在开发完成后测试语言切换功能是否正常 + +## Expo Image 封装与使用规范 + +**最后更新**: 2025-12-18 + +### 重要原则 + +**禁止直接使用 `expo-image` 的 `Image` 组件**,必须使用封装好的 `@/components/ui/Image` 组件。 + +### 问题描述 + +为了满足后端 API 安全要求,所有图片请求都需要携带特定的 `User-Agent` 和 `Referer` 请求头。`expo-image` 默认不会添加这些头信息。 + +### 解决方案 + +创建了一个封装组件 `@/components/ui/Image.tsx`,该组件自动拦截 `source` 属性并注入所需的请求头。 + +### 实现模式 + +#### 1. 替换导入语句 + +```typescript +// ❌ 禁止使用 +import { Image } from "expo-image"; + +// ✅ 正确写法 +import { Image } from "@/components/ui/Image"; +``` + +#### 2. 组件功能 + +封装的组件会自动处理以下逻辑: + +1. **注入 User-Agent**: 使用 `Out Live/{version} (iOS)` 格式 +2. **注入 Referer**: 使用 `API_ORIGIN` 常量 (`https://pilate.richarjiang.com`) +3. **支持多种 Source 类型**: 自动处理 `string` (URL), `object` (带 uri), `number` (本地资源) 以及它们的数组形式 + +### 参考实现 + +- `components/ui/Image.tsx`: 核心封装实现 +- `components/WorkoutSummaryCard.tsx`: 使用示例