feat: small

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

@@ -17,6 +17,7 @@ const Content: ReactFcWithOnResult<Props, Result> = ({ msg, onResult }) => {
   return (
     <>
       <Title>{`${preHintMsg} ${msg}`}</Title>
+      <div style={{ height: 40 }}></div>
       <Footer>
         <Button onClick={() => onResult({ isOk: false })}>取消</Button>
         <Button type="primary" onClick={() => onResult({ isOk: true })}>

src/ui/Shared/Modal/index.module.scss

@@ -7,3 +7,27 @@
   justify-content: flex-end;
   gap: 12px;
 }
+
+.modal {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0 !important;
+  bottom: 0 !important;
+  top: -webkit-fill-available;
+  margin: auto;
+  height: fit-content;
+  transition: top 0.3s;
+}
+
+.mini {
+  top: 100% !important;
+  bottom: 0 !important;
+  transform: translateY(calc(50% - 66px));
+}
+
+.btn-minimize {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}

src/ui/Shared/Modal/index.tsx

-import { App } from "antd";
+import { App, Button } from "antd";
 import type { ModalFunc } from "antd/es/modal/confirm";
-
+import { MinusOutlined, UpOutlined } from "@ant-design/icons";
 import styles from "./index.module.scss";
-
+import classNames from "classnames";
+import { proxy } from "valtio";
+import { cloneElement, createElement, useState } from "react";
+/** 挂到某个节点去，在全局添加这几个静态方法 */
 export const ModalContext: React.FC = () => {
   const { message, notification, modal } = App.useApp();
   window.message = message;
@@ -31,7 +34,7 @@ export const Footer: React.FC<React.PropsWithChildren> = ({ children }) => (
  * 目的是通过传入不同的 Content 组件和配置选项，生成不同类型的弹窗，并在弹窗的 Content 中处理回调，最终返回一个 Promise 来处理弹窗的结果。
  */
 export const genModal = <Props extends {}, Result extends {}>({
-  Content,
+  Content: _Content,
   type = "confirm",
   ...rest
 }: {
@@ -43,19 +46,72 @@ export const genModal = <Props extends {}, Result extends {}>({
 >) => {
   return (props: Props) =>
     new Promise<Result>((rs) => {
-      const { destroy } = modal[type]({
+      let isMini = proxy({ value: false });
+      const getClassNames = () =>
+        classNames(styles.modal, {
+          [styles.mini]: isMini.value,
+        });
+      // const Content = ContentWrap(_Content);
+      const BtnMini = () => (
+        <Button
+          icon={<MinusOutlined />}
+          onClick={function () {
+            isMini.value = !isMini.value;
+            update({ className: getClassNames(), title: BtnMax() });
+          }}
+        />
+      );
+      const BtnMax = () => (
+        <Button
+          icon={<UpOutlined />}
+          onClick={function () {
+            isMini.value = !isMini.value;
+            update({ className: getClassNames(), title: BtnMini() });
+          }}
+        />
+      );
+      const genMinimizeBtn = () => (
+        <Button
+          className={styles["btn-minimize"]}
+          type="text"
+          // size={16}
+          icon={isMini.value ? <UpOutlined /> : <MinusOutlined />}
+          onClick={() => {
+            isMini.value = !isMini.value;
+            update({ className: getClassNames(), title: genMinimizeBtn() });
+          }}
+        />
+      );
+      const { destroy, update } = modal[type]({
         content: (
-          <Content
+          <div>
+            <_Content
               onResult={(result) => {
                 rs(result);
                 destroy();
               }}
               {...props}
             />
+          </div>
         ),
+        icon: null,
+        title: genMinimizeBtn(),
         footer: null,
         centered: true,
+        className: getClassNames(),
+        onCancel: () => false,
         ...rest,
       });
     });
 };
+
+function ContentWrap<P extends {}>(ChildrenComponent: React.ComponentType<P>) {
+  return (props: P & { toggleMini: () => void; isMini: boolean }) => {
+    return (
+      <>
+        <Button onClick={props.toggleMini} icon={props.isMini ? "a" : "b"} />
+        <ChildrenComponent {...props} />
+      </>
+    );
+  };
+}