feat: 所有页面支持1到4层级的嵌套结构

assets/style.css

@@ -892,6 +892,205 @@ body .content.expanded {
     font-size: 1.3rem;
 }
 
+/* 多层级嵌套样式 */
+/* 层级2: 子分类 */
+.category-level-2 {
+    margin: 1.5rem 0 1.5rem 2rem;
+    padding: 1.5rem;
+    background: linear-gradient(145deg,
+        rgba(var(--card-bg-rgb), 0.8),
+        rgba(var(--card-bg-rgb), 0.6));
+    border-left: 3px solid var(--accent-color);
+    border-radius: 12px;
+    width: calc(100% - 3.5rem);
+}
+
+.category-level-2 .category-header h3 {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    color: var(--text-bright);
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    letter-spacing: 0.2px;
+}
+
+.category-level-2 .category-header h3 i {
+    color: var(--accent-color);
+    font-size: 1.2rem;
+}
+
+/* 层级3: 分组 */
+.group-level-3, .category-level-3 {
+    margin: 1rem 0 1rem 1.5rem;
+    padding: 1rem;
+    background: rgba(var(--card-bg-rgb), 0.4);
+    border-left: 2px solid var(--secondary-color);
+    border-radius: 8px;
+    width: calc(100% - 2.5rem);
+}
+
+.group-level-3 .group-header h4,
+.category-level-3 .category-header h4 {
+    font-size: 1rem;
+    margin-bottom: 0.8rem;
+    color: var(--text-bright);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    letter-spacing: 0.2px;
+}
+
+.group-level-3 .group-header h4 i,
+.category-level-3 .category-header h4 i {
+    color: var(--secondary-color);
+    font-size: 1.1rem;
+}
+
+/* 层级4: 更深层次的分组 */
+.group-level-4, .category-level-4 {
+    margin: 0.8rem 0 0.8rem 1rem;
+    padding: 0.8rem;
+    background: rgba(var(--card-bg-rgb), 0.2);
+    border-left: 1px solid var(--tertiary-color);
+    border-radius: 6px;
+    width: calc(100% - 1.8rem);
+}
+
+.group-level-4 .group-header h5,
+.category-level-4 .category-header h5 {
+    font-size: 0.95rem;
+    margin-bottom: 0.6rem;
+    color: var(--text-bright);
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    letter-spacing: 0.1px;
+}
+
+.group-level-4 .group-header h5 i,
+.category-level-4 .category-header h5 i {
+    color: var(--tertiary-color);
+    font-size: 1rem;
+}
+
+/* 切换图标样式 */
+.toggle-icon {
+    display: inline-block;
+    margin-left: auto;
+    transition: transform 0.3s ease;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+.category-header:hover .toggle-icon,
+.group-header:hover .toggle-icon {
+    color: var(--accent-color);
+}
+
+/* 展开/折叠动画 */
+.category-content, .group-content {
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+    max-height: 9999px;
+    opacity: 1;
+}
+
+.category.collapsed .category-content,
+.group.collapsed .group-content {
+    max-height: 0;
+    opacity: 0;
+}
+
+.category.collapsed .toggle-icon i,
+.group.collapsed .toggle-icon i {
+    transform: rotate(-90deg);
+}
+
+/* 空内容提示 */
+.empty-content {
+    color: var(--text-muted);
+    font-style: italic;
+    text-align: center;
+    padding: 1rem;
+    font-size: 0.9rem;
+}
+
+/* 子容器样式 */
+.subcategories-container,
+.groups-container {
+    width: 100%;
+}
+
+/* 确保嵌套的网站网格正确显示 */
+.category-level-2 .sites-grid,
+.group-level-3 .sites-grid,
+.category-level-3 .sites-grid,
+.group-level-4 .sites-grid,
+.category-level-4 .sites-grid {
+    margin-top: 0.8rem;
+    gap: 0.8rem;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+}
+
+/* 响应式设计 - 嵌套结构 */
+@media (max-width: 768px) {
+    .category-level-2 {
+        margin-left: 1rem;
+        padding: 1rem;
+        width: calc(100% - 2rem);
+    }
+    
+    .group-level-3, .category-level-3 {
+        margin-left: 0.5rem;
+        padding: 0.8rem;
+        width: calc(100% - 1.3rem);
+    }
+    
+    .group-level-4, .category-level-4 {
+        margin-left: 0.3rem;
+        padding: 0.6rem;
+        width: calc(100% - 0.9rem);
+    }
+    
+    .category-level-2 .sites-grid,
+    .group-level-3 .sites-grid,
+    .category-level-3 .sites-grid,
+    .group-level-4 .sites-grid,
+    .category-level-4 .sites-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0.6rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .category {
+        margin-left: 1rem;
+        padding: 1.5rem;
+    }
+    
+    .category-level-2, .group-level-3, .category-level-3 {
+        margin-left: 0.5rem;
+        padding: 0.8rem;
+        width: calc(100% - 1rem);
+    }
+    
+    .group-level-4, .category-level-4 {
+        margin-left: 0.3rem;
+        padding: 0.6rem;
+        width: calc(100% - 0.6rem);
+    }
+    
+    .category-level-2 .sites-grid,
+    .group-level-3 .sites-grid,
+    .category-level-3 .sites-grid,
+    .group-level-4 .sites-grid,
+    .category-level-4 .sites-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 0.5rem;
+    }
+}
+
 /* 网站卡片网格 */
 .sites-grid {
     display: grid;