From 334b2d77b10b5bed8e5c6fa0c8e643153b28ccbe Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 9 Mar 2026 17:26:16 +0800
Subject: [PATCH] Add flag column with admin popover to submissions table

Admins can click the flag dot to set/clear colored flags on submissions.
Non-admins see the flag indicator as read-only.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/Submissions.vue | 83 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 1 deletion(-)
diff --git a/src/pages/Submissions.vue b/src/pages/Submissions.vue
index c534576..4ee75bd 100644
--- a/src/pages/Submissions.vue
+++ b/src/pages/Submissions.vue
@@ -113,7 +113,7 @@
   </n-modal>
 </template>
 <script setup lang="ts">
-import { NButton, type DataTableColumn } from "naive-ui"
+import { NButton, NPopover, NSpace, type DataTableColumn } from "naive-ui"
 import { computed, h, onMounted, onUnmounted, reactive, ref, watch } from "vue"
 import { Submission, Prompt } from "../api"
 import type { SubmissionOut } from "../utils/type"
@@ -128,6 +128,8 @@ import { step } from "../store/tutorial"
 import { html as eHtml, css as eCss, js as eJs } from "../store/editors"
 import { TASK_TYPE } from "../utils/const"
 import { goHome } from "../utils/helper"
+import { roleAdmin, roleSuper } from "../store/user"
+import type { FlagType } from "../utils/type"
 
 const route = useRoute()
 const router = useRouter()
@@ -149,6 +151,15 @@ const chainMessages = ref<{ id: number; role: string; content: string; code_html
 const chainLoading = ref(false)
 const selectedRound = ref(0)
 
+const FLAG_OPTIONS: { value: FlagType; color: string; label: string }[] = [
+  { value: "red", color: "#e03030", label: "值得展示" },
+  { value: "blue", color: "#2080f0", label: "需要讲解" },
+  { value: "green", color: "#18a058", label: "优秀作品" },
+  { value: "yellow", color: "#f0a020", label: "需要改进" },
+]
+
+const isAdmin = computed(() => roleAdmin.value || roleSuper.value)
+
 const chainRounds = computed(() => {
   const messages = chainMessages.value
   const rounds: { question: string; html: string | null; css: string | null; js: string | null }[] = []
@@ -177,6 +188,11 @@ const selectedPageHtml = computed(() => {
   return `<!DOCTYPE html><html><head><meta charset="utf-8">${style}</head><body>${round.html}${script}</body></html>`
 })
 
+async function updateFlag(row: SubmissionOut, flag: FlagType) {
+  await Submission.updateFlag(row.id, flag)
+  row.flag = flag
+}
+
 async function showChain(conversationId: string) {
   chainLoading.value = true
   chainModal.value = true
@@ -191,6 +207,71 @@ async function showChain(conversationId: string) {
 }
 
 const columns: DataTableColumn<SubmissionOut>[] = [
+  {
+    title: "标记",
+    key: "flag",
+    width: 50,
+    render: (row) => {
+      const flagOption = FLAG_OPTIONS.find((f) => f.value === row.flag)
+      const flagIcon = h("span", {
+        style: {
+          display: "inline-block",
+          width: "12px",
+          height: "12px",
+          borderRadius: "50%",
+          backgroundColor: flagOption ? flagOption.color : "transparent",
+          border: flagOption ? "none" : "1px dashed #ccc",
+          cursor: isAdmin.value ? "pointer" : "default",
+        },
+      })
+
+      if (!isAdmin.value) return flagIcon
+
+      return h(
+        NPopover,
+        { trigger: "click" },
+        {
+          trigger: () => flagIcon,
+          default: () =>
+            h(NSpace, { vertical: true, size: "small" }, () => [
+              ...FLAG_OPTIONS.map((opt) =>
+                h(
+                  NButton,
+                  {
+                    text: true,
+                    onClick: () => updateFlag(row, opt.value),
+                  },
+                  () =>
+                    h("span", { style: { display: "flex", alignItems: "center", gap: "6px" } }, [
+                      h("span", {
+                        style: {
+                          display: "inline-block",
+                          width: "10px",
+                          height: "10px",
+                          borderRadius: "50%",
+                          backgroundColor: opt.color,
+                        },
+                      }),
+                      opt.label,
+                    ]),
+                ),
+              ),
+              row.flag
+                ? h(
+                    NButton,
+                    {
+                      text: true,
+                      type: "error",
+                      onClick: () => updateFlag(row, null),
+                    },
+                    () => "清除",
+                  )
+                : null,
+            ]),
+        },
+      )
+    },
+  },
   {
     title: "时间",
     key: "created",
