@liuzengwei/element-ui 2.15.5-xn.49 → 2.15.5-xn.51

package/packages/theme-chalk/lib/timeline-item.css

@@ -1 +1 @@
-.el-timeline-item{position:relative;padding-bottom:20px}.el-timeline-item__wrapper{position:relative;padding-left:28px;top:-3px}.el-timeline-item__tail{position:absolute;left:4px;height:100%;border-left:2px solid #E4E7ED}.el-timeline-item__icon{color:#FFF;font-size:13px}.el-timeline-item__node{position:absolute;background-color:#E4E7ED;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-timeline-item__node--normal{left:-1px;width:12px;height:12px}.el-timeline-item__node--large{left:-2px;width:14px;height:14px}.el-timeline-item__node--primary{background-color:#4885F8}.el-timeline-item__node--success{background-color:#1EBD44}.el-timeline-item__node--warning{background-color:#FF7D00}.el-timeline-item__node--danger{background-color:#F53F3F}.el-timeline-item__node--info{background-color:#909399}.el-timeline-item__dot{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-timeline-item__content{color:#303133}.el-timeline-item__timestamp{color:#909399;line-height:1;font-size:13px}.el-timeline-item__timestamp.is-top{margin-bottom:8px;padding-top:4px}.el-timeline-item__timestamp.is-bottom{margin-top:8px}
+.el-timeline-item__node,.el-timeline-item__node--primary{background-color:#4885F8}.el-timeline-item{position:relative;padding-bottom:20px}.el-timeline-item__wrapper{position:relative;padding-left:25px;top:-3px}.el-timeline-item__tail{position:absolute;left:2.5px;height:100%;border-left:1px solid #4885F8}.el-timeline-item__icon{color:#FFF;font-size:13px}.el-timeline-item__node{position:absolute;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-shadow:0 0 0 2px #FFF;box-shadow:0 0 0 2px #FFF}.el-timeline-item__node--normal{left:-1px;width:8px;height:8px}.el-timeline-item__node--large{left:-3px;width:12px;height:12px}.el-timeline-item__node--success{background-color:#1EBD44}.el-timeline-item__node--warning{background-color:#FF7D00}.el-timeline-item__node--danger{background-color:#F53F3F}.el-timeline-item__node--info{background-color:#909399}.el-timeline-item__dot{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-timeline-item__content{color:#303133}.el-timeline-item__timestamp{color:#909399;line-height:1;font-size:13px}.el-timeline-item__timestamp.is-top{margin-bottom:8px;padding-top:4px}.el-timeline-item__timestamp.is-bottom{margin-top:8px}

package/packages/theme-chalk/src/common/var.scss

@@ -948,9 +948,9 @@ $--main-padding: 20px !default;
 
 /* Timeline
 --------------------------*/
-$--timeline-node-size-normal: 12px !default;
-$--timeline-node-size-large: 14px !default;
-$--timeline-node-color: $--border-color-light !default;
+$--timeline-node-size-normal: 8px !default;
+$--timeline-node-size-large: 12px !default;
+$--timeline-node-color: $--color-primary !default;
 
 /* Backtop
 --------------------------*/

package/packages/theme-chalk/src/file-preview.scss

@@ -0,0 +1,138 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(file-preview) {
+  @include e(list) {
+    display: flex;
+    flex-wrap: wrap;
+    margin: -4px;
+  }
+
+  @include e(item) {
+    width: 80px;
+    height: 80px;
+    margin: 4px;
+    border-radius: $--border-radius-base;
+    cursor: pointer;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+
+    @include m(image) {
+      .el-image {
+        width: 100%;
+        height: 100%;
+        border-radius: $--border-radius-base;
+      }
+    }
+
+    @include m(video) {
+      .el-image {
+        width: 100%;
+        height: 100%;
+        border-radius: $--border-radius-base;
+      }
+    }
+
+    @include m(file) {
+      border: 1px solid $--border-color-base;
+      box-sizing: border-box;
+      padding: 8px 6px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: $--color-text-secondary;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: $--color-primary;
+        box-shadow: 0 2px 8px rgba($--color-primary, 0.2);
+      }
+    }
+  }
+
+  @include e(image) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(error) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: $--background-color-base;
+    color: $--color-text-placeholder;
+    font-size: 24px;
+  }
+
+  @include e(play-icon) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 20px;
+    pointer-events: none;
+    transition: all 0.3s;
+
+    .el-file-preview__item:hover & {
+      background-color: rgba(0, 0, 0, 0.7);
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+  }
+
+  @include e(icon) {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  @include e(name) {
+    width: 100%;
+    margin: 6px 0 0;
+    padding: 0;
+    font-size: $--font-size-extra-small;
+    line-height: 1.4;
+    word-break: break-all;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+    color: inherit;
+}
+
+@include e(name-main) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include e(name-ext) {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  @include e(video-wrapper) {
+    width: 100%;
+  }
+
+  @include e(video) {
+    width: 100%;
+    max-height: 480px;
+    background-color: #000;
+  }
+}
+

package/packages/theme-chalk/src/icon.scss

@@ -1193,3 +1193,39 @@
 .el-icon-point:before {
   content: "\e654";
 }
+
+.el-icon-xianniu:before {
+  content: "\e630";
+}
+
+.el-icon-zip:before {
+  content: "\e62f";
+}
+
+.el-icon-image:before {
+  content: "\e62e";
+}
+
+.el-icon-pdf:before {
+  content: "\e628";
+}
+
+.el-icon-audio:before {
+  content: "\e62d";
+}
+
+.el-icon-ppt:before {
+  content: "\e62c";
+}
+
+.el-icon-video:before {
+  content: "\e62b";
+}
+
+.el-icon-word:before {
+  content: "\e62a";
+}
+
+.el-icon-excel:before {
+  content: "\e629";
+}

package/packages/theme-chalk/src/index.scss

@@ -94,3 +94,4 @@
 @import "./trigger.scss";
 @import "./lazy-load.scss";
 @import "./segmented.scss";
+@import "./file-preview.scss";

package/packages/theme-chalk/src/timeline-item.scss

@@ -7,15 +7,15 @@
 
   @include e(wrapper) {
     position: relative;
-    padding-left: 28px;
+    padding-left: 25px;
     top: -3px;
   }
 
   @include e(tail) {
     position: absolute;
-    left: 4px;
+    left: 2.5px;
     height: 100%;
-    border-left: 2px solid $--timeline-node-color;
+    border-left: 1px solid $--timeline-node-color;
   }
 
   @include e(icon) {
@@ -30,6 +30,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    box-shadow: 0 0 0 2px $--color-white;
 
     @include m(normal) {
       left: -1px;
@@ -37,7 +38,7 @@
       height: $--timeline-node-size-normal;
     }
     @include m(large) {
-      left: -2px;
+      left: -3px;
       width: $--timeline-node-size-large;
       height: $--timeline-node-size-large;
     }

package/src/index.js

@@ -98,6 +98,7 @@ import AreaPicker from '../packages/area-picker/index.js';
 import Trigger from '../packages/trigger/index.js';
 import LazyLoad from '../packages/lazy-load/index.js';
 import Segmented from '../packages/segmented/index.js';
+import FilePreview from '../packages/file-preview/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -195,6 +196,7 @@ const components = [
   Trigger,
   LazyLoad,
   Segmented,
+  FilePreview,
   CollapseTransition
 ];
 
@@ -230,7 +232,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.5-xn.49',
+  version: '2.15.5-xn.51',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -332,5 +334,6 @@ export default {
   AreaPicker,
   Trigger,
   LazyLoad,
-  Segmented
+  Segmented,
+  FilePreview
 };

package/types/element-ui.d.ts

@@ -4,6 +4,7 @@
 import { ElTrigger } from './trigger'
 import { ElLazyLoad } from './lazy-load'
 import { ElSegmented } from './segmented'
+import { ElFilePreview } from './file-preview'
 
 export class SelectableTag extends ElSelectableTag {}
 
@@ -18,3 +19,6 @@ export class LazyLoad extends ElLazyLoad {}
 
 /** Segmented Component */
 export class Segmented extends ElSegmented {}
+
+/** FilePreview Component */
+export class FilePreview extends ElFilePreview {}

package/types/file-preview.d.ts

@@ -0,0 +1,32 @@
+import { ElementUIComponent } from './component'
+
+/** 文件对象类型 */
+export interface FileItem {
+  /** 文件 URL */
+  url?: string
+  /** 文件名称 */
+  name?: string
+  [key: string]: any
+}
+
+/** FilePreview Component */
+export declare class ElFilePreview extends ElementUIComponent {
+  /** 文件列表 */
+  fileList: FileItem[] | string[]
+
+  /** URL 字段名 */
+  urlKey: string
+
+  /** 文件名字段名 */
+  nameKey: string
+
+  /** 是否启用图片预览 */
+  previewEnabled: boolean
+
+  /** 视频快照处理函数 */
+  videoSnapshotHandler: ((url: string) => string) | null
+
+  /** 视频对话框标题 */
+  videoDialogTitle: string
+}
+