From b603d9d854d745fa046a9ac8919ce9b8c15c6159 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Sat, 23 Aug 2025 22:55:59 +0800
Subject: [PATCH] Refactor API requests and update component styles

---
 api/channel/index.ts                          |   6 +-
 api/drawe-detail/index.ts                     |   2 +-
 api/toolbox/index.ts                          |   2 +-
 components/kl-menus-v2/index.vue              |   2 +-
 components/kl-nav-tab/index.vue               |   2 +-
 pages/channel/components/HotLlabel.vue        |  10 +-
 pages/channel/components/RightContent.vue     |  30 ++---
 pages/channel/index.vue                       |  11 +-
 .../components/RecommendedColumnsV2.vue       |  14 +--
 pages/foreign/index.vue                       |  38 +++---
 pages/toolbox/components/search.vue           |  12 +-
 pages/toolbox/index.vue                       | 119 ++++++++++--------
 12 files changed, 136 insertions(+), 112 deletions(-)

diff --git a/api/channel/index.ts b/api/channel/index.ts
index a1bac85..439f3aa 100644
--- a/api/channel/index.ts
+++ b/api/channel/index.ts
@@ -20,7 +20,7 @@ import type {
  * @return {Promise}
  */
 export const page = (params: TpageReq) => {
-  return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/posts/page', params)
+  return useDollarFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/posts/page', {query: params})
 }
 
 /**
@@ -35,7 +35,7 @@ export const create = (params: TcreateReq) => {
  * @return {Promise}
  */
 export const list = () => {
-  return useFetchRequest.get<IResponse<TlistRes[]>>('/prod-api/app-api/business/channel/list')
+  return useDollarFetchRequest.get<IResponse<TlistRes[]>>('/prod-api/app-api/business/channel/list')
 }
 /**
  * 获得论坛频道列表
@@ -121,7 +121,7 @@ export const clearUnreadMessage = (params: { id: number }) => {
  * 获得论坛频道
  */
 export const getChannelLunTanDetail = (params: { id: string }) => {
-  return useFetchRequest.get<IResponse<ChannelRespVO>>('/prod-api/app-api/business/channel/get', params)
+  return useDollarFetchRequest.get<IResponse<ChannelRespVO>>('/prod-api/app-api/business/channel/get', {query:params})
 }
 
 /**
diff --git a/api/drawe-detail/index.ts b/api/drawe-detail/index.ts
index 3b6d8ed..df9bb46 100644
--- a/api/drawe-detail/index.ts
+++ b/api/drawe-detail/index.ts
@@ -31,7 +31,7 @@ export const createComment = (params: { relationId?: number | string; content?:
  * @return {Promise}
  */
 export const getRelationRecommend = (params: { type?: number | string; projectType?: number | string }) => {
-  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/top-list', { params })
+  return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/top-list', { query:params })
 }
 
 /**
diff --git a/api/toolbox/index.ts b/api/toolbox/index.ts
index 1237e85..e8ecf35 100644
--- a/api/toolbox/index.ts
+++ b/api/toolbox/index.ts
@@ -15,5 +15,5 @@ export const create = (params: TcreateReq) => {
  * 获得内容信息分页
  */
 export const page = (params: TpageReq) => {
-  return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/app/project-resource/page', params)
+  return useFetchRequest.get<IResponse<TpageRes>>('/prod-api/app-api/business/app/project-resource/page', {query:params})
 }
diff --git a/components/kl-menus-v2/index.vue b/components/kl-menus-v2/index.vue
index faf1b81..93c14bd 100644
--- a/components/kl-menus-v2/index.vue
+++ b/components/kl-menus-v2/index.vue
@@ -41,7 +41,7 @@
     { name: '模型', path: '/model' },
     { name: '国外专区', path: '/foreign' },
     { name: '工具箱', path: '/toolbox' },
-    { name: '交流频道', path: '/communication/channel' },
+    { name: '交流频道', path: '/channel' },
     // { name: '牛人社区', path: '/community' },
   ])
 
diff --git a/components/kl-nav-tab/index.vue b/components/kl-nav-tab/index.vue
index 13998c8..b3aa1ee 100644
--- a/components/kl-nav-tab/index.vue
+++ b/components/kl-nav-tab/index.vue
@@ -164,7 +164,7 @@
         navigateTo('/community') // 修改为在新窗口打开
         break
       case '交流频道':
-        navigateTo('/communication/channel') // 修改为在新窗口打开
+        navigateTo('/channel') // 修改为在新窗口打开
         break
       case '工具箱':
         navigateTo('/toolbox') // 修改为在新窗口打开
diff --git a/pages/channel/components/HotLlabel.vue b/pages/channel/components/HotLlabel.vue
index c067e2a..2030879 100644
--- a/pages/channel/components/HotLlabel.vue
+++ b/pages/channel/components/HotLlabel.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="box-border w-320px border border-[#EEEEEE] rounded-8px border-solid bg-[#FFFFFF] px-23px py-25px">
-    <div class="text-16px text-[#333333] font-normal">频道列表</div>
-    <div class="mt-30px">
+  <div class="box-border w-[320px] border border-[#EEEEEE] rounded-[8px] border-solid bg-[#FFFFFF] px-[23px] py-[25px]">
+    <div class="text-[16px] text-[#333333] font-normal">频道列表</div>
+    <div class="mt-[30px]">
       <el-row>
-        <el-col v-for="(item, index) in channelIdList" :key="index" :span="8" class="mb-10px">
+        <el-col v-for="(item, index) in channelIdList" :key="index" :span="8" class="mb-[10px]">
           <span
-            class="cursor-pointer text-14px text-[#999999] font-normal"
+            class="cursor-pointer text-[14px] text-[#999999] font-normal"
             :class="{ active: channelId === item.channelId }"
             @click="handleClick(item.channelId)"
             >{{ item.channelTitle }}</span
diff --git a/pages/channel/components/RightContent.vue b/pages/channel/components/RightContent.vue
index f18ff72..b967fb7 100644
--- a/pages/channel/components/RightContent.vue
+++ b/pages/channel/components/RightContent.vue
@@ -1,37 +1,37 @@
 <template>
-  <div class="ml-19px w-100%">
+  <div class="ml-[19px] w-[100%]">
     <ChannelHeader v-if="Object.keys(lunTanRes).length" v-model="lunTanRes"></ChannelHeader>
-    <div class="mb-13px box-border flex flex-1 flex-col cursor-pointer gap-12px border border-[#EEEEEE] rounded-8px border-solid bg-[#FFFFFF] px-20px py-16px">
+    <div class="mb-[13px] box-border flex flex-1 flex-col cursor-pointer gap-[12px] border border-[#EEEEEE] rounded-[8px] border-solid bg-[#FFFFFF] px-[20px] py-[16px]">
       <div
-        v-for="(item, index) in pageRes.list"
+        v-for="(item, index) in pageRes?.list"
         :key="index"
-        class="flex justify-between border-b-1px border-b-[#eee] border-b-solid pb-8px"
-        :class="{ 'border-b-0! pb-0px!': index === pageRes.list.length - 1 }"
+        class="flex justify-between border-b-[1px] border-b-[#eee] border-b-solid pb-[8px]"
+        :class="{ 'border-b-0! pb-[0px]!': index === pageRes!.list!.length - 1 }"
         @click="handleClick(item.postsId)"
       >
         <div class="flex flex-1 items-center">
-          <div class="ellipsis max-w-70% text-15px text-[#2d3137] font-normal">{{ item.postsTitle }}</div>
-          <span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ item.likeNum || 0 }}人赞过</span>
-          <span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ item.commentNum || 0 }}评论</span>
-          <span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}发布</span>
+          <div class="ellipsis max-w-[70%] text-[15px] text-[#2d3137] font-normal">{{ item.postsTitle }}</div>
+          <span class="ml-[10px] flex-shrink-0 text-[13px] color-[#96999f]">{{ item.likeNum || 0 }}人赞过</span>
+          <span class="ml-[10px] flex-shrink-0 text-[13px] color-[#96999f]">{{ item.commentNum || 0 }}评论</span>
+          <span class="ml-[10px] flex-shrink-0 text-[13px] color-[#96999f]">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}发布</span>
         </div>
-        <div class="w-100px flex flex-shrink-0 items-center justify-end">
-          <span class="ellipsis text-13px color-#96999f">{{ item.creatorName }}</span>
+        <div class="w-[100px] flex flex-shrink-0 items-center justify-end">
+          <span class="ellipsis text-[13px] color-[#96999f]">{{ item.creatorName }}</span>
           <!-- 删除 -->
           <el-button v-if="false" type="danger" size="small" @click="handleDelete(item.postsId)">删除</el-button>
         </div>
       </div>
     </div>
     <el-pagination
-      v-if="pageRes.list.length > 0"
+      v-if="pageRes?.list.length"
       v-model:current-page="pageNo"
       :page-size="10"
       layout="prev, pager, next"
-      :total="pageRes.total"
+      :total="pageRes?.total"
       @current-change="handleCurrentChange"
     />
     <!-- 暂无数据 -->
-    <el-empty v-if="!pageRes.list.length" description="暂无数据"></el-empty>
+    <el-empty v-if="!pageRes?.list.length" description="暂无数据"></el-empty>
   </div>
 </template>
 
@@ -43,7 +43,7 @@
 
   const emit = defineEmits(['updatePageNo'])
 
-  const pageRes = defineModel<TpageRes>('modelValue', {
+  const pageRes = defineModel<TpageRes | null>('modelValue', {
     required: true,
   })
   const lunTanRes = defineModel<ChannelRespVO>('lunTanRes', {
diff --git a/pages/channel/index.vue b/pages/channel/index.vue
index 546b940..424eba1 100644
--- a/pages/channel/index.vue
+++ b/pages/channel/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 导航 -->
   <KlNavTab active="交流频道" />
-  <div class="ma-auto mt-30px w-1440px flex">
+  <div class="ma-auto mt-[30px] w-[1440px] flex">
     <LeftContent v-model="pageReq.channelId"></LeftContent>
     <RightContent v-model="pageRes" v-model:lun-tan-res="lunTanRes" v-model:page-no="pageReq.pageNo" @update-page-no="handleUpdatePageNo"></RightContent>
   </div>
@@ -24,7 +24,12 @@
     list: [],
     total: 0,
   })
-  // 获得频道帖子分页
+
+  // const {data:pageRes, refresh:getPage} = await useAsyncData(`prod-api/app-api/business/posts/page-${Date.now()}`, async () => {
+  //   const res = await page(pageReq)
+  //   return res.data as TpageRes
+  // })
+ // 获得频道帖子分页
   const getPage = () => {
     page(pageReq).then((res) => {
       pageRes.list = res.data.list
@@ -52,6 +57,8 @@
     () => pageReq.channelId,
     (val) => {
       if (val) {
+        console.log(val);
+        
         getPage()
         getLunTanDetaiil(val)
       }
diff --git a/pages/foreign/components/RecommendedColumnsV2.vue b/pages/foreign/components/RecommendedColumnsV2.vue
index aab47ac..adc4848 100644
--- a/pages/foreign/components/RecommendedColumnsV2.vue
+++ b/pages/foreign/components/RecommendedColumnsV2.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="relative mt-34px w-100%">
+  <div class="relative mt-[34px] w-[100%]">
     <KlTabBar v-model="tabIndex" :data="tabBar" />
     <KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
-    <div class="absolute right-0px top-10px text-16px text-[#999999] font-normal"
-      >共<span class="color-#1A65FF">{{ result.total }}</span
+    <div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
+      >共<span class="color-[#1A65FF]">{{ result?.total }}</span
       >个筛选结果</div
     >
-    <div class="content mt-10px">
+    <div class="content mt-[10px]">
       <el-row :gutter="20">
-        <el-col v-for="(item, index) in result.list" :key="index" :span="6">
+        <el-col v-for="(item, index) in result?.list" :key="index" :span="6">
           <CardPicture :item-info="item" />
         </el-col>
       </el-row>
-      <el-empty v-if="!result.list.length" description="暂无数据"></el-empty>
+      <el-empty v-if="!result?.list.length" description="暂无数据"></el-empty>
     </div>
   </div>
 </template>
@@ -31,7 +31,7 @@
     },
   ])
 
-  const result = defineModel<pageRes>('modelValue', {
+  const result = defineModel<pageRes| null>('modelValue', {
     required: true,
   })
   const query = defineModel<any>('query', {
diff --git a/pages/foreign/index.vue b/pages/foreign/index.vue
index ebbdefb..349e581 100644
--- a/pages/foreign/index.vue
+++ b/pages/foreign/index.vue
@@ -3,7 +3,7 @@
   <KlNavTab active="国外专区" />
   <!-- banneer提示 -->
   <BannerTips />
-  <div class="ma-auto w-1440px">
+  <div class="ma-auto w-[1440px]">
     <!-- 图片展示鼠标移上去展示提示语 -->
     <!-- <ImageTips /> -->
     <!-- 推荐栏目 -->
@@ -11,12 +11,12 @@
     <!-- 精选专题 -->
     <!-- <FeaturedSpecials></FeaturedSpecials> -->
     <!-- 分页 -->
-    <div class="mt-10px flex justify-center">
+    <div class="mt-[10px] flex justify-center">
       <el-pagination
         v-model:current-page="query.pageNo"
         v-model:page-size="query.pageSize"
         :page-sizes="[10, 20, 30]"
-        :total="result.total"
+        :total="result?.total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="handleChangeSize"
         @current-change="handleChangeCurrent"
@@ -43,22 +43,26 @@
     source: '',
     type: 1,
   })
-  const result = reactive<pageRes>({
-    list: [],
-    total: 0,
+  // const result = reactive<pageRes>({
+  //   list: [],
+  //   total: 0,
+  // })
+
+  const {data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
+    const res = await page(query)
+    return res.data
   })
+  // const getPage = () => {
+  //   page(query).then((res) => {
+  //     const { data, code } = res
+  //     if (code === 0) {
+  //       result.list = data.list
+  //       result.total = data.total
+  //     }
+  //   })
+  // }
 
-  const getPage = () => {
-    page(query).then((res) => {
-      const { data, code } = res
-      if (code === 0) {
-        result.list = data.list
-        result.total = data.total
-      }
-    })
-  }
-
-  getPage()
+  // getPage()
 
   const handleChangeSize = (val: number) => {
     query.pageSize = val
diff --git a/pages/toolbox/components/search.vue b/pages/toolbox/components/search.vue
index f890a32..e924303 100644
--- a/pages/toolbox/components/search.vue
+++ b/pages/toolbox/components/search.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
-    <header class="h-90px">
+    <header class="h-[90px]">
       <div class="mx-a h-full flex items-center justify-center">
         <!-- 搜索区域 -->
-        <div class="relative w-647px px4 p-r-0px!">
-          <div class="search-input relative w-100%">
+        <div class="relative w-[647px] px-4 p-r-[0px]!">
+          <div class="search-input relative w-[100%]">
             <el-input
               v-model="searchQuery"
               type="text"
               placeholder="搜一搜"
               :prefix-icon="Search"
-              class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
+              class="no-right-border box-border h-[40px] w-[100%] rounded-bl-[4px] rounded-br-[0px] rounded-tl-[4px] rounded-tr-[0px] bg-[#F8F8F8] text-[14px] outline-[#999]"
               @keyup.enter="search"
             />
           </div>
@@ -18,13 +18,13 @@
         <!-- 按钮区域 -->
         <div class="flex items-center">
           <button
-            class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
+            class="h-[40px] w-[111px] cursor-pointer border-width-[1px] border-color-[#1A65FF] rounded-bl-[0px] rounded-br-[4px] rounded-tl-[0px] rounded-tr-[4px] border-none border-solid text-center text-[14px] color-[#fff] !bg-[#1A65FF]"
             @click="search"
           >
             搜索
           </button>
           <button
-            class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
+            class="m-l-[16px] h-[40px] w-[111px] cursor-pointer border-width-[1px] border-color-[#E7B03B] rounded-bl-[6px] rounded-br-[6px] rounded-tl-[4px] rounded-tr-[6px] border-none border-solid text-[14px] color-[#fff] !bg-[#E7B03B]"
             @click="handleUpload"
           >
             上传工具
diff --git a/pages/toolbox/index.vue b/pages/toolbox/index.vue
index bf57307..46e2c48 100644
--- a/pages/toolbox/index.vue
+++ b/pages/toolbox/index.vue
@@ -2,47 +2,47 @@
   <KlNavTab active="工具箱" />
   <!-- 搜索 -->
   <KlSearch @search="search"></KlSearch>
-  <div v-loading="loading" class="ml-auto mr-auto mt-20px w1440 flex justify-center gap-60px">
-    <div class="left w-821px">
-      <img src="~/assets/images/banner2.png" alt="" srcset="" class="h-284px w-100%" />
+  <div v-loading="loading" class="ma-auto mt-[20px] w-[1440px] flex justify-center gap-[60px]">
+    <div class="left w-[821px]">
+      <img src="~/assets/images/banner2.png" alt="" srcset="" class="h-[284px] w-[100%]" />
       <div
-        class="box-border border border-t-0px border-t-0px border-[#EEEEEE] rounded-12px border-solid border-t-none bg-[#FFFFFF] px-28px py-17px"
+        class="box-border border border-t-[0px] border-t-[0px] border-[#EEEEEE] rounded-[12px] border-solid border-t-none bg-[#FFFFFF] px-[28px] py-[17px]"
         style="border-top-left-radius: 0px; border-top-right-radius: 0px"
       >
-        <div v-for="item in pageRes.list" :key="item.id" class="mt-20px flex border-b-1px border-b-[#eee] border-b-solid pb-20px">
-          <div class="h-142px w-200px text-center">
-            <el-image :src="item.iconUrl" alt="" srcset="" class="max-w-100% rd-4px" fit="cover" />
+        <div v-for="item in pageRes?.list" :key="item.id" class="mt-[20px] flex border-b-[1px] border-b-[#eee] border-b-solid pb-[20px]">
+          <div class="h-[142px] w-[200px] text-center">
+            <el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
           </div>
-          <div class="ml-25px flex-1">
-            <div class="text-16px text-[#333333] font-normal">{{ item.title }}</div>
-            <div class="mt-8px text-14px text-[#999999] font-normal">{{ item.description }}</div>
-            <div class="mt-10px flex items-center justify-between">
+          <div class="ml-[25px] flex-1">
+            <div class="text-[16px] text-[#333333] font-normal">{{ item.title }}</div>
+            <div class="mt-[8px] text-[14px] text-[#999999] font-normal">{{ item.description }}</div>
+            <div class="mt-[10px] flex items-center justify-between">
               <div class="flex items-center">
-                <div class="flex items-center text-14px text-[#666666] font-normal">
-                  <img src="~/assets/images/look.png" alt="" srcset="" class="mr-4px h-17px w-23px" />{{ item.previewPoint }}
+                <div class="flex items-center text-[14px] text-[#666666] font-normal">
+                  <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[23px]" />{{ item.previewPoint }}
                 </div>
-                <div class="ml-26px flex items-center text-14px text-[#666666] font-normal">
-                  <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-4px h-17px w-19px" /> {{ item.commentsPoint }}
+                <div class="ml-[26px] flex items-center text-[14px] text-[#666666] font-normal">
+                  <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px] w-[19px]" /> {{ item.commentsPoint }}
                 </div>
-                <div class="ml-20px">
-                  <div v-for="(v, index) in item.labels" :key="index" class="mr-10px inline-block text-14px text-[#1A65FF] font-normal">#{{ v }}</div>
+                <div class="ml-[20px]">
+                  <div v-for="(v, index) in item.labels" :key="index" class="mr-[10px] inline-block text-[14px] text-[#1A65FF] font-normal">#{{ v }}</div>
                 </div>
               </div>
-              <div class="text-14px text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
+              <div class="text-[14px] text-[#999999] font-normal">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
             </div>
           </div>
         </div>
         <!-- 暂无数据 -->
-        <div v-if="pageRes.list.length === 0" class="mt-10px flex items-center justify-center">
+        <div v-if="pageRes?.list.length === 0" class="mt-[10px] flex items-center justify-center">
           <!-- <div class="text-16px text-[#999999] font-normal">暂无数据</div> -->
           <el-empty v-if="!pageRes.list.length" :image="emptyImg"></el-empty>
         </div>
-        <div class="mt-20px">
+        <div class="mt-[20px]">
           <el-pagination
             v-model:current-page="pageReq.pageNum"
             :page-size="pageReq.pageSize"
             layout="total, sizes, prev, pager, next"
-            :total="pageRes.total"
+            :total="pageRes?.total"
             :page-sizes="[10, 20, 30]"
             class="justify-center!"
             @current-change="handleCurrentChange"
@@ -51,13 +51,13 @@
         </div>
       </div>
     </div>
-    <div class="right w-398px">
-      <div class="box-border border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
-        <div class="flex items-center text-16px text-[#333333] font-normal">
-          <div class="mr-14px h-24px w-4px rounded-1px bg-[#1A65FF]"></div>
+    <div class="right w-[398px]">
+      <div class="box-border border border-[#EEEEEE] rounded-[10px] border-solid bg-[#FFFFFF] pa-[20px]">
+        <div class="flex items-center text-[16px] text-[#333333] font-normal">
+          <div class="mr-[14px] h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
           热门排行
         </div>
-        <div v-for="item in recommendList" :key="item.id" class="mt-20px text-14px text-[#666] font-normal">{{ item.title }}</div>
+        <div v-for="item in recommendList" :key="item.id" class="mt-[20px] text-[14px] text-[#666] font-normal">{{ item.title }}</div>
       </div>
       <!--  -->
       <!-- <div class="mt-20px box-border w-398px border border-[#EEEEEE] rounded-10px border-solid bg-[#FFFFFF] pa-20px">
@@ -110,26 +110,32 @@
     title: '',
   })
 
-  const pageRes = ref<TpageRes>({
-    list: [],
-    total: 0,
+  // const pageRes = ref<TpageRes>({
+  //   list: [],
+  //   total: 0,
+  // })
+
+
+  const {data: pageRes, refresh: getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
+    const res = await page(pageReq)
+    return res.data
   })
 
   const loading = ref(false)
-  const getPage = () => {
-    loading.value = true
-    page(pageReq)
-      .then((res) => {
-        if (res.code === 0) {
-          pageRes.value = res.data
-        }
-      })
-      .finally(() => {
-        loading.value = false
-      })
-  }
+  // const getPage = () => {
+  //   loading.value = true
+  //   page(pageReq)
+  //     .then((res) => {
+  //       if (res.code === 0) {
+  //         pageRes.value = res.data
+  //       }
+  //     })
+  //     .finally(() => {
+  //       loading.value = false
+  //     })
+  // }
 
-  getPage()
+  // getPage()
 
   const handleCurrentChange = (page: number) => {
     pageReq.pageNum = page
@@ -148,17 +154,24 @@
     getPage()
   }
 
-  // 猜你喜欢
-  const recommendList = ref<ProjectDrawPageRespVO[]>([]) // 猜你喜欢数据
-  const getRelationRecommendList = () => {
-    getRelationRecommend({
+  const {data: recommendList} = await useAsyncData(`draw-recommend-list-${Date.now()}`, async () => {
+    const res = await getRelationRecommend({
       type: 4,
-    }).then((res) => {
-      if (res.code === 0) {
-        console.log(res.data)
-        recommendList.value = res.data
-      }
     })
-  }
-  getRelationRecommendList()
+    return res.data
+  })
+    
+  // 猜你喜欢
+  // const recommendList = ref<ProjectDrawPageRespVO[]>([]) // 猜你喜欢数据
+  // const getRelationRecommendList = () => {
+  //   getRelationRecommend({
+  //     type: 4,
+  //   }).then((res) => {
+  //     if (res.code === 0) {
+  //       console.log(res.data)
+  //       recommendList.value = res.data
+  //     }
+  //   })
+  // }
+  // getRelationRecommendList()
 </script>