From d5e38a8167b39df6c415cbae1c3d6e850952b7ad Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sat, 6 Sep 2025 01:51:57 +0800
Subject: [PATCH] feat: Client calling server API

---
 client/api/ApiCallbackMessage.ts |   1 +
 client/api/ApiDeclare.ts         |   4 ++
 client/api/Client.ts             |  34 ++++++++---
 client/ui/App.jsx                | 100 +++++++++++--------------------
 4 files changed, 68 insertions(+), 71 deletions(-)

diff --git a/client/api/ApiCallbackMessage.ts b/client/api/ApiCallbackMessage.ts
index 185651b..e94b2df 100644
--- a/client/api/ApiCallbackMessage.ts
+++ b/client/api/ApiCallbackMessage.ts
@@ -10,5 +10,6 @@ type ApiCallbackMessage = {
      * 501: 伺服器端不支持請求的功能
      */
     code: 200 | 400 | 401 | 403 | 404 | 500 | 501,
+    data?: { [key: string]: unknown },
 }
 export default ApiCallbackMessage
diff --git a/client/api/ApiDeclare.ts b/client/api/ApiDeclare.ts
index a907e67..fc84148 100644
--- a/client/api/ApiDeclare.ts
+++ b/client/api/ApiDeclare.ts
@@ -1,3 +1,7 @@
 export type CallMethod = 
+    "User.auth" |
     "User.register" |
     "User.login"
+
+export type ClientEvent = 
+    "Client.onMessage"
diff --git a/client/api/Client.ts b/client/api/Client.ts
index 55a7d14..4c272bc 100644
--- a/client/api/Client.ts
+++ b/client/api/Client.ts
@@ -1,21 +1,41 @@
 import { io, Socket } from 'https://unpkg.com/socket.io-client@4.8.1/dist/socket.io.esm.min.js'
-import { CallMethod } from './ApiDeclare.ts'
+import { CallMethod, ClientEvent } from './ApiDeclare.ts'
 import ApiCallbackMessage from './ApiCallbackMessage.ts'
 
+type UnknownObject = { [key: string]: unknown }
+
 class Client {
-    static socket: Socket
+    static socket?: Socket
+    static events: { [key: string]: (data: UnknownObject) => UnknownObject } = {}
     static connect() {
-        this.socket && this.socket.disconnect()
+        this.socket?.disconnect()
+        this.socket && delete this.socket
         this.socket = io()
+        this.socket!.on("The_White_Silk", (name: string, data: UnknownObject, callback: (ret: UnknownObject) => void) => {
+            try {
+                if (name == null || data == null) return
+                const re = this.events[name]?.(data)
+                re && callback(re)
+            } catch (e) {
+                console.error(e)
+            }
+        })
     }
-    static call(method: CallMethod, args: {}, timeout: number = 5000) {
+    static invoke(method: CallMethod, args: UnknownObject = {}, timeout: number = 5000): Promise<ApiCallbackMessage> {
+        if (this.socket == null) throw new Error("客戶端未與伺服器端建立連接！")
         return new Promise((resolve, reject) => {
-            this.socket.timeout().emit("The_White_Silk", (err, res: ApiCallbackMessage) => {
-                if (err) return reject(err)
-                
+            this.socket!.timeout(timeout).emit("The_White_Silk", method, args, (err: string, res: ApiCallbackMessage) => {
+                if (err) return reject(err) 
+                resolve(res)
             })
         })
     }
+    static on(eventName: ClientEvent, func: (data: UnknownObject) => UnknownObject) {
+        this.events[eventName] = func
+    }
+    static off(eventName: ClientEvent){
+        delete this.events[eventName]
+    }
 }
 
 export default Client
diff --git a/client/ui/App.jsx b/client/ui/App.jsx
index 4d7ad1b..d75624b 100644
--- a/client/ui/App.jsx
+++ b/client/ui/App.jsx
@@ -1,12 +1,15 @@
-import Message from "./chat/Message.jsx"
-import MessageContainer from "./chat/MessageContainer.jsx"
+import Client from "../api/Client.ts";
+import data from "../Data.ts";
+import ChatFragment from "./chat/ChatFragment.jsx"
+import LoginDialog from "./dialog/LoginDialog.jsx"
 import ContactsListItem from "./main/ContactsListItem.jsx"
 import RecentsListItem from "./main/RecentsListItem.jsx"
+import snackbar from "./snackbar.js";
 import useEventListener from './useEventListener.js'
 
 export default function App() {
     const [recentsList, setRecentsList] = React.useState([
-        {
+        /* {
             userId: 0,
             avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
             nickName: "麻油衣酱",
@@ -17,11 +20,11 @@ export default function App() {
             avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
             nickName: "Maya Fey",
             content: "我是绫里真宵, 是一名灵媒师~"
-        },
+        }, */
     ])
     const [contactsMap, setContactsMap] = React.useState({
         所有: [
-            {
+            /* {
                 userId: 0,
                 avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
                 nickName: "麻油衣酱",
@@ -30,7 +33,7 @@ export default function App() {
                 userId: 0,
                 avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
                 nickName: "Maya Fey",
-            },
+            }, */
         ],
     })
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
@@ -40,6 +43,25 @@ export default function App() {
         setNavigationItemSelected(event.target.value)
     })
 
+    const [
+        loginDialogRef,
+        inputAccountRef,
+        inputPasswordRef,
+        registerButtonRef,
+        loginButtonRef
+    ] = [React.useRef(null), React.useRef(null), React.useRef(null), React.useRef(null), React.useRef(null)]
+
+    React.useEffect(async () => {
+        Client.connect()
+        const re = await Client.invoke("User.auth", {
+            access_token: data.access_token,
+        })
+        if (re.code == 401)
+            loginDialogRef.current.show()
+        else if (re.code != 200)
+            snackbar("驗證失敗: " + re.msg)
+    })
+
     return (
         <div style={{
             display: "flex",
@@ -47,6 +69,12 @@ export default function App() {
             width: 'calc(var(--whitesilk-window-width) - 80px)',
             height: 'var(--whitesilk-window-height)',
         }}>
+            <LoginDialog
+                ref={loginDialogRef}
+                inputAccountRef={inputAccountRef}
+                inputPasswordRef={inputPasswordRef}
+                registerButtonRef={registerButtonRef}
+                loginButtonRef={loginButtonRef} />
             {
                 // 移动端用 页面调试
                 // 換個地方弄
@@ -91,7 +119,7 @@ export default function App() {
                     display: navigationItemSelected == "Contacts" ? null : 'none'
                 }}>
                     <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
-                        { 
+                        {
                             Object.keys(contactsMap).map((v) =>
                                 <mdui-collapse-item key={v} value={v}>
                                     <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
@@ -122,63 +150,7 @@ export default function App() {
             {
                 // 聊天页面
             }
-            <div style={{
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                overflowY: 'auto',
-            }}>
-                <mdui-top-app-bar style={{
-                    position: 'sticky',
-                }}>
-                    <mdui-button-icon icon="menu"></mdui-button-icon>
-                    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
-                    <mdui-button-icon icon="more_vert"></mdui-button-icon>
-                </mdui-top-app-bar>
-                <div style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    height: "100%",
-                }}>
-                    <div style={{
-                        display: "flex",
-                        justifyContent: "center",
-                    }}>
-                        <mdui-button variant="text">加載更多</mdui-button>
-                    </div>
-                    <MessageContainer>
-                        <Message
-                            nickName="Fey"
-                            avatar="https://www.court-records.net/mugshot/aa6-004-maya.png">
-                            Test
-                        </Message>
-                    </MessageContainer>
-                    {
-                        // 输入框
-                    }
-                    <div style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        paddingBottom: '0.1rem',
-                        paddingTop: '0.1rem',
-                        height: '4rem',
-                        position: 'sticky',
-                        bottom: '0',
-                        backgroundColor: 'rgb(var(--mdui-color-background))',
-                    }}>
-                        <mdui-text-field variant="outlined" placeholder="喵呜~" style={{
-                            marginRight: '10px',
-                        }}></mdui-text-field>
-                        <mdui-button-icon slot="end-icon" icon="more_vert" style={{
-                            marginRight: '6px',
-                        }}></mdui-button-icon>
-                        <mdui-button-icon icon="send" style={{
-                            marginRight: '7px',
-                        }}></mdui-button-icon>
-                    </div>
-                </div>
-            </div>
+            <ChatFragment />
         </div>
     )
 }
\ No newline at end of file