Skip to content

Commit

Permalink
优化:全局通知小红点显示效果优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhuchunshu
zhuchunshu committed Jun 13, 2022
1 parent 0849fa3 commit ea4c7c2
Show file tree
Hide file tree
Showing 11 changed files with 102 additions and 63 deletions.
2 changes: 1 addition & 1 deletion app/Plugins/Core/resources/assets/js/app.js
View file
Expand Up @@ -3739,7 +3739,7 @@ $(function () {
data = data.result; // 通知小红点

if (document.getElementById("core-notice-red")) {
if (data.notice_red === true) {
if (data.notice_red > 0) {
$("#core-notice-red").show();
}
}
Expand Down
2 changes: 1 addition & 1 deletion app/Plugins/Core/resources/package/js/app.js
View file
Expand Up @@ -77,7 +77,7 @@ $(function(){

// 通知小红点
if (document.getElementById("core-notice-red")){
if(data.notice_red===true){
if(data.notice_red>0){
$("#core-notice-red").show();
}
}
Expand Down
4 changes: 4 additions & 0 deletions app/Plugins/Core/src/Controller/PrivateMessage/IndexController.php
View file
Expand Up @@ -37,6 +37,10 @@ public function index($user_id){
}
}
$contacts = array_unique($contacts);
foreach($contacts as $key=>$value){
$count = \App\Plugins\User\src\Models\UsersPm::query()->where(['from_id'=>$value->id,'to_id' => auth()->id(),'read' => false])->count();
$contacts[$key]['msgCount'] = $count;
}
return view('User::pm.index',['user' => $user,'messagesCount' => $messagesCount,'messages' => $messages,'contacts' => $contacts]);
}
}
8 changes: 8 additions & 0 deletions app/Plugins/User/bootstrap.php
View file
@@ -1,6 +1,8 @@
<?php

// 设置邮件验证白名单路径
use App\Plugins\User\src\Models\UsersNotice;

Itf()->add("authMiddleware",1,"api*");
Itf()->add("authMiddleware",2,"admin*");
Itf()->add("authMiddleware",3,"logout");
Expand Down Expand Up @@ -175,6 +177,9 @@
<line x1="3" y1="17" x2="21" y2="17"></line>
</svg>',
'view' => 'User::notice.interactive',
'count' => function($user_id){
return UsersNotice::query()->where(["user_id"=>$user_id,"status" => 'publish'])->count();
}
]);

//Itf()->add('users_notices',2,[
Expand All @@ -199,4 +204,7 @@
<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
</svg>',
'view' => 'User::notice.pm',
'count' => function($user_id){
return \App\Plugins\User\src\Models\UsersPm::query()->where('to_id',$user_id)->where('read',false)->count();
}
]);
3 changes: 2 additions & 1 deletion app/Plugins/User/resources/assets/js/pm.js
View file
Expand Up @@ -227,8 +227,9 @@ if (document.getElementById('user-pm-container')) {
icon: "error"
});
return;
} //this.socket.emit('join-room', '{"token":"'+ _token+'","to_id":"'+to_id+'"}');
}

_this4.socket.emit('join-room', '{"token":"' + _token + '","to_id":"' + to_id + '"}');

setInterval(function () {
_this4.socket.emit('getMsg', '{"token":"' + _token + '","to_id":"' + to_id + '"}');
Expand Down
2 changes: 1 addition & 1 deletion app/Plugins/User/resources/package/js/pm.js
View file
Expand Up @@ -211,7 +211,7 @@ if(document.getElementById('user-pm-container')){
})
return ;
}
//this.socket.emit('join-room', '{"token":"'+ _token+'","to_id":"'+to_id+'"}');
this.socket.emit('join-room', '{"token":"'+ _token+'","to_id":"'+to_id+'"}');
setInterval(()=>{
this.socket.emit('getMsg','{"token":"'+ _token+'","to_id":"'+to_id+'"}');
this.socket.on('getMsg',(data)=>{
Expand Down
109 changes: 70 additions & 39 deletions app/Plugins/User/resources/views/pm/index.blade.php
View file
Expand Up @@ -13,73 +13,100 @@
</div>
<div class="list-group list-group-flush overflow-auto" style="max-height: 44rem">
@foreach($contacts as $contact)
<div class="list-group-item @if($contact->id===$user->id) active @endif">
<div class="row">
<div class="list-group-item @if($contact->id===$user->id) active @endif">
<div class="row">
<div class="col-auto">
<a href="/users/pm/{{$contact->id}}">
<span class="avatar" style="background-image: url({{super_avatar($contact)}})"></span>
<span class="avatar"
style="background-image: url({{super_avatar($contact)}})"></span>
</a>
</div>
<div class="col text-truncate">
<a href="/users/pm/{{$contact->id}}" class="text-body d-block">{{$contact->username}}</a>
<a href="/users/pm/{{$contact->id}}"
class="text-body d-block">{{$contact->username}}</a>
<div class="text-muted text-truncate mt-n1">{{$contact->options->qianming}}</div>
</div>
@if($contact->id!==$user->id && $contact->msgCount>0)
<div class="col-auto">
<span class="badge badge-sm badge-pill bg-red">{{$contact->msgCount}}</span>
</div>
@endif
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
<div class="col-md-9">
<div class="border-0 card">
<div class="card-header">
<h3 class="card-title"><a href="/users/{{$user->username}}.html" class="avatar avatar-sm" style="background-image: url({{super_avatar($user)}})"></a> 正在与: {{$user->username}} 沟通</h3>
<h3 class="card-title"><a href="/users/{{$user->username}}.html" class="avatar avatar-sm"
style="background-image: url({{super_avatar($user)}})"></a>
正在与: {{$user->username}} 沟通</h3>
</div>
<div class="card-body">
<div v-if="messages>{{$messagesCount}}" class="alert alert-info" role="alert">
有新的消息 — <a href="" class="alert-link">刷新</a>!
</div>
<div class="row">
<div id="chat-list" class="col-12 overflow-auto border-1 card card-body" style="height: 34rem">
@foreach($messages as $message)
@if((int)$message->from_id===auth()->id())
<div class="d-flex flex-row-reverse">
<div class="p-2 bd-highlight">
<span class="avatar avatar-sm avatar-rounded" style="background-image: url({{super_avatar(auth()->data())}})"></span>
</div>
<div class="p-2">
<div class="message1">{!! ContentParse()->parse($message->message) !!}</div>
</div>
</div>
@elseif((int)$message->to_id===auth()->id())
<div class="d-flex">
<div class="p-2">
<span class="avatar avatar-sm avatar-rounded" style="background-image: url({{super_avatar($message->from_user)}})"></span>
<div id="chat-list" class="col-12 overflow-auto border-1 card card-body"
style="height: 34rem">
@if(count($messages))
@foreach($messages as $message)
@if((int)$message->from_id===auth()->id())
<div class="d-flex flex-row-reverse">
<div class="p-2 bd-highlight">
<span class="avatar avatar-sm avatar-rounded"
style="background-image: url({{super_avatar(auth()->data())}})"></span>
</div>
<div class="p-2">
<div class="message1">{!! ContentParse()->parse($message->message) !!}</div>
</div>
</div>
<div class="p-2">
<div class="message2">{!! ContentParse()->parse($message->message) !!}</div>
@elseif((int)$message->to_id===auth()->id())
<div class="d-flex">
<div class="p-2">
<span class="avatar avatar-sm avatar-rounded"
style="background-image: url({{super_avatar($message->from_user)}})"></span>
</div>
<div class="p-2">
<div class="message2">{!! ContentParse()->parse($message->message) !!}</div>
</div>
</div>
</div>
@endif
@endforeach
@endif
@endforeach
@else
<div class="text-center text-muted">
你们至今还没有聊过
</div>
@endif
</div>
<div class="col-12 mt-2">
<div class="row">
<div class="col">
<div class="OwO" aria-label="Button" >
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mood-smile" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<desc>Download more icon variants from https://tabler-icons.io/i/mood-smile</desc>
<div class="OwO" aria-label="Button">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-mood-smile" width="24" height="24"
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<desc>Download more icon variants from
https://tabler-icons.io/i/mood-smile
</desc>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="12" cy="12" r="9"></circle>
<line x1="9" y1="10" x2="9.01" y2="10"></line>
<line x1="15" y1="10" x2="15.01" y2="10"></line>
<path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path>
</svg>
</div>
<textarea placeholder="说点啥好呢" maxlength="{{get_options('pm_msg_maxlength',300)}}" v-model="msg" rows="1" class="form-control OwO-textarea"></textarea>
<textarea placeholder="说点啥好呢"
maxlength="{{get_options('pm_msg_maxlength',300)}}" v-model="msg"
rows="1" class="form-control OwO-textarea"></textarea>
</div>
<div class="col-auto d-flex align-items-end">
<button @@click="sendMsg" class="btn btn-outline-tabler align-bottom" :class="{disabled:btn.disabled}">发送</button>
<button @@click="sendMsg" class="btn btn-outline-tabler align-bottom"
:class="{disabled:btn.disabled}">发送
</button>
</div>
</div>
</div>
Expand All @@ -92,14 +119,15 @@
<link rel="stylesheet" href="{{file_hash('plugins/User/css/pm.css')}}">
<style>
.OwO .OwO-logo {
border:unset;
color:unset;
background:unset;
border: unset;
color: unset;
background: unset;
}
.message1,.message2 {

.message1, .message2 {
margin: 9px auto;
background-color: green;
border-bottom-color:green;/*为了给after伪元素自动继承*/
border-bottom-color: green; /*为了给after伪元素自动继承*/
color: #fff;
font-size: 15px;
font-family: Arial;
Expand All @@ -110,24 +138,26 @@
position: relative;
word-break: break-all;
}

.message1::after {
content: '';
position: absolute;
top: 0;
border-width: 0 0 10px 20px;
border-style: solid;
border-bottom-color: inherit; /*自动继承父元素的border-bottom-color*/
border-bottom-color: inherit; /*自动继承父元素的border-bottom-color*/
border-left-color: transparent;
border-radius: 0 0 70px 0;
}

/** 通过对小正方形旋转45度解决 **/
.message2::before {
content: '';
position: absolute;
top: 0;
border-width: 0 0 10px 20px;
border-style: solid;
border-bottom-color: inherit; /*自动继承父元素的border-bottom-color*/
border-bottom-color: inherit; /*自动继承父元素的border-bottom-color*/
border-left-color: transparent;
border-radius: 0 0 5px 10px;
left: -5px;
Expand All @@ -136,7 +166,8 @@
@endsection

@section('scripts')
<script>var pm_socket = "{{ws_url('/User/Pm')}}?login-token={{auth()->token()}}&to={{$user->id}}"; var to_id = {{$user->id}};</script>
<script>var pm_socket = "{{ws_url('/User/Pm')}}?login-token={{auth()->token()}}&to={{$user->id}}";
var to_id = {{$user->id}};</script>
<script src="{{file_hash('plugins/Core/js/socket.io.js')}}"></script>
<script src="{{file_hash('plugins/User/js/pm.js')}}"></script>
@endsection
7 changes: 6 additions & 1 deletion app/Plugins/User/src/Controller/ApiController.php
View file
Expand Up @@ -94,7 +94,12 @@ public function UserConfig(): array
}

// 通知小红点
$notice_red = UsersNotice::query()->where(["user_id"=>auth()->id(),"status" => 'publish'])->exists();
$notice_red = 0;
foreach(Itf()->get('users_notices') as $value){
if(@$value['count'] && is_callable($value['count']) && call_user_func($value['count'],auth()->id())>0){
$notice_red += call_user_func($value['count'], auth()->id());
}
}

$config = [
'notice_red' => $notice_red,
Expand Down
20 changes: 3 additions & 17 deletions app/Plugins/User/src/WebSocket/Pm.php
View file
Expand Up @@ -35,23 +35,10 @@ public function onEvent(Socket $socket, $data)
#[Event("join-room")]
public function onJoinRoom(Socket $socket, $data)
{
// 将当前用户加入房间
$socket->join($data);
// 向房间内其他用户推送（不含当前用户）
$socket->to($data)->emit('event', $socket->getSid() . "has joined {$data}");
// 向房间内所有人广播（含当前用户）
$this->emit('event', 'There are ' . count($socket->getAdapter()->clients($data)) . " players in {$data}");
return $this->getMsg($socket,$data);
}

/**
* @param string $data
*/
#[Event("say")]
public function onSay(Socket $socket, $data)
{
$data = Json::decode($data);
$socket->to($data['room'])->emit('event', $socket->getSid() . " say: {$data['message']}");
}


#[Event('getMsg')]
public function getMsg(Socket $socket,$data)
Expand All @@ -64,7 +51,7 @@ public function getMsg(Socket $socket,$data)
return ;
}
$auth = UsersAuth::query()->where('token',$token)->first()->user;
UsersPm::query()->where('to_id',$auth->id)->update(['read' => false]);
UsersPm::query()->where('to_id',$auth->id)->where('from_id',$to_id)->update(['read' => true]);
\App\Plugins\User\src\Models\UsersPm::query()->where(['from_id'=>$to_id,'to_id' => $auth->id])->update(['read' => true]);
$msg = UsersPm::query(true)->where([['from_id',$auth->id],['to_id',$to_id]])->Orwhere([['to_id',$auth->id],['from_id',$to_id]])->count();
return $socket->emit('getMsg', $msg);
Expand Down Expand Up @@ -92,7 +79,6 @@ public function sendMsg(Socket $socket,$data)
'to_id' => $to_id,
'message' => $data['msg']
]);
UsersPm::query()->where('to_id',$auth->id)->update(['read' => true]);
$msg = UsersPm::query(true)->where([['from_id',$auth->id],['to_id',$to_id]])->Orwhere([['to_id',$auth->id],['from_id',$to_id]])->count();
return $socket->emit('getMsg', $msg);

Expand Down
4 changes: 4 additions & 0 deletions app/Themes/CodeFec/resources/views/notice/index.blade.php
View file
Expand Up @@ -22,6 +22,10 @@
{{$value['name']}}
</div>
<div class="col-auto">
@php $msgCount = call_user_func($value['count'],auth()->id()); @endphp
@if(is_callable($value['count']) && $msgCount>0)
<span class="badge badge-sm badge-pill bg-red">{{$msgCount}}</span>
@endif
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-chevron-right" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2"
Expand Down
4 changes: 2 additions & 2 deletions public/mix-manifest.json
View file
Expand Up @@ -10,11 +10,11 @@
"/js/admin/setting.js": "/js/admin/setting.js?id=4d166aebaf24daa9b1ee",
"/js/admin/index.js": "/js/admin/index.js?id=c2c9328910e506c96687",
"/plugins/Core/js/user.js": "/plugins/Core/js/user.js?id=8fac803a867bafc9e978",
"/plugins/Core/js/app.js": "/plugins/Core/js/app.js?id=f8df9ce9258fb833e885",
"/plugins/Core/js/app.js": "/plugins/Core/js/app.js?id=309d58ecd1d1bddee38a",
"/plugins/Topic/js/topic.js": "/plugins/Topic/js/topic.js?id=0ca98cdec23f9ec3021d",
"/plugins/Comment/js/topic.js": "/plugins/Comment/js/topic.js?id=05be726469d11c840306",
"/plugins/User/js/user.js": "/plugins/User/js/user.js?id=67d504d56c98f83c5f1e",
"/plugins/User/js/pm.js": "/plugins/User/js/pm.js?id=e9b111366998f82ad077",
"/plugins/User/js/pm.js": "/plugins/User/js/pm.js?id=f61ea2d0de0ec9c8b6a7",
"/plugins/User/css/pm.css": "/plugins/User/css/pm.css?id=275ff7baed3f0ad596d9",
"/plugins/Topic/css/app.css": "/plugins/Topic/css/app.css?id=42f1620841ee43bc00fb",
"/css/app.css": "/css/app.css?id=68b329da9893e34099c7"
Expand Down

0 comments on commit ea4c7c2

Please sign in to comment.