:art: fix https://github.com/siyuan-note/siyuan/issues/8391

app/src/assets/scss/component/_card.scss

@@ -46,6 +46,11 @@
   &__info {
     padding: 16px 16px 4px;
     line-height: 18px;
+
+    &--left {
+      padding-bottom: 16px;
+      padding-right: 8px;
+    }
   }
 
   &__desc {
@@ -62,5 +67,15 @@
     box-sizing: border-box;
     font-size: 12px;
     line-height: 14px;
+
+    &--right {
+      padding-left: 0;
+      padding-bottom: 0;
+      align-items: center;
+
+      .block__icon {
+        margin-left: 8px;
+      }
+    }
   }
 }

app/src/config/bazaar.ts

@@ -11,7 +11,7 @@ import * as path from "path";
 /// #endif
 import {getFrontend, isBrowser} from "../util/functions";
 import {setStorageVal} from "../protyle/util/compatibility";
-import {hasClosestByAttribute} from "../protyle/util/hasClosest";
+import {hasClosestByAttribute, hasClosestByClassName} from "../protyle/util/hasClosest";
 import {Plugin} from "../plugin";
 import {App} from "../index";
 import {escapeAttr} from "../util/escape";
@@ -73,11 +73,11 @@ export const bazaar = {
         return `<div class="fn__flex-column" style="height: 100%">
 <div class="layout-tab-bar fn__flex">
     <div data-type="downloaded" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.downloaded}</span><span class="fn__flex-1"></span></div>
+    <div data-type="plugin" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.plugin}</span><span class="fn__flex-1"></span></div>
     <div data-type="theme" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.theme}</span><span class="fn__flex-1"></span></div>
     <div data-type="icon" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.icon}</span><span class="fn__flex-1"></span></div>
     <div data-type="template" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.template}</span><span class="fn__flex-1"></span></div>
     <div data-type="widget" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.widget}</span><span class="fn__flex-1"></span></div>
-    <div data-type="plugin" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.plugin}</span><span class="fn__flex-1"></span></div>
 </div>
 <div class="fn__flex-1">
     <div class="bazaarPanel" data-type="downloaded" data-init="true">
@@ -85,15 +85,15 @@ export const bazaar = {
         <div class="fn__flex">
             <div class="fn__space"></div>
             <div class="fn__space"></div>
-            <button data-type="myTheme" class="b3-button">${window.siyuan.languages.theme}</button>
+            <button data-type="myPlugin" class="b3-button">${window.siyuan.languages.plugin}</button>
+            <div class="fn__space"></div>
+            <button data-type="myTheme" class="b3-button b3-button--outline">${window.siyuan.languages.theme}</button>
             <div class="fn__space"></div>
             <button data-type="myIcon" class="b3-button b3-button--outline">${window.siyuan.languages.icon}</button>
             <div class="fn__space"></div>
             <button data-type="myTemplate" class="b3-button b3-button--outline">${window.siyuan.languages.template}</button>
             <div class="fn__space"></div>
             <button data-type="myWidget" class="b3-button b3-button--outline">${window.siyuan.languages.widget}</button>
-            <div class="fn__space"></div>
-            <button data-type="myPlugin" class="b3-button b3-button--outline">${window.siyuan.languages.plugin}</button>
         </div>
         <div id="configBazaarDownloaded">
             ${loadingHTML}
@@ -310,37 +310,32 @@ export const bazaar = {
                 html += `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${item.current ? " b3-card--current" : ""}">
     <div class="b3-card__img"><img src="${item.iconURL}" onerror="this.src='${item.previewURLThumb}'"/></div>
     <div class="fn__flex-1 fn__flex-column">
-        <div class="b3-card__info fn__flex-1">
+        <div class="b3-card__info b3-card__info--left fn__flex-1">
             ${item.preferredName} <span class="ft__on-surface ft__smaller">${item.name}</span>
             <div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">${item.preferredDesc || ""}</div>
         </div>
-        <div class="b3-card__actions">
-            ${item.preferredFunding ? `<a target="_blank" href="${item.preferredFunding}" data-type="a" class="block__icon block__icon--show" aria-label="${window.siyuan.languages.sponsor} ${item.preferredFunding}"><svg class="ft__pink"><use xlink:href="#iconHeart"></use></svg></a>` : ""}
-            <div class="fn__flex-1"></div>
-            ${item.incompatible ? `<span class="b3-tooltips b3-tooltips__nw fn__flex-center" aria-label="${window.siyuan.languages.incompatiblePluginTip}">${window.siyuan.languages.incompatible}</span><span class="fn__space"></span>` : ""}
-            <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${hasSetting ? "" : " fn__none"}" data-type="setting" aria-label="${window.siyuan.languages.config}">
-                <svg><use xlink:href="#iconSettings"></use></svg>
-            </span>
-            <span class="fn__space"></span>
-            <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
-                <svg><use xlink:href="#iconTrashcan"></use></svg>
-            </span>
-            <span class="fn__space${isBrowser() ? " fn__none" : ""}"></span>
-            <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${isBrowser() ? " fn__none" : ""}" data-type="open" aria-label="${window.siyuan.languages.showInFolder}">
-                <svg><use xlink:href="#iconFolder"></use></svg>
-            </span>
-            <span class="fn__space${!item.current && showSwitch ? "" : " fn__none"}"></span>
-            <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${!item.current && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}">
-                <svg><use xlink:href="#iconSelect"></use></svg>
-            </span>
-            <span class="fn__space${item.outdated ? "" : " fn__none"}"></span>
-            <span data-type="install-t" aria-label="${window.siyuan.languages.update}" class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.outdated ? "" : " fn__none"}">
-                <svg class="ft__primary"><use xlink:href="#iconRefresh"></use></svg>
-            </span>
-            <span class="fn__space${bazaarType === "plugins" ? "" : " fn__none"}"></span>
-            <span class="fn__space${bazaarType === "plugins" ? "" : " fn__none"}"></span>
-            <input class="b3-switch fn__flex-center${bazaarType === "plugins" ? "" : " fn__none"}" ${item.enabled ? "checked" : ""} data-type="plugin-enable" type="checkbox" ${item.incompatible ? " disabled" : ""}>
-        </div>
+    </div>
+    <div class="b3-card__actions b3-card__actions--right">
+        ${item.incompatible ? `<span class="fn__space"></span><span class="fn__flex-center b3-tooltips b3-tooltips__nw b3-chip b3-chip--error b3-chip--small" aria-label="${window.siyuan.languages.incompatiblePluginTip}">${window.siyuan.languages.incompatible}</span>` : ""}
+        ${item.preferredFunding ? `<a target="_blank" href="${item.preferredFunding}" data-type="a" class="block__icon block__icon--show" aria-label="${window.siyuan.languages.sponsor} ${item.preferredFunding}"><svg class="ft__pink"><use xlink:href="#iconHeart"></use></svg></a>` : ""}
+        <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${hasSetting ? "" : " fn__none"}" data-type="setting" aria-label="${window.siyuan.languages.config}">
+            <svg><use xlink:href="#iconSettings"></use></svg>
+        </span>
+        <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
+            <svg><use xlink:href="#iconTrashcan"></use></svg>
+        </span>
+        <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${isBrowser() ? " fn__none" : ""}" data-type="open" aria-label="${window.siyuan.languages.showInFolder}">
+            <svg><use xlink:href="#iconFolder"></use></svg>
+        </span>
+        <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${!item.current && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}">
+            <svg><use xlink:href="#iconSelect"></use></svg>
+        </span>
+        <span data-type="install-t" aria-label="${window.siyuan.languages.update}" class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.outdated ? "" : " fn__none"}">
+            <svg class="ft__primary"><use xlink:href="#iconRefresh"></use></svg>
+        </span>
+        <span class="fn__space${bazaarType === "plugins" ? "" : " fn__none"}"></span>
+        <span class="fn__space${bazaarType === "plugins" ? "" : " fn__none"}"></span>
+        <input class="b3-switch fn__flex-center${bazaarType === "plugins" ? "" : " fn__none"}" ${item.enabled ? "checked" : ""} data-type="plugin-enable" type="checkbox" ${item.incompatible ? " disabled" : ""}>
     </div>
 </div>`;
             });
@@ -489,7 +484,7 @@ export const bazaar = {
             });
             return;
         }
-        this._genMyHTML("themes", app);
+        this._genMyHTML("plugins", app);
         bazaar.element.firstElementChild.addEventListener("click", (event) => {
             let target = event.target as HTMLElement;
             const dataElement = hasClosestByAttribute(target, "data-obj", null);
@@ -739,7 +734,9 @@ export const bazaar = {
                     event.stopPropagation();
                     break;
                 } else if (target.classList.contains("b3-card")) {
-                    bazaar._renderReadme(target, (dataObj.bazaarType) as TBazaarType);
+                    if (!hasClosestByClassName(event.target as HTMLElement, "b3-card__actions--right")) {
+                        bazaar._renderReadme(target, (dataObj.bazaarType) as TBazaarType);
+                    }
                     event.preventDefault();
                     event.stopPropagation();
                     break;