From a15b3d9c76255d0efff7079b51184f24d8c4fe22 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Thu, 11 Jun 2026 19:53:12 -0600
Subject: [PATCH] rating when ai is steaming

---
 src/api.ts                              |   8 ++
 src/components/ai/RandomRatingModal.vue | 135 ++++++++++++++++++++++++
 src/pages/ChallengeDetail.vue           |   2 +
 src/utils/type.ts                       |  11 ++
 4 files changed, 156 insertions(+)
 create mode 100644 src/components/ai/RandomRatingModal.vue

diff --git a/src/api.ts b/src/api.ts
index 6bc4ba2..04e2a35 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -20,6 +20,7 @@ import type {
   ShowcaseSubmissionLookupOut,
   ShowcaseDetail,
   PromptRound,
+  RandomRatingItem,
 } from "./utils/type"
 import { BASE_URL, STORAGE_KEY } from "./utils/const"
 
@@ -237,6 +238,13 @@ export const Submission = {
     return res.data
   },
 
+  async randomForRating(excludeId?: string) {
+    const res = await http.get("/submission/random-for-rating/", {
+      params: excludeId ? { exclude_id: excludeId } : {},
+    })
+    return res.data as RandomRatingItem | null
+  },
+
   async updateFlag(id: string, flag: FlagType) {
     const res = await http.put(`/submission/${id}/flag`, { flag })
     return res.data
diff --git a/src/components/ai/RandomRatingModal.vue b/src/components/ai/RandomRatingModal.vue
new file mode 100644
index 0000000..3953583
--- /dev/null
+++ b/src/components/ai/RandomRatingModal.vue
@@ -0,0 +1,135 @@
+<template>
+  <n-modal
+    preset="card"
+    :show="show"
+    title="等待 AI 回复时，给同学的作品打个分吧"
+    style="width: 480px"
+    @update:show="onUpdateShow"
+  >
+    <n-text
+      v-if="current"
+      depth="3"
+      style="font-size: 12px; display: block; margin-bottom: 8px"
+    >
+      {{ current.task_title }} · 提交者 {{ current.username }}
+    </n-text>
+    <div class="preview-wrapper">
+      <iframe class="preview-iframe" :srcdoc="previewContent"></iframe>
+    </div>
+    <div class="rate-row">
+      <n-rate
+        v-if="current"
+        :key="current.submission_id"
+        :size="32"
+        @update:value="onRate"
+      />
+    </div>
+    <n-text
+      depth="3"
+      style="font-size: 11px; display: block; text-align: center; margin-top: 8px"
+    >
+      打分后自动换下一个作品；AI 回复完成后弹窗会自动关闭
+    </n-text>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onUnmounted } from "vue"
+import { useMessage } from "naive-ui"
+import { Submission } from "../../api"
+import { streaming } from "../../store/prompt"
+import { buildPreviewDocument } from "../../utils/previewDocument"
+import type { RandomRatingItem } from "../../utils/type"
+
+const message = useMessage()
+
+const show = ref(false)
+const current = ref<RandomRatingItem | null>(null)
+const previewContent = ref("")
+let reshowTimer: ReturnType<typeof setTimeout> | null = null
+
+function clearReshowTimer() {
+  if (reshowTimer !== null) {
+    clearTimeout(reshowTimer)
+    reshowTimer = null
+  }
+}
+
+async function fetchAndShow() {
+  try {
+    const item = await Submission.randomForRating(current.value?.submission_id)
+    if (item) {
+      current.value = item
+      previewContent.value = buildPreviewDocument({
+        html: item.html ?? "",
+        css: item.css ?? "",
+        js: item.js ?? "",
+      })
+      show.value = true
+    } else {
+      show.value = false
+    }
+  } catch (err: any) {
+    message.error(err.response?.data?.detail ?? "获取作品失败，请重试")
+  }
+}
+
+async function onRate(score: number) {
+  if (!current.value) return
+  try {
+    await Submission.updateScore(current.value.submission_id, score)
+    message.success("感谢评分！")
+    await fetchAndShow()
+  } catch (err: any) {
+    message.error(err.response?.data?.detail ?? "打分失败，请重试")
+  }
+}
+
+function onUpdateShow(value: boolean) {
+  show.value = value
+  if (!value) {
+    clearReshowTimer()
+    if (streaming.value) {
+      reshowTimer = setTimeout(fetchAndShow, 30_000)
+    }
+  }
+}
+
+watch(
+  streaming,
+  (val) => {
+    clearReshowTimer()
+    if (val) {
+      fetchAndShow()
+    } else {
+      show.value = false
+    }
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  clearReshowTimer()
+})
+</script>
+
+<style scoped>
+.preview-wrapper {
+  height: 220px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.rate-row {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}
+</style>
diff --git a/src/pages/ChallengeDetail.vue b/src/pages/ChallengeDetail.vue
index 8f41c6d..b462ce4 100644
--- a/src/pages/ChallengeDetail.vue
+++ b/src/pages/ChallengeDetail.vue
@@ -95,6 +95,7 @@
     </div>
   </div>
   <TaskStatsModal v-model:show="showStats" :task-id="taskId" />
+  <RandomRatingModal v-if="authed" />
   <n-modal
     v-model:show="showAssets"
     preset="card"
@@ -144,6 +145,7 @@ import ExternalAIPanel from "../components/ai/ExternalAIPanel.vue"
 import PromptHistoryPanel from "../components/ai/PromptHistoryPanel.vue"
 import Preview from "../components/editor/Preview.vue"
 import TaskStatsModal from "../components/task/TaskStatsModal.vue"
+import RandomRatingModal from "../components/ai/RandomRatingModal.vue"
 import { Challenge, Submission, TaskAssets } from "../api"
 import type { TaskAsset } from "../utils/type"
 import { html, css, js } from "../store/editors"
diff --git a/src/utils/type.ts b/src/utils/type.ts
index 8e4b3d4..a10e319 100644
--- a/src/utils/type.ts
+++ b/src/utils/type.ts
@@ -335,3 +335,14 @@ export interface PromptRound {
   css: string | null
   js: string | null
 }
+
+export interface RandomRatingItem {
+  submission_id: string
+  username: string
+  task_title: string
+  task_display: number
+  task_type: TASK_TYPE
+  html: string | null
+  css: string | null
+  js: string | null
+}