统一交互组件 (#7)

Reviewed-on: #7

src/components/cloud/CloudEditModal.vue

@@ -123,7 +123,9 @@ watch(() => props.initialValue, value => {
           </div>
           <button
             type="button"
-            class="p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+            class="oc-icon-button"
+            aria-label="关闭编辑窗口"
+            title="关闭编辑窗口"
             @click="close"
           >
             ✕
@@ -191,7 +193,7 @@ watch(() => props.initialValue, value => {
                 <button
                   v-if="hasCoordinates"
                   type="button"
-                  class="text-xs font-medium text-slate-400 transition-colors hover:text-slate-700"
+                  class="oc-text-button oc-text-button--muted text-xs"
                   @click="clearCoordinates"
                 >
                   清空
@@ -216,7 +218,7 @@ watch(() => props.initialValue, value => {
                 />
                 <button
                   type="button"
-                  class="flex h-10 w-10 items-center justify-center border border-sky-200 bg-sky-50 text-sky-700 transition-colors hover:bg-sky-100"
+                  class="oc-icon-button oc-icon-button--sky"
                   title="地图选点"
                   aria-label="地图选点"
                   @click="mapPickerOpen = true"

src/components/cloud/ImageDetailModal.vue

@@ -187,7 +187,7 @@ onBeforeUnmount(() => {
           <button
             type="button"
             @click="close"
-            class="image-detail-close-button absolute right-4 top-4 z-30 flex h-10 min-h-10 w-10 min-w-10 max-w-10 appearance-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 text-white/70 shadow-none transition-colors hover:text-white [&_svg]:stroke-[2.5]"
+            class="image-detail-close-button oc-overlay-button absolute right-4 top-4 z-30 h-10 w-10 rounded-full [&_svg]:stroke-[2.5]"
             aria-label="关闭大图"
             title="关闭大图"
           >
@@ -223,7 +223,7 @@ onBeforeUnmount(() => {
             <button
               type="button"
               @click="toggleInfo"
-              class="absolute bottom-4 right-4 z-30 flex h-11 w-11 items-center justify-center rounded-full bg-transparent text-white drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)] transition-colors hover:text-sky-100"
+              class="oc-overlay-button absolute bottom-4 right-4 z-30 h-11 w-11 rounded-full drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)]"
               :aria-label="infoOpen ? '隐藏详细信息' : '查看详细信息'"
               :title="infoOpen ? '隐藏详细信息' : '查看详细信息'"
             >
@@ -254,7 +254,7 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   @click="infoOpen = false"
-                  class="absolute right-3 top-3 rounded-full p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+                  class="oc-icon-button oc-icon-button--small absolute right-3 top-3 rounded-full"
                   aria-label="隐藏详细信息"
                   title="隐藏详细信息"
                 >

src/components/cloud/MapPickerModal.vue

@@ -158,7 +158,9 @@ onBeforeUnmount(() => {
           </div>
           <button
             type="button"
-            class="p-2 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+            class="oc-icon-button"
+            aria-label="关闭地图选点窗口"
+            title="关闭地图选点窗口"
             @click="close"
           >
             ✕

src/components/cloud/MiniLocationMap.vue

@@ -77,7 +77,7 @@ async function initializeMap() {
     marker = new amapLib.Marker({
       position: center.value,
       title: props.locationName || '拍摄位置',
-      content: '<div class="h-4 w-4 rounded-full border-2 border-white bg-teal-500 shadow-[0_0_0_4px_rgba(20,184,166,0.22)]"></div>',
+      content: '<div class="h-4 w-4 rounded-full border-2 border-white bg-teal-500 shadow-[0_0_0_4px_rgba(52,116,93,0.24)]"></div>',
       offset: new amapLib.Pixel(-8, -8),
     } as AMap.MarkerOptions)
     marker.setMap(mapInstance)

src/components/cloud/QuickUploadModal.vue

@@ -207,7 +207,7 @@ onBeforeUnmount(() => {
           </div>
           <button
             type="button"
-            class="quick-upload-close flex h-9 w-9 items-center justify-center border border-slate-200 bg-slate-50 text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-800"
+            class="quick-upload-close oc-icon-button"
             aria-label="关闭快捷上传"
             title="关闭快捷上传"
             @click="close"
@@ -252,8 +252,8 @@ onBeforeUnmount(() => {
                   <img :src="activeItem.preview" alt="图片预览" class="h-56 w-full object-contain" />
                 </div>
                 <div class="mt-3 flex items-center justify-between gap-2">
-                  <button type="button" class="text-sm font-medium text-sky-700 hover:text-sky-900" @click="fileInput?.click()">重新选择</button>
-                  <button type="button" class="text-sm font-medium text-rose-600 hover:text-rose-800" @click="handleRemove(activeItem.id)">移除</button>
+                  <button type="button" class="oc-text-button text-sm" @click="fileInput?.click()">重新选择</button>
+                  <button type="button" class="oc-text-button oc-text-button--danger text-sm" @click="handleRemove(activeItem.id)">移除</button>
                 </div>
               </div>
 
@@ -320,7 +320,7 @@ onBeforeUnmount(() => {
                     </div>
                     <button
                       type="button"
-                      class="flex h-10 w-10 items-center justify-center border border-sky-200 bg-sky-50 text-sky-700 transition-colors hover:bg-sky-100"
+                      class="oc-icon-button oc-icon-button--sky"
                       title="地图选点"
                       aria-label="地图选点"
                       @click="openMapPicker"