From 07b13c9e488631a3bfc04109b593605753fc93ad Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sat, 14 Jun 2025 09:48:25 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10414 --- app/src/protyle/render/av/action.ts | 55 ++++++++++++------ app/src/protyle/render/av/cell.ts | 63 ++++++++++++++------- app/src/protyle/render/av/gallery/item.ts | 4 +- app/src/protyle/render/av/gallery/render.ts | 4 +- app/src/types/index.d.ts | 5 +- 5 files changed, 88 insertions(+), 43 deletions(-) diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 0cc406714..605b680c7 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -217,25 +217,38 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle return true; } else if (target.classList.contains("av__cell")) { if (!hasClosestByClassName(target, "av__row--header")) { - const scrollElement = hasClosestByClassName(target, "av__scroll"); - if (!scrollElement || target.querySelector(".av__pulse")) { - return; - } - const rowElement = hasClosestByClassName(target, "av__row"); - if (!rowElement) { + if (target.querySelector(".av__pulse")) { return; } const cellType = getTypeByCellElement(target); - // TODO 点击单元格的时候， lineNumber 选中整行 - if (cellType === "updated" || cellType === "created" || cellType === "lineNumber") { - selectRow(rowElement.querySelector(".av__firstcol"), "toggle"); + if (blockElement.getAttribute("data-av-type") === "gallery") { + const itemElement = hasClosestByClassName(target, "av__gallery-item"); + if (itemElement) + if (cellType === "updated" || cellType === "created" || cellType === "lineNumber") { + itemElement.classList.add("av__gallery-item--select"); + } else { + popTextCell(protyle, [target]); + } } else { - scrollElement.querySelectorAll(".av__row--select").forEach(item => { - item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); - item.classList.remove("av__row--select"); - }); - updateHeader(rowElement); - popTextCell(protyle, [target]); + const scrollElement = hasClosestByClassName(target, "av__scroll"); + if (!scrollElement) { + return; + } + const rowElement = hasClosestByClassName(target, "av__row"); + if (!rowElement) { + return; + } + // TODO 点击单元格的时候， lineNumber 选中整行 + if (cellType === "updated" || cellType === "created" || cellType === "lineNumber") { + selectRow(rowElement.querySelector(".av__firstcol"), "toggle"); + } else { + scrollElement.querySelectorAll(".av__row--select").forEach(item => { + item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck"); + item.classList.remove("av__row--select"); + }); + updateHeader(rowElement); + popTextCell(protyle, [target]); + } } } event.preventDefault(); @@ -716,7 +729,17 @@ export const updateAttrViewCellAnimation = (cellElement: HTMLElement, value: IAV updateHeaderCell(cellElement, headerValue); } else { const hasDragFill = cellElement.querySelector(".av__drag-fill"); - cellElement.innerHTML = renderCell(value); + const blockElement = hasClosestBlock(cellElement); + if (!blockElement) { + return; + } + const viewType = blockElement.getAttribute("data-av-type") as TAVView; + if (viewType === "gallery") { + const iconElement = cellElement.querySelector(".b3-menu__avemoji"); + cellElement.innerHTML = renderCell(value, undefined, iconElement ? !iconElement.classList.contains("fn__none") : false, viewType); + } else { + cellElement.innerHTML = renderCell(value); + } if (hasDragFill) { addDragFill(cellElement); } diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts index ee9d78c26..c01e41c95 100644 --- a/app/src/protyle/render/av/cell.ts +++ b/app/src/protyle/render/av/cell.ts @@ -455,6 +455,9 @@ export const cellScrollIntoView = (blockElement: HTMLElement, cellElement: Eleme }; export const getTypeByCellElement = (cellElement: Element) => { + if (cellElement.parentElement.classList.contains("av__gallery-fields")) { + return cellElement.getAttribute("data-dtype") as TAVCol; + } const scrollElement = hasClosestByClassName(cellElement, "av__scroll"); if (!scrollElement) { return; @@ -476,9 +479,12 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type if (!blockElement) { return; } + const viewType = blockElement.getAttribute("data-av-type") as TAVView; let cellRect = cellElements[0].getBoundingClientRect(); const contentElement = hasClosestByClassName(blockElement, "protyle-content", true); - cellScrollIntoView(blockElement, cellElements[0], false); + if (viewType === "table") { + cellScrollIntoView(blockElement, cellElements[0], false); + } cellRect = cellElements[0].getBoundingClientRect(); let html = ""; let height = cellRect.height; @@ -515,7 +521,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type } else if (type === "rollup") { openMenuPanel({protyle, blockElement, type: "rollup", cellElements, colId: cellElements[0].dataset.colId}); } - if (!hasClosestByClassName(cellElements[0], "custom-attr")) { + if (viewType === "table" && !hasClosestByClassName(cellElements[0], "custom-attr")) { cellElements[0].classList.add("av__cell--select"); addDragFill(cellElements[0]); } @@ -624,12 +630,15 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type }; const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, blockElement: HTMLElement, cellElements: HTMLElement[]) => { - const rowElement = hasClosestByClassName(cellElements[0], "av__row"); - if (!rowElement) { - return; - } - if (cellElements.length === 1 && cellElements[0].dataset.detached === "true" && !rowElement.dataset.id) { - return; + const viewType = blockElement.getAttribute("data-av-type") as TAVView; + if (viewType === "table") { + const rowElement = hasClosestByClassName(cellElements[0], "av__row"); + if (!rowElement) { + return; + } + if (cellElements.length === 1 && cellElements[0].dataset.detached === "true" && !rowElement.dataset.id) { + return; + } } const avMaskElement = document.querySelector(".av__mask"); const avID = blockElement.getAttribute("data-av-id"); @@ -657,8 +666,10 @@ const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, blockElement: H checked: cellElements[0].querySelector("use").getAttribute("xlink:href") === "#iconUncheck" } : (avMaskElement.querySelector(".b3-text-field") as HTMLInputElement).value, cellElements); } - if (cellElements[0] // 兼容新增行后台隐藏 - && !hasClosestByClassName(cellElements[0], "custom-attr")) { + if (viewType === "table" && + // 兼容新增行后台隐藏 + cellElements[0] && + !hasClosestByClassName(cellElements[0], "custom-attr")) { cellElements[0].classList.add("av__cell--select"); addDragFill(cellElements[0]); } @@ -694,15 +705,19 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va } } const isCustomAttr = hasClosestByClassName(cellElements[0], "custom-attr"); + const viewType = nodeElement.getAttribute("data-av-type") as TAVView; cellElements.forEach((item: HTMLElement, elementIndex) => { - const rowElement = hasClosestByClassName(item, "av__row"); - if (!rowElement) { - return; - } - if (!nodeElement.contains(item)) { - item = cellElements[elementIndex] = (nodeElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) || - nodeElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement; + const rowElement = hasClosestByClassName(item, "av__row") as HTMLElement; + if (viewType === "table") { + if (!rowElement) { + return; + } + if (!nodeElement.contains(item)) { + item = cellElements[elementIndex] = (nodeElement.querySelector(`.av__row[data-id="${rowElement.dataset.id}"] .av__cell[data-col-id="${item.dataset.colId}"]`) || + nodeElement.querySelector(`.fn__flex-1[data-col-id="${item.dataset.colId}"]`)) as HTMLElement; + } } + if (!item) { // 兼容新增行后台隐藏 return; @@ -711,7 +726,7 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va if (["created", "updated", "template", "rollup"].includes(type)) { return; } - const rowID = rowElement.getAttribute("data-id"); + const rowID = viewType === "table" ? rowElement.getAttribute("data-id") : item.getAttribute("data-field-id"); const cellId = item.dataset.id; // 刚创建时无 id，更新需和 oldValue 保持一致 const colId = item.dataset.colId; @@ -893,7 +908,7 @@ export const renderCellAttr = (cellElement: Element, value: IAVCellValue) => { } }; -export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = true) => { +export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = true, type: TAVView = "table") => { let text = ""; if ("template" === cellValue.type) { text = `${cellValue ? (cellValue.template.content || "") : ""}`; @@ -908,7 +923,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = tru if (cellValue?.isDetached) { text = `${Lute.EscapeHTMLStr(cellValue.block.content || "")}${window.siyuan.languages.more}`; } else { - text = `${unicode2Emoji(cellValue.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(cellValue.block.content)}${window.siyuan.languages.update}`; + text = `${unicode2Emoji(cellValue.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}${Lute.EscapeHTMLStr(cellValue.block.content)}${window.siyuan.languages.update}`; } } else if (cellValue.type === "number") { text = `${cellValue?.number.formattedContent || cellValue?.number.content || ""}`; @@ -948,10 +963,14 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = tru } }); } else if (cellValue.type === "checkbox") { - text += ``; + text += `
`; + if (type === "gallery") { + text += `${window.siyuan.languages.checkbox}`; + } + text += "
"; } else if (cellValue.type === "rollup") { cellValue?.rollup?.contents?.forEach((item) => { - const rollupText = ["select", "mSelect", "mAsset", "checkbox", "relation"].includes(item.type) ? renderCell(item) : renderRollup(item); + const rollupText = ["select", "mSelect", "mAsset", "checkbox", "relation"].includes(item.type) ? renderCell(item, rowIndex, showIcon, type) : renderRollup(item); if (rollupText) { text += rollupText + ", "; } diff --git a/app/src/protyle/render/av/gallery/item.ts b/app/src/protyle/render/av/gallery/item.ts index 46085eb78..4d00b0b36 100644 --- a/app/src/protyle/render/av/gallery/item.ts +++ b/app/src/protyle/render/av/gallery/item.ts @@ -120,7 +120,9 @@ export const insertGalleryItemAnimation = (options: { const sideItemCellElement = sideItemElement.querySelector(`.av__cell[data-field-id="${item.column}"]`) as HTMLElement; const cellElement = currentItemElement.querySelector(`.av__cell[data-field-id="${item.column}"]`); const cellValue = genCellValueByElement(getTypeByCellElement(sideItemCellElement), sideItemCellElement); - cellElement.innerHTML = renderCell(cellValue); + const iconElement = cellElement.querySelector(".b3-menu__avemoji"); + cellElement.innerHTML = renderCell(cellValue, undefined, + iconElement ? !iconElement.classList.contains("fn__none") : false, "gallery"); renderCellAttr(cellElement, cellValue); } }); diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts index 92e06afaf..a7c965a5e 100644 --- a/app/src/protyle/render/av/gallery/render.ts +++ b/app/src/protyle/render/av/gallery/render.ts @@ -97,14 +97,14 @@ export const renderGallery = (options: { } galleryHTML += `
${renderCell(cell.value, rowIndex, view.showIcon)}
`; +${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex, view.showIcon, "gallery")}`; }); galleryHTML += `
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index a6dff3cf1..6fc98a601 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -78,6 +78,7 @@ type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" | "destroy-protyle" | "lock-screen" | "mobile-keyboard-show" | "mobile-keyboard-hide" +type TAVView = "table" | "gallery" type TAVCol = "text" | "date" @@ -823,7 +824,7 @@ interface IAV { name: string; view: IAVTable | IAVGallery; viewID: string; - viewType: "table" | "gallery"; + viewType: TAVView; views: IAVView[]; } @@ -831,7 +832,7 @@ interface IAVView { name: string; desc: string; id: string; - type: string; + type: TAVView; icon: string; hideAttrViewName: boolean; pageSize: number,