refactor(client): 侧边列表重构

2025-12-07 00:36:51 +08:00
parent 07bc4a6654
commit 4788434445
7 changed files with 424 additions and 2 deletions
--- a/client/ui/main-page/RecentsList.tsx
+++ b/client/ui/main-page/RecentsList.tsx
@@ -0,0 +1,86 @@
+import { TextField } from "mdui"
+import RecentChat from "../../api/client_data/RecentChat.ts"
+import useEventListener from "../useEventListener.ts"
+import RecentsListItem from "./RecentsListItem.tsx"
+import React from "react"
+import useAsyncEffect from "../useAsyncEffect.ts"
+import Client from "../../api/Client.ts"
+import { checkApiSuccessOrSncakbar } from "../snackbar.ts";
+import data from "../../Data.ts";
+import EventBus from "../../EventBus.ts";
+import isMobileUI from "../isMobileUI.ts";
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    display: boolean
+    currentChatId: string
+    openChatFragment: (id: string) => void
+}
+
+export default function RecentsList({
+    currentChatId,
+    display,
+    openChatFragment,
+    ...props
+}: Args) {
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [searchText, setSearchText] = React.useState('')
+    const [recentsList, setRecentsList] = React.useState<RecentChat[]>([])
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
+    useAsyncEffect(async () => {
+        async function updateRecents() {
+            const re = await Client.invoke("User.getMyRecentChats", {
+                token: data.access_token,
+            })
+            if (re.code != 200) {
+                if (re.code != 401 && re.code != 400) checkApiSuccessOrSncakbar(re, "获取最近对话列表失败")
+                return
+            }
+
+            setRecentsList(re.data!.recent_chats as RecentChat[])
+        }
+        updateRecents()
+        EventBus.on('RecentsList.updateRecents', () => updateRecents())
+        const id = setInterval(() => updateRecents(), 15 * 1000)
+        return () => {
+            EventBus.off('RecentsList.updateRecents')
+            clearInterval(id)
+        }
+    })
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        paddingLeft: '10px',
+        paddingTop: '0',
+        display: display ? undefined : 'none',
+        height: '100%',
+        width: '100%',
+    }} {...props}>
+        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
+            paddingTop: '12px',
+            marginBottom: '13px',
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgb(var(--mdui-color-background))',
+            zIndex: '10',
+        }}></mdui-text-field>
+        {
+            recentsList.filter((chat) =>
+                searchText == '' ||
+                chat.title.includes(searchText) ||
+                chat.id.includes(searchText) ||
+                chat.content.includes(searchText)
+            ).map((v) =>
+                <RecentsListItem
+                    active={isMobileUI() ? false : currentChatId == v.id}
+                    openChatFragment={() => openChatFragment(v.id)}
+                    key={v.id}
+                    recentChat={v} />
+            )
+        }
+    </mdui-list>
+}