ele-admin-plus 1.0.2 → 1.1.0

package/es/ele-file-list/components/file-table-item.js

@@ -1,8 +1,8 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, createCommentVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeStyle, createTextVNode, createBlock, withCtx, createVNode } from "vue";
-import { ElDropdown, ElDropdownMenu } from "element-plus";
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createElementVNode, createCommentVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeStyle, createTextVNode, createBlock, mergeProps, createSlots, withCtx } from "vue";
+import EleDropdown from "../../ele-dropdown/index";
 const _sfc_main = defineComponent({
   name: "FileTableItem",
-  components: { ElDropdown, ElDropdownMenu },
+  components: { EleDropdown },
   props: {
     // 数据
     item: {
@@ -18,7 +18,11 @@ const _sfc_main = defineComponent({
     // 后缀对应的图标
     icons: Array,
     // 自定义列配置
-    columns: Array
+    columns: Array,
+    // 右键菜单
+    contextMenus: Array,
+    // 右键菜单属性
+    contextMenuProps: Object
   },
   emits: {
     click: (_item) => true,
@@ -43,6 +47,9 @@ const _sfc_main = defineComponent({
     });
     const icon = computed(() => {
       var _a, _b, _c;
+      if (props.item.thumbnail) {
+        return props.item.thumbnail;
+      }
       if (!props.icons) {
         return;
       }
@@ -118,8 +125,7 @@ const _hoisted_6 = {
   class: "ele-file-list-item-tools"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ElDropdownMenu = resolveComponent("ElDropdownMenu");
-  const _component_ElDropdown = resolveComponent("ElDropdown");
+  const _component_EleDropdown = resolveComponent("EleDropdown");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass([
       "ele-file-list-item",
@@ -146,8 +152,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("div", _hoisted_3, [
           createElementVNode("img", {
             src: _ctx.icon,
+            class: normalizeClass({ "ele-file-list-item-image": !!_ctx.item.thumbnail }),
             onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
-          }, null, 8, _hoisted_4),
+          }, null, 10, _hoisted_4),
           createElementVNode("div", {
             title: _ctx.item.name,
             class: "ele-file-list-item-title",
@@ -174,32 +181,32 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ], 4);
       }), 128))
     ], 32),
-    _ctx.$slots.contextMenu ? (openBlock(), createBlock(_component_ElDropdown, {
-      key: 0,
+    _ctx.contextMenus || _ctx.$slots.contextMenu ? (openBlock(), createBlock(_component_EleDropdown, mergeProps({ key: 0 }, _ctx.contextMenuProps, {
       ref: "dropdownRef",
       trigger: "click",
       placement: "bottom-start",
       popperClass: "ele-file-list-item-context",
       class: "ele-file-list-item-dropdown",
+      items: _ctx.contextMenus,
       onCommand: _ctx.onItemContextMenu,
       onVisibleChange: _ctx.onContextVisibleChange
-    }, {
-      dropdown: withCtx(() => [
-        createVNode(_component_ElDropdownMenu, null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "contextMenu", { item: _ctx.item })
-          ]),
-          _: 3
-        })
-      ]),
+    }), createSlots({
       default: withCtx(() => [
         createElementVNode("div", {
           onClick: _cache[4] || (_cache[4] = withModifiers(() => {
           }, ["stop"]))
         })
       ]),
-      _: 3
-    }, 8, ["onCommand", "onVisibleChange"])) : createCommentVNode("", true)
+      _: 2
+    }, [
+      _ctx.$slots.contextMenu ? {
+        name: "dropdownMenu",
+        fn: withCtx(() => [
+          renderSlot(_ctx.$slots, "contextMenu", { item: _ctx.item })
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["items", "onCommand", "onVisibleChange"])) : createCommentVNode("", true)
   ], 2);
 }
 const fileTableItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/ele-file-list/components/file-table.d.ts

@@ -1,9 +1,6 @@
 import type { PropType, Ref } from 'vue';
-import type { ElDropdown } from 'element-plus';
-import type { IconItem, FileItem, ColumnItem, ItemContextMenuOption, SelectionType } from '../types';
-import type TableItemType from "./file-table-item";
-export type TableItemInstance = InstanceType<typeof TableItemType>;
-declare const _sfc_main: import("vue").DefineComponent<{
+import type { IconItem, FileItem, ColumnItem, ItemContextMenuOption, SelectionType, ContextMenus, EleDropdownProps, DropdownInstance } from '../types';
+declare const _default: import("vue").DefineComponent<{
     data: PropType<FileItem[]>;
     icons: PropType<IconItem[]>;
     selectionType: PropType<SelectionType>;
@@ -18,6 +15,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     sort: StringConstructor;
     order: StringConstructor;
     columns: PropType<ColumnItem[]>;
+    contextMenus: PropType<ContextMenus>;
+    contextMenuProps: PropType<EleDropdownProps>;
 }, {
     itemRefs: Ref<any[]>;
     tableCols: import("vue").ComputedRef<ColumnItem[]>;
@@ -26,7 +25,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onItemCheckChange: (item: FileItem) => void;
     onSortChange: (sort: string, col?: ColumnItem) => void;
     onItemContextMenu: (option: ItemContextMenuOption) => void;
-    onItemContextOpen: (ref: InstanceType<typeof ElDropdown> | null) => void;
+    onItemContextOpen: (ref: DropdownInstance) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     checkAllChange: () => true;
     itemClick: (_item: FileItem) => true;
@@ -48,15 +47,17 @@ declare const _sfc_main: import("vue").DefineComponent<{
     sort: StringConstructor;
     order: StringConstructor;
     columns: PropType<ColumnItem[]>;
+    contextMenus: PropType<ContextMenus>;
+    contextMenuProps: PropType<EleDropdownProps>;
 }>> & {
+    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
     onCheckAllChange?: (() => any) | undefined;
     onItemClick?: ((_item: FileItem) => any) | undefined;
     onItemCheckChange?: ((_item: FileItem) => any) | undefined;
-    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
     onSortChange?: ((_sort: string) => any) | undefined;
 }, {
+    sortable: boolean;
     isCheckAll: boolean;
     isIndeterminate: boolean;
-    sortable: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-file-list/components/file-table.js

@@ -32,7 +32,11 @@ const _sfc_main = defineComponent({
     // 排序方式
     order: String,
     // 自定义列配置
-    columns: Array
+    columns: Array,
+    // 右键菜单
+    contextMenus: [Array, Function],
+    // 右键菜单属性
+    contextMenuProps: Object
   },
   emits: {
     checkAllChange: () => true,
@@ -196,6 +200,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           current: _ctx.current,
           icons: _ctx.icons,
           columns: _ctx.tableCols,
+          contextMenus: typeof _ctx.contextMenus === "function" ? _ctx.contextMenus(item) : _ctx.contextMenus,
+          contextMenuProps: _ctx.contextMenuProps,
           onClick: _ctx.onItemClick,
           onCheckChange: _ctx.onItemCheckChange,
           onContextMenu: _ctx.onItemContextMenu,
@@ -209,7 +215,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             };
           })
-        ]), 1032, ["item", "selectionType", "selections", "current", "icons", "columns", "onClick", "onCheckChange", "onContextMenu", "onContextOpen"]);
+        ]), 1032, ["item", "selectionType", "selections", "current", "icons", "columns", "contextMenus", "contextMenuProps", "onClick", "onCheckChange", "onContextMenu", "onContextOpen"]);
       }), 128))
     ])
   ]);

package/es/ele-file-list/index.d.ts

@@ -1,6 +1,5 @@
-import type { CSSProperties } from 'vue';
 import type { FileItem, SortValue, ItemContextMenuOption, FileListLocale } from './types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     data: {
         type: import("vue").PropType<FileItem[]>;
         required: boolean;
@@ -25,10 +24,18 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     columns: import("vue").PropType<import("./types").ColumnItem[]>;
     boxChoose: BooleanConstructor;
+    contextMenus: import("vue").PropType<import("./types").ContextMenus>;
+    contextMenuProps: import("vue").PropType<import("./types").EleDropdownProps>;
     locale: import("vue").PropType<FileListLocale>;
 }, {
     lang: import("vue").ComputedRef<FileListLocale>;
-    selectorStyle: CSSProperties;
+    selectorStyle: import("vue").Ref<{
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+        display: string;
+    }>;
     isCheckAll: import("vue").ComputedRef<boolean>;
     isIndeterminate: import("vue").ComputedRef<boolean>;
     onCheckAllChange: () => void;
@@ -68,13 +75,15 @@ declare const _sfc_main: import("vue").DefineComponent<{
     };
     columns: import("vue").PropType<import("./types").ColumnItem[]>;
     boxChoose: BooleanConstructor;
+    contextMenus: import("vue").PropType<import("./types").ContextMenus>;
+    contextMenuProps: import("vue").PropType<import("./types").EleDropdownProps>;
     locale: import("vue").PropType<FileListLocale>;
 }>> & {
+    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
     onItemClick?: ((_item: FileItem) => any) | undefined;
     onSortChange?: ((_sorter: SortValue) => any) | undefined;
     "onUpdate:selections"?: ((_selection?: FileItem[] | undefined) => any) | undefined;
     "onUpdate:current"?: ((_current?: FileItem | null | undefined) => any) | undefined;
-    onItemContextMenu?: ((_option: ItemContextMenuOption) => any) | undefined;
 }, {
     grid: boolean;
     sortable: boolean;
@@ -82,4 +91,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     smallIcons: import("./types").IconItem[];
     boxChoose: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-file-list/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, computed, resolveComponent, openBlock, createElementBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeStyle } from "vue";
+import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeStyle } from "vue";
 import { throttle } from "../utils/core";
 import { useLicense, useLocale } from "../ele-config-provider/receiver";
 import FileGrid from "./components/file-grid";
@@ -13,7 +13,7 @@ const _sfc_main = defineComponent({
   setup(props, { emit }) {
     const { authenticated } = useLicense();
     const { lang } = useLocale("fileList", props);
-    const selectorStyle = reactive({
+    const selectorStyle = ref({
       top: "0px",
       left: "0px",
       width: "0px",
@@ -129,14 +129,13 @@ const _sfc_main = defineComponent({
           Math.abs(moveY - downY),
           target.clientHeight - top
         );
-        const temp = {
+        selectorStyle.value = {
           left: left + "px",
           top: top + "px",
           width: width + "px",
           height: height + "px",
           display: "block"
         };
-        Object.assign(selectorStyle, temp);
         if (width < 6 || height < 6) {
           items.forEach((item) => {
             item.classList.remove("is-active");
@@ -158,7 +157,7 @@ const _sfc_main = defineComponent({
         });
       }, 60);
       const mouseupFn = (e) => {
-        selectorStyle.display = "none";
+        selectorStyle.value = { ...selectorStyle.value, display: "none" };
         const moveX = Math.max(e.clientX, position.left);
         const moveY = Math.max(e.clientY, position.top);
         const left = Math.min(moveX, downX) - position.left;
@@ -230,6 +229,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       isIndeterminate: _ctx.isIndeterminate,
       checkAllText: _ctx.lang.selectAll,
       selectedText: _ctx.lang.selectTips,
+      contextMenus: _ctx.contextMenus,
+      contextMenuProps: _ctx.contextMenuProps,
       onCheckAllChange: _ctx.onCheckAllChange,
       onItemClick: _ctx.onItemClick,
       onItemCheckChange: _ctx.onItemCheckChange,
@@ -243,7 +244,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu"])) : (openBlock(), createBlock(_component_FileTable, {
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu"])) : (openBlock(), createBlock(_component_FileTable, {
       key: 1,
       data: _ctx.data,
       icons: _ctx.icons,
@@ -259,6 +260,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       sort: _ctx.sort,
       order: _ctx.order,
       columns: _ctx.columns,
+      contextMenus: _ctx.contextMenus,
+      contextMenuProps: _ctx.contextMenuProps,
       onCheckAllChange: _ctx.onCheckAllChange,
       onItemClick: _ctx.onItemClick,
       onItemCheckChange: _ctx.onItemCheckChange,
@@ -273,7 +276,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu", "onSortChange"])),
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu", "onSortChange"])),
     createElementVNode("div", {
       class: "ele-file-list-selector",
       style: normalizeStyle(_ctx.selectorStyle)

package/es/ele-file-list/props.d.ts

@@ -1,5 +1,7 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { IconItem, FileItem, SortValue, ItemContextMenuOption, ColumnItem, SelectionType, FileListLocale } from './types';
+import type FileGridItem from "./components/file-grid-item";
+import type FileTableItem from "./file-table-item";
+import type { IconItem, FileItem, SortValue, ItemContextMenuOption, ColumnItem, SelectionType, ContextMenus, EleDropdownProps, FileListLocale } from './types';
 /**
  * 属性
  */
@@ -28,6 +30,8 @@ export declare const fileListProps: {
     };
     columns: PropType<ColumnItem[]>;
     boxChoose: BooleanConstructor;
+    contextMenus: PropType<ContextMenus>;
+    contextMenuProps: PropType<EleDropdownProps>;
     locale: PropType<FileListLocale>;
 };
 export type FileListProps = ExtractPropTypes<typeof fileListProps>;
@@ -41,3 +45,11 @@ export declare const fileListEmits: {
     'update:current': (_current?: FileItem | null) => boolean;
     itemContextMenu: (_option: ItemContextMenuOption) => boolean;
 };
+/**
+ * 网格 item 实例
+ */
+export type GridItemInstance = InstanceType<typeof FileGridItem>;
+/**
+ * 表格 item 实例
+ */
+export type TableItemInstance = InstanceType<typeof FileTableItem>;

package/es/ele-file-list/props.js

@@ -40,6 +40,10 @@ const fileListProps = {
   columns: Array,
   // 多选时是否支持鼠标框选
   boxChoose: Boolean,
+  // 右键菜单
+  contextMenus: [Array, Function],
+  // 右键菜单属性
+  contextMenuProps: Object,
   // 国际化
   locale: Object
 };

package/es/ele-file-list/style/css-var.scss

@@ -1,7 +1,7 @@
-@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 
-@mixin set-file-list-var($var) {
+@mixin set-file-var($var) {
   .ele-file-list-group {
-    @include set-ele-var('file-list', $var);
+    @include set-ele-var('file', $var);
   }
 }

package/es/ele-file-list/style/index.js

@@ -1,3 +1,2 @@
-import 'element-plus/es/components/dropdown/style/index';
-import 'element-plus/es/components/dropdown-menu/style/index';
+import '../../ele-dropdown/style/index';
 import './index.scss';

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

@@ -1,7 +1,8 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
-@include set-file-list-var($ele);
+@include set-file-var($ele);
 
 .ele-file-list-group {
   position: relative;
@@ -16,7 +17,7 @@
     border: 1px solid elVar('border-color');
     background: elVar('bg-color');
     box-sizing: border-box;
-    transition: all 0.3s;
+    transition: all $ele-transition;
     position: relative;
     cursor: pointer;
 
@@ -84,9 +85,9 @@
     display: none;
     position: absolute;
     box-sizing: border-box;
-    border: eleVar('file-list', 'selector-border');
-    background: eleVar('file-list', 'selector-bg');
-    z-index: eleVar('file-list', 'selector-index');
+    border: eleVar('file', 'selector-border');
+    background: eleVar('file', 'selector-bg');
+    z-index: eleVar('file', 'selector-index');
     pointer-events: none;
   }
 
@@ -108,10 +109,10 @@
 
   // header
   .ele-file-list-header {
-    padding: 0 16px;
+    padding: 0 eleVar('file', 'header-padding');
     box-sizing: border-box;
-    border-bottom: 1px solid elVar('border-color', 'lighter');
-    line-height: 36px;
+    border-bottom: 1px solid elVar('border-color', 'light');
+    line-height: eleVar('file', 'header-height');
     display: flex;
 
     // 全选框
@@ -128,61 +129,61 @@
 
   // body
   .ele-file-list-body {
-    padding-top: eleVar('file-list', 'item-space');
-    padding-left: eleVar('file-list', 'item-space');
+    padding-top: eleVar('file', 'item-space');
+    padding-left: eleVar('file', 'item-space');
   }
 
   /*  item */
   .ele-file-list-item {
-    width: eleVar('file-list', 'item-width');
-    margin-right: eleVar('file-list', 'item-space');
-    margin-bottom: eleVar('file-list', 'item-space');
+    width: eleVar('file', 'item-width');
+    margin-right: eleVar('file', 'item-space');
+    margin-bottom: eleVar('file', 'item-space');
     display: inline-block;
     box-sizing: border-box;
-    border: eleVar('file-list', 'item-border');
-    border-radius: eleVar('file-list', 'item-radius');
-    transition: all 0.3s;
+    border: eleVar('file', 'item-border');
+    border-radius: eleVar('file', 'item-radius');
+    transition: all $ele-transition;
     text-align: center;
     position: relative;
     cursor: pointer;
 
     .ele-file-list-item-body {
-      padding: 6px 4px;
+      padding: eleVar('file', 'item-padding');
       box-sizing: border-box;
     }
 
     // 图标
     .ele-file-list-item-icon {
-      height: 84px;
+      height: eleVar('file', 'icon-height');
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
 
       & > img {
-        width: 56px;
-        height: 56px;
-        border-radius: 2px;
+        width: eleVar('file', 'icon-size');
+        height: eleVar('file', 'icon-size');
         display: inline-block;
         pointer-events: none;
       }
 
       & > .ele-file-list-item-image {
-        width: 84px;
-        height: 84px;
+        width: eleVar('file', 'image-size');
+        height: eleVar('file', 'image-size');
+        border-radius: eleVar('file', 'image-radius');
         object-fit: cover;
       }
     }
 
     // 标题
     .ele-file-list-item-title {
-      margin-top: 4px;
+      margin-top: eleVar('file', 'title-margin');
       overflow: hidden;
       white-space: nowrap;
       word-break: break-all;
       text-overflow: ellipsis;
       box-sizing: border-box;
-      transition: color 0.3s;
+      transition: color $ele-transition;
 
       &:hover {
         color: elVar('color-primary');
@@ -193,7 +194,7 @@
     .ele-file-list-item-checkbox {
       border-radius: 50%;
       background: elVar('bg-color');
-      transition: all 0.3s;
+      transition: all $ele-transition;
       position: absolute;
       top: 6px;
       right: 6px;
@@ -211,7 +212,7 @@
     &:hover,
     &.is-active,
     &.is-checked {
-      background: eleVar('file-list', 'item-active-bg');
+      background: eleVar('file', 'item-active-bg');
 
       .ele-file-list-item-checkbox {
         opacity: 1;
@@ -219,7 +220,7 @@
     }
 
     &.is-checked {
-      border-color: eleVar('file-list', 'item-active-border-color');
+      border-color: eleVar('file', 'item-active-border-color');
 
       .ele-file-list-item-checkbox .ele-file-list-checkbox {
         opacity: 1;
@@ -243,7 +244,7 @@
     width: 0;
     height: 0;
     display: block;
-    border: 4px solid eleVar('file-list', 'table-sort-color');
+    border: 4px solid eleVar('file', 'sort-color');
     border-left-color: transparent;
     border-right-color: transparent;
   }
@@ -258,11 +259,11 @@
   }
 
   &.is-asc::before {
-    border-bottom-color: eleVar('file-list', 'table-sort-active-color');
+    border-bottom-color: eleVar('file', 'sort-active-color');
   }
 
   &.is-desc::after {
-    border-top-color: eleVar('file-list', 'table-sort-active-color');
+    border-top-color: eleVar('file', 'sort-active-color');
   }
 }
 
@@ -272,9 +273,9 @@
 
   /* item */
   .ele-file-list-item {
-    line-height: 44px;
-    border-top: 1px solid elVar('border-color', 'lighter');
-    transition: all 0.3s;
+    line-height: eleVar('file', 'td-height');
+    border-top: 1px solid elVar('border-color', 'light');
+    transition: all $ele-transition;
     position: relative;
 
     .ele-file-list-item-body {
@@ -288,13 +289,13 @@
     }
 
     &:last-child {
-      border-bottom: 1px solid elVar('border-color', 'lighter');
+      border-bottom: 1px solid elVar('border-color', 'light');
     }
 
     // 复选框
     .ele-file-list-item-checkbox {
       width: 36px;
-      padding-left: 16px;
+      padding-left: eleVar('file', 'header-padding');
       box-sizing: border-box;
       line-height: 0;
       flex-shrink: 0;
@@ -304,7 +305,7 @@
     .ele-file-list-item-name {
       display: flex;
       align-items: center;
-      padding: 0 10px;
+      padding: eleVar('file', 'td-padding');
       box-sizing: border-box;
       position: relative;
       overflow: hidden;
@@ -319,8 +320,8 @@
       overflow: hidden;
 
       & > img {
-        width: 24px;
-        height: 24px;
+        width: eleVar('file', 'td-icon-szie');
+        height: eleVar('file', 'td-icon-szie');
         flex-shrink: 0;
         cursor: pointer;
 
@@ -328,11 +329,16 @@
           color: elVar('color-primary');
         }
       }
+
+      & > .ele-file-list-item-image {
+        border-radius: eleVar('file', 'td-image-radius');
+        object-fit: cover;
+      }
     }
 
     .ele-file-list-item-title {
-      padding-left: 10px;
-      transition: color 0.3s;
+      padding-left: eleVar('file', 'td-icon-margin');
+      transition: color $ele-transition;
       box-sizing: border-box;
       text-overflow: ellipsis;
       word-break: break-all;
@@ -354,7 +360,7 @@
 
       .ele-file-list-item-tool {
         font-size: 17px;
-        margin-left: 16px;
+        margin-left: eleVar('file', 'td-icon-margin');
         color: elVar('color-primary');
         cursor: pointer;
       }
@@ -366,14 +372,16 @@
 
     // 自定义列
     .ele-file-list-item-cell {
-      padding: 0 10px;
+      padding: eleVar('file', 'td-item-padding');
       box-sizing: border-box;
     }
   }
 
   // header
   .ele-file-list-header .ele-file-list-item {
-    line-height: 36px;
+    line-height: eleVar('file', 'header-height');
+    border-top: none;
+    margin-top: 0;
 
     .ele-file-list-item-name > div {
       overflow: hidden;
@@ -384,7 +392,7 @@
 
     .ele-file-list-item-name,
     .ele-file-list-item-cell {
-      transition: color 0.3s;
+      transition: color $ele-transition;
       cursor: pointer;
 
       &:hover {
@@ -398,11 +406,11 @@
     &:hover,
     &.is-active,
     &.is-checked {
-      background: eleVar('file-list', 'item-active-bg');
-      border-color: eleVar('file-list', 'item-active-border-color');
+      background: eleVar('file', 'item-active-bg');
+      border-color: eleVar('file', 'item-active-border-color');
 
       & + .ele-file-list-item {
-        border-top-color: eleVar('file-list', 'item-active-border-color');
+        border-top-color: eleVar('file', 'item-active-border-color');
       }
     }
   }
@@ -410,5 +418,5 @@
 
 /* 右键菜单 */
 .ele-file-list-item-context {
-  min-width: 100px;
+  min-width: 108px;
 }