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

Reviewed-on: #1

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"