feat: add slug existence check when creating categories and tags (#7616)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

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

This PR adds frontend support for checking if an slug already exists when creating post categories and tags.

<img width="701" alt="image" src="https://github.com/user-attachments/assets/050c2fc3-b82c-42f1-b58e-cf12c6852959" />

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

Fixes https://github.com/halo-dev/halo/issues/3172

#### Special notes for your reviewer:

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

```release-note
创建文章分类和标签时支持检查别名是否已存在
```

ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue

@@ -5,7 +5,7 @@ import { setFocus } from "@/formkit/utils/focus";
 import { FormType } from "@/types/slug";
 import useSlugify from "@console/composables/use-slugify";
 import { useThemeCustomTemplates } from "@console/modules/interface/themes/composables/use-theme";
-import { reset, submitForm } from "@formkit/core";
+import { reset, submitForm, type FormKitNode } from "@formkit/core";
 import type { Category } from "@halo-dev/api-client";
 import { coreApiClient } from "@halo-dev/api-client";
 import {
@@ -181,6 +181,28 @@ const { handleGenerateSlug } = useSlugify(
   computed(() => !isUpdateMode),
   FormType.CATEGORY
 );
+
+// fixme: check if slug is unique
+// Finally, we need to check if the slug is unique in the database
+async function slugUniqueValidation(node: FormKitNode) {
+  const value = node.value;
+  if (!value) {
+    return true;
+  }
+
+  const fieldSelector = [`spec.slug=${value}`];
+
+  if (props.category) {
+    fieldSelector.push(`metadata.name!=${props.category.metadata.name}`);
+  }
+
+  const { data: categoriesWithSameSlug } =
+    await coreApiClient.content.category.listCategory({
+      fieldSelector,
+    });
+
+  return !categoriesWithSameSlug.total;
+}
 </script>
 <template>
   <VModal
@@ -231,7 +253,13 @@ const { handleGenerateSlug } = useSlugify(
               name="slug"
               :label="$t('core.post_category.editing_modal.fields.slug.label')"
               type="text"
-              validation="required|length:0,50"
+              validation="required|length:0,50|slugUniqueValidation"
+              :validation-rules="{ slugUniqueValidation }"
+              :validation-messages="{
+                slugUniqueValidation: $t(
+                  'core.common.form.validation.slug_unique'
+                ),
+              }"
             >
               <template #suffix>
                 <div

ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-// core libs
-import { coreApiClient } from "@halo-dev/api-client";
-import { computed, nextTick, ref, watch } from "vue";
-
-// components
 import SubmitButton from "@/components/button/SubmitButton.vue";
+import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
+import { setFocus } from "@/formkit/utils/focus";
+import { FormType } from "@/types/slug";
+import useSlugify from "@console/composables/use-slugify";
+import { reset, submitForm, type FormKitNode } from "@formkit/core";
+import type { Tag } from "@halo-dev/api-client";
+import { coreApiClient } from "@halo-dev/api-client";
 import {
   IconArrowLeft,
   IconArrowRight,
@@ -14,18 +16,8 @@ import {
   VModal,
   VSpace,
 } from "@halo-dev/components";
-
-// types
-import type { Tag } from "@halo-dev/api-client";
-
-// libs
-import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
-import { setFocus } from "@/formkit/utils/focus";
-import { FormType } from "@/types/slug";
-import useSlugify from "@console/composables/use-slugify";
-import { reset, submitForm } from "@formkit/core";
 import { cloneDeep } from "lodash-es";
-import { onMounted } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 
 const props = withDefaults(
@@ -153,6 +145,27 @@ const { handleGenerateSlug } = useSlugify(
   computed(() => !isUpdateMode.value),
   FormType.TAG
 );
+
+// fixme: check if slug is unique
+// Finally, we need to check if the slug is unique in the database
+async function slugUniqueValidation(node: FormKitNode) {
+  const value = node.value;
+  if (!value) {
+    return true;
+  }
+
+  const fieldSelector = [`spec.slug=${value}`];
+
+  if (props.tag) {
+    fieldSelector.push(`metadata.name!=${props.tag.metadata.name}`);
+  }
+
+  const { data: tagsWithSameSlug } = await coreApiClient.content.tag.listTag({
+    fieldSelector,
+  });
+
+  return !tagsWithSameSlug.total;
+}
 </script>
 <template>
   <VModal ref="modal" :title="modalTitle" :width="700" @close="emit('close')">
@@ -198,7 +211,13 @@ const { handleGenerateSlug } = useSlugify(
               :label="$t('core.post_tag.editing_modal.fields.slug.label')"
               name="slug"
               type="text"
-              validation="required|length:0,50"
+              validation="required|length:0,50|slugUniqueValidation"
+              :validation-rules="{ slugUniqueValidation }"
+              :validation-messages="{
+                slugUniqueValidation: $t(
+                  'core.common.form.validation.slug_unique'
+                ),
+              }"
             >
               <template #suffix>
                 <div

ui/src/formkit/inputs/category-select/CategorySelect.vue

@@ -12,6 +12,7 @@ import { coreApiClient } from "@halo-dev/api-client";
 import { IconArrowRight } from "@halo-dev/components";
 import { onClickOutside } from "@vueuse/core";
 import Fuse from "fuse.js";
+import ShortUniqueId from "short-unique-id";
 import { slugify } from "transliteration";
 import { computed, provide, ref, watch, type PropType, type Ref } from "vue";
 import CategoryListItem from "./components/CategoryListItem.vue";
@@ -212,16 +213,30 @@ const scrollToSelected = () => {
   }
 };
 
+const uid = new ShortUniqueId();
+
 const handleCreateCategory = async () => {
   if (!currentUserHasPermission(["system:posts:manage"])) {
     return;
   }
 
+  let slug = slugify(text.value, { trim: true });
+
+  // Check if slug is unique, if not, add -1 to the slug
+  const { data: categoriesWithSameSlug } =
+    await coreApiClient.content.category.listCategory({
+      fieldSelector: [`spec.slug=${slug}`],
+    });
+
+  if (categoriesWithSameSlug.total) {
+    slug = `${slug}-${uid.randomUUID(8)}`;
+  }
+
   const { data } = await coreApiClient.content.category.createCategory({
     category: {
       spec: {
         displayName: text.value,
-        slug: slugify(text.value, { trim: true }),
+        slug,
         description: "",
         cover: "",
         template: "",

ui/src/formkit/inputs/tag-select/TagSelect.vue

@@ -13,6 +13,7 @@ import {
 } from "@halo-dev/components";
 import { onClickOutside } from "@vueuse/core";
 import Fuse from "fuse.js";
+import ShortUniqueId from "short-unique-id";
 import { slugify } from "transliteration";
 import { computed, ref, watch, type PropType } from "vue";
 
@@ -191,16 +192,29 @@ const scrollToSelected = () => {
   }
 };
 
+const uid = new ShortUniqueId();
+
 const handleCreateTag = async () => {
   if (!currentUserHasPermission(["system:posts:manage"])) {
     return;
   }
 
+  let slug = slugify(text.value, { trim: true });
+
+  // Check if slug is unique, if not, add -1 to the slug
+  const { data: tagsWithSameSlug } = await coreApiClient.content.tag.listTag({
+    fieldSelector: [`spec.slug=${slug}`],
+  });
+
+  if (tagsWithSameSlug.total) {
+    slug = `${slug}-${uid.randomUUID(8)}`;
+  }
+
   const { data } = await coreApiClient.content.tag.createTag({
     tag: {
       spec: {
         displayName: text.value,
-        slug: slugify(text.value, { trim: true }),
+        slug,
         color: "#ffffff",
         cover: "",
       },

ui/src/locales/_missing_translations_es.yaml

@@ -792,6 +792,9 @@ core:
       system_protection: System protection
       all: All
       detail: Detail
+    form:
+      validation:
+        slug_unique: The current slug already exists
   uc_post:
     creation_modal:
       title: Create post

ui/src/locales/en.yaml

@@ -2030,6 +2030,9 @@ core:
       recovering: Recovering
     fields:
       post_count: "{count} Posts"
+    form:
+      validation:
+        slug_unique: The current slug already exists
   uc_post:
     creation_modal:
       title: Create post

ui/src/locales/zh-CN.yaml

@@ -1884,6 +1884,9 @@ core:
       recovering: 恢复中
     fields:
       post_count: "{count} 篇文章"
+    form:
+      validation:
+        slug_unique: 当前别名已存在
   tool:
     title: 工具
     empty:

ui/src/locales/zh-TW.yaml

@@ -1869,6 +1869,9 @@ core:
       recovering: 還原中
     fields:
       post_count: "{count} 篇文章"
+    form:
+      validation:
+        slug_unique: 當前別名已存在
   uc_post:
     creation_modal:
       title: 創建文章