feat: add showcase frontend

src/api.ts

@@ -8,6 +8,9 @@ import type {
   PromptMessage,
   TaskStatsOut,
   TaskAsset,
+  AwardSection,
+  ShowcaseDetail,
+  PromptRound,
 } from "./utils/type"
 import { BASE_URL, STORAGE_KEY } from "./utils/const"
 
@@ -282,6 +285,25 @@ export const Helper = {
   },
 }
 
+export const Showcase = {
+  async list(): Promise<AwardSection[]> {
+    const res = await http.get("/submission/showcase/")
+    return res.data
+  },
+
+  async getDetail(submissionId: string): Promise<ShowcaseDetail> {
+    const res = await http.get(`/submission/showcase/${submissionId}/`)
+    return res.data
+  },
+
+  async getPromptChain(submissionId: string): Promise<PromptRound[]> {
+    const res = await http.get(
+      `/submission/showcase/${submissionId}/prompt-chain/`,
+    )
+    return res.data
+  },
+}
+
 export const TaskAssets = {
   async listChallenge(display: number): Promise<TaskAsset[]> {
     return (await http.get<TaskAsset[]>(`/assets/challenge/${display}`)).data

src/components/task/TaskPanel.vue

@@ -57,6 +57,14 @@
           </template>
           提交记录
         </n-tooltip>
+        <n-tooltip v-if="authed" trigger="hover">
+          <template #trigger>
+            <n-button text @click="$router.push({ name: 'showcase' })">
+              <Icon :width="16" icon="lucide:award"></Icon>
+            </n-button>
+          </template>
+          作品广场
+        </n-tooltip>
         <n-tooltip v-if="roleSuper" trigger="hover">
           <template #trigger>
             <n-button text @click="edit">

src/pages/Showcase.vue

@@ -0,0 +1,235 @@
+<template>
+  <main class="showcase">
+    <header class="header">
+      <div>
+        <n-h2 class="title">作品广场</n-h2>
+        <n-text depth="3">优秀作品展示</n-text>
+      </div>
+    </header>
+
+    <n-spin :show="loading">
+      <n-empty
+        v-if="!loading && awards.length === 0"
+        description="暂无展示作品"
+        class="empty"
+      />
+
+      <section
+        v-for="section in awards"
+        :key="section.id"
+        class="award-section"
+      >
+        <div class="section-header">
+          <n-h3 class="section-title">{{ section.name }}</n-h3>
+          <n-text v-if="section.description" depth="3" class="section-desc">
+            {{ section.description }}
+          </n-text>
+        </div>
+
+        <div class="card-grid">
+          <article
+            v-for="item in section.items"
+            :key="item.submission_id"
+            class="work-card"
+            @click="openDetail(item.submission_id)"
+          >
+            <div class="card-preview">
+              <iframe
+                :srcdoc="buildSrcdoc(item)"
+                sandbox="allow-scripts"
+                scrolling="no"
+                class="preview-iframe"
+              />
+              <div class="preview-overlay" />
+            </div>
+            <div class="card-info">
+              <n-flex justify="space-between" align="center" :wrap="false">
+                <n-text strong class="username">{{ item.username }}</n-text>
+                <n-flex align="center" :wrap="false" class="metric-row">
+                  <span class="metric">
+                    <Icon icon="lucide:star" :width="13" />
+                    {{ item.score.toFixed(1) }}
+                  </span>
+                  <span class="metric">
+                    <Icon icon="lucide:eye" :width="13" />
+                    {{ item.view_count }}
+                  </span>
+                </n-flex>
+              </n-flex>
+              <n-text depth="3" class="task-title">
+                {{ item.task_title }}
+              </n-text>
+            </div>
+          </article>
+        </div>
+      </section>
+    </n-spin>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
+import { useRouter } from "vue-router"
+import { Icon } from "@iconify/vue"
+import { Showcase } from "../api"
+import type { AwardSection, ShowcaseItem } from "../utils/type"
+
+const router = useRouter()
+const loading = ref(true)
+const awards = ref<AwardSection[]>([])
+
+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"><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>`
+}
+
+function openDetail(id: string) {
+  router.push({ name: "showcase-detail", params: { id } })
+}
+
+async function init() {
+  try {
+    awards.value = await Showcase.list()
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(init)
+</script>
+
+<style scoped>
+.showcase {
+  max-width: 1180px;
+  margin: 0 auto;
+  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));
+  gap: 16px;
+}
+
+.work-card {
+  overflow: hidden;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  background: #fff;
+  cursor: pointer;
+  transition:
+    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);
+}
+
+.card-preview {
+  position: relative;
+  height: 160px;
+  overflow: hidden;
+  background: #f7f8fa;
+}
+
+.preview-iframe {
+  width: 200%;
+  height: 200%;
+  border: none;
+  transform: scale(0.5);
+  transform-origin: top left;
+  pointer-events: none;
+}
+
+.preview-overlay {
+  position: absolute;
+  inset: 0;
+}
+
+.card-info {
+  min-height: 72px;
+  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

@@ -0,0 +1,415 @@
+<template>
+  <main v-if="detail" class="detail-layout">
+    <section class="preview-panel">
+      <div class="back-bar">
+        <n-button text @click="router.push({ name: 'showcase' })">
+          <template #icon>
+            <Icon icon="lucide:arrow-left" />
+          </template>
+          返回作品广场
+        </n-button>
+      </div>
+      <iframe ref="iframe" class="preview-iframe" sandbox="allow-scripts" />
+    </section>
+
+    <aside class="info-panel">
+      <div class="meta">
+        <n-h3 class="detail-title">{{ detail.task_title }}</n-h3>
+        <n-text depth="3">{{ detail.username }}</n-text>
+
+        <n-flex class="award-row" wrap>
+          <n-tag
+            v-for="award in detail.awards"
+            :key="award"
+            type="warning"
+            size="small"
+          >
+            {{ award }}
+          </n-tag>
+        </n-flex>
+
+        <div class="stat-row">
+          <div class="stat-item">
+            <Icon icon="lucide:star" :width="16" />
+            <span>{{ detail.score.toFixed(1) }}</span>
+          </div>
+          <div class="stat-item">
+            <Icon icon="lucide:eye" :width="16" />
+            <span>{{ detail.view_count }}</span>
+          </div>
+        </div>
+      </div>
+
+      <n-divider v-if="detail.has_prompt_chain" />
+
+      <n-collapse
+        v-if="detail.has_prompt_chain"
+        @update:expanded-names="onCollapseChange"
+      >
+        <n-collapse-item title="创作过程" name="chain">
+          <template #header-extra>
+            <n-text depth="3" class="collapse-extra">点击展开</n-text>
+          </template>
+          <n-spin :show="chainLoading">
+            <n-empty
+              v-if="!chainLoading && rounds.length === 0"
+              description="暂无记录"
+            />
+            <div v-else class="chain-layout">
+              <div class="round-list">
+                <button
+                  v-for="(round, i) in rounds"
+                  :key="i"
+                  class="round-item"
+                  :class="{ active: selectedRound === i }"
+                  type="button"
+                  @click="selectedRound = i"
+                >
+                  <span class="round-index">{{ i + 1 }}</span>
+                  <span class="round-content">
+                    <span class="round-text">{{ round.question }}</span>
+                    <span class="round-tags">
+                      <span class="tag-source">
+                        {{ round.source === "conversation" ? "对话" : "手动" }}
+                      </span>
+                      <span
+                        v-if="round.prompt_level"
+                        class="tag-level"
+                        :style="{ color: levelColors[round.prompt_level] }"
+                      >
+                        L{{ round.prompt_level }}
+                      </span>
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div class="round-preview">
+                <div class="round-preview-label">
+                  第 {{ selectedRound + 1 }} 轮效果
+                </div>
+                <iframe
+                  v-if="selectedRoundSrcdoc"
+                  :key="selectedRound"
+                  :srcdoc="selectedRoundSrcdoc"
+                  sandbox="allow-scripts"
+                  class="round-iframe"
+                />
+                <n-empty
+                  v-else
+                  description="该轮无网页代码"
+                  class="round-empty"
+                />
+              </div>
+            </div>
+          </n-spin>
+        </n-collapse-item>
+      </n-collapse>
+    </aside>
+  </main>
+
+  <div v-else-if="notFound" class="state">
+    <n-empty description="作品不存在" />
+  </div>
+
+  <div v-else class="state">
+    <n-spin />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue"
+import { useRouter } from "vue-router"
+import { Icon } from "@iconify/vue"
+import { Showcase } from "../api"
+import type { PromptRound, ShowcaseDetail } from "../utils/type"
+
+const props = defineProps<{
+  id: string
+}>()
+
+const router = useRouter()
+const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
+const detail = ref<ShowcaseDetail | null>(null)
+const notFound = ref(false)
+const rounds = ref<PromptRound[]>([])
+const chainLoading = ref(false)
+const selectedRound = ref(0)
+const chainLoaded = ref(false)
+
+const levelColors: Record<number, string> = {
+  1: "#888",
+  2: "#4f8f7f",
+  3: "#2f7bc1",
+  4: "#aa5f9f",
+  5: "#c48620",
+  6: "#c94f4f",
+}
+
+const selectedRoundSrcdoc = computed(() => {
+  const round = rounds.value[selectedRound.value]
+  if (!round?.html) return null
+  const style = round.css ? `<style>${round.css}</style>` : ""
+  const script = round.js ? `<script>${round.js}<\/script>` : ""
+  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" />${style}</head><body>${round.html}${script}</body></html>`
+})
+
+function buildDetailHtml(d: ShowcaseDetail) {
+  const css = d.css ? `<style>${d.css}</style>` : ""
+  const js = d.js ? `<script>${d.js}<\/script>` : ""
+  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
+  try {
+    rounds.value = await Showcase.getPromptChain(props.id)
+    selectedRound.value = Math.max(0, rounds.value.length - 1)
+    chainLoaded.value = true
+  } finally {
+    chainLoading.value = false
+  }
+}
+
+function onCollapseChange(
+  names: string | number | Array<string | number> | null,
+) {
+  const expanded = Array.isArray(names) ? names : names == null ? [] : [names]
+  if (expanded.includes("chain")) void loadChain()
+}
+
+async function init() {
+  try {
+    detail.value = await Showcase.getDetail(props.id)
+    await nextTick()
+    renderPreview()
+  } catch {
+    notFound.value = true
+  }
+}
+
+watch(
+  () => detail.value,
+  (value) => {
+    if (value) renderPreview()
+  },
+)
+
+onMounted(init)
+</script>
+
+<style scoped>
+.detail-layout {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+}
+
+.preview-panel {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  border-right: 1px solid #e6e6e6;
+}
+
+.back-bar {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-iframe {
+  width: 100%;
+  flex: 1;
+  border: none;
+}
+
+.info-panel {
+  width: 360px;
+  flex-shrink: 0;
+  padding: 20px 16px;
+  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;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  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;
+    min-height: 100vh;
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .preview-panel {
+    min-height: 56vh;
+    border-right: none;
+    border-bottom: 1px solid #e6e6e6;
+  }
+
+  .info-panel {
+    width: auto;
+  }
+}
+</style>

src/router.ts

@@ -25,6 +25,19 @@ const routes = [
     component: () => import("./pages/Submission.vue"),
     props: true,
   },
+  {
+    path: "/showcase",
+    name: "showcase",
+    component: () => import("./pages/Showcase.vue"),
+    meta: { auth: true },
+  },
+  {
+    path: "/showcase/:id",
+    name: "showcase-detail",
+    component: () => import("./pages/ShowcaseDetail.vue"),
+    props: true,
+    meta: { auth: true },
+  },
   {
     path: "/dashboard",
     name: "dashboard",

src/utils/type.ts

@@ -160,3 +160,47 @@ export interface TaskStatsOut {
   classes: string[]
   top_viewed: TopViewedItem[]
 }
+
+export interface ShowcaseItem {
+  submission_id: string
+  username: string
+  task_title: string
+  task_display: number
+  score: number
+  view_count: number
+  html: string | null
+  css: string | null
+  js: string | null
+  has_prompt_chain: boolean
+}
+
+export interface AwardSection {
+  id: number
+  name: string
+  description: string
+  item_ordering: string
+  items: ShowcaseItem[]
+}
+
+export interface ShowcaseDetail {
+  submission_id: string
+  username: string
+  task_title: string
+  task_display: number
+  score: number
+  view_count: number
+  html: string | null
+  css: string | null
+  js: string | null
+  awards: string[]
+  has_prompt_chain: boolean
+}
+
+export interface PromptRound {
+  question: string
+  source: string
+  prompt_level: number | null
+  html: string | null
+  css: string | null
+  js: string | null
+}