@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/upload.scss

@@ -1,509 +1,509 @@
-// CpUpload 组件样式
-// 赛博朋克/机甲风格
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-@include b(upload) {
-    display: inline-flex;
-    flex-direction: column;
-    gap: var(--cp-spacing-md);
-    width: 100%;
-
-    // ===== CSS 变量 =====
-    --cp-upload-color: var(--cp-color-primary);
-    --cp-upload-border-color: var(--cp-border);
-    --cp-upload-bg: transparent;
-    --cp-upload-card-size: 120px;
-    --cp-upload-success-color: var(--cp-color-success);
-
-    // ===== 颜色类型 =====
-    @include m(primary) { --cp-upload-color: var(--cp-color-primary); --cp-upload-border-color: var(--cp-color-primary); }
-    @include m(success) { --cp-upload-color: var(--cp-color-success); --cp-upload-border-color: var(--cp-color-success); }
-    @include m(warning) { --cp-upload-color: var(--cp-color-warning); --cp-upload-border-color: var(--cp-color-warning); }
-    @include m(error) { --cp-upload-color: var(--cp-color-error); --cp-upload-border-color: var(--cp-color-error); }
-    @include m(info) { --cp-upload-color: var(--cp-color-info); --cp-upload-border-color: var(--cp-color-info); }
-
-    // ===== 隐藏 input =====
-    @include e(input) {
-        display: none;
-    }
-
-    // ===== 触发器 =====
-    @include e(trigger) {
-        display: inline-flex;
-        cursor: pointer;
-    }
-
-    // ===== 拖拽区 =====
-    @include e(dragger) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        min-height: 160px;
-        padding: var(--cp-spacing-xl);
-        border: 2px dashed var(--cp-upload-border-color);
-        background: var(--cp-upload-bg);
-        transition: all 0.3s ease;
-
-        // 切角
-        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
-    }
-
-    // ===== 拖拽区内容 =====
-    @include e(drag-content) {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: var(--cp-spacing-md);
-        color: var(--cp-text-muted);
-        user-select: none;
-    }
-
-    @include e(drag-icon) {
-        width: 48px;
-        height: 48px;
-        color: var(--cp-text-muted);
-        opacity: 0.6;
-        transition: all 0.3s ease;
-    }
-
-    @include e(drag-text) {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.25em;
-        font-size: var(--cp-font-size-md);
-    }
-
-    // ===== Picture-card 触发卡片 =====
-    @include e(card-trigger) {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: var(--cp-spacing-xs);
-        width: var(--cp-upload-card-width, var(--cp-upload-card-size));
-        height: var(--cp-upload-card-height, var(--cp-upload-card-size));
-        border: 2px dashed var(--cp-upload-border-color);
-        background: var(--cp-upload-bg);
-        color: var(--cp-text-muted);
-        transition: all 0.3s ease;
-        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
-
-        svg {
-            width: 28px;
-            height: 28px;
-            transition: transform 0.3s ease;
-        }
-
-        &:hover {
-            border-color: var(--cp-upload-color);
-            color: var(--cp-upload-color);
-            box-shadow: inset 0 0 20px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
-
-            svg {
-                transform: scale(1.1);
-            }
-        }
-    }
-
-    @include e(card-trigger-text) {
-        font-size: var(--cp-font-size-sm);
-        text-align: center;
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    // ===== 变体 =====
-
-    // Outline (实线边框)
-    @include m(outline) {
-        .cp-upload__dragger,
-        .cp-upload__card-trigger {
-            border-style: solid;
-        }
-    }
-
-    // Dashed (虚线边框 - 默认)
-    @include m(dashed) {
-        .cp-upload__dragger,
-        .cp-upload__card-trigger {
-            border-style: dashed;
-        }
-    }
-
-    // Filled (填充背景)
-    @include m(filled) {
-        .cp-upload__dragger,
-        .cp-upload__card-trigger {
-            border-style: solid;
-            background: var(--cp-bg-elevated);
-        }
-    }
-
-    // Ghost (无边框)
-    @include m(ghost) {
-        .cp-upload__dragger,
-        .cp-upload__card-trigger {
-            border-color: transparent;
-            background: transparent;
-
-            &:hover {
-                background: var(--cp-state-hover);
-                border-color: var(--cp-border);
-            }
-        }
-    }
-
-    // ===== 形状 =====
-    @include m(shape-no-clip) {
-        .cp-upload__dragger,
-        .cp-upload__card-trigger,
-        .cp-upload__card,
-        .cp-upload__item {
-            clip-path: none;
-            border-radius: 0;
-        }
-    }
-
-    @include m(shape-round) {
-        .cp-upload__dragger,
-        .cp-upload__card-trigger,
-        .cp-upload__card,
-        .cp-upload__item {
-            clip-path: none;
-            border-radius: var(--cp-radius-lg);
-        }
-    }
-
-    // ===== 拖拽 hover =====
-    @include when(dragover) {
-        .cp-upload__dragger {
-            border-color: var(--cp-upload-color);
-            box-shadow: inset 0 0 30px color-mix(in srgb, var(--cp-upload-color), transparent 70%), 0 0 15px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
-            background: color-mix(in srgb, var(--cp-upload-color), transparent 95%);
-        }
-
-        .cp-upload__card-trigger {
-            border-color: var(--cp-upload-color);
-            color: var(--cp-upload-color);
-            box-shadow: inset 0 0 20px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
-
-            svg {
-                transform: scale(1.1);
-            }
-        }
-
-        .cp-upload__drag-icon {
-            color: var(--cp-upload-color);
-            opacity: 1;
-            transform: translateY(-4px);
-        }
-    }
-
-    // ===== Hover 和 Focus =====
-    &:not(.is-disabled) {
-        .cp-upload__dragger:hover {
-            border-color: var(--cp-upload-color);
-            box-shadow: inset 0 0 15px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
-        }
-
-        .cp-upload__dragger:hover .cp-upload__drag-icon {
-            color: var(--cp-upload-color);
-            opacity: 0.8;
-        }
-    }
-
-    // ===== 禁用 =====
-    @include when(disabled) {
-        .cp-upload__trigger,
-        .cp-upload__dragger {
-            cursor: not-allowed;
-            opacity: 0.5;
-            filter: grayscale(0.5);
-        }
-    }
-
-    // ===== 减淡模式 (Dimmed Mode) =====
-    // 平常以无色彩的默认形态展示，hover / 激活时显示主题色
-    @include when(dimmed) {
-        &:not(.is-dragover) {
-            .cp-upload__dragger:not(:hover) {
-                border-color: var(--cp-border);
-                box-shadow: none;
-                background: var(--cp-upload-bg);
-            }
-        }
-
-        .cp-upload__card-trigger:not(:hover) {
-            border-color: var(--cp-border);
-            color: var(--cp-text-muted);
-            box-shadow: none;
-        }
-
-        .cp-upload__item:not(:hover) {
-            border-color: var(--cp-border);
-        }
-
-        .cp-upload__card:not(:hover) {
-            border-color: var(--cp-border);
-        }
-    }
-
-
-    // ===== 文件列表 =====
-    @include e(list) {
-        display: flex;
-        flex-direction: column;
-        gap: var(--cp-spacing-xs);
-    }
-
-    // List 模式为 picture-card 时使用 grid
-    @include m(list-picture-card) {
-        .cp-upload__list {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: var(--cp-spacing-md);
-        }
-
-        // 触发器和卡片在同一行
-        display: inline-flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: var(--cp-spacing-md);
-        align-items: flex-start;
-    }
-
-    // ===== 文件项 (text / picture) =====
-    @include e(item) {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        padding: var(--cp-spacing-sm) var(--cp-spacing-md);
-        border: 1px solid var(--cp-border);
-        background: var(--cp-bg-elevated);
-        font-size: var(--cp-font-size-sm);
-        transition: all 0.25s ease;
-        position: relative;
-        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
-
-        &:hover {
-            border-color: var(--cp-upload-color);
-
-            .cp-upload__remove {
-                opacity: 1;
-            }
-        }
-
-        &.is-success {
-            border-color: var(--cp-upload-success-color);
-        }
-
-        &.is-error {
-            border-color: var(--cp-color-error);
-        }
-    }
-
-    // Picture 模式的行布局
-    @include e(item--picture) {
-        flex-direction: row;
-        align-items: center;
-        gap: var(--cp-spacing-md);
-    }
-
-    @include e(item-info) {
-        display: flex;
-        align-items: center;
-        gap: var(--cp-spacing-sm);
-        flex: 1;
-        min-width: 0;
-    }
-
-    @include e(file-icon) {
-        width: 16px;
-        height: 16px;
-        color: var(--cp-text-muted);
-        flex-shrink: 0;
-    }
-
-    @include e(file-name) {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: var(--cp-text-secondary);
-    }
-
-    @include e(file-size) {
-        flex-shrink: 0;
-        color: var(--cp-text-muted);
-        font-size: var(--cp-font-size-sm);
-        font-family: var(--cp-font-family-mono);
-    }
-
-    @include e(status-icon) {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-    }
-
-    @include e(status-icon--success) {
-        color: var(--cp-color-success);
-    }
-
-    @include e(status-icon--error) {
-        color: var(--cp-color-error);
-    }
-
-    @include e(remove) {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-        color: var(--cp-text-muted);
-        opacity: 0;
-        transition: all 0.2s ease;
-        flex-shrink: 0;
-        margin-left: auto;
-
-        svg {
-            width: 14px;
-            height: 14px;
-        }
-
-        &:hover {
-            color: var(--cp-color-error);
-        }
-    }
-
-    @include e(actions) {
-        display: flex;
-        align-items: center;
-        gap: var(--cp-spacing-sm);
-        flex-shrink: 0;
-    }
-
-    @include e(progress) {
-        width: 100%;
-    }
-
-    @include e(thumbnail) {
-        flex-shrink: 0;
-    }
-
-    @include e(file-placeholder) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 48px;
-        height: 48px;
-        background: var(--cp-bg-deep);
-        color: var(--cp-text-muted);
-
-        svg {
-            width: 24px;
-            height: 24px;
-        }
-    }
-
-    // ===== Picture-card 卡片 =====
-    @include e(card) {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--cp-upload-card-width, var(--cp-upload-card-size));
-        height: var(--cp-upload-card-height, var(--cp-upload-card-size));
-        border: 1px solid var(--cp-border);
-        background: var(--cp-bg-elevated);
-        overflow: hidden;
-        transition: all 0.3s ease;
-        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
-
-        &:hover {
-            border-color: var(--cp-upload-color);
-
-            .cp-upload__card-actions {
-                opacity: 1;
-            }
-        }
-
-        &.is-success {
-            border-color: var(--cp-upload-success-color);
-        }
-
-        &.is-error {
-            border-color: var(--cp-color-error);
-        }
-
-        // CpImage 铺满
-        .cp-image {
-            position: absolute;
-            inset: 0;
-        }
-    }
-
-    // 单图内联预览：卡片充当触发器
-    @include e(card--inline) {
-        cursor: pointer;
-    }
-
-    @include e(card-file) {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: var(--cp-spacing-xs);
-        color: var(--cp-text-muted);
-        padding: var(--cp-spacing-sm);
-
-        svg {
-            width: 32px;
-            height: 32px;
-        }
-
-        span {
-            font-size: 11px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            max-width: 100%;
-        }
-    }
-
-    @include e(card-progress) {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: color-mix(in srgb, var(--cp-bg-deep) 75%, transparent);
-        backdrop-filter: blur(2px);
-        z-index: 2;
-    }
-
-    @include e(card-actions) {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: var(--cp-spacing-md);
-        background: color-mix(in srgb, var(--cp-bg-deep) 70%, transparent);
-        opacity: 0;
-        transition: opacity 0.25s ease;
-        z-index: 3;
-    }
-}
-
-// ===== 表单集成：label 顶部对齐 =====
-.cp-form-item:has(.cp-upload) {
-    align-items: flex-start;
-
-    > .cp-form-item__label {
-        padding-top: var(--cp-spacing-sm);
-    }
-}
+// CpUpload 组件样式
+// 赛博朋克/机甲风格
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+@include b(upload) {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-md);
+    width: 100%;
+
+    // ===== CSS 变量 =====
+    --cp-upload-color: var(--cp-color-primary);
+    --cp-upload-border-color: var(--cp-border);
+    --cp-upload-bg: transparent;
+    --cp-upload-card-size: 120px;
+    --cp-upload-success-color: var(--cp-color-success);
+
+    // ===== 颜色类型 =====
+    @include m(primary) { --cp-upload-color: var(--cp-color-primary); --cp-upload-border-color: var(--cp-color-primary); }
+    @include m(success) { --cp-upload-color: var(--cp-color-success); --cp-upload-border-color: var(--cp-color-success); }
+    @include m(warning) { --cp-upload-color: var(--cp-color-warning); --cp-upload-border-color: var(--cp-color-warning); }
+    @include m(error) { --cp-upload-color: var(--cp-color-error); --cp-upload-border-color: var(--cp-color-error); }
+    @include m(info) { --cp-upload-color: var(--cp-color-info); --cp-upload-border-color: var(--cp-color-info); }
+
+    // ===== 隐藏 input =====
+    @include e(input) {
+        display: none;
+    }
+
+    // ===== 触发器 =====
+    @include e(trigger) {
+        display: inline-flex;
+        cursor: pointer;
+    }
+
+    // ===== 拖拽区 =====
+    @include e(dragger) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 160px;
+        padding: var(--cp-spacing-xl);
+        border: 2px dashed var(--cp-upload-border-color);
+        background: var(--cp-upload-bg);
+        transition: all 0.3s ease;
+
+        // 切角
+        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
+    }
+
+    // ===== 拖拽区内容 =====
+    @include e(drag-content) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--cp-spacing-md);
+        color: var(--cp-text-muted);
+        user-select: none;
+    }
+
+    @include e(drag-icon) {
+        width: 48px;
+        height: 48px;
+        color: var(--cp-text-muted);
+        opacity: 0.6;
+        transition: all 0.3s ease;
+    }
+
+    @include e(drag-text) {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25em;
+        font-size: var(--cp-font-size-md);
+    }
+
+    // ===== Picture-card 触发卡片 =====
+    @include e(card-trigger) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--cp-spacing-xs);
+        width: var(--cp-upload-card-width, var(--cp-upload-card-size));
+        height: var(--cp-upload-card-height, var(--cp-upload-card-size));
+        border: 2px dashed var(--cp-upload-border-color);
+        background: var(--cp-upload-bg);
+        color: var(--cp-text-muted);
+        transition: all 0.3s ease;
+        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
+
+        svg {
+            width: 28px;
+            height: 28px;
+            transition: transform 0.3s ease;
+        }
+
+        &:hover {
+            border-color: var(--cp-upload-color);
+            color: var(--cp-upload-color);
+            box-shadow: inset 0 0 20px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
+
+            svg {
+                transform: scale(1.1);
+            }
+        }
+    }
+
+    @include e(card-trigger-text) {
+        font-size: var(--cp-font-size-sm);
+        text-align: center;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // ===== 变体 =====
+
+    // Outline (实线边框)
+    @include m(outline) {
+        .cp-upload__dragger,
+        .cp-upload__card-trigger {
+            border-style: solid;
+        }
+    }
+
+    // Dashed (虚线边框 - 默认)
+    @include m(dashed) {
+        .cp-upload__dragger,
+        .cp-upload__card-trigger {
+            border-style: dashed;
+        }
+    }
+
+    // Filled (填充背景)
+    @include m(filled) {
+        .cp-upload__dragger,
+        .cp-upload__card-trigger {
+            border-style: solid;
+            background: var(--cp-bg-elevated);
+        }
+    }
+
+    // Ghost (无边框)
+    @include m(ghost) {
+        .cp-upload__dragger,
+        .cp-upload__card-trigger {
+            border-color: transparent;
+            background: transparent;
+
+            &:hover {
+                background: var(--cp-state-hover);
+                border-color: var(--cp-border);
+            }
+        }
+    }
+
+    // ===== 形状 =====
+    @include m(shape-no-clip) {
+        .cp-upload__dragger,
+        .cp-upload__card-trigger,
+        .cp-upload__card,
+        .cp-upload__item {
+            clip-path: none;
+            border-radius: 0;
+        }
+    }
+
+    @include m(shape-round) {
+        .cp-upload__dragger,
+        .cp-upload__card-trigger,
+        .cp-upload__card,
+        .cp-upload__item {
+            clip-path: none;
+            border-radius: var(--cp-radius-lg);
+        }
+    }
+
+    // ===== 拖拽 hover =====
+    @include when(dragover) {
+        .cp-upload__dragger {
+            border-color: var(--cp-upload-color);
+            box-shadow: inset 0 0 30px color-mix(in srgb, var(--cp-upload-color), transparent 70%), 0 0 15px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
+            background: color-mix(in srgb, var(--cp-upload-color), transparent 95%);
+        }
+
+        .cp-upload__card-trigger {
+            border-color: var(--cp-upload-color);
+            color: var(--cp-upload-color);
+            box-shadow: inset 0 0 20px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
+
+            svg {
+                transform: scale(1.1);
+            }
+        }
+
+        .cp-upload__drag-icon {
+            color: var(--cp-upload-color);
+            opacity: 1;
+            transform: translateY(-4px);
+        }
+    }
+
+    // ===== Hover 和 Focus =====
+    &:not(.is-disabled) {
+        .cp-upload__dragger:hover {
+            border-color: var(--cp-upload-color);
+            box-shadow: inset 0 0 15px color-mix(in srgb, var(--cp-upload-color), transparent 80%);
+        }
+
+        .cp-upload__dragger:hover .cp-upload__drag-icon {
+            color: var(--cp-upload-color);
+            opacity: 0.8;
+        }
+    }
+
+    // ===== 禁用 =====
+    @include when(disabled) {
+        .cp-upload__trigger,
+        .cp-upload__dragger {
+            cursor: not-allowed;
+            opacity: 0.5;
+            filter: grayscale(0.5);
+        }
+    }
+
+    // ===== 减淡模式 (Dimmed Mode) =====
+    // 平常以无色彩的默认形态展示，hover / 激活时显示主题色
+    @include when(dimmed) {
+        &:not(.is-dragover) {
+            .cp-upload__dragger:not(:hover) {
+                border-color: var(--cp-border);
+                box-shadow: none;
+                background: var(--cp-upload-bg);
+            }
+        }
+
+        .cp-upload__card-trigger:not(:hover) {
+            border-color: var(--cp-border);
+            color: var(--cp-text-muted);
+            box-shadow: none;
+        }
+
+        .cp-upload__item:not(:hover) {
+            border-color: var(--cp-border);
+        }
+
+        .cp-upload__card:not(:hover) {
+            border-color: var(--cp-border);
+        }
+    }
+
+
+    // ===== 文件列表 =====
+    @include e(list) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cp-spacing-xs);
+    }
+
+    // List 模式为 picture-card 时使用 grid
+    @include m(list-picture-card) {
+        .cp-upload__list {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            gap: var(--cp-spacing-md);
+        }
+
+        // 触发器和卡片在同一行
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--cp-spacing-md);
+        align-items: flex-start;
+    }
+
+    // ===== 文件项 (text / picture) =====
+    @include e(item) {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+        border: 1px solid var(--cp-border);
+        background: var(--cp-bg-elevated);
+        font-size: var(--cp-font-size-sm);
+        transition: all 0.25s ease;
+        position: relative;
+        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
+
+        &:hover {
+            border-color: var(--cp-upload-color);
+
+            .cp-upload__remove {
+                opacity: 1;
+            }
+        }
+
+        &.is-success {
+            border-color: var(--cp-upload-success-color);
+        }
+
+        &.is-error {
+            border-color: var(--cp-color-error);
+        }
+    }
+
+    // Picture 模式的行布局
+    @include e(item--picture) {
+        flex-direction: row;
+        align-items: center;
+        gap: var(--cp-spacing-md);
+    }
+
+    @include e(item-info) {
+        display: flex;
+        align-items: center;
+        gap: var(--cp-spacing-sm);
+        flex: 1;
+        min-width: 0;
+    }
+
+    @include e(file-icon) {
+        width: 16px;
+        height: 16px;
+        color: var(--cp-text-muted);
+        flex-shrink: 0;
+    }
+
+    @include e(file-name) {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--cp-text-secondary);
+    }
+
+    @include e(file-size) {
+        flex-shrink: 0;
+        color: var(--cp-text-muted);
+        font-size: var(--cp-font-size-sm);
+        font-family: var(--cp-font-family-mono);
+    }
+
+    @include e(status-icon) {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
+
+    @include e(status-icon--success) {
+        color: var(--cp-color-success);
+    }
+
+    @include e(status-icon--error) {
+        color: var(--cp-color-error);
+    }
+
+    @include e(remove) {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        color: var(--cp-text-muted);
+        opacity: 0;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+        margin-left: auto;
+
+        svg {
+            width: 14px;
+            height: 14px;
+        }
+
+        &:hover {
+            color: var(--cp-color-error);
+        }
+    }
+
+    @include e(actions) {
+        display: flex;
+        align-items: center;
+        gap: var(--cp-spacing-sm);
+        flex-shrink: 0;
+    }
+
+    @include e(progress) {
+        width: 100%;
+    }
+
+    @include e(thumbnail) {
+        flex-shrink: 0;
+    }
+
+    @include e(file-placeholder) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        background: var(--cp-bg-deep);
+        color: var(--cp-text-muted);
+
+        svg {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    // ===== Picture-card 卡片 =====
+    @include e(card) {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--cp-upload-card-width, var(--cp-upload-card-size));
+        height: var(--cp-upload-card-height, var(--cp-upload-card-size));
+        border: 1px solid var(--cp-border);
+        background: var(--cp-bg-elevated);
+        overflow: hidden;
+        transition: all 0.3s ease;
+        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
+
+        &:hover {
+            border-color: var(--cp-upload-color);
+
+            .cp-upload__card-actions {
+                opacity: 1;
+            }
+        }
+
+        &.is-success {
+            border-color: var(--cp-upload-success-color);
+        }
+
+        &.is-error {
+            border-color: var(--cp-color-error);
+        }
+
+        // CpImage 铺满
+        .cp-image {
+            position: absolute;
+            inset: 0;
+        }
+    }
+
+    // 单图内联预览：卡片充当触发器
+    @include e(card--inline) {
+        cursor: pointer;
+    }
+
+    @include e(card-file) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--cp-spacing-xs);
+        color: var(--cp-text-muted);
+        padding: var(--cp-spacing-sm);
+
+        svg {
+            width: 32px;
+            height: 32px;
+        }
+
+        span {
+            font-size: 11px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            max-width: 100%;
+        }
+    }
+
+    @include e(card-progress) {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: color-mix(in srgb, var(--cp-bg-deep) 75%, transparent);
+        backdrop-filter: blur(2px);
+        z-index: 2;
+    }
+
+    @include e(card-actions) {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--cp-spacing-md);
+        background: color-mix(in srgb, var(--cp-bg-deep) 70%, transparent);
+        opacity: 0;
+        transition: opacity 0.25s ease;
+        z-index: 3;
+    }
+}
+
+// ===== 表单集成：label 顶部对齐 =====
+.cp-form-item:has(.cp-upload) {
+    align-items: flex-start;
+
+    > .cp-form-item__label {
+        padding-top: var(--cp-spacing-sm);
+    }
+}