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,8 +72,10 @@ 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.getType() == 'group' && chatInfo.isAdmin() && <MduiTabFitSize value="NewMemberRequests">加入请求</MduiTabFitSize>}
@@ -83,7 +84,6 @@ export default function ChatFragment({
                         : <MduiTabFitSize value="RequestJoin">{chatInfo.getTitle()}</MduiTabFitSize>
                 }
                 {chatInfo.getType() == 'group' && <MduiTabFitSize value="Settings">设置</MduiTabFitSize>}
-            <MduiTabFitSize value="None" style={{ display: 'none' }}></MduiTabFitSize>
                 <div style={{
                     flexGrow: '1',
                 }}></div>
@@ -108,6 +108,7 @@ export default function ChatFragment({
                     marginRight: '5px',
                 }}></mdui-button-icon>
             </mdui-tabs>
+        </mdui-tabs>
         <mdui-tab-panel slot="panel" value="RequestJoin" style={{
             display: tabItemSelected == "RequestJoin" ? "flex" : "none",
             flexDirection: "column",
@@ -136,17 +137,7 @@ export default function ChatFragment({
             }}>
                 {/* 这里显示一些提示 */}
             </div>
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'flex-end',
-                alignItems: 'center',
-                marginBottom: '20px',
-                paddingTop: "15px",
-                flexGrow: '1',
-            }}>
-                {/* 消息放在这里 */}
-            </div>
+            <ChatMessageContainer chatInfo={chatInfo} />
             {
                 // 输入框
             }
@@ -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