feat(OperationRating): 增加点赞数提示

Author: QingXia-Ela

src/components/viewer/OperationRating.tsx

@@ -1,4 +1,5 @@
 import { Icon, IconSize } from '@blueprintjs/core'
+import { Popover2InteractionKind, Tooltip2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
 import { FC } from 'react'
@@ -7,8 +8,21 @@ import Rating from 'react-rating'
 import { Operation } from 'models/operation'
 import { ratingLevelToString } from 'models/rating'
 
+type PickedOperation = Pick<
+  Operation,
+  'notEnoughRating' | 'ratingRatio' | 'ratingLevel' | 'like' | 'dislike'
+>
+
+const GetLevelDescription = (operation: PickedOperation) => {
+  return `有${Math.round(
+    (operation.like / (operation.like + operation.dislike)) * 100,
+  )}%的人对本作业点了个赞（${operation.like}/${
+    operation.like + operation.dislike
+  }）`
+}
+
 export const OperationRating: FC<{
-  operation: Pick<Operation, 'notEnoughRating' | 'ratingRatio' | 'ratingLevel'>
+  operation: PickedOperation
   layout?: 'horizontal' | 'vertical'
   className?: string
 }> = ({ operation, layout = 'vertical', className }) => {
@@ -60,11 +74,18 @@ export const OperationRating: FC<{
           layout === 'horizontal' && !operation.notEnoughRating && 'mr-1.5',
         )}
       >
-        {operation.notEnoughRating
-          ? layout === 'vertical'
-            ? '还没有足够的评分'
-            : '评分不足'
-          : ratingLevelToString(operation.ratingLevel)}
+        <Tooltip2
+          className="!inline-block !mt-0"
+          interactionKind={Popover2InteractionKind.HOVER}
+          content={GetLevelDescription(operation)}
+          position="bottom-left"
+        >
+          {operation.notEnoughRating
+            ? layout === 'vertical'
+              ? '还没有足够的评分'
+              : '评分不足'
+            : ratingLevelToString(operation.ratingLevel)}
+        </Tooltip2>
       </div>
     </div>
   )