From af1fd4e98a36d1fff1d8c4b5a1282707aea09c27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E8=AA=89=E7=A8=8B?= <2659568239@qq.com>
Date: Wed, 11 Sep 2024 16:31:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/lib/components/Notifications.jsx | 141 ++++++++++++---------------
 server/config.js                     |   2 +-
 2 files changed, 61 insertions(+), 82 deletions(-)

diff --git a/app/lib/components/Notifications.jsx b/app/lib/components/Notifications.jsx
index d38db4d..c79a1be 100644
--- a/app/lib/components/Notifications.jsx
+++ b/app/lib/components/Notifications.jsx
@@ -1,104 +1,83 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import * as appPropTypes from './appPropTypes';
 import * as stateActions from '../redux/stateActions';
-import { Appear } from './transitions';
 
 const Notifications = ({ notifications, onClick }) => {
-	console.log("notifications", notifications);
+    const chatwarpRef = useRef(null);
 
-	return (
-		<div data-component='Notifications' style={{
-			width: '383px',
-			background: '#F6F7F9',
-			borderRadius: '8px',
-			margin: '48px 30px 19px 0px'
-		}}>
-			<div className='chatTitle'>聊天</div>
+    useEffect(() => {
+        if (chatwarpRef.current) {
+            chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight;
+        }
+    }, [notifications]);
 
-			<div className='chatwarp'>
-				{
-					notifications.map((notification) => {
-						return (
-							<div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}>
-								{
-									// 类型是否是用户发送的消息
-									notification.type == 'userMessage' ?
-										<div style={{marginTop: 36}}>
-											{
-												notification.isMe ?
-													<div style={{ display: 'flex', flexDirection: 'row-reverse', flexWrap: 'wrap' }}>
-														<div style={{ color: '#232B40', marginBottom: 10, width: '100%', textAlign: 'right' }}>我</div>
-														<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#CDD8F1', borderRadius: '8px 0px 8px 8px' }}>
-															{notification.text}
-														</div>
-													</div> :
-													<>
-														<div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
-														<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
-															{notification.text}
-														</div>
-													</>
-											}
-										</div> :
-										<div style={{width: '100%', margin: '20px 0', textAlign: 'center'}}>
-											{notification.text}
-										</div>
-								}
+    return (
+        <div data-component='Notifications' style={{
+            width: '383px',
+            background: '#F6F7F9',
+            borderRadius: '8px',
+            margin: '48px 30px 19px 0px'
+        }}>
+            <div className='chatTitle'>聊天</div>
 
-							</div>
-
-
-							// 信息提示动画
-							// <Appear key={notification.id} duration={250}>
-							// 	<div
-							// 		className={classnames('notification', notification.type)}
-							// 		onClick={() => onClick(notification.id)}
-							// 	>
-							// 		<div className='icon' />
-
-							// 		<div className='body'>
-							// 			<If condition={notification.title}>
-							// 				<p className='title'>{notification.title}</p>
-							// 			</If>
-
-							// 			<p className='text'>{notification.text}</p>
-							// 		</div>
-							// 	</div>
-							// </Appear>
-						);
-					})
-				}
-			</div>
-		</div>
-	);
+            <div className='chatwarp' ref={chatwarpRef}>
+                {
+                    notifications.map((notification) => (
+                        <div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}>
+                            {
+                                notification.type === 'userMessage' ?
+                                    <div style={{marginTop: 36}}>
+                                        {
+                                            notification.isMe ?
+                                                <div style={{ display: 'flex', flexDirection: 'row-reverse', flexWrap: 'wrap' }}>
+                                                    <div style={{ color: '#232B40', marginBottom: 10, width: '100%', textAlign: 'right' }}>我</div>
+                                                    <div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#CDD8F1', borderRadius: '8px 0px 8px 8px' }}>
+                                                        {notification.text}
+                                                    </div>
+                                                </div> :
+                                                <>
+                                                    <div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
+                                                    <div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
+                                                        {notification.text}
+                                                    </div>
+                                                </>
+                                        }
+                                    </div> :
+                                    <div style={{width: '100%', margin: '30px 0', textAlign: 'center'}}>
+                                        {notification.text}
+                                    </div>
+                            }
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    );
 };
 
-Notifications.propTypes =
-{
-	notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
-	onClick: PropTypes.func.isRequired
+Notifications.propTypes = {
+    notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
+    onClick: PropTypes.func.isRequired
 };
 
 const mapStateToProps = (state) => {
-	const { notifications } = state;
-
-	return { notifications };
+    const { notifications } = state;
+    return { notifications };
 };
 
 const mapDispatchToProps = (dispatch) => {
-	return {
-		onClick: (notificationId) => {
-			dispatch(stateActions.removeNotification(notificationId));
-		}
-	};
+    return {
+        onClick: (notificationId) => {
+            dispatch(stateActions.removeNotification(notificationId));
+        }
+    };
 };
 
 const NotificationsContainer = connect(
-	mapStateToProps,
-	mapDispatchToProps
+    mapStateToProps,
+    mapDispatchToProps
 )(Notifications);
 
 export default NotificationsContainer;
diff --git a/server/config.js b/server/config.js
index d4b0f94..f2243b5 100644
--- a/server/config.js
+++ b/server/config.js
@@ -17,7 +17,7 @@ module.exports =
 	// Signaling settings (protoo WebSocket server and HTTP API server).
 	https  :
 	{
-		listenIp   : '0.0.0.0', // 换成你的IP地址
+		listenIp   : '192.168.0.167', // 换成你的IP地址
 		// NOTE: Don't change listenPort (client app assumes 4443).
 		listenPort : process.env.PROTOO_LISTEN_PORT || 4443,
 		// NOTE: Set your own valid certificate files.