feat: merge alex version

src/routes/users/Search.tsx

@@ -1,30 +1,36 @@
+import { FC, ChangeEvent } from "react";
 import Tippy from "@tippyjs/react";
 import IconSearch from "../../assets/icons/search.svg";
 import IconAdd from "../../assets/icons/add.svg";
-import AddEntriesMenu from "../../common/component/AddEntriesMenu";
-import Tooltip from "../../common/component/Tooltip";
-import { FC, ChangeEvent } from "react";
 import { useTranslation } from "react-i18next";
+import { useAppSelector } from "../../app/store";
+import { compareVersion } from "../../common/utils";
+import Tooltip from "../../common/component/Tooltip";
+import AddEntriesMenu from "../../common/component/AddEntriesMenu";
 type Props = {
   input: string,
+  openModal: () => void,
   updateInput: (input: string) => void
 };
-const Search: FC<Props> = ({ input, updateInput }) => {
+const Search: FC<Props> = ({ input, updateInput, openModal }) => {
+  const serverVersion = useAppSelector(store => store.server.version);
   const { t } = useTranslation();
   const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
     updateInput(evt.target.value);
   };
+  const enableContact = compareVersion(serverVersion, "0.3.7") >= 0;
   return (
+
     <div className="hidden md:flex relative min-h-[56px] px-2 py-3 items-center justify-between gap-2 shadow-[rgb(0_0_0_/_10%)_0px_1px_0px] dark:border-b-gray-500">
       <div className="flex items-center gap-1">
         <IconSearch className="dark:fill-gray-400 w-6 h-6 shrink-0" />
-        <input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm bg-transparent dark:text-gray-50" onChange={handleInput} />
+        <input value={input} placeholder={`${t("action.search")}...`} className="w-full text-sm bg-transparent dark:text-gray-50 outline-none" onChange={handleInput} />
       </div>
-      <Tooltip tip={t("more")} placement="bottom">
+      {enableContact ? <IconAdd onClick={openModal} role="button" className="dark:fill-gray-400" /> : <Tooltip tip={t("more")} placement="bottom">
         <Tippy interactive placement="bottom-end" trigger="click" content={<AddEntriesMenu />}>
           <IconAdd role="button" className="dark:fill-gray-400" />
         </Tippy>
-      </Tooltip>
+      </Tooltip>}
     </div>
   );
 };

src/routes/users/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from "react";
+import { memo, useEffect, useRef, useState } from "react";
 import { NavLink, useParams, useLocation } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { ViewportList } from 'react-viewport-list';
@@ -12,6 +12,7 @@ import BlankPlaceholder from "../../common/component/BlankPlaceholder";
 import useFilteredUsers from "../../common/hook/useFilteredUsers";
 import clsx from "clsx";
 import GoBackNav from "../../common/component/GoBackNav";
+import SearchUser from "../../common/component/SearchUser";
 
 function UsersPage() {
   const ref = useRef<HTMLDivElement | null>(
@@ -19,6 +20,7 @@ function UsersPage() {
   );
   const dispatch = useDispatch();
   const { pathname } = useLocation();
+  const [modalVisible, setModalVisible] = useState(false);
   const { input, updateInput, users } = useFilteredUsers();
   const { user_id } = useParams();
   // 记住路由
@@ -28,7 +30,9 @@ function UsersPage() {
       dispatch(updateRememberedNavs({ key: "user", path: pathname }));
     };
   }, [pathname]);
-
+  const toggleModal = () => {
+    setModalVisible(prev => !prev);
+  };
   if (!users) return null;
   const isUserDetail = !!user_id;
   return (
@@ -36,7 +40,8 @@ function UsersPage() {
       <div className={clsx("md:rounded-l-2xl bg-white dark:bg-gray-800 relative flex flex-col w-full md:w-auto md:min-w-[268px] shadow-[inset_-1px_0px_0px_rgba(0,_0,_0,_0.1)]",
         isUserDetail && "hidden md:flex"
       )}>
-        <Search input={input} updateInput={updateInput} />
+        <Search input={input} updateInput={updateInput} openModal={toggleModal} />
+        {modalVisible && <SearchUser closeModal={toggleModal} />}
         <div className="flex flex-col md:gap-1 px-2 pt-3 pb-20 md:py-3 overflow-scroll" ref={ref}>
           <ViewportList
             viewportRef={ref}