Release

README.md

@@ -76,6 +76,9 @@ const BaseExample = () => {
           InfoPage.InfoPage.Part
         </InfoPage.Part>
       </InfoPage.Part>
+      <InfoPage.Part title="我是一个标题">
+        xxxx
+      </InfoPage.Part>
     </InfoPage>
   );
 };
@@ -850,6 +853,47 @@ render(<BaseExample />);
 
 ```
 
+- 评分
+- 展示评分组件
+- _InfoPage(@kne/current-lib_info-page),(@kne/current-lib_info-page/dist/index.css),antd(antd)
+
+```jsx
+const { Score } = _InfoPage;
+const { Flex } = antd;
+
+const BaseExample = () => {
+  return (
+    <Flex vertical gap={12}>
+      <Flex gap={24}>
+        <Score value={0} />
+        <Score value={1} />
+        <Score value={2} />
+        <Score value={3} />
+        <Score value={4} />
+        <Score value={5} />
+      </Flex>
+      <Flex gap={24}>
+        <Score value={0} total={3} />
+        <Score value={1} total={3} />
+        <Score value={2} total={3} />
+        <Score value={3} total={3} />
+      </Flex>
+      <Flex gap={24}>
+        <Score value={0} gap={0} />
+        <Score value={1} gap={0} />
+        <Score value={2} gap={0} />
+        <Score value={3} gap={0} />
+        <Score value={4} gap={0} />
+        <Score value={5} gap={0} />
+      </Flex>
+    </Flex>
+  );
+};
+
+render(<BaseExample />);
+
+```
+
 
 ### API
 

doc/base.js

@@ -23,6 +23,9 @@ const BaseExample = () => {
           InfoPage.InfoPage.Part
         </InfoPage.Part>
       </InfoPage.Part>
+      <InfoPage.Part title="我是一个标题">
+        xxxx
+      </InfoPage.Part>
     </InfoPage>
   );
 };

doc/example.json

@@ -152,6 +152,24 @@
           "packageName": "antd"
         }
       ]
+    },
+    {
+      "title": "评分",
+      "description": "展示评分组件",
+      "code": "./score.js",
+      "scope": [
+        {
+          "name": "_InfoPage",
+          "packageName": "@kne/current-lib_info-page"
+        },
+        {
+          "packageName": "@kne/current-lib_info-page/dist/index.css"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        }
+      ]
     }
   ]
 }

doc/score.js

@@ -0,0 +1,33 @@
+const { Score } = _InfoPage;
+const { Flex } = antd;
+
+const BaseExample = () => {
+  return (
+    <Flex vertical gap={12}>
+      <Flex gap={24}>
+        <Score value={0} />
+        <Score value={1} />
+        <Score value={2} />
+        <Score value={3} />
+        <Score value={4} />
+        <Score value={5} />
+      </Flex>
+      <Flex gap={24}>
+        <Score value={0} total={3} />
+        <Score value={1} total={3} />
+        <Score value={2} total={3} />
+        <Score value={3} total={3} />
+      </Flex>
+      <Flex gap={24}>
+        <Score value={0} gap={0} />
+        <Score value={1} gap={0} />
+        <Score value={2} gap={0} />
+        <Score value={3} gap={0} />
+        <Score value={4} gap={0} />
+        <Score value={5} gap={0} />
+      </Flex>
+    </Flex>
+  );
+};
+
+render(<BaseExample />);

package.json

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

src/Score/index.js

@@ -3,16 +3,24 @@ import classnames from 'classnames';
 import { Row, Col } from 'antd';
 import style from './style.module.scss';
 
-const ScoreItem = ({ score, staticScore }) => {
+const ScoreItem = ({ score, total, staticScore, getLevel, levelColors = ['#f1f1f1', '#f66969', '#ffb566', '#a2de91'] }) => {
   score = Number.isNaN(score) ? 0 : Number(score);
+  const level = (
+    getLevel ||
+    (score => {
+      if (score <= total / 3) return 1;
+      if (score <= (total * 2) / 3) return 2;
+      if (score > (total * 2) / 3) return 3;
+    })
+  )(score);
+
+  const color = staticScore > score ? levelColors[0] : levelColors[level];
   return (
     <div
-      className={classnames('score-item', style['score-item'], {
-        [style['is-grey']]: staticScore > score,
-        [style['low-score']]: score < 3,
-        [style['middle-score']]: score === 3,
-        [style['high-score']]: score > 3
-      })}
+      className={classnames('score-item', style['score-item'])}
+      style={{
+        '--score-item-color': color
+      }}
     />
   );
 };
@@ -21,8 +29,8 @@ const Score = ({ className, value, gap = 4, total = 5 }) => {
   return (
     <Row justify="space-between" gutter={[gap, 0]} className={classnames(className, 'score-view', style['score'])} wrap={false} flex={1}>
       {Array.from({ length: total }).map((n, index) => (
-        <Col key={index + 1} span={5} className={classnames('score-item-col', style['score-item-col'])}>
-          <ScoreItem score={value} staticScore={index + 1} />
+        <Col key={index + 1} span={24 / total} className={classnames('score-item-col', style['score-item-col'])}>
+          <ScoreItem score={value} total={total} staticScore={index + 1} />
         </Col>
       ))}
     </Row>

src/Score/style.module.scss

@@ -12,20 +12,6 @@
 .score-item {
   width: 100%;
   height: 14px;
-
-  &.is-grey {
-    background: #f1f1f1 !important;
-  }
-
-  &.low-score {
-    background: #f66969;
-  }
-
-  &.middle-score {
-    background: #ffb566;
-  }
-
-  &.high-score {
-    background: #a2de91;
-  }
+  background: var(--score-item-color);
+  min-width: 10px;
 }