From f2de3d9e9722abc111a15464bb58dbcd1babf430 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 28 Oct 2023 11:43:35 +0800
Subject: [PATCH] :lipstick: account

---
 app/src/assets/scss/business/_config.scss | 11 +++++++++++
 app/src/config/account.ts                 | 24 +++++++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss
index 558697a73..fce8dd176 100644
--- a/app/src/assets/scss/business/_config.scss
+++ b/app/src/assets/scss/business/_config.scss
@@ -93,6 +93,7 @@
       &--text {
         background-color: var(--b3-theme-surface);
         padding: 16px 24px;
+        overflow: auto;
 
         .b3-button--outline {
           white-space: normal;
@@ -151,6 +152,16 @@
       width: 100%;
       text-align: center;
     }
+
+    &__svg {
+      flex-wrap: wrap;
+
+      svg {
+        margin: 8px;
+        height: 16px;
+        width: 16px;
+      }
+    }
   }
 
   &-about__logo {
diff --git a/app/src/config/account.ts b/app/src/config/account.ts
index 0e2f2eca8..ed28353b4 100644
--- a/app/src/config/account.ts
+++ b/app/src/config/account.ts
@@ -12,6 +12,20 @@ import {syncGuide} from "../sync/syncGuide";
 import {hideElements} from "../protyle/ui/hideElements";
 import {getCloudURL} from "./util/about";
 
+const genSVGBG = () => {
+    let html = "";
+    const svgs: string[] = [];
+    document.querySelectorAll("body > svg > defs > symbol").forEach((item) => {
+        svgs.push(item.id);
+    });
+    Array.from({length: 45}, () => {
+        const index = Math.floor(Math.random()*svgs.length);
+        html += `<svg><use xlink:href="#${svgs[index]}"></use></svg>`;
+        svgs.splice(index, 1);
+    });
+    return `<div class="fn__flex config-account__svg">${html}</div>`;
+}
+
 export const account = {
     element: undefined as Element,
     genHTML: (onlyPayHTML = false) => {
@@ -30,14 +44,14 @@ export const account = {
     ${window.siyuan.languages.sponsor}
 </a>
 <div class="fn__hr--b"></div>
+<div class="fn__hr--b"></div>
 <div style="text-align: left">
 ${window.siyuan.languages.accountSupport1}
 </div>
 <div class="fn__hr--b"></div>
 <div style="text-align: left">
 ${window.siyuan.languages.accountSupport2}
-</div>
-<div class="fn__hr--b"></div>`;
+</div>`;
         if (onlyPayHTML) {
             return `<div class="ft__center">${payHTML}</div>`;
         }
@@ -188,9 +202,15 @@ ${renewHTML}
     </div>
 </div>
 <div class="config-account__center config-account__center--text${window.siyuan.config.system.container === "ios" ? " fn__none" : ""}">
+    ${genSVGBG()}
+    <div class="fn__hr--b"></div>
+    <div class="fn__flex-1"></div>
     <div class="ft__center">
         ${payHTML}
     </div>
+    <div class="fn__flex-1"></div>
+    <div class="fn__hr--b"></div>
+    ${genSVGBG()}
 </div>
 </div>`;
     },