feat: small

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

@@ -11,3 +11,7 @@
   border-radius: 6px;
   overflow: hidden;
 }
+
+:global(.ant-dropdown-menu-item) {
+  gap: 8px;
+}

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

@@ -2,8 +2,8 @@ import {
   ArrowRightOutlined,
   CheckOutlined,
   CloseCircleFilled,
+  createFromIconfontCN,
   MessageFilled,
-  SettingOutlined,
   StepForwardFilled,
 } from "@ant-design/icons";
 import {
@@ -25,11 +25,15 @@ import {
   sendSurrender,
   ygopro,
 } from "@/api";
-import { cardStore, matStore } from "@/stores";
+import { cardStore, ChainSetting, matStore } from "@/stores";
 
 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 = () => {
@@ -38,8 +42,7 @@ export const Menu = () => {
   const enableBp = snapPhase.enableBp;
   const enableM2 = snapPhase.enableM2;
   const enableEp = snapPhase.enableEp;
-  const { currentPlayer } = useSnapshot(matStore);
-  const { chainSetting } = useSnapshot(matStore);
+  const { currentPlayer, chainSetting } = useSnapshot(matStore);
 
   const clearAllIdleInteractivities = () => {
     for (const card of cardStore.inner) {
@@ -110,15 +113,21 @@ export const Menu = () => {
       danger: phase === PhaseType.END,
     }));
 
-  const chainSettingTexts = ["全部连锁", "忽略连锁", "智能连锁"];
-  const chainSettingItems: MenuProps["items"] = chainSettingTexts
-    .map((text, i) => ({
+  const chainSettingTexts = [
+    [ChainSetting.CHAIN_ALL, "全部连锁"],
+    [ChainSetting.CHAIN_IGNORE, "忽略连锁"],
+    [ChainSetting.CHAIN_SMART, "智能连锁"],
+  ] as const;
+  const chainSettingItems: MenuProps["items"] = chainSettingTexts.map(
+    ([key, text]) => ({
       label: text,
+      icon: <ChainIcon chainSetting={key} />,
+      key,
       onClick: () => {
-        matStore.chainSetting = i;
+        matStore.chainSetting = key;
       },
-    }))
-    .map((item, i) => ({ key: i, ...item }));
+    })
+  );
 
   const surrenderMenuItems: MenuProps["items"] = [
     {
@@ -148,14 +157,14 @@ export const Menu = () => {
         </Button>
       </DropdownWithTitle>
       <DropdownWithTitle
-        title={chainSettingTexts[chainSetting]}
         menu={{
           items: chainSettingItems,
-          selectable: true,
-          defaultSelectedKeys: ["3"],
         }}
       >
-        <Button icon={<SettingOutlined />} type="text"></Button>
+        <Button
+          icon={<ChainIcon chainSetting={chainSetting} />}
+          type="text"
+        ></Button>
       </DropdownWithTitle>
       <Tooltip title="聊天室">
         <Button icon={<MessageFilled />} type="text"></Button>
@@ -170,7 +179,7 @@ export const Menu = () => {
   );
 };
 
-const DropdownWithTitle: React.FC<DropdownProps & { title: string }> = (
+const DropdownWithTitle: React.FC<DropdownProps & { title?: string }> = (
   props
 ) => {
   const { token } = useToken();
@@ -187,17 +196,37 @@ const DropdownWithTitle: React.FC<DropdownProps & { title: string }> = (
       {...props}
       dropdownRender={(menu) => (
         <div style={contentStyle}>
-          <Space style={{ padding: "12px 16px" }}>{props.title}</Space>
-          <Divider style={{ margin: 0 }} />
+          {props.title && (
+            <>
+              <Space style={{ padding: "12px 16px", fontSize: 12 }}>
+                {props.title}
+              </Space>
+              <Divider style={{ margin: 0 }} />
+            </>
+          )}
           {cloneElement(menu as React.ReactElement, {
             style: menuStyle,
           })}
         </div>
       )}
       arrow
-      trigger={["click", "hover"]}
+      trigger={["click"]}
     >
       {props.children}
     </Dropdown>
   );
 };
+
+const ChainIcon: React.FC<{ chainSetting: ChainSetting }> = ({
+  chainSetting,
+}) => {
+  switch (chainSetting) {
+    case ChainSetting.CHAIN_ALL:
+      return <IconFont type="icon-chain-all" />;
+    case ChainSetting.CHAIN_SMART:
+      return <IconFont type="icon-chain" />;
+    case ChainSetting.CHAIN_IGNORE:
+    default:
+      return <IconFont type="icon-chain-broken" />;
+  }
+};

src/ui/Start/index.module.scss

 body {
   background: #0f131e;
-  text-align: center;
   position: relative;
   margin: 0;
   padding: 0;
@@ -13,6 +12,7 @@ body * {
 
 .wrapper {
   position: relative;
+  text-align: center;
 }
 
 .wrapper > * {