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

app/appearance/langs/en_US.json

@@ -666,7 +666,7 @@
   "recentEmoji": "Common Emoticons",
   "andSubFile": "and its <b>x</b> subdocs",
   "changeIcon": "Change icon",
-  "randomIcon": "Random icon",
+  "addIcon": "Add icon",
   "includeSubFile": "\nInclude x subdocs",
   "untitled": "Untitled",
   "lockScreen": "Lock Screen",
@@ -715,7 +715,7 @@
   "attr": "Attribute",
   "updatePath": "Change dir",
   "default": "Default",
-  "titleBg": "Random cover",
+  "titleBg": "Add cover",
   "random": "Random",
   "cloudBackup": "Cloud backup",
   "total": "Total",

app/appearance/langs/es_ES.json

@@ -666,7 +666,7 @@
   "recentEmoji": "Emoticonos comunes",
   "andSubFile": "y sus <b>x</b> documentos secundarios",
   "changeIcon": "Cambiar el icono",
-  "randomIcon": "Icono aleatorio",
+  "addIcon": "Agregar icono",
   "includeSubFile": "\nIncluir x documentos secundarios",
   "untitled": "Sin título",
   "lockScreen": "Pantalla de bloqueo",
@@ -715,7 +715,7 @@
   "attr": "Atributo",
   "updatePath": "Cambiar directorio",
   "default": "Por defecto",
-  "titleBg": "Portada aleatoria",
+  "titleBg": "Añadir portada",
   "random": "Aleatorio",
   "cloudBackup": "Copia de seguridad en la nube",
   "total": "Total",

app/appearance/langs/fr_FR.json

@@ -666,7 +666,7 @@
   "recentEmoji": "Emoticônes courantes",
   "andSubFile": "et son <b>x</b> sous-documents",
   "changeIcon": "Changer l'icône",
-  "randomIcon": "Icône aléatoire",
+  "addIcon": "Ajouter une icône",
   "includeSubFile": "\nInclure x sous-documents",
   "untitled": "Sans titre",
   "lockScreen": "Verrouiller Écran",
@@ -715,7 +715,7 @@
   "attr": "Attribut",
   "updatePath": "modifier le répertoire",
   "default": "Default",
-  "titleBg": "Couverture aléatoire",
+  "titleBg": "Ajouter une couverture",
   "random": "Random",
   "cloudBackup": "Sauvegarde en Cloud",
   "total": "Total",

app/appearance/langs/zh_CHT.json

@@ -666,7 +666,7 @@
   "recentEmoji": "常用表情",
   "andSubFile": "及其 <b>x</b> 個子文檔",
   "changeIcon": "修改圖示",
-  "randomIcon": "隨機圖標",
+  "addIcon": "新增圖示",
   "includeSubFile": "\n包含 x 個子文檔",
   "untitled": "未命名",
   "lockScreen": "鎖定畫面",
@@ -715,7 +715,7 @@
   "attr": "屬性",
   "updatePath": "修改目錄",
   "default": "預設",
-  "titleBg": "隨機封面圖",
+  "titleBg": "新增封面圖",
   "random": "隨機",
   "cloudBackup": "雲端備份",
   "total": "總計",

app/appearance/langs/zh_CN.json

@@ -666,7 +666,7 @@
   "recentEmoji": "常用表情",
   "andSubFile": "及其 <b>x</b> 个子文档",
   "changeIcon": "修改图标",
-  "randomIcon": "随机图标",
+  "addIcon": "添加图标",
   "includeSubFile": "\n包含 x 个子文档",
   "untitled": "未命名",
   "lockScreen": "锁屏",
@@ -715,7 +715,7 @@
   "attr": "属性",
   "updatePath": "修改目录",
   "default": "默认",
-  "titleBg": "随机题头图",
+  "titleBg": "添加题头图",
   "random": "随机",
   "cloudBackup": "云端备份",
   "total": "总计",

app/src/assets/scss/protyle/_protyle.scss

@@ -121,7 +121,7 @@
     margin-left: 8px;
 
     &:disabled {
-        opacity: .38;
+      opacity: .38;
     }
   }
 
@@ -253,19 +253,22 @@
   }
 }
 
+.protyle-top:hover {
+  .protyle-background--enable .protyle-background__action {
+    opacity: .86;
+  }
+}
+
 .protyle-background {
   position: relative;
-  padding-bottom: 40px;
 
   &--enable {
     .protyle-background__img:hover .protyle-icons,
-    &:hover > .protyle-background__iconw > .protyle-icons,
     .protyle-background__icon:hover {
       opacity: .86;
     }
   }
 
-
   &--mobileshow {
     .protyle-background__iconw > .protyle-icons,
     .protyle-background__img .protyle-icons {
@@ -273,6 +276,15 @@
     }
   }
 
+  &__action {
+    transition: opacity 150ms linear;
+    opacity: 0;
+
+    .b3-button {
+      margin-top: 8px;
+    }
+  }
+
   &__icon {
     height: 80px;
     width: 80px;
@@ -282,7 +294,10 @@
     line-height: 80px;
     text-align: center;
     font-family: var(--b3-font-family-emoji);
-    margin-right: 16px;
+    z-index: 1;
+    position: relative;
+    margin-top: -40px;
+    margin-bottom: 8px;
 
     img, svg {
       height: 80px;
@@ -297,7 +312,6 @@
   }
 
   &__img {
-    position: absolute;
     width: 100%;
 
     img {
@@ -309,32 +323,19 @@
     }
 
     .protyle-icons {
-      bottom: 8px;
+      position: absolute;
-      top: auto;
+      top: 8px;
-      margin-left: -44px;
+      right: 8px;
-      left: auto;
-      right: 32px; // 仅 iPone，设置 index 也无效 https://github.com/siyuan-note/siyuan/issues/6926
 
       &:nth-child(3) {
-        right: auto;
+        left: 50%;
-        left: 48%;
+        opacity: 0.86;
-        opacity: .86;
+        top: 15vh;
-        top: 50%;
+        margin-top: -12px;
-        bottom: auto;
+        margin-left: -70px;
-        margin-top: -11px;
       }
     }
   }
-
-  &__iconw {
-    bottom: 0;
-    display: flex;
-    position: absolute;
-
-    .protyle-icons {
-      position: initial;
-    }
-  }
 }
 
 .protyle-title {

app/src/layout/Tab.ts

@@ -182,7 +182,8 @@ export class Tab {
                 this.headElement.querySelector(".item__text").classList.add("fn__none");
             }
         } else {
-            this.headElement.querySelector(".item__icon").remove();
+            // 添加图标后刷新界面，没有 icon
+            this.headElement.querySelector(".item__icon")?.remove();
             this.headElement.querySelector(".item__text").classList.remove("fn__none");
         }
     }

app/src/protyle/header/Background.ts

@@ -99,6 +99,7 @@ export class Background {
     public ial: IObject;
     private imgElement: HTMLImageElement;
     private iconElement: HTMLElement;
+    private actionElements: NodeListOf<Element>;
     private tagsElement: HTMLElement;
     private transparentData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
 
@@ -106,7 +107,7 @@ export class Background {
         this.element = document.createElement("div");
         this.element.className = "protyle-background";
         this.element.innerHTML = `<div class="protyle-background__img">
-    <img class="fn__none">
+    <img>
     <div class="protyle-icons">
         <span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__sw" style="position: relative" aria-label="${window.siyuan.languages.upload}"><input type="file" style="position: absolute;width: 22px;height: 100%;top: 0;left: 0;opacity: .001;overflow: hidden;cursor: pointer;"><svg><use xlink:href="#iconUpload"></use></svg></span>
         <span class="protyle-icon b3-tooltips b3-tooltips__sw" data-type="link" aria-label="${window.siyuan.languages.link}"><svg><use xlink:href="#iconLink"></use></svg></span>
@@ -121,18 +122,28 @@ export class Background {
         <span class="protyle-icon protyle-icon--last" data-type="confirm">${window.siyuan.languages.confirm}</span>
     </div>
 </div>
-<div class="b3-chips"></div>
+<div class="protyle-background__ia">
-<div class="protyle-background__iconw">
     <div class="protyle-background__icon" data-menu="true" data-type="open-emoji"></div>
-    <div class="protyle-icons fn__flex-center">
+    <div class="b3-chips fn__none"></div>
-        <span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__s" data-menu="true" data-type="tag" aria-label="${window.siyuan.languages.addTag}"><svg><use xlink:href="#iconTags"></use></svg></span>
+    <div class="protyle-background__action">
-        <span class="protyle-icon b3-tooltips b3-tooltips__s" data-type="icon" aria-label="${window.siyuan.languages.randomIcon}"><svg><use xlink:href="#iconEmoji"></use></svg></span>
+        <button class="b3-button b3-button--cancel" data-menu="true" data-type="tag">
-        <span class="protyle-icon protyle-icon--last b3-tooltips b3-tooltips__s" data-type="random" aria-label="${window.siyuan.languages.titleBg}"><svg><use xlink:href="#iconImage"></use></svg></span>
+            <svg><use xlink:href="#iconTags"></use></svg>
+            ${window.siyuan.languages.addTag}
+        </button>
+        <button class="b3-button b3-button--cancel" data-type="icon">
+            <svg><use xlink:href="#iconEmoji"></use></svg>
+            ${window.siyuan.languages.addIcon}
+        </button>
+        <button class="b3-button b3-button--cancel" data-type="random">
+            <svg><use xlink:href="#iconImage"></use></svg>
+            ${window.siyuan.languages.titleBg}
+        </button>
     </div>
 </div>`;
         this.tagsElement = this.element.querySelector(".b3-chips") as HTMLElement;
         this.iconElement = this.element.querySelector(".protyle-background__icon") as HTMLElement;
-        this.imgElement = this.element.firstElementChild.firstElementChild as HTMLImageElement;
+        this.imgElement = this.element.querySelector(".protyle-background__img img") as HTMLImageElement;
+        this.actionElements = this.element.querySelectorAll(".protyle-background__action .b3-button");
 
         this.element.addEventListener("dragover", async (event) => {
             event.preventDefault();
@@ -330,12 +341,20 @@ export class Background {
                         if (protyle.model) {
                             protyle.model.parent.setDocIcon(emoji);
                         }
+                        this.iconElement.classList.remove("fn__none");
+                        const rect = this.iconElement.getBoundingClientRect();
+                        openEmojiPanel(protyle.block.rootID, "doc", {
+                            x: rect.left,
+                            y: rect.bottom,
+                            h: rect.height,
+                            w: rect.width
+                        });
                     }
                     event.preventDefault();
                     event.stopPropagation();
                     break;
                 } else if (type === "tag") {
-                    this.openTag(protyle);
+                    this.openTag(protyle, target);
                     event.preventDefault();
                     event.stopPropagation();
                     break;
@@ -432,20 +451,25 @@ export class Background {
             tags.split(",").forEach((item, index) => {
                 html += `<div class="b3-chip b3-chip--middle b3-chip--pointer b3-chip--${colors[index % 7]}" data-type="open-search">${item}<svg class="b3-chip__close" data-type="remove-tag"><use xlink:href="#iconCloseRound"></use></svg></div>`;
             });
-            this.tagsElement.innerHTML = html;
+            this.tagsElement.innerHTML = `${html}<span class="fn__space"></span>
+<button class="b3-button b3-button--cancel fn__flex-center" data-menu="true" data-type="tag"><svg style="margin-right: 0;"><use xlink:href="#iconAdd"></use></svg></button>`
+            this.tagsElement.classList.remove("fn__none")
+            this.actionElements[0].classList.add("fn__none")
         } else {
-            this.tagsElement.innerHTML = "";
+            this.tagsElement.classList.add("fn__none")
+            this.actionElements[0].classList.remove("fn__none")
         }
 
         if (icon) {
             this.iconElement.classList.remove("fn__none");
             this.iconElement.innerHTML = unicode2Emoji(icon);
+            this.actionElements[1].classList.add("fn__none")
         } else {
+            this.actionElements[1].classList.remove("fn__none")
             this.iconElement.classList.add("fn__none");
         }
 
         if (img) {
-            this.imgElement.classList.remove("fn__none");
             // 历史数据解析：background-image: url(\"assets/沙发背景墙11-20220418171700-w6vilzt.jpeg\"); background-position: center -254px; background-size: cover; background-repeat: no-repeat; min-height: 30vh
             this.imgElement.setAttribute("style", Lute.UnEscapeHTMLStr(img));
             if (img.indexOf("url(") > -1) {
@@ -459,23 +483,21 @@ export class Background {
                 this.imgElement.setAttribute("src", this.transparentData);
                 this.element.querySelector('[data-type="position"]').classList.add("fn__none");
             }
-        } else {
+            this.actionElements[2].classList.add("fn__none")
-            this.imgElement.classList.add("fn__none");
+            this.imgElement.parentElement.classList.remove("fn__none");
-        }
+            this.iconElement.style.marginTop = "";
-
+            /// #if MOBILE
-        if (img) {
             // 移动端键盘弹起和点击加号需保持滚动高度一致
-            this.element.style.minHeight = isMobile() ? "200px" : "30vh";
+            this.imgElement.style.height = "200px"
-        } else if (icon) {
+            /// #endif
-            this.element.style.minHeight = (this.tagsElement.clientHeight + 56) + "px";
-        } else if (tags) {
-            this.element.style.minHeight = this.tagsElement.clientHeight + "px";
         } else {
-            this.element.style.minHeight = "0";
+            this.imgElement.parentElement.classList.add("fn__none");
+            this.actionElements[2].classList.remove("fn__none")
+            this.iconElement.style.marginTop = "8px";
         }
     }
 
-    private openTag(protyle: IProtyle) {
+    private openTag(protyle: IProtyle, target: HTMLElement) {
         window.siyuan.menus.menu.remove();
         const menu = new Menu();
         menu.addItem({
@@ -549,7 +571,7 @@ export class Background {
             }
         });
         menu.element.querySelector(".b3-menu__items").setAttribute("style", "overflow: initial");
-        const rect = this.iconElement.nextElementSibling.getBoundingClientRect();
+        const rect = target.getBoundingClientRect();
         menu.open({x: rect.left, y: rect.top + rect.height});
         menu.element.querySelector("input").focus();
     }

app/src/protyle/ui/initUI.ts

@@ -10,11 +10,12 @@ import {lineNumberRender} from "../render/highlightRender";
 export const initUI = (protyle: IProtyle) => {
     protyle.contentElement = document.createElement("div");
     protyle.contentElement.className = "protyle-content";
+    protyle.contentElement.innerHTML = `<div class="protyle-top"></div>`
     if (protyle.options.render.background) {
-        protyle.contentElement.appendChild(protyle.background.element);
+        protyle.contentElement.firstElementChild.appendChild(protyle.background.element);
     }
     if (protyle.options.render.title) {
-        protyle.contentElement.appendChild(protyle.title.element);
+        protyle.contentElement.firstElementChild.appendChild(protyle.title.element);
     }
     protyle.contentElement.appendChild(protyle.wysiwyg.element);
     if (!protyle.options.action.includes(Constants.CB_GET_HISTORY)) {
@@ -142,11 +143,10 @@ export const setPadding = (protyle: IProtyle) => {
         protyle.wysiwyg.element.style.padding = `16px ${left}px ${bottomHeight} ${right}px`;
     }
     if (protyle.options.render.background) {
-        protyle.background.element.lastElementChild.setAttribute("style", `left:${left}px`);
+        protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px`);
-        protyle.background.element.querySelector(".protyle-background__img .protyle-icons").setAttribute("style", `right:${left}px`);
     }
     if (protyle.options.render.title) {
-        protyle.title.element.style.margin = `16px ${left}px 0 ${right}px`;
+        protyle.title.element.style.margin = `5px ${left}px 0 ${right}px`;
     }
     if (window.siyuan.config.editor.displayBookmarkIcon) {
         const editorAttrElement = document.getElementById("editorAttr");