profile.vue

profile.vue

<script setup lang="ts">
import { AtpAgent } from '@atproto/api'
import { NStatistic, NNumberAnimation } from 'naive-ui'
const agent = new AtpAgent({service: 'https://bsky.social'})
const session = await agent.login({identifier: '', password: ''})
const profile = await agent.getProfile({actor: session.data.did})
</script>

<template>
  <div class="flex flex-row justify-center items-center">
    <div class="w-fit border-[1px] rounded-xl overflow-hidden">
      <img class="h-[150px]" :src="profile?.data.banner" />
      <div class="h-[50px] relative">
        <img class="h-[125px] rounded-full absolute bottom-[0px] left-[50%] -translate-x-[50%]" :src=profile?.data.avatar />
      </div>
      <div class="text-center">
        <p class="text-xl font-bold">{{profile?.data.displayName}}</p>
        <p>@{{profile?.data.handle}}</p>
        <div class="grid grid-cols-3 my-4">
          <n-statistic label="关注者" tabular-nums>
            <n-number-animation :from="0" :to="profile?.data.followersCount" />
          </n-statistic>
          <n-statistic label="正在关注" tabular-nums>
            <n-number-animation :from="0" :to="profile?.data.followsCount" />
          </n-statistic>
          <n-statistic label="贴文" tabular-nums>
            <n-number-animation :from="0" :to="profile?.data.postsCount" />
          </n-statistic>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>