From 1566a4e275a4a0adc3e25a3ac3a1edf68027e22a Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 2 Jun 2026 20:25:41 -0600
Subject: [PATCH] update

---
 src/pages/Showcase.vue       |  17 +-
 src/pages/ShowcaseDetail.vue | 294 -----------------------------------
 src/router.ts                |   7 -
 3 files changed, 11 insertions(+), 307 deletions(-)
 delete mode 100644 src/pages/ShowcaseDetail.vue
diff --git a/src/pages/Showcase.vue b/src/pages/Showcase.vue
index 35274c0..11d6737 100644
--- a/src/pages/Showcase.vue
+++ b/src/pages/Showcase.vue
@@ -33,7 +33,7 @@
             class="work-card"
             content-style="padding: 0;"
             hoverable
-            @click="openDetail(item.submission_id)"
+            @click="openDetail(item)"
           >
             <div class="card-preview">
               <iframe
@@ -79,12 +79,10 @@
 
 <script setup lang="ts">
 import { 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 { AwardSection, ShowcaseItem } from "../utils/type"
 
-const router = useRouter()
 const loading = ref(true)
 const awards = ref<AwardSection[]>([])
 
@@ -94,8 +92,15 @@ function buildSrcdoc(item: ShowcaseItem): string {
   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 } })
+function openDetail(item: ShowcaseItem) {
+  const srcdoc = buildSrcdoc(item)
+  const win = window.open("", "_blank")
+  if (win) {
+    win.document.open()
+    win.document.write(srcdoc)
+    win.document.close()
+  }
+  void Submission.incrementView(item.submission_id)
 }
 
 async function init() {
diff --git a/src/pages/ShowcaseDetail.vue b/src/pages/ShowcaseDetail.vue
deleted file mode 100644
index 959e792..0000000
--- a/src/pages/ShowcaseDetail.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-<template>
-  <main v-if="detail" class="detail-layout">
-    <section class="preview-panel">
-      <div class="back-bar">
-        <n-button text @click="router.back()">
-          <template #icon>
-            <Icon icon="lucide:arrow-left" />
-          </template>
-          返回创意工坊
-        </n-button>
-      </div>
-      <iframe
-        v-if="detailSrcdoc"
-        :srcdoc="detailSrcdoc"
-        class="preview-iframe"
-        sandbox="allow-scripts"
-      />
-    </section>
-
-    <aside class="info-panel">
-      <n-flex vertical :size="0">
-        <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-tag
-            v-for="award in detail.awards"
-            :key="award"
-            type="warning"
-            size="small"
-          >
-            {{ award }}
-          </n-tag>
-        </n-flex>
-        <n-flex :size="18" style="margin-top: 14px;">
-          <n-flex align="center" :size="6">
-            <Icon icon="lucide:star" :width="16" />
-            <n-text strong style="font-size: 14px;">
-              {{ detail.score.toFixed(1) }}
-            </n-text>
-          </n-flex>
-          <n-flex align="center" :size="6">
-            <Icon icon="lucide:eye" :width="16" />
-            <n-text strong style="font-size: 14px;">
-              {{ detail.view_count }}
-            </n-text>
-          </n-flex>
-        </n-flex>
-      </n-flex>
-
-      <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" style="font-size: 12px;">点击展开</n-text>
-          </template>
-          <n-spin :show="chainLoading">
-            <n-empty
-              v-if="!chainLoading && rounds.length === 0"
-              description="暂无记录"
-            />
-            <n-flex v-else vertical :size="12">
-              <n-scrollbar style="max-height: 260px;">
-                <n-flex vertical :size="8" style="padding-right: 4px;">
-                  <n-card
-                    v-for="(round, i) in rounds"
-                    :key="i"
-                    size="small"
-                    content-style="padding: 8px;"
-                    :style="{
-                      cursor: 'pointer',
-                      borderColor: selectedRound === i ? '#2080f0' : undefined,
-                      background: selectedRound === i ? '#e8f0fe' : undefined,
-                    }"
-                    @click="selectedRound = i"
-                  >
-                    <n-flex align="flex-start" :size="8">
-                      <n-avatar
-                        round
-                        :size="20"
-                        :color="selectedRound === i ? '#2080f0' : '#9db7e8'"
-                        style="font-size: 11px; font-weight: 700; flex-shrink: 0;"
-                      >
-                        {{ i + 1 }}
-                      </n-avatar>
-                      <n-flex vertical :size="4" style="min-width: 0; flex: 1;">
-                        <n-text style="font-size: 12px; line-height: 1.5;">
-                          {{ round.question }}
-                        </n-text>
-                        <n-flex :size="5">
-                          <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 }} 轮效果
-                </n-text>
-                <iframe
-                  v-if="selectedRoundSrcdoc"
-                  :key="selectedRound"
-                  :srcdoc="selectedRoundSrcdoc"
-                  sandbox="allow-scripts"
-                  class="round-iframe"
-                />
-                <n-flex
-                  v-else
-                  justify="center"
-                  align="center"
-                  style="min-height: 240px;"
-                >
-                  <n-empty description="该轮无网页代码" />
-                </n-flex>
-              </n-flex>
-            </n-flex>
-          </n-spin>
-        </n-collapse-item>
-      </n-collapse>
-    </aside>
-  </main>
-
-  <n-flex
-    v-else-if="notFound"
-    justify="center"
-    align="center"
-    style="min-height: 100vh; padding: 40px;"
-  >
-    <n-empty description="作品不存在" />
-  </n-flex>
-
-  <n-flex v-else justify="center" align="center" style="min-height: 100vh;">
-    <n-spin />
-  </n-flex>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue"
-import { useRouter } from "vue-router"
-import { Icon } from "@iconify/vue"
-import { Showcase, Submission } from "../api"
-import type { PromptRound, ShowcaseDetail } from "../utils/type"
-
-const props = defineProps<{
-  id: string
-}>()
-
-const router = useRouter()
-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 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
-  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>`
-}
-
-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)
-    void Submission.incrementView(props.id)
-  } catch {
-    notFound.value = true
-  }
-}
-
-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;
-}
-
-.round-iframe {
-  min-height: 240px;
-  flex: 1;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-  background: #fff;
-}
-
-@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>
diff --git a/src/router.ts b/src/router.ts
index 936b0e7..a767ef3 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -31,13 +31,6 @@ const routes = [
     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",
