feat: 通知

* 谁又能想到 chat id 的可变性和依赖性恰恰埋下了祸患呢

client/api/ApiDeclare.ts

@@ -19,6 +19,7 @@ export type CallMethod =
     "Chat.getInfo" |
     
     "Chat.updateSettings" |
+    "Chat.setAvatar" |
 
     "Chat.createGroup" |
 

client/api/Client.ts

@@ -89,7 +89,7 @@ class Client {
         })
         return re.data?.access_token as string
     }
-    static async auth(token: string, timeout: number) {
+    static async auth(token: string, timeout?: number) {
         const re = await this.invoke("User.auth", {
             access_token: token
         }, timeout, 1, true)

client/api/DataCaches.ts

@@ -1,5 +1,6 @@
 import data from "../Data.ts"
 import Client from "./Client.ts"
+import Chat from "./client_data/Chat.ts"
 import User from "./client_data/User.ts"
 
 export default class DataCaches {
@@ -16,4 +17,20 @@ export default class DataCaches {
         }
         return this.userProfiles[userId] = (re.data as unknown as User)
     }
+    static chatInfos: { [key: string]: Chat} = {}
+    static async getChatInfo(chatId: string): Promise<Chat> {
+        if (this.chatInfos[chatId]) return this.chatInfos[chatId]
+        const re = await Client.invoke('Chat.getInfo', {
+            token: data.access_token,
+            target: chatId,
+        })
+        if (re.code != 200) return {
+            id: '',
+            title: '',
+            type: '' as any,
+            is_admin: false,
+            is_member: false,
+        }
+        return this.chatInfos[chatId] = (re.data as unknown as Chat)
+    }
 }

client/api/client_data/Chat.ts

@@ -4,7 +4,7 @@ export default class Chat {
     declare type: ChatType
     declare id: string
     declare title: string
-    declare avatar?: string
+    declare avatar_file_hash?: string
     declare settings?: { [key: string]: unknown }
 
     declare is_member: boolean

client/api/client_data/GroupSettings.ts

@@ -4,6 +4,10 @@ interface GroupSettings {
     new_member_join_method?: 'disabled' | 'allowed_by_admin' | 'answered_and_allowed_by_admin'
     answered_and_allowed_by_admin_question?: string
 
+    // 下面两个比较特殊, 由服务端给予
+    group_title: string
+    group_name: string
+
     [key: string]: unknown
 }
 

client/api/client_data/User.ts

@@ -2,5 +2,5 @@ export default class User {
     declare id: string
     declare username?: string
     declare nickname: string
-    declare avatar?: string
+    declare avatar_file_hash?: string
 }

client/getUrlForFileByHash.ts

@@ -0,0 +1,3 @@
+export default function getUrlForFileByHash(file_hash?: string, defaultUrl?: string) {
+    return file_hash ? "uploaded_files/" + file_hash: defaultUrl
+}

client/ui/App.tsx

@@ -24,6 +24,9 @@ import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
+import getUrlForFileByHash from "../getUrlForFileByHash.ts"
+import Message from "../api/client_data/Message.ts"
+import EventBus from "../EventBus.ts"
 
 declare global {
     namespace React {
@@ -111,11 +114,36 @@ export default function App() {
             setUserInfo(user)
         } else {
             setUserInfo(await DataCaches.getUserProfile(user))
-            
+
         }
         userProfileDialogRef.current!.open = true
     }
 
+    Notification.requestPermission()
+    React.useEffect(() => {
+        interface OnMessageData {
+            chat: string
+            msg: Message
+        }
+        async function onMessage(_event: unknown) {
+            EventBus.emit('RecentsList.updateRecents')
+
+            const event = _event as OnMessageData
+            if (currentChatId != event.chat) {
+                const chat = await DataCaches.getChatInfo(event.chat)
+                const user = await DataCaches.getUserProfile(event.msg.user_id)
+                new Notification(`${user.nickname} (对话: ${chat.title})`, {
+                    icon: getUrlForFileByHash(chat.avatar_file_hash),
+                    body: event.msg.text,
+                })
+            }
+        }
+        Client.on('Client.onMessage', onMessage)
+        return () => {
+            Client.off('Client.onMessage', onMessage)
+        }
+    }, [currentChatId])
+
     return (
         <div style={{
             display: "flex",
@@ -154,13 +182,13 @@ export default function App() {
 
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />
-                
+
             <CreateGroupDialog
                 createGroupDialogRef={createGroupDialogRef} />
 
             <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
                 <mdui-button-icon slot="top">
-                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
+                    <Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
                 </mdui-button-icon>
 
                 <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
@@ -184,7 +212,7 @@ export default function App() {
                     <ContactsList
                         openChatInfoDialog={openChatInfoDialog}
                         addContactDialogRef={addContactDialogRef as any}
-                        createGroupDialogRef={createGroupDialogRef}
+                        createGroupDialogRef={createGroupDialogRef as any}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>

client/ui/AppMobile.tsx

@@ -23,6 +23,7 @@ import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
+import getUrlForFileByHash from "../getUrlForFileByHash.ts"
 
 declare global {
     namespace React {
@@ -200,7 +201,7 @@ export default function AppMobile() {
                 }}></div>
                 <mdui-button-icon icon="settings"></mdui-button-icon>
                 <mdui-button-icon>
-                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
+                    <Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
                 </mdui-button-icon>
             </mdui-top-app-bar>
             {
@@ -226,7 +227,7 @@ export default function AppMobile() {
                     <ContactsList
                         openChatInfoDialog={openChatInfoDialog}
                         addContactDialogRef={addContactDialogRef as any}
-                        createGroupDialogRef={createGroupDialogRef}
+                        createGroupDialogRef={createGroupDialogRef as any}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>

client/ui/chat/ChatFragment.tsx

@@ -27,7 +27,8 @@ import Preference from '../preference/Preference.tsx'
 import GroupSettings from "../../api/client_data/GroupSettings.ts"
 import PreferenceUpdater from "../preference/PreferenceUpdater.ts"
 import SystemMessage from "./SystemMessage.tsx"
-import JoinRequestsList from "./JoinRequestsList.tsx";
+import JoinRequestsList from "./JoinRequestsList.tsx"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     target: string
@@ -49,11 +50,12 @@ const markedInstance = new marked.Marked({
         },
         image({ text, href }) {
             const type = /^(Video|File)=.*/.exec(text)?.[1] || 'Image'
-            if (/uploaded_files\/[A-Za-z0-9]+$/.test(href)) {
+            if (/tws:\/\/file\?hash=[A-Za-z0-9]+$/.test(href)) {
+                const url = getUrlForFileByHash(/^tws:\/\/file\?hash=(.*)/.exec(href)?.[1])
                 return ({
-                    Image: `<chat-image src="${href}" alt="${text}"></chat-image>`,
+                    Image: `<chat-image src="${url}" alt="${text}"></chat-image>`,
-                    Video: `<chat-video src="${href}"></chat-video>`,
+                    Video: `<chat-video src="${url}"></chat-video>`,
-                    File: `<chat-file href="${href}" name="${/^Video|File=(.*)/.exec(text)?.[1] || 'Unnamed file'}"></chat-file>`,
+                    File: `<chat-file href="${url}" name="${/^Video|File=(.*)/.exec(text)?.[1] || 'Unnamed file'}"></chat-file>`,
                 })?.[type] || ``
             }
             return ``
@@ -130,8 +132,6 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
             msg: Message
         }
         function callback(data: unknown) {
-            EventBus.emit('RecentsList.updateRecents')
-
             const { chat, msg } = (data as OnMessageData)
             if (target == chat) {
                 setMessagesList(messagesList.concat([msg]))
@@ -171,7 +171,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                         data: cachedFiles.current[fileName],
                     }, 5000)
                     if (checkApiSuccessOrSncakbar(re, `文件[${fileName}] 上传失败`)) return setIsMessageSending(false)
-                    text = text.replaceAll('(' + fileName + ')', '(' + re.data!.file_path as string + ')')
+                    text = text.replaceAll('(' + fileName + ')', '(tws://file?hash=' + re.data!.file_hash as string + ')')
                 }
             }
 
@@ -193,6 +193,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
     }
 
     const attachFileInputRef = React.useRef<HTMLInputElement>(null)
+    const uploadChatAvatarRef = React.useRef<HTMLInputElement>(null)
 
     function insertText(text: string) {
         const input = inputRef.current!.shadowRoot!.querySelector('[part=input]') as HTMLTextAreaElement
@@ -222,6 +223,22 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
             addFile(file.type, file.name, file)
         }
     })
+    useEventListener(uploadChatAvatarRef, 'change', async (_e) => {
+        const file = uploadChatAvatarRef.current!.files?.[0] as File
+        if (file == null) return
+
+        const re = await Client.invoke("Chat.setAvatar", {
+            token: data.access_token,
+            target: target,
+            avatar: file
+        })
+
+        if (checkApiSuccessOrSncakbar(re, "修改失败")) return
+        snackbar({
+            message: "修改成功 (刷新页面以更新)",
+            placement: "top",
+        })
+    })
 
     const groupPreferenceStore = new PreferenceStore<GroupSettings>()
     groupPreferenceStore.setOnUpdate(async (value, oldvalue) => {
@@ -492,16 +509,43 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                     flexDirection: "column",
                     height: "100%",
                 }}>
+                    <div style={{
+                        display: 'none'
+                    }}>
+                        <input accept="image/*" type="file" name="上传对话头像" ref={uploadChatAvatarRef}></input>
+                    </div>
                     {
                         chatInfo.type == 'group' && <PreferenceLayout>
                             <PreferenceUpdater.Provider value={groupPreferenceStore.createUpdater()}>
                                 <PreferenceHeader
+                                    title="群组资料" />
+                                <Preference
+                                    title="上传新的头像"
+                                    icon="image"
+                                    disabled={!chatInfo.is_admin}
+                                    onClick={() => {
+                                        uploadChatAvatarRef.current!.click()
+                                    }} />
+                                <TextFieldPreference
+                                    title="设置群名称"
+                                    icon="edit"
+                                    id="group_title"
+                                    state={groupPreferenceStore.state.group_title || ''}
+                                    disabled={!chatInfo.is_admin} />
+                                <TextFieldPreference
+                                    title="设置群别名"
+                                    icon="edit"
+                                    id="group_name"
+                                    description="以便于添加, 可留空"
+                                    state={groupPreferenceStore.state.group_name || ''}
+                                    disabled={!chatInfo.is_admin} />
+                                {/* <PreferenceHeader
                                     title="群组管理" />
                                 <Preference
                                     title="群组成员列表"
                                     icon="group"
                                     disabled={true || !chatInfo.is_admin}
-                                    description="别看了, 还没做" />
+                                    description="别看了, 还没做" /> */}
                                 <PreferenceHeader
                                     title="入群设定" />
                                 <SwitchPreference
@@ -510,7 +554,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                     id="allow_new_member_join"
                                     disabled={!chatInfo.is_admin}
                                     state={groupPreferenceStore.state.allow_new_member_join || false} />
-                                <SwitchPreference
+                                {/* <SwitchPreference
                                     title="允许成员邀请"
                                     description="目前压根没有这项功能, 甚至还不能查看成员列表, 以后再说吧"
                                     id="allow_new_member_from_invitation"
@@ -537,7 +581,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
                                         description="WIP"
                                         state={groupPreferenceStore.state.answered_and_allowed_by_admin_question || ''}
                                         disabled={true || !chatInfo.is_admin} />
-                                }
+                                } */}
                             </PreferenceUpdater.Provider>
                         </PreferenceLayout>
                     }

client/ui/chat/Message.tsx

@@ -11,6 +11,7 @@ import React from "react"
 import isMobileUI from "../isMobileUI.ts"
 import ReactJson from 'react-json-view'
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     userId: string
@@ -29,7 +30,7 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
     useAsyncEffect(async () => {
         const user = await DataCaches.getUserProfile(userId)
         setNickName(user.nickname)
-        setAvatarUrl(user?.avatar)
+        setAvatarUrl(getUrlForFileByHash(user?.avatar_file_hash))
     }, [userId])
 
     const dropDownRef = React.useRef<Dropdown>(null)
@@ -40,9 +41,19 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
     useEventListener(dropDownRef, 'closed', (e) => {
         setDropDownOpen(false)
     })
-    
+
     const [isDropDownOpen, setDropDownOpen] = React.useState(false)
 
+    const [isUsingFullDisplay, setIsUsingFullDisplay] = React.useState(false)
+
+    React.useEffect(() => {
+        const text = $(dropDownRef.current as HTMLElement).find('#msg').text().trim()
+        setIsUsingFullDisplay(text == '' || (
+            rawData.split("tws:\/\/file\?hash=").length == 2
+            && /\<\/chat\-(file|image|video)\>(\<\/span\>)?$/.test(renderHTML.trim())
+        ))
+    }, [renderHTML])
+
     return (
         <div
             slot="trigger"
@@ -111,11 +122,16 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
                     minWidth: "0%",
                     [isAtRight ? "marginRight" : "marginLeft"]: "55px",
                     marginTop: "-5px",
-                    padding: "15px",
+                    padding: isUsingFullDisplay ? undefined : "13px",
+                    paddingTop: isUsingFullDisplay ? undefined : "14px",
                     alignSelf: isAtRight ? "flex-end" : "flex-start",
+                    backgroundColor: isUsingFullDisplay ? "inherit" : undefined
                 }}>
                 <mdui-dialog close-on-overlay-click close-on-esc ref={messageJsonDialogRef}>
-                    <ReactJson src={message} />
+                    {
+                        // @ts-ignore 这是可以正常工作的
+                        <ReactJson src={message} />
+                    }
                 </mdui-dialog>
                 <mdui-dropdown trigger="manual" ref={dropDownRef} open={isDropDownOpen}>
                     <span

client/ui/chat/SystemMessage.tsx

@@ -11,10 +11,10 @@ export default function SystemMessage({ children }: React.HTMLAttributes<HTMLEle
             <mdui-card variant="filled"
                 style={{
                     alignSelf: 'center',
-                    paddingTop: '9px',
+                    paddingTop: '8px',
-                    paddingBottom: '9px',
+                    paddingBottom: '8px',
-                    paddingLeft: '18px',
+                    paddingLeft: '17px',
-                    paddingRight: '18px',
+                    paddingRight: '17px',
                     fontSize: '92%',
                 }}>
                 {children}

client/ui/custom-elements/chat-file.ts

@@ -7,7 +7,7 @@ customElements.define('chat-file', class extends HTMLElement {
     connectedCallback() {
         const e = new DOMParser().parseFromString(`
         <a style="width: 100%;height: 100%;">
-            <mdui-card variant="outlined" clickable style="display: flex;align-items: center;">
+            <mdui-card clickable style="display: flex;align-items: center;">
                 <mdui-icon name="insert_drive_file" style="margin: 13px;font-size: 34px;"></mdui-icon>
                 <span style="margin-right: 13px; word-wrap: break-word; word-break:break-all;white-space:normal; max-width :100%;"></span>
             </mdui-card>
@@ -19,7 +19,6 @@ customElements.define('chat-file', class extends HTMLElement {
         $(e).attr('download', href)
         e.style.textDecoration = 'none'
         e.style.color = 'inherit'
-        // deno-lint-ignore no-window
         e.onclick = (e) => {
             e.stopPropagation()
         }

client/ui/dialog/ChatInfoDialog.tsx

@@ -7,6 +7,7 @@ import { Dialog } from "mdui"
 import Avatar from "../Avatar.tsx"
 import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     chat: Chat
@@ -36,7 +37,7 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={chat?.avatar as string} text={chat?.nickname as string} style={{
+                <Avatar src={getUrlForFileByHash(chat?.avatar_file_hash as string)} text={chat?.nickname as string} style={{
                     width: '50px',
                     height: '50px',
                 }} />

client/ui/dialog/CreateGroupDialog.tsx

@@ -15,13 +15,13 @@ interface Refs {
 export default function CreateGroupDialog({
     createGroupDialogRef,
 }: Refs) {
+    const inputGroupTitleRef = React.useRef<TextField>(null)
     const inputGroupNameRef = React.useRef<TextField>(null)
-    const inputGroupIdRef = React.useRef<TextField>(null)
 
     async function createGroup() {
         const re = await Client.invoke("Chat.createGroup", {
-            title: inputGroupNameRef.current!.value,
+            title: inputGroupTitleRef.current!.value,
-            id: inputGroupIdRef.current!.value,
+            name: inputGroupNameRef.current!.value,
             token: data.access_token,
         })
 
@@ -32,18 +32,18 @@ export default function CreateGroupDialog({
         })
         EventBus.emit('ContactsList.updateContacts')
 
+        inputGroupTitleRef.current!.value = ''
         inputGroupNameRef.current!.value = ''
-        inputGroupIdRef.current!.value = ''
         createGroupDialogRef.current!.open = false
     }
 
     return (
         <mdui-dialog close-on-overlay-click close-on-esc headline="创建群组" ref={createGroupDialogRef}>
-            <mdui-text-field clearable label="群组名称" ref={inputGroupNameRef as any} onKeyDown={(event) => {
+            <mdui-text-field clearable label="群组名称" ref={inputGroupTitleRef as any} onKeyDown={(event) => {
                 if (event.key == 'Enter')
-                    inputGroupIdRef.current!.click()
+                    inputGroupNameRef.current!.click()
             }}></mdui-text-field>
-            <mdui-text-field style={{ marginTop: "10px", }} clearable label="群组 ID (可选)" ref={inputGroupIdRef as any} onKeyDown={(event) => {
+            <mdui-text-field style={{ marginTop: "10px", }} clearable label="群组别名 (可选, 供查询)" ref={inputGroupNameRef as any} onKeyDown={(event) => {
                 if (event.key == 'Enter')
                     createGroup()
             }}></mdui-text-field>

client/ui/dialog/MyProfileDialog.tsx

@@ -8,6 +8,7 @@ import * as CryptoJS from 'crypto-js'
 import data from "../../Data.ts"
 import Avatar from "../Avatar.tsx"
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Refs {
     myProfileDialogRef: React.MutableRefObject<Dialog>
@@ -50,7 +51,7 @@ export default function MyProfileDialog({
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={user?.avatar} text={user?.nickname} style={{
+                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} style={{
                     width: '50px',
                     height: '50px',
                 }} />
@@ -111,7 +112,7 @@ export default function MyProfileDialog({
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={user?.avatar} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
+                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
                     width: '50px',
                     height: '50px',
                 }} />

client/ui/dialog/UserProfileDialog.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react'
-import { Button, Dialog, TextField, dialog } from "mdui"
+import { Dialog } from "mdui"
-import useEventListener from "../useEventListener.ts"
+import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
 import Client from "../../api/Client.ts"
 
-import * as CryptoJS from 'crypto-js'
 import data from "../../Data.ts"
 import Avatar from "../Avatar.tsx"
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Refs {
     userProfileDialogRef: React.MutableRefObject<Dialog>
@@ -28,7 +27,7 @@ export default function UserProfileDialog({
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={user?.avatar} text={user?.nickname} style={{
+                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} style={{
                     width: '50px',
                     height: '50px',
                 }} />

client/ui/main/ContactsListItem.tsx

@@ -1,4 +1,5 @@
 import Chat from "../../api/client_data/Chat.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
 
@@ -8,7 +9,7 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
 }
 
 export default function ContactsListItem({ contact, ...prop }: Args) {
-    const { id, title, avatar } = contact
+    const { id, title, avatar_file_hash } = contact
     const ref = React.useRef<HTMLElement>(null)
 
     return (
@@ -20,7 +21,7 @@ export default function ContactsListItem({ contact, ...prop }: Args) {
             <span style={{
                 width: "100%",
             }}>{title}</span>
-            <Avatar src={avatar as string} text={title} slot="icon" />
+            <Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
         </mdui-list-item>
     )
 }

client/ui/main/RecentsListItem.tsx

@@ -2,6 +2,7 @@ import { $ } from "mdui/jq"
 import RecentChat from "../../api/client_data/RecentChat.ts"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     recentChat: RecentChat
@@ -10,7 +11,7 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
 }
 
 export default function RecentsListItem({ recentChat, openChatFragment, active }: Args) {
-    const { id, title, avatar, content } = recentChat
+    const { id, title, avatar_file_hash, content } = recentChat
 
     const itemRef = React.useRef<HTMLElement>(null)
     React.useEffect(() => {
@@ -22,7 +23,7 @@ export default function RecentsListItem({ recentChat, openChatFragment, active }
             marginBottom: '3px',
         }} onClick={() => openChatFragment(id)} active={active} ref={itemRef}>
             {title}
-            <Avatar src={avatar} text={title} slot="icon" />
+            <Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
             <span slot="description"
                 style={{
                     width: "100%",

server/api/ApiDeclare.ts

@@ -19,6 +19,7 @@ export type CallMethod =
     "Chat.getInfo" |
     
     "Chat.updateSettings" |
+    "Chat.setAvatar" |
 
     "Chat.createGroup" |
 

server/api/BaseApi.ts

@@ -34,4 +34,15 @@ export default abstract class BaseApi {
     emitToClient(client: SocketIo.Socket, name: ClientEvent, args: { [key: string]: unknown }) {
         client.emit("The_White_Silk", name, args)
     }
+    boardcastToUsers(users: string[], name: ClientEvent, args: { [key: string]: unknown }) {
+        for (const user of users) {
+            if (ApiManager.checkUserIsOnline(user)) {
+                const sockets = ApiManager.getUserClientSockets(user)
+                for (const socket of Object.keys(sockets))
+                    this.emitToClient(sockets[socket], name, args)
+            } else {
+                // TODO: EventStore
+            }
+        }
+    }
 }

server/api/ChatApi.ts

@@ -58,23 +58,17 @@ export default class ChatApi extends BaseApi {
             const id = MessagesManager.getInstanceForChat(chat).addMessage(msg)
 
             const users: string[] = UserChatLinker.getChatMembers(chat.bean.id)
-            for (const user of users) {
+            users.forEach((id) => {
-                if (ApiManager.checkUserIsOnline(user)) {
+                const userInst = User.findById(id)
-                    const userInst = User.findById(user)
+                userInst?.updateRecentChat(chat.bean.id, args.text as string)
-                    userInst?.updateRecentChat(chat.bean.id, args.text as string)
+            })
-                    const sockets = ApiManager.getUserClientSockets(user)
+            this.boardcastToUsers(users, 'Client.onMessage', {
-                    for (const socket of Object.keys(sockets))
+                chat: chat.bean.id,
-                        this.emitToClient(sockets[socket], 'Client.onMessage', {
+                msg: {
-                            chat: chat.bean.id,
+                    ...msg,
-                            msg: {
+                    id
-                                ...msg,
-                                id
-                            }
-                        })
-                } else {
-                    // TODO: EventStore
                 }
-            }
+            })
 
             return {
                 code: 200,
@@ -152,7 +146,7 @@ export default class ChatApi extends BaseApi {
                 code: 200,
                 msg: "成功",
                 data: {
-                    file_path: 'uploaded_files/' + file.getHash()
+                    file_hash: file.getHash()
                 },
             }
         })
@@ -198,7 +192,7 @@ export default class ChatApi extends BaseApi {
                             user_id: user?.bean.id,
                             reason: v.reason,
                             title: user!.getNickName(),
-                            avatar: user!.getAvatarFileHash() ? "uploaded_files/" + user!.getAvatarFileHash() : null,
+                            avatar_file_hash: user!.getAvatarFileHash() ? user!.getAvatarFileHash() : null,
                         }
                     }),
                 }
@@ -241,10 +235,19 @@ export default class ChatApi extends BaseApi {
                     ])
                 } else {
                     if (action == 'accept') {
+                        const msg = `${user.getNickName()} 经 ${admin?.getNickName()} 批准加入了对话`
+                        MessagesManager.getInstanceForChat(chat).addSystemMessage(msg)
+                        const users: string[] = UserChatLinker.getChatMembers(chat.bean.id)
+                        this.boardcastToUsers(users, 'Client.onMessage', {
+                            chat: chat.bean.id,
+                            msg: {
+                                text: msg,
+                                time: Date.now(),
+                            },
+                        })
                         chat.addMembers([
                             args.user_id as string,
                         ])
-                        MessagesManager.getInstanceForChat(chat).addSystemMessage(`${user.getNickName()} 经 ${admin?.getNickName()} 批准加入了对话`)
                     }
                     if (action == 'accept' || action == 'remove')
                         chat.removeJoinRequests([
@@ -334,7 +337,7 @@ export default class ChatApi extends BaseApi {
          * 创建群组
          * @param token 令牌
          * @param title 名称
-         * @param [id] 群组 ID
+         * @param [name] 群组别名
          */
         this.registerEvent("Chat.createGroup", (args, { deviceId }) => {
             if (this.checkArgsMissing(args, ['token', 'title'])) return {
@@ -353,13 +356,7 @@ export default class ChatApi extends BaseApi {
             }
             const user = User.findById(token.author) as User
 
-            const haveId = args.id && ((args.id as string) != '')
+            const chat = ChatGroup.createGroup(args.name as string)
-            if (haveId && Chat.findById(args.id as string) != null) return {
-                msg: "对话 ID 已被占用",
-                code: 403,
-            }
-
-            const chat = ChatGroup.createGroup(haveId ? args.id as string : undefined)
             chat.setTitle(args.title as string)
             chat.addMembers([
                 user.bean.id,
@@ -419,9 +416,10 @@ export default class ChatApi extends BaseApi {
                     msg: "成功",
                     data: {
                         id: args.target as string,
+                        name: chat.bean.name,
                         type: chat.bean.type,
                         title: chat.getTitle(mine),
-                        avatar: chat.getAvatarFileHash(mine) ? "uploaded_files/" + chat.getAvatarFileHash(mine) : undefined,
+                        avatar_file_hash: chat.getAvatarFileHash(mine) ? chat.getAvatarFileHash(mine) : undefined,
                         settings: JSON.parse(chat.bean.settings),
                         is_member: true,
                         is_admin: true,
@@ -434,10 +432,16 @@ export default class ChatApi extends BaseApi {
                     msg: "成功",
                     data: {
                         id: args.target as string,
+                        name: chat.bean.name,
                         type: chat.bean.type,
                         title: chat.getTitle(),
-                        avatar: chat.getAvatarFileHash() ? "uploaded_files/" + chat.getAvatarFileHash() : undefined,
+                        avatar_file_hash: chat.getAvatarFileHash() ? chat.getAvatarFileHash() : undefined,
-                        settings: JSON.parse(chat.bean.settings),
+                        settings: {
+                            ...JSON.parse(chat.bean.settings),
+                            // 下面两个比较特殊, 用于群设置
+                            group_name: chat.bean.name,
+                            group_title: chat.getTitle(),
+                        },
                         is_member: UserChatLinker.checkUserIsLinkedToChat(token.author, chat!.bean.id),
                         is_admin: chat.checkUserIsAdmin(token.author),
                     }
@@ -449,8 +453,44 @@ export default class ChatApi extends BaseApi {
                 msg: "找不到对话",
             }
         })
+        // 更新頭像
+        this.registerEvent("Chat.setAvatar", (args, { deviceId }) => {
+            if (this.checkArgsMissing(args, ['avatar', 'token'])) return {
+                msg: "参数缺失",
+                code: 400,
+            }
+            if (!(args.avatar instanceof Buffer)) return {
+                msg: "参数不合法",
+                code: 400,
+            }
+            const token = TokenManager.decode(args.token as string)
+
+            const user = User.findById(token.author) as User
+
+            const chat = Chat.findById(args.target as string)
+            if (chat == null) return {
+                code: 404,
+                msg: "对话不存在",
+            }
+
+            if (chat.bean.type == 'group')
+                if (chat.checkUserIsAdmin(user.bean.id)) {
+                    const avatar: Buffer = args.avatar as Buffer
+                    if (avatar)
+                        chat.setAvatar(avatar)
+                } else
+                    return {
+                        code: 403,
+                        msg: "没有此权限",
+                    }
+
+            return {
+                msg: "成功",
+                code: 200,
+            }
+        })
         /**
-         * 更新设定
+         * 更新设定 (包括资料)
          * @param token 令牌
          * @param title 名称
          * @param [id] 群组 ID
@@ -475,9 +515,15 @@ export default class ChatApi extends BaseApi {
             }
 
             if (chat.bean.type == 'group')
-                if (chat.checkUserIsAdmin(user.bean.id))
+                if (chat.checkUserIsAdmin(user.bean.id)) {
                     ChatGroup.fromChat(chat).getSettings().update(args.settings as GroupSettingsBean)
-                else
+
+                    const settings = args.settings as any
+                    if (settings.group_title != null)
+                        chat.setTitle(settings.group_title)
+                    if (settings.group_name != null)
+                        chat.setName(settings.group_name == '' ? null : settings.group_name)
+                } else
                     return {
                         code: 403,
                         msg: "没有此权限",

server/api/UserApi.ts

@@ -231,7 +231,7 @@ export default class UserApi extends BaseApi {
                 data: {
                     username: user!.getUserName(),
                     nickname: user!.getNickName(),
-                    avatar: user!.getAvatarFileHash() ? "uploaded_files/" + user!.getAvatarFileHash() : null,
+                    avatar_file_hash: user!.getAvatarFileHash() ? user!.getAvatarFileHash() : null,
                     id: token.author,
                 }
             }
@@ -258,7 +258,7 @@ export default class UserApi extends BaseApi {
                     content,
                     id: chatId,
                     title: chat?.getTitle(user) || "未知",
-                    avatar: chat?.getAvatarFileHash(user) ? "uploaded_files/" + chat?.getAvatarFileHash(user) : undefined
+                    avatar_file_hash: chat?.getAvatarFileHash(user) ? chat?.getAvatarFileHash(user) : undefined
                 })
             }
 
@@ -297,7 +297,7 @@ export default class UserApi extends BaseApi {
                             id,
                             type: chat?.bean.type,
                             title: chat?.getTitle(user) || "未知",
-                            avatar: chat?.getAvatarFileHash(user) ? "uploaded_files/" + chat?.getAvatarFileHash(user) : undefined
+                            avatar_file_hash: chat?.getAvatarFileHash(user) ? chat?.getAvatarFileHash(user) : undefined
                         }
                     })
                 }
@@ -317,7 +317,7 @@ export default class UserApi extends BaseApi {
             }
 
             const user = User.findById(token.author) as User
-            const chat = Chat.findById(args.target as string)
+            const chat = Chat.findById(args.target as string) || Chat.findByName(args.target as string)
             const targetUser = User.findByAccount(args.target as string) as User
             if (chat)
                 user!.addContact(chat.bean.id)
@@ -366,7 +366,7 @@ export default class UserApi extends BaseApi {
                 data: {
                     username: user!.getUserName(),
                     nickname: user!.getNickName(),
-                    avatar: user!.getAvatarFileHash() ? "uploaded_files/" + user!.getAvatarFileHash() : null,
+                    avatar_file_hash: user!.getAvatarFileHash() ? user!.getAvatarFileHash() : null,
                     id: user.bean.id,
                 }
             }

server/data/Chat.ts

@@ -10,6 +10,8 @@ import User from "./User.ts"
 import ChatType from "./ChatType.ts"
 import UserChatLinker from "./UserChatLinker.ts"
 import DataWrongError from '../api/DataWrongError.ts'
+import { Buffer } from "node:buffer"
+import FileManager from "./FileManager.ts"
 
 /**
  * Chat.ts - Wrapper and manager
@@ -25,8 +27,9 @@ export default class Chat {
                 /* 序号 */ count INTEGER PRIMARY KEY AUTOINCREMENT,
                 /* 类型 */ type TEXT NOT NULL,
                 /*  ID  */ id TEXT NOT NULL,
+                /* 检索 */ name TEXT,
                 /* 标题 */ title TEXT,
-                /* 头像 */ avatar BLOB,
+                /* 头像 */ avatar_file_hash TEXT,
                 /* 设置 */ settings TEXT NOT NULL
             );
        `)
@@ -46,21 +49,32 @@ export default class Chat {
         return new Chat(beans[0])
     }
 
-    static create(chatId: string, type: ChatType) {
+    static findByName(name: string) {
-        if (this.findAllChatBeansByCondition('id = ?', chatId).length > 0)
+        const beans = this.findAllChatBeansByCondition('name = ?', name)
-            throw new DataWrongError(`对话 ID ${chatId} 已被使用`)
+        if (beans.length == 0)
+            return null
+        else if (beans.length > 1)
+            console.error(chalk.red(`警告: 查询 name = ${name} 时, 查询到多个相同 name 的 Chat`))
+        return new Chat(beans[0])
+    }
+
+    static create(chatName: string | undefined, type: ChatType) {
+        if (this.findAllChatBeansByCondition('id = ?', chatName || null).length > 0)
+            throw new DataWrongError(`对话名称 ${chatName} 已被使用`)
         const chat = new Chat(
             Chat.findAllChatBeansByCondition(
                 'count = ?',
                 Chat.database.prepare(`INSERT INTO Chat (
                     type,
                     id,
+                    name,
                     title,
-                    avatar,
+                    avatar_file_hash,
                     settings
-                ) VALUES (?, ?, ?, ?, ?);`).run(
+                ) VALUES (?, ?, ?, ?, ?, ?);`).run(
                     type,
-                    chatId,
+                    crypto.randomUUID(),
+                    chatName || null,
                     null,
                     null,
                     "{}"
@@ -95,8 +109,8 @@ export default class Chat {
     protected getJoinRequestsTableName() {
         return 'join_requests_' + this.bean.id.replaceAll('-', '_')
     }
-    setAttr(key: string, value: SQLInputValue): void {
+    setAttr(key: string, value: SQLInputValue) {
-        Chat.database.prepare(`UPDATE Chat SET ${key} = ? WHERE id = ?`).run(value, this.bean.id)
+        Chat.database.prepare(`UPDATE Chat SET ${key} = ? WHERE count = ?`).run(value, this.bean.count)
         this.bean[key] = value
     }
 
@@ -198,6 +212,12 @@ export default class Chat {
 
         return null
     }
+    setName(name: string) {
+        if (this.bean.name == name) return
+        if (name != null && Chat.findAllChatBeansByCondition('name = ?', name).length > 0)
+            throw new DataWrongError(`对话名称 ${name} 已被使用`)
+        this.setAttr("name", name)
+    }
     setTitle(title: string) {
         if (this.bean.type == 'private')
             throw new Error('不允许对私聊进行命名')
@@ -211,4 +231,7 @@ export default class Chat {
         if (this.bean.type == 'group') return this.bean.avatar_file_hash
         if (this.bean.type == 'private') return this.getAnotherUserForPrivate(userMySelf as User)?.getAvatarFileHash()
     }
+    async setAvatar(avatar: Buffer) {
+        this.setAttr("avatar_file_hash", (await FileManager.uploadFile(`avatar_chat_${this.bean.count}`, avatar)).getHash())
+    }
 }

server/data/ChatBean.ts

@@ -1,8 +1,10 @@
 import ChatType from "./ChatType.ts"
 
 export default class ChatBean {
+    declare count: number
     declare type: ChatType
     declare id: string
+    declare name?: string
     declare title?: string
     declare avatar_file_hash?: string
     declare members_list: string

server/data/ChatGroup.ts

@@ -40,7 +40,7 @@ export default class ChatGroup extends Chat {
         return new ChatGroup(chat.bean)
     }
 
-    static createGroup(chatId?: string) {
+    static createGroup(group_name?: string) {
-        return this.create(chatId || crypto.randomUUID(), 'group')
+        return this.create(group_name, 'group')
     }
 }

server/data/ChatPrivate.ts

@@ -8,11 +8,12 @@ export default class ChatPrivate extends Chat {
     }
 
     static getChatIdByUsersId(userIdA: string, userIdB: string) {
-        return [userIdA, userIdB].sort().join('------')
+        return 'priv_' + [userIdA, userIdB].sort().join('__').replaceAll('-', '_')
     }
 
     static createForPrivate(userA: User, userB: User) {
-        const chat = this.create(this.getChatIdByUsersId(userA.bean.id, userB.bean.id), 'private')
+        const chat = this.create(undefined, 'private')
+        chat.setAttr('id', this.getChatIdByUsersId(userA.bean.id, userB.bean.id))
         chat.addMembers([
             userA.bean.id,
             userB.bean.id