feat(wip): 顯示消息的時間

client/api/client_data/Message.ts

@@ -2,4 +2,5 @@ export default class Message {
     declare id: number
     declare text: string
     declare user_id: string
+    declare time: string
 }

client/ui/chat/ChatFragment.tsx

@@ -82,6 +82,7 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
 
         if (checkApiSuccessOrSncakbar(re, "拉取歷史記錄失敗")) return
         const returnMsgs = (re.data!.messages as Message[]).reverse()
+        page.current++
         if (returnMsgs.length == 0) {
             setShowNoMoreMessagesTip(true)
             setTimeout(() => setShowNoMoreMessagesTip(false), 1000)
@@ -91,8 +92,6 @@ export default function ChatFragment({ target, showReturnButton, onReturnButtonC
         const oldest = messagesList[0]
         setMessagesList(returnMsgs.concat(messagesList))
         setTimeout(() => chatPanelRef.current!.scrollTo({ top: $(`#chat_${target}_message_${oldest.id}`).get(0).offsetTop, behavior: 'smooth' }), 100)
-
-        page.current++
     }
 
     React.useEffect(() => {

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

@@ -1,23 +1,8 @@
+import openImageViewer from "../openImageViewer.ts"
+import { snackbar } from "../snackbar.ts"
+
 import { $ } from 'mdui/jq'
 
-import 'pinch-zoom-element'
-import { snackbar } from "../snackbar.ts";
-
-function openImageViewer(src: string) {
-    $('#image-viewer-dialog-inner').empty()
-
-    const e = new Image()
-    e.onload = () => ($('#image-viewer-dialog-inner').get(0) as any).scaleTo(0.1, {
-        // Transform origin. Can be a number, or string percent, eg "50%"
-        originX: '50%',
-        originY: '50%',
-        // Should the transform origin be relative to the container, or content?
-        relativeTo: 'container',
-    })
-    e.src = src
-    $('#image-viewer-dialog-inner').append(e)
-    $('#image-viewer-dialog').attr('open', 'true')
-}
 
 customElements.define('chat-image', class extends HTMLElement {
     constructor() {

client/ui/dialog/AddContactDialog.tsx

@@ -16,26 +16,33 @@ export default function AddContactDialog({
     addContactDialogRef,
 }: Refs) {
     const inputUserAccountRef = React.useRef<TextField>(null)
+
+    async function addContact() {
+        const re = await Client.invoke("User.addContact", {
+            account: inputUserAccountRef.current!.value,
+            token: data.access_token,
+        })
+
+        if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
+        snackbar({
+            message: "添加成功!",
+            placement: "top",
+        })
+        EventBus.emit('ContactsList.updateContacts')
+
+        inputUserAccountRef.current!.value = ''
+        addContactDialogRef.current!.open = false
+    }
+
     return (
         <mdui-dialog close-on-overlay-click close-on-esc headline="添加對話" ref={addContactDialogRef}>
             現階段只支持添加用戶, 對話敬請期待...
-            <mdui-text-field style={{ marginTop: "10px", }} label="對方的 用戶 ID / 用戶名" ref={inputUserAccountRef as any}></mdui-text-field>
+            <mdui-text-field style={{ marginTop: "10px", }} clearable label="對方的 用戶 ID / 用戶名" ref={inputUserAccountRef as any} onKeyDown={(event) => {
+                if (event.key == 'Enter')
+                    addContact()
+            }}></mdui-text-field>
             <mdui-button slot="action" variant="text" onClick={() => addContactDialogRef.current!.open = false}>取消</mdui-button>
-            <mdui-button slot="action" variant="text" onClick={async () => {
-                const re = await Client.invoke("User.addContact", {
-                    account: inputUserAccountRef.current!.value,
-                    token: data.access_token,
-                })
-        
-                if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
-                snackbar({
-                    message: "添加成功!",
-                    placement: "top",
-                })
-                EventBus.emit('ContactsList.updateContacts')
-                
-                addContactDialogRef.current!.open = false
-            }}>添加</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={() => addContact()}>添加</mdui-button>
         </mdui-dialog>
     )
 }

client/ui/openImageViewer.ts

@@ -0,0 +1,17 @@
+import { $ } from 'mdui/jq'
+import 'pinch-zoom-element'
+export default function openImageViewer(src: string) {
+    $('#image-viewer-dialog-inner').empty()
+
+    const e = new Image()
+    e.onload = () => ($('#image-viewer-dialog-inner').get(0) as any).scaleTo(0.1, {
+        // Transform origin. Can be a number, or string percent, eg "50%"
+        originX: '50%',
+        originY: '50%',
+        // Should the transform origin be relative to the container, or content?
+        relativeTo: 'container',
+    })
+    e.src = src
+    $('#image-viewer-dialog-inner').append(e)
+    $('#image-viewer-dialog').attr('open', 'true')
+}

server/data/MessageBean.ts

@@ -2,6 +2,7 @@ export default class MessageBean {
     declare id: number
     declare text: string
     declare user_id?: string
+    declare time: string
 
     [key: string]: unknown
 }

server/data/MessagesManager.ts

@@ -27,7 +27,8 @@ export default class MessagesManager {
             CREATE TABLE IF NOT EXISTS ${this.getTableName()} (
                 /* 序号, MessageId */ id INTEGER PRIMARY KEY AUTOINCREMENT,
                 /* 消息文本 */ text TEXT NOT NULL,
-                /* 发送者 */ user_id TEXT NOT NULL
+                /* 发送者 */ user_id TEXT NOT NULL,
+                /* 發送時間 */ time INT8 NOT NULL
             );
        `)
     }
@@ -36,17 +37,21 @@ export default class MessagesManager {
     }
     addMessage({
         text,
-        user_id
+        user_id,
+        time
     }: {
         text: string,
-        user_id?: string
+        user_id?: string,
+        time?: number
     }) {
         return MessagesManager.database.prepare(`INSERT INTO ${this.getTableName()} (
             text,
-            user_id
-        ) VALUES (?, ?);`).run(
+            user_id,
+            time
+        ) VALUES (?, ?, ?);`).run(
             text,
-            user_id || null
+            user_id || null,
+            time || Date.now()
         ).lastInsertRowid
     }
     addSystemMessage(text: string) {