feat: 完成数据集点赞功能

react-ui/src/pages/Dataset/components/ResourceInfo/index.less

@@ -28,9 +28,29 @@
       border-radius: 4px;
     }
 
+    &__praise {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 70px;
+      height: 28px;
+      margin-left: auto;
+      color: @text-color-tertiary;
+      font-size: 13px;
+      background: #ffffff;
+      border: 1px solid rgba(22, 100, 255, 0.11);
+      border-radius: 4px;
+      cursor: pointer;
+
+      &--praised {
+        color: @primary-color;
+      }
+    }
+
     :global {
       .ant-btn-dangerous {
-        background-color: transparent !important;
+        background-color: .addAlpha(@error-color, 0.06) [] !important;
+        border-color: .addAlpha(@error-color, 0.11) [] !important;
       }
     }
   }

react-ui/src/pages/Dataset/components/ResourceInfo/index.tsx

@@ -20,6 +20,7 @@ import { to } from '@/utils/promise';
 import { modalConfirm } from '@/utils/ui';
 import { useParams, useSearchParams } from '@umijs/max';
 import { App, Button, Flex, Select, Tabs } from 'antd';
+import classNames from 'classnames';
 import { useCallback, useEffect, useState } from 'react';
 import AddVersionModal from '../AddVersionModal';
 import ResourceIntro from '../ResourceIntro';
@@ -263,9 +264,19 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
               {(info[tagPropertyName] as string) || '--'}
             </div>
           )}
-          <Button type="primary" onClick={handlePraise}>
-            {info.praised ? '取消点赞' : '点赞'} {info.praises_count}
-          </Button>
+          <div
+            className={classNames(styles['resource-info__top__praise'], {
+              [styles['resource-info__top__praise--praised']]: info.praised,
+            })}
+            onClick={handlePraise}
+          >
+            <KFIcon
+              type={info.praised ? 'icon-dianzanhou' : 'icon-dianzan'}
+              font={16}
+              style={{ marginRight: '3px' }}
+            />
+            <span>{info.praises_count}</span>
+          </div>
         </Flex>
         <Flex align="center">
           <span style={{ marginRight: '10px' }}>版本号：</span>
@@ -280,12 +291,17 @@ const ResourceInfo = ({ resourceType }: ResourceInfoProps) => {
           <Button type="default" onClick={showModal} icon={<KFIcon type="icon-xinjian2" />}>
             创建新版本
           </Button>
-          <Button type="default" style={{ marginLeft: '20px' }} onClick={showVersionSelector}>
+          <Button
+            type="default"
+            style={{ marginLeft: '20px' }}
+            icon={<KFIcon type="icon-banbenduibi" />}
+            onClick={showVersionSelector}
+          >
             版本对比
           </Button>
           <Button
             type="default"
-            style={{ marginLeft: 'auto', marginRight: 0 }}
+            style={{ marginLeft: '20px' }}
             onClick={handleDelete}
             icon={<KFIcon type="icon-shanchu" />}
             disabled={!version}

react-ui/src/pages/Dataset/components/ResourceItem/index.less

@@ -7,12 +7,18 @@
   border-radius: 4px;
   cursor: pointer;
 
-  @media screen and (max-width: 1860px) {
+  @media screen and (max-width: 1860px) and (min-width: 1601px) {
     & {
       width: calc(33.33% - 13.33px);
     }
   }
 
+  @media screen and (max-width: 1600px) {
+    & {
+      width: calc(50% - 10px);
+    }
+  }
+
   &:hover {
     border-color: @primary-color;
     box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
@@ -56,8 +62,19 @@
   &__time {
     display: flex;
     align-items: center;
-    color: #808080;
-    font-size: 13px;
     min-width: 0;
+    color: @text-color-tertiary;
+    font-size: 13px;
+
+    &__separator {
+      width: 1px;
+      height: 9px;
+      margin: 0 8px;
+      background-color: rgba(205, 206, 209, 0.5);
+    }
+
+    &__praise {
+      margin-left: 4px;
+    }
   }
 }

react-ui/src/pages/Dataset/components/ResourceItem/index.tsx

@@ -14,9 +14,9 @@ type ResourceItemProps = {
 };
 
 function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps) {
-  const timeAgo =
-    '最近更新: ' +
-    (item.update_time ? formatDate(item.update_time, 'YYYY-MM-DD') : item.time_ago ?? '');
+  const timeAgo = `更新于${
+    item.update_time ? formatDate(item.update_time, 'YYYY-MM-DD') : item.time_ago ?? ''
+  }`;
   const create_by = item.create_by ?? '';
   return (
     <div className={styles['resource-item']} onClick={() => onClick(item)}>
@@ -41,7 +41,6 @@ function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps)
         )}
       </Flex>
       <div className={styles['resource-item__description']}>{item.description}</div>
-      <div style={{ marginBottom: 20 }}>点赞数量：{item.praises_count}</div>
       <Flex justify="space-between" gap={'0 8px'}>
         <div className={styles['resource-item__time']}>
           <img
@@ -55,6 +54,9 @@ function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps)
         <div className={styles['resource-item__time']}>
           <img style={{ width: '12px', marginRight: '5px' }} src={clock} draggable={false} alt="" />
           <Typography.Text ellipsis={{ tooltip: timeAgo }}>{timeAgo}</Typography.Text>
+          <div className={styles['resource-item__time__separator']}></div>
+          <KFIcon type="icon-dianzan" font={16} />
+          <div className={styles['resource-item__time__praise']}>{item.praises_count}</div>
         </div>
       </Flex>
     </div>