feat(工具页): 添加工具搜索功能并定义CSS自定义属性

- 在工具页面添加搜索框和对应的JavaScript逻辑，实现按标题和描述过滤工具卡片
- 定义全局CSS自定义属性（包括深色模式变量）以统一样式管理
- 为搜索组件添加样式，包括输入框、图标和分隔线

Author: CodeGlimpse

assets/js/tools/search.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const searchInput = document.getElementById('tool-search');
+    if (!searchInput) return;
+
+    const toolCards = document.querySelectorAll('.tools-grid .tool-card');
+
+    searchInput.addEventListener('input', function (e) {
+        const searchTerm = e.target.value.toLowerCase();
+
+        toolCards.forEach(function (card) {
+            const title = card.querySelector('.tool-title').textContent.toLowerCase();
+            const desc = card.querySelector('.tool-desc').textContent.toLowerCase();
+            const isVisible = title.includes(searchTerm) || desc.includes(searchTerm);
+            card.style.display = isVisible ? '' : 'none';
+        });
+    });
+});

assets/scss/custom.scss

@@ -1,3 +1,28 @@
+/** 
+ * Custom variables
+ */
+:root {
+    --primary-color: #007bff;
+    --primary-color-rgb: 0, 123, 255;
+
+    --content-bg: #ffffff;
+    --content-color: #212529;
+    --content-h-color: #343a40;
+    --content-border-color: #dee2e6;
+
+    --border-radius: 0.75rem;
+}
+
+[data-scheme="dark"] {
+    --primary-color: #0088ff;
+    --primary-color-rgb: 0, 136, 255;
+
+    --content-bg: #1a1a1a;
+    --content-color: #d8d8d8;
+    --content-h-color: #c2c2c2;
+    --content-border-color: #3a3a3a;
+}
+
 /*
     You can add your own custom styles here.
 */

assets/scss/tools.scss

@@ -1,8 +1,52 @@
+.search-wrapper {
+    position: relative;
+
+    #tool-search {
+        width: 100%;
+        padding: 0.75rem 1rem 0.75rem 5rem;
+        border-radius: var(--border-radius);
+        border: 1px solid var(--content-border-color);
+        background-color: var(--content-bg);
+        color: var(--content-color);
+        font-size: 2rem;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+
+        &::placeholder {
+            color: var(--content-h-color);
+            opacity: 0.5;
+        }
+
+        &:focus {
+            outline: none;
+            transform: translateY(-1px);
+        }
+    }
+
+    .icon-tabler-search {
+        position: absolute;
+        left: 1.2rem;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--content-h-color);
+        width: 20px;
+        height: 20px;
+        pointer-events: none;
+        transition: color 0.3s;
+    }
+
+}
+
+.search-divider {
+    border: none;
+    border-top: 1.5px solid var(--content-border-color);
+    margin: 1px 0;
+}
+
 .tools-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     gap: 2rem;
-    padding: 2rem 0;
 
     .tool-card {
         background: var(--card-background);

layouts/tools.html

@@ -8,6 +8,17 @@ <h1 class="title">{{ .Title }}</h1>
     </div>
 </header>
 
+<div class="search-wrapper">
+    <input type="search" id="tool-search" placeholder="搜索工具...">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icon-tabler-search">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <circle cx="10" cy="10" r="7"></circle>
+        <line x1="21" y1="21" x2="15" y2="15"></line>
+    </svg>
+</div>
+
+<hr class="search-divider">
+
 <div class="tools-grid">
     {{ range .Pages }}
     <a href="{{ .RelPermalink }}" class="tool-card">
@@ -35,4 +46,6 @@ <h3 class="tool-title">{{ .Title }}</h3>
 <div class="article-content">
     {{ .Content }}
 </div>
+{{ $searchJS := resources.Get "js/tools/search.js" | resources.Minify }}
+<script src="{{ $searchJS.RelPermalink }}" defer></script>
 {{ end }}