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

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

Browse source
This commit is contained in:
Vanessa 2025-06-16 23:32:48 +08:00
parent 1cf3ba2653
commit 279a7e71b7
10 changed files with 78 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -118,9 +118,12 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
if (viewItemElement.classList.contains("item--focus")) { if (viewItemElement.classList.contains("item--focus")) {
openViewMenu({protyle, blockElement, element: viewItemElement}); openViewMenu({protyle, blockElement, element: viewItemElement});
} else { } else {
blockElement.removeAttribute("data-render"); transaction(protyle, [{
blockElement.setAttribute("data-av-type", viewItemElement.dataset.avType); action: "setAttrViewBlockView",
avRender(blockElement, protyle, undefined, viewItemElement.dataset.id); blockID: blockElement.getAttribute("data-node-id"),
id: viewItemElement.dataset.id,
avID: blockElement.getAttribute("data-av-id"),
}]);
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();

17
app/src/protyle/render/av/gallery/render.ts
View file

@ -14,7 +14,6 @@ export const renderGallery = (options: {
blockElement: HTMLElement, blockElement: HTMLElement,
protyle: IProtyle, protyle: IProtyle,
cb?: (data: IAV) => void, cb?: (data: IAV) => void,
viewID?: string,
renderAll: boolean renderAll: boolean
}) => { }) => {
const alignSelf = options.blockElement.style.alignSelf; const alignSelf = options.blockElement.style.alignSelf;
@ -42,20 +41,6 @@ export const renderGallery = (options: {
}); });
const created = options.protyle.options.history?.created; const created = options.protyle.options.history?.created;
const snapshot = options.protyle.options.history?.snapshot; const snapshot = options.protyle.options.history?.snapshot;
let newViewID = options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "";
if (typeof options.viewID === "string") {
const viewTabElement = options.blockElement.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${options.viewID}"]`) as HTMLElement;
if (viewTabElement) {
options.blockElement.dataset.pageSize = viewTabElement.dataset.page;
}
newViewID = options.viewID;
fetchPost("/api/av/setDatabaseBlockView", {
id: options.blockElement.dataset.nodeId,
avID: options.blockElement.dataset.avId,
viewID: options.viewID
});
options.blockElement.setAttribute(Constants.CUSTOM_SY_AV_VIEW, newViewID);
}
let searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement; let searchInputElement = options.blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement;
const isSearching = searchInputElement && document.activeElement.isSameNode(searchInputElement); const isSearching = searchInputElement && document.activeElement.isSameNode(searchInputElement);
const query = searchInputElement?.value || ""; const query = searchInputElement?.value || "";
@ -64,7 +49,7 @@ export const renderGallery = (options: {
created, created,
snapshot, snapshot,
pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined, pageSize: parseInt(options.blockElement.dataset.pageSize) || undefined,
viewID: newViewID, viewID: options.blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
query: query.trim() query: query.trim()
}, (response) => { }, (response) => {
const view: IAVGallery = response.data.view; const view: IAVGallery = response.data.view;

35
app/src/protyle/render/av/layout.ts
View file

@ -1,5 +1,6 @@
import {transaction} from "../../wysiwyg/transaction"; import {transaction} from "../../wysiwyg/transaction";
import {Constants} from "../../../constants"; import {Constants} from "../../../constants";
import {fetchPost} from "../../../util/fetch";
export const getLayoutHTML = (data: IAV) => { export const getLayoutHTML = (data: IAV) => {
let html = ""; let html = "";
@ -189,7 +190,7 @@ export const bindLayoutEvent = (options: {
blockID, blockID,
data: !checked data: !checked
}]); }]);
options.blockElement.querySelectorAll('.av__gallery-fields').forEach(item => { options.blockElement.querySelectorAll(".av__gallery-fields").forEach(item => {
if (checked) { if (checked) {
item.classList.add("av__gallery-fields--wrap"); item.classList.add("av__gallery-fields--wrap");
} else { } else {
@ -205,23 +206,25 @@ export const updateLayout = (options: {
protyle: IProtyle, protyle: IProtyle,
target: HTMLElement target: HTMLElement
}) => { }) => {
if (options.target.classList.contains("av__layout-item--select")) { if (options.target.classList.contains("av__layout-item--select") || options.target.dataset.load === "true") {
return; return;
} }
const avID = options.nodeElement.getAttribute("data-av-id"); options.target.dataset.load = "true";
const blockID = options.nodeElement.getAttribute("data-node-id");
const layout = options.target.getAttribute("data-view-type");
transaction(options.protyle, [{
action: "changeAttrViewLayout",
avID,
blockID,
layout
}], [{
action: "changeAttrViewLayout",
avID,
blockID,
layout: options.data.viewType
}]);
options.target.parentElement.querySelector(".av__layout-item--select").classList.remove("av__layout-item--select"); options.target.parentElement.querySelector(".av__layout-item--select").classList.remove("av__layout-item--select");
options.target.classList.add("av__layout-item--select"); options.target.classList.add("av__layout-item--select");
fetchPost("/api/av/changeAttrViewLayout", {
blockID: options.nodeElement.getAttribute("data-node-id"),
avID: options.nodeElement.getAttribute("data-av-id"),
layoutType: options.target.getAttribute("data-view-type")
}, (response) => {
const menuElement = document.querySelector(".av__panel").lastElementChild as HTMLElement;
menuElement.innerHTML = getLayoutHTML(response.data);
bindLayoutEvent({
protyle: options.protyle,
data: response.data,
menuElement,
blockElement: options.nodeElement
});
options.target.removeAttribute("data-load");
});
}; };

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

@ -1340,9 +1340,12 @@ export const openMenuPanel = (options: {
if (!target.parentElement.classList.contains("b3-menu__item--current")) { if (!target.parentElement.classList.contains("b3-menu__item--current")) {
avPanelElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current"); avPanelElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
target.parentElement.classList.add("b3-menu__item--current"); target.parentElement.classList.add("b3-menu__item--current");
options.blockElement.removeAttribute("data-render"); transaction(options.protyle, [{
options.blockElement.setAttribute("data-av-type", target.dataset.avType); action: "setAttrViewBlockView",
avRender(options.blockElement, options.protyle, undefined, target.parentElement.dataset.id); blockID,
id: target.parentElement.dataset.id,
avID
}]);
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -1357,16 +1360,18 @@ export const openMenuPanel = (options: {
} else { } else {
avPanelElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current"); avPanelElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
target.parentElement.classList.add("b3-menu__item--current"); target.parentElement.classList.add("b3-menu__item--current");
options.blockElement.removeAttribute("data-render"); transaction(options.protyle, [{
avRender(options.blockElement, options.protyle, () => { action: "setAttrViewBlockView",
openViewMenu({ blockID,
protyle: options.protyle, id: target.parentElement.dataset.id,
blockElement: options.blockElement as HTMLElement, avID,
element: target.parentElement }]);
}); window.siyuan.menus.menu.remove();
avPanelElement.querySelector(".b3-chip--primary").classList.remove("b3-chip--primary"); openViewMenu({
target.parentElement.querySelector(".b3-chip").classList.add("b3-chip--primary"); protyle: options.protyle,
}, target.parentElement.dataset.id); blockElement: options.blockElement as HTMLElement,
element: target.parentElement
});
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();

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

@ -16,10 +16,8 @@ import {isInAndroid, isInHarmony, isInIOS} from "../../util/compatibility";
import {isMobile} from "../../../util/functions"; import {isMobile} from "../../../util/functions";
import {renderGallery} from "./gallery/render"; import {renderGallery} from "./gallery/render";
import {getViewIcon} from "./view"; import {getViewIcon} from "./view";
import {bindLayoutEvent, getLayoutHTML} from "./layout";
import {setPosition} from "../../../util/setPosition";
export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) => void, viewID?: string, renderAll = true) => { export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) => void, renderAll = true) => {
let avElements: Element[] = []; let avElements: Element[] = [];
if (element.getAttribute("data-type") === "NodeAttributeView") { if (element.getAttribute("data-type") === "NodeAttributeView") {
// 编辑器内代码块编辑渲染 // 编辑器内代码块编辑渲染
@ -40,7 +38,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
} }
if (e.getAttribute("data-av-type") === "gallery") { if (e.getAttribute("data-av-type") === "gallery") {
renderGallery({blockElement: e, protyle, cb, viewID, renderAll}); renderGallery({blockElement: e, protyle, cb, renderAll});
return; return;
} }
@ -85,16 +83,6 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
}); });
const created = protyle.options.history?.created; const created = protyle.options.history?.created;
const snapshot = protyle.options.history?.snapshot; const snapshot = protyle.options.history?.snapshot;
let newViewID = e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "";
if (typeof viewID === "string") {
const viewTabElement = e.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${viewID}"]`) as HTMLElement;
if (viewTabElement) {
e.dataset.pageSize = viewTabElement.dataset.page;
}
newViewID = viewID;
fetchPost("/api/av/setDatabaseBlockView", {id: e.dataset.nodeId, viewID, avID: e.dataset.avId,});
e.setAttribute(Constants.CUSTOM_SY_AV_VIEW, newViewID);
}
let searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement; let searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
const isSearching = searchInputElement && document.activeElement.isSameNode(searchInputElement); const isSearching = searchInputElement && document.activeElement.isSameNode(searchInputElement);
const query = searchInputElement?.value || ""; const query = searchInputElement?.value || "";
@ -103,7 +91,7 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: (data: IAV) =
created, created,
snapshot, snapshot,
pageSize: parseInt(e.dataset.pageSize) || undefined, pageSize: parseInt(e.dataset.pageSize) || undefined,
viewID: newViewID, viewID: e.getAttribute(Constants.CUSTOM_SY_AV_VIEW) || "",
query: query.trim() query: query.trim()
}, (response) => { }, (response) => {
const data = response.data.view as IAVTable; const data = response.data.view as IAVTable;
@ -443,7 +431,7 @@ export const updateSearch = (e: HTMLElement, protyle: IProtyle) => {
clearTimeout(searchTimeout); clearTimeout(searchTimeout);
searchTimeout = window.setTimeout(() => { searchTimeout = window.setTimeout(() => {
e.removeAttribute("data-render"); e.removeAttribute("data-render");
avRender(e, protyle, undefined, undefined, false); avRender(e, protyle, undefined, false);
}, Constants.TIMEOUT_INPUT); }, Constants.TIMEOUT_INPUT);
}; };
@ -489,18 +477,14 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
} }
if (operation.action === "removeAttrViewView") { if (operation.action === "removeAttrViewView") {
item.setAttribute("data-av-type", operation.retData); item.setAttribute("data-av-type", operation.retData);
} } else if (operation.action === "setAttrViewBlockView") {
if (operation.action === "changeAttrViewLayout") { const viewTabElement = item.querySelector(`.av__views > .layout-tab-bar > .item[data-id="${operation.id}"]`) as HTMLElement;
item.setAttribute("data-av-type", operation.layout); if (viewTabElement) {
} item.dataset.pageSize = viewTabElement.dataset.page;
avRender(item, protyle, (data) => { item.setAttribute("data-av-type", viewTabElement.dataset.avType);
if (operation.action === "changeAttrViewLayout") {
const menuElement = document.querySelector(".av__panel").lastElementChild as HTMLElement;
menuElement.innerHTML = getLayoutHTML(data);
const tabRect = item.querySelector(".av__views").getBoundingClientRect();
setPosition(menuElement, tabRect.right - menuElement.clientWidth, tabRect.bottom, tabRect.height);
bindLayoutEvent({protyle: protyle, data, menuElement, blockElement: item});
} }
}
avRender(item, protyle, () => {
const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${avID}"]`) as HTMLElement; const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${avID}"]`) as HTMLElement;
if (attrElement) { if (attrElement) {
// 更新属性面板 // 更新属性面板

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

@ -89,7 +89,8 @@ export const updateHeader = (rowElement: HTMLElement) => {
export const setPage = (blockElement: Element) => { export const setPage = (blockElement: Element) => {
const pageSize = parseInt(blockElement.getAttribute("data-page-size")); const pageSize = parseInt(blockElement.getAttribute("data-page-size"));
if (pageSize) { if (pageSize) {
const currentCount = blockElement.querySelectorAll(".av__row:not(.av__row--header)").length; const avType = blockElement.getAttribute("data-av-type") as TAVView;
const currentCount = blockElement.querySelectorAll(avType === "table" ? ".av__row:not(.av__row--header)" : ".av__gallery-item").length;
if (pageSize < currentCount) { if (pageSize < currentCount) {
blockElement.setAttribute("data-page-size", currentCount.toString()); blockElement.setAttribute("data-page-size", currentCount.toString());
} }

10
app/src/protyle/render/av/view.ts
View file

@ -245,8 +245,12 @@ export const bindSwitcherEvent = (options: { protyle: IProtyle, menuElement: Ele
if (event.key === "Enter") { if (event.key === "Enter") {
const currentElement = options.menuElement.querySelector(".b3-menu__item--current") as HTMLElement; const currentElement = options.menuElement.querySelector(".b3-menu__item--current") as HTMLElement;
if (currentElement) { if (currentElement) {
options.blockElement.removeAttribute("data-render"); transaction(options.protyle, [{
avRender(options.blockElement, options.protyle, undefined, currentElement.dataset.id); action: "setAttrViewBlockView",
blockID: options.blockElement.getAttribute("data-node-id"),
id: currentElement.dataset.id,
avID: options.blockElement.getAttribute("data-av-id"),
}]);
options.menuElement.remove(); options.menuElement.remove();
focusBlock(options.blockElement); focusBlock(options.blockElement);
} }
@ -386,4 +390,4 @@ export const getViewName = (type: string) => {
export const getFieldsByData = (data: IAV) => { export const getFieldsByData = (data: IAV) => {
return data.viewType === "table" ? (data.view as IAVTable).columns : (data.view as IAVGallery).fields; return data.viewType === "table" ? (data.view as IAVTable).columns : (data.view as IAVGallery).fields;
} };

21
app/src/protyle/wysiwyg/index.ts
View file

@ -1848,15 +1848,18 @@ export class WYSIWYG {
if (avTabHeaderElement.classList.contains("item--focus")) { if (avTabHeaderElement.classList.contains("item--focus")) {
openViewMenu({protyle, blockElement: nodeElement, element: avTabHeaderElement}); openViewMenu({protyle, blockElement: nodeElement, element: avTabHeaderElement});
} else { } else {
nodeElement.setAttribute("data-av-type", avTabHeaderElement.dataset.avType); transaction(protyle, [{
nodeElement.removeAttribute("data-render"); action: "setAttrViewBlockView",
avRender(nodeElement, protyle, () => { blockID: nodeElement.getAttribute("data-node-id"),
openViewMenu({ id: avTabHeaderElement.dataset.id,
protyle, avID: nodeElement.getAttribute("data-av-id"),
blockElement: nodeElement, }]);
element: nodeElement.querySelector(".item.item--focus") window.siyuan.menus.menu.remove();
}); openViewMenu({
}, avTabHeaderElement.dataset.id); protyle,
blockElement: nodeElement,
element: avTabHeaderElement
});
} }
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();

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

@ -851,7 +851,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
"removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView", "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView",
"updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc", "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc",
"duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID", "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID",
"changeAttrViewLayout"].includes(operation.action)) { "setAttrViewBlockView"].includes(operation.action)) {
if (!isUndo) { if (!isUndo) {
// 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607 // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
refreshAV(protyle, operation); refreshAV(protyle, operation);

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

@ -57,11 +57,11 @@ type TOperation =
| "setAttrViewFitImage" | "setAttrViewFitImage"
| "setAttrViewShowIcon" | "setAttrViewShowIcon"
| "setAttrViewWrapField" | "setAttrViewWrapField"
| "changeAttrViewLayout"
| "setAttrViewColDate" | "setAttrViewColDate"
| "unbindAttrViewBlock" | "unbindAttrViewBlock"
| "setAttrViewViewDesc" | "setAttrViewViewDesc"
| "setAttrViewColDesc" | "setAttrViewColDesc"
| "setAttrViewBlockView"
type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins" type TBazaarType = "templates" | "icons" | "widgets" | "themes" | "plugins"
type TCardType = "doc" | "notebook" | "all" type TCardType = "doc" | "notebook" | "all"
type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" | type TEventBus = "ws-main" | "sync-start" | "sync-end" | "sync-fail" |