From 0cec3bb0ec1adab622102b1ebb190c7ba7e7c315 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 28 Sep 2024 15:49:44 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/12425

---
 app/src/assets/scss/protyle/_protyle.scss | 11 ++++-------
 app/src/boot/globalEvent/event.ts         | 10 ++--------
 app/src/boot/globalEvent/touch.ts         |  7 +++++++
 app/src/protyle/header/Background.ts      | 10 ++++++++--
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index 53ccc29a086..8e80b34614a 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -252,15 +252,12 @@
     .protyle-title {
       transition: margin .3s cubic-bezier(.25, .46, .45, .94) 0ms;
     }
-
-    .protyle-background__iconw {
-      transition: left .3s cubic-bezier(.25, .46, .45, .94) 0ms;
-    }
   }
 }
 
-.protyle-top:hover {
-  .protyle-background--enable .protyle-background__action {
+.protyle-top:hover .protyle-background--enable {
+  .protyle-background__action,
+  .protyle-background__img .protyle-icons {
     opacity: .86;
   }
 }
@@ -276,7 +273,7 @@
   }
 
   &--mobileshow {
-    .protyle-background__iconw > .protyle-icons,
+    .protyle-background__action,
     .protyle-background__img .protyle-icons {
       opacity: .86;
     }
diff --git a/app/src/boot/globalEvent/event.ts b/app/src/boot/globalEvent/event.ts
index 406cd062907..273a42facd3 100644
--- a/app/src/boot/globalEvent/event.ts
+++ b/app/src/boot/globalEvent/event.ts
@@ -85,19 +85,13 @@ export const initWindowEvent = (app: App) => {
             target.classList.contains("protyle-background__icon")) {
             return;
         }
-        // 触摸屏背景和嵌入块按钮显示
-        const backgroundElement = hasClosestByClassName(target, "protyle-background");
-        if (backgroundElement) {
-            if (!globalTouchStart(event)) {
-                backgroundElement.classList.toggle("protyle-background--mobileshow");
-            }
-            return;
-        }
         const embedBlockElement = isInEmbedBlock(target);
         if (embedBlockElement) {
             embedBlockElement.firstElementChild.classList.toggle("protyle-icons--show");
             return;
         }
+        // 触摸屏背景和嵌入块按钮显示
+        globalTouchStart(event);
     }, false);
     document.addEventListener("touchend", (event) => {
         if (isIPad()) {
diff --git a/app/src/boot/globalEvent/touch.ts b/app/src/boot/globalEvent/touch.ts
index c822c6f887a..b00b96bd12b 100644
--- a/app/src/boot/globalEvent/touch.ts
+++ b/app/src/boot/globalEvent/touch.ts
@@ -49,6 +49,13 @@ export const globalTouchStart = (event: TouchEvent) => {
         event.stopImmediatePropagation();
         return true;
     }
+    if (backgroundElement) {
+        if (backgroundElement.classList.contains("protyle-background--enable")) {
+            backgroundElement.classList.add("protyle-background--mobileshow");
+        }
+    } else {
+        document.querySelector(".protyle-background--mobileshow")?.classList.remove("protyle-background--mobileshow");
+    }
     return false;
 };
 
diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 08b79f162bf..07cdad7d74f 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -217,11 +217,11 @@ export class Background {
                     const imgSrc = target.getAttribute("src");
                     if (event.detail > 1 && !imgSrc.startsWith("data:image/png;base64")) {
                         previewImage(imgSrc);
+                        event.preventDefault();
+                        event.stopPropagation();
                     }
                     // 点击题头图菜单无法消失
                     window.siyuan.menus.menu.remove();
-                    event.preventDefault();
-                    event.stopPropagation();
                     break;
                 } else if (type === "position") {
                     const iconElements = this.element.firstElementChild.querySelectorAll(".protyle-icons");
@@ -416,6 +416,12 @@ export class Background {
                 target = target.parentElement;
             }
         });
+
+        /// #if MOBILE
+        if (!protyle.disabled) {
+          this.element.classList.add("protyle-background--mobileshow");
+        }
+        /// #endif
     }
 
     private removeTag(protyle: IProtyle) {