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-27 11:23:58 +08:00
parent de8da071d0
commit 7308536ded
5 changed files with 199 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -916,6 +916,17 @@
position: sticky;
left: 0;
clear: both;
display: flex;
font-size: 87.5%;
svg {
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1), opacity 1s cubic-bezier(0, 0, 0.2, 1);
}
}
&-arrow--open {
transform: rotate(90deg);
}
}
}

28
app/src/protyle/render/av/action.ts
View file

@ -294,6 +294,34 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.preventDefault();
event.stopPropagation();
return true;
} else if (type === "av-group-fold") {
if (target.getAttribute("disabled") !== "true") {
target.setAttribute("disabled", "true");
const isOpen = target.firstElementChild.classList.contains("av__group-arrow--open");
transaction(protyle, [{
action: "foldAttrViewGroup",
avID: blockElement.dataset.avId,
blockID: blockElement.dataset.nodeId,
id: target.dataset.id,
data: isOpen
}], [{
action: "foldAttrViewGroup",
avID: blockElement.dataset.avId,
blockID: blockElement.dataset.nodeId,
id: target.dataset.id,
data: !isOpen
}]);
if (isOpen) {
target.firstElementChild.classList.remove("av__group-arrow--open");
target.parentElement.nextElementSibling.classList.add("fn__none");
} else {
target.firstElementChild.classList.add("av__group-arrow--open");
target.parentElement.nextElementSibling.classList.remove("fn__none");
}
}
event.preventDefault();
event.stopPropagation();
return true;
}
target = target.parentElement;
}

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

@ -220,7 +220,13 @@ const renderGroupTable = (options: {
options.data.view.groups.forEach((group: IAVTable) => {
if (group.groupHidden === 0) {
group.columns = (options.data.view as IAVTable).columns;
avBodyHTML += `<div class="av__group-title">${group.name}</div><div class="av__body">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
avBodyHTML += `<div class="av__group-title">
<div class="block__icon block__icon--show" data-type="av-group-fold" data-id="${group.id}">
<svg class="${group.groupFolded ? "" : "av__group-arrow--open"}"><use xlink:href="#iconRight"></use></svg>
</div><span class="fn__space"></span>
${group.name}
</div>
<div class="av__body${group.groupFolded ? " fn__none" : ""}">${getTableHTMLs(group, options.blockElement).contentHTML}</div>`;
}
});
if (options.renderAll) {
@ -514,9 +520,6 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
titleElement.dataset.title = operation.data;
});
}
// 只能 setTimeout，以前方案快速输入后最后一次修改会被忽略；必须为每一个 protyle 单独设置，否则有多个 protyle 时，其余无法被执行
clearTimeout(refreshTimeouts[protyle.id]);
refreshTimeouts[protyle.id] = window.setTimeout(() => {
if (operation.action === "setAttrViewColWidth") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
const cellElement = item.querySelector(`.av__cell[data-col-id="${operation.id}"]`) as HTMLElement;
@ -527,7 +530,9 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
(rowItem.querySelector(`[data-col-id="${operation.id}"]`) as HTMLElement).style.width = operation.data;
});
});
} else if (operation.action === "setAttrViewCardSize") {
return;
}
if (operation.action === "setAttrViewCardSize") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
const galleryElement = item.querySelector(".av__gallery") as HTMLElement;
if (galleryElement) {
@ -539,13 +544,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
}
});
} else if (operation.action === "setAttrViewCardAspectRatio") {
return;
}
if (operation.action === "setAttrViewCardAspectRatio") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
item.querySelectorAll(".av__gallery-cover").forEach(coverItem => {
coverItem.className = "av__gallery-cover av__gallery-cover--" + operation.data;
});
});
} else if (operation.action === "hideAttrViewName") {
return;
}
if (operation.action === "hideAttrViewName") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
const titleElement = item.querySelector(".av__title");
if (titleElement) {
@ -566,13 +575,17 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
}
});
} else if (operation.action === "setAttrViewWrapField") {
return;
}
if (operation.action === "setAttrViewWrapField") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
item.querySelectorAll(".av__cell").forEach(fieldItem => {
fieldItem.setAttribute("data-wrap", operation.data.toString());
});
});
} else if (operation.action === "setAttrViewShowIcon") {
return;
}
if (operation.action === "setAttrViewShowIcon") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
item.querySelectorAll('.av__cell[data-dtype="block"] .b3-menu__avemoji, .av__cell[data-dtype="relation"] .b3-menu__avemoji').forEach(cellItem => {
if (operation.data) {
@ -582,13 +595,33 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
}
});
});
} else if (operation.action === "setAttrViewColWrap") {
return;
}
if (operation.action === "setAttrViewColWrap") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
item.querySelectorAll(`.av__cell[data-col-id="${operation.id}"],.av__cell[data-field-id="${operation.id}"]`).forEach(cellItem => {
cellItem.setAttribute("data-wrap", operation.data.toString());
});
});
return;
}
if (operation.action === "foldAttrViewGroup") {
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
const foldElement = item.querySelector(`[data-type="av-group-fold"][data-id="${operation.id}"]`);
if (operation.data) {
foldElement.firstElementChild.classList.remove("av__group-arrow--open");
foldElement.parentElement.nextElementSibling.classList.add("fn__none");
} else {
foldElement.firstElementChild.classList.add("av__group-arrow--open");
foldElement.parentElement.nextElementSibling.classList.remove("fn__none");
}
foldElement.removeAttribute("disabled");
});
return;
}
// 只能 setTimeout，以前方案快速输入后最后一次修改会被忽略；必须为每一个 protyle 单独设置，否则有多个 protyle 时，其余无法被执行
clearTimeout(refreshTimeouts[protyle.id]);
refreshTimeouts[protyle.id] = window.setTimeout(() => {
// 修改表格名 avID 传入到 id 上了 https://github.com/siyuan-note/siyuan/issues/12724
const avID = operation.action === "setAttrViewName" ? operation.id : operation.avID;
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${avID}"]`)).forEach((item: HTMLElement) => {
@ -645,6 +678,5 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
item.removeAttribute("data-loading");
});
});
}
}, ["insertAttrViewBlock"].includes(operation.action) ? 2 : 100);
};

3
app/src/protyle/wysiwyg/transaction.ts
View file

@ -860,7 +860,8 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
"updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc",
"duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID",
"setAttrViewBlockView", "setAttrViewCardSize", "setAttrViewCardAspectRatio", "hideAttrViewName", "setAttrViewShowIcon",
"setAttrViewWrapField", "setAttrViewGroup", "removeAttrViewGroup", "hideAttrViewGroup", "sortAttrViewGroup"].includes(operation.action)) {
"setAttrViewWrapField", "setAttrViewGroup", "removeAttrViewGroup", "hideAttrViewGroup", "sortAttrViewGroup",
"foldAttrViewGroup"].includes(operation.action)) {
if (!isUndo) {
// 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
refreshAV(protyle, operation);

2
app/src/types/index.d.ts vendored
View file

@ -68,6 +68,7 @@ type TOperation =
| "syncAttrViewTableColWidth"
| "hideAttrViewGroup"
| "sortAttrViewGroup"
| "foldAttrViewGroup"
type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
type TCardType = "doc" | "notebook" | "all"
type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |
@ -856,6 +857,7 @@ interface IAVView {
showIcon: boolean;
wrapField: boolean;
groupHidden?: number, // 0：显示，1：空白隐藏，2：手动隐藏
groupFolded?: boolean,
filters: IAVFilter[],
sorts: IAVSort[],
groups: IAVView[]