ele-admin-plus 1.2.1-beta.2 → 1.2.1-beta.4

package/es/ele-upload-list/style/index.scss

@@ -1,184 +1,478 @@
 @use '../../style/themes/default.scss' as *;
 @use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-upload-list-var($ele);
 
 .ele-upload-list {
-  font-size: 0;
-  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: eleVar('upload-list', 'gap');
   box-sizing: border-box;
+  max-width: 100%;
+  $inner-radius: calc(#{eleVar('upload-list', 'radius')} - 1px);
 
   .ele-upload-item {
-    width: 100px;
-    height: 100px;
+    flex-shrink: 0;
+    width: eleVar('upload-list', 'width');
+    height: eleVar('upload-list', 'height');
+    padding: eleVar('upload-list', 'padding');
+    border-radius: eleVar('upload-list', 'radius');
+    border: eleVar('upload-list', 'border');
+    box-sizing: border-box;
+    position: relative;
+    user-select: none;
+    overflow: hidden;
     max-width: 100%;
-    font-size: 14px;
-    display: inline-block;
-    margin: 0 12px 12px 0;
-    background: elVar('fill-color', 'light');
-    border: 1px dashed elVar('border-color');
-    border-radius: elVar('border-radius', 'base');
+    cursor: pointer;
+  }
+
+  /* 缩略图片 */
+  .ele-upload-image {
+    width: 100%;
+    height: 100%;
+    display: block;
+    pointer-events: none;
+  }
+
+  /* 缩略图标 */
+  .ele-upload-thumbnail {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: eleVar('upload-list', 'thumbnail-gap');
+    color: eleVar('upload-list', 'thumbnail-color');
+    font-size: eleVar('upload-list', 'thumbnail-font-size');
+    text-align: center;
+  }
+
+  .ele-upload-thumbnail-icon {
+    flex-shrink: 0;
+    color: eleVar('upload-list', 'thumbnail-icon-color');
+    font-size: eleVar('upload-list', 'thumbnail-icon-font-size');
+  }
+
+  .ele-upload-thumbnail-text {
+    width: 100%;
+    overflow: hidden;
+    line-height: 1.15;
+    word-break: break-all;
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  /* 操作按钮 */
+  .ele-upload-tools {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom-left-radius: $inner-radius;
+    border-bottom-right-radius: $inner-radius;
+    background: eleVar('upload-list', 'tool-bg');
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -20px;
+    transition: all $transition-base;
+    box-sizing: border-box;
+    overflow: hidden;
+    opacity: 0;
+    z-index: 3;
+  }
+
+  .ele-upload-tool {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    color: eleVar('upload-list', 'tool-color');
+    font-size: eleVar('upload-list', 'tool-font-size');
+    padding: eleVar('upload-list', 'tool-padding');
+    transition: all $transition-base;
     box-sizing: border-box;
-    vertical-align: top;
     position: relative;
-    overflow: visible;
     cursor: pointer;
 
-    &.ele-draggable {
-      cursor: move;
-    }
-
-    .ele-upload-remove {
-      width: 18px;
-      height: 18px;
-      color: #fff;
-      font-size: 12px;
-      border-bottom-left-radius: 18px;
-      border-top-right-radius: elVar('border-radius', 'base');
-      background: rgba(0, 0, 0, 0.6);
-      position: absolute;
-      top: 0;
-      right: 0;
-      line-height: 1;
-      padding: 2px 0 0 4px;
-      box-sizing: border-box;
-      transition: background-color 0.2s ease-in-out;
-      cursor: pointer;
-      z-index: 2;
-
-      &:hover {
-        background: elVar('color-danger');
-      }
+    &:hover {
+      background: eleVar('upload-list', 'tool-hover-bg');
     }
 
-    & > .el-image {
-      width: 100%;
-      height: 100%;
-      display: block;
-      border-radius: elVar('border-radius', 'base');
+    & + .ele-upload-tool {
+      margin-left: eleVar('upload-list', 'tool-gap');
+
+      &::before {
+        content: '';
+        width: 0px;
+        height: 56%;
+        border-left: 1px solid eleVar('upload-list', 'tool-color');
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -0.5px;
+        margin: auto 0;
+        opacity: 0.6;
+      }
     }
+  }
 
-    .ele-upload-thumbnail {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      color: elVar('text-color', 'secondary');
-      text-align: center;
-      font-size: 22px;
+  .ele-upload-item:hover .ele-upload-tools {
+    bottom: 0;
+    opacity: 1;
+  }
 
-      & > .el-icon {
-        color: elVar('text-color', 'placeholder');
-      }
+  .ele-upload-tool-text {
+    margin-left: 2px;
+  }
+
+  /* 删除按钮 */
+  .ele-upload-remove {
+    flex: none;
+    padding: 0;
+    width: eleVar('upload-list', 'del-size');
+    height: eleVar('upload-list', 'del-size');
+    color: eleVar('upload-list', 'tool-color');
+    font-size: eleVar('upload-list', 'tool-font-size');
+    background: eleVar('upload-list', 'tool-bg');
+    box-shadow: eleVar('upload-list', 'del-shadow');
+    border-top-right-radius: $inner-radius;
+    border-bottom-left-radius: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    line-height: 1;
+    transition: all $transition-base;
+    box-sizing: border-box;
+    cursor: pointer;
+    z-index: 4;
+
+    & > i {
+      margin: eleVar('upload-list', 'del-icon-margin');
     }
 
-    .ele-upload-progress {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.3);
-      border-radius: elVar('border-radius', 'base');
-      z-index: 1;
+    &:hover {
+      background: eleVar('upload-list', 'del-hover-bg');
     }
+  }
 
-    .ele-upload-progress {
-      color: #fff;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      background: rgba(0, 0, 0, 0.68);
-      box-sizing: border-box;
-      padding: 0 6px;
-      line-height: 1;
-
-      .ele-upload-text {
-        margin-bottom: 8px;
-        text-align: center;
-      }
+  /* 进度条 */
+  .ele-upload-progress {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: eleVar('upload-list', 'progress-color');
+    font-size: eleVar('upload-list', 'progress-font-size');
+    padding: eleVar('upload-list', 'progress-padding');
+    background: eleVar('upload-list', 'progress-bg');
+    line-height: 1;
+    position: absolute;
+    top: eleVar('upload-list', 'padding');
+    left: eleVar('upload-list', 'padding');
+    right: eleVar('upload-list', 'padding');
+    bottom: eleVar('upload-list', 'padding');
+    box-sizing: border-box;
 
-      .ele-upload-tools {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-      }
+    .el-progress-bar__outer {
+      background: hsla(0, 0%, 80%, 0.48);
+    }
+  }
 
-      .ele-upload-retry {
-        flex-shrink: 0;
-        font-size: 16px;
-        margin: 8px 3px 0 3px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-      }
+  .ele-upload-text {
+    flex-shrink: 0;
+    margin-bottom: 8px;
+    text-align: center;
+  }
+
+  /* 重试按钮 */
+  .ele-upload-retry {
+    flex: none;
+    width: max-content;
+    margin: 6px auto 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: eleVar('upload-list', 'progress-tool-gap');
+    font-size: eleVar('upload-list', 'progress-tool-font-size');
+    border-radius: eleVar('upload-list', 'progress-tool-radius');
+    padding: eleVar('upload-list', 'progress-tool-padding');
+    background: eleVar('upload-list', 'progress-tool-bg');
+    transition: all $transition-base;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    z-index: 3;
+
+    &:hover {
+      background: eleVar('upload-list', 'progress-tool-hover-bg');
     }
 
-    &.sortable-ghost {
-      opacity: 0;
+    .ele-upload-tool-text {
+      margin: 0;
     }
   }
 
+  /* 上传按钮 */
   .ele-upload-button {
+    padding: 0;
     text-align: center;
-    transition: border-color 0.2s ease-in-out;
+    border: eleVar('upload-list', 'btn-border');
+    background: eleVar('upload-list', 'btn-bg');
+    transition: all $transition-base;
+    overflow: visible;
     cursor: pointer;
 
     &:hover {
-      border-color: elVar('color-primary');
+      border: eleVar('upload-list', 'btn-hover-border');
     }
 
     & > div {
       height: 100%;
       display: block;
+    }
 
-      & > .el-upload {
-        height: 100%;
-        display: flex;
-        cursor: inherit;
-
-        & > .el-upload-dragger {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          border-radius: elVar('border-radius', 'base');
-          background: none;
-          cursor: inherit;
-          border: none;
-          padding: 0;
-
-          &.is-dragover {
-            outline: 1px dashed elVar('color-primary');
-            background: elVar('color-primary', 'light-9');
-          }
-        }
-      }
+    .el-upload {
+      height: 100%;
+      display: flex;
+      cursor: inherit;
+    }
 
-      & > .el-upload-list {
-        display: none;
+    .el-upload-dragger {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: eleVar('upload-list', 'radius');
+      transition: all $transition-base;
+      outline: 1px dashed transparent;
+      background: none;
+      cursor: inherit;
+      border: none;
+      padding: 0;
+
+      &.is-dragover {
+        outline: eleVar('upload-list', 'btn-hover-border');
+        background: eleVar('upload-list', 'btn-drag-bg');
       }
     }
+  }
 
-    .ele-upload-icon {
-      font-size: 22px;
-      color: elVar('text-color', 'secondary');
-      opacity: 0.68;
+  .ele-upload-button-inner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
 
-      & > svg {
-        stroke-width: 3.8;
-      }
+  .ele-upload-icon {
+    color: eleVar('upload-list', 'btn-color');
+    font-size: eleVar('upload-list', 'btn-font-size');
+
+    & > svg {
+      stroke-width: 3;
     }
   }
 
-  &.is-disabled .ele-upload-button {
-    background: elVar('disabled', 'bg-color');
-    border-color: elVar('disabled', 'border-color');
+  /* 修改时的文件选择输入框 */
+  .ele-upload-input {
+    display: none;
+  }
+
+  /* 拖动手柄 */
+  .ele-upload-handle {
+    cursor: move;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2;
+  }
+}
+
+/* 禁用状态 */
+.ele-upload-list.is-disabled {
+  .ele-upload-button {
+    background: eleVar('upload-list', 'btn-disabled-bg');
+    border: eleVar('upload-list', 'btn-disabled-border');
     cursor: not-allowed;
+  }
+
+  .ele-upload-icon {
+    color: eleVar('upload-list', 'btn-disabled-color');
+  }
+}
+
+/* 拖动状态 */
+.ele-upload-item {
+  &.sortable-chosen {
+    background: eleVar('upload-list', 'bg');
+  }
+
+  &.sortable-ghost {
+    opacity: 0;
+  }
+
+  &.sortable-fallback {
+    opacity: 1 !important;
+  }
+}
+
+.ele-upload-list:has(.ele-upload-item.sortable-ghost) {
+  .ele-upload-tools {
+    display: none;
+  }
+
+  .ele-upload-button {
+    pointer-events: none;
+  }
+}
+
+/* 列表文件样式 */
+.ele-upload-list.is-file-list {
+  width: 100%;
+
+  .ele-upload-item {
+    width: 100%;
+    height: eleVar('upload-list', 'file-height');
+    padding: 0 eleVar('upload-list', 'file-padding');
+    display: flex;
+    align-items: center;
+  }
+
+  /* 缩略图标 */
+  .ele-upload-thumbnail {
+    flex: 1;
+    flex-direction: row;
+    justify-content: flex-start;
+    font-size: eleVar('upload-list', 'file-thumbnail-font-size');
+    overflow: hidden;
+    text-align: left;
+  }
+
+  .ele-upload-thumbnail-icon {
+    color: eleVar('upload-list', 'file-thumbnail-icon-color');
+    font-size: eleVar('upload-list', 'file-thumbnail-icon-font-size');
+  }
+
+  .ele-upload-thumbnail-text {
+    flex: 1;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* 操作按钮 */
+  .ele-upload-tools {
+    background: none;
+    position: relative;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    opacity: 1;
+  }
+
+  .ele-upload-item:not(:hover) .ele-upload-tools {
+    display: none;
+  }
+
+  .ele-upload-tool,
+  .ele-upload-remove,
+  .ele-upload-retry {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0 0 0 eleVar('upload-list', 'file-tool-gap');
+    width: eleVar('upload-list', 'file-tool-size');
+    height: eleVar('upload-list', 'file-tool-size');
+    border-radius: eleVar('upload-list', 'file-tool-radius');
+    color: eleVar('upload-list', 'file-tool-color');
+    box-shadow: none;
+    background: none;
+
+    &:hover {
+      color: eleVar('upload-list', 'file-tool-hover-color');
+      background: eleVar('upload-list', 'file-tool-hover-bg');
+    }
+  }
+
+  .ele-upload-tool::before {
+    display: none;
+  }
+
+  .ele-upload-tool-text {
+    display: none;
+  }
+
+  /* 删除按钮 */
+  .ele-upload-remove {
+    position: relative;
+    top: auto;
+    right: auto;
+    margin: eleVar('upload-list', 'file-del-margin');
+
+    & > i {
+      margin: 0;
+    }
+
+    &:hover {
+      color: eleVar('upload-list', 'file-del-hover-color');
+    }
+  }
 
-    .ele-upload-icon {
-      color: elVar('disabled', 'text-color');
+  /* 进度条 */
+  .ele-upload-progress {
+    position: static;
+    flex-direction: row;
+    background: none;
+    padding: 0;
+
+    .el-progress-bar__outer {
+      background: transparent;
     }
   }
+
+  .ele-upload-progress-bar {
+    position: absolute;
+    left: eleVar('upload-list', 'file-padding');
+    right: eleVar('upload-list', 'file-padding');
+    bottom: 0;
+  }
+
+  .ele-upload-text {
+    display: none;
+  }
+
+  /* 上传按钮 */
+  .ele-upload-button {
+    padding: 0;
+    display: block;
+  }
+
+  .ele-upload-icon {
+    font-size: eleVar('upload-list', 'file-btn-font-size');
+  }
+}
+
+/* 触摸设备始终显示操作按钮 */
+@media (pointer: coarse) {
+  .ele-upload-list .ele-upload-item .ele-upload-tools {
+    bottom: 0;
+    opacity: 1;
+  }
+
+  .ele-upload-list.is-file-list .ele-upload-item .ele-upload-tools,
+  .ele-upload-list.is-file-list .ele-upload-item:not(:hover) .ele-upload-tools {
+    bottom: auto;
+    display: flex;
+  }
 }

package/es/ele-upload-list/types.d.ts

@@ -24,17 +24,38 @@ export interface UploadItem extends Record<keyof any, any> {
 export type UploadStatus = 'uploading' | 'done' | 'exception' | null;
 
 /**
- * 图片预览配置
- */
-export interface PreviewOption {
-  /** 是否打开 */
-  visible: boolean;
-  /** 当前图片链接 */
-  current?: string;
-  /** 当前图片索引 */
-  currentIndex: number;
-  /** 图片列表 */
-  images: string[];
+ * 列表样式
+ */
+export type ListType = 'image' | 'file' | null;
+
+/**
+ * 上传按钮点击前的钩子
+ */
+export type BeforeUploadClick = (e: MouseEvent) => boolean | undefined | void;
+
+/**
+ * 修改按钮点击前的钩子
+ */
+export type BeforeItemEdit = (item: UploadItem) => boolean | undefined | void;
+
+/**
+ * 图片文件预读地址
+ */
+export interface ImageObjectUrl {
+  /** 文件 */
+  file: File;
+  /** 预览地址 */
+  url: string;
+}
+
+/**
+ * 修改事件参数
+ */
+export interface EditUploadResult {
+  /** 修改的数据项 */
+  item: UploadItem;
+  /** 新的数据项 */
+  newItem: UploadItem;
 }
 
 /**
@@ -44,4 +65,7 @@ export interface UploadLocale {
   uploading: string;
   exception: string;
   retry: string;
+  remove: string;
+  preview: string;
+  edit: string;
 }