fix: Optimized popups and the search page (#9297)

### What problem does this PR solve?

fix: Optimized popups and the search page #3221 
- Added a new PortalModal component
- Refactored the Modal component, adding show and hide methods to
support popups
- Updated the search page, adding a new query function and optimizing
the search card style
- Localized, added search-related translations

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/ui/modal/modal-manage.tsx

@@ -0,0 +1,102 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { Modal, ModalProps } from './modal';
+
+type PortalModalProps = Omit<ModalProps, 'open' | 'onOpenChange'> & {
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+  container?: HTMLElement;
+  children: ReactNode;
+  [key: string]: any;
+};
+
+const PortalModal = ({
+  visible,
+  onVisibleChange,
+  container,
+  children,
+  ...restProps
+}: PortalModalProps) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted || !visible) return null;
+  console.log('PortalModal:', visible);
+  return createPortal(
+    <Modal open={visible} onOpenChange={onVisibleChange} {...restProps}>
+      {children}
+    </Modal>,
+    container || document.body,
+  );
+};
+
+export const createPortalModal = () => {
+  let container = document.createElement('div');
+  document.body.appendChild(container);
+
+  let currentProps: any = {};
+  let isVisible = false;
+  let root: ReturnType<typeof createRoot> | null = null;
+
+  root = createRoot(container);
+  const destroy = () => {
+    if (root && container) {
+      root.unmount();
+      if (container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+      root = null;
+    }
+    isVisible = false;
+    currentProps = {};
+  };
+  const render = () => {
+    const { onVisibleChange, ...props } = currentProps;
+    const modalParam = {
+      visible: isVisible,
+
+      onVisibleChange: (visible: boolean) => {
+        isVisible = visible;
+        if (onVisibleChange) {
+          onVisibleChange(visible);
+        }
+
+        if (!visible) {
+          render();
+        }
+      },
+      ...props,
+    };
+    root?.render(isVisible ? <PortalModal {...modalParam} /> : null);
+  };
+
+  const show = (props: PortalModalProps) => {
+    if (!container) {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+    }
+    if (!root) {
+      root = createRoot(container);
+    }
+    currentProps = { ...currentProps, ...props };
+    isVisible = true;
+    render();
+  };
+
+  const hide = () => {
+    isVisible = false;
+    render();
+  };
+
+  const update = (props = {}) => {
+    currentProps = { ...currentProps, ...props };
+    render();
+  };
+
+  return { show, hide, update, destroy };
+};

web/src/components/ui/modal/modal.tsx

@@ -1,15 +1,19 @@
 // src/components/ui/modal.tsx
+import { cn } from '@/lib/utils';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Loader, X } from 'lucide-react';
 import { FC, ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { createPortalModal } from './modal-manage';
 
-interface ModalProps {
+export interface ModalProps {
   open: boolean;
   onOpenChange?: (open: boolean) => void;
   title?: ReactNode;
+  titleClassName?: string;
   children: ReactNode;
   footer?: ReactNode;
+  footerClassName?: string;
   showfooter?: boolean;
   className?: string;
   size?: 'small' | 'default' | 'large';
@@ -24,13 +28,19 @@ interface ModalProps {
   onOk?: () => void;
   onCancel?: () => void;
 }
+export interface ModalType extends FC<ModalProps> {
+  show: typeof modalIns.show;
+  hide: typeof modalIns.hide;
+}
 
-export const Modal: FC<ModalProps> = ({
+const Modal: ModalType = ({
   open,
   onOpenChange,
   title,
+  titleClassName,
   children,
   footer,
+  footerClassName,
   showfooter = true,
   className = '',
   size = 'default',
@@ -74,6 +84,7 @@ export const Modal: FC<ModalProps> = ({
   }, [onOpenChange, onOk]);
   const handleChange = (open: boolean) => {
     onOpenChange?.(open);
+    console.log('open', open, onOpenChange);
     if (open) {
       handleOk();
     }
@@ -113,7 +124,12 @@ export const Modal: FC<ModalProps> = ({
       );
     }
     return (
-      <div className="flex items-center justify-end border-t border-border px-6 py-4">
+      <div
+        className={cn(
+          'flex items-center justify-end px-6 py-4',
+          footerClassName,
+        )}
+      >
         {footerTemp}
       </div>
     );
@@ -126,6 +142,7 @@ export const Modal: FC<ModalProps> = ({
     handleCancel,
     handleOk,
     showfooter,
+    footerClassName,
   ]);
   return (
     <DialogPrimitive.Root open={open} onOpenChange={handleChange}>
@@ -139,11 +156,23 @@ export const Modal: FC<ModalProps> = ({
             onClick={(e) => e.stopPropagation()}
           >
             {/* title */}
-            {title && (
-              <div className="flex items-center justify-between border-b border-border px-6 py-4">
-                <DialogPrimitive.Title className="text-lg font-medium text-foreground">
-                  {title}
-                </DialogPrimitive.Title>
+            {(title || closable) && (
+              <div
+                className={cn(
+                  'flex items-center px-6 py-4',
+                  {
+                    'justify-end': closable && !title,
+                    'justify-between': closable && title,
+                    'justify-start': !closable,
+                  },
+                  titleClassName,
+                )}
+              >
+                {title && (
+                  <DialogPrimitive.Title className="text-lg font-medium text-foreground">
+                    {title}
+                  </DialogPrimitive.Title>
+                )}
                 {closable && (
                   <DialogPrimitive.Close asChild>
                     <button
@@ -156,13 +185,9 @@ export const Modal: FC<ModalProps> = ({
                 )}
               </div>
             )}
-            {/* title */}
-            {!title && (
-              <DialogPrimitive.Title className="text-lg font-medium text-foreground"></DialogPrimitive.Title>
-            )}
 
             {/* content */}
-            <div className="p-6 overflow-y-auto max-h-[80vh] focus-visible:!outline-none">
+            <div className="py-2 px-6 overflow-y-auto max-h-[80vh] focus-visible:!outline-none">
               {destroyOnClose && !open ? null : children}
             </div>
 
@@ -175,43 +200,13 @@ export const Modal: FC<ModalProps> = ({
   );
 };
 
-// example usage
-/*
-import { Modal } from '@/components/ui/modal';
+let modalIns = createPortalModal();
+Modal.show = modalIns
+  ? modalIns.show
+  : () => {
+      modalIns = createPortalModal();
+      return modalIns.show;
+    };
+Modal.hide = modalIns.hide;
 
-function Demo() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div>
-      <button onClick={() => setOpen(true)}>open modal</button>
-      
-      <Modal
-        open={open}
-        onOpenChange={setOpen}
-        title="title"
-        footer={
-          <div className="flex gap-2">
-            <button onClick={() => setOpen(false)} className="px-4 py-2 border rounded-md">
-              cancel
-            </button>
-            <button onClick={() => setOpen(false)} className="px-4 py-2 bg-primary text-white rounded-md">
-              ok
-            </button>
-          </div>
-        }
-      >
-        <div className="py-4">弹窗内容区域</div>
-      </Modal>
-      <Modal
-        title={'modal-title'}
-        onOk={handleOk}
-        confirmLoading={loading}
-        destroyOnClose
-      >
-        <div className="py-4">弹窗内容区域</div>
-      </Modal>
-    </div>
-  );
-}
-*/
+export { Modal };