show grade info

src/oj/ai/components/Grade.vue

@@ -1,8 +1,29 @@
 <template>
-  <img src="/S.png" alt="S Grade" v-if="props.grade === 'S'" />
-  <img src="/A.png" alt="A Grade" v-if="props.grade === 'A'" />
-  <img src="/B.png" alt="B Grade" v-if="props.grade === 'B'" />
-  <img src="/C.png" alt="C Grade" v-if="props.grade === 'C'" />
+  <div align="center" style="display: inline-flex; margin: 0 10px;">
+    <img src="/S.png" alt="S Grade" v-if="props.grade === 'S'" />
+    <img src="/A.png" alt="A Grade" v-if="props.grade === 'A'" />
+    <img src="/B.png" alt="B Grade" v-if="props.grade === 'B'" />
+    <img src="/C.png" alt="C Grade" v-if="props.grade === 'C'" />
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-icon size="16" style="cursor: help;">
+          <svg viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
+          </svg>
+        </n-icon>
+      </template>
+      <div style="max-width: 300px; line-height: 1.4;">
+        <div style="font-weight: bold; margin-bottom: 8px;">等级计算说明</div>
+        <div>使用加权平均方法计算综合等级：</div>
+        <div>• S级 = 4分，A级 = 3分，B级 = 2分，C级 = 1分</div>
+        <div>• 根据平均分数确定最终等级：</div>
+        <div>  - S级：≥3.5分</div>
+        <div>  - A级：2.5-3.5分</div>
+        <div>  - B级：1.5-2.5分</div>
+        <div>  - C级：<1.5分</div>
+      </div>
+    </n-tooltip>
+  </div>
 </template>
 <script setup lang="ts">
 const props = defineProps<{
@@ -14,7 +35,6 @@ img {
   animation: shake 0.5s infinite;
   width: 30px;
   height: 30px;
-  margin: 0 10px -10px;
 }
 
 @keyframes shake {