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