temp

package.json

@@ -15,12 +15,14 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@kevisual/query-login": "^0.0.4",
     "@mui/material": "^7.0.1",
     "re-resizable": "^6.11.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-draggable": "^4.4.6",
-    "react-hook-form": "^7.55.0"
+    "react-hook-form": "^7.55.0",
+    "react-i18next": "^15.4.1"
   },
   "exports": {
     ".": "./src/index.tsx",

src/drag-modal/index.tsx

@@ -11,6 +11,7 @@ type DragModalProps = {
   containerClassName?: string;
   handleClassName?: string;
   contentClassName?: string;
+  focus?: boolean;
   /**
    * 默认大小, 单位为px
    * width: defaultSize.width || 320
@@ -29,7 +30,7 @@ export const DragModal = (props: DragModalProps) => {
     <Draggable
       nodeRef={dragRef as any}
       onStop={(e, data) => {
-        console.log(e, data);
+        // console.log(e, data);
       }}
       handle='.handle'
       grid={[1, 1]}
@@ -40,7 +41,7 @@ export const DragModal = (props: DragModalProps) => {
         y: 0,
       }}>
       <div
-        className={clsxMerge('absolute top-0 left-0 bg-white rounded-md border border-gray-200 shadow-sm', props.containerClassName)}
+        className={clsxMerge('absolute top-0 left-0 bg-white rounded-md border border-gray-200 shadow-sm', props.focus ? 'z-30' : '', props.containerClassName)}
         ref={dragRef}
         style={props.style}>
         <div className={clsxMerge('handle cursor-move border-b border-gray-200 py-2 px-4', props.handleClassName)}>{props.title || 'Move'}</div>
@@ -70,15 +71,28 @@ type DragModalTitleProps = {
   className?: string;
   onClose?: () => void;
   children?: React.ReactNode;
+  onClick?: () => void;
 };
 export const DragModalTitle = (props: DragModalTitleProps) => {
   return (
-    <div className={clsxMerge('flex flex-row items-center justify-between', props.className)}>
+    <div
+      className={clsxMerge('flex flex-row items-center justify-between', props.className)}
+      onClick={(e) => {
+        e.stopPropagation();
+        props.onClick?.();
+      }}>
       <div className='text-sm font-medium text-gray-700'>
         {props.title}
         {props.children}
       </div>
-      <X className='w-4 h-4 text-gray-500 cursor-pointer' onClick={props.onClose} />
+      <div
+        className='text-gray-500 cursor-pointer p-2 hover:bg-gray-100 rounded-md'
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onClose?.();
+        }}>
+        <X className='w-4 h-4 ' />
+      </div>
     </div>
   );
 };

src/theme/Provider.tsx

@@ -1,4 +1,5 @@
 import { ToastContainer } from 'react-toastify';
+import { CustomThemeProvider } from '.';
 
 type ToastProviderProps = {
   children?: React.ReactNode;
@@ -11,3 +12,11 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
     </>
   );
 };
+export const Provider = ({ children }) => {
+  return (
+    <CustomThemeProvider>
+      {children}
+      <ToastProvider />
+    </CustomThemeProvider>
+  );
+};

src/toast/ToastLogin.tsx

@@ -38,5 +38,7 @@ type ToastLoginProps = {
  *      });
  */
 export const toastLogin = (props: ToastLoginProps = {}) => {
-  toast.info(<LoginMessage {...props} />);
+  toast.info(<LoginMessage {...props} />, {
+    autoClose: 5000 * 3,
+  });
 };