vxe-pc-ui 3.15.13 → 3.15.15

package/packages/radio/src/group.ts

@@ -34,6 +34,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       default: null
     },
     type: String as PropType<VxeRadioGroupPropTypes.Type>,
+    status: {
+      type: String as PropType<VxeRadioGroupPropTypes.Status>,
+      default: () => getConfig().radioGroup.status
+    },
     options: Array as PropType<VxeRadioGroupPropTypes.Options>,
     optionProps: Object as PropType<VxeRadioGroupPropTypes.OptionProps>,
     strict: {
@@ -216,7 +220,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeRadioGroup
       const slots = $xeRadioGroup.$scopedSlots
 
-      const { options, type } = props
+      const { options, type, status } = props
       const vSize = $xeRadioGroup.computeSize
       const defaultSlot = slots.default
       const valueField = $xeRadioGroup.computeValueField as 'value'
@@ -226,6 +230,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       return h('div', {
         class: ['vxe-radio-group', {
+          [`theme--${status}`]: status,
           [`size--${vSize}`]: vSize
         }]
       }, defaultSlot

package/packages/tree/src/tree.ts

@@ -2,7 +2,7 @@ import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, createEvent, globalEvents, globalResize, renderEmptyElement, globalMixins } from '../../ui'
-import { calcTreeLine } from './util'
+import { calcTreeLine, getItemCacheObj } from './util'
 import { createComponentLog } from '../../ui/src/log'
 import { getSlotVNs } from '../../ui/src/vn'
 import { crossTreeDragNodeGlobal, getCrossTreeDragNodeInfo } from './store'
@@ -13,7 +13,7 @@ import VxeLoadingComponent from '../../loading'
 
 import type { TreeReactData, VxeTreeEmits, VxeTreeConstructor, VxeTreePropTypes, TreeInternalData, VxeTreeDefines, VxeTreePrivateMethods, VxeComponentSizeType, ValueOf } from '../../../types'
 
-const { errLog } = createComponentLog('tree')
+const { warnLog, errLog } = createComponentLog('tree')
 
 const { menus, getConfig, getI18n, getIcon } = VxeUI
 
@@ -498,6 +498,47 @@ function handleVisibleOrCheckMode (mode: '' | 'all' | 'first' | 'last' | null |
   return true
 }
 
+function insertTreeNode ($xeTree: VxeTreeConstructor, newRecords: any[], isAppend: boolean) {
+  const internalData = $xeTree.internalData
+
+  const { treeFullData, nodeMaps } = internalData
+  const keyField = $xeTree.computeKeyField
+  const parentField = $xeTree.computeParentField
+  const childrenField = $xeTree.computeChildrenField
+  const mapChildrenField = $xeTree.computeMapChildrenField
+  const funcName = isAppend ? 'push' : 'unshift'
+  newRecords.forEach((item) => {
+    const parentRowId = item[parentField]
+    const nodeid = $xeTree.getNodeId(item)
+    const matchObj = parentRowId ? XEUtils.findTree(treeFullData, (item) => parentRowId === item[keyField], { children: mapChildrenField }) : null
+    const itemRest = getItemCacheObj(item)
+    if (matchObj) {
+      const { item: parentItem } = matchObj
+      const parentRest = nodeMaps[$xeTree.getNodeId(parentItem)]
+      const parentLevel = parentRest ? parentRest.level : 0
+      let pChilds = parentItem[childrenField]
+      let pMapChilds = parentItem[mapChildrenField]
+      if (!XEUtils.isArray(pChilds)) {
+        pChilds = parentItem[childrenField] = []
+      }
+      if (!XEUtils.isArray(pMapChilds)) {
+        pMapChilds = parentItem[mapChildrenField] = []
+      }
+      itemRest.parent = parentItem
+      itemRest.items = pChilds
+      itemRest.level = parentLevel
+      pChilds[funcName](item)
+      pMapChilds[funcName](item)
+    } else {
+      if (parentRowId) {
+        warnLog('vxe.error.unableInsert')
+      }
+      treeFullData[funcName](item)
+    }
+    nodeMaps[nodeid] = itemRest
+  })
+}
+
 function createInternalData (): TreeInternalData {
   return {
     // initialized: false,
@@ -521,6 +562,9 @@ function createInternalData (): TreeInternalData {
       rowHeight: 0
     },
 
+    removeRowMaps: {},
+    insertRowMaps: {},
+
     // prevDragNode: null,
     // prevDragToChild: false,
     // prevDragPos: ''
@@ -544,6 +588,8 @@ function createReactData ():TreeReactData {
     treeList: [],
     updateExpandedFlag: 1,
     updateCheckboxFlag: 1,
+    insertRowFlag: 1,
+    removeRowFlag: 1,
     dragNode: null,
     dragTipText: ''
   }
@@ -1579,6 +1625,207 @@ export default /* define-vxe-component start */ defineVxeComponent({
       internalData.lastScrollLeft = 0
       return $xeTree.$nextTick()
     },
+    handleInsertNodeAt (records: any[], targetNodeOrNodeid: any, isInsertNextNode?: any) {
+      const $xeTree = this
+      const props = $xeTree
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { transform } = props
+      const { treeFullData, nodeMaps } = internalData
+      const keyField = $xeTree.computeKeyField
+      const parentField = $xeTree.computeParentField
+      const childrenField = $xeTree.computeChildrenField
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      if (!transform) {
+        errLog('vxe.error.reqSupportProp', ['insert() | insertAt() | insertNextAt()', 'transform'])
+        return Promise.resolve({ node: null, nodes: [] })
+      }
+      if (!XEUtils.isArray(records)) {
+        records = [records]
+      }
+      let targetNode = targetNodeOrNodeid
+      if (XEUtils.isString(targetNodeOrNodeid) || XEUtils.isNumber(targetNodeOrNodeid)) {
+        const nodeRest = nodeMaps[targetNodeOrNodeid]
+        if (nodeRest) {
+          targetNode = nodeRest.item
+        }
+      }
+      if (!records.length) {
+        return Promise.resolve({ node: null, nodes: [] })
+      }
+      const newRecords = records.map(record => XEUtils.assign({ [mapChildrenField]: [], [childrenField]: [] }, record))
+      const treeRecords = XEUtils.toArrayTree(newRecords, { key: keyField, parentKey: parentField, children: childrenField })
+
+      if (XEUtils.eqNull(targetNode)) {
+        insertTreeNode($xeTree, newRecords, false)
+      } else {
+        if (targetNode === -1) {
+          insertTreeNode($xeTree, newRecords, true)
+        } else {
+          const matchMapObj = XEUtils.findTree(treeFullData, item => targetNode[keyField] === item[keyField], { children: mapChildrenField })
+          if (matchMapObj) {
+            const { parent: parentNode } = matchMapObj
+            const parentMapChilds = parentNode ? parentNode[mapChildrenField] : treeFullData
+            const parentRest = nodeMaps[$xeTree.getNodeId(parentNode)]
+            const parentLevel = parentRest ? parentRest.level : 0
+            treeRecords.forEach((row, i) => {
+              if (parentNode) {
+                if (row[parentField] !== parentNode[keyField]) {
+                  errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, `${parentField}=${parentNode[keyField]}`])
+                  row[parentField] = parentNode[keyField]
+                }
+              } else {
+                if (row[parentField] !== null) {
+                  if (!XEUtils.eqNull(row[parentField])) {
+                    errLog('vxe.error.errProp', [`${parentField}=${row[parentField]}`, 'null'])
+                  }
+                  row[parentField] = null
+                }
+              }
+              let targetIndex = matchMapObj.index + i
+              if (isInsertNextNode) {
+                targetIndex = targetIndex + 1
+              }
+              parentMapChilds.splice(targetIndex, 0, row)
+            })
+            XEUtils.eachTree(treeRecords, (item) => {
+              const nodeid = $xeTree.getNodeId(item)
+              const nodeRest = getItemCacheObj(item)
+              nodeRest.level = parentLevel
+              if (item[childrenField]) {
+                item[mapChildrenField] = item[childrenField]
+              }
+              nodeMaps[nodeid] = nodeRest
+            }, { children: childrenField })
+            // 源
+            if (parentNode) {
+              const matchObj = XEUtils.findTree(treeFullData, item => targetNode[keyField] === item[keyField], { children: childrenField })
+              if (matchObj) {
+                const parentChilds = matchObj.items
+                let targetIndex = matchObj.index
+                if (isInsertNextNode) {
+                  targetIndex = targetIndex + 1
+                }
+                parentChilds.splice(targetIndex, 0, ...treeRecords)
+              }
+            }
+          } else {
+            warnLog('vxe.error.unableInsert')
+            insertTreeNode($xeTree, newRecords, true)
+          }
+        }
+      }
+      reactData.insertRowFlag++
+      $xeTree.cacheNodeMap()
+      $xeTree.handleData(true)
+      $xeTree.updateAfterDataIndex()
+      $xeTree.updateCheckboxStatus()
+      if (reactData.scrollYLoad) {
+        $xeTree.updateYSpace()
+      }
+      return $xeTree.$nextTick().then(() => {
+        return {
+          node: newRecords.length ? newRecords[newRecords.length - 1] : null,
+          nodes: newRecords
+        }
+      })
+    },
+    insert (records: any) {
+      const $xeTree = this
+
+      return $xeTree.handleInsertNodeAt(records, null)
+    },
+    insertAt (records: any, targetNodeOrNodeid?: any) {
+      const $xeTree = this
+
+      return $xeTree.handleInsertNodeAt(records, targetNodeOrNodeid)
+    },
+    insertNextAt (records: any, targetNodeOrNodeid?: any) {
+      const $xeTree = this
+
+      return $xeTree.handleInsertNodeAt(records, targetNodeOrNodeid, true)
+    },
+    remove (nodes?: any) {
+      const $xeTree = this
+      const props = $xeTree
+      const reactData = $xeTree.reactData
+      const internalData = $xeTree.internalData
+
+      const { transform } = props
+      const { treeFullData } = internalData
+      const childrenField = $xeTree.computeChildrenField
+      const mapChildrenField = $xeTree.computeMapChildrenField
+      if (!transform) {
+        errLog('vxe.error.reqSupportProp', ['remove()', 'transform'])
+        return Promise.resolve({ node: null, nodes: [] })
+      }
+      let delList: any[] = []
+      if (!nodes) {
+        nodes = treeFullData
+      } else if (!XEUtils.isArray(nodes)) {
+        nodes = [nodes]
+      }
+      if (!nodes.length) {
+        return Promise.resolve({ node: null, nodes: [] })
+      }
+
+      // 从数据源中移除
+      if (treeFullData === nodes) {
+        nodes = delList = treeFullData.slice(0)
+        internalData.treeFullData = []
+      } else {
+        nodes.forEach((item: any) => {
+          const nodeid = $xeTree.getNodeId(item)
+          const matchMapObj = XEUtils.findTree(treeFullData, item => nodeid === $xeTree.getNodeId(item), { children: mapChildrenField })
+          if (matchMapObj) {
+            const rItems = matchMapObj.items.splice(matchMapObj.index, 1)
+            delList.push(rItems[0])
+          }
+          const matchObj = XEUtils.findTree(treeFullData, item => nodeid === $xeTree.getNodeId(item), { children: childrenField })
+          if (matchObj) {
+            const rItems = matchObj.items.splice(matchObj.index, 1)
+            delList.push(rItems[0])
+          }
+        })
+      }
+      reactData.removeRowFlag++
+      reactData.insertRowFlag++
+      $xeTree.cacheNodeMap()
+      $xeTree.handleData(true)
+      $xeTree.updateAfterDataIndex()
+      $xeTree.updateCheckboxStatus()
+      if (reactData.scrollYLoad) {
+        $xeTree.updateYSpace()
+      }
+      return $xeTree.$nextTick().then(() => {
+        return $xeTree.recalculate()
+      }).then(() => {
+        return { node: delList.length ? delList[delList.length - 1] : null, nodes: delList }
+      })
+    },
+    getInsertRecords () {
+      const $xeTree = this
+      const internalData = $xeTree.internalData
+
+      const { insertRowMaps } = internalData
+      const insertRecords: any[] = []
+      XEUtils.each(insertRowMaps, (row) => {
+        insertRecords.push(row)
+      })
+      return insertRecords
+    },
+    getRemoveRecords () {
+      const $xeTree = this
+      const internalData = $xeTree.internalData
+
+      const { removeRowMaps } = internalData
+      const removeRecords: any[] = []
+      XEUtils.each(removeRowMaps, (row) => {
+        removeRecords.push(row)
+      })
+      return removeRecords
+    },
     handleNodeMousedownEvent (evnt: MouseEvent, node: any) {
       const $xeTree = this
       const props = $xeTree
@@ -3102,8 +3349,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (drag && !transform) {
       errLog('vxe.error.notSupportProp', ['drag', 'transform=false', 'transform=true'])
     }
-    if (dragOpts.isCrossTreeDrag) {
-      errLog('vxe.error.notProp', ['drag-config.isCrossTreeDrag'])
+    if (dragOpts.isCrossTreeDrag && !dragOpts.isCrossDrag) {
+      errLog('vxe.error.reqSupportProp', ['drag-config.isCrossTreeDrag', 'drag-config.isCrossDrag'])
     }
     // if (valueField) {
     //   errLog('vxe.error.delProp', ['value-field', 'value-field'])

package/packages/tree/src/util.ts

@@ -1,4 +1,4 @@
-import type { VxeTreeConstructor } from '../../../types'
+import type { VxeTreeConstructor, VxeTreeDefines } from '../../../types'
 
 function countTreeExpand ($xeTree: VxeTreeConstructor, prevNode: any) {
   let count = 1
@@ -32,3 +32,19 @@ export function calcTreeLine ($xeTree: VxeTreeConstructor, node: any, prevNode:
   }
   return (rowHeight || 28) * expandSize - (prevNode ? 1 : 12)
 }
+
+export function getItemCacheObj (item: any): VxeTreeDefines.NodeCacheItem {
+  return {
+    item,
+    index: -1,
+    $index: -1,
+    _index: -1,
+    items: [],
+    parent: null,
+    nodes: [],
+    level: 0,
+    treeIndex: -1,
+    lineCount: 0,
+    treeLoaded: false
+  }
+}

package/packages/ui/index.ts

@@ -185,7 +185,10 @@ setConfig({
   formView: {},
   icon: {},
   iconPicker: {
-    icons: ['home', 'company', 'comment', 'setting', 'send', 'envelope', 'envelope-open', 'bell', 'search', 'print', 'pc', 'goods', 'chart-line', 'edit', 'delete', 'save', 'folder', 'microphone', 'flag', 'link', 'location', 'sunny', 'rmb', 'usd', 'user', 'add-user', 'add-users', 'star', 'unlock', 'time', 'text', 'feedback', 'calendar', 'association-form', 'cloud-download', 'cloud-upload', 'file', 'subtable', 'chart-bar-x', 'chart-bar-y', 'chart-line', 'chart-pie', 'chart-radar']
+    icons: ['home', 'company', 'comment', 'setting', 'send', 'envelope', 'envelope-open', 'bell', 'search', 'print', 'pc', 'goods', 'chart-line', 'edit', 'delete', 'save', 'folder', 'microphone', 'flag', 'link', 'location', 'sunny', 'rmb', 'usd', 'user', 'add-user', 'add-users', 'star', 'unlock', 'time', 'text', 'feedback', 'calendar', 'association-form', 'cloud-download', 'cloud-upload', 'file', 'subtable', 'chart-bar-x', 'chart-bar-y', 'chart-line', 'chart-pie', 'chart-radar'],
+    popupConfig: {
+      // chunkSize: 4
+    }
   },
   image: {
     draggable: null,

package/styles/components/button.scss

@@ -2,65 +2,33 @@
 @use "sass:list";
 @use '../helpers/baseMixin.scss';
 @use '../helpers/placement.scss';
+@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)
-  ),
-  (
-    name: "perfect",
-    textColor: var(--vxe-ui-table-header-background-color),
-    btnColor: var(--vxe-ui-font-color),
-    btnLightenColor: var(--vxe-ui-table-header-background-color),
-    btnDarkenColor: var(--vxe-ui-table-header-background-color),
-    btnDisabledColor: var(--vxe-ui-table-header-background-color)
-  )
-);
+// 局部变量
+.vxe-button {
+  --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-default);
+  --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--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);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-medium);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-medium);
+  }
+  &.size--small {
+    --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-small);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-small);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-small);
+  }
+  &.size--mini {
+    --vxe-ui-button-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-button-current-margin-left: var(--vxe-ui-base-margin-gap-mini);
+    --vxe-ui-button-current-height: var(--vxe-ui-button-height-mini);
+    --vxe-ui-button-current-border-radius: var(--vxe-ui-button-round-border-radius-mini);
+  }
+}
 
 .vxe-button {
   display: inline-flex;
@@ -71,7 +39,7 @@ $btnThemeList: (
   position: relative;
   background-color: var(--vxe-ui-layout-background-color);
   outline: 0;
-  font-size: var(--vxe-ui-font-size-default);
+  font-size: var(--vxe-ui-button-current-font-size);
   max-width: var(--vxe-ui-button-max-width);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -130,8 +98,8 @@ $btnThemeList: (
         color: var(--vxe-ui-font-primary-darken-color);
       }
     }
-    @for $index from 0 to list.length($btnThemeList) {
-      $item: list.nth($btnThemeList, $index + 1);
+    @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);
         &:not(.is--disabled) {
@@ -157,7 +125,7 @@ $btnThemeList: (
     border: 1px solid var(--vxe-ui-input-border-color);
     text-decoration: none;
     &.is--round {
-      border-radius: var(--vxe-ui-button-round-border-radius-default);
+      border-radius: var(--vxe-ui-button-current-border-radius);
     }
     &:not(.is--round) {
       border-radius: var(--vxe-ui-base-border-radius);
@@ -166,7 +134,7 @@ $btnThemeList: (
       padding: 0 0.5em;
       text-align: center;
       justify-content: center;
-      min-width: var(--vxe-ui-button-height-default);
+      min-width: var(--vxe-ui-button-current-height);
       border-radius: 50%;
     }
     &.is--shadow {
@@ -188,8 +156,21 @@ $btnThemeList: (
         background-color: var(--vxe-ui-layout-background-color);
       }
     }
-    @for $index from 0 to list.length($btnThemeList) {
-      $item: list.nth($btnThemeList, $index + 1);
+    &:not(.is--disabled) {
+      &:hover {
+        color: var(--vxe-ui-font-primary-lighten-color);
+      }
+      &:focus {
+        border-color: var(--vxe-ui-font-primary-color);
+      }
+      &:active {
+        color: var(--vxe-ui-font-primary-darken-color);
+        border-color: var(--vxe-ui-font-primary-darken-color);
+        background-color: var(--vxe-ui-layout-background-color);
+      }
+    }
+    @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+      $item: list.nth(themeStatus.$btnThemeList, $index + 1);
       $textColor: map.get($item, textColor);
       $btnColor: map.get($item, btnColor);
       &.theme--#{map.get($item, name)} {
@@ -219,56 +200,12 @@ $btnThemeList: (
       }
     }
   }
-  &.size--medium {
-    font-size: var(--vxe-ui-font-size-medium);
-    &.type--button {
-      &.is--circle {
-        min-width: var(--vxe-ui-button-height-medium);
-      }
-      &.is--round {
-        border-radius: var(--vxe-ui-button-round-border-radius-medium);
-      }
-    }
-  }
-  &.size--small {
-    font-size: var(--vxe-ui-font-size-small);
-    &.type--button {
-      height: var(--vxe-ui-button-height-small);
-      &.is--circle {
-        min-width: var(--vxe-ui-button-height-small);
-      }
-      &.is--round {
-        border-radius: var(--vxe-ui-button-round-border-radius-small);
-      }
-    }
-  }
-  &.size--mini {
-    font-size: var(--vxe-ui-font-size-mini);
-    &.type--button {
-      height: var(--vxe-ui-button-height-mini);
-      &.is--circle {
-        min-width: var(--vxe-ui-button-height-mini);
-      }
-      &.is--round {
-        border-radius: var(--vxe-ui-button-round-border-radius-mini);
-      }
-    }
-  }
 }
 
 
 .vxe-button {
   &.type--button {
-    height: var(--vxe-ui-button-height-default);
-    &.size--medium {
-      height: var(--vxe-ui-button-height-medium);
-    }
-    &.size--small {
-      height: var(--vxe-ui-button-height-small);
-    }
-    &.size--mini {
-      height: var(--vxe-ui-button-height-mini);
-    }
+    height: var(--vxe-ui-button-current-height);
   }
 }
 
@@ -308,8 +245,8 @@ $btnThemeList: (
   outline: 0;
   & > .vxe-button {
     &.type--button {
-      @for $index from 0 to list.length($btnThemeList) {
-        $item: list.nth($btnThemeList, $index + 1);
+      @for $index from 0 to list.length(themeStatus.$btnThemeList) {
+        $item: list.nth(themeStatus.$btnThemeList, $index + 1);
         $btnColor: map.get($item, btnColor);
         &.theme--#{map.get($item, name)} {
           color: $btnColor;
@@ -323,16 +260,16 @@ $btnThemeList: (
         color: var(--vxe-ui-font-primary-lighten-color);
       }
       &.type--text {
-        @for $index from 0 to list.length($btnThemeList) {
-          $item: list.nth($btnThemeList, $index + 1);
+        @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, btnLightenColor);
           }
         }
       }
       &.type--button {
-        @for $index from 0 to list.length($btnThemeList) {
-          $item: list.nth($btnThemeList, $index + 1);
+        @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, btnColor);
             background-color: map.get($item, btnLightenColor);
@@ -386,16 +323,7 @@ $btnThemeList: (
 
 .vxe-button.type--button,
 .vxe-button--dropdown {
-  margin-right: var(--vxe-ui-base-margin-gap-default);
-  &.size--medium {
-    margin-right: var(--vxe-ui-base-margin-gap-medium);
-  }
-  &.size--small {
-    margin-right: var(--vxe-ui-base-margin-gap-small);
-  }
-  &.size--mini {
-    margin-right: var(--vxe-ui-base-margin-gap-mini);
-  }
+  margin-right: var(--vxe-ui-button-current-margin-left);
   &:last-of-type {
     margin-right: 0;
   }
@@ -403,14 +331,5 @@ $btnThemeList: (
 
 .vxe-button+.vxe-button--dropdown,
 .vxe-button--dropdown+.vxe-button {
-  margin-left: var(--vxe-ui-base-margin-gap-default);
-  &.size--medium {
-    margin-left: var(--vxe-ui-base-margin-gap-medium);
-  }
-  &.size--small {
-    margin-left: var(--vxe-ui-base-margin-gap-small);
-  }
-  &.size--mini {
-    margin-left: var(--vxe-ui-base-margin-gap-mini);
-  }
-}
+  margin-left: var(--vxe-ui-button-current-margin-left);
+}