🎨 fix https://github.com/siyuan-note/siyuan/issues/7602

app/src/assets/scss/base.scss

@@ -37,50 +37,17 @@
 /*
 .status: 2
 
-// 需小于 .block__popover
-// 需小于 ctrl+p https://github.com/siyuan-note/siyuan/issues/7174
 .protyle-util: 4
 
-// 引用提示需小于 .block__popover
+.protyle-hint: 5
-.protyle-hint: 201
 
-// 需小于 .block__popover https://github.com/siyuan-note/siyuan/issues/3515
+#menu & .side-panel: 6
-// 需大于 .protyle-hint https://github.com/siyuan-note/siyuan/pull/7247
-ctrl+p 搜索: 202
 
-// 需小于 .b3-menu 悬浮窗点击更多
+#windowControls: 999998
-// 需小于 .b3-dialog https://ld246.com/article/1637204682648
-.block__popover: 205
-.block__popover--top: 206
 
-// 需小于 .b3-menu
+.b3-snackbar: 999999
-.av__panel: 209
 
-// 需大于 .block__popover
+.b3-tooltips: 1000000
-.b3-menu: 210
-
-// 需小于 .b3-dialog 关于中的锁屏密码设置
-#menu & .side-panel: 220
-
-// 需小于 #windowControls
-// 需大于 .protyle-util https://github.com/siyuan-note/siyuan/issues/5069
-.b3-dialog: 305
-
-// 需大于 mobile .status、.b3-dialog
-.keyboard: 306
-
-// 历史中切换笔记本需临时大于 .b3-dialog https://github.com/siyuan-note/siyuan/issues/5107
-// 移动端排序和菜单需临时大于 .side-panel https://github.com/siyuan-note/siyuan/issues/5254
-.b3-menu: 310
-
-.av__mask: 320
-
-// 需大于 .b3-dialog
-progressLoading: 400
-
-#windowControls: 502
-
-.b3-snackbar: 503
 */
 
 html {
@@ -151,7 +118,7 @@ html {
 
   #windowControls {
     top: 0;
-    z-index: 502;
+    z-index: 999998;
     right: 0;
     position: relative;
     margin-left: 2px;

app/src/assets/scss/business/_av.scss

@@ -47,7 +47,6 @@
 
   &__mask {
     position: fixed;
-    z-index: 320;
     top: 0;
     bottom: 0;
     right: 0;
@@ -264,7 +263,6 @@
   }
 
   &__panel {
-    z-index: 209;
     position: relative;
 
     .b3-menu {

app/src/assets/scss/business/_block.scss

@@ -17,11 +17,6 @@
 
     &--open {
       opacity: 1;
-      z-index: 205;
-    }
-
-    &--top.block__popover--open {
-      z-index: 206;
     }
 
     & > .block__icons {

app/src/assets/scss/business/_search.scss

@@ -61,6 +61,7 @@
       top: 42px;
       position: absolute;
       left: 8px;
+      z-index: 1;
     }
   }
 

app/src/assets/scss/component/_dialog.scss

@@ -8,7 +8,6 @@
   width: 100%;
   height: 100%;
   display: flex;
-  z-index: 305;
 
   &--open {
     .b3-dialog__scrim {

app/src/assets/scss/component/_menu.scss

@@ -5,7 +5,6 @@
   border: 1px solid var(--b3-theme-surface-lighter);
   background-color: var(--b3-menu-background);
   padding: 8px 0;
-  z-index: 210;
   box-sizing: border-box;
 
   &::-webkit-scrollbar,

app/src/assets/scss/component/_snackbar.scss

@@ -12,7 +12,7 @@
     position: fixed;
     right: 12px;
     top: 22px;
-    z-index: 503;
+    z-index: 999999;
     max-height: calc(100vh - 32px);
     display: flex;
     flex-direction: column;

app/src/assets/scss/mobile.scss

@@ -156,7 +156,7 @@
   background-color: var(--b3-theme-surface);
   height: 100vh;
   width: 100vw;
-  z-index: 220;
+  z-index: 6;
   transform: translateX(-100vw);
   transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
 
@@ -239,7 +239,7 @@
 }
 
 #menu {
-  z-index: 220;
+  z-index: 6;
   transform: translateX(100vw);
   top: 0;
 
@@ -261,7 +261,6 @@
   box-sizing: border-box;
   height: 42px;
   background: var(--b3-theme-background);
-  z-index: 306;
   display: flex;
   border-top: 1px solid var(--b3-theme-surface-lighter);
   overflow: hidden;

app/src/assets/scss/pdf/_pdf.scss

@@ -321,6 +321,7 @@
   align-items: center;
   flex-wrap: wrap;
   overflow: initial;
+  z-index: 1;
 
   #findInput {
     width: 120px;
@@ -337,6 +338,7 @@
   top: 36px;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+  z-index: 1;
 
   .b3-menu__items {
     max-height: 60vh;

app/src/assets/scss/protyle/_toolbar.scss

@@ -52,7 +52,7 @@
     box-shadow: var(--b3-dialog-shadow);
     border: 1px solid var(--b3-theme-surface-lighter);
     background-color: var(--b3-menu-background);
-    z-index: 201;
+    z-index: 5;
     overflow: auto;
     max-height: 402px;
     box-sizing: border-box;

app/src/block/Panel.ts

@@ -49,7 +49,8 @@ export class BlockPanel {
         this.isBacklink = options.isBacklink;
 
         this.element = document.createElement("div");
-        this.element.classList.add("block__popover", "block__popover--top");
+        this.element.style.zIndex = (++window.siyuan.zIndex).toString();
+        this.element.classList.add("block__popover");
 
         const parentElement = hasClosestByClassName(this.targetElement, "block__popover", true);
         let level = 1;
@@ -95,11 +96,8 @@ export class BlockPanel {
             }
         });
         this.element.addEventListener("click", (event) => {
-            document.querySelectorAll(".block__popover--top").forEach(item => {
-                item.classList.remove("block__popover--top");
-            });
             if (this.element && window.siyuan.blockPanels.length > 1) {
-                this.element.classList.add("block__popover--top");
+                this.element.style.zIndex = (++window.siyuan.zIndex).toString();
             }
 
             let target = event.target as HTMLElement;

app/src/dialog/index.ts

@@ -27,7 +27,7 @@ export class Dialog {
         this.destroyCallback = options.destroyCallback;
         this.element = document.createElement("div") as HTMLElement;
 
-        this.element.innerHTML = `<div class="b3-dialog">
+        this.element.innerHTML = `<div class="b3-dialog" style="z-index: ${++window.siyuan.zIndex};">
 <div class="b3-dialog__scrim"${options.transparent ? 'style="background-color:transparent"' : ""}></div>
 <div class="b3-dialog__container" style="width:${options.width || "auto"};height:${options.height || "auto"}">
   <svg ${(isMobile() && options.title) ? 'style="top:0;right:0;"' : ""} class="b3-dialog__close${this.disableClose ? " fn__none" : ""}"><use xlink:href="#iconCloseRound"></use></svg>

app/src/dialog/processSystem.ts

@@ -286,7 +286,7 @@ export const progressStatus = (data: IWebSocketData) => {
 export const progressLoading = (data: IWebSocketData) => {
     let progressElement = document.getElementById("progress");
     if (!progressElement) {
-        document.body.insertAdjacentHTML("beforeend", '<div id="progress"></div>');
+        document.body.insertAdjacentHTML("beforeend", `<div id="progress" style="z-index: ${++window.siyuan.zIndex}"></div>`);
         progressElement = document.getElementById("progress");
     }
     // code 0: 有进度；1: 无进度；2: 关闭
@@ -295,8 +295,8 @@ export const progressLoading = (data: IWebSocketData) => {
         return;
     }
     if (data.code === 0) {
-        progressElement.innerHTML = `<div class="b3-dialog__scrim" style="z-index:400;opacity: 1"></div>
+        progressElement.innerHTML = `<div class="b3-dialog__scrim" style="opacity: 1"></div>
-<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);z-index:400;">
+<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);">
     <div style="text-align: right">${data.data.current}/${data.data.total}</div>
     <div style="margin: 8px 0;height: 8px;border-radius: var(--b3-border-radius);overflow: hidden;background-color:#fff;"><div style="width: ${data.data.current / data.data.total * 100}%;transition: var(--b3-transition);background-color: var(--b3-theme-primary);height: 8px;"></div></div>
     <div>${data.msg}</div>
@@ -305,8 +305,8 @@ export const progressLoading = (data: IWebSocketData) => {
         if (progressElement.lastElementChild) {
             progressElement.lastElementChild.lastElementChild.innerHTML = data.msg;
         } else {
-            progressElement.innerHTML = `<div class="b3-dialog__scrim" style="z-index:400;opacity: 1"></div>
+            progressElement.innerHTML = `<div class="b3-dialog__scrim" style="opacity: 1"></div>
-<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);z-index:400;">
+<div style="position: fixed;top: 45vh;width: 70vw;left: 15vw;color:var(--b3-theme-on-surface);">
     <div style="margin: 8px 0;height: 8px;border-radius: var(--b3-border-radius);overflow: hidden;background-color:#fff;"><div style="background-color: var(--b3-theme-primary);height: 8px;background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);animation: stripMove 450ms linear infinite;background-size: 50px 50px;"></div></div>
     <div>${data.msg}</div>
 </div>`;

app/src/index.ts

@@ -40,6 +40,7 @@ export class App {
         addScript(`${Constants.PROTYLE_CDN}/js/protyle-html.js?v=${Constants.SIYUAN_VERSION}`, "protyleWcHtmlScript");
         addBaseURL();
         window.siyuan = {
+            zIndex: 10,
             transactions: [],
             reqIds: {},
             backStack: [],

app/src/layout/dock/Inbox.ts

@@ -254,7 +254,6 @@ ${(Lute.New()).MarkdownStr("", data.shorthandContent)}
         }
 
         window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16});
-        window.siyuan.menus.menu.element.style.zIndex = "221";  // 移动端被右侧栏遮挡
     }
 
     private remove(id?: string) {

app/src/menus/Menu.ts

@@ -134,13 +134,14 @@ export class Menu {
         } else {
             window.addEventListener(this.wheelEvent, this.preventDefault, {passive: false});
         }
-
+        this.element.style.zIndex = (++window.siyuan.zIndex).toString();
         this.element.classList.remove("fn__none");
         setPosition(this.element, options.x - (isLeft ? window.siyuan.menus.menu.element.clientWidth : 0), options.y, options.h, options.w);
     }
 
     public fullscreen(position: "bottom" | "all" = "all") {
         this.element.classList.add("b3-menu--fullscreen");
+        this.element.style.zIndex = (++window.siyuan.zIndex).toString();
         this.element.firstElementChild.classList.remove("fn__none");
         this.element.classList.remove("fn__none");
         window.addEventListener("touchmove", this.preventDefault, {passive: false});

app/src/menus/bookmark.ts

@@ -88,6 +88,5 @@ export const openBookmarkMenu = (element: HTMLElement, event: MouseEvent, bookma
         }).element);
     }
     window.siyuan.menus.menu.element.setAttribute("data-name", "bookmarkMenu");
-    window.siyuan.menus.menu.element.style.zIndex = "221";  // 移动端被右侧栏遮挡
     window.siyuan.menus.menu.popup({x: event.clientX - 11, y: event.clientY + 11, h: 22, w: 12});
 };

app/src/menus/commonMenuItem.ts

@@ -290,7 +290,6 @@ export const openFileAttr = (attrs: IObject, focusName = "bookmark") => {
                             }).element);
                         });
                     }
-                    window.siyuan.menus.menu.element.style.zIndex = "310";
                     window.siyuan.menus.menu.element.classList.add("b3-menu--list");
                     window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 16, w: 16});
                 });

app/src/menus/tag.ts

@@ -28,6 +28,5 @@ export const openTagMenu = (element: HTMLElement, event: MouseEvent, labelName:
         }
     }).element);
     window.siyuan.menus.menu.element.setAttribute("data-name", "tagMenu");
-    window.siyuan.menus.menu.element.style.zIndex = "221";  // 移动端被右侧栏遮挡
     window.siyuan.menus.menu.popup({x: event.clientX - 11, y: event.clientY + 11, h: 22, w: 12});
 };

app/src/mobile/dock/MobileFiles.ts

@@ -183,13 +183,11 @@ export class MobileFiles extends Model {
                             } else if (type === "more-root") {
                                 initNavigationMenu(app, target.parentElement);
                                 window.siyuan.menus.menu.fullscreen("bottom");
-                                window.siyuan.menus.menu.element.style.zIndex = "310";
                             }
                         }
                         if (type === "more-file") {
                             initFileMenu(app, notebookId, pathString, target.parentElement);
                             window.siyuan.menus.menu.fullscreen("bottom");
-                            window.siyuan.menus.menu.element.style.zIndex = "310";
                         }
                     }
                     event.preventDefault();
@@ -239,7 +237,6 @@ export class MobileFiles extends Model {
             window.siyuan.menus.menu.append(new MenuItem(item).element);
         });
         window.siyuan.menus.menu.fullscreen("bottom");
-        window.siyuan.menus.menu.element.style.zIndex = "310";
     }
 
     private genNotebook(item: INotebook) {

app/src/mobile/dock/MobileTags.ts

@@ -126,7 +126,6 @@ export class MobileTags {
                                 },
                             }).element);
                             window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY});
-                            window.siyuan.menus.menu.element.style.zIndex = "310";
                             event.preventDefault();
                             event.stopPropagation();
                             break;

app/src/mobile/index.ts

@@ -35,6 +35,7 @@ class App {
         addScript(`${Constants.PROTYLE_CDN}/js/protyle-html.js?v=${Constants.SIYUAN_VERSION}`, "protyleWcHtmlScript");
         addBaseURL();
         window.siyuan = {
+            zIndex: 10,
             notebooks: [],
             transactions: [],
             reqIds: {},

app/src/mobile/menu/search.ts

@@ -467,7 +467,6 @@ const initSearchEvent = (app: App, element: Element, config: ISearchOption) => {
                         }
                     }, config);
                 });
-                window.siyuan.menus.menu.element.style.zIndex = "220";
                 window.siyuan.menus.menu.fullscreen();
                 event.stopPropagation();
                 event.preventDefault();
@@ -484,7 +483,6 @@ const initSearchEvent = (app: App, element: Element, config: ISearchOption) => {
                     config.page = 1;
                     updateSearchResult(config, element, true);
                 });
-                window.siyuan.menus.menu.element.style.zIndex = "220";
                 window.siyuan.menus.menu.fullscreen();
                 event.stopPropagation();
                 event.preventDefault();

app/src/mobile/util/keyboardToolbar.ts

@@ -391,6 +391,7 @@ export const showKeyboardToolbar = () => {
         return;
     }
     toolbarElement.classList.remove("fn__none");
+    toolbarElement.style.zIndex = (++window.siyuan.zIndex).toString();
     const modelElement = document.getElementById("model");
     if (modelElement.style.transform === "translateY(0px)") {
         modelElement.style.paddingBottom = "42px";

app/src/protyle/render/av/cell.ts

@@ -360,7 +360,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[]) => {
         return;
     }
     window.siyuan.menus.menu.remove();
-    document.body.insertAdjacentHTML("beforeend", `<div class="av__mask">
+    document.body.insertAdjacentHTML("beforeend", `<div class="av__mask" style="z-index: ${++window.siyuan.zIndex}">
     ${html}
 </div>`);
     const avMaskElement = document.querySelector(".av__mask");

app/src/protyle/render/av/openMenuPanel.ts

@@ -47,7 +47,7 @@ export const openMenuPanel = (options: {
             html = getDateHTML(data.view, options.cellElements);
         }
 
-        document.body.insertAdjacentHTML("beforeend", `<div class="av__panel">
+        document.body.insertAdjacentHTML("beforeend", `<div class="av__panel" style="z-index: ${++window.siyuan.zIndex}">
     <div class="b3-dialog__scrim" data-type="close"></div>
     <div class="b3-menu">${html}</div>
 </div>`);

app/src/protyle/render/av/render.ts

@@ -363,7 +363,6 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
                     x: datetRect.left,
                     y: datetRect.bottom
                 });
-                window.siyuan.menus.menu.element.style.zIndex = "400";
                 event.stopPropagation();
                 event.preventDefault();
                 return;
@@ -438,7 +437,6 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
                     x: mSelecttRect.left,
                     y: mSelecttRect.bottom
                 });
-                window.siyuan.menus.menu.element.style.zIndex = "400";
                 event.stopPropagation();
                 event.preventDefault();
                 return;

app/src/search/assets.ts

@@ -390,7 +390,6 @@ export const assetMethodMenu = (target: HTMLElement, cb: () => void) => {
         }
     }).element);
     /// #if MOBILE
-    window.siyuan.menus.menu.element.style.zIndex = "221";
     window.siyuan.menus.menu.fullscreen();
     /// #else
     const rect = target.getBoundingClientRect();
@@ -541,7 +540,6 @@ export const assetMoreMenu = (target: Element, element: Element, cb: () => void)
         },
     }).element);
     /// #if MOBILE
-    window.siyuan.menus.menu.element.style.zIndex = "221";
     window.siyuan.menus.menu.fullscreen();
     /// #else
     const rect = target.getBoundingClientRect();

app/src/search/spread.ts

@@ -108,6 +108,4 @@ export const openSearch = async (options: {
     }, dialog.element.querySelector(".b3-dialog__body"), () => {
         dialog.destroy({focus: "false"});
     });
-    // 搜索面板层级需高于 201（.protyle-hint） 且小于205（.block__popover）
-    dialog.element.firstElementChild.setAttribute("style", "z-index:202"); // https://github.com/siyuan-note/siyuan/issues/3515
 };

app/src/types/index.d.ts

@@ -46,7 +46,7 @@ type TEventBus = "ws-main" |
     "open-menu-av" | "open-menu-content" | "open-menu-breadcrumbmore" |
     "open-siyuan-url-plugin" | "open-siyuan-url-block" |
     "input-search" |
-    "loaded-protyle" | "loaded-protyle-dynamic"|
+    "loaded-protyle" | "loaded-protyle-dynamic" |
     "destroy-protyle"
 type TAVCol =
     "text"
@@ -268,6 +268,7 @@ interface INotebook {
 }
 
 interface ISiyuan {
+    zIndex: number
     storage?: { [key: string]: any },
     printWin?: import("electron").BrowserWindow
     transactions?: {

app/src/window/index.ts

@@ -30,6 +30,7 @@ class App {
         addScript(`${Constants.PROTYLE_CDN}/js/protyle-html.js?v=${Constants.SIYUAN_VERSION}`, "protyleWcHtmlScript");
         addBaseURL();
         window.siyuan = {
+            zIndex: 10,
             transactions: [],
             reqIds: {},
             backStack: [],