koishi-plugin-media-luna 0.0.30 → 0.0.32

package/client/components/ConfigRenderer.vue

@@ -32,6 +32,26 @@
             </el-select>
           </template>
 
+          <!-- Select Remote 类型（远程获取选项） -->
+          <template v-else-if="field.type === 'select-remote'">
+            <el-select
+              :model-value="getFieldValue(field.key)"
+              @update:model-value="setFieldValue(field.key, $event)"
+              :placeholder="field.placeholder || '请选择'"
+              :clearable="clearable"
+              :loading="isRemoteLoading(field)"
+              filterable
+              style="width: 100%"
+            >
+              <el-option
+                v-for="opt in getRemoteOptions(field)"
+                :key="String(opt.value)"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+          </template>
+
           <!-- Number 类型 -->
           <template v-else-if="field.type === 'number'">
             <el-input-number
@@ -94,9 +114,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject, ref, watch, onMounted } from 'vue'
 import type { ConfigField, TableColumnDefinition } from '../types'
 import TableFieldEditor from './TableFieldEditor.vue'
+import { send } from '@koishijs/client'
 
 interface Props {
   /** 配置字段定义 */
@@ -118,6 +139,103 @@ const emit = defineEmits<{
   'update:modelValue': [value: Record<string, any>]
 }>()
 
+// ============ 远程选项缓存 ============
+const remoteOptionsCache = ref<Record<string, { label: string; value: any }[]>>({})
+const remoteOptionsLoading = ref<Record<string, boolean>>({})
+
+// 构建带参数的缓存 key
+const buildCacheKey = (source: string, params?: Record<string, any>) => {
+  if (!params || Object.keys(params).length === 0) {
+    return source
+  }
+  const sortedParams = Object.keys(params).sort().map(k => `${k}=${params[k]}`).join('&')
+  return `${source}?${sortedParams}`
+}
+
+// 获取远程选项（支持带参数）
+const fetchRemoteOptions = async (source: string, params?: Record<string, any>) => {
+  const cacheKey = buildCacheKey(source, params)
+
+  if (remoteOptionsCache.value[cacheKey] || remoteOptionsLoading.value[cacheKey]) {
+    return
+  }
+
+  remoteOptionsLoading.value[cacheKey] = true
+  try {
+    const result = await send(source, params)
+    if (result?.success && Array.isArray(result.data)) {
+      remoteOptionsCache.value[cacheKey] = result.data
+    } else {
+      remoteOptionsCache.value[cacheKey] = []
+    }
+  } catch (e) {
+    console.error(`Failed to fetch options from ${source}:`, e)
+    remoteOptionsCache.value[cacheKey] = []
+  } finally {
+    remoteOptionsLoading.value[cacheKey] = false
+  }
+}
+
+// 获取字段的参数（基于 dependsOn）
+const getFieldParams = (field: ConfigField): Record<string, any> | undefined => {
+  if (!field.dependsOn) return undefined
+  const dependValue = props.modelValue[field.dependsOn]
+  if (dependValue === undefined || dependValue === null || dependValue === '') {
+    return undefined
+  }
+  return { [field.dependsOn]: dependValue }
+}
+
+// 获取字段的缓存 key
+const getFieldCacheKey = (field: ConfigField): string => {
+  if (!field.optionsSource) return ''
+  const params = getFieldParams(field)
+  return buildCacheKey(field.optionsSource, params)
+}
+
+// 获取远程选项（同步访问缓存）
+const getRemoteOptions = (field: ConfigField) => {
+  const cacheKey = getFieldCacheKey(field)
+  if (!cacheKey) return []
+  return remoteOptionsCache.value[cacheKey] || []
+}
+
+// 检查是否正在加载
+const isRemoteLoading = (field: ConfigField) => {
+  const cacheKey = getFieldCacheKey(field)
+  if (!cacheKey) return false
+  return remoteOptionsLoading.value[cacheKey] || false
+}
+
+// 加载字段的远程选项
+const loadFieldOptions = (field: ConfigField) => {
+  if (field.type !== 'select-remote' || !field.optionsSource) return
+  const params = getFieldParams(field)
+  fetchRemoteOptions(field.optionsSource, params)
+}
+
+// 在组件挂载时预加载所有远程选项
+onMounted(() => {
+  for (const field of props.fields) {
+    loadFieldOptions(field)
+  }
+})
+
+// 监听依赖字段变化，重新加载选项
+watch(() => props.modelValue, (newVal, oldVal) => {
+  for (const field of props.fields) {
+    if (field.type === 'select-remote' && field.dependsOn && field.optionsSource) {
+      const newDependValue = newVal[field.dependsOn]
+      const oldDependValue = oldVal?.[field.dependsOn]
+
+      if (newDependValue !== oldDependValue) {
+        // 依赖字段变化，重新加载选项
+        loadFieldOptions(field)
+      }
+    }
+  }
+}, { deep: true })
+
 // 获取字段值
 const getFieldValue = (key: string) => {
   return props.modelValue[key]