From 9bfe3a66d5140a6ef4e6f96c18f8fcdf6988df52 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Wed, 22 May 2024 10:52:46 +0800 Subject: [PATCH] refactor: improve code base of post category-related (#5958) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### 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 是在 https://github.com/halo-dev/halo/pull/5914 中引入,替换的原因是 vuedraggable 库已经不再积极维护。 2. 改进分类编辑表单的逻辑,清理无用代码。 #### Special notes for your reviewer: 需要测试: 1. 测试文章分类拖拽排序功能是否表现正常。 2. 测试新增/编辑文章分类功能是否表现正常。 #### Does this PR introduce a user-facing change? ```release-note None ``` --- .../posts/categories/CategoryList.vue | 65 +- .../components/CategoryEditingModal.vue | 85 +- .../components/CategoryListItem.vue | 262 +- .../composables/use-post-category.ts | 39 +- ui/package.json | 3 +- ui/pnpm-lock.yaml | 2273 +++++++++++++++-- ui/src/vite/config-builder.ts | 2 +- 7 files changed, 2258 insertions(+), 471 deletions(-) diff --git a/ui/console-src/modules/contents/posts/categories/CategoryList.vue b/ui/console-src/modules/contents/posts/categories/CategoryList.vue index 186b23f609..fe2303c46c 100644 --- a/ui/console-src/modules/contents/posts/categories/CategoryList.vue +++ b/ui/console-src/modules/contents/posts/categories/CategoryList.vue @@ -10,21 +10,14 @@ 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"; @@ -32,17 +25,12 @@ import { useDebounceFn } from "@vueuse/core"; // hooks import { usePostCategory } from "./composables/use-post-category"; -const editingModal = ref(false); -const selectedCategory = ref(); -const selectedParentCategory = ref(); +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( @@ -50,6 +38,7 @@ const handleUpdateInBatch = useDebounceFn(async () => { ); 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);