初始化

vite-tailwindcss/src/components/ImageField.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="relative w-[96px] h-[96px] rounded-xl border border-dashed border-[#a88c6b]/40 bg-[#Fdfbf7] overflow-hidden cursor-pointer hover:border-[#a88c6b] transition-colors group"
+    @click="$emit('pick')"
+  >
+    <img v-if="modelValue" :src="modelValue" class="w-full h-full object-cover" />
+    <div v-else class="w-full h-full flex flex-col items-center justify-center text-[#a88c6b]/70 gap-1">
+      <i class="fa-solid fa-image text-lg"></i>
+      <span class="text-[10px]">{{ placeholder }}</span>
+    </div>
+    <div class="absolute inset-0 bg-black/35 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-[10px]">
+      <i class="fa-solid fa-cloud-arrow-up mr-1"></i>{{ uploading ? '上传中' : '点击上传' }}
+    </div>
+    <div v-if="label" class="absolute left-1 bottom-1 bg-white/80 text-[#a88c6b] text-[9px] px-1 rounded">{{ label }}</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: '' },
+  uploading: { type: Boolean, default: false },
+  placeholder: { type: String, default: '上传' },
+})
+defineEmits(['pick', 'update:modelValue'])
+</script>