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 };
+};