From 0e151156df500578486ff178b6d00eebc444bcf2 Mon Sep 17 00:00:00 2001
From: rbetree <rzlrong@outlook.com>
Date: Fri, 2 Jan 2026 20:05:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=90=84=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7=E6=8A=98=E5=8F=A0=E4=B8=8E=E6=A0=87=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化完善各层级下的折叠样式；桌面端隐藏，悬浮动画等
- 优化各层级标题；固定标题前的图标宽度，对齐标题
---
 assets/style.css                  | 41 +++++++++++++++++++++----------
 templates/components/category.hbs | 24 +++++++++---------
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index ef7c5d4..172d0de 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1061,6 +1061,21 @@ body .content.expanded {
     transition: all var(--transition-normal);
 }
 
+/* 标题前图标固定宽度：避免不同图标宽度导致标题文本不对齐 */
+.category-header [data-editable="category-name"] > i,
+.group-header [data-editable="group-name"] > i {
+    width: 1.25em;
+    min-width: 1.25em;
+    text-align: center;
+    flex: 0 0 1.25em;
+}
+
+/* 分组标题容器：与分类保持一致的悬浮动效基础 */
+.group-header {
+    border-radius: var(--radius-md);
+    transition: all var(--transition-normal);
+}
+
 /* 仅可折叠的标题显示交互态 */
 .category-header[data-toggle="category"],
 .group-header[data-toggle="group"] {
@@ -1073,10 +1088,19 @@ body .content.expanded {
     background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
 }
 
+.group-header[data-toggle="group"]:hover {
+    transform: translateY(-2px);
+    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
+}
+
 .category-header[data-toggle="category"]:active {
     transform: translateY(0);
 }
 
+.group-header[data-toggle="group"]:active {
+    transform: translateY(0);
+}
+
 .category h2 {
     font-size: 1.2rem;
     margin-bottom: 0;
@@ -1161,12 +1185,6 @@ body .content.expanded {
     background: none;
 }
 
-.group-level-3 .group-header:hover,
-.category-level-3 .category-header:hover {
-    background: none;
-    transform: none;
-}
-
 .group-level-3 .group-header h4,
 .category-level-3 .category-header h4 {
     font-size: 1rem;
@@ -1213,12 +1231,6 @@ body .content.expanded {
     background: none;
 }
 
-.group-level-4 .group-header:hover,
-.category-level-4 .category-header:hover {
-    background: none;
-    transform: none;
-}
-
 .group-level-4 .group-header h5,
 .category-level-4 .category-header h5 {
     font-size: 0.9rem;
@@ -1275,13 +1287,16 @@ body .content.expanded {
     color: var(--accent-color);
 }
 
-/* 分组折叠图标：桌面端默认隐藏，悬停/收起时显示，避免按钮过多 */
+/* 分类/分组折叠图标：桌面端默认隐藏，悬停/收起时显示，避免按钮过多 */
 @media (hover: hover) and (pointer: fine) {
+    .category-header .toggle-icon,
     .group-header .toggle-icon {
         opacity: 0;
         transition: opacity 0.2s ease;
     }
 
+    .category-header[data-toggle="category"]:hover .toggle-icon,
+    .category.collapsed > .category-header .toggle-icon,
     .group-header[data-toggle="group"]:hover .toggle-icon,
     .group.collapsed > .group-header .toggle-icon {
         opacity: 1;
diff --git a/templates/components/category.hbs b/templates/components/category.hbs
index c66eb8f..044dbd6 100644
--- a/templates/components/category.hbs
+++ b/templates/components/category.hbs
@@ -6,24 +6,26 @@
          data-level="{{#if level}}{{level}}{{else}}1{{/if}}"
          data-container="categories">
     
-    <div class="category-header"{{#if level}}{{#ifCond level '===' 2}} data-toggle="category"{{/ifCond}}{{else}}{{#unless subcategories}}{{#unless groups}} data-toggle="category"{{/unless}}{{/unless}}{{/if}}>
+    <div class="category-header"{{#if subcategories}} data-toggle="category"{{else}}{{#if groups}} data-toggle="category"{{else}}{{#if sites}} data-toggle="category"{{/if}}{{/if}}{{/if}}>
         <h{{#if level}}{{add level 1}}{{else}}2{{/if}} data-editable="category-name">
             <i class="{{icon}}"></i>
             {{name}}
-            {{#if level}}
-                {{#ifCond level '===' 2}}
-                    <span class="toggle-icon">
-                        <i class="fas fa-chevron-down"></i>
-                    </span>
-                {{/ifCond}}
+            {{#if subcategories}}
+                <span class="toggle-icon">
+                    <i class="fas fa-chevron-down"></i>
+                </span>
             {{else}}
-                {{#unless subcategories}}
-                {{#unless groups}}
+                {{#if groups}}
                     <span class="toggle-icon">
                         <i class="fas fa-chevron-down"></i>
                     </span>
-                {{/unless}}
-                {{/unless}}
+                {{else}}
+                    {{#if sites}}
+                        <span class="toggle-icon">
+                            <i class="fas fa-chevron-down"></i>
+                        </span>
+                    {{/if}}
+                {{/if}}
             {{/if}}
         </h{{#if level}}{{add level 1}}{{else}}2{{/if}}>
     </div>