插件如何自定义输入组件

liuyiwuqing

目前halo官方提供了部分自定义输入组件，但是依旧不能满足插件的需求。
在查阅halo文档表单定义时，发现可以实现类似menuRadio、postSelect、tagSelect等输入组件，查阅到formkit的Custom inputs支持createInput创建输入，但是不知道该如何在halo插件中使用，请问是否可以指导一下，或者在halo插件开发文档中完善教程。

Ryan Wang 👍

FormKit 不支持在运行阶段添加 input 或者插件，如果你需要为插件的设置表单提供复杂或者包含逻辑的表单，目前你可以自行编写 UI。https://docs.halo.run/developer-guide/plugin/api-reference/ui/extension-points/plugin-self-tabs-create

liuyiwuqing

Ryan Wang 👍
目前发现在 SEO 工具集是有实现的

liuyiwuqing

Ryan Wang 👍
可以看下这个issues，表单定义中是否可以新增组件类型LinkGroupSelect #5449

Ryan Wang 👍

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
  },
})

liuyiwuqing

Ryan Wang 👍
万分感谢👍

坑打

楼主这个能实现么，我自己写的出不来，能付费给解答一下么

坑打

const props = defineProps({
context: {
type: Object as () => FormKitFrameworkContext,
required: true
}
})

// 控制是否显示自定义模态框
const showSimpleModal = ref(false)

// 模拟一些可用的内部链接选项
const internalLinks = [
{ label: '首页', value: '/' },
{ label: '关于我们', value: '/about' },
{ label: '联系我们', value: '/contact' },
{ label: '服务页面', value: '/services' }
]

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) {
const rawValue = props.context.value
rawValue.to = url
props.context.node.input(rawValue)
showSimpleModal.value = false
}
</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="showSimpleModal = true"
  >
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
    </svg>
  </div>
</template>

</FormKit>

<div v-if="showSimpleModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white rounded shadow-lg p-4 w-80">
<h3 class="text-lg font-semibold mb-2">选择内部链接</h3>
<ul>
<li
v-for="link in internalLinks"
:key="link.value"
class="py-1 px-2 hover:bg-gray-100 cursor-pointer"
@click="onSelect(link.value)"
>
{{ link.label }}
</li>
</ul>
<button
class="mt-4 bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600"
@click="showSimpleModal = false"
>
关闭
</button>
</div>
</div>
</template>

import { definePlugin } from "@halo-dev/console-shared";
import HomeView from "./views/HomeView.vue";
import { IconPlug } from "@halo-dev/components";
import { markRaw } from "vue";
import SelectVI from "@/views/SelectUI.vue";

export default definePlugin({
components: {
SelectUI
},
routes: [

],
extensionPoints: {},
});
- $cmp: SelectSp
name: tags
props:
context: "$node.context"是我理解的不对么，前端没有展示出来