chore: 通過 ESM 引入外部脚本

* React, ReactDOM 和 CryptoES
* 集中在 Imports.ts 中
* 向每一個 JSX 添加 React 的 import

client/Data.ts

@@ -1,8 +1,10 @@
+import { CryptoES } from './Imports.ts'
+
 const dataIsEmpty = !localStorage.tws_data || localStorage.tws_data == ''
 
 const aes = {
-    enc: (m: string, k: string) => CryptoJS.AES.encrypt(m, k).toString(),
-    dec: (m: string, k: string) => CryptoJS.AES.decrypt(m, k).toString(CryptoJS.enc.Utf8),
+    enc: (m: string, k: string) => CryptoES.AES.encrypt(m, k).toString(CryptoES.enc.Utf8),
+    dec: (m: string, k: string) => CryptoES.AES.decrypt(m, k).toString(CryptoES.enc.Utf8),
 }
 
 const key = location.host + '_TWS_姐姐'

client/Imports.ts

@@ -0,0 +1,9 @@
+import * as React from 'https://esm.sh/react@18.3.1'
+import * as ReactDOM from 'https://esm.sh/react-dom@18.3.1'
+import CryptoES from 'https://unpkg.com/crypto-es@3.0.4/dist/index.mjs'
+
+export {
+    React,
+    ReactDOM,
+    CryptoES,
+}

client/ui/App.jsx

@@ -1,12 +1,14 @@
-import Client from "../api/Client.ts";
-import data from "../Data.ts";
+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 snackbar from "./snackbar.js"
 import useEventListener from './useEventListener.js'
 
+import { React } from '../Imports.ts'
+
 export default function App() {
     const [recentsList, setRecentsList] = React.useState([
         /* {
@@ -51,7 +53,8 @@ export default function App() {
         loginButtonRef
     ] = [React.useRef(null), React.useRef(null), React.useRef(null), React.useRef(null), React.useRef(null)]
 
-    React.useEffect(async () => {
+    React.useEffect(() => {
+        ; (async () => {
             Client.connect()
             const re = await Client.invoke("User.auth", {
                 access_token: data.access_token,
@@ -60,7 +63,9 @@ export default function App() {
                 loginDialogRef.current.show()
             else if (re.code != 200)
                 snackbar("驗證失敗: " + re.msg)
-    })
+        })()
+        return () => { }
+    }, [])
 
     return (
         <div style={{
@@ -70,7 +75,7 @@ export default function App() {
             height: 'var(--whitesilk-window-height)',
         }}>
             <LoginDialog
-                ref={loginDialogRef}
+                loginDialogRef={loginDialogRef}
                 inputAccountRef={inputAccountRef}
                 inputPasswordRef={inputPasswordRef}
                 registerButtonRef={registerButtonRef}
@@ -91,6 +96,7 @@ export default function App() {
             {
                 // 侧边列表
             }
+            <div id="SideBar">
                 {
                     // 最近聊天
                     <mdui-list style={{
@@ -137,20 +143,21 @@ export default function App() {
                         </mdui-collapse>
                     </mdui-list>
                 }
+            </div>
             {
                 // 分割线
             }
-            <div style={{
+            {/* <div style={{
                 // 我们删除了 body 的padding 因此不需要再 calc 了
                 height: 'var(--whitesilk-window-height)',
                 marginRight: '10px',
             }}>
                 <mdui-divider vertical></mdui-divider>
-            </div>
+            </div> */}
             {
                 // 聊天页面
             }
-            <ChatFragment />
+            <ChatFragment id="ChatFragment" />
         </div>
     )
 }

client/ui/Avatar.jsx

@@ -1,3 +1,5 @@
+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,9 @@
 import Message from "./Message.jsx"
 import MessageContainer from "./MessageContainer.jsx"
 
-export default function ChatFragment() {
+import { React } from '../../Imports.ts'
+
+export default function ChatFragment({ ...props } = {}) {
     return (
         <div style={{
             width: '100%',
@@ -9,7 +11,7 @@ export default function ChatFragment() {
             display: 'flex',
             flexDirection: 'column',
             overflowY: 'auto',
-        }}>
+        }} {...props}>
             <mdui-top-app-bar style={{
                 position: 'sticky',
             }}>
@@ -48,7 +50,7 @@ export default function ChatFragment() {
                     bottom: '0',
                     backgroundColor: 'rgb(var(--mdui-color-background))',
                 }}>
-                    <mdui-text-field variant="outlined" placeholder="喵呜~" style={{
+                    <mdui-text-field variant="outlined" placeholder="喵呜~" autosize max-rows="1" style={{
                         marginRight: '10px',
                     }}></mdui-text-field>
                     <mdui-button-icon slot="end-icon" icon="more_vert" style={{

client/ui/chat/Message.jsx

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

client/ui/chat/MessageContainer.jsx

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

client/ui/chat/SystemMessage.jsx

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

client/ui/dialog/LoginDialog.jsx

@@ -1,12 +1,14 @@
+import { React } from '../../Imports.ts'
+
 export default function LoginDialog({
     inputAccountRef,
     inputPasswordRef,
     registerButtonRef,
     loginButtonRef,
-    ...prop
+    loginDialogRef
 }) {
     return (
-        <mdui-dialog headline="登录" {...prop}>
+        <mdui-dialog headline="登录" ref={loginDialogRef}>
 
             <mdui-text-field label="账号" ref={inputAccountRef}></mdui-text-field>
             <div style={{

client/ui/main/ContactsListItem.jsx

@@ -1,5 +1,7 @@
 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,5 +1,7 @@
 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/useEventListener.js

@@ -3,6 +3,8 @@
  * @param { Event } event 
  */
 
+import { React } from "../Imports.ts"
+
 /**
  * 绑定事件
  * @param { React.Ref } ref