@kne/form-info 0.1.7 → 0.1.10

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.
package/README.md CHANGED
@@ -1,19 +1,15 @@
1
-
2
1
  # form-info
3
2
 
4
-
5
3
  ### 描述
6
4
 
7
5
  构建一个更加美观的form表单组件
8
6
 
9
-
10
7
  ### 安装
11
8
 
12
9
  ```shell
13
10
  npm i --save @kne/form-info
14
11
  ```
15
12
 
16
-
17
13
  ### 概述
18
14
 
19
15
  这是一个基于 React 和 Ant Design 的高颜值表单组件库,专为现代化 Web 应用设计。该组件库通过优雅的视觉设计和丰富的交互功能,为开发者提供了一套完整的表单解决方案。
@@ -40,6 +36,20 @@ npm i --save @kne/form-info
40
36
 
41
37
  ### 示例(全屏)
42
38
 
39
+ #### 示例样式
40
+
41
+ ```scss
42
+ @use '~@kne/responsive-utils/scss' as resp;
43
+
44
+ // 手机预览下给示例内容留白,便于观察层级与间距
45
+ @include resp.mobile-container {
46
+ .example-driver-runner {
47
+ padding: 12px 16px 24px;
48
+ box-sizing: border-box;
49
+ }
50
+ }
51
+ ```
52
+
43
53
  #### 示例代码
44
54
 
45
55
  - 基础表单示例
@@ -104,7 +114,7 @@ const BaseExample = () => {
104
114
  <List
105
115
  title="工作经历"
106
116
  name="workExperience"
107
- itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
117
+ itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
108
118
  important
109
119
  maxLength={5}
110
120
  addText="添加工作经历"
@@ -116,7 +126,7 @@ const BaseExample = () => {
116
126
  <List
117
127
  title="项目经历"
118
128
  name="projects"
119
- itemTitle={({index, data}) => data?.projectName || `项目 ${index + 1}`}
129
+ itemTitle={({index, data}) => data?.projectName || &#96;项目 ${index + 1}&#96;}
120
130
  list={[
121
131
  <Input name="projectName" label="项目名称" rule="REQ" placeholder="例如:双十一活动系统" />,
122
132
  <Input name="projectRole" label="担任角色" rule="REQ" placeholder="例如:技术负责人" />,
@@ -132,7 +142,7 @@ const BaseExample = () => {
132
142
  <TableList
133
143
  title="家庭成员信息"
134
144
  name="familyMembers"
135
- itemTitle={({index}) => `家庭成员 ${index + 1}`}
145
+ itemTitle={({index}) => &#96;家庭成员 ${index + 1}&#96;}
136
146
  maxLength={10}
137
147
  addText="添加家庭成员"
138
148
  list={[
@@ -292,7 +302,7 @@ const BaseExample = () => {
292
302
  <List
293
303
  title="工作经历"
294
304
  name="workExperience"
295
- itemTitle={({index, data}) => data?.companyName || `工作经历 ${index + 1}`}
305
+ itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
296
306
  important
297
307
  maxLength={5}
298
308
  addText="添加工作经历"
@@ -365,7 +375,7 @@ const BaseExample = () => {
365
375
 
366
376
  // 步骤变更回调
367
377
  const handleStepChange = (current, formData) => {
368
- console.log(`切换到第 ${current + 1} 步,表单数据:`, formData);
378
+ console.log(&#96;切换到第 ${current + 1} 步,表单数据:&#96;, formData);
369
379
  setCurrentStep(current);
370
380
  };
371
381
 
@@ -497,7 +507,7 @@ const BaseExample = () => {
497
507
  <List
498
508
  title="紧急联系人列表"
499
509
  name="emergencyContacts"
500
- itemTitle={({index, data}) => data?.name || `联系人 ${index + 1}`}
510
+ itemTitle={({index, data}) => data?.name || &#96;联系人 ${index + 1}&#96;}
501
511
  important
502
512
  maxLength={3}
503
513
  addText="添加联系人"
@@ -623,7 +633,7 @@ const BaseExample = () => {
623
633
 
624
634
  // 第三步:项目详情
625
635
  background: '现有客服系统效率低下,需要引入AI技术提升服务质量',
626
- objectives: `1. 响应时间缩短50%\n2. 客户满意度提升30%\n3. 人力成本降低40%`,
636
+ objectives: &#96;1. 响应时间缩短50%\n2. 客户满意度提升30%\n3. 人力成本降低40%&#96;,
627
637
  deliverables: '智能客服系统一套,包含前端界面、后台管理、AI对话引擎'
628
638
  };
629
639
 
@@ -644,7 +654,7 @@ const BaseExample = () => {
644
654
 
645
655
  // 步骤变更回调
646
656
  const handleStepChange = (current, data) => {
647
- console.log(`切换到第 ${current + 1} 步,当前数据:`, data);
657
+ console.log(&#96;切换到第 ${current + 1} 步,当前数据:&#96;, data);
648
658
  setCurrentStep(current);
649
659
  };
650
660
 
@@ -728,7 +738,7 @@ const BaseExample = () => {
728
738
  <List
729
739
  title="项目团队成员"
730
740
  name="teamMembers"
731
- itemTitle={({index, data}) => data?.name || `成员 ${index + 1}`}
741
+ itemTitle={({index, data}) => data?.name || &#96;成员 ${index + 1}&#96;}
732
742
  important
733
743
  maxLength={10}
734
744
  addText="添加团队成员"
@@ -784,7 +794,7 @@ const BaseExample = () => {
784
794
  <List
785
795
  title="里程碑计划"
786
796
  name="milestones"
787
- itemTitle={({index, data}) => data?.milestoneName || `里程碑 ${index + 1}`}
797
+ itemTitle={({index, data}) => data?.milestoneName || &#96;里程碑 ${index + 1}&#96;}
788
798
  addText="添加里程碑"
789
799
  list={[
790
800
  <Input name="milestoneName" label="里程碑名称" rule="REQ" placeholder="例如:需求确认" />,
@@ -811,6 +821,92 @@ render(<BaseExample />);
811
821
 
812
822
  ```
813
823
 
824
+ - 边框模式示例
825
+ - 演示FormInfo、List、TableList组件的bordered属性,控制卡片是否显示边框,通过开关切换对比有边框与无边框效果
826
+ - _FormInfo(@kne/current-lib_form-info),antd(antd),(@kne/current-lib_form-info/dist/index.css)
827
+
828
+ ```jsx
829
+ const {default: FormInfo, List, TableList, Form, Input, TextArea} = _FormInfo;
830
+ const {Flex, Switch, Space, Divider} = antd;
831
+ const {useState} = React;
832
+
833
+ const BorderedExample = () => {
834
+ const [bordered, setBordered] = useState(true);
835
+
836
+ return <Form data={{
837
+ employeeId: 'EMP20240001',
838
+ name: '张三',
839
+ department: '技术研发部'
840
+ }}>
841
+ <Flex vertical gap={16}>
842
+ <Space>
843
+ <span>边框模式:</span>
844
+ <Switch checked={bordered} onChange={setBordered} />
845
+ </Space>
846
+
847
+ <FormInfo
848
+ title="员工基本信息"
849
+ subtitle="bordered 控制卡片是否显示边框"
850
+ bordered={bordered}
851
+ column={2}
852
+ gap={20}
853
+ list={[
854
+ <Input name="employeeId" label="工号" rule="REQ" disabled />,
855
+ <Input name="name" label="姓名" rule="REQ" placeholder="请输入员工姓名" />,
856
+ <Input name="department" label="所属部门" rule="REQ" placeholder="例如:技术研发部" />,
857
+ <Input name="position" label="职位" rule="REQ" placeholder="例如:高级前端工程师" />
858
+ ]}
859
+ />
860
+
861
+ <Divider />
862
+
863
+ <List
864
+ title="工作经历(important)"
865
+ name="workExperience"
866
+ bordered={bordered}
867
+ itemTitle={({index, data}) => data?.companyName || &#96;工作经历 ${index + 1}&#96;}
868
+ important
869
+ addText="添加工作经历"
870
+ list={[
871
+ <Input name="companyName" label="公司名称" rule="REQ" placeholder="例如:阿里巴巴集团" />,
872
+ <Input name="jobTitle" label="职位名称" rule="REQ" placeholder="例如:高级开发工程师" />,
873
+ <TextArea name="workDescription" label="工作描述" placeholder="请描述主要工作内容和成就" block />
874
+ ]}
875
+ />
876
+
877
+ <List
878
+ title="教育经历(非important)"
879
+ name="educationHistory"
880
+ bordered={bordered}
881
+ itemTitle={({index, data}) => data?.schoolName || &#96;教育经历 ${index + 1}&#96;}
882
+ addText="添加教育经历"
883
+ list={[
884
+ <Input name="schoolName" label="学校名称" rule="REQ" placeholder="例如:北京大学" />,
885
+ <Input name="major" label="专业" rule="REQ" placeholder="例如:计算机科学与技术" />,
886
+ <Input name="degree" label="学历" rule="REQ" placeholder="例如:本科" />
887
+ ]}
888
+ />
889
+
890
+ <Divider />
891
+
892
+ <TableList
893
+ title="家庭成员信息"
894
+ name="familyMembers"
895
+ bordered={bordered}
896
+ addText="添加家庭成员"
897
+ list={[
898
+ <Input name="memberName" label="姓名" rule="REQ" placeholder="家庭成员姓名" />,
899
+ <Input name="relationship" label="关系" rule="REQ" placeholder="例如:配偶、子女" />,
900
+ <Input name="memberPhone" label="联系电话" rule="TEL" placeholder="联系电话" />
901
+ ]}
902
+ />
903
+ </Flex>
904
+ </Form>;
905
+ };
906
+
907
+ render(<BorderedExample />);
908
+
909
+ ```
814
910
 
815
911
  ### API
816
912
 
@@ -818,144 +914,147 @@ render(<BaseExample />);
818
914
 
819
915
  基础的表单信息展示组件,用于创建结构化的表单布局。
820
916
 
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 | - |
917
+ || 属性名 | 说明 | 类型 | 默认值 |
918
+ ||-----|----|----|-----|
919
+ || column | 列数,支持数字或Flexbox配置 | number \| object | 2 |
920
+ || list | 表单项列表 | ReactNode[] | [] |
921
+ || gap | 字段间距 | number | 24 |
922
+ || className | 自定义样式类名 | string | - |
923
+ || title | 标题 | string \| ReactNode | - |
924
+ || subtitle | 副标题 | string \| ReactNode | - |
925
+ || bordered | 是否显示边框 | boolean | - |
829
926
 
830
927
  ### FormModal
831
928
 
832
929
  模态框表单组件,在弹窗中展示表单内容。
833
930
 
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 | - |
931
+ || 属性名 | 说明 | 类型 | 默认值 |
932
+ ||-----|----|----|-----|
933
+ || open | 是否显示模态框 | boolean | false |
934
+ || onCancel | 关闭回调 | function | - |
935
+ || formProps | 表单属性 | object | {} |
936
+ || autoClose | 提交后自动关闭 | boolean | true |
937
+ || okType | 确认按钮类型 | string | primary |
938
+ || okText | 确认按钮文本 | string \| ReactNode | 提交 |
939
+ || cancelText | 取消按钮文本 | string \| ReactNode | 取消 |
940
+ || okButtonProps | 确认按钮属性 | object | - |
941
+ || cancelButtonProps | 取消按钮属性 | object | - |
942
+ || footer | 底部内容 | ReactNode \| function | - |
943
+ || renderModal | 自定义模态框渲染 | function | - |
944
+ || modalRender | 自定义内容渲染 | function | - |
848
945
 
849
946
  ### FormSteps
850
947
 
851
948
  步骤表单组件,支持多步骤表单流程。
852
949
 
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 | - |
950
+ || 属性名 | 说明 | 类型 | 默认值 |
951
+ ||-----|----|----|-----|
952
+ || items | 步骤配置项 | array | [] |
953
+ || current | 当前步骤 | number | - |
954
+ || defaultCurrent | 默认当前步骤 | number | 0 |
955
+ || autoStep | 自动切换下一步 | boolean | true |
956
+ || direction | 步骤条方向 | string | horizontal |
957
+ || orientation | 步骤条方向 | string | horizontal |
958
+ || onChange | 步骤切换回调 | function | - |
959
+ || onComplete | 完成回调 | function | - |
960
+ || stepsClassName | 步骤条样式类名 | string | - |
864
961
 
865
962
  每个步骤项配置:
866
963
 
867
- | 属性名 | 说明 | 类型 | 默认值 |
868
- |-----|----|----|-----|
869
- | title | 步骤标题 | string \| ReactNode | - |
870
- | formProps | 表单属性 | object | - |
871
- | children | 步骤内容 | ReactNode \| function | - |
964
+ || 属性名 | 说明 | 类型 | 默认值 |
965
+ ||-----|----|----|-----|
966
+ || title | 步骤标题 | string \| ReactNode | - |
967
+ || formProps | 表单属性 | object | - |
968
+ || children | 步骤内容 | ReactNode \| function | - |
872
969
 
873
970
  ### FormStepsModal
874
971
 
875
972
  模态框步骤表单组件,结合了模态框和步骤表单功能。
876
973
 
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 | - |
974
+ || 属性名 | 说明 | 类型 | 默认值 |
975
+ ||-----|----|----|-----|
976
+ || items | 步骤配置项 | array | [] |
977
+ || modalProps | 模态框属性 | object | {autoClose: true} |
978
+ || completeText | 完成按钮文本 | string \| ReactNode | 完成 |
979
+ || nextText | 下一步按钮文本 | string \| ReactNode | 下一步 |
980
+ || autoStep | 自动切换下一步 | boolean | true |
981
+ || onComplete | 完成回调 | function | - |
982
+ || className | 样式类名 | string | - |
886
983
 
887
984
  ### List
888
985
 
889
986
  列表表单组件,支持动态添加/删除列表项。
890
987
 
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 | - |
988
+ || 属性名 | 说明 | 类型 | 默认值 |
989
+ ||-----|----|----|-----|
990
+ || name | 字段名 | string | - |
991
+ || title | 列表标题 | string \| ReactNode | - |
992
+ || list | 表单项列表 | ReactNode[] | - |
993
+ || important | 是否重要样式 | boolean | false |
994
+ || bordered | 是否显示边框 | boolean | - |
995
+ || addText | 添加按钮文本 | string \| ReactNode | 添加 |
996
+ || removeText | 删除按钮文本 | string \| ReactNode | 删除 |
997
+ || addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
998
+ || removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
999
+ || empty | 空状态内容 | ReactNode | Empty |
1000
+ || itemClassName | 列表项样式类名 | string | - |
1001
+ || className | 样式类名 | string | - |
904
1002
 
905
1003
  ### TableList
906
1004
 
907
1005
  表格列表表单组件,以表格形式展示列表数据。
908
1006
 
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 | - |
1007
+ || 属性名 | 说明 | 类型 | 默认值 |
1008
+ ||-----|----|----|-----|
1009
+ || name | 字段名 | string | - |
1010
+ || title | 表格标题 | string \| ReactNode | - |
1011
+ || list | 表单项列表 | ReactNode[] | - |
1012
+ || bordered | 是否显示边框 | boolean | - |
1013
+ || addText | 添加按钮文本 | string \| ReactNode | 添加 |
1014
+ || removeText | 删除按钮文本 | string \| ReactNode | 删除 |
1015
+ || addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
1016
+ || removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
1017
+ || empty | 空状态内容 | ReactNode | Empty |
1018
+ || className | 样式类名 | string | - |
920
1019
 
921
1020
  ### MultiField
922
1021
 
923
1022
  多字段组件,支持动态添加/删除同类型字段。
924
1023
 
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 | - |
1024
+ || 属性名 | 说明 | 类型 | 默认值 |
1025
+ ||-----|----|----|-----|
1026
+ || name | 字段名 | string | - |
1027
+ || label | 字段标签 | string | - |
1028
+ || field | 字段组件 | React.ComponentType | - |
1029
+ || block | 是否块级显示 | boolean | false |
1030
+ || addText | 添加按钮文本 | string \| function | 添加 |
1031
+ || removeText | 删除按钮文本 | string \| function | - |
1032
+ || addIcon | 添加按钮图标 | ReactNode | PlusOutlined |
1033
+ || removeIcon | 删除按钮图标 | ReactNode | DeleteOutlined |
1034
+ || empty | 空状态内容 | ReactNode | Empty |
1035
+ || className | 样式类名 | string | - |
937
1036
 
938
1037
  ### Form
939
1038
 
940
1039
  基础表单容器组件。
941
1040
 
942
- | 属性名 | 说明 | 类型 | 默认值 |
943
- |-----|----|----|-----|
944
- | type | 表单类型 | string | inner |
945
- | className | 自定义样式类名 | string | - |
946
- | children | 子组件 | ReactNode | - |
1041
+ || 属性名 | 说明 | 类型 | 默认值 |
1042
+ ||-----|----|----|-----|
1043
+ || type | 表单类型 | string | inner |
1044
+ || className | 自定义样式类名 | string | - |
1045
+ || children | 子组件 | ReactNode | - |
947
1046
 
948
1047
  ### 国际化配置
949
1048
 
950
1049
  组件内置以下国际化文本:
951
1050
 
952
- | 键名 | 中文 | 英文 |
953
- |-----|----|----|
954
- | submit | 提交 | Submit |
955
- | cancel | 取消 | Cancel |
956
- | complete | 完成 | Complete |
957
- | next | 下一步 | Next |
958
- | addText | 添加 | Add |
959
- | deleteText | 删除 | Delete |
1051
+ || 键名 | 中文 | 英文 |
1052
+ ||-----|----|----|
1053
+ || submit | 提交 | Submit |
1054
+ || cancel | 取消 | Cancel |
1055
+ || complete | 完成 | Complete |
1056
+ || next | 下一步 | Next |
1057
+ || addText | 添加 | Add |
1058
+ || deleteText | 删除 | Delete |
960
1059
 
961
- 可通过 withLocale HOC 或 useIntl hook 自定义国际化文本。
1060
+ 可通过 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
+ }