refactor: fullmodal and portal z-index

web/src/components/FullModal.tsx

@@ -0,0 +1,58 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import _isFunction from 'lodash/isFunction';
+import { Icon } from '@iconify/react';
+import clsx from 'clsx';
+
+/**
+ * 全屏模态框
+ */
+interface FullModalProps {
+  visible?: boolean;
+  onChangeVisible?: (visible: boolean) => void;
+}
+export const FullModal: React.FC<FullModalProps> = React.memo((props) => {
+  const { visible = true, onChangeVisible } = props;
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const handleClose = useCallback(() => {
+    _isFunction(onChangeVisible) && onChangeVisible(false);
+  }, [onChangeVisible]);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.code === 'Escape') {
+        handleClose();
+      }
+    };
+    window.addEventListener('keyup', handler);
+
+    return () => {
+      window.removeEventListener('keyup', handler);
+    };
+  }, [handleClose]);
+
+  return (
+    <div
+      className={clsx(
+        'fixed left-0 right-0 top-0 bottom-0 z-10 bg-gray-800 flex justify-center items-center',
+        {
+          'opacity-0': !visible,
+        }
+      )}
+      ref={ref}
+    >
+      {props.children}
+
+      {_isFunction(onChangeVisible) && (
+        <div
+          className="absolute right-8 top-8 cursor-pointer flex flex-col"
+          onClick={handleClose}
+        >
+          <Icon className="text-2xl" icon="mdi-close" />
+          <span className="text-center mt-0.5 font-bold">ESC</span>
+        </div>
+      )}
+    </div>
+  );
+});
+FullModal.displayName = 'FullModal';

web/src/components/Portal.tsx

@@ -7,7 +7,7 @@ const { PortalHost, PortalRender, add, remove } = buildPortal({
   hostName: 'default',
   eventEmitter,
   // eslint-disable-next-line react/display-name
-  renderManagerView: (children) => <div>{children}</div>,
+  renderManagerView: (children) => <div className="z-10">{children}</div>,
 });
 
 export { PortalHost, PortalRender, add as PortalAdd, remove as PortalRemove };

web/src/routes/Main/Navbar/SettingBtn.tsx

@@ -0,0 +1,23 @@
+import { FullModal } from '@/components/FullModal';
+import { closeModal, openModal } from '@/components/Modal';
+import { Icon } from '@iconify/react';
+import React, { useCallback } from 'react';
+
+export const SettingBtn: React.FC = React.memo(() => {
+  const handleClick = useCallback(() => {
+    const key = openModal(
+      <FullModal onChangeVisible={() => closeModal(key)}>
+        Setting View
+      </FullModal>
+    );
+  }, []);
+
+  return (
+    <Icon
+      className="text-3xl text-white cursor-pointer"
+      icon="mdi-dots-horizontal"
+      onClick={handleClick}
+    />
+  );
+});
+SettingBtn.displayName = 'SettingBtn';

web/src/routes/Main/Navbar/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { t, useAppSelector } from 'tailchat-shared';
-import { Icon } from '@iconify/react';
 import { Avatar } from '@/components/Avatar';
 import { NavbarNavItem } from './NavItem';
 import { GroupNav } from './GroupNav';
 import { MobileMenuBtn } from './MobileMenuBtn';
+import { SettingBtn } from './SettingBtn';
 
 /**
  * 导航栏组件
@@ -30,11 +30,9 @@ export const Navbar: React.FC = React.memo(() => {
 
         <GroupNav />
       </div>
+
       <div>
-        <Icon
-          className="text-3xl text-white cursor-pointer"
-          icon="mdi-dots-horizontal"
-        />
+        <SettingBtn />
       </div>
     </div>
   );