20260602173115

code/docusaurus/src/components/Link/SearchableLinkGrid.tsx

@@ -3,9 +3,15 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'
 import LinkCard from './LinkCard'
 import styles from './styles.module.css'
 
+export interface SubGroup {
+  title: string
+  items: LinkCardProps[]
+}
+
 export interface GroupedLinkCardProps {
   groupName: string
-  items: LinkCardProps[]
+  items?: LinkCardProps[]
+  subGroups?: SubGroup[]
 }
 
 interface SearchableLinkGridProps {
@@ -15,6 +21,7 @@ interface SearchableLinkGridProps {
 export default function SearchableLinkGrid({ groups }: SearchableLinkGridProps) {
   const [searchTerm, setSearchTerm] = useState('')
   const [activeSection, setActiveSection] = useState('')
+  const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set([0]))
   const sidebarRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -46,11 +53,17 @@ export default function SearchableLinkGrid({ groups }: SearchableLinkGridProps)
       },
     )
 
-    groups.forEach((_, index) => {
-      const element = document.getElementById(`group-${index}`)
-      if (element) {
-        observer.observe(element)
+    groups.forEach((group, groupIndex) => {
+      const groupElement = document.getElementById(`group-${groupIndex}`)
+      if (groupElement) {
+        observer.observe(groupElement)
       }
+      group.subGroups?.forEach((_, subIndex) => {
+        const subGroupElement = document.getElementById(`subgroup-${groupIndex}-${subIndex}`)
+        if (subGroupElement) {
+          observer.observe(subGroupElement)
+        }
+      })
     })
 
     return () => {
@@ -58,31 +71,102 @@ export default function SearchableLinkGrid({ groups }: SearchableLinkGridProps)
     }
   }, [groups])
 
+  const countGroupItems = (group: GroupedLinkCardProps): number => {
+    let count = group.items?.length || 0
+    if (group.subGroups) {
+      count += group.subGroups.reduce((sum, sg) => sum + sg.items.length, 0)
+    }
+    return count
+  }
+
+  const filterGroup = (group: GroupedLinkCardProps, lowerTerm: string): GroupedLinkCardProps | null => {
+    const filteredItems = group.items?.filter(
+      item =>
+        item.title.toLowerCase().includes(lowerTerm)
+        || item.description.toLowerCase().includes(lowerTerm),
+    ) || []
+
+    const filteredSubGroups = group.subGroups?.map(sg => ({
+      ...sg,
+      items: sg.items.filter(
+        item =>
+          item.title.toLowerCase().includes(lowerTerm)
+          || item.description.toLowerCase().includes(lowerTerm),
+      ),
+    })).filter(sg => sg.items.length > 0) || []
+
+    if (filteredItems.length > 0 || filteredSubGroups.length > 0) {
+      return {
+        ...group,
+        items: filteredItems.length > 0 ? filteredItems : undefined,
+        subGroups: filteredSubGroups.length > 0 ? filteredSubGroups : undefined,
+      }
+    }
+
+    return null
+  }
+
   const filteredGroups = useMemo(() => {
     if (!searchTerm.trim())
       return groups
 
     const lowerTerm = searchTerm.toLowerCase()
-    return groups.map(group => ({
-      ...group,
-      items: group.items.filter(
-        item =>
-          item.title.toLowerCase().includes(lowerTerm)
-          || item.description.toLowerCase().includes(lowerTerm),
-      ),
-    })).filter(group => group.items.length > 0)
+    return groups.map(group => filterGroup(group, lowerTerm)).filter(Boolean) as GroupedLinkCardProps[]
   }, [searchTerm, groups])
 
-  const totalItems = groups.reduce((sum, group) => sum + group.items.length, 0)
-  const filteredTotalItems = filteredGroups.reduce((sum, group) => sum + group.items.length, 0)
+  const totalItems = groups.reduce((sum, group) => sum + countGroupItems(group), 0)
+  const filteredTotalItems = filteredGroups.reduce((sum, group) => sum + countGroupItems(group), 0)
 
-  const scrollToSection = (index: number) => {
-    const element = document.getElementById(`group-${index}`)
+  const scrollToSection = (groupIndex: number, subGroupIndex?: number) => {
+    if (subGroupIndex !== undefined) {
+      const element = document.getElementById(`subgroup-${groupIndex}-${subGroupIndex}`)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        return
+      }
+    }
+    const element = document.getElementById(`group-${groupIndex}`)
     if (element) {
       element.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
   }
 
+  const toggleGroup = (index: number) => {
+    setExpandedGroups((prev) => {
+      const newSet = new Set(prev)
+      if (newSet.has(index)) {
+        newSet.delete(index)
+      }
+      else {
+        newSet.add(index)
+      }
+      return newSet
+    })
+  }
+
+  const renderItems = (items: LinkCardProps[]) => (
+    <div className={styles.grid}>
+      {items.map((item, itemIndex) => (
+        <LinkCard key={itemIndex} {...item} />
+      ))}
+    </div>
+  )
+
+  const renderGroup = (group: GroupedLinkCardProps, groupIndex: number) => (
+    <div key={groupIndex} id={`group-${groupIndex}`} className={styles.group}>
+      <h3 className={styles.groupTitle}>{group.groupName}</h3>
+      {group.items && group.items.length > 0 && renderItems(group.items)}
+      {group.subGroups && group.subGroups.map((subGroup, subIndex) => (
+        <div key={subIndex} id={`subgroup-${groupIndex}-${subIndex}`} className={styles.subGroup}>
+          <h4 className={styles.subGroupTitle}>{subGroup.title}</h4>
+          <div className={styles.subGroupContent}>
+            {renderItems(subGroup.items)}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+
   return (
     <div className={styles.container}>
       <div className={styles.mainContent}>
@@ -122,16 +206,7 @@ export default function SearchableLinkGrid({ groups }: SearchableLinkGridProps)
 
         {filteredGroups.length > 0
           ? (
-              filteredGroups.map((group, groupIndex) => (
-                <div key={groupIndex} id={`group-${groupIndex}`} className={styles.group}>
-                  <h3 className={styles.groupTitle}>{group.groupName}</h3>
-                  <div className={styles.grid}>
-                    {group.items.map((item, itemIndex) => (
-                      <LinkCard key={itemIndex} {...item} />
-                    ))}
-                  </div>
-                </div>
-              ))
+              filteredGroups.map((group, groupIndex) => renderGroup(group, groupIndex))
             )
           : (
               <div className={styles.noResults}>
@@ -158,15 +233,44 @@ export default function SearchableLinkGrid({ groups }: SearchableLinkGridProps)
       <nav className={styles.sidebar} ref={sidebarRef}>
         <div className={styles.sidebarHeader}>快速导航</div>
         <div className={styles.sidebarLinks}>
-          {groups.map((group, index) => (
-            <button
-              key={index}
-              onClick={() => scrollToSection(index)}
-              className={`${styles.sidebarLink} ${activeSection === `group-${index}` ? styles.active : ''}`}
-            >
-              {group.groupName}
-            </button>
-          ))}
+          {groups.map((group, groupIndex) => {
+            const hasSubGroups = group.subGroups && group.subGroups.length > 0
+            const isExpanded = expandedGroups.has(groupIndex)
+
+            return (
+              <div key={groupIndex} className={styles.sidebarGroup}>
+                <button
+                  onClick={() => {
+                    if (hasSubGroups) {
+                      toggleGroup(groupIndex)
+                    }
+                    scrollToSection(groupIndex)
+                  }}
+                  className={`${styles.sidebarLink} ${styles.sidebarLinkParent} ${activeSection === `group-${groupIndex}` ? styles.active : ''}`}
+                >
+                  {hasSubGroups && (
+                    <span className={styles.chevron}>
+                      {isExpanded ? '▼' : '▶'}
+                    </span>
+                  )}
+                  {group.groupName}
+                </button>
+                {hasSubGroups && isExpanded && (
+                  <div className={styles.sidebarSubLinks}>
+                    {group.subGroups!.map((subGroup, subIndex) => (
+                      <button
+                        key={subIndex}
+                        onClick={() => scrollToSection(groupIndex, subIndex)}
+                        className={`${styles.sidebarLink} ${styles.sidebarLinkChild} ${activeSection === `subgroup-${groupIndex}-${subIndex}` ? styles.active : ''}`}
+                      >
+                        {subGroup.title}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          })}
         </div>
       </nav>
     </div>

code/docusaurus/src/components/Link/styles.module.css

@@ -1,7 +1,7 @@
 /* 容器布局 */
 .container {
   display: flex;
-  gap: 24px;
+  gap: 32px;
 }
 
 .mainContent {
@@ -10,40 +10,45 @@
 
 /* 右侧导航 */
 .sidebar {
-  width: 180px;
+  width: 192px;
   flex-shrink: 0;
   position: sticky;
-  top: 2rem;
+  top: calc(var(--ifm-navbar-height, 64px) + 1.5rem);
   height: fit-content;
+  padding: 16px;
+  background: var(--ifm-card-background-color);
+  border-radius: 16px;
+  border: 1px solid var(--ifm-color-emphasis-200);
 }
 
 .sidebarHeader {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  color: var(--ifm-color-emphasis-600);
+  color: var(--ifm-color-emphasis-500);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
   margin-bottom: 12px;
-  padding-left: 8px;
+  padding: 0 4px;
 }
 
 .sidebarLinks {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
 }
 
 .sidebarLink {
-  display: block;
-  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  padding: 9px 12px;
   font-size: 14px;
   text-align: left;
   border: none;
   background: transparent;
   color: var(--ifm-color-emphasis-700);
-  border-radius: 8px;
+  border-radius: 10px;
   cursor: pointer;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease;
+  transition: all 0.2s ease;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -59,151 +64,177 @@
   color: white;
 }
 
+.sidebarGroup {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebarLinkParent {
+  gap: 8px;
+}
+
+.sidebarLinkParent.hasChildren {
+  padding-right: 8px;
+}
+
+.chevron {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--ifm-color-emphasis-400);
+  font-size: 11px;
+  line-height: 1;
+  transition: color 0.2s ease;
+}
+
+.sidebarLinkParent:hover .chevron {
+  color: var(--ifm-color-emphasis-600);
+}
+
+.sidebarLinkParent.active .chevron {
+  color: white;
+}
+
+.sidebarSubLinks {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding-left: 8px;
+  margin: 4px 0 6px 16px;
+}
+
+.sidebarLinkChild {
+  padding: 9px 14px;
+  font-size: 14px;
+  padding-left: 26px;
+  color: var(--ifm-color-emphasis-600);
+  border-radius: 10px;
+}
+
+.sidebarLinkChild:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  color: var(--ifm-color-emphasis-800);
+}
+
+.sidebarLinkChild.active {
+  background-color: var(--ifm-color-primary);
+  color: white;
+}
+
 /* 网格布局 */
 .grid {
   display: grid;
   gap: 16px;
   margin-top: 16px;
-
-  /* 默认桌面4列 */
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-/* 平板 */
 @media (max-width: 1200px) {
   .grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
 
-/* 小平板 */
 @media (max-width: 996px) {
   .grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-/* 手机 */
 @media (max-width: 576px) {
   .grid {
     grid-template-columns: 1fr;
   }
 }
 
-/* 响应式：隐藏右侧导航 */
-@media (max-width: 1200px) {
+@media (max-width: 1280px) {
   .sidebar {
     display: none;
   }
 }
 
 /* 卡片 */
-
 .card {
   display: flex;
   flex-direction: column;
-
-  padding: 18px;
-
-  border-radius: 14px;
+  padding: 20px;
+  border-radius: 16px;
   border: 1px solid var(--ifm-color-emphasis-200);
-
   background: var(--ifm-card-background-color);
-
   color: inherit;
   text-decoration: none;
-
-  transition:
-    transform 0.2s ease,
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
+  transition: all 0.25s ease;
 }
 
 .card:hover {
   color: inherit;
   text-decoration: none;
-
-  transform: translateY(-3px);
-
+  transform: translateY(-4px);
   border-color: var(--ifm-color-primary);
-
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
 }
 
 /* 标题区域 */
-
 .header {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 14px;
 }
 
 /* 图标 */
-
 .icon {
-  width: 32px;
-  height: 32px;
-
+  width: 36px;
+  height: 36px;
   object-fit: contain;
-
   flex-shrink: 0;
 }
 
 .placeholder {
-  width: 40px;
-  height: 40px;
-
-  border-radius: 10px;
-
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
-
-  background: var(--ifm-color-primary);
+  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-dark) 100%);
   color: white;
-
   font-size: 18px;
   font-weight: 700;
-
   flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(var(--ifm-color-primary-rgb), 0.2);
 }
 
 /* 标题 */
-
 .title {
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 600;
   line-height: 1.4;
-
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* 描述 */
-
 .description {
-  margin-top: 14px;
-
+  margin-top: 12px;
   font-size: 14px;
   line-height: 1.6;
-
-  color: var(--ifm-color-emphasis-700);
-
+  color: var(--ifm-color-emphasis-600);
   overflow: hidden;
-
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
 /* 搜索容器 */
-
 .searchContainer {
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 28px;
   width: 100%;
 }
 
@@ -213,11 +244,9 @@
   align-items: center;
   background: var(--ifm-card-background-color);
   border: 1px solid var(--ifm-color-emphasis-200);
-  border-radius: 12px;
-  padding: 2px 2px 2px 16px;
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
+  border-radius: 14px;
+  padding: 4px 4px 4px 18px;
+  transition: all 0.2s ease;
 }
 
 .searchWrapper:focus-within {
@@ -229,14 +258,16 @@
   color: var(--ifm-color-emphasis-400);
   margin-right: 12px;
   flex-shrink: 0;
+  width: 18px;
+  height: 18px;
 }
 
 .searchInput {
   flex: 1;
   width: 100%;
-  padding: 12px 16px 12px 0;
+  padding: 13px 16px 13px 0;
   border: none;
-  border-radius: 0 10px 10px 0;
+  border-radius: 0 12px 12px 0;
   font-size: 15px;
   background: transparent;
   color: var(--ifm-font-color-base);
@@ -254,16 +285,16 @@
   font-size: 13px;
   color: var(--ifm-color-emphasis-500);
   white-space: nowrap;
-  padding: 6px 12px;
+  padding: 8px 14px;
   background: var(--ifm-color-emphasis-100);
   border-radius: 20px;
+  font-weight: 500;
 }
 
 /* 分组样式 */
-
 .group {
-  margin-bottom: 32px;
-  scroll-margin-top: calc(var(--ifm-navbar-height, 64px) + 1rem);
+  margin-bottom: 36px;
+  scroll-margin-top: calc(var(--ifm-navbar-height, 64px) + 1.5rem);
 }
 
 .group:last-child {
@@ -273,26 +304,53 @@
 .groupTitle {
   font-size: 18px;
   font-weight: 700;
-  color: var(--ifm-color-emphasis-800);
+  color: var(--ifm-color-emphasis-900);
   margin-bottom: 20px;
-  padding-left: 14px;
+  padding: 8px 0 8px 16px;
   border-left: 4px solid var(--ifm-color-primary);
+  background: linear-gradient(90deg, rgba(var(--ifm-color-primary-rgb), 0.05) 0%, transparent 100%);
+}
+
+/* 子分组样式 */
+.subGroup {
+  margin-top: 24px;
+  scroll-margin-top: calc(var(--ifm-navbar-height, 64px) + 1rem);
+}
+
+.subGroup:first-child {
+  margin-top: 16px;
+}
+
+.subGroupTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-800);
+  margin-bottom: 14px;
+  padding: 6px 0 6px 24px;
+  position: relative;
+}
+
+.subGroupContent {
+  margin-left: 24px;
+  padding-left: 16px;
+  border-left: 2px solid var(--ifm-color-emphasis-100);
 }
 
 /* 无结果状态 */
-
 .noResults {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px 20px;
+  padding: 80px 20px;
   color: var(--ifm-color-emphasis-600);
 }
 
 .noResultsIcon {
   color: var(--ifm-color-emphasis-400);
-  margin-bottom: 16px;
+  margin-bottom: 20px;
+  width: 56px;
+  height: 56px;
 }
 
 .noResults p {