@cyberpunk-vue/theme-chalk 0.1.0

package/src/components/card.scss

@@ -0,0 +1,631 @@
+// 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: rgba(0, 0, 0, 0.4);
+  // 统一定义 clip-path 路径，方便伪元素（阴影层）同步使用
+  --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;
+  transition: all var(--cp-card-dimmed-duration, 0.3s) ease;
+  // 移除 overflow: hidden，以便展示外部阴影
+
+  @include e(container) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background: var(--cp-card-bg);
+    border: 1px solid var(--cp-card-border-color, var(--cp-border));
+    color: var(--cp-text-primary);
+    transition: all var(--cp-card-dimmed-duration, 0.3s) ease, filter 0.4s ease, opacity 0.4s ease;
+    width: 100%;
+    height: 100%;
+    // 隐藏溢出内容，防止覆层动画影响页面布局
+    overflow: hidden;
+    // 强制开启硬件加速，修复 backdrop-filter + clip-path 渲染问题
+    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);
+    }
+  }
+
+  // 强制开启隔离层，确保内部 clip-path + backdrop-filter 渲染稳定
+  isolation: isolate;
+
+  // 阴影辅助层 (伪元素)，用于解决 Semi 模式下 backdrop-filter 与 drop-shadow 的冲突，以及 box-shadow 无法跟随 clip 的问题
+  // 默认隐藏，由变体激活
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--cp-card-shadow-color);
+    // 默认透明度0，用于渐变出现
+    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;
+        // 2px 的实色顶线 + 渐变背景
+        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;
+      }
+    }
+
+    // 自定义 color 也要显示线条
+    &[style*='--cp-card-color'] {
+      .cp-card__container::before {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  @include m(outline) {
+    .cp-card__container {
+      background: transparent;
+      border-color: var(--cp-card-color);
+
+      &:hover {
+        border-color: var(--cp-card-color);
+        box-shadow: 0 0 10px var(--cp-card-color-light);
+      }
+    }
+
+    &.cp-card--default {
+      .cp-card__container {
+        border-color: var(--cp-border);
+      }
+    }
+  }
+
+  @include m(semi) {
+    // 使用变量控制背景，方便减淡模式统一覆盖
+    --cp-card-bg: rgba(42, 42, 58, 0.5);
+    --cp-card-bg-hover: rgba(42, 42, 58, 0.7);
+    --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);
+      }
+    }
+
+    // 当 ghost 配合 themed 模式时，应用主题色分割线
+    &.cp-card--primary,
+    &.cp-card--success,
+    &.cp-card--warning,
+    &.cp-card--error,
+    &.cp-card--info {
+      --cp-card-divider-color: var(--cp-card-color-light);
+    }
+
+    // 自定义 color 也要显示主题色分割线
+    &[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) {
+    .cp-card__container {
+      clip-path: none;
+      border-radius: 0;
+      overflow: hidden;
+    }
+
+    &::before {
+      clip-path: none;
+      border-radius: 0;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  @include m(shape-round) {
+    .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;
+    }
+  }
+
+  // ===== 阴影 =====
+  // 注意：clip-path 会裁剪 box-shadow，需要使用 filter: drop-shadow
+  @include m(shadow-always) {
+    filter: drop-shadow(0 4px 12px var(--cp-card-shadow-color));
+  }
+
+  @include m(shadow-hover) {
+    // 初始状态颜色与 hover 态一致，利用 0 偏移和 0 模糊被元素遮挡的特性隐藏
+    // 这样在过渡时颜色始终保持一致，不会出现黑色中间态
+    filter: drop-shadow(0 0 0 var(--cp-card-shadow-color));
+    transition: filter 0.3s ease;
+
+    &:hover {
+      filter: drop-shadow(0 4px 12px var(--cp-card-shadow-color));
+    }
+  }
+
+  @include m(shadow-never) {
+    filter: none;
+    box-shadow: none;
+  }
+
+  // 非切角模式可以使用 box-shadow（更平滑）
+  &.cp-card--shape-no-clip,
+  &.cp-card--shape-round {
+    &.cp-card--shadow-always {
+      filter: none;
+      box-shadow: 0 4px 20px var(--cp-card-shadow-color);
+    }
+
+    &.cp-card--shadow-hover {
+      filter: none;
+      // 利用负 spread 彻底隐藏阴影，且保持颜色一致
+      box-shadow: 0 0 0 -100px var(--cp-card-shadow-color);
+      transition: box-shadow 0.3s ease;
+
+      &:hover {
+        box-shadow: 0 4px 20px 0 var(--cp-card-shadow-color);
+      }
+    }
+  }
+
+  // Semi 变体特殊处理：禁用根部 filter，改用伪元素阴影层
+  // 原因：filter 与 backdrop-filter + clip-path 存在渲染冲突
+  &.cp-card--semi {
+    &.cp-card--shadow-always,
+    &.cp-card--shadow-hover {
+      filter: none !important;
+    }
+
+    // 启用伪元素阴影层
+    &.cp-card--shadow-always::before,
+    &.cp-card--shadow-hover::before {
+      display: block;
+      // 在伪元素上应用 filter，不会影响 container 的 backdrop-filter（因其是兄弟元素）
+      filter: drop-shadow(0 0 12px var(--cp-card-shadow-color));
+    }
+
+    // Always 模式：常驻显示
+    &.cp-card--shadow-always::before {
+      opacity: 1;
+    }
+
+    // Hover 模式：默认隐藏，hover 显示
+    &.cp-card--shadow-hover::before {
+      opacity: 0;
+    }
+    &.cp-card--shadow-hover:hover::before {
+      opacity: 1;
+    }
+
+    // 禁用之前的 hacky box-shadow
+    &.cp-card--shadow-always .cp-card__container,
+    &.cp-card--shadow-hover .cp-card__container,
+    &.cp-card--shadow-hover:hover .cp-card__container {
+      box-shadow: none !important;
+    }
+  }
+
+  // ===== 子元素 =====
+  @include e(cover) {
+    width: 100%;
+    overflow: hidden;
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--cp-border);
+    background: #000;
+    line-height: 0; // 消除图片下方的间隙
+
+    img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+  }
+
+  @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: 'Orbitron', 'Rajdhani', sans-serif;
+    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) {
+    flex: 1;
+    padding: var(--cp-spacing-lg);
+    color: var(--cp-text-secondary);
+    line-height: 1.6;
+  }
+
+  @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)));
+    }
+  }
+
+  // ===== 覆层背景遮罩 (Overlay Backdrop) =====
+  // 覆盖整个卡片内容区域的效果层
+  @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, rgba(26, 26, 36, 0.8));
+      backdrop-filter: none;
+    }
+
+    // 毛玻璃 + 颜色 (默认)
+    &.cp-card__overlay-backdrop--effect-blur-color {
+      background: var(--cp-card-overlay-color, rgba(26, 26, 36, 0.8));
+      backdrop-filter: blur(var(--cp-card-overlay-blur, 10px));
+    }
+  }
+
+  // ===== 覆层操作区 (Overlay Actions) =====
+  // 定位、动画和独立效果控制
+  @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, rgba(26, 26, 36, 0.8));
+      backdrop-filter: none;
+    }
+
+    // 毛玻璃 + 颜色 (默认)
+    &.cp-card__overlay--effect-blur-color {
+      background: var(--cp-card-action-color, rgba(26, 26, 36, 0.8));
+      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);
+
+      // 居中位置时需要额外的 Y 偏移
+      &.cp-card__overlay--center {
+        transform: translateY(-50%) scale(0.9);
+      }
+    }
+  }
+
+  // Hover 显示覆层
+  &.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);
+
+      // 居中位置需要保持 Y 居中
+      &.cp-card__overlay--center {
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  // ===== 减淡模式 (Dimmed Mode) =====
+  // 减淡模式：平常以无颜色的默认形态展示，hover 时显示真正的主题色
+  @include when(dimmed) {
+    // 平常状态：覆盖颜色变量为默认值
+    &:not(:hover) {
+      --cp-card-color: var(--cp-border);
+      --cp-card-color-light: rgba(255, 255, 255, 0.1);
+
+      // 针对 semi 变体，直接重置其背景变量
+      &.cp-card--semi {
+        --cp-card-bg: rgba(42, 42, 58, 0.5);
+        --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);
+        }
+      }
+
+      // 重置 ghost 变体的分割线
+      &.cp-card--ghost {
+        --cp-card-divider-color: var(--cp-border);
+      }
+    }
+  }
+
+  // ===== Card Hover 触发 Image Hover =====
+  // 当开启 triggerImageHover 时，Card hover 会触发内部 CpImage 的 hover 效果
+  @include when(trigger-image-hover) {
+    &:hover {
+      // Scale 模式
+      .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));
+        }
+      }
+
+      // Zoom 模式
+      .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));
+        }
+      }
+    }
+  }
+
+  // ===== Card Hover Scale =====
+  // 悬停时整卡放大效果
+  @include when(hover-scale) {
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                box-shadow 0.3s ease;
+
+    &:hover {
+      transform: scale(1.02);
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+    }
+
+    &:active {
+      transform: scale(0.99);
+    }
+  }
+}
+

package/src/components/checkbox-group.scss

@@ -0,0 +1,22 @@
+// CpCheckboxGroup 组件样式
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(checkbox-group) {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  
+  // 水平布局 (默认)
+  @include m(horizontal) {
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  // 垂直布局
+  @include m(vertical) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}