导入 AKSRT 主题开发源码

2026-07-03 22:50:34 +08:00
1 parent 9681dd3d48
commit 1268a55dd0
@@ -0,0 +1,167 @@
+<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>