From c7a10c7e983ce0233665ea5bcd6d96ba90bcff42 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Fri, 6 Sep 2024 13:32:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E5=85=B7=E7=AE=B1):=20=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E7=95=8C=E9=9D=A2=EF=BC=8C=E6=98=BE=E7=A4=BA=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E7=AE=B1=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ToolboxView/ToolboxView.vue | 85 +++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/src/views/ToolboxView/ToolboxView.vue b/src/views/ToolboxView/ToolboxView.vue
index b581f3f..d884163 100644
--- a/src/views/ToolboxView/ToolboxView.vue
+++ b/src/views/ToolboxView/ToolboxView.vue
@@ -4,15 +4,100 @@
       <span>{{ TOOLBOX_MODULE_TITLE }}</span>
     </div>
     <div class="app-view-content is-transparent">
+      <div class="tool-list">
+        <n-collapse
+          :default-expanded-names="toolList.map(item => item.id)"
+        >
+
+          <!-- 分类项 -->
+          <n-collapse-item
+            v-for="categoryItem in toolList"
+            :key="categoryItem.id"
+            :name="categoryItem.id"
+            :title="categoryItem.title"
+          >
+
+            <!-- 工具项 -->
+            <div
+              v-for="toolItem in categoryItem.items"
+              :key="toolItem.id"
+              class="tool-item shadow-1"
+            >
+              <div class="item-header">
+                <span :class="['item-icon', toolItem.iconClass || 'mdi mdi-package-variant-closed']"></span>
+              </div>
+              <div class="item-body">
+                <div class="item-title">{{ toolItem.title }}</div>
+                <n-ellipsis
+                  class="item-desc"
+                  :line-clamp="2"
+                  :tooltip="true"
+                >{{ toolItem.desc }}</n-ellipsis>
+              </div>
+            </div>
+
+          </n-collapse-item>
+
+        </n-collapse>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import {
+  NCollapse, NCollapseItem, NEllipsis,
+} from 'naive-ui';
+
+import {
+  toolList,
+} from '@/assets/js/toolbox-data';
+
 import {
   TOOLBOX_MODULE_TITLE,
 } from '@/config/modules';
 </script>
 
 <style lang="less" scoped>
+.tool-list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.tool-item {
+  display: inline-block;
+  margin: 16px;
+  padding: 16px;
+  vertical-align: middle;
+  width: 256px;
+  height: 132px;
+  border-radius: var(--border-radius);
+  outline: 2px solid transparent;
+  background-color: #FFF;
+  font-size: 16px;
+  line-height: 1;
+  transition: outline 0.25s;
+  cursor: pointer;
+
+  &:hover {
+    outline-color: var(--color-primary);
+  }
+
+  .item-icon {
+    font-size: 32px;
+    opacity: 0.75;
+  }
+
+  .item-title {
+    margin: 8px 0;
+    font-size: 18px;
+  }
+
+  :deep(.item-desc) {
+    font-size: 14px;
+    line-height: 1.2;
+    opacity: 0.75;
+  }
+}
 </style>