@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/card.scss

@@ -1,146 +1,149 @@
-// CpCard 组件样式
-// 赛博朋克/机甲风格卡片容器
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-@include b(card) {
-  // 基础样式
-  --cp-card-color: var(--cp-border);
-  --cp-card-color-light: rgba(255, 255, 255, 0.1);
-  --cp-card-bg: var(--cp-bg-elevated);
+// CpCard 组件样式
+// 赛博朋克/机甲风格卡片容器
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(card) {
+  // 基础样式
+  --cp-card-color: var(--cp-border);
+  --cp-card-color-light: rgba(255, 255, 255, 0.1);
+  --cp-card-bg: var(--cp-bg-elevated);
   --cp-card-shadow-color: color-mix(in srgb, var(--cp-card-color) 44%, transparent);
-  --cp-card-clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  // 🚀 核心修复 1：重置 flex 默认的 min-height: auto
-  // 彻底解决示例三“展开状态下会始终将卡片二挤到容器外”的问题，允许卡片受限收缩
-  min-width: 0;
-  min-height: 0;
-
-  // 🚀 核心修复 2：彻底移除错误的 flex 和 height 过渡！
-  // 浏览器不支持 auto 高度的动画，强加过渡会导致渲染出错，修复“高度从 0 开始”的 Bug
+  --cp-card-overlay-color-default: color-mix(in srgb, var(--cp-bg-elevated) 72%, transparent);
+  --cp-card-action-color-default: color-mix(in srgb, var(--cp-bg-elevated) 90%, transparent);
+  --cp-card-loading-bg-default: color-mix(in srgb, var(--cp-bg-elevated) 86%, transparent);
+  --cp-card-clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  // 🚀 核心修复 1：重置 flex 默认的 min-height: auto
+  // 彻底解决示例三“展开状态下会始终将卡片二挤到容器外”的问题，允许卡片受限收缩
+  min-width: 0;
+  min-height: 0;
+
+  // 🚀 核心修复 2：彻底移除错误的 flex 和 height 过渡！
+  // 浏览器不支持 auto 高度的动画，强加过渡会导致渲染出错，修复“高度从 0 开始”的 Bug
   transition:
           transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
           color var(--cp-card-dimmed-duration, 0.3s) ease,
           filter var(--cp-card-dimmed-duration, 0.3s) ease,
           box-shadow var(--cp-card-dimmed-duration, 0.3s) ease;
-
-  @include e(container) {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    // 🚀 同步解除内部容器的 Flex 最小限制
-    min-width: 0;
-    min-height: 0;
-
-    background: var(--cp-card-bg);
-    border: 1px solid var(--cp-card-border-color, var(--cp-border));
-    color: var(--cp-text-primary);
-
-    // 🚀 同样移除此处错误的 flex 过渡
-    transition:
-            background var(--cp-card-dimmed-duration, 0.3s) ease,
-            border-color var(--cp-card-dimmed-duration, 0.3s) ease,
-            color var(--cp-card-dimmed-duration, 0.3s) ease,
-            filter 0.4s ease,
-            opacity 0.4s ease;
-
-    width: 100%;
-    // 🚀 修复 3：移除原先的 height: 100%！
-    // 只要有 flex: 1 就能自动撑满。如果保留 100%，在父级折叠高度变化时极易引发内部高度塌陷计算 Bug。
-    overflow: hidden;
-    transform: translateZ(0);
-    backface-visibility: hidden;
-    will-change: clip-path, filter;
-
-    clip-path: var(--cp-card-clip-path);
-  }
-
-  // 类型变体控制颜色变量
-  @each $type in (primary, success, warning, error, info) {
-    &.cp-card--#{$type} {
-      --cp-card-color: var(--cp-color-#{$type});
-      --cp-card-color-light: var(--cp-color-#{$type}-light);
-    }
-  }
-
-  isolation: isolate;
-
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background: var(--cp-card-shadow-color);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    pointer-events: none;
-    display: none;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 10px;
-    height: 10px;
-    background: var(--cp-card-color);
-    opacity: 0.4;
-    z-index: 2;
-    transition: all 0.3s ease;
-  }
-
-  &:hover {
-    &::after {
-      opacity: 1;
-    }
-  }
-
-  // ===== 变体 =====
-  @include m(solid) {
-    > .cp-card__container {
-      background: var(--cp-card-bg);
-      border-color: var(--cp-border);
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 48px;
-        background: linear-gradient(to bottom, var(--cp-card-color) 2px, var(--cp-card-color-light) 2px, transparent 100%);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        pointer-events: none;
-        z-index: 1;
-      }
-    }
-
-    &.cp-card--primary,
-    &.cp-card--success,
-    &.cp-card--warning,
-    &.cp-card--error,
-    &.cp-card--info {
-      > .cp-card__container::before {
-        opacity: 0.8;
-      }
-    }
-
-    &[style*='--cp-card-color'] {
-      > .cp-card__container::before {
-        opacity: 0.8;
-      }
-    }
-  }
-
+
+  @include e(container) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    // 🚀 同步解除内部容器的 Flex 最小限制
+    min-width: 0;
+    min-height: 0;
+
+    background: var(--cp-card-bg);
+    border: 1px solid var(--cp-card-border-color, var(--cp-border));
+    color: var(--cp-text-primary);
+
+    // 🚀 同样移除此处错误的 flex 过渡
+    transition:
+            background var(--cp-card-dimmed-duration, 0.3s) ease,
+            border-color var(--cp-card-dimmed-duration, 0.3s) ease,
+            color var(--cp-card-dimmed-duration, 0.3s) ease,
+            filter 0.4s ease,
+            opacity 0.4s ease;
+
+    width: 100%;
+    // 🚀 修复 3：移除原先的 height: 100%！
+    // 只要有 flex: 1 就能自动撑满。如果保留 100%，在父级折叠高度变化时极易引发内部高度塌陷计算 Bug。
+    overflow: hidden;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    will-change: clip-path, filter;
+
+    clip-path: var(--cp-card-clip-path);
+  }
+
+  // 类型变体控制颜色变量
+  @each $type in (primary, success, warning, error, info) {
+    &.cp-card--#{$type} {
+      --cp-card-color: var(--cp-color-#{$type});
+      --cp-card-color-light: var(--cp-color-#{$type}-light);
+    }
+  }
+
+  isolation: isolate;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--cp-card-shadow-color);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: none;
+    display: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background: var(--cp-card-color);
+    opacity: 0.4;
+    z-index: 2;
+    transition: all 0.3s ease;
+  }
+
+  &:hover {
+    &::after {
+      opacity: 1;
+    }
+  }
+
+  // ===== 变体 =====
+  @include m(solid) {
+    > .cp-card__container {
+      background: var(--cp-card-bg);
+      border-color: var(--cp-border);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 48px;
+        background: linear-gradient(to bottom, var(--cp-card-color) 2px, var(--cp-card-color-light) 2px, transparent 100%);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        pointer-events: none;
+        z-index: 1;
+      }
+    }
+
+    &.cp-card--primary,
+    &.cp-card--success,
+    &.cp-card--warning,
+    &.cp-card--error,
+    &.cp-card--info {
+      > .cp-card__container::before {
+        opacity: 0.8;
+      }
+    }
+
+    &[style*='--cp-card-color'] {
+      > .cp-card__container::before {
+        opacity: 0.8;
+      }
+    }
+  }
+
   @include m(outline) {
     > .cp-card__container {
       background: transparent;
@@ -151,117 +154,117 @@
         box-shadow: none;
       }
     }
-
-    &.cp-card--default {
-      > .cp-card__container {
-        border-color: var(--cp-border);
-      }
-    }
-  }
-
-  @include m(semi) {
-    --cp-card-bg: color-mix(in srgb, var(--cp-border) 50%, transparent);
-    --cp-card-bg-hover: color-mix(in srgb, var(--cp-border) 70%, transparent);
-    --cp-card-border: var(--cp-border);
-
-    > .cp-card__container {
-      background: var(--cp-card-bg);
-      backdrop-filter: blur(10px);
-      border-color: var(--cp-card-border);
-
-      &:hover {
-        background: var(--cp-card-bg-hover);
-        box-shadow: 0 0 15px var(--cp-card-color-light);
-      }
-    }
-
-    &.cp-card--primary,
-    &.cp-card--success,
-    &.cp-card--warning,
-    &.cp-card--error,
-    &.cp-card--info {
-      --cp-card-bg: color-mix(in srgb, var(--cp-bg-elevated) 85%, var(--cp-card-color));
-      --cp-card-bg-hover: color-mix(in srgb, var(--cp-bg-elevated) 75%, var(--cp-card-color));
-      --cp-card-border: var(--cp-card-color-light);
-    }
-  }
-
-  @include m(ghost) {
-    > .cp-card__container {
-      background: transparent;
-      border-color: transparent;
-
-      &:hover {
-        background: var(--cp-bg-elevated);
-        border-color: var(--cp-card-color-light);
-      }
-    }
-
-    &.cp-card--primary,
-    &.cp-card--success,
-    &.cp-card--warning,
-    &.cp-card--error,
-    &.cp-card--info {
-      --cp-card-divider-color: var(--cp-card-color-light);
-    }
-
-    &[style*='--cp-card-color'] {
-      --cp-card-divider-color: var(--cp-card-color-light);
-    }
-
-    &::after {
-      display: none;
-    }
-  }
-
-  // ===== 形状模式 =====
-  @include m(shape-clip) {
-    > .cp-card__container {
-      clip-path: var(--cp-card-clip-path);
-    }
-    &::before {
-      clip-path: var(--cp-card-clip-path);
-    }
-  }
-
+
+    &.cp-card--default {
+      > .cp-card__container {
+        border-color: var(--cp-border);
+      }
+    }
+  }
+
+  @include m(semi) {
+    --cp-card-bg: color-mix(in srgb, var(--cp-border) 50%, transparent);
+    --cp-card-bg-hover: color-mix(in srgb, var(--cp-border) 70%, transparent);
+    --cp-card-border: var(--cp-border);
+
+    > .cp-card__container {
+      background: var(--cp-card-bg);
+      backdrop-filter: blur(10px);
+      border-color: var(--cp-card-border);
+
+      &:hover {
+        background: var(--cp-card-bg-hover);
+        box-shadow: 0 0 15px var(--cp-card-color-light);
+      }
+    }
+
+    &.cp-card--primary,
+    &.cp-card--success,
+    &.cp-card--warning,
+    &.cp-card--error,
+    &.cp-card--info {
+      --cp-card-bg: color-mix(in srgb, var(--cp-bg-elevated) 85%, var(--cp-card-color));
+      --cp-card-bg-hover: color-mix(in srgb, var(--cp-bg-elevated) 75%, var(--cp-card-color));
+      --cp-card-border: var(--cp-card-color-light);
+    }
+  }
+
+  @include m(ghost) {
+    > .cp-card__container {
+      background: transparent;
+      border-color: transparent;
+
+      &:hover {
+        background: var(--cp-bg-elevated);
+        border-color: var(--cp-card-color-light);
+      }
+    }
+
+    &.cp-card--primary,
+    &.cp-card--success,
+    &.cp-card--warning,
+    &.cp-card--error,
+    &.cp-card--info {
+      --cp-card-divider-color: var(--cp-card-color-light);
+    }
+
+    &[style*='--cp-card-color'] {
+      --cp-card-divider-color: var(--cp-card-color-light);
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  // ===== 形状模式 =====
+  @include m(shape-clip) {
+    > .cp-card__container {
+      clip-path: var(--cp-card-clip-path);
+    }
+    &::before {
+      clip-path: var(--cp-card-clip-path);
+    }
+  }
+
   @include m(shape-no-clip) {
     border-radius: 0;
 
     > .cp-card__container {
       clip-path: none;
       border-radius: 0;
-      overflow: hidden;
-    }
-
-    &::before {
-      clip-path: none;
-      border-radius: 0;
-    }
-
-    &::after {
-      display: none;
-    }
-  }
-
+      overflow: hidden;
+    }
+
+    &::before {
+      clip-path: none;
+      border-radius: 0;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
   @include m(shape-round) {
     border-radius: var(--cp-radius-lg);
 
     > .cp-card__container {
       clip-path: none;
       border-radius: var(--cp-radius-lg);
-      overflow: hidden;
-    }
-
-    &::before {
-      clip-path: none;
-      border-radius: var(--cp-radius-lg);
-    }
-
-    &::after {
-      display: none;
-    }
-  }
-
+      overflow: hidden;
+    }
+
+    &::before {
+      clip-path: none;
+      border-radius: var(--cp-radius-lg);
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
   // ===== 阴影 =====
   @include m(shadow-always) {
     filter: none;
@@ -361,189 +364,189 @@
   }
 
   // ===== 子元素 =====
-  @include e(cover) {
-    width: 100%;
-    overflow: hidden;
-    flex-shrink: 0;
-    border-bottom: 1px solid var(--cp-border);
-
-    img {
-      width: 100%;
-      height: 100%;
-      display: block;
-      object-fit: cover;
-    }
-  }
-
-  @include e(header) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
-    min-height: 48px;
-    transition: border-color var(--cp-card-dimmed-duration, 0.3s) ease;
-
-    &.is-bordered {
-      border-bottom: 1px solid var(--cp-card-header-divider-color, var(--cp-card-divider-color, var(--cp-border)));
-    }
-  }
-
-  @include e(title) {
-    font-family: var(--cp-font-family-display);
-    font-weight: 600;
-    font-size: var(--cp-font-size-lg);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--cp-text-primary);
-  }
-
-  @include e(extra) {
-    display: flex;
-    align-items: center;
-    gap: var(--cp-spacing-sm);
-  }
-
-  @include e(body) {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    // 🚀 同步解除 body 层的最小高度限制，配合内部可能出现的滚动条
-    min-height: 0;
-    padding: var(--cp-spacing-md);
-    color: var(--cp-text-secondary);
-  }
-
-  @include e(footer) {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
-    gap: var(--cp-spacing-sm);
-    transition: border-color var(--cp-card-dimmed-duration, 0.3s) ease;
-
-    &.is-bordered {
-      border-top: 1px solid var(--cp-card-footer-divider-color, var(--cp-card-divider-color, var(--cp-border)));
-    }
-  }
-
-  // ===== 覆层背景遮罩 =====
-  @include e(overlay-backdrop) {
-    position: absolute;
-    inset: 0;
-    z-index: 9;
-    opacity: 0;
-    pointer-events: none;
-    transition-property: opacity, backdrop-filter, background;
-    transition-duration: var(--cp-card-overlay-duration, 300ms);
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    &.cp-card__overlay-backdrop--effect-none { background: transparent; backdrop-filter: none; }
-    &.cp-card__overlay-backdrop--effect-blur { background: transparent; backdrop-filter: blur(var(--cp-card-overlay-blur, 10px)); }
-    &.cp-card__overlay-backdrop--effect-color { background: var(--cp-card-overlay-color, color-mix(in srgb, var(--cp-bg-deep) 80%, transparent)); backdrop-filter: none; }
-    &.cp-card__overlay-backdrop--effect-blur-color { background: var(--cp-card-overlay-color, color-mix(in srgb, var(--cp-bg-deep) 80%, transparent)); backdrop-filter: blur(var(--cp-card-overlay-blur, 10px)); }
-  }
-
-  // ===== 覆层操作区 =====
-  @include e(overlay) {
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 10;
-    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
-    border-top: 1px solid var(--cp-border);
-    opacity: 0;
-    pointer-events: none;
-    transition-property: opacity, transform, backdrop-filter, background;
-    transition-duration: var(--cp-card-overlay-duration, 300ms);
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-
-    &.cp-card__overlay--effect-none { background: transparent; backdrop-filter: none; }
-    &.cp-card__overlay--effect-blur { background: transparent; backdrop-filter: blur(var(--cp-card-action-blur, 10px)); }
-    &.cp-card__overlay--effect-color { background: var(--cp-card-action-color, color-mix(in srgb, var(--cp-bg-deep) 80%, transparent)); backdrop-filter: none; }
-    &.cp-card__overlay--effect-blur-color { background: var(--cp-card-action-color, color-mix(in srgb, var(--cp-bg-deep) 80%, transparent)); backdrop-filter: blur(var(--cp-card-action-blur, 10px)); }
-
-    &.cp-card__overlay--bottom { bottom: 0; }
-    &.cp-card__overlay--top { top: 0; border-top: none; border-bottom: 1px solid var(--cp-border); }
-    &.cp-card__overlay--center { top: 50%; border-top: none; border-bottom: none; }
-
-    &.cp-card__overlay--slide-up { transform: translateY(100%); }
-    &.cp-card__overlay--slide-down { transform: translateY(-100%); }
-    &.cp-card__overlay--slide-left { transform: translateX(100%); }
-    &.cp-card__overlay--slide-right { transform: translateX(-100%); }
-
-    &.cp-card__overlay--fade { transform: none; }
-    &.cp-card__overlay--scale {
-      transform: scale(0.9);
-      &.cp-card__overlay--center {
-        transform: translateY(-50%) scale(0.9);
-      }
-    }
-  }
-
-  &.is-has-overlay:hover {
-    .cp-card__overlay-backdrop { opacity: 1; }
-    .cp-card__overlay {
-      opacity: 1;
-      pointer-events: auto;
-      transform: translateY(0) translateX(0) scale(1);
-      &.cp-card__overlay--center { transform: translateY(-50%); }
-    }
-  }
-
-  // ===== 减淡模式 (Dimmed Mode) =====
-  @include when(dimmed) {
-    &:not(:hover) {
-      --cp-card-color: var(--cp-border);
-      --cp-card-color-light: rgba(255, 255, 255, 0.1);
-
-      &.cp-card--semi {
-        --cp-card-bg: color-mix(in srgb, var(--cp-border) 50%, transparent);
-        --cp-card-border: var(--cp-border);
-      }
-
-      &.cp-card--solid {
-        > .cp-card__container::before { opacity: 0 !important; }
-      }
-
-      &.cp-card--outline {
-        > .cp-card__container { border-color: var(--cp-border); }
-      }
-
-      &.cp-card--ghost {
-        --cp-card-divider-color: var(--cp-border);
-      }
-    }
-  }
-
-  @include when(trigger-image-hover) {
-    &:hover {
-      .cp-image--hover-scale {
-        transform: scale(1.02);
-        box-shadow: 0 0 20px var(--cp-image-decor-color, var(--cp-color-primary-light));
-        filter: brightness(1.05);
-
-        .cp-image__decor {
-          background-color: var(--cp-image-decor-color, var(--cp-color-primary));
-          box-shadow: 0 0 8px var(--cp-image-decor-color, var(--cp-color-primary));
-        }
-      }
-
-      .cp-image--hover-zoom {
-        box-shadow: 0 0 20px var(--cp-image-decor-color, var(--cp-color-primary-light));
-
-        .cp-image__inner {
-          transform: scale(1.1);
-          filter: brightness(1.05);
-        }
-
-        .cp-image__decor {
-          background-color: var(--cp-image-decor-color, var(--cp-color-primary));
-          box-shadow: 0 0 8px var(--cp-image-decor-color, var(--cp-color-primary));
-        }
-      }
-    }
-  }
-
+  @include e(cover) {
+    width: 100%;
+    overflow: hidden;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--cp-border);
+
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      object-fit: cover;
+    }
+  }
+
+  @include e(header) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+    min-height: 48px;
+    transition: border-color var(--cp-card-dimmed-duration, 0.3s) ease;
+
+    &.is-bordered {
+      border-bottom: 1px solid var(--cp-card-header-divider-color, var(--cp-card-divider-color, var(--cp-border)));
+    }
+  }
+
+  @include e(title) {
+    font-family: var(--cp-font-family-display);
+    font-weight: 600;
+    font-size: var(--cp-font-size-lg);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--cp-text-primary);
+  }
+
+  @include e(extra) {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-sm);
+  }
+
+  @include e(body) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    // 🚀 同步解除 body 层的最小高度限制，配合内部可能出现的滚动条
+    min-height: 0;
+    padding: var(--cp-spacing-md);
+    color: var(--cp-text-secondary);
+  }
+
+  @include e(footer) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+    gap: var(--cp-spacing-sm);
+    transition: border-color var(--cp-card-dimmed-duration, 0.3s) ease;
+
+    &.is-bordered {
+      border-top: 1px solid var(--cp-card-footer-divider-color, var(--cp-card-divider-color, var(--cp-border)));
+    }
+  }
+
+  // ===== 覆层背景遮罩 =====
+  @include e(overlay-backdrop) {
+    position: absolute;
+    inset: 0;
+    z-index: 9;
+    opacity: 0;
+    pointer-events: none;
+    transition-property: opacity, backdrop-filter, background;
+    transition-duration: var(--cp-card-overlay-duration, 300ms);
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.cp-card__overlay-backdrop--effect-none { background: transparent; backdrop-filter: none; }
+    &.cp-card__overlay-backdrop--effect-blur { background: transparent; backdrop-filter: blur(var(--cp-card-overlay-blur, 10px)); }
+    &.cp-card__overlay-backdrop--effect-color { background: var(--cp-card-overlay-color, var(--cp-card-overlay-color-default)); backdrop-filter: none; }
+    &.cp-card__overlay-backdrop--effect-blur-color { background: var(--cp-card-overlay-color, var(--cp-card-overlay-color-default)); backdrop-filter: blur(var(--cp-card-overlay-blur, 10px)); }
+  }
+
+  // ===== 覆层操作区 =====
+  @include e(overlay) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+    border-top: 1px solid var(--cp-border);
+    opacity: 0;
+    pointer-events: none;
+    transition-property: opacity, transform, backdrop-filter, background;
+    transition-duration: var(--cp-card-overlay-duration, 300ms);
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.cp-card__overlay--effect-none { background: transparent; backdrop-filter: none; }
+    &.cp-card__overlay--effect-blur { background: transparent; backdrop-filter: blur(var(--cp-card-action-blur, 10px)); }
+    &.cp-card__overlay--effect-color { background: var(--cp-card-action-color, var(--cp-card-action-color-default)); backdrop-filter: none; }
+    &.cp-card__overlay--effect-blur-color { background: var(--cp-card-action-color, var(--cp-card-action-color-default)); backdrop-filter: blur(var(--cp-card-action-blur, 10px)); }
+
+    &.cp-card__overlay--bottom { bottom: 0; }
+    &.cp-card__overlay--top { top: 0; border-top: none; border-bottom: 1px solid var(--cp-border); }
+    &.cp-card__overlay--center { top: 50%; border-top: none; border-bottom: none; }
+
+    &.cp-card__overlay--slide-up { transform: translateY(100%); }
+    &.cp-card__overlay--slide-down { transform: translateY(-100%); }
+    &.cp-card__overlay--slide-left { transform: translateX(100%); }
+    &.cp-card__overlay--slide-right { transform: translateX(-100%); }
+
+    &.cp-card__overlay--fade { transform: none; }
+    &.cp-card__overlay--scale {
+      transform: scale(0.9);
+      &.cp-card__overlay--center {
+        transform: translateY(-50%) scale(0.9);
+      }
+    }
+  }
+
+  &.is-has-overlay:hover {
+    .cp-card__overlay-backdrop { opacity: 1; }
+    .cp-card__overlay {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0) translateX(0) scale(1);
+      &.cp-card__overlay--center { transform: translateY(-50%); }
+    }
+  }
+
+  // ===== 减淡模式 (Dimmed Mode) =====
+  @include when(dimmed) {
+    &:not(:hover) {
+      --cp-card-color: var(--cp-border);
+      --cp-card-color-light: rgba(255, 255, 255, 0.1);
+
+      &.cp-card--semi {
+        --cp-card-bg: color-mix(in srgb, var(--cp-border) 50%, transparent);
+        --cp-card-border: var(--cp-border);
+      }
+
+      &.cp-card--solid {
+        > .cp-card__container::before { opacity: 0 !important; }
+      }
+
+      &.cp-card--outline {
+        > .cp-card__container { border-color: var(--cp-border); }
+      }
+
+      &.cp-card--ghost {
+        --cp-card-divider-color: var(--cp-border);
+      }
+    }
+  }
+
+  @include when(trigger-image-hover) {
+    &:hover {
+      .cp-image--hover-scale {
+        transform: scale(1.02);
+        box-shadow: 0 0 20px var(--cp-image-decor-color, var(--cp-color-primary-light));
+        filter: brightness(1.05);
+
+        .cp-image__decor {
+          background-color: var(--cp-image-decor-color, var(--cp-color-primary));
+          box-shadow: 0 0 8px var(--cp-image-decor-color, var(--cp-color-primary));
+        }
+      }
+
+      .cp-image--hover-zoom {
+        box-shadow: 0 0 20px var(--cp-image-decor-color, var(--cp-color-primary-light));
+
+        .cp-image__inner {
+          transform: scale(1.1);
+          filter: brightness(1.05);
+        }
+
+        .cp-image__decor {
+          background-color: var(--cp-image-decor-color, var(--cp-color-primary));
+          box-shadow: 0 0 8px var(--cp-image-decor-color, var(--cp-color-primary));
+        }
+      }
+    }
+  }
+
   @include when(hover-scale) {
     transition:
       transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
@@ -553,280 +556,280 @@
     &:hover {
       transform: scale(1.02);
     }
-
-    &:active {
-      transform: scale(0.99);
-    }
-  }
-
-  // ===== 折叠过渡动画 (Collapse Transition) =====
-  @include e(collapse-transition) {
-    display: grid;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-    grid-template-rows: 1fr;
-    // 动态 max-height：由 JS ResizeObserver 测量实际内容高度并设为 CSS 变量，
-    // 避免从 2000px 过渡导致的"两段式动画"视觉停顿
-    max-height: var(--cp-card-expanded-height, none);
-
-    // 预置 mask 渐变（200% 高），初始 position=top → 实心区域覆盖全部，无视觉效果
-    // 半折叠时 position 滑到 bottom → 底部渐隐生效，实现渐显动画
-    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
-    mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
-    -webkit-mask-size: 100% 200%;
-    mask-size: 100% 200%;
-    -webkit-mask-position: 0 0;
-    mask-position: 0 0;
-
-    transition:
-            grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-            max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-            -webkit-mask-position 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-            mask-position 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-            visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    visibility: visible;
-  }
-
-  @include e(collapse-inner) {
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-  }
-
-  // ===== 折叠时尺寸锁定 =====
-  @include when(collapse-size-locked) {
-    // 🚀 核心修复 4：将原来的 flex: 0 0 auto 改为 flex: 0 1 auto！
-    // "1" 代表 flex-shrink: 1。允许卡片在展开动画的 0.3s 期间，如果碰到了固定父容器的边界，
-    // 能够聪明地被压缩，彻底解决“示例二在展开时会把卡片二挤到容器外”的恶性 Bug。
-    flex: 0 1 auto !important;
-    height: auto !important;
-    min-height: 0 !important;
-    overflow: hidden !important;
-
-    .cp-card__container {
-      flex: 0 1 auto !important;
-      height: auto !important;
-      min-height: 0 !important;
-      overflow: hidden !important;
-    }
-  }
-
-  // ===== 折叠模式 (Collapsed) =====
-  @include when(collapsed) {
-    // 同步保持折叠态允许挤压的特性
-    flex: 0 1 auto !important;
-    height: auto !important;
-    min-height: 0 !important;
-    overflow: hidden !important;
-
-    .cp-card__container {
-      flex: 0 1 auto !important;
-      height: auto !important;
-      min-height: 0 !important;
-      overflow: hidden !important;
-    }
-
-    .cp-card__header {
-      border-bottom-color: transparent;
-      transition-delay: 0s;
-    }
-
-    .cp-card__collapse-transition {
-      grid-template-rows: 0fr;
-      // 移除 max-height: 0; 避免 max-height 动画从 none 到 0 直接报错导致无动画（全折叠卡顿原因）
-      opacity: 0;
-      pointer-events: none;
-      visibility: hidden;
-    }
-
-    // Overlay fades out when collapsed
-    .cp-card__overlay-backdrop,
-    .cp-card__overlay {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-
-  // ===== 半折叠模式 (Half-Collapsed) — collapse + halfCollapse =====
-  // 覆写 collapsed 的 grid-template-rows: 0fr，保留部分 body 并用 mask-image 渐隐
-  @include when(half-collapsed) {
-    // 仅覆写 is-collapsed 的 flex-shrink 为 0，半折叠时禁止收缩，
-    // 防止兄弟 Card 展开时将半折叠卡片压扁，同时保留原有的 overflow: hidden 以维持动画
-    flex-shrink: 0 !important;
-
-    .cp-card__container {
-      flex-shrink: 0 !important;
-    }
-
-    .cp-card__collapse-transition {
-      grid-template-rows: 1fr;
-      max-height: var(--cp-card-peek-height, 80px);
-      opacity: 1;
-      visibility: visible;
-      pointer-events: none;
-
-      // mask-position 滑到底部 → 渐变区域覆盖底部 → 内容底部渐隐
-      -webkit-mask-position: 0 100%;
-      mask-position: 0 100%;
-    }
-
-    // 半折叠时隐藏 footer（在 collapse-transition 内部，pointer-events: none 导致不可交互）
-    // 使用 opacity 和 visibility 代替 display: none，避免 DOM render 树的突变中断外层容器的展开收起动画
-    .cp-card__footer {
-      opacity: 0;
-      visibility: hidden;
-      pointer-events: none;
-    }
-
-    // 半折叠时保留 header 分隔线
-    .cp-card__header {
-      border-bottom-color: var(--cp-card-header-divider-color, var(--cp-card-divider-color, var(--cp-border)));
-    }
-
-    // 内置控制器悬浮于文字上方
-    .cp-card__collapse-action {
-      position: absolute;
-      bottom: var(--cp-spacing-xs);
-      left: 0;
-      width: 100%;
-      z-index: 10;
-    }
-  }
-
-  // ===== 内置折叠控制器 (Collapse Action) =====
-  @include e(collapse-action) {
-    // 移除 border-top，依靠布局和渐变与内容融合
-  }
-
-  @include e(collapse-action-default) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cp-spacing-xs);
-    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
-    cursor: pointer;
-    user-select: none;
-    color: var(--cp-text-tertiary);
-    font-size: var(--cp-font-size-sm);
-    letter-spacing: 0.04em;
-    transition: color 0.2s ease, background 0.2s ease;
-
-    &:hover {
-      color: var(--cp-card-color, var(--cp-text-primary));
-      background: color-mix(in srgb, var(--cp-card-color, var(--cp-text-primary)) 8%, transparent);
-    }
-  }
-
-  @include e(collapse-action-text) {
-    line-height: 1;
-  }
-
-  @include e(collapse-action-icon) {
-    font-size: 10px;
-    line-height: 1;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-
-    &.is-expanded {
-      transform: rotate(180deg);
-    }
-  }
-
-  // ===== 加载遮罩 (Loading Overlay) =====
-  @include e(loading-overlay) {
-    position: absolute;
-    inset: 0;
-    z-index: 12;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cp-spacing-sm);
-    background: var(--cp-card-loading-bg, rgba(10, 10, 18, 0.75));
-    backdrop-filter: var(--cp-card-loading-backdrop, blur(4px));
-    pointer-events: auto;
-  }
-
-  @include e(loading-text) {
-    font-size: var(--cp-font-size-sm);
-    color: var(--cp-card-loading-text-color, var(--cp-text-secondary));
-    letter-spacing: 0.05em;
-    user-select: none;
-    margin-top: var(--cp-spacing-xs);
-  }
-
-  // ===== 加载遮罩过渡动画 =====
-  .cp-card-loading-enter-active,
-  .cp-card-loading-leave-active {
-    transition: opacity 0.3s ease;
-  }
-  .cp-card-loading-enter-from,
-  .cp-card-loading-leave-to {
-    opacity: 0;
-  }
-
-  // ===== 加载状态 (Loading) =====
-  @include when(loading) {
-    // loading 时仍可悬停查看效果，但内容被遮罩阻挡
-    > .cp-card__container {
-      // container 需要 position: relative 来定位 loading overlay
-      position: relative;
-    }
-  }
-
-  // ===== 禁用状态 (Disabled) =====
-  @include when(disabled) {
-    pointer-events: none;
-    cursor: not-allowed;
-
-    > .cp-card__container {
-      opacity: 0.5;
-      filter: grayscale(0.6);
-    }
-
-    // 加载遮罩也必须禁止 pointer-events，
-    // 否则子元素 pointer-events: auto 会让 :hover 冒泡到卡片根节点
-    .cp-card__loading-overlay {
-      pointer-events: none !important;
-    }
-
-    // 装饰块始终保持低透明度
-    &::after {
-      opacity: 0.2 !important;
-    }
-
-    // 彻底禁止所有 hover 视觉反馈
-    &:hover {
-      // 阻止阴影 hover
-      filter: none !important;
-      box-shadow: none !important;
-      // 阻止 hover-scale
-      transform: none !important;
-
-      // 装饰块不变亮
-      &::after {
-        opacity: 0.2 !important;
-      }
-
-      // 容器不响应 hover
-      > .cp-card__container {
-        border-color: inherit;
-        box-shadow: none !important;
-        filter: grayscale(0.6) !important;
-      }
-
-      // 覆层不弹出
-      .cp-card__overlay-backdrop {
-        opacity: 0 !important;
-      }
-      .cp-card__overlay {
-        opacity: 0 !important;
-        pointer-events: none !important;
-        transform: none !important;
-      }
-    }
-  }
-}
+
+    &:active {
+      transform: scale(0.99);
+    }
+  }
+
+  // ===== 折叠过渡动画 (Collapse Transition) =====
+  @include e(collapse-transition) {
+    display: grid;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    grid-template-rows: 1fr;
+    // 动态 max-height：由 JS ResizeObserver 测量实际内容高度并设为 CSS 变量，
+    // 避免从 2000px 过渡导致的"两段式动画"视觉停顿
+    max-height: var(--cp-card-expanded-height, none);
+
+    // 预置 mask 渐变（200% 高），初始 position=top → 实心区域覆盖全部，无视觉效果
+    // 半折叠时 position 滑到 bottom → 底部渐隐生效，实现渐显动画
+    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
+    -webkit-mask-size: 100% 200%;
+    mask-size: 100% 200%;
+    -webkit-mask-position: 0 0;
+    mask-position: 0 0;
+
+    transition:
+            grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            -webkit-mask-position 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            mask-position 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+            visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    visibility: visible;
+  }
+
+  @include e(collapse-inner) {
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+  }
+
+  // ===== 折叠时尺寸锁定 =====
+  @include when(collapse-size-locked) {
+    // 🚀 核心修复 4：将原来的 flex: 0 0 auto 改为 flex: 0 1 auto！
+    // "1" 代表 flex-shrink: 1。允许卡片在展开动画的 0.3s 期间，如果碰到了固定父容器的边界，
+    // 能够聪明地被压缩，彻底解决“示例二在展开时会把卡片二挤到容器外”的恶性 Bug。
+    flex: 0 1 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+
+    .cp-card__container {
+      flex: 0 1 auto !important;
+      height: auto !important;
+      min-height: 0 !important;
+      overflow: hidden !important;
+    }
+  }
+
+  // ===== 折叠模式 (Collapsed) =====
+  @include when(collapsed) {
+    // 同步保持折叠态允许挤压的特性
+    flex: 0 1 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+
+    .cp-card__container {
+      flex: 0 1 auto !important;
+      height: auto !important;
+      min-height: 0 !important;
+      overflow: hidden !important;
+    }
+
+    .cp-card__header {
+      border-bottom-color: transparent;
+      transition-delay: 0s;
+    }
+
+    .cp-card__collapse-transition {
+      grid-template-rows: 0fr;
+      // 移除 max-height: 0; 避免 max-height 动画从 none 到 0 直接报错导致无动画（全折叠卡顿原因）
+      opacity: 0;
+      pointer-events: none;
+      visibility: hidden;
+    }
+
+    // Overlay fades out when collapsed
+    .cp-card__overlay-backdrop,
+    .cp-card__overlay {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  // ===== 半折叠模式 (Half-Collapsed) — collapse + halfCollapse =====
+  // 覆写 collapsed 的 grid-template-rows: 0fr，保留部分 body 并用 mask-image 渐隐
+  @include when(half-collapsed) {
+    // 仅覆写 is-collapsed 的 flex-shrink 为 0，半折叠时禁止收缩，
+    // 防止兄弟 Card 展开时将半折叠卡片压扁，同时保留原有的 overflow: hidden 以维持动画
+    flex-shrink: 0 !important;
+
+    .cp-card__container {
+      flex-shrink: 0 !important;
+    }
+
+    .cp-card__collapse-transition {
+      grid-template-rows: 1fr;
+      max-height: var(--cp-card-peek-height, 80px);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: none;
+
+      // mask-position 滑到底部 → 渐变区域覆盖底部 → 内容底部渐隐
+      -webkit-mask-position: 0 100%;
+      mask-position: 0 100%;
+    }
+
+    // 半折叠时隐藏 footer（在 collapse-transition 内部，pointer-events: none 导致不可交互）
+    // 使用 opacity 和 visibility 代替 display: none，避免 DOM render 树的突变中断外层容器的展开收起动画
+    .cp-card__footer {
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    // 半折叠时保留 header 分隔线
+    .cp-card__header {
+      border-bottom-color: var(--cp-card-header-divider-color, var(--cp-card-divider-color, var(--cp-border)));
+    }
+
+    // 内置控制器悬浮于文字上方
+    .cp-card__collapse-action {
+      position: absolute;
+      bottom: var(--cp-spacing-xs);
+      left: 0;
+      width: 100%;
+      z-index: 10;
+    }
+  }
+
+  // ===== 内置折叠控制器 (Collapse Action) =====
+  @include e(collapse-action) {
+    // 移除 border-top，依靠布局和渐变与内容融合
+  }
+
+  @include e(collapse-action-default) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cp-spacing-xs);
+    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    cursor: pointer;
+    user-select: none;
+    color: var(--cp-text-tertiary);
+    font-size: var(--cp-font-size-sm);
+    letter-spacing: 0.04em;
+    transition: color 0.2s ease, background 0.2s ease;
+
+    &:hover {
+      color: var(--cp-card-color, var(--cp-text-primary));
+      background: color-mix(in srgb, var(--cp-card-color, var(--cp-text-primary)) 8%, transparent);
+    }
+  }
+
+  @include e(collapse-action-text) {
+    line-height: 1;
+  }
+
+  @include e(collapse-action-icon) {
+    font-size: 10px;
+    line-height: 1;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &.is-expanded {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ===== 加载遮罩 (Loading Overlay) =====
+  @include e(loading-overlay) {
+    position: absolute;
+    inset: 0;
+    z-index: 12;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cp-spacing-sm);
+    background: var(--cp-card-loading-bg, var(--cp-card-loading-bg-default));
+    backdrop-filter: var(--cp-card-loading-backdrop, blur(4px));
+    pointer-events: auto;
+  }
+
+  @include e(loading-text) {
+    font-size: var(--cp-font-size-sm);
+    color: var(--cp-card-loading-text-color, var(--cp-text-secondary));
+    letter-spacing: 0.05em;
+    user-select: none;
+    margin-top: var(--cp-spacing-xs);
+  }
+
+  // ===== 加载遮罩过渡动画 =====
+  .cp-card-loading-enter-active,
+  .cp-card-loading-leave-active {
+    transition: opacity 0.3s ease;
+  }
+  .cp-card-loading-enter-from,
+  .cp-card-loading-leave-to {
+    opacity: 0;
+  }
+
+  // ===== 加载状态 (Loading) =====
+  @include when(loading) {
+    // loading 时仍可悬停查看效果，但内容被遮罩阻挡
+    > .cp-card__container {
+      // container 需要 position: relative 来定位 loading overlay
+      position: relative;
+    }
+  }
+
+  // ===== 禁用状态 (Disabled) =====
+  @include when(disabled) {
+    pointer-events: none;
+    cursor: not-allowed;
+
+    > .cp-card__container {
+      opacity: 0.5;
+      filter: grayscale(0.6);
+    }
+
+    // 加载遮罩也必须禁止 pointer-events，
+    // 否则子元素 pointer-events: auto 会让 :hover 冒泡到卡片根节点
+    .cp-card__loading-overlay {
+      pointer-events: none !important;
+    }
+
+    // 装饰块始终保持低透明度
+    &::after {
+      opacity: 0.2 !important;
+    }
+
+    // 彻底禁止所有 hover 视觉反馈
+    &:hover {
+      // 阻止阴影 hover
+      filter: none !important;
+      box-shadow: none !important;
+      // 阻止 hover-scale
+      transform: none !important;
+
+      // 装饰块不变亮
+      &::after {
+        opacity: 0.2 !important;
+      }
+
+      // 容器不响应 hover
+      > .cp-card__container {
+        border-color: inherit;
+        box-shadow: none !important;
+        filter: grayscale(0.6) !important;
+      }
+
+      // 覆层不弹出
+      .cp-card__overlay-backdrop {
+        opacity: 0 !important;
+      }
+      .cp-card__overlay {
+        opacity: 0 !important;
+        pointer-events: none !important;
+        transform: none !important;
+      }
+    }
+  }
+}