refactor: 推翻舊架構, 進入 Vite 盛世！

* 所有的 CDN 依賴已全部 npm 化
* Webpack? 一邊去! Vite 太好用啦!
* 將 Imports.ts 剔除
* 移除了大量的靜態文件
* 將 index.html 的部分代碼分離
* 修改 deno task
* 移除了動態編譯頁面的支持
* ./static 引用全部變更為 npm 包引用

client/ui/App.tsx

@@ -4,29 +4,24 @@ import ChatFragment from "./chat/ChatFragment.jsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import ContactsListItem from "./main/ContactsListItem.jsx"
 import RecentsListItem from "./main/RecentsListItem.jsx"
-import snackbar from "./snackbar.js"
 import useEventListener from './useEventListener.js'
-
-import { MduiDialog, React, MduiNavigationRail, MduiTextField, MduiButton } from '../Imports.ts'
 import User from "../api/client_data/User.ts"
 import RecentChat from "../api/client_data/RecentChat.ts"
 
-import '../typedef/mdui-jsx.d.ts'
+import * as React from 'react'
+import * as CryptoES from 'crypto-es'
+import { Button, Dialog, NavigationRail, snackbar, TextField } from "mdui"
+import Split from 'split.js'
+import 'mdui/jsx.zh-cn.d.ts'
 
-declare function Split(r: unknown, s: unknown): {
-    setSizes?: undefined;
-    getSizes?: undefined;
-    collapse?: undefined;
-    destroy?: undefined;
-    parent?: undefined;
-    pairs?: undefined;
-} | {
-    setSizes: (e: unknown) => void;
-    getSizes: () => unknown;
-    collapse: (e: unknown) => void;
-    destroy: (e: unknown, t: unknown) => void;
-    parent: unknown;
-    pairs: unknown[];
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicAttributes {
+                id?: string
+            }
+        }
+    }
 }
 
 export default function App() {
@@ -62,14 +57,28 @@ export default function App() {
 
     const navigationRailRef = React.useRef(null)
     useEventListener(navigationRailRef, 'change', (event) => {
-        setNavigationItemSelected((event.target as HTMLElement as MduiNavigationRail).value as string)
+        setNavigationItemSelected((event.target as HTMLElement as NavigationRail).value as string)
     })
 
-    const loginDialogRef: React.MutableRefObject<MduiDialog | null> = React.useRef(null)
-    const inputAccountRef: React.MutableRefObject<MduiTextField | null> = React.useRef(null)
-    const inputPasswordRef: React.MutableRefObject<MduiTextField | null> = React.useRef(null)
-    const registerButtonRef: React.MutableRefObject<MduiButton | null> = React.useRef(null)
-    const loginButtonRef: React.MutableRefObject<MduiButton | null> = React.useRef(null)
+    const loginDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
+    const inputAccountRef: React.MutableRefObject<TextField | null> = React.useRef(null)
+    const inputPasswordRef: React.MutableRefObject<TextField | null> = React.useRef(null)
+    const registerButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
+    const loginButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
+
+    useEventListener(loginButtonRef, 'click', async () => {
+        const account = inputAccountRef.current!.value
+        const password = inputPasswordRef.current!.value
+
+        const re = await Client.invoke("User.login", {
+            account: account,
+            password: CryptoES.SHA256(password),
+        })
+        if (re.code != 200)
+            snackbar({
+                message: "登錄失敗: " + re.msg
+            })
+    })
 
     React.useEffect(() => {
         ;(async () => {
@@ -86,7 +95,9 @@ export default function App() {
             if (re.code == 401)
                 loginDialogRef.current!.open = true
             else if (re.code != 200)
-                snackbar("驗證失敗: " + re.msg)
+                snackbar({
+                    message: "驗證失敗: " + re.msg
+                })
         })()
     }, [])
 

client/ui/Avatar.jsx

@@ -1,5 +1,3 @@
-import { React } from '../Imports.ts'
-
 export default function Avatar({ src, text, icon = 'person', ...props } = {}) {
     return (
         src ? <mdui-avatar {...props}>

client/ui/chat/ChatFragment.jsx

@@ -1,7 +1,7 @@
 import Message from "./Message.jsx"
 import MessageContainer from "./MessageContainer.jsx"
 
-import { React } from '../../Imports.ts'
+import * as React from 'react'
 
 export default function ChatFragment({ ...props } = {}) {
     return (

client/ui/chat/Message.jsx

@@ -1,7 +1,5 @@
 import Avatar from "../Avatar.jsx"
 
-import { React } from '../../Imports.ts'
-
 /**
  * 一条消息
  * @param { Object } param

client/ui/chat/MessageContainer.jsx

@@ -1,5 +1,3 @@
-import { React } from '../../Imports.ts'
-
 /**
  * 消息容器
  * @returns { React.JSX.Element }

client/ui/chat/SystemMessage.jsx

@@ -1,5 +1,3 @@
-import { React } from '../../Imports.ts'
-
 /**
  * 一条系统提示消息
  * @returns { React.JSX.Element }

client/ui/dialog/LoginDialog.tsx

@@ -1,11 +1,12 @@
-import { React, MduiDialog, MduiTextField, MduiButton } from '../../Imports.ts'
+import * as React from 'react'
+import { Button, Dialog, TextField } from "mdui";
 
 interface Refs {
-    inputAccountRef: React.MutableRefObject<MduiTextField | null>
-    inputPasswordRef: React.MutableRefObject<MduiTextField | null>
-    registerButtonRef: React.MutableRefObject<MduiButton | null>
-    loginButtonRef: React.MutableRefObject<MduiButton | null>
-    loginDialogRef: React.MutableRefObject<MduiDialog | null>
+    inputAccountRef: React.MutableRefObject<TextField | null>
+    inputPasswordRef: React.MutableRefObject<TextField | null>
+    registerButtonRef: React.MutableRefObject<Button | null>
+    loginButtonRef: React.MutableRefObject<Button | null>
+    loginDialogRef: React.MutableRefObject<Dialog | null>
 }
 
 export default function LoginDialog({

client/ui/main/ContactsListItem.jsx

@@ -1,7 +1,5 @@
 import Avatar from "../Avatar.jsx"
 
-import { React } from '../../Imports.ts'
-
 export default function ContactsListItem({ nickName, avatar }) {
     return (
         <mdui-list-item rounded style={{

client/ui/main/RecentsListItem.jsx

@@ -1,7 +1,5 @@
 import Avatar from "../Avatar.jsx"
 
-import { React } from '../../Imports.ts'
-
 export default function RecentsListItem({ nickName, avatar, content }) {
     return (
         <mdui-list-item rounded style={{

client/ui/snackbar.js

@@ -1,3 +0,0 @@
-export default function snackbar(text) {
-    $("#public_snackbar").text(text).get(0).open()
-}

client/ui/useEventListener.js

@@ -3,7 +3,7 @@
  * @param { Event } event 
  */
 
-import { React } from "../Imports.ts"
+import * as React from 'react'
 
 /**
  * 绑定事件