LoongPanel-Asp/web/components/ServerUserPage/UserList.vue

137 lines
3.2 KiB
Vue

<script setup lang="ts">
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import {useToast} from "vue-toastification";
const toast = useToast()
const mainLayoutStore = useMainLayoutStore()
const userList = ref<UserListItem[]>([])
type UserListItem = {
"name": string,
"isOnline": boolean,
"lastLoginTime": string,
"address": string,
"port": string,
}
const GetServerUserList = () => {
$fetch('/Api/Server/GetServerUserList', {
method: 'GET',
params: {
ServerId: mainLayoutStore.SelectServer.id
},
headers: {
'Content-Type': 'application/json',
'Authorization': "Bearer " + useCookie('token').value
},
baseURL: useRuntimeConfig().public.baseUrl
}).then(res => {
userList.value=res as UserListItem[];
}).catch(err => {
toast.error(err)
})
}
onMounted(() => {
GetServerUserList()
})
const refresh = () => {
userList.value=[]
GetServerUserList()
}
</script>
<template>
<div class="user-list-layout">
<div class="user-list-header">
<Icon name="ArrowDownUp" :size="24" :stroke-width="1.5"></Icon>
<h3>用户列表</h3>
<Icon name="Repeat2" :size="24" :stroke-width="1.5" @click="refresh"/>
</div>
<div class="user-list-body">
<div class="user-list-item" @click="navigateTo(`/serverUser/all`)">
<div class="avatar">
<Avatar size="xlarge" shape="circle" class="avatar" :image="`https://api.multiavatar.com/all.svg`"/>
</div>
<div class="info">
<div class="top">
<h3>全部</h3>
</div>
<p>NULL</p>
</div>
</div>
<div class="user-list-item" v-for="item in userList" @click="navigateTo(`/serverUser/${item.name}`)">
<div class="avatar">
<Avatar size="xlarge" shape="circle" class="avatar" :image="`https://api.multiavatar.com/${item.name}.svg`"/>
</div>
<div class="info">
<div class="top">
<h3>{{ item.name }}</h3>
<div class="tags">
<Tag v-if="item.isOnline">在线</Tag>
<Tag v-if="item.isOnline">{{item.port}}</Tag>
<Tag v-if="item.isOnline">{{item.address}}</Tag>
</div>
</div>
<p>{{item.lastLoginTime}}</p>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@import "base";
.user-list-layout {
background: $light-bg-color;
border-radius: $radius;
border: $border;
padding: $padding 0;
grid-row: 1/3;
}
.user-list-header {
display: flex;
align-items: center;
padding: 0 $padding;
justify-content: space-between;
svg {
color: rgba(51, 51, 51, 0.34);
stroke: rgba(51, 51, 51, 0.44);
&:hover {
stroke: rgba(51, 51, 51, 0.64);
}
}
}
.user-list-body{
display: flex;
flex-direction: column;
gap: $gap;
padding: $padding*2 $padding;
}
.user-list-item{
display: flex;
align-items: center;
gap: $gap;
padding: 8px;
border-radius: $radius;
&:hover{
background: rgba(51, 51, 51, 0.06);
}
.info{
display: flex;
flex-direction: column;
flex:1;
gap: $gap;
.top{
display: flex;
justify-content: space-between;
}
.tags{
display: flex;
gap: $gap;
}
}
}
</style>