From c228971a23a9474f9a312a0122fa85a302f82fdb Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 21 Mar 2024 18:05:10 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/8390

---
 app/src/assets/scss/base.scss |  4 +++
 app/src/config/bazaar.ts      | 51 ++++++++++++++++++++++++++++++-----
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 25f511cfd..d34c69e87 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -371,6 +371,10 @@ html {
     width: 32px;
     text-align: right;
   }
+
+  &--bg {
+    background-color: var(--b3-theme-surface);
+  }
 }
 
 .reveal {
diff --git a/app/src/config/bazaar.ts b/app/src/config/bazaar.ts
index 113911991..741bf227b 100644
--- a/app/src/config/bazaar.ts
+++ b/app/src/config/bazaar.ts
@@ -102,7 +102,7 @@ export const bazaar = {
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
             <input ${window.siyuan.config.bazaar.petalDisabled ? "" : " checked"} data-type="plugins-enable" type="checkbox" class="b3-switch" style="margin: 8px 16px">
-            <div class="counter fn__none fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
+            <div class="counter counter--bg fn__none fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}"></div>
         </div>
         <div id="configBazaarDownloaded" class="config-bazaar__content">
             ${loadingHTML}
@@ -131,7 +131,7 @@ export const bazaar = {
             </div>
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
-            <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
+            <div class="counter counter--bg fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}"></div>
         </div>
         <div id="configBazaarTheme" class="config-bazaar__content">
             ${loadingHTML}
@@ -154,7 +154,7 @@ export const bazaar = {
             </div>
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
-            <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
+            <div class="counter counter--bg fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}"></div>
         </div>
         <div id="configBazaarTemplate" class="config-bazaar__content">
             ${loadingHTML}
@@ -177,7 +177,7 @@ export const bazaar = {
             </div>
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
-            <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
+            <div class="counter counter--bg fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}"></div>
         </div>
         <div id="configBazaarPlugin" class="config-bazaar__content">
             ${loadingHTML}
@@ -200,7 +200,7 @@ export const bazaar = {
             </div>
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
-            <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
+            <div class="counter counter--bg fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}"></div>
         </div>
         <div id="configBazaarIcon" class="config-bazaar__content">
             ${loadingHTML}
@@ -223,7 +223,7 @@ export const bazaar = {
             </div>
             <div class="fn__space"></div>
             <div class="fn__flex-1"></div>
-            <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
+            <div class="counter counter--bg fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}"></div>
         </div>
         <div id="configBazaarWidget" class="config-bazaar__content">
             ${loadingHTML}
@@ -292,10 +292,47 @@ export const bazaar = {
         </div>
     </div>
 </div>`;
+    },
+    _genUpdateItemHTML (item: IBazaarItem) {
+        return `<div class="b3-card">
+    <div class="b3-card__img"><img src="${item.iconURL}" onerror="this.src='/stage/images/icon.png'"/></div>
+        <div class="fn__flex-1 fn__flex-column">
+    <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>
+    <div class="b3-card__actions b3-card__actions--right">
+        ${item.incompatible ? `<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 ? `<span class="fn__space"></span><a target="_blank" href="${item.preferredFunding}" class="block__icon block__icon--show ariaLabel" aria-label="${window.siyuan.languages.sponsor} ${item.preferredFunding}"><svg class="ft__pink"><use xlink:href="#iconHeart"></use></svg></a>` : ""}
+    </div>
+</div>`
     },
     _getUpdate() {
         fetchPost("/api/bazaar/getUpdatedPackage", {frontend: getFrontend()}, (response) => {
-            this.element.querySelector('[data-type="downloaded-update"]').innerHTML = `<div class="fn__flex"></div>`
+            let html = "";
+            response.data.plugins.forEach((item: IBazaarItem) => {
+                html += this._genUpdateItemHTML(item);
+            });
+            response.data.themes.forEach((item: IBazaarItem) => {
+                html += this._genUpdateItemHTML(item);
+            });
+            response.data.icons.forEach((item: IBazaarItem) => {
+                html += this._genUpdateItemHTML(item);
+            });
+            response.data.templates.forEach((item: IBazaarItem) => {
+                html += this._genUpdateItemHTML(item);
+            });
+            response.data.widgets.forEach((item: IBazaarItem) => {
+                html += this._genUpdateItemHTML(item);
+            });
+            this.element.querySelector('[data-type="downloaded-update"]').innerHTML = `<div class="fn__flex config-bazaar__title">
+    <div class="fn__flex-1"></div>
+    <button class="b3-button">${window.siyuan.languages.update}</button>
+    <span class="fn__space"></span>
+    <div class="counter counter--bg fn__flex-center">${response.data.themes.length + response.data.icons.length + response.data.widgets.length + response.data.plugins.length + response.data.templates.length}</div>
+</div>
+<div class="config-bazaar__content">${html}</div>`;
         })
     },
     _genMyHTML(bazaarType: TBazaarType, app: App) {