pref: add parameter to formkit select component for remote search by …

…specific field (#6591)

#### What type of PR is this?

/kind improvment
/area ui
/milestone 2.20.x

#### What this PR does / why we need it:

为 Formkit Select 组件增加 `fieldSelectorKey` 字段，用于在使用 `fieldSelector` 字段远程查询时，指定查询所使用的 Key。

例如指定 `fieldSelectorKey` 为 `metadata.name` 则接口调用时的参数为 `fieldSelector: metadata.name=(admin)`。

#### How to test it?

测试在远程搜索时，`fieldSelector` 的查询 key 是否为设置的内容。

#### Which issue(s) this PR fixes:

Fixes #6589 

#### Does this PR introduce a user-facing change?
```release-note
为 Formkit Select 组件远程查询增加指定 Key 的字段。
```

ui/docs/custom-formkit-input/README.md

@@ -231,10 +231,11 @@ const handleSelectPostAuthorRemote = {
     itemsField: items
     labelField: post.spec.title
     valueField: post.metadata.name
+    fieldSelectorKey: metadata.name
 ```
 
 > [!NOTE]
-> 当远程数据具有分页时，可能会出现默认选项不在第一页的情况，此时 Select 组件将会发送另一个查询请求，以获取默认选项的数据。此接口会携带如下参数 `fieldSelector: ${requestOption.valueField}=(value1,value2,value3)`。
+> 当远程数据具有分页时，可能会出现默认选项不在第一页的情况，此时 Select 组件将会发送另一个查询请求，以获取默认选项的数据。此接口会携带如下参数 `fieldSelector: ${requestOption.fieldSelectorKey}=(value1,value2,value3)`。
 
 > 其中，value1, value2, value3 为默认选项的值。返回值与查询一致，通过 `requestOption` 解析。
 

ui/src/formkit/inputs/select/SelectMain.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
 import type { FormKitFrameworkContext } from "@formkit/core";
+import { axiosInstance } from "@halo-dev/api-client";
+import { useDebounceFn } from "@vueuse/core";
+import { useFuse } from "@vueuse/integrations/useFuse";
+import type { AxiosRequestConfig } from "axios";
+import { get, has, type PropertyPath } from "lodash-es";
 import {
   computed,
   onMounted,
@@ -10,11 +15,6 @@ import {
   type PropType,
 } from "vue";
 import SelectContainer from "./SelectContainer.vue";
-import { axiosInstance } from "@halo-dev/api-client";
-import { get, has, type PropertyPath } from "lodash-es";
-import { useDebounceFn } from "@vueuse/core";
-import { useFuse } from "@vueuse/integrations/useFuse";
-import type { AxiosRequestConfig } from "axios";
 
 export interface SelectProps {
   /**
@@ -159,6 +159,12 @@ export interface SelectActionRequest {
    * Field name for value, default is `value`.
    */
   valueField?: PropertyPath;
+
+  /**
+   * When using value to query detailed information, the default query
+   * parameter key for fieldSelector is `metadata.name`.
+   */
+  fieldSelectorKey?: PropertyPath;
 }
 
 const props = defineProps({
@@ -209,6 +215,8 @@ const initSelectProps = () => {
       itemsField: "items",
       labelField: "label",
       valueField: "value",
+      totalField: "total",
+      fieldSelectorKey: "metadata.name",
       pageField: "page",
       sizeField: "size",
       parseData: undefined,
@@ -481,13 +489,13 @@ const fetchRemoteMappedOptions = async (
   };
   if (requestConfig.method === "GET") {
     requestConfig.params = {
-      fieldSelector: `${selectProps.requestOption?.valueField?.toString()}=(${unmappedSelectValues.join(
+      fieldSelector: `${selectProps.requestOption?.fieldSelectorKey?.toString()}=(${unmappedSelectValues.join(
         ","
       )})`,
     };
   } else {
     requestConfig.data = {
-      fieldSelector: `${selectProps.requestOption?.valueField?.toString()}=(${unmappedSelectValues.join(
+      fieldSelector: `${selectProps.requestOption?.fieldSelectorKey?.toString()}=(${unmappedSelectValues.join(
         ","
       )})`,
     };