#1 大幅改进页面显示效果 (#1)

Reviewed-on: #1

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)"
         >
           下一页