feat: add slug generation rules to post saving feature in the post editing page (#6205)

#### What type of PR is this?

/area ui
/kind feature
/milestone 2.17.x

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

支持在文章编辑页面创建文章时，也应用别名生成规则

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

Fixes https://github.com/halo-dev/halo/issues/5118
Fixes https://github.com/halo-dev/halo/issues/6155

#### Special notes for your reviewer:

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

```release-note
支持在文章编辑页面创建文章时，也应用别名生成规则
```

ui/console-src/modules/contents/posts/PostEditor.vue

@@ -6,10 +6,12 @@ import { useContentCache } from "@/composables/use-content-cache";
 import { useEditorExtensionPoints } from "@/composables/use-editor-extension-points";
 import { useSessionKeepAlive } from "@/composables/use-session-keep-alive";
 import { contentAnnotations } from "@/constants/annotations";
+import { FormType } from "@/types/slug";
 import { randomUUID } from "@/utils/id";
 import { usePermission } from "@/utils/permission";
 import { useContentSnapshot } from "@console/composables/use-content-snapshot";
 import { useSaveKeybinding } from "@console/composables/use-save-keybinding";
+import useSlugify from "@console/composables/use-slugify";
 import type { Post, PostRequest } from "@halo-dev/api-client";
 import {
   consoleApiClient,
@@ -468,6 +470,21 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
   );
   return data;
 }
+
+// Slug generation
+useSlugify(
+  computed(() => formState.value.post.spec.title),
+  computed({
+    get() {
+      return formState.value.post.spec.slug;
+    },
+    set(value) {
+      formState.value.post.spec.slug = value;
+    },
+  }),
+  computed(() => !isUpdateMode.value),
+  FormType.POST
+);
 </script>
 
 <template>

ui/uc-src/modules/contents/posts/PostEditor.vue

@@ -6,9 +6,11 @@ import { useContentCache } from "@/composables/use-content-cache";
 import { useEditorExtensionPoints } from "@/composables/use-editor-extension-points";
 import { useSessionKeepAlive } from "@/composables/use-session-keep-alive";
 import { contentAnnotations } from "@/constants/annotations";
+import { FormType } from "@/types/slug";
 import { randomUUID } from "@/utils/id";
 import { usePermission } from "@/utils/permission";
 import { useSaveKeybinding } from "@console/composables/use-save-keybinding";
+import useSlugify from "@console/composables/use-slugify";
 import type { Content, Post, Snapshot } from "@halo-dev/api-client";
 import { ucApiClient } from "@halo-dev/api-client";
 import {
@@ -437,6 +439,21 @@ async function handleUploadImage(file: File, options?: AxiosRequestConfig) {
 
 // Keep session alive
 useSessionKeepAlive();
+
+// Slug generation
+useSlugify(
+  computed(() => formState.value.spec.title),
+  computed({
+    get() {
+      return formState.value.spec.slug;
+    },
+    set(value) {
+      formState.value.spec.slug = value;
+    },
+  }),
+  computed(() => !isUpdateMode.value),
+  FormType.POST
+);
 </script>
 
 <template>