feat: 重新设计作品展，点开能看大图、获奖和提示词

- 点作品不再跳到只有网页的全屏页，而是弹出大图：作者、题目、所获奖项、得分、浏览次数，
  有提示词的能看“是怎么问出来的”（作品展接口），← → 在同一奖项里切换
- 卡片缩略图改用 buildPreviewDocument，题目素材能加载；未评分的不显示星标
- 顶部加奖项跳转；标题和导航统一叫“作品展”
- 作品展接口返回 task_type（拼素材地址要用）

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

client/src/pages/Showcase.vue

@@ -1,167 +1,455 @@
 <template>
   <main class="showcase">
-    <n-flex justify="space-between" align="flex-end" style="margin-bottom: 32px;">
+    <header class="page-head">
       <div>
-        <n-h2 style="margin: 0 0 4px;">创意工坊</n-h2>
-        <n-text depth="3">优秀作品展示</n-text>
+        <h2>作品展</h2>
+        <p class="muted">老师从大家交的作品里挑出来的，点开能看大图和它是怎么问出来的</p>
       </div>
-    </n-flex>
+      <nav v-if="awards.length > 1" class="jump">
+        <a v-for="a in awards" :key="a.id" :href="`#award-${a.id}`" @click.prevent="jump(a.id)">
+          {{ a.name }}
+        </a>
+      </nav>
+    </header>
 
     <n-spin :show="loading">
       <n-empty
-        v-if="!loading && awards.length === 0"
-        description="暂无展示作品"
-        style="margin-top: 72px;"
+        v-if="!loading && !awards.length"
+        description="还没有展出的作品"
+        style="margin-top: 72px"
       />
 
-      <section
-        v-for="section in awards"
-        :key="section.id"
-        style="margin-bottom: 48px;"
-      >
-        <n-flex vertical :size="4" style="margin-bottom: 16px;">
-          <n-h3 style="margin: 0;">{{ section.name }}</n-h3>
-          <n-text v-if="section.description" depth="3" style="font-size: 13px;">
-            {{ section.description }}
-          </n-text>
-        </n-flex>
+      <section v-for="(section, si) in awards" :id="`award-${section.id}`" :key="section.id">
+        <div class="section-head">
+          <h3>{{ section.name }}</h3>
+          <span class="muted">{{ section.items.length }} 件</span>
+        </div>
+        <p v-if="section.description" class="desc">{{ section.description }}</p>
 
-        <div class="card-grid">
-          <n-card
-            v-for="item in section.items"
+        <div class="grid">
+          <button
+            v-for="(item, ii) in section.items"
             :key="item.submission_id"
-            class="work-card"
-            content-style="padding: 0;"
-            hoverable
-            @click="openDetail(item)"
+            class="card"
+            @click="open(si, ii)"
           >
-            <div class="card-preview">
+            <div class="thumb">
               <iframe
-                :srcdoc="buildSrcdoc(item)"
-                sandbox="allow-scripts"
+                :srcdoc="docOf(item)"
+                :sandbox="PREVIEW_SANDBOX"
                 loading="lazy"
                 scrolling="no"
-                class="preview-iframe"
-              />
-              <div class="preview-overlay" />
+                tabindex="-1"
+              ></iframe>
             </div>
-            <div class="card-info">
-              <n-flex justify="space-between" align="center" :wrap="false">
-                <n-ellipsis style="font-size: 13px; font-weight: 600; min-width: 0; flex: 1;">
-                  {{ item.username }}
-                </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" />
-                    <n-text style="font-size: 12px; color: var(--wp-muted);">
-                      {{ item.score.toFixed(1) }}
-                    </n-text>
-                  </n-flex>
-                  <n-flex align="center" :size="3">
-                    <Icon icon="lucide:eye" :width="13" />
-                    <n-text style="font-size: 12px; color: var(--wp-muted);">
-                      {{ item.view_count }}
-                    </n-text>
-                  </n-flex>
-                </n-flex>
-              </n-flex>
-              <n-ellipsis
-                style="display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--wp-muted);"
-              >
-                {{ item.task_title }}
-              </n-ellipsis>
+            <div class="cap">
+              <div class="who">
+                <b>{{ item.username }}</b>
+                <span v-if="item.score" class="score">
+                  <Icon icon="lucide:star" :width="12" />{{ item.score.toFixed(1) }}
+                </span>
+              </div>
+              <div class="task">{{ item.task_display }}. {{ item.task_title }}</div>
             </div>
-          </n-card>
+          </button>
         </div>
       </section>
     </n-spin>
   </main>
+
+  <n-modal
+    :show="!!current"
+    preset="card"
+    style="width: 94vw; max-width: 1280px"
+    :bordered="false"
+    @update:show="(v: boolean) => !v && (viewing = null)"
+  >
+    <template #header>
+      <div class="viewer-head">
+        <b>{{ current?.username }}</b>
+        <span class="muted">{{ current?.task_display }}. {{ current?.task_title }}</span>
+      </div>
+    </template>
+    <template #header-extra>
+      <n-flex v-if="viewing" align="center" :size="4" style="margin-right: 8px">
+        <span class="muted">
+          {{ viewing.item + 1 }} / {{ awards[viewing.section]?.items.length }}
+        </span>
+        <n-button size="small" quaternary :disabled="viewing.item === 0" @click="step(-1)">
+          <template #icon><Icon icon="lucide:arrow-left" /></template>
+        </n-button>
+        <n-button
+          size="small"
+          quaternary
+          :disabled="viewing.item >= (awards[viewing.section]?.items.length ?? 0) - 1"
+          @click="step(1)"
+        >
+          <template #icon><Icon icon="lucide:arrow-right" /></template>
+        </n-button>
+      </n-flex>
+    </template>
+
+    <div v-if="current" class="viewer">
+      <div class="big">
+        <iframe :key="current.submission_id" :srcdoc="docOf(current)" :sandbox="PREVIEW_SANDBOX"></iframe>
+      </div>
+      <aside class="info">
+        <div class="field">
+          <div class="label">获奖</div>
+          <div class="awards">
+            <span v-for="name in awardsOf(current.submission_id)" :key="name" class="award">
+              <Icon icon="lucide:award" :width="13" />{{ name }}
+            </span>
+          </div>
+        </div>
+        <div class="field">
+          <div class="label">得分</div>
+          <div v-if="current.score" class="mono">{{ current.score.toFixed(2) }}</div>
+          <div v-else class="muted">还没有评分</div>
+        </div>
+        <div class="field">
+          <div class="label">看过的次数</div>
+          <div class="mono">{{ current.view_count }}</div>
+        </div>
+        <n-flex vertical :size="8" class="actions">
+          <n-button v-if="current.has_prompt_chain" secondary @click="showChain = true">
+            <template #icon><Icon icon="lucide:sparkles" /></template>
+            看看是怎么问出来的
+          </n-button>
+          <n-button quaternary @click="openFull">
+            <template #icon><Icon icon="lucide:maximize-2" /></template>
+            全屏打开
+          </n-button>
+        </n-flex>
+        <div class="muted hint">← → 切换，Esc 关闭</div>
+      </aside>
+    </div>
+  </n-modal>
+
+  <ChainModal
+    v-if="current"
+    v-model:show="showChain"
+    :submission-id="current.submission_id"
+    :title="`${current.username} · ${current.task_title}`"
+    :asset-base-url="assetBase(current)"
+    from-showcase
+  />
 </template>
 
 <script setup lang="ts">
-import { storageShim } from "../utils/previewStorage"
-import { onMounted, ref } from "vue"
+import { computed, onMounted, onUnmounted, ref, watch } from "vue"
 import { useRouter } from "vue-router"
 import { Icon } from "../icons"
-import { Showcase } from "../api"
+import { Showcase, Submission } from "../api"
+import ChainModal from "../components/submissions/ChainModal.vue"
+import { buildPreviewDocument, PREVIEW_SANDBOX } from "../utils/previewDocument"
 import type { AwardSection, ShowcaseItem } from "../utils/type"
 
 const router = useRouter()
 const loading = ref(true)
 const awards = ref<AwardSection[]>([])
+// 正在看第几个奖项的第几件
+const viewing = ref<{ section: number; item: number } | null>(null)
+const showChain = ref(false)
 
-function buildSrcdoc(item: ShowcaseItem): string {
-  const css = item.css ? `<style>${item.css}</style>` : ""
-  const js = item.js ? `<script>${item.js}<\/script>` : ""
-  return `<!DOCTYPE html><html><head><meta charset="utf-8">${storageShim()}<meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/normalize.min.css" />${css}</head><body>${item.html ?? ""}${js}</body></html>`
+const current = computed(() =>
+  viewing.value ? (awards.value[viewing.value.section]?.items[viewing.value.item] ?? null) : null,
+)
+
+const assetBase = (item: ShowcaseItem) => `/media/tasks/${item.task_type}/${item.task_display}/`
+
+function docOf(item: ShowcaseItem) {
+  return buildPreviewDocument({
+    html: item.html ?? "",
+    css: item.css ?? "",
+    js: item.js ?? "",
+    assetBaseUrl: assetBase(item),
+  })
 }
 
-function openDetail(item: ShowcaseItem) {
-  const { href } = router.resolve({
-    name: "submission",
-    params: { id: item.submission_id },
-  })
+// 一件作品可能同时在几个奖项里
+function awardsOf(submissionId: string) {
+  return awards.value
+    .filter((a) => a.items.some((i) => i.submission_id === submissionId))
+    .map((a) => a.name)
+}
+
+function jump(id: number) {
+  document.getElementById(`award-${id}`)?.scrollIntoView({ behavior: "smooth", block: "start" })
+}
+
+function open(section: number, item: number) {
+  viewing.value = { section, item }
+}
+
+function step(d: number) {
+  const v = viewing.value
+  if (!v) return
+  const n = awards.value[v.section]?.items.length ?? 0
+  const item = v.item + d
+  if (item >= 0 && item < n) viewing.value = { section: v.section, item }
+}
+
+// 每打开一件记一次浏览
+const counted = new Set<string>()
+watch(current, (item) => {
+  if (!item || counted.has(item.submission_id)) return
+  counted.add(item.submission_id)
+  Submission.incrementView(item.submission_id)
+    .then(() => item.view_count++)
+    .catch(() => {})
+})
+
+function openFull() {
+  if (!current.value) return
+  const { href } = router.resolve({ name: "submission", params: { id: current.value.submission_id } })
   window.open(href, "_blank")
 }
 
-async function init() {
+function onKey(e: KeyboardEvent) {
+  if (!viewing.value || showChain.value) return
+  if (e.key === "ArrowLeft") step(-1)
+  else if (e.key === "ArrowRight") step(1)
+}
+
+onMounted(async () => {
+  window.addEventListener("keydown", onKey)
   try {
     awards.value = await Showcase.list()
   } finally {
     loading.value = false
   }
-}
-
-onMounted(init)
+})
+onUnmounted(() => window.removeEventListener("keydown", onKey))
 </script>
 
 <style scoped>
 .showcase {
   max-width: 1180px;
   margin: 0 auto;
-  padding: 32px 20px 48px;
+  padding: 28px 20px 48px;
 }
 
-.card-grid {
+.page-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px 24px;
+  margin-bottom: 24px;
+}
+
+h2 {
+  margin: 0 0 4px;
+  font-size: 22px;
+}
+
+.muted {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--wp-muted);
+}
+
+.page-head .muted {
+  margin: 0;
+  font-size: 13px;
+}
+
+.jump {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.jump a {
+  padding: 3px 10px;
+  border: 1px solid var(--wp-line);
+  border-radius: 999px;
+  font-size: 13px;
+  color: var(--wp-ink);
+  text-decoration: none;
+  background: var(--wp-surface);
+}
+
+.jump a:hover {
+  border-color: var(--wp-brand);
+  color: var(--wp-brand);
+}
+
+section {
+  margin-bottom: 40px;
+  scroll-margin-top: 16px;
+}
+
+.section-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+h3 {
+  margin: 0;
+  font-size: 17px;
+}
+
+.desc {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: var(--wp-muted);
+}
+
+.grid {
+  margin-top: 14px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 16px;
 }
 
-.work-card {
+.card {
+  padding: 0;
+  border: 1px solid var(--wp-line);
+  border-radius: 10px;
   overflow: hidden;
+  background: var(--wp-surface);
+  color: var(--wp-ink);
+  font: inherit;
+  text-align: left;
   cursor: pointer;
-  transition: transform 0.2s ease;
+  transition:
+    border-color 0.15s,
+    transform 0.15s;
 }
 
-.work-card:hover {
+.card:hover {
+  border-color: var(--wp-brand);
   transform: translateY(-2px);
 }
 
-.card-preview {
+.thumb {
   position: relative;
-  height: 160px;
+  aspect-ratio: 16 / 10;
   overflow: hidden;
-  background: var(--wp-paper);
+  border-bottom: 1px solid var(--wp-line);
 }
 
-.preview-iframe {
+/* 按 2 倍大小渲染再缩小 */
+.thumb iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 200%;
   height: 200%;
-  border: none;
+  border: 0;
   transform: scale(0.5);
-  transform-origin: top left;
+  transform-origin: 0 0;
   pointer-events: none;
 }
 
-.preview-overlay {
-  position: absolute;
-  inset: 0;
+.cap {
+  padding: 10px 12px 12px;
 }
 
-.card-info {
-  min-height: 72px;
-  padding: 10px 12px;
-  border-top: 1px solid var(--wp-line);
+.who {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.who b {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.score {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font: 12px var(--wp-font-mono);
+  color: var(--wp-warn);
+}
+
+.task {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--wp-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.viewer-head {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
+
+.viewer {
+  display: grid;
+  grid-template-columns: 1fr 230px;
+  gap: 16px;
+  height: 72vh;
+}
+
+.big {
+  display: flex;
+  border: 1px solid var(--wp-line);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.big iframe {
+  flex: 1;
+  border: 0;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.label {
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: var(--wp-muted);
+}
+
+.awards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.award {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  color: var(--wp-warn);
+  background: var(--wp-warn-soft);
+}
+
+.mono {
+  font: 15px var(--wp-font-mono);
+}
+
+.actions {
+  margin-top: 4px;
+}
+
+.actions :deep(.n-button) {
+  justify-content: flex-start;
+}
+
+.hint {
+  margin-top: auto;
 }
 </style>

client/src/utils/type.ts

@@ -261,6 +261,7 @@ export interface ShowcaseItem {
   username: string
   task_title: string
   task_display: number
+  task_type: TASK_TYPE
   score: number
   view_count: number
   html: string | null
@@ -306,6 +307,7 @@ export interface ShowcaseSubmissionLookupOut {
   username: string
   task_title: string
   task_display: number
+  task_type: TASK_TYPE
   score: number
   view_count: number
   has_prompt_chain: boolean
@@ -317,6 +319,7 @@ export interface AwardItemManageOut {
   username: string
   task_title: string
   task_display: number
+  task_type: TASK_TYPE
   score: number
   view_count: number
   sort_order: number
@@ -330,6 +333,7 @@ export interface ShowcaseDetail {
   username: string
   task_title: string
   task_display: number
+  task_type: TASK_TYPE
   score: number
   view_count: number
   html: string | null

server/src/routes/showcase.ts

@@ -20,7 +20,7 @@ const ORDER_BY: Record<string, string> = {
 const HAS_CHAIN = `EXISTS (SELECT 1 FROM prompt_message m WHERE m.submission_id = s.id) AS has_prompt_chain`
 
 const ITEM_SELECT = `SELECT sa.id, sa.submission_id, sa.sort_order, sa.awarded_at, sa.is_stale,
-    u.username, t.title AS task_title, t.display AS task_display,
+    u.username, t.title AS task_title, t.display AS task_display, t.task_type,
     s.score, s.view_count, s.html, s.css, s.js, ${HAS_CHAIN}
   FROM submission_submissionaward sa
   JOIN submission_submission s ON s.id = sa.submission_id
@@ -34,6 +34,7 @@ function itemManageOut(r: any) {
     username: r.username,
     task_title: r.task_title,
     task_display: r.task_display,
+    task_type: r.task_type,
     score: r.score,
     view_count: r.view_count,
     sort_order: r.sort_order,
@@ -104,6 +105,7 @@ router.get("/", (c) => {
         username: r.username,
         task_title: r.task_title,
         task_display: r.task_display,
+        task_type: r.task_type,
         score: r.score,
         view_count: r.view_count,
         html: r.html,
@@ -167,7 +169,7 @@ router.get("/manage/submissions/:submission_id", (c) => {
   const id = uuidParam(c, "submission_id")
   const s = orNotFound(
     get(
-      `SELECT s.id, u.username, t.title AS task_title, t.display AS task_display,
+      `SELECT s.id, u.username, t.title AS task_title, t.display AS task_display, t.task_type,
          s.score, s.view_count, ${HAS_CHAIN}
        FROM submission_submission s
        JOIN account_user u ON u.id = s.user_id
@@ -181,6 +183,7 @@ router.get("/manage/submissions/:submission_id", (c) => {
     username: s.username,
     task_title: s.task_title,
     task_display: s.task_display,
+    task_type: s.task_type,
     score: s.score,
     view_count: s.view_count,
     has_prompt_chain: bool(s.has_prompt_chain),
@@ -301,7 +304,7 @@ router.get("/:submission_id", (c) => {
   assertAwarded(id)
   const s = orNotFound(
     get(
-      `SELECT s.id, u.username, t.title AS task_title, t.display AS task_display,
+      `SELECT s.id, u.username, t.title AS task_title, t.display AS task_display, t.task_type,
          s.score, s.view_count, s.html, s.css, s.js, ${HAS_CHAIN}
        FROM submission_submission s
        JOIN account_user u ON u.id = s.user_id
@@ -320,6 +323,7 @@ router.get("/:submission_id", (c) => {
     username: s.username,
     task_title: s.task_title,
     task_display: s.task_display,
+    task_type: s.task_type,
     score: s.score,
     view_count: s.view_count,
     html: s.html,

server/tests/api.test.ts

@@ -415,7 +415,7 @@ describe("作品展", () => {
 
     const author1 = await client("author")
     expect((await author1("GET", "/api/submission/showcase/")).json).toHaveLength(1)
-    expect((await author1("GET", `/api/submission/showcase/${uuid(sub)}/`)).json.awards).toEqual(["最佳"])
+    expect((await author1("GET", `/api/submission/showcase/${uuid(sub)}/`)).json).toMatchObject({ awards: ["最佳"], task_type: "challenge" })
 
     await adm("PUT", `/api/submission/showcase/manage/awards/${award.id}`, { name: "最佳", is_active: false })
     expect((await author1("GET", "/api/submission/showcase/")).json).toEqual([])