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

<template>
  <div class="aksrt-media-field">
    <div v-if="modelValue" class="aksrt-media-field__preview">
      <img
        v-if="isImage"
        :src="modelValue"
        :alt="placeholder"
        class="aksrt-media-field__image"
      />
      <div v-else class="aksrt-media-field__file">
        <FaIcon icon="fas fa-file" :size="24" />
        <span class="aksrt-media-field__filename">{{ fileName }}</span>
      </div>
      <div class="aksrt-media-field__overlay">
        <n-button size="tiny" quaternary @click="openMediaLibrary">
          <FaIcon icon="fas fa-exchange-alt" /> 更换
        </n-button>
        <n-button size="tiny" quaternary type="error" @click="clearMedia">
          <FaIcon icon="fas fa-trash" /> 移除
        </n-button>
      </div>
    </div>

    <div v-else class="aksrt-media-field__empty" @click="openMediaLibrary">
      <FaIcon icon="fas fa-cloud-upload-alt" :size="28" />
      <span>{{ placeholder }}</span>
    </div>

    <n-input
      :value="modelValue"
      :placeholder="'或直接输入 URL'"
      size="small"
      class="aksrt-media-field__url"
      @update:value="emit('update:modelValue', $event)"
    />
  </div>
</template>

<script setup>
/**
 * AksMediaField — image/file selector with preview.
 *
 * In the WordPress admin context, this can open the WP Media Library.
 * For now, it supports direct URL input with preview.
 */
import { computed } from 'vue'
import FaIcon from './FaIcon.vue'

const props = defineProps({
  modelValue: { type: String, default: '' },
  accept: { type: String, default: 'image/*' },
  placeholder: { type: String, default: '选择图片' },
})

const emit = defineEmits(['update:modelValue'])

const isImage = computed(() => {
  if (!props.modelValue) return false
  return /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i.test(props.modelValue)
    || props.modelValue.startsWith('data:image/')
})

const fileName = computed(() => {
  if (!props.modelValue) return ''
  try {
    const url = new URL(props.modelValue, window.location.origin)
    const parts = url.pathname.split('/')
    return parts[parts.length - 1] || props.modelValue
  } catch {
    const parts = props.modelValue.split('/')
    return parts[parts.length - 1] || props.modelValue
  }
})

function openMediaLibrary() {
  // In WordPress admin, use wp.media to open the media library
  if (typeof wp !== 'undefined' && wp.media) {
    const frame = wp.media({
      title: props.placeholder,
      multiple: false,
      library: { type: props.accept === 'image/*' ? 'image' : undefined },
    })
    frame.on('select', () => {
      const attachment = frame.state().get('selection').first().toJSON()
      emit('update:modelValue', attachment.url)
    })
    frame.open()
  }
  // Outside WP, the URL input serves as the entry point
}

function clearMedia() {
  emit('update:modelValue', '')
}
</script>

<style scoped>
.aksrt-media-field__preview {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eef1f6;
  margin-bottom: 8px;
}

.aksrt-media-field__image {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}

.aksrt-media-field__file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f8fafc;
}

.aksrt-media-field__filename {
  font-size: 13px;
  color: #555;
  word-break: break-all;
}

.aksrt-media-field__overlay {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.aksrt-media-field__preview:hover .aksrt-media-field__overlay {
  opacity: 1;
}

.aksrt-media-field__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  border: 2px dashed #d9dce3;
  border-radius: 8px;
  cursor: pointer;
  color: #8a909c;
  font-size: 13px;
  transition: all 0.2s;
  margin-bottom: 8px;
}

.aksrt-media-field__empty:hover {
  border-color: #1890ff;
  color: #1890ff;
  background: #f0f7ff;
}

.aksrt-media-field__url {
  margin-top: 4px;
}
</style>