feat: 添加所有用户的关注和粉丝列表点击 优化播放排行获取和无权限展示

src/renderer/views/user/follows.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="follows-page">
     <div class="content-wrapper">
+      <div class="page-title" v-if="targetUserName">
+        {{ targetUserName + t('user.follow.userFollowsTitle') }}
+      </div>
+      <div class="page-title" v-else>
+        {{ t('user.follow.myFollowsTitle') }}
+      </div>
+      
       <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">
@@ -60,9 +67,9 @@
 
 <script lang="ts" setup>
 import { useMessage } from 'naive-ui';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 
 import { getUserFollows } from '@/api/user';
 import { useUserStore } from '@/store/modules/user';
@@ -77,6 +84,7 @@ const { t } = useI18n();
 const userStore = useUserStore();
 const router = useRouter();
 const message = useMessage();
+const route = useRoute();
 
 // 关注列表相关
 const followList = ref<IUserFollow[]>([]);
@@ -84,9 +92,26 @@ const followOffset = ref(0);
 const followLimit = ref(30);
 const hasMoreFollows = ref(false);
 const followListLoading = ref(false);
+const targetUserId = ref<number | null>(null);
+const targetUserName = ref<string>('');
 
 const user = computed(() => userStore.user);
 
+// 检查是否有指定用户ID
+const checkTargetUser = () => {
+  const uid = route.query.uid;
+  const name = route.query.name;
+  
+  if (uid && typeof uid === 'string') {
+    targetUserId.value = parseInt(uid);
+    targetUserName.value = typeof name === 'string' ? name : '';
+    return true;
+  }
+  
+  // 如果没有指定用户ID，则显示当前登录用户的关注列表
+  return checkLoginStatus();
+};
+
 // 检查登录状态
 const checkLoginStatus = () => {
   const token = localStorage.getItem('token');
@@ -107,11 +132,14 @@ const checkLoginStatus = () => {
 
 // 加载关注列表
 const loadFollowList = async () => {
-  if (!user.value) return;
+  // 确定要加载哪个用户的关注列表
+  const userId = targetUserId.value || (user.value?.userId);
+  
+  if (!userId) return;
 
   try {
     followListLoading.value = true;
-    const { data } = await getUserFollows(user.value.userId, followLimit.value, followOffset.value);
+    const { data } = await getUserFollows(userId, followLimit.value, followOffset.value);
 
     if (!data || !data.follow) {
       hasMoreFollows.value = false;
@@ -125,7 +153,7 @@ const loadFollowList = async () => {
     hasMoreFollows.value = newFollows.length >= followLimit.value;
   } catch (error) {
     console.error('加载关注列表失败:', error);
-    message.error('加载关注列表失败');
+    message.error(t('user.follow.loadFailed'));
   } finally {
     followListLoading.value = false;
   }
@@ -153,7 +181,17 @@ const isArtist = (user: IUserFollow) => {
 
 // 页面挂载时加载数据
 onMounted(() => {
-  if (checkLoginStatus()) {
+  if (checkTargetUser()) {
+    loadFollowList();
+  }
+});
+
+// 监听路由变化重新加载数据
+watch(() => route.query, (newQuery) => {
+  if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
+    followList.value = []; // 清空列表
+    followOffset.value = 0; // 重置偏移量
+    checkTargetUser();
     loadFollowList();
   }
 });
@@ -234,4 +272,9 @@ onMounted(() => {
 .loading-more {
   @apply my-4;
 }
+
+.page-title {
+  @apply text-xl font-bold mb-4;
+  @apply text-gray-900 dark:text-white;
+}
 </style>