From 697963d628ecaf0143727586a65aa45b76eda0da Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 12 Sep 2024 13:28:20 +0800
Subject: [PATCH] feat: add menu select form item (#6642)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind feature
/milestone 2.20.x

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

为 FormKit 添加菜单选择输入类型

<img width="549" alt="image" src="https://github.com/user-attachments/assets/b5e40c1d-908f-4cdc-89d5-76f9b67ae298">

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

```release-note
为 FormKit 添加菜单选择输入类型
```
---
 ui/docs/custom-formkit-input/README.md |  1 +
 ui/src/formkit/formkit.config.ts       |  7 ++++---
 ui/src/formkit/inputs/menu-select.ts   | 25 +++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 ui/src/formkit/inputs/menu-select.ts

diff --git a/ui/docs/custom-formkit-input/README.md b/ui/docs/custom-formkit-input/README.md
index 5be4f70e1a..72a4c8de2c 100644
--- a/ui/docs/custom-formkit-input/README.md
+++ b/ui/docs/custom-formkit-input/README.md
@@ -38,6 +38,7 @@
     9. removeControl: 是否显示删除按钮，默认为 `true`
 - `menuCheckbox`：选择一组菜单
 - `menuRadio`：选择一个菜单
+- `menuSelect`: 通用菜单选择组件，支持单选、多选、排序
 - `menuItemSelect`：选择菜单项
 - `postSelect`：选择文章
 - `singlePageSelect`：选择自定义页面
diff --git a/ui/src/formkit/formkit.config.ts b/ui/src/formkit/formkit.config.ts
index 0428c45612..93108633fa 100644
--- a/ui/src/formkit/formkit.config.ts
+++ b/ui/src/formkit/formkit.config.ts
@@ -1,5 +1,5 @@
 import { en, zh } from "@formkit/i18n";
-import { group as nativeGroup } from "@formkit/inputs";
+import { group as nativeGroup, select as nativeSelect } from "@formkit/inputs";
 import { generateClasses } from "@formkit/themes";
 import type { DefaultConfigOptions } from "@formkit/vue";
 import { attachment } from "./inputs/attachment";
@@ -19,14 +19,14 @@ import { postSelect } from "./inputs/post-select";
 import { repeater } from "./inputs/repeater";
 import { roleSelect } from "./inputs/role-select";
 import { secret } from "./inputs/secret";
+import { select } from "./inputs/select";
 import { singlePageSelect } from "./inputs/singlePage-select";
 import { tagCheckbox } from "./inputs/tag-checkbox";
 import { tagSelect } from "./inputs/tag-select";
 import { verificationForm } from "./inputs/verify-form";
-import { select as nativeSelect } from "@formkit/inputs";
-import { select } from "./inputs/select";
 import theme from "./theme";
 
+import { menuSelect } from "./inputs/menu-select";
 import { userSelect } from "./inputs/user-select";
 import autoScrollToErrors from "./plugins/auto-scroll-to-errors";
 import passwordPreventAutocomplete from "./plugins/password-prevent-autocomplete";
@@ -58,6 +58,7 @@ const config: DefaultConfigOptions = {
     menuCheckbox,
     menuItemSelect,
     menuRadio,
+    menuSelect,
     nativeGroup,
     password,
     postSelect,
diff --git a/ui/src/formkit/inputs/menu-select.ts b/ui/src/formkit/inputs/menu-select.ts
new file mode 100644
index 0000000000..1ffc864659
--- /dev/null
+++ b/ui/src/formkit/inputs/menu-select.ts
@@ -0,0 +1,25 @@
+import type { FormKitNode, FormKitTypeDefinition } from "@formkit/core";
+import { coreApiClient } from "@halo-dev/api-client";
+import { select } from "./select";
+
+function optionsHandler(node: FormKitNode) {
+  node.on("created", async () => {
+    const { data } = await coreApiClient.menu.listMenu();
+
+    if (node.context) {
+      node.context.attrs.options = data.items.map((menu) => {
+        return {
+          value: menu.metadata.name,
+          label: menu.spec.displayName,
+        };
+      });
+    }
+  });
+}
+
+export const menuSelect: FormKitTypeDefinition = {
+  ...select,
+  props: [...(select.props as string[])],
+  forceTypeProp: "select",
+  features: [optionsHandler],
+};