feat: “我的提交”和“全部提交”拆成两个页面

- 学生的“我的提交”（MySubmissions）：左边按教程 / 挑战列出交过的任务，右边看每一次交的版本，标出计入成绩的那一版（分数最高的一次）；可以看提示词、放回编辑器、删除这一版 - 超管的“全部提交”：按学生、类型、分区筛选，按时间或得分排序；点一行在右边打开批改面板，批改面板加了超管专用的“删除这一版” - 删掉只给旧提交页用的展开子表、看代码弹框、任务标题组件和全局 submission store，编辑器预览里随之不用的打分、看代码、复制链接一起去掉 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-27 11:46:55 +08:00
1 parent 726906e3f6
commit 6ad9be2b30
@@ -2,9 +2,6 @@
  <n-flex align="center" justify="space-between" class="title">
    <div>
      <slot name="title"><n-text class="titleText">预览</n-text></slot>
-      <n-text v-if="!!submission.id" depth="3">
-        ({{ submission.view_count || 0 }})
-      </n-text>
    </div>
    <n-flex>
      <n-tooltip>
@@ -19,26 +16,6 @@
      </n-tooltip>
      <n-button quaternary @click="download" :disabled="!showDL">下载</n-button>
      <n-button quaternary @click="open">全屏</n-button>
-      <n-button quaternary v-if="props.clearable" @click="clear">清空</n-button>
-      <n-button
-        quaternary
-        v-if="props.showCodeButton"
-        @click="emits('showCode')"
-      >
-        代码
-      </n-button>
-      <n-button quaternary v-if="props.submissionId" @click="copyLink">
-        链接
-      </n-button>
-      <n-flex v-if="!!submission.id" align="center">
-        <n-button quaternary @click="emits('showCode')">代码</n-button>
-        <n-popover v-if="submission.my_score === 0">
-          <template #trigger>
-            <n-button secondary type="primary">打分</n-button>
-          </template>
-          <n-rate :size="30" @update:value="updateScore" />
-        </n-popover>
-      </n-flex>
    </n-flex>
  </n-flex>
  <div class="iframe-wrapper" :style="iframeWrapperStyle">
@@ -54,12 +31,7 @@
 <script lang="ts" setup>
 import { watchDebounced } from "@vueuse/core"
 import { computed, onMounted, onUnmounted, ref, useTemplateRef } from "vue"
-import { useRouter } from "vue-router"
-import { Submission } from "../../api"
-import { submission } from "../../store/submission"
-import { useMessage } from "naive-ui"
 import { Icon } from "../../icons"
-import copy from "copy-text-to-clipboard"
 import {
  buildPreviewDocument,
  PREVIEW_SANDBOX,
@@ -75,15 +47,11 @@ interface Props {
  css: string
  js: string
  assetBaseUrl?: string
-  submissionId?: string
-  showCodeButton?: boolean
-  clearable?: boolean
  // 自己的编辑器传当前任务 id：代码里的 localStorage 按“用户 + 任务”存下来，刷新后还在
  storageTaskId?: number
 }

 const props = defineProps<Props>()
-const emits = defineEmits(["afterScore", "showCode", "clear"])

 type Layout = "desktop" | "mobile" | "tablet"
 const layouts: Layout[] = ["desktop", "mobile", "tablet"]
@@ -121,9 +89,6 @@ function cycleLayout() {
  layoutIndex.value = (layoutIndex.value + 1) % layouts.length
 }

-const message = useMessage()
-const router = useRouter()
-
 const showDL = computed(() => props.html || props.css || props.js)
 const previewContent = ref("")

@@ -162,48 +127,21 @@ function download() {
 }

 function open() {
-  if (props.submissionId) {
-    const data = router.resolve({
-      name: "submission",
-      params: { id: props.submissionId },
-    })
-    window.open(data.href, "_blank")
-  } else {
-    const newTab = window.open("about:blank", "_blank")
-    if (!newTab) return
-    // 新标签页和本站同源，代码要放进带 sandbox 的 iframe 里跑
-    const doc = newTab.document
-    doc.open()
-    doc.write(
-      `<!DOCTYPE html><title>预览</title><style>html,body,iframe{margin:0;width:100%;height:100%;border:0;display:block}</style><iframe sandbox="${PREVIEW_SANDBOX}"></iframe>`,
-    )
-    doc.close()
-    const tabFrame = doc.querySelector("iframe")!
-    // 全屏页里的写入也存到同一个地方
-    listenPreviewStorage(newTab, () => tabFrame, storageScope)
-    tabFrame.srcdoc = getContent()
-  }
+  const newTab = window.open("about:blank", "_blank")
+  if (!newTab) return
+  // 新标签页和本站同源，代码要放进带 sandbox 的 iframe 里跑
+  const doc = newTab.document
+  doc.open()
+  doc.write(
+    `<!DOCTYPE html><title>预览</title><style>html,body,iframe{margin:0;width:100%;height:100%;border:0;display:block}</style><iframe sandbox="${PREVIEW_SANDBOX}"></iframe>`,
+  )
+  doc.close()
+  const tabFrame = doc.querySelector("iframe")!
+  // 全屏页里的写入也存到同一个地方
+  listenPreviewStorage(newTab, () => tabFrame, storageScope)
+  tabFrame.srcdoc = getContent()
 }

-function clear() {
-  emits("clear")
-}
-
-function copyLink() {
-  copy(`${document.location.origin}/submission/${props.submissionId}`)
-  message.success("该提交的链接已复制")
-}
-
-async function updateScore(score: number) {
-  try {
-    const res = await Submission.updateScore(submission.value.id, score)
-    message.success(res.message)
-    submission.value.my_score = score
-    emits("afterScore")
-  } catch (err: any) {
-    message.error(err.response.data.detail)
-  }
-}

 watchDebounced(
  () => [props.html, props.css, props.js, props.assetBaseUrl],
@@ -121,11 +121,7 @@ const userMenu = [

 async function clickUserMenu(key: string) {
  if (key === "submissions") {
-    router.push({
-      name: "submissions",
-      params: { page: 1 },
-      query: { username: user.username },
-    })
+    router.push({ name: "submissions" })
  } else if (key === "logout") {
    await logout()
    // 留在需要登录或特定角色的页面上没有意义
@@ -111,6 +111,12 @@
            </n-dropdown>
          </n-flex>
          <div class="muted hint">P 键：加入 / 取消课上展示</div>
+          <n-popconfirm v-if="canDelete" @positive-click="remove">
+            <template #trigger>
+              <n-button size="small" quaternary type="error" class="delete">删除这一版</n-button>
+            </template>
+            删除后找不回来，评分和作品展里的这一版也会一起删掉；它对应的那轮 AI 对话也会删掉。
+          </n-popconfirm>
        </section>

        <section>
@@ -155,6 +161,8 @@ const props = defineProps<{
  canWiden?: boolean
  // 作品墙里用：能不能切到上一个 / 下一个学生
  nav?: { prev: boolean; next: boolean }
+  // 全部提交页（超管）：能删除这一版
+  canDelete?: boolean
 }>()
 const emit = defineEmits<{
  prev: []
@@ -163,6 +171,7 @@ const emit = defineEmits<{
  "toggle-wide": []
  // 让作品墙同步更新这张卡片
  changed: [patch: { id: string; my_score?: number; score?: number; flag?: FlagType }]
+  deleted: [id: string]
 }>()

 const message = useMessage()
@@ -255,6 +264,19 @@ async function addToAward(awardId: number) {
  }
 }

+async function remove() {
+  if (!sub.value) return
+  const id = sub.value.id
+  try {
+    await Submission.delete(id)
+  } catch (err: any) {
+    message.error(err.response?.data?.detail ?? "删除失败")
+    return
+  }
+  message.success("已删除")
+  emit("deleted", id)
+}
+
 function openFull() {
  if (sub.value) window.open(`/submission/${sub.value.id}`, "_blank")
 }
@@ -397,6 +419,10 @@ h4 {
  font-size: 13px;
 }

+.delete {
+  margin-top: 8px;
+}
+
 .rates {
  display: flex;
  gap: 6px;
@@ -1,42 +0,0 @@
-<template>
-  <n-modal
-    preset="card"
-    :show="show"
-    style="max-width: 60%"
-    @update:show="$emit('update:show', $event)"
-  >
-    <template #header>
-      <n-flex align="center">
-        <span>前端代码</span>
-        <n-button tertiary @click="$emit('copy-to-editor')"
-          >复制到编辑框</n-button
-        >
-      </n-flex>
-    </template>
-    <n-tabs animated type="segment">
-      <n-tab-pane name="html" tab="html">
-        <n-code :code="html" language="html" word-wrap />
-      </n-tab-pane>
-      <n-tab-pane name="css" tab="css">
-        <n-code :code="css" language="css" word-wrap />
-      </n-tab-pane>
-      <n-tab-pane v-if="!!js" name="js" tab="js">
-        <n-code :code="js" language="js" word-wrap />
-      </n-tab-pane>
-    </n-tabs>
-  </n-modal>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  show: boolean
-  html: string
-  css: string
-  js: string
-}>()
-
-defineEmits<{
-  "update:show": [value: boolean]
-  "copy-to-editor": []
-}>()
-</script>
@@ -1,126 +0,0 @@
-<template>
-  <n-spin v-if="loading" size="small" style="padding: 12px" />
-  <n-data-table
-    v-else-if="items"
-    :columns="subColumns"
-    :data="items"
-    size="small"
-    striped
-    :row-key="(r: SubmissionOut) => r.id"
-    :row-props="rowProps"
-    :row-class-name="rowClassName"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, h } from "vue"
-import {
-  NButton,
-  NDataTable,
-  NPopconfirm,
-  NSpin,
-  type DataTableColumn,
-} from "naive-ui"
-import type { SubmissionOut } from "../../utils/type"
-import { TASK_TYPE } from "../../utils/const"
-import { parseTime } from "../../utils/helper"
-import { user, roleSuper } from "../../store/user"
-import { submission } from "../../store/submission"
-
-const props = defineProps<{
-  row: SubmissionOut
-  items: SubmissionOut[] | undefined
-  loading: boolean
-}>()
-
-const emit = defineEmits<{
-  select: [id: string]
-  delete: [row: SubmissionOut, parentId: string]
-  "show-chain": [submissionId: string, username: string]
-}>()
-
-const isChallenge = computed(() => props.row.task_type === TASK_TYPE.Challenge)
-
-function rowProps(r: SubmissionOut) {
-  return {
-    style: { cursor: "pointer" },
-    onClick: () => emit("select", r.id),
-  }
-}
-
-function rowClassName(r: SubmissionOut) {
-  return submission.value.id === r.id ? "row-active" : ""
-}
-
-const subColumns = computed((): DataTableColumn<SubmissionOut>[] => [
-  {
-    title: "时间",
-    key: "created",
-    width: 160,
-    render: (r) => parseTime(r.created, "YYYY-MM-DD HH:mm:ss"),
-  },
-  {
-    title: "得分",
-    key: "score",
-    width: 80,
-    render: (r) => {
-      const myScore = r.my_score > 0 ? String(r.my_score) : "-"
-      const avgScore = r.score > 0 ? r.score.toFixed(2) : "-"
-      return h(
-        "div",
-        { style: { display: "flex", gap: "6px", alignItems: "baseline" } },
-        [
-          h("span", avgScore),
-          h("span", { style: { fontSize: "11px", color: "var(--wp-faint)" } }, myScore),
-        ],
-      )
-    },
-  },
-  {
-    title: "操作",
-    key: "actions",
-    width: isChallenge.value ? 110 : 60,
-    render: (r: SubmissionOut) =>
-      h("div", { style: { display: "flex", gap: "8px" } }, [
-        ...(isChallenge.value
-          ? [
-              h(
-                NButton,
-                {
-                  text: true,
-                  type: "primary",
-                  onClick: (e: Event) => {
-                    e.stopPropagation()
-                    emit("show-chain", r.id, r.username)
-                  },
-                },
-                () => "查看",
-              ),
-            ]
-          : []),
-        ...(r.username === user.username || roleSuper.value
-          ? [
-              h(
-                NPopconfirm,
-                { onPositiveClick: () => emit("delete", r, props.row.id) },
-                {
-                  trigger: () =>
-                    h(
-                      NButton,
-                      {
-                        text: true,
-                        type: "error",
-                        size: "small",
-                        onClick: (e: Event) => e.stopPropagation(),
-                      },
-                      () => "删除",
-                    ),
-                  default: () => "确定删除这次提交？",
-                },
-              ),
-            ]
-          : []),
-      ]),
-  } as DataTableColumn<SubmissionOut>,
-])
-</script>
@@ -1,37 +0,0 @@
-<template>
-  <n-flex>
-    <n-tag
-      size="small"
-      :bordered="false"
-      type="primary"
-      v-if="props.submission.task_type === 'tutorial'"
-    >
-      教程
-    </n-tag>
-    <n-tag
-      :bordered="false"
-      size="small"
-      type="error"
-      v-if="props.submission.task_type === 'challenge'"
-    >
-      挑战
-    </n-tag>
-    <n-button text @click="open">{{ props.submission.task_title }}</n-button>
-  </n-flex>
-</template>
-<script setup lang="ts">
-import { useRouter } from "vue-router"
-import type { SubmissionOut } from "../../utils/type"
-import { goHome } from "../../utils/helper"
-
-interface Props {
-  submission: SubmissionOut
-}
-
-const props = defineProps<Props>()
-
-const router = useRouter()
-function open() {
-  goHome(router, props.submission.task_type, props.submission.task_display)
-}
-</script>