feat: standardize panel cards and action buttons
This commit is contained in:
@@ -251,8 +251,8 @@ watch(() => props.initialValue, value => {
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 border-t border-slate-200 px-6 py-4">
|
||||
<NButton secondary strong @click="close">取消</NButton>
|
||||
<NButton type="primary" secondary strong :loading="saving" @click="save">
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="close">取消</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" :loading="saving" @click="save">
|
||||
保存修改
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ const currentColor = computed(() => progressColor(props.isLoggedIn ? props.perce
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NCard class="border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
|
||||
<NCard class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-slate-500">当前进度</p>
|
||||
|
||||
@@ -194,11 +194,12 @@ onBeforeUnmount(() => {
|
||||
<div class="flex items-center justify-between border-t border-slate-200 px-6 py-4">
|
||||
<p class="text-sm text-slate-500">{{ footerText }}</p>
|
||||
<div class="flex gap-3">
|
||||
<NButton secondary strong @click="close">取消</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="close">取消</NButton>
|
||||
<NButton
|
||||
type="primary"
|
||||
type="default"
|
||||
secondary
|
||||
strong
|
||||
class="oc-panel-button oc-panel-button--sky"
|
||||
:disabled="pickedLat === null || pickedLng === null"
|
||||
@click="confirm"
|
||||
>
|
||||
|
||||
@@ -375,8 +375,8 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 border-t border-slate-200 bg-slate-50 px-5 py-4">
|
||||
<NButton secondary strong :disabled="uploading" @click="close">关闭</NButton>
|
||||
<NButton type="primary" secondary strong :disabled="uploading || items.length === 0" @click="handleSubmit">
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" :disabled="uploading" @click="close">关闭</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" :disabled="uploading || items.length === 0" @click="handleSubmit">
|
||||
{{ uploading ? '上传中...' : '提交审核' }}
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { NButton, NButtonGroup, NSelect } from 'naive-ui'
|
||||
import { NButton, NSelect } from 'naive-ui'
|
||||
|
||||
export interface ContributionHeatmapCell {
|
||||
date: string
|
||||
@@ -284,7 +284,7 @@ function formatMonthTooltip(monthKey: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div class="oc-panel-card border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div class="flex flex-wrap items-start justify-between gap-6">
|
||||
<div class="min-w-0 flex-1">
|
||||
<h3 class="text-2xl font-bold text-slate-900">{{ title }}</h3>
|
||||
@@ -295,14 +295,26 @@ function formatMonthTooltip(monthKey: string) {
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-end gap-3">
|
||||
<NButtonGroup>
|
||||
<NButton :type="viewMode === 'year' ? 'primary' : 'default'" secondary strong @click="viewMode = 'year'">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<NButton
|
||||
secondary
|
||||
strong
|
||||
type="default"
|
||||
:class="viewMode === 'year' ? 'oc-panel-button oc-panel-button--teal' : 'oc-panel-button oc-panel-button--neutral'"
|
||||
@click="viewMode = 'year'"
|
||||
>
|
||||
年度视图
|
||||
</NButton>
|
||||
<NButton :type="viewMode === 'month' ? 'primary' : 'default'" secondary strong @click="viewMode = 'month'">
|
||||
<NButton
|
||||
secondary
|
||||
strong
|
||||
type="default"
|
||||
:class="viewMode === 'month' ? 'oc-panel-button oc-panel-button--teal' : 'oc-panel-button oc-panel-button--neutral'"
|
||||
@click="viewMode = 'month'"
|
||||
>
|
||||
月度视图
|
||||
</NButton>
|
||||
</NButtonGroup>
|
||||
</div>
|
||||
<NSelect
|
||||
v-model:value="selectedYear"
|
||||
:options="yearOptions"
|
||||
|
||||
@@ -465,7 +465,7 @@ onMounted(loadAdminData)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<NButton secondary strong :loading="loading" @click="loadAdminData">
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" :loading="loading" @click="loadAdminData">
|
||||
<template #icon>
|
||||
<NIcon><Refresh /></NIcon>
|
||||
</template>
|
||||
@@ -577,13 +577,14 @@ onMounted(loadAdminData)
|
||||
<p class="mt-1 text-sm text-slate-500">共 {{ pendingImages.length }} 张待处理图片。</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<NButton secondary strong @click="toggleAllPendingSelection">
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="toggleAllPendingSelection">
|
||||
{{ selectedReviewCount === pendingImages.length && pendingImages.length ? '取消全选' : '全选待审核' }}
|
||||
</NButton>
|
||||
<NButton
|
||||
type="success"
|
||||
secondary
|
||||
strong
|
||||
type="default"
|
||||
class="oc-panel-button oc-panel-button--teal"
|
||||
:disabled="!selectedReviewCount"
|
||||
:loading="actionLoading"
|
||||
@click="updateCloudStatus(Array.from(selectedReviewIds), 'approved')"
|
||||
@@ -591,9 +592,10 @@ onMounted(loadAdminData)
|
||||
批量通过 {{ selectedReviewCount || '' }}
|
||||
</NButton>
|
||||
<NButton
|
||||
type="error"
|
||||
secondary
|
||||
strong
|
||||
type="default"
|
||||
class="oc-panel-button oc-panel-button--danger"
|
||||
:disabled="!selectedReviewCount"
|
||||
:loading="actionLoading"
|
||||
@click="updateCloudStatus(Array.from(selectedReviewIds), 'rejected')"
|
||||
@@ -624,15 +626,15 @@ onMounted(loadAdminData)
|
||||
<p class="mt-3 text-sm text-slate-600">{{ item.location_name || '未填写位置' }} · {{ formatDateTime(item.created_at) }}</p>
|
||||
<p class="mt-2 line-clamp-2 text-sm leading-6 text-slate-500">{{ item.description || '没有图片说明。' }}</p>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<NButton size="small" type="success" secondary strong :loading="actionLoading" @click="updateCloudStatus([item.id], 'approved')">
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--teal" :loading="actionLoading" @click="updateCloudStatus([item.id], 'approved')">
|
||||
<template #icon><NIcon><Check /></NIcon></template>
|
||||
通过
|
||||
</NButton>
|
||||
<NButton size="small" type="error" secondary strong :loading="actionLoading" @click="updateCloudStatus([item.id], 'rejected')">
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--danger" :loading="actionLoading" @click="updateCloudStatus([item.id], 'rejected')">
|
||||
<template #icon><NIcon><X /></NIcon></template>
|
||||
拒绝
|
||||
</NButton>
|
||||
<NButton size="small" secondary strong @click="selectedImage = item">查看大图</NButton>
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--neutral" @click="selectedImage = item">查看大图</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@@ -669,6 +671,8 @@ onMounted(loadAdminData)
|
||||
size="small"
|
||||
secondary
|
||||
strong
|
||||
type="default"
|
||||
class="oc-panel-button oc-panel-button--amber"
|
||||
:disabled="user.id === authStore.user?.id && user.role === 'admin'"
|
||||
:loading="actionLoading"
|
||||
@click="updateUserRole(user, user.role === 'admin' ? 'user' : 'admin')"
|
||||
@@ -677,9 +681,10 @@ onMounted(loadAdminData)
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
:type="user.is_disabled ? 'success' : 'error'"
|
||||
type="default"
|
||||
secondary
|
||||
strong
|
||||
:class="user.is_disabled ? 'oc-panel-button oc-panel-button--teal' : 'oc-panel-button oc-panel-button--danger'"
|
||||
:disabled="user.id === authStore.user?.id"
|
||||
:loading="actionLoading"
|
||||
@click="toggleUserDisabled(user)"
|
||||
@@ -724,10 +729,10 @@ onMounted(loadAdminData)
|
||||
</NTag>
|
||||
</div>
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
<NButton size="small" secondary strong @click="selectedImage = item">查看</NButton>
|
||||
<NButton size="small" type="success" secondary strong :disabled="item.status === 'approved'" :loading="actionLoading" @click="updateCloudStatus([item.id], 'approved')">通过</NButton>
|
||||
<NButton size="small" type="error" secondary strong :disabled="item.status === 'rejected'" :loading="actionLoading" @click="updateCloudStatus([item.id], 'rejected')">拒绝</NButton>
|
||||
<NButton size="small" secondary strong :loading="actionLoading" @click="toggleImageVisibility(item)">
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--neutral" @click="selectedImage = item">查看</NButton>
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--teal" :disabled="item.status === 'approved'" :loading="actionLoading" @click="updateCloudStatus([item.id], 'approved')">通过</NButton>
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--danger" :disabled="item.status === 'rejected'" :loading="actionLoading" @click="updateCloudStatus([item.id], 'rejected')">拒绝</NButton>
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--amber" :loading="actionLoading" @click="toggleImageVisibility(item)">
|
||||
<template #icon>
|
||||
<NIcon>
|
||||
<Eye v-if="item.is_hidden" />
|
||||
@@ -736,7 +741,7 @@ onMounted(loadAdminData)
|
||||
</template>
|
||||
{{ item.is_hidden ? '公开' : '隐藏' }}
|
||||
</NButton>
|
||||
<NButton size="small" type="error" secondary strong :loading="actionLoading" @click="deleteImage(item)">
|
||||
<NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--danger" :loading="actionLoading" @click="deleteImage(item)">
|
||||
<template #icon><NIcon><Trash /></NIcon></template>
|
||||
删除
|
||||
</NButton>
|
||||
|
||||
@@ -168,7 +168,7 @@ watch(() => route.params.id, () => {
|
||||
<div class="max-w-6xl mx-auto px-4 py-8">
|
||||
<div class="mb-6">
|
||||
<RouterLink to="/encyclopedia">
|
||||
<NButton text type="primary">← 返回图鉴总览</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">← 返回图鉴总览</NButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@ onMounted(async () => {
|
||||
</NAlert>
|
||||
|
||||
<div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
<NCard v-for="n in 6" :key="n">
|
||||
<NCard v-for="n in 6" :key="n" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
|
||||
<NSkeleton class="h-44 w-full" />
|
||||
<NSkeleton class="mt-5 h-5 w-2/5" />
|
||||
<NSkeleton class="mt-3 h-4 w-1/3" />
|
||||
@@ -176,7 +176,7 @@ onMounted(async () => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="border border-dashed border-slate-300 bg-white px-6 py-12">
|
||||
<div v-else class="oc-empty-card border border-dashed border-slate-300 bg-white px-6 py-12">
|
||||
<NEmpty description="暂时还没有图鉴数据" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -489,7 +489,8 @@ onUnmounted(() => {
|
||||
strong
|
||||
@click="selectedTypeId = tab.id"
|
||||
class="shrink-0"
|
||||
:type="selectedTypeId === tab.id ? 'primary' : 'default'"
|
||||
:class="selectedTypeId === tab.id ? 'oc-panel-button oc-panel-button--sky' : 'oc-panel-button oc-panel-button--neutral'"
|
||||
type="default"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</NButton>
|
||||
@@ -508,7 +509,7 @@ onUnmounted(() => {
|
||||
<div
|
||||
v-for="n in 8"
|
||||
:key="n"
|
||||
class="mb-3 break-inside-avoid border border-slate-200 bg-white p-3"
|
||||
class="oc-panel-card mb-3 break-inside-avoid border border-slate-200 bg-white p-3"
|
||||
>
|
||||
<NSkeleton class="h-44 w-full" />
|
||||
<NSkeleton class="mt-4 h-4 w-3/5" />
|
||||
@@ -563,7 +564,7 @@ onUnmounted(() => {
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section v-else class="mt-6 border border-dashed border-slate-300 bg-white px-6 py-12">
|
||||
<section v-else class="oc-empty-card mt-6 border border-dashed border-slate-300 bg-white px-6 py-12">
|
||||
<NEmpty description="还没有符合条件的云图">
|
||||
<template #extra>
|
||||
<p class="text-sm text-slate-500">换个云型筛选试试,或者等社区上传更多作品。</p>
|
||||
@@ -576,6 +577,7 @@ onUnmounted(() => {
|
||||
secondary
|
||||
strong
|
||||
:disabled="currentPage <= 1"
|
||||
class="oc-panel-button oc-panel-button--neutral"
|
||||
@click="goToPage(currentPage - 1)"
|
||||
>
|
||||
上一页
|
||||
@@ -586,7 +588,8 @@ onUnmounted(() => {
|
||||
v-if="page === 1 || page === totalPages || Math.abs(page - currentPage) <= 2"
|
||||
secondary
|
||||
strong
|
||||
:type="page === currentPage ? 'primary' : 'default'"
|
||||
:class="page === currentPage ? 'oc-panel-button oc-panel-button--sky' : 'oc-panel-button oc-panel-button--neutral'"
|
||||
type="default"
|
||||
@click="goToPage(page)"
|
||||
>
|
||||
{{ page }}
|
||||
@@ -601,6 +604,7 @@ onUnmounted(() => {
|
||||
secondary
|
||||
strong
|
||||
:disabled="currentPage >= totalPages"
|
||||
class="oc-panel-button oc-panel-button--neutral"
|
||||
@click="goToPage(currentPage + 1)"
|
||||
>
|
||||
下一页
|
||||
|
||||
@@ -82,7 +82,7 @@ async function savePassword() {
|
||||
<div class="min-h-[calc(100vh-4rem)] bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] px-4 py-10">
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<RouterLink to="/profile">
|
||||
<NButton text type="primary">← 返回个人主页</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">← 返回个人主页</NButton>
|
||||
</RouterLink>
|
||||
|
||||
<div class="mt-6">
|
||||
@@ -111,7 +111,7 @@ async function savePassword() {
|
||||
{{ success }}
|
||||
</NAlert>
|
||||
|
||||
<NCard class="border border-slate-200 bg-white shadow-sm" :bordered="false">
|
||||
<NCard class="oc-panel-card border border-slate-200 bg-white shadow-sm" :bordered="false">
|
||||
<div class="grid gap-5 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-slate-900">公开昵称</h2>
|
||||
@@ -127,9 +127,10 @@ async function savePassword() {
|
||||
show-count
|
||||
/>
|
||||
<NButton
|
||||
type="primary"
|
||||
secondary
|
||||
strong
|
||||
type="default"
|
||||
class="oc-panel-button oc-panel-button--teal"
|
||||
:loading="usernameSaving"
|
||||
@click="saveUsername"
|
||||
>
|
||||
@@ -139,7 +140,7 @@ async function savePassword() {
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NCard class="border border-slate-200 bg-white shadow-sm" :bordered="false">
|
||||
<NCard class="oc-panel-card border border-slate-200 bg-white shadow-sm" :bordered="false">
|
||||
<div class="grid gap-5 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-slate-900">登录密码</h2>
|
||||
@@ -166,6 +167,7 @@ async function savePassword() {
|
||||
<NButton
|
||||
secondary
|
||||
strong
|
||||
class="oc-panel-button oc-panel-button--neutral"
|
||||
:loading="passwordSaving"
|
||||
@click="savePassword"
|
||||
>
|
||||
|
||||
@@ -476,12 +476,12 @@ watch(selectedUploadDate, async newValue => {
|
||||
<div class="border-b border-sky-100 bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]">
|
||||
<div class="max-w-6xl mx-auto px-4 py-10">
|
||||
<div v-if="loading" class="grid gap-6 lg:grid-cols-[1.25fr_0.95fr]">
|
||||
<NCard>
|
||||
<NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
|
||||
<NSkeleton class="h-6 w-1/3" />
|
||||
<NSkeleton class="mt-4 h-10 w-2/3" />
|
||||
<NSkeleton class="mt-5 h-4 w-full" :repeat="2" />
|
||||
</NCard>
|
||||
<NCard>
|
||||
<NCard class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
|
||||
<NSkeleton class="h-5 w-1/3" />
|
||||
<NSkeleton class="mt-4 h-8 w-1/2" />
|
||||
<NSkeleton class="mt-5 h-3 w-full" />
|
||||
@@ -545,7 +545,7 @@ watch(selectedUploadDate, async newValue => {
|
||||
:is-logged-in="true"
|
||||
/>
|
||||
|
||||
<NCard v-else class="border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
|
||||
<NCard v-else class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
|
||||
<p class="text-sm text-slate-500">公开贡献</p>
|
||||
<p class="mt-3 text-3xl font-bold text-slate-900">{{ approvedShots }}</p>
|
||||
<p class="mt-2 text-sm text-slate-500">当前公开可见的云图数量</p>
|
||||
@@ -585,12 +585,12 @@ watch(selectedUploadDate, async newValue => {
|
||||
</div>
|
||||
|
||||
<div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<NCard class="border border-slate-200 shadow-sm">
|
||||
<NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
|
||||
<p class="text-sm text-slate-500">总拍摄数</p>
|
||||
<p class="mt-2 text-3xl font-bold text-slate-900">{{ totalShots }}</p>
|
||||
</NCard>
|
||||
|
||||
<NCard class="border border-slate-200 shadow-sm">
|
||||
<NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
|
||||
<p class="text-sm text-slate-500">最常拍云型</p>
|
||||
<p class="mt-2 text-2xl font-bold text-slate-900">{{ mostCommonCloudType.name }}</p>
|
||||
<p class="mt-2 text-sm text-slate-500" v-if="mostCommonCloudType.count">
|
||||
@@ -598,12 +598,12 @@ watch(selectedUploadDate, async newValue => {
|
||||
</p>
|
||||
</NCard>
|
||||
|
||||
<NCard class="border border-slate-200 shadow-sm">
|
||||
<NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
|
||||
<p class="text-sm text-slate-500">拍摄天数</p>
|
||||
<p class="mt-2 text-3xl font-bold text-slate-900">{{ shootingDays }}</p>
|
||||
</NCard>
|
||||
|
||||
<NCard class="border border-slate-200 shadow-sm">
|
||||
<NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
|
||||
<p class="text-sm text-slate-500">{{ isOwnProfile ? '已通过 / 待审核' : '公开通过数' }}</p>
|
||||
<p class="mt-2 text-2xl font-bold text-slate-900">
|
||||
<template v-if="isOwnProfile">{{ approvedShots }} / {{ pendingShots }}</template>
|
||||
@@ -639,7 +639,8 @@ watch(selectedUploadDate, async newValue => {
|
||||
v-if="isOwnProfile && selectedCloudCount"
|
||||
secondary
|
||||
strong
|
||||
type="error"
|
||||
type="default"
|
||||
class="oc-panel-button oc-panel-button--danger"
|
||||
@click="deleteCloudByIds(Array.from(selectedCloudIds))"
|
||||
>
|
||||
删除已选 {{ selectedCloudCount }}
|
||||
@@ -648,23 +649,25 @@ watch(selectedUploadDate, async newValue => {
|
||||
v-if="isOwnProfile"
|
||||
secondary
|
||||
strong
|
||||
class="oc-panel-button oc-panel-button--neutral"
|
||||
@click="toggleSelectionMode"
|
||||
>
|
||||
{{ selectionMode ? '取消选择' : '选择图片' }}
|
||||
</NButton>
|
||||
<NButton secondary strong @click="loadProfilePage(true)">
|
||||
<NButton secondary strong class="oc-panel-button oc-panel-button--neutral" @click="loadProfilePage(true)">
|
||||
刷新数据
|
||||
</NButton>
|
||||
<NButton
|
||||
v-if="selectedUploadDate"
|
||||
secondary
|
||||
strong
|
||||
class="oc-panel-button oc-panel-button--neutral"
|
||||
@click="clearSelectedUploadDate"
|
||||
>
|
||||
清除筛选
|
||||
</NButton>
|
||||
<RouterLink v-if="isOwnProfile" to="/upload">
|
||||
<NButton secondary strong type="primary">继续上传</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky">继续上传</NButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
@@ -681,7 +684,7 @@ watch(selectedUploadDate, async newValue => {
|
||||
<div v-for="n in 2" :key="n">
|
||||
<NSkeleton class="h-6 w-40" />
|
||||
<div class="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
|
||||
<NCard v-for="m in 3" :key="m">
|
||||
<NCard v-for="m in 3" :key="m" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
|
||||
<NSkeleton class="h-52 w-full" />
|
||||
<NSkeleton class="mt-4 h-5 w-2/3" />
|
||||
<NSkeleton class="mt-3 h-4 w-1/2" />
|
||||
@@ -764,13 +767,13 @@ watch(selectedUploadDate, async newValue => {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-else class="border border-dashed border-slate-300 bg-white p-10">
|
||||
<div v-else class="oc-empty-card border border-dashed border-slate-300 bg-white p-10">
|
||||
<NEmpty :description="selectedUploadDate ? '这一天没有上传记录' : (isOwnProfile ? '还没有上传任何云图' : '这位用户还没有公开云图')">
|
||||
<template #extra>
|
||||
<RouterLink v-if="isOwnProfile && !selectedUploadDate" to="/upload">
|
||||
<NButton secondary strong type="primary">去上传第一张</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky">去上传第一张</NButton>
|
||||
</RouterLink>
|
||||
<NButton v-else-if="selectedUploadDate" secondary strong @click="clearSelectedUploadDate">返回全部记录</NButton>
|
||||
<NButton v-else-if="selectedUploadDate" secondary strong class="oc-panel-button oc-panel-button--neutral" @click="clearSelectedUploadDate">返回全部记录</NButton>
|
||||
</template>
|
||||
</NEmpty>
|
||||
</div>
|
||||
|
||||
@@ -15,10 +15,10 @@ import { RouterLink } from 'vue-router'
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
<RouterLink to="/">
|
||||
<NButton type="primary" secondary strong>返回地图</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky">返回地图</NButton>
|
||||
</RouterLink>
|
||||
<RouterLink to="/profile">
|
||||
<NButton secondary strong>前往个人主页</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">前往个人主页</NButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -15,10 +15,10 @@ import { RouterLink } from 'vue-router'
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
<RouterLink to="/">
|
||||
<NButton type="primary" secondary strong>返回地图</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky">返回地图</NButton>
|
||||
</RouterLink>
|
||||
<RouterLink to="/gallery">
|
||||
<NButton secondary strong>去画廊看看</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">去画廊看看</NButton>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -252,16 +252,16 @@ onUnmounted(() => {
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex gap-3">
|
||||
<NButton secondary strong type="primary" class="flex-1" @click="saveBadge(badge)">保存分享卡片</NButton>
|
||||
<NButton secondary strong class="flex-1" @click="router.push(`/encyclopedia/${badge.cloudTypeId}`)">查看详情</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky flex-1" @click="saveBadge(badge)">保存分享卡片</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral flex-1" @click="router.push(`/encyclopedia/${badge.cloudTypeId}`)">查看详情</NButton>
|
||||
</div>
|
||||
</NCard>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-3">
|
||||
<NButton secondary strong @click="resetAfterSuccess">继续上传</NButton>
|
||||
<NButton secondary strong type="primary" @click="router.push('/encyclopedia')">前往图鉴</NButton>
|
||||
<NButton secondary strong @click="router.push('/profile')">返回个人主页</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="resetAfterSuccess">继续上传</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky" @click="router.push('/encyclopedia')">前往图鉴</NButton>
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="router.push('/profile')">返回个人主页</NButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -474,8 +474,8 @@ onUnmounted(() => {
|
||||
<div class="mt-6 flex items-center justify-between">
|
||||
<p class="text-sm text-gray-500">共 {{ items.length }} 张图片</p>
|
||||
<div class="flex gap-3">
|
||||
<NButton secondary strong @click="clearAll()" :disabled="uploading">清空</NButton>
|
||||
<NButton type="primary" secondary strong @click="handleSubmit" :disabled="uploading">
|
||||
<NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="clearAll()" :disabled="uploading">清空</NButton>
|
||||
<NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" @click="handleSubmit" :disabled="uploading">
|
||||
{{ uploading ? '上传中...' : '提交上传' }}
|
||||
</NButton>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user