优化工具箱详情页面及点击跳转功能

pages/toolbox-detail/index.vue

@@ -0,0 +1,92 @@
+<!-- 工具箱详情页面 -->
+<template>
+  <KlNavTab />
+  <div class="toolbox-detail">
+    <div class="content-card">
+      <div class="header">
+        <img src="~/assets/images/avatar.png" alt="头像" class="avatar" />
+        <div class="user-info">
+          <h2 class="title">工具箱使用详情</h2>
+          <p class="nickname">用户昵称</p>
+          <p class="time">2024-06-15 14:30</p>
+        </div>
+      </div>
+      <div class="body">
+        <p class="text">
+          这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
+          使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss">
+  .toolbox-detail {
+    height: 100%;
+    background-color: #f5f7fa;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .content-card {
+      width: 100%;
+      max-width: 600px;
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+
+      .header {
+        display: flex;
+        align-items: center;
+        padding: 24px;
+        gap: 16px;
+        border-bottom: 1px solid #f0f0f0;
+
+        .avatar {
+          width: 50px;
+          height: 50px;
+          border-radius: 50%;
+          object-fit: cover;
+          border: 2px solid #f0f0f0;
+        }
+
+        .user-info {
+          flex: 1;
+
+          .title {
+            margin: 0 0 8px 0;
+            font-size: 20px;
+            font-weight: 600;
+            color: #1a1a1a;
+          }
+
+          .nickname {
+            margin: 0 0 4px 0;
+            font-size: 14px;
+            color: #666;
+          }
+
+          .time {
+            margin: 0;
+            font-size: 12px;
+            color: #999;
+          }
+        }
+      }
+
+      .body {
+        padding: 24px;
+
+        .text {
+          margin: 0;
+          font-size: 14px;
+          line-height: 1.6;
+          color: #333;
+        }
+      }
+    }
+  }
+</style>

pages/toolbox/index.vue

@@ -28,7 +28,7 @@
         </el-form-item>
       </el-form>
       <div class="box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px] py-[17px]">
-        <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 @click="handleClick(item)" 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>
@@ -187,6 +187,10 @@
     getPage()
   }
 
+  const handleClick = (item: ProjectDrawPageRespVO) => {
+    navigateTo(`/toolbox-detail`)
+  }
+
   const { data: recommendList } = await useAsyncData(`draw-recommend-list-getRelationRecommend`, async () => {
     const res = await getRelationRecommend({
       type: 4,