feat: 原神抽卡模拟增加抽卡结果

web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/GachaResult.tsx

@@ -0,0 +1,25 @@
+import { AppWishResult } from 'genshin-gacha-kit';
+import React from 'react';
+import { WishResultText } from './WishResultText';
+
+interface GachaResultProps {
+  gachaResult: AppWishResult;
+}
+export const GachaResult: React.FC<GachaResultProps> = React.memo((props) => {
+  const { gachaResult } = props;
+
+  return (
+    <div>
+      <div>
+        <WishResultText label="5星" items={gachaResult.ssr} />
+      </div>
+      <div>
+        <WishResultText label="4星" items={gachaResult.sr} />
+      </div>
+      <div>
+        <WishResultText label="3星" items={gachaResult.r} />
+      </div>
+    </div>
+  );
+});
+GachaResult.displayName = 'GachaResult';

web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultModal.tsx

@@ -0,0 +1,21 @@
+import { ModalWrapper } from '@capital/common';
+import { AppGachaItem } from 'genshin-gacha-kit';
+import React from 'react';
+import { GachaResult } from './GachaResult';
+
+export const WishResultModal: React.FC<{ items: AppGachaItem[] }> = React.memo(
+  ({ items }) => {
+    return (
+      <ModalWrapper title="抽卡结果">
+        <GachaResult
+          gachaResult={{
+            ssr: items.filter((i) => i.rarity === 5),
+            sr: items.filter((i) => i.rarity === 4),
+            r: items.filter((i) => i.rarity === 3),
+          }}
+        />
+      </ModalWrapper>
+    );
+  }
+);
+WishResultModal.displayName = 'WishResultModal';

web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/WishResultText.tsx

@@ -2,9 +2,18 @@ import { AppGachaItem } from 'genshin-gacha-kit';
 import { getAppGachaItemText } from '../utils';
 import React from 'react';
 
-export const WishResultText: React.FC<{ items: AppGachaItem[] }> = React.memo(
+export const WishResultText: React.FC<{
-  ({ items }) => {
+  label: string;
-    return <span>{items.map(getAppGachaItemText).join(',')}</span>;
+  items: AppGachaItem[];
+}> = React.memo(({ label, items }) => {
+  if (items.length === 0) {
+    return null;
   }
-);
+
+  return (
+    <span>
+      {label}: {items.map(getAppGachaItemText).join(',')}
+    </span>
+  );
+});
 WishResultText.displayName = 'WishResultText';

web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/index.tsx

@@ -1,11 +1,11 @@
 import { useAsync } from '@capital/common';
-import { Divider, Button } from '@capital/component';
+import { Divider, Button, Space } from '@capital/component';
 import React from 'react';
 import { util } from 'genshin-gacha-kit';
 import { GenshinRichtext } from '../../components/GenshinRichtext';
-import { WishResultText } from './WishResultText';
 import { GachaPoolItem } from './GachaPoolItem';
 import { useWish } from './useWish';
+import { GachaResult } from './GachaResult';
 
 export const GachaPool: React.FC<{
   gachaId: string;
@@ -29,28 +29,20 @@ export const GachaPool: React.FC<{
         <GachaPoolItem items={poolData.r4_up_items ?? []} />
       </div>
 
-      <div style={{ display: 'flex', gap: 4 }}>
+      <Space>
         <Button type="primary" onClick={() => handleGacha(1)}>
           模拟单抽
         </Button>
         <Button type="primary" onClick={() => handleGacha(10)}>
           模拟十连
         </Button>
-      </div>
+      </Space>
 
       {gachaCount > 0 && (
         <div>
           <div>已抽: {gachaCount} 次</div>
 
-          <div>
+          <GachaResult gachaResult={gachaResult} />
-            5星: <WishResultText items={gachaResult.ssr} />
-          </div>
-          <div>
-            4星: <WishResultText items={gachaResult.sr} />
-          </div>
-          <div>
-            3星: <WishResultText items={gachaResult.r} />
-          </div>
         </div>
       )}
 

web/plugins/com.msgbyte.genshin/src/GenshinPanel/GachaPool/useWish.tsx

@@ -1,14 +1,16 @@
-import { showToasts } from '@capital/common';
+import { openModal, showToasts } from '@capital/common';
 import {
   AppWishResult,
   GenshinGachaKit,
   OfficialGachaPool,
   util,
 } from 'genshin-gacha-kit';
+import React from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { openFullScreenVideo } from '../../utils/openFullScreenVideo';
 import { wishVideoUrl } from '../consts';
 import { parseResultType } from '../utils';
+import { WishResultModal } from './WishResultModal';
 
 /**
  * 祈愿
@@ -36,7 +38,9 @@ export function useWish(poolData: OfficialGachaPool) {
       const res = gachaKit.multiWish(num);
 
       openFullScreenVideo(wishVideoUrl[parseResultType(res)]).then(() => {
-        showToasts('抽卡结果: ' + res.map((item) => item.name).join(','));
+        // showToasts('抽卡结果: ' + res.map((item) => item.name).join(','));
+
+        openModal(<WishResultModal items={res} />);
 
         setGachaCount(gachaKit.getCounter('total') as number);
         setGachaResult(JSON.parse(JSON.stringify(gachaKit.getResult())));

web/src/plugin/component/index.tsx

@@ -1,6 +1,6 @@
 import { Input } from 'antd';
 
-export { Button, Checkbox, Input, Divider } from 'antd';
+export { Button, Checkbox, Input, Divider, Space } from 'antd';
 export const TextArea = Input.TextArea;
 export { Image } from '@/components/Image';
 export { Icon } from '@iconify/react';