diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss index 27c3b8907..f63776096 100644 --- a/app/src/assets/scss/business/_av.scss +++ b/app/src/assets/scss/business/_av.scss @@ -527,6 +527,26 @@ &.dragover__right::after { right: -10px; } + + + &.dragover__top::after, + &.dragover__bottom::after { + left: 0; + right: 0; + height: 4px; + content: ''; + position: absolute; + background-color: var(--b3-theme-primary-lighter); + z-index: 3; + } + + &.dragover__top::after { + top: -10px; + } + + &.dragover__bottom::after { + bottom: -10px; + } } } diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index e2d352c3b..e9167229b 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -625,7 +625,7 @@ ${window.siyuan.languages[avType === "table" ? "insertRowBefore" : "insertItemBe blockElement, protyle, count: parseInt(inputElement.value), - previousID: rowElements[0].previousElementSibling.getAttribute("data-id"), + previousID: rowElements[0].previousElementSibling?.getAttribute("data-id"), groupID: rowElements[0].parentElement.getAttribute("data-group-id") }); menu.close(); @@ -636,7 +636,7 @@ ${window.siyuan.languages[avType === "table" ? "insertRowBefore" : "insertItemBe blockElement, protyle, count: parseInt(inputElement.value), - previousID: rowElements[0].previousElementSibling.getAttribute("data-id"), + previousID: rowElements[0].previousElementSibling?.getAttribute("data-id"), groupID: rowElements[0].parentElement.getAttribute("data-group-id") }); menu.close(); diff --git a/app/src/protyle/render/av/kanban/render.ts b/app/src/protyle/render/av/kanban/render.ts index 2f5b38617..7c3e08282 100644 --- a/app/src/protyle/render/av/kanban/render.ts +++ b/app/src/protyle/render/av/kanban/render.ts @@ -48,7 +48,7 @@ const getKanbanHTML = (data: IAVKanban) => { } else { galleryHTML += `
`; } - } else if (item.coverContent) { + } else if (item.coverContent.trim()) { galleryHTML += `
`; } } diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts index 22944ce8f..f6ace2d92 100644 --- a/app/src/protyle/util/editorCommonEvent.ts +++ b/app/src/protyle/util/editorCommonEvent.ts @@ -1171,7 +1171,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { targetElement = hasClosestByClassName(event.target, "av__gallery-item") || hasClosestByClassName(event.target, "av__gallery-add") || hasClosestByClassName(event.target, "av__row") || hasClosestByClassName(event.target, "av__row--util") || hasClosestBlock(event.target); - if (targetElement && targetElement.getAttribute("data-av-type") === "gallery" && event.target.classList.contains("av__gallery")) { + if (targetElement && ["gallery", "kanban"].includes(targetElement.getAttribute("data-av-type")) && event.target.classList.contains("av__gallery")) { // 拖拽到属性视图 gallery 内,但没选中 item return; } @@ -1355,18 +1355,31 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => { } return; } - // gallery + // gallery & kanban if (targetElement.classList.contains("av__gallery-item")) { - const midLeft = nodeRect.left + nodeRect.width / 2; - if (event.clientX < midLeft && event.clientX > nodeRect.left - 13) { - targetElement.classList.add("dragover__left"); - } else if (event.clientX > midLeft && event.clientX <= nodeRect.right + 13) { - targetElement.classList.add("dragover__right"); + if (hasClosestByClassName(targetElement, "av__kanban-group")) { + const midTop = nodeRect.top + nodeRect.height / 2; + if (event.clientY < midTop && event.clientY > nodeRect.top - 13) { + targetElement.classList.add("dragover__top"); + } else if (event.clientY > midTop && event.clientY <= nodeRect.bottom + 13) { + targetElement.classList.add("dragover__bottom"); + } + } else { + const midLeft = nodeRect.left + nodeRect.width / 2; + if (event.clientX < midLeft && event.clientX > nodeRect.left - 13) { + targetElement.classList.add("dragover__left"); + } else if (event.clientX > midLeft && event.clientX <= nodeRect.right + 13) { + targetElement.classList.add("dragover__right"); + } } return; } if (targetElement.classList.contains("av__gallery-add")) { - targetElement.classList.add("dragover__left"); + if (hasClosestByClassName(targetElement, "av__kanban-group")) { + targetElement.classList.add("dragover__bottom"); + } else { + targetElement.classList.add("dragover__left"); + } return; }