update

.browserslistrc

@@ -0,0 +1 @@
+chrome >= 90

.github/workflows/deploy.yaml

@@ -27,7 +27,7 @@ jobs:
         with:
           node-version: 24
           cache: npm
-      - run: npm ci
+      - run: npm install
       - run: npm run ${{ matrix.build_command }}
         env:
           CI: false

package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.11",
-    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.2.5",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.3.0",
-    "axios": "^1.15.0",
+    "axios": "^1.16.0",
     "codemirror": "^6.0.2",
     "copy-text-to-clipboard": "^3.2.2",
     "github-markdown-css": "^5.9.0",
@@ -23,19 +23,20 @@
     "marked-alert": "^2.1.2",
     "marked-code-preview": "^1.3.7",
     "marked-highlight": "^2.2.4",
-    "md-editor-v3": "^6.4.2",
+    "md-editor-v3": "^6.5.0",
     "naive-ui": "^2.44.1",
-    "vue": "^3.5.32",
+    "vue": "^3.5.33",
     "vue-codemirror": "^6.1.1",
-    "vue-router": "^5.0.4"
+    "vue-router": "^5.0.6"
   },
   "devDependencies": {
     "@iconify/vue": "^5.0.0",
-    "@rsbuild/core": "^1.7.5",
+    "@rsbuild/core": "^2.0.3",
     "@rsbuild/plugin-vue": "^1.2.7",
     "@vue/tsconfig": "^0.9.1",
-    "prettier": "^3.8.2",
+    "core-js": "^3.49.0",
-    "typescript": "^6.0.2",
+    "prettier": "^3.8.3",
+    "typescript": "^6.0.3",
     "unplugin-vue-components": "^32.0.0"
   }
 }

src/api.ts

@@ -6,6 +6,7 @@ import type {
   FlagType,
   SubmissionOut,
   PromptMessage,
+  PromptHistoryItem,
   TaskStatsOut,
   TaskAsset,
   AwardSection,
@@ -306,6 +307,11 @@ export const Prompt = {
     return (await http.get("/prompt/conversations/", { params })).data
   },
 
+  async listHistory(taskId: number): Promise<PromptHistoryItem[]> {
+    const res = await http.get(`/prompt/history/${taskId}`)
+    return res.data
+  },
+
   async getMessages(conversationId: string): Promise<PromptMessage[]> {
     return (
       await http.get<PromptMessage[]>(

src/components/ai/ExternalAIPanel.vue

@@ -52,6 +52,9 @@ import { html, css, js } from "../../store/editors"
 import { Submission } from "../../api"
 
 const props = defineProps<{ taskId: number }>()
+const emit = defineEmits<{
+  submitted: []
+}>()
 const message = useMessage()
 
 const promptText = ref("")
@@ -105,6 +108,7 @@ async function submit() {
       js: splitResult.value.js,
       prompt: promptText.value.trim(),
     })
+    emit("submitted")
     message.success("提交成功")
     promptText.value = ""
     rawCode.value = ""

src/components/ai/PromptHistoryPanel.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="history-panel">
+    <n-flex
+      class="history-toolbar"
+      align="center"
+      justify="space-between"
+      :wrap="false"
+    >
+      <n-text depth="3">共 {{ items.length }} 条历史对话</n-text>
+      <n-tooltip>
+        <template #trigger>
+          <n-button
+            quaternary
+            circle
+            size="small"
+            :loading="loading"
+            aria-label="刷新历史对话"
+            @click="load(true)"
+          >
+            <template #icon>
+              <Icon icon="lucide:refresh-cw" />
+            </template>
+          </n-button>
+        </template>
+        刷新历史对话
+      </n-tooltip>
+    </n-flex>
+
+    <n-spin v-if="loading" class="state" />
+    <n-empty
+      v-else-if="!items.length"
+      class="state"
+      description="暂无历史对话"
+    />
+    <n-scrollbar v-else class="history-scrollbar">
+      <n-flex vertical :size="12" class="history-list">
+        <n-card
+          v-for="(item, index) in items"
+          :key="item.assistant_message_id"
+          class="history-card"
+          :class="{
+            'is-selected':
+              selectedAssistantMessageId === item.assistant_message_id,
+          }"
+          size="small"
+          :bordered="true"
+          hoverable
+          :embedded="selectedAssistantMessageId === item.assistant_message_id"
+          :content-style="{ padding: 0 }"
+          @click="selectItem(item)"
+        >
+          <n-flex
+            class="history-main"
+            align="center"
+            justify="space-between"
+            :wrap="false"
+          >
+            <n-flex align="center" :wrap="false" :size="6">
+              <n-tag
+                round
+                size="small"
+                :bordered="false"
+                :type="
+                  selectedAssistantMessageId === item.assistant_message_id
+                    ? 'success'
+                    : 'default'
+                "
+              >
+                #{{ index + 1 }}
+              </n-tag>
+              <n-tag
+                size="small"
+                :type="item.source === 'manual' ? 'info' : 'success'"
+              >
+                {{ item.source === "manual" ? "手动提交" : "AI 对话" }}
+              </n-tag>
+            </n-flex>
+            <n-tag
+              v-if="selectedAssistantMessageId === item.assistant_message_id"
+              size="small"
+              type="success"
+              :bordered="false"
+            >
+              正在预览
+            </n-tag>
+            <n-text depth="3">
+              {{ parseTime(item.created, "YYYY-MM-DD HH:mm") }}
+            </n-text>
+          </n-flex>
+          <div
+            class="prompt-markdown markdown-body"
+            v-html="renderMarkdown(item.prompt)"
+          />
+          <div class="thumbnail" aria-label="页面缩略图">
+            <iframe
+              v-if="item.hasPage"
+              title="页面缩略图"
+              loading="lazy"
+              sandbox="allow-scripts"
+              referrerpolicy="no-referrer"
+              tabindex="-1"
+              :srcdoc="item.previewDoc"
+            />
+            <n-empty v-else size="small" description="未生成页面" />
+          </div>
+        </n-card>
+      </n-flex>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue"
+import { Icon } from "@iconify/vue"
+import { marked } from "marked"
+import { Prompt } from "../../api"
+import type { PromptHistoryItem } from "../../utils/type"
+import { parseTime } from "../../utils/helper"
+import { buildPreviewDocument } from "../../utils/previewDocument"
+
+const props = defineProps<{
+  taskId: number
+  active: boolean
+  assetBaseUrl?: string
+  refreshKey?: number
+}>()
+
+const emit = defineEmits<{
+  select: [code: { html: string; css: string; js: string }]
+}>()
+
+type HistoryViewItem = PromptHistoryItem & {
+  hasPage: boolean
+  previewDoc: string
+}
+
+const items = ref<HistoryViewItem[]>([])
+const loading = ref(false)
+const selectedAssistantMessageId = ref<number | null>(null)
+let loadedTaskId = 0
+
+function toViewItem(item: PromptHistoryItem): HistoryViewItem {
+  const html = item.code_html ?? ""
+  const css = item.code_css ?? ""
+  const js = item.code_js ?? ""
+  return {
+    ...item,
+    hasPage: !!(html.trim() || css.trim() || js.trim()),
+    previewDoc: buildPreviewDocument({
+      html,
+      css,
+      js,
+      assetBaseUrl: props.assetBaseUrl,
+    }),
+  }
+}
+
+function renderMarkdown(text: string): string {
+  return marked.parse(text) as string
+}
+
+function selectItem(item: HistoryViewItem) {
+  selectedAssistantMessageId.value = item.assistant_message_id
+  emit("select", {
+    html: item.code_html ?? "",
+    css: item.code_css ?? "",
+    js: item.code_js ?? "",
+  })
+}
+
+async function load(force = true) {
+  if (!props.taskId || loading.value) return
+  if (!force && loadedTaskId === props.taskId) return
+  loading.value = true
+  try {
+    const taskChanged = loadedTaskId !== props.taskId
+    const data = await Prompt.listHistory(props.taskId)
+    items.value = data.map(toViewItem)
+    if (
+      taskChanged ||
+      !items.value.some(
+        (item) =>
+          item.assistant_message_id === selectedAssistantMessageId.value,
+      )
+    ) {
+      selectedAssistantMessageId.value = null
+    }
+    loadedTaskId = props.taskId
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => [props.active, props.taskId] as const,
+  ([active]) => {
+    if (active) load(false)
+  },
+)
+
+watch(
+  () => props.refreshKey,
+  () => {
+    if (props.active) load(true)
+  },
+)
+
+onMounted(() => {
+  if (props.active) load(false)
+})
+</script>
+
+<style scoped>
+.history-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.history-toolbar {
+  height: 42px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--n-border-color, #efeff5);
+  flex-shrink: 0;
+}
+
+.state {
+  margin: auto;
+}
+
+.history-scrollbar {
+  flex: 1;
+  min-height: 0;
+}
+
+.history-list {
+  padding: 12px;
+}
+
+.history-card {
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.history-card.is-selected {
+  --n-color: #f7fffa;
+  box-shadow: 0 10px 24px rgba(24, 160, 88, 0.14);
+}
+
+.history-card.is-selected .history-main {
+  background: #eefaf3;
+}
+
+.history-main {
+  padding: 10px 12px;
+  transition: background-color 0.18s ease;
+}
+
+.prompt-markdown {
+  margin: 0;
+  padding: 0 12px 12px;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.6;
+  word-break: break-word;
+  background: transparent;
+}
+
+.prompt-markdown :deep(p),
+.prompt-markdown :deep(ul),
+.prompt-markdown :deep(ol),
+.prompt-markdown :deep(blockquote),
+.prompt-markdown :deep(pre) {
+  margin-top: 0;
+  margin-bottom: 6px;
+}
+
+.prompt-markdown :deep(:last-child) {
+  margin-bottom: 0;
+}
+
+.prompt-markdown :deep(pre) {
+  padding: 8px;
+  overflow-x: auto;
+  font-size: 12px;
+}
+
+.prompt-markdown :deep(code) {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.thumbnail {
+  height: 160px;
+  border-top: 1px solid var(--n-border-color, #efeff5);
+  background: #f7f7f9;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.history-card.is-selected .thumbnail {
+  border-top-color: #d8f1e2;
+  background: #f4fbf6;
+}
+
+.thumbnail iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+  pointer-events: none;
+}
+</style>

src/components/editor/Preview.vue

@@ -42,18 +42,19 @@
     </n-flex>
   </n-flex>
   <div class="iframe-wrapper" :style="iframeWrapperStyle">
-    <iframe class="iframe" ref="iframe"></iframe>
+    <iframe class="iframe" :srcdoc="previewContent"></iframe>
   </div>
 </template>
 <script lang="ts" setup>
 import { watchDebounced } from "@vueuse/core"
-import { computed, onMounted, useTemplateRef, ref } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { useRouter } from "vue-router"
 import { Submission } from "../../api"
 import { submission } from "../../store/submission"
 import { useMessage } from "naive-ui"
 import { Icon } from "@iconify/vue"
 import copy from "copy-text-to-clipboard"
+import { buildPreviewDocument } from "../../utils/previewDocument"
 
 interface Props {
   html: string
@@ -91,7 +92,9 @@ const layoutConfig: Record<
   },
 }
 const layoutIndex = ref(0)
-const layoutIcon = computed(() => layoutConfig[layouts[layoutIndex.value]!].icon)
+const layoutIcon = computed(
+  () => layoutConfig[layouts[layoutIndex.value]!].icon,
+)
 const layoutLabel = computed(
   () => layoutConfig[layouts[layoutIndex.value]!].label,
 )
@@ -105,35 +108,20 @@ function cycleLayout() {
 const message = useMessage()
 const router = useRouter()
 
-const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
 const showDL = computed(() => props.html || props.css || props.js)
+const previewContent = ref("")
 
 function getContent() {
-  return `<!DOCTYPE html>
+  return buildPreviewDocument({
-<html lang="zh-Hans-CN">
+    html: props.html,
-  <head>
+    css: props.css,
-    <meta charset="UTF-8" />
+    js: props.js,
-    <title>预览</title>
+    assetBaseUrl: props.assetBaseUrl,
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  })
-    ${props.assetBaseUrl ? `<base href="${props.assetBaseUrl}">` : ""}
-    <style>${props.css}</style>
-    <link rel="stylesheet" href="/normalize.min.css" />
-  </head>
-  <body>
-    ${props.html}
-    <script>${props.js}<\/script>
-  </body>
-</html>`
 }
 
 function preview() {
-  if (!iframe.value) return
+  previewContent.value = getContent()
-  const doc = iframe.value.contentDocument
-  if (doc) {
-    doc.open()
-    doc.write(getContent())
-    doc.close()
-  }
 }
 
 function download() {
@@ -155,7 +143,7 @@ function open() {
     })
     window.open(data.href, "_blank")
   } else {
-    const newTab = window.open("/usercontent.html")
+    const newTab = window.open("about:blank", "_blank")
     if (!newTab) return
     newTab.document.open()
     newTab.document.write(getContent())
@@ -183,10 +171,14 @@ async function updateScore(score: number) {
   }
 }
 
-watchDebounced(() => [props.html, props.css, props.js], preview, {
+watchDebounced(
-  debounce: 500,
+  () => [props.html, props.css, props.js, props.assetBaseUrl],
-  maxWait: 1000,
+  preview,
-})
+  {
+    debounce: 500,
+    maxWait: 1000,
+  },
+)
 onMounted(preview)
 </script>
 <style scoped>

src/components/task/ChallengeList.vue

@@ -25,6 +25,9 @@
             >
           </n-flex>
         </template>
+        <n-text depth="3" class="challenge-author">
+          出题人：{{ item.author_name || "未设置" }}
+        </n-text>
       </n-card>
     </n-flex>
   </div>
@@ -72,4 +75,9 @@ onMounted(async () => {
 .submitted-title {
   color: #888;
 }
+
+.challenge-author {
+  display: block;
+  font-size: 13px;
+}
 </style>

src/pages/ChallengeDetail.vue

@@ -34,18 +34,34 @@
           </n-flex>
         </template>
         <n-tab-pane name="desc" tab="挑战描述" display-directive="show">
-          <div
+          <div class="desc-pane">
-            class="markdown-body content no-select"
+            <div class="challenge-meta">
-            v-html="challengeContent"
+              <n-text depth="3">
-            ref="$desc"
+                出题人：{{ challengeAuthor || "未设置" }}
-            @copy.prevent
+              </n-text>
-          />
+            </div>
+            <div
+              class="markdown-body content no-select"
+              v-html="challengeContent"
+              ref="$desc"
+              @copy.prevent
+            />
+          </div>
         </n-tab-pane>
         <n-tab-pane name="chat" tab="AI 对话" display-directive="show">
           <PromptPanel />
         </n-tab-pane>
         <n-tab-pane name="external" tab="手动提交" display-directive="show">
-          <ExternalAIPanel :task-id="taskId" />
+          <ExternalAIPanel :task-id="taskId" @submitted="historyRefreshKey++" />
+        </n-tab-pane>
+        <n-tab-pane name="history" tab="历史对话" display-directive="show">
+          <PromptHistoryPanel
+            :task-id="taskId"
+            :active="activeTab === 'history'"
+            :asset-base-url="assetBaseUrl"
+            :refresh-key="historyRefreshKey"
+            @select="previewHistoryItem"
+          />
         </n-tab-pane>
       </n-tabs>
     </div>
@@ -109,6 +125,7 @@ import { marked, type MarkedOptions } from "marked"
 import copyFn from "copy-text-to-clipboard"
 import PromptPanel from "../components/ai/PromptPanel.vue"
 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 { Challenge, Submission, TaskAssets } from "../api"
@@ -156,11 +173,13 @@ function setupCodeCopy() {
 
 const activeTab = ref("desc")
 const challengeContent = ref("")
+const challengeAuthor = ref("")
 const $desc = useTemplateRef<HTMLElement>("$desc")
 const showCode = ref(false)
 const showStats = ref(false)
 const showAssets = ref(false)
 const assets = ref<TaskAsset[]>([])
+const historyRefreshKey = ref(0)
 
 const assetBaseUrl = computed(
   () => `/media/tasks/challenge/${challengeDisplay.value}/`,
@@ -176,6 +195,7 @@ async function loadChallenge() {
   challengeDisplay.value = display
   const data = await Challenge.get(display)
   taskId.value = data.task_ptr
+  challengeAuthor.value = data.author_name ?? ""
   challengeContent.value = await marked.parse(data.content, {
     async: true,
     renderer: challengeRenderer,
@@ -194,6 +214,7 @@ async function loadChallenge() {
         },
         messageId,
       )
+      historyRefreshKey.value++
       message.success("已自动提交本次对话生成的代码")
     } catch {
       // 静默失败，不打扰用户
@@ -214,6 +235,12 @@ function clearAll() {
   js.value = ""
 }
 
+function previewHistoryItem(code: { html: string; css: string; js: string }) {
+  html.value = code.html
+  css.value = code.css
+  js.value = code.js
+}
+
 function back() {
   disconnectPrompt()
   taskId.value = 0
@@ -272,10 +299,23 @@ onUnmounted(disconnectPrompt)
 .content {
   padding: 12px;
   overflow-y: auto;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   box-sizing: border-box;
 }
 
+.desc-pane {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.challenge-meta {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--n-border-color, #efeff5);
+  flex-shrink: 0;
+}
+
 .no-select {
   user-select: none;
 }

src/pages/ChallengeEditor.vue

@@ -29,6 +29,7 @@
               </n-button>
               <span>【{{ item.display }}】{{ item.title }}</span>
               <n-tag size="small" type="warning">{{ item.score }}分</n-tag>
+              <n-tag size="small">出题人 {{ item.author_name || "未设置" }}</n-tag>
             </n-flex>
           </template>
           <template #header-extra>
@@ -66,6 +67,9 @@
           <n-form-item label="公开" label-placement="left">
             <n-switch v-model:value="challenge.is_public" />
           </n-form-item>
+          <n-form-item label="出题人" label-placement="left">
+            <n-text depth="3">{{ challenge.author_name || "未设置" }}</n-text>
+          </n-form-item>
           <n-form-item label-placement="left">
             <n-button type="primary" @click="submit" :disabled="!canSubmit">
               提交
@@ -107,6 +111,7 @@ const challenge = reactive({
   content: "",
   score: 0,
   is_public: false,
+  author_name: "",
 })
 
 const canSubmit = computed(
@@ -129,6 +134,7 @@ function createNew() {
   challenge.content = ""
   challenge.score = 0
   challenge.is_public = false
+  challenge.author_name = ""
 }
 
 async function submit() {
@@ -140,6 +146,7 @@ async function submit() {
     challenge.content = ""
     challenge.score = 0
     challenge.is_public = false
+    challenge.author_name = ""
     await getContent()
   } catch (error: any) {
     message.error(error.response.data.detail)
@@ -168,6 +175,7 @@ async function show(display: number) {
   challenge.content = item.content
   challenge.score = item.score
   challenge.is_public = item.is_public
+  challenge.author_name = item.author_name ?? ""
 }
 
 async function togglePublic(display: number) {

src/pages/Dashboard.vue

@@ -49,7 +49,7 @@ const menu = computed(() =>
       show: roleSuper.value,
     },
     {
-      label: "平时成绩",
+      label: "成绩",
       route: { name: "gradebook" },
       show: roleAdmin.value || roleSuper.value,
     },

src/pages/Gradebook.vue

@@ -1,7 +1,11 @@
 <template>
-  <n-flex vertical class="gradebook-page" :size="12">
+  <n-flex
-    <n-flex class="toolbar" align="center" justify="space-between">
+    vertical
-      <n-flex align="center" :size="8" class="filters">
+    :size="12"
+    style="height: 100%; min-width: 0; box-sizing: border-box; padding: 10px 10px 10px 0; overflow: hidden;"
+  >
+    <n-flex class="toolbar" align="center" justify="space-between" style="flex-shrink: 0;">
+      <n-flex align="center" :size="8" wrap style="min-width: 0;">
         <n-select
           v-model:value="query.classname"
           class="class-select"
@@ -56,7 +60,7 @@
       {{ loadError }}
     </n-alert>
 
-    <n-flex v-if="gradebook" class="summary" align="center" :size="8">
+    <n-flex v-if="gradebook" align="center" :size="8" style="flex-shrink: 0;">
       <n-tag size="small">学生 {{ gradebook.student_count }}</n-tag>
       <n-tag size="small">任务 {{ gradebook.task_count }}</n-tag>
       <n-tag size="small" type="success">
@@ -68,7 +72,6 @@
     </n-flex>
 
     <n-data-table
-      class="gradebook-table"
       size="small"
       striped
       flex-height
@@ -77,6 +80,7 @@
       :data="rows"
       :row-key="(row: GradebookRow) => row.user_id"
       :scroll-x="scrollX"
+      style="flex: 1; min-height: 0;"
     />
   </n-flex>
 </template>
@@ -94,6 +98,7 @@ import {
 } from "naive-ui"
 import { useRouter } from "vue-router"
 import { Account, Gradebook } from "../api"
+import { displayGradebookStudentName } from "../utils/gradebook"
 import type {
   GradebookCell,
   GradebookOut,
@@ -172,7 +177,11 @@ function renderTaskHeader(task: GradebookTask) {
 function renderScore(row: GradebookRow, task: GradebookTask) {
   const cell = row.scores[task.id]
   if (!cell || !cell.submitted) {
-    return h("span", { class: "missing-cell" }, "缺交")
+    return h(
+      NText,
+      { class: "missing-cell", type: "error" },
+      { default: () => "缺交" },
+    )
   }
   return h(
     NButton,
@@ -189,19 +198,24 @@ function renderScore(row: GradebookRow, task: GradebookTask) {
   )
 }
 
+function renderMissingCount(value: number) {
+  if (value <= 0) return "0"
+  return h(NText, { type: "error" }, { default: () => String(value) })
+}
+
 const columns = computed<DataTableColumn<GradebookRow>[]>(() => {
   const tasks = gradebook.value?.tasks ?? []
   return [
     {
       title: "排名",
       key: "rank",
-      width: 66,
+      width: 60,
       fixed: "left",
     },
     {
       title: "等级",
       key: "grade",
-      width: 66,
+      width: 60,
       fixed: "left",
       render: (row) =>
         h(
@@ -213,16 +227,12 @@ const columns = computed<DataTableColumn<GradebookRow>[]>(() => {
     {
       title: "学生",
       key: "username",
-      width: 140,
+      width: 80,
-      fixed: "left",
-      render: (row) =>
-        h(NText, { title: row.username }, { default: () => row.username }),
-    },
-    {
-      title: "班级",
-      key: "classname",
-      width: 90,
       fixed: "left",
+      render: (row) => {
+        const studentName = displayGradebookStudentName(row)
+        return h(NText, { title: studentName }, { default: () => studentName })
+      },
     },
     ...tasks.map((task) => ({
       title: () => renderTaskHeader(task),
@@ -271,6 +281,7 @@ const columns = computed<DataTableColumn<GradebookRow>[]>(() => {
       key: "missing_task_count",
       width: 70,
       fixed: "right",
+      render: (row) => renderMissingCount(row.missing_task_count),
     },
   ]
 })
@@ -334,24 +345,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.gradebook-page {
-  height: 100%;
-  min-width: 0;
-  box-sizing: border-box;
-  padding: 10px 10px 10px 0;
-  overflow: hidden;
-}
-
-.toolbar,
-.summary {
-  flex-shrink: 0;
-}
-
-.filters {
-  min-width: 0;
-  flex-wrap: wrap;
-}
-
 .class-select {
   width: 150px;
 }
@@ -364,11 +357,6 @@ onMounted(async () => {
   width: 160px;
 }
 
-.gradebook-table {
-  flex: 1;
-  min-height: 0;
-}
-
 .task-header {
   min-width: 0;
   line-height: 1.2;

src/pages/Showcase.vue

@@ -1,36 +1,38 @@
 <template>
   <main class="showcase">
-    <header class="header">
+    <n-flex justify="space-between" align="flex-end" style="margin-bottom: 32px;">
       <div>
-        <n-h2 class="title">创意工坊</n-h2>
+        <n-h2 style="margin: 0 0 4px;">创意工坊</n-h2>
         <n-text depth="3">优秀作品展示</n-text>
       </div>
-    </header>
+    </n-flex>
 
     <n-spin :show="loading">
       <n-empty
         v-if="!loading && awards.length === 0"
         description="暂无展示作品"
-        class="empty"
+        style="margin-top: 72px;"
       />
 
       <section
         v-for="section in awards"
         :key="section.id"
-        class="award-section"
+        style="margin-bottom: 48px;"
       >
-        <div class="section-header">
+        <n-flex vertical :size="4" style="margin-bottom: 16px;">
-          <n-h3 class="section-title">{{ section.name }}</n-h3>
+          <n-h3 style="margin: 0;">{{ section.name }}</n-h3>
-          <n-text v-if="section.description" depth="3" class="section-desc">
+          <n-text v-if="section.description" depth="3" style="font-size: 13px;">
             {{ section.description }}
           </n-text>
-        </div>
+        </n-flex>
 
         <div class="card-grid">
-          <article
+          <n-card
             v-for="item in section.items"
             :key="item.submission_id"
             class="work-card"
+            content-style="padding: 0;"
+            hoverable
             @click="openDetail(item.submission_id)"
           >
             <div class="card-preview">
@@ -44,23 +46,31 @@
             </div>
             <div class="card-info">
               <n-flex justify="space-between" align="center" :wrap="false">
-                <n-text strong class="username">{{ item.username }}</n-text>
+                <n-ellipsis style="font-size: 13px; font-weight: 600; min-width: 0; flex: 1;">
-                <n-flex align="center" :wrap="false" class="metric-row">
+                  {{ item.username }}
-                  <span class="metric">
+                </n-ellipsis>
+                <n-flex align="center" :wrap="false" :size="8" style="flex-shrink: 0;">
+                  <n-flex align="center" :size="3">
                     <Icon icon="lucide:star" :width="13" />
-                    {{ item.score.toFixed(1) }}
+                    <n-text style="font-size: 12px; color: #666;">
-                  </span>
+                      {{ item.score.toFixed(1) }}
-                  <span class="metric">
+                    </n-text>
+                  </n-flex>
+                  <n-flex align="center" :size="3">
                     <Icon icon="lucide:eye" :width="13" />
-                    {{ item.view_count }}
+                    <n-text style="font-size: 12px; color: #666;">
-                  </span>
+                      {{ item.view_count }}
+                    </n-text>
+                  </n-flex>
                 </n-flex>
               </n-flex>
-              <n-text depth="3" class="task-title">
+              <n-ellipsis
+                style="display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: #888;"
+              >
                 {{ item.task_title }}
-              </n-text>
+              </n-ellipsis>
             </div>
-          </article>
+          </n-card>
         </div>
       </section>
     </n-spin>
@@ -106,40 +116,6 @@ onMounted(init)
   padding: 32px 20px 48px;
 }
 
-.header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-bottom: 32px;
-}
-
-.title {
-  margin: 0 0 4px;
-}
-
-.empty {
-  margin-top: 72px;
-}
-
-.award-section {
-  margin-bottom: 48px;
-}
-
-.section-header {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-bottom: 16px;
-}
-
-.section-title {
-  margin: 0;
-}
-
-.section-desc {
-  font-size: 13px;
-}
-
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
@@ -148,19 +124,11 @@ onMounted(init)
 
 .work-card {
   overflow: hidden;
-  border: 1px solid #e6e6e6;
-  border-radius: 8px;
-  background: #fff;
   cursor: pointer;
-  transition:
+  transition: transform 0.2s ease;
-    box-shadow 0.2s ease,
-    transform 0.2s ease,
-    border-color 0.2s ease;
 }
 
 .work-card:hover {
-  border-color: #c9dcff;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
   transform: translateY(-2px);
 }
 
@@ -190,46 +158,4 @@ onMounted(init)
   padding: 10px 12px;
   border-top: 1px solid #f0f0f0;
 }
-
-.username {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 13px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.metric-row {
-  flex-shrink: 0;
-  gap: 8px;
-}
-
-.metric {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  color: #666;
-  font-size: 12px;
-  line-height: 1;
-}
-
-.task-title {
-  display: block;
-  margin-top: 4px;
-  overflow: hidden;
-  font-size: 12px;
-  line-height: 1.4;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media (max-width: 640px) {
-  .showcase {
-    padding: 24px 12px 36px;
-  }
-
-  .card-grid {
-    grid-template-columns: 1fr;
-  }
-}
 </style>

src/pages/ShowcaseDetail.vue

@@ -2,22 +2,26 @@
   <main v-if="detail" class="detail-layout">
     <section class="preview-panel">
       <div class="back-bar">
-        <n-button text @click="router.push({ name: 'showcase' })">
+        <n-button text @click="router.back()">
           <template #icon>
             <Icon icon="lucide:arrow-left" />
           </template>
           返回创意工坊
         </n-button>
       </div>
-      <iframe ref="iframe" class="preview-iframe" sandbox="allow-scripts" />
+      <iframe
+        v-if="detailSrcdoc"
+        :srcdoc="detailSrcdoc"
+        class="preview-iframe"
+        sandbox="allow-scripts"
+      />
     </section>
 
     <aside class="info-panel">
-      <div class="meta">
+      <n-flex vertical :size="0">
-        <n-h3 class="detail-title">{{ detail.task_title }}</n-h3>
+        <n-h3 style="margin: 0 0 4px;">{{ detail.task_title }}</n-h3>
         <n-text depth="3">{{ detail.username }}</n-text>
-
+        <n-flex wrap :size="8" style="margin-top: 12px;">
-        <n-flex class="award-row" wrap>
           <n-tag
             v-for="award in detail.awards"
             :key="award"
@@ -27,18 +31,21 @@
             {{ award }}
           </n-tag>
         </n-flex>
-
+        <n-flex :size="18" style="margin-top: 14px;">
-        <div class="stat-row">
+          <n-flex align="center" :size="6">
-          <div class="stat-item">
             <Icon icon="lucide:star" :width="16" />
-            <span>{{ detail.score.toFixed(1) }}</span>
+            <n-text strong style="font-size: 14px;">
-          </div>
+              {{ detail.score.toFixed(1) }}
-          <div class="stat-item">
+            </n-text>
+          </n-flex>
+          <n-flex align="center" :size="6">
             <Icon icon="lucide:eye" :width="16" />
-            <span>{{ detail.view_count }}</span>
+            <n-text strong style="font-size: 14px;">
-          </div>
+              {{ detail.view_count }}
-        </div>
+            </n-text>
-      </div>
+          </n-flex>
+        </n-flex>
+      </n-flex>
 
       <n-divider v-if="detail.has_prompt_chain" />
 
@@ -48,45 +55,66 @@
       >
         <n-collapse-item title="创作过程" name="chain">
           <template #header-extra>
-            <n-text depth="3" class="collapse-extra">点击展开</n-text>
+            <n-text depth="3" style="font-size: 12px;">点击展开</n-text>
           </template>
           <n-spin :show="chainLoading">
             <n-empty
               v-if="!chainLoading && rounds.length === 0"
               description="暂无记录"
             />
-            <div v-else class="chain-layout">
+            <n-flex v-else vertical :size="12">
-              <div class="round-list">
+              <n-scrollbar style="max-height: 260px;">
-                <button
+                <n-flex vertical :size="8" style="padding-right: 4px;">
-                  v-for="(round, i) in rounds"
+                  <n-card
-                  :key="i"
+                    v-for="(round, i) in rounds"
-                  class="round-item"
+                    :key="i"
-                  :class="{ active: selectedRound === i }"
+                    size="small"
-                  type="button"
+                    content-style="padding: 8px;"
-                  @click="selectedRound = i"
+                    :style="{
-                >
+                      cursor: 'pointer',
-                  <span class="round-index">{{ i + 1 }}</span>
+                      borderColor: selectedRound === i ? '#2080f0' : undefined,
-                  <span class="round-content">
+                      background: selectedRound === i ? '#e8f0fe' : undefined,
-                    <span class="round-text">{{ round.question }}</span>
+                    }"
-                    <span class="round-tags">
+                    @click="selectedRound = i"
-                      <span class="tag-source">
+                  >
-                        {{ round.source === "conversation" ? "对话" : "手动" }}
+                    <n-flex align="flex-start" :size="8">
-                      </span>
+                      <n-avatar
-                      <span
+                        round
-                        v-if="round.prompt_level"
+                        :size="20"
-                        class="tag-level"
+                        :color="selectedRound === i ? '#2080f0' : '#9db7e8'"
-                        :style="{ color: levelColors[round.prompt_level] }"
+                        style="font-size: 11px; font-weight: 700; flex-shrink: 0;"
                       >
-                        L{{ round.prompt_level }}
+                        {{ i + 1 }}
-                      </span>
+                      </n-avatar>
-                    </span>
+                      <n-flex vertical :size="4" style="min-width: 0; flex: 1;">
-                  </span>
+                        <n-text style="font-size: 12px; line-height: 1.5;">
-                </button>
+                          {{ round.question }}
-              </div>
+                        </n-text>
-              <div class="round-preview">
+                        <n-flex :size="5">
-                <div class="round-preview-label">
+                          <n-tag size="small" style="font-size: 10px;">
+                            {{ round.source === "conversation" ? "对话" : "手动" }}
+                          </n-tag>
+                          <n-text
+                            v-if="round.prompt_level"
+                            :style="{
+                              color: levelColors[round.prompt_level],
+                              fontSize: '11px',
+                              fontWeight: 700,
+                            }"
+                          >
+                            L{{ round.prompt_level }}
+                          </n-text>
+                        </n-flex>
+                      </n-flex>
+                    </n-flex>
+                  </n-card>
+                </n-flex>
+              </n-scrollbar>
+
+              <n-flex vertical :size="8">
+                <n-text strong style="font-size: 12px; color: #555;">
                   第 {{ selectedRound + 1 }} 轮效果
-                </div>
+                </n-text>
                 <iframe
                   v-if="selectedRoundSrcdoc"
                   :key="selectedRound"
@@ -94,33 +122,41 @@
                   sandbox="allow-scripts"
                   class="round-iframe"
                 />
-                <n-empty
+                <n-flex
                   v-else
-                  description="该轮无网页代码"
+                  justify="center"
-                  class="round-empty"
+                  align="center"
-                />
+                  style="min-height: 240px;"
-              </div>
+                >
-            </div>
+                  <n-empty description="该轮无网页代码" />
+                </n-flex>
+              </n-flex>
+            </n-flex>
           </n-spin>
         </n-collapse-item>
       </n-collapse>
     </aside>
   </main>
 
-  <div v-else-if="notFound" class="state">
+  <n-flex
+    v-else-if="notFound"
+    justify="center"
+    align="center"
+    style="min-height: 100vh; padding: 40px;"
+  >
     <n-empty description="作品不存在" />
-  </div>
+  </n-flex>
 
-  <div v-else class="state">
+  <n-flex v-else justify="center" align="center" style="min-height: 100vh;">
     <n-spin />
-  </div>
+  </n-flex>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue"
+import { computed, onMounted, ref } from "vue"
 import { useRouter } from "vue-router"
 import { Icon } from "@iconify/vue"
-import { Showcase } from "../api"
+import { Showcase, Submission } from "../api"
 import type { PromptRound, ShowcaseDetail } from "../utils/type"
 
 const props = defineProps<{
@@ -128,7 +164,6 @@ const props = defineProps<{
 }>()
 
 const router = useRouter()
-const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
 const detail = ref<ShowcaseDetail | null>(null)
 const notFound = ref(false)
 const rounds = ref<PromptRound[]>([])
@@ -145,6 +180,11 @@ const levelColors: Record<number, string> = {
   6: "#c94f4f",
 }
 
+const detailSrcdoc = computed(() => {
+  if (!detail.value) return null
+  return buildDetailHtml(detail.value)
+})
+
 const selectedRoundSrcdoc = computed(() => {
   const round = rounds.value[selectedRound.value]
   if (!round?.html) return null
@@ -159,15 +199,6 @@ function buildDetailHtml(d: ShowcaseDetail) {
   return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/normalize.min.css" />${css}</head><body>${d.html ?? ""}${js}</body></html>`
 }
 
-function renderPreview() {
-  if (!iframe.value || !detail.value) return
-  const doc = iframe.value.contentDocument
-  if (!doc) return
-  doc.open()
-  doc.write(buildDetailHtml(detail.value))
-  doc.close()
-}
-
 async function loadChain() {
   if (chainLoaded.value) return
   chainLoading.value = true
@@ -190,20 +221,12 @@ function onCollapseChange(
 async function init() {
   try {
     detail.value = await Showcase.getDetail(props.id)
-    await nextTick()
+    void Submission.incrementView(props.id)
-    renderPreview()
   } catch {
     notFound.value = true
   }
 }
 
-watch(
-  () => detail.value,
-  (value) => {
-    if (value) renderPreview()
-  },
-)
-
 onMounted(init)
 </script>
 
@@ -242,138 +265,6 @@ onMounted(init)
   overflow-y: auto;
 }
 
-.meta {
-  display: flex;
-  flex-direction: column;
-}
-
-.detail-title {
-  margin: 0 0 4px;
-}
-
-.award-row {
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.stat-row {
-  display: flex;
-  gap: 18px;
-  margin-top: 14px;
-}
-
-.stat-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: #333;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.collapse-extra {
-  font-size: 12px;
-}
-
-.chain-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 12px;
-}
-
-.round-list {
-  display: flex;
-  max-height: 260px;
-  flex-direction: column;
-  gap: 8px;
-  overflow-y: auto;
-}
-
-.round-item {
-  display: flex;
-  width: 100%;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  background: #f9fafb;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  text-align: left;
-  transition:
-    background 0.15s ease,
-    border-color 0.15s ease;
-}
-
-.round-item.active {
-  border-color: #2080f0;
-  background: #e8f0fe;
-}
-
-.round-index {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: #9db7e8;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.round-item.active .round-index {
-  background: #2080f0;
-}
-
-.round-content {
-  min-width: 0;
-}
-
-.round-text {
-  display: block;
-  color: #333;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.round-tags {
-  display: flex;
-  gap: 5px;
-  margin-top: 5px;
-}
-
-.tag-source {
-  border-radius: 4px;
-  background: #eef1f4;
-  color: #666;
-  font-size: 10px;
-  line-height: 1.5;
-  padding: 1px 5px;
-}
-
-.tag-level {
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.round-preview {
-  display: flex;
-  min-height: 260px;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.round-preview-label {
-  color: #555;
-  font-size: 12px;
-  font-weight: 700;
-}
-
 .round-iframe {
   min-height: 240px;
   flex: 1;
@@ -382,18 +273,6 @@ onMounted(init)
   background: #fff;
 }
 
-.round-empty {
-  margin: auto;
-}
-
-.state {
-  display: flex;
-  min-height: 100vh;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-}
-
 @media (max-width: 760px) {
   .detail-layout {
     height: auto;

src/pages/ShowcaseManage.vue

@@ -1,6 +1,11 @@
 <template>
-  <n-flex class="manage-page" :wrap="false">
+  <n-layout has-sider style="height: 100%;">
-    <aside class="award-panel">
+    <n-layout-sider
+      :width="260"
+      bordered
+      content-style="overflow: auto; height: 100%;"
+      style="background: #fafafa;"
+    >
       <n-flex class="panel-header" justify="space-between" align="center">
         <n-text strong>奖项</n-text>
         <n-button size="small" secondary title="新建奖项" @click="startCreate">
@@ -15,7 +20,7 @@
           v-if="!awardsLoading && awards.length === 0"
           description="暂无奖项"
           size="small"
-          class="award-empty"
+          style="margin-top: 40px;"
         />
         <button
           v-for="award in awards"
@@ -27,21 +32,23 @@
           ]"
           @click="selectAward(award)"
         >
-          <span class="award-name">{{ award.name }}</span>
+          <n-ellipsis style="flex: 1; min-width: 0; font-size: 14px; font-weight: 500;">
-          <span class="award-meta">
+            {{ award.name }}
+          </n-ellipsis>
+          <n-flex align="center" :size="6" style="flex-shrink: 0; color: #777; font-size: 12px;">
             <n-tag v-if="!award.is_active" size="small">停用</n-tag>
             <span>{{ award.item_count }} 件</span>
-          </span>
+          </n-flex>
         </button>
       </n-spin>
-    </aside>
+    </n-layout-sider>
 
-    <section class="detail-panel">
+    <n-layout content-style="padding: 12px; overflow: auto; height: 100%; box-sizing: border-box;">
       <n-form
         :model="awardDraft"
         label-placement="left"
         label-width="82"
-        class="award-form"
+        style="max-width: 1100px;"
       >
         <n-grid :cols="4" :x-gap="12" :y-gap="8" responsive="screen">
           <n-form-item-gi :span="2" label="名称">
@@ -51,7 +58,7 @@
             <n-input-number
               v-model:value="awardDraft.sort_order"
               :show-button="false"
-              class="number-input"
+              style="width: 120px;"
             />
           </n-form-item-gi>
           <n-form-item-gi label="启用">
@@ -70,7 +77,7 @@
             />
           </n-form-item-gi>
           <n-form-item-gi>
-            <n-flex justify="end" class="form-actions">
+            <n-flex justify="end" style="width: 100%;">
               <n-button
                 type="primary"
                 :disabled="!canSaveAward"
@@ -100,7 +107,7 @@
 
       <n-divider />
 
-      <n-flex class="section-header" justify="space-between" align="center">
+      <n-flex justify="space-between" align="center" style="margin-bottom: 10px;">
         <n-text strong>已授奖作品</n-text>
         <n-flex align="center">
           <n-button
@@ -136,16 +143,16 @@
         :data="awardItems"
         :loading="itemsLoading"
         :row-key="(row: AwardItemManageOut) => row.id"
-        class="items-table"
+        style="max-width: 1100px;"
       />
-    </section>
+    </n-layout>
-  </n-flex>
+  </n-layout>
 
   <n-modal
     v-model:show="addWorkModalVisible"
     preset="card"
     title="添加作品"
-    class="add-work-modal"
+    style="width: min(640px, calc(100vw - 32px));"
   >
     <n-flex vertical :size="12">
       <n-input-group>
@@ -172,7 +179,7 @@
         {{ lookupError }}
       </n-alert>
 
-      <div v-if="submissionCandidate" class="candidate-panel">
+      <n-flex v-if="submissionCandidate" vertical :size="12">
         <n-descriptions :column="2" size="small" bordered>
           <n-descriptions-item label="提交者">
             {{ submissionCandidate.username }}
@@ -209,7 +216,7 @@
             </n-tag>
           </n-descriptions-item>
         </n-descriptions>
-        <n-flex justify="end" class="candidate-actions">
+        <n-flex justify="end" style="width: 100%;">
           <n-button secondary @click="clearSubmissionLookup">清空</n-button>
           <n-button
             type="primary"
@@ -226,7 +233,7 @@
             {{ candidateAlreadyAwarded ? "已添加" : "添加到奖项" }}
           </n-button>
         </n-flex>
-      </div>
+      </n-flex>
     </n-flex>
   </n-modal>
 </template>
@@ -311,7 +318,7 @@ const itemColumns: DataTableColumn<AwardItemManageOut>[] = [
   {
     title: "提交者",
     key: "username",
-    width: 92,
+    width: 180,
   },
   {
     title: "任务",
@@ -553,21 +560,6 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.manage-page {
-  height: 100%;
-  min-width: 0;
-}
-
-.award-panel {
-  width: 260px;
-  min-width: 260px;
-  height: 100%;
-  box-sizing: border-box;
-  overflow: auto;
-  border-right: 1px solid #efeff5;
-  background: #fafafa;
-}
-
 .panel-header {
   position: sticky;
   top: 0;
@@ -577,10 +569,6 @@ onMounted(async () => {
   background: #fafafa;
 }
 
-.award-empty {
-  margin-top: 40px;
-}
-
 .award-row {
   display: flex;
   width: 100%;
@@ -606,66 +594,6 @@ onMounted(async () => {
   color: #18a058;
 }
 
-.award-name {
-  min-width: 0;
-  overflow: hidden;
-  font-size: 14px;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.award-meta {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: 6px;
-  color: #777;
-  font-size: 12px;
-}
-
-.detail-panel {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  box-sizing: border-box;
-  overflow: auto;
-  padding: 12px;
-}
-
-.award-form {
-  max-width: 1100px;
-}
-
-.number-input {
-  width: 120px;
-}
-
-.form-actions {
-  width: 100%;
-}
-
-.section-header {
-  margin-bottom: 10px;
-}
-
-.items-table {
-  max-width: 1100px;
-}
-
-.candidate-panel {
-  display: grid;
-  gap: 12px;
-}
-
-.candidate-actions {
-  width: 100%;
-}
-
-:global(.add-work-modal) {
-  width: min(640px, calc(100vw - 32px));
-}
-
 :deep(.table-number-input) {
   width: 76px;
 }

src/pages/Submission.vue

@@ -2,6 +2,7 @@
 import { onMounted, useTemplateRef } from "vue"
 import { Submission } from "../api"
 import type { SubmissionAll } from "../utils/type"
+import { buildPreviewDocument } from "../utils/previewDocument"
 
 interface Props {
   id: string
@@ -18,20 +19,13 @@ async function init() {
   const doc = iframe.value.contentDocument
   if (doc) {
     doc.open()
-    doc.write(`<!DOCTYPE html>
+    doc.write(
-<html lang="zh-Hans-CN">
+      buildPreviewDocument({
-  <head>
+        html: submission.html,
-    <meta charset="UTF-8" />
+        css: submission.css,
-    <title>预览</title>
+        js: submission.js,
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      }),
-    <style>${submission.css}</style>
+    )
-    <link rel="stylesheet" href="/normalize.min.css" />
-  </head>
-  <body>
-    ${submission.html}
-    <script>${submission.js}<\/script>
-  </body>
-</html>`)
     doc.close()
   }
 }

src/utils/gradebook.ts

@@ -0,0 +1,12 @@
+export interface GradebookStudentIdentity {
+  username: string
+  classname: string
+}
+
+export function displayGradebookStudentName(student: GradebookStudentIdentity) {
+  const generatedPrefix = `web${student.classname}`
+  if (!student.classname || !student.username.startsWith(generatedPrefix)) {
+    return student.username
+  }
+  return student.username.slice(generatedPrefix.length)
+}

src/utils/previewDocument.ts

@@ -0,0 +1,29 @@
+interface PreviewDocumentOptions {
+  html: string
+  css: string
+  js: string
+  assetBaseUrl?: string
+}
+
+export function buildPreviewDocument({
+  html,
+  css,
+  js,
+  assetBaseUrl,
+}: PreviewDocumentOptions) {
+  return `<!DOCTYPE html>
+<html lang="zh-Hans-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>预览</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    ${assetBaseUrl ? `<base href="${assetBaseUrl}">` : ""}
+    <style>${css}</style>
+    <link rel="stylesheet" href="/normalize.min.css" />
+  </head>
+  <body>
+    ${html}
+    <script>${js}<\/script>
+  </body>
+</html>`
+}

src/utils/type.ts

@@ -12,6 +12,19 @@ export interface PromptMessage {
   created: string
 }
 
+export interface PromptHistoryItem {
+  user_message_id: number
+  assistant_message_id: number
+  submission_id: string | null
+  source: string
+  prompt: string
+  prompt_level: number | null
+  code_html: string | null
+  code_css: string | null
+  code_js: string | null
+  created: string
+}
+
 export enum Role {
   Super = "super",
   Admin = "admin",
@@ -56,6 +69,7 @@ export interface ChallengeSlim {
   pass_score: number | null
   submitted: boolean
   is_public: boolean
+  author_name: string | null
 }
 
 export interface ChallengeIn {