feat: dropdown menu icon

src/ui/Duel/PlayMat/Card/index.tsx

@@ -21,7 +21,7 @@ import {
   displayOptionModal,
   displaySimpleSelectCardsModal,
 } from "../../Message";
-import { interactTypeToString } from "../../utils";
+import { interactTypeToIcon, interactTypeToString } from "../../utils";
 import styles from "./index.module.scss";
 import {
   attack,
@@ -31,6 +31,7 @@ import {
   type MoveOptions,
 } from "./springs";
 import type { SpringApiProps } from "./springs/types";
+import { IconFont } from "@/ui/Shared";
 
 const { HAND, GRAVE, REMOVED, EXTRA, MZONE, SZONE, TZONE } = ygopro.CardZone;
 
@@ -152,6 +153,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
       ([action, cards], key) => ({
         key,
         label: interactTypeToString(action),
+        icon: interactTypeToIcon(action),
         onClick: async () => {
           if (!isField) {
             // 单卡: 直接召唤/特殊召唤/...
@@ -185,6 +187,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
     const effectItem: DropdownItem = {
       key: nonEffectItem.length,
       label: interactTypeToString(InteractType.ACTIVATE),
+      icon: interactTypeToIcon(InteractType.ACTIVATE),
       onClick: async () => {
         let tmpCard: CardType;
         if (!isField) {

src/ui/Duel/PlayMat/Mat/index.module.scss

 body {
-  background-image: url(/neos-assets/play-mat.png);
+  // background-image: url(/neos-assets/play-mat.png);
   background-repeat: no-repeat;
   background-size: cover;
 }

src/ui/Duel/PlayMat/Menu/index.tsx

@@ -2,7 +2,6 @@ import {
   ArrowRightOutlined,
   CheckOutlined,
   CloseCircleFilled,
-  createFromIconfontCN,
   MessageFilled,
   StepForwardFilled,
 } from "@ant-design/icons";
@@ -26,14 +25,11 @@ import {
   ygopro,
 } from "@/api";
 import { cardStore, ChainSetting, matStore } from "@/stores";
+import { IconFont } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
 
-const IconFont = createFromIconfontCN({
-  scriptUrl: ["//at.alicdn.com/t/c/font_4188978_z6f9ellbtoc.js"],
-});
-
 const { phase } = matStore;
 const { useToken } = theme;
 export const Menu = () => {

src/ui/Duel/utils/index.ts

 export * from "./groupBy";
-export * from "./interactTypeToString";
+export * from "./interactTypeToStringIcon";
 export * from "./zip";

src/ui/Duel/utils/interactTypeToString.ts → src/ui/Duel/utils/interactTypeToStringIcon.tsx

+import { ygopro } from "@/api";
 import { InteractType } from "@/stores";
+import { IconFont } from "@/ui/Shared";
+
+import CardPosition = ygopro.CardPosition;
 
 export function interactTypeToString(t: InteractType): string {
   switch (t) {
@@ -20,3 +24,47 @@ export function interactTypeToString(t: InteractType): string {
       return "未知选项";
   }
 }
+
+const Icon: React.FC<{ type: string; size?: number }> = ({
+  type,
+  size = 24,
+}) => (
+  <IconFont
+    type={type}
+    size={size}
+    style={{
+      width: 24,
+      height: 30,
+      marginRight: 6,
+      justifyContent: "center",
+    }}
+  />
+);
+
+export function interactTypeToIcon(
+  t: InteractType,
+  position?: CardPosition
+): JSX.Element {
+  switch (t) {
+    case InteractType.POS_CHANGE:
+      if (position === CardPosition.FACEDOWN_ATTACK)
+        return <IconFont type="icon-back-defence" />;
+      else if (position === CardPosition.FACEDOWN_DEFENSE)
+        return <IconFont type="icon-back" size={22} />;
+      else if (position === CardPosition.FACEUP_DEFENSE)
+        return <IconFont type="icon-front" size={22} />;
+      return <Icon type="icon-front-defence" />;
+    case InteractType.MSET:
+      return <Icon type="icon-back-defence" />;
+    case InteractType.SSET:
+      return <Icon type="icon-back" size={22} />;
+    case InteractType.ACTIVATE:
+      return <Icon type="icon-activate" />;
+    case InteractType.ATTACK:
+      return <Icon type="icon-attack" size={20} />;
+    case InteractType.SUMMON:
+    case InteractType.SP_SUMMON:
+    default:
+      return <Icon type="icon-summon" size={20} />;
+  }
+}

src/ui/Shared/IconFont.tsx

+import { createFromIconfontCN } from "@ant-design/icons";
+
+const _IconFont = createFromIconfontCN({
+  scriptUrl: ["//at.alicdn.com/t/c/font_4188978_14gvq0ry2bk.js"],
+});
+
+export const IconFont: React.FC<{
+  type: string;
+  size?: number;
+  style?: React.CSSProperties;
+}> = ({ type, size = 14, style }) => (
+  <_IconFont type={type} style={{ ...style, fontSize: size }} />
+);

src/ui/Shared/index.ts

 export * from "./css";
 export * from "./YgoCard";
+export * from "./IconFont";