(WIP) 重构客户端

client-protocol/Chat.ts

@@ -19,6 +19,11 @@ export default class Chat extends BaseClientObject {
      *                    实例化方法
      * ================================================
      */
+    static getForInvokeOnlyById(client: LingChairClient, id: string) {
+        return new Chat(client, {
+            id
+        } as ChatBean)
+    }
     static async getById(client: LingChairClient, id: string) {
         try {
             return await this.getByIdOrThrow(client, id)

client-protocol/User.ts

@@ -14,10 +14,15 @@ export default class User extends BaseClientObject {
      *                    实例化方法
      * ================================================
      */
+    static getForInvokeOnlyById(client: LingChairClient, id: string) {
+        return new User(client, {
+            id
+        } as UserBean)
+    }
     static async getById(client: LingChairClient, id: string) {
         try {
             return await this.getByIdOrThrow(client, id)
-        } catch(_) {
+        } catch (_) {
             return null
         }
     }

client-protocol/UserMySelf.ts

@@ -156,7 +156,7 @@ export default class UserMySelf extends User {
             token: this.client.access_token
         })
         if (re.code == 200)
-            return re.data!.recent_chats as ChatBean[]
+            return (re.data!.favourite_chats || re.data!.contacts_list) as ChatBean[]
         throw new CallbackError(re)
     }
     async getMyFavouriteChats() {

client/ClientCache.ts

@@ -0,0 +1,23 @@
+import { Chat, User } from "lingchair-client-protocol"
+import getClient from "./getClient"
+
+type CouldCached = User | Chat | null
+export default class ClientCache {
+    static caches: { [key: string]: CouldCached } = {}
+    
+    static async getUser(id: string) {
+        const k = 'user_' + id
+        if (this.caches[k] != null)
+            return this.caches[k] as User | null
+        this.caches[k] = await User.getById(getClient(), id)
+        return this.caches[k]
+    }
+
+    static async getChat(id: string) {
+        const k = 'chat_' + id
+        if (this.caches[k] != null)
+            return this.caches[k] as Chat | null
+        this.caches[k] = await Chat.getById(getClient(), id)
+        return this.caches[k]
+    }
+}

client/data.ts

@@ -28,10 +28,13 @@ const key = crypto.createHash('sha256').update(location.host + '_TWS_姐姐_' +
 
 if (dataIsEmpty) localStorage.tws_data = Aes.encrypt('{}', key)
 
-let _dec = Aes.decrypt(localStorage.tws_data, key)
-if (_dec == '') _dec = '{}'
-
-const _data_cached = JSON.parse(_dec)
+let _data_cached
+try {
+    _data_cached = JSON.parse(Aes.decrypt(localStorage.tws_data, key))
+} catch (e) {
+    console.warn("数据解密失败, 使用空数据...", e)
+    _data_cached = {}
+}
 
 type IData = {
     refresh_token?: string

client/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="mdui/jsx.zh-cn.d.ts" />
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string
+declare const __GIT_HASH__: string
+declare const __GIT_HASH_FULL__: string
+declare const __GIT_BRANCH__: string
+declare const __BUILD_TIME__: string

client/getClient.ts

@@ -13,11 +13,6 @@ const client = new LingChairClient({
     device_id: data.device_id,
     auto_fresh_token: true,
 })
-try {
-    await performAuth({})
-} catch (_) {
-    console.log(_)
-}
 
 export default function getClient() {
     return client

client/init.ts

@@ -2,7 +2,7 @@ import 'mdui/mdui.css'
 import 'mdui'
 import { breakpoint } from "mdui"
 
-import './mdui.d.ts'
+import './env.d.ts'
 
 import * as React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -16,6 +16,14 @@ import './ui/chat-elements/chat-text-container.ts'
 import './ui/chat-elements/chat-quote.ts'
 import Main from "./ui/Main.tsx"
 
+import performAuth from './performAuth.ts'
+
+try {
+    await performAuth({})
+} catch (e) {
+    console.log("验证失败", e)
+}
+
 ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(React.createElement(Main))
 
 const onResize = () => {

client/mdui.d.ts

@@ -1 +0,0 @@
-/// <reference types="mdui/jsx.zh-cn.d.ts" />

client/package.json

@@ -1,6 +1,7 @@
 {
     "name": "lingchair-client",
     "type": "module",
+    "version": "0.1.0-alpha",
     "scripts": {
         "build": "npx vite build",
         "build-watch": "npx vite --watch build"
@@ -16,7 +17,8 @@
         "react-router": "7.10.1",
         "socket.io-client": "4.8.1",
         "split.js": "1.3.2",
-        "ua-parser-js": "2.0.6"
+        "ua-parser-js": "2.0.6",
+        "use-context-selector": "2.0.0"
     },
     "devDependencies": {
         "@rollup/wasm-node": "4.48.0",

client/style.css

@@ -67,3 +67,7 @@ html {
 .gutter.gutter-horizontal {
   cursor: col-resize;
 }
+
+a {
+  color: rgb(var(--mdui-color-primary));
+}

client/ui/Avatar.tsx

@@ -12,9 +12,9 @@ export default function Avatar({
     avatarRef,
     ...props
 }: Args) {
-    if (src != null)
+    if (src != null && src != '')
         return <mdui-avatar ref={avatarRef} {...props} src={src} />
-    else if (text != null)
+    else if (text != null && text != '')
         return <mdui-avatar ref={avatarRef} {...props}>
             {
                 text.substring(0, 1)

client/ui/AvatarMySelf.tsx

@@ -3,6 +3,7 @@ import useAsyncEffect from "../utils/useAsyncEffect.ts"
 import Avatar from "./Avatar.tsx"
 import getClient from "../getClient.ts"
 import React from "react"
+import sleep from "../utils/sleep.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     avatarRef?: React.LegacyRef<HTMLElement>
@@ -21,6 +22,7 @@ export default function AvatarMySelf({
     })
 
     useAsyncEffect(async () => {
+        await sleep(200)
         const mySelf = await UserMySelf.getMySelfOrThrow(getClient())
         setArgs({
             text: mySelf.getNickName(),
@@ -28,5 +30,5 @@ export default function AvatarMySelf({
         })
     })
 
-    return <Avatar avatarRef={avatarRef} {...props} {...args}></Avatar>
+    return <Avatar avatarRef={avatarRef} {...props} text={args.text} src={args.src}></Avatar>
 }

client/ui/Main.tsx

@@ -3,16 +3,26 @@ import useEventListener from "../utils/useEventListener.ts"
 import AvatarMySelf from "./AvatarMySelf.tsx"
 import MainSharedContext from './MainSharedContext.ts'
 import * as React from 'react'
-import { BrowserRouter, Outlet, Route, Routes } from "react-router"
+import { BrowserRouter, Link, Outlet, Route, Routes } from "react-router"
 import LoginDialog from "./main-page/LoginDialog.tsx"
 import useAsyncEffect from "../utils/useAsyncEffect.ts"
 import performAuth from "../performAuth.ts"
-import { CallbackError } from "lingchair-client-protocol"
+import { CallbackError, Chat, UserMySelf } from "lingchair-client-protocol"
 import showCircleProgressDialog from "./showCircleProgressDialog.ts"
 import RegisterDialog from "./main-page/RegisterDialog.tsx"
 import sleep from "../utils/sleep.ts"
+import { $, NavigationDrawer } from "mdui"
+import getClient from "../getClient.ts"
+import showSnackbar from "../utils/showSnackbar.ts"
+import AllChatsList from "./main-page/AllChatsList.tsx"
+import FavouriteChatsList from "./main-page/FavouriteChatsList.tsx"
+import AddFavourtieChatDialog from "./main-page/AddFavourtieChatDialog.tsx"
+import RecentChatsList from "./main-page/RecentChatsList.tsx"
+import ChatInfoDialog from "./routers/ChatInfoDialog.tsx"
 
 export default function Main() {
+    const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
+
     // 多页面切换
     const navigationRef = React.useRef<HTMLElement>()
     const [currentShowPage, setCurrentShowPage] = React.useState('Recents')
@@ -21,21 +31,60 @@ export default function Main() {
         setCurrentShowPage((event.target as HTMLElementWithValue).value)
     })
 
+    const drawerRef = React.useRef<NavigationDrawer>()
+    React.useEffect(() => {
+        $(drawerRef.current!.shadowRoot).append(`
+            <style>
+                .panel {
+                    width: 17.5rem !important;
+                    display: flex !important;
+                    flex-direction: column;
+                }
+            </style>
+        `)
+    }, [])
+
     const [showLoginDialog, setShowLoginDialog] = React.useState(false)
     const [showRegisterDialog, setShowRegisterDialog] = React.useState(false)
+    const [showAddFavourtieChatDialog, setShowAddFavourtieChatDialog] = React.useState(false)
+
+    const [currentSelectedChatId, setCurrentSelectedChatId] = React.useState('')
+
+    const [favouriteChats, setFavouriteChats] = React.useState<Chat[]>([])
 
     const sharedContext = {
-        ui_functions: React.useRef({
-
+        functions_lazy: React.useRef({
+            updateFavouriteChats: () => { },
+            updateRecentChats: () => { },
+            updateAllChats: () => { },
         }),
+        favouriteChats,
+        setFavouriteChats,
+
         setShowLoginDialog,
         setShowRegisterDialog,
+        setShowAddFavourtieChatDialog,
+
+        currentSelectedChatId,
+        setCurrentSelectedChatId,
+
+        myProfileCache,
+
     }
 
     useAsyncEffect(async () => {
-        const waitingForAuth = showCircleProgressDialog("验证中...")
+        const waitingForAuth = showCircleProgressDialog("加载中...")
         try {
             await performAuth({})
+
+            try {
+                setMyProfileCache(await UserMySelf.getMySelfOrThrow(getClient()))
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    showSnackbar({
+                        message: '获取资料失败: ' + e.message
+                    })
+            }
         } catch (e) {
             if (e instanceof CallbackError)
                 if (e.code == 401 || e.code == 400)
@@ -46,6 +95,13 @@ export default function Main() {
         waitingForAuth.open = false
     })
 
+    const subRoutes = <>
+        <Route path="/info">
+            <Route path="chat" element={<ChatInfoDialog />} />
+            <Route path="user" element={<ChatInfoDialog />} />
+        </Route>
+    </>
+
     return (
         <MainSharedContext.Provider value={sharedContext}>
             <BrowserRouter>
@@ -64,28 +120,47 @@ export default function Main() {
                             }
                             <LoginDialog open={showLoginDialog} />
                             <RegisterDialog open={showRegisterDialog} />
+                            <AddFavourtieChatDialog open={showAddFavourtieChatDialog} />
+                            <mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
+                                <mdui-list style={{
+                                    padding: '10px',
+                                }}>
+                                    <mdui-list-item rounded>
+                                        <span>{myProfileCache?.getNickName()}</span>
+                                        <AvatarMySelf slot="icon" />
+                                    </mdui-list-item>
+                                    <mdui-list-item rounded icon="manage_accounts">账号设置</mdui-list-item>
+                                    <mdui-divider style={{
+                                        margin: '10px',
+                                    }}></mdui-divider>
+                                    <mdui-list-item rounded icon="person_add">添加收藏对话</mdui-list-item>
+                                    <mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
+                                    <Link to="/info/user?id=0960bd15-4527-4000-97a8-73110160296f"><mdui-list-item rounded icon="group_add">我是测试</mdui-list-item></Link>
+                                    <Link to="/info/chat?id=priv_0960bd15_4527_4000_97a8_73110160296f__0960bd15_4527_4000_97a8_73110160296f"><mdui-list-item rounded icon="group_add">我是测试2</mdui-list-item></Link>
+                                </mdui-list>
+                                <div style={{
+                                    flexGrow: 1,
+                                }}></div>
+                                <span style={{
+                                    padding: '10px',
+                                    fontSize: 'small',
+                                }}>
+                                    LingChair Web v{__APP_VERSION__}<br />
+                                    Build: <a href={`https://codeberg.org/CrescentLeaf/LingChair/src/commit/${__GIT_HASH_FULL__}`}>{__GIT_HASH__}</a> ({__BUILD_TIME__})<br />
+                                    在 Codeberg 上<a href="https://codeberg.org/CrescentLeaf/LingChair">查看源代码</a>
+                                </span>
+                            </mdui-navigation-drawer>
                             {
                                 /**
                                  * Default: 侧边列表提供列表切换
                                  */
                                 !isMobileUI() ?
                                     <mdui-navigation-rail ref={navigationRef} contained value="Recents">
-                                        <mdui-button-icon slot="top">
-                                            <AvatarMySelf />
-                                        </mdui-button-icon>
+                                        <mdui-button-icon slot="top" icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
 
                                         <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
-                                        <mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
+                                        <mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Favourites"></mdui-navigation-rail-item>
                                         <mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
-
-
-                                        <mdui-dropdown trigger="hover" slot="bottom">
-                                            <mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
-                                            <mdui-menu>
-                                                <mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
-                                                <mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
-                                            </mdui-menu>
-                                        </mdui-dropdown>
                                     </mdui-navigation-rail>
                                     /**
                                      * Mobile: 底部导航栏提供列表切换
@@ -97,27 +172,17 @@ export default function Main() {
                                         marginLeft: '15px',
                                         top: '0px',
                                     }}>
+                                        <mdui-button-icon icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
                                         <mdui-top-app-bar-title>{
                                             ({
                                                 Recents: "最近对话",
-                                                Contacts: "收藏对话",
+                                                Favourites: "收藏对话",
                                                 AllChats: "所有对话",
-                                            })['Recents']
+                                            })[currentShowPage]
                                         }</mdui-top-app-bar-title>
                                         <div style={{
                                             flexGrow: 1,
                                         }}></div>
-                                        <mdui-dropdown trigger="hover">
-                                            <mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
-                                            <mdui-menu>
-                                                <mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
-                                                <mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
-                                            </mdui-menu>
-                                        </mdui-dropdown>
-                                        <mdui-button-icon icon="settings"></mdui-button-icon>
-                                        <mdui-button-icon>
-                                            <AvatarMySelf />
-                                        </mdui-button-icon>
                                     </mdui-top-app-bar>
                             }
                             {
@@ -130,7 +195,15 @@ export default function Main() {
                                     height: 'calc(100% - 80px - 67px)',
                                     width: '100%',
                                 } : {}} id="SideBar">
-
+                                    <RecentChatsList style={{
+                                        display: currentShowPage == 'Recents' ? undefined : 'none'
+                                    }} />
+                                    <FavouriteChatsList style={{
+                                        display: currentShowPage == 'Favourites' ? undefined : 'none'
+                                    }} />
+                                    <AllChatsList style={{
+                                        display: currentShowPage == 'AllChats' ? undefined : 'none'
+                                    }} />
                                 </div>
                             }
                             {
@@ -143,12 +216,13 @@ export default function Main() {
                                     bottom: '0',
                                 }}>
                                     <mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
-                                    <mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
+                                    <mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Favourites">收藏对话</mdui-navigation-bar-item>
                                     <mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
                                 </mdui-navigation-bar>
                             }
                         </div>
                     )}>
+                        {subRoutes}
                     </Route>
                 </Routes>
             </BrowserRouter>

client/ui/MainSharedContext.ts

@@ -1,12 +1,23 @@
-import { createContext } from 'react'
-
-type shared = {
-    ui_functions: React.MutableRefObject<{
+import { Chat, UserMySelf } from "lingchair-client-protocol"
+import { createContext } from "use-context-selector"
 
+type Shared = {
+    functions_lazy: React.MutableRefObject<{
+        updateFavouriteChats: () => void
+        updateRecentChats: () => void
+        updateAllChats: () => void
     }>
+    favouriteChats: Chat[]
+    setFavouriteChats: React.Dispatch<React.SetStateAction<Chat[]>>
     setShowLoginDialog: React.Dispatch<React.SetStateAction<boolean>>
     setShowRegisterDialog: React.Dispatch<React.SetStateAction<boolean>>
+    setShowAddFavourtieChatDialog: React.Dispatch<React.SetStateAction<boolean>>
+    setCurrentSelectedChatId: React.Dispatch<React.SetStateAction<string>>
+    myProfileCache?: UserMySelf
+    currentSelectedChatId: string
 }
-const MainSharedContext = createContext({} as shared)
+const MainSharedContext = createContext({} as Shared)
 
 export default MainSharedContext
+
+export type { Shared }

client/ui/main-page/AddFavourtieChatDialog.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import { Button, Dialog, snackbar, TextField } from "mdui"
+import { data } from 'react-router'
+import { useContextSelector } from 'use-context-selector'
+import MainSharedContext, { Shared } from '../MainSharedContext'
+import showSnackbar from '../../utils/showSnackbar'
+import { CallbackError } from 'lingchair-client-protocol'
+import useEventListener from '../../utils/useEventListener'
+
+export default function AddFavourtieChatDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        setShowAddFavourtieChatDialog: context.setShowAddFavourtieChatDialog,
+    }))
+
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'closed', () => shared.setShowAddFavourtieChatDialog(false))
+
+    const inputTargetRef = React.useRef<TextField>(null)
+
+    async function addFavouriteChat() {
+        try {
+            shared.myProfileCache!.addFavouriteChatsOrThrow([inputTargetRef.current!.value])
+            inputTargetRef.current!.value = ''
+            showSnackbar({
+                message: '添加成功!'
+            })
+        } catch (e) {
+            if (e instanceof CallbackError)
+                    showSnackbar({
+                        message: '添加收藏对话失败: ' + e.message
+                    })
+        }
+    }
+
+    return (
+        <mdui-dialog close-on-overlay-click close-on-esc headline="添加收藏对话" {...props} ref={dialogRef}>
+            <mdui-text-field clearable label="对话 / 用户 (ID 或 别名)" ref={inputTargetRef} onKeyDown={(event: KeyboardEvent) => {
+                if (event.key == 'Enter')
+                    addFavouriteChat()
+            }}></mdui-text-field>
+            <mdui-button slot="action" variant="text" onClick={() => shared.setShowAddFavourtieChatDialog(false)}>取消</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={() => addFavouriteChat()}>添加</mdui-button>
+        </mdui-dialog>
+    )
+}

client/ui/main-page/AllChatsList.tsx

@@ -0,0 +1,80 @@
+import { TextField } from "mdui"
+import React from "react"
+import AllChatsListItem from "./AllChatsListItem.tsx"
+import useEventListener from "../../utils/useEventListener.ts"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import { CallbackError, Chat, UserMySelf } from "lingchair-client-protocol"
+import getClient from "../../getClient.ts"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import isMobileUI from "../../utils/isMobileUI.ts"
+import { useContextSelector } from "use-context-selector"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
+
+export default function AllChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        functions_lazy: context.functions_lazy,
+    }))
+
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [searchText, setSearchText] = React.useState('')
+    const [allChatsList, setAllChatsList] = React.useState<Chat[]>([])
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
+    useAsyncEffect(async () => {
+        async function updateAllChats() {
+            try {
+                setAllChatsList(await shared.myProfileCache!.getMyAllChatsOrThrow())
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    if (e.code != 401 && e.code != 400)
+                        showSnackbar({
+                            message: '获取所有对话失败: ' + e.message
+                        })
+            }
+        }
+        updateAllChats()
+
+        shared.functions_lazy.current.updateAllChats = updateAllChats
+        
+        return () => {
+        }
+    })
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        paddingLeft: '10px',
+        paddingTop: '0',
+        height: '100%',
+        width: '100%',
+        ...props?.style,
+    }} {...props}>
+        <mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
+            paddingTop: '12px',
+            paddingBottom: '13px',
+            position: 'sticky',
+            top: '0',
+            backgroundColor: 'rgb(var(--mdui-color-background))',
+            zIndex: '10',
+        }}></mdui-text-field>
+        {
+            allChatsList.filter((chat) =>
+                searchText == '' ||
+                chat.getTitle().includes(searchText) ||
+                chat.getId().includes(searchText)
+            ).map((v) =>
+                <AllChatsListItem
+                    active={isMobileUI() ? false : currentChatId == v.getId()}
+                    key={v.getId()}
+                    onClick={() => {
+                        openChatInfoDialog(v)
+                    }}
+                    chat={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/main-page/AllChatsListItem.tsx

@@ -0,0 +1,29 @@
+import { $ } from "mdui/jq"
+import Avatar from "../Avatar.tsx"
+import React from 'react'
+import { Chat } from "lingchair-client-protocol"
+import getClient from "../../getClient.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    chat: Chat
+    active?: boolean
+}
+
+export default function AllChatsListItem({ chat, active, ...prop }: Args) {
+    const title = chat.getTitle()
+
+    const ref = React.useRef<HTMLElement>(null)
+
+    return (
+        <mdui-list-item active={active} ref={ref} rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+            width: '100%',
+        }} {...prop as any}>
+            <span style={{
+                width: "100%",
+            }}>{title}</span>
+            <Avatar src={getClient().getUrlForFileByHash(chat.getAvatarFileHash() as string)} text={title} slot="icon" />
+        </mdui-list-item>
+    )
+}

client/ui/main-page/FavouriteChatsList.tsx

@@ -0,0 +1,170 @@
+import React from "react"
+import FavouriteChatsListItem from "./FavouriteChatsListItem.tsx"
+import { dialog, TextField } from "mdui"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import useEventListener from "../../utils/useEventListener.ts"
+import { CallbackError, Chat, UserMySelf } from "lingchair-client-protocol"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import getClient from "../../getClient.ts"
+import { useContextSelector } from "use-context-selector"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
+import isMobileUI from "../../utils/isMobileUI.ts"
+
+export default function FavouriteChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        setShowAddFavourtieChatDialog: context.setShowAddFavourtieChatDialog,
+        functions_lazy: context.functions_lazy,
+        currentSelectedChatId: context.currentSelectedChatId,
+        values_lazy: context.values_lazy,
+    }))
+
+    const searchRef = React.useRef<HTMLElement>(null)
+    const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
+    const [searchText, setSearchText] = React.useState('')
+    const [favouriteChatsList, setFavouriteChatsList] = React.useState<Chat[]>([])
+    const [checkedList, setCheckedList] = React.useState<{ [key: string]: boolean }>({})
+
+    useEventListener(searchRef, 'input', (e) => {
+        setSearchText((e.target as unknown as TextField).value)
+    })
+
+    useAsyncEffect(async () => {
+        async function updateFavouriteChats() {
+            try {
+                const ls = await shared.myProfileCache!.getMyFavouriteChatsOrThrow()
+                setFavouriteChatsList(ls)
+                shared.favourite_chats
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    if (e.code != 401 && e.code != 400)
+                        showSnackbar({
+                            message: '获取收藏对话失败: ' + e.message
+                        })
+                console.log(e)
+            }
+        }
+        updateFavouriteChats()
+
+        shared.functions_lazy.current.updateFavouriteChats = updateFavouriteChats
+
+        return () => {
+        }
+    }, [shared.myProfileCache])
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingLeft: '10px',
+        paddingRight: '10px',
+        paddingTop: '0',
+        height: '100%',
+        width: '100%',
+        ...props?.style,
+    }} {...props}>
+        <div style={{
+            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={{
+                paddingTop: '12px',
+            }}></mdui-text-field>
+            <mdui-list-item rounded style={{
+                marginTop: '13px',
+                width: '100%',
+            }} icon="person_add" onClick={() => shared.setShowAddFavourtieChatDialog(true)}>添加收藏</mdui-list-item>
+            <mdui-list-item rounded style={{
+                width: '100%',
+            }} icon="refresh" onClick={() => shared.functions_lazy.current.updateFavouriteChats()}>刷新列表</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)
+
+                                    try {
+                                        shared.myProfileCache!.removeFavouriteChatsOrThrow(ls)
+
+                                        setCheckedList({})
+                                        setIsMultiSelecting(false)
+
+                                        shared.functions_lazy.current.updateFavouriteChats()
+
+                                        showSnackbar({
+                                            message: "已删除所选",
+                                            action: "撤销操作",
+                                            onActionClick: async () => {
+                                                try {
+                                                    shared.myProfileCache!.addFavouriteChatsOrThrow(ls)
+                                                } catch (e) {
+                                                    if (e instanceof CallbackError)
+                                                        showSnackbar({
+                                                            message: '撤销删除收藏失败: ' + e.message
+                                                        })
+                                                }
+                                                shared.functions_lazy.current.updateFavouriteChats()
+                                            }
+                                        })
+                                    } catch (e) {
+                                        if (e instanceof CallbackError)
+                                            showSnackbar({
+                                                message: '删除收藏对话失败: ' + e.message
+                                            })
+                                    }
+                                },
+                            }
+                        ],
+                    })}>删除所选</mdui-list-item>
+                </>
+            }
+            <div style={{
+                height: "10px",
+            }}></div>
+        </div>
+
+        {
+            favouriteChatsList.filter((chat) =>
+                searchText == '' ||
+                chat.getTitle().includes(searchText) ||
+                chat.getId().includes(searchText)
+            ).map((v) =>
+                <FavouriteChatsListItem
+                    active={isMultiSelecting ? checkedList[v.getId()] == true : (isMobileUI() ? false : shared.currentSelectedChatId == v.getId())}
+                    onClick={() => {
+                        if (isMultiSelecting)
+                            setCheckedList({
+                                ...checkedList,
+                                [v.getId()]: !checkedList[v.getId()],
+                            })
+                        else
+                            openChatInfoDialog(v)
+                    }}
+                    key={v.getId()}
+                    chat={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/main-page/FavouriteChatsListItem.tsx

@@ -0,0 +1,28 @@
+import { Chat } from "lingchair-client-protocol"
+import Avatar from "../Avatar.tsx"
+import React from 'react'
+import getClient from "../../getClient.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    chat: Chat
+    active?: boolean
+}
+
+export default function FavouriteChatsListItem({ chat, active, ...prop }: Args) {
+    const title = chat.getTitle()
+
+    const ref = React.useRef<HTMLElement>(null)
+
+    return (
+        <mdui-list-item active={active} ref={ref} rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+            width: '100%',
+        }} {...prop}>
+            <span style={{
+                width: "100%",
+            }}>{title}</span>
+            <Avatar src={getClient().getUrlForFileByHash(chat.getAvatarFileHash() as string)} text={title} slot="icon" />
+        </mdui-list-item>
+    )
+}

client/ui/main-page/LoginDialog.tsx

@@ -1,18 +1,26 @@
 import * as React from 'react'
-import { Button, Dialog, TextField } from "mdui"
+import { Dialog, TextField } from "mdui"
 
 import performAuth from '../../performAuth.ts'
 import showSnackbar from '../../utils/showSnackbar.ts'
-import MainSharedContext from '../MainSharedContext.ts'
+import MainSharedContext, { Shared } from '../MainSharedContext.ts'
+import { useContextSelector } from 'use-context-selector'
+import useEventListener from '../../utils/useEventListener.ts'
 
 export default function LoginDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
-    const shared = React.useContext(MainSharedContext)
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        setShowRegisterDialog: context.setShowRegisterDialog,
+        setShowLoginDialog: context.setShowLoginDialog
+    }))
+
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'closed', () => shared.setShowLoginDialog(false))
 
     const loginInputAccountRef = React.useRef<TextField>(null)
     const loginInputPasswordRef = React.useRef<TextField>(null)
 
     return (
-        <mdui-dialog {...props} headline="登录">
+        <mdui-dialog {...props} headline="登录" ref={dialogRef}>
 
             <mdui-text-field label="用户 ID / 用户名" ref={loginInputAccountRef}></mdui-text-field>
             <div style={{

client/ui/main-page/RecentChatsList.tsx

@@ -0,0 +1,83 @@
+import { TextField } from "mdui"
+import RecentsListItem from "./RecentsListItem.tsx"
+import React from "react"
+import RecentChat from "lingchair-client-protocol/RecentChat.ts"
+import { data } from "react-router"
+import isMobileUI from "../../utils/isMobileUI.ts"
+import useAsyncEffect from "../../utils/useAsyncEffect.ts"
+import useEventListener from "../../utils/useEventListener.ts"
+import { CallbackError } from "lingchair-client-protocol"
+import { useContextSelector } from "use-context-selector"
+import showSnackbar from "../../utils/showSnackbar.ts"
+import MainSharedContext, { Shared } from "../MainSharedContext.ts"
+
+export default function RecentChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        functions_lazy: context.functions_lazy,
+        currentSelectedChatId: context.currentSelectedChatId,
+    }))
+
+    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() {
+            try {
+                setRecentsList(await shared.myProfileCache!.getMyRecentChats())
+            } catch (e) {
+                if (e instanceof CallbackError)
+                    if (e.code != 401 && e.code != 400)
+                        showSnackbar({
+                            message: '获取最近对话失败: ' + e.message
+                        })
+            }
+        }
+        updateRecents()
+
+        shared.functions_lazy.current.updateRecentChats = updateRecents
+
+        const id = setInterval(() => updateRecents(), 15 * 1000)
+        return () => {
+            clearInterval(id)
+        }
+    })
+
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        paddingLeft: '10px',
+        paddingTop: '0',
+        height: '100%',
+        width: '100%',
+        ...props?.style,
+    }} {...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.getTitle().includes(searchText) ||
+                chat.getId().includes(searchText) ||
+                chat.getContent().includes(searchText)
+            ).map((v) =>
+                <RecentsListItem
+                    active={isMobileUI() ? false : shared.currentSelectedChatId == v.getId()}
+                    openChatFragment={() => openChatFragment(v.getId())}
+                    key={v.getId()}
+                    recentChat={v} />
+            )
+        }
+    </mdui-list>
+}

client/ui/main-page/RecentsListItem.tsx

@@ -0,0 +1,36 @@
+import { $ } from "mdui/jq"
+import Avatar from "../Avatar.tsx"
+import React from 'react'
+import getClient from "../../getClient.ts"
+import RecentChat from "lingchair-client-protocol/RecentChat.ts"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    recentChat: RecentChat
+    active?: boolean
+}
+
+export default function RecentsListItem({ recentChat, active, ...props }: Args) {
+    const { id, title, avatar_file_hash, content } = recentChat.bean
+
+    const itemRef = React.useRef<HTMLElement>(null)
+    React.useEffect(() => {
+        $(itemRef.current!.shadowRoot).find('.headline').css('margin-top', '3px')
+    })
+    return (
+        <mdui-list-item rounded style={{
+            marginTop: '3px',
+            marginBottom: '3px',
+        }} active={active} ref={itemRef} {...props}>
+            {title}
+            <Avatar src={getClient().getUrlForFileByHash(avatar_file_hash!)} text={title} slot="icon" />
+            <span slot="description"
+                style={{
+                    width: "100%",
+                    display: "inline-block",
+                    whiteSpace: "nowrap", /* 禁止换行 */
+                    overflow: "hidden", /* 隐藏溢出内容 */
+                    textOverflow: "ellipsis", /* 显示省略号 */
+                }}>{content}</span>
+        </mdui-list-item>
+    )
+}

client/ui/main-page/RegisterDialog.tsx

@@ -1,20 +1,27 @@
 import * as React from 'react'
 import { Button, Dialog, TextField } from "mdui"
-import MainSharedContext from '../MainSharedContext'
+import MainSharedContext, { Shared } from '../MainSharedContext'
 import showSnackbar from '../../utils/showSnackbar'
 import showCircleProgressDialog from '../showCircleProgressDialog'
 import getClient from '../../getClient'
 import performAuth from '../../performAuth'
+import { useContextSelector } from 'use-context-selector'
+import useEventListener from '../../utils/useEventListener'
 
 export default function RegisterDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
-    const shared = React.useContext(MainSharedContext)
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        setShowRegisterDialog: context.setShowRegisterDialog
+    }))
+
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'closed', () => shared.setShowRegisterDialog(false))
 
     const registerInputUserNameRef = React.useRef<TextField>(null)
     const registerInputNickNameRef = React.useRef<TextField>(null)
     const registerInputPasswordRef = React.useRef<TextField>(null)
 
     return (
-        <mdui-dialog headline="注册" {...props}>
+        <mdui-dialog headline="注册" {...props} ref={dialogRef}>
 
             <mdui-text-field label="用户名 (可选)" ref={registerInputUserNameRef}></mdui-text-field>
             <div style={{

client/ui/routers/ChatInfoDialog.tsx

@@ -0,0 +1,144 @@
+import React from 'react'
+import { dialog, Dialog } from "mdui"
+import Avatar from "../Avatar.tsx"
+import { CallbackError, Chat } from 'lingchair-client-protocol'
+import { data, useLocation, useNavigate, useSearchParams } from 'react-router'
+import useAsyncEffect from '../../utils/useAsyncEffect.ts'
+import { useContextSelector } from 'use-context-selector'
+import MainSharedContext, { Shared } from '../MainSharedContext.ts'
+import getClient from '../../getClient.ts'
+import useEventListener from '../../utils/useEventListener.ts'
+import showSnackbar from '../../utils/showSnackbar.ts'
+
+export default function ChatInfoDialog({ ...props }: React.HTMLAttributes<HTMLElement>) {
+    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+        myProfileCache: context.myProfileCache,
+        favouriteChats: context.favouriteChats,
+    }))
+
+    const [chat, setChat] = React.useState<Chat>()
+    const [userId, setUserId] = React.useState<string>()
+
+    const [searchParams] = useSearchParams()
+    let currentLocation = useLocation()
+    const navigate = useNavigate()
+    function back() {
+        navigate(-1)
+    }
+    const dialogRef = React.useRef<Dialog>()
+    useEventListener(dialogRef, 'overlay-click', () => back())
+    const id = searchParams.get('id')
+
+    const [favourited, setIsFavourited] = React.useState(false)
+    React.useEffect(() => {
+        setIsFavourited(shared.favouriteChats.map((v) => v.getId()).indexOf(chat?.getId() || '') != -1)
+    }, [chat, shared])
+
+    React.useEffect(() => {
+        console.log(currentLocation)
+    }, [currentLocation])
+
+    useAsyncEffect(async () => {
+        console.log(id, currentLocation.pathname)
+        try {
+            if (!currentLocation.pathname.startsWith('/info/')) {
+                dialogRef.current!.open = false
+                return
+            }
+
+            if (id == null) {
+                dialogRef.current!.open = false
+                return back()
+            }
+
+            if (currentLocation.pathname.startsWith('/info/user')) {
+                setChat(await Chat.getOrCreatePrivateChatOrThrow(getClient(), id))
+                setUserId(id)
+            } else
+                setChat(await Chat.getByIdOrThrow(getClient(), id))
+            dialogRef.current!.open = true
+        } catch (e) {
+            if (e instanceof CallbackError)
+                showSnackbar({
+                    message: '打开资料卡失败: ' + e.message
+                })
+            console.log(e)
+            back()
+        }
+    }, [id, currentLocation])
+
+    if (!currentLocation.pathname.startsWith('/info/'))
+        return null
+
+    const avatarUrl = getClient().getUrlForFileByHash(chat?.getAvatarFileHash())!
+
+    return (
+        <mdui-dialog ref={dialogRef}>
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+            }}>
+                <Avatar src={avatarUrl} text={chat?.getTitle()} style={{
+                    width: '50px',
+                    height: '50px',
+                }} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
+                <div style={{
+                    display: 'flex',
+                    marginLeft: '15px',
+                    marginRight: '15px',
+                    fontSize: '16.5px',
+                    flexDirection: 'column',
+                }}>
+                    <span style={{
+                        fontSize: '16.5px'
+                    }}>{chat?.getTitle()}</span>
+                    <span style={{
+                        fontSize: '10.5px',
+                        marginTop: '3px',
+                        color: 'rgb(var(--mdui-color-secondary))',
+                    }}>({chat?.getType()}) ID: {chat?.getType() == 'private' ? userId : chat?.getId()}</span>
+                </div>
+            </div>
+            <mdui-divider style={{
+                marginTop: "10px",
+            }}></mdui-divider>
+
+            <mdui-list>
+                <mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
+                    headline: favourited ? "取消收藏对话" : "收藏对话",
+                    description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
+                    actions: [
+                        {
+                            text: "取消",
+                            onClick: () => {
+                                return true
+                            },
+                        },
+                        {
+                            text: "确定",
+                            onClick: () => {
+                                ; (async () => {
+                                    const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
+                                        token: data.access_token,
+                                        targets: [
+                                            chat!.id
+                                        ],
+                                    })
+                                    if (re.code != 200)
+                                        checkApiSuccessOrSncakbar(re, favourited ? "取消收藏失败" : "收藏失败")
+                                    EventBus.emit('ContactsList.updateContacts')
+                                })()
+                                return true
+                            },
+                        }
+                    ],
+                })}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
+                <mdui-list-item icon="chat" rounded onClick={() => {
+                    chatInfoDialogRef.current!.open = false
+                    openChatFragment(chat!.id)
+                }}>打开对话</mdui-list-item>
+            </mdui-list>
+        </mdui-dialog>
+    )
+}
+

client/vite.config.ts

@@ -2,6 +2,36 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import config from '../server/config.ts'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import { execSync } from 'child_process'
+import fs from 'node:fs/promises'
+
+const gitHash = execSync('git rev-parse --short HEAD')
+    .toString()
+    .trim()
+const gitFullHash = execSync('git rev-parse HEAD')
+    .toString()
+    .trim()
+const gitBranch = execSync('git rev-parse --abbrev-ref HEAD')
+    .toString()
+    .trim()
+const versionEnv = {
+    define: {
+        __APP_VERSION__: JSON.stringify(JSON.parse(await fs.readFile('package.json', 'utf-8')).version),
+        __GIT_HASH__: JSON.stringify(gitHash),
+        __GIT_HASH_FULL__: JSON.stringify(gitFullHash),
+        __GIT_BRANCH__: JSON.stringify(gitBranch),
+        __BUILD_TIME__: JSON.stringify(new Date().toLocaleString('zh-CN')),
+    }
+}
+
+function gitHashPlugin() {
+    return {
+        name: 'git-hash-plugin',
+        config() {
+            return versionEnv
+        }
+    }
+}
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -14,7 +44,8 @@ export default defineConfig({
                 global: true,
                 process: true,
             },
-        })
+        }),
+        gitHashPlugin(),
     ],
     build: {
         sourcemap: true,

server/server.ts

@@ -33,6 +33,17 @@ export default async function createLingChairServer() {
         res.sendFile(path.resolve(file!.getFilePath()))
         file.updateLastUsedTime()
     })
+    // For client-side router
+    app.get(/.*/, (req, res, next) => {
+        if (
+            req.path.startsWith('/uploaded_files/')
+            || req.path === '/config.json'
+        ) {
+            return next()
+        }
+        
+        res.sendFile(path.resolve(config.data_path + '/page_compiled/index.html'))
+    })
 
     await fs.mkdir(config.data_path + '/upload_cache', { recursive: true })
     try {