优化工具箱详情页及API接口

pages/toolbox-detail/[id].vue

@@ -1,27 +1,31 @@
 <!-- 工具箱详情页面 -->
 <template>
   <KlNavTab />
-  <div class="toolbox-detail w-[1200px] min-h-[374px] bg-[#FFFFFF] rounded-[12px] border border-solid border-[#EEEEEE] pa-[37px] pt-[20px] box-border ma-auto mt-[30px]">
+  <div
+    class="toolbox-detail w-[1200px] min-h-[374px] bg-[#FFFFFF] rounded-[12px] border border-solid border-[#EEEEEE] pa-[37px] pt-[20px] box-border ma-auto mt-[30px]"
+  >
     <div class="w-[100%]">
-      <h1 class="font-[Microsoft_YaHei] font-bold text-[24px] text-[#333333] leading-[21px]">工具箱使用详情</h1>
+      <h1 class="font-[Microsoft_YaHei] font-bold text-[24px] text-[#333333] leading-[21px]">{{ detail?.title }}</h1>
       <div class="flex items-center w-[100%] mt-[30px]">
-        <img :src="userStore.userInfoRes.avatar" alt="头像" class="w-[49px] h-[50px] rounded-[50%] mr-[16px]" />
+        <img :src="userStore.ownedUserAvatar" alt="头像" class="w-[49px] h-[50px] rounded-[50%] mr-[16px]" />
         <div class="flex flex-col items-start w-[100%]">
-          <p class="font-[Microsoft_YaHei] font-normal text-[16px] text-[#333333] leading-[8px]">{{ userStore.userInfoRes.nickname || '用户昵称' }}</p>
+          <p class="font-[Microsoft_YaHei] font-normal text-[16px] text-[#333333] leading-[8px]">{{ userStore.ownedUserName || '用户昵称' }}</p>
           <div class="flex items-center justify-between mt-[8px] w-[100%]">
-            <p class="font-[Microsoft_YaHei] font-normal text-[12px] text-[#999999] leading-[8px]">{{ new Date().toLocaleString('zh-CN') }}</p>
+            <p class="font-[Microsoft_YaHei] font-normal text-[12px] text-[#999999] leading-[8px]">
+              {{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+            </p>
             <div class="flex items-center justify-between font-[Microsoft_YaHei] font-normal text-[14px] text-[#666666] leading-[8px]">
               <div class="mr-[9px] flex items-center">
                 <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
-                <span class="color-[#666]">1</span>
+                <span class="color-[#666]">{{ detail?.previewPoint || 0 }}</span>
               </div>
               <div class="mr-[9px] flex items-center">
                 <img src="~/assets/images/add.png" alt="" srcset="" class="mr-[2px] h-[22px]" />
-                <span class="color-[#666]">2</span>
+                <span class="color-[#666]">{{ detail?.hotPoint || 0}}</span>
               </div>
               <div class="flex items-center">
                 <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
-                <span class="color-[#666]">3</span>
+                <span class="color-[#666]">{{ detail?.commentsPoint || 0 }}</span>
               </div>
             </div>
           </div>
@@ -31,13 +35,23 @@
     <div class="w-[100%] h-[1px] bg-[#EEEEEE] rounded-[1px] my-[20px]"></div>
     <div class="body">
       <p class="font-[Microsoft_YaHei] font-normal text-[14px] text-[#333333] leading-[26px]">
-        这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
-        使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
+        {{ detail?.description }}
       </p>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+  import dayjs from 'dayjs'
+  import { get } from '@/api/toolbox/index'
   import useUserStore from '~/stores/user'
   const userStore = useUserStore()
+  const route = useRoute()
+  console.log(route.params.id)
+
+  const { data: detail } = await useAsyncData(`toolbox-detail-${route.params.id}}`, async () => {
+    const res = await get({ id: route.params.id as string })
+    return res.data
+  })
+
+  console.log(detail.value)
 </script>

pages/toolbox/index.vue

@@ -188,7 +188,7 @@
   }
 
   const handleClick = (item: ProjectDrawPageRespVO) => {
-    navigateTo(`/toolbox-detail`)
+    navigateTo(`/toolbox-detail/${item.id}`)
   }
 
   const { data: recommendList } = await useAsyncData(`draw-recommend-list-getRelationRecommend`, async () => {