From 8f1a9da4c937982459d34175798c2fb094a6c3d0 Mon Sep 17 00:00:00 2001
From: Mplan <mplan_@outlook.com>
Date: Sat, 30 May 2026 00:10:15 +0800
Subject: [PATCH] feat: standardize panel cards and action buttons

---
 src/components/cloud/CloudEditModal.vue       |  4 +--
 .../cloud/EncyclopediaProgressCard.vue        |  2 +-
 src/components/cloud/MapPickerModal.vue       |  5 +--
 src/components/cloud/QuickUploadModal.vue     |  4 +--
 .../profile/ContributionHeatmap.vue           | 24 ++++++++++----
 src/views/admin/AdminView.vue                 | 31 +++++++++++--------
 src/views/encyclopedia/CloudTypeView.vue      |  2 +-
 src/views/encyclopedia/EncyclopediaView.vue   |  4 +--
 src/views/gallery/GalleryView.vue             | 28 ++++++++++-------
 src/views/profile/ProfileSettingsView.vue     | 10 +++---
 src/views/profile/ProfileView.vue             | 31 ++++++++++---------
 src/views/system/ForbiddenView.vue            |  4 +--
 src/views/system/NotFoundView.vue             |  4 +--
 src/views/upload/UploadView.vue               | 14 ++++-----
 14 files changed, 97 insertions(+), 70 deletions(-)

diff --git a/src/components/cloud/CloudEditModal.vue b/src/components/cloud/CloudEditModal.vue
index ebf267b..41aafe8 100644
--- a/src/components/cloud/CloudEditModal.vue
+++ b/src/components/cloud/CloudEditModal.vue
@@ -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>
diff --git a/src/components/cloud/EncyclopediaProgressCard.vue b/src/components/cloud/EncyclopediaProgressCard.vue
index cc4c299..86fb039 100644
--- a/src/components/cloud/EncyclopediaProgressCard.vue
+++ b/src/components/cloud/EncyclopediaProgressCard.vue
@@ -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>
diff --git a/src/components/cloud/MapPickerModal.vue b/src/components/cloud/MapPickerModal.vue
index a30fb76..3a6373f 100644
--- a/src/components/cloud/MapPickerModal.vue
+++ b/src/components/cloud/MapPickerModal.vue
@@ -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"
             >
diff --git a/src/components/cloud/QuickUploadModal.vue b/src/components/cloud/QuickUploadModal.vue
index a2d1ffa..7e80d38 100644
--- a/src/components/cloud/QuickUploadModal.vue
+++ b/src/components/cloud/QuickUploadModal.vue
@@ -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>
diff --git a/src/components/profile/ContributionHeatmap.vue b/src/components/profile/ContributionHeatmap.vue
index 9a37f93..42d6145 100644
--- a/src/components/profile/ContributionHeatmap.vue
+++ b/src/components/profile/ContributionHeatmap.vue
@@ -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"
diff --git a/src/views/admin/AdminView.vue b/src/views/admin/AdminView.vue
index 06068a2..63d2426 100644
--- a/src/views/admin/AdminView.vue
+++ b/src/views/admin/AdminView.vue
@@ -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>
diff --git a/src/views/encyclopedia/CloudTypeView.vue b/src/views/encyclopedia/CloudTypeView.vue
index c12a966..e50a746 100644
--- a/src/views/encyclopedia/CloudTypeView.vue
+++ b/src/views/encyclopedia/CloudTypeView.vue
@@ -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>
 
diff --git a/src/views/encyclopedia/EncyclopediaView.vue b/src/views/encyclopedia/EncyclopediaView.vue
index ed44297..1f254f7 100644
--- a/src/views/encyclopedia/EncyclopediaView.vue
+++ b/src/views/encyclopedia/EncyclopediaView.vue
@@ -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>
diff --git a/src/views/gallery/GalleryView.vue b/src/views/gallery/GalleryView.vue
index 43ddb30..8b46eb6 100644
--- a/src/views/gallery/GalleryView.vue
+++ b/src/views/gallery/GalleryView.vue
@@ -483,15 +483,16 @@ onUnmounted(() => {
 
         <div class="flex gap-3 overflow-x-auto pb-2">
           <NButton
-          v-for="tab in filterTabs"
-          :key="tab.id"
-          secondary
-          strong
-          @click="selectedTypeId = tab.id"
-          class="shrink-0"
-          :type="selectedTypeId === tab.id ? 'primary' : 'default'"
-        >
-          {{ tab.label }}
+            v-for="tab in filterTabs"
+            :key="tab.id"
+            secondary
+            strong
+            @click="selectedTypeId = tab.id"
+            class="shrink-0"
+            :class="selectedTypeId === tab.id ? 'oc-panel-button oc-panel-button--sky' : 'oc-panel-button oc-panel-button--neutral'"
+            type="default"
+          >
+            {{ tab.label }}
           </NButton>
         </div>
       </section>
@@ -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)"
         >
           下一页
diff --git a/src/views/profile/ProfileSettingsView.vue b/src/views/profile/ProfileSettingsView.vue
index a27a6a7..0ff79cc 100644
--- a/src/views/profile/ProfileSettingsView.vue
+++ b/src/views/profile/ProfileSettingsView.vue
@@ -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"
                 >
diff --git a/src/views/profile/ProfileView.vue b/src/views/profile/ProfileView.vue
index 81f1957..9b51b23 100644
--- a/src/views/profile/ProfileView.vue
+++ b/src/views/profile/ProfileView.vue
@@ -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>
diff --git a/src/views/system/ForbiddenView.vue b/src/views/system/ForbiddenView.vue
index 993e270..8ede6e8 100644
--- a/src/views/system/ForbiddenView.vue
+++ b/src/views/system/ForbiddenView.vue
@@ -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>
diff --git a/src/views/system/NotFoundView.vue b/src/views/system/NotFoundView.vue
index 0c6615a..d07c29f 100644
--- a/src/views/system/NotFoundView.vue
+++ b/src/views/system/NotFoundView.vue
@@ -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>
diff --git a/src/views/upload/UploadView.vue b/src/views/upload/UploadView.vue
index dd0fd1c..83aae38 100644
--- a/src/views/upload/UploadView.vue
+++ b/src/views/upload/UploadView.vue
@@ -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>