列表不会带动搜索框转

2025-11-23 12:34:18 +08:00
parent 2cf9a20910
commit f13623f4fc
2 changed files with 90 additions and 75 deletions
--- a/client/ui/main/ContactsList.tsx
+++ b/client/ui/main/ContactsList.tsx
@@ -7,6 +7,7 @@ import data from "../../Data.ts"
 import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
 import Chat from "../../api/client_data/Chat.ts"
 import EventBus from "../../EventBus.ts"
+import isMobileUI from "../isMobileUI.ts";

 interface Args extends React.HTMLAttributes<HTMLElement> {
    display: boolean
@@ -14,6 +15,7 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
    addContactDialogRef: React.MutableRefObject<Dialog>
    createGroupDialogRef: React.MutableRefObject<Dialog>
    setSharedFavouriteChats: React.Dispatch<React.SetStateAction<Chat[]>>
+    currentChatId: string
 }

 export default function ContactsList({
@@ -22,6 +24,7 @@ export default function ContactsList({
    addContactDialogRef,
    createGroupDialogRef,
    setSharedFavouriteChats,
+    currentChatId,
    ...props
 }: Args) {
    const searchRef = React.useRef<HTMLElement>(null)
@@ -63,80 +66,84 @@ export default function ContactsList({
        height: '100%',
        width: '100%',
    }} {...props}>
-        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
-            marginTop: '5px',
-        }}></mdui-text-field>
-
-        <mdui-list-item rounded style={{
-            width: '100%',
-            marginTop: '13px',
-        }} icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加对话</mdui-list-item>
-        <mdui-list-item rounded style={{
-            width: '100%',
-        }} icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}>创建群组</mdui-list-item>
-        <mdui-list-item rounded style={{
-            width: '100%',
-            marginTop: '13px',
-        }} icon="refresh" onClick={() => EventBus.emit('ContactsList.updateContacts')}>刷新</mdui-list-item>
-        <mdui-list-item rounded style={{
-            width: '100%',
-        }} icon={isMultiSelecting ? "done" : "edit"} onClick={() => {
-            if (isMultiSelecting)
-                setCheckedList({})
-            setIsMultiSelecting(!isMultiSelecting)
-        }}>{isMultiSelecting ? "关闭多选" : "多选模式"}</mdui-list-item>
-        {
-            isMultiSelecting && <>
-                <mdui-list-item rounded style={{
-                    width: '100%',
-                }} icon="delete" onClick={() => dialog({
-                    headline: "删除所选",
-                    description: "确定要删除所选的收藏对话吗? 这并不会删除您的聊天记录, 也不会丢失对话成员身份",
-                    actions: [
-                        {
-                            text: "取消",
-                            onClick: () => {
-                                return true
-                            },
-                        },
-                        {
-                            text: "确定",
-                            onClick: async () => {
-                                const ls = Object.keys(checkedList).filter((chatId) => checkedList[chatId] == true)
-                                const re = await Client.invoke("User.removeContacts", {
-                                    token: data.access_token,
-                                    targets: ls,
-                                })
-                                if (re.code != 200)
-                                    checkApiSuccessOrSncakbar(re, "删除所选收藏失败")
-                                else {
-                                    setCheckedList({})
-                                    setIsMultiSelecting(false)
-                                    EventBus.emit('ContactsList.updateContacts')
-                                    snackbar({
-                                        message: "已删除所选",
-                                        placement: "top",
-                                        action: "撤销操作",
-                                        onActionClick: async () => {
-                                            const re = await Client.invoke("User.addContacts", {
-                                                token: data.access_token,
-                                                targets: ls,
-                                            })
-                                            if (re.code != 200)
-                                                checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
-                                            EventBus.emit('ContactsList.updateContacts')
-                                        }
-                                    })
-                                }
-                            },
-                        }
-                    ],
-                })}>删除所选</mdui-list-item>
-            </>
-        }
        <div style={{
-            height: "15px",
-        }}></div>
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgb(var(--mdui-color-background))',
+            zIndex: '10',
+        }}>
+            <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
+                marginTop: '5px',
+            }}></mdui-text-field>
+            <mdui-list-item rounded style={{
+                marginTop: '13px',
+                width: '100%',
+            }} icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加收藏对话</mdui-list-item>
+            <mdui-list-item rounded style={{
+                width: '100%',
+            }} icon="refresh" onClick={() => EventBus.emit('ContactsList.updateContacts')}>刷新</mdui-list-item>
+            <mdui-list-item rounded style={{
+                width: '100%',
+            }} icon={isMultiSelecting ? "done" : "edit"} onClick={() => {
+                if (isMultiSelecting)
+                    setCheckedList({})
+                setIsMultiSelecting(!isMultiSelecting)
+            }}>{isMultiSelecting ? "关闭多选" : "多选模式"}</mdui-list-item>
+            {
+                isMultiSelecting && <>
+                    <mdui-list-item rounded style={{
+                        width: '100%',
+                    }} icon="delete" onClick={() => dialog({
+                        headline: "删除所选",
+                        description: "确定要删除所选的收藏对话吗? 这并不会删除您的聊天记录, 也不会丢失对话成员身份",
+                        closeOnEsc: true,
+                        closeOnOverlayClick: true,
+                        actions: [
+                            {
+                                text: "取消",
+                                onClick: () => {
+                                    return true
+                                },
+                            },
+                            {
+                                text: "确定",
+                                onClick: async () => {
+                                    const ls = Object.keys(checkedList).filter((chatId) => checkedList[chatId] == true)
+                                    const re = await Client.invoke("User.removeContacts", {
+                                        token: data.access_token,
+                                        targets: ls,
+                                    })
+                                    if (re.code != 200)
+                                        checkApiSuccessOrSncakbar(re, "删除所选收藏失败")
+                                    else {
+                                        setCheckedList({})
+                                        setIsMultiSelecting(false)
+                                        EventBus.emit('ContactsList.updateContacts')
+                                        snackbar({
+                                            message: "已删除所选",
+                                            placement: "top",
+                                            action: "撤销操作",
+                                            onActionClick: async () => {
+                                                const re = await Client.invoke("User.addContacts", {
+                                                    token: data.access_token,
+                                                    targets: ls,
+                                                })
+                                                if (re.code != 200)
+                                                    checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
+                                                EventBus.emit('ContactsList.updateContacts')
+                                            }
+                                        })
+                                    }
+                                },
+                            }
+                        ],
+                    })}>删除所选</mdui-list-item>
+                </>
+            }
+            <div style={{
+                height: "15px",
+            }}></div>
+        </div>

        {
            contactsList.filter((chat) =>
@@ -145,7 +152,7 @@ export default function ContactsList({
                chat.id.includes(searchText)
            ).map((v) =>
                <ContactsListItem
-                    active={checkedList[v.id] == true}
+                    active={isMultiSelecting ? checkedList[v.id] == true : (isMobileUI() ? false : currentChatId == v.id)}
                    onClick={() => {
                        if (isMultiSelecting)
                            setCheckedList({
--- a/client/ui/main/RecentsList.tsx
+++ b/client/ui/main/RecentsList.tsx
@@ -44,7 +44,11 @@ export default function RecentsList({
        }
        updateRecents()
        EventBus.on('RecentsList.updateRecents', () => updateRecents())
-        setTimeout(() => updateRecents(), 15 * 1000)
+        const id = setInterval(() => updateRecents(), 15 * 1000)
+        return () => {
+            EventBus.off('RecentsList.updateRecents')
+            clearInterval(id)
+        }
    })

    return <mdui-list style={{
@@ -58,6 +62,10 @@ export default function RecentsList({
        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
            marginTop: '5px',
            marginBottom: '13px',
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgb(var(--mdui-color-background))',
+            zIndex: '10',
        }}></mdui-text-field>
        {
            recentsList.filter((chat) =>