vxe-pc-ui 4.16.7 → 4.16.9

package/packages/checkbox/src/group.ts

@@ -2,7 +2,8 @@ import { h, provide, PropType, computed, inject, reactive, onUnmounted, watch, o
 import { defineVxeComponent } from '../../ui/src/comp'
 import { getConfig, createEvent, useSize } from '../../ui'
 import XEUtils from 'xe-utils'
-import VxeCheckboxComponent from './checkbox'
+import VxeCheckboxComponent from '../../checkbox'
+import VxeCheckboxButtonComponent from '../../checkbox-button'
 
 import type { VxeCheckboxGroupConstructor, CheckboxGroupInternalData, VxeCheckboxGroupEmits, ValueOf, CheckboxGroupReactData, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxGroupPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
 
@@ -26,6 +27,7 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxeCheckboxGroupPropTypes.Readonly>,
       default: null
     },
+    type: String as PropType<VxeCheckboxGroupPropTypes.Type>,
     disabled: {
       type: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
       default: null
@@ -208,7 +210,7 @@ export default defineVxeComponent({
     Object.assign($xeCheckboxGroup, checkboxGroupMethods, checkboxGroupPrivateMethods)
 
     const renderVN = () => {
-      const { status, options } = props
+      const { status, options, type } = props
       const defaultSlot = slots.default
       const valueField = computeValueField.value
       const labelField = computeLabelField.value
@@ -217,8 +219,9 @@ export default defineVxeComponent({
       const titleField = computeTitleField.value
       const isReadonly = computeIsReadonly.value
       const isDisabled = computeIsDisabled.value
+      const btnComp = type === 'button' ? VxeCheckboxButtonComponent : VxeCheckboxComponent
       return h('div', {
-        class: ['vxe-checkbox-group', {
+        class: ['vxe-checkbox-group', `type--${type === 'button' ? type : ''}`, {
           [`theme--${status}`]: status,
           'is--readonly': isReadonly,
           'is--disabled': isDisabled
@@ -227,7 +230,7 @@ export default defineVxeComponent({
         ? defaultSlot({})
         : (options
             ? options.map(item => {
-              return h(VxeCheckboxComponent, {
+              return h(btnComp, {
                 key: item[valueField],
                 checkedValue: item[valueField],
                 content: item[labelField],

package/packages/date-range-picker/src/date-range-picker.ts

@@ -693,17 +693,24 @@ export default defineVxeComponent({
     }
 
     const startPanelChangeEvent = (params: any) => {
+      const { paneStartVal } = reactData
       const { selectStatus } = internalData
       const { value, currValue, $event } = params
       const paneVals = value ? (XEUtils.isString(value) ? value.split(',') : [value]) : []
       let startValue = ''
       let endValue = ''
       if (selectStatus) {
-        startValue = paneVals[0]
-        if (paneVals[1]) {
-          endValue = paneVals[1]
+        // 如果选择同一天
+        if (!value && currValue === paneStartVal[0]) {
+          startValue = currValue
+          endValue = currValue
         } else {
-          endValue = reactData.selectEdValue
+          startValue = paneVals[0]
+          if (paneVals[1]) {
+            endValue = paneVals[1]
+          } else {
+            endValue = reactData.selectEdValue
+          }
         }
       } else {
         startValue = currValue || XEUtils.last(paneVals)
@@ -725,18 +732,25 @@ export default defineVxeComponent({
     }
 
     const endPanelChangeEvent = (params: any) => {
+      const { paneEndVal } = reactData
       const { selectStatus } = internalData
       const { value, currValue, $event } = params
       const paneVals = value ? (XEUtils.isString(value) ? value.split(',') : [value]) : []
       let startValue = ''
       let endValue = ''
       if (selectStatus) {
-        endValue = paneVals[0]
-        if (paneVals[1]) {
-          startValue = paneVals[0]
-          endValue = paneVals[1]
+        // 如果选择同一天
+        if (!value && currValue === paneEndVal[1]) {
+          startValue = currValue
+          endValue = currValue
         } else {
-          startValue = reactData.selectStValue
+          endValue = paneVals[0]
+          if (paneVals[1]) {
+            startValue = paneVals[0]
+            endValue = paneVals[1]
+          } else {
+            startValue = reactData.selectStValue
+          }
         }
       } else {
         endValue = currValue || XEUtils.last(paneVals)

package/packages/menu/src/menu.ts

@@ -227,6 +227,7 @@ export default defineVxeComponent({
       const { accordion } = props
       const { menuEffectMaps } = internalData
       const { itemId, hasChild, isExpand } = item
+      const isCollapsed = computeIsCollapsed.value
       const expanded = !isExpand
       if (hasChild) {
         evnt.stopPropagation()
@@ -245,9 +246,9 @@ export default defineVxeComponent({
         }
         item.isExpand = expanded
 
-        const el = refElem.value
-        if (el) {
-          const nemuEl = el.querySelector<HTMLDivElement>(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`)
+        const wrapperEl = isCollapsed ? refCollapseElem.value : refElem.value
+        if (wrapperEl) {
+          const nemuEl = wrapperEl.querySelector<HTMLDivElement>(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`)
           const groupEl = nemuEl ? nemuEl.querySelector<HTMLDivElement>('.vxe-menu--item-group') : null
           if (groupEl) {
             if (expanded) {

package/packages/password-input/src/password-input.ts

@@ -174,6 +174,7 @@ export default defineVxeComponent({
     const blurEvent = (evnt: Event & { type: 'blur' }) => {
       const { inputValue } = reactData
       const value = inputValue
+      reactData.isActivated = false
       $xePasswordInput.dispatchEvent('blur', { value }, evnt)
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {

package/packages/radio/src/group.ts

@@ -2,8 +2,8 @@ import { h, provide, PropType, inject, computed, reactive, watch, onMounted, nex
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, useSize } from '../../ui'
-import VxeRadioComponent from './radio'
-import VxeRadioButtonComponent from './button'
+import VxeRadioComponent from '../../radio'
+import VxeRadioButtonComponent from '../../radio-button'
 
 import type { VxeRadioGroupPropTypes, RadioGroupInternalData, VxeRadioGroupConstructor, RadioGroupReactData, VxeRadioGroupEmits, VxeRadioGroupPrivateMethods, RadioGroupPrivateMethods, RadioGroupPrivateComputed, RadioGroupMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types'
 
@@ -202,7 +202,7 @@ export default defineVxeComponent({
       const btnComp = type === 'button' ? VxeRadioButtonComponent : VxeRadioComponent
 
       return h('div', {
-        class: ['vxe-radio-group', {
+        class: ['vxe-radio-group', `type--${type === 'button' ? type : ''}`, {
           [`theme--${status}`]: status,
           [`size--${vSize}`]: vSize
         }]

package/packages/tree/src/tree.ts

@@ -108,6 +108,10 @@ export default defineVxeComponent({
       type: [String, Number] as PropType<VxeTreePropTypes.MinHeight>,
       default: () => getConfig().tree.minHeight
     },
+    emptyText: {
+      type: [String, Number] as PropType<VxeTreePropTypes.EmptyText>,
+      default: () => getConfig().tree.emptyText
+    },
     loading: Boolean as PropType<VxeTreePropTypes.Loading>,
     loadingConfig: Object as PropType<VxeTreePropTypes.LoadingConfig>,
     accordion: {
@@ -3243,14 +3247,21 @@ export default defineVxeComponent({
     }
 
     const renderList = (treeList: any[]) => {
-      const { transform } = props
+      const { transform, emptyText } = props
       const { treeExpandedMaps } = internalData
       const childrenField = computeChildrenField.value
+      const emptySlot = slots.empty
       if (!treeList.length) {
         return [
           h('div', {
             class: 'vxe-tree--empty-placeholder'
-          }, getI18n('vxe.tree.searchEmpty'))
+          }, emptySlot
+            ? emptySlot({})
+            : [
+                h('div', {
+                  class: 'vxe-tree--empty-placeholder-content'
+                }, getText(emptyText || getI18n('vxe.tree.searchEmpty')))
+              ])
         ]
       }
       const nodeVNs: VNode[] = []

package/styles/components/button.scss

@@ -11,6 +11,18 @@
   --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-default);
   --vxe-ui-button-current-height: var(--vxe-ui-button-height-default);
   --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-default);
+  &.size--xlarge {
+    --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-xlarge);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-xlarge);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-large);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-large);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-large);
+  }
   &.size--medium {
     --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-medium);
     --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-medium);

package/styles/components/cascader.scss

@@ -5,18 +5,18 @@
 .vxe-cascader,
 .vxe-cascader--panel {
   --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-default);
-  --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-default);
+  --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-default);
   &.size--medium {
     --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-medium);
-    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-medium);
+    --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-medium);
   }
   &.size--small {
     --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-small);
-    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-small);
+    --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-small);
   }
   &.size--mini {
     --vxe-ui-cascader-current-font-size: var(--vxe-ui-font-size-mini);
-    --vxe-ui-cascader-current-font-size: var(--vxe-ui-layout-padding-mini);
+    --vxe-ui-cascader-current-padding: var(--vxe-ui-layout-padding-mini);
   }
 }
 
@@ -83,8 +83,8 @@
 
 .vxe-cascader--panel-search {
   display: block;
-  padding: var(--vxe-ui-cascader-current-font-size);
-  width: calc(var(--vxe-ui-cascader-node-width) * var(--vxe-ui-cascader-chunk-size));
+  padding: var(--vxe-ui-cascader-current-padding);
+  width: 100%;
   .vxe-cascader-search--input {
     width: 100%;
   }
@@ -99,7 +99,7 @@
   min-height: 2em;
 }
 .vxe-cascader--total-btns {
-  padding-left: var(--vxe-ui-cascader-current-font-size);
+  padding-left: var(--vxe-ui-cascader-current-padding);
   flex-grow: 1;
 }
 .vxe-cascader--total-btns,
@@ -166,7 +166,7 @@
 .vxe-cascader-chunk--item-wrapper {
   flex-shrink: 0;
   border-left: 1px solid var(--vxe-ui-base-popup-border-color);
-  padding: var(--vxe-ui-cascader-current-font-size) 0;
+  padding: var(--vxe-ui-cascader-current-padding) 0;
   &:first-child {
     border-left: 0;
   }
@@ -190,7 +190,7 @@
   flex-direction: row;
   height: var(--vxe-ui-cascader-node-height);
   line-height: var(--vxe-ui-cascader-node-height);
-  padding: 0 calc(var(--vxe-ui-cascader-current-font-size) + 18px) 0 var(--vxe-ui-cascader-current-font-size);
+  padding: 0 calc(var(--vxe-ui-cascader-current-padding) + 18px) 0 var(--vxe-ui-cascader-current-padding);
   cursor: pointer;
   &:hover {
     background-color: var(--vxe-ui-cascader-node-hover-background-color);

package/styles/components/checkbox-button.scss

@@ -7,6 +7,12 @@
 // 局部变量
 .vxe-checkbox--button {
   --vxe-ui-checkbox--button-current-margin-left: var(--vxe-ui-base-margin-gap-default);
+  &.size--xlarge {
+    --vxe-ui-checkbox--button-current-margin-left: var(--vxe-ui-base-margin-gap-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-checkbox--button-current-margin-left: var(--vxe-ui-base-margin-gap-large);
+  }
   &.size--medium {
     --vxe-ui-checkbox--button-current-margin-left: var(--vxe-ui-base-margin-gap-medium);
   }

package/styles/components/checkbox.scss

@@ -4,6 +4,14 @@
 .vxe-checkbox {
   --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-default);
   --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-default);
+  &.size--xlarge {
+    --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-large);
+  }
   &.size--medium {
     --vxe-ui-checkbox-current-font-size: var(--vxe-ui-font-size-medium);
     --vxe-ui-checkbox-current-margin-right: var(--vxe-ui-base-margin-gap-medium);
@@ -23,6 +31,9 @@
   display: inline-flex;
   vertical-align: middle;
   line-height: 1;
+  &.type--button {
+    border-radius: var(--vxe-ui-base-border-radius);
+  }
 }
 
 .vxe-checkbox-slots {

package/styles/components/form.scss

@@ -10,6 +10,18 @@
   --vxe-ui-form-current-font-size: var(--vxe-ui-font-size-default);
   --vxe-ui-form-current-padding: var(--vxe-ui-form-item-padding-default);
   --vxe-ui-form-current-item-min-height: var(--vxe-ui-form-item-min-height-default);
+  &.size--xlarge {
+    --vxe-ui-form-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-form-current-padding: var(--vxe-ui-form-item-padding-xlarge);
+    --vxe-ui-form-current-item-min-height: var(--vxe-ui-form-item-min-height-xlarge);
+    --vxe-ui-form-current-button-height: var(--vxe-ui-button-height-xlarge)
+  }
+  &.size--large {
+    --vxe-ui-form-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-form-current-padding: var(--vxe-ui-form-item-padding-large);
+    --vxe-ui-form-current-item-min-height: var(--vxe-ui-form-item-min-height-large);
+    --vxe-ui-form-current-button-height: var(--vxe-ui-button-height-large)
+  }
   &.size--medium {
     --vxe-ui-form-current-font-size: var(--vxe-ui-font-size-medium);
     --vxe-ui-form-current-padding: var(--vxe-ui-form-item-padding-medium);

package/styles/components/icon.scss

@@ -83,6 +83,12 @@ $btnThemeList: (
 }
 
 .vxe-icon {
+  &.size--xlarge {
+    font-size: var(--vxe-ui-font-size-xlarge);
+  }
+  &.size--large {
+    font-size: var(--vxe-ui-font-size-large);
+  }
   &.size--medium {
     font-size: var(--vxe-ui-font-size-medium);
   }

package/styles/components/input.scss

@@ -1,5 +1,32 @@
 @use "sass:list";
 
+// 局部变量
+.vxe-input,
+.vxe-input--panel {
+  --vxe-ui-input-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-input-current-height-default: var(--vxe-ui-input-height-default);
+  &.size--xlarge {
+    --vxe-ui-input-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-input-current-height-default: var(--vxe-ui-input-height-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-input-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-input-current-height-default: var(--vxe-ui-input-height-large);
+  }
+  &.size--medium {
+    --vxe-ui-input-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-input-current-height-default: var(--vxe-ui-input-height-medium);
+  }
+  &.size--small {
+    --vxe-ui-input-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-input-current-height-default: var(--vxe-ui-input-height-small);
+  }
+  &.size--mini {
+    --vxe-ui-input-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-input-current-height-default: var(--vxe-ui-input-height-mini);
+  }
+}
+
 .vxe-input--readonly {
   color: var(--vxe-ui-font-color);
   display: inline-flex;
@@ -634,9 +661,9 @@
 }
 
 .vxe-input {
-  font-size: var(--vxe-ui-font-size-default);
-  height: var(--vxe-ui-input-height-default);
-  line-height: var(--vxe-ui-input-height-default);
+  font-size: var(--vxe-ui-input-current-font-size);
+  height: var(--vxe-ui-input-current-height-default);
+  line-height: var(--vxe-ui-input-current-height-default);
   .vxe-input--inner {
     &[type="date"]::-webkit-inner-spin-button,
     &[type="month"]::-webkit-inner-spin-button,
@@ -651,9 +678,6 @@
     }
   }
   &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-    height: var(--vxe-ui-input-height-medium);
-    line-height: var(--vxe-ui-input-height-medium);
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -663,9 +687,6 @@
     }
   }
   &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-    height: var(--vxe-ui-input-height-small);
-    line-height: var(--vxe-ui-input-height-small);
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -675,9 +696,6 @@
     }
   }
   &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-    height: var(--vxe-ui-input-height-mini);
-    line-height: var(--vxe-ui-input-height-mini);
     .vxe-input--inner {
       &[type="date"]::-webkit-inner-spin-button,
       &[type="month"]::-webkit-inner-spin-button,
@@ -689,11 +707,11 @@
 }
 
 @mixin getPanelStyle ($sizeIndex) {
-  $fontSizeList: var(--vxe-ui-font-size-default), var(--vxe-ui-font-size-medium), var(--vxe-ui-font-size-small), var(--vxe-ui-font-size-mini);
-  $timeWeekRowHeightList: var(--vxe-ui-input-date-time-week-row-height-default), var(--vxe-ui-input-date-time-week-row-height-medium), var(--vxe-ui-input-date-time-week-row-height-small), var(--vxe-ui-input-date-time-week-row-height-mini);
-  $monthYearRowHeightList: var(--vxe-ui-input-date-month-year-row-height-default), var(--vxe-ui-input-date-month-year-row-height-medium), var(--vxe-ui-input-date-month-year-row-height-small), var(--vxe-ui-input-date-month-year-row-height-mini);
-  $quarterRowHeightList: var(--vxe-ui-input-date-quarter-row-height-default), var(--vxe-ui-input-date-quarter-row-height-medium), var(--vxe-ui-input-date-quarter-row-height-small), var(--vxe-ui-input-date-quarter-row-height-mini);
-  $titleRowHeightList: var(--vxe-ui-input-date-title-height-default), var(--vxe-ui-input-date-title-height-medium), var(--vxe-ui-input-date-title-height-small), var(--vxe-ui-input-date-title-height-mini);
+  $fontSizeList: var(--vxe-ui-font-size-xlarge), var(--vxe-ui-font-size-large), var(--vxe-ui-font-size-default), var(--vxe-ui-font-size-medium), var(--vxe-ui-font-size-small), var(--vxe-ui-font-size-mini);
+  $timeWeekRowHeightList: var(--vxe-ui-input-date-time-week-row-height-xlarge), var(--vxe-ui-input-date-time-week-row-height-large), var(--vxe-ui-input-date-time-week-row-height-default), var(--vxe-ui-input-date-time-week-row-height-medium), var(--vxe-ui-input-date-time-week-row-height-small), var(--vxe-ui-input-date-time-week-row-height-mini);
+  $monthYearRowHeightList: var(--vxe-ui-input-date-month-year-row-height-xlarge), var(--vxe-ui-input-date-month-year-row-height-large), var(--vxe-ui-input-date-month-year-row-height-default), var(--vxe-ui-input-date-month-year-row-height-medium), var(--vxe-ui-input-date-month-year-row-height-small), var(--vxe-ui-input-date-month-year-row-height-mini);
+  $quarterRowHeightList: var(--vxe-ui-input-date-quarter-row-height-xlarge), var(--vxe-ui-input-date-quarter-row-height-large), var(--vxe-ui-input-date-quarter-row-height-default), var(--vxe-ui-input-date-quarter-row-height-medium), var(--vxe-ui-input-date-quarter-row-height-small), var(--vxe-ui-input-date-quarter-row-height-mini);
+  $titleRowHeightList: var(--vxe-ui-input-date-title-height-xlarge), var(--vxe-ui-input-date-title-height-large), var(--vxe-ui-input-date-title-height-default), var(--vxe-ui-input-date-title-height-medium), var(--vxe-ui-input-date-title-height-small), var(--vxe-ui-input-date-title-height-mini);
   
   font-size: list.nth($fontSizeList, $sizeIndex);
   .vxe-input--panel-wrapper {
@@ -714,13 +732,13 @@
   &.type--quarter,
   &.type--year {
     .vxe-input--panel-wrapper {
-      $widthList: 336px, 336px, 312px, 288px;
+      $widthList: 336px, 336px, 336px, 336px, 312px, 288px;
       width: list.nth($widthList, $sizeIndex);
     }
   }
   &.type--week {
     .vxe-input--panel-wrapper {
-      $widthList: 380px, 380px, 354px, 326px;
+      $widthList: 380px, 380px, 380px, 380px, 354px, 326px;
       width: list.nth($widthList, $sizeIndex);
     }
   }
@@ -728,12 +746,12 @@
     .vxe-input--panel-wrapper {
       display: inline-flex;
       flex-direction: column;
-      $widthList: 170px, 168px, 154px, 146px;
+      $widthList: 170px, 170px, 170px, 168px, 154px, 146px;
     }
   }
   &.type--datetime {
     .vxe-input--panel-left-wrapper {
-      $widthList: 336px, 336px, 312px, 288px;
+      $widthList: 336px, 336px, 336px, 336px, 312px, 288px;
       width: list.nth($widthList, $sizeIndex);
     }
     .vxe-input--panel-left-wrapper,
@@ -773,7 +791,7 @@
   }
   .vxe-input--time-picker-header,
   .vxe-input--date-picker-header {
-    $paddingBottomList: 8px, 7px, 6px, 5px;
+    $paddingBottomList: 10px, 9px, 8px, 7px, 6px, 5px;
     padding-bottom: list.nth($paddingBottomList, $sizeIndex);
   }
   .vxe-input--date-picker-body table,
@@ -781,12 +799,12 @@
     height: calc(list.nth($timeWeekRowHeightList, $sizeIndex) * 6 + list.nth($titleRowHeightList, $sizeIndex));
   }
   .vxe-input--time-picker-body {
-    $ulWidthList: 48px, 48px, 44px, 42px;
+    $ulWidthList: 48px, 48px, 48px, 48px, 44px, 42px;
     & > ul {
       width: list.nth($ulWidthList, $sizeIndex);
       &:before,
       &:after {
-        $heightList: 120px, 120px, 110px, 100px;
+        $heightList: 120px, 120px, 120px, 120px, 110px, 100px;
         height: list.nth($heightList, $sizeIndex);
       }
       & > li {
@@ -833,14 +851,20 @@
 }
 
 .vxe-input--panel {
-  @include getPanelStyle(1);
-  &.size--medium {
+  @include getPanelStyle(3);
+  &.size--xlarge {
+    @include getPanelStyle(1);
+  }
+  &.size--large {
     @include getPanelStyle(2);
   }
+  &.size--medium {
+    @include getPanelStyle(4);
+  }
   &.size--small {
-    @include getPanelStyle(3);
+    @include getPanelStyle(5);
   }
   &.size--mini {
-    @include getPanelStyle(4);
+    @include getPanelStyle(6);
   }
 }

package/styles/components/menu.scss

@@ -5,6 +5,14 @@
 .vxe-menu--collapse-wrapper {
   --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-default);
   --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-default);
+  &.size--xlarge {
+    --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-large);
+  }
   &.size--medium {
     --vxe-ui-menu-current-font-size: var(--vxe-ui-font-size-medium);
     --vxe-ui-menu-current-item-height: var(--vxe-ui-menu-item-height-medium);

package/styles/components/number-input.scss

@@ -1,6 +1,32 @@
 @use "sass:list";
 @use '../helpers/baseMixin.scss';
 
+// 局部变量
+.vxe-number-input {
+  --vxe-ui-number-input-current-font-size: var(--vxe-ui-font-size-default);
+  --vxe-ui-number-input-current-height: var(--vxe-ui-input-height-default);
+  &.size--xlarge {
+    --vxe-ui-number-input-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-number-input-current-height: var(--vxe-ui-input-height-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-number-input-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-number-input-current-height: var(--vxe-ui-input-height-large);
+  }
+  &.size--medium {
+    --vxe-ui-number-input-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-number-input-current-height: var(--vxe-ui-input-height-medium);
+  }
+  &.size--small {
+    --vxe-ui-number-input-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-number-input-current-height: var(--vxe-ui-input-height-small);
+  }
+  &.size--mini {
+    --vxe-ui-number-input-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-number-input-current-height: var(--vxe-ui-input-height-mini);
+  }
+}
+
 .vxe-number-input--readonly {
   color: var(--vxe-ui-font-color);
   display: inline-flex;
@@ -257,27 +283,7 @@
 }
 
 .vxe-number-input {
-  font-size: var(--vxe-ui-font-size-default);
-  height: var(--vxe-ui-input-height-default);
-  line-height: var(--vxe-ui-input-height-default);
-  .vxe-number-input--input {
-    &[type="number"]::-webkit-inner-spin-button {
-      height: 24px;
-    }
-  }
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-    height: var(--vxe-ui-input-height-medium);
-    line-height: var(--vxe-ui-input-height-medium);
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-    height: var(--vxe-ui-input-height-small);
-    line-height: var(--vxe-ui-input-height-small);
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-    height: var(--vxe-ui-input-height-mini);
-    line-height: var(--vxe-ui-input-height-mini);
-  }
+  font-size: var(--vxe-ui-number-input-current-font-size);
+  height: var(--vxe-ui-number-input-current-height);
+  line-height: var(--vxe-ui-number-input-current-height);
 }