✨ feat: 增加用户关注列表和用户详情页

2026-05-18 03:17:29 +08:00 · 2025-03-24 22:54:04 +08:00
parent 9f5bac29a0
commit 2924ad6c18
13 changed files with 1059 additions and 16 deletions
@@ -0,0 +1,237 @@
+<template>
+  <div class="follows-page">
+    <div class="content-wrapper">
+      <n-spin v-if="followListLoading && followList.length === 0" size="large" />
+      <n-scrollbar v-else class="scrollbar-container">
+        <div v-if="followList.length === 0" class="empty-follow">
+          {{ t('user.follow.noFollowings') }}
+        </div>
+        <div class="follow-grid" :class="setAnimationClass('animate__fadeInUp')">
+          <div
+            v-for="(item, index) in followList"
+            :key="index"
+            class="follow-item"
+            :class="setAnimationClass('animate__fadeInUp')"
+            :style="setAnimationDelay(index, 30)"
+            @click="viewUserDetail(item.userId, item.nickname)"
+          >
+            <div class="follow-item-inner">
+              <div class="follow-avatar">
+                <n-avatar round :size="70" :src="getImgUrl(item.avatarUrl, '70y70')" />
+                <div v-if="isArtist(item)" class="artist-badge">
+                  <i class="ri-verified-badge-fill"></i>
+                </div>
+              </div>
+              <div class="follow-info">
+                <div class="follow-name" :class="{ 'is-artist': isArtist(item) }">
+                  {{ item.nickname }}
+                  <n-tooltip v-if="isArtist(item)" trigger="hover">
+                    <template #trigger>
+                      <i class="ri-verified-badge-fill artist-icon"></i>
+                    </template>
+                    歌手
+                  </n-tooltip>
+                </div>
+                <div class="follow-signature">
+                  {{ item.signature || t('user.follow.noSignature') }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <n-space v-if="followListLoading" justify="center" class="loading-more">
+          <n-spin size="small" />
+        </n-space>
+
+        <n-button
+          v-else-if="hasMoreFollows"
+          class="load-more-btn"
+          secondary
+          block
+          @click="loadMoreFollows"
+        >
+          {{ t('user.follow.loadMore') }}
+        </n-button>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMessage } from 'naive-ui';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { getUserFollows } from '@/api/user';
+import { useUserStore } from '@/store/modules/user';
+import type { IUserFollow } from '@/type/user';
+import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
+
+defineOptions({
+  name: 'UserFollows'
+});
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const router = useRouter();
+const message = useMessage();
+
+// 关注列表相关
+const followList = ref<IUserFollow[]>([]);
+const followOffset = ref(0);
+const followLimit = ref(30);
+const hasMoreFollows = ref(false);
+const followListLoading = ref(false);
+
+const user = computed(() => userStore.user);
+
+// 检查登录状态
+const checkLoginStatus = () => {
+  const token = localStorage.getItem('token');
+  const userData = localStorage.getItem('user');
+
+  if (!token || !userData) {
+    router.push('/login');
+    return false;
+  }
+
+  // 如果store中没有用户数据，但localStorage中有，则恢复用户数据
+  if (!userStore.user && userData) {
+    userStore.setUser(JSON.parse(userData));
+  }
+
+  return true;
+};
+
+// 加载关注列表
+const loadFollowList = async () => {
+  if (!user.value) return;
+
+  try {
+    followListLoading.value = true;
+    const { data } = await getUserFollows(user.value.userId, followLimit.value, followOffset.value);
+
+    if (!data || !data.follow) {
+      hasMoreFollows.value = false;
+      return;
+    }
+
+    const newFollows = data.follow as IUserFollow[];
+    followList.value = [...followList.value, ...newFollows];
+
+    // 判断是否还有更多关注
+    hasMoreFollows.value = newFollows.length >= followLimit.value;
+  } catch (error) {
+    console.error('加载关注列表失败:', error);
+    message.error('加载关注列表失败');
+  } finally {
+    followListLoading.value = false;
+  }
+};
+
+// 加载更多关注
+const loadMoreFollows = async () => {
+  followOffset.value += followLimit.value;
+  await loadFollowList();
+};
+
+// 查看用户详情
+const viewUserDetail = (userId: number, nickname: string) => {
+  router.push({
+    path: `/user/detail/${userId}`,
+    query: { name: nickname }
+  });
+};
+
+// 判断是否为歌手
+const isArtist = (user: IUserFollow) => {
+  // 根据用户类型判断是否为歌手，userType 为 4 表示是官方认证的音乐人
+  return user.userType === 4 || user.userType === 2 || user.accountType === 2;
+};
+
+// 页面挂载时加载数据
+onMounted(() => {
+  if (checkLoginStatus()) {
+    loadFollowList();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.follows-page {
+  @apply h-full flex flex-col;
+
+  .content-wrapper {
+    @apply flex-1 overflow-hidden p-4;
+    @apply flex flex-col;
+  }
+
+  .scrollbar-container {
+    @apply h-full;
+  }
+}
+
+.follow-grid {
+  @apply grid gap-4 w-full;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.follow-item {
+  @apply rounded-xl overflow-hidden cursor-pointer;
+  @apply transition-all duration-200;
+  @apply hover:scale-105;
+
+  &-inner {
+    @apply flex flex-col items-center p-4 h-full;
+    @apply bg-light-100 dark:bg-dark-100;
+    @apply transition-all duration-200;
+    @apply hover:bg-light-200 dark:hover:bg-dark-200;
+  }
+
+  .follow-avatar {
+    @apply relative;
+
+    .artist-badge {
+      @apply absolute bottom-0 right-0;
+      @apply text-blue-500 text-lg;
+    }
+  }
+
+  .follow-info {
+    @apply mt-3 text-center w-full;
+
+    .follow-name {
+      @apply text-gray-900 dark:text-white text-base font-medium;
+      @apply flex items-center justify-center;
+
+      &.is-artist {
+        @apply text-blue-500;
+      }
+
+      .artist-icon {
+        @apply ml-1 text-blue-500;
+      }
+    }
+
+    .follow-signature {
+      @apply text-gray-500 dark:text-gray-400 text-xs mt-1;
+      @apply line-clamp-2 text-center;
+      max-height: 2.4em;
+    }
+  }
+}
+
+.empty-follow {
+  @apply text-center py-8 text-gray-500 dark:text-gray-400;
+}
+
+.load-more-btn {
+  @apply mt-4 mb-8;
+}
+
+.loading-more {
+  @apply my-4;
+}
+</style>