feat: 改版阶段 3：老师按班级 × 任务批改，学生看本班同学作品

老师 - 新的“批改”页（教学默认页）：左边班级 + 任务列表和完成进度，中间作品墙（每人最新一版、未交 / 我未评 / 分数），右侧详情面板：各版本、提示词链、打分、加入课上展示、加入作品展；J/K 切换学生，1–5 打分，P 课上展示 - “开始讲评”全屏依次播放课上展示的作品；成绩册点分数打开同一个详情面板 - 四色标记和“一键清除全站标记”去掉，flag 只用 present（课上展示）；全部提交只给超管学生 - “同学作品”：只看本班、自己交过这道题才开放，打分前匿名（服务端不返回作者） - 学生的提交列表只有自己的；别人的提交和提示词链只有本班同学交过同一题、或进了作品展才能看 - 随机互评不再返回作者，打完分由 PUT /:id/score 返回服务端新增 routes/review.ts（/submission/review：options、progress、class、peers），查询走 slim 覆盖索引 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-27 00:10:18 +08:00
1 parent 9c6c01eba1
commit df3f842dac
@@ -0,0 +1,205 @@
+<template>
+  <n-drawer v-model:show="show" :width="600" placement="right">
+    <n-drawer-content title="同学作品" :native-scrollbar="false">
+      <n-spin :show="loading">
+        <n-result
+          v-if="data?.locked"
+          status="info"
+          title="交过这道题以后就能看到"
+          description="先完成自己的作品并提交，再来看看同学们是怎么做的。"
+          style="margin-top: 40px"
+        />
+        <template v-else-if="data">
+          <p class="hint">
+            本班同学在这道题上最新的作品。打分之前不显示是谁做的，打完分才显示。
+          </p>
+          <n-empty v-if="!data.items.length" description="还没有同学交这道题" />
+          <div class="grid">
+            <div v-for="w in data.items" :key="w.id" class="work">
+              <button class="thumb" title="点击放大看" @click="large = w">
+                <iframe
+                  :sandbox="PREVIEW_SANDBOX"
+                  :srcdoc="docOf(w)"
+                  loading="lazy"
+                  tabindex="-1"
+                ></iframe>
+              </button>
+              <div class="info">
+                <span :class="{ anon: !w.username }">{{ w.username ?? "匿名同学" }}</span>
+                <span v-if="w.my_score" class="mine">我给了 {{ w.my_score }} 分</span>
+              </div>
+              <div v-if="!w.my_score" class="rates">
+                <n-tooltip v-for="s in scores" :key="s.value">
+                  <template #trigger>
+                    <button class="rate" :disabled="rating === w.id" @click="rate(w, s.value)">
+                      {{ s.value }}
+                    </button>
+                  </template>
+                  {{ s.value }} 分：{{ s.label }}
+                </n-tooltip>
+              </div>
+            </div>
+          </div>
+        </template>
+      </n-spin>
+    </n-drawer-content>
+  </n-drawer>
+  <n-modal
+    :show="!!large"
+    preset="card"
+    :title="large?.username ?? '匿名同学的作品'"
+    style="width: 90vw; max-width: 1000px"
+    @update:show="(v: boolean) => !v && (large = null)"
+  >
+    <div v-if="large" class="large">
+      <iframe :sandbox="PREVIEW_SANDBOX" :srcdoc="docOf(large)"></iframe>
+    </div>
+  </n-modal>
+</template>
+<script lang="ts" setup>
+import { ref, watch } from "vue"
+import { useMessage } from "naive-ui"
+import { Review, Submission } from "../../api"
+import { buildPreviewDocument, PREVIEW_SANDBOX } from "../../utils/previewDocument"
+import type { PeerWork, PeerWorks } from "../../utils/type"
+
+const show = defineModel<boolean>("show", { required: true })
+const props = defineProps<{ taskId: number; assetBaseUrl?: string }>()
+const message = useMessage()
+
+const scores = [
+  { value: 1, label: "没完成题目要求" },
+  { value: 2, label: "完成了一小部分" },
+  { value: 3, label: "基本完成" },
+  { value: 4, label: "完成得不错" },
+  { value: 5, label: "完成且有自己的想法" },
+]
+
+const data = ref<PeerWorks | null>(null)
+const loading = ref(false)
+const rating = ref<string | null>(null)
+const large = ref<PeerWork | null>(null)
+
+const docOf = (w: PeerWork) =>
+  buildPreviewDocument({ html: w.html, css: w.css, js: w.js, assetBaseUrl: props.assetBaseUrl })
+
+watch(show, async (open) => {
+  if (!open || !props.taskId) return
+  loading.value = true
+  try {
+    data.value = await Review.peers(props.taskId)
+  } finally {
+    loading.value = false
+  }
+})
+
+async function rate(w: PeerWork, score: number) {
+  rating.value = w.id
+  try {
+    const res = await Submission.updateScore(w.id, score)
+    w.my_score = score
+    w.username = res.username ?? null
+  } catch (err: any) {
+    message.error(err.response?.data?.detail ?? "打分失败，请重试")
+  } finally {
+    rating.value = null
+  }
+}
+</script>
+<style scoped>
+.hint {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: var(--wp-muted);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.work {
+  border: 1px solid var(--wp-line);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--wp-surface);
+}
+
+.thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 150px;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--wp-line);
+  overflow: hidden;
+  background: #fff;
+  cursor: zoom-in;
+}
+
+.thumb iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 300%;
+  height: 300%;
+  border: 0;
+  transform: scale(0.3333);
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 10px 4px;
+  font-size: 13px;
+}
+
+.anon {
+  color: var(--wp-muted);
+}
+
+.mine {
+  color: var(--wp-brand);
+  font-size: 12px;
+}
+
+.rates {
+  display: flex;
+  gap: 6px;
+  padding: 4px 10px 10px;
+}
+
+.rate {
+  flex: 1;
+  padding: 4px 0;
+  border: 1px solid var(--wp-line);
+  border-radius: 6px;
+  background: var(--wp-surface);
+  color: var(--wp-ink);
+  font: 600 13px var(--wp-font-mono);
+  cursor: pointer;
+}
+
+.rate:hover:not(:disabled) {
+  border-color: var(--wp-brand);
+  background: var(--wp-brand-soft);
+  color: var(--wp-brand);
+}
+
+.large {
+  height: 70vh;
+  border: 1px solid var(--wp-line);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.large iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+</style>