vxe-pc-ui 3.18.22 → 3.19.0

package/packages/layout-body/src/layout-body.ts

@@ -1,9 +1,9 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import { getConfig, createEvent, globalMixins, renderEmptyElement } from '../../ui'
-import VxeLoadingComponent from '../../loading'
-import VxeUIBacktopComponent from '../../backtop'
 import XEUtils from 'xe-utils'
+import VxeScrollbarComponent from '../../scrollbar'
+import VxeUIBacktopComponent from '../../backtop'
 
 import type { LayoutBodyInternalData, VxeLayoutBodyPropTypes, LayoutBodyReactData, VxeLayoutBodyEmits, VxeComponentSizeType, ValueOf } from '../../../types'
 
@@ -28,6 +28,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       default: () => getConfig().layoutBody.showBacktop
     },
     backtopConfig: Object as PropType<VxeLayoutBodyPropTypes.BacktopConfig>,
+    scrollbarConfig: Object as PropType<VxeLayoutBodyPropTypes.ScrollbarConfig>,
     size: {
       type: String as PropType<VxeLayoutBodyPropTypes.Size>,
       default: () => getConfig().layoutBody.size || getConfig().size
@@ -58,6 +59,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       return Object.assign({}, getConfig().layoutBody.backtopConfig, props.backtopConfig, {
         target: '#' + backtopId
       })
+    },
+    computeScrollbarOpts () {
+      const $xeLayoutBody = this
+      const props = $xeLayoutBody
+
+      return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig)
     }
   },
   methods: {
@@ -79,6 +86,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { loading, padding, showBacktop } = props
       const backtopOpts = $xeLayoutBody.computeBacktopOpts
+      const scrollbarOpts = $xeLayoutBody.computeScrollbarOpts
+      const { native, xConfig, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts
       const vSize = $xeLayoutBody.computeSize
       const defaultSlot = slots.default
       const backtopSlot = slots.backtop
@@ -105,19 +114,22 @@ export default /* define-vxe-component start */ defineVxeComponent({
           'is--padding': padding
         }]
       }, [
-        h('div', {
-          attrs: {
-            id: showBacktop ? backtopId : ''
-          },
-          class: 'vxe-layout-body--inner'
-        }, defaultSlot ? defaultSlot({}) : []),
-        /**
-         * 加载中
-         */
-        h(VxeLoadingComponent, {
-          class: 'vxe-list-view--loading',
+        h(VxeScrollbarComponent, {
           props: {
-            value: loading
+            loading,
+            native,
+            xConfig,
+            yConfig,
+            className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
+            viewAttrs: {
+              ...viewAttrs,
+              id: showBacktop ? (backtopId || null) : null
+            },
+            viewClassName: 'vxe-layout-body--view' + (viewClassName ? (' ' + viewClassName) : ''),
+            viewInnerClassName: 'vxe-layout-body--inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
+          },
+          scopedSlots: {
+            default: () => defaultSlot ? defaultSlot({}) : []
           }
         }),
         /**

package/packages/list/src/list.ts

@@ -9,7 +9,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import { getItemCacheObj } from './util'
-import VxeLoadingComponent from '../../loading/src/loading'
+import VxeLoadingComponent from '../../loading'
 
 import type { VxeListPropTypes, VxeListEmits, VxeComponentSizeType, ListReactData, VxeListDefines, ValueOf, ListInternalData, VxeListConstructor, VxeListPrivateMethods, VxeComponentStyleType } from '../../../types'
 

package/packages/menu/src/menu.ts

@@ -7,6 +7,7 @@ import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import VxeLoadingComponent from '../../loading'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeMenuDefines, MenuInternalData, MenuReactData, VxeMenuPropTypes, VxeLayoutAsideConstructor, VxeMenuEmits, VxeLayoutAsidePropTypes, VxeComponentPermissionInfo, VxeComponentSizeType, ValueOf } from '../../../types'
 
@@ -75,6 +76,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       default: () => getConfig().menu.size || getConfig().size
     },
     menuConfig: Object as PropType<VxeMenuPropTypes.MenuConfig>,
+    scrollbarConfig: Object as PropType<VxeMenuPropTypes.ScrollbarConfig>,
     appendTo: {
       type: [String, Function] as PropType<VxeMenuPropTypes.AppendTo>,
       default: () => getConfig().menu.appendTo
@@ -137,6 +139,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const propsOpts = $xeMenu.computePropsOpts as VxeMenuPropTypes.OptionProps
       return propsOpts.routerLink || 'routerLink'
     },
+    computeScrollbarOpts () {
+      const $xeMenu = this
+      const props = $xeMenu
+
+      return Object.assign({}, getConfig().menu.scrollbarConfig, props.scrollbarConfig)
+    },
     computeCurrBorder () {
       const $xeMenu = this
       const props = $xeMenu
@@ -773,6 +781,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const isCollapsed = $xeMenu.computeIsCollapsed
       const currBorder = $xeMenu.computeCurrBorder
       const varStyle = $xeMenu.computeVarStyle
+      const scrollbarOpts = $xeMenu.computeScrollbarOpts
       const headerSlot = slots.header
       const footerSlot = slots.footer
       let ons: Record<string, any> = {}
@@ -823,9 +832,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
                     class: 'vxe-menu--header'
                   }, headerSlot(stParams))
                   : renderEmptyElement($xeMenu),
-                h('div', {
-                  class: 'vxe-menu--body'
-                }, menuList.map(child => $xeMenu.renderDefaultChildren(h, child, menuList))),
+                h(VxeScrollbarComponent, {
+                  class: 'vxe-menu--body',
+                  props: scrollbarOpts,
+                  scopedSlots: {
+                    default: () => menuList.map(child => $xeMenu.renderDefaultChildren(h, child, menuList))
+                  }
+                }),
                 footerSlot
                   ? h('div', {
                     class: 'vxe-menu--footer'
@@ -838,7 +851,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
          * 加载中
          */
         h(VxeLoadingComponent, {
-          class: 'vxe-list-view--loading',
+          class: 'vxe-menu-view--loading',
           props: {
             value: loading
           }

package/packages/scrollbar/src/scrollbar.ts

@@ -32,6 +32,7 @@ function createInternalData (): ScrollbarInternalData {
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeScrollbar',
   props: {
+    id: [String, Number] as PropType<VxeScrollbarPropTypes.Id>,
     width: [String, Number] as PropType<VxeScrollbarPropTypes.Width>,
     height: [String, Number] as PropType<VxeScrollbarPropTypes.Height>,
     minWidth: [String, Number] as PropType<VxeScrollbarPropTypes.MinWidth>,
@@ -45,8 +46,22 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     xConfig: Object as PropType<VxeScrollbarPropTypes.XConfig>,
     yConfig: Object as PropType<VxeScrollbarPropTypes.YConfig>,
-    className: String as PropType<VxeScrollbarPropTypes.ClassName>,
-    viewClassName: String as PropType<VxeScrollbarPropTypes.ViewClassName>,
+    className: {
+      type: String as PropType<VxeScrollbarPropTypes.ClassName>,
+      default: () => getConfig().scrollbar.className
+    },
+    viewAttrs: {
+      type: Object as PropType<VxeScrollbarPropTypes.ViewAttrs>,
+      default: () => getConfig().scrollbar.viewAttrs
+    },
+    viewClassName: {
+      type: String as PropType<VxeScrollbarPropTypes.ViewClassName>,
+      default: () => getConfig().scrollbar.viewClassName
+    },
+    viewInnerClassName: {
+      type: String as PropType<VxeScrollbarPropTypes.ViewInnerClassName>,
+      default: () => getConfig().scrollbar.viewInnerClassName
+    },
     autoResize: {
       type: Boolean as PropType<VxeScrollbarPropTypes.AutoResize>,
       default: () => getConfig().scrollbar.autoResize
@@ -105,8 +120,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     computeWrapperClss () {
       const $xeScrollbar = this
       const props = $xeScrollbar
+      const reactData = $xeScrollbar.reactData
 
       const { native, className } = props
+      const { yThumbHeight, xThumbWidth } = reactData
       const xOpts = ($xeScrollbar as any).computeXOpts as VxeScrollbarPropTypes.XConfig
       const yOpts = ($xeScrollbar as any).computeYOpts as VxeScrollbarPropTypes.YConfig
       return domUtils.buildClass([
@@ -117,7 +134,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         className
       ], {
         'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide
+        'ov-y--auto-hide': yOpts.autoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
       })
     },
     computeViewClss () {
@@ -130,6 +149,16 @@ export default /* define-vxe-component start */ defineVxeComponent({
         viewClassName
       ])
     },
+    computeViewInnerClss () {
+      const $xeScrollbar = this
+      const props = $xeScrollbar
+
+      const { viewInnerClassName } = props
+      return domUtils.buildClass([
+        'vxe-scrollbar--view-inner',
+        viewInnerClassName
+      ])
+    },
     computeXOpts () {
       const $xeScrollbar = this
       const props = $xeScrollbar
@@ -441,28 +470,34 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeScrollbar
       const slots = $xeScrollbar.$scopedSlots
 
-      const { native, loading } = props
+      const { id, native, loading, viewAttrs } = props
       const wrapperStyle = $xeScrollbar.computeWrapperStyle
       const wrapperClss = $xeScrollbar.computeWrapperClss
       const viewClss = $xeScrollbar.computeViewClss
+      const viewInnerClss = $xeScrollbar.computeViewInnerClss
       const xOpts = $xeScrollbar.computeXOpts
       const yOpts = $xeScrollbar.computeYOpts
       const defaultSlot = slots.default
       return h('div', {
         ref: 'refElem',
+        attrs: {
+          id: id || null
+        },
         class: wrapperClss,
         style: wrapperStyle
       }, [
         h('div', {
           ref: 'refViewElem',
           class: viewClss,
+          attrs: viewAttrs,
           on: {
             scroll: $xeScrollbar.scrollEvent
           }
         }, [
           h('div', {
+            key: 'vi',
             ref: 'refViewInnerElem',
-            class: 'vxe-scrollbar--view-inner'
+            class: viewInnerClss
           }, defaultSlot ? defaultSlot({}) : [])
         ]),
         native || xOpts.visible === 'hidden'
@@ -517,6 +552,36 @@ export default /* define-vxe-component start */ defineVxeComponent({
     }
   },
   watch: {
+    height () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
+    width () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
+    minHeight () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
+    minWidth () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
+    maxHeight () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
+    maxWidth () {
+      const $xeScrollbar = this
+
+      $xeScrollbar.reFlag++
+    },
     native () {
       const $xeScrollbar = this
 
@@ -546,19 +611,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const internalData = $xeScrollbar.internalData
 
     const { autoResize } = props
+    const viewEl = $xeScrollbar.$refs.refViewElem as HTMLDivElement
     const viewInnerEl = $xeScrollbar.$refs.refViewInnerElem as HTMLDivElement
-    if (autoResize && viewInnerEl) {
+    if (autoResize) {
       const resizeObserver = globalResize.create(() => {
         if (props.autoResize) {
           $xeScrollbar.reFlag++
         }
       })
-      resizeObserver.observe(viewInnerEl)
+      if (viewEl) {
+        resizeObserver.observe(viewEl)
+      }
+      if (viewInnerEl) {
+        resizeObserver.observe(viewInnerEl)
+      }
       internalData.resizeObserver = resizeObserver
     }
-    $xeScrollbar.$nextTick(() => {
-      $xeScrollbar.recalculate()
-    })
+
+    $xeScrollbar.reFlag++
   },
   beforeDestroy () {
     const $xeScrollbar = this

package/packages/select/src/select.ts

@@ -6,8 +6,8 @@ import { getEventTargetNode, getPopupAppendElement, toCssUnit, updatePanelPlacem
 import { getLastZIndex, nextZIndex, getFuncText, eqEmptyValue } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
-import VxeInputComponent from '../../input/src/input'
-import VxeButtonComponent from '../../button/src/button'
+import VxeInputComponent from '../../input'
+import VxeButtonComponent from '../../button'
 
 import type { VxeSelectPropTypes, SelectInternalData, ValueOf, VxeComponentSizeType, SelectReactData, VxeSelectEmits, VxeButtonDefines, VxeInputDefines, VxeSelectDefines, VxeOptionProps, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeInputConstructor, VxeComponentSlotType, VxeComponentStyleType, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'

package/packages/table-select/src/table-select.ts

@@ -6,7 +6,7 @@ import { getEventTargetNode, updatePanelPlacement, toCssUnit, getPopupAppendElem
 import { getOnName } from '../../ui/src/vn'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
-import VxeInputComponent from '../../input/src/input'
+import VxeInputComponent from '../../input'
 
 import type { TableSelectReactData, VxeTableSelectPropTypes, TableSelectInternalData, VxeTableSelectEmits, VxeInputConstructor, VxeFormDefines, ValueOf, VxeComponentStyleType, VxeComponentSizeType, VxeModalConstructor, VxeModalMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes } from '../../../types/components/table'

package/packages/tabs/src/tabs.ts

@@ -6,7 +6,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
-import VxeLoadingComponent from '../../loading/src/loading'
+import VxeLoadingComponent from '../../loading'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, VxeComponentSizeType, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, VxeComponentStyleType } from '../../../types'
 

package/packages/ui/index.ts

@@ -221,11 +221,16 @@ setConfig({
     digits: 2,
     controls: true
   },
-  layoutAside: {},
-  layoutBody: {
-    backtopConfig: {
+  layoutAside: {
+    scrollbarConfig: {
+      yConfig: {
+        autoHide: true
+      }
     }
   },
+  layoutBody: {
+    backtopConfig: {}
+  },
   layoutContainer: {},
   layoutFooter: {},
   layoutHeader: {},

package/packages/upload/src/upload.ts

@@ -6,7 +6,7 @@ import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { initTpImg, getTpImg, getEventTargetNode, toCssUnit } from '../../ui/src/dom'
 import { readLocalFile } from './util'
-import VxeButtonComponent from '../../button/src/button'
+import VxeButtonComponent from '../../button'
 
 import type { VxeUploadDefines, VxeUploadConstructor, VxeUploadPropTypes, UploadReactData, UploadInternalData, VxeUploadEmits, VxeComponentSizeType, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, ValueOf, VxeComponentEventParams } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'

package/styles/components/layout-aside.scss

@@ -15,9 +15,7 @@
     padding: var(--vxe-ui-layout-padding-default);
   }
 }
-.vxe-layout-aside--inner {
+.vxe-layout-aside--scrollbar {
   flex-grow: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  outline: 0;
+  overflow: hidden;
 }

package/styles/components/layout-body.scss

@@ -8,8 +8,7 @@
     padding: var(--vxe-ui-layout-padding-double);
   }
 }
-.vxe-layout-body--inner {
+.vxe-layout-body--scrollbar {
   flex-grow: 1;
-  overflow: auto;
-  outline: 0;
+  overflow: hidden;
 }

package/styles/components/menu.scss

@@ -98,11 +98,12 @@
 
 .vxe-menu--collapse-wrapper {
   display: none;
+  flex-direction: column;
   position: absolute;
-  overflow: auto;
+  overflow: hidden;
   background-color: var(--vxe-ui-layout-background-color);
   &.is--collapsed {
-    display: block;
+    display: flex;
     @include baseMixin.createAnimationTransition(all, 0.25s);
   }
   &:not(.is--enter) {
@@ -117,6 +118,14 @@
     width: var(--vxe-ui-layout-aside-default-width);
     box-shadow: var(--vxe-ui-menu-collapse-wrapper-box-shadow);
   }
+  & > .vxe-menu--header,
+  & > .vxe-menu--footer {
+    flex-shrink: 0;
+  }
+  & > .vxe-menu--body {
+    flex-grow: 1;
+    overflow: hidden;
+  }
 }
 
 .vxe-menu--item-link {

package/styles/components/scrollbar.scss

@@ -7,8 +7,6 @@
     & > .vxe-scrollbar--view {
       scrollbar-width: none;
       -ms-overflow-style: none;
-      overflow-x: auto;
-      overflow-y: auto;
     }
     & > .vxe-scrollbar--view::-webkit-scrollbar {
       display: none;
@@ -21,7 +19,7 @@
       }
       & > .vxe-scrollbar--track-x {
         opacity: 0;
-        @include baseMixin.createAnimationTransition(opacity, 0.3s);
+        @include baseMixin.createAnimationTransition(opacity, 0.8s);
       }
     }
     &.ov-y--auto-hide {
@@ -32,25 +30,11 @@
       }
       & > .vxe-scrollbar--track-y {
         opacity: 0;
-        @include baseMixin.createAnimationTransition(opacity, 0.3s);
+        @include baseMixin.createAnimationTransition(opacity, 0.8s);
       }
     }
   }
   &.is--native {
-    & > .vxe-scrollbar--view {
-      overflow-x: auto;
-      overflow-y: auto;
-    }
-    &.ov-x--hidden {
-      & > .vxe-scrollbar--view {
-        overflow-x: hidden;
-      }
-    }
-    &.ov-y--hidden {
-      & > .vxe-scrollbar--view {
-        overflow-y: hidden;
-      }
-    }
     & > .vxe-scrollbar--view::-webkit-scrollbar {
       width: var(--vxe-ui-scrollbar-y-width);
       height: var(--vxe-ui-scrollbar-x-height);
@@ -66,25 +50,47 @@
       background-color: var(--vxe-ui-scrollbar-thumb-active-background-color);
     }
   }
+  &.ov-x--hidden {
+    & > .vxe-scrollbar--view {
+      overflow-x: hidden;
+    }
+  }
+  &.ov-y--hidden {
+    & > .vxe-scrollbar--view {
+      overflow-y: hidden;
+    }
+  }
 }
 
 .vxe-scrollbar--view {
   height: 100%;
   width: 100%;
+  overflow-x: auto;
+  overflow-y: auto;
 }
 
 .vxe-scrollbar--track-x,
 .vxe-scrollbar--track-y {
+  display: none;
   position: absolute;
   background-color: var(--vxe-ui-scrollbar-track-background-color);
   user-select: none;
 }
+.vxe-scrollbar {
+  &.overflow-y {
+    & > .vxe-scrollbar--track-x,
+    & > .vxe-scrollbar--track-y {
+      display: block;
+    }
+  }
+}
 
 .vxe-scrollbar--track-x {
   width: 100%;
   bottom: 0;
   left: 0;
   height: var(--vxe-ui-scrollbar-x-height);
+  padding: var(--vxe-ui-scrollbar-track-padding) 0;
 }
 
 .vxe-scrollbar--track-y {
@@ -92,6 +98,7 @@
   right: 0;
   top: 0;
   width: var(--vxe-ui-scrollbar-y-width);
+  padding: 0 var(--vxe-ui-scrollbar-track-padding);
 }
 
 .vxe-scrollbar--thumb-y {
@@ -103,7 +110,7 @@
 
 .vxe-scrollbar--thumb-x,
 .vxe-scrollbar--thumb-y {
-  border-radius: var(--vxe-ui-base-border-radius);
+  border-radius: var(--vxe-ui-scrollbar-thumb-border-radius);
   background-color: var(--vxe-ui-scrollbar-thumb-background-color);
   &:hover {
     background-color: var(--vxe-ui-scrollbar-thumb-hover-background-color);

package/styles/components/text-ellipsis.scss

@@ -1,63 +1,34 @@
 @use "sass:map";
 @use "sass:list";
+@use '../helpers/themeStatus.scss';
 
-$btnThemeList: (
-  (
-    name: "primary",
-    textColor: var(--vxe-ui-font-primary-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-font-primary-lighten-color),
-    btnDarkenColor: var(--vxe-ui-font-primary-darken-color),
-    btnDisabledColor: var(--vxe-ui-font-primary-disabled-color)
-  ),
-  (
-    name: "success",
-    textColor: var(--vxe-ui-status-success-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-success-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-success-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-success-disabled-color)
-  ),
-  (
-    name: "info",
-    textColor: var(--vxe-ui-status-info-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-info-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-info-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-info-disabled-color)
-  ),
-  (
-    name: "warning",
-    textColor: var(--vxe-ui-status-warning-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-warning-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-warning-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-warning-disabled-color)
-  ),
-  (
-    name: "danger",
-    textColor: var(--vxe-ui-status-danger-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-danger-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-danger-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-danger-disabled-color)
-  ),
-  (
-    name: "error",
-    textColor: var(--vxe-ui-status-error-color),
-    btnColor: #fff,
-    btnLightenColor: var(--vxe-ui-status-error-lighten-color),
-    btnDarkenColor: var(--vxe-ui-status-error-darken-color),
-    btnDisabledColor: var(--vxe-ui-status-error-disabled-color)
-  )
-);
+// 局部变量
+.vxe-text-ellipsis {
+  --vxe-ui-text-ellipsis-current-font-size: inherit;
+  &.size--xlarge {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-large);
+  }
+  &.size--medium {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-medium);
+  }
+  &.size--small {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-small);
+  }
+  &.size--mini {
+    --vxe-ui-text-ellipsis-current-font-size: var(--vxe-ui-font-size-mini);
+  }
+}
 
 .vxe-text-ellipsis {
   display: block;
   overflow: hidden;
   white-space: normal;
-  @for $index from 0 to list.length($btnThemeList) {
-    $item: list.nth($btnThemeList, $index + 1);
+  font-size: var(--vxe-ui-text-ellipsis-current-font-size);
+  @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+    $item: list.nth(themeStatus.$btnThemeList, $index + 1);
     &.theme--#{map.get($item, name)} {
       color: map.get($item, textColor);
       & > .vxe-text-ellipsis--link {
@@ -117,15 +88,3 @@ $btnThemeList: (
   text-decoration: none;
   color: inherit;
 }
-
-.vxe-text-ellipsis {
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-  }
-}

package/styles/components/upload.scss

@@ -412,9 +412,8 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 1.8em;
-  height: 1.8em;
-  font-size: 0.8em;
+  width: 1.2em;
+  height: 1.2em;
   border-radius: 50%;
   color: #fff;
   background-color: var(--vxe-ui-status-error-color);
@@ -423,6 +422,9 @@
   &:hover {
     background-color: var(--vxe-ui-status-error-lighten-color);
   }
+  i {
+    font-size: 0.6em;
+  }
 }
 
 .vxe-upload--file-message-over-error {