自己琢磨修复的，script setup的语法糖不太会，磨了我一个下午的时间，自己也是半桶水的状态将就吧。

script 部分

文章随机图

首先script部分，这部分是修复文章列表的，基本大部分注释都写上了，注意域名后面的问号不要去掉哦

async function fetchPosts(page: number = 1) {
  if (loadmoreStatus.value === 'loading' || loadmoreStatus.value === 'nomore') {
    return;
  }

  try {
    loadmoreStatus.value = 'loading';
    const data: PostList = await post.getPostList(page);
    const items: Item[] = data.items;

    items.forEach((item) => {
      // 检查封面图片是否存在，并且路径是否是完整的URL
      if (!item.spec.cover) {
        // 如果没有封面图片，为每篇文章生成一个随机数，附加到图片URL中
        const randomNum = Math.floor(Math.random() * 10000);
        item.spec.cover = `域名api?random=${randomNum}`;
      } else if (!item.spec.cover.startsWith('http')) {
        // 如果封面图片的路径是相对路径，添加基础URL
        item.spec.cover = config.BASE_URL + item.spec.cover;
      }

      // 将处理过的item添加到列表中
      list.value.push(item);
    });

    currentPage.value++;
    loadmoreStatus.value = 'loadmore';
    if (!data.hasNext) {
      loadmoreStatus.value = 'nomore';
    }
  } catch (error) {
    console.error('请求帖子列表失败：', error);
    // 处理错误...
  } finally {
    // 恢复加载状态，以便用户可以继续操作
    loadmoreStatus.value = 'loadmore';
  }
}

精品随机图

一样域名后面也不要把问号去掉

// 假设Category是您定义的分类对象的接口
interface Category {
  metadata: {
    name: string;
  };
  spec: {
    cover?: string; // 封面图URL，可能是未定义的（undefined）
    displayName: string;
  };
}

// 更新getRandomImageUrl函数，为category参数添加类型注解
const getRandomImageUrl = (category: Category) => {
  if (!category.spec.cover || !category.spec.cover.startsWith('http')) {
    const randomNum = Math.floor(Math.random() * 10000);
    return `https://thinkzyx.cn/api?random=${randomNum}`;
  } else {
    return category.spec.cover;
  }
};

template部分

精品分类随机图

  <view class="mt-3.5 flex overflow-scroll">
    <view
      v-for="category in configStore.hotCategories"
      :key="category.metadata.name"
      class="mr-1.5 h-24 bg-white"
      @click="swichTab(category.metadata.name, category.spec.displayName)"
    >
      <view class="relative h-full w-40 overflow-hidden rounded-lg">
        <!-- 使用getRandomImageUrl方法为每个分类生成或获取封面图URL -->
        <image
          class="absolute h-24 w-full rounded-lg"
          :src="getRandomImageUrl(category)"
          mode="aspectFill"
        />
        <view class="absolute bottom-0 flex h-full w-full items-center justify-center bg-black bg-opacity-50 text-center text-white">
          {{ category.spec.displayName }}
        </view>
      </view>
    </view>
  </view>

文章随机图

    <!--    文章列表-->
    <view class="mt-5">
      <view
        v-for="post in list"
        class="animate__animated animate__fadeIn m-auto mt-3.5 h-28 items-center overflow-hidden rounded-lg bg-white p-3.5"
        :key="post.metadata.name">
        <view
          class="flex h-full justify-between overflow-hidden"
          @click="getArticleDetail(post.metadata.name, post.spec.title)">
          <view class="relative mr-1.5 flex-1">
            <view class="line-clamp-1 flex flex-nowrap text-lg">
              <view class="line-clamp-1">
                {{ post.spec.title }}
              </view>
            </view>
            <view class="line-clamp-1 text-gray-500">
              {{ post.status.excerpt }}}
            </view>
            <view class="absolute bottom-0 flex w-full justify-between">
              <view
                v-if="post.categories[0]"
                class="overflow-y-scroll whitespace-nowrap rounded-sm bg-gray-100 p-1 text-[10px] before:ml-0.5 before:items-center before:text-[12px] before:content-['#']">
                {{ post.categories[0]?.spec.displayName }}
              </view>
              <view class="flex items-center text-sm">
                <view class="i-mdi-hot mr-1"></view>
                <view class="mr-3">{{ post.stats.visit }}</view>
                <view class="i-mdi-heart-outline mr-1"></view>
                <view class="mr-3">{{ post.stats.upvote }}</view>
              </view>
            </view>
          </view>
          <view
            class="aspect-square basis-1/3 overflow-hidden rounded-lg"
            v-if="post.spec.cover">
            <TnLazyLoad :src="post.spec.cover" width="100%" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>

最后效果图