From 06abf29c273fd6d46fdfca59e26012bac8b969e0 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Tue, 17 Jun 2025 19:14:00 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10414

---
 app/src/protyle/render/av/gallery/render.ts |  9 ++--
 app/src/protyle/render/av/gallery/util.ts   | 60 ++++++++++++++++++---
 app/src/protyle/render/av/layout.ts         |  9 +++-
 app/src/protyle/render/av/openMenuPanel.ts  | 12 ++++-
 app/src/protyle/wysiwyg/transaction.ts      |  2 +-
 app/src/types/index.d.ts                    |  2 +
 6 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts
index 3ed56ceab..bf99c0d5f 100644
--- a/app/src/protyle/render/av/gallery/render.ts
+++ b/app/src/protyle/render/av/gallery/render.ts
@@ -61,16 +61,17 @@ export const renderGallery = (options: {
         view.cards.forEach((item: IAVGalleryItem, rowIndex: number) => {
             galleryHTML += `<div data-id="${item.id}" class="av__gallery-item${selectItemIds.includes(item.id) ? " av__gallery-item--select" : ""}">`;
             if (view.coverFrom !== 0) {
+                const coverClass= "av__gallery-cover av__gallery-cover--" + view.cardAspectRatio
                 if (item.coverURL) {
                     if (item.coverURL.startsWith("background")) {
-                        galleryHTML += `<div class="av__gallery-cover"><div class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" style="${item.coverURL}"></div></div>`;
+                        galleryHTML += `<div class="${coverClass}"><div class="av__gallery-img${view.fitImage ? " av__gallery-img--fit" : ""}" style="${item.coverURL}"></div></div>`;
                     } else {
-                        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>`;
+                        galleryHTML += `<div class="${coverClass}"><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></div></div>`;
+                    galleryHTML += `<div class="${coverClass}"><div class="av__gallery-content">${item.coverContent}</div><div></div></div>`;
                 } else {
-                    galleryHTML += '<div class="av__gallery-cover"></div>';
+                    galleryHTML += '<div class="${coverClass}"></div>';
                 }
             }
             galleryHTML += `<div class="av__gallery-fields${editIds.includes(item.id) ? " av__gallery-fields--edit" : ""}${view.wrapField ? " av__gallery-fields--wrap" : ""}">`;
diff --git a/app/src/protyle/render/av/gallery/util.ts b/app/src/protyle/render/av/gallery/util.ts
index c72374d65..f412149a5 100644
--- a/app/src/protyle/render/av/gallery/util.ts
+++ b/app/src/protyle/render/av/gallery/util.ts
@@ -102,7 +102,6 @@ export const setGallerySize = (options: {
     const menu = new Menu();
     const avID = options.nodeElement.getAttribute("data-av-id");
     const blockID = options.nodeElement.getAttribute("data-node-id");
-    const galleryElement = options.nodeElement.querySelector(".av__gallery");
     const targetNameElement = options.target.querySelector(".b3-menu__accelerator");
     menu.addItem({
         iconHTML: "",
@@ -121,8 +120,6 @@ export const setGallerySize = (options: {
                 data: options.view.cardSize
             }]);
             options.view.cardSize = 0;
-            galleryElement.classList.add("av__gallery--small");
-            galleryElement.classList.remove("av__gallery--big");
             targetNameElement.textContent = window.siyuan.languages.small;
         }
     });
@@ -143,7 +140,6 @@ export const setGallerySize = (options: {
                 data: options.view.cardSize
             }]);
             options.view.cardSize = 1;
-            galleryElement.classList.remove("av__gallery--big", "av__gallery--small");
             targetNameElement.textContent = window.siyuan.languages.medium;
         }
     });
@@ -164,8 +160,6 @@ export const setGallerySize = (options: {
                 data: options.view.cardSize
             }]);
             options.view.cardSize = 2;
-            galleryElement.classList.remove("av__gallery--small");
-            galleryElement.classList.add("av__gallery--big");
             targetNameElement.textContent = window.siyuan.languages.large;
         }
     });
@@ -173,6 +167,60 @@ export const setGallerySize = (options: {
     menu.open({x: rect.left, y: rect.bottom});
 };
 
+export const getCardAspectRatio = (ratio: number) => {
+    switch (ratio) {
+        case 0:
+            return "16:9";
+        case 1:
+            return "9:16";
+        case 2:
+            return "4:3";
+        case 3:
+            return "3:4";
+        case 4:
+            return "3:2";
+        case 5:
+            return "3:2";
+        case 6:
+            return "1:1";
+    }
+    return "16:9";
+};
+
+export const setGalleryRatio = (options: {
+    view: IAVGallery
+    nodeElement: Element,
+    protyle: IProtyle,
+    target: HTMLElement
+}) => {
+    const menu = new Menu();
+    const avID = options.nodeElement.getAttribute("data-av-id");
+    const blockID = options.nodeElement.getAttribute("data-node-id");
+    const targetNameElement = options.target.querySelector(".b3-menu__accelerator");
+    menu.addItem({
+        iconHTML: "",
+        checked: options.view.cardAspectRatio === 0,
+        label: "16:9",
+        click() {
+            transaction(options.protyle, [{
+                action: "setAttrViewCardAspectRatio",
+                avID,
+                blockID,
+                data: 0
+            }], [{
+                action: "setAttrViewCardAspectRatio",
+                avID,
+                blockID,
+                data: options.view.cardSize
+            }]);
+            options.view.cardAspectRatio = 0;
+            targetNameElement.textContent = getCardAspectRatio(0);
+        }
+    });
+    const rect = options.target.getBoundingClientRect();
+    menu.open({x: rect.left, y: rect.bottom});
+};
+
 export const openGalleryItemMenu = (options: {
     target: HTMLElement,
     blockElement: HTMLElement,
diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts
index bcc17e911..f53bab280 100644
--- a/app/src/protyle/render/av/layout.ts
+++ b/app/src/protyle/render/av/layout.ts
@@ -1,6 +1,7 @@
 import {transaction} from "../../wysiwyg/transaction";
 import {Constants} from "../../../constants";
 import {fetchPost} from "../../../util/fetch";
+import {getCardAspectRatio} from "./gallery/util";
 
 export const getLayoutHTML = (data: IAV) => {
     let html = "";
@@ -31,6 +32,12 @@ export const getLayoutHTML = (data: IAV) => {
     <span class="b3-menu__accelerator">${view.cardSize === 0 ? window.siyuan.languages.small : (view.cardSize === 1 ? window.siyuan.languages.medium : window.siyuan.languages.large)}</span>
     <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
+<button class="b3-menu__item" data-type="set-gallery-ratio">
+    <span class="fn__flex-center">${window.siyuan.languages.cardAspectRatio}</span>
+    <span class="fn__flex-1"></span>
+    <span class="b3-menu__accelerator">${getCardAspectRatio(view.cardAspectRatio)}</span>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
+</button>
 <label class="b3-menu__item">
     <span class="fn__flex-center">${window.siyuan.languages.fitImage}</span>
     <span class="fn__space fn__flex-1"></span>
@@ -215,7 +222,7 @@ export const updateLayout = (options: {
     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")
+        layoutType: options.target.getAttribute("data-view-type")
     }, (response) => {
         const menuElement = document.querySelector(".av__panel").lastElementChild as HTMLElement;
         menuElement.innerHTML = getLayoutHTML(response.data);
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index f105de060..2bcac7c4a 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -46,7 +46,7 @@ import {openCalcMenu} from "./calc";
 import {escapeAttr, escapeHtml} from "../../../util/escape";
 import {Dialog} from "../../../dialog";
 import {bindLayoutEvent, getLayoutHTML, updateLayout} from "./layout";
-import {setGalleryCover, setGallerySize} from "./gallery/util";
+import {setGalleryCover, setGalleryRatio, setGallerySize} from "./gallery/util";
 
 export const openMenuPanel = (options: {
     protyle: IProtyle,
@@ -1394,6 +1394,16 @@ export const openMenuPanel = (options: {
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (type === "set-gallery-ratio") {
+                    setGalleryRatio({
+                        target,
+                        protyle: options.protyle,
+                        nodeElement: options.blockElement,
+                        view: data.view as IAVGallery
+                    });
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (type === "set-layout") {
                     updateLayout({
                         target,
diff --git a/app/src/protyle/wysiwyg/transaction.ts b/app/src/protyle/wysiwyg/transaction.ts
index c3056dc13..c9f8d0a4f 100644
--- a/app/src/protyle/wysiwyg/transaction.ts
+++ b/app/src/protyle/wysiwyg/transaction.ts
@@ -854,7 +854,7 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, isUndo:
         "removeAttrViewView", "setAttrViewViewName", "setAttrViewViewIcon", "duplicateAttrViewView", "sortAttrViewView",
         "updateAttrViewColRelation", "setAttrViewPageSize", "updateAttrViewColRollup", "sortAttrViewKey", "setAttrViewColDesc",
         "duplicateAttrViewKey", "setAttrViewViewDesc", "setAttrViewCoverFrom", "setAttrViewCoverFromAssetKeyID",
-        "setAttrViewBlockView"].includes(operation.action)) {
+        "setAttrViewBlockView", "setAttrViewCardSize"].includes(operation.action)) {
         if (!isUndo) {
             // 撤销 transaction 会进行推送，需使用推送来进行刷新最新数据 https://github.com/siyuan-note/siyuan/issues/13607
             refreshAV(protyle, operation);
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 56227b362..66fdfb18d 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -52,6 +52,7 @@ type TOperation =
     | "updateAttrViewColRollup"
     | "hideAttrViewName"
     | "setAttrViewCardSize"
+    | "setAttrViewCardAspectRatio"
     | "setAttrViewCoverFrom"
     | "setAttrViewCoverFromAssetKeyID"
     | "setAttrViewFitImage"
@@ -850,6 +851,7 @@ interface IAVGallery extends IAVView {
     coverFrom: number;    // 0：无，1：内容图，2：资源字段
     coverFromAssetKeyID?: string;
     cardSize: number;   // 0：小卡片，1：中卡片，2：大卡片
+    cardAspectRatio: number;
     fitImage: boolean;
     showIcon: boolean;
     wrapField: boolean;