Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-18 15:40:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/10964

Browse source
This commit is contained in:
Vanessa 2025-07-26 22:50:24 +08:00
parent 19485ca720
commit 33d25372f7
4 changed files with 45 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/src/assets/scss/business/_av.scss
View file

@ -911,6 +911,13 @@
} }
} }
} }
&__group {
&-title {
position: sticky;
left: 0;
}
}
} }
img.av__cellassetimg { img.av__cellassetimg {

2
app/src/protyle/render/av/cell.ts
View file

@ -435,7 +435,7 @@ export const cellScrollIntoView = (blockElement: HTMLElement, cellElement: Eleme
} }
} else { } else {
const footerElement = blockElement.querySelector(".av__row--footer"); const footerElement = blockElement.querySelector(".av__row--footer");
if (footerElement.querySelector(".av__calc--ashow")) { if (footerElement?.querySelector(".av__calc--ashow")) {
const avFooterRect = footerElement.getBoundingClientRect(); const avFooterRect = footerElement.getBoundingClientRect();
if (avFooterRect.top < cellRect.bottom) { if (avFooterRect.top < cellRect.bottom) {
const contentElement = hasClosestByClassName(blockElement, "protyle-content", true); const contentElement = hasClosestByClassName(blockElement, "protyle-content", true);

42
app/src/protyle/render/av/render.ts
View file

@ -187,7 +187,20 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex,
contentHTML += "<div></div></div>"; contentHTML += "<div></div></div>";
}); });
return { return {
contentHTML, contentHTML: contentHTML + `<div class="av__row--util${data.rowCount > data.rows.length ? " av__readonly--show" : ""}">
<div class="av__colsticky">
<button class="b3-button av__button" data-type="av-add-bottom">
<svg><use xlink:href="#iconAdd"></use></svg>
<span>${window.siyuan.languages.newRow}</span>
</button>
<span class="fn__space"></span>
<button class="b3-button av__button${data.rowCount > data.rows.length ? "" : " fn__none"}" data-type="av-load-more">
<svg><use xlink:href="#iconArrowDown"></use></svg>
<span>${window.siyuan.languages.loadMore}</span>
<svg data-type="set-page-size" data-size="${data.pageSize}"><use xlink:href="#iconMore"></use></svg>
</button>
</div>
</div>`,
footerHTML: `<div class="av__row--footer${hasCalc ? " av__readonly--show" : ""}">${calcHTML}</div>` footerHTML: `<div class="av__row--footer${hasCalc ? " av__readonly--show" : ""}">${calcHTML}</div>`
}; };
}; };
@ -207,12 +220,12 @@ const renderGroupTable = (options: {
options.data.view.groups.forEach((group: IAVTable) => { options.data.view.groups.forEach((group: IAVTable) => {
if (group.groupHidden === 0) { if (group.groupHidden === 0) {
group.columns = (options.data.view as IAVTable).columns; group.columns = (options.data.view as IAVTable).columns;
avBodyHTML += `<div>${group.name}</div>${getTableHTMLs(group, options.blockElement).contentHTML}`; avBodyHTML += `<div class="av__group-title">${group.name}</div><div class="av__body">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
} }
}); });
if (options.renderAll) { if (options.renderAll) {
options.blockElement.firstElementChild.outerHTML = `<div class="av__container"> options.blockElement.firstElementChild.outerHTML = `<div class="av__container">
${genTabHeaderHTML(options.data, isSearching || !!query, options.protyle.disabled || !!hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))} ${genTabHeaderHTML(options.data, isSearching || !!query, !options.protyle.disabled && !hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed"))}
<div class="av__scroll"> <div class="av__scroll">
${avBodyHTML} ${avBodyHTML}
</div> </div>
@ -221,6 +234,11 @@ const renderGroupTable = (options: {
} else { } else {
options.blockElement.firstElementChild.querySelector(".av__scroll").innerHTML = avBodyHTML; options.blockElement.firstElementChild.querySelector(".av__scroll").innerHTML = avBodyHTML;
} }
afterRenderTable(options.blockElement);
};
const afterRenderTable = (blockElement: HTMLElement) => {
blockElement.setAttribute("data-render", "true");
}; };
export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) => void, renderAll = true) => { export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) => void, renderAll = true) => {
@ -317,25 +335,11 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
const tableHTMLs = getTableHTMLs(data, e); const tableHTMLs = getTableHTMLs(data, e);
const avBodyHTML = `<div class="av__body"> const avBodyHTML = `<div class="av__body">
${tableHTMLs.contentHTML} ${tableHTMLs.contentHTML}
<div class="av__row--util${data.rowCount > data.rows.length ? " av__readonly--show" : ""}">
<div class="av__colsticky">
<button class="b3-button av__button" data-type="av-add-bottom">
<svg><use xlink:href="#iconAdd"></use></svg>
<span>${window.siyuan.languages.newRow}</span>
</button>
<span class="fn__space"></span>
<button class="b3-button av__button${data.rowCount > data.rows.length ? "" : " fn__none"}" data-type="av-load-more">
<svg><use xlink:href="#iconArrowDown"></use></svg>
<span>${window.siyuan.languages.loadMore}</span>
<svg data-type="set-page-size" data-size="${data.pageSize}"><use xlink:href="#iconMore"></use></svg>
</button>
</div>
</div>
${tableHTMLs.footerHTML} ${tableHTMLs.footerHTML}
</div>`; </div>`;
if (renderAll) { if (renderAll) {
e.firstElementChild.outerHTML = `<div class="av__container"> e.firstElementChild.outerHTML = `<div class="av__container">
${genTabHeaderHTML(response.data, isSearching || !!query, protyle.disabled || !!hasClosestByAttribute(e, "data-type", "NodeBlockQueryEmbed"))} ${genTabHeaderHTML(response.data, isSearching || !!query, !protyle.disabled && !hasClosestByAttribute(e, "data-type", "NodeBlockQueryEmbed"))}
<div class="av__scroll"> <div class="av__scroll">
${avBodyHTML} ${avBodyHTML}
</div> </div>
@ -344,7 +348,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
} else { } else {
e.firstElementChild.querySelector(".av__scroll").innerHTML = avBodyHTML; e.firstElementChild.querySelector(".av__scroll").innerHTML = avBodyHTML;
} }
e.setAttribute("data-render", "true"); afterRenderTable(e);
// 历史兼容 // 历史兼容
e.style.margin = ""; e.style.margin = "";
if (left) { if (left) {

21
app/src/protyle/render/av/row.ts
View file

@ -264,22 +264,25 @@ export const stickyRow = (blockElement: HTMLElement, elementRect: DOMRect, statu
return; return;
} }
// 只读模式下也需固定 https://github.com/siyuan-note/siyuan/issues/11338 // 只读模式下也需固定 https://github.com/siyuan-note/siyuan/issues/11338
const scrollRect = blockElement.querySelector(".av__scroll").getBoundingClientRect(); const headerElements = blockElement.querySelectorAll(".av__row--header");
const headerElement = blockElement.querySelector(".av__row--header") as HTMLElement; if (headerElements.length > 0 && (status === "top" || status === "all")) {
if (headerElement && (status === "top" || status === "all")) { headerElements.forEach((item: HTMLElement) => {
const distance = Math.floor(elementRect.top - scrollRect.top); const bodyRect = item.parentElement.getBoundingClientRect();
if (distance > 0 && distance < scrollRect.height) { const distance = Math.floor(elementRect.top - bodyRect.top);
headerElement.style.transform = `translateY(${distance}px)`; if (distance > 0 && distance < bodyRect.height - item.clientHeight) {
item.style.transform = `translateY(${distance}px)`;
} else { } else {
headerElement.style.transform = ""; item.style.transform = "";
} }
});
} }
const footerElement = blockElement.querySelector(".av__row--footer") as HTMLElement; const footerElement = blockElement.querySelector(".av__row--footer") as HTMLElement;
if (footerElement && (status === "bottom" || status === "all")) { if (footerElement && (status === "bottom" || status === "all")) {
if (footerElement.querySelector(".av__calc--ashow")) { if (footerElement.querySelector(".av__calc--ashow")) {
const distance = Math.ceil(elementRect.bottom - footerElement.parentElement.getBoundingClientRect().bottom); const bodyRect = footerElement.parentElement.getBoundingClientRect();
if (distance < 0 && -distance < scrollRect.height) { const distance = Math.ceil(elementRect.bottom - bodyRect.bottom);
if (distance < 0 && -distance < bodyRect.height) {
footerElement.style.transform = `translateY(${distance}px)`; footerElement.style.transform = `translateY(${distance}px)`;
} else { } else {
footerElement.style.transform = ""; footerElement.style.transform = "";