LoongPanel-Asp/web/pages/user.vue

<script lang="ts" setup>
import UserItem from "~/components/UserPage/UserItem.vue";
import type {UserInfoListType} from "~/types/UserType";

definePageMeta({
  layout: 'main',
  middleware: ['auth']
})
const userList = ref<UserInfoListType | null>(null)
onMounted(() => {
  $fetch("/Api/User/GetUserInfoList", {
    method: "GET",
    headers: {
      "Authorization": "Bearer " + useCookie("token").value
    },
    baseURL: useRuntimeConfig().public.baseUrl
  }).then(res => {
    userList.value = res as UserInfoListType
  })
})
</script>

<template>
  <div class="user-layout">
    <UserPageBar :userNumber="userList?.length??0"/>
    <UserPageIndicator/>
    <div class="user-content">
      <UserItem v-for="user in userList" :avatar="user.avatar" :create-time="user.createDate"
                :email="user.email" :full-name="user.nickName" :isLock="user.isLock"
                :last-login-time="user.lastLoginTime"
                :login-ip="user.address??':: 0'"
                :modify-time="user.modifiedDate"
                :name="user.userName"
                :phone="user.phoneNumber"
                :physical-address="user.physicalAddress??'未设置'"
                :position="user.posts"
                :user-id="user.id"/>
    </div>
  </div>
</template>c

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

.user-layout {
  width: 100%;
  height: 100%;
  min-height: 1200px;
  display: flex;
  flex-direction: column;
  gap: $gap*2;
  *{
    @include SC_Font;
  }
}

.user-content {
  display: flex;
  flex-direction: column;
  gap: $gap*2;
}
</style>