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

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

@@ -1,5 +1,5 @@
-import {computed, designComponent, PropType, reactive, watch} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed, designComponent, PropType, reactive, watch} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {iFilterOption, iFilterQueryParam} from "../FilterService/utils/filter.service.utils";
 import {InputGroup} from "../InputGroup";
 import {Select} from "../Select";
@@ -8,7 +8,7 @@ import {FilterService} from "../FilterService";
 import {SelectOption} from "../SelectOption";
 import {incrementalMerge} from "../../utils/incrementalMerge";
 import {mergeQueryParam} from "../FilterService/utils/mergeQueryParam";
-import {deepcopy} from "plain-utils/object/deepcopy";
+import {deepcopy} from "@peryl/utils/deepcopy";
 import i18n from "../i18n";
 
 export interface iFilterFormSingleState {
@@ -28,6 +28,7 @@ export const FilterFormSingle = designComponent({
     hideHandlerSelector: { type: Boolean },
     hideSearchButton: { type: Boolean },
     width: { type: String, default: '440px' },
+    handleSearch: { type: Function as PropType<(data: iFilterFormSingleData) => void | Promise<void>> },
   },
   emits: {
     onSearch: (data: iFilterFormSingleData) => true,
@@ -37,7 +38,7 @@ export const FilterFormSingle = designComponent({
 
     const utils = {
       createState: ({ defaultField, filterOptions }: { defaultField?: string, filterOptions: iFilterOption[] }): iFilterFormSingleState => {
-        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
+        const defaultOption = filterOptions.find(i => !!defaultField ? i?.field === defaultField : i?.defaultSearch) || (filterOptions[0] as iFilterOption | undefined) || { label: i18n.$it('base.id').d('编号'), filterType: 'text', filterHandler: 'like', field: 'id' };
         const formData = FilterService.getDefaultFormData(filterOptions);
         return {
           field: defaultOption.field,
@@ -111,7 +112,11 @@ export const FilterFormSingle = designComponent({
        * @author  韦胜健
        * @date    2023.1.6 12:46
        */
-      search: async () => {emit.onSearch(await methods.getData());},
+      search: async () => {
+        const data = await methods.getData();
+        emit.onSearch(data);
+        await props.handleSearch?.(data);
+      },
     };
 
     const handler = {
@@ -150,13 +155,13 @@ export const FilterFormSingle = designComponent({
           {!props.hideHandlerSelector && (
             <Select width={90} modelValue={state.filterHandler} onUpdateModelValue={handler.onUpdateHandler} inputAttrs={inputAttrs}>
               {(FilterService.touch(usingFilterOption.value.filterType)).state.list.map((handler) => (
-                <SelectOption label={handler.label} val={handler.name} key={handler.name}/>
+                <SelectOption label={handler.label()} val={handler.name} key={handler.name}/>
               ))}
             </Select>
           )}
           {FilterService.getHandler(usingFilterOption.value)!.render({ formData: state.formData, option: usingFilterOption.value, confirm: methods.search })}
           {!props.hideSearchButton && (
-            <Button label={i18n('base.query').d('查询')} icon="pi-search" mode="fill" onClick={methods.search}/>
+            <Button label={i18n.$it('base.query').d('查询')} icon="pi-search" mode="fill" asyncHandler={methods.search}/>
           )}
           {slots.append()}
         </InputGroup>

package/src/packages/components/FilterService/filter/filter.city.tsx

@@ -5,7 +5,7 @@ import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
 import {createAddressDescriptionGetter} from "./filter.province";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -22,7 +22,7 @@ export function installFilterCity(
   }: iFilterService) {
   touch('city')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -33,7 +33,7 @@ export function installFilterCity(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
         const val = formData[option.field]?.city;
         const service = $configuration.get('address')!;
@@ -60,7 +60,7 @@ export function installFilterCity(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -70,7 +70,7 @@ export function installFilterCity(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pc" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.date.tsx

@@ -23,7 +23,7 @@ export function installFilterDate(
   }: iFilterService) {
   touch<iFilterConfigDate>('date')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       getDescription: defaultRangeGetDescription,
       ...defaultRangeHandlerAttrs,
       render: ({ formData, option }) => <DatePicker
@@ -54,7 +54,7 @@ export function installFilterDate(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]}/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -63,7 +63,7 @@ export function installFilterDate(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]} multiple valueType="arraystring"/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -72,7 +72,7 @@ export function installFilterDate(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]} multiple valueType="arraystring"/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);

package/src/packages/components/FilterService/filter/filter.datetime.tsx

@@ -23,7 +23,7 @@ export function installFilterDatetime(
   }: iFilterService) {
   touch<iFilterConfigDate>('datetime')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       getDescription: defaultRangeGetDescription,
       ...defaultRangeHandlerAttrs,
       render: ({ formData, option }) => <DatePicker
@@ -55,7 +55,7 @@ export function installFilterDatetime(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option }) => <DatePicker v-model={formData[option.field!]} datetime/>,
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);

package/src/packages/components/FilterService/filter/filter.district.tsx

@@ -5,7 +5,7 @@ import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
 import {createAddressDescriptionGetter} from "./filter.province";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -22,7 +22,7 @@ export function installFilterDistrict(
   }: iFilterService) {
   touch('district')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -33,7 +33,7 @@ export function installFilterDistrict(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
         const val = formData[option.field]?.district;
         const service = $configuration.get('address')!;
@@ -61,7 +61,7 @@ export function installFilterDistrict(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pcd" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -71,7 +71,7 @@ export function installFilterDistrict(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="pcd" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.number.tsx

@@ -23,7 +23,7 @@ export function installFilterNumber(
 
   touch<iFilterConfigNumber>('number')
     .setHandler('range', {
-      label: i18n('base.filter.range').d('范围'),
+      label: () => i18n.$it('base.filter.range').d('范围'),
       ...defaultRangeHandlerAttrs,
       getDescription: defaultRangeGetDescription,
       render: ({ formData, option, confirm }) => (

package/src/packages/components/FilterService/filter/filter.province.tsx

@@ -4,7 +4,7 @@ import {Input} from "../../Input";
 import {$configuration} from "../../$configuration";
 import {eAddressTypeEnum} from "../../$address/address.utils";
 import {AddressCascade} from "../../AddressCascade";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import i18n from "../../i18n";
 
 /**
@@ -46,7 +46,7 @@ export function installFilterProvince(
   }: iFilterService) {
   touch('province')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -57,7 +57,7 @@ export function installFilterProvince(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: createAddressDescriptionGetter({ multiple: false, valueType: undefined }),
       render: ({ formData, option }) => (<AddressCascade v-model:province={formData[option.field!]} types="p"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -67,7 +67,7 @@ export function installFilterProvince(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="p" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {
@@ -77,7 +77,7 @@ export function installFilterProvince(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createAddressDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<AddressCascade v-model={formData[option.field!]} types="p" multiple valueType="arraystring"/>),
       getQueryParam: async ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.select.tsx

@@ -1,8 +1,8 @@
-import {RenderNode} from "plain-design-composition";
+import {RenderNode} from "@peryl/react-compose";
 import {iFilterService} from "../index";
 import {eFilterOperator, iFilterOption} from "../utils/filter.service.utils";
 import {Select} from "../../Select";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import SelectDisplay from "../../SelectDisplay";
 import i18n from "../../i18n";
 
@@ -32,7 +32,7 @@ export function installFilterSelect(
   }: iFilterService) {
   touch<iFilterConfigSelect>('select')
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       getDescription: createDescriptionGetter({ multiple: false, valueType: undefined }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]}>{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {
@@ -42,7 +42,7 @@ export function installFilterSelect(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]} multiple valueType="arraystring">{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {
@@ -52,7 +52,7 @@ export function installFilterSelect(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createDescriptionGetter({ multiple: true, valueType: 'arraystring' }),
       render: ({ formData, option }) => (<Select v-model={formData[option.field]} multiple valueType="arraystring">{option.filterConfig.renderOptions()}</Select>),
       getQueryParam: ({ formData, option }) => {

package/src/packages/components/FilterService/filter/filter.text.tsx

@@ -17,7 +17,7 @@ export function installFilterText(
   }: iFilterService) {
   touch('text')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -26,7 +26,7 @@ export function installFilterText(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -35,7 +35,7 @@ export function installFilterText(
       },
     })
     .setHandler('in_like', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} multiple valueType="arraystring"/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -44,7 +44,7 @@ export function installFilterText(
       },
     })
     .setHandler('not_in_like', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} multiple valueType="arraystring"/>),
       getQueryParam: ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);

package/src/packages/components/FilterService/filter/fitler.object.tsx

@@ -1,6 +1,6 @@
 import {iFilterService} from "../index";
 import {eFilterOperator, iFilterOption} from "../utils/filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {Input} from "../../Input";
 import {_Object} from "../../Object";
 /**
@@ -40,7 +40,7 @@ export function installFilterObject(
   }: iFilterService) {
   touch<iFilterConfigObject>('object')
     .setHandler('like', {
-      label: i18n('base.filter.like').d('约等于'),
+      label: () => i18n.$it('base.filter.like').d('约等于'),
       render: ({ formData, option, confirm }) => (<Input v-model={formData[option.field!]} onEnter={confirm}/>),
       getQueryParam: async ({ formData, option }) => {
         const { isEmpty, value, field } = checkEmpty(formData, option);
@@ -49,7 +49,7 @@ export function installFilterObject(
       },
     })
     .setHandler('eq', {
-      label: i18n('base.filter.equal').d('等于'),
+      label: () => i18n.$it('base.filter.equal').d('等于'),
       render: ({ formData, option, confirm }) => (
         <_Object
           v-model={formData[option.field]}
@@ -69,7 +69,7 @@ export function installFilterObject(
       },
     })
     .setHandler('in', {
-      label: i18n('base.filter.include').d('包含'),
+      label: () => i18n.$it('base.filter.include').d('包含'),
       getDescription: createDescriptionGetter(),
       render: ({ formData, option, confirm }) => (
         <_Object
@@ -90,7 +90,7 @@ export function installFilterObject(
       },
     })
     .setHandler('not_in', {
-      label: i18n('base.filter.notInclude').d('不包含'),
+      label: () => i18n.$it('base.filter.notInclude').d('不包含'),
       getDescription: createDescriptionGetter(),
       render: ({ formData, option, confirm }) => (
         <_Object

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

@@ -1,6 +1,6 @@
-import {reactive} from "plain-design-composition";
+import {reactive} from "@peryl/react-compose";
 import {eFilterOperator, iFilterHandler, iFilterOption, iFilterType} from "./utils/filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 import {installFilterText} from "./filter/filter.text";
 import {installFilterDate} from "./filter/filter.date";
 import {Input} from "../Input";
@@ -168,9 +168,9 @@ export const FilterService = (() => {
   const defaultNullHandler: Parameters<iFilterType<any>['setHandler']> = [
     'is_null',
     {
-      label: i18n('base.isEmpty').d('为空'),
+      label: () => i18n.$it('base.isEmpty').d('为空'),
       getDescription: () => undefined,
-      render: () => (<Input placeholder={i18n('base.isEmpty').d('为空')} disabled/>),
+      render: () => (<Input placeholder={i18n.$it('base.isEmpty').d('为空')} disabled/>),
       getQueryParam: ({ formData, option }) => {
         const { value, field } = checkEmpty(formData, option);
         if (!field) {return null;}
@@ -182,9 +182,9 @@ export const FilterService = (() => {
   const defaultNotnullHandler: Parameters<iFilterType<any>['setHandler']> = [
     'is_not_null',
     {
-      label: i18n('base.isNotEmpty').d('不为空'),
+      label: () => i18n.$it('base.isNotEmpty').d('不为空'),
       getDescription: () => undefined,
-      render: () => (<Input placeholder={i18n('base.isNotEmpty').d('不为空')} disabled/>),
+      render: () => (<Input placeholder={i18n.$it('base.isNotEmpty').d('不为空')} disabled/>),
       getQueryParam: ({ formData, option }) => {
         const { value, field } = checkEmpty(formData, option);
         if (!field) {return null;}
@@ -214,10 +214,10 @@ export const FilterService = (() => {
    * @date    2023.1.14 23:52
    */
   const defaultRangeGetDescription = ({ formData, option }: { formData: PlainObject, option: iFilterOption }) => {
-    const start = !formData[option.startField] ? null : `${i18n('base.largerThan').d('大于')}${formData[option.startField]}`;
-    const end = !formData[option.endField] ? null : `${i18n('base.lessThan').d('小于')}${formData[option.endField]}`;
+    const start = !formData[option.startField] ? null : `${i18n.$it('base.largerThan').d('大于')}${formData[option.startField]}`;
+    const end = !formData[option.endField] ? null : `${i18n.$it('base.lessThan').d('小于')}${formData[option.endField]}`;
     if (!start && !end) {return null;}
-    return [start, end].filter(Boolean).join(` ${i18n('base.and').d('并且')} `);
+    return [start, end].filter(Boolean).join(` ${i18n.$it('base.and').d('并且')} `);
   };
 
   return {

package/src/packages/components/FilterService/utils/filter.service.utils.ts

@@ -1,5 +1,5 @@
-import {RenderNode} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {RenderNode} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {PartialFields} from "../../../utils/type";
 
 /**
@@ -82,7 +82,7 @@ export interface iFilterHandler<FilterConfig = PlainObject> {
   /*唯一标识*/
   name: string;
   /*显示名称*/
-  label: string,
+  label: () => string,
   /*排序*/
   seq: number,
   /*渲染内容*/

package/src/packages/components/FilterService/utils/mergeQueryParam.ts

@@ -1,7 +1,7 @@
 import {iFilterHandlerQueryMeta, iFilterHandlerQueryParam, iFilterQueryMeta, iFilterQueryParam} from "./filter.service.utils";
-import {PlainObject} from "plain-utils/utils/event";
-import {deepcopy} from "plain-utils/object/deepcopy";
-import {createCounter} from "plain-utils/utils/createCounter";
+import {PlainObject} from "@peryl/utils/event";
+import {deepcopy} from "@peryl/utils/deepcopy";
+import {createCounter} from "@peryl/utils/createCounter";
 
 export function mergeQueryParam(...queryParamList: (iFilterQueryParam | iFilterHandlerQueryParam | null | undefined | void)[]): iFilterQueryParam {
   const requestData: PlainObject = {};

package/src/packages/components/Form/form.scss

@@ -11,6 +11,22 @@
       line-height: $height;
       font-size: $font-size;
     }
+
+    /*@formatter:off*/
+    .form-item-validate-message-inner {
+      font-size: $font-size;
+
+    }
+    .form-item-validate-position-bottom-left { .form-item-validate-message-inner {line-height: 1.5em} }
+    .form-item-validate-position-bottom-right { .form-item-validate-message-inner {line-height: 1.5em} }
+    .form-item-validate-position-right {
+      .form-item-validate-message-inner {
+        margin-left: $margin;
+        line-height: $height;
+        height: $height;
+      }
+    }
+/*@formatter:on*/
   }
 
   @include prefix(form-item) {
@@ -33,6 +49,12 @@
     .form-item-content {
       display: inline-block;
       box-sizing: border-box;
+
+      .form-item-content-inner {
+        & > .#{componentName(form-item)}:first-child {
+          margin-top: 0 !important;
+        }
+      }
     }
 
     &.form-item-label-align-left {
@@ -60,16 +82,19 @@
     &.form-item-content-align-left {
       .form-item-content-inner {
         text-align: left;
+        position: relative;
       }
     }
     &.form-item-content-align-center {
       .form-item-content-inner {
         text-align: center;
+        position: relative;
       }
     }
     &.form-item-content-align-right {
       .form-item-content-inner {
         text-align: right;
+        position: relative;
       }
     }
 
@@ -103,12 +128,43 @@
       }
     }
 
-
     &.form-item-no-label {
       .form-item-content {
         width: 100% !important;
       }
     }
+
+    .form-item-validate-message-inner {
+      color: plv(error-6);
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      @include comp(icon) {
+        margin-right: 0.25em;
+      }
+    }
+    &.form-item-validate-position-bottom-left {
+      .form-item-validate-message-inner {
+        position: absolute;
+        top: 100%;
+        left: 0;
+      }
+    }
+    &.form-item-validate-position-bottom-right {
+      .form-item-validate-message-inner {
+        position: absolute;
+        top: 100%;
+        right: 0;
+      }
+    }
+    &.form-item-validate-position-right {
+      .form-item-validate-message-inner {
+        position: absolute;
+        left: 100%;
+        top: 0;
+      }
+    }
+
   }
 
   &.form-column-1 {
@@ -130,7 +186,7 @@
   }
 
   &:not(.form-column-1) {
-    overflow: hidden;
+    //overflow: hidden;
     @include prefix(form-item) {
       display: inline-block;
     }
@@ -154,11 +210,15 @@
 
   &.form-vertical-label {
     @include prefix(form-item) {
+      .form-item-label {
+        display: block;
+      }
       .form-item-label, .form-item-content {
         width: 100%;
       }
     }
   }
+
   &:not(.form-vertical-label) {
     @include prefix(form-item) {
       .form-item-label {
@@ -166,4 +226,27 @@
       }
     }
   }
+
+  &.form-hide-label {
+    .form-item-label {
+      display: none;
+    }
+  }
+
+  &.form-full {
+    height: 100%;
+    width: 100%;
+
+    .form-inner {
+      height: 100%;
+      width: 100%;
+      margin: 0 !important;
+    }
+  }
+
+  &.form-input-mode-text {
+    .form-item-label, .form-item-content {
+      line-height: calc(1em + 8px) !important;
+    }
+  }
 }

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

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+import {designComponent, getComponentCls, useClasses} from "@peryl/react-compose";
 import './form.scss';
 import {FormValidatePropsOption} from "./validate/validate.utils";
 import {DefaultFormLabelWidth, FormLayoutPropsOption, useFormLayout} from "./layout/useFormLayout";
@@ -13,6 +13,7 @@ export const Form = designComponent({
     DefaultFormLabelWidth,
   },
   props: {
+    full: { type: Boolean },
     ...EditProps,
     ...StyleProps,
     ...FormValidatePropsOption,
@@ -25,7 +26,12 @@ export const Form = designComponent({
   setup({ props, slots }) {
 
     /*编辑控制*/
-    useEdit({ adjust: (ret) => {ret.loading = null;} });
+    useEdit({
+      adjust: (ret) => {
+        ret.loading = null;
+        props.inputMode === 'text' && (ret.readonly = true);
+      }
+    });
 
     /*样式控制*/
     const { styleComputed } = useStyle();
@@ -43,6 +49,9 @@ export const Form = designComponent({
       {
         ['form-vertical-label']: !!props.verticalLabel,
         ['form-column-center']: !!props.singleColumnCenter,
+        ['form-hide-label']: !!props.hideLabel,
+        'form-full': props.full,
+        'form-input-mode-text': props.inputMode === 'text',
       },
     ]);