LoongPanel-Asp/web/components/Cards/OnlineUsersCard.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>