Merge pull request #213 from QingXia-Ela/dev

feat: 为作业详情页面增加评价数量

Author: guansss

src/components/editor/action/EditorActionAdd.tsx

@@ -259,20 +259,22 @@ export const EditorActionAdd = ({
         <div className="h-px w-full bg-gray-200 mt-4 mb-6" />
 
         <EditorActionModule
-          title="执行条件" icon="stopwatch" className="font-bold" 
+          title="执行条件"
+          icon="stopwatch"
+          className="font-bold"
         >
-        <div className="flex flex-wrap">
-          <EditorActionExecPredicateKills control={control} />
-          <EditorActionExecPredicateCooling control={control} />
-        </div>
-        <div className="flex flex-wrap">
-          <EditorActionExecPredicateCosts control={control} />
-          <EditorActionExecPredicateCostChange control={control} />
-        </div>
-        <div className="flex flex-wrap">
-          <EditorActionPreDelay control={control} />
-          <EditorActionRearDelay control={control} />
-        </div>
+          <div className="flex flex-wrap">
+            <EditorActionExecPredicateKills control={control} />
+            <EditorActionExecPredicateCooling control={control} />
+          </div>
+          <div className="flex flex-wrap">
+            <EditorActionExecPredicateCosts control={control} />
+            <EditorActionExecPredicateCostChange control={control} />
+          </div>
+          <div className="flex flex-wrap">
+            <EditorActionPreDelay control={control} />
+            <EditorActionRearDelay control={control} />
+          </div>
         </EditorActionModule>
         <div className="h-px w-full bg-gray-200 mt-4 mb-6" />
 
@@ -309,7 +311,7 @@ export const EditorActionAdd = ({
             />
           </div>
         </EditorActionModule>
-        
+
         <div className="mt-4 flex">
           <Button intent="primary" type="submit" icon={isNew ? 'add' : 'edit'}>
             {isNew ? '添加' : '保存'}

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,39 @@ 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: FC<{
+  operation: PickedOperation
+  layout?: 'horizontal' | 'vertical'
+}> = ({ operation, layout }) => {
+  return operation.notEnoughRating ? (
+    layout === 'vertical' ? (
+      <>还没有足够的评分</>
+    ) : (
+      <>评分不足</>
+    )
+  ) : (
+    <Tooltip2
+      className="!inline-block !mt-0"
+      interactionKind={Popover2InteractionKind.HOVER}
+      content={`有${Math.round(
+        (operation.like / (operation.like + operation.dislike)) * 100,
+      )}%的人为本作业点了个赞（${operation.like}/${
+        operation.like + operation.dislike
+      }）`}
+      position="bottom-left"
+    >
+      {ratingLevelToString(operation.ratingLevel)}
+    </Tooltip2>
+  )
+}
+
 export const OperationRating: FC<{
-  operation: Pick<Operation, 'notEnoughRating' | 'ratingRatio' | 'ratingLevel'>
+  operation: PickedOperation
   layout?: 'horizontal' | 'vertical'
   className?: string
 }> = ({ operation, layout = 'vertical', className }) => {
@@ -60,11 +92,7 @@ export const OperationRating: FC<{
           layout === 'horizontal' && !operation.notEnoughRating && 'mr-1.5',
         )}
       >
-        {operation.notEnoughRating
-          ? layout === 'vertical'
-            ? '还没有足够的评分'
-            : '评分不足'
-          : ratingLevelToString(operation.ratingLevel)}
+        <GetLevelDescription layout={layout} operation={operation} />
       </div>
     </div>
   )

src/models/operation.ts

@@ -17,6 +17,8 @@ export interface Operation {
   ratingRatio: number
   ratingType: OpRatingType
   notEnoughRating: boolean
+  like: number
+  dislike: number
   commentsCount: number
 }