From c5d1f11017c2f81210f4ddf97cdaa221e463bee7 Mon Sep 17 00:00:00 2001
From: CrescentLeaf <crescentleaf@noreply.codeberg.org>
Date: Sat, 6 Sep 2025 14:32:56 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E9=80=9A=E9=81=8E=20ESM=20=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E5=A4=96=E9=83=A8=E8=84=9A=E6=9C=AC=20*=20React,=20Re?=
 =?UTF-8?q?actDOM=20=E5=92=8C=20CryptoES=20*=20=E9=9B=86=E4=B8=AD=E5=9C=A8?=
 =?UTF-8?q?=20Imports.ts=20=E4=B8=AD=20*=20=E5=90=91=E6=AF=8F=E4=B8=80?=
 =?UTF-8?q?=E5=80=8B=20JSX=20=E6=B7=BB=E5=8A=A0=20React=20=E7=9A=84=20impo?=
 =?UTF-8?q?rt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/Data.ts                      |   6 +-
 client/Imports.ts                   |   9 ++
 client/ui/App.jsx                   | 127 +++++++++++++++-------------
 client/ui/Avatar.jsx                |   2 +
 client/ui/chat/ChatFragment.jsx     |   8 +-
 client/ui/chat/Message.jsx          |   2 +
 client/ui/chat/MessageContainer.jsx |   2 +
 client/ui/chat/SystemMessage.jsx    |   2 +
 client/ui/dialog/LoginDialog.jsx    |   6 +-
 client/ui/main/ContactsListItem.jsx |   2 +
 client/ui/main/RecentsListItem.jsx  |   2 +
 client/ui/snackbar.js               |   2 +-
 client/ui/useEventListener.js       |   2 +
 13 files changed, 104 insertions(+), 68 deletions(-)
 create mode 100644 client/Imports.ts

diff --git a/client/Data.ts b/client/Data.ts
index dcef42e..17ed9a3 100644
--- a/client/Data.ts
+++ b/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_姐姐'
diff --git a/client/Imports.ts b/client/Imports.ts
new file mode 100644
index 0000000..48847a1
--- /dev/null
+++ b/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,
+}
diff --git a/client/ui/App.jsx b/client/ui/App.jsx
index d75624b..3ad18b0 100644
--- a/client/ui/App.jsx
+++ b/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,16 +53,19 @@ export default function App() {
         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)
-    })
+    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 () => { }
+    }, [])
 
     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,66 +96,68 @@ export default function App() {
             {
                 // 侧边列表
             }
-            {
-                // 最近聊天
-                <mdui-list style={{
-                    width: "35%",
-                    overflowY: 'auto',
-                    paddingRight: '10px',
-                    display: navigationItemSelected == "Recents" ? null : 'none'
-                }}>
-                    {
-                        recentsList.map((v) =>
-                            <RecentsListItem
-                                key={v.userId}
-                                nickName={v.nickName}
-                                avatar={v.avatar}
-                                content={v.content} />
-                        )
-                    }
-                </mdui-list>
-            }
-            {
-                // 联系人列表
-                <mdui-list style={{
-                    width: "35%",
-                    overflowY: 'auto',
-                    paddingRight: '10px',
-                    display: navigationItemSelected == "Contacts" ? null : 'none'
-                }}>
-                    <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
+            <div id="SideBar">
+                {
+                    // 最近聊天
+                    <mdui-list style={{
+                        width: "35%",
+                        overflowY: 'auto',
+                        paddingRight: '10px',
+                        display: navigationItemSelected == "Recents" ? null : 'none'
+                    }}>
                         {
-                            Object.keys(contactsMap).map((v) =>
-                                <mdui-collapse-item key={v} value={v}>
-                                    <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
-                                    {
-                                        contactsMap[v].map((v2) =>
-                                            <ContactsListItem
-                                                key={v2.userId}
-                                                nickName={v2.nickName}
-                                                avatar={v2.avatar} />
-                                        )
-                                    }
-                                </mdui-collapse-item>
+                            recentsList.map((v) =>
+                                <RecentsListItem
+                                    key={v.userId}
+                                    nickName={v.nickName}
+                                    avatar={v.avatar}
+                                    content={v.content} />
                             )
                         }
-                    </mdui-collapse>
-                </mdui-list>
-            }
+                    </mdui-list>
+                }
+                {
+                    // 联系人列表
+                    <mdui-list style={{
+                        width: "35%",
+                        overflowY: 'auto',
+                        paddingRight: '10px',
+                        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>
+                                        {
+                                            contactsMap[v].map((v2) =>
+                                                <ContactsListItem
+                                                    key={v2.userId}
+                                                    nickName={v2.nickName}
+                                                    avatar={v2.avatar} />
+                                            )
+                                        }
+                                    </mdui-collapse-item>
+                                )
+                            }
+                        </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>
     )
 }
\ No newline at end of file
diff --git a/client/ui/Avatar.jsx b/client/ui/Avatar.jsx
index 619410b..3913857 100644
--- a/client/ui/Avatar.jsx
+++ b/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}>
diff --git a/client/ui/chat/ChatFragment.jsx b/client/ui/chat/ChatFragment.jsx
index 15b1ee7..2dd7fd6 100644
--- a/client/ui/chat/ChatFragment.jsx
+++ b/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={{
diff --git a/client/ui/chat/Message.jsx b/client/ui/chat/Message.jsx
index 05f4615..f80919d 100644
--- a/client/ui/chat/Message.jsx
+++ b/client/ui/chat/Message.jsx
@@ -1,5 +1,7 @@
 import Avatar from "../Avatar.jsx"
 
+import { React } from '../../Imports.ts'
+
 /**
  * 一条消息
  * @param { Object } param
diff --git a/client/ui/chat/MessageContainer.jsx b/client/ui/chat/MessageContainer.jsx
index c4f22de..a307475 100644
--- a/client/ui/chat/MessageContainer.jsx
+++ b/client/ui/chat/MessageContainer.jsx
@@ -1,3 +1,5 @@
+import { React } from '../../Imports.ts'
+
 /**
  * 消息容器
  * @returns { React.JSX.Element }
diff --git a/client/ui/chat/SystemMessage.jsx b/client/ui/chat/SystemMessage.jsx
index c9b9f4b..5a317cf 100644
--- a/client/ui/chat/SystemMessage.jsx
+++ b/client/ui/chat/SystemMessage.jsx
@@ -1,3 +1,5 @@
+import { React } from '../../Imports.ts'
+
 /**
  * 一条系统提示消息
  * @returns { React.JSX.Element }
diff --git a/client/ui/dialog/LoginDialog.jsx b/client/ui/dialog/LoginDialog.jsx
index ab587f4..3f1c065 100644
--- a/client/ui/dialog/LoginDialog.jsx
+++ b/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={{
diff --git a/client/ui/main/ContactsListItem.jsx b/client/ui/main/ContactsListItem.jsx
index 3600ee2..097b5e3 100644
--- a/client/ui/main/ContactsListItem.jsx
+++ b/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={{
diff --git a/client/ui/main/RecentsListItem.jsx b/client/ui/main/RecentsListItem.jsx
index e677948..1f1d709 100644
--- a/client/ui/main/RecentsListItem.jsx
+++ b/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={{
diff --git a/client/ui/snackbar.js b/client/ui/snackbar.js
index ed44c1a..97cfac3 100644
--- a/client/ui/snackbar.js
+++ b/client/ui/snackbar.js
@@ -1,3 +1,3 @@
 export default function snackbar(text) {
     $("#public_snackbar").text(text).get(0).open()
-}
\ No newline at end of file
+}
diff --git a/client/ui/useEventListener.js b/client/ui/useEventListener.js
index 1c0f67e..f1d5610 100644
--- a/client/ui/useEventListener.js
+++ b/client/ui/useEventListener.js
@@ -3,6 +3,8 @@
  * @param { Event } event 
  */
 
+import { React } from "../Imports.ts"
+
 /**
  * 绑定事件
  * @param { React.Ref } ref