style(ui): align semantic surfaces and upload layout

src/components/cloud/CloudEditModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { NAlert, NButton } from 'naive-ui'
+import { NAlert, NButton, NIcon } from 'naive-ui'
+import { Map as MapIcon, X } from '@vicons/tabler'
 import MapPickerModal from '@/components/cloud/MapPickerModal.vue'
 import type { CloudType } from '@/types/database'
 
@@ -115,7 +116,7 @@ watch(() => props.initialValue, value => {
       class="fixed inset-0 z-[130] flex items-center justify-center bg-slate-950/60 px-4 py-6"
       @click="close"
     >
-      <div class="w-full max-w-2xl bg-white shadow-2xl" @click.stop>
+      <div class="oc-modal-shell w-full max-w-2xl" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-6 py-5">
           <div>
             <h3 class="text-xl font-semibold text-slate-900">编辑图片信息</h3>
@@ -128,7 +129,7 @@ watch(() => props.initialValue, value => {
             title="关闭编辑窗口"
             @click="close"
           >
-            ✕
+            <NIcon size="20"><X /></NIcon>
           </button>
         </div>
 
@@ -223,7 +224,7 @@ watch(() => props.initialValue, value => {
                   aria-label="地图选点"
                   @click="mapPickerOpen = true"
                 >
-                  <span class="text-lg leading-none">🗺️</span>
+                  <NIcon size="20"><MapIcon /></NIcon>
                 </button>
               </div>
             </div>

src/components/cloud/ImageDetailModal.vue

@@ -258,7 +258,7 @@ onBeforeUnmount(() => {
                   aria-label="隐藏详细信息"
                   title="隐藏详细信息"
                 >
-                  ✕
+                  <NIcon size="16"><X /></NIcon>
                 </button>
               </div>
 

src/components/cloud/MapPickerModal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { NButton } from 'naive-ui'
+import { NButton, NIcon } from 'naive-ui'
+import { X } from '@vicons/tabler'
 import { loadAMap } from '@/lib/amap'
 
 const props = withDefaults(defineProps<{
@@ -153,7 +154,7 @@ onBeforeUnmount(() => {
       class="fixed inset-0 z-[140] flex items-center justify-center bg-slate-950/55 px-4 py-6"
       @click="close"
     >
-      <div class="w-full max-w-3xl overflow-hidden bg-white shadow-2xl" @click.stop>
+      <div class="oc-modal-shell w-full max-w-3xl overflow-hidden" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-6 py-5">
           <div>
             <h3 class="text-xl font-semibold text-slate-900">{{ title }}</h3>
@@ -166,7 +167,7 @@ onBeforeUnmount(() => {
             title="关闭地图选点窗口"
             @click="close"
           >
-            ✕
+            <NIcon size="20"><X /></NIcon>
           </button>
         </div>
 

src/components/cloud/QuickUploadModal.vue

@@ -198,7 +198,7 @@ onBeforeUnmount(() => {
       class="fixed inset-0 z-[130] flex items-center justify-center bg-slate-950/55 px-4 py-6 backdrop-blur-sm"
       @click="close"
     >
-      <div class="w-full max-w-3xl overflow-hidden border border-slate-200 bg-white shadow-2xl" @click.stop>
+      <div class="oc-modal-shell w-full max-w-3xl overflow-hidden" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-5 py-4">
           <div>
             <p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-700">Quick Upload</p>
@@ -228,7 +228,13 @@ onBeforeUnmount(() => {
               <span class="font-medium text-slate-700">正在上传 {{ currentItemIndex }} / {{ totalItems }}</span>
               <span class="font-medium text-sky-700">{{ overallProgress }}%</span>
             </div>
-            <NProgress type="line" :percentage="overallProgress" :show-indicator="false" color="#0ea5e9" rail-color="#dbeafe" />
+            <NProgress
+              type="line"
+              :percentage="overallProgress"
+              :show-indicator="false"
+              color="var(--oc-color-info)"
+              rail-color="var(--oc-color-border)"
+            />
           </div>
 
           <div

src/components/profile/ContributionHeatmap.vue

@@ -287,7 +287,7 @@ function formatMonthTooltip(monthKey: string) {
 </script>
 
 <template>
-  <div class="oc-panel-card border border-slate-200 bg-white p-6 shadow-sm">
+  <div class="oc-panel-card border border-slate-200 bg-white p-6">
     <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>