update
This commit is contained in:
@@ -33,7 +33,7 @@
|
|||||||
class="work-card"
|
class="work-card"
|
||||||
content-style="padding: 0;"
|
content-style="padding: 0;"
|
||||||
hoverable
|
hoverable
|
||||||
@click="openDetail(item.submission_id)"
|
@click="openDetail(item)"
|
||||||
>
|
>
|
||||||
<div class="card-preview">
|
<div class="card-preview">
|
||||||
<iframe
|
<iframe
|
||||||
@@ -79,12 +79,10 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref } from "vue"
|
import { onMounted, ref } from "vue"
|
||||||
import { useRouter } from "vue-router"
|
|
||||||
import { Icon } from "@iconify/vue"
|
import { Icon } from "@iconify/vue"
|
||||||
import { Showcase } from "../api"
|
import { Showcase, Submission } from "../api"
|
||||||
import type { AwardSection, ShowcaseItem } from "../utils/type"
|
import type { AwardSection, ShowcaseItem } from "../utils/type"
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
const awards = ref<AwardSection[]>([])
|
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>`
|
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) {
|
function openDetail(item: ShowcaseItem) {
|
||||||
router.push({ name: "showcase-detail", params: { id } })
|
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() {
|
async function init() {
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -31,13 +31,6 @@ const routes = [
|
|||||||
component: () => import("./pages/Showcase.vue"),
|
component: () => import("./pages/Showcase.vue"),
|
||||||
meta: { auth: true },
|
meta: { auth: true },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/showcase/:id",
|
|
||||||
name: "showcase-detail",
|
|
||||||
component: () => import("./pages/ShowcaseDetail.vue"),
|
|
||||||
props: true,
|
|
||||||
meta: { auth: true },
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "/dashboard",
|
path: "/dashboard",
|
||||||
name: "dashboard",
|
name: "dashboard",
|
||||||
|
|||||||
Reference in New Issue
Block a user