refactor: 重新整理genshin插件代码

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

@@ -1,128 +0,0 @@
-import { useAsync, showToasts } from '@capital/common';
-import { Divider, Button } from '@capital/component';
-import React, { useCallback, useMemo, useState } from 'react';
-import {
-  AppGachaItem,
-  AppWishResult,
-  GenshinGachaKit,
-  OfficialGachaPool,
-  OfficialGachaPoolItem,
-  util,
-} from 'genshin-gacha-kit';
-import { GenshinRichtext } from '../components/GenshinRichtext';
-import { getAppGachaItemText, parseResultType } from './utils';
-import { openFullScreenVideo } from '../utils/openFullScreenVideo';
-import { wishVideoUrl } from './consts';
-
-const GachaPoolItem: React.FC<{
-  items: OfficialGachaPoolItem[];
-}> = React.memo((props) => {
-  return (
-    <div>
-      {props.items.map((i) => (
-        <div key={i.item_id}>
-          <img src={i.item_img} />
-
-          <div>{i.item_name}</div>
-        </div>
-      ))}
-    </div>
-  );
-});
-GachaPoolItem.displayName = 'GachaPoolItem';
-
-const WishResult: React.FC<{ items: AppGachaItem[] }> = React.memo(
-  ({ items }) => {
-    return <span>{items.map(getAppGachaItemText).join(',')}</span>;
-  }
-);
-WishResult.displayName = 'WishResult';
-
-function useWish(poolData: OfficialGachaPool) {
-  const [gachaResult, setGachaResult] = useState<AppWishResult>({
-    ssr: [],
-    sr: [],
-    r: [],
-  });
-  const [gachaCount, setGachaCount] = useState<number>(0);
-
-  const gachaKit = useMemo(() => {
-    return poolData
-      ? new GenshinGachaKit(util.poolStructureConverter(poolData))
-      : null;
-  }, [poolData]);
-  const handleGacha = useCallback(
-    (num) => {
-      if (!gachaKit) {
-        return;
-      }
-
-      const res = gachaKit.multiWish(num);
-
-      openFullScreenVideo(wishVideoUrl[parseResultType(res)]).then(() => {
-        showToasts('抽卡结果: ' + res.map((item) => item.name).join(','));
-
-        setGachaCount(gachaKit.getCounter('total') as number);
-        setGachaResult(JSON.parse(JSON.stringify(gachaKit.getResult())));
-      });
-    },
-    [gachaKit]
-  );
-
-  return { handleGacha, gachaResult, gachaCount };
-}
-
-export const GachaPool: React.FC<{
-  gachaId: string;
-}> = React.memo((props) => {
-  const { value: poolData } = useAsync(() => {
-    return util.getGachaData(props.gachaId);
-  }, [props.gachaId]);
-  const { handleGacha, gachaResult, gachaCount } = useWish(poolData);
-
-  if (!poolData) {
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div>
-      <div>{poolData.banner}</div>
-
-      <div>{poolData.date_range}</div>
-      <div className="gacha-pool">
-        <GachaPoolItem items={poolData.r5_up_items ?? []} />
-        <GachaPoolItem items={poolData.r4_up_items ?? []} />
-      </div>
-
-      <div style={{ display: 'flex', gap: 4 }}>
-        <Button type="primary" onClick={() => handleGacha(1)}>
-          模拟单抽
-        </Button>
-        <Button type="primary" onClick={() => handleGacha(10)}>
-          模拟十连
-        </Button>
-      </div>
-
-      {gachaCount > 0 && (
-        <div>
-          <div>已抽: {gachaCount} 次</div>
-
-          <div>
-            5星: <WishResult items={gachaResult.ssr} />
-          </div>
-          <div>
-            4星: <WishResult items={gachaResult.sr} />
-          </div>
-          <div>
-            3星: <WishResult items={gachaResult.r} />
-          </div>
-        </div>
-      )}
-
-      <Divider />
-
-      <GenshinRichtext raw={poolData.content} />
-    </div>
-  );
-});
-GachaPool.displayName = 'GachaPool';

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

@@ -0,0 +1,19 @@
+import { OfficialGachaPoolItem } from 'genshin-gacha-kit';
+import React from 'react';
+
+export const GachaPoolItem: React.FC<{
+  items: OfficialGachaPoolItem[];
+}> = React.memo((props) => {
+  return (
+    <div>
+      {props.items.map((i) => (
+        <div key={i.item_id}>
+          <img src={i.item_img} />
+
+          <div>{i.item_name}</div>
+        </div>
+      ))}
+    </div>
+  );
+});
+GachaPoolItem.displayName = 'GachaPoolItem';

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

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

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

@@ -0,0 +1,63 @@
+import { useAsync } from '@capital/common';
+import { Divider, Button } 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';
+
+export const GachaPool: React.FC<{
+  gachaId: string;
+}> = React.memo((props) => {
+  const { value: poolData } = useAsync(() => {
+    return util.getGachaData(props.gachaId);
+  }, [props.gachaId]);
+  const { handleGacha, gachaResult, gachaCount } = useWish(poolData);
+
+  if (!poolData) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <div>{poolData.banner}</div>
+
+      <div>{poolData.date_range}</div>
+      <div className="gacha-pool">
+        <GachaPoolItem items={poolData.r5_up_items ?? []} />
+        <GachaPoolItem items={poolData.r4_up_items ?? []} />
+      </div>
+
+      <div style={{ display: 'flex', gap: 4 }}>
+        <Button type="primary" onClick={() => handleGacha(1)}>
+          模拟单抽
+        </Button>
+        <Button type="primary" onClick={() => handleGacha(10)}>
+          模拟十连
+        </Button>
+      </div>
+
+      {gachaCount > 0 && (
+        <div>
+          <div>已抽: {gachaCount} 次</div>
+
+          <div>
+            5星: <WishResultText items={gachaResult.ssr} />
+          </div>
+          <div>
+            4星: <WishResultText items={gachaResult.sr} />
+          </div>
+          <div>
+            3星: <WishResultText items={gachaResult.r} />
+          </div>
+        </div>
+      )}
+
+      <Divider />
+
+      <GenshinRichtext raw={poolData.content} />
+    </div>
+  );
+});
+GachaPool.displayName = 'GachaPool';

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

@@ -0,0 +1,49 @@
+import { showToasts } from '@capital/common';
+import {
+  AppWishResult,
+  GenshinGachaKit,
+  OfficialGachaPool,
+  util,
+} from 'genshin-gacha-kit';
+import { useCallback, useMemo, useState } from 'react';
+import { openFullScreenVideo } from '../../utils/openFullScreenVideo';
+import { wishVideoUrl } from '../consts';
+import { parseResultType } from '../utils';
+
+/**
+ * 祈愿
+ * @param poolData 卡池信息
+ */
+export function useWish(poolData: OfficialGachaPool) {
+  const [gachaResult, setGachaResult] = useState<AppWishResult>({
+    ssr: [],
+    sr: [],
+    r: [],
+  });
+  const [gachaCount, setGachaCount] = useState<number>(0);
+
+  const gachaKit = useMemo(() => {
+    return poolData
+      ? new GenshinGachaKit(util.poolStructureConverter(poolData))
+      : null;
+  }, [poolData]);
+  const handleGacha = useCallback(
+    (num) => {
+      if (!gachaKit) {
+        return;
+      }
+
+      const res = gachaKit.multiWish(num);
+
+      openFullScreenVideo(wishVideoUrl[parseResultType(res)]).then(() => {
+        showToasts('抽卡结果: ' + res.map((item) => item.name).join(','));
+
+        setGachaCount(gachaKit.getCounter('total') as number);
+        setGachaResult(JSON.parse(JSON.stringify(gachaKit.getResult())));
+      });
+    },
+    [gachaKit]
+  );
+
+  return { handleGacha, gachaResult, gachaCount };
+}