Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-02-09 16:54:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2025-06-10 16:11:39 +08:00
parent be1cfa63da
commit 9da8f9b194
3 changed files with 34 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -317,6 +317,12 @@
&-img {
height: 100%;
&--fit {
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}
}
&-content {

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

@ -61,14 +61,25 @@ export const renderGallery = (options: {
viewID: newViewID,
query: query.trim()
}, (response) => {
const data = response.data;
const view: IAVGallery = response.data.view;
if (!options.blockElement.dataset.pageSize) {
options.blockElement.dataset.pageSize = data.view.pageSize.toString();
options.blockElement.dataset.pageSize = view.pageSize.toString();
}
let galleryHTML = "";
// body
data.view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
galleryHTML += `<div class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
if (view.coverFrom !== 0) {
if (item.coverURL) {
galleryHTML += `<div class="av__gallery-cover"><div class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" style="background-image:url('${item.coverURL}')"></div></div>`;
} else if (!item.coverContent) {
galleryHTML += `<div class="av__gallery-cover"><div class="av__gallery-content">${item.coverContent}</div></div>`;
} else {
galleryHTML += `<div class="av__gallery-cover"></div>`;
}
}
galleryHTML += '<div class="av__gallery-fields">';
item.values.forEach(cell => {
let checkClass = "";
if (cell.valueType === "checkbox") {
@ -81,7 +92,7 @@ ${cell.value?.isDetached ? ' data-detached="true"' : ""}
style="${cell.bgColor ? `background-color:${cell.bgColor};` : ""}
${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}</div>`;
});
galleryHTML += "</div>";
galleryHTML += "</div></div>";
});
let tabHTML = "";
let viewData: IAVView;
@ -107,17 +118,17 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
</span>
<div class="fn__flex-1"></div>
<div class="fn__space"></div>
<span data-type="av-switcher" class="block__icon${data.views.length > 0 ? "" : " fn__none"}">
<span data-type="av-switcher" class="block__icon${response.data.views.length > 0 ? "" : " fn__none"}">
<svg><use xlink:href="#iconDown"></use></svg>
<span class="fn__space"></span>
<small>${data.views.length}</small>
<small>${response.data.views.length}</small>
</span>
<div class="fn__space"></div>
<span data-type="av-filter" class="block__icon${data.view.filters.length > 0 ? " block__icon--active" : ""}">
<span data-type="av-filter" class="block__icon${view.filters.length > 0 ? " block__icon--active" : ""}">
<svg><use xlink:href="#iconFilter"></use></svg>
</span>
<div class="fn__space"></div>
<span data-type="av-sort" class="block__icon${data.view.sorts.length > 0 ? " block__icon--active" : ""}">
<span data-type="av-sort" class="block__icon${view.sorts.length > 0 ? " block__icon--active" : ""}">
<svg><use xlink:href="#iconSort"></use></svg>
</span>
<div class="fn__space"></div>
@ -136,13 +147,13 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value, rowIndex)}
<svg><use xlink:href="#iconAdd"></use></svg>
</span>
<div class="fn__space"></div>
${data.isMirror ? ` <span data-av-id="${data.id}" data-popover-url="/api/av/getMirrorDatabaseBlocks" class="popover__block block__icon block__icon--show ariaLabel" data-position="8south" aria-label="${window.siyuan.languages.mirrorTip}">
${response.data.isMirror ? ` <span data-av-id="${response.data.id}" data-popover-url="/api/av/getMirrorDatabaseBlocks" class="popover__block block__icon block__icon--show ariaLabel" data-position="8south" aria-label="${window.siyuan.languages.mirrorTip}">
<svg><use xlink:href="#iconSplitLR"></use></svg></span><div class="fn__space"></div>` : ""}
</div>
<div contenteditable="${options.protyle.disabled || hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed") ? "false" : "true"}" spellcheck="${window.siyuan.config.editor.spellcheck.toString()}" class="av__title${viewData.hideAttrViewName ? " fn__none" : ""}" data-title="${response.data.name || ""}" data-tip="${window.siyuan.languages.title}">${data.name || ""}</div>
<div contenteditable="${options.protyle.disabled || hasClosestByAttribute(options.blockElement, "data-type", "NodeBlockQueryEmbed") ? "false" : "true"}" spellcheck="${window.siyuan.config.editor.spellcheck.toString()}" class="av__title${viewData.hideAttrViewName ? " fn__none" : ""}" data-title="${response.data.name || ""}" data-tip="${window.siyuan.languages.title}">${response.data.name || ""}</div>
<div class="av__counter fn__none"></div>
</div>
<div class="av__gallery">
<div class="av__gallery${view.cardSize === 0 ? " av__gallery--small" : (view.cardSize === 2 ? " av__gallery--big" : "")}">
${galleryHTML}
</div>
<div class="av__cursor" contenteditable="true">${Constants.ZWSP}</div>

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

@ -839,6 +839,11 @@ interface IAVTable extends IAVView {
}
interface IAVGallery extends IAVView {
coverFrom: number; // 0：无，1：内容图，2：资源字段
cardSize: number; // 0：小卡片，1：中卡片，2：大卡片
fitImage:boolean;
showIcon:boolean;
wrapField:boolean;
cards: IAVGalleryItem[],
desc: string
fields: IAVColumn[]
@ -899,6 +904,7 @@ interface IAVRow {
interface IAVGalleryItem {
coverURL?: string;
coverContent?: string;
id: string;
values: IAVCell[];
}