@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/form.scss

@@ -1,59 +1,59 @@
-// CpForm 组件样式
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-@include b(form) {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cp-form-gap, var(--cp-spacing-lg));
-
-    // ===== Label 位置 =====
-    @include m(label-top) {
-        .cp-form-item {
-            flex-direction: column;
-            align-items: stretch;
-        }
-
-        .cp-form-item__label {
-            width: auto !important;
-            min-width: unset !important;
-            justify-content: flex-start;
-            margin-bottom: var(--cp-form-item-gap, var(--cp-spacing-sm));
-            padding-right: 0;
-        }
-    }
-
-    @include m(label-left) {
-        .cp-form-item__label {
-            justify-content: flex-start;
-        }
-    }
-
-    @include m(label-right) {
-        .cp-form-item__label {
-            justify-content: flex-end;
-        }
-    }
-
-    // ===== 行内模式 =====
-    @include m(inline) {
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: var(--cp-form-inline-gap, var(--cp-spacing-lg));
-
-        .cp-form-item {
-            flex: none;
-            margin-bottom: 0;
-        }
-    }
-
-    // ===== 尺寸 =====
-    @include m(sm) {
-        --cp-form-label-font-size: var(--cp-font-size-sm);
-    }
-
-    @include m(lg) {
-        --cp-form-label-font-size: var(--cp-font-size-lg);
-    }
-}
+// CpForm 组件样式
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(form) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-form-gap, var(--cp-spacing-lg));
+
+    // ===== Label 位置 =====
+    @include m(label-top) {
+        .cp-form-item {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .cp-form-item__label {
+            width: auto !important;
+            min-width: unset !important;
+            justify-content: flex-start;
+            margin-bottom: var(--cp-form-item-gap, var(--cp-spacing-sm));
+            padding-right: 0;
+        }
+    }
+
+    @include m(label-left) {
+        .cp-form-item__label {
+            justify-content: flex-start;
+        }
+    }
+
+    @include m(label-right) {
+        .cp-form-item__label {
+            justify-content: flex-end;
+        }
+    }
+
+    // ===== 行内模式 =====
+    @include m(inline) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--cp-form-inline-gap, var(--cp-spacing-lg));
+
+        .cp-form-item {
+            flex: none;
+            margin-bottom: 0;
+        }
+    }
+
+    // ===== 尺寸 =====
+    @include m(sm) {
+        --cp-form-label-font-size: var(--cp-font-size-sm);
+    }
+
+    @include m(lg) {
+        --cp-form-label-font-size: var(--cp-font-size-lg);
+    }
+}

package/src/components/icon.scss

@@ -1,84 +1,84 @@
-@use '../mixins/mixins' as *;
-@use '../common/var' as *;
-
-@include b(icon) {
-    // 基础样式
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--cp-icon-size, 24px);
-    width: var(--cp-icon-size, 24px);
-    height: var(--cp-icon-size, 24px);
-    color: inherit;
-    vertical-align: middle;
-
-    // SVG 继承颜色
-    svg {
-        width: 1em;
-        height: 1em;
-        fill: currentColor;
-    }
-
-    // SVG 容器
-    @include e(svg) {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    // 字体图标嵌套
-    >i {
-        font-size: inherit;
-        color: inherit;
-    }
-
-    // === 颜色类型 ===
-    @include m(default) {
-        color: inherit;
-    }
-
-    @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 when(custom-color) {
-        color: var(--cp-icon-color);
-    }
-
-    @include when(spin) {
-        animation: cp-icon-spin 1s linear infinite;
-    }
-}
-
-// 旋转动画
-@keyframes cp-icon-spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
+@use '../mixins/mixins' as *;
+@use '../common/var' as *;
+
+@include b(icon) {
+    // 基础样式
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--cp-icon-size, 24px);
+    width: var(--cp-icon-size, 24px);
+    height: var(--cp-icon-size, 24px);
+    color: inherit;
+    vertical-align: middle;
+
+    // SVG 继承颜色
+    svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+    }
+
+    // SVG 容器
+    @include e(svg) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    // 字体图标嵌套
+    >i {
+        font-size: inherit;
+        color: inherit;
+    }
+
+    // === 颜色类型 ===
+    @include m(default) {
+        color: inherit;
+    }
+
+    @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 when(custom-color) {
+        color: var(--cp-icon-color);
+    }
+
+    @include when(spin) {
+        animation: cp-icon-spin 1s linear infinite;
+    }
+}
+
+// 旋转动画
+@keyframes cp-icon-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
 }

package/src/components/image-preview.scss

@@ -1,147 +1,147 @@
-// CpImagePreview 组件样式
-// 赛博朋克风格全屏大图预览
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-// ===== 动画 =====
-@keyframes cp-image-preview-fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes cp-image-preview-fade-out {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-// Transition classes
-.cp-image-preview-fade-enter-active {
-    animation: cp-image-preview-fade-in 0.3s ease-out;
-}
-
-.cp-image-preview-fade-leave-active {
-    animation: cp-image-preview-fade-out 0.2s ease-in forwards;
-}
-
-@include b(image-preview) {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.85);
-    user-select: none;
-
-    // ===== 关闭按钮 =====
-    @include e(close) {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        z-index: 2;
-    }
-
-    // ===== 切换箭头 =====
-    @include e(arrow) {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 2;
-
-        @include m(left) {
-            left: 16px;
-        }
-
-        @include m(right) {
-            right: 16px;
-        }
-    }
-
-    // ===== 图片画布 =====
-    @include e(canvas) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    // ===== 加载中 =====
-    @include e(loading) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    // ===== 图片 =====
-    @include e(img) {
-        max-width: 90vw;
-        max-height: 90vh;
-        object-fit: contain;
-        transition: transform 0.3s ease;
-        cursor: grab;
-
-        &:active {
-            cursor: grabbing;
-        }
-
-        // 拖拽中禁用过渡，消除不跟手感
-        &.is-dragging {
-            transition: none;
-        }
-    }
-
-    // ===== 底部工具栏 =====
-    @include e(toolbar) {
-        position: absolute;
-        bottom: 24px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 8px;
-        background: rgba(10, 10, 16, 0.75);
-        backdrop-filter: blur(12px);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
-
-        // 让工具栏内的按钮继承间距
-        > * {
-            flex-shrink: 0;
-        }
-    }
-
-    // ===== 分隔符 =====
-    @include e(divider) {
-        display: inline-block;
-        width: 1px;
-        height: 18px;
-        margin: 0 4px;
-        background: rgba(255, 255, 255, 0.12);
-    }
-
-    // ===== 图片计数 =====
-    @include e(counter) {
-        position: absolute;
-        top: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 2;
-        font-family: var(--cp-font-family-mono, monospace);
-        font-size: 14px;
-        color: rgba(255, 255, 255, 0.6);
-        letter-spacing: 0.1em;
-        text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
-    }
-}
+// CpImagePreview 组件样式
+// 赛博朋克风格全屏大图预览
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+// ===== 动画 =====
+@keyframes cp-image-preview-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes cp-image-preview-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+// Transition classes
+.cp-image-preview-fade-enter-active {
+    animation: cp-image-preview-fade-in 0.3s ease-out;
+}
+
+.cp-image-preview-fade-leave-active {
+    animation: cp-image-preview-fade-out 0.2s ease-in forwards;
+}
+
+@include b(image-preview) {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.85);
+    user-select: none;
+
+    // ===== 关闭按钮 =====
+    @include e(close) {
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        z-index: 2;
+    }
+
+    // ===== 切换箭头 =====
+    @include e(arrow) {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 2;
+
+        @include m(left) {
+            left: 16px;
+        }
+
+        @include m(right) {
+            right: 16px;
+        }
+    }
+
+    // ===== 图片画布 =====
+    @include e(canvas) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    // ===== 加载中 =====
+    @include e(loading) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    // ===== 图片 =====
+    @include e(img) {
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: contain;
+        transition: transform 0.3s ease;
+        cursor: grab;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        // 拖拽中禁用过渡，消除不跟手感
+        &.is-dragging {
+            transition: none;
+        }
+    }
+
+    // ===== 底部工具栏 =====
+    @include e(toolbar) {
+        position: absolute;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px;
+        background: rgba(10, 10, 16, 0.75);
+        backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
+
+        // 让工具栏内的按钮继承间距
+        > * {
+            flex-shrink: 0;
+        }
+    }
+
+    // ===== 分隔符 =====
+    @include e(divider) {
+        display: inline-block;
+        width: 1px;
+        height: 18px;
+        margin: 0 4px;
+        background: rgba(255, 255, 255, 0.12);
+    }
+
+    // ===== 图片计数 =====
+    @include e(counter) {
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 2;
+        font-family: var(--cp-font-family-mono, monospace);
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.6);
+        letter-spacing: 0.1em;
+        text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
+    }
+}