plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/packages/components/Cascade/CascadeKeys.tsx

@@ -0,0 +1,158 @@
+import {computed, designComponent, PropType, reactive, useModel} from "@peryl/react-compose";
+import {CascadeEmitOptions, CascadePropsOptions} from "./cascade.utils";
+import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
+import Cascade from "./index";
+import {omit} from "@peryl/utils/omit";
+import {inheritSlots} from "../../utils/inheritSlots";
+import {PlainObject} from "@peryl/utils/event";
+
+/**
+ * 用来编辑key可能冲突的级联数据，仅支持单选不支持多选
+ * @author  韦胜健
+ * @date    2024.8.7 18:43
+ */
+export const CascadeKeys = designComponent({
+  name: 'conflict-cascade',
+  inheritPropsType: Cascade,
+  props: {
+    /*key有冲突的情况下，不支持多选，多选必须保证key为唯一标识不能有冲突，并且singleValueType必须是all*/
+    ...omit(CascadePropsOptions, ['keyField', 'multiple', 'singleValueType', "modelValue"]),
+    /*绑定值一定是数组，可能是nodeData对象数组，也可能是key字符串数组*/
+    modelValue: { type: Array as PropType<(string | PlainObject)[]> },
+    /*keyField一定要存在*/
+    keyField: { type: [String, Function] as PropType<string | ((nodeData: any) => string)>, required: true },
+    /*值类型设置，为true则表明绑定值modelValue为字符串数组，否则为object对象数组*/
+    useKeysValue: { type: Boolean },
+  },
+  emits: CascadeEmitOptions,
+  scopeSlots: {
+    ...TreeScopeSlotsOption,
+  },
+  setup({ props, scopeSlots, event: { emit } }) {
+
+    const dataModel = useModel(() => props.data, emit.onUpdateData);
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const utils = reactive({
+      getDataLabel: computed((): iUseCascadeDataPropsLabelFunction => {
+        const { labelField } = props;
+        return typeof labelField === "function" ? labelField : ((nodeData) => (nodeData as any)[labelField]);
+      }),
+      getDataKey: computed((): iUseCascadeDataPropsValFunction => {
+        const { keyField } = props;
+        return typeof keyField === "function" ? keyField : ((nodeData) => (nodeData as any)[keyField]);
+      }),
+      getDataChildren: computed((): iUseCascadeDataPropsChildrenFunction => {
+        const { childrenField } = props;
+        return typeof childrenField === "function" ? childrenField : ((nodeData) => (nodeData as any)[childrenField]);
+      }),
+      formatData2CascadeData: (nodeData: any, getParent: iCascadeWrapData['getParent'] = (() => undefined)): iCascadeWrapData => {
+        const label = utils.getDataLabel(nodeData);
+        const key = utils.getDataKey(nodeData);
+        const children = utils.getDataChildren(nodeData);
+        const keys: string[] = [...getParent()?.keys || [], key];
+        const ret: iCascadeWrapData = { label, key, nodeData, getParent, keys, keyString: keys.join('.') };
+        if (!!children) {
+          const formatChildren = children.map(child => utils.formatData2CascadeData(child, () => ret));
+          ret.children = formatChildren;
+        }
+        return ret;
+      },
+    });
+
+    const cascadeData = computed((): iCascadeWrapData[] | undefined => props.data?.map(item => utils.formatData2CascadeData(item)));
+
+    const cascadeModelValue = computed((): iCascadeWrapData[] | undefined => {
+      if (!model.value?.length) {return undefined;}
+      const modelValueList = [...model.value];
+      const ret: iCascadeWrapData[] = [];
+
+      let list = cascadeData.value;
+      let itemModelValue = modelValueList.shift();
+      while (itemModelValue && !!list?.length) {
+        const itemModelValueKey = props.useKeysValue ? itemModelValue : utils.getDataKey(itemModelValue);
+        const matchItem = list.find(i => i.key == itemModelValueKey);
+        if (!!matchItem) {
+          ret.push(matchItem);
+          list = matchItem.children || [];
+          itemModelValue = modelValueList.shift();
+        } else {
+          break;
+        }
+      }
+
+      return ret;
+    });
+
+    const handler = {
+      onUpdateData: (newData: iCascadeWrapData[] | undefined | null) => {
+        if (!newData) {dataModel.value = newData;}
+        dataModel.value = cascadeData.value?.map(itemData => itemData.nodeData);
+      },
+      onUpdateModelValue: (val: iCascadeWrapData[] | null | undefined) => {
+        model.value = props.useKeysValue ?
+          val?.map(i => i.key) :
+          val?.map(i => i.nodeData);
+      },
+      setChildrenData: (cascadeWrapData: iCascadeWrapData, childrenData: any[] | null | undefined) => {
+        const { childrenField, setChildrenData } = props;
+        if (typeof childrenField === "string") {
+          (cascadeWrapData.nodeData as any)[childrenField] = childrenData;
+        } else {
+          if (!!setChildrenData) {
+            setChildrenData(cascadeWrapData.nodeData, childrenData);
+          } else {
+            throw new Error('tree: props.setChildrenData is required when childrenField is function');
+          }
+        }
+      },
+      isCheckAble: (cascadeWrapData: iCascadeWrapData) => {return props.isCheckAble!(cascadeWrapData.nodeData);},
+      isLeaf: (cascadeWrapData: iCascadeWrapData) => {return props.isLeaf!(cascadeWrapData.nodeData);},
+      filterMethod: (cascadeWrapData: iCascadeWrapData, filterText: string) => {return props.filterMethod!(cascadeWrapData.nodeData, filterText);},
+    };
+
+    const cascadeAttrs = computed(() => {
+      const { useKeysValue, ..._props } = props;
+      return {
+        ..._props,
+        data: cascadeData.value,
+        onUpdateData: handler.onUpdateData,
+        modelValue: cascadeModelValue.value,
+        onUpdateModelValue: handler.onUpdateModelValue,
+
+        setChildrenData: !props.setChildrenData ? undefined : handler.setChildrenData,
+        isCheckAble: !props.isCheckAble ? undefined : handler.isCheckAble,
+        isLeaf: !props.isLeaf ? undefined : handler.isLeaf,
+        filterMethod: !props.filterMethod ? undefined : handler.filterMethod,
+
+        labelField: "label",
+        keyField: "keyString",
+        childrenField: "children",
+        singleValueType: "all" as const,
+      };
+    });
+
+    return () => (
+      <Cascade{...cascadeAttrs.value} v-slots={inheritSlots({ scopeSlots })}/>
+    );
+  },
+});
+
+
+interface iCascadeWrapData {
+  label: string,
+  key: string,
+  children?: iCascadeWrapData[],
+
+  keys: string[],
+  keyString: string,
+  nodeData: any,
+  getParent: () => iCascadeWrapData | undefined,
+}
+
+interface iUseCascadeDataPropsLabelFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsValFunction {(nodeData: any): string;}
+
+interface iUseCascadeDataPropsChildrenFunction {(nodeData: any): any[] | undefined | null;}

package/src/packages/components/Cascade/cascade.scss

@@ -17,7 +17,7 @@
   .cascade-panel-item {
     transition: all ease 150ms;
     position: relative;
-    background-color: plv(background-lite);
+    background-color: plv(background-color);
     overflow: hidden;
 
     .cascade-panel-item-inner {
@@ -29,7 +29,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      border-bottom: solid 1px plv(background-lite);
+      border-bottom: solid 1px plv(background-color);
       cursor: pointer;
       color: plv(text-2);
 

package/src/packages/components/Cascade/cascade.utils.ts

@@ -1,5 +1,5 @@
 import {tCascadeHooks} from "./createCascadeHooks";
-import {ComponentEvent, ExtractPropTypes, PropType, tScopeSlotsType} from "plain-design-composition";
+import {ComponentEvent, ExtractPropTypes, PropType, tScopeSlotsType} from "@peryl/react-compose";
 import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
 import {Input} from "../Input";
 import {EditProps, tEditControl} from "../../uses/useEdit";

package/src/packages/components/Cascade/createCascadeHooks.ts

@@ -1,4 +1,4 @@
-import {createSyncHooks, RenderNode} from "plain-design-composition";
+import {createSyncHooks, RenderNode} from "@peryl/react-compose";
 
 export function createCascadeHooks() {
   return {

package/src/packages/components/Cascade/createCascadePopper.tsx

@@ -1,9 +1,9 @@
 import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
-import {ExtractPropTypes, getComponentCls} from "plain-design-composition";
+import {ExtractPropTypes, getComponentCls} from "@peryl/react-compose";
 import {Input} from "../Input";
-import {delay} from "plain-utils/utils/delay";
+import {delay} from "@peryl/utils/delay";
 import {Tree} from "../Tree";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {CascadePanel} from "../CascadePanel";
 import {CascadePropsOptions} from "./cascade.utils";
 import {Table} from "../Table";

package/src/packages/components/Cascade/createCascadeUtils.ts

@@ -1,6 +1,6 @@
-import {computed, ExtractPropTypes} from "plain-design-composition";
+import {computed, ExtractPropTypes} from "@peryl/react-compose";
 import {CascadePropsOptions} from "./cascade.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export function createCascadeUtils({ props }: { props: Readonly<ExtractPropTypes<typeof CascadePropsOptions>> }) {
   /*工具函数，获取对象的显示文本*/

package/src/packages/components/Cascade/createMultipleCascadeRender.tsx

@@ -1,9 +1,8 @@
-import {createEffects} from "plain-utils/utils/createEffects";
-import {computed, mergeAttrs, nextTick, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
 import {Tree} from "../Tree";
 import {iCascadeCompositionParam} from "./cascade.utils";
 import {Input} from "../Input";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {inputScrollEnd} from "../Input/input.utils";
 import {createCascadePopper} from "./createCascadePopper";
 import i18n from "../i18n";
@@ -24,7 +23,7 @@ export function createMultipleCascadeRender(
     cascadeProps,
     styleComputed,
   }: iCascadeCompositionParam) {
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const { refs, onRef } = useRefs({
     tree: Tree,
@@ -36,7 +35,7 @@ export function createMultipleCascadeRender(
    * @author  韦胜健
    * @date    2022/10/24 20:27
    */
-  const label = computed(() => {
+  const label = effectComputed(() => {
     if (model.value == null || model.value.length === 0) {return null;}
     return (model.value as PlainObject[]).map(i => utils.getLabel.value(i));
   });
@@ -140,7 +139,7 @@ export function createMultipleCascadeRender(
       const { labelField, ..._treeProps } = treeProps.value;
       return ({
         fixed: 'left',
-        title: props.plcTreeTitle || i18n('base.name').d('名称'),
+        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
         modelValue: model.value,
         onUpdateModelValue: treeHandler.onModelValueChange,
         field: labelField,

package/src/packages/components/Cascade/createSingleCascadeRender.tsx

@@ -1,9 +1,8 @@
-import {createEffects} from "plain-utils/utils/createEffects";
-import {computed, mergeAttrs, nextTick, reactive, useRefs} from "plain-design-composition";
+import {createEffectsOfReaction, mergeAttrs, nextTick, reactive, useRefs} from "@peryl/react-compose";
 import {Tree} from "../Tree";
 import {iCascadeCompositionParam} from "./cascade.utils";
 import {Input} from "../Input";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {createCascadePopper} from "./createCascadePopper";
 import {PlcTree} from "../Table/standard/PlcTree/PlcTree";
 import i18n from "../i18n";
@@ -30,12 +29,14 @@ export function createSingleCascadeRender(
     styleComputed,
   }: iCascadeCompositionParam) {
 
+  const { effects, effectComputed } = createEffectsOfReaction();
+
   /**
    * input输入框显示值
    * @author  韦胜健
    * @date    2022/10/24 20:29
    */
-  const label = computed(() => {
+  const label = effectComputed(() => {
     if (model.value == null) {return null;}
     if (props.multiple) {return; }
     return Array.isArray(model.value) ? (model.value as PlainObject[]).map(i => utils.getLabel.value(i)).join('/') : utils.getLabel.value(model.value as PlainObject);
@@ -48,8 +49,6 @@ export function createSingleCascadeRender(
     inputValue: label.value as null | string,
   });
 
-  const { effects } = createEffects();
-
   const { refs, onRef } = useRefs({
     tree: Tree,
     plcTree: PlcTree,
@@ -94,6 +93,7 @@ export function createSingleCascadeRender(
       ref={onRef.input}
       className={classes.value}
       suffixIcon="pi-mind-mapping"
+      customReadonly={props.disableFilter || props.lazy}
       {...mergeAttrs(
         { class: classes.value, },
         {
@@ -107,7 +107,6 @@ export function createSingleCascadeRender(
             }
         }
       )}
-      customReadonly={props.disableFilter || props.lazy}
     />
   )));
 
@@ -158,7 +157,7 @@ export function createSingleCascadeRender(
       return ({
         ref: onRef.plcTree,
         fixed: 'left',
-        title: props.plcTreeTitle || i18n('base.name').d('名称'),
+        title: props.plcTreeTitle || i18n.$it('base.name').d('名称'),
         modelValue: model.value,
         onUpdateModelValue: treeHandler.onModelValueChange,
         field: labelField,

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

@@ -1,4 +1,4 @@
-import {ComponentPropsType, computed, designComponent, getComponentCls, RenderNode, useClasses, useModel} from "plain-design-composition";
+import {ComponentPropsType, computed, designComponent, getComponentCls, RenderNode, useClasses, useModel} from "@peryl/react-compose";
 import {Input} from "../Input";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {CascadeEmitOptions, CascadePropsOptions, iCascadeCompositionParam} from "./cascade.utils";
@@ -10,10 +10,10 @@ import {createMultipleCascadeRender} from "./createMultipleCascadeRender";
 import {createSingleCascadeRender} from "./createSingleCascadeRender";
 import {createCascadeUtils} from "./createCascadeUtils";
 import {TreeScopeSlotsOption} from "../TreeCore/TreeCore.type";
-import {removeUnit} from "plain-utils/string/removeUnit";
+import {removeUnit} from "@peryl/utils/removeUnit";
 import {useStyle} from "../../uses/useStyle";
 import {CascadePanelCustomPropsOption} from "../CascadePanel/cascade-panel.utils";
-import {pick} from "../../utils/pick";
+import {pick} from "@peryl/utils/pick";
 import {createPopupAttrsGetter} from "../usePopup/utils/createPopperAttrsGetter";
 import {useParentPopupId} from "../usePopup/utils/popup.utils";
 import React from "react";

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

@@ -0,0 +1,5 @@
+import {CascadeKeys} from "../Cascade/CascadeKeys";
+
+export {CascadeKeys};
+
+export default CascadeKeys;

package/src/packages/components/CascadePanel/cascade-panel.utils.ts

@@ -1,9 +1,9 @@
 import {TreePropsOptions} from "../TreeCore/createTreeProps";
-import {ExtractPropTypes, PropType} from "plain-design-composition";
-import {createEnum} from "plain-utils/utils/createEnum";
+import {ExtractPropTypes, PropType} from "@peryl/react-compose";
+import {createEnum} from "@peryl/utils/createEnum";
 import {iTreeNode} from "../TreeCore/createTreeNode";
 import {iTreeCore} from "../TreeCore/createTreeCore";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 /**
  * 级联面板类型，cascade为级联列表，flat为平铺面板

package/src/packages/components/CascadePanel/flat/CascadeFlatPanelNode.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iMouseEvent, useClasses} from "plain-design-composition";
+import {computed, designComponent, iMouseEvent, useClasses} from "@peryl/react-compose";
 import {CascadePanelNodePropsOption} from "../cascade-panel.utils";
 import {CascadePanel} from "../index";
 import {Radio} from "../../Radio";

package/src/packages/components/CascadePanel/flat/cascade-flat-panel.scss

@@ -1,6 +1,15 @@
 @include prefix(cascade-panel-flat) {
   width: 500px;
 
+  & > .#{componentName(scroll)} {
+    & > .scroll-wrapper {
+      & > .scroll-content {
+        overflow-x: initial !important;
+        overflow-y: initial !important;
+      }
+    }
+  }
+
   .cascade-panel-flat-header {
     position: sticky;
     top: 0;
@@ -46,6 +55,7 @@
       cursor: pointer;
       transition: background-color linear 300ms;
       border-radius: plv(box-size-small-border-radius);
+      word-break: break-all;
 
       @include comp(checkbox) {
         line-height: 1.4em;
@@ -83,35 +93,26 @@
   &.cascade-panel-size-normal, &.cascade-panel-size-large {
     @include comp(cascade-panel-flat) {
       .cascade-panel-flat-header {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
 
-        .cascade-panel-flat-header-item {
-          padding: 0 8px;
-          line-height: 28px;
-          cursor: pointer;
-
-          &:hover {
-            background-color: plv(background-hover);
-          }
-        }
       }
       .cascade-panel-flat-body {
-        padding: 8px calc(#{plv(input-padding-x)} - 8px);
 
-        .cascade-panel-flat-item {
-          padding: 8px 8px;
-        }
       }
     }
   }
-  &.cascade-panel-size-small, &.cascade-panel-size-mini {
+
+  @include sizeMixin(cascade-panel, ()) {
     @include comp(cascade-panel-flat) {
+      .cascade-panel-flat-item {
+        border-radius: plv(box-size-#{$name}-border-radius);
+      }
       .cascade-panel-flat-header {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
+        font-size: $font-size;
+        padding: 2px 2px;
 
         .cascade-panel-flat-header-item {
-          padding: 0 4px;
-          line-height: 24px;
+          padding: 0 calc(#{plv(input-padding-x-#{$name})} - 2px);
+          line-height: 28px;
           cursor: pointer;
 
           &:hover {
@@ -120,26 +121,13 @@
         }
       }
       .cascade-panel-flat-body {
-        padding: 4px calc(#{plv(input-padding-x)} - 4px);
+        font-size: $font-size;
+        padding: 2px 2px;
 
         .cascade-panel-flat-item {
-          padding: 4px 4px;
+          padding: calc((#{plv(input-padding-x-#{$name})} - 2px) * 0.6) calc(#{plv(input-padding-x-#{$name})} - 2px);
         }
       }
     }
   }
-
-  @include sizeMixin(cascade-panel, ()) {
-    @include comp(cascade-panel-flat) {
-      .cascade-panel-flat-item {
-        border-radius: plv(box-size-#{$name}-border-radius);
-      }
-      .cascade-panel-flat-header {
-        font-size: $font-size;
-      }
-      .cascade-panel-flat-body {
-        font-size: $font-size;
-      }
-    }
-  }
 }

package/src/packages/components/CascadePanel/flat/createCascadeFlatRender.tsx

@@ -1,5 +1,5 @@
 import {iCascadePanelItemPublicParam} from "../cascade-panel.utils";
-import {computed, Fragment, getComponentCls} from "plain-design-composition";
+import {computed, Fragment, getComponentCls} from "@peryl/react-compose";
 import './cascade-flat-panel.scss';
 import Scroll from "../../Scroll";
 import Icon from "../../Icon";
@@ -28,7 +28,7 @@ export function createCascadeFlatRender(
         </Fragment>
       ))}
       <div className="cascade-panel-flat-header-item">
-        {props.flatPanelPlaceholder?.[panels.value.length - 1] || i18n('base.pleaseSelect').d('请选择')}
+        {props.flatPanelPlaceholder?.[panels.value.length - 1] || i18n.$it('base.pleaseSelect').d('请选择')}
       </div>
     </div>;
     return () => renderContent;

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

@@ -1,9 +1,9 @@
-import {computed, designComponent, getComponentCls, onMounted, useClasses, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, onMounted, useClasses, useStyles} from "@peryl/react-compose";
 import {TreeEmitOptions, TreePropsOptions} from "../TreeCore/createTreeProps";
 import {createTreeCore} from "../TreeCore/createTreeCore";
 import {iTreeNode} from "../TreeCore/createTreeNode";
 import {CascadeListPanelItem} from "./list/CascadeListPanelItem";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {TreeScopeSlotsOption, TreeSlotsOption} from "../TreeCore/TreeCore.type";
 import {Empty} from "../Empty";
 import {CascadePanelCustomPropsOption, eCascadePanelType, iCascadePanelMeta} from "./cascade-panel.utils";
@@ -161,7 +161,7 @@ export const CascadePanel = designComponent({
     });
 
     onMounted(() => {
-      props.panelType === 'cascade' && treeCore.methods.expand(Object.keys(treeCore.state.checkedMap));
+      props.panelType === 'cascade' && !props.multiple && treeCore.methods.expand(Object.keys(treeCore.state.checkedMap));
       treeCore.hooks.onMounted.exec(undefined);
     });
 

package/src/packages/components/CascadePanel/list/CascadeListPanelItem.tsx

@@ -1,4 +1,4 @@
-import {designComponent, onMounted, useClasses, useRefs} from "plain-design-composition";
+import {designComponent, onMounted, useClasses, useRefs} from "@peryl/react-compose";
 import {iTreeNode} from "../../TreeCore/createTreeNode";
 import {CascadeListPanelNode} from "./CascadeListPanelNode";
 import {Scroll} from "../../Scroll";
@@ -59,13 +59,13 @@ export const CascadeListPanelItem = designComponent({
               return (
                 <VirtualList data={props.treeNodes} size={CascadePanelVirtualSize[panel.styleComputed.value.size]} dynamicSize>
                   {{
-                    default: ({ item: treeNode, index, virtualIndex }: { item: iTreeNode, index: number, virtualIndex: number }) => (
+                    default: ({ item: treeNode, index, vIndex, vid }: { item: iTreeNode, index: number, vIndex: number, vid: string }) => (
                       <CascadeListPanelNode
-                        data-vid={index}
+                        data-vid={vid}
                         treeNode={treeNode}
                         treeNodes={props.treeNodes}
                         index={index}
-                        key={virtualIndex}
+                        key={vIndex}
                         handleClickNode={props.handleClickNode}
                         {...props.nodeAttrs}
                       >

package/src/packages/components/CascadePanel/list/CascadeListPanelNode.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, iHTMLDivElement, useClasses} from "plain-design-composition";
+import {computed, designComponent, iHTMLDivElement, useClasses} from "@peryl/react-compose";
 import {iTreeNode} from "../../TreeCore/createTreeNode";
 import {Icon} from "../../Icon";
 import {Empty} from "../../Empty";

package/src/packages/components/CascadePanel/list/createCascadeListRender.tsx

@@ -1,4 +1,4 @@
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {iCascadePanelItemPublicParam} from "../cascade-panel.utils";
 import {CascadeListPanelItem} from "./CascadeListPanelItem";
 

package/src/packages/components/Checkbox/checkbox.scss

@@ -51,6 +51,10 @@
 
   @include sizeMixin(checkbox, (font-size)) {
     line-height: 1.7em;
+
+    .plain-click-node {
+      border-radius: $border-radius;
+    }
   }
 
   &:focus {

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

@@ -1,14 +1,14 @@
 import './checkbox.scss';
-import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, iKeyboardEvent, iMouseEvent, PropType, SimpleFunction, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import {useClickWave} from "../../directives/ClickWave";
 import {CheckboxInner} from "../CheckboxInner";
 import {CheckboxGroupCollector} from "../CheckboxGroup";
 import {i18n} from "../../i18n";
-import {getKey, KEY} from "../KeyboardService";
+import {getKeyNameByKeyboardEvent, eKeyboardKeys} from "@peryl/utils/keyboard";
 import {Transition} from "../Transition";
 
 export const Checkbox = designComponent({
@@ -99,7 +99,7 @@ export const Checkbox = designComponent({
         }*/
       },
       keydown: (e: iKeyboardEvent) => {
-        if (getKey(e) === KEY.space) {
+        if (getKeyNameByKeyboardEvent(e) === eKeyboardKeys.space) {
           e.preventDefault();
           e.stopPropagation();
           handler.click(e as any);
@@ -132,7 +132,7 @@ export const Checkbox = designComponent({
                 disabled={editComputed.value.disabled!}/>
             </Transition>
           </span>
-          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n('base.select.all').d('全选') : '')}</span>)}
+          {(slots.labelContent.isExist() || props.label || props.checkboxForAll) && slots.labelContent(<span className="checkbox-label">{props.label || (props.checkboxForAll ? i18n.$it('base.select.all').d('全选') : '')}</span>)}
         </div>))
     };
   },

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

@@ -1,4 +1,4 @@
-import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "plain-design-composition";
+import {computed, designComponent, getComponentCls, inject, useCollect, useNumber, useRefs} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
 import {CheckboxStatus} from "../../utils/constant";
@@ -116,7 +116,7 @@ export const CheckboxGroup = designComponent({
          */
         add: (val: (string | number)[]) => {
           if (utils.exceed.max(val)) {
-            $message.warn({ render: () => i18n('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtMost', { val: numberState.max }).d(`最多选择 ${numberState.max} 个选项`) });
           } else {
             modelValue.value = val;
           }
@@ -128,7 +128,7 @@ export const CheckboxGroup = designComponent({
          */
         delete: (val: (string | number)[]) => {
           if (utils.exceed.min(val)) {
-            $message.warn({ render: () => i18n('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
+            $message.warn({ render: () => i18n.$it('base.select.selectOptionsAtLeast', { val: numberState.min }).d(`最少选择 ${numberState.min} 个选项`) });
           } else {
             modelValue.value = val;
           }

package/src/packages/components/CheckboxInner/checkbox-inner.scss

@@ -6,6 +6,7 @@
   vertical-align: -0.15em;
   border-width: 1px;
   border-style: solid;
+  border-radius: plv(box-size-small-border-radius);
   //border-radius: 2px;
 
   &.checkbox-inner-status-check {
@@ -14,7 +15,7 @@
 
     .checkbox-inner-check-polyline {
       fill: transparent;
-      stroke: white;
+      stroke: plv(pbfc);
       stroke-width: 10;
     }
   }

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, PropType, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, PropType, useClasses} from "@peryl/react-compose";
 import {CheckboxStatus} from "../../utils/constant";
 import './checkbox-inner.scss';
 import {SVGAttributes} from "react";

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

@@ -1,5 +1,5 @@
-import {createCounter} from "plain-utils/utils/createCounter";
-import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "plain-design-composition";
+import {createCounter} from "@peryl/utils/createCounter";
+import {computed, designComponent, getComponentCls, useClasses, useModel, useRefs} from "@peryl/react-compose";
 import CollapseGroup from "../CollapseGroup";
 import Icon from "../Icon";
 import './collapse.scss';

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useModel, useRefs} from "plain-design-composition";
+import {designComponent, getComponentCls, useModel, useRefs} from "@peryl/react-compose";
 
 export const CollapseGroup = designComponent({
   name: 'collapse-group',