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

pages/toolbox-detail/[id].vue

@@ -0,0 +1,57 @@
+<!-- 工具箱详情页面 -->
+<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="w-[100%]">
+      <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.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.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]">
+              {{ 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]">{{ 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]">{{ 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]">{{ detail?.commentsPoint || 0 }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <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>