liuyiwuqing 这种方式稍微有点硬核了，以下是实现步骤：
Schema 定义：
- $cmp: CoreRouteSelectorInput
name: to
props:
context: "$node.context"
CoreRouteSelectorInput.vue：
<script lang="ts" setup>
import type { FormKitFrameworkContext } from '@formkit/core';
import { ref, type PropType } from 'vue';
import TablerLinkPlus from '~icons/tabler/link-plus';
import CoreRouteSelectorModal from '../components/CoreRouteSelectorModal.vue';
const props = defineProps({
context: {
type: Object as PropType<FormKitFrameworkContext>,
required: true
}
})
const selectorModal = ref(false)
async function onInput(value: string) {
await props.context.node.settled
const rawValue = props.context.value
rawValue.to = value
props.context.node.input(rawValue)
}
function onSelect(url: string) {
onInput(url)
}
</script>
<template>
<FormKit
ref="inputRef"
type="text"
:model-value="context.value.to"
validation="required"
label="重定向目标"
@input="onInput"
>
<template #suffix>
<div
v-tooltip="'选择网站内部链接'"
class="seo-group seo-flex seo-h-full seo-cursor-pointer seo-items-center seo-border-l seo-px-3 seo-transition-all hover:seo-bg-gray-100"
@click="selectorModal = true"
>
<TablerLinkPlus class="seo-h-4 seo-w-4 seo-text-gray-500 group-hover:seo-text-gray-700" />
</div>
</template>
</FormKit>
<CoreRouteSelectorModal v-if="selectorModal" @close="selectorModal = false" @select="onSelect" />
</template>
在插件入口注册为全局组件：
export default definePlugin({
components: {
CoreRouteSelectorInput
},
})
