From 86a72ac8de824ee308db48a30129ca4414399260 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 13 Jun 2025 11:45:25 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/10414

---
 app/src/assets/scss/business/_av.scss       | 12 ++++-
 app/src/protyle/render/av/action.ts         |  2 +
 app/src/protyle/render/av/gallery/render.ts |  8 ++-
 app/src/protyle/render/av/gallery/util.ts   | 60 +++++++++++++++++++++
 4 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 668ea5e1c..f60f6bf2e 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -282,7 +282,7 @@
         }
 
         .av__gallery-actions {
-          opacity: 1;
+          opacity: .86;
         }
       }
 
@@ -335,6 +335,16 @@
       flex: 1;
       transition: background 100ms ease-out;
       white-space: nowrap;
+      font-size: 85%;
+
+      .av__cell {
+        padding: 0 8px;
+        border-right: 0;
+
+        &:hover .block__icon {
+          opacity: 0;
+        }
+      }
 
       &--wrap {
         word-break: break-all;
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index d9d47f1b5..0cc406714 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -34,6 +34,7 @@ import {hideElements} from "../../ui/hideElements";
 import {fetchPost, fetchSyncPost} from "../../../util/fetch";
 import {scrollCenter} from "../../../util/highlightById";
 import {escapeHtml} from "../../../util/escape";
+import {openGalleryItemMenu} from "./gallery/util";
 
 export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
     if (isOnlyMeta(event)) {
@@ -263,6 +264,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             event.stopPropagation();
             return true;
         } else if (type === "av-gallery-more") {
+            openGalleryItemMenu({target, blockElement, protyle});
             event.preventDefault();
             event.stopPropagation();
             return true;
diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts
index ac46c6089..92e06afaf 100644
--- a/app/src/protyle/render/av/gallery/render.ts
+++ b/app/src/protyle/render/av/gallery/render.ts
@@ -1,7 +1,7 @@
 import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName} from "../../../util/hasClosest";
 import {Constants} from "../../../../constants";
 import {fetchPost} from "../../../../util/fetch";
-import {escapeAriaLabel, escapeHtml} from "../../../../util/escape";
+import {escapeAriaLabel, escapeAttr, escapeHtml} from "../../../../util/escape";
 import {unicode2Emoji} from "../../../../emoji";
 import {renderCell} from "../cell";
 import {focusBlock} from "../../../util/selection";
@@ -95,7 +95,11 @@ export const renderGallery = (options: {
                 if (cell.valueType === "checkbox") {
                     checkClass = cell.value?.checkbox?.checked ? " av__cell-check" : " av__cell-uncheck";
                 }
-                galleryHTML += `<div class="av__cell${checkClass}" data-id="${cell.id}" data-field-id="${view.fields[fieldsIndex].id}"
+                galleryHTML += `<div class="av__cell${checkClass} ariaLabel" 
+aria-label="${escapeAttr(view.fields[fieldsIndex].name)}" 
+data-position="west"
+data-id="${cell.id}" 
+data-field-id="${view.fields[fieldsIndex].id}"
 ${cell.valueType === "block" ? 'data-block-id="' + (cell.value.block.id || "") + '"' : ""} 
 data-dtype="${cell.valueType}" 
 ${cell.value?.isDetached ? ' data-detached="true"' : ""} 
diff --git a/app/src/protyle/render/av/gallery/util.ts b/app/src/protyle/render/av/gallery/util.ts
index dfa9c340d..63477c80a 100644
--- a/app/src/protyle/render/av/gallery/util.ts
+++ b/app/src/protyle/render/av/gallery/util.ts
@@ -1,5 +1,8 @@
 import {transaction} from "../../../wysiwyg/transaction";
 import {Menu} from "../../../../plugin/Menu";
+import * as dayjs from "dayjs";
+import {hasClosestByClassName} from "../../../util/hasClosest";
+import {genCellValueByElement} from "../cell";
 
 export const setGalleryCover = (options: {
     view: IAVGallery
@@ -169,3 +172,60 @@ export const setGallerySize = (options: {
     const rect = options.target.getBoundingClientRect();
     menu.open({x: rect.left, y: rect.bottom});
 };
+
+export const openGalleryItemMenu = (options: {
+    target: HTMLElement,
+    blockElement: HTMLElement,
+    protyle: IProtyle,
+}) => {
+    const menu = new Menu();
+    const avID = options.blockElement.getAttribute("data-av-id");
+    menu.addItem({
+        icon: "iconCopy",
+        label: window.siyuan.languages.duplicate,
+        click() {
+        }
+    });
+    menu.addItem({
+        icon: "iconTrashcan",
+        warning: true,
+        label: window.siyuan.languages.delete,
+        click() {
+            const cardElement = hasClosestByClassName(options.target, "av__gallery-item");
+            if (cardElement) {
+                const newUpdated = dayjs().format("YYYYMMDDHHmmss");
+                const blockValue = genCellValueByElement("block", cardElement.querySelector(".av__cell[data-block-id]"));
+                transaction(options.protyle, [{
+                    action: "removeAttrViewBlock",
+                    srcIDs: [cardElement.dataset.id],
+                    avID,
+                }, {
+                    action: "doUpdateUpdated",
+                    id: options.blockElement.dataset.nodeId,
+                    data: newUpdated,
+                }], [{
+                    action: "insertAttrViewBlock",
+                    avID,
+                    previousID: cardElement.previousElementSibling?.getAttribute("data-id") || "",
+                    srcs: [{
+                        id: cardElement.getAttribute("data-id"),
+                        isDetached: blockValue.isDetached,
+                        content: blockValue.block.content
+                    }],
+                    blockID: options.blockElement.dataset.nodeId
+                },{
+                    action: "doUpdateUpdated",
+                    id: options.blockElement.dataset.nodeId,
+                    data: options.blockElement.getAttribute("updated")
+                }]);
+                cardElement.remove()
+                options.blockElement.setAttribute("updated", newUpdated);
+            }
+        }
+    });
+    const rect = options.target.getBoundingClientRect();
+    menu.open({
+        x: rect.left,
+        y: rect.bottom
+    });
+};