wordpress-theme-aksrt/assets/admin/src/components/form/JioGalleryField.vue

<template>
  <div class="jio-gallery-field">
    <div v-if="attachmentIds.length" class="jio-gallery-field__grid">
      <article
        v-for="(attachmentId, index) in attachmentIds"
        :key="attachmentId"
        class="jio-gallery-field__item"
      >
        <img
          v-if="previews[attachmentId]?.url"
          :src="previews[attachmentId].url"
          :alt="previews[attachmentId].alt || `附件 ${attachmentId}`"
          class="jio-gallery-field__image"
        />
        <div v-else class="jio-gallery-field__placeholder">
          <FaIcon icon="fa fas fa-image" :size="22" />
          <span>#{{ attachmentId }}</span>
        </div>

        <div class="jio-gallery-field__actions">
          <n-button
            size="tiny"
            quaternary
            :disabled="index === 0"
            aria-label="向前移动"
            @click="move(index, -1)"
          >
            <FaIcon icon="fa fas fa-arrow-left" />
          </n-button>
          <n-button
            size="tiny"
            quaternary
            :disabled="index === attachmentIds.length - 1"
            aria-label="向后移动"
            @click="move(index, 1)"
          >
            <FaIcon icon="fa fas fa-arrow-right" />
          </n-button>
          <n-button
            size="tiny"
            quaternary
            type="error"
            aria-label="移除图片"
            @click="remove(attachmentId)"
          >
            <FaIcon icon="fa fas fa-trash-alt" />
          </n-button>
        </div>
      </article>
    </div>

    <div v-else class="jio-gallery-field__empty">
      <FaIcon icon="fa fas fa-images" :size="28" />
      <span>尚未选择图片</span>
    </div>

    <div class="jio-gallery-field__buttons">
      <n-button type="primary" secondary @click="openMediaLibrary">
        <FaIcon icon="fa fas fa-plus" />
        {{ attachmentIds.length ? '编辑图片' : '选择图片' }}
      </n-button>
      <n-button v-if="attachmentIds.length" type="error" quaternary @click="clear">
        清空图片
      </n-button>
    </div>

    <p v-if="mediaError" class="jio-gallery-field__error">{{ mediaError }}</p>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import FaIcon from './FaIcon.vue'

const props = defineProps({
  modelValue: { type: Array, default: () => [] },
  title: { type: String, default: '选择图片' },
})

const emit = defineEmits(['update:modelValue'])
const previews = ref({})
const mediaError = ref('')
let previewRequest = 0

const attachmentIds = computed(() => {
  const seen = new Set()
  return props.modelValue
    .map(value => Number.parseInt(value, 10))
    .filter(value => value > 0 && !seen.has(value) && seen.add(value))
})

function update(ids) {
  emit('update:modelValue', [...ids])
}

function move(index, direction) {
  const ids = [...attachmentIds.value]
  const target = index + direction
  if (target < 0 || target >= ids.length) return
  ;[ids[index], ids[target]] = [ids[target], ids[index]]
  update(ids)
}

function remove(attachmentId) {
  update(attachmentIds.value.filter(id => id !== attachmentId))
}

function clear() {
  update([])
}

async function hydratePreviews() {
  const request = ++previewRequest
  const media = window.wp?.media
  if (!media) return

  const entries = await Promise.all(attachmentIds.value.map(async attachmentId => {
    const attachment = media.attachment(attachmentId)
    try {
      if (!attachment.get('url')) await attachment.fetch()
    } catch (error) {
      return [attachmentId, null]
    }

    const sizes = attachment.get('sizes') || {}
    return [attachmentId, {
      url: sizes.medium?.url || attachment.get('url') || '',
      alt: attachment.get('alt') || attachment.get('title') || '',
    }]
  }))

  if (request === previewRequest) {
    previews.value = Object.fromEntries(entries.filter(([, preview]) => preview))
  }
}

function openMediaLibrary() {
  const media = window.wp?.media
  if (!media) {
    mediaError.value = '当前后台未加载 WordPress 媒体库。'
    return
  }

  mediaError.value = ''
  const frame = media({
    title: props.title,
    button: { text: '使用所选图片' },
    library: { type: 'image' },
    multiple: true,
  })

  frame.on('open', () => {
    const selection = frame.state().get('selection')
    attachmentIds.value.forEach(attachmentId => {
      const attachment = media.attachment(attachmentId)
      attachment.fetch()
      selection.add(attachment)
    })
  })

  frame.on('select', () => {
    const ids = frame.state().get('selection').toJSON()
      .map(attachment => Number.parseInt(attachment.id, 10))
      .filter(attachmentId => attachmentId > 0)
    update([...new Set(ids)])
  })

  frame.open()
}

watch(attachmentIds, hydratePreviews, { immediate: true })
</script>

<style scoped>
.jio-gallery-field__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.jio-gallery-field__item {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
  padding: 4px 4px 0;
  overflow: hidden;
  border: 1px solid var(--jio-color-border);
  border-radius: 8px;
  background: var(--jio-color-canvas);
}

.jio-gallery-field__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90px;
  border-radius: 4px;
}

.jio-gallery-field__placeholder {
  display: flex;
  flex-direction: column;
  width: 90px;
  height: 90px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--jio-color-muted);
}

.jio-gallery-field__actions {
  display: flex;
  justify-content: center;
  padding: 4px;
  border-top: 1px solid var(--jio-color-border);
}

.jio-gallery-field__empty {
  display: flex;
  min-height: 116px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px dashed var(--jio-color-border-strong);
  border-radius: 8px;
  color: var(--jio-color-muted);
}

.jio-gallery-field__buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.jio-gallery-field__error {
  margin: 8px 0 0;
  color: #d03050;
  font-size: 12px;
}
</style>