数据结构优化

client/src/components/admin/ImageUpload.vue

@@ -37,6 +37,18 @@
         </div>
       </div>
       
+      <!-- 从素材库选择按钮 -->
+      <div v-if="!imageUrl" class="mt-3 text-center">
+        <button
+          @click="openLibraryModal"
+          type="button"
+          class="text-sm text-art-accent hover:text-art-accent/80 transition-colors"
+          :disabled="disabled"
+        >
+          或从素材库选择
+        </button>
+      </div>
+      
       <div v-else class="image-preview relative group">
         <img :src="imageUrl" alt="Preview" class="w-full h-auto rounded-lg max-h-64 object-contain bg-white/5" />
         <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2">
@@ -132,6 +144,18 @@
             </p>
           </div>
         </div>
+        
+        <!-- 从素材库选择按钮 -->
+        <div v-if="imageUrls.length < (maxCount || Infinity)" class="mt-3 text-center">
+          <button
+            @click="openLibraryModal"
+            type="button"
+            class="text-sm text-art-accent hover:text-art-accent/80 transition-colors"
+            :disabled="disabled"
+          >
+            或从素材库选择
+          </button>
+        </div>
 
         <!-- 上传进度 -->
         <div v-if="uploadingCount > 0" class="mt-4 text-center">
@@ -147,6 +171,16 @@
         </div>
       </div>
     </template>
+
+    <!-- 素材库选择模态框 -->
+    <AttachmentLibraryModal
+      :show="showLibraryModal"
+      :multiple="multiple"
+      :max-count="maxCount"
+      :selected-urls="multiple ? imageUrls : (imageUrl ? [imageUrl] : [])"
+      @update:show="showLibraryModal = $event"
+      @confirm="handleLibrarySelect"
+    />
   </div>
 </template>
 
@@ -154,6 +188,7 @@
 import { ref, watch, computed } from 'vue'
 import { useToast } from '../../composables/useToast'
 import { API_BASE } from '../../services/api'
+import AttachmentLibraryModal from './AttachmentLibraryModal.vue'
 
 const props = withDefaults(defineProps<{
   modelValue?: string | string[]
@@ -177,6 +212,7 @@ const uploading = ref(false)
 const uploadingCount = ref(0)
 const error = ref('')
 const isDragging = ref(false)
+const showLibraryModal = ref(false)
 
 const toast = useToast()
 
@@ -365,6 +401,36 @@ const removeImage = (index?: number) => {
     }
   }
 }
+
+const openLibraryModal = () => {
+  if (props.disabled) return
+  showLibraryModal.value = true
+}
+
+const handleLibrarySelect = (urls: string[]) => {
+  if (props.multiple) {
+    // 批量模式：添加选中的图片，考虑maxCount限制
+    const currentCount = imageUrls.value.length
+    const remainingCount = props.maxCount ? props.maxCount - currentCount : Infinity
+    const urlsToAdd = urls.slice(0, remainingCount)
+    
+    if (urlsToAdd.length > 0) {
+      const newUrls = [...imageUrls.value, ...urlsToAdd]
+      imageUrls.value = newUrls
+      toast.showToast(`已添加 ${urlsToAdd.length} 张图片`, 'success')
+    }
+    
+    if (urls.length > urlsToAdd.length) {
+      toast.showToast(`最多只能添加 ${props.maxCount} 张图片，已添加 ${urlsToAdd.length} 张`, 'error')
+    }
+  } else {
+    // 单个模式：直接设置选中的第一张图片
+    if (urls.length > 0) {
+      imageUrl.value = urls[0]
+      toast.showToast('图片选择成功', 'success')
+    }
+  }
+}
 </script>
 
 <style scoped>