LoongPanel-Asp/web/components/UserPage/UserItem.vue

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";

const props = defineProps({
  avatar: {
    type: String,
    default: ''
  },
  fullName: {
    type: String,
    default: ''
  },
  email: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  position: {
    type: String,
    default: ''
  },
  phone: {
    type: String,
    default: ''
  },
  physicalAddress: {
    type: String,
    default: '未设置'
  },
  loginIp: {
    type: String,
    default: ''
  },
  lastLoginTime: {
    type: String,
    default: ''
  },
  createTime: {
    type: String,
    default: ''
  },
  modifyTime: {
    type: String,
    default: ''
  },
  isLock: {
    type: Boolean,
    default: false
  },
  userId: {
    type: String,
    default: ''
  }
})
const onlineUser = useMainLayoutStore().OnlineUsers
const isOnline = computed(() => {
  return onlineUser.map(x => x.id).includes(props.userId)
})
</script>

<template>
  <div class="user-item-layout">
    <div class="user-start">
      <Avatar :image="avatar" class="mr-2" shape="circle" size="xlarge"/>
    </div>
    <div class="user-item-box">
      <h4>{{ name }}</h4>
      <p>{{ email }}</p>
    </div>
    <div class="user-item-box">
      <h4>{{ fullName }}</h4>
      <p>{{ position }}</p>
    </div>
    <div class="user-item-box">
      <h4>{{ phone }}</h4>
      <p>{{ physicalAddress }}</p>
    </div>
    <div class="user-item-box">
      <h4 v-tooltip="lastLoginTime">{{ lastLoginTime?.split(' ')[0] }}</h4>
      <p>{{ loginIp }}</p>
    </div>
    <div class="user-item-box">
      <h4 v-tooltip="modifyTime">{{ modifyTime?.split(' ')[0] }}</h4>
      <p v-tooltip="createTime">{{ createTime?.split(' ')[0] }}</p>
    </div>
    <div class="user-item-box end">
      <h4 :style="{
        color: isOnline ? '#008000' : '#FF0000'
      }">{{ isOnline ? '在线' : '离线' }}</h4>
      <p>{{ isLock ? '锁定' : '' }}</p>
    </div>
    <div class="user-end">
      <button @click="navigateTo(`settings/userSettings/${userId}`)">
        <p>查看更多</p>
        <Icon name="ChevronRight"></Icon>
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "base";

.user-item-layout {
  display: flex;
  background: $light-bg-color;
  min-height: 100px;
  border-radius: $radius;
  align-items: center;
  padding: $padding $padding*2;
  gap: $gap*4;
  *{
    @include SC_Font
  }
  h4,p,svg{
    color: $light-text-color;
    stroke: $light-text-color;
  }
  .dark-mode &{
    background: $dark-bg-color;
    h4,p,svg{
      color: $dark-text-color;
      stroke: $dark-text-color;
    }
  }
}

.user-start, .user-end {
  width: $padding*4;
}


.user-end {
  width: $padding*6;

  button {
    display: flex;
    align-items: center;
    background: unset;
    border: unset;

    &:hover {
      color: $primary-color;
      cursor: pointer;
    }
  }
}

.user-item-box {
  flex: 1;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.user-item-box.end {
  flex: unset;
}

</style>