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

163 lines
3.0 KiB
Vue
Raw Normal View History

2024-06-22 10:54:02 +08:00
<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">
2024-06-29 18:16:29 +08:00
<h4 v-tooltip="lastLoginTime">{{ lastLoginTime?.split(' ')[0] }}</h4>
2024-06-22 10:54:02 +08:00
<p>{{ loginIp }}</p>
</div>
<div class="user-item-box">
2024-06-29 18:16:29 +08:00
<h4 v-tooltip="modifyTime">{{ modifyTime?.split(' ')[0] }}</h4>
<p v-tooltip="createTime">{{ createTime?.split(' ')[0] }}</p>
2024-06-22 10:54:02 +08:00
</div>
<div class="user-item-box end">
<h4 :style="{
color: isOnline ? '#008000' : '#FF0000'
}">{{ isOnline ? '在线' : '离线' }}</h4>
<p>{{ isLock ? '锁定' : '' }}</p>
</div>
<div class="user-end">
2024-07-22 18:41:15 +08:00
<button @click="navigateTo(`settings/userSettings/${userId}`)">
2024-06-22 10:54:02 +08:00
<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;
2024-07-02 14:28:15 +08:00
*{
@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;
}
}
2024-06-22 10:54:02 +08:00
}
.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>