perf: optimize the avatar text performance of the `com.msgbyte.genshin` plugin

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 className="text">{i.item_name}</div>
-        </div>
+        </ItemRoot>
       ))}
     </div>
   );