feat: add role select input type for formkit (#3641)

#### What type of PR is this?

/kind feature
/area console
/milestone 2.4.0

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

添加角色选择的 FormKit 输入类型。

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

Fixes #3637 

#### Special notes for your reviewer:

测试方式：

1. 测试为用户分配角色，检查角色下拉框是否正常加载角色列表即可。

#### Does this PR introduce a user-facing change?

<!--
如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。
否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change），
Release Note 需要以 `action required` 开头。
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->

```release-note
Console 端添加角色选择的 FormKit 输入类型。
```

console/src/formkit/formkit.config.ts

@@ -15,6 +15,7 @@ import { tagSelect } from "./inputs/tag-select";
 import { categorySelect } from "./inputs/category-select";
 import { categoryCheckbox } from "./inputs/category-checkbox";
 import { tagCheckbox } from "./inputs/tag-checkbox";
+import { roleSelect } from "./inputs/role-select";
 
 import radioAlt from "./plugins/radio-alt";
 import stopImplicitSubmission from "./plugins/stop-implicit-submission";
@@ -39,6 +40,7 @@ const config: DefaultConfigOptions = {
     singlePageSelect,
     categoryCheckbox,
     tagCheckbox,
+    roleSelect,
   },
   locales: { zh, en },
   locale: "zh",

console/src/formkit/inputs/role-select.ts

@@ -0,0 +1,40 @@
+import { rbacAnnotations } from "@/constants/annotations";
+import { roleLabels } from "@/constants/labels";
+import { apiClient } from "@/utils/api-client";
+import type { FormKitNode, FormKitTypeDefinition } from "@formkit/core";
+import { select, selects, defaultIcon } from "@formkit/inputs";
+import { i18n } from "@/locales";
+
+function optionsHandler(node: FormKitNode) {
+  node.on("created", async () => {
+    const { data } = await apiClient.extension.role.listv1alpha1Role({
+      page: 0,
+      size: 0,
+      labelSelector: [`!${roleLabels.TEMPLATE}`],
+    });
+
+    node.props.options = [
+      {
+        label: i18n.global.t(
+          "core.user.grant_permission_modal.fields.role.placeholder"
+        ),
+        value: "",
+      },
+      ...data.items.map((role) => {
+        return {
+          label:
+            role.metadata?.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
+            role.metadata.name,
+          value: role.metadata?.name,
+        };
+      }),
+    ];
+  });
+}
+
+export const roleSelect: FormKitTypeDefinition = {
+  ...select,
+  props: ["placeholder"],
+  forceTypeProp: "select",
+  features: [optionsHandler, selects, defaultIcon("select", "select")],
+};

console/src/modules/system/users/components/GrantPermissionModal.vue

@@ -1,15 +1,9 @@
 <script lang="ts" setup>
-import { rbacAnnotations } from "@/constants/annotations";
 import { apiClient } from "@/utils/api-client";
-import type { FormKitOptionsList } from "@formkit/inputs";
 import type { User } from "@halo-dev/api-client";
 import { VModal, VSpace, VButton } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
-import { computed, ref } from "vue";
+import { ref } from "vue";
-import { useFetchRole } from "../../roles/composables/use-role";
-import { useI18n } from "vue-i18n";
-
-const { t } = useI18n();
 
 const props = withDefaults(
   defineProps<{
@@ -30,24 +24,6 @@ const emit = defineEmits<{
 const selectedRole = ref("");
 const saving = ref(false);
 
-const { roles } = useFetchRole();
-const rolesMap = computed<FormKitOptionsList>(() => {
-  return [
-    {
-      label: t("core.user.grant_permission_modal.fields.role.placeholder"),
-      value: "",
-    },
-    ...roles.value.map((role) => {
-      return {
-        label:
-          role.metadata?.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
-          role.metadata.name,
-        value: role.metadata?.name,
-      };
-    }),
-  ];
-});
-
 const handleGrantPermission = async () => {
   try {
     saving.value = true;
@@ -89,9 +65,8 @@ const onVisibleChange = (visible: boolean) => {
     >
       <FormKit
         v-model="selectedRole"
-        :options="rolesMap"
         :label="$t('core.user.grant_permission_modal.fields.role.label')"
-        type="select"
+        type="roleSelect"
       ></FormKit>
     </FormKit>
     <template #footer>