refactor: improve code base of post category-related (halo-dev#5958)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

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

优化文章分类管理相关的 UI 代码。

1. 使用 vue-draggable-plus 库代替 vuedraggable 库实现拖拽排序。vue-draggable-plus 是在 halo-dev#5914 中引入，替换的原因是 vuedraggable 库已经不再积极维护。
2. 改进分类编辑表单的逻辑，清理无用代码。

#### Special notes for your reviewer:

需要测试：

1. 测试文章分类拖拽排序功能是否表现正常。
2. 测试新增/编辑文章分类功能是否表现正常。

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

```release-note
None
```

ui/console-src/modules/contents/posts/categories/CategoryList.vue

@@ -10,46 +10,35 @@ import {
   VButton,
   VCard,
   VEmpty,
+  VLoading,
   VPageHeader,
   VSpace,
-  VLoading,
 } from "@halo-dev/components";
 import CategoryEditingModal from "./components/CategoryEditingModal.vue";
 import CategoryListItem from "./components/CategoryListItem.vue";
 
-// types
-import type { Category } from "@halo-dev/api-client";
-import type { CategoryTree } from "./utils";
-import {
-  convertCategoryTreeToCategory,
-  convertTreeToCategories,
-  resetCategoriesTreePriority,
-} from "./utils";
+import { convertTreeToCategories, resetCategoriesTreePriority } from "./utils";
 
 // libs
 import { useDebounceFn } from "@vueuse/core";
 
 // hooks
 import { usePostCategory } from "./composables/use-post-category";
 
-const editingModal = ref(false);
-const selectedCategory = ref<Category>();
-const selectedParentCategory = ref<Category>();
+const creationModal = ref(false);
+
+const { categories, categoriesTree, isLoading, handleFetchCategories } =
+  usePostCategory();
 
-const {
-  categories,
-  categoriesTree,
-  isLoading,
-  handleFetchCategories,
-  handleDelete,
-} = usePostCategory();
+const batchUpdating = ref(false);
 
 const handleUpdateInBatch = useDebounceFn(async () => {
   const categoriesTreeToUpdate = resetCategoriesTreePriority(
     categoriesTree.value
   );
   const categoriesToUpdate = convertTreeToCategories(categoriesTreeToUpdate);
   try {
+    batchUpdating.value = true;
     const promises = categoriesToUpdate.map((category) =>
       apiClient.extension.category.updatecontentHaloRunV1alpha1Category({
         name: category.metadata.name,
@@ -61,32 +50,12 @@ const handleUpdateInBatch = useDebounceFn(async () => {
     console.error("Failed to update categories", e);
   } finally {
     await handleFetchCategories();
+    batchUpdating.value = false;
   }
-}, 500);
-
-const handleOpenEditingModal = (category: CategoryTree) => {
-  selectedCategory.value = convertCategoryTreeToCategory(category);
-  editingModal.value = true;
-};
-
-const handleOpenCreateByParentModal = (category: CategoryTree) => {
-  selectedParentCategory.value = convertCategoryTreeToCategory(category);
-  editingModal.value = true;
-};
-
-const onEditingModalClose = () => {
-  selectedCategory.value = undefined;
-  selectedParentCategory.value = undefined;
-  handleFetchCategories();
-};
+}, 300);
 </script>
 <template>
-  <CategoryEditingModal
-    v-model:visible="editingModal"
-    :category="selectedCategory"
-    :parent-category="selectedParentCategory"
-    @close="onEditingModalClose"
-  />
+  <CategoryEditingModal v-if="creationModal" @close="creationModal = false" />
   <VPageHeader :title="$t('core.post_category.title')">
     <template #icon>
       <IconBookRead class="mr-2 self-center" />
@@ -96,7 +65,7 @@ const onEditingModalClose = () => {
       <VButton
         v-permission="['system:posts:manage']"
         type="secondary"
-        @click="editingModal = true"
+        @click="creationModal = true"
       >
         <template #icon>
           <IconAddCircle class="h-full w-full" />
@@ -138,7 +107,7 @@ const onEditingModalClose = () => {
               <VButton
                 v-permission="['system:posts:manage']"
                 type="primary"
-                @click="editingModal = true"
+                @click="creationModal = true"
               >
                 <template #icon>
                   <IconAddCircle class="h-full w-full" />
@@ -151,11 +120,11 @@ const onEditingModalClose = () => {
       </Transition>
       <Transition v-else appear name="fade">
         <CategoryListItem
-          :categories="categoriesTree"
+          v-model="categoriesTree"
+          :class="{
+            'cursor-progress opacity-60': batchUpdating,
+          }"
           @change="handleUpdateInBatch"
-          @delete="handleDelete"
-          @open-editing="handleOpenEditingModal"
-          @open-create-by-parent="handleOpenCreateByParentModal"
         />
       </Transition>
     </VCard>

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { computed, nextTick, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, toRaw } from "vue";
 import { apiClient } from "@/utils/api-client";
 
 // components
@@ -17,36 +17,33 @@ import SubmitButton from "@/components/button/SubmitButton.vue";
 import type { Category } from "@halo-dev/api-client";
 
 // libs
-import { cloneDeep } from "lodash-es";
-import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
 import { useThemeCustomTemplates } from "@console/modules/interface/themes/composables/use-theme";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import useSlugify from "@console/composables/use-slugify";
 import { useI18n } from "vue-i18n";
 import { FormType } from "@/types/slug";
+import { useQueryClient } from "@tanstack/vue-query";
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     category?: Category;
     parentCategory?: Category;
   }>(),
   {
-    visible: false,
     category: undefined,
     parentCategory: undefined,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
 }>();
 
+const queryClient = useQueryClient();
 const { t } = useI18n();
 
-const initialFormState: Category = {
+const formState = ref<Category>({
   spec: {
     displayName: "",
     slug: "",
@@ -63,21 +60,16 @@ const initialFormState: Category = {
     name: "",
     generateName: "category-",
   },
-};
-
-const formState = ref<Category>(cloneDeep(initialFormState));
-const selectedParentCategory = ref("");
+});
+const selectedParentCategory = ref();
 const saving = ref(false);
+const modal = ref();
 
-const isUpdateMode = computed(() => {
-  return !!formState.value.metadata.creationTimestamp;
-});
+const isUpdateMode = !!props.category;
 
-const modalTitle = computed(() => {
-  return isUpdateMode.value
-    ? t("core.post_category.editing_modal.titles.update")
-    : t("core.post_category.editing_modal.titles.create");
-});
+const modalTitle = props.category
+  ? t("core.post_category.editing_modal.titles.update")
+  : t("core.post_category.editing_modal.titles.create");
 
 const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
 
@@ -98,7 +90,7 @@ const handleSaveCategory = async () => {
 
   try {
     saving.value = true;
-    if (isUpdateMode.value) {
+    if (isUpdateMode) {
       await apiClient.extension.category.updatecontentHaloRunV1alpha1Category({
         name: formState.value.metadata.name,
         category: formState.value,
@@ -144,7 +136,10 @@ const handleSaveCategory = async () => {
         );
       }
     }
-    onVisibleChange(false);
+
+    modal.value.close();
+
+    queryClient.invalidateQueries({ queryKey: ["post-categories"] });
 
     Toast.success(t("core.common.toast.save_success"));
   } catch (e) {
@@ -154,37 +149,13 @@ const handleSaveCategory = async () => {
   }
 };
 
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
-
-const handleResetForm = () => {
-  selectedParentCategory.value = "";
-  formState.value = cloneDeep(initialFormState);
-  reset("category-form");
-};
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      if (props.parentCategory) {
-        selectedParentCategory.value = props.parentCategory.metadata.name;
-      }
-
-      if (props.category) {
-        formState.value = cloneDeep(props.category);
-      }
-
-      setFocus("displayNameInput");
-    } else {
-      handleResetForm();
-    }
+onMounted(() => {
+  if (props.category) {
+    formState.value = toRaw(props.category);
   }
-);
+  selectedParentCategory.value = props.parentCategory?.metadata.name;
+  setFocus("displayNameInput");
+});
 
 // custom templates
 const { templates } = useThemeCustomTemplates("category");
@@ -200,17 +171,12 @@ const { handleGenerateSlug } = useSlugify(
       formState.value.spec.slug = value;
     },
   }),
-  computed(() => !isUpdateMode.value),
+  computed(() => !isUpdateMode),
   FormType.CATEGORY
 );
 </script>
 <template>
-  <VModal
-    :title="modalTitle"
-    :visible="visible"
-    :width="700"
-    @update:visible="onVisibleChange"
-  >
+  <VModal ref="modal" :title="modalTitle" :width="700" @close="emit('close')">
     <FormKit
       id="category-form"
       type="form"
@@ -331,14 +297,13 @@ const { handleGenerateSlug } = useSlugify(
     <template #footer>
       <VSpace>
         <SubmitButton
-          v-if="visible"
           :loading="saving"
           type="secondary"
           :text="$t('core.common.buttons.submit')"
           @submit="$formkit.submit('category-form')"
         >
         </SubmitButton>
-        <VButton @click="onVisibleChange(false)">
+        <VButton @click="modal.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>