vxe-pc-ui 3.16.7 → 3.16.9

package/packages/checkbox/src/group.ts

@@ -2,7 +2,8 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, globalMixins } from '../../ui'
-import VxeCheckboxComponent from './checkbox'
+import VxeCheckboxComponent from '../../checkbox'
+import VxeCheckboxButtonComponent from '../../checkbox-button'
 
 import type { VxeCheckboxGroupEmits, CheckboxGroupInternalData, VxeCheckboxPropTypes, ValueOf, CheckboxGroupReactData, VxeComponentSizeType, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
 
@@ -29,6 +30,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: Boolean as PropType<VxeCheckboxGroupPropTypes.Readonly>,
       default: null
     },
+    type: String as PropType<VxeCheckboxGroupPropTypes.Type>,
     disabled: {
       type: Boolean as PropType<VxeCheckboxGroupPropTypes.Disabled>,
       default: null
@@ -250,7 +252,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeCheckboxGroup
       const slots = $xeCheckboxGroup.$scopedSlots
 
-      const { status, options } = props
+      const { status, options, type } = props
       const defaultSlot = slots.default
       const valueField = $xeCheckboxGroup.computeValueField
       const labelField = $xeCheckboxGroup.computeLabelField
@@ -259,8 +261,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const titleField = $xeCheckboxGroup.computeTitleField
       const isReadonly = $xeCheckboxGroup.computeIsReadonly
       const isDisabled = $xeCheckboxGroup.computeIsDisabled
+      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
@@ -269,7 +272,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         ? defaultSlot({})
         : (options
             ? options.map(item => {
-              return h(VxeCheckboxComponent, {
+              return h(btnComp, {
                 key: item[valueField],
                 props: {
                   checkedValue: item[valueField],

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

@@ -803,17 +803,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeDateRangePicker.reactData
       const internalData = $xeDateRangePicker.internalData
 
+      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)
@@ -838,18 +845,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeDateRangePicker.reactData
       const internalData = $xeDateRangePicker.internalData
 
+      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

@@ -272,6 +272,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { accordion } = props
       const { menuEffectMaps } = internalData
       const { itemId, hasChild, isExpand } = item
+      const isCollapsed = $xeMenu.computeIsCollapsed
       const expanded = !isExpand
       if (hasChild) {
         evnt.stopPropagation()
@@ -290,9 +291,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
         item.isExpand = expanded
 
-        const el = $xeMenu.$refs.refElem as HTMLDivElement
-        if (el) {
-          const nemuEl = el.querySelector<HTMLDivElement>(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`)
+        const wrapperEl = isCollapsed ? $xeMenu.$refs.refCollapseElem as HTMLDivElement : $xeMenu.$refs.refElem as HTMLDivElement
+        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

@@ -239,6 +239,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       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 { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, createEvent, globalMixins } from '../../ui'
-import VxeRadioComponent from './radio'
-import VxeRadioButtonComponent from './button'
+import VxeRadioComponent from '../../radio'
+import VxeRadioButtonComponent from '../../radio-button'
 
 import type { VxeRadioGroupPropTypes, RadioGroupInternalData, VxeRadioGroupEmits, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeComponentPermissionInfo, VxeComponentSizeType, RadioGroupReactData, ValueOf } from '../../../types'
 
@@ -243,7 +243,7 @@ export default /* define-vxe-component start */ 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

@@ -620,6 +620,10 @@ export default /* define-vxe-component start */ 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: {
@@ -3582,16 +3586,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
     renderList (h: CreateElement, treeList: any[]) {
       const $xeTree = this
       const props = $xeTree
+      const slots = $xeTree.$scopedSlots
       const internalData = $xeTree.internalData
 
-      const { transform } = props
+      const { transform, emptyText } = props
       const { treeExpandedMaps } = internalData
       const childrenField = $xeTree.computeChildrenField
+      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);
@@ -557,17 +569,15 @@
   }
 }
 
-.vxe-form {
-  .vxe-form--item {
-    &:not(.is--vertical) {
-      .vxe-form--item-title {
-        min-height: var(--vxe-ui-form-current-item-min-height);
-      }
-    }
-    .vxe-form--item-content {
+.vxe-form--item {
+  &:not(.is--vertical) {
+    .vxe-form--item-title {
       min-height: var(--vxe-ui-form-current-item-min-height);
     }
   }
+  .vxe-form--item-content {
+    min-height: var(--vxe-ui-form-current-item-min-height);
+  }
 }
 
 .vxe-form--item {
@@ -581,19 +591,15 @@
 }
 
 .vxe-form--item {
-  &.size--small,
-  &.size--small,
-  &.size--mini {
-    .vxe-default-input[type="submit"],
-    .vxe-default-input[type="reset"] {
-      line-height: calc(var(--vxe-ui-form-current-button-height) - 2px);
-    }
-    .vxe-default-input,
-    .vxe-default-select {
-      height: var(--vxe-ui-form-current-button-height);
-    }
-    .vxe-default-textarea {
-      height: calc(var(--vxe-ui-form-current-button-height) * 2);
-    }
+  .vxe-default-input[type="submit"],
+  .vxe-default-input[type="reset"] {
+    line-height: calc(var(--vxe-ui-form-current-button-height) - 2px);
+  }
+  .vxe-default-input,
+  .vxe-default-select {
+    height: var(--vxe-ui-form-current-button-height);
+  }
+  .vxe-default-textarea {
+    height: calc(var(--vxe-ui-form-current-button-height) * 2);
   }
 }

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);
 }