导入 AKSRT 主题开发源码

assets/admin/src/components/homepage/ModuleCanvas.vue

@@ -0,0 +1,313 @@
+<template>
+  <div class="aksrt-module-canvas">
+    <div class="aksrt-module-canvas__toolbar">
+      <n-space>
+        <n-dropdown :options="addModuleOptions" trigger="click" @select="handleAddModule">
+          <n-button type="primary" size="small">
+            <template #icon><FaIcon icon="fas fa-plus" :size="12" /></template>
+            添加模块
+          </n-button>
+        </n-dropdown>
+        <n-button size="small" @click="$emit('pick-preset')">
+          <template #icon><FaIcon icon="fas fa-magic" :size="12" /></template>
+          应用预设
+        </n-button>
+        <n-button size="small" @click="$emit('export')">
+          <template #icon><FaIcon icon="fas fa-download" :size="12" /></template>
+          导出
+        </n-button>
+        <n-button size="small" @click="$emit('import')">
+          <template #icon><FaIcon icon="fas fa-upload" :size="12" /></template>
+          导入
+        </n-button>
+      </n-space>
+    </div>
+
+    <div v-if="modules.length === 0" class="aksrt-module-canvas__empty">
+      <FaIcon icon="fas fa-th-large" :size="32" color="#c0c4cc" />
+      <p>暂无首页模块，点击"添加模块"或"应用预设"开始配置。</p>
+    </div>
+
+    <div v-else class="aksrt-module-canvas__list">
+      <div
+        v-for="(mod, index) in modules"
+        :key="mod.id || index"
+        class="aksrt-module-canvas__item"
+        :class="{
+          'aksrt-module-canvas__item--selected': selectedIndex === index,
+          'aksrt-module-canvas__item--disabled': !mod.enabled,
+          'aksrt-module-canvas__item--dragging': dragIndex === index,
+          'aksrt-module-canvas__item--drag-over': dragOverIndex === index && dragOverIndex !== dragIndex,
+        }"
+        :draggable="true"
+        @click="$emit('select', index)"
+        @dragstart="handleDragStart(index, $event)"
+        @dragover.prevent="handleDragOver(index)"
+        @dragleave="handleDragLeave"
+        @drop.prevent="handleDrop(index)"
+        @dragend="handleDragEnd"
+      >
+        <div class="aksrt-module-canvas__item-handle" title="拖拽排序">
+          <FaIcon icon="fas fa-grip-vertical" :size="12" color="#c0c4cc" />
+        </div>
+        <div class="aksrt-module-canvas__item-icon">
+          <FaIcon :icon="getModuleIcon(mod.type)" :size="14" />
+        </div>
+        <div class="aksrt-module-canvas__item-info">
+          <span class="aksrt-module-canvas__item-label">{{ getModuleLabel(mod.type) }}</span>
+          <span v-if="mod.title" class="aksrt-module-canvas__item-title">{{ mod.title }}</span>
+        </div>
+        <div class="aksrt-module-canvas__item-actions">
+          <n-switch
+            :value="mod.enabled !== false"
+            size="small"
+            @update:value="(val) => $emit('toggle', index, val)"
+            @click.stop
+          />
+          <n-button
+            size="tiny"
+            quaternary
+            title="复制"
+            @click.stop="$emit('copy', index)"
+          >
+            <FaIcon icon="fas fa-copy" :size="11" />
+          </n-button>
+          <n-button
+            size="tiny"
+            quaternary
+            type="error"
+            title="删除"
+            @click.stop="$emit('remove', index)"
+          >
+            <FaIcon icon="fas fa-trash" :size="11" />
+          </n-button>
+          <n-button
+            size="tiny"
+            quaternary
+            :disabled="index === 0"
+            title="上移"
+            @click.stop="$emit('move', index, -1)"
+          >
+            <FaIcon icon="fas fa-chevron-up" :size="11" />
+          </n-button>
+          <n-button
+            size="tiny"
+            quaternary
+            :disabled="index === modules.length - 1"
+            title="下移"
+            @click.stop="$emit('move', index, 1)"
+          >
+            <FaIcon icon="fas fa-chevron-down" :size="11" />
+          </n-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { MODULE_LIBRARY } from '@/utils/home-module-schema'
+import FaIcon from '@/components/form/FaIcon.vue'
+
+const props = defineProps({
+  modules: { type: Array, default: () => [] },
+  selectedIndex: { type: Number, default: -1 },
+})
+
+const emit = defineEmits(['select', 'add', 'remove', 'copy', 'toggle', 'move', 'pick-preset', 'export', 'import'])
+
+// Drag-and-drop state
+const dragIndex = ref(-1)
+const dragOverIndex = ref(-1)
+
+function handleDragStart(index, event) {
+  dragIndex.value = index
+  event.dataTransfer.effectAllowed = 'move'
+  event.dataTransfer.setData('text/plain', String(index))
+}
+
+function handleDragOver(index) {
+  if (dragIndex.value !== index) {
+    dragOverIndex.value = index
+  }
+}
+
+function handleDragLeave() {
+  dragOverIndex.value = -1
+}
+
+function handleDrop(targetIndex) {
+  if (dragIndex.value >= 0 && dragIndex.value !== targetIndex) {
+    const offset = targetIndex - dragIndex.value
+    emit('move', dragIndex.value, offset)
+  }
+  dragIndex.value = -1
+  dragOverIndex.value = -1
+}
+
+function handleDragEnd() {
+  dragIndex.value = -1
+  dragOverIndex.value = -1
+}
+
+const addModuleOptions = computed(() =>
+  MODULE_LIBRARY.map(m => ({
+    label: m.label,
+    key: m.type,
+    icon: () => {
+      const iconMap = {
+        image: 'fas fa-image', rectangle: 'fas fa-square', folder: 'fas fa-folder',
+        switcher: 'fas fa-columns', trophy: 'fas fa-trophy', clock: 'fas fa-clock',
+        tag: 'fas fa-tag', link: 'fas fa-link', code: 'fas fa-code', fire: 'fas fa-fire',
+        grid: 'fas fa-th', 'font-colors': 'fas fa-font', 'th-large': 'fas fa-th-large',
+        swap: 'fas fa-arrows-alt-v', 'question-circle': 'fas fa-question-circle',
+        table: 'fas fa-table', star: 'fas fa-star', handshake: 'fas fa-handshake',
+        'shopping-bag': 'fas fa-shopping-bag',
+      }
+      return h('i', { class: iconMap[m.icon] || 'fas fa-cube', style: 'font-size:12px;margin-right:6px;' })
+    },
+  }))
+)
+
+function getModuleIcon(type) {
+  const meta = MODULE_LIBRARY.find(m => m.type === type)
+  const iconMap = {
+    image: 'fas fa-image', rectangle: 'fas fa-square', folder: 'fas fa-folder',
+    switcher: 'fas fa-columns', trophy: 'fas fa-trophy', clock: 'fas fa-clock',
+    tag: 'fas fa-tag', link: 'fas fa-link', code: 'fas fa-code', fire: 'fas fa-fire',
+    grid: 'fas fa-th', 'font-colors': 'fas fa-font', 'th-large': 'fas fa-th-large',
+    swap: 'fas fa-arrows-alt-v', 'question-circle': 'fas fa-question-circle',
+    table: 'fas fa-table', star: 'fas fa-star', handshake: 'fas fa-handshake',
+    'shopping-bag': 'fas fa-shopping-bag',
+  }
+  return iconMap[meta?.icon] || 'fas fa-cube'
+}
+
+function getModuleLabel(type) {
+  const meta = MODULE_LIBRARY.find(m => m.type === type)
+  return meta?.label || type
+}
+
+function handleAddModule(type) {
+  emit('add', type)
+}
+</script>
+
+<script>
+import { h } from 'vue'
+export default {
+  // h is used in addModuleOptions computed icon renderer
+}
+</script>
+
+<style scoped>
+.aksrt-module-canvas__toolbar {
+  margin-bottom: 12px;
+}
+
+.aksrt-module-canvas__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  border: 2px dashed #e0e0e0;
+  border-radius: 8px;
+  color: #999;
+  gap: 12px;
+}
+
+.aksrt-module-canvas__empty p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.aksrt-module-canvas__list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.aksrt-module-canvas__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+  background: #fff;
+}
+
+.aksrt-module-canvas__item:hover {
+  border-color: #d0d0d0;
+  background: #fafafa;
+}
+
+.aksrt-module-canvas__item--selected {
+  border-color: #1890ff;
+  background: #e6f4ff;
+}
+
+.aksrt-module-canvas__item--dragging {
+  opacity: 0.5;
+  border-style: dashed;
+}
+
+.aksrt-module-canvas__item--drag-over {
+  border-color: #1890ff;
+  border-width: 2px;
+  background: #f0f7ff;
+}
+
+.aksrt-module-canvas__item--disabled {
+  opacity: 0.5;
+}
+
+.aksrt-module-canvas__item-handle {
+  cursor: grab;
+  padding: 2px;
+}
+
+.aksrt-module-canvas__item-icon {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  background: #f5f7fa;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.aksrt-module-canvas__item-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.aksrt-module-canvas__item-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #333;
+}
+
+.aksrt-module-canvas__item-title {
+  font-size: 11px;
+  color: #999;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aksrt-module-canvas__item-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+</style>

assets/admin/src/components/homepage/ModuleInspector.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="aksrt-module-inspector">
+    <div v-if="!module" class="aksrt-module-inspector__empty">
+      <FaIcon icon="fas fa-mouse-pointer" :size="24" color="#c0c4cc" />
+      <p>选择左侧模块查看和编辑配置</p>
+    </div>
+
+    <template v-else>
+      <div class="aksrt-module-inspector__header">
+        <FaIcon :icon="getModuleIcon(module.type)" :size="16" />
+        <span class="aksrt-module-inspector__type">{{ getModuleLabel(module.type) }}</span>
+      </div>
+
+      <n-scrollbar style="max-height: calc(100vh - 320px);">
+        <n-form
+          :model="localConfig"
+          label-placement="top"
+          size="small"
+          class="aksrt-module-inspector__form"
+        >
+          <!-- Common fields -->
+          <n-form-item label="模块标题">
+            <n-input
+              :value="module.title || ''"
+              placeholder="留空使用默认标题"
+              @update:value="(val) => updateField('title', val)"
+            />
+          </n-form-item>
+
+          <n-form-item label="启用模块">
+            <n-switch
+              :value="module.enabled !== false"
+              @update:value="(val) => updateField('enabled', val)"
+            />
+          </n-form-item>
+
+          <n-divider />
+
+          <!-- Type-specific fields from schema -->
+          <template v-if="metaFields.length > 0">
+            <n-form-item
+              v-for="field in metaFields"
+              :key="field.key"
+              :label="field.label"
+            >
+              <!-- Switch -->
+              <n-switch
+                v-if="field.type === 'switch'"
+                :value="localConfig[field.key] ?? field.default ?? false"
+                @update:value="(val) => updateConfig(field.key, val)"
+              />
+
+              <!-- Number -->
+              <n-input-number
+                v-else-if="field.type === 'number'"
+                :value="localConfig[field.key] ?? field.default ?? 0"
+                :min="field.min"
+                :max="field.max"
+                style="width: 100%;"
+                @update:value="(val) => updateConfig(field.key, val)"
+              />
+
+              <!-- Text -->
+              <n-input
+                v-else-if="field.type === 'text'"
+                :value="localConfig[field.key] ?? field.default ?? ''"
+                :placeholder="field.placeholder || ''"
+                @update:value="(val) => updateConfig(field.key, val)"
+              />
+
+              <!-- Textarea -->
+              <n-input
+                v-else-if="field.type === 'textarea'"
+                type="textarea"
+                :value="localConfig[field.key] ?? field.default ?? ''"
+                :rows="field.rows || 3"
+                @update:value="(val) => updateConfig(field.key, val)"
+              />
+
+              <!-- Select -->
+              <n-select
+                v-else-if="field.type === 'select'"
+                :value="localConfig[field.key] ?? field.default"
+                :options="field.options || []"
+                @update:value="(val) => updateConfig(field.key, val)"
+              />
+
+              <!-- Radio -->
+              <n-radio-group
+                v-else-if="field.type === 'radio'"
+                :value="localConfig[field.key] ?? field.default"
+                @update:value="(val) => updateConfig(field.key, val)"
+              >
+                <n-space>
+                  <n-radio
+                    v-for="opt in field.options"
+                    :key="opt.value"
+                    :value="opt.value"
+                  >
+                    {{ opt.label }}
+                  </n-radio>
+                </n-space>
+              </n-radio-group>
+
+              <!-- Category (single) -->
+              <n-select
+                v-else-if="field.type === 'cat'"
+                :value="localConfig[field.key] ?? field.default ?? 0"
+                :options="categoryOptions"
+                filterable
+                placeholder="选择分类"
+                @update:value="(val) => updateConfig(field.key, val)"
+              />
+
+              <!-- Categories (multiple) -->
+              <n-select
+                v-else-if="field.type === 'cats'"
+                :value="localConfig[field.key] ?? field.default ?? []"
+                :options="categoryOptions"
+                multiple
+                filterable
+                placeholder="选择分类"
+                @update:value="(val) => updateConfig(field.key, val)"
+              />
+
+              <!-- Media Picker -->
+              <div v-else-if="field.type === 'media'" class="aksrt-module-inspector__media">
+                <div v-if="localConfig[field.key]" class="aksrt-module-inspector__media-preview">
+                  <img :src="localConfig[field.key]" alt="" />
+                  <n-button size="tiny" quaternary type="error" @click="updateConfig(field.key, '')">
+                    移除
+                  </n-button>
+                </div>
+                <n-input
+                  v-else
+                  :value="localConfig[field.key] ?? ''"
+                  placeholder="输入图片 URL 或点击下方选择"
+                  @update:value="(val) => updateConfig(field.key, val)"
+                />
+                <n-button size="tiny" quaternary @click="openMediaPicker(field.key)">
+                  <template #icon><FaIcon icon="fas fa-image" :size="12" /></template>
+                  从媒体库选择
+                </n-button>
+              </div>
+
+              <!-- Repeater -->
+              <div v-else-if="field.type === 'repeater'" class="aksrt-module-inspector__repeater">
+                <div
+                  v-for="(item, idx) in (localConfig[field.key] ?? [])"
+                  :key="idx"
+                  class="aksrt-module-inspector__repeater-item"
+                >
+                  <div class="aksrt-module-inspector__repeater-fields">
+                    <n-input
+                      v-for="sub in (field.fields || [])"
+                      :key="sub.key"
+                      :value="item[sub.key] ?? ''"
+                      :placeholder="sub.placeholder || sub.label || ''"
+                      size="small"
+                      @update:value="(val) => updateRepeaterItem(field.key, idx, sub.key, val)"
+                    />
+                  </div>
+                  <n-button size="tiny" quaternary type="error" @click="removeRepeaterItem(field.key, idx)">
+                    <FaIcon icon="fas fa-times" :size="10" />
+                  </n-button>
+                </div>
+                <n-button size="tiny" quaternary @click="addRepeaterItem(field.key, field.fields)">
+                  <template #icon><FaIcon icon="fas fa-plus" :size="10" /></template>
+                  添加一项
+                </n-button>
+              </div>
+            </n-form-item>
+          </template>
+
+          <n-text v-else depth="3" style="font-size: 12px;">
+            此模块类型暂无可配置字段。
+          </n-text>
+        </n-form>
+      </n-scrollbar>
+    </template>
+
+    <!-- Image URL input modal (replaces native prompt) -->
+    <n-modal v-model:show="showImageUrlInput" preset="card" title="输入图片 URL" style="max-width: 400px;" :bordered="false">
+      <n-input v-model:value="imageUrlValue" placeholder="https://example.com/image.jpg" @keyup.enter="confirmImageUrl" />
+      <template #footer>
+        <n-space justify="end">
+          <n-button @click="showImageUrlInput = false">取消</n-button>
+          <n-button type="primary" @click="confirmImageUrl">确定</n-button>
+        </n-space>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch, onMounted } from 'vue'
+import { MODULE_LIBRARY } from '@/utils/home-module-schema'
+import FaIcon from '@/components/form/FaIcon.vue'
+import api from '@/api/index.js'
+
+const props = defineProps({
+  module: { type: Object, default: null },
+  moduleIndex: { type: Number, default: -1 },
+})
+
+const emit = defineEmits(['update'])
+
+const categoryOptions = ref([])
+
+const meta = computed(() => {
+  if (!props.module) return null
+  return MODULE_LIBRARY.find(m => m.type === props.module.type) || null
+})
+
+const metaFields = computed(() => {
+  return meta.value?.fields || []
+})
+
+const localConfig = computed(() => {
+  return props.module?.config || {}
+})
+
+function getModuleIcon(type) {
+  const m = MODULE_LIBRARY.find(x => x.type === type)
+  const iconMap = {
+    image: 'fas fa-image', rectangle: 'fas fa-square', folder: 'fas fa-folder',
+    switcher: 'fas fa-columns', trophy: 'fas fa-trophy', clock: 'fas fa-clock',
+    tag: 'fas fa-tag', link: 'fas fa-link', code: 'fas fa-code', fire: 'fas fa-fire',
+    grid: 'fas fa-th', 'font-colors': 'fas fa-font', 'th-large': 'fas fa-th-large',
+    swap: 'fas fa-arrows-alt-v', 'question-circle': 'fas fa-question-circle',
+    table: 'fas fa-table', star: 'fas fa-star', handshake: 'fas fa-handshake',
+    'shopping-bag': 'fas fa-shopping-bag',
+  }
+  return iconMap[m?.icon] || 'fas fa-cube'
+}
+
+function getModuleLabel(type) {
+  const m = MODULE_LIBRARY.find(x => x.type === type)
+  return m?.label || type
+}
+
+function updateField(key, value) {
+  emit('update', props.moduleIndex, key, value)
+}
+
+function updateConfig(key, value) {
+  const newConfig = { ...(props.module?.config || {}), [key]: value }
+  emit('update', props.moduleIndex, 'config', newConfig)
+}
+
+// Image URL input state (replaces native prompt)
+const showImageUrlInput = ref(false)
+const imageUrlFieldKey = ref('')
+const imageUrlValue = ref('')
+
+function openMediaPicker(fieldKey) {
+  if (!window.wp || !window.wp.media) {
+    // Fallback: show inline input instead of native prompt
+    imageUrlFieldKey.value = fieldKey
+    imageUrlValue.value = localConfig.value[fieldKey] || ''
+    showImageUrlInput.value = true
+    return
+  }
+  const frame = wp.media({
+    title: '选择图片',
+    button: { text: '使用此图片' },
+    multiple: false,
+    library: { type: 'image' },
+  })
+  frame.on('select', function () {
+    const attachment = frame.state().get('selection').first().toJSON()
+    updateConfig(fieldKey, attachment.url)
+  })
+  frame.open()
+}
+
+function confirmImageUrl() {
+  if (imageUrlValue.value.trim()) {
+    updateConfig(imageUrlFieldKey.value, imageUrlValue.value.trim())
+  }
+  showImageUrlInput.value = false
+}
+
+function addRepeaterItem(fieldKey, subFields) {
+  const current = [...(props.module?.config?.[fieldKey] || [])]
+  const newItem = {}
+  ;(subFields || []).forEach(f => { newItem[f.key] = f.default ?? '' })
+  current.push(newItem)
+  updateConfig(fieldKey, current)
+}
+
+function removeRepeaterItem(fieldKey, index) {
+  const current = [...(props.module?.config?.[fieldKey] || [])]
+  current.splice(index, 1)
+  updateConfig(fieldKey, current)
+}
+
+function updateRepeaterItem(fieldKey, index, subKey, value) {
+  const current = [...(props.module?.config?.[fieldKey] || [])]
+  if (current[index]) {
+    current[index] = { ...current[index], [subKey]: value }
+    updateConfig(fieldKey, current)
+  }
+}
+
+async function loadCategories() {
+  try {
+    const res = await api.getHomepageCategories()
+    const cats = res?.data || []
+    categoryOptions.value = cats.map(c => ({
+      label: `${c.name} (${c.count})`,
+      value: c.term_id,
+    }))
+  } catch { /* non-critical */ }
+}
+
+onMounted(loadCategories)
+</script>
+
+<style scoped>
+.aksrt-module-inspector__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: #999;
+  gap: 12px;
+}
+
+.aksrt-module-inspector__empty p {
+  margin: 0;
+  font-size: 13px;
+}
+
+.aksrt-module-inspector__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 12px;
+}
+
+.aksrt-module-inspector__type {
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+}
+
+.aksrt-module-inspector__form {
+  padding: 0 4px;
+}
+
+.aksrt-module-inspector__media {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.aksrt-module-inspector__media-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.aksrt-module-inspector__media-preview img {
+  width: 80px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid #e8e8e8;
+}
+
+.aksrt-module-inspector__repeater {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.aksrt-module-inspector__repeater-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 8px;
+  border-radius: 6px;
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+}
+
+.aksrt-module-inspector__repeater-fields {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+</style>

assets/admin/src/components/homepage/ModulePresetPicker.vue

@@ -0,0 +1,143 @@
+<template>
+  <n-modal
+    :show="show"
+    title="应用预设模板"
+    preset="dialog"
+    style="width: 560px;"
+    :show-icon="false"
+    @close="$emit('close')"
+  >
+    <div class="aksrt-preset-picker">
+      <p class="aksrt-preset-picker__hint">
+        选择一个预设模板快速配置首页模块。应用预设将替换当前所有模块。
+      </p>
+
+      <div class="aksrt-preset-picker__list">
+        <div
+          v-for="preset in presets"
+          :key="preset.key"
+          class="aksrt-preset-picker__item"
+          :class="{ 'aksrt-preset-picker__item--selected': selectedKey === preset.key }"
+          @click="selectedKey = preset.key"
+        >
+          <div class="aksrt-preset-picker__item-header">
+            <strong>{{ preset.label }}</strong>
+            <n-tag size="small" type="info">{{ preset.modules.length }} 个模块</n-tag>
+          </div>
+          <p class="aksrt-preset-picker__item-desc">{{ preset.desc }}</p>
+          <div class="aksrt-preset-picker__item-modules">
+            <n-tag
+              v-for="(mod, i) in preset.modules"
+              :key="i"
+              size="small"
+              :bordered="false"
+              class="aksrt-preset-picker__module-tag"
+            >
+              {{ getModuleLabel(mod.type) }}
+            </n-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #action>
+      <n-space>
+        <n-button @click="$emit('close')">取消</n-button>
+        <n-button
+          type="primary"
+          :disabled="!selectedKey"
+          @click="handleApply"
+        >
+          应用预设
+        </n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { PRESET_TEMPLATES, MODULE_LIBRARY } from '@/utils/home-module-schema'
+
+defineProps({
+  show: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['close', 'apply'])
+const selectedKey = ref('')
+const presets = PRESET_TEMPLATES
+
+function getModuleLabel(type) {
+  const m = MODULE_LIBRARY.find(x => x.type === type)
+  return m?.label || type
+}
+
+function handleApply() {
+  const preset = presets.find(p => p.key === selectedKey.value)
+  if (preset) {
+    emit('apply', preset)
+    selectedKey.value = ''
+  }
+}
+</script>
+
+<style scoped>
+.aksrt-preset-picker__hint {
+  margin: 0 0 16px;
+  font-size: 13px;
+  color: #666;
+  line-height: 1.6;
+}
+
+.aksrt-preset-picker__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.aksrt-preset-picker__item {
+  padding: 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.aksrt-preset-picker__item:hover {
+  border-color: #d0d0d0;
+  background: #fafafa;
+}
+
+.aksrt-preset-picker__item--selected {
+  border-color: #1890ff;
+  background: #e6f4ff;
+}
+
+.aksrt-preset-picker__item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.aksrt-preset-picker__item-header strong {
+  font-size: 14px;
+  color: #333;
+}
+
+.aksrt-preset-picker__item-desc {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #888;
+}
+
+.aksrt-preset-picker__item-modules {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.aksrt-preset-picker__module-tag {
+  font-size: 11px;
+}
+</style>