feat: menu items support setting singlePage ref relations (halo-dev/console#608)

#### What type of PR is this?

/kind feature
/milestone 2.0

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

菜单项支持绑定自定义页面。适配 https://github.com/halo-dev/halo/pull/2395

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

#### Screenshots:

#### Special notes for your reviewer:

功能测试步骤：

1. 本地仓库 Checkout 到当前 PR。
2. Halo 后端需要 Checkout 到 https://github.com/halo-dev/halo/pull/2395/files PR。
3. 更新依赖：pnpm install
4. 构建依赖包：pnpm build:packages
5. 进入后台的自定义页面并新建页面。
6. 进入菜单管理，添加类型为自定义页面的菜单项。
7. 检查最终菜单项提供的显示名称和 permalink 是否正确。
8. 修改页面标题或者 slug，再检查最终菜单项的显示名称和 permalink 是否有自动修改。

/hold until https://github.com/halo-dev/halo-admin/pull/606 merge

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

```release-note
None
```

package.json

@@ -33,7 +33,7 @@
     "@formkit/themes": "1.0.0-beta.10",
     "@formkit/vue": "1.0.0-beta.10",
     "@halo-dev/admin-shared": "workspace:*",
-    "@halo-dev/api-client": "^0.0.17",
+    "@halo-dev/api-client": "^0.0.18",
     "@halo-dev/components": "workspace:*",
     "@halo-dev/richtext-editor": "^0.0.0-alpha.6",
     "@tiptap/extension-character-count": "2.0.0-beta.31",

packages/shared/package.json

@@ -38,7 +38,7 @@
   "homepage": "https://github.com/halo-dev/halo-admin/tree/next/shared/components#readme",
   "license": "MIT",
   "dependencies": {
-    "@halo-dev/api-client": "^0.0.17",
+    "@halo-dev/api-client": "^0.0.18",
     "@halo-dev/components": "workspace:*",
     "axios": "^0.27.2",
     "lodash.merge": "^4.6.2"

pnpm-lock.yaml

@@ -13,7 +13,7 @@ importers:
       '@formkit/themes': 1.0.0-beta.10
       '@formkit/vue': 1.0.0-beta.10
       '@halo-dev/admin-shared': workspace:*
-      '@halo-dev/api-client': ^0.0.17
+      '@halo-dev/api-client': ^0.0.18
       '@halo-dev/components': workspace:*
       '@halo-dev/richtext-editor': ^0.0.0-alpha.6
       '@iconify-json/vscode-icons': ^1.1.11
@@ -92,7 +92,7 @@ importers:
       '@formkit/themes': 1.0.0-beta.10_tailwindcss@3.1.8
       '@formkit/vue': 1.0.0-beta.10_wwmyxdjqen5bmh3tr2meig5lki
       '@halo-dev/admin-shared': link:packages/shared
-      '@halo-dev/api-client': 0.0.17
+      '@halo-dev/api-client': 0.0.18
       '@halo-dev/components': link:packages/components
       '@halo-dev/richtext-editor': 0.0.0-alpha.6_vue@3.2.37
       '@tiptap/extension-character-count': 2.0.0-beta.31
@@ -194,14 +194,14 @@ importers:
 
   packages/shared:
     specifiers:
-      '@halo-dev/api-client': ^0.0.17
+      '@halo-dev/api-client': ^0.0.18
       '@halo-dev/components': workspace:*
       '@types/lodash.merge': ^4.6.7
       axios: ^0.27.2
       lodash.merge: ^4.6.2
       vite-plugin-dts: ^1.4.1
     dependencies:
-      '@halo-dev/api-client': 0.0.17
+      '@halo-dev/api-client': 0.0.18
       '@halo-dev/components': link:../components
       axios: 0.27.2
       lodash.merge: 4.6.2
@@ -2129,8 +2129,8 @@ packages:
       - windicss
     dev: false
 
-  /@halo-dev/api-client/0.0.17:
-    resolution: {integrity: sha512-+OCYSioOxkaxN71t1mHOACw/pkF84nGd04jtS5Ak4FbrtBb4T2sJ+P76r8BwwG2uCk3lss1PkeDdP9/QxfUfxQ==}
+  /@halo-dev/api-client/0.0.18:
+    resolution: {integrity: sha512-khc0ujB/fTyDnIvqqzTWeZOLz3R/SiaqsmM5h1JS7W9C6UxPgDLW2cDz450A5fOqc0i6BFbtiQ91gicqEWMXuA==}
     dev: false
 
   /@halo-dev/richtext-editor/0.0.0-alpha.6_vue@3.2.37:

src/modules/interface/menus/components/MenuItemEditingModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 import { computed, ref, watch, watchEffect } from "vue";
-import type { MenuItem, Post } from "@halo-dev/api-client";
+import type { MenuItem, Post, SinglePage } from "@halo-dev/api-client";
 import { v4 as uuid } from "uuid";
 import { apiClient } from "@halo-dev/admin-shared";
 import { reset, submitForm } from "@formkit/core";
@@ -127,7 +127,8 @@ watch(
       formState.value = cloneDeep(menuItem);
 
       // Set Ref related
-      const { postRef, categoryRef, tagRef } = formState.value.spec;
+      const { postRef, categoryRef, tagRef, singlePageRef } =
+        formState.value.spec;
 
       if (postRef) {
         selectedMenuItemSource.value = "post";
@@ -143,6 +144,11 @@ watch(
         selectedMenuItemSource.value = "tag";
         selectedRef.value = tagRef.name;
       }
+
+      if (singlePageRef) {
+        selectedMenuItemSource.value = "singlePage";
+        selectedRef.value = singlePageRef.name;
+      }
     } else {
       handleResetForm();
     }
@@ -153,8 +159,8 @@ watch(
 interface MenuItemSource {
   label: string;
   value: string;
-  ref?: "postRef" | "categoryRef" | "tagRef";
-  kind?: "Post" | "Category" | "Tag";
+  ref?: "postRef" | "categoryRef" | "tagRef" | "singlePageRef";
+  kind?: "Post" | "Category" | "Tag" | "SinglePage";
 }
 
 const menuItemSources: MenuItemSource[] = [
@@ -168,6 +174,12 @@ const menuItemSources: MenuItemSource[] = [
     ref: "postRef",
     kind: "Post",
   },
+  {
+    label: "自定义页面",
+    value: "singlePage",
+    ref: "singlePageRef",
+    kind: "SinglePage",
+  },
   {
     label: "分类",
     value: "category",
@@ -187,6 +199,7 @@ const selectedMenuItemSource = ref<string>(menuItemSources[0].value);
 const { categories, handleFetchCategories } = usePostCategory();
 const { tags, handleFetchTags } = usePostTag();
 const posts = ref<Post[]>([] as Post[]);
+const singlePages = ref<SinglePage[]>([] as SinglePage[]);
 
 const postMap = computed(() => {
   return [
@@ -200,6 +213,21 @@ const postMap = computed(() => {
   ];
 });
 
+const singlePageMap = computed(() => {
+  return [
+    {
+      label: "请选择自定义页面",
+      value: undefined,
+    },
+    ...singlePages.value.map((singlePage) => {
+      return {
+        label: singlePage.spec.title,
+        value: singlePage.metadata.name,
+      };
+    }),
+  ];
+});
+
 const categoryMap = computed(() => {
   return [
     {
@@ -241,6 +269,15 @@ const handleFetchPosts = async () => {
   posts.value = data.items;
 };
 
+const handleFetchSinglePages = async () => {
+  const { data } =
+    await apiClient.extension.singlePage.listcontentHaloRunV1alpha1SinglePage({
+      page: 0,
+      size: 0,
+    });
+  singlePages.value = data.items;
+};
+
 const onMenuItemSourceChange = () => {
   selectedRef.value = "";
 };
@@ -252,6 +289,7 @@ watch(
       handleFetchCategories();
       handleFetchTags();
       handleFetchPosts();
+      handleFetchSinglePages();
     }
   }
 );
@@ -298,6 +336,15 @@ watch(
         validation="required"
       ></FormKit>
 
+      <FormKit
+        v-if="selectedMenuItemSource === 'singlePage'"
+        v-model="selectedRef"
+        label="自定义页面"
+        type="select"
+        :options="singlePageMap"
+        validation="required"
+      ></FormKit>
+
       <FormKit
         v-if="selectedMenuItemSource === 'tag'"
         v-model="selectedRef"

src/modules/interface/menus/components/MenuItemListItem.vue

@@ -43,6 +43,9 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
   if (menuItem.spec.postRef) {
     return "文章";
   }
+  if (menuItem.spec.singlePageRef) {
+    return "自定义页面";
+  }
   if (menuItem.spec.categoryRef) {
     return "分类";
   }