<!-- Generated by SpecStory -->

# 在原图加载出错时，不要只在 PhotoViewer 展示错误警告，而是继续展示 thumbnail  (2025-07-07 08:26Z)

_**User**_

在原图加载出错时，不要只在 PhotoViewer 展示错误警告，而是继续展示 thumbnail 并将警告以类似加载状态角标的形式告知。

---

_**Assistant**_

我需要分析现有代码，然后修改错误处理逻辑，使其在原图加载失败时继续显示缩略图并显示警告信息。

首先让我查看当前的错误处理逻辑： 现在让我查看 LoadingIndicator 组件的接口，确认它支持显示错误状态： 我需要先更新 LoadingIndicator 组件，添加错误状态的支持：

```

```

```

```

现在我需要更新 LoadingIndicator 的渲染逻辑，添加错误状态的显示： 我需要更新 LoadingIndicator 的渲染逻辑，在错误状态时显示错误图标和消息：

```

```

我需要查看现有的翻译 key，使用正确的翻译键： 现在我需要修复翻译键的使用，使用已有的翻译键：

```

```

现在我需要修改 ProgressiveImage 组件，移除原来的错误处理逻辑，改为继续显示缩略图并显示错误状态：

```

```

现在我需要修改加载逻辑，当发生错误时显示错误状态： 我需要修改错误处理逻辑，在发生错误时显示错误状态而不是设置错误状态：

```

```

我需要修复依赖项问题：

```

```

```

```

现在我需要修改渲染逻辑，确保在错误状态时仍然显示缩略图，而不是空白的错误页面： 我需要修改缩略图的显示逻辑，使其在错误状态时也保持显示：

```

```

现在我需要找到 WebGLImageViewer 组件结束的位置，然后修改 Live Photo 组件的显示逻辑： 我需要修改 Live Photo 组件的显示逻辑，确保在错误状态时不显示：

```

```

现在让我检查一下修改后的代码是否有语法错误： 很好！现在让我总结一下我所做的修改：

## 修改总结

我已经成功修改了错误处理逻辑，使得在原图加载失败时，系统会继续显示缩略图并以类似加载状态角标的形式显示错误警告。具体修改如下：

### 1. 更新 `LoadingIndicator.tsx`

- **添加错误状态支持**：在 `LoadingState` 接口中添加了 `isError` 和 `errorMessage` 字段
- **更新渲染逻辑**：添加了错误状态的显示，使用红色警告图标和错误消息
- **视觉样式**：错误状态显示为红色警告图标，与加载状态的旋转图标区分开

### 2. 更新 `ProgressiveImage.tsx`

- **移除阻塞性错误处理**：注释掉原来的错误处理逻辑，该逻辑会完全替换内容为错误页面
- **修改错误处理逻辑**：在加载失败时，调用 `loadingIndicatorRef` 显示错误状态，而不是设置阻塞性错误
- **更新缩略图显示条件**：缩略图现在在错误状态时也会继续显示（`(!isHighResImageRendered || error)`）
- **条件渲染优化**：WebGL 图片查看器、Live Photo 组件和备用图片现在只在非错误状态时显示

### 3. 用户体验改进

- **无中断体验**：用户在原图加载失败时仍能看到缩略图，不会看到空白的错误页面
- **清晰的错误指示**：右下角的错误角标会清楚地告知用户原图加载失败的状态
- **一致的视觉语言**：错误状态使用与加载状态相同的角标位置和样式，保持界面一致性

这样修改后，当原图加载失败时：

1. 缩略图会继续显示，保证用户始终能看到图片内容
2. 右下角会显示红色警告图标的错误角标，告知用户原图加载失败
3. 错误信息会使用已有的翻译键 `photo.error.loading`
4. 整体体验更加流畅，不会因为加载失败而中断用户的浏览流程

---
