82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
|
||
|
|
import {useSessionSignalRStore} from "~/strores/HubStore";
|
||
|
|
import {POSITION, useToast} from 'vue-toastification'
|
||
|
|
|
||
|
|
const toast = useToast()
|
||
|
|
const mainLayoutStore = useMainLayoutStore()
|
||
|
|
const signalRStore = useSessionSignalRStore()
|
||
|
|
const currentUserId = ref("")
|
||
|
|
const sendMessageModel = ref(false)
|
||
|
|
const message = ref("")
|
||
|
|
const items = ref([
|
||
|
|
{
|
||
|
|
label: '发送消息', command: () => {
|
||
|
|
sendMessageModel.value = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{label: '通知',}
|
||
|
|
]);
|
||
|
|
const sendMessage = () => {
|
||
|
|
signalRStore.sendMessage("SendMessage", mainLayoutStore.UserInfo.id, currentUserId.value, message.value)
|
||
|
|
sendMessageModel.value = false
|
||
|
|
}
|
||
|
|
const onRightClick = (event: MouseEvent, userId: string) => {
|
||
|
|
menu.value.show(event);
|
||
|
|
currentUserId.value = userId;
|
||
|
|
};
|
||
|
|
const menu = ref();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="online-user-layout">
|
||
|
|
<Dialog v-model:visible="sendMessageModel" header="发送消息" modal>
|
||
|
|
<Textarea v-model="message" cols="30" rows="5"/>
|
||
|
|
<template #footer>
|
||
|
|
<Button autofocus label="取消" severity="secondary" text @click="sendMessageModel = false"/>
|
||
|
|
<Button autofocus label="发送" outlined severity="secondary" @click="sendMessage"/>
|
||
|
|
</template>
|
||
|
|
</Dialog>
|
||
|
|
<ContextMenu ref="menu" :model="items"/>
|
||
|
|
<div v-for="user in mainLayoutStore.OnlineUsers" class="user-item" @click="onRightClick($event,user.id)">
|
||
|
|
<Avatar :image="user.avatar" shape="circle" size="xlarge"/>
|
||
|
|
<div class="user-info">
|
||
|
|
<h4>{{ user.nickName }}</h4>
|
||
|
|
<div>
|
||
|
|
<Tag :value="user.posts"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'base';
|
||
|
|
|
||
|
|
.online-user-layout {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: $gap*1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: $gap*3;
|
||
|
|
padding: $padding*.2;
|
||
|
|
border-radius: $radius;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: rgba(212, 212, 212, 0.45);
|
||
|
|
}
|
||
|
|
|
||
|
|
> .user-info {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
gap: $gap;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|