@ccn-ui-kit/upload 0.1.2

package/style/index.scss

@@ -0,0 +1,241 @@
+.ui-upload {
+  display: inline-block;
+
+  &__input {
+    display: none;
+  }
+
+  // 选择触发器（默认内联，点击弹出文件选择）
+  &__trigger {
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: top;
+
+    // picture-card 模式的触发卡片
+    &--card {
+      width: 96px;
+      height: 96px;
+      border: 1px dashed #c0c4cc;
+      border-radius: var(--ui-border-radius-base);
+      transition: border-color 0.2s;
+
+      &:hover {
+        border-color: var(--ui-color-primary);
+      }
+    }
+  }
+
+  // 拖拽区域
+  &__drag {
+    display: block;
+    min-width: 280px;
+    padding: 32px 48px;
+    border: 1px dashed #c0c4cc;
+    border-radius: var(--ui-border-radius-base);
+    text-align: center;
+    color: var(--ui-color-info);
+    background-color: rgba(0, 0, 0, 0.02);
+    transition: border-color 0.2s, color 0.2s;
+
+    &.is-dragging {
+      border-color: var(--ui-color-primary);
+      color: var(--ui-color-primary);
+    }
+
+    &-inner p {
+      margin: 8px 0 0;
+      font-size: var(--ui-font-size-base);
+    }
+  }
+
+  // 文件列表
+  &__list {
+    margin: 8px 0 0;
+    padding: 0;
+    list-style: none;
+
+    &--picture-card {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+  }
+
+  &__file {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border: 1px solid #e4e7ed;
+    border-radius: var(--ui-border-radius-base);
+    font-size: var(--ui-font-size-base);
+    overflow: hidden;
+
+    &.is-success {
+      border-color: #e1f3d8;
+    }
+
+    &.is-fail {
+      border-color: #fde2e2;
+    }
+  }
+
+  // 非卡片列表：相邻文件之间的间距
+  .ui-upload__list--text .ui-upload__file + .ui-upload__file,
+  .ui-upload__list--picture .ui-upload__file + .ui-upload__file {
+    margin-top: 6px;
+  }
+
+  &__thumb {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  &__file-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--ui-color-info);
+    flex-shrink: 0;
+  }
+
+  &__file-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__file-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #606266;
+  }
+
+  &__file-size {
+    font-size: 12px;
+    color: var(--ui-color-info);
+  }
+
+  &__file-status {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    .is-success {
+      color: var(--ui-color-success);
+    }
+
+    .is-danger {
+      color: var(--ui-color-danger);
+    }
+  }
+
+  &__file-percent {
+    font-size: 12px;
+    color: var(--ui-color-primary);
+  }
+
+  &__file-remove {
+    flex-shrink: 0;
+    color: var(--ui-color-info);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s, color 0.2s;
+
+    &:hover {
+      color: var(--ui-color-danger);
+    }
+  }
+
+  // 悬停显示移除按钮（非卡片列表）
+  .ui-upload__file:hover .ui-upload__file-remove {
+    opacity: 1;
+  }
+
+  // 上传进度条
+  &__progress {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background: #e4e7ed;
+  }
+
+  &__progress-bar {
+    height: 100%;
+    background: var(--ui-color-primary);
+    transition: width 0.2s;
+  }
+
+  // picture-card 卡片
+  &__file.is-card {
+    display: block;
+    width: 96px;
+    height: 96px;
+    padding: 0;
+    border: 1px solid #e4e7ed;
+    border-radius: var(--ui-border-radius-base);
+    overflow: hidden;
+
+    .ui-upload__thumb {
+      width: 100%;
+      height: 100%;
+    }
+
+    .ui-upload__file-remove {
+      opacity: 1;
+    }
+  }
+
+  &__thumb-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 12px;
+    color: var(--ui-color-info);
+    background: #f5f7fa;
+  }
+
+  &__card-actions {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    .ui-icon {
+      cursor: pointer;
+    }
+  }
+
+  // 卡片悬停显示预览 / 删除
+  .ui-upload__file.is-card:hover .ui-upload__card-actions {
+    opacity: 1;
+  }
+
+  // picture-card 的添加上传卡片
+  &__card-add {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 100%;
+    font-size: 12px;
+    color: var(--ui-color-info);
+  }
+}