@cyberpunk-vue/theme-chalk 0.1.0

package/src/components/input.scss

@@ -0,0 +1,347 @@
+// CpInput 组件样式
+// 赛博朋克/机甲风格
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(input) {
+    // 基础样式
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 var(--cp-spacing-md);
+    background: transparent;
+    border: 1px solid var(--cp-input-inactive-border-color, var(--cp-border));
+    color: var(--cp-input-text-color, var(--cp-text-primary));
+    font-family: 'Rajdhani', 'Inter', system-ui, sans-serif;
+    transition: all 0.2s ease;
+
+    // 机甲风切角 (Top-Left, Bottom-Right)
+    clip-path: polygon(8px 0,
+            100% 0,
+            100% calc(100% - 8px),
+            calc(100% - 8px) 100%,
+            0 100%,
+            0 8px);
+
+    // 装饰性小方块 (右上角)
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 6px;
+        height: 6px;
+        background: var(--cp-input-inactive-border-color, var(--cp-border));
+        opacity: 0.6;
+        z-index: 2;
+        transition: all 0.2s ease;
+    }
+
+    // ===== 尺寸 =====
+    @include m(sm) {
+        height: var(--cp-size-sm);
+        font-size: var(--cp-font-size-sm);
+        padding: 0 var(--cp-spacing-sm);
+        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
+
+        &::after {
+            width: 5px;
+            height: 5px;
+        }
+    }
+
+    @include m(md) {
+        height: var(--cp-size-md);
+        font-size: var(--cp-font-size-md);
+    }
+
+    @include m(lg) {
+        height: var(--cp-size-lg);
+        font-size: var(--cp-font-size-lg);
+        padding: 0 var(--cp-spacing-lg);
+        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
+
+        &::after {
+            width: 8px;
+            height: 8px;
+        }
+    }
+
+    // ===== Outline 变体 (默认) =====
+    @include m(outline) {
+        background: transparent;
+        border-color: var(--cp-input-inactive-border-color, var(--cp-border));
+
+        &::after {
+            background: var(--cp-input-inactive-border-color, var(--cp-border));
+        }
+
+        &:hover:not(.is-disabled):not(.is-readonly) {
+            border-color: var(--cp-color-primary);
+
+            &::after {
+                background: var(--cp-color-primary);
+                opacity: 0.8;
+            }
+        }
+
+        &.is-focused {
+            border-color: var(--cp-color-primary);
+            box-shadow: 0 0 10px var(--cp-color-primary-light), inset 0 0 5px var(--cp-color-primary-light);
+
+            &::after {
+                background: var(--cp-color-primary);
+                opacity: 1;
+                box-shadow: 0 0 5px var(--cp-color-primary);
+            }
+        }
+    }
+
+    // ===== Filled 变体 =====
+    @include m(filled) {
+        background: var(--cp-bg-elevated);
+        border-color: var(--cp-input-inactive-border-color, var(--cp-border));
+
+        &::after {
+            background: var(--cp-input-inactive-border-color, var(--cp-border));
+        }
+
+        &:hover:not(.is-disabled):not(.is-readonly) {
+            border-color: var(--cp-color-primary);
+            background: rgba(0, 240, 255, 0.05);
+
+            &::after {
+                background: var(--cp-color-primary);
+                opacity: 0.8;
+            }
+        }
+
+        &.is-focused {
+            border-color: var(--cp-color-primary);
+            background: rgba(0, 240, 255, 0.08);
+            box-shadow: 0 0 10px var(--cp-color-primary-light);
+
+            &::after {
+                background: var(--cp-color-primary);
+                opacity: 1;
+            }
+        }
+    }
+
+    // ===== Ghost 变体 =====
+    @include m(ghost) {
+        background: transparent;
+        border-color: transparent;
+        border-bottom-color: var(--cp-input-inactive-border-color, var(--cp-border));
+        clip-path: none;
+        border-radius: 0;
+
+        &::after {
+            display: none;
+        }
+
+        &:hover:not(.is-disabled):not(.is-readonly) {
+            border-bottom-color: var(--cp-color-primary);
+        }
+
+        &.is-focused {
+            border-bottom-color: var(--cp-color-primary);
+            box-shadow: 0 2px 0 0 var(--cp-color-primary);
+        }
+    }
+
+    // ===== 形状模式 =====
+    // no-clip (直角)
+    @include m(shape-no-clip) {
+        clip-path: none;
+        border-radius: 0;
+
+        &::after {
+            display: none;
+        }
+    }
+
+    // round (圆角)
+    @include m(shape-round) {
+        clip-path: none;
+        border-radius: var(--cp-radius-lg);
+
+        &::after {
+            display: none;
+        }
+    }
+
+    // ===== 状态 =====
+    @include when(disabled) {
+        cursor: not-allowed;
+        opacity: 0.5;
+        filter: grayscale(0.5);
+
+        .cp-input__inner {
+            cursor: not-allowed;
+        }
+    }
+
+    @include when(readonly) {
+        .cp-input__inner {
+            cursor: default;
+        }
+    }
+
+    // ===== 自定义颜色 =====
+    @include when(custom-color) {
+        &:hover:not(.is-disabled):not(.is-readonly) {
+            border-color: var(--cp-input-custom-color);
+
+            &::after {
+                background: var(--cp-input-custom-color);
+            }
+        }
+
+        &.is-focused {
+            border-color: var(--cp-input-custom-color);
+            box-shadow: 0 0 10px var(--cp-input-custom-color-light), inset 0 0 5px var(--cp-input-custom-color-light);
+
+            &::after {
+                background: var(--cp-input-custom-color);
+                box-shadow: 0 0 5px var(--cp-input-custom-color);
+            }
+        }
+
+        // Ghost 变体 - 确保只有底部边框显示颜色
+        &.cp-input--ghost {
+            // 基础状态：保持顶部/左右边框透明
+            border-color: transparent;
+            border-bottom-color: var(--cp-input-inactive-border-color, var(--cp-border));
+
+            &:hover:not(.is-disabled):not(.is-readonly) {
+                border-color: transparent;
+                border-bottom-color: var(--cp-input-custom-color);
+            }
+
+            &.is-focused {
+                border-color: transparent;
+                border-bottom-color: var(--cp-input-custom-color);
+                box-shadow: 0 2px 0 0 var(--cp-input-custom-color);
+            }
+        }
+    }
+
+    // ===== 内部元素 =====
+    @include e(inner) {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        background: transparent;
+        border: none;
+        outline: none;
+        color: inherit;
+        font-family: inherit;
+        font-size: inherit;
+        transition: opacity 0.15s ease, transform 0.15s ease, letter-spacing 0.15s ease;
+
+        &::placeholder {
+            color: var(--cp-input-placeholder-color, var(--cp-text-muted));
+        }
+
+        // 移除 number 类型的箭头
+        &[type="number"] {
+            -moz-appearance: textfield;
+            appearance: textfield;
+
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button {
+                -webkit-appearance: none;
+                appearance: none;
+                margin: 0;
+            }
+        }
+    }
+
+    // 清除动画状态
+    @include when(clearing) {
+        .cp-input__inner {
+            opacity: 0;
+            transform: scaleX(0.8);
+            letter-spacing: -0.5em;
+            transform-origin: left center;
+        }
+    }
+
+    @include e(prefix) {
+        display: inline-flex;
+        align-items: center;
+        margin-right: var(--cp-spacing-sm);
+        color: var(--cp-text-secondary);
+        font-size: 1.1em;
+
+        .cp-icon {
+            --cp-icon-size: 1em;
+        }
+    }
+
+    @include e(suffix) {
+        display: inline-flex;
+        align-items: center;
+        margin-left: var(--cp-spacing-sm);
+        color: var(--cp-text-secondary);
+        font-size: 1.1em;
+
+        .cp-icon {
+            --cp-icon-size: 1em;
+        }
+    }
+
+    @include e(clear) {
+        display: inline-flex;
+        align-items: center;
+        margin-left: var(--cp-spacing-xs);
+        color: var(--cp-text-muted);
+        font-size: 1em;
+        cursor: pointer;
+        transition: color 0.2s ease;
+
+        &:hover {
+            color: var(--cp-text-secondary);
+        }
+
+        svg {
+            width: 1em;
+            height: 1em;
+        }
+    }
+
+    @include e(password) {
+        display: inline-flex;
+        align-items: center;
+        margin-left: var(--cp-spacing-xs);
+        color: var(--cp-text-muted);
+        font-size: 1em;
+        cursor: pointer;
+        transition: color 0.2s ease;
+
+        &:hover {
+            color: var(--cp-color-primary);
+        }
+
+        svg {
+            width: 1.1em;
+            height: 1.1em;
+        }
+    }
+
+    @include e(count) {
+        display: inline-flex;
+        align-items: center;
+        margin-left: var(--cp-spacing-sm);
+        padding-left: var(--cp-spacing-sm);
+        border-left: 1px solid var(--cp-border);
+        color: var(--cp-text-muted);
+        font-size: var(--cp-font-size-sm);
+        white-space: nowrap;
+        font-family: 'Rajdhani', monospace;
+    }
+}

package/src/components/loading.scss

@@ -0,0 +1,106 @@
+// CpLoading 组件样式
+// Google Material Design 风格圆形加载器
+// 弧线伸缩 + 旋转双重动画
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+// 尺寸映射
+$loading-sizes: (
+    sm: 24px,
+    md: 40px,
+    lg: 56px,
+);
+
+@include b(loading) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    // ===== 尺寸 =====
+    @each $name, $size in $loading-sizes {
+        @include m($name) {
+            width: $size;
+            height: $size;
+        }
+    }
+
+    // ===== SVG 容器 =====
+    @include e(svg) {
+        animation: cp-loading-rotate 2s linear infinite;
+    }
+
+    // ===== 轨道 (半透明背景圆) =====
+    @include e(track) {
+        stroke: currentColor;
+        opacity: 0.15;
+    }
+
+    // ===== 动态弧线 =====
+    @include e(circle) {
+        stroke: currentColor;
+        transform-origin: center;
+        animation: cp-loading-dash 1.5s ease-in-out infinite;
+    }
+
+    // ===== 颜色类型 =====
+    @include m(primary) {
+        color: var(--cp-color-primary);
+    }
+
+    @include m(success) {
+        color: var(--cp-color-success);
+    }
+
+    @include m(warning) {
+        color: var(--cp-color-warning);
+    }
+
+    @include m(error) {
+        color: var(--cp-color-error);
+    }
+
+    @include m(info) {
+        color: var(--cp-color-info);
+    }
+
+    @include m(default) {
+        color: inherit;
+    }
+
+
+    // ===== 自定义颜色 =====
+    @include when(custom-color) {
+        color: var(--cp-loading-color);
+    }
+}
+
+// ===== 动画 =====
+
+// 旋转动画 - 容器整体旋转
+@keyframes cp-loading-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+// 弧线伸缩动画 - Google Material Design 风格
+// 配合 pathLength="100" 使用标准化数值
+// 0% 和 100% 必须完全相同 (除了 offset 差一个周期 -100)
+// 使用 1 作为最小值保持 Google 原版质感，用户提到的消失问题已由 Geometry 修复解决
+@keyframes cp-loading-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: -100;
+    }
+}

package/src/components/pattern-background.scss

@@ -0,0 +1,18 @@
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(pattern-background) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  
+  @include when(cover) {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+  }
+  
+  @include when(decorative) {
+    pointer-events: none;
+  }
+}

package/src/components/popover.scss

@@ -0,0 +1,198 @@
+// 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(content) {
+    position: absolute;
+    z-index: 2000;
+    padding: var(--cp-spacing-md);
+    background: var(--cp-bg-elevated);
+    border: 1px solid var(--cp-border);
+    box-shadow: 
+      0 4px 16px rgba(0, 0, 0, 0.4),
+      0 0 1px var(--cp-color-primary),
+      inset 0 0 20px rgba(0, 240, 255, 0.03);
+    backdrop-filter: blur(8px);
+    
+    // 切角样式
+    clip-path: polygon(
+      8px 0, 100% 0,
+      100% calc(100% - 8px), calc(100% - 8px) 100%,
+      0 100%, 0 8px
+    );
+
+    // 入场动画
+    animation: cp-popover-fade-in 0.2s ease-out;
+
+    // 标记角
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 12px;
+      height: 12px;
+      border-left: 2px solid var(--cp-color-primary);
+      border-top: 2px solid var(--cp-color-primary);
+      opacity: 0.8;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 12px;
+      height: 12px;
+      border-right: 2px solid var(--cp-color-primary);
+      border-bottom: 2px solid var(--cp-color-primary);
+      opacity: 0.8;
+    }
+
+    // Tooltip 模式 - 简化样式
+    &.is-tooltip {
+      padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+      font-size: var(--cp-font-size-sm);
+      background: rgba(10, 10, 14, 0.95);
+      border-color: var(--cp-color-primary);
+      box-shadow: 
+        0 2px 8px rgba(0, 0, 0, 0.5),
+        0 0 8px var(--cp-color-primary-light);
+      
+      // 更小的切角
+      clip-path: polygon(
+        4px 0, 100% 0,
+        100% calc(100% - 4px), calc(100% - 4px) 100%,
+        0 100%, 0 4px
+      );
+
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    // 有标题时
+    &.is-has-title {
+      padding-top: 0;
+    }
+  }
+
+  // 标题
+  @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-color-primary);
+      margin-right: var(--cp-spacing-sm);
+      vertical-align: middle;
+    }
+  }
+
+  // 内容区
+  @include e(body) {
+    font-size: var(--cp-font-size-sm);
+    color: var(--cp-text-secondary);
+    line-height: 1.6;
+  }
+
+  // 箭头
+  @include e(arrow) {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: var(--cp-bg-elevated);
+    border: 1px solid var(--cp-border);
+    transform: rotate(45deg);
+
+    // 朝上
+    @include m(top) {
+      bottom: -5px;
+      left: 50%;
+      margin-left: -4px;
+      border-top: none;
+      border-left: none;
+    }
+
+    // 朝下
+    @include m(bottom) {
+      top: -5px;
+      left: 50%;
+      margin-left: -4px;
+      border-bottom: none;
+      border-right: none;
+    }
+
+    // 朝左
+    @include m(left) {
+      right: -5px;
+      top: 50%;
+      margin-top: -4px;
+      border-bottom: none;
+      border-left: none;
+    }
+
+    // 朝右
+    @include m(right) {
+      left: -5px;
+      top: 50%;
+      margin-top: -4px;
+      border-top: none;
+      border-right: none;
+    }
+  }
+}
+
+// 过渡动画
+.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;
+}