plain-design 1.0.0-beta.43 → 1.0.0-beta.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.43",
+  "version": "1.0.0-beta.44",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",
@@ -29,63 +29,63 @@
     "@types/react-dom": "18.2.4"
   },
   "dependencies": {
-    "@types/color": "^3.0.3",
-    "@types/react-transition-group": "^4.4.1",
-    "color": "^4.2.3",
-    "dayjs": "^1.10.4",
+    "@types/color": "3.0.6",
+    "@types/react-transition-group": "4.4.10",
+    "color": "4.2.3",
+    "dayjs": "1.11.10",
     "plain-icons": "0.0.7",
     "plain-utils": "0.1.57",
-    "react-flip-move": "^3.0.4",
-    "react-transition-group": "^4.4.1"
+    "react-flip-move": "3.0.5",
+    "react-transition-group": "4.4.5"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-transform-class-properties": "^7.22.3",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@babel/plugin-transform-class-properties": "7.23.3",
+    "@babel/preset-env": "7.23.7",
+    "@babel/preset-react":"7.23.3",
+    "@babel/preset-typescript": "7.23.3",
     "@types/classnames": "^2.2.11",
     "@types/react": "18.2.4",
     "@types/react-dom": "18.2.4",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.2.21",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "@vue/cli-plugin-babel": "4.5.19",
+    "@vue/cli-plugin-eslint": "4.5.19",
+    "@vue/cli-plugin-typescript": "4.5.19",
+    "@vue/cli-service": "4.5.19",
+    "@vue/compiler-sfc": "3.4.3",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "autoprefixer": "^8.6.5",
-    "axios": "^0.21.1",
-    "babel-plugin-import": "^1.13.3",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "core-js": "^3.8.3",
+    "autoprefixer": "8.6.5",
+    "axios": "1.6.8",
+    "babel-plugin-import": "1.13.8",
+    "babel-plugin-syntax-jsx": "6.18.0",
+    "core-js": "3.35.0",
     "cross-env": "^7.0.3",
     "css-loader": "3.6.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint": "6.8.0",
+    "eslint-plugin-vue": "7.20.0",
     "exceljs": "^4.2.1",
     "file-saver": "^2.0.5",
-    "fork-ts-checker-webpack-plugin": "^6.2.4",
-    "mini-css-extract-plugin": "^1.4.1",
+    "fork-ts-checker-webpack-plugin": "6.5.3",
+    "mini-css-extract-plugin": "1.6.2",
     "mockjs": "^1.1.0",
-    "plain-design-composition": "^0.0.186",
-    "postcss": "^8.2.13",
-    "postcss-loader": "^4.2.0",
-    "qs": "^6.10.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "sass": "~1.32.13",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^9.4.2",
-    "ts-node": "^9.1.1",
-    "tslib": "^2.5.0",
+    "plain-design-composition": "^0.0.189",
+    "postcss": "8.4.32",
+    "postcss-loader": "4.3.0",
+    "qs": "6.11.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sass": "1.32.13",
+    "sass-loader": "8.0.2",
+    "style-loader": "2.0.0",
+    "ts-loader": "9.5.1",
+    "ts-node": "9.1.1",
+    "tslib": "2.6.2",
     "typescript": "^4.9.5",
-    "url-loader": "^4.1.1",
-    "vue": "^3.2.21",
-    "vue-template-compiler": "^2.6.12",
+    "url-loader": "4.1.1",
+    "vue": "3.4.3",
+    "vue-template-compiler": "2.7.16",
     "webpack-bundle-analyzer": "^4.4.1",
-    "webpack-cli": "^4.6.0"
+    "webpack-cli": "4.10.0"
   }
 }

package/src/packages/components/Application/theme/theme.ts

@@ -67,7 +67,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
 
   return {
     /*---------------------------------------base-------------------------------------------*/
-    'font-family': "Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,noto sans,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif",
+    'font-family': `v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
     'scrollbar-size': '9px',
     'border-color': "rgba(0, 0, 0, .06)",
     'background-color': "#ffffff",
@@ -75,7 +75,7 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'background-hover': referenceVariable("gray-2"),
     'scrollbar-color': referenceVariable("gray-3"),
     'loading-mask-color': 'rgba(255,255,255,0.5)',
-    'line-height': 'plv(line-height)',
+    'line-height': '1.5715',
 
     'font-size-mini': '12px',
     'font-size-small': '12px',
@@ -88,12 +88,17 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'text-3': 'rgba(0,0,0,0.45)',
     'text-4': 'rgba(0,0,0,0.25)',
     'text-placeholder': 'rgba(0,0,0,0.35)',
+    /*---------------------------------------background-color-------------------------------------------*/
+    'bg-1': '#f2f3f5',
+    'bg-2': '#FFFFFF',
+    'bg-3': '#FFFFFF',
+    'bg-4': '#FFFFFF',
     /*---------------------------------------margin-------------------------------------------*/
     /*height of sizes*/
-    'margin-mini': '12px',
+    'margin-mini': '8px',
     'margin-small': '12px',
     'margin-normal': '16px',
-    'margin-large': '16px',
+    'margin-large': '20px',
     /*---------------------------------------box-------------------------------------------*/
     /*min-width of sizes*/
     'box-size-mini-min-width': '',
@@ -101,10 +106,10 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'box-size-normal-min-width': '68px',
     'box-size-large-min-width': '88px',
     /*height of sizes*/
-    'box-size-mini-height': '24px',
-    'box-size-small-height': '28px',
-    'box-size-normal-height': '32px',
-    'box-size-large-height': '36px',
+    'box-size-mini-height': '26px',
+    'box-size-small-height': '30px',
+    'box-size-normal-height': '34px',
+    'box-size-large-height': '40px',
     /*padding x of sizes*/
     'box-size-mini-padding': '0 11px',
     'box-size-small-padding': '0 15px',
@@ -121,7 +126,15 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'box-size-normal-border-radius': '2px',
     'box-size-large-border-radius': '2px',
     /*---------------------------------------input-------------------------------------------*/
-    'input-padding-x': '11px',
+    'input-padding-x-mini': '9px',
+    'input-padding-x-small': '11px',
+    'input-padding-x-normal': '13px',
+    'input-padding-x-large': '15px',
+
+    'input-clear-size-mini': '16px',
+    'input-clear-size-small': '18px',
+    'input-clear-size-normal': '21px',
+    'input-clear-size-large': '23px',
     /*---------------------------------------dialog-------------------------------------------*/
     'dialog-mask-color': 'rgba(0,0,0,0.3)',
     'dialog-head-padding-x': '20px',
@@ -161,11 +174,6 @@ function createOtherVars(prefix: string | null, referenceVariable: (name: string
     'dropdown-size-normal-padding-y': '6px',
     'dropdown-size-large-padding-x': '10px',
     'dropdown-size-large-padding-y': '6px',
-    /*---------------------------------------input-------------------------------------------*/
-    'input-clear-size-mini': '16px',
-    'input-clear-size-small': '16px',
-    'input-clear-size-normal': '20px',
-    'input-clear-size-large': '20px',
     /*---------------------------------------tag-------------------------------------------*/
     'tag-size-mini-height': '20px',
     'tag-size-small-height': '22px',
@@ -244,6 +252,10 @@ export function createThemeConfigurationData(prefix: string | null, config?: Dee
         'text-2': 'rgba(255,255,255,0.65)',
         'text-3': 'rgba(255,255,255,0.45)',
         'text-4': 'rgba(255,255,255,0.25)',
+        'bg-1': '#101014',
+        'bg-2': '#18181c',
+        'bg-3': '#18181c',
+        'bg-4': '#242429',
         'text-placeholder': 'rgba(255,255,255,0.35)',
         'dialog-mask-color': 'rgba(0,0,0,0.75)',
         // 'table-head-background': '#252527',

package/src/packages/components/AutoLoadingObserver/index.tsx

@@ -0,0 +1,172 @@
+import {computed, createCounter, onBeforeUnmount, reactive} from "plain-design-composition";
+import {delay} from "plain-utils/utils/delay";
+
+export const AutoLoadingObserver = (() => {
+
+  const globalState = reactive({
+    /**
+     * 当前激活的observer，比如点击按钮的话，emit click事件之前激活这个按钮的observer，emit click之后清除这个observer
+     * @author  韦胜健
+     * @date    2024/3/20 16:11
+     */
+    currentObserver: null as null | { observerId: string },
+    /**
+     * 正在loading的observerId，值是一个数字，是subjectId；激活observer的时候可能会一次性并发执行多个异步任务，所以这里值是一个数字，当值清空的时候意味着关闭observer的加载状态
+     * @author  韦胜健
+     * @date    2024/3/20 16:11
+     */
+    loadingMap: {} as Record<string, string[] | undefined>
+  });
+
+  const utils = {
+    /*创建一个observerId*/
+    nextObserverId: createCounter('auto_loading_observer'),
+    /*创建一个subjectId*/
+    nextSubjectId: createCounter('auto_loading_subject'),
+  };
+
+  /**
+   * 创建一个observer，要记得组件销毁的时候执行dispose
+   * @author  韦胜健
+   * @date    2024/3/20 16:13
+   */
+  const useObserver = () => {
+    const observerId = utils.nextObserverId();
+    const tapStart = () => {globalState.currentObserver = { observerId };};
+    const tapEnd = () => {globalState.currentObserver = null;};
+    const isLoading = computed(() => !!globalState.loadingMap[observerId]?.length);
+    onBeforeUnmount(() => isLoading.effect.stop());
+    return reactive({ tapStart, tapEnd, isLoading });
+  };
+
+  /**
+   * 一个异步任务执行时，调用这个subject
+   * @author  韦胜健
+   * @date    2024/3/20 16:14
+   */
+  const subject = (promise: Promise<any>) => {
+    /*没有激活的observer，证明当前异步任务不需要开启loading*/
+    if (!globalState.currentObserver) {return;}
+
+    /*为本次执行异步任务创建一个subjectId*/
+    const subjectId = utils.nextSubjectId();
+    /*当前激活的observerId*/
+    const { observerId } = globalState.currentObserver;
+
+    /*关联subjectId与observerId，开启observer的加载状态*/
+    if (!globalState.loadingMap[observerId]) {
+      globalState.loadingMap = { ...globalState.loadingMap, [observerId]: [subjectId] };
+    } else {
+      globalState.loadingMap[observerId]!.push(subjectId);
+    }
+
+    const startDatetime = Date.now(); // 异步任务执行开始时间
+    const minDatetime = 1000;         // loading最小时间
+
+    /*不论成功或者失败，都解除关联subjectId与observerId*/
+    promise.finally(async () => {
+
+      /*异步任务执行结束之后，立即将observe放回去，因为可能是串行执行的异步任务，下一个异步任务也要延续这个observe的loading状态*/
+      globalState.currentObserver = { observerId };
+      delay().then(() => {globalState.currentObserver = null;});
+
+      /*如果耗费时间小于最小时间，则等待剩余的时间再关闭loading*/
+      const waitDatetime = startDatetime + minDatetime - Date.now();
+      if (waitDatetime > 0) {await delay(waitDatetime);}
+
+      const index = globalState.loadingMap[observerId]?.indexOf(subjectId);
+      if (index != null && index > -1) {
+        const arr = [...globalState.loadingMap[observerId]!];
+        arr.splice(index, 1);
+        if (arr.length) {
+          globalState.loadingMap[observerId] = arr;
+        } else {
+          const map = { ...globalState.loadingMap };
+          delete map[observerId];
+          globalState.loadingMap = map;
+        }
+      }
+
+    });
+  };
+
+  const request = (id: string, duraiton?: number) => {
+
+    const duration = duraiton || (Math.random() * 2000 + 1000);
+    const promise = delay(duration).then(() => {
+      console.log('request:', id);
+      return { id, duration };
+    });
+    AutoLoadingObserver.subject(promise);
+
+    return promise;
+  };
+
+  return {
+    useObserver,
+    subject,
+    globalState,
+    request,
+  };
+})();
+
+
+/*export const NextTick = (() => {
+
+  const generateNextTickId = createCounter('next_tick');
+  const nextTickMap = {} as Record<string, boolean | undefined>;
+
+  function clearNextTick(id: string) {
+    delete nextTickMap[id];
+  }
+
+  function setNextTick(fn: SimpleFunction) {
+    const id = generateNextTickId();
+    nextTickMap[id] = true;
+    console.log('nextTickMap', nextTickMap);
+
+    delay().then(() => {
+      if (id in nextTickMap) {
+        fn();
+        delete nextTickMap[id];
+      }
+    });
+
+    return id;
+  }
+
+  return {
+    clearNextTick,
+    setNextTick,
+  };
+})();
+
+export const NextTick_TEST = (() => {
+
+  const generateNextTickId = createCounter('next_tick');
+  const nextTickMap = {} as Record<string, boolean | undefined>;
+
+  function clearNextTick(id: string) {
+    delete nextTickMap[id];
+  }
+
+  function setNextTick(fn: SimpleFunction) {
+    const id = generateNextTickId();
+    nextTickMap[id] = true;
+    console.log('nextTickMap', nextTickMap);
+
+    delay(1000).then(() => {
+      if (id in nextTickMap) {
+        fn();
+        delete nextTickMap[id];
+      }
+    });
+
+    return id;
+  }
+
+  return {
+    clearNextTick,
+    setNextTick,
+  };
+})();*/

package/src/packages/components/AutoTable/auto-table.scss

@@ -2,6 +2,16 @@
   position: relative;
 
   @include sizeMixin(auto-table, (font-size)) {
+    .table-operation-bar {
+      .table-operation-bar-left {
+        @include comp(input-group) {
+          display: inline-flex;
+          & + button {
+            margin-left: $margin;
+          }
+        }
+      }
+    }
   }
 
   .virtual-table-head-table {
@@ -19,14 +29,9 @@
     }
   }
   .table-operation-bar {
-    .table-operation-bar-left {
-      @include comp(input-group) {
-        display: inline-flex;
-        & + button {
-          margin-left: 4px;
-        }
-      }
-    }
+    position: relative;
+    /*virtual-table-head-table-wrapper的z-index是4*/
+    z-index: 5;
   }
 
   &.filter-form-expanded {
@@ -63,6 +68,12 @@
       }
     }
   }
+
+  &.auto-table-loading {
+    .table-empty {
+      display: none;
+    }
+  }
 }
 
 @include comp(auto-table-tips) {

package/src/packages/components/AutoTable/filter/useTableOption.filter.search.tsx

@@ -51,8 +51,8 @@ export const useTableOptionFilterSearch = AutoModule.createRegistration((
      * @author  韦胜健
      * @date    2023.1.8 19:06
      */
-    onNormalSearch: () => {
-      methods.pageMethods.reload();
+    onNormalSearch: async () => {
+      await methods.pageMethods.reload();
     },
     /**
      * 当设置面板中的搜索栏值变化时取出来变化的值，更新到外部的filter form single组件实例中
@@ -136,7 +136,7 @@ export const useTableOptionFilterSearch = AutoModule.createRegistration((
           {...{
             filterOptions: filterOptions.value,
             initialState: state.data,
-            onSearch: handler.onNormalSearch,
+            handleSearch: handler.onNormalSearch,
             ...config.searchAttrs,
           }}
         />

package/src/packages/components/AutoTable/use/useTableOption.fill.tsx

@@ -80,6 +80,7 @@ export const useTableOptionFill = AutoModule.createRegistration((
         };
       })();
 
+      await delay(73)
       /**
        * 计算可以用来渲染行的高度
        * parent.top+parent.height可以得到父节点底边界的top值；
@@ -101,7 +102,7 @@ export const useTableOptionFill = AutoModule.createRegistration((
       });*/
 
       /*计算撑满高度的行数*/
-      const showRows = Math.floor(availableHeight / bodyRowHeight) - 1;
+      const showRows = Math.floor(availableHeight / bodyRowHeight);
 
       /*更新分页查询信息*/
       pagination.state.size = showRows;

package/src/packages/components/AutoTable/use/useTableOption.loading.tsx

@@ -19,8 +19,10 @@ export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) =
     metas: [] as iTableOptionLoadingMeta[],
   });
 
+  const isLoading = () => !!state.metas.length;
+
   hooks.onTableRender.use({
-    processor: ({ list, render }) => {!!state.metas.length && list.push({ render, key: 'loading', seq: 0 });},
+    processor: ({ list, render }) => {isLoading() && list.push({ render, key: 'loading', seq: 0 });},
     render: () => (
       !!state.metas.length && <div className="auto-table-loading-wrapper">
         {(() => {
@@ -40,6 +42,10 @@ export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) =
     )
   });
 
+  hooks.onTableClass.use((classList) => {
+    isLoading() && classList.push('auto-table-loading');
+  });
+
   const minTimerDuration = 500;
 
   const loading = (meta?: Omit<iTableOptionLoadingMeta, 'id'>) => {
@@ -59,7 +65,7 @@ export const useTableOptionLoading = AutoModule.createRegistration(({ hooks }) =
     };
   };
 
-  return { state, loading };
+  return { state, loading, isLoading };
 });
 
 const nextLoadingId = createCounter('auto_table_loading');

package/src/packages/components/AutoTable/use/useTableOption.pagination.tsx

@@ -71,6 +71,11 @@ export const useTableOptionPagination = AutoModule.createRegistration((
     pageSizeOptions: deepcopy(config.pageSizeOptions),
   });
 
+  if (!!config.showRows && state.pageSizeOptions.indexOf(config.showRows) === -1) {
+    const index = state.pageSizeOptions.findIndex(i => i > config.showRows);
+    state.pageSizeOptions.splice(index, 0, config.showRows);
+  }
+
   const handler = {
     onSizeChange: async (size: number) => {await methods.changeSize(size);},
     onJump: async (page: number) => {await methods.jump(page);},

package/src/packages/components/Button/button.scss

@@ -147,11 +147,11 @@
     top: 1px;
   }
 
-  &:not(.button-icon-only) {
-    & > .button-icon {
-      margin-right: 4px;
-    }
-  }
+  //&:not(.button-icon-only) {
+  //  & > .button-icon {
+  //    margin-right: 4px;
+  //  }
+  //}
 
   &.button-no-padding {
     padding: 0;

package/src/packages/components/Button/index.tsx

@@ -1,5 +1,5 @@
 import './button.scss';
-import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, useClasses, useNumber, useRefs, useStyles, watch} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iHTMLButtonElement, mergeAttrs, PropType, reactive, StyleProperties, useClasses, useNumber, useRefs, useStyles, watch} from "plain-design-composition";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {throttle} from "plain-utils/utils/throttle";
@@ -8,6 +8,8 @@ import {useClickWave} from "../../directives/ClickWave";
 import {Icon} from "../Icon";
 import {Loading} from "../Loading";
 import {ButtonGroup} from "../ButtonGroup";
+import {AutoLoadingObserver} from "../AutoLoadingObserver";
+import {useCollapseStyles} from "../../uses/useCollapseStyles";
 
 export const Button = designComponent({
   name: '-button',
@@ -22,7 +24,7 @@ export const Button = designComponent({
     block: { type: Boolean },                                               // 块级元素
     throttleClick: { type: [Number, Boolean] },                             // click节流
     asyncHandler: { type: Function as PropType<(e: MouseEvent) => void> },  // 异步处理函数，会自动开启关闭loading状态
-
+    autoLoading: { type: Boolean, default: true, },                         // 是否自动检测异步任务的执行并且开启loading
     ...EditProps,
     ...StyleProps,
 
@@ -41,7 +43,14 @@ export const Button = designComponent({
     });
     const { numberState } = useNumber(props, ['width']);
     const { styleComputed } = useStyle();
-    const { editState, editComputed } = useEdit();
+    const autoLoadingObserver = AutoLoadingObserver.useObserver();
+    const { editState, editComputed } = useEdit({
+      adjust: (ret) => {
+        if (props.autoLoading && autoLoadingObserver.isLoading && !ret.loading) {
+          ret.loading = true;
+        }
+      }
+    });
 
     const group = ButtonGroup.use.inject(null);
     const mode = computed(() => props.mode || group?.props.mode || 'flat');
@@ -49,6 +58,11 @@ export const Button = designComponent({
 
     const state = reactive({
       handleClick: null as ((e: MouseEvent) => void) | null,
+      handleClickWrapper: (e: MouseEvent) => {
+        props.autoLoading && autoLoadingObserver.tapStart();
+        state.handleClick?.(e);
+        props.autoLoading && autoLoadingObserver.tapEnd();
+      },
       handleClickInner: async (e: MouseEvent) => {
         // e.stopPropagation();
         if (!editComputed.value.editable) {
@@ -101,14 +115,50 @@ export const Button = designComponent({
         'button-block': !!props.block,
         'button-disabled': !!editComputed.value.disabled,
         'button-readonly': !!editComputed.value.readonly,
-        'button-icon-only': !!props.icon && !props.label,
+        'button-icon-only': buttonIconOnly.value,
       },
     ]));
 
-    const styles = useStyles(style => {style.width = unit(numberState.width);});
+    const buttonIconOnly = computed(() => !!props.icon && !props.label);
+
+    const styles = useStyles(style => {
+      style.width = unit(numberState.width);
+    });
 
     useClickWave({ elGetter: () => refs.el, optionsGetter: () => ({ size: () => styleComputed.value.size, disabled: !editComputed.value.editable }), });
 
+    const { loadingCollapse, iconCollapse } = (() => {
+      const active = () => ({
+        height: '1em',
+        width: '1em',
+        transition: 'all 300ms ease',
+        transformOrigin: 'center',
+        paddingRight: !buttonIconOnly.value ? '4px' : '',
+        transform: 'scale(1)'
+      });
+      const inactive = (): StyleProperties => ({
+        height: '0',
+        width: '0',
+        transition: 'all 300ms ease',
+        transformOrigin: 'center',
+        paddingRight: !buttonIconOnly.value ? '0' : '',
+        transform: 'scale(0)'
+      });
+      /*没有icon的时候，单独处理loading，有icon的情况下，loading在icon中渲染*/
+      const loadingCollapse = useCollapseStyles({
+        isShow: () => !!editComputed.value.loading && !props.icon,
+        active,
+        inactive,
+      });
+      /*有icon的时候一直显示icon*/
+      const iconCollapse = useCollapseStyles({
+        isShow: () => !!props.icon,
+        active,
+        inactive,
+      });
+      return { loadingCollapse, iconCollapse };
+    })();
+
     return {
       refer: {
         refs,
@@ -124,19 +174,27 @@ export const Button = designComponent({
               },
               props.nativeAttrs,
               {
-                onClick: state.handleClick!,
+                onClick: state.handleClickWrapper!,
                 type: props.type as any,
                 disabled: editComputed.value.disabled!,
                 readOnly: editComputed.value.readonly || props.customReadonly,
               }
             )}
           >
-            {(editComputed.value.loading || props.icon) && (
-              <span className="button-icon">
-                {!!editComputed.value.loading && <Loading type="kappa"/>}
-                {(!!props.icon && !editComputed.value.loading) ? <Icon icon={props.icon} style={{ verticalAlign: '' }}/> : null}
+            {/*没有icon的时候，单独处理loading，有icon的情况下，loading在icon中渲染*/}
+            {!props.icon && loadingCollapse.show && (
+              <span className="button-icon" style={loadingCollapse.styles} onTransitionEnd={loadingCollapse.onTransitionEnd} key="loading">
+                <Loading type="kappa"/>
               </span>
             )}
+            {iconCollapse.show && (
+              <span className="button-icon" style={iconCollapse.styles} onTransitionEnd={iconCollapse.onTransitionEnd} key="icon">
+                {editComputed.value.loading ?
+                  <Loading type="kappa"/> :
+                  <Icon icon={props.icon} style={{ verticalAlign: '' }}/>}
+              </span>
+            )}
+
             {slots.default(!props.icon && props.label?.length === 2 ? props.label.split('').join(' ') : props.label)}
           </button>
         );