修复了一些问题
This commit is contained in:
@@ -215,6 +215,14 @@
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
/>
|
||||
|
||||
<!-- WordPress image gallery (attachment ID array) -->
|
||||
<AksGalleryField
|
||||
v-else-if="schema.type === 'gallery'"
|
||||
:model-value="Array.isArray(modelValue) ? modelValue : []"
|
||||
:title="schema.label || '选择图片'"
|
||||
@update:model-value="emit('update:modelValue', $event)"
|
||||
/>
|
||||
|
||||
<!-- Slider -->
|
||||
<n-slider
|
||||
v-else-if="schema.type === 'slider'"
|
||||
@@ -603,12 +611,13 @@
|
||||
* AksField — renders a single form field based on its schema definition.
|
||||
*
|
||||
* Supported types: switch, input/text, textarea, number, select, radio,
|
||||
* checkbox, color, icon, media, slider, code, alert, fieldset, repeater (inline|list-modal), custom (slot).
|
||||
* checkbox, color, icon, media, gallery, slider, code, alert, fieldset, repeater (inline|list-modal), custom (slot).
|
||||
*/
|
||||
import { computed, ref, onMounted, watch } from 'vue'
|
||||
import FaIcon from './FaIcon.vue'
|
||||
import FaIconPicker from './FaIconPicker.vue'
|
||||
import AksMediaField from './AksMediaField.vue'
|
||||
import AksGalleryField from './AksGalleryField.vue'
|
||||
import AksCodeEditor from './AksCodeEditor.vue'
|
||||
import api from '@/api'
|
||||
|
||||
|
||||
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="aksrt-gallery-field">
|
||||
<div v-if="attachmentIds.length" class="aksrt-gallery-field__grid">
|
||||
<article
|
||||
v-for="(attachmentId, index) in attachmentIds"
|
||||
:key="attachmentId"
|
||||
class="aksrt-gallery-field__item"
|
||||
>
|
||||
<img
|
||||
v-if="previews[attachmentId]?.url"
|
||||
:src="previews[attachmentId].url"
|
||||
:alt="previews[attachmentId].alt || `附件 ${attachmentId}`"
|
||||
class="aksrt-gallery-field__image"
|
||||
/>
|
||||
<div v-else class="aksrt-gallery-field__placeholder">
|
||||
<FaIcon icon="fa fas fa-image" :size="22" />
|
||||
<span>#{{ attachmentId }}</span>
|
||||
</div>
|
||||
|
||||
<div class="aksrt-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="aksrt-gallery-field__empty">
|
||||
<FaIcon icon="fa fas fa-images" :size="28" />
|
||||
<span>尚未选择图片</span>
|
||||
</div>
|
||||
|
||||
<div class="aksrt-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="aksrt-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.thumbnail?.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>
|
||||
.aksrt-gallery-field__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.aksrt-gallery-field__item {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--aksrt-color-border);
|
||||
border-radius: 8px;
|
||||
background: var(--aksrt-color-canvas);
|
||||
}
|
||||
|
||||
.aksrt-gallery-field__image,
|
||||
.aksrt-gallery-field__placeholder {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.aksrt-gallery-field__placeholder {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
color: var(--aksrt-color-muted);
|
||||
}
|
||||
|
||||
.aksrt-gallery-field__actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 4px;
|
||||
border-top: 1px solid var(--aksrt-color-border);
|
||||
}
|
||||
|
||||
.aksrt-gallery-field__empty {
|
||||
display: flex;
|
||||
min-height: 116px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border: 1px dashed var(--aksrt-color-border-strong);
|
||||
border-radius: 8px;
|
||||
color: var(--aksrt-color-muted);
|
||||
}
|
||||
|
||||
.aksrt-gallery-field__buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.aksrt-gallery-field__error {
|
||||
margin: 8px 0 0;
|
||||
color: #d03050;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user