92 lines
2.4 KiB
Vue
92 lines
2.4 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>
|
|
<n-modal v-model:show="sendMessageModel">
|
|
123123
|
|
</n-modal>
|
|
<ContextMenu ref="menu" :model="items"/>
|
|
<div v-for="user in mainLayoutStore.OnlineUsers" class="user-item" @click="onRightClick($event,user.id)">
|
|
<n-avatar
|
|
:size="50"
|
|
:src="user.avatar"
|
|
lazy
|
|
fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
|
/>
|
|
<div class="user-info">
|
|
<h4>{{ user.nickName }}</h4>
|
|
<div>
|
|
<n-tag type="info" :bordered="false">
|
|
{{user.posts}}
|
|
</n-tag>
|
|
</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*.25 $padding;
|
|
border-radius: $radius;
|
|
|
|
&:hover {
|
|
background: rgba(212, 212, 212, 0.45);
|
|
}
|
|
|
|
> .user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: $gap*.2;
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style> |