feat(client): 前端场景和HTTP工具优化

client/js/scenes/HomeScene.js

@@ -2,6 +2,7 @@
  * 首页场景 - 支持UGC
  */
 import BaseScene from './BaseScene';
+import { getStaticUrl } from '../utils/http';
 
 export default class HomeScene extends BaseScene {
   constructor(main, params) {
@@ -13,6 +14,9 @@ export default class HomeScene extends BaseScene {
     this.lastTouchY = 0;
     this.scrollVelocity = 0;
     
+    // 封面图片缓存
+    this.coverImages = {};
+    
     // 底部Tab: 首页/发现/创作/我的
     this.bottomTab = 0;
     
@@ -35,6 +39,23 @@ export default class HomeScene extends BaseScene {
   async init() {
     this.storyList = this.main.storyManager.storyList;
     this.calculateMaxScroll();
+    // 预加载封面图片
+    this.preloadCoverImages();
+  }
+
+  /**
+   * 预加载故事封面图片
+   */
+  preloadCoverImages() {
+    this.storyList.forEach(story => {
+      if (story.cover_url && !this.coverImages[story.id]) {
+        const img = wx.createImage();
+        img.onload = () => {
+          this.coverImages[story.id] = img;
+        };
+        img.src = getStaticUrl(story.cover_url);
+      }
+    });
   }
 
   getFilteredStories() {
@@ -248,18 +269,32 @@ export default class HomeScene extends BaseScene {
 
     // 封面
     const coverW = 80, coverH = height - 20;
-    const coverGradient = ctx.createLinearGradient(x + 10, y + 10, x + 10 + coverW, y + 10 + coverH);
-    const colors = this.getCategoryGradient(story.category);
-    coverGradient.addColorStop(0, colors[0]);
-    coverGradient.addColorStop(1, colors[1]);
-    ctx.fillStyle = coverGradient;
-    this.roundRect(ctx, x + 10, y + 10, coverW, coverH, 10);
-    ctx.fill();
+    const coverX = x + 10, coverY = y + 10;
+    
+    // 尝试显示封面图片
+    const coverImg = this.coverImages[story.id];
+    if (coverImg) {
+      // 有图片，绘制图片
+      ctx.save();
+      this.roundRect(ctx, coverX, coverY, coverW, coverH, 10);
+      ctx.clip();
+      ctx.drawImage(coverImg, coverX, coverY, coverW, coverH);
+      ctx.restore();
+    } else {
+      // 无图片，显示渐变占位
+      const coverGradient = ctx.createLinearGradient(coverX, coverY, coverX + coverW, coverY + coverH);
+      const colors = this.getCategoryGradient(story.category);
+      coverGradient.addColorStop(0, colors[0]);
+      coverGradient.addColorStop(1, colors[1]);
+      ctx.fillStyle = coverGradient;
+      this.roundRect(ctx, coverX, coverY, coverW, coverH, 10);
+      ctx.fill();
 
-    ctx.fillStyle = 'rgba(255,255,255,0.85)';
-    ctx.font = 'bold 10px sans-serif';
-    ctx.textAlign = 'center';
-    ctx.fillText(story.category || '故事', x + 10 + coverW / 2, y + 10 + coverH / 2 + 4);
+      ctx.fillStyle = 'rgba(255,255,255,0.85)';
+      ctx.font = 'bold 10px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(story.category || '故事', coverX + coverW / 2, coverY + coverH / 2 + 4);
+    }
 
     const textX = x + 100;
     const maxW = width - 115;