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

<template>
  <a-form-item class="link-path-editor" label="跳转路径">
    <a-collapse v-model:activeKey="activeKey" ghost>
      <a-collapse-panel key="1" header="设置">
        <a-form-item>
          <div class="path-selector">
            <a-select 
              v-model:value="pathType" 
              style="width: 150px; margin-right: 8px" 
              @change="handlePathTypeChange"
            >
              <a-select-option value="dynamic-list">动态页面列表</a-select-option>
              <a-select-option value="internal">程序内置页面</a-select-option>
              <a-select-option value="custom">自定义输入</a-select-option>
            </a-select>
            
            <!-- 动态页面地址 -->
            <a-select 
              v-if="pathType === 'dynamic-list'"
              v-model:value="localPageConfigName"
              style="flex: 1"
              @change="updateLink"
              placeholder="请选择动态页面"
            >
              <a-select-option 
                v-for="page in pageList" 
                :key="page.name" 
                :value="page.name"
              >
                {{ page.title }} ({{ page.name }})
              </a-select-option>
            </a-select>
            
            <!-- 程序内置页面 -->
            <a-select 
              v-else-if="pathType === 'internal'"
              v-model:value="linkPath"
              style="flex: 1"
              @change="updateLink"
              placeholder="请选择内置页面"
            >
              <a-select-option 
                v-for="page in internalPages" 
                :key="page.path" 
                :value="page.path"
              >
                {{ page.path }}
              </a-select-option>
            </a-select>
            
            <!-- 自定义输入 -->
            <a-input
              v-else-if="pathType === 'custom'"
              v-model:value="linkPath"
              placeholder="请输入跳转路径"
              @change="updateLink"
              style="flex: 1"
            />
          </div>
        </a-form-item>    
        <a-form-item v-if="pathType !== 'dynamic-list'" label="参数设置">
          <KeyValueEditor
            v-model="localParams"
            :forceOneLevel="true"
            :defaultCreateTemplate="{ key: '', value: '', type: 'string' }"
          />
        </a-form-item>
      </a-collapse-panel>
    </a-collapse>
  </a-form-item>
</template>

<script setup lang="ts">
import { inject, ref, watch, computed } from 'vue';
import KeyValueEditor from './KeyValueEditor.vue';
import type { IHomeCommonCategoryDefine } from '@/pages/article/data/CommonCategoryDefine';
import PagesJson from '@/pages.json';
import { CommonCategoryListPath } from '@/pages/article/data/CommonCategoryPathDefine';

// 定义props
const props = defineProps<{
  modelValue?: string|[string, object]|undefined;
}>();
const emit = defineEmits<{
  (e: 'update:modelValue', value: [string, object]): void;
}>();

const pageList = inject<(IHomeCommonCategoryDefine['page'][0])[]>('pageList', []);
const activeKey = ref('');

// 跳转路径类型
const pathType = ref<'dynamic-list' | 'internal' | 'custom'>('custom');
// 跳转路径
const linkPath = ref('');
const localPageConfigName = ref('');
const localParams = ref<Record<string, string>>({});

// 从PagesJson中提取内置页面
const internalPages = computed(() => {
  if (!PagesJson || !PagesJson.pages) {
    return [];
  }
  return PagesJson.pages.map((page: any) => ({
    path: "/" + page.path
  }));
});

// 监听参数变化
watch(
  () => props.modelValue,
  (newValue) => {
    if (Array.isArray(newValue)) {
      linkPath.value = newValue[0] || '';
      localParams.value = newValue[1] as Record<string, string> || {};
    } else {
      linkPath.value = newValue || '';
      localParams.value = {};
    }
    if (linkPath.value == CommonCategoryListPath) {
      pathType.value = 'dynamic-list';
      localPageConfigName.value = localParams.value.pageConfigName || '';
    } else if (linkPath.value.startsWith('/pages/')) {
      pathType.value = 'internal';
    } else {
      pathType.value = 'custom';
    }
  },
  { deep: true, immediate: true }
);
watch(
  localParams,
  () => {
    updateLink();
  },
  { deep: true }
);

// 处理路径类型变化
const handlePathTypeChange = () => {
  updateLink();
};

// 更新链接
const updateLink = () => {
  if (pathType.value === 'dynamic-list') {
    localParams.value = {
      pageConfigName: localPageConfigName.value || '',
    };
    linkPath.value = CommonCategoryListPath;
  }
  emit('update:modelValue', [
    linkPath.value,
    localParams.value,
  ]);
};
</script>

<style lang="scss" scoped>
.link-path-editor {
  ::v-deep .ant-collapse-header {
    padding: 0 !important;
  }
  .path-selector {
    display: flex;
    align-items: center;
  }
}
</style>