数据结构优化

client/src/components/admin/AttachmentDetailModal.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="handleClose">
+  <Teleport to="body">
+    <div v-if="show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="handleClose">
     <div class="admin-card max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
       <div class="flex items-center justify-between mb-6">
         <h2 class="text-xl font-serif italic text-white">附件详情</h2>
@@ -90,6 +91,7 @@
       </div>
     </div>
   </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">

client/src/components/admin/AttachmentLibraryModal.vue

@@ -0,0 +1,297 @@
+<template>
+  <Teleport to="body">
+    <div v-if="show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="handleClose">
+    <div class="admin-card max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col">
+      <!-- 标题栏 -->
+      <div class="flex items-center justify-between mb-4 pb-4 border-b border-white/10">
+        <h2 class="text-xl font-serif italic text-white">从素材库选择</h2>
+        <button @click="handleClose" class="text-white/40 hover:text-white transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <!-- 筛选栏 -->
+      <div class="mb-4 space-y-3">
+        <div class="flex gap-3">
+          <!-- 搜索框 -->
+          <div class="flex-1">
+            <input
+              v-model="searchKeyword"
+              @input="handleSearch"
+              type="text"
+              placeholder="搜索文件名..."
+              class="admin-input w-full"
+            />
+          </div>
+          
+          <!-- 分类筛选 -->
+          <div class="w-48">
+            <CustomSelect
+              v-model="filterCategoryId"
+              :options="categoryOptions"
+              placeholder="全部分类"
+              @update:modelValue="loadAttachments"
+            />
+          </div>
+        </div>
+
+        <!-- 已选数量提示（多选模式） -->
+        <div v-if="multiple" class="text-sm text-art-muted">
+          已选择 {{ selectedUrls.length }} / {{ maxCount || '∞' }} 张图片
+        </div>
+      </div>
+
+      <!-- 图片网格 -->
+      <div class="flex-1 overflow-y-auto mb-4">
+        <div v-if="loading" class="flex justify-center items-center h-64">
+          <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
+        </div>
+
+        <div v-else-if="attachments.length === 0" class="text-center py-20 text-art-muted">
+          <p>暂无图片</p>
+        </div>
+
+        <div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          <div
+            v-for="attachment in attachments"
+            :key="attachment.id"
+            @click="toggleSelect(attachment)"
+            class="relative group cursor-pointer"
+            :class="[
+              isSelected(attachment.fileUrl)
+                ? 'ring-2 ring-art-accent'
+                : 'hover:ring-2 hover:ring-white/20'
+            ]"
+          >
+            <div class="aspect-square rounded-lg overflow-hidden bg-white/5 border border-white/10 transition-all"
+                 :class="isSelected(attachment.fileUrl) ? 'border-art-accent bg-art-accent/10' : ''">
+              <img
+                :src="attachment.fileUrl"
+                :alt="attachment.originalName"
+                class="w-full h-full object-cover"
+              />
+              
+              <!-- 选中标记 -->
+              <div v-if="isSelected(attachment.fileUrl)" class="absolute top-2 right-2 w-6 h-6 bg-art-accent rounded-full flex items-center justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-black">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              </div>
+
+              <!-- 文件名提示 -->
+              <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center p-2">
+                <p class="text-xs text-white text-center truncate w-full">{{ attachment.originalName }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 分页 -->
+      <div v-if="totalPages > 1" class="flex items-center justify-between mb-4 pt-4 border-t border-white/10">
+        <div class="text-sm text-art-muted">
+          共 {{ total }} 张图片，第 {{ currentPage }} / {{ totalPages }} 页
+        </div>
+        <div class="flex gap-2">
+          <button
+            @click="goToPage(currentPage - 1)"
+            :disabled="currentPage === 1"
+            class="admin-btn-secondary text-sm px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            上一页
+          </button>
+          <button
+            @click="goToPage(currentPage + 1)"
+            :disabled="currentPage === totalPages"
+            class="admin-btn-secondary text-sm px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+
+      <!-- 底部操作栏 -->
+      <div class="flex items-center justify-between pt-4 border-t border-white/10">
+        <div v-if="multiple" class="text-sm text-art-muted">
+          已选择 {{ selectedUrls.length }} 张图片
+        </div>
+        <div v-else></div>
+        <div class="flex gap-3">
+          <button @click="handleClose" class="admin-btn-secondary">
+            取消
+          </button>
+          <button
+            @click="handleConfirm"
+            :disabled="selectedUrls.length === 0"
+            class="admin-btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            确认选择 ({{ selectedUrls.length }})
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue'
+import { useToast } from '../../composables/useToast'
+import { getAdminAttachments, getAttachmentCategories, type Attachment, type AttachmentCategory } from '../../services/api'
+import CustomSelect from '../CustomSelect.vue'
+
+const props = withDefaults(defineProps<{
+  show: boolean
+  multiple?: boolean
+  maxCount?: number
+  selectedUrls?: string[]
+}>(), {
+  multiple: false,
+  selectedUrls: () => []
+})
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  'confirm': [urls: string[]]
+}>()
+
+const toast = useToast()
+
+const attachments = ref<Attachment[]>([])
+const categories = ref<AttachmentCategory[]>([])
+const loading = ref(false)
+const searchKeyword = ref('')
+const filterCategoryId = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(24)
+const total = ref(0)
+const selectedUrls = ref<string[]>([...props.selectedUrls])
+
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+
+const categoryOptions = computed(() => {
+  return [
+    { value: 0, label: '全部分类' },
+    ...categories.value.map(cat => ({ value: cat.id, label: cat.name }))
+  ]
+})
+
+// 搜索防抖
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+const handleSearch = () => {
+  if (searchTimer) clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    currentPage.value = 1
+    loadAttachments()
+  }, 300)
+}
+
+const loadAttachments = async () => {
+  loading.value = true
+  try {
+    const result = await getAdminAttachments({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      categoryId: filterCategoryId.value > 0 ? filterCategoryId.value : undefined,
+      fileType: 'image',
+      keyword: searchKeyword.value || undefined
+    })
+    attachments.value = result.list
+    total.value = result.total
+  } catch (err: any) {
+    toast.showToast(err.message || '加载附件失败', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadCategories = async () => {
+  try {
+    categories.value = await getAttachmentCategories()
+  } catch (err) {
+    console.error('Failed to load categories:', err)
+  }
+}
+
+const goToPage = (page: number) => {
+  if (page < 1 || page > totalPages.value) return
+  currentPage.value = page
+  loadAttachments()
+}
+
+const isSelected = (url: string): boolean => {
+  return selectedUrls.value.includes(url)
+}
+
+const toggleSelect = (attachment: Attachment) => {
+  const url = attachment.fileUrl
+  const index = selectedUrls.value.indexOf(url)
+
+  if (props.multiple) {
+    // 多选模式
+    if (index > -1) {
+      // 取消选择
+      selectedUrls.value.splice(index, 1)
+    } else {
+      // 检查是否超过最大数量
+      if (props.maxCount && selectedUrls.value.length >= props.maxCount) {
+        toast.showToast(`最多只能选择 ${props.maxCount} 张图片`, 'error')
+        return
+      }
+      selectedUrls.value.push(url)
+    }
+  } else {
+    // 单选模式
+    if (index > -1) {
+      // 取消选择
+      selectedUrls.value = []
+    } else {
+      // 选择
+      selectedUrls.value = [url]
+    }
+  }
+}
+
+const handleClose = () => {
+  emit('update:show', false)
+}
+
+const handleConfirm = () => {
+  if (selectedUrls.value.length === 0) {
+    toast.showToast('请至少选择一张图片', 'error')
+    return
+  }
+  emit('confirm', [...selectedUrls.value])
+  emit('update:show', false)
+}
+
+// 监听show变化，重置状态
+watch(() => props.show, (newVal) => {
+  if (newVal) {
+    // 打开模态框时，重置搜索和筛选，但保持已选状态
+    searchKeyword.value = ''
+    filterCategoryId.value = 0
+    currentPage.value = 1
+    selectedUrls.value = [...props.selectedUrls]
+    loadAttachments()
+  }
+})
+
+// 监听selectedUrls prop变化
+watch(() => props.selectedUrls, (newVal) => {
+  if (props.show) {
+    selectedUrls.value = [...newVal]
+  }
+}, { deep: true })
+
+onMounted(() => {
+  loadCategories()
+  if (props.show) {
+    loadAttachments()
+  }
+})
+</script>
+

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>

client/src/components/admin/PostRelationModal.vue

@@ -1,5 +1,6 @@
 <template>
-  <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click.self="close">
+  <Teleport to="body">
+    <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click.self="close">
     <div class="bg-[#1a1a1a] border border-white/10 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden animate-reveal flex flex-col">
       <div class="p-4 border-b border-white/10 flex justify-between items-center shrink-0">
         <h3 class="text-lg font-serif italic text-white">管理文章关联</h3>
@@ -131,6 +132,7 @@
       </div>
     </div>
   </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">