📝 Update notes - 2025-11-05 16:08:43

Author: dahuyouT

.vitepress/components/Layout/ContentCollapse.module.scss

@@ -0,0 +1,162 @@
+/* ContentCollapse 折叠功能样式 */
+
+/* 折叠按钮基础样式 */
+:global(.collapse-toggle) {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  margin: 0;
+  transition: all 0.25s ease;
+  // user-select: none;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none; /* 按钮本身不响应点击 */
+}
+
+/* 折叠图标样式 */
+:global(.collapse-icon) {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.25s ease;
+  transform: rotate(90deg); /* 默认向下（展开状态）*/
+  opacity: 0.6;
+}
+
+/* TOC 折叠区域 */
+:global(.toc-collapse-wrapper) {
+  position: relative;
+  margin: 16px 0;
+
+  :global(.toc-collapse-header.collapsed .toc-collapse-toggle img) {
+    transform: rotate(0deg) !important; /* 折叠时向右 */
+  }
+}
+
+/* TOC 折叠头部（可点击区域）*/
+:global(.toc-collapse-header) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  // user-select: none;
+  background: transparent;
+
+  &:hover {
+    background: var(--vp-c-bg-soft);
+  }
+
+  &:global(.collapsed) {
+    background: var(--vp-c-bg-soft);
+    border: 1px solid var(--vp-c-divider);
+
+    &:hover {
+      background: var(--vp-c-bg-mute);
+      border-color: var(--vp-c-brand-1);
+    }
+  }
+}
+
+/* 折叠标签（"目录"文字）*/
+:global(.collapse-label) {
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  display: block; /* 始终显示 */
+}
+
+/* TOC 折叠按钮 */
+:global(.toc-collapse-toggle) {
+  flex-shrink: 0;
+}
+
+:global(.toc-collapse-header):hover :global(.collapse-icon) {
+  opacity: 1;
+}
+
+/* H2 标题需要调整布局以容纳右侧按钮 */
+/* 只影响带有 collapsible-h2 类的 h2 元素 */
+:global(h2.collapsible-h2) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  cursor: pointer !important;
+  padding: 8px 12px !important;
+  border-radius: 6px !important;
+  transition: all 0.2s ease !important;
+  // user-select: none !important;
+
+  &:hover {
+    background: var(--vp-c-bg-soft) !important;
+  }
+
+  &:global(.collapsed) {
+    background: var(--vp-c-bg-soft) !important;
+    border: 1px solid var(--vp-c-divider) !important;
+    margin-top: 1rem !important;
+
+    &:hover {
+      background: var(--vp-c-bg-mute) !important;
+      border-color: var(--vp-c-brand-1) !important;
+    }
+
+    :global(.collapse-icon) {
+      transform: rotate(0deg) !important; /* 折叠时向右 */
+    }
+  }
+
+  &:hover :global(.collapse-icon) {
+    opacity: 1 !important;
+  }
+}
+
+/* H2 折叠按钮样式 */
+:global(.h2-collapse-toggle) {
+  flex-shrink: 0;
+  margin-left: 8px;
+}
+
+/* 折叠内容样式 */
+:global(.collapse-content) {
+  overflow: hidden;
+  max-height: 10000px;
+  opacity: 1;
+  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
+
+  &:global(.collapsed) {
+    max-height: 0 !important;
+    opacity: 0 !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* 折叠按钮旋转动画 */
+:global(.collapse-toggle) {
+  transform-origin: center;
+  transition: transform 0.2s ease, color 0.2s ease;
+
+  &:global(.collapsed) {
+    transform: rotate(0deg);
+  }
+}
+
+/* 修复 anchor 位置 - 只针对可折叠的 h2 */
+:global(h2.collapsible-h2) :global(.header-anchor) {
+  top: 10px !important;
+}