🚨 https://github.com/siyuan-note/siyuan/issues/8631

app/src/asset/renderAssets.ts

@@ -68,7 +68,7 @@ export const genAssetHTML = (type: string, pathString: string, imgName: string,
         if (!pathString.startsWith("assets/")) {
             netHTML = '<span class="img__net"><svg><use xlink:href="#iconLanguage"></use></svg></span>';
         }
-        html = `<span contenteditable="false" data-type="img" class="img"><span> </span><span><span class="protyle-action protyle-icons"><span class="protyle-icon protyle-icon--only"><svg class="svg"><use xlink:href="#iconMore"></use></svg></span></span><img src="${pathString}" data-src="${pathString}" alt="${imgName}" /><span class="protyle-action__drag"></span>${netHTML}<span class="protyle-action__title"></span></span><span> </span></span>`;
+        html = `<span contenteditable="false" data-type="img" class="img"><span> </span><span><span class="protyle-action protyle-icons"><span class="protyle-icon protyle-icon--only"><svg><use xlink:href="#iconMore"></use></svg></span></span><img src="${pathString}" data-src="${pathString}" alt="${imgName}" /><span class="protyle-action__drag"></span>${netHTML}<span class="protyle-action__title"></span></span><span> </span></span>`;
     } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
         html = `<div data-node-id="${Lute.NewNodeID()}" data-type="NodeVideo" class="iframe" updated="${dayjs().format("YYYYMMDDHHmmss")}"><div class="iframe-content">${Constants.ZWSP}<video controls="controls" src="${pathString}" data-src="${pathString}"></video><span class="protyle-action__drag" contenteditable="false"></span></div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div></div>`;
     } else {

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

@@ -167,7 +167,8 @@
     }
   }
 
-  &.protyle-wysiwyg--select {
+  &.protyle-wysiwyg--select,
+  &.protyle-wysiwyg--hl {
     .layout-tab-bar,
     .av__row--header,
     .av__row--footer {

app/src/assets/scss/business/_card.scss

@@ -4,6 +4,7 @@
     box-sizing: border-box;
     max-height: 100%;
     background-color: var(--b3-theme-surface);
+    border-radius: var(--b3-border-radius-b);
   }
 
   &__empty {

app/src/assets/scss/business/_config.scss

@@ -1,15 +1,33 @@
 .config {
+  &__tab-wrap {
+    overflow: hidden;
+    box-sizing: border-box;
+    background-color: var(--b3-theme-background);
+    border-radius: 0 var(--b3-border-radius-b) var(--b3-border-radius-b) 0;
+    width: 100%;
+    height: 100%;
+    padding: 16px 0;
+  }
+
   &__tab-container {
     overflow: auto;
     box-sizing: border-box;
-    flex: 1;
+    height: 100%;
-    background-color: var(--b3-theme-background);
-    border-radius: 0 var(--b3-border-radius-b) var(--b3-border-radius-b) 0;
 
     .b3-label {
       padding: 16px 0;
       margin: 0 24px;
     }
+
+    &--full {
+      margin-top: -16px;
+      height: calc(100% + 32px);
+    }
+
+    &--top {
+      margin-top: -16px;
+      height: calc(100% + 16px);
+    }
   }
 
   &__panel {

app/src/assets/scss/component/_typography.scss

@@ -479,13 +479,14 @@
 
   &-icon {
     font-size: 85%;
-    line-height: 22px;
+    line-height: 24px;
     cursor: pointer;
-    padding: 0 4px;
+    padding: 5px;
     transition: var(--b3-transition);
     background-color: var(--b3-theme-on-surface);
-    height: 22px;
+    height: 24px;
     color: var(--b3-theme-surface);
+    box-sizing: border-box;
 
     &--only {
       border-radius: var(--b3-border-radius);
@@ -517,7 +518,8 @@
     }
 
     & > svg {
-      height: 22px;
+      height: 14px;
+      float: left;
       width: 14px;
       fill: currentColor;
     }

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

@@ -258,7 +258,7 @@
     }
 
     &:not(.fn__none) + .protyle-icons {
-      margin-top: 57px;
+      margin-top: 56px;
     }
   }
 

app/src/card/viewCards.ts

@@ -39,7 +39,7 @@ export const viewCards = (app: App, deckID: string, title: string, deckType: "Tr
         <ul class="fn__flex-1 b3-list b3-list--background" style="user-select: none">
             ${renderViewItem(response.data.blocks, title, deckType)}
         </ul>
-        <div id="cardPreview" class="fn__flex-1 fn__none"></div>
+        <div id="cardPreview" style="border-bottom-right-radius:var(--b3-border-radius-b);" class="fn__flex-1 fn__none"></div>
         <div class="fn__flex-1 card__empty">${window.siyuan.languages.emptyContent}</div>
     </div>
 </div>`,

app/src/config/index.ts

@@ -110,19 +110,21 @@ export const openSetting = (app: App) => {
     <li data-name="repos" class="b3-list-item"><svg class="b3-list-item__graphic"><use xlink:href="#iconCloud"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.cloud}</span></li>
     <li data-name="about" class="b3-list-item"><svg class="b3-list-item__graphic"><use xlink:href="#iconInfo"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.about}</span></li>
   </ul>
+  <div class="config__tab-wrap"> 
       <div class="config__tab-container" data-name="editor">${editor.genHTML()}</div>
       <div class="config__tab-container fn__none" data-name="filetree"></div>
       <div class="config__tab-container fn__none" data-name="card"></div>
-  <div class="config__tab-container fn__none" data-name="AI"></div>
+      <div class="config__tab-container config__tab-container--top fn__none" data-name="AI"></div>
-  <div class="config__tab-container fn__none" data-name="image"></div>
+      <div class="config__tab-container config__tab-container--top fn__none" data-name="image"></div>
       <div class="config__tab-container fn__none" data-name="export"></div>
       <div class="config__tab-container fn__none" data-name="appearance"></div>
-  <div class="config__tab-container fn__none" data-name="bazaar"></div>
+      <div class="config__tab-container config__tab-container--top fn__none" data-name="bazaar"></div>
       <div class="config__tab-container fn__none" data-name="search"></div>
       <div class="config__tab-container fn__none" style="overflow: scroll" data-name="keymap"></div>
-  <div class="config__tab-container fn__none" data-name="account"></div>
+      <div class="config__tab-container config__tab-container--full fn__none" data-name="account"></div>
       <div class="config__tab-container fn__none" data-name="repos"></div>
       <div class="config__tab-container fn__none" data-name="about"></div>
+  </div>
 </div>`,
         width: "90vw",
         height: "90vh",

app/src/protyle/ui/initUI.ts

@@ -141,12 +141,11 @@ export const setPadding = (protyle: IProtyle) => {
             min24 = 96;
         }
     }
-    if (protyle.options.render.background && protyle.options.render.title) {
+    if (protyle.options.render.background) {
         protyle.background.element.lastElementChild.setAttribute("style", `left:${min16}px`);
-        protyle.title.element.style.margin = `16px ${min16}px 0 ${min24}px`;
+        protyle.background.element.querySelector(".protyle-background__img .protyle-icons").setAttribute("style", `right:${min16}px`);
-    } else if (protyle.options.render.background && !protyle.options.render.title) {
+    }
-        protyle.background.element.lastElementChild.setAttribute("style", `left:${min16}px`);
+    if (protyle.options.render.title) {
-    } else if (!protyle.options.render.background && protyle.options.render.title) {
         protyle.title.element.style.margin = `16px ${min16}px 0 ${min24}px`;
     }
     let bottomHeight = "16px";

app/src/protyle/wysiwyg/transaction.ts

@@ -452,13 +452,13 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
                 if (refElement) {
                     nodeAttrHTML += refElement.outerHTML;
                 }
-                if (data.new["custom-riff-decks"]) {
+                if (data.new["custom-riff-decks"] && data.new["custom-riff-decks"] !== data.old["custom-riff-decks"]) {
                     protyle.title.element.style.animation = "addCard 450ms linear";
                     protyle.title.element.setAttribute("custom-riff-decks", data.new["custom-riff-decks"]);
                     setTimeout(() => {
                         protyle.title.element.style.animation = "";
                     }, 450);
-                } else {
+                } else if (!data.new["custom-riff-decks"]) {
                     protyle.title.element.removeAttribute("custom-riff-decks");
                 }
                 protyle.title.element.querySelector(".protyle-attr").innerHTML = nodeAttrHTML;
@@ -487,12 +487,12 @@ export const onTransaction = (protyle: IProtyle, operation: IOperation, focus: b
             Object.keys(data.old).forEach(key => {
                 item.removeAttribute(key);
             });
-            if (data.new.style && data.new["custom-riff-decks"]) {
+            if (data.new.style && data.new["custom-riff-decks"] && data.new["custom-riff-decks"] !== data.old["custom-riff-decks"]) {
                 data.new.style += ";animation:addCard 450ms linear";
             }
             Object.keys(data.new).forEach(key => {
                 item.setAttribute(key, data.new[key]);
-                if (key === "custom-riff-decks") {
+                if (key === "custom-riff-decks" && data.new["custom-riff-decks"] !== data.old["custom-riff-decks"]) {
                     item.style.animation = "addCard 450ms linear";
                     setTimeout(() => {
                         item.style.animation = "";