Skip to content

Commit 5b4e0cf

Browse files
zhipenglinzhipenglin
authored
Merge pull request #38 from kne-union/linzp
Linzp
2 parents 0dc25d9 + f88afae commit 5b4e0cf

File tree

6 files changed

+267
-3
lines changed

6 files changed

+267
-3
lines changed

‎README.md‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -841,3 +841,131 @@ render(<BaseExample />);
841841
| label | 数据展示的标题 | ReactNode \| string | - |
842842
| content | 数据展示的内容 | ReactNode \| string | - |
843843

844+
### TableView
845+
846+
#### 行选择 (Row Selection) 配置
847+
848+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
849+
|-----------------|-------------|---------------------------|-------|----------------------|
850+
| type | 选择类型 | string | - | 'checkbox' / 'radio' |
851+
| selectedRowKeys | 当前选中的行key数组 | array | [] | - |
852+
| onChange | 选择变化时的回调函数 | function(selectedRowKeys) | - | - |
853+
| isSelectedAll | 是否全选 | boolean | false | true/false |
854+
855+
#### 列配置 (Columns)
856+
857+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
858+
|--------------------|--------------|-------------------------|---------------|----------------------------------|
859+
| name | 列名/键名 | string | - | - |
860+
| span | 列宽比例 | number | defaultSpan | - |
861+
| align | 垂直对齐方式 | string | 'top' | 'top'/'middle'/'bottom' |
862+
| justify | 水平对齐方式 | string | 'flex-start' | 'flex-start'/'center'/'flex-end' |
863+
| getValueOf | 自定义获取值的方法 | function(item, context) | - | - |
864+
| format | 值格式化方法或格式字符串 | function/string | - | - |
865+
| valueIsEmpty | 自定义判断值为空的方法 | function(value) | - | - |
866+
| emptyIsPlaceholder | 空值是否显示占位符 | boolean | parent config | true/false |
867+
868+
#### 数据项 (Item)
869+
870+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
871+
|----------|--------|---------|-------|------------|
872+
| disabled | 是否禁用选择 | boolean | false | true/false |
873+
874+
### Report
875+
876+
#### 基础属性 (Props)
877+
878+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
879+
|-----------|----------|-----------|------|------------|
880+
| title | 主标题 | ReactNode | - | 任意可渲染节点 |
881+
| subtitle | 副标题 | ReactNode | - | 任意可渲染节点 |
882+
| extra | 标题区域额外内容 | ReactNode | - | 任意可渲染节点 |
883+
| border | 是否显示边框 | boolean | true | true/false |
884+
| className | 自定义类名 | string | - | - |
885+
| children | 内容区域 | ReactNode | - | - |
886+
887+
#### Report.List
888+
889+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
890+
|-------------|--------|--------|-----|-----|
891+
| report | 报告数据对象 | object | - | - |
892+
| report.list | 列表数据数组 | array | [] | - |
893+
894+
* listItem
895+
896+
| 属性 | 说明 | 类型 | 默认值 |
897+
|---------|-------|-----------|-----|
898+
| label | 列表项标签 | ReactNode | - |
899+
| content | 列表项内容 | ReactNode | - |
900+
901+
#### Report.Part
902+
903+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
904+
|-------------|--------|--------|-----|-----|
905+
| report | 分区数据对象 | object | - | - |
906+
| report.list | 分区数据数组 | array | [] | - |
907+
908+
* listItem
909+
910+
| 属性 | 说明 | 类型 | 默认值 | 备注 |
911+
|------------|----------|-----------|-------|-----------|
912+
| label | 分区标签 | ReactNode | - | 必填 |
913+
| content | 分区内容 | ReactNode | - | 必填 |
914+
| hasBgColor | 是否有背景色 | boolean | false | 控制内容区域背景 |
915+
| ...props | 其他HTML属性 | object | - | 会传递给外层div |
916+
917+
#### Report.Result
918+
919+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
920+
|--------|--------|--------|-----|----|
921+
| report | 结果数据对象 | object | - | 是 |
922+
923+
* report
924+
925+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
926+
|--------------------|--------|---------------|-----|----|
927+
| report.total | 总分数据 | object | - | 是 |
928+
| report.total.score | 总分值 | number/string | - | 是 |
929+
| report.total.label | 总分标签 | string | - | 是 |
930+
| report.list | 分项结果列表 | array | [] | 否 |
931+
932+
* listItem
933+
934+
| 属性 | 说明 | 类型 | 默认值 |
935+
|---------|------|---------------|-----|
936+
| label | 分项标签 | string | - |
937+
| content | 分项内容 | ReactNode | - |
938+
| score | 分项得分 | number/string | - |
939+
940+
### Report.Score
941+
942+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
943+
|-----------|----------|--------|-----|-------|
944+
| className | 自定义类名 | string | - | - |
945+
| value | 当前得分值 | number | - | 0-5 |
946+
| total | 总分值/星星总数 | number | 5 | 任意正整数 |
947+
948+
### Report.Table
949+
950+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
951+
|------------------|--------|--------|-----|----|
952+
| report | 表格数据对象 | object | - | 是 |
953+
| report.list | 表格数据数组 | array | [] | 否 |
954+
| report.columns | 列配置数组 | array | - | 是 |
955+
| report.group | 分组配置数组 | array | - | 否 |
956+
| report.groupName | 分组字段名 | string | - | 否 |
957+
958+
* columns
959+
960+
| 参数 | 说明 | 类型 | 默认值 | 示例 |
961+
|------------|---------|---------|-------|------------|
962+
| name | 列字段名 | string | - | "username" |
963+
| title | 列标题 | string | - | "用户名" |
964+
| span | 列宽度比例 | number | - | 6 |
965+
| isSubTitle | 是否作为子标题 | boolean | false | true |
966+
967+
* group
968+
969+
| 参数 | 说明 | 类型 | 默认值 |
970+
|------|------|--------|-----|
971+
| name | 分组名称 | string | - |

‎doc/api.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,132 @@
6565
| display | 数据是否展示，当为 `function` 时可以接收到 `item, dataSource` 参数，`item` 为当前项配置，`dataSource` 为整个组件的 `dataSource` 配置 | boolean \| function | true |
6666
| label | 数据展示的标题 | ReactNode \| string | - |
6767
| content | 数据展示的内容 | ReactNode \| string | - |
68+
69+
### TableView
70+
71+
#### 行选择 (Row Selection) 配置
72+
73+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
74+
|-----------------|-------------|---------------------------|-------|----------------------|
75+
| type | 选择类型 | string | - | 'checkbox' / 'radio' |
76+
| selectedRowKeys | 当前选中的行key数组 | array | [] | - |
77+
| onChange | 选择变化时的回调函数 | function(selectedRowKeys) | - | - |
78+
| isSelectedAll | 是否全选 | boolean | false | true/false |
79+
80+
#### 列配置 (Columns)
81+
82+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
83+
|--------------------|--------------|-------------------------|---------------|----------------------------------|
84+
| name | 列名/键名 | string | - | - |
85+
| span | 列宽比例 | number | defaultSpan | - |
86+
| align | 垂直对齐方式 | string | 'top' | 'top'/'middle'/'bottom' |
87+
| justify | 水平对齐方式 | string | 'flex-start' | 'flex-start'/'center'/'flex-end' |
88+
| getValueOf | 自定义获取值的方法 | function(item, context) | - | - |
89+
| format | 值格式化方法或格式字符串 | function/string | - | - |
90+
| valueIsEmpty | 自定义判断值为空的方法 | function(value) | - | - |
91+
| emptyIsPlaceholder | 空值是否显示占位符 | boolean | parent config | true/false |
92+
93+
#### 数据项 (Item)
94+
95+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
96+
|----------|--------|---------|-------|------------|
97+
| disabled | 是否禁用选择 | boolean | false | true/false |
98+
99+
### Report
100+
101+
#### 基础属性 (Props)
102+
103+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
104+
|-----------|----------|-----------|------|------------|
105+
| title | 主标题 | ReactNode | - | 任意可渲染节点 |
106+
| subtitle | 副标题 | ReactNode | - | 任意可渲染节点 |
107+
| extra | 标题区域额外内容 | ReactNode | - | 任意可渲染节点 |
108+
| border | 是否显示边框 | boolean | true | true/false |
109+
| className | 自定义类名 | string | - | - |
110+
| children | 内容区域 | ReactNode | - | - |
111+
112+
#### Report.List
113+
114+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
115+
|-------------|--------|--------|-----|-----|
116+
| report | 报告数据对象 | object | - | - |
117+
| report.list | 列表数据数组 | array | [] | - |
118+
119+
* listItem
120+
121+
| 属性 | 说明 | 类型 | 默认值 |
122+
|---------|-------|-----------|-----|
123+
| label | 列表项标签 | ReactNode | - |
124+
| content | 列表项内容 | ReactNode | - |
125+
126+
#### Report.Part
127+
128+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
129+
|-------------|--------|--------|-----|-----|
130+
| report | 分区数据对象 | object | - | - |
131+
| report.list | 分区数据数组 | array | [] | - |
132+
133+
* listItem
134+
135+
| 属性 | 说明 | 类型 | 默认值 | 备注 |
136+
|------------|----------|-----------|-------|-----------|
137+
| label | 分区标签 | ReactNode | - | 必填 |
138+
| content | 分区内容 | ReactNode | - | 必填 |
139+
| hasBgColor | 是否有背景色 | boolean | false | 控制内容区域背景 |
140+
| ...props | 其他HTML属性 | object | - | 会传递给外层div |
141+
142+
#### Report.Result
143+
144+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
145+
|--------|--------|--------|-----|----|
146+
| report | 结果数据对象 | object | - | 是 |
147+
148+
* report
149+
150+
| 属性 | 说明 | 类型 | 默认值 | 必填 |
151+
|--------------------|--------|---------------|-----|----|
152+
| report.total | 总分数据 | object | - | 是 |
153+
| report.total.score | 总分值 | number/string | - | 是 |
154+
| report.total.label | 总分标签 | string | - | 是 |
155+
| report.list | 分项结果列表 | array | [] | 否 |
156+
157+
* listItem
158+
159+
| 属性 | 说明 | 类型 | 默认值 |
160+
|---------|------|---------------|-----|
161+
| label | 分项标签 | string | - |
162+
| content | 分项内容 | ReactNode | - |
163+
| score | 分项得分 | number/string | - |
164+
165+
### Report.Score
166+
167+
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
168+
|-----------|----------|--------|-----|-------|
169+
| className | 自定义类名 | string | - | - |
170+
| value | 当前得分值 | number | - | 0-5 |
171+
| total | 总分值/星星总数 | number | 5 | 任意正整数 |
172+
173+
### Report.Table
174+
175+
| 参数 | 说明 | 类型 | 默认值 | 必填 |
176+
|------------------|--------|--------|-----|----|
177+
| report | 表格数据对象 | object | - | 是 |
178+
| report.list | 表格数据数组 | array | [] | 否 |
179+
| report.columns | 列配置数组 | array | - | 是 |
180+
| report.group | 分组配置数组 | array | - | 否 |
181+
| report.groupName | 分组字段名 | string | - | 否 |
182+
183+
* columns
184+
185+
| 参数 | 说明 | 类型 | 默认值 | 示例 |
186+
|------------|---------|---------|-------|------------|
187+
| name | 列字段名 | string | - | "username" |
188+
| title | 列标题 | string | - | "用户名" |
189+
| span | 列宽度比例 | number | - | 6 |
190+
| isSubTitle | 是否作为子标题 | boolean | false | true |
191+
192+
* group
193+
194+
| 参数 | 说明 | 类型 | 默认值 |
195+
|------|------|--------|-----|
196+
| name | 分组名称 | string | - |

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kne/info-page",
3-
"version": "0.1.17",
3+
"version": "0.1.18",
44
"description": "一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式",
55
"syntax": {
66
"esmodules": true

‎src/TableView/Header.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@ const Header = p => {
6666
key={name}
6767
style={{
6868
'--col-width': `${colsSize[name] || 0}px`,
69-
'--col-span': `${span || defaultSpan}`
69+
'--col-span': `${span || defaultSpan}`,
70+
'--col-align': column.align || 'top',
71+
'--col-justify': column.justify || 'flex-start'
7072
}}
7173
className={classnames(style['col'], 'info-page-table-col')}
7274
>

‎src/TableView/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,9 @@ const TableView = p => {
128128
key={name}
129129
style={{
130130
'--col-width': `${colsSize[name] || 0}px`,
131-
'--col-span': `${span || defaultSpan}`
131+
'--col-span': `${span || defaultSpan}`,
132+
'--col-align': column.align || 'top',
133+
'--col-justify': column.justify || 'flex-start'
132134
}}
133135
className={classnames(style['col'], 'info-page-table-col')}
134136
>

‎src/TableView/style.module.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@
6565
transition: background-color 300ms;
6666
flex: var(--col-span) 0 var(--col-width);
6767
overflow: hidden;
68+
display: flex;
69+
align-items: var(--col-align);
70+
justify-content: var(--col-justify);
6871
}
6972

7073
.col-content {

0 commit comments

Comments
 (0)