plain-design 1.0.0-beta.12 → 1.0.0-beta.121

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

@@ -1,8 +1,8 @@
 import {Pagination} from "../../Pagination";
-import {computed, reactive} from "plain-design-composition";
+import {computed, reactive} from "@peryl/react-compose";
 import {iAutoTablePageData} from "../utils/AutoTable.utils";
 import $notice from "../../$notice";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 
 import '../utils/TableOption.space';
 import i18n from "../../i18n";
@@ -55,7 +55,7 @@ export const useTableOptionPagination = AutoModule.createRegistration((
         } else {
           const total = await tableMethods.pageMethods.queryCount();
           if (!total) {
-            const msg = i18n('table.queryTotalFailed').d('查询总数失败');
+            const msg = i18n.$it('table.queryTotalFailed').d('查询总数失败');
             $notice.error(msg);
             throw new Error(msg);
           }
@@ -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);},
@@ -109,13 +114,13 @@ export const useTableOptionPagination = AutoModule.createRegistration((
             ...config.paginationAttrs,
           }}
         >
-          <span>{i18n('base.total').d('总共')}</span>
+          <span>{i18n.$it('base.total').d('总共')}</span>
           {state.total == null ?
             <span className="auto-table-pagination-total-number" onClick={tableMethods.pageMethods.queryCount}>
               {total.value}+
               </span> :
             total.value}
-          <span>{i18n('base.data').d('条数据')}</span>
+          <span>{i18n.$it('base.data').d('条数据')}</span>
         </Pagination>
       </div>
     ),

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

@@ -1,7 +1,7 @@
 import {iUrlResponseData} from "../utils/TableOption.url";
 import {eTableOptionStatus} from "./useTableOption.confirm";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {onBeforeUnmount} from "plain-design-composition";
+import {createEffects} from "@peryl/utils/createEffects";
+import {onBeforeUnmount} from "@peryl/react-compose";
 import {TableOptionSpace} from "../utils/TableOption.space";
 import '../utils/TableOption.space';
 import {AutoModule} from "../utils/AutoModule";

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

@@ -1,5 +1,5 @@
 import {useOperationPermission} from "../../Table/standard/PlcOperation/useOperationPermission";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import '../utils/TableOption.space';
 import {AutoModule} from "../utils/AutoModule";
 

package/src/packages/components/AutoTable/use/useTableOption.sort.ts

@@ -1,11 +1,11 @@
-import {iMouseEvent, reactive} from "plain-design-composition";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {iMouseEvent, reactive} from "@peryl/react-compose";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {createEnum} from "@peryl/utils/createEnum";
 import {PartialFields} from "../../../utils/type";
 import {eTableOptionSettingView} from "../setting/useTableOption.setting.utils";
 import {TableOptionSpace} from "../utils/TableOption.space";
 import '../utils/TableOption.space';
-import {toArray} from "plain-utils/utils/toArray";
+import {toArray} from "@peryl/utils/toArray";
 import i18n from "../../i18n";
 import {AutoModule} from "../utils/AutoModule";
 
@@ -79,7 +79,7 @@ export const useTableOptionSortState = AutoModule.createRegistration((
   filterState.useState({
     seq: 1,
     key: 'option-sort',
-    title: i18n('base.sort').d('排序'),
+    title: i18n.$it('base.sort').d('排序'),
     getActiveFilterCount: () => 0,
     applyCache() {/*do nothing*/},
     getCache: () => {/*do nothing*/},
@@ -127,9 +127,9 @@ export const useTableOptionSortState = AutoModule.createRegistration((
       if (!!state.data.singleParam) {
         const { field, desc } = state.data.singleParam;
         const title = tableState.getSourceFlatPlcList().find(i => i.props.field === field)?.props.title;
-        const sortType = desc ? i18n('base.desc').d('降序') : i18n('base.asc').d('升序');
+        const sortType = desc ? i18n.$it('base.desc').d('降序') : i18n.$it('base.asc').d('升序');
         list.push({
-          display: () => i18n('table.sortInTypeOrderOfField', { description: title + sortType }).d(`按照${title}${sortType}排序`),
+          display: () => i18n.$it('table.sortInTypeOrderOfField', { description: title + sortType }).d(`按照${title}${sortType}排序`),
           onClear: (e?: iMouseEvent) => {
             e?.stopPropagation();
             state.data.singleParam = null;
@@ -142,11 +142,11 @@ export const useTableOptionSortState = AutoModule.createRegistration((
       if (!!state.data.seniorParam?.length) {
         const description = state.data.seniorParam!.map(({ field, desc }) => {
           const title = tableState.getSourceFlatPlcList().find(i => i.props.field === field)?.props.title;
-          const sortType = desc ? i18n('base.desc').d('降序') : i18n('base.asc').d('升序');
+          const sortType = desc ? i18n.$it('base.desc').d('降序') : i18n.$it('base.asc').d('升序');
           return `${title}${sortType}`;
         }).join(',');
         list.push({
-          display: () => i18n('table.sortInTypeOrderOfField', { description }).d(`按照${description}排序`),
+          display: () => i18n.$it('table.sortInTypeOrderOfField', { description }).d(`按照${description}排序`),
           onClear: (e?: iMouseEvent) => {
             e?.stopPropagation();
             state.data.seniorParam = [];

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

@@ -1,5 +1,5 @@
 import {TableOptionSpace} from "../utils/TableOption.space";
-import {computed, reactive} from "plain-design-composition";
+import {computed, reactive} from "@peryl/react-compose";
 import {iTableNode} from "../../Table/table/utils/table.utils";
 import '../utils/TableOption.space';
 import {AutoModule} from "../utils/AutoModule";
@@ -14,6 +14,7 @@ declare module '../utils/TableOption.space' {
 
 export const useTableOptionState = AutoModule.createRegistration(({ config, hooks }) => {
   const state: TableOptionSpace.iTableOptionState = reactive({
+    isInit: false,
     getTable: () => null,
     getAutoTable: () => null,
     list: [],

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

@@ -1,11 +1,11 @@
 import {Table} from "../../Table";
 import {iTableNode} from "../../Table/table/utils/table.utils";
 import {tPlcType} from "../../Table/plc/utils/plc.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import '../utils/TableOption.space';
 import {PlcIndex} from "../../Table/standard/PlcIndex";
 import {AutoModule} from "../utils/AutoModule";
-import {iMouseEvent} from "plain-design-composition";
+import {Fragment, iMouseEvent} from "@peryl/react-compose";
 
 declare module '../utils/TableOption.space' {
   namespace TableOptionSpace {
@@ -46,11 +46,18 @@ export const useTableOptionTable = AutoModule.createRegistration((
   hooks.onRenderColumns.use({
     processor: ({ list, render }) => {list.push({ key: 'index', seq: 0, render });},
     render: () => <>
-      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size}/>}
-      {render.default()}
+      {config.indexing != false && <PlcIndex start={(pagination.state.page - 1) * pagination.state.size} key="key_standard_index"/>}
+      <Fragment key="key_option_render">{render.default()}</Fragment>
     </>
   });
 
+  hooks.onTableRender.use({
+    processor: ({ list, render }) => {config.title && list.push({ key: 'table_title', seq: 3, render });},
+    render: () => (
+      <div className="auto-table-title">{config.title}</div>
+    )
+  });
+
   hooks.onTableRender.use({
     processor: ({ list, render }) => {list.push({ key: 'table', seq: 5, render });},
     render: () => {

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

@@ -1,5 +1,5 @@
 import {Icon} from "../../Icon";
-import {designComponent, getComponentCls, PropType, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useRefs} from "@peryl/react-compose";
 import Button from "../../Button";
 import {useTooltip} from "../../useTooltip";
 import {useStyle} from "../../../uses/useStyle";
@@ -54,7 +54,7 @@ export const RenderTableOptionTips = designComponent({
           {tips.map((tip, index) => (
             <RenderTableOptionTipItem tip={tip} key={index}/>
           ))}
-          {!props.hideClearButton && <Button mode="text" icon="pi-delete" label={i18n('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
+          {!props.hideClearButton && <Button size="small" mode="text" icon="pi-delete" label={i18n.$it('table.clearAll').d('全部清空')} onClick={emit.onClearAll}/>}
         </div>
       );
     };

package/src/packages/components/AutoTable/use/useTableOptionKeyboard.tsx

@@ -1,5 +1,5 @@
-import {onBeforeUnmount, SimpleFunction} from "plain-design-composition";
-import {KeyBoardMap} from "../../KeyboardService";
+import {onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
+import {getKeyNameByKeyboardEvent} from "@peryl/utils/keyboard";
 import '../utils/TableOption.space';
 import {AutoModule} from "../utils/AutoModule";
 
@@ -26,7 +26,11 @@ export const useTableOptionKeyboard = AutoModule.createRegistration(({ hooks })
       (e.metaKey || e.ctrlKey) && names.push('ctrl');
       e.shiftKey && names.push('shift');
       e.altKey && names.push('alt');
-      names.push((KeyBoardMap as any)[e.keyCode]);
+
+      const keyName = getKeyNameByKeyboardEvent(e);
+      if (!keyName) {return; }
+
+      names.push(keyName);
       const compositionKeyName = names.join('+');
 
       const listener = [...staticState.listeners];

package/src/packages/components/AutoTable/utils/AutoModule.ts

@@ -1,4 +1,4 @@
-import {createModule} from 'plain-design-composition';
+import {createModule} from '@peryl/react-compose';
 import {TableOptionSpace} from "./TableOption.space";
 
 export const AutoModule = createModule</*@formatter:off*/

package/src/packages/components/AutoTable/utils/AutoTable.utils.ts

@@ -1,4 +1,4 @@
-import {tScopeSlotsType, tSlotsType} from "plain-design-composition";
+import {tScopeSlotsType, tSlotsType} from "@peryl/react-compose";
 import {iTableCellRenderScope} from "../../Table/table/utils/table.utils";
 import {TableOptionSpace} from "./TableOption.space";
 

package/src/packages/components/AutoTable/utils/TableOption.space.tsx

@@ -1,4 +1,4 @@
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {iHttp} from "../../createHttp";
 import {iAutoTableRefer, iAutoTableScopeSlotsType, iAutoTableSlotsType} from "./AutoTable.utils";
 import {iUrl, tGetDefaultUrlConfig} from "./TableOption.url";
@@ -6,12 +6,12 @@ import {iTableOperation, iTableOperationPermitConfig} from "../../Table/standard
 import {iTableRefer} from "../../Table/table/Table";
 import {iTableOptionCacheData} from "../use/useTableOption.cache.utils";
 import {ThemeSize} from "../../../uses/useStyle";
-import {iMouseEvent, RenderNode} from "plain-design-composition";
+import {iMouseEvent, RenderNode} from "@peryl/react-compose";
 import {iFilterHandlerQueryParam} from "../../FilterService/utils/filter.service.utils";
 import {FilterFormSingle} from "../../FilterFormSingle";
 import {Pagination} from "../../Pagination";
 import {tPlc} from "../../Table/plc/utils/plc.utils";
-import {iEffects} from 'plain-utils/utils/createEffects';
+import {iEffects} from '@peryl/utils/createEffects';
 import {iTableNode, iTableSortData} from "../../Table/table/utils/table.utils";
 import {eTableOptionEditType} from "./TableOption.utils";
 
@@ -50,6 +50,7 @@ export namespace TableOptionSpace {
    * @date    2022.12.20 10:47
    */
   export interface iTableOptionCustomConfig {
+    title?: string,                                                     // 表格标题
     url?: iUrl,                                                         // 请求配置
     data?: any[],                                                       // 默认数据
     fill?: boolean,                                                     // 是否自动计算高度
@@ -118,6 +119,7 @@ export namespace TableOptionSpace {
    * @date    2023/2/7 9:47
    */
   export interface iTableOptionState {
+    isInit: boolean,
     getTable: () => null | iTableRefer,
     getAutoTable: () => null | iAutoTableRefer;
     list: PlainObject[],
@@ -160,6 +162,8 @@ export namespace TableOptionSpace {
    */
   export interface iTableOption {
     config: iTableOptionConfig;
+    useConfig: iTableOptionUseConfig,
+    defaultConfig: iTableOptionDefaultConfig,
     clone: iTableOptionClone;
   }
 

package/src/packages/components/AutoTable/utils/TableOption.url.ts

@@ -1,5 +1,5 @@
 import {iHttpRequestConfig} from "../../createHttp/http.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {TableOptionSpace} from "./TableOption.space";
 
 /**

package/src/packages/components/AutoTable/utils/TableOption.utils.tsx

@@ -1,9 +1,9 @@
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 import {iFilterOption} from "../../FilterService/utils/filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {FilterService} from "../../FilterService";
 import {TableOptionSpace} from "./TableOption.space";
-import {iMouseEvent} from "plain-design-composition";
+import {iMouseEvent} from "@peryl/react-compose";
 
 
 /**
@@ -38,7 +38,7 @@ export const TableOptionUtils = (() => {
     if (description === null) {return null;}
     return {
       display: () => <>
-        {`${filterOption!.label}${handler.label}${!description ? '' : ':'}`}
+        {`${filterOption!.label} ${handler.label()} ${!description ? '' : ':'}`}
         {description}
       </>,
       onClick,

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

@@ -1,6 +1,6 @@
-import {designComponent, fixInputCursor, getComponentCls, iHTMLInputElement, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {designComponent, fixInputCursor, getComponentCls, iHTMLInputElement, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
 import './auto-width-input.scss';
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 
 const FixInput = fixInputCursor('input');
 

package/src/packages/components/Badge/badge.scss

@@ -18,7 +18,11 @@
     @include statusMixin(badge-content) {
       background-color: $color-6;
       border-radius: 100px;
-      color: white;
+      color: plv(pbfc);
+      z-index: 2;
+      span {
+        transform: scale(0.8);
+      }
     }
 
     &.badge-content-top {

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

@@ -1,5 +1,5 @@
 import './badge.scss';
-import {computed, designComponent, getComponentCls, useClasses, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, useClasses, useRefs} from "@peryl/react-compose";
 
 export const Badge = designComponent({
   name: '-badge',

package/src/packages/components/Box/box.scss

@@ -0,0 +1,6 @@
+@include comp(box) {
+
+  @include sizeMixin(box, (font-size, border-radius)) {
+  }
+
+}

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

@@ -0,0 +1,30 @@
+import {designComponent, getComponentCls, useClassCache} from "@peryl/react-compose";
+import {StyleProps, useStyle} from "../../uses/useStyle";
+import {EditProps, useEdit} from "../../uses/useEdit";
+import './box.scss';
+
+export const Box = designComponent({
+  name: "box",
+  props: {
+    ...StyleProps,
+    ...EditProps,
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { styleComputed } = useStyle();
+    useEdit();
+
+    const classes = useClassCache(() => [
+      getComponentCls('box'),
+      `box-size-${styleComputed.value.size}`,
+      `box-shape-${styleComputed.value.size}`,
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});

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

@@ -7,10 +7,11 @@
   outline: none;
   position: relative;
   text-align: center;
-  line-height: 1.5715;
+  line-height: plv(line-height);
   white-space: nowrap;
   display: inline-block;
   user-select: none;
+  z-index: 1;
 
   @include public-style;
 
@@ -37,7 +38,7 @@
     @include statusMixin(button) {
       background-color: $color-6;
       border-color: $color-6;
-      color: white;
+      color: plv(pbfc);
       @include hover(button) {
         background-color: $color-4;
         border-color: $color-4;
@@ -108,6 +109,33 @@
     }
   }
 
+  &.button-mode-stroke {
+    @include statusMixin(button) {
+      background-color: plv(bg-2);
+      border-color: plv(secondary-light-3);
+      color: plv(text-2);
+
+      @include active(button) {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &:not(.button-disabled):hover {
+        border-color: $color-6;
+        color: $color-6;
+      }
+
+      &.button-disabled {
+        border-color: $color-2;
+        color: $color-2;
+      }
+    }
+
+    &:after {
+      //display: none !important;
+    }
+  }
+
   &.button-mode-text {
     padding: 0;
     min-width: initial;
@@ -141,17 +169,17 @@
     }
   }
 
-  .#{componentName(icon)} {
+  .#{componentName(icon)}, .#{componentName(loading)} {
     //vertical-align: text-top;
     position: relative;
-    top: 1px;
+    top: 0.15em;
   }
 
-  &:not(.button-icon-only) {
-    & > .button-icon {
-      margin-right: 4px;
-    }
-  }
+  //&:not(.button-icon-only) {
+  //  & > .button-icon {
+  //    margin-right: 4px;
+  //  }
+  //}
 
   &.button-no-padding {
     padding: 0;
@@ -168,4 +196,8 @@
   & > span + .#{componentName(icon)} {
     margin-left: 4px;
   }
+
+  &:hover {
+    z-index: 4;
+  }
 }

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

@@ -1,13 +1,15 @@
 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 "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, ThemeStatus, useStyle} from "../../uses/useStyle";
-import {throttle} from "plain-utils/utils/throttle";
-import {unit} from "plain-utils/string/unit";
+import {throttle} from "@peryl/utils/throttle";
+import {unit} from "@peryl/utils/unit";
 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,14 +43,26 @@ 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');
+    const mode = computed(() => props.mode || group?.props.mode || styleComputed.value.default.buttonMode);
     const status = computed(() => styleComputed.value.status || (mode.value === ThemeMode.flat ? ThemeStatus.secondary : ThemeStatus.primary));
 
     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>
         );

package/src/packages/components/ButtonGroup/button-group.scss

@@ -25,8 +25,8 @@
           }
         }
 
-        &.button-mode-outline {
-          border-right-color: transparent;
+        & + .button-mode-outline, & + .button-mode-stroke {
+          margin-left: -1px;
         }
       }
     }

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

@@ -1,8 +1,8 @@
 import './button-group.scss';
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeMode, useStyle} from "../../uses/useStyle";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {createEnum} from "@peryl/utils/createEnum";
 
 export const ButtonGroupDirection = createEnum(['vertical', 'horizontal'] as const);
 
@@ -12,7 +12,7 @@ export const ButtonGroup = designComponent({
   props: {
     ...EditProps,
     ...StyleProps,
-    mode: { type: String as PropType<typeof ThemeMode.TYPE>, default: ThemeMode.flat },         // 按钮类型：fill填充，flat扁平，outline线性以及text文字
+    mode: { type: String as PropType<typeof ThemeMode.TYPE> },                                  // 按钮类型：fill填充，flat扁平，outline线性以及text文字
     vertical: { type: Boolean },                                                                // 按钮组方向
   },
   slots: ['default'],

package/src/packages/components/Card/card.scss

@@ -48,7 +48,7 @@
     width: 100%;
     color: plv(text-2);
     padding: 9px 12px;
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .card-poster {