From 734afff15d8131234db294fe48a50b0c426f6e73 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 21 Jul 2023 00:31:25 +0800
Subject: [PATCH] perf: optimize the avatar text performance of the
 `com.msgbyte.genshin` plugin

---
 .../GenshinPanel/GachaPool/GachaPoolItem.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx b/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx
index beaab6d6..2983c901 100644
--- a/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx
+++ b/client/web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaPoolItem.tsx
@@ -1,5 +1,21 @@
 import { OfficialGachaPoolItem } from 'genshin-gacha-kit';
 import React from 'react';
+import styled from 'styled-components';
+
+const ItemRoot = styled.div`
+  position: relative;
+
+  .text {
+    position: absolute;
+    bottom: 0;
+    color: #444;
+    font-size: 24px;
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    line-height: 44px;
+  }
+`;
 
 export const GachaPoolItem: React.FC<{
   items: OfficialGachaPoolItem[];
@@ -7,11 +23,11 @@ export const GachaPoolItem: React.FC<{
   return (
     <div>
       {props.items.map((i) => (
-        <div key={i.item_id}>
+        <ItemRoot key={i.item_id}>
           <img src={i.item_img} />
 
-          <div>{i.item_name}</div>
-        </div>
+          <div className="text">{i.item_name}</div>
+        </ItemRoot>
       ))}
     </div>
   );