From bf189f7f5bb7b1d5d1273a0e83c48b3f2450e5f4 Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Thu, 18 Sep 2025 22:44:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=8F=8A?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/toolbox-detail/index.vue | 119 ++++++++++-----------------------
 pages/toolbox/index.vue        |   2 +-
 2 files changed, 36 insertions(+), 85 deletions(-)

diff --git a/pages/toolbox-detail/index.vue b/pages/toolbox-detail/index.vue
index 6031ad6..2eca57c 100644
--- a/pages/toolbox-detail/index.vue
+++ b/pages/toolbox-detail/index.vue
@@ -1,92 +1,43 @@
 <!-- 工具箱详情页面 -->
 <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 class="toolbox-detail w-[1019px] 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>
+      <div class="flex items-center w-[100%] mt-[30px]">
+        <img :src="userStore.userInfoRes.avatar" 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>
+          <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>
+            <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>
+              </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>
+              </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>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="body">
-        <p class="text">
-          这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
-          使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
-        </p>
-      </div>
+    </div>
+    <div class="w-[938px] 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]">
+        这里是工具箱的详细使用说明和描述内容。您可以在这里添加关于该工具箱功能的详细介绍，
+        使用方法，注意事项等。内容支持多行文本，会自动适配容器宽度并保持良好的阅读体验。
+      </p>
     </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>
+<script setup lang="ts">
+  import useUserStore from '~/stores/user'
+  const userStore = useUserStore()
+</script>
diff --git a/pages/toolbox/index.vue b/pages/toolbox/index.vue
index 822d252..3ba73ad 100644
--- a/pages/toolbox/index.vue
+++ b/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 @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 @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] cursor-pointer">
           <div class="h-[142px] w-[200px] text-center">
             <el-image :src="item.iconUrl" alt="" srcset="" class="max-w-[100%] rd-[4px]" fit="cover" />
           </div>