Merge branch 'fix/overflow' into 'main'

修复决斗界面中内容太多溢出屏幕的问题

See merge request !308

src/service/duel/selectOption.ts

@@ -3,6 +3,10 @@ import { displayOptionModal } from "@/ui/Duel/Message";
 
 export default async (selectOption: ygopro.StocGameMessage.MsgSelectOption) => {
   const options = selectOption.options;
+  if (options.length === 0) {
+    console.warn("<MsgSelectOption>options is empty.");
+    return;
+  }
   await displayOptionModal(
     fetchStrings(Region.System, 556),
     options.map(({ code, response }) => ({

src/ui/Duel/Message/SelectCardsModal/index.tsx

@@ -7,7 +7,7 @@ import { INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
 import { type CardMeta, Region, type ygopro } from "@/api";
 import { fetchStrings } from "@/api";
 import { CardType, isMe, matStore } from "@/stores";
-import { YgoCard } from "@/ui/Shared";
+import { ScrollableArea, YgoCard } from "@/ui/Shared";
 
 import { groupBy } from "../../utils";
 import { showCardModal } from "../CardModal";
@@ -147,6 +147,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
           selectedZone={selectedZone}
           onChange={setSelectedZone as any}
         />
+        <ScrollableArea maxHeight="50vh">
           {grouped.map(
             (options, i) =>
               options[0] === selectedZone && (
@@ -167,7 +168,11 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
                     className={styles["check-group"]}
                   >
                     {options[1].map((card, j) => (
-                    <Tooltip title={card.effectDesc} placement="bottom" key={j}>
+                      <Tooltip
+                        title={card.effectDesc}
+                        placement="bottom"
+                        key={j}
+                      >
                         {/* 这儿必须有一个div，不然tooltip不生效 */}
                         <div>
                           <CheckCard
@@ -194,6 +199,7 @@ export const SelectCardsModal: React.FC<SelectCardsModalProps> = ({
                 </div>
               ),
           )}
+        </ScrollableArea>
         <p>
           <span>
             {/* TODO: 这里的字体可以调整下 */}

src/ui/Shared/Scrollbar/index.tsx

@@ -16,8 +16,13 @@ export const ScrollableArea = forwardRef<
     elementProps?: React.HTMLAttributes<HTMLElement>;
     className?: string;
     style?: React.CSSProperties;
+    maxHeight?: string; // 如果不指定，默认"100%"
   }>
->(({ scrollProps = {}, elementProps, className, style, children }, ref) => {
+>(
+  (
+    { scrollProps = {}, elementProps, className, style, children, maxHeight },
+    ref,
+  ) => {
     const { options = {}, ...rest } = scrollProps;
 
     return (
@@ -36,6 +41,7 @@ export const ScrollableArea = forwardRef<
         defer
         style={{
           height: "100%",
+          maxHeight: maxHeight ?? "100%",
         }}
         {...rest}
         ref={ref}
@@ -45,4 +51,5 @@ export const ScrollableArea = forwardRef<
         </div>
       </OverlayScrollbarsComponent>
     );
-});
+  },
+);