CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: 通過 ESM 引入外部脚本

Browse Source 
* React, ReactDOM 和 CryptoES
* 集中在 Imports.ts 中
* 向每一個 JSX 添加 React 的 import
This commit is contained in:
CrescentLeaf
2025-09-06 14:32:56 +08:00
parent b0c67da340
commit c5d1f11017
13 changed files with 104 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/Data.ts
View File

@@ -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_姐姐'

9
client/Imports.ts Normal file
View File

@@ -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,
}

127
client/ui/App.jsx
View File

@@ -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>
)
}

2
client/ui/Avatar.jsx
View File

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

8
client/ui/chat/ChatFragment.jsx
View File

@@ -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={{

2
client/ui/chat/Message.jsx
View File

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

2
client/ui/chat/MessageContainer.jsx
View File

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

2
client/ui/chat/SystemMessage.jsx
View File

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

6
client/ui/dialog/LoginDialog.jsx
View File

@@ -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={{

2
client/ui/main/ContactsListItem.jsx
View File

@@ -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={{

2
client/ui/main/RecentsListItem.jsx
View File

@@ -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={{

2
client/ui/snackbar.js
View File

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

2
client/ui/useEventListener.js
View File

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