优化搜索会话

src/views/Conversations/Components/ConversationsList.jsx

@@ -19,14 +19,16 @@ const Conversations = () => {
   const userId = useAuthStore((state) => state.loginUser.userId);
   const initialState = useConversationStore((state) => state.initialState);
   const activeConversations = useConversationStore((state) => state.activeConversations);
-  const currentConversation = useConversationStore((state) => state.currentConversation);
+  const [currentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation]);
   const conversationsList = useConversationStore((state) => state.conversationsList);
   const addToConversationList = useConversationStore((state) => state.addToConversationList);
   const delConversationitem = useConversationStore((state) => state.delConversationitem);
-  const setCurrentConversation = useConversationStore((state) => state.setCurrentConversation);
   const receivedMessageList = useConversationStore((state) => state.receivedMessageList);
   const setMsgLoading = useConversationStore((state) => state.setMsgLoading);
 
+  const [tabSelectedConversation, setTabSelectedConversation] = useState({});
+  const [tabCnt, setTabCnt] = useState(-1);
+
   const [dataSource, setDataSource] = useState(conversationsList);
   useEffect(() => {
     setDataSource(conversationsList);
@@ -137,11 +139,23 @@ const Conversations = () => {
           onChange={(e) => {
             setSearchContent(e.target.value);
             handleSearchConversations(e.target.value);
+            setTabCnt(-1);
+            setTabSelectedConversation({});
+          }}
+          onKeyDown={e => {
+            if (e.key === 'Tab') {
+              e.preventDefault();
+              const _this = tabCnt >= dataSource.length-1 ? 0 : tabCnt + 1
+              setTabCnt(_this);
+              setTabSelectedConversation(dataSource[_this]);
+            }
           }}
           onPressEnter={(e) => {
             handleSearchConversations(e.target.value);
             searchInputRef.current.blur();
-            onSwitchConversation(dataSource[0]);
+            onSwitchConversation(dataSource[(tabCnt < 0 ? 0 : tabCnt)]);
+            setTabCnt(-1);
+            setTabSelectedConversation({});
             return false;
           }}
           placeholder='搜索名称'
@@ -176,7 +190,9 @@ const Conversations = () => {
               date={item.last_received_time}
               unread={item.unread_msg_count}
               className={
-                String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : ''
+                [String(item.sn) === String(currentConversation.sn) ? '__active text-primary border-y-0 border-e-0 border-s-4 border-solid border-whatsapp-bg bg-whatsapp-bg' : '',
+                String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : ''
+              ].join(' ')
               }
               onClick={() => onSwitchConversation(item)}
             />