@kne/form-info 0.1.6 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +188 -98
  2. package/dist/en-US.d.ts +9 -9
  3. package/dist/index.css +62 -59
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.js +119 -179
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.modern.js +17 -25
  8. package/dist/index.modern.js.map +1 -1
  9. package/dist/zh-CN.d.ts +9 -9
  10. package/package.json +2 -2
package/README.md CHANGED
@@ -272,7 +272,7 @@ const BaseExample = () => {
272
272
  loading: loading
273
273
  }}
274
274
  >
275
- <FormInfo
275
+ <FormInfo bordered
276
276
  title="基本信息"
277
277
  column={2}
278
278
  list={[
@@ -289,7 +289,7 @@ const BaseExample = () => {
289
289
 
290
290
  <Divider />
291
291
 
292
- <List
292
+ <List
293
293
  title="工作经历"
294
294
  name="workExperience"
295
295
  itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
@@ -811,6 +811,93 @@ render(<BaseExample />);
811
811
 
812
812
  ```
813
813
 
814
+ - 边框模式示例
815
+ - 演示FormInfo、List、TableList组件的bordered属性，控制卡片是否显示边框，通过开关切换对比有边框与无边框效果
816
+ - _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
817
+
818
+ ```jsx
819
+ const {default: FormInfo, List, TableList, Form, Input, TextArea} = _FormInfo;
820
+ const {Flex, Switch, Space, Divider} = antd;
821
+ const {useState} = React;
822
+
823
+ const BorderedExample = () => {
824
+ const [bordered, setBordered] = useState(true);
825
+
826
+ return <Form data={{
827
+ employeeId: 'EMP20240001',
828
+ name: '张三',
829
+ department: '技术研发部'
830
+ }}>
831
+ <Flex vertical gap={16}>
832
+ <Space>
833
+ <span>边框模式：</span>
834
+ <Switch checked={bordered} onChange={setBordered} />
835
+ </Space>
836
+
837
+ <FormInfo
838
+ title="员工基本信息"
839
+ subtitle="bordered 控制卡片是否显示边框"
840
+ bordered={bordered}
841
+ column={2}
842
+ gap={20}
843
+ list={[
844
+ <Input name="employeeId" label="工号" rule="REQ" disabled />,
845
+ <Input name="name" label="姓名" rule="REQ" placeholder="请输入员工姓名" />,
846
+ <Input name="department" label="所属部门" rule="REQ" placeholder="例如：技术研发部" />,
847
+ <Input name="position" label="职位" rule="REQ" placeholder="例如：高级前端工程师" />
848
+ ]}
849
+ />
850
+
851
+ <Divider />
852
+
853
+ <List
854
+ title="工作经历（important）"
855
+ name="workExperience"
856
+ bordered={bordered}
857
+ itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
858
+ important
859
+ addText="添加工作经历"
860
+ list={[
861
+ <Input name="companyName" label="公司名称" rule="REQ" placeholder="例如：阿里巴巴集团" />,
862
+ <Input name="jobTitle" label="职位名称" rule="REQ" placeholder="例如：高级开发工程师" />,
863
+ <TextArea name="workDescription" label="工作描述" placeholder="请描述主要工作内容和成就" block />
864
+ ]}
865
+ />
866
+
867
+ <List
868
+ title="教育经历（非important）"
869
+ name="educationHistory"
870
+ bordered={bordered}
871
+ itemTitle={({index, data}) => data?.schoolName || `教育经历 ${index + 1}`}
872
+ addText="添加教育经历"
873
+ list={[
874
+ <Input name="schoolName" label="学校名称" rule="REQ" placeholder="例如：北京大学" />,
875
+ <Input name="major" label="专业" rule="REQ" placeholder="例如：计算机科学与技术" />,
876
+ <Input name="degree" label="学历" rule="REQ" placeholder="例如：本科" />
877
+ ]}
878
+ />
879
+
880
+ <Divider />
881
+
882
+ <TableList
883
+ title="家庭成员信息"
884
+ name="familyMembers"
885
+ bordered={bordered}
886
+ addText="添加家庭成员"
887
+ list={[
888
+ <Input name="memberName" label="姓名" rule="REQ" placeholder="家庭成员姓名" />,
889
+ <Input name="relationship" label="关系" rule="REQ" placeholder="例如：配偶、子女" />,
890
+ <Input name="memberPhone" label="联系电话" rule="TEL" placeholder="联系电话" />
891
+ ]}
892
+ />
893
+ </Flex>
894
+ </Form>;
895
+ };
896
+
897
+ render(<BorderedExample />);
898
+
899
+ ```
900
+
814
901
 
815
902
  ### API
816
903
 
@@ -818,144 +905,147 @@ render(<BaseExample />);
818
905
 
819
906
  基础的表单信息展示组件，用于创建结构化的表单布局。
820
907
 
821
- | 属性名 | 说明 | 类型 | 默认值 |
822
- |-----|----|----|-----|
823
- | column | 列数，支持数字或Flexbox配置 | number \| object | 2 |
824
- | list | 表单项列表 | ReactNode[] | [] |
825
- | gap | 字段间距 | number | 24 |
826
- | className | 自定义样式类名 | string | - |
827
- | title | 标题 | string \| ReactNode | - |
828
- | subtitle | 副标题 | string \| ReactNode | - |
908
+ || 属性名 | 说明 | 类型 | 默认值 |
909
+ ||-----|----|----|-----|
910
+ || column | 列数，支持数字或Flexbox配置 | number \| object | 2 |
911
+ || list | 表单项列表 | ReactNode[] | [] |
912
+ || gap | 字段间距 | number | 24 |
913
+ || className | 自定义样式类名 | string | - |
914
+ || title | 标题 | string \| ReactNode | - |
915
+ || subtitle | 副标题 | string \| ReactNode | - |
916
+ || bordered | 是否显示边框 | boolean | - |
829
917
 
830
918
  ### FormModal
831
919
 
832
920
  模态框表单组件，在弹窗中展示表单内容。
833
921
 
834
- | 属性名 | 说明 | 类型 | 默认值 |
835
- |-----|----|----|-----|
836
- | open | 是否显示模态框 | boolean | false |
837
- | onCancel | 关闭回调 | function | - |
838
- | formProps | 表单属性 | object | {} |
839
- | autoClose | 提交后自动关闭 | boolean | true |
840
- | okType | 确认按钮类型 | string | primary |
841
- | okText | 确认按钮文本 | string \| ReactNode | 提交 |
842
- | cancelText | 取消按钮文本 | string \| ReactNode | 取消 |
843
- | okButtonProps | 确认按钮属性 | object | - |
844
- | cancelButtonProps | 取消按钮属性 | object | - |
845
- | footer | 底部内容 | ReactNode \| function | - |
846
- | renderModal | 自定义模态框渲染 | function | - |
847
- | modalRender | 自定义内容渲染 | function | - |
922
+ || 属性名 | 说明 | 类型 | 默认值 |
923
+ ||-----|----|----|-----|
924
+ || open | 是否显示模态框 | boolean | false |
925
+ || onCancel | 关闭回调 | function | - |
926
+ || formProps | 表单属性 | object | {} |
927
+ || autoClose | 提交后自动关闭 | boolean | true |
928
+ || okType | 确认按钮类型 | string | primary |
929
+ || okText | 确认按钮文本 | string \| ReactNode | 提交 |
930
+ || cancelText | 取消按钮文本 | string \| ReactNode | 取消 |
931
+ || okButtonProps | 确认按钮属性 | object | - |
932
+ || cancelButtonProps | 取消按钮属性 | object | - |
933
+ || footer | 底部内容 | ReactNode \| function | - |
934
+ || renderModal | 自定义模态框渲染 | function | - |
935
+ || modalRender | 自定义内容渲染 | function | - |
848
936
 
849
937
  ### FormSteps
850
938
 
851
939
  步骤表单组件，支持多步骤表单流程。
852
940
 
853
- | 属性名 | 说明 | 类型 | 默认值 |
854
- |-----|----|----|-----|
855
- | items | 步骤配置项 | array | [] |
856
- | current | 当前步骤 | number | - |
857
- | defaultCurrent | 默认当前步骤 | number | 0 |
858
- | autoStep | 自动切换下一步 | boolean | true |
859
- | direction | 步骤条方向 | string | horizontal |
860
- | orientation | 步骤条方向 | string | horizontal |
861
- | onChange | 步骤切换回调 | function | - |
862
- | onComplete | 完成回调 | function | - |
863
- | stepsClassName | 步骤条样式类名 | string | - |
941
+ || 属性名 | 说明 | 类型 | 默认值 |
942
+ ||-----|----|----|-----|
943
+ || items | 步骤配置项 | array | [] |
944
+ || current | 当前步骤 | number | - |
945
+ || defaultCurrent | 默认当前步骤 | number | 0 |
946
+ || autoStep | 自动切换下一步 | boolean | true |
947
+ || direction | 步骤条方向 | string | horizontal |
948
+ || orientation | 步骤条方向 | string | horizontal |
949
+ || onChange | 步骤切换回调 | function | - |
950
+ || onComplete | 完成回调 | function | - |
951
+ || stepsClassName | 步骤条样式类名 | string | - |
864
952
 
865
953
  每个步骤项配置：
866
954
 
867
- | 属性名 | 说明 | 类型 | 默认值 |
868
- |-----|----|----|-----|
869
- | title | 步骤标题 | string \| ReactNode | - |
870
- | formProps | 表单属性 | object | - |
871
- | children | 步骤内容 | ReactNode \| function | - |
955
+ || 属性名 | 说明 | 类型 | 默认值 |
956
+ ||-----|----|----|-----|
957
+ || title | 步骤标题 | string \| ReactNode | - |
958
+ || formProps | 表单属性 | object | - |
959
+ || children | 步骤内容 | ReactNode \| function | - |
872
960
 
873
961
  ### FormStepsModal
874
962
 
875
963
  模态框步骤表单组件，结合了模态框和步骤表单功能。
876
964
 
877
- | 属性名 | 说明 | 类型 | 默认值 |
878
- |-----|----|----|-----|
879
- | items | 步骤配置项 | array | [] |
880
- | modalProps | 模态框属性 | object | {autoClose: true} |
881
- | completeText | 完成按钮文本 | string \| ReactNode | 完成 |
882
- | nextText | 下一步按钮文本 | string \| ReactNode | 下一步 |
883
- | autoStep | 自动切换下一步 | boolean | true |
884
- | onComplete | 完成回调 | function | - |
885
- | className | 样式类名 | string | - |
965
+ || 属性名 | 说明 | 类型 | 默认值 |
966
+ ||-----|----|----|-----|
967
+ || items | 步骤配置项 | array | [] |
968
+ || modalProps | 模态框属性 | object | {autoClose: true} |
969
+ || completeText | 完成按钮文本 | string \| ReactNode | 完成 |
970
+ || nextText | 下一步按钮文本 | string \| ReactNode | 下一步 |
971
+ || autoStep | 自动切换下一步 | boolean | true |
972
+ || onComplete | 完成回调 | function | - |
973
+ || className | 样式类名 | string | - |
886
974
 
887
975
  ### List
888
976
 
889
977
  列表表单组件，支持动态添加/删除列表项。
890
978
 
891
- | 属性名 | 说明 | 类型 | 默认值 |
892
- |-----|----|----|-----|
893
- | name | 字段名 | string | - |
894
- | title | 列表标题 | string \| ReactNode | - |
895
- | list | 表单项列表 | ReactNode[] | - |
896
- | important | 是否重要样式 | boolean | false |
897
- | addText | 添加按钮文本 | string \| ReactNode | 添加 |
898
- | removeText | 删除按钮文本 | string \| ReactNode | 删除 |
899
- | addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
900
- | removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
901
- | empty | 空状态内容 | ReactNode | Empty |
902
- | itemClassName | 列表项样式类名 | string | - |
903
- | className | 样式类名 | string | - |
979
+ || 属性名 | 说明 | 类型 | 默认值 |
980
+ ||-----|----|----|-----|
981
+ || name | 字段名 | string | - |
982
+ || title | 列表标题 | string \| ReactNode | - |
983
+ || list | 表单项列表 | ReactNode[] | - |
984
+ || important | 是否重要样式 | boolean | false |
985
+ || bordered | 是否显示边框 | boolean | - |
986
+ || addText | 添加按钮文本 | string \| ReactNode | 添加 |
987
+ || removeText | 删除按钮文本 | string \| ReactNode | 删除 |
988
+ || addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
989
+ || removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
990
+ || empty | 空状态内容 | ReactNode | Empty |
991
+ || itemClassName | 列表项样式类名 | string | - |
992
+ || className | 样式类名 | string | - |
904
993
 
905
994
  ### TableList
906
995
 
907
996
  表格列表表单组件，以表格形式展示列表数据。
908
997
 
909
- | 属性名 | 说明 | 类型 | 默认值 |
910
- |-----|----|----|-----|
911
- | name | 字段名 | string | - |
912
- | title | 表格标题 | string \| ReactNode | - |
913
- | list | 表单项列表 | ReactNode[] | - |
914
- | addText | 添加按钮文本 | string \| ReactNode | 添加 |
915
- | removeText | 删除按钮文本 | string \| ReactNode | 删除 |
916
- | addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
917
- | removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
918
- | empty | 空状态内容 | ReactNode | Empty |
919
- | className | 样式类名 | string | - |
998
+ || 属性名 | 说明 | 类型 | 默认值 |
999
+ ||-----|----|----|-----|
1000
+ || name | 字段名 | string | - |
1001
+ || title | 表格标题 | string \| ReactNode | - |
1002
+ || list | 表单项列表 | ReactNode[] | - |
1003
+ || bordered | 是否显示边框 | boolean | - |
1004
+ || addText | 添加按钮文本 | string \| ReactNode | 添加 |
1005
+ || removeText | 删除按钮文本 | string \| ReactNode | 删除 |
1006
+ || addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
1007
+ || removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
1008
+ || empty | 空状态内容 | ReactNode | Empty |
1009
+ || className | 样式类名 | string | - |
920
1010
 
921
1011
  ### MultiField
922
1012
 
923
1013
  多字段组件，支持动态添加/删除同类型字段。
924
1014
 
925
- | 属性名 | 说明 | 类型 | 默认值 |
926
- |-----|----|----|-----|
927
- | name | 字段名 | string | - |
928
- | label | 字段标签 | string | - |
929
- | field | 字段组件 | React.ComponentType | - |
930
- | block | 是否块级显示 | boolean | false |
931
- | addText | 添加按钮文本 | string \| function | 添加 |
932
- | removeText | 删除按钮文本 | string \| function | - |
933
- | addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
934
- | removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
935
- | empty | 空状态内容 | ReactNode | Empty |
936
- | className | 样式类名 | string | - |
1015
+ || 属性名 | 说明 | 类型 | 默认值 |
1016
+ ||-----|----|----|-----|
1017
+ || name | 字段名 | string | - |
1018
+ || label | 字段标签 | string | - |
1019
+ || field | 字段组件 | React.ComponentType | - |
1020
+ || block | 是否块级显示 | boolean | false |
1021
+ || addText | 添加按钮文本 | string \| function | 添加 |
1022
+ || removeText | 删除按钮文本 | string \| function | - |
1023
+ || addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
1024
+ || removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
1025
+ || empty | 空状态内容 | ReactNode | Empty |
1026
+ || className | 样式类名 | string | - |
937
1027
 
938
1028
  ### Form
939
1029
 
940
1030
  基础表单容器组件。
941
1031
 
942
- | 属性名 | 说明 | 类型 | 默认值 |
943
- |-----|----|----|-----|
944
- | type | 表单类型 | string | inner |
945
- | className | 自定义样式类名 | string | - |
946
- | children | 子组件 | ReactNode | - |
1032
+ || 属性名 | 说明 | 类型 | 默认值 |
1033
+ ||-----|----|----|-----|
1034
+ || type | 表单类型 | string | inner |
1035
+ || className | 自定义样式类名 | string | - |
1036
+ || children | 子组件 | ReactNode | - |
947
1037
 
948
1038
  ### 国际化配置
949
1039
 
950
1040
  组件内置以下国际化文本：
951
1041
 
952
- | 键名 | 中文 | 英文 |
953
- |-----|----|----|
954
- | submit | 提交 | Submit |
955
- | cancel | 取消 | Cancel |
956
- | complete | 完成 | Complete |
957
- | next | 下一步 | Next |
958
- | addText | 添加 | Add |
959
- | deleteText | 删除 | Delete |
1042
+ || 键名 | 中文 | 英文 |
1043
+ ||-----|----|----|
1044
+ || submit | 提交 | Submit |
1045
+ || cancel | 取消 | Cancel |
1046
+ || complete | 完成 | Complete |
1047
+ || next | 下一步 | Next |
1048
+ || addText | 添加 | Add |
1049
+ || deleteText | 删除 | Delete |
960
1050
 
961
1051
  可通过 withLocale HOC 或 useIntl hook 自定义国际化文本。
package/dist/en-US.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- export default locale;
2
- declare namespace locale {
3
- const submit: string;
4
- const cancel: string;
5
- const complete: string;
6
- const next: string;
7
- const addText: string;
8
- const deleteText: string;
9
- }
1
+ export default locale;
2
+ declare namespace locale {
3
+ let submit: string;
4
+ let cancel: string;
5
+ let complete: string;
6
+ let next: string;
7
+ let addText: string;
8
+ let deleteText: string;
9
+ }
package/dist/index.css CHANGED
@@ -1,194 +1,197 @@
1
- ._ZQNNL .multi-field-delete-label {
1
+ .kne-form-info_ZQNNL .multi-field-delete-label {
2
2
  display: none;
3
3
  }
4
- ._ZQNNL.react-form--inner .react-form__field-label.is-req:before {
4
+ .kne-form-info_ZQNNL.react-form--inner .react-form__field-label.is-req:before {
5
5
  position: static;
6
6
  transform: translateX(0);
7
7
  margin-right: 6px;
8
8
  }
9
- ._ZQNNL.react-form--inner .multi-field-delete-label {
9
+ .kne-form-info_ZQNNL.react-form--inner .multi-field-delete-label {
10
10
  display: block;
11
11
  }
12
- ._ZQNNL .react-form__field {
12
+ .kne-form-info_ZQNNL .react-form__field {
13
13
  color: var(--font-color);
14
14
  }
15
- ._ZQNNL .react-form__field input {
15
+ .kne-form-info_ZQNNL .react-form__field input {
16
16
  color: var(--font-color);
17
17
  }
18
- ._ZQNNL .react-form__field input::placeholder {
18
+ .kne-form-info_ZQNNL .react-form__field input::placeholder {
19
19
  color: var(--font-color-grey-2);
20
20
  }
21
- ._ZQNNL .react-form__field-label {
21
+ .kne-form-info_ZQNNL .react-form__field-label {
22
22
  color: var(--font-color-grey);
23
23
  font-size: 14px;
24
24
  line-height: 20px;
25
25
  margin-bottom: 8px;
26
26
  font-weight: normal !important;
27
27
  }
28
- ._ZQNNL .react-form__field-label.is-req:before {
28
+ .kne-form-info_ZQNNL .react-form__field-label.is-req:before {
29
29
  color: var(--color-warning);
30
30
  display: inline-block;
31
31
  font-weight: bold;
32
32
  }
33
- ._ZQNNL .react-form__field-error {
33
+ .kne-form-info_ZQNNL .react-form__field-error {
34
34
  line-height: 14px;
35
35
  }
36
- ._ZQNNL .ant-input-number,
37
- ._ZQNNL .ant-input-number-group-wrapper {
36
+ .kne-form-info_ZQNNL .ant-input-number,
37
+ .kne-form-info_ZQNNL .ant-input-number-group-wrapper {
38
38
  width: 100%;
39
39
  }
40
- ._ZQNNL .ant-picker.react-form__field-component,
41
- ._ZQNNL .data_range_picker {
40
+ .kne-form-info_ZQNNL .ant-picker.react-form__field-component,
41
+ .kne-form-info_ZQNNL .data_range_picker {
42
42
  flex: 1;
43
43
  width: 100%;
44
44
  }
45
- ._ZQNNL .ant-input-number-group-addon,
46
- ._ZQNNL .ant-input-group-addon {
45
+ .kne-form-info_ZQNNL .ant-input-number-group-addon,
46
+ .kne-form-info_ZQNNL .ant-input-group-addon {
47
47
  background: #ffffff;
48
48
  color: var(--font-color);
49
49
  }
50
50
 
51
- ._GW4Xx > .ant-card-head .part-title {
51
+ .kne-form-info_GW4Xx > .ant-card-head .part-title {
52
52
  font-size: var(--font-size-large);
53
53
  }
54
54
 
55
- ._eY4qR.ant-btn {
55
+ .kne-form-info_eY4qR.ant-btn {
56
56
  border-radius: var(--radius-default, 2px);
57
57
  border: 1px solid var(--font-color-grey-2);
58
58
  padding: 6px 12px;
59
59
  }
60
60
 
61
- ._SL3dC > .ant-card-head .part-title {
61
+ .kne-form-info_SL3dC > .ant-card-head .part-title {
62
62
  font-size: var(--font-size-large);
63
63
  }
64
- ._SL3dC ._SL3dC ._eY4qR {
64
+ .kne-form-info_SL3dC .kne-form-info_SL3dC .kne-form-info_eY4qR {
65
65
  padding: 0;
66
66
  border: none;
67
67
  min-width: 0;
68
68
  }
69
- ._SL3dC.ant-card .ant-card-body {
69
+ .kne-form-info_SL3dC.ant-card .ant-card-body {
70
70
  padding: 16px 0 0;
71
71
  border-radius: 0;
72
72
  }
73
73
 
74
- ._PNnMa._Xkp38 > ._HiB5Q.ant-card > .ant-card-head {
74
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head {
75
75
  background: var(--primary-color-06);
76
76
  }
77
- ._PNnMa._Xkp38 > ._HiB5Q.ant-card > .ant-card-head .ant-card-head-title .part-title {
77
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card > .ant-card-head .ant-card-head-title .part-title {
78
78
  color: var(--primary-color);
79
79
  }
80
- ._PNnMa._Xkp38 ._HiB5Q.ant-card .ant-card-head-title .part-title {
80
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 .kne-form-info_HiB5Q.ant-card .ant-card-head-title .part-title {
81
81
  font-weight: 500;
82
82
  }
83
- ._PNnMa._Xkp38 > ._HiB5Q.ant-card ._SL3dC.ant-card > .ant-card-head {
83
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card .kne-form-info_SL3dC.ant-card > .ant-card-head {
84
84
  background: transparent;
85
85
  padding: 0;
86
86
  border: none;
87
87
  line-height: 1;
88
88
  }
89
- ._PNnMa._Xkp38 > ._HiB5Q.ant-card ._SL3dC.ant-card > .ant-card-head .part-title {
89
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card .kne-form-info_SL3dC.ant-card > .ant-card-head .part-title {
90
90
  background: var(--primary-color-06);
91
91
  color: var(--primary-color);
92
92
  font-size: var(--font-size-small);
93
93
  font-weight: bold;
94
94
  }
95
- ._PNnMa._Xkp38 > ._HiB5Q.ant-card ._SL3dC.ant-card > .ant-card-body {
95
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q.ant-card .kne-form-info_SL3dC.ant-card > .ant-card-body {
96
96
  padding: 16px 0;
97
97
  }
98
- ._PNnMa._Xkp38 > ._HiB5Q {
98
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 > .kne-form-info_HiB5Q {
99
99
  border-color: var(--primary-color-5);
100
100
  }
101
- ._PNnMa._Xkp38 ._Uw-3T {
101
+ .kne-form-info_PNnMa.kne-form-info_Xkp38 .kne-form-info_Uw-3T {
102
102
  border: none;
103
103
  }
104
- ._PNnMa ._HiB5Q.ant-card .ant-card-head {
104
+ .kne-form-info_PNnMa .kne-form-info_HiB5Q {
105
+ padding: 0;
106
+ }
107
+ .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-head {
105
108
  background: #f8f8f8;
106
109
  border-bottom: 1px solid var(--font-color-grey-4);
107
110
  line-height: 36px;
108
111
  height: 36px;
109
112
  padding: 0 16px;
110
113
  }
111
- ._PNnMa ._HiB5Q.ant-card .ant-card-head ._eY4qR {
114
+ .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-head .kne-form-info_eY4qR {
112
115
  min-width: auto !important;
113
116
  border: none !important;
114
117
  padding: 0 !important;
115
118
  background: transparent !important;
116
119
  }
117
- ._PNnMa ._HiB5Q.ant-card .ant-card-head-title .part-title {
120
+ .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-head-title .part-title {
118
121
  background: transparent;
119
122
  font-weight: normal;
120
123
  font-size: 14px;
121
124
  color: var(--font-color);
122
125
  }
123
- ._PNnMa ._HiB5Q.ant-card .ant-card-body {
126
+ .kne-form-info_PNnMa .kne-form-info_HiB5Q.ant-card .ant-card-body {
124
127
  padding: 16px;
125
128
  }
126
- ._PNnMa .ant-divider {
129
+ .kne-form-info_PNnMa .ant-divider {
127
130
  border-top-color: var(--font-color-grey-2);
128
131
  }
129
- ._PNnMa .ant-divider {
132
+ .kne-form-info_PNnMa .ant-divider {
130
133
  display: none;
131
134
  }
132
- ._PNnMa:not(:last-child) {
135
+ .kne-form-info_PNnMa:not(:last-child) {
133
136
  margin-bottom: 16px;
134
137
  }
135
138
 
136
- ._HiB5Q {
139
+ .kne-form-info_HiB5Q {
137
140
  border: 1px solid var(--font-color-grey-4);
138
141
  }
139
142
 
140
- ._uogqr {
143
+ .kne-form-info_uogqr {
141
144
  display: flex;
142
145
  flex-wrap: nowrap;
143
146
  gap: 8px;
144
147
  }
145
- ._uogqr:not(:first-child) .react-form__field-label {
148
+ .kne-form-info_uogqr:not(:first-child) .react-form__field-label {
146
149
  display: none;
147
150
  }
148
- ._uogqr ._UGjS9 {
151
+ .kne-form-info_uogqr .kne-form-info_UGjS9 {
149
152
  color: var(--font-color-grey);
150
153
  font-size: 14px;
151
154
  line-height: 20px;
152
155
  height: 20px;
153
156
  margin-bottom: 8px;
154
157
  }
155
- ._uogqr .react-form__field {
158
+ .kne-form-info_uogqr .react-form__field {
156
159
  flex: 1;
157
160
  }
158
161
 
159
- ._rjVPh {
162
+ .kne-form-info_rjVPh {
160
163
  margin-bottom: 16px;
161
164
  }
162
165
 
163
- ._r8-bn ._PNnMa {
166
+ .kne-form-info_r8-bn .kne-form-info_PNnMa {
164
167
  margin-bottom: 0 !important;
165
168
  }
166
- ._r8-bn .react-form__field-label {
169
+ .kne-form-info_r8-bn .react-form__field-label {
167
170
  display: none;
168
171
  }
169
- ._r8-bn .ant-row:not(:last-child) {
172
+ .kne-form-info_r8-bn .ant-row:not(:last-child) {
170
173
  border-bottom: solid 1px var(--bg-color-grey-3);
171
174
  }
172
- ._r8-bn .ant-row:hover {
175
+ .kne-form-info_r8-bn .ant-row:hover {
173
176
  background: var(--bg-color-grey-1) !important;
174
177
  }
175
- ._r8-bn .ant-col {
178
+ .kne-form-info_r8-bn .ant-col {
176
179
  padding: 16px;
177
180
  width: var(--col-width);
178
181
  }
179
182
 
180
- ._Uw-3T {
183
+ .kne-form-info_Uw-3T {
181
184
  border: solid 1px var(--bg-color-grey-3);
182
185
  }
183
186
 
184
- ._Qkutm.ant-col {
187
+ .kne-form-info_Qkutm.ant-col {
185
188
  padding-bottom: 0;
186
189
  }
187
190
 
188
- ._9WdfD {
191
+ .kne-form-info_9WdfD {
189
192
  background: var(--bg-color-grey-1);
190
193
  }
191
- ._9WdfD ._CsPaL:before {
194
+ .kne-form-info_9WdfD .kne-form-info_CsPaL:before {
192
195
  color: var(--color-warning);
193
196
  content: "*";
194
197
  position: static;
@@ -197,39 +200,39 @@
197
200
  margin-right: 6px;
198
201
  font-weight: bold;
199
202
  }
200
- ._9WdfD .ant-col {
203
+ .kne-form-info_9WdfD .ant-col {
201
204
  padding: 8px 16px;
202
205
  }
203
206
 
204
- ._8smwK {
207
+ .kne-form-info_8smwK {
205
208
  flex-basis: 100px;
206
209
  text-align: right;
207
210
  }
208
211
 
209
- ._IOdkE {
212
+ .kne-form-info_IOdkE {
210
213
  justify-content: center;
211
214
  width: auto;
212
215
  }
213
- ._IOdkE .ant-steps-item {
216
+ .kne-form-info_IOdkE .ant-steps-item {
214
217
  max-width: 450px;
215
218
  }
216
- ._IOdkE .ant-steps-item-content {
219
+ .kne-form-info_IOdkE .ant-steps-item-content {
217
220
  text-wrap: nowrap;
218
221
  }
219
222
 
220
- ._uc1HZ {
223
+ .kne-form-info_uc1HZ {
221
224
  width: 100%;
222
225
  }
223
226
 
224
- ._vWPQO ._IOdkE {
227
+ .kne-form-info_vWPQO .kne-form-info_IOdkE {
225
228
  padding: 0 100px;
226
229
  }
227
230
 
228
- ._DXskv {
231
+ .kne-form-info_DXskv {
229
232
  padding: 16px;
230
233
  }
231
234
 
232
- ._wU-w4 {
235
+ .kne-form-info_wU-w4 {
233
236
  min-height: 32px;
234
237
  }
235
238
  /*# sourceMappingURL=index.css.map */