minnan/src/pages/editor/components/DropdownDataEditor.vue

<template>
  <div class="dropdown-data-editor">
    <a-form layout="vertical" size="small">
      <a-form-item label="数据源类型">
        <a-select
          :value="currentType"
          style="width: 100%"
          :options="typeOptions"
          placeholder="选择类型"
          @change="onTypeChange"
        />
      </a-form-item>

      <template v-if="currentType === 'commonContent'">
        <a-form-item label="分类类型 ID (typeId)">
          <a-input-number
            :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.typeId"
            style="width: 100%"
            :min="1"
            placeholder="typeId"
            @update:value="(v: number | undefined) => setCommonContent('typeId', v)"
          />
        </a-form-item>
        <a-form-item label="ID 键 (idKey)">
          <a-input
            :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.idKey"
            placeholder="可选，默认 id"
            @change="(e: Event) => setCommonContent('idKey', (e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
        <a-form-item label="名称键 (nameKey)">
          <a-input
            :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.nameKey"
            placeholder="可选，默认 title"
            @change="(e: Event) => setCommonContent('nameKey', (e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
        <a-form-item label="其他参数 (otherParams)">
          <KeyValueEditor
            :model-value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.otherParams"
            @update:modelValue="setCommonContentOtherParams"
          />
        </a-form-item>
      </template>

      <template v-else-if="currentType === 'static'">
        <a-form-item label="静态数据 (data) JSON 数组">
          <a-input
            :value="staticDataJson"
            placeholder='[{"id": 1, "title": "选项1"}]'
            :rows="4"
            @change="(e: Event) => setStaticData((e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
        <a-form-item label="ID 键 (idKey)">
          <a-input
            :value="(modelValue as IHomeCommonCategoryDropdownStaticData)?.idKey"
            placeholder="可选"
            @change="(e: Event) => setStatic('idKey', (e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
        <a-form-item label="名称键 (nameKey)">
          <a-input
            :value="(modelValue as IHomeCommonCategoryDropdownStaticData)?.nameKey"
            placeholder="可选"
            @change="(e: Event) => setStatic('nameKey', (e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
      </template>

      <template v-else-if="currentType === 'request'">
        <a-form-item label="请求方法 (method)">
          <a-select
            :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.method"
            style="width: 100%"
            :options="methodOptions"
            @change="(v: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE') => setRequest('method', v)"
          />
        </a-form-item>
        <a-form-item label="请求 URL (url)">
          <a-input
            :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.url"
            placeholder="https://..."
            @change="(e: Event) => setRequest('url', (e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
        <a-form-item label="查询参数 (querys)">
          <KeyValueEditor
            :model-value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.querys"
            @update:modelValue="setRequestQuerys"
          />
        </a-form-item>
        <a-form-item label="请求体参数 (params)">
          <KeyValueEditor
            :model-value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.params"
            @update:modelValue="setRequestParams"
          />
        </a-form-item>
        <a-form-item label="ID 键 (idKey)">
          <a-input
            :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.idKey"
            placeholder="可选"
            @change="(e: Event) => setRequest('idKey', (e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
        <a-form-item label="名称键 (nameKey)">
          <a-input
            :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.nameKey"
            placeholder="可选"
            @change="(e: Event) => setRequest('nameKey', (e.target as HTMLInputElement)?.value)"
          />
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import KeyValueEditor from './KeyValueEditor.vue';
import type {
  IHomeCommonCategoryDropdownDynamicData,
  IHomeCommonCategoryDropdownDynamicDataCommonContent,
  IHomeCommonCategoryDropdownDynamicDataRequest,
  IHomeCommonCategoryDropdownStaticData,
} from '@/pages/article/data/data-defines/Dropdown';

const props = defineProps<{
  modelValue?: IHomeCommonCategoryDropdownDynamicData | null;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', v: IHomeCommonCategoryDropdownDynamicData | undefined): void;
}>();

const typeOptions = [
  { value: 'commonContent', label: '通用内容 (commonContent)' },
  { value: 'static', label: '静态数据 (static)' },
  { value: 'request', label: '请求 (request)' },
];

const methodOptions = [
  { value: 'GET', label: 'GET' },
  { value: 'POST', label: 'POST' },
  { value: 'PUT', label: 'PUT' },
  { value: 'DELETE', label: 'DELETE' },
  { value: 'HEAD', label: 'HEAD' },
  { value: 'OPTIONS', label: 'OPTIONS' },
];

const currentType = computed(() => props.modelValue?.type ?? null);

const staticDataJson = computed(() => {
  const cur = props.modelValue as IHomeCommonCategoryDropdownStaticData | undefined;
  if (!cur?.data) return '';
  try {
    return Array.isArray(cur.data) ? JSON.stringify(cur.data, null, 2) : '';
  } catch {
    return '';
  }
});

function onTypeChange(type: 'commonContent' | 'static' | 'request') {
  if (type === 'commonContent') {
    emit('update:modelValue', { type: 'commonContent', typeId: 1 });
  } else if (type === 'static') {
    emit('update:modelValue', { type: 'static', data: [] });
  } else if (type === 'request') {
    emit('update:modelValue', { type: 'request', method: 'GET', url: '' });
  }
}

function setCommonContent(key: 'typeId' | 'idKey' | 'nameKey', value: number | string | undefined) {
  const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent | undefined;
  if (!cur || cur.type !== 'commonContent') return;
  const next = { ...cur, [key]: value };
  emit('update:modelValue', next);
}

function setCommonContentOtherParams(otherParams: Record<string, any>) {
  const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent | undefined;
  if (!cur || cur.type !== 'commonContent') return;
  const value = otherParams && Object.keys(otherParams).length > 0 ? otherParams : undefined;
  emit('update:modelValue', { ...cur, otherParams: value });
}

function setStatic(key: 'idKey' | 'nameKey', value: string | undefined) {
  const cur = props.modelValue as IHomeCommonCategoryDropdownStaticData | undefined;
  if (!cur || cur.type !== 'static') return;
  emit('update:modelValue', { ...cur, [key]: value || undefined });
}

function setStaticData(str: string) {
  const cur = props.modelValue as IHomeCommonCategoryDropdownStaticData | undefined;
  if (!cur || cur.type !== 'static') return;
  let data: Record<string, any>[];
  try {
    const parsed = str?.trim() ? JSON.parse(str) : [];
    data = Array.isArray(parsed) ? parsed : [];
  } catch {
    return;
  }
  emit('update:modelValue', { ...cur, data });
}

function setRequest(
  key: 'method' | 'url' | 'idKey' | 'nameKey',
  value: string | undefined
) {
  const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataRequest | undefined;
  if (!cur || cur.type !== 'request') return;
  const next = { ...cur, [key]: value } as IHomeCommonCategoryDropdownDynamicDataRequest;
  emit('update:modelValue', next);
}

function setRequestQuerys(querys: Record<string, any>) {
  const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataRequest | undefined;
  if (!cur || cur.type !== 'request') return;
  const value = querys && Object.keys(querys).length > 0 ? querys : undefined;
  emit('update:modelValue', { ...cur, querys: value });
}

function setRequestParams(params: Record<string, any>) {
  const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataRequest | undefined;
  if (!cur || cur.type !== 'request') return;
  const value = params && Object.keys(params).length > 0 ? params : undefined;
  emit('update:modelValue', { ...cur, params: value });
}
</script>

<style scoped>
.dropdown-data-editor {
  font-size: 12px;
  margin-left: 8px;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}
</style>