feat(ui): 添加首页头部图片加载降级处理

- 新增 headerImageError 状态管理
- 实现 handleHeaderImageError 错误处理函数
- 图片加载失败时显示蓝色渐变背景降级UI
- 优化用户体验，避免图片加载失败影响页面展示

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

@@ -2,7 +2,24 @@
   <view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]">
     <!-- Header Section -->
     <view class="absolute left-0 top-0 w-full h-[544rpx] z-0">
-      <image class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" />
+      <!-- 正常加载: 显示图片 -->
+      <image
+        v-if="!headerImageError"
+        class="w-full h-full"
+        src="https://picsum.photos/seed/header/750/544"
+        mode="aspectFill"
+        @error="handleHeaderImageError"
+      />
+      <!-- 降级处理: 图片加载失败时显示纯色背景 -->
+      <view
+        v-else
+        class="w-full h-full bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center"
+      >
+        <!-- <view class="text-center">
+          <text class="text-white/50 text-[24rpx]">背景图片加载失败</text>
+        </view> -->
+      </view>
+      <!-- 渐变遮罩始终显示 -->
       <view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
     </view>
 
@@ -158,6 +175,22 @@ import { homeIconAPI } from '@/api/home';
 // User Store
 const userStore = useUserStore();
 
+// Header Image Error State
+/**
+ * 头部图片加载失败状态
+ * @description 用于控制降级UI的显示
+ */
+const headerImageError = ref(false);
+
+/**
+ * 处理头部图片加载失败
+ * @description 图片加载失败时触发，显示降级UI
+ */
+const handleHeaderImageError = () => {
+  console.warn('Header image failed to load, showing fallback');
+  headerImageError.value = true;
+};
+
 // Plan Popup State
 const showPlanPopup = ref(false);
 const selectedProduct = ref(null);