y-admin-pro 0.0.1

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

@@ -0,0 +1,479 @@
+@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 {
+  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 {
+    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%;
+    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;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+      background: eleVar('upload-list', 'tool-hover-bg');
+    }
+
+    & + .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-item:hover .ele-upload-tools {
+    bottom: 0;
+    opacity: 1;
+  }
+
+  .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');
+    }
+
+    &:hover {
+      background: eleVar('upload-list', 'del-hover-bg');
+    }
+  }
+
+  /* 进度条 */
+  .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;
+
+    .el-progress-bar__outer {
+      background: hsla(0, 0%, 80%, 0.48);
+    }
+  }
+
+  .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');
+    }
+
+    .ele-upload-tool-text {
+      margin: 0;
+    }
+  }
+
+  /* 上传按钮 */
+  .ele-upload-button {
+    padding: 0;
+    text-align: center;
+    border: eleVar('upload-list', 'btn-border');
+    background: eleVar('upload-list', 'btn-bg');
+    transition: all $transition-base;
+    overflow: visible;
+    cursor: pointer;
+
+    &:hover {
+      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: 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-button-inner {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .ele-upload-icon {
+    color: eleVar('upload-list', 'btn-color');
+    font-size: eleVar('upload-list', 'btn-font-size');
+
+    & > svg {
+      stroke-width: 3;
+    }
+  }
+
+  /* 修改时的文件选择输入框 */
+  .ele-upload-input,
+  .ele-upload-hidden {
+    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-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/packages/ele-upload-list/style/index.ts

@@ -0,0 +1,6 @@
+import 'element-plus/es/components/image/style/index';
+import 'element-plus/es/components/upload/style/index';
+import 'element-plus/es/components/progress/style/index';
+import 'element-plus/es/components/icon/style/index';
+import '../../ele-image-viewer/style/index';
+import './index.scss';

package/packages/ele-upload-list/types.ts

@@ -0,0 +1,78 @@
+/**
+ * 数据类型
+ */
+export interface UploadItem extends Record<keyof any, any> {
+  /** 唯一标识 */
+  key: string | number | symbol;
+  /** 显示的图片地址, 为空时显示文件图标 */
+  url?: string;
+  /** 文件名称 */
+  name?: string;
+  /** 上传状态 */
+  status?: UploadStatus;
+  /** 上传进度, 0 ~ 100 */
+  progress?: number;
+  /** 选择的文件 */
+  file?: File;
+  /** 是否只读 */
+  readonly?: boolean;
+  /** 是否显示缩略图 */
+  thumbnail?: boolean | string;
+}
+
+/**
+ * 上传状态
+ */
+export type UploadStatus = 'uploading' | 'done' | 'exception' | null;
+
+/**
+ * 列表样式
+ */
+export type ListType = 'image' | 'file' | null;
+
+/**
+ * 上传按钮点击前的钩子
+ */
+export type BeforeUploadClick = (e: MouseEvent) => boolean | undefined | void;
+
+/**
+ * 修改按钮点击前的钩子
+ */
+export type BeforeItemEdit = (item: UploadItem) => boolean | undefined | void;
+
+/**
+ * 预览前的钩子
+ */
+export type BeforePreview = (item: UploadItem) => boolean | undefined | void;
+
+/**
+ * 图片文件预读地址
+ */
+export interface ImageObjectUrl {
+  /** 文件 */
+  file: File;
+  /** 预览地址 */
+  url: string;
+}
+
+/**
+ * 修改事件参数
+ */
+export interface EditUploadResult {
+  /** 修改的数据项 */
+  item: UploadItem;
+  /** 新的数据项 */
+  newItem: UploadItem;
+}
+
+/**
+ * 国际化
+ */
+export interface UploadLocale {
+  uploading: string;
+  exception: string;
+  retry: string;
+  remove: string;
+  preview: string;
+  edit: string;
+}