添加report

doc/example.json

@@ -108,6 +108,24 @@
           "packageName": "antd"
         }
       ]
+    },
+    {
+      "title": "Report",
+      "description": "",
+      "code": "./report.js",
+      "scope": [
+        {
+          "name": "_InfoPage",
+          "packageName": "@kne/current-lib_info-page"
+        },
+        {
+          "packageName": "@kne/current-lib_info-page/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        }
+      ]
     }
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kne/info-page",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "一般用在复杂的详情展示页面，InfoPage提供了一个标准的展示信息的格式",
   "syntax": {
     "esmodules": true

src/Report/List.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Flex, Row, Col } from 'antd';
+import get from 'lodash/get';
+import style from './style.module.scss';
+
+const List = ({ report }) => {
+  return (
+    <Flex vertical gap={16}>
+      {get(report, 'list', []).map(({ label, content }, index) => {
+        return (
+          <Row wrap={false} key={index}>
+            <Col span={3} className={style['list-label-col']}>
+              <div className={style['list-label']}>{label}</div>
+            </Col>
+            <Col span={21} className={style['list-content-col']}>
+              <div className={style['list-content']}>{content}</div>
+            </Col>
+          </Row>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default List;

src/Report/Part.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Space } from 'antd';
+import get from 'lodash/get';
+import classnames from 'classnames';
+import style from './style.module.scss';
+
+const Part = ({ report }) => {
+  return (
+    <Space direction="vertical" size={32}>
+      {get(report, 'list', []).map(({ label, content, hasBgColor, ...props }, index) => {
+        return (
+          <div {...props} key={index}>
+            <div className={style['part-label']}>{label}</div>
+            <div
+              className={classnames(style['part-content'], {
+                [style['has-bg-color']]: hasBgColor
+              })}
+            >
+              {content}
+            </div>
+          </div>
+        );
+      })}
+    </Space>
+  );
+};
+
+export default Part;

src/Report/PrintPageBreak.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import style from './style.module.scss';
+
+const PrintPageBreak = () => {
+  return <div className={style['print-page-break']} />;
+};
+
+export default PrintPageBreak;

src/Report/Result.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import get from 'lodash/get';
+import style from './style.module.scss';
+
+const Result = ({ report }) => {
+  const totalScore = get(report, 'total.score');
+  const totalLabel = get(report, 'total.label');
+  const list = get(report, 'list', []);
+  return (
+    <Row wrap={false} gutter={16} className={style['result-view']}>
+      <Col span={3}>
+        <div className={style['result-total']}>
+          <div className={style['result-total-score']}>{totalScore}</div>
+          <div className={style['result-total-label']}>{totalLabel}</div>
+        </div>
+      </Col>
+      <Col span={21}>
+        <div className={style['result-list']}>
+          {list.map(({ label, content, score }, index) => {
+            return (
+              <div className={style['result-item']} key={index}>
+                <div className={style['result-item-label']}>
+                  {label}：<span className={style['result-item-score']}>{score}</span>
+                </div>
+                <div className={style['result-item-content']}>{content}</div>
+              </div>
+            );
+          })}
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default Result;

src/Report/Score.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import classnames from 'classnames';
+import { Row, Col } from 'antd';
+import style from './style.module.scss';
+
+const ScoreItem = ({ score, staticScore }) => {
+  score = Number.isNaN(score) ? 0 : Number(score);
+  return (
+    <div
+      className={classnames('score', style['score-item'], {
+        [style['is-grey']]: staticScore > score,
+        [style['low-score']]: score < 3,
+        [style['middle-score']]: score === 3,
+        [style['high-score']]: score > 3
+      })}
+    />
+  );
+};
+
+const Score = ({ className, value, total = 5 }) => {
+  return (
+    <Row justify="space-between" gutter={[4, 0]} className={classnames(className, style['score'])} wrap={false} flex={1}>
+      {Array.from({ length: total }).map((n, index) => (
+        <Col key={index + 1} span={5} className={style['score-item-col']}>
+          <ScoreItem score={value} staticScore={index + 1} />
+        </Col>
+      ))}
+    </Row>
+  );
+};
+
+export default Score;

src/Report/Table.js

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import { Row, Col, Space, Flex, Divider } from 'antd';
+import groupBy from 'lodash/groupBy';
+import style from './style.module.scss';
+import classNames from 'classnames';
+
+const Table = ({ report }) => {
+  const { columns, list, group, groupName, footer } = Object.assign(
+    {},
+    {
+      columns: [],
+      group: [],
+      groupName: 'group',
+      list: []
+    },
+    report
+  );
+
+  const { groupList, groupColumn, otherColumns } = useMemo(() => {
+    const groupList = groupBy(list, groupName);
+    const groupIndex = columns.findIndex(item => item.name === groupName);
+    const otherColumns = columns.slice(0);
+    const groupColumn = columns[groupIndex];
+    if (groupIndex > -1) {
+      otherColumns.splice(groupIndex, 1);
+    }
+    return {
+      groupList,
+      groupColumn,
+      otherColumns: new Map(otherColumns.map(item => [item.name, item]))
+    };
+  }, [columns, list, groupName]);
+
+  const groupMap = useMemo(() => {
+    return new Map(group.map(item => [item.name, item]));
+  }, [group]);
+  return (
+    <Flex vertical gap={groupColumn?.isSubTitle ? 10 : 32} className={style['table-view']}>
+      <Row wrap={false} className={style['table-header']}>
+        {groupColumn?.isSubTitle || !groupColumn ? null : (
+          <Col span={groupColumn?.span}>
+            <div className={style['table-header-col-item']}>{groupColumn?.title}-</div>
+          </Col>
+        )}
+        <Col span={groupColumn?.isSubTitle || !groupColumn ? 24 : 24 - groupColumn?.span}>
+          <Row wrap={false}>
+            {Array.from(otherColumns.values()).map(({ title, name, span }) => {
+              return (
+                <Col span={span} key={name}>
+                  <div className={style['table-header-col-item']}>{title}</div>
+                </Col>
+              );
+            })}
+          </Row>
+        </Col>
+      </Row>
+      <Space direction="vertical">
+        {Object.keys(groupList).map((groupName, groupIndex) => {
+          const list = groupList[groupName];
+          const currentGroup = groupMap.get(groupName);
+          const otherSpan = groupColumn?.isSubTitle || !groupColumn ? 24 : 24 - groupColumn.span;
+
+          const startIndex = Object.values(groupList)
+            .slice(0, groupIndex)
+            .reduce((a, b) => {
+              return a + b.length;
+            }, 0);
+
+          return (
+            <div>
+              {groupColumn?.isSubTitle && currentGroup ? (
+                <Divider>{currentGroup.label}</Divider> /*<Row wrap={false} className={style['table-sub-header']}>
+                    <Col>
+                      <div className={style['table-header-col-item']}>{currentGroup.label}</div>
+                    </Col>
+                  </Row>*/
+              ) : null}
+              <Row key={groupName} wrap={false}>
+                {/*<Col span={groupColumn.span}>
+                <div className={style['table-group-label']}>{currentGroup.label}</div>
+              </Col>*/}
+                <Col span={otherSpan}>
+                  {list.map((item, index) => {
+                    return (
+                      <Flex vertical gap={8}>
+                        <Row wrap={false} key={index} className={classNames({ [style['table-row-item']]: index !== list?.length - 1 })}>
+                          {Array.from(otherColumns.values()).map(({ name }) => {
+                            const currentColumn = otherColumns.get(name);
+                            return (
+                              <Col span={currentColumn.span} key={name}>
+                                <div className={classNames(style['table-col-item'], { [style['table-col-item-description']]: name === 'description' })}>
+                                  {currentColumn.hasOwnProperty('valueOf') && typeof currentColumn.valueOf === 'function' ? currentColumn.valueOf(item[name], item) : item[name]}
+                                </div>
+                              </Col>
+                            );
+                          })}
+                        </Row>
+                        {footer && (typeof footer === 'function' ? footer(item, startIndex + index) : footer)}
+                      </Flex>
+                    );
+                  })}
+                </Col>
+              </Row>
+            </div>
+          );
+        })}
+      </Space>
+    </Flex>
+  );
+};
+
+export default Table;

src/Report/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import style from './style.module.scss';
+import { Flex } from 'antd';
+import List from './List';
+import Result from './Result';
+import Table from './Table';
+import Part from './Part';
+import Score from './Score';
+import PrintPageBreak from './PrintPageBreak';
+import classNames from 'classnames';
+
+const Report = ({ title, subtitle, extra, className, border, children }) => {
+  return (
+    <div
+      className={classNames(
+        style['report-view'],
+        {
+          [style['no-title']]: !(title || extra),
+          [style['no-border']]: border === false
+        },
+        className
+      )}
+    >
+      <Flex className={style['title-outer']} justify="space-between">
+        {title && (
+          <Flex vertical>
+            <div className={style['title']}>{title}</div>
+            {subtitle && <div className={style['subtitle']}>{subtitle}</div>}
+          </Flex>
+        )}
+        {extra && <div className={style['title-extra']}>{extra}</div>}
+      </Flex>
+      {children}
+    </div>
+  );
+};
+
+Report.List = List;
+Report.Result = Result;
+Report.Table = Table;
+Report.Part = Part;
+Report.Score = Score;
+Report.PrintPageBreak = PrintPageBreak;
+
+export default Report;