feat(componentMarket): 更新组件评分展示样式

src/pages/componentMarket/compCard.tsx

@@ -3,6 +3,7 @@ import styles from './style/compCard.module.less';
 import { Card, Grid, Rate, Typography, Pagination, Spin, Empty, Image } from '@arco-design/web-react';
 import { useRouter } from 'next/router';
 import { getComponentMarket } from '@/api/componentMarket';
+import { IconStarFill } from '@arco-design/web-react/icon';
 
 const { Row, Col } = Grid;
 
@@ -133,10 +134,12 @@ const CompCard: React.FC<CompCardProps> = ({
                       <div className={styles['info-score']}>
                         <div>组件评分：</div>
                         <div className={styles['info-rate']}>
-                          <Rate readonly allowHalf value={item.star || 5} />
-                          <Typography.Text style={{ margin: '0 5px', fontSize: 16 }}>
-                            {item.star || 5}分
+                          {/*<Rate readonly allowHalf value={item.star || 5} />*/}
+                          <Typography.Text style={{ margin: '0 5px', fontSize: 14 }}>
+                            {item.star || 5}
                           </Typography.Text>
+                          <IconStarFill
+                            style={{ color: '#ffcd00' }} />
                         </div>
                       </div>
                     </div>

src/pages/componentMarket/compDetails.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styles from './style/compDetails.module.less';
 import { Space, Divider, Button, Typography, Card, Image, Rate, Grid } from '@arco-design/web-react';
+import { IconStarFill } from '@arco-design/web-react/icon';
 import dayjs from 'dayjs';
 import { getComponentMarket } from '@/api/componentMarket';
 import ReactMarkdown from 'react-markdown';
@@ -117,7 +118,8 @@ const CompDetails = ({ compInfo }) => {
                 className={styles['update-time']}>更新时间: {dayjs(currentCompInfo.updateTime).format('YYYY-MM-DD HH:mm:ss')}</div>
               <div className={styles['update-time']}>组件大小: {currentCompInfo.size}</div>
               <div className={styles['update-time']}>组件版本: V_{currentCompInfo.status}</div>
-              <div className={styles['update-time']}>组件评分: {currentCompInfo.star}分</div>
+              <div className={styles['update-time']}>组件评分: {currentCompInfo.star || 5} <IconStarFill
+                style={{ color: '#ffcd00' }} /></div>
             </Space>
           </div>
           <div className={styles['extra']}>
@@ -194,7 +196,7 @@ const CompDetails = ({ compInfo }) => {
           <Divider style={{ borderBottomStyle: 'dashed' }} />
           <div className={styles['handel-box']}>
             <Button type="text">更新时间: {dayjs(currentCompInfo.updateTime).format('YYYY-MM-DD HH:mm:ss')}</Button>
-            <Button type="text"  onClick={handleCopyComponent}>复制到我的组件</Button>
+            <Button type="text" onClick={handleCopyComponent}>复制到我的组件</Button>
           </div>
           <Divider style={{ borderBottomStyle: 'dashed' }} />
         </div>
@@ -230,10 +232,12 @@ const CompDetails = ({ compInfo }) => {
                   <div className={styles['info-score']}>
                     <div>组件评分：</div>
                     <div className={styles['info-rate']}>
-                      <Rate readonly allowHalf value={item.star || 5} />
-                      <Typography.Text style={{ margin: '0 5px', fontSize: 16 }}>
-                        {item.star || 5}分
+                      {/*<Rate readonly allowHalf value={item.star || 5} />*/}
+                      <Typography.Text style={{ margin: '0 5px', fontSize: 14 }}>
+                        {item.star || 5}
                       </Typography.Text>
+                      <IconStarFill
+                        style={{ color: '#ffcd00' }} />
                     </div>
                   </div>
                 </div>

src/pages/componentMarket/style/compCard.module.less

@@ -17,6 +17,10 @@
   .info-box {
     width: calc(100% - 100px);
 
+    .info-score {
+      display: flex;
+    }
+
     .info-author {
       margin-bottom: 40px;
       white-space: nowrap; /* 禁止换行 */

src/pages/componentMarket/style/compDetails.module.less

@@ -239,6 +239,10 @@
   .info-box {
     width: calc(100% - 100px);
 
+    .info-score {
+      display: flex;
+    }
+
     .info-author {
       margin-bottom: 40px;
       white-space: nowrap; /* 禁止换行 */