From c1ca8d14b752a8074f7690481a900da30d5816ff Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 30 Jun 2024 00:37:20 +0800
Subject: [PATCH] feat: add slug generation rules to post saving feature in the
 post editing page (#6205)
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.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
支持在文章编辑页面创建文章时，也应用别名生成规则
```
---
 .../modules/contents/posts/PostEditor.vue       | 17 +++++++++++++++++
 ui/uc-src/modules/contents/posts/PostEditor.vue | 17 +++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/ui/console-src/modules/contents/posts/PostEditor.vue b/ui/console-src/modules/contents/posts/PostEditor.vue
index ca4059b1a..17cc5cb01 100644
--- a/ui/console-src/modules/contents/posts/PostEditor.vue
+++ b/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>
diff --git a/ui/uc-src/modules/contents/posts/PostEditor.vue b/ui/uc-src/modules/contents/posts/PostEditor.vue
index b6c4dd231..1de04b98d 100644
--- a/ui/uc-src/modules/contents/posts/PostEditor.vue
+++ b/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>