use naive-ui for default
This commit is contained in:
@@ -1,7 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-flex vertical class="gradebook-page" :size="12">
|
<n-flex
|
||||||
<n-flex class="toolbar" align="center" justify="space-between">
|
vertical
|
||||||
<n-flex align="center" :size="8" class="filters">
|
:size="12"
|
||||||
|
style="height: 100%; min-width: 0; box-sizing: border-box; padding: 10px 10px 10px 0; overflow: hidden;"
|
||||||
|
>
|
||||||
|
<n-flex class="toolbar" align="center" justify="space-between" style="flex-shrink: 0;">
|
||||||
|
<n-flex align="center" :size="8" wrap style="min-width: 0;">
|
||||||
<n-select
|
<n-select
|
||||||
v-model:value="query.classname"
|
v-model:value="query.classname"
|
||||||
class="class-select"
|
class="class-select"
|
||||||
@@ -56,7 +60,7 @@
|
|||||||
{{ loadError }}
|
{{ loadError }}
|
||||||
</n-alert>
|
</n-alert>
|
||||||
|
|
||||||
<n-flex v-if="gradebook" class="summary" align="center" :size="8">
|
<n-flex v-if="gradebook" align="center" :size="8" style="flex-shrink: 0;">
|
||||||
<n-tag size="small">学生 {{ gradebook.student_count }}</n-tag>
|
<n-tag size="small">学生 {{ gradebook.student_count }}</n-tag>
|
||||||
<n-tag size="small">任务 {{ gradebook.task_count }}</n-tag>
|
<n-tag size="small">任务 {{ gradebook.task_count }}</n-tag>
|
||||||
<n-tag size="small" type="success">
|
<n-tag size="small" type="success">
|
||||||
@@ -68,7 +72,6 @@
|
|||||||
</n-flex>
|
</n-flex>
|
||||||
|
|
||||||
<n-data-table
|
<n-data-table
|
||||||
class="gradebook-table"
|
|
||||||
size="small"
|
size="small"
|
||||||
striped
|
striped
|
||||||
flex-height
|
flex-height
|
||||||
@@ -77,6 +80,7 @@
|
|||||||
:data="rows"
|
:data="rows"
|
||||||
:row-key="(row: GradebookRow) => row.user_id"
|
:row-key="(row: GradebookRow) => row.user_id"
|
||||||
:scroll-x="scrollX"
|
:scroll-x="scrollX"
|
||||||
|
style="flex: 1; min-height: 0;"
|
||||||
/>
|
/>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</template>
|
</template>
|
||||||
@@ -347,24 +351,6 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.gradebook-page {
|
|
||||||
height: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 10px 10px 10px 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar,
|
|
||||||
.summary {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters {
|
|
||||||
min-width: 0;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.class-select {
|
.class-select {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
@@ -377,11 +363,6 @@ onMounted(async () => {
|
|||||||
width: 160px;
|
width: 160px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradebook-table {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-header {
|
.task-header {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
|
|||||||
@@ -1,36 +1,38 @@
|
|||||||
<template>
|
<template>
|
||||||
<main class="showcase">
|
<main class="showcase">
|
||||||
<header class="header">
|
<n-flex justify="space-between" align="flex-end" style="margin-bottom: 32px;">
|
||||||
<div>
|
<div>
|
||||||
<n-h2 class="title">创意工坊</n-h2>
|
<n-h2 style="margin: 0 0 4px;">创意工坊</n-h2>
|
||||||
<n-text depth="3">优秀作品展示</n-text>
|
<n-text depth="3">优秀作品展示</n-text>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</n-flex>
|
||||||
|
|
||||||
<n-spin :show="loading">
|
<n-spin :show="loading">
|
||||||
<n-empty
|
<n-empty
|
||||||
v-if="!loading && awards.length === 0"
|
v-if="!loading && awards.length === 0"
|
||||||
description="暂无展示作品"
|
description="暂无展示作品"
|
||||||
class="empty"
|
style="margin-top: 72px;"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<section
|
<section
|
||||||
v-for="section in awards"
|
v-for="section in awards"
|
||||||
:key="section.id"
|
:key="section.id"
|
||||||
class="award-section"
|
style="margin-bottom: 48px;"
|
||||||
>
|
>
|
||||||
<div class="section-header">
|
<n-flex vertical :size="4" style="margin-bottom: 16px;">
|
||||||
<n-h3 class="section-title">{{ section.name }}</n-h3>
|
<n-h3 style="margin: 0;">{{ section.name }}</n-h3>
|
||||||
<n-text v-if="section.description" depth="3" class="section-desc">
|
<n-text v-if="section.description" depth="3" style="font-size: 13px;">
|
||||||
{{ section.description }}
|
{{ section.description }}
|
||||||
</n-text>
|
</n-text>
|
||||||
</div>
|
</n-flex>
|
||||||
|
|
||||||
<div class="card-grid">
|
<div class="card-grid">
|
||||||
<article
|
<n-card
|
||||||
v-for="item in section.items"
|
v-for="item in section.items"
|
||||||
:key="item.submission_id"
|
:key="item.submission_id"
|
||||||
class="work-card"
|
class="work-card"
|
||||||
|
content-style="padding: 0;"
|
||||||
|
hoverable
|
||||||
@click="openDetail(item.submission_id)"
|
@click="openDetail(item.submission_id)"
|
||||||
>
|
>
|
||||||
<div class="card-preview">
|
<div class="card-preview">
|
||||||
@@ -44,23 +46,31 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-info">
|
<div class="card-info">
|
||||||
<n-flex justify="space-between" align="center" :wrap="false">
|
<n-flex justify="space-between" align="center" :wrap="false">
|
||||||
<n-text strong class="username">{{ item.username }}</n-text>
|
<n-ellipsis style="font-size: 13px; font-weight: 600; min-width: 0; flex: 1;">
|
||||||
<n-flex align="center" :wrap="false" class="metric-row">
|
{{ item.username }}
|
||||||
<span class="metric">
|
</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" />
|
<Icon icon="lucide:star" :width="13" />
|
||||||
|
<n-text style="font-size: 12px; color: #666;">
|
||||||
{{ item.score.toFixed(1) }}
|
{{ 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>
|
</n-text>
|
||||||
|
</n-flex>
|
||||||
|
<n-flex align="center" :size="3">
|
||||||
|
<Icon icon="lucide:eye" :width="13" />
|
||||||
|
<n-text style="font-size: 12px; color: #666;">
|
||||||
|
{{ 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: #888;"
|
||||||
|
>
|
||||||
|
{{ item.task_title }}
|
||||||
|
</n-ellipsis>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</n-card>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</n-spin>
|
</n-spin>
|
||||||
@@ -106,40 +116,6 @@ onMounted(init)
|
|||||||
padding: 32px 20px 48px;
|
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 {
|
.card-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||||
@@ -148,19 +124,11 @@ onMounted(init)
|
|||||||
|
|
||||||
.work-card {
|
.work-card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid #e6e6e6;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #fff;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition:
|
transition: transform 0.2s ease;
|
||||||
box-shadow 0.2s ease,
|
|
||||||
transform 0.2s ease,
|
|
||||||
border-color 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.work-card:hover {
|
.work-card:hover {
|
||||||
border-color: #c9dcff;
|
|
||||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
|
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -190,46 +158,4 @@ onMounted(init)
|
|||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
border-top: 1px solid #f0f0f0;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -9,15 +9,19 @@
|
|||||||
返回创意工坊
|
返回创意工坊
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
<iframe ref="iframe" class="preview-iframe" sandbox="allow-scripts" />
|
<iframe
|
||||||
|
v-if="detailSrcdoc"
|
||||||
|
:srcdoc="detailSrcdoc"
|
||||||
|
class="preview-iframe"
|
||||||
|
sandbox="allow-scripts"
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside class="info-panel">
|
<aside class="info-panel">
|
||||||
<div class="meta">
|
<n-flex vertical :size="0">
|
||||||
<n-h3 class="detail-title">{{ detail.task_title }}</n-h3>
|
<n-h3 style="margin: 0 0 4px;">{{ detail.task_title }}</n-h3>
|
||||||
<n-text depth="3">{{ detail.username }}</n-text>
|
<n-text depth="3">{{ detail.username }}</n-text>
|
||||||
|
<n-flex wrap :size="8" style="margin-top: 12px;">
|
||||||
<n-flex class="award-row" wrap>
|
|
||||||
<n-tag
|
<n-tag
|
||||||
v-for="award in detail.awards"
|
v-for="award in detail.awards"
|
||||||
:key="award"
|
:key="award"
|
||||||
@@ -27,18 +31,21 @@
|
|||||||
{{ award }}
|
{{ award }}
|
||||||
</n-tag>
|
</n-tag>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
|
<n-flex :size="18" style="margin-top: 14px;">
|
||||||
<div class="stat-row">
|
<n-flex align="center" :size="6">
|
||||||
<div class="stat-item">
|
|
||||||
<Icon icon="lucide:star" :width="16" />
|
<Icon icon="lucide:star" :width="16" />
|
||||||
<span>{{ detail.score.toFixed(1) }}</span>
|
<n-text strong style="font-size: 14px;">
|
||||||
</div>
|
{{ detail.score.toFixed(1) }}
|
||||||
<div class="stat-item">
|
</n-text>
|
||||||
|
</n-flex>
|
||||||
|
<n-flex align="center" :size="6">
|
||||||
<Icon icon="lucide:eye" :width="16" />
|
<Icon icon="lucide:eye" :width="16" />
|
||||||
<span>{{ detail.view_count }}</span>
|
<n-text strong style="font-size: 14px;">
|
||||||
</div>
|
{{ detail.view_count }}
|
||||||
</div>
|
</n-text>
|
||||||
</div>
|
</n-flex>
|
||||||
|
</n-flex>
|
||||||
|
</n-flex>
|
||||||
|
|
||||||
<n-divider v-if="detail.has_prompt_chain" />
|
<n-divider v-if="detail.has_prompt_chain" />
|
||||||
|
|
||||||
@@ -48,45 +55,66 @@
|
|||||||
>
|
>
|
||||||
<n-collapse-item title="创作过程" name="chain">
|
<n-collapse-item title="创作过程" name="chain">
|
||||||
<template #header-extra>
|
<template #header-extra>
|
||||||
<n-text depth="3" class="collapse-extra">点击展开</n-text>
|
<n-text depth="3" style="font-size: 12px;">点击展开</n-text>
|
||||||
</template>
|
</template>
|
||||||
<n-spin :show="chainLoading">
|
<n-spin :show="chainLoading">
|
||||||
<n-empty
|
<n-empty
|
||||||
v-if="!chainLoading && rounds.length === 0"
|
v-if="!chainLoading && rounds.length === 0"
|
||||||
description="暂无记录"
|
description="暂无记录"
|
||||||
/>
|
/>
|
||||||
<div v-else class="chain-layout">
|
<n-flex v-else vertical :size="12">
|
||||||
<div class="round-list">
|
<n-scrollbar style="max-height: 260px;">
|
||||||
<button
|
<n-flex vertical :size="8" style="padding-right: 4px;">
|
||||||
|
<n-card
|
||||||
v-for="(round, i) in rounds"
|
v-for="(round, i) in rounds"
|
||||||
:key="i"
|
:key="i"
|
||||||
class="round-item"
|
size="small"
|
||||||
:class="{ active: selectedRound === i }"
|
content-style="padding: 8px;"
|
||||||
type="button"
|
:style="{
|
||||||
|
cursor: 'pointer',
|
||||||
|
borderColor: selectedRound === i ? '#2080f0' : undefined,
|
||||||
|
background: selectedRound === i ? '#e8f0fe' : undefined,
|
||||||
|
}"
|
||||||
@click="selectedRound = i"
|
@click="selectedRound = i"
|
||||||
>
|
>
|
||||||
<span class="round-index">{{ i + 1 }}</span>
|
<n-flex align="flex-start" :size="8">
|
||||||
<span class="round-content">
|
<n-avatar
|
||||||
<span class="round-text">{{ round.question }}</span>
|
round
|
||||||
<span class="round-tags">
|
:size="20"
|
||||||
<span class="tag-source">
|
: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" ? "对话" : "手动" }}
|
{{ round.source === "conversation" ? "对话" : "手动" }}
|
||||||
</span>
|
</n-tag>
|
||||||
<span
|
<n-text
|
||||||
v-if="round.prompt_level"
|
v-if="round.prompt_level"
|
||||||
class="tag-level"
|
:style="{
|
||||||
:style="{ color: levelColors[round.prompt_level] }"
|
color: levelColors[round.prompt_level],
|
||||||
|
fontSize: '11px',
|
||||||
|
fontWeight: 700,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
L{{ round.prompt_level }}
|
L{{ round.prompt_level }}
|
||||||
</span>
|
</n-text>
|
||||||
</span>
|
</n-flex>
|
||||||
</span>
|
</n-flex>
|
||||||
</button>
|
</n-flex>
|
||||||
</div>
|
</n-card>
|
||||||
<div class="round-preview">
|
</n-flex>
|
||||||
<div class="round-preview-label">
|
</n-scrollbar>
|
||||||
|
|
||||||
|
<n-flex vertical :size="8">
|
||||||
|
<n-text strong style="font-size: 12px; color: #555;">
|
||||||
第 {{ selectedRound + 1 }} 轮效果
|
第 {{ selectedRound + 1 }} 轮效果
|
||||||
</div>
|
</n-text>
|
||||||
<iframe
|
<iframe
|
||||||
v-if="selectedRoundSrcdoc"
|
v-if="selectedRoundSrcdoc"
|
||||||
:key="selectedRound"
|
:key="selectedRound"
|
||||||
@@ -94,30 +122,38 @@
|
|||||||
sandbox="allow-scripts"
|
sandbox="allow-scripts"
|
||||||
class="round-iframe"
|
class="round-iframe"
|
||||||
/>
|
/>
|
||||||
<n-empty
|
<n-flex
|
||||||
v-else
|
v-else
|
||||||
description="该轮无网页代码"
|
justify="center"
|
||||||
class="round-empty"
|
align="center"
|
||||||
/>
|
style="min-height: 240px;"
|
||||||
</div>
|
>
|
||||||
</div>
|
<n-empty description="该轮无网页代码" />
|
||||||
|
</n-flex>
|
||||||
|
</n-flex>
|
||||||
|
</n-flex>
|
||||||
</n-spin>
|
</n-spin>
|
||||||
</n-collapse-item>
|
</n-collapse-item>
|
||||||
</n-collapse>
|
</n-collapse>
|
||||||
</aside>
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div v-else-if="notFound" class="state">
|
<n-flex
|
||||||
|
v-else-if="notFound"
|
||||||
|
justify="center"
|
||||||
|
align="center"
|
||||||
|
style="min-height: 100vh; padding: 40px;"
|
||||||
|
>
|
||||||
<n-empty description="作品不存在" />
|
<n-empty description="作品不存在" />
|
||||||
</div>
|
</n-flex>
|
||||||
|
|
||||||
<div v-else class="state">
|
<n-flex v-else justify="center" align="center" style="min-height: 100vh;">
|
||||||
<n-spin />
|
<n-spin />
|
||||||
</div>
|
</n-flex>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue"
|
import { computed, onMounted, ref } from "vue"
|
||||||
import { useRouter } from "vue-router"
|
import { useRouter } from "vue-router"
|
||||||
import { Icon } from "@iconify/vue"
|
import { Icon } from "@iconify/vue"
|
||||||
import { Showcase } from "../api"
|
import { Showcase } from "../api"
|
||||||
@@ -128,7 +164,6 @@ const props = defineProps<{
|
|||||||
}>()
|
}>()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
|
|
||||||
const detail = ref<ShowcaseDetail | null>(null)
|
const detail = ref<ShowcaseDetail | null>(null)
|
||||||
const notFound = ref(false)
|
const notFound = ref(false)
|
||||||
const rounds = ref<PromptRound[]>([])
|
const rounds = ref<PromptRound[]>([])
|
||||||
@@ -145,6 +180,11 @@ const levelColors: Record<number, string> = {
|
|||||||
6: "#c94f4f",
|
6: "#c94f4f",
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const detailSrcdoc = computed(() => {
|
||||||
|
if (!detail.value) return null
|
||||||
|
return buildDetailHtml(detail.value)
|
||||||
|
})
|
||||||
|
|
||||||
const selectedRoundSrcdoc = computed(() => {
|
const selectedRoundSrcdoc = computed(() => {
|
||||||
const round = rounds.value[selectedRound.value]
|
const round = rounds.value[selectedRound.value]
|
||||||
if (!round?.html) return null
|
if (!round?.html) return null
|
||||||
@@ -159,15 +199,6 @@ function buildDetailHtml(d: ShowcaseDetail) {
|
|||||||
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>`
|
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() {
|
async function loadChain() {
|
||||||
if (chainLoaded.value) return
|
if (chainLoaded.value) return
|
||||||
chainLoading.value = true
|
chainLoading.value = true
|
||||||
@@ -190,20 +221,11 @@ function onCollapseChange(
|
|||||||
async function init() {
|
async function init() {
|
||||||
try {
|
try {
|
||||||
detail.value = await Showcase.getDetail(props.id)
|
detail.value = await Showcase.getDetail(props.id)
|
||||||
await nextTick()
|
|
||||||
renderPreview()
|
|
||||||
} catch {
|
} catch {
|
||||||
notFound.value = true
|
notFound.value = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
|
||||||
() => detail.value,
|
|
||||||
(value) => {
|
|
||||||
if (value) renderPreview()
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
onMounted(init)
|
onMounted(init)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -242,138 +264,6 @@ onMounted(init)
|
|||||||
overflow-y: auto;
|
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 {
|
.round-iframe {
|
||||||
min-height: 240px;
|
min-height: 240px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -382,18 +272,6 @@ onMounted(init)
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.round-empty {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.state {
|
|
||||||
display: flex;
|
|
||||||
min-height: 100vh;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 760px) {
|
@media (max-width: 760px) {
|
||||||
.detail-layout {
|
.detail-layout {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-flex class="manage-page" :wrap="false">
|
<n-layout has-sider style="height: 100%;">
|
||||||
<aside class="award-panel">
|
<n-layout-sider
|
||||||
|
:width="260"
|
||||||
|
bordered
|
||||||
|
content-style="overflow: auto; height: 100%;"
|
||||||
|
style="background: #fafafa;"
|
||||||
|
>
|
||||||
<n-flex class="panel-header" justify="space-between" align="center">
|
<n-flex class="panel-header" justify="space-between" align="center">
|
||||||
<n-text strong>奖项</n-text>
|
<n-text strong>奖项</n-text>
|
||||||
<n-button size="small" secondary title="新建奖项" @click="startCreate">
|
<n-button size="small" secondary title="新建奖项" @click="startCreate">
|
||||||
@@ -15,7 +20,7 @@
|
|||||||
v-if="!awardsLoading && awards.length === 0"
|
v-if="!awardsLoading && awards.length === 0"
|
||||||
description="暂无奖项"
|
description="暂无奖项"
|
||||||
size="small"
|
size="small"
|
||||||
class="award-empty"
|
style="margin-top: 40px;"
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
v-for="award in awards"
|
v-for="award in awards"
|
||||||
@@ -27,21 +32,23 @@
|
|||||||
]"
|
]"
|
||||||
@click="selectAward(award)"
|
@click="selectAward(award)"
|
||||||
>
|
>
|
||||||
<span class="award-name">{{ award.name }}</span>
|
<n-ellipsis style="flex: 1; min-width: 0; font-size: 14px; font-weight: 500;">
|
||||||
<span class="award-meta">
|
{{ award.name }}
|
||||||
|
</n-ellipsis>
|
||||||
|
<n-flex align="center" :size="6" style="flex-shrink: 0; color: #777; font-size: 12px;">
|
||||||
<n-tag v-if="!award.is_active" size="small">停用</n-tag>
|
<n-tag v-if="!award.is_active" size="small">停用</n-tag>
|
||||||
<span>{{ award.item_count }} 件</span>
|
<span>{{ award.item_count }} 件</span>
|
||||||
</span>
|
</n-flex>
|
||||||
</button>
|
</button>
|
||||||
</n-spin>
|
</n-spin>
|
||||||
</aside>
|
</n-layout-sider>
|
||||||
|
|
||||||
<section class="detail-panel">
|
<n-layout content-style="padding: 12px; overflow: auto; height: 100%; box-sizing: border-box;">
|
||||||
<n-form
|
<n-form
|
||||||
:model="awardDraft"
|
:model="awardDraft"
|
||||||
label-placement="left"
|
label-placement="left"
|
||||||
label-width="82"
|
label-width="82"
|
||||||
class="award-form"
|
style="max-width: 1100px;"
|
||||||
>
|
>
|
||||||
<n-grid :cols="4" :x-gap="12" :y-gap="8" responsive="screen">
|
<n-grid :cols="4" :x-gap="12" :y-gap="8" responsive="screen">
|
||||||
<n-form-item-gi :span="2" label="名称">
|
<n-form-item-gi :span="2" label="名称">
|
||||||
@@ -51,7 +58,7 @@
|
|||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="awardDraft.sort_order"
|
v-model:value="awardDraft.sort_order"
|
||||||
:show-button="false"
|
:show-button="false"
|
||||||
class="number-input"
|
style="width: 120px;"
|
||||||
/>
|
/>
|
||||||
</n-form-item-gi>
|
</n-form-item-gi>
|
||||||
<n-form-item-gi label="启用">
|
<n-form-item-gi label="启用">
|
||||||
@@ -70,7 +77,7 @@
|
|||||||
/>
|
/>
|
||||||
</n-form-item-gi>
|
</n-form-item-gi>
|
||||||
<n-form-item-gi>
|
<n-form-item-gi>
|
||||||
<n-flex justify="end" class="form-actions">
|
<n-flex justify="end" style="width: 100%;">
|
||||||
<n-button
|
<n-button
|
||||||
type="primary"
|
type="primary"
|
||||||
:disabled="!canSaveAward"
|
:disabled="!canSaveAward"
|
||||||
@@ -100,7 +107,7 @@
|
|||||||
|
|
||||||
<n-divider />
|
<n-divider />
|
||||||
|
|
||||||
<n-flex class="section-header" justify="space-between" align="center">
|
<n-flex justify="space-between" align="center" style="margin-bottom: 10px;">
|
||||||
<n-text strong>已授奖作品</n-text>
|
<n-text strong>已授奖作品</n-text>
|
||||||
<n-flex align="center">
|
<n-flex align="center">
|
||||||
<n-button
|
<n-button
|
||||||
@@ -136,16 +143,16 @@
|
|||||||
:data="awardItems"
|
:data="awardItems"
|
||||||
:loading="itemsLoading"
|
:loading="itemsLoading"
|
||||||
:row-key="(row: AwardItemManageOut) => row.id"
|
:row-key="(row: AwardItemManageOut) => row.id"
|
||||||
class="items-table"
|
style="max-width: 1100px;"
|
||||||
/>
|
/>
|
||||||
</section>
|
</n-layout>
|
||||||
</n-flex>
|
</n-layout>
|
||||||
|
|
||||||
<n-modal
|
<n-modal
|
||||||
v-model:show="addWorkModalVisible"
|
v-model:show="addWorkModalVisible"
|
||||||
preset="card"
|
preset="card"
|
||||||
title="添加作品"
|
title="添加作品"
|
||||||
class="add-work-modal"
|
style="width: min(640px, calc(100vw - 32px));"
|
||||||
>
|
>
|
||||||
<n-flex vertical :size="12">
|
<n-flex vertical :size="12">
|
||||||
<n-input-group>
|
<n-input-group>
|
||||||
@@ -172,7 +179,7 @@
|
|||||||
{{ lookupError }}
|
{{ lookupError }}
|
||||||
</n-alert>
|
</n-alert>
|
||||||
|
|
||||||
<div v-if="submissionCandidate" class="candidate-panel">
|
<n-flex v-if="submissionCandidate" vertical :size="12">
|
||||||
<n-descriptions :column="2" size="small" bordered>
|
<n-descriptions :column="2" size="small" bordered>
|
||||||
<n-descriptions-item label="提交者">
|
<n-descriptions-item label="提交者">
|
||||||
{{ submissionCandidate.username }}
|
{{ submissionCandidate.username }}
|
||||||
@@ -209,7 +216,7 @@
|
|||||||
</n-tag>
|
</n-tag>
|
||||||
</n-descriptions-item>
|
</n-descriptions-item>
|
||||||
</n-descriptions>
|
</n-descriptions>
|
||||||
<n-flex justify="end" class="candidate-actions">
|
<n-flex justify="end" style="width: 100%;">
|
||||||
<n-button secondary @click="clearSubmissionLookup">清空</n-button>
|
<n-button secondary @click="clearSubmissionLookup">清空</n-button>
|
||||||
<n-button
|
<n-button
|
||||||
type="primary"
|
type="primary"
|
||||||
@@ -226,7 +233,7 @@
|
|||||||
{{ candidateAlreadyAwarded ? "已添加" : "添加到奖项" }}
|
{{ candidateAlreadyAwarded ? "已添加" : "添加到奖项" }}
|
||||||
</n-button>
|
</n-button>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</div>
|
</n-flex>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
</n-modal>
|
</n-modal>
|
||||||
</template>
|
</template>
|
||||||
@@ -553,21 +560,6 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.manage-page {
|
|
||||||
height: 100%;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.award-panel {
|
|
||||||
width: 260px;
|
|
||||||
min-width: 260px;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: auto;
|
|
||||||
border-right: 1px solid #efeff5;
|
|
||||||
background: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-header {
|
.panel-header {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -577,10 +569,6 @@ onMounted(async () => {
|
|||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.award-empty {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.award-row {
|
.award-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -606,66 +594,6 @@ onMounted(async () => {
|
|||||||
color: #18a058;
|
color: #18a058;
|
||||||
}
|
}
|
||||||
|
|
||||||
.award-name {
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.award-meta {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
color: #777;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-panel {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.award-form {
|
|
||||||
max-width: 1100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.number-input {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-actions {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.items-table {
|
|
||||||
max-width: 1100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.candidate-panel {
|
|
||||||
display: grid;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.candidate-actions {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.add-work-modal) {
|
|
||||||
width: min(640px, calc(100vw - 32px));
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.table-number-input) {
|
:deep(.table-number-input) {
|
||||||
width: 76px;
|
width: 76px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user