feat(shopGoods): 优化商品列表加载及封面图性能

- image.ts 中 getCompressedImageUrl 增加缓存，避免列表重渲染时重复计算压缩 URL
- shopGoods 页面用原生 img 标签替换 antdv a-image，支持浏览器懒加载减少首屏网络压力
- shopGoods 页面数据加载流程优化，取消表格自动首屏加载，改为手动触发，合并请求避免重复调用
- 首屏分类数据延迟加载，不阻塞首屏渲染，提升页面响应速度
- search.vue 中用 onMounted 替代 watch immediate，防止首次入场重复触发请求
- 新增商品封面图样式，保证图片大小固定且样式统一

src/utils/image.ts

@@ -76,18 +76,34 @@ function removeOssProcess(url: string): string {
  * @param options 压缩选项（width/quality 不传则使用默认值）
  * @returns 处理后的图片 URL
  */
+// 缓存已计算的压缩 URL，避免列表重渲染时（勾选、hover、滚动）重复拼接字符串
+const compressedUrlCache = new Map<string, string>();
+
 export function getCompressedImageUrl(
   url: string,
   options?: ImageCompressOptions
 ): string {
+  if (!url) return '';
+
+  // 命中缓存直接返回，省去重复计算
+  const cacheKey = options ? `${url}|${JSON.stringify(options)}` : url;
+  const cached = compressedUrlCache.get(cacheKey);
+  if (cached !== undefined) return cached;
+
   // 先补全为完整 URL
   const fullUrl = ensureFullUrl(url);
-  if (!fullUrl) return '';
+  if (!fullUrl) {
+    compressedUrlCache.set(cacheKey, '');
+    return '';
+  }
 
   const { width, quality, enabled } = { ...DEFAULT_OPTIONS, ...options };
 
   // 未启用压缩，原样返回
-  if (!enabled) return fullUrl;
+  if (!enabled) {
+    compressedUrlCache.set(cacheKey, fullUrl);
+    return fullUrl;
+  }
 
   // 优先使用调用方指定的 width/quality：
   // 先剥离 URL 自带的 x-oss-process，再按本函数参数重新拼接，确保以调用方为准。
@@ -96,5 +112,7 @@ export function getCompressedImageUrl(
   // 已有其他 query 参数用 & 拼接，否则用 ?
   const separator = baseUrl.includes('?') ? '&' : '?';
 
-  return `${baseUrl}${separator}x-oss-process=image/resize,w_${width}/quality,Q_${quality}`;
+  const result = `${baseUrl}${separator}x-oss-process=image/resize,w_${width}/quality,Q_${quality}`;
+  compressedUrlCache.set(cacheKey, result);
+  return result;
 }