OJ2/apps/web/src/admin/ai/list.vue

<template>
  <PageHeader title="AI 学习分析报告">
    <template #filters>
      <n-input
        v-model:value="query.username"
        clearable
        placeholder="输入用户名筛选"
        style="width: 220px"
      />
    </template>
  </PageHeader>
  <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 }}
      </n-tag>
    </n-flex>
  </n-alert>
  <n-data-table striped :columns="columns" :data="reports" />
  <Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />

  <n-modal
    v-model:show="showModal"
    preset="card"
    title="分析报告详情"
    style="width: 800px; max-width: 95vw"
  >
    <n-spin :show="loadingDetail">
      <div v-if="detail" class="detail">
        <n-descriptions :column="3" bordered size="small" class="meta">
          <n-descriptions-item label="用户">
            {{ detail.username }}
          </n-descriptions-item>
          <n-descriptions-item label="班级">
            {{ detail.className || "-" }}
          </n-descriptions-item>
          <n-descriptions-item label="时间">
            {{ parseTime(detail.createTime, "YYYY-MM-DD HH:mm:ss") }}
          </n-descriptions-item>
        </n-descriptions>
        <n-scrollbar style="max-height: 60vh; margin-top: 12px">
          <Markdown :content="detail.analysis" />
        </n-scrollbar>
      </div>
    </n-spin>
  </n-modal>
</template>

<script lang="ts" setup>
import PageHeader from "admin/components/PageHeader.vue"
import Markdown from "shared/components/Markdown.vue"
import Pagination from "shared/components/Pagination.vue"
import { parseTime } from "utils/functions"
import { getAIReportList, getAIReportDetail, pinAIReport, getPinnedAIReports } from "../api"
import { NButton, NTag } from "naive-ui"
import type { AdminAiReport, AdminAiReportListItem } from "utils/types"

type ReportItem = AdminAiReportListItem
type ReportDetail = AdminAiReport

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)
const detail = ref<ReportDetail | null>(null)

const columns: DataTableColumn<ReportItem>[] = [
  { title: "ID", key: "id", width: 80 },
  {
    title: "用户名",
    key: "username",
    width: 150,
    render: (row) => h("span", { style: row.isPinned ? "font-weight:600" : "" }, row.username),
  },
  {
    title: "AI 分析内容",
    key: "analysis_excerpt",
    render: (row) => row.analysisExcerpt || "-",
  },
  {
    title: "生成时间",
    key: "create_time",
    width: 200,
    render: (row) => parseTime(row.createTime, "YYYY-MM-DD HH:mm:ss"),
  },
  {
    title: "PIN 状态",
    key: "is_pinned",
    width: 100,
    render: (row) =>
      row.isPinned ? h(NTag, { type: "warning", size: "small" }, () => "已锁定") : null,
  },
  {
    title: "操作",
    key: "action",
    width: 160,
    render: (row) =>
      h("span", { style: "display:flex;gap:8px" }, [
        h(
          NButton,
          { size: "small", type: "primary", onClick: () => openDetail(row.id) },
          () => "查看",
        ),
        h(
          NButton,
          {
            size: "small",
            type: row.isPinned ? "error" : "default",
            onClick: () => togglePin(row),
          },
          () => (row.isPinned ? "取消 PIN" : "PIN"),
        ),
      ]),
  },
]

async function loadPinnedReports() {
  const res = await getPinnedAIReports()
  pinnedReports.value = res.results
}

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)
  reports.value = res.results
  total.value = res.total
}

async function openDetail(id: number) {
  showModal.value = true
  loadingDetail.value = true
  detail.value = null
  try {
    const res = await getAIReportDetail(id)
    detail.value = res
  } finally {
    loadingDetail.value = false
  }
}

onMounted(() => Promise.all([listReports(), loadPinnedReports()]))
watch(() => [query.page, query.limit], listReports)
watchDebounced(() => query.username, listReports, {
  debounce: 500,
  maxWait: 1000,
})
</script>

<style scoped>
.detail .meta {
  margin-bottom: 0;
}
</style>