统一交互组件 (#7)

Reviewed-on: #7

src/views/upload/UploadView.vue

@@ -302,9 +302,11 @@ onUnmounted(() => {
                 <img :src="item.preview" alt="" class="w-full h-full object-cover" />
                 <div v-if="Object.keys(item.errors).length > 0" class="absolute top-0 right-0 w-2.5 h-2.5 bg-red-500"></div>
                 <button
+                  type="button"
                   @click.stop="handleRemove(item.id)"
-                  class="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center bg-red-500 text-xs text-white"
-                  style="opacity:0.8"
+                  class="oc-icon-button oc-icon-button--danger oc-icon-button--tiny absolute -right-1 -top-1"
+                  title="移除图片"
+                  aria-label="移除图片"
                 >✕</button>
               </div>
               <div
@@ -374,7 +376,7 @@ onUnmounted(() => {
                       v-if="activeItem.latitude !== null || activeItem.longitude !== null"
                       type="button"
                       @click="clearCoordinates"
-                      class="text-xs font-medium text-slate-400 transition-colors hover:text-slate-600"
+                      class="oc-text-button oc-text-button--muted text-xs"
                     >
                       清空
                     </button>
@@ -408,7 +410,7 @@ onUnmounted(() => {
                         @click="openMapPicker"
                         title="地图选点"
                         aria-label="地图选点"
-                        class="flex h-10 w-10 items-center justify-center rounded-lg border border-sky-200 bg-sky-50 text-sky-700 transition-colors hover:bg-sky-100"
+                        class="oc-icon-button oc-icon-button--sky"
                       >
                         <span class="text-lg leading-none">🗺️</span>
                       </button>