From f8c0e1ee6d8133878bb0e020f9df7b21dab91bbf Mon Sep 17 00:00:00 2001
From: Kisechan <kisechan_@outlook.com>
Date: Fri, 7 Mar 2025 20:29:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A5=E5=85=B7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E6=9B=B4=E6=96=B0=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E5=B9=B6=E5=8A=A0=E8=BD=BD=E5=B7=A5=E5=85=B7=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/tools.yml          |  10 +++
 src/components/NavBar.vue |   4 ++
 src/router/index.js       |   6 ++
 src/views/ToolsView.vue   | 135 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 155 insertions(+)
 create mode 100644 public/tools.yml
 create mode 100644 src/views/ToolsView.vue

diff --git a/public/tools.yml b/public/tools.yml
new file mode 100644
index 0000000..1a13964
--- /dev/null
+++ b/public/tools.yml
@@ -0,0 +1,10 @@
+- category: "自部署小工具"
+  tools:
+    - icon: "https://excalidraw.com/favicon.ico"
+      title: "Excalidraw 画板"
+      description: "简单的在线绘图工具"
+      url: "https://draw.kisechan.space/"
+    - icon: "https://calc.kisechan.space/icon.svg"
+      title: "Calcium 计算器"
+      description: "在线计算器"
+      url: "https://calc.kisechan.space/"
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 93a168d..bbd8bd9 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -19,6 +19,10 @@
         <i class="fa-solid fa-link"></i>
         友链
       </el-menu-item>
+      <el-menu-item @click="openLink('/tools')">
+        <i class="fa-solid fa-toolbox"></i>
+        工具
+      </el-menu-item>
       <el-menu-item @click="toggleDarkMode">
         <div class="flip-container">
           <div :class="['flipper', isDarkMode ? 'flip' : '']">
diff --git a/src/router/index.js b/src/router/index.js
index 817a07e..cdd948a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,12 @@ const routes = [
     component: () => import("@/views/LinksView.vue"),
     meta: { title: "友链" },
   },
+  {
+    path: "/tools",
+    name: "tools",
+    component: () => import("@/views/ToolsView.vue"),
+    meta: { title: "工具" },
+  },
 ];
 
 const router = createRouter({
diff --git a/src/views/ToolsView.vue b/src/views/ToolsView.vue
new file mode 100644
index 0000000..589a50e
--- /dev/null
+++ b/src/views/ToolsView.vue
@@ -0,0 +1,135 @@
+<template>
+    <div class="tools-container">
+      <h1>
+        <i class="fa-solid fa-toolbox"></i>工具
+      </h1>
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading-container">
+        <el-skeleton :rows="10" animated />
+      </div>
+      <!-- 工具列表 -->
+      <template v-else>
+        <el-card v-for="(category, categoryIndex) in tools" :key="categoryIndex" class="category-container">
+          <h2>{{ category.category }}</h2>
+          <div class="tools-grid">
+            <el-card
+              v-for="(tool, toolIndex) in category.tools"
+              :key="toolIndex"
+              class="tool-card"
+              @click="openLink(tool.url)"
+            >
+              <div class="tool-content">
+                <el-avatar :src="tool.icon" class="tool-icon" />
+                <div class="tool-info">
+                  <div class="tool-title">{{ tool.title }}</div>
+                  <div class="tool-description">{{ tool.description }}</div>
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </el-card>
+      </template>
+    </div>
+  </template>
+  
+  <script>
+  import yaml from "js-yaml";
+  import { ref } from "vue";
+  
+  export default {
+    name: "ToolsView",
+    setup() {
+      const tools = ref([]);
+      const loading = ref(true);
+  
+      // 加载 YAML 文件
+      fetch("/tools.yml")
+        .then((response) => response.text())
+        .then((text) => {
+          tools.value = yaml.load(text);
+        })
+        .catch((error) => {
+          console.error("Failed to load YAML file:", error);
+        })
+        .finally(() => {
+          loading.value = false; // 数据加载完成后，设置 loading 为 false
+        });
+  
+      const openLink = (url) => {
+        window.open(url, "_blank");
+      };
+  
+      return {
+        tools,
+        openLink,
+        loading,
+      };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .tools-container {
+    padding: 20px;
+  }
+  
+  .category-container {
+    margin-bottom: 30px;
+  }
+  
+  .category-container h2 {
+    font-size: 1.5em;
+    margin-bottom: 15px;
+    color: var(--text-color);
+  }
+  
+  .tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 15px;
+  }
+  
+  .tool-card {
+    cursor: pointer;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .tool-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  
+  .tool-content {
+    display: flex;
+    align-items: center;
+  }
+  
+  .tool-icon {
+    margin-right: 15px;
+  }
+  
+  .tool-info {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .tool-title {
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+  
+  .tool-description {
+    font-size: 0.9em;
+    color: var(--code-text-color);
+  }
+  
+  .loading-container {
+    padding: 20px;
+  }
+  
+  h1 {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  </style>
\ No newline at end of file