From 6cc7cf6d22e6fd93c0d31e6d163fef510a506fc3 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 14 May 2025 15:20:21 +0800
Subject: [PATCH] refactor: improve drag-and-drop sorting feature for
 categories (#7424)

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../posts/categories/CategoryList.vue         |  46 ++-
 .../components/CategoryEditingModal.vue       |  15 +-
 .../components/CategoryListItem.vue           | 288 +++++++--------
 .../composables/use-post-category.ts          |  16 +-
 .../categories/utils/__tests__/index.spec.ts  | 335 ++++++++++++++++++
 .../contents/posts/categories/utils/index.ts  |  96 ++---
 .../inputs/category-select/CategorySelect.vue |  18 +-
 .../components/CategoryListItem.vue           |  17 +-
 .../components/CategoryTag.vue                |  15 +-
 .../components/SearchResultListItem.vue       |  15 +-
 10 files changed, 596 insertions(+), 265 deletions(-)
 create mode 100644 ui/console-src/modules/contents/posts/categories/utils/__tests__/index.spec.ts

diff --git a/ui/console-src/modules/contents/posts/categories/CategoryList.vue b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
index 4acc22c86..4118a942b 100644
--- a/ui/console-src/modules/contents/posts/categories/CategoryList.vue
+++ b/ui/console-src/modules/contents/posts/categories/CategoryList.vue
@@ -1,9 +1,5 @@
 <script lang="ts" setup>
-// core libs
 import { coreApiClient } from "@halo-dev/api-client";
-import { ref } from "vue";
-
-// components
 import {
   IconAddCircle,
   IconBookRead,
@@ -14,16 +10,13 @@ import {
   VPageHeader,
   VSpace,
 } from "@halo-dev/components";
+import { Draggable } from "@he-tree/vue";
+import "@he-tree/vue/style/default.css";
+import { ref } from "vue";
 import CategoryEditingModal from "./components/CategoryEditingModal.vue";
 import CategoryListItem from "./components/CategoryListItem.vue";
-
-import { convertTreeToCategories, resetCategoriesTreePriority } from "./utils";
-
-// libs
-import { useDebounceFn } from "@vueuse/core";
-
-// hooks
 import { usePostCategory } from "./composables/use-post-category";
+import { convertTreeToCategories, resetCategoriesTreePriority } from "./utils";
 
 const creationModal = ref(false);
 
@@ -31,8 +24,9 @@ const { categories, categoriesTree, isLoading, handleFetchCategories } =
   usePostCategory();
 
 const batchUpdating = ref(false);
+const isDragging = ref(false);
 
-const handleUpdateInBatch = useDebounceFn(async () => {
+async function handleUpdateInBatch() {
   const categoriesTreeToUpdate = resetCategoriesTreePriority(
     categoriesTree.value
   );
@@ -62,8 +56,9 @@ const handleUpdateInBatch = useDebounceFn(async () => {
   } finally {
     await handleFetchCategories();
     batchUpdating.value = false;
+    isDragging.value = false;
   }
-}, 300);
+}
 </script>
 <template>
   <CategoryEditingModal v-if="creationModal" @close="creationModal = false" />
@@ -130,14 +125,33 @@ const handleUpdateInBatch = useDebounceFn(async () => {
         </VEmpty>
       </Transition>
       <Transition v-else appear name="fade">
-        <CategoryListItem
+        <Draggable
           v-model="categoriesTree"
           :class="{
             'cursor-progress opacity-60': batchUpdating,
           }"
-          @change="handleUpdateInBatch"
-        />
+          trigger-class="drag-element"
+          :indent="40"
+          @after-drop="handleUpdateInBatch"
+          @before-drag-start="isDragging = true"
+        >
+          <template #default="{ node, stat }">
+            <CategoryListItem
+              :category-tree-node="node"
+              :is-child-level="stat.level > 1"
+              :is-dragging="isDragging"
+            />
+          </template>
+        </Draggable>
       </Transition>
     </VCard>
   </div>
 </template>
+<style>
+.vtlist-inner {
+  @apply divide-y divide-gray-100;
+}
+.he-tree-drag-placeholder {
+  height: 60px;
+}
+</style>
diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index d82382419..9144eda85 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -1,9 +1,4 @@
 <script lang="ts" setup>
-// core libs
-import { coreApiClient } from "@halo-dev/api-client";
-import { computed, nextTick, onMounted, ref } from "vue";
-
-// components
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import { setFocus } from "@/formkit/utils/focus";
@@ -12,6 +7,7 @@ import useSlugify from "@console/composables/use-slugify";
 import { useThemeCustomTemplates } from "@console/modules/interface/themes/composables/use-theme";
 import { reset, submitForm } from "@formkit/core";
 import type { Category } from "@halo-dev/api-client";
+import { coreApiClient } from "@halo-dev/api-client";
 import {
   IconRefreshLine,
   Toast,
@@ -21,6 +17,7 @@ import {
 } from "@halo-dev/components";
 import { useQueryClient } from "@tanstack/vue-query";
 import { cloneDeep } from "lodash-es";
+import { computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const props = withDefaults(
@@ -186,7 +183,13 @@ const { handleGenerateSlug } = useSlugify(
 );
 </script>
 <template>
-  <VModal ref="modal" :title="modalTitle" :width="700" @close="emit('close')">
+  <VModal
+    ref="modal"
+    mount-to-body
+    :title="modalTitle"
+    :width="700"
+    @close="emit('close')"
+  >
     <FormKit
       id="category-form"
       type="form"
diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
index 9c0254213..e2adb7736 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -1,46 +1,63 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
-import type { Category } from "@halo-dev/api-client";
-import { coreApiClient } from "@halo-dev/api-client";
+import { coreApiClient, type Category } from "@halo-dev/api-client";
 import {
   Dialog,
   IconEyeOff,
   IconList,
+  IconMore,
   Toast,
+  VDropdown,
   VDropdownItem,
-  VEntity,
-  VEntityField,
   VStatusDot,
 } from "@halo-dev/components";
+import "@he-tree/vue/style/default.css";
 import { useQueryClient } from "@tanstack/vue-query";
-import type { PropType } from "vue";
 import { ref } from "vue";
-import { VueDraggable } from "vue-draggable-plus";
 import { useI18n } from "vue-i18n";
 import GridiconsLinkBreak from "~icons/gridicons/link-break";
-import { convertCategoryTreeToCategory, type CategoryTree } from "../utils";
+import { convertCategoryTreeToCategory, type CategoryTreeNode } from "../utils";
 import CategoryEditingModal from "./CategoryEditingModal.vue";
 
 const { currentUserHasPermission } = usePermission();
-
-withDefaults(defineProps<{ isChildLevel?: boolean }>(), {});
-
-const categories = defineModel({
-  type: Array as PropType<CategoryTree[]>,
-  default: [],
-});
-
-const emit = defineEmits<{
-  (event: "change"): void;
-}>();
-
-const queryClient = useQueryClient();
 const { t } = useI18n();
+const queryClient = useQueryClient();
 
-function onChange() {
-  emit("change");
-}
+const props = withDefaults(
+  defineProps<{
+    isChildLevel?: boolean;
+    isDragging?: boolean;
+    categoryTreeNode: CategoryTreeNode;
+  }>(),
+  {
+    isChildLevel: false,
+    isDragging: false,
+  }
+);
+
+const handleDelete = async () => {
+  Dialog.warning({
+    title: t("core.post_category.operations.delete.title"),
+    description: t("core.post_category.operations.delete.description"),
+    confirmType: "danger",
+    confirmText: t("core.common.buttons.confirm"),
+    cancelText: t("core.common.buttons.cancel"),
+    onConfirm: async () => {
+      try {
+        await coreApiClient.content.category.deleteCategory({
+          name: props.categoryTreeNode.metadata.name,
+        });
+
+        Toast.success(t("core.common.toast.delete_success"));
+
+        queryClient.invalidateQueries({ queryKey: ["post-categories"] });
+      } catch (e) {
+        console.error("Failed to delete category", e);
+      }
+    },
+  });
+};
 
 // Editing category
 const editingModal = ref(false);
@@ -53,49 +70,101 @@ function onEditingModalClose() {
   editingModal.value = false;
 }
 
-const handleOpenEditingModal = (category: CategoryTree) => {
-  selectedCategory.value = convertCategoryTreeToCategory(category);
+const handleOpenEditingModal = () => {
+  selectedCategory.value = convertCategoryTreeToCategory(
+    props.categoryTreeNode
+  );
   editingModal.value = true;
 };
 
-const handleOpenCreateByParentModal = (category: CategoryTree) => {
-  selectedParentCategory.value = convertCategoryTreeToCategory(category);
+const handleOpenCreateByParentModal = () => {
+  selectedParentCategory.value = convertCategoryTreeToCategory(
+    props.categoryTreeNode
+  );
   editingModal.value = true;
 };
-
-const handleDelete = async (category: CategoryTree) => {
-  Dialog.warning({
-    title: t("core.post_category.operations.delete.title"),
-    description: t("core.post_category.operations.delete.description"),
-    confirmType: "danger",
-    confirmText: t("core.common.buttons.confirm"),
-    cancelText: t("core.common.buttons.cancel"),
-    onConfirm: async () => {
-      try {
-        await coreApiClient.content.category.deleteCategory({
-          name: category.metadata.name,
-        });
-
-        Toast.success(t("core.common.toast.delete_success"));
-
-        queryClient.invalidateQueries({ queryKey: ["post-categories"] });
-      } catch (e) {
-        console.error("Failed to delete tag", e);
-      }
-    },
-  });
-};
 </script>
 <template>
-  <VueDraggable
-    v-model="categories"
-    class="box-border h-full w-full divide-y divide-gray-100"
-    ghost-class="opacity-50"
-    group="category-item"
-    handle=".drag-element"
-    tag="ul"
-    @sort="onChange"
+  <div
+    class="px-4 py-3 hover:bg-gray-50 w-full group items-center flex justify-between relative"
   >
+    <div>
+      <div
+        v-permission="['system:posts:manage']"
+        class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
+        :class="{
+          '!hidden': isDragging,
+        }"
+      >
+        <IconList class="h-3.5 w-3.5" />
+      </div>
+      <div class="gap-1 flex flex-col">
+        <div class="inline-flex items-center gap-2">
+          <span class="truncate text-sm font-medium text-gray-900">
+            {{ categoryTreeNode.spec.displayName }}
+          </span>
+        </div>
+        <a
+          v-if="categoryTreeNode.status?.permalink"
+          :href="categoryTreeNode.status?.permalink"
+          :title="categoryTreeNode.status?.permalink"
+          target="_blank"
+          class="truncate text-xs text-gray-500 group-hover:text-gray-900"
+        >
+          {{ categoryTreeNode.status.permalink }}
+        </a>
+      </div>
+    </div>
+    <div class="flex items-center gap-6">
+      <VStatusDot
+        v-if="categoryTreeNode.metadata.deletionTimestamp"
+        v-tooltip="$t('core.common.status.deleting')"
+        state="warning"
+        animate
+      />
+      <IconEyeOff
+        v-if="categoryTreeNode.spec.hideFromList"
+        v-tooltip="$t('core.post_category.list.fields.hide_from_list')"
+        class="cursor-pointer text-sm transition-all hover:text-blue-600"
+      />
+      <GridiconsLinkBreak
+        v-if="categoryTreeNode.spec.preventParentPostCascadeQuery"
+        v-tooltip="
+          $t('core.post_category.list.fields.prevent_parent_post_cascade_query')
+        "
+        class="cursor-pointer text-sm transition-all hover:text-blue-600"
+      />
+      <span class="truncate text-xs text-gray-500">
+        {{
+          $t("core.common.fields.post_count", {
+            count: categoryTreeNode.status?.postCount || 0,
+          })
+        }}
+      </span>
+      <span class="truncate text-xs tabular-nums text-gray-500">
+        {{ formatDatetime(categoryTreeNode.metadata.creationTimestamp) }}
+      </span>
+      <VDropdown v-if="currentUserHasPermission(['system:posts:manage'])">
+        <div
+          class="cursor-pointer rounded p-1 transition-all hover:text-blue-600 group-hover:bg-gray-200/60"
+          @click.stop
+        >
+          <IconMore />
+        </div>
+        <template #popper>
+          <VDropdownItem @click="handleOpenEditingModal">
+            {{ $t("core.common.buttons.edit") }}
+          </VDropdownItem>
+          <VDropdownItem @click="handleOpenCreateByParentModal">
+            {{ $t("core.post_category.operations.add_sub_category.button") }}
+          </VDropdownItem>
+          <VDropdownItem type="danger" @click="handleDelete">
+            {{ $t("core.common.buttons.delete") }}
+          </VDropdownItem>
+        </template>
+      </VDropdown>
+    </div>
+
     <CategoryEditingModal
       v-if="editingModal"
       :is-child-level-category="isChildLevel"
@@ -103,104 +172,5 @@ const handleDelete = async (category: CategoryTree) => {
       :parent-category="selectedParentCategory"
       @close="onEditingModalClose"
     />
-    <li v-for="category in categories" :key="category.metadata.name">
-      <VEntity>
-        <template #prepend>
-          <div
-            v-permission="['system:posts:manage']"
-            class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
-          >
-            <IconList class="h-3.5 w-3.5" />
-          </div>
-        </template>
-        <template #start>
-          <VEntityField :title="category.spec.displayName">
-            <template #description>
-              <a
-                v-if="category.status?.permalink"
-                :href="category.status.permalink"
-                :title="category.status.permalink"
-                target="_blank"
-                class="truncate text-xs text-gray-500 group-hover:text-gray-900"
-              >
-                {{ category.status.permalink }}
-              </a>
-            </template>
-          </VEntityField>
-        </template>
-        <template #end>
-          <VEntityField v-if="category.metadata.deletionTimestamp">
-            <template #description>
-              <VStatusDot
-                v-tooltip="$t('core.common.status.deleting')"
-                state="warning"
-                animate
-              />
-            </template>
-          </VEntityField>
-          <VEntityField v-if="category.spec.hideFromList">
-            <template #description>
-              <IconEyeOff
-                v-tooltip="$t('core.post_category.list.fields.hide_from_list')"
-                class="cursor-pointer text-sm transition-all hover:text-blue-600"
-              />
-            </template>
-          </VEntityField>
-          <VEntityField v-if="category.spec.preventParentPostCascadeQuery">
-            <template #description>
-              <GridiconsLinkBreak
-                v-tooltip="
-                  $t(
-                    'core.post_category.list.fields.prevent_parent_post_cascade_query'
-                  )
-                "
-                class="cursor-pointer text-sm transition-all hover:text-blue-600"
-              />
-            </template>
-          </VEntityField>
-          <VEntityField
-            :description="
-              $t('core.common.fields.post_count', {
-                count: category.status?.postCount || 0,
-              })
-            "
-          />
-          <VEntityField>
-            <template #description>
-              <span class="truncate text-xs tabular-nums text-gray-500">
-                {{ formatDatetime(category.metadata.creationTimestamp) }}
-              </span>
-            </template>
-          </VEntityField>
-        </template>
-        <template
-          v-if="currentUserHasPermission(['system:posts:manage'])"
-          #dropdownItems
-        >
-          <VDropdownItem
-            v-permission="['system:posts:manage']"
-            @click="handleOpenEditingModal(category)"
-          >
-            {{ $t("core.common.buttons.edit") }}
-          </VDropdownItem>
-          <VDropdownItem @click="handleOpenCreateByParentModal(category)">
-            {{ $t("core.post_category.operations.add_sub_category.button") }}
-          </VDropdownItem>
-          <VDropdownItem
-            v-permission="['system:posts:manage']"
-            type="danger"
-            @click="handleDelete(category)"
-          >
-            {{ $t("core.common.buttons.delete") }}
-          </VDropdownItem>
-        </template>
-      </VEntity>
-      <CategoryListItem
-        v-model="category.spec.children"
-        is-child-level
-        class="pl-10 transition-all duration-300"
-        @change="onChange"
-      />
-    </li>
-  </VueDraggable>
+  </div>
 </template>
diff --git a/ui/console-src/modules/contents/posts/categories/composables/use-post-category.ts b/ui/console-src/modules/contents/posts/categories/composables/use-post-category.ts
index eaf6a6d5a..e2c0f55c7 100644
--- a/ui/console-src/modules/contents/posts/categories/composables/use-post-category.ts
+++ b/ui/console-src/modules/contents/posts/categories/composables/use-post-category.ts
@@ -1,20 +1,10 @@
-import type { Category } from "@halo-dev/api-client";
 import { coreApiClient } from "@halo-dev/api-client";
 import { useQuery } from "@tanstack/vue-query";
-import type { Ref } from "vue";
 import { ref } from "vue";
-import type { CategoryTree } from "../utils";
-import { buildCategoriesTree } from "../utils";
+import { buildCategoriesTree, type CategoryTreeNode } from "../utils";
 
-interface usePostCategoryReturn {
-  categories: Ref<Category[] | undefined>;
-  categoriesTree: Ref<CategoryTree[]>;
-  isLoading: Ref<boolean>;
-  handleFetchCategories: () => void;
-}
-
-export function usePostCategory(): usePostCategoryReturn {
-  const categoriesTree = ref<CategoryTree[]>([] as CategoryTree[]);
+export function usePostCategory() {
+  const categoriesTree = ref<CategoryTreeNode[]>([] as CategoryTreeNode[]);
 
   const {
     data: categories,
diff --git a/ui/console-src/modules/contents/posts/categories/utils/__tests__/index.spec.ts b/ui/console-src/modules/contents/posts/categories/utils/__tests__/index.spec.ts
new file mode 100644
index 000000000..9187addb7
--- /dev/null
+++ b/ui/console-src/modules/contents/posts/categories/utils/__tests__/index.spec.ts
@@ -0,0 +1,335 @@
+import type { Category } from "@halo-dev/api-client";
+import { describe, expect, it } from "vitest";
+import {
+  buildCategoriesTree,
+  convertCategoryTreeToCategory,
+  convertTreeToCategories,
+  getCategoryPath,
+  resetCategoriesTreePriority,
+  sortCategoriesTree,
+  type CategoryTreeNode,
+} from "../index";
+
+function createMockCategory(
+  name: string,
+  priority = 0,
+  children: string[] = []
+): Category {
+  return {
+    metadata: {
+      name,
+      annotations: {},
+      labels: {},
+      version: 1,
+      creationTimestamp: new Date().toISOString(),
+    },
+    apiVersion: "content.halo.run/v1alpha1",
+    kind: "Category",
+    spec: {
+      displayName: `Category ${name}`,
+      slug: name,
+      description: `Description for ${name}`,
+      cover: "",
+      template: "",
+      priority: priority,
+      children: children,
+    },
+  };
+}
+
+function createMockCategoryTreeNode(
+  name: string,
+  priority = 0,
+  children: CategoryTreeNode[] = []
+): CategoryTreeNode {
+  return {
+    metadata: {
+      name,
+      annotations: {},
+      labels: {},
+      version: 1,
+      creationTimestamp: new Date().toISOString(),
+    },
+    apiVersion: "content.halo.run/v1alpha1",
+    kind: "Category",
+    spec: {
+      displayName: `Category ${name}`,
+      slug: name,
+      description: `Description for ${name}`,
+      cover: "",
+      template: "",
+      priority: priority,
+      children: children.map((child) => child.metadata.name),
+    },
+    children: children,
+  };
+}
+
+describe("buildCategoriesTree", () => {
+  it("should convert flat category array to tree structure", () => {
+    // Prepare test data
+    const categories: Category[] = [
+      createMockCategory("parent1", 0, ["child1", "child2"]),
+      createMockCategory("child1", 0),
+      createMockCategory("child2", 1),
+      createMockCategory("parent2", 1, ["child3"]),
+      createMockCategory("child3", 0),
+    ];
+
+    // Execute test
+    const result = buildCategoriesTree(categories);
+
+    // Verify results
+    expect(result.length).toBe(2); // Should have two root nodes
+    expect(result[0].metadata.name).toBe("parent1"); // First root node should be parent1
+    expect(result[1].metadata.name).toBe("parent2"); // Second root node should be parent2
+    expect(result[0].children.length).toBe(2); // parent1 should have two children
+    expect(result[1].children.length).toBe(1); // parent2 should have one child
+    expect(result[0].children[0].metadata.name).toBe("child1");
+    expect(result[0].children[1].metadata.name).toBe("child2");
+    expect(result[1].children[0].metadata.name).toBe("child3");
+  });
+
+  it("should handle empty array input", () => {
+    const result = buildCategoriesTree([]);
+    expect(result).toEqual([]);
+  });
+
+  it("should handle categories without parent-child relationships", () => {
+    const categories: Category[] = [
+      createMockCategory("category1", 0),
+      createMockCategory("category2", 1),
+      createMockCategory("category3", 2),
+    ];
+
+    const result = buildCategoriesTree(categories);
+
+    expect(result.length).toBe(3);
+    expect(result.every((node) => node.children.length === 0)).toBe(true);
+  });
+
+  it("should handle multi-level nested category structure", () => {
+    const categories: Category[] = [
+      createMockCategory("root", 0, ["level1"]),
+      createMockCategory("level1", 0, ["level2"]),
+      createMockCategory("level2", 0, ["level3"]),
+      createMockCategory("level3", 0),
+    ];
+
+    const result = buildCategoriesTree(categories);
+
+    expect(result.length).toBe(1);
+    expect(result[0].metadata.name).toBe("root");
+    expect(result[0].children[0].metadata.name).toBe("level1");
+    expect(result[0].children[0].children[0].metadata.name).toBe("level2");
+    expect(result[0].children[0].children[0].children[0].metadata.name).toBe(
+      "level3"
+    );
+  });
+});
+
+describe("sortCategoriesTree", () => {
+  it("should sort category tree by priority", () => {
+    const categoriesTree: CategoryTreeNode[] = [
+      createMockCategoryTreeNode("node3", 2),
+      createMockCategoryTreeNode("node1", 0),
+      createMockCategoryTreeNode("node2", 1),
+    ];
+
+    const result = sortCategoriesTree(categoriesTree);
+
+    expect(result[0].metadata.name).toBe("node1");
+    expect(result[1].metadata.name).toBe("node2");
+    expect(result[2].metadata.name).toBe("node3");
+  });
+
+  it("should recursively sort child nodes", () => {
+    const categoriesTree: CategoryTreeNode[] = [
+      createMockCategoryTreeNode("parent1", 0, [
+        createMockCategoryTreeNode("child3", 2),
+        createMockCategoryTreeNode("child1", 0),
+        createMockCategoryTreeNode("child2", 1),
+      ]),
+    ];
+
+    const result = sortCategoriesTree(categoriesTree);
+
+    expect(result[0].children[0].metadata.name).toBe("child1");
+    expect(result[0].children[1].metadata.name).toBe("child2");
+    expect(result[0].children[2].metadata.name).toBe("child3");
+  });
+
+  it("should handle empty array input", () => {
+    const result = sortCategoriesTree([]);
+    expect(result).toEqual([]);
+  });
+});
+
+describe("resetCategoriesTreePriority", () => {
+  it("should reset priority values of all nodes in the tree", () => {
+    const categoriesTree: CategoryTreeNode[] = [
+      createMockCategoryTreeNode("node1", 5),
+      createMockCategoryTreeNode("node2", 10),
+      createMockCategoryTreeNode("node3", 15),
+    ];
+
+    const result = resetCategoriesTreePriority(categoriesTree);
+
+    expect(result[0].spec.priority).toBe(0);
+    expect(result[1].spec.priority).toBe(1);
+    expect(result[2].spec.priority).toBe(2);
+  });
+
+  it("should recursively reset child node priorities", () => {
+    const categoriesTree: CategoryTreeNode[] = [
+      createMockCategoryTreeNode("parent", 5, [
+        createMockCategoryTreeNode("child1", 10),
+        createMockCategoryTreeNode("child2", 15),
+      ]),
+    ];
+
+    const result = resetCategoriesTreePriority(categoriesTree);
+
+    expect(result[0].spec.priority).toBe(0);
+    expect(result[0].children[0].spec.priority).toBe(0);
+    expect(result[0].children[1].spec.priority).toBe(1);
+  });
+
+  it("should handle empty array input", () => {
+    const result = resetCategoriesTreePriority([]);
+    expect(result).toEqual([]);
+  });
+});
+
+describe("convertTreeToCategories", () => {
+  it("should convert tree structure back to flat category array", () => {
+    const child1 = createMockCategoryTreeNode("child1", 0);
+    const child2 = createMockCategoryTreeNode("child2", 1);
+    const parent = createMockCategoryTreeNode("parent", 0, [child1, child2]);
+    const categoriesTree: CategoryTreeNode[] = [parent];
+
+    const result = convertTreeToCategories(categoriesTree);
+
+    expect(result.length).toBe(3);
+
+    // Verify parent node
+    const parentCategory = result.find((c) => c.metadata.name === "parent");
+    expect(parentCategory).toBeDefined();
+    expect(parentCategory?.spec.children).toContain("child1");
+    expect(parentCategory?.spec.children).toContain("child2");
+
+    // Verify child nodes
+    const child1Category = result.find((c) => c.metadata.name === "child1");
+    const child2Category = result.find((c) => c.metadata.name === "child2");
+    expect(child1Category).toBeDefined();
+    expect(child2Category).toBeDefined();
+    expect(child1Category?.spec.children).toEqual([]);
+    expect(child2Category?.spec.children).toEqual([]);
+  });
+
+  it("should handle multi-level nested structure", () => {
+    const level3 = createMockCategoryTreeNode("level3", 0);
+    const level2 = createMockCategoryTreeNode("level2", 0, [level3]);
+    const level1 = createMockCategoryTreeNode("level1", 0, [level2]);
+    const root = createMockCategoryTreeNode("root", 0, [level1]);
+    const categoriesTree: CategoryTreeNode[] = [root];
+
+    const result = convertTreeToCategories(categoriesTree);
+
+    expect(result.length).toBe(4);
+
+    const rootCategory = result.find((c) => c.metadata.name === "root");
+    const level1Category = result.find((c) => c.metadata.name === "level1");
+    const level2Category = result.find((c) => c.metadata.name === "level2");
+    const level3Category = result.find((c) => c.metadata.name === "level3");
+
+    expect(rootCategory?.spec.children).toContain("level1");
+    expect(level1Category?.spec.children).toContain("level2");
+    expect(level2Category?.spec.children).toContain("level3");
+    expect(level3Category?.spec.children).toEqual([]);
+  });
+
+  it("should handle empty array input", () => {
+    const result = convertTreeToCategories([]);
+    expect(result).toEqual([]);
+  });
+});
+
+describe("convertCategoryTreeToCategory", () => {
+  it("should convert a single tree node to a category object", () => {
+    const child1 = createMockCategoryTreeNode("child1", 0);
+    const child2 = createMockCategoryTreeNode("child2", 1);
+    const parent = createMockCategoryTreeNode("parent", 0, [child1, child2]);
+
+    const result = convertCategoryTreeToCategory(parent);
+
+    expect(result.metadata.name).toBe("parent");
+    expect(result.spec.children).toContain("child1");
+    expect(result.spec.children).toContain("child2");
+    expect(result.spec.children?.length).toBe(2);
+    // eslint-disable-next-line
+    expect((result as any).children).toBeUndefined();
+  });
+
+  it("should handle nodes without children", () => {
+    const node = createMockCategoryTreeNode("node", 0);
+
+    const result = convertCategoryTreeToCategory(node);
+
+    expect(result.metadata.name).toBe("node");
+    expect(result.spec.children).toEqual([]);
+  });
+});
+
+describe("getCategoryPath", () => {
+  it("should return path from root to specified category", () => {
+    const level3 = createMockCategoryTreeNode("level3", 0);
+    const level2 = createMockCategoryTreeNode("level2", 0, [level3]);
+    const level1 = createMockCategoryTreeNode("level1", 0, [level2]);
+    const root = createMockCategoryTreeNode("root", 0, [level1]);
+    const categoriesTree: CategoryTreeNode[] = [root];
+
+    const result = getCategoryPath(categoriesTree, "level3");
+
+    expect(result).toBeDefined();
+    expect(result?.length).toBe(4);
+    expect(result?.[0].metadata.name).toBe("root");
+    expect(result?.[1].metadata.name).toBe("level1");
+    expect(result?.[2].metadata.name).toBe("level2");
+    expect(result?.[3].metadata.name).toBe("level3");
+  });
+
+  it("should handle case when category is not found", () => {
+    const categoriesTree: CategoryTreeNode[] = [
+      createMockCategoryTreeNode("node1", 0),
+      createMockCategoryTreeNode("node2", 1),
+    ];
+
+    const result = getCategoryPath(categoriesTree, "nonexistent");
+
+    expect(result).toBeUndefined();
+  });
+
+  it("should handle multiple branches", () => {
+    const child1 = createMockCategoryTreeNode("child1", 0);
+    const child2 = createMockCategoryTreeNode("child2", 1);
+    const target = createMockCategoryTreeNode("target", 0);
+    const branch1 = createMockCategoryTreeNode("branch1", 0, [child1, child2]);
+    const branch2 = createMockCategoryTreeNode("branch2", 1, [target]);
+    const root = createMockCategoryTreeNode("root", 0, [branch1, branch2]);
+    const categoriesTree: CategoryTreeNode[] = [root];
+
+    const result = getCategoryPath(categoriesTree, "target");
+
+    expect(result).toBeDefined();
+    expect(result?.length).toBe(3);
+    expect(result?.[0].metadata.name).toBe("root");
+    expect(result?.[1].metadata.name).toBe("branch2");
+    expect(result?.[2].metadata.name).toBe("target");
+  });
+
+  it("should handle empty array input", () => {
+    const result = getCategoryPath([], "any");
+    expect(result).toBeUndefined();
+  });
+});
diff --git a/ui/console-src/modules/contents/posts/categories/utils/index.ts b/ui/console-src/modules/contents/posts/categories/utils/index.ts
index dc5863d1f..0e298eecb 100644
--- a/ui/console-src/modules/contents/posts/categories/utils/index.ts
+++ b/ui/console-src/modules/contents/posts/categories/utils/index.ts
@@ -1,38 +1,41 @@
-import type { Category, CategorySpec } from "@halo-dev/api-client";
+import type { Category } from "@halo-dev/api-client";
 import { cloneDeep } from "lodash-es";
 
-export interface CategoryTreeSpec extends Omit<CategorySpec, "children"> {
-  children: CategoryTree[];
+export interface CategoryTreeNode extends Category {
+  children: CategoryTreeNode[];
 }
 
-export interface CategoryTree extends Omit<Category, "spec"> {
-  spec: CategoryTreeSpec;
-}
-
-export function buildCategoriesTree(categories: Category[]): CategoryTree[] {
+export function buildCategoriesTree(
+  categories: Category[]
+): CategoryTreeNode[] {
   const categoriesToUpdate = cloneDeep(categories);
 
-  const categoriesMap = {};
-  const parentMap = {};
+  const categoriesMap: Record<string, CategoryTreeNode> = {};
+  const parentMap: Record<string, string> = {};
 
   categoriesToUpdate.forEach((category) => {
-    categoriesMap[category.metadata.name] = category;
-    // @ts-ignore
-    category.spec.children.forEach((child) => {
-      parentMap[child] = category.metadata.name;
-    });
-    // @ts-ignore
-    category.spec.children = [];
+    categoriesMap[category.metadata.name] = {
+      ...category,
+      children: [],
+    } as CategoryTreeNode;
+
+    if (category.spec.children) {
+      category.spec.children.forEach((child) => {
+        parentMap[child] = category.metadata.name;
+      });
+    }
   });
 
   categoriesToUpdate.forEach((category) => {
     const parentName = parentMap[category.metadata.name];
     if (parentName && categoriesMap[parentName]) {
-      categoriesMap[parentName].spec.children.push(category);
+      categoriesMap[parentName].children.push(
+        categoriesMap[category.metadata.name]
+      );
     }
   });
 
-  const categoriesTree = categoriesToUpdate.filter(
+  const categoriesTree = Object.values(categoriesMap).filter(
     (node) => parentMap[node.metadata.name] === undefined
   );
 
@@ -40,8 +43,8 @@ export function buildCategoriesTree(categories: Category[]): CategoryTree[] {
 }
 
 export function sortCategoriesTree(
-  categoriesTree: CategoryTree[] | Category[]
-): CategoryTree[] {
+  categoriesTree: CategoryTreeNode[]
+): CategoryTreeNode[] {
   return categoriesTree
     .sort((a, b) => {
       if (a.spec.priority < b.spec.priority) {
@@ -53,13 +56,10 @@ export function sortCategoriesTree(
       return 0;
     })
     .map((category) => {
-      if (category.spec.children.length) {
+      if (category.children && category.children.length) {
         return {
           ...category,
-          spec: {
-            ...category.spec,
-            children: sortCategoriesTree(category.spec.children),
-          },
+          children: sortCategoriesTree(category.children),
         };
       }
       return category;
@@ -67,54 +67,62 @@ export function sortCategoriesTree(
 }
 
 export function resetCategoriesTreePriority(
-  categoriesTree: CategoryTree[]
-): CategoryTree[] {
+  categoriesTree: CategoryTreeNode[]
+): CategoryTreeNode[] {
   for (let i = 0; i < categoriesTree.length; i++) {
     categoriesTree[i].spec.priority = i;
-    if (categoriesTree[i].spec.children) {
-      resetCategoriesTreePriority(categoriesTree[i].spec.children);
+    if (categoriesTree[i].children && categoriesTree[i].children.length) {
+      resetCategoriesTreePriority(categoriesTree[i].children);
     }
   }
   return categoriesTree;
 }
 
-export function convertTreeToCategories(categoriesTree: CategoryTree[]) {
+export function convertTreeToCategories(categoriesTree: CategoryTreeNode[]) {
   const categories: Category[] = [];
   const categoriesMap = new Map<string, Category>();
-  const convertCategory = (node: CategoryTree | undefined) => {
+
+  const convertCategory = (node: CategoryTreeNode | undefined) => {
     if (!node) {
       return;
     }
-    const children = node.spec.children || [];
+
+    const children = node.children || [];
+
     categoriesMap.set(node.metadata.name, {
       ...node,
       spec: {
         ...node.spec,
-        // @ts-ignore
         children: children.map((child) => child.metadata.name),
       },
     });
+
     children.forEach((child) => {
       convertCategory(child);
     });
   };
+
   categoriesTree.forEach((node) => {
     convertCategory(node);
   });
+
   categoriesMap.forEach((node) => {
     categories.push(node);
   });
+
   return categories;
 }
 
 export function convertCategoryTreeToCategory(
-  categoryTree: CategoryTree
+  categoryTree: CategoryTreeNode
 ): Category {
-  const childNames = categoryTree.spec.children.map(
-    (child) => child.metadata.name
-  );
+  const childNames = categoryTree.children.map((child) => child.metadata.name);
+
+  // eslint-disable-next-line
+  const { children: _, ...categoryWithoutChildren } = categoryTree;
+
   return {
-    ...categoryTree,
+    ...categoryWithoutChildren,
     spec: {
       ...categoryTree.spec,
       children: childNames,
@@ -123,18 +131,18 @@ export function convertCategoryTreeToCategory(
 }
 
 export const getCategoryPath = (
-  categories: CategoryTree[],
+  categories: CategoryTreeNode[],
   name: string,
-  path: CategoryTree[] = []
-): CategoryTree[] | undefined => {
+  path: CategoryTreeNode[] = []
+): CategoryTreeNode[] | undefined => {
   for (const category of categories) {
     if (category.metadata && category.metadata.name === name) {
       return path.concat([category]);
     }
 
-    if (category.spec && category.spec.children) {
+    if (category.children && category.children.length) {
       const found = getCategoryPath(
-        category.spec.children,
+        category.children,
         name,
         path.concat([category])
       );
diff --git a/ui/src/formkit/inputs/category-select/CategorySelect.vue b/ui/src/formkit/inputs/category-select/CategorySelect.vue
index 5f68c403f..56e256a6b 100644
--- a/ui/src/formkit/inputs/category-select/CategorySelect.vue
+++ b/ui/src/formkit/inputs/category-select/CategorySelect.vue
@@ -2,8 +2,10 @@
 import HasPermission from "@/components/permission/HasPermission.vue";
 import { usePermission } from "@/utils/permission";
 import { usePostCategory } from "@console/modules/contents/posts/categories/composables/use-post-category";
-import type { CategoryTree } from "@console/modules/contents/posts/categories/utils";
-import { convertTreeToCategories } from "@console/modules/contents/posts/categories/utils";
+import {
+  convertTreeToCategories,
+  type CategoryTreeNode,
+} from "@console/modules/contents/posts/categories/utils";
 import type { FormKitFrameworkContext } from "@formkit/core";
 import type { Category } from "@halo-dev/api-client";
 import { coreApiClient } from "@halo-dev/api-client";
@@ -38,11 +40,11 @@ const multiple = computed(() => {
 
 const { categories, categoriesTree, handleFetchCategories } = usePostCategory();
 
-provide<Ref<CategoryTree[]>>("categoriesTree", categoriesTree);
+provide<Ref<CategoryTreeNode[]>>("categoriesTree", categoriesTree);
 
-const selectedCategory = ref<Category | CategoryTree>();
+const selectedCategory = ref<Category | CategoryTreeNode>();
 
-provide<Ref<Category | CategoryTree | undefined>>(
+provide<Ref<Category | CategoryTreeNode | undefined>>(
   "selectedCategory",
   selectedCategory
 );
@@ -109,19 +111,19 @@ const selectedCategories = computed(() => {
   return [category].filter(Boolean) as Category[];
 });
 
-const isSelected = (category: CategoryTree | Category) => {
+const isSelected = (category: CategoryTreeNode | Category) => {
   if (multiple.value) {
     return (props.context._value || []).includes(category.metadata.name);
   }
   return props.context._value === category.metadata.name;
 };
 
-provide<(category: CategoryTree | Category) => boolean>(
+provide<(category: CategoryTreeNode | Category) => boolean>(
   "isSelected",
   isSelected
 );
 
-const handleSelect = (category: CategoryTree | Category) => {
+const handleSelect = (category: CategoryTreeNode | Category) => {
   if (multiple.value) {
     const currentValue = props.context._value || [];
     if (currentValue.includes(category.metadata.name)) {
diff --git a/ui/src/formkit/inputs/category-select/components/CategoryListItem.vue b/ui/src/formkit/inputs/category-select/components/CategoryListItem.vue
index 951f9b5fc..3176ff4f0 100644
--- a/ui/src/formkit/inputs/category-select/components/CategoryListItem.vue
+++ b/ui/src/formkit/inputs/category-select/components/CategoryListItem.vue
@@ -1,27 +1,28 @@
 <script lang="ts" setup>
-import type { CategoryTree } from "@console/modules/contents/posts/categories/utils";
+import type { CategoryTreeNode } from "@console/modules/contents/posts/categories/utils";
 import type { Category } from "@halo-dev/api-client";
 import { IconCheckboxCircle } from "@halo-dev/components";
 import { inject, ref, type Ref } from "vue";
 
 withDefaults(
   defineProps<{
-    category: CategoryTree;
+    category: CategoryTreeNode;
   }>(),
   {}
 );
 
-const isSelected = inject<(category: CategoryTree) => boolean>("isSelected");
-const selectedCategory = inject<Ref<Category | CategoryTree | undefined>>(
+const isSelected =
+  inject<(category: CategoryTreeNode) => boolean>("isSelected");
+const selectedCategory = inject<Ref<Category | CategoryTreeNode | undefined>>(
   "selectedCategory",
   ref(undefined)
 );
 
 const emit = defineEmits<{
-  (event: "select", category: CategoryTree): void;
+  (event: "select", category: CategoryTreeNode): void;
 }>();
 
-const onSelect = (childCategory: CategoryTree) => {
+const onSelect = (childCategory: CategoryTreeNode) => {
   emit("select", childCategory);
 };
 </script>
@@ -54,11 +55,11 @@ const onSelect = (childCategory: CategoryTree) => {
     </div>
 
     <ul
-      v-if="category.spec.children.length > 0"
+      v-if="category.children.length > 0"
       class="my-2.5 ml-2.5 border-l pl-1.5"
     >
       <CategoryListItem
-        v-for="(childCategory, index) in category.spec.children"
+        v-for="(childCategory, index) in category.children"
         :key="index"
         :category="childCategory"
         @select="onSelect"
diff --git a/ui/src/formkit/inputs/category-select/components/CategoryTag.vue b/ui/src/formkit/inputs/category-select/components/CategoryTag.vue
index 5cbf6dd8a..c67e9d6e0 100644
--- a/ui/src/formkit/inputs/category-select/components/CategoryTag.vue
+++ b/ui/src/formkit/inputs/category-select/components/CategoryTag.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
-import type { CategoryTree } from "@console/modules/contents/posts/categories/utils";
-import { getCategoryPath } from "@console/modules/contents/posts/categories/utils";
+import {
+  getCategoryPath,
+  type CategoryTreeNode,
+} from "@console/modules/contents/posts/categories/utils";
 import type { Category } from "@halo-dev/api-client";
 import { IconClose } from "@halo-dev/components";
 import { computed, inject, ref, type Ref } from "vue";
@@ -13,10 +15,13 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  (event: "select", category: CategoryTree | Category): void;
+  (event: "select", category: CategoryTreeNode | Category): void;
 }>();
 
-const categoriesTree = inject<Ref<CategoryTree[]>>("categoriesTree", ref([]));
+const categoriesTree = inject<Ref<CategoryTreeNode[]>>(
+  "categoriesTree",
+  ref([])
+);
 
 const label = computed(() => {
   const categories = getCategoryPath(
@@ -24,7 +29,7 @@ const label = computed(() => {
     props.category.metadata.name
   );
   return categories
-    ?.map((category: CategoryTree) => category.spec.displayName)
+    ?.map((category: CategoryTreeNode) => category.spec.displayName)
     .join(" / ");
 });
 </script>
diff --git a/ui/src/formkit/inputs/category-select/components/SearchResultListItem.vue b/ui/src/formkit/inputs/category-select/components/SearchResultListItem.vue
index ed053cee8..d47b49bee 100644
--- a/ui/src/formkit/inputs/category-select/components/SearchResultListItem.vue
+++ b/ui/src/formkit/inputs/category-select/components/SearchResultListItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {
   getCategoryPath,
-  type CategoryTree,
+  type CategoryTreeNode,
 } from "@console/modules/contents/posts/categories/utils";
 import type { Category } from "@halo-dev/api-client";
 import { IconCheckboxCircle } from "@halo-dev/components";
@@ -14,17 +14,20 @@ const props = withDefaults(
   {}
 );
 
-const categoriesTree = inject<Ref<CategoryTree[]>>("categoriesTree", ref([]));
-const selectedCategory = inject<Ref<Category | CategoryTree | undefined>>(
+const categoriesTree = inject<Ref<CategoryTreeNode[]>>(
+  "categoriesTree",
+  ref([])
+);
+const selectedCategory = inject<Ref<Category | CategoryTreeNode | undefined>>(
   "selectedCategory",
   ref(undefined)
 );
 
 const isSelected =
-  inject<(category: Category | CategoryTree) => boolean>("isSelected");
+  inject<(category: Category | CategoryTreeNode) => boolean>("isSelected");
 
 const emit = defineEmits<{
-  (event: "select", category: CategoryTree | Category): void;
+  (event: "select", category: CategoryTreeNode | Category): void;
 }>();
 
 const label = computed(() => {
@@ -33,7 +36,7 @@ const label = computed(() => {
     props.category.metadata.name
   );
   return categories
-    ?.map((category: CategoryTree) => category.spec.displayName)
+    ?.map((category: CategoryTreeNode) => category.spec.displayName)
     .join(" / ");
 });
 </script>