Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-09-22 00:20:47 +02: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-24 18:33:07 +08:00
parent 9480403d2f
commit 0d3978f407
2 changed files with 158 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

107
app/src/protyle/render/av/groups.ts
View file

@ -4,6 +4,8 @@ import {escapeHtml} from "../../../util/escape";
import {setPosition} from "../../../util/setPosition";
import {getFieldsByData} from "./view";
import {fetchSyncPost} from "../../../util/fetch";
import {Menu} from "../../../plugin/Menu";
import {transaction} from "../../wysiwyg/transaction";
export const setGroupMethod = async (options: {
protyle: IProtyle;
@ -43,6 +45,9 @@ export const getGroupsMethodHTML = (columns: IAVColumn[], group: IAVGroup) => {
${group ? "" : selectHTML}
</button>`;
columns.forEach(item => {
if (["rollup", "mAsset"].includes(item.type)) {
return;
}
html += `<button class="b3-menu__item" data-id="${item.id}" data-type="setGroupMethod">
<div class="b3-menu__label fn__flex">
${item.icon ? unicode2Emoji(item.icon, "b3-menu__icon", true) : `<svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(item.type)}"></use></svg>`}
@ -98,20 +103,21 @@ export const getGroupsHTML = (columns: IAVColumn[], view: IAVView) => {
let column: IAVColumn;
if (view.group && view.group.field) {
let groupHTML = "";
column = columns.find(item => item.id === view.group.field);
if (view.groups.length > 0) {
groupHTML = `<button class="b3-menu__separator"></button>
<button class="b3-menu__item" data-type="nobg">
<span class="b3-menu__label">${window.siyuan.languages.groups}</span>
</button>`;
const disabledDrag = ["created", "date", "created", "updated"].includes(column.type);
view.groups.forEach(item => {
groupHTML += `<button class="b3-menu__item" draggable="true">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
groupHTML += `<button class="b3-menu__item" draggable="${disabledDrag ? "false" : "true"}">
${disabledDrag ? "" : '<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>'}
<div class="b3-menu__label fn__flex">${item.name || ""}</div>
<svg class="b3-menu__action"><use xlink:href="#iconEye${item.groupHidden ? "off" : ""}"></use></svg>
</button>`;
});
}
column = columns.find(item => item.id === view.group.field);
html = `<button class="b3-menu__item${["date", "updated", "created"].includes(column.type) ? "" : " fn__none"}" data-type="goGroupsDate">
<span class="b3-menu__label">${window.siyuan.languages.date}</span>
<span class="b3-menu__accelerator">${getLanguageByIndex(view.group.method, "date")}</span>
@ -122,7 +128,7 @@ export const getGroupsHTML = (columns: IAVColumn[], view: IAVView) => {
<span class="b3-menu__accelerator">${(view.group.range && typeof view.group.range.numStart === "number") ? `${view.group.range.numStart} - ${view.group.range.numEnd}` : ""}</span>
<svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
</button>
<button class="b3-menu__item" data-type="goGroupsSort">
<button class="b3-menu__item${["checkbox", "rollup", "mAsset"].includes(column.type) ? " fn__none" : ""}" data-type="goGroupsSort">
<span class="b3-menu__label">${window.siyuan.languages.sort}</span>
<span class="b3-menu__accelerator">${getLanguageByIndex(view.group.order, "sort")}</span>
<svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
@ -159,3 +165,96 @@ ${html}
export const bindGroupsEvent = () => {
};
export const goGroupsDate = (options: {
protyle: IProtyle;
target: Element;
data: IAV;
blockElement: Element;
}) => {
const menu = new Menu("avGroupDate");
if (menu.isOpen) {
return;
}
const blockID = options.blockElement.getAttribute("data-node-id");
[2, 3, 4, 5, 6].forEach((item) => {
const label = getLanguageByIndex(item, "date");
menu.addItem({
iconHTML: "",
checked: options.data.view.group.method === item,
label,
click() {
transaction(options.protyle, [{
action: "setAttrViewGroup",
avID: options.data.id,
blockID,
data: {
method: item,
}
}], [{
action: "setAttrViewGroup",
avID: options.data.id,
blockID,
data: {
method: options.data.view.group?.method || null,
}
}]);
options.data.view.group.method = item;
options.target.querySelector(".b3-menu__accelerator").textContent = label;
}
});
});
const rect = options.target.getBoundingClientRect();
menu.open({
isLeft: true,
x: rect.right,
y: rect.bottom
});
};
export const goGroupsSort = (options: {
protyle: IProtyle;
target: Element;
data: IAV;
blockElement: Element;
}) => {
const menu = new Menu("avGroupSort");
if (menu.isOpen) {
return;
}
const blockID = options.blockElement.getAttribute("data-node-id");
const column = getFieldsByData(options.data).find(item => item.id === options.data.view.group.field);
(["created", "date", "created", "updated"].includes(column.type) ? [0, 1] : [0, 1, 2]).forEach((item) => {
const label = getLanguageByIndex(item, "sort");
menu.addItem({
iconHTML: "",
checked: options.data.view.group.order === item,
label,
click() {
transaction(options.protyle, [{
action: "setAttrViewGroup",
avID: options.data.id,
blockID,
data: {
order: item,
}
}], [{
action: "setAttrViewGroup",
avID: options.data.id,
blockID,
data: {
order: options.data.view.group?.order || null,
}
}]);
options.data.view.group.order = item;
options.target.querySelector(".b3-menu__accelerator").textContent = label;
}
});
});
const rect = options.target.getBoundingClientRect();
menu.open({
isLeft: true,
x: rect.right,
y: rect.bottom
});
};

81
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -48,7 +48,14 @@ import {escapeAttr, escapeHtml} from "../../../util/escape";
import {Dialog} from "../../../dialog";
import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout";
import {setGalleryCover, setGalleryRatio, setGallerySize} from "./gallery/util";
import {bindGroupsEvent, getGroupsHTML, getGroupsMethodHTML, setGroupMethod} from "./groups";
import {
bindGroupsEvent,
getGroupsHTML,
getGroupsMethodHTML,
goGroupsDate,
goGroupsSort,
setGroupMethod
} from "./groups";
export const openMenuPanel = (options: {
protyle: IProtyle,
@ -577,31 +584,6 @@ export const openMenuPanel = (options: {
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "goGroups") {
menuElement.innerHTML = getGroupsHTML(fields, data.view);
bindGroupsEvent();
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
window.siyuan.menus.menu.remove();
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "goGroupsMethod") {
menuElement.innerHTML = getGroupsMethodHTML(fields, data.view.group);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "setGroupMethod") {
setGroupMethod({
protyle: options.protyle,
fieldId: target.getAttribute("data-id"),
data,
menuElement,
blockElement: options.blockElement,
});
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "removeSorts") {
transaction(options.protyle, [{
action: "setAttrViewSorts",
@ -1447,6 +1429,53 @@ export const openMenuPanel = (options: {
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "goGroupsDate") {
goGroupsDate({
target,
protyle: options.protyle,
blockElement: options.blockElement,
data
});
fields = getFieldsByData(data);
event.stopPropagation();
event.preventDefault();
break;
} else if (type === "goGroupsSort") {
goGroupsSort({
target,
protyle: options.protyle,
blockElement: options.blockElement,
data
});
fields = getFieldsByData(data);
event.stopPropagation();
event.preventDefault();
break;
} else if (type === "setGroupMethod") {
setGroupMethod({
protyle: options.protyle,
fieldId: target.getAttribute("data-id"),
data,
menuElement,
blockElement: options.blockElement,
});
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "goGroups") {
menuElement.innerHTML = getGroupsHTML(fields, data.view);
bindGroupsEvent();
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "goGroupsMethod") {
window.siyuan.menus.menu.remove();
menuElement.innerHTML = getGroupsMethodHTML(fields, data.view.group);
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
event.preventDefault();
event.stopPropagation();
break;
}
// 有错误日志，没找到重现步骤，需先判断一下
if (!target || !target.parentElement) {