@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/popover.scss

@@ -1,438 +1,438 @@
-// CpPopover 组件样式
-// 赛博朋克/机甲风格弹出层
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-// 动画
-@keyframes cp-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes cp-popover-fade-out {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-}
-
-@include b(popover) {
-  display: inline-block;
-  position: relative;
-
-  // 触发器
-  @include e(trigger) {
-    display: inline-block;
-  }
-
-  // 背景层 (承载形状、背景、边框)
-  @include e(background) {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background: var(--cp-bg-elevated);
-    border: 1px solid var(--cp-border);
-    backdrop-filter: blur(8px);
-    
-    // 内阴影
-    box-shadow: inset 0 0 20px color-mix(in srgb, var(--cp-color-primary) 3%, transparent);
-
-    // 默认切角样式
-    clip-path: polygon(
-      8px 0, 100% 0,
-      100% calc(100% - 8px), calc(100% - 8px) 100%,
-      0 100%, 0 8px
-    );
-    
-    transition: clip-path 0.3s ease, border-radius 0.3s ease;
-  }
-
-  // 弹层内容容器 (承载布局、外部阴影、事件)
-  @include e(content) {
-    --cp-popover-base-color: var(--cp-popover-color, var(--cp-color-primary));
-    --cp-popover-base-color-light: var(--cp-popover-color-light, var(--cp-color-primary-light));
-
-    // 发光控制变量 (用户可覆盖)
-    // --cp-popover-glow-spread: 外发光扩散半径
-    --cp-popover-glow-spread: 0;
-    // --cp-popover-glow-color: 外发光颜色 (默认为透明，避免 solid 模式下透过半透明背景显示)
-    --cp-popover-glow-color: transparent;
-
-    position: absolute;
-    z-index: 2000;
-    padding: var(--cp-spacing-md);
-    
-    // 外部阴影使用 filter: drop-shadow 以适配不规则形状 (包括箭头和切角)
-    filter: 
-      drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4))
-      drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color));
-
-    // 入场动画由 <Transition> 管理
-
-    // 无动画模式
-    &.is-no-transition {
-      animation: none !important;
-    }
-
-    // 标记角 (保留在 content 层，位于切角之外的尖角处)
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 12px;
-      height: 12px;
-      border-right: 2px solid var(--cp-popover-base-color);
-      border-top: 2px solid var(--cp-popover-base-color);
-      opacity: 0.8;
-      transition: border-color 0.3s ease;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      border-left: 2px solid var(--cp-popover-base-color);
-      border-bottom: 2px solid var(--cp-popover-base-color);
-      opacity: 0.8;
-      transition: border-color 0.3s ease;
-    }
-
-    // ===== Variant Styles =====
-
-    // Solid (默认)
-    @include m(solid) {
-      // 默认样式
-    }
-
-    // Outline
-    @include m(outline) {
-      --cp-popover-glow-spread: 10px;
-      --cp-popover-glow-color: var(--cp-popover-base-color-light);
-
-      .cp-popover__background {
-        background: var(--cp-bg-elevated);
-        border-color: var(--cp-popover-base-color);
-        box-shadow: 
-           inset 0 0 15px var(--cp-popover-base-color-light);
-      }
-      
-      filter: 
-        drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4))
-        drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color));
-
-      &::before, &::after {
-        opacity: 1;
-      }
-    }
-
-    // Neon
-    @include m(neon) {
-      --cp-popover-glow-spread: 15px;
-      --cp-popover-glow-color: var(--cp-popover-base-color-light);
-
-      .cp-popover__background {
-        background: rgba(var(--cp-bg-elevated-rgb), 0.95);
-        border-color: var(--cp-popover-base-color);
-        box-shadow: inset 0 0 10px var(--cp-popover-base-color-light);
-      }
-      
-      filter: 
-        drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color))
-        drop-shadow(0 0 calc(var(--cp-popover-glow-spread) * 2) var(--cp-popover-glow-color));
-      
-      &::before, &::after {
-        border-width: 3px;
-        opacity: 1;
-        filter: drop-shadow(0 0 5px var(--cp-popover-base-color));
-      }
-    }
-
-    // Ghost
-    @include m(ghost) {
-      .cp-popover__background {
-        background: var(--cp-bg-elevated);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        box-shadow: none;
-        clip-path: none;
-        border-radius: var(--cp-radius-sm);
-      }
-      
-      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
-
-      &::before, &::after {
-        display: none;
-      }
-    }
-
-    // Tooltip 模式
-    &.is-tooltip {
-      padding: var(--cp-spacing-sm) var(--cp-spacing-md);
-      font-size: var(--cp-font-size-sm);
-
-      .cp-popover__background {
-         background: var(--cp-bg-elevated);
-         border-color: var(--cp-popover-base-color);
-         
-         // 小切角
-         clip-path: polygon(
-           4px 0, 100% 0,
-           100% calc(100% - 4px), calc(100% - 4px) 100%,
-           0 100%, 0 4px
-         );
-      }
-
-      filter: 
-        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5))
-        drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color));
-      
-      &::before,
-      &::after {
-        display: none;
-      }
-      
-      &.cp-popover__content--ghost {
-        .cp-popover__background {
-           border-color: rgba(255, 255, 255, 0.1);
-           box-shadow: none;
-        }
-        filter: none;
-      }
-    }
-
-    // 有标题时
-    &.is-has-title {
-      padding-top: 0;
-    }
-
-    // ===== Shape =====
-
-    // clip (默认)
-    @include m(shape-clip) {
-       // background 默认已有 clip-path
-    }
-
-    // no-clip
-    @include m(shape-no-clip) {
-      .cp-popover__background {
-        clip-path: none !important;
-        border-radius: 0;
-      }
-
-      &::before, &::after {
-        display: none;
-      }
-    }
-
-    // round
-    @include m(shape-round) {
-      .cp-popover__background {
-        clip-path: none !important;
-        border-radius: var(--cp-radius-md);
-        overflow: hidden; 
-      }
-
-      &::before, &::after {
-        display: none;
-      }
-    }
-  }
-
-  // 标题
-  @include e(title) {
-    padding: var(--cp-spacing-md) 0 var(--cp-spacing-sm);
-    font-size: var(--cp-font-size-md);
-    font-weight: 600;
-    color: var(--cp-text-primary);
-    border-bottom: 1px solid var(--cp-border);
-    margin-bottom: var(--cp-spacing-sm);
-
-    // 标题装饰线
-    &::before {
-      content: '';
-      display: inline-block;
-      width: 3px;
-      height: 1em;
-      background: var(--cp-popover-color, var(--cp-color-primary));
-      margin-right: var(--cp-spacing-sm);
-      vertical-align: middle;
-      transition: background-color 0.3s ease;
-    }
-  }
-
-  // 内容区
-  @include e(body) {
-    font-size: var(--cp-font-size-sm);
-    color: var(--cp-text-secondary);
-  }
-
-  // 箭头
-  // flipArrow=false: 外凸三角，指向触发器
-  // flipArrow=true (.is-flipped): 内嵌三角，呈缺角感
-  @include e(arrow) {
-    position: absolute;
-    z-index: 2;
-    transition: box-shadow 0.3s ease, background-color 0.3s ease;
-
-    // 默认：外凸箭头（指向 trigger）
-    background: var(--cp-popover-base-color, var(--cp-color-primary));
-    box-shadow: 0 0 8px var(--cp-popover-base-color, var(--cp-color-primary));
-
-    .cp-popover__content--outline:not(.is-flipped) &,
-    .cp-popover__content--ghost:not(.is-flipped) & {
-      background: var(--cp-bg-elevated);
-      box-shadow: 0 0 6px var(--cp-popover-base-color, var(--cp-color-primary));
-    }
-
-    .cp-popover__content--neon:not(.is-flipped) & {
-      box-shadow: 0 0 10px var(--cp-popover-color-light, var(--cp-color-primary-light));
-    }
-
-    // 翻转模式：内嵌缺角
-    .cp-popover__content.is-flipped & {
-      background: var(--cp-popover-base-color);
-      box-shadow: 0 0 6px var(--cp-popover-base-color-light, var(--cp-color-primary-light));
-    }
-
-    // ===== 各方向定位 =====
-
-    // 弹层在目标上方 → 箭头在底部
-    @include m(top) {
-      width: 12px;
-      height: 6px;
-      bottom: -6px;
-      left: 50%;
-      margin-left: -6px;
-      clip-path: polygon(0 0, 100% 0, 50% 100%);
-
-      // 翻转后仍在底部，但内嵌进本体
-      .cp-popover__content.is-flipped & {
-        bottom: 0;
-        clip-path: polygon(0 100%, 100% 100%, 50% 0);
-      }
-    }
-
-    // 弹层在目标下方 → 箭头在顶部
-    @include m(bottom) {
-      width: 12px;
-      height: 6px;
-      top: -6px;
-      left: 50%;
-      margin-left: -6px;
-      clip-path: polygon(0 100%, 100% 100%, 50% 0);
-
-      // 翻转后仍在顶部，但内嵌进本体
-      .cp-popover__content.is-flipped & {
-        top: 0;
-        clip-path: polygon(0 0, 100% 0, 50% 100%);
-      }
-    }
-
-    // 弹层在目标左侧 → 箭头在右侧
-    @include m(left) {
-      width: 6px;
-      height: 12px;
-      right: -6px;
-      top: 50%;
-      margin-top: -6px;
-      clip-path: polygon(0 0, 100% 50%, 0 100%);
-
-      // 翻转后仍在右侧，但内嵌进本体
-      .cp-popover__content.is-flipped & {
-        right: 0;
-        clip-path: polygon(100% 0, 0 50%, 100% 100%);
-      }
-    }
-
-    // 弹层在目标右侧 → 箭头在左侧
-    @include m(right) {
-      width: 6px;
-      height: 12px;
-      left: -6px;
-      top: 50%;
-      margin-top: -6px;
-      clip-path: polygon(100% 0, 0 50%, 100% 100%);
-
-      // 翻转后仍在左侧，但内嵌进本体
-      .cp-popover__content.is-flipped & {
-        left: 0;
-        clip-path: polygon(0 0, 100% 50%, 0 100%);
-      }
-    }
-  }
-}
-
-// 过渡动画
-.cp-popover-fade-enter-active {
-  animation: cp-popover-fade-in 0.2s ease-out;
-}
-
-.cp-popover-fade-leave-active {
-  animation: cp-popover-fade-out 0.15s ease-in;
-}
-
-// ===== Slide 过渡动画 =====
-
-// Top: 弹层在上方，从上方滑入
-@keyframes cp-popover-slide-top-in {
-  from { opacity: 0; transform: translateY(-8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes cp-popover-slide-top-out {
-  from { opacity: 1; transform: translateY(0); }
-  to   { opacity: 0; transform: translateY(-8px); }
-}
-
-// Bottom: 弹层在下方，从下方滑入
-@keyframes cp-popover-slide-bottom-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes cp-popover-slide-bottom-out {
-  from { opacity: 1; transform: translateY(0); }
-  to   { opacity: 0; transform: translateY(8px); }
-}
-
-// Left: 弹层在左侧，从左方滑入
-@keyframes cp-popover-slide-left-in {
-  from { opacity: 0; transform: translateX(-8px); }
-  to   { opacity: 1; transform: translateX(0); }
-}
-@keyframes cp-popover-slide-left-out {
-  from { opacity: 1; transform: translateX(0); }
-  to   { opacity: 0; transform: translateX(-8px); }
-}
-
-// Right: 弹层在右侧，从右方滑入
-@keyframes cp-popover-slide-right-in {
-  from { opacity: 0; transform: translateX(8px); }
-  to   { opacity: 1; transform: translateX(0); }
-}
-@keyframes cp-popover-slide-right-out {
-  from { opacity: 1; transform: translateX(0); }
-  to   { opacity: 0; transform: translateX(8px); }
-}
-
-// Slide transition classes
-@each $dir in top, bottom, left, right {
-  .cp-popover-slide-#{$dir}-enter-active {
-    animation: cp-popover-slide-#{$dir}-in 0.2s ease-out;
-  }
-  .cp-popover-slide-#{$dir}-leave-active {
-    animation: cp-popover-slide-#{$dir}-out 0.15s ease-in;
-  }
-}
+// CpPopover 组件样式
+// 赛博朋克/机甲风格弹出层
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+// 动画
+@keyframes cp-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes cp-popover-fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@include b(popover) {
+  display: inline-block;
+  position: relative;
+
+  // 触发器
+  @include e(trigger) {
+    display: inline-block;
+  }
+
+  // 背景层 (承载形状、背景、边框)
+  @include e(background) {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--cp-bg-elevated);
+    border: 1px solid var(--cp-border);
+    backdrop-filter: blur(8px);
+    
+    // 内阴影
+    box-shadow: inset 0 0 20px color-mix(in srgb, var(--cp-color-primary) 3%, transparent);
+
+    // 默认切角样式
+    clip-path: polygon(
+      8px 0, 100% 0,
+      100% calc(100% - 8px), calc(100% - 8px) 100%,
+      0 100%, 0 8px
+    );
+    
+    transition: clip-path 0.3s ease, border-radius 0.3s ease;
+  }
+
+  // 弹层内容容器 (承载布局、外部阴影、事件)
+  @include e(content) {
+    --cp-popover-base-color: var(--cp-popover-color, var(--cp-color-primary));
+    --cp-popover-base-color-light: var(--cp-popover-color-light, var(--cp-color-primary-light));
+
+    // 发光控制变量 (用户可覆盖)
+    // --cp-popover-glow-spread: 外发光扩散半径
+    --cp-popover-glow-spread: 0;
+    // --cp-popover-glow-color: 外发光颜色 (默认为透明，避免 solid 模式下透过半透明背景显示)
+    --cp-popover-glow-color: transparent;
+
+    position: absolute;
+    z-index: 2000;
+    padding: var(--cp-spacing-md);
+    
+    // 外部阴影使用 filter: drop-shadow 以适配不规则形状 (包括箭头和切角)
+    filter: 
+      drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4))
+      drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color));
+
+    // 入场动画由 <Transition> 管理
+
+    // 无动画模式
+    &.is-no-transition {
+      animation: none !important;
+    }
+
+    // 标记角 (保留在 content 层，位于切角之外的尖角处)
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 12px;
+      height: 12px;
+      border-right: 2px solid var(--cp-popover-base-color);
+      border-top: 2px solid var(--cp-popover-base-color);
+      opacity: 0.8;
+      transition: border-color 0.3s ease;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 12px;
+      height: 12px;
+      border-left: 2px solid var(--cp-popover-base-color);
+      border-bottom: 2px solid var(--cp-popover-base-color);
+      opacity: 0.8;
+      transition: border-color 0.3s ease;
+    }
+
+    // ===== Variant Styles =====
+
+    // Solid (默认)
+    @include m(solid) {
+      // 默认样式
+    }
+
+    // Outline
+    @include m(outline) {
+      --cp-popover-glow-spread: 10px;
+      --cp-popover-glow-color: var(--cp-popover-base-color-light);
+
+      .cp-popover__background {
+        background: var(--cp-bg-elevated);
+        border-color: var(--cp-popover-base-color);
+        box-shadow: 
+           inset 0 0 15px var(--cp-popover-base-color-light);
+      }
+      
+      filter: 
+        drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4))
+        drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color));
+
+      &::before, &::after {
+        opacity: 1;
+      }
+    }
+
+    // Neon
+    @include m(neon) {
+      --cp-popover-glow-spread: 15px;
+      --cp-popover-glow-color: var(--cp-popover-base-color-light);
+
+      .cp-popover__background {
+        background: rgba(var(--cp-bg-elevated-rgb), 0.95);
+        border-color: var(--cp-popover-base-color);
+        box-shadow: inset 0 0 10px var(--cp-popover-base-color-light);
+      }
+      
+      filter: 
+        drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color))
+        drop-shadow(0 0 calc(var(--cp-popover-glow-spread) * 2) var(--cp-popover-glow-color));
+      
+      &::before, &::after {
+        border-width: 3px;
+        opacity: 1;
+        filter: drop-shadow(0 0 5px var(--cp-popover-base-color));
+      }
+    }
+
+    // Ghost
+    @include m(ghost) {
+      .cp-popover__background {
+        background: var(--cp-bg-elevated);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow: none;
+        clip-path: none;
+        border-radius: var(--cp-radius-sm);
+      }
+      
+      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
+
+      &::before, &::after {
+        display: none;
+      }
+    }
+
+    // Tooltip 模式
+    &.is-tooltip {
+      padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+      font-size: var(--cp-font-size-sm);
+
+      .cp-popover__background {
+         background: var(--cp-bg-elevated);
+         border-color: var(--cp-popover-base-color);
+         
+         // 小切角
+         clip-path: polygon(
+           4px 0, 100% 0,
+           100% calc(100% - 4px), calc(100% - 4px) 100%,
+           0 100%, 0 4px
+         );
+      }
+
+      filter: 
+        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5))
+        drop-shadow(0 0 var(--cp-popover-glow-spread) var(--cp-popover-glow-color));
+      
+      &::before,
+      &::after {
+        display: none;
+      }
+      
+      &.cp-popover__content--ghost {
+        .cp-popover__background {
+           border-color: rgba(255, 255, 255, 0.1);
+           box-shadow: none;
+        }
+        filter: none;
+      }
+    }
+
+    // 有标题时
+    &.is-has-title {
+      padding-top: 0;
+    }
+
+    // ===== Shape =====
+
+    // clip (默认)
+    @include m(shape-clip) {
+       // background 默认已有 clip-path
+    }
+
+    // no-clip
+    @include m(shape-no-clip) {
+      .cp-popover__background {
+        clip-path: none !important;
+        border-radius: 0;
+      }
+
+      &::before, &::after {
+        display: none;
+      }
+    }
+
+    // round
+    @include m(shape-round) {
+      .cp-popover__background {
+        clip-path: none !important;
+        border-radius: var(--cp-radius-md);
+        overflow: hidden; 
+      }
+
+      &::before, &::after {
+        display: none;
+      }
+    }
+  }
+
+  // 标题
+  @include e(title) {
+    padding: var(--cp-spacing-md) 0 var(--cp-spacing-sm);
+    font-size: var(--cp-font-size-md);
+    font-weight: 600;
+    color: var(--cp-text-primary);
+    border-bottom: 1px solid var(--cp-border);
+    margin-bottom: var(--cp-spacing-sm);
+
+    // 标题装饰线
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 1em;
+      background: var(--cp-popover-color, var(--cp-color-primary));
+      margin-right: var(--cp-spacing-sm);
+      vertical-align: middle;
+      transition: background-color 0.3s ease;
+    }
+  }
+
+  // 内容区
+  @include e(body) {
+    font-size: var(--cp-font-size-sm);
+    color: var(--cp-text-secondary);
+  }
+
+  // 箭头
+  // flipArrow=false: 外凸三角，指向触发器
+  // flipArrow=true (.is-flipped): 内嵌三角，呈缺角感
+  @include e(arrow) {
+    position: absolute;
+    z-index: 2;
+    transition: box-shadow 0.3s ease, background-color 0.3s ease;
+
+    // 默认：外凸箭头（指向 trigger）
+    background: var(--cp-popover-base-color, var(--cp-color-primary));
+    box-shadow: 0 0 8px var(--cp-popover-base-color, var(--cp-color-primary));
+
+    .cp-popover__content--outline:not(.is-flipped) &,
+    .cp-popover__content--ghost:not(.is-flipped) & {
+      background: var(--cp-bg-elevated);
+      box-shadow: 0 0 6px var(--cp-popover-base-color, var(--cp-color-primary));
+    }
+
+    .cp-popover__content--neon:not(.is-flipped) & {
+      box-shadow: 0 0 10px var(--cp-popover-color-light, var(--cp-color-primary-light));
+    }
+
+    // 翻转模式：内嵌缺角
+    .cp-popover__content.is-flipped & {
+      background: var(--cp-popover-base-color);
+      box-shadow: 0 0 6px var(--cp-popover-base-color-light, var(--cp-color-primary-light));
+    }
+
+    // ===== 各方向定位 =====
+
+    // 弹层在目标上方 → 箭头在底部
+    @include m(top) {
+      width: 12px;
+      height: 6px;
+      bottom: -6px;
+      left: 50%;
+      margin-left: -6px;
+      clip-path: polygon(0 0, 100% 0, 50% 100%);
+
+      // 翻转后仍在底部，但内嵌进本体
+      .cp-popover__content.is-flipped & {
+        bottom: 0;
+        clip-path: polygon(0 100%, 100% 100%, 50% 0);
+      }
+    }
+
+    // 弹层在目标下方 → 箭头在顶部
+    @include m(bottom) {
+      width: 12px;
+      height: 6px;
+      top: -6px;
+      left: 50%;
+      margin-left: -6px;
+      clip-path: polygon(0 100%, 100% 100%, 50% 0);
+
+      // 翻转后仍在顶部，但内嵌进本体
+      .cp-popover__content.is-flipped & {
+        top: 0;
+        clip-path: polygon(0 0, 100% 0, 50% 100%);
+      }
+    }
+
+    // 弹层在目标左侧 → 箭头在右侧
+    @include m(left) {
+      width: 6px;
+      height: 12px;
+      right: -6px;
+      top: 50%;
+      margin-top: -6px;
+      clip-path: polygon(0 0, 100% 50%, 0 100%);
+
+      // 翻转后仍在右侧，但内嵌进本体
+      .cp-popover__content.is-flipped & {
+        right: 0;
+        clip-path: polygon(100% 0, 0 50%, 100% 100%);
+      }
+    }
+
+    // 弹层在目标右侧 → 箭头在左侧
+    @include m(right) {
+      width: 6px;
+      height: 12px;
+      left: -6px;
+      top: 50%;
+      margin-top: -6px;
+      clip-path: polygon(100% 0, 0 50%, 100% 100%);
+
+      // 翻转后仍在左侧，但内嵌进本体
+      .cp-popover__content.is-flipped & {
+        left: 0;
+        clip-path: polygon(0 0, 100% 50%, 0 100%);
+      }
+    }
+  }
+}
+
+// 过渡动画
+.cp-popover-fade-enter-active {
+  animation: cp-popover-fade-in 0.2s ease-out;
+}
+
+.cp-popover-fade-leave-active {
+  animation: cp-popover-fade-out 0.15s ease-in;
+}
+
+// ===== Slide 过渡动画 =====
+
+// Top: 弹层在上方，从上方滑入
+@keyframes cp-popover-slide-top-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes cp-popover-slide-top-out {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(-8px); }
+}
+
+// Bottom: 弹层在下方，从下方滑入
+@keyframes cp-popover-slide-bottom-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes cp-popover-slide-bottom-out {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(8px); }
+}
+
+// Left: 弹层在左侧，从左方滑入
+@keyframes cp-popover-slide-left-in {
+  from { opacity: 0; transform: translateX(-8px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes cp-popover-slide-left-out {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(-8px); }
+}
+
+// Right: 弹层在右侧，从右方滑入
+@keyframes cp-popover-slide-right-in {
+  from { opacity: 0; transform: translateX(8px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes cp-popover-slide-right-out {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(8px); }
+}
+
+// Slide transition classes
+@each $dir in top, bottom, left, right {
+  .cp-popover-slide-#{$dir}-enter-active {
+    animation: cp-popover-slide-#{$dir}-in 0.2s ease-out;
+  }
+  .cp-popover-slide-#{$dir}-leave-active {
+    animation: cp-popover-slide-#{$dir}-out 0.15s ease-in;
+  }
+}