update

src/admin/ai/list.vue

@@ -8,6 +8,21 @@
       style="width: 200px"
     />
   </n-flex>
+  <n-alert v-if="pinnedReports.length > 0" type="warning" :show-icon="true" style="margin-bottom: 12px">
+    以下 <strong>{{ pinnedReports.length }}</strong> 位用户的 AI 分析报告已被锁定，前台将固定显示该报告：
+    <n-flex style="margin-top: 8px" :wrap="true" :size="[8, 6]">
+      <n-tag
+        v-for="r in pinnedReports"
+        :key="r.id"
+        type="warning"
+        size="small"
+        closable
+        @close="togglePin(r)"
+      >
+        {{ r.username }}{{ r.class_name ? `（${r.class_name}）` : "" }}
+      </n-tag>
+    </n-flex>
+  </n-alert>
   <n-data-table striped :columns="columns" :data="reports" />
   <Pagination
     :total="total"
@@ -24,7 +39,7 @@
           <n-descriptions-item label="时间" :span="2">{{ parseTime(detail.create_time, "YYYY-MM-DD HH:mm:ss") }}</n-descriptions-item>
         </n-descriptions>
         <n-scrollbar style="max-height: 60vh; margin-top: 12px">
-          <pre class="analysis">{{ detail.analysis }}</pre>
+          <MdPreview :model-value="detail.analysis" />
         </n-scrollbar>
       </div>
     </n-spin>
@@ -32,16 +47,19 @@
 </template>
 
 <script lang="ts" setup>
+import { MdPreview } from "md-editor-v3"
+import "md-editor-v3/lib/preview.css"
 import Pagination from "shared/components/Pagination.vue"
 import { parseTime } from "utils/functions"
-import { getAIReportList, getAIReportDetail } from "../api"
+import { getAIReportList, getAIReportDetail, pinAIReport, getPinnedAIReports } from "../api"
-import { NButton } from "naive-ui"
+import { NButton, NTag } from "naive-ui"
 
 interface ReportItem {
   id: number
   create_time: string
   username: string
   class_name: string | null
+  is_pinned: boolean
 }
 
 interface ReportDetail extends ReportItem {
@@ -51,6 +69,7 @@ interface ReportDetail extends ReportItem {
 const reports = ref<ReportItem[]>([])
 const total = ref(0)
 const query = reactive({ limit: 10, page: 1, username: "" })
+const pinnedReports = ref<ReportItem[]>([])
 
 const showModal = ref(false)
 const loadingDetail = ref(false)
@@ -58,7 +77,13 @@ const detail = ref<ReportDetail | null>(null)
 
 const columns: DataTableColumn<ReportItem>[] = [
   { title: "ID", key: "id", width: 80 },
-  { title: "用户名", key: "username", width: 150 },
+  {
+    title: "用户名",
+    key: "username",
+    width: 150,
+    render: (row) =>
+      h("span", { style: row.is_pinned ? "font-weight:600" : "" }, row.username),
+  },
   { title: "班级", key: "class_name", width: 150, render: (row) => row.class_name || "-" },
   {
     title: "生成时间",
@@ -66,19 +91,45 @@ const columns: DataTableColumn<ReportItem>[] = [
     width: 200,
     render: (row) => parseTime(row.create_time, "YYYY-MM-DD HH:mm:ss"),
   },
+  {
+    title: "PIN 状态",
+    key: "is_pinned",
+    width: 100,
+    render: (row) =>
+      row.is_pinned
+        ? h(NTag, { type: "warning", size: "small" }, () => "已锁定")
+        : null,
+  },
   {
     title: "操作",
     key: "action",
-    width: 80,
+    width: 160,
     render: (row) =>
-      h(
+      h("span", { style: "display:flex;gap:8px" }, [
-        NButton,
+        h(NButton, { size: "small", type: "primary", onClick: () => openDetail(row.id) }, () => "查看"),
-        { size: "small", type: "primary", onClick: () => openDetail(row.id) },
+        h(
-        () => "查看",
+          NButton,
-      ),
+          {
+            size: "small",
+            type: row.is_pinned ? "error" : "default",
+            onClick: () => togglePin(row),
+          },
+          () => (row.is_pinned ? "取消 PIN" : "PIN"),
+        ),
+      ]),
   },
 ]
 
+async function loadPinnedReports() {
+  const res = await getPinnedAIReports()
+  pinnedReports.value = res.data
+}
+
+async function togglePin(row: ReportItem) {
+  await pinAIReport(row.id)
+  await Promise.all([listReports(), loadPinnedReports()])
+}
+
 async function listReports() {
   const offset = (query.page - 1) * query.limit
   const res = await getAIReportList(offset, query.limit, query.username)
@@ -98,7 +149,7 @@ async function openDetail(id: number) {
   }
 }
 
-onMounted(listReports)
+onMounted(() => Promise.all([listReports(), loadPinnedReports()]))
 watch(() => [query.page, query.limit], listReports)
 watchDebounced(() => query.username, listReports, { debounce: 500, maxWait: 1000 })
 </script>
@@ -114,13 +165,4 @@ watchDebounced(() => query.username, listReports, { debounce: 500, maxWait: 1000
 .detail .meta {
   margin-bottom: 0;
 }
-.analysis {
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.6;
-  margin: 0;
-  padding: 8px;
-}
 </style>

src/admin/api.ts

@@ -501,3 +501,11 @@ export function getAIReportList(offset = 0, limit = 10, username = "") {
 export function getAIReportDetail(id: number) {
   return http.get("admin/ai/reports", { params: { id } })
 }
+
+export function pinAIReport(id: number) {
+  return http.post("admin/ai/reports", { id })
+}
+
+export function getPinnedAIReports() {
+  return http.get("admin/ai/reports", { params: { pinned_only: "true" } })
+}

src/oj/ai/components/AI.vue

@@ -7,19 +7,24 @@
     </template>
     <n-spin :show="aiStore.loading.ai" :delay="50">
       <n-flex align="center" justify="center" class="container">
-        <n-button
+        <template v-if="aiStore.pinnedReport">
-          v-if="!aiStore.mdContent && !aiStore.loading.ai"
+          <MdPreview :model-value="aiStore.pinnedReport.analysis" />
-          type="primary"
+        </template>
-          size="large"
+        <template v-else>
-          :loading="aiStore.loading.fetching"
+          <n-button
-          @click="handleAnalyze"
+            v-if="!aiStore.mdContent && !aiStore.loading.ai"
-        >
+            type="primary"
-          <template #icon>
+            size="large"
-            <Icon icon="mingcute:ai-line" />
+            :loading="aiStore.loading.fetching"
-          </template>
+            @click="handleAnalyze"
-          开始分析
+          >
-        </n-button>
+            <template #icon>
-        <MdPreview v-else :model-value="aiStore.mdContent" />
+              <Icon icon="mingcute:ai-line" />
+            </template>
+            开始分析
+          </n-button>
+          <MdPreview v-else :model-value="aiStore.mdContent" />
+        </template>
       </n-flex>
     </n-spin>
   </n-card>
@@ -38,6 +43,12 @@ async function handleAnalyze() {
   }
   await aiStore.fetchAIAnalysis()
 }
+
+onMounted(async () => {
+  if (!aiStore.targetUsername) {
+    await aiStore.fetchPinnedReport()
+  }
+})
 </script>
 <style scoped>
 .cool-title {

src/oj/api.ts

@@ -308,6 +308,10 @@ export function getAILoginSummary() {
   return http.get("ai/login_summary")
 }
 
+export function getAIPinnedReport() {
+  return http.get("ai/pinned")
+}
+
 // ==================== 相似题目推荐 ====================
 
 export function getSimilarProblems(problemId: string) {

src/oj/store/ai.ts

@@ -1,6 +1,6 @@
 import { DetailsData, DurationData } from "utils/types"
 import { consumeJSONEventStream } from "utils/stream"
-import { getAIDetailData, getAIDurationData, getAIHeatmapData } from "../api"
+import { getAIDetailData, getAIDurationData, getAIHeatmapData, getAIPinnedReport } from "../api"
 import { getCSRFToken } from "utils/functions"
 
 export const useAIStore = defineStore("ai", () => {
@@ -27,6 +27,7 @@ export const useAIStore = defineStore("ai", () => {
   })
 
   const mdContent = ref("")
+  const pinnedReport = ref<{ analysis: string } | null>(null)
 
   async function fetchDetailsData(start: string, end: string) {
     const res = await getAIDetailData(
@@ -156,10 +157,16 @@ export const useAIStore = defineStore("ai", () => {
     }
   }
 
+  async function fetchPinnedReport() {
+    const res = await getAIPinnedReport()
+    pinnedReport.value = res.data
+  }
+
   return {
     fetchAnalysisData,
     fetchHeatmapData,
     fetchAIAnalysis,
+    fetchPinnedReport,
     durationData,
     detailsData,
     heatmapData,
@@ -167,5 +174,6 @@ export const useAIStore = defineStore("ai", () => {
     targetUsername,
     loading,
     mdContent,
+    pinnedReport,
   }
 })