github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: menu and post category dragging issue (#7608) 

#### What type of PR is this?

/area ui
/kind bug
/milestone 2.21.x

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

Fix issue where menu items and post categories could not be reordered via drag-and-drop

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

Fixes #7607 

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

```release-note
修复菜单项和文章分类可能出现无法拖动排序的问题
```
pull/7613/head
Ryan Wang 2025-07-04 12:39:41 +08:00 committed by GitHub
parent a4a418b22e
commit 3dd0d00288
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 2 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,6 @@ const { categories, categoriesTree, isLoading, handleFetchCategories } =
usePostCategory(); usePostCategory();
const batchUpdating = ref(false); const batchUpdating = ref(false);
const isDragging = ref(false);
async function handleUpdateInBatch() { async function handleUpdateInBatch() {
const categoriesTreeToUpdate = resetCategoriesTreePriority( const categoriesTreeToUpdate = resetCategoriesTreePriority(
@ -56,7 +55,6 @@ async function handleUpdateInBatch() {
} finally { } finally {
await handleFetchCategories(); await handleFetchCategories();
batchUpdating.value = false; batchUpdating.value = false;
isDragging.value = false;
} }
} }
</script> </script>
@ -130,16 +128,15 @@ async function handleUpdateInBatch() {
:class="{ :class="{
'cursor-progress opacity-60': batchUpdating, 'cursor-progress opacity-60': batchUpdating,
}" }"
:disable-drag="batchUpdating"
trigger-class="drag-element" trigger-class="drag-element"
:indent="40" :indent="40"
@after-drop="handleUpdateInBatch" @after-drop="handleUpdateInBatch"
@before-drag-start="isDragging = true"
> >
<template #default="{ node, stat }"> <template #default="{ node, stat }">
<CategoryListItem <CategoryListItem
:category-tree-node="node" :category-tree-node="node"
:is-child-level="stat.level > 1" :is-child-level="stat.level > 1"
:is-dragging="isDragging"
/> />
</template> </template>
</Draggable> </Draggable>

5
ui/console-src/modules/contents/posts/categories/components/CategoryListItem.vue
View File

@ -27,12 +27,10 @@ const queryClient = useQueryClient();
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
isChildLevel?: boolean; isChildLevel?: boolean;
isDragging?: boolean;
categoryTreeNode: CategoryTreeNode; categoryTreeNode: CategoryTreeNode;
}>(), }>(),
{ {
isChildLevel: false, isChildLevel: false,
isDragging: false,
} }
); );
@ -92,9 +90,6 @@ const handleOpenCreateByParentModal = () => {
<div <div
v-permission="['system:posts:manage']" 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="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" /> <IconList class="h-3.5 w-3.5" />
</div> </div>

7
ui/console-src/modules/interface/menus/Menus.vue
View File

@ -45,7 +45,6 @@ const selectedMenu = ref<Menu>();
const selectedMenuItem = ref<MenuItem>(); const selectedMenuItem = ref<MenuItem>();
const selectedParentMenuItem = ref<MenuItem>(); const selectedParentMenuItem = ref<MenuItem>();
const menuItemEditingModal = ref(); const menuItemEditingModal = ref();
const isDragging = ref(false);
const { const {
data: menuItems, data: menuItems,
@ -162,7 +161,6 @@ async function handleUpdateInBatch() {
await queryClient.invalidateQueries({ queryKey: ["menus"] }); await queryClient.invalidateQueries({ queryKey: ["menus"] });
await refetch(); await refetch();
batchUpdating.value = false; batchUpdating.value = false;
isDragging.value = false;
} }
} }
@ -312,10 +310,10 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
:class="{ :class="{
'cursor-progress opacity-60': batchUpdating, 'cursor-progress opacity-60': batchUpdating,
}" }"
:disable-drag="batchUpdating"
trigger-class="drag-element" trigger-class="drag-element"
:indent="40" :indent="40"
@after-drop="handleUpdateInBatch" @after-drop="handleUpdateInBatch"
@before-drag-start="isDragging = true"
> >
<template #default="{ node }"> <template #default="{ node }">
<div <div
@ -325,9 +323,6 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
<div <div
v-permission="['system:menus:manage']" v-permission="['system:menus: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="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" /> <IconList class="h-3.5 w-3.5" />
</div> </div>