1. 修复海报图片

2026-08-03 16:00:13 +08:00
parent 8543d0bb25
commit 18d7296f01
13 changed files with 1052 additions and 105 deletions
--- a/vite-tailwindcss/src/components/ImageField.vue
+++ b/vite-tailwindcss/src/components/ImageField.vue
@@ -9,7 +9,7 @@
      <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 ? '上传中' : '点击上传' }}
+      <i class="fa-solid fa-images 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>
--- a/vite-tailwindcss/src/components/MediaPickerModal.vue
+++ b/vite-tailwindcss/src/components/MediaPickerModal.vue
@@ -0,0 +1,209 @@
+<template>
+  <a-modal
+    :open="open"
+    title="选择图片"
+    :footer="null"
+    width="720px"
+    destroy-on-close
+    @cancel="$emit('update:open', false)"
+  >
+    <div class="mp-toolbar">
+      <a-button type="primary" class="!bg-[#a88c6b]" :loading="uploading" @click="triggerUpload">
+        <i class="fa-solid fa-cloud-arrow-up mr-1"></i>上传新图
+      </a-button>
+      <a-button :loading="loading" @click="reloadFirstPage">
+        <i class="fa-solid fa-rotate-right mr-1"></i>刷新
+      </a-button>
+      <span class="mp-hint">共 {{ total }} 张</span>
+    </div>
+    <input
+      ref="fileInputRef"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="onFileChange"
+    />
+    <a-spin :spinning="loading">
+      <div v-if="!assets.length && !loading" class="mp-empty">暂无已上传图片，请先上传</div>
+      <div v-else class="mp-grid">
+        <button
+          v-for="item in assets"
+          :key="item.url + (item.id || '')"
+          type="button"
+          class="mp-item"
+          :class="{ active: item.url === modelValue }"
+          :title="item.name || item.url"
+          @click="select(item.url)"
+        >
+          <img :src="item.url" alt="" loading="lazy" />
+          <span class="mp-name">{{ item.name || '图片' }}</span>
+        </button>
+      </div>
+    </a-spin>
+    <div v-if="total > pageSize" class="mp-pager">
+      <a-pagination
+        size="small"
+        :current="page"
+        :page-size="pageSize"
+        :total="total"
+        :show-size-changer="false"
+        @change="onPageChange"
+      />
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { message } from 'ant-design-vue'
+import { getUploadAssets, uploadImage } from '@/api/wedding'
+
+const PAGE_SIZE = 6
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  modelValue: { type: String, default: '' },
+})
+const emit = defineEmits(['update:open', 'select'])
+
+const loading = ref(false)
+const uploading = ref(false)
+const assets = ref([])
+const page = ref(1)
+const pageSize = ref(PAGE_SIZE)
+const total = ref(0)
+const fileInputRef = ref(null)
+
+async function loadAssets(targetPage = page.value, { refresh = false } = {}) {
+  loading.value = true
+  try {
+    const params = { page: targetPage, pageSize: PAGE_SIZE }
+    if (refresh) params.refresh = 1
+    const res = await getUploadAssets(params)
+    const list = Array.isArray(res.data) ? res.data : []
+    assets.value = list.filter((x) => x && x.url)
+    total.value = Number(res.total) || 0
+    page.value = Number(res.page) || targetPage
+    pageSize.value = Number(res.pageSize) || PAGE_SIZE
+  } catch (e) {
+    assets.value = []
+    total.value = 0
+    message.error(e?.message || '加载图库失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function reloadFirstPage() {
+  page.value = 1
+  return loadAssets(1, { refresh: true })
+}
+
+function onPageChange(p) {
+  page.value = p
+  loadAssets(p)
+}
+
+function triggerUpload() {
+  fileInputRef.value?.click()
+}
+
+async function onFileChange(e) {
+  const file = e.target?.files?.[0]
+  if (!file) return
+  uploading.value = true
+  try {
+    const res = await uploadImage(file)
+    const url = res.url || res.data?.url
+    if (!url) throw new Error('上传未返回地址')
+    message.success('上传成功')
+    await loadAssets(1)
+    select(url)
+  } catch (err) {
+    message.error(err?.message || '上传失败')
+  } finally {
+    uploading.value = false
+    if (e.target) e.target.value = ''
+  }
+}
+
+function select(url) {
+  emit('select', url)
+  emit('update:open', false)
+}
+
+watch(
+  () => props.open,
+  (v) => {
+    if (v) {
+      page.value = 1
+      loadAssets(1)
+    }
+  },
+)
+</script>
+
+<style scoped>
+.mp-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+.mp-hint {
+  font-size: 12px;
+  color: #8a8680;
+  margin-left: auto;
+}
+.mp-empty {
+  text-align: center;
+  color: #8a8680;
+  padding: 48px 12px;
+  font-size: 13px;
+}
+.mp-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  padding: 2px;
+}
+.mp-item {
+  appearance: none;
+  border: 1px solid rgba(168, 140, 107, 0.28);
+  background: #fdfbf7;
+  border-radius: 10px;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.mp-item:hover,
+.mp-item.active {
+  border-color: #a88c6b;
+  box-shadow: 0 0 0 2px rgba(168, 140, 107, 0.2);
+}
+.mp-item img {
+  display: block;
+  width: 100%;
+  height: 88px;
+  object-fit: cover;
+  background: #f0ebe3;
+}
+.mp-name {
+  display: block;
+  padding: 4px 6px;
+  font-size: 10px;
+  color: #8a8680;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mp-pager {
+  display: flex;
+  justify-content: center;
+  margin-top: 14px;
+}
+.hidden { display: none; }
+</style>