Skip to content

Commit

Permalink
refactor: 重构群聊天界面
Browse files Browse the repository at this point in the history
  • Loading branch information
@rehiy
rehiy committed Mar 14, 2024
1 parent 4b2a6e9 commit 4530b6b
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 46 deletions.
92 changes: 52 additions & 40 deletions webview/src/apps/wcferry/chatroom.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,55 +11,60 @@
<div class="container-lg mb-3">
<div class="row g-3">
<div class="col col-md-3">
<div class="list-group">
@for (item of chatrooms; track item.wxid) {
<a class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer" [class.active]="chatroom && chatroom.wxid == item.wxid" (click)="getChatroom(item)">
<div class="avatar me-3">
<img class="rounded" [src]="avatars[item.wxid]" />
</div>
<div class="text-truncate">
<div class="fw-bold text-truncate">{{item.remark || item.name || '-'}}</div>
<small>{{item.wxid}}</small>
</div>
</a>
}
<div class="card">
<div class="list-group list-group-flush chatrooms">
@for (item of chatrooms; track item.wxid) {
<a class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer" [class.active]="chatroom && chatroom.wxid == item.wxid" (click)="getChatroom(item)">
<div class="avatar me-3">
<img class="rounded" [src]="avatars[item.wxid]" />
</div>
<div class="text-truncate">
<div class="fw-bold text-truncate">{{item.remark || item.name || '-'}}</div>
<small>{{item.wxid}}</small>
</div>
</a>
}
</div>
</div>
</div>
<div class="col">
<div class="col" [class.col-md-9]="!showMember" [class.col-md-6]="showMember">
<div class="card" *ngIf="chatroom">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="fs-5">{{chatroom.name}}</div>
<div class="text-truncate fs-5 me-2">
{{chatroom.name}}（{{members.length}}）
</div>
@if (showMember) {
<button type="button" class="btn btn-light" (click)="showMember = false">
<i class="bi bi-box-arrow-in-right"></i>
</button>
<i class="bi bi-box-arrow-in-right cursor-pointer" (click)="showMember = false"></i>
} @else {
<button type="button" class="btn btn-light" (click)="showMember = true">
<i class="bi bi-box-arrow-in-left"></i>
</button>
<i class="bi bi-box-arrow-in-left cursor-pointer" (click)="showMember = true"></i>
}
</div>
<div class="card-body">
<div class="chat-content">
@for (item of messages; track item.id) {
@if(item.roomid == chatroom.wxid || item.sender == 'system') {
<div class="list-group-item d-flex align-items-center">
<div class="list-group list-group-flush messages">
@for (item of messages; track item.id) {
@if(item.roomid == chatroom.wxid) {
<div class="list-group-item" [class.system]="item.sender == 'system'">
<div class="d-flex align-items-center">
<div class="avatar me-3">
<img class="rounded" [src]="avatars[item.sender] || '/assets/icon.png'" />
</div>
<div class="text-truncate">
<div class="fw-bold text-truncate">
<div class="fw-bold">
{{memberMap[item.sender] && memberMap[item.sender].name || '-'}}
</div>
<small>{{item.ts | date:'yyyy-MM-dd HH:mm:ss'}}</small>
</div>
</div>
<div class="chat-message mb-3">
<div class="mt-2">
{{item.content}}
</div>
}
}
</div>
}
@if (item.sender == 'system') {
<div class="list-group-item msg-system">
<small>[{{item.ts | date:'yyyy-MM-dd HH:mm:ss'}}] {{item.content}}</small>
</div>
}
}
</div>
<div class="card-footer">
<div class="input-group">
Expand All @@ -70,18 +75,25 @@
</div>
</div>
<div class="col col-md-3" [class.d-none]="!showMember">
<div class="list-group">
@for (item of members; track item.wxid) {
<a class="list-group-item d-flex align-items-center">
<div class="avatar me-3">
<img class="rounded" [src]="avatars[item.wxid] || '/assets/icon.png'" />
</div>
<div class="text-truncate">
<div class="fw-bold text-truncate">{{item.remark || item.name || '-'}}</div>
<small>{{item.wxid}}</small>
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="fs-5">
群成员
</div>
</a>
}
</div>
<div class="list-group list-group-flush members">
@for (item of members; track item.wxid) {
<a class="list-group-item d-flex align-items-center">
<div class="avatar me-3">
<img class="rounded" [src]="avatars[item.wxid] || '/assets/icon.png'" />
</div>
<div class="text-truncate">
<div class="fw-bold text-truncate">{{item.remark || item.name || '-'}}</div>
<small>{{item.wxid}}</small>
</div>
</a>
}
</div>
</div>
</div>
</div>
Expand Down
31 changes: 28 additions & 3 deletions webview/src/apps/wcferry/chatroom.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 11 additions & 3 deletions webview/src/apps/wcferry/chatroom.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand All @@ -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(),
Expand All @@ -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));
}
};
}

Expand Down

0 comments on commit 4530b6b

Please sign in to comment.