fix: diasbled block style

src/ui/Duel/PlayMat/Bg/index.scss

@@ -18,9 +18,7 @@ section#mat {
   .block {
     height: var(--block-height-m);
     width: var(--block-width);
-    // background-color: rgba(128, 128, 128, 0.447);
     background: radial-gradient(#1d1d1d, #222);
-    // box-shadow: 0 0 0 1px purple;
     position: relative;
     &.extra {
       margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
@@ -29,8 +27,6 @@ section#mat {
       height: var(--block-height-s);
     }
     &.highlight {
-      // box-shadow: 0 0 0 1px #00b0ff, 0 0 13px 0px #0077ff,
-      //   0 0 11px 0 skyblue inset;
       background: #102639;
       cursor: pointer;
       // animation: blink 1s linear infinite alternate;
@@ -72,3 +68,32 @@ section#mat {
     }
   }
 }
+
+// 被禁用的样式
+.disabled-cross {
+  width: 100%;
+  height: 100%;
+  cursor: not-allowed;
+  background: linear-gradient(
+      to top right,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) calc(50% - 1.5px),
+      red 50%,
+      rgba(0, 0, 0, 0) calc(50% + 1.5px),
+      rgba(0, 0, 0, 0) 100%
+    ),
+    linear-gradient(
+      to bottom right,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) calc(50% - 1.5px),
+      red 50%,
+      rgba(0, 0, 0, 0) calc(50% + 1.5px),
+      rgba(0, 0, 0, 0) 100%
+    );
+  display: none;
+}
+.block.disabled {
+  .disabled-cross {
+    display: block;
+  }
+}

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

 import "./index.scss";
 
 import classnames from "classnames";
-import { type CSSProperties } from "react";
 import { type INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
 
 import { sendSelectPlaceResponse, ygopro } from "@/api";
@@ -12,25 +11,6 @@ import {
   placeStore,
 } from "@/stores";
 
-// Block被禁用的样式
-const BgDisabledStyle = {
-  background: `linear-gradient(
-      to top right,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) calc(50% - 1.5px),
-      red 50%,
-      rgba(0, 0, 0, 0) calc(50% + 1.5px),
-      rgba(0, 0, 0, 0) 100%
-    ), linear-gradient(
-      to bottom right,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) calc(50% - 1.5px),
-      red 50%,
-      rgba(0, 0, 0, 0) calc(50% + 1.5px),
-      rgba(0, 0, 0, 0) 100%
-    )`,
-};
-
 const BgExtraRow: React.FC<{
   meSnap: Snapshot<BlockState[]>;
   opSnap: Snapshot<BlockState[]>;
@@ -42,18 +22,15 @@ const BgExtraRow: React.FC<{
           key={i}
           className={classnames("block", "extra", {
             highlight: !!meSnap[i].interactivity || !!opSnap[i].interactivity,
+            disabled: meSnap[i].disabled || opSnap[i].disabled,
           })}
-          style={
-            meSnap[i].disabled || opSnap[i].disabled
-              ? (BgDisabledStyle as CSSProperties)
-              : {}
-          }
           onClick={() => {
             onBlockClick(meSnap[i].interactivity);
             onBlockClick(opSnap[i].interactivity);
           }}
         >
           {<DecoTriangles />}
+          {<DisabledCross />}
         </div>
       ))}
     </div>
@@ -72,11 +49,12 @@ const BgRow: React.FC<{
         className={classnames("block", {
           szone: isSzone,
           highlight: !!snap[i].interactivity,
+          disabled: snap[i].disabled,
         })}
-        style={snap[i].disabled ? (BgDisabledStyle as CSSProperties) : {}}
         onClick={() => onBlockClick(snap[i].interactivity)}
       >
         {<DecoTriangles />}
+        {<DisabledCross />}
       </div>
     ))}
   </div>
@@ -113,3 +91,5 @@ const DecoTriangles: React.FC = () => (
     ))}
   </>
 );
+
+const DisabledCross: React.FC = () => <div className="disabled-cross"></div>;