From 4530b6b14b762aab70574652102bbd7626e2b5f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=A5=E6=B5=B7?= Date: Thu, 14 Mar 2024 10:49:35 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E7=BE=A4?= =?UTF-8?q?=E8=81=8A=E5=A4=A9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webview/src/apps/wcferry/chatroom.html | 92 +++++++++++++++----------- webview/src/apps/wcferry/chatroom.scss | 31 ++++++++- webview/src/apps/wcferry/chatroom.ts | 14 +++- 3 files changed, 91 insertions(+), 46 deletions(-) diff --git a/webview/src/apps/wcferry/chatroom.html b/webview/src/apps/wcferry/chatroom.html index 3315ec8..9e079c7 100644 --- a/webview/src/apps/wcferry/chatroom.html +++ b/webview/src/apps/wcferry/chatroom.html @@ -11,55 +11,60 @@
-
- @for (item of chatrooms; track item.wxid) { - -
- -
-
-
{{item.remark || item.name || '-'}}
- {{item.wxid}} -
- - } +
+
+ @for (item of chatrooms; track item.wxid) { + +
+ +
+
+
{{item.remark || item.name || '-'}}
+ {{item.wxid}} +
+ + } +
-
+
-
{{chatroom.name}}
+
+ {{chatroom.name}}（{{members.length}}） +
@if (showMember) { - + } @else { - + }
-
-
- @for (item of messages; track item.id) { - @if(item.roomid == chatroom.wxid || item.sender == 'system') { -
+
+ @for (item of messages; track item.id) { + @if(item.roomid == chatroom.wxid) { +
+
-
+
{{memberMap[item.sender] && memberMap[item.sender].name || '-'}}
{{item.ts | date:'yyyy-MM-dd HH:mm:ss'}}
-
+
{{item.content}}
- } - }
+ } + @if (item.sender == 'system') { +
+ [{{item.ts | date:'yyyy-MM-dd HH:mm:ss'}}] {{item.content}} +
+ } + }
@@ -70,18 +75,25 @@
-
- @for (item of members; track item.wxid) { - -
- -
-
-
{{item.remark || item.name || '-'}}
- {{item.wxid}} +
+
+
+ 群成员
- - } +
+
+ @for (item of members; track item.wxid) { + +
+ +
+
+
{{item.remark || item.name || '-'}}
+ {{item.wxid}} +
+ + } +
diff --git a/webview/src/apps/wcferry/chatroom.scss b/webview/src/apps/wcferry/chatroom.scss index 6c2bae3..b06ef3b 100644 --- a/webview/src/apps/wcferry/chatroom.scss +++ b/webview/src/apps/wcferry/chatroom.scss @@ -1,10 +1,35 @@ -.col>div { +.col>div.card { max-height: calc(100vh - 128px); - overflow-x: hidden; - overflow-y: auto; + overflow: hidden; + + .list-group { + overflow-x: hidden; + overflow-y: auto; + + &.chatrooms { + height: 100%; + } + + &.messages { + height: calc(100vh - 228px); + } + + &.members { + height: calc(100vh - 174px); + } + } + } .avatar img { width: 40px; height: 40px; +} + +.msg-system { + color: #999; + + &+.msg-system { + display: none; + } } \ No newline at end of file diff --git a/webview/src/apps/wcferry/chatroom.ts b/webview/src/apps/wcferry/chatroom.ts index ed76aca..45e8592 100644 --- a/webview/src/apps/wcferry/chatroom.ts +++ b/webview/src/apps/wcferry/chatroom.ts @@ -109,14 +109,15 @@ export class WcferryChatroomComponent implements OnDestroy { const url = location.origin.replace(/^http/, 'ws') + '/wcf/socket_receiver'; const wss = new WebSocket(url + (token ? '?token=' + token : '')); wss.onopen = () => { + this.wss = wss; const data = { ts: Date.now(), sender: 'system', content: 'websocket is connected' }; this.messages.push(data as IMessage); - this.wss = wss; }; + // 自动重连 wss.onclose = () => { const data = { ts: Date.now(), @@ -126,6 +127,7 @@ export class WcferryChatroomComponent implements OnDestroy { this.messages.push(data as IMessage); setTimeout(() => this.startSocket(), 5 * 1000); }; + // 捕获错误 wss.onerror = (event) => { const data = { ts: Date.now(), @@ -135,10 +137,16 @@ export class WcferryChatroomComponent implements OnDestroy { this.messages.push(data as IMessage); console.log(event); }; + // 接收消息 + const msg = sessionStorage.getItem('messages') || '[]'; + this.messages = JSON.parse(msg) as IMessage[]; wss.onmessage = (event) => { const data = JSON.parse(event.data) as IMessage; - data.ts = data.ts * 1000; - this.messages.push(data); + if (data && data.ts > 0) { + data.ts = data.ts * 1000; + this.messages.push(data); + sessionStorage.setItem('messages', JSON.stringify(this.messages)); + } }; }