updated

client/ui/chat-fragment/ChatFragment.tsx

@@ -12,6 +12,7 @@ import PreferenceUpdater from "../preference/PreferenceUpdater"
 import SwitchPreference from "../preference/SwitchPreference"
 import TextFieldPreference from "../preference/TextFieldPreference"
 import * as React from 'react'
+import ChatMessageContainer from "./ChatMessageContainer"
 
 interface MduiTabFitSizeArgs extends React.HTMLAttributes<HTMLElement & Tab> {
     value: string
@@ -34,7 +35,7 @@ export default function ChatFragment({
 }) {
     const nav = useNavigate()
 
-    const [tabItemSelected, setTabItemSelected] = React.useState('None')
+    const [tabItemSelected, setTabItemSelected] = React.useState('Chat')
     const tabRef = React.useRef<Tab>()
     useEventListener(tabRef, 'change', () => {
         tabRef.current != null && setTabItemSelected(tabRef.current!.value as string)
@@ -43,8 +44,6 @@ export default function ChatFragment({
     const chatPanelRef = React.useRef<HTMLElement>()
     const inputRef = React.useRef<TextField>()
 
-    
-
     return <div style={{
         width: '100%',
         height: '100%',
@@ -73,40 +72,42 @@ export default function ChatFragment({
                 display: "flex",
                 flexDirection: "column",
                 height: "100%",
+                width: '100%',
                 overflowX: 'auto',
-            }}></mdui-tabs>{
+            }}>
-                chatInfo.isMember() ? <>
+                {
-                    <MduiTabFitSize value="Chat">{chatInfo.getTitle()}</MduiTabFitSize>
+                    chatInfo.isMember() ? <>
-                    {chatInfo.getType() == 'group' && chatInfo.isAdmin() && <MduiTabFitSize value="NewMemberRequests">加入请求</MduiTabFitSize>}
+                        <MduiTabFitSize value="Chat">{chatInfo.getTitle()}</MduiTabFitSize>
-                    {chatInfo.getType() == 'group' && <MduiTabFitSize value="GroupMembers">群组成员</MduiTabFitSize>}
+                        {chatInfo.getType() == 'group' && chatInfo.isAdmin() && <MduiTabFitSize value="NewMemberRequests">加入请求</MduiTabFitSize>}
-                </>
+                        {chatInfo.getType() == 'group' && <MduiTabFitSize value="GroupMembers">群组成员</MduiTabFitSize>}
-                    : <MduiTabFitSize value="RequestJoin">{chatInfo.getTitle()}</MduiTabFitSize>
+                    </>
-            }
+                        : <MduiTabFitSize value="RequestJoin">{chatInfo.getTitle()}</MduiTabFitSize>
-            {chatInfo.getType() == 'group' && <MduiTabFitSize value="Settings">设置</MduiTabFitSize>}
+                }
-            <MduiTabFitSize value="None" style={{ display: 'none' }}></MduiTabFitSize>
+                {chatInfo.getType() == 'group' && <MduiTabFitSize value="Settings">设置</MduiTabFitSize>}
-            <div style={{
+                <div style={{
-                flexGrow: '1',
+                    flexGrow: '1',
-            }}></div>
+                }}></div>
-            <mdui-button-icon icon="open_in_new" onClick={() => {
+                <mdui-button-icon icon="open_in_new" onClick={() => {
-                window.open('/chat?id=' + chatInfo.getId(), '_blank')
+                    window.open('/chat?id=' + chatInfo.getId(), '_blank')
 
-            }} style={{
+                }} style={{
-                alignSelf: 'center',
+                    alignSelf: 'center',
-                marginLeft: '5px',
+                    marginLeft: '5px',
-                marginRight: '5px',
+                    marginRight: '5px',
-            }}></mdui-button-icon>
+                }}></mdui-button-icon>
-            <mdui-button-icon icon="refresh" onClick={() => {
+                <mdui-button-icon icon="refresh" onClick={() => {
 
-            }} style={{
+                }} style={{
-                alignSelf: 'center',
+                    alignSelf: 'center',
-                marginLeft: '5px',
+                    marginLeft: '5px',
-                marginRight: '5px',
+                    marginRight: '5px',
-            }}></mdui-button-icon>
+                }}></mdui-button-icon>
-            <mdui-button-icon icon="info" onClick={() => gotoChatInfo(nav, chatInfo.getId())} style={{
+                <mdui-button-icon icon="info" onClick={() => gotoChatInfo(nav, chatInfo.getId())} style={{
-                alignSelf: 'center',
+                    alignSelf: 'center',
-                marginLeft: '5px',
+                    marginLeft: '5px',
-                marginRight: '5px',
+                    marginRight: '5px',
-            }}></mdui-button-icon>
+                }}></mdui-button-icon>
+            </mdui-tabs>
         </mdui-tabs>
         <mdui-tab-panel slot="panel" value="RequestJoin" style={{
             display: tabItemSelected == "RequestJoin" ? "flex" : "none",
@@ -136,17 +137,7 @@ export default function ChatFragment({
             }}>
                 {/* 这里显示一些提示 */}
             </div>
-            <div style={{
+            <ChatMessageContainer chatInfo={chatInfo} />
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'flex-end',
-                alignItems: 'center',
-                marginBottom: '20px',
-                paddingTop: "15px",
-                flexGrow: '1',
-            }}>
-                {/* 消息放在这里 */}
-            </div>
             {
                 // 输入框
             }
@@ -301,20 +292,5 @@ export default function ChatFragment({
                 )
             }
         </mdui-tab-panel>
-        <mdui-tab-panel slot="panel" value="None" style={{
-            display: tabItemSelected == "None" ? "flex" : "none",
-            flexDirection: "column",
-            height: "100%",
-        }}>
-            <div style={{
-                display: 'flex',
-                width: '100%',
-                height: '100%',
-                alignItems: "center",
-                justifyContent: "center",
-            }}>
-                <mdui-circular-progress></mdui-circular-progress>
-            </div>
-        </mdui-tab-panel>
     </div >
 }

client/ui/chat-fragment/ChatMessageContainer.tsx

@@ -0,0 +1,24 @@
+import { Chat, Message } from 'lingchair-client-protocol'
+import * as React from 'react'
+
+export default function ChatMessageContainer({
+    chatInfo,
+}: {
+    chatInfo: Chat
+}) {
+    const [messages, setMessages] = React.useState<Message[]>()
+
+    return (
+        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            marginBottom: '20px',
+            paddingTop: "15px",
+            flexGrow: '1',
+        }}>
+            {messages?.map((v) => v.getText())}
+        </div>
+    )
+}

client/ui/chat-fragment/LazyChatFragment.tsx

@@ -9,7 +9,8 @@ import EffectOnly from "../EffectOnly"
 export default function LazyChatFragment({ chatId, openedWithRouter }: { chatId: string, openedWithRouter: boolean }) {
     return <React.Suspense fallback={<EffectOnly effect={() => {
         const s = showSnackbar({
-            message: '请稍后',
+            message: '请稍后...',
+            autoCloseDelay: 0,
         })
         return () => {
             s.open = false