feat: standardize panel cards and action buttons

This commit is contained in:
2026-05-30 00:10:15 +08:00
parent fa4e00ce8c
commit 8f1a9da4c9
14 changed files with 97 additions and 70 deletions
+18 -13
View File
@@ -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>