tnbapp/src/views/user/UserHome.vue

<template>
  <div class="user-home-container">
    <div class="user-header-wrapper">
      <el-card v-if="user" class="user-info-card" :body-style="{ padding: '20px' }">
        <div class="info-content-top">
          <div class="avatar-section">
            <el-avatar :size="90" :src="user.avatarUrl" class="user-avatar-main" />
            <el-tag
                v-if="user.vip"
                size="mini"
                effect="dark"
                type="warning"
                class="vip-tag-overlay"
            >
              VIP
            </el-tag>
          </div>

          <div class="action-section">
            <el-button
                :type="followButton.text === '已关注' ? 'info' : 'danger'"
                round
                size="medium"
                :icon="followButton.icon"
                @click="followUser(user.userId)"
            >
              {{ followButton.text }}
            </el-button>
            <el-button icon="el-icon-message" round size="medium" @click="sendMessage(user.userId)">发消息</el-button>

            <el-dropdown trigger="click" class="more-btn">
              <el-button icon="el-icon-more" circle plain size="medium"></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="user.biliUserId">
                  <a :href="'https://space.bilibili.com/' + user.biliUserId" target="_blank" class="no-link-style">访问B站空间</a>
                </el-dropdown-item>
                <el-dropdown-item divider>举报用户</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <div class="info-text-bottom">
          <h2 class="user-name">
            {{ user.screenName }}
            <el-tag v-if="user.vip" size="mini" type="warning" effect="plain" class="name-vip-tag">会员</el-tag>
            <el-tag v-if="user.biliUserId" size="mini" effect="plain" class="bili-tag">B站认证</el-tag>
          </h2>
          <p class="user-signature">{{ user.signature || '这个人很心大，居然没有写签名~' }}</p>

          <div class="user-stats">
            <router-link :to="`/user/${user.userId}/following`" class="stat-item">
              <span class="stat-value">{{ user.following }}</span>
              <span class="stat-label">关注</span>
            </router-link>
            <div class="stat-divider"></div>
            <router-link :to="`/user/${user.userId}/follower`" class="stat-item">
              <span class="stat-value">{{ user.follower }}</span>
              <span class="stat-label">粉丝</span>
            </router-link>
          </div>
        </div>
      </el-card>
    </div>

    <div class="user-content-section">
      <el-tabs v-if="userContentData" v-model="activeName" class="custom-tabs" @tab-click="tabClick">
        <el-tab-pane name="video">
          <span slot="label">视频 <span class="tab-count">{{ userContentData.videoCount }}</span></span>
          <el-row :gutter="15" class="grid-container" v-loading="loading">
            <el-col v-for="(video, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
              <video-card :video="video" class="content-card-hover" />
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane name="image">
          <span slot="label">图片 <span class="tab-count">{{ userContentData.imageCount }}</span></span>
          <el-row :gutter="15" class="grid-container" v-loading="loading">
            <el-col v-for="(album, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
              <image-album-card :image-album="album" class="content-card-hover" />
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane name="album">
          <span slot="label">收藏夹 <span class="tab-count">{{ userContentData.albumCount }}</span></span>
          <el-row :gutter="15" class="grid-container" v-loading="loading">
            <el-col v-for="(item, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
              <el-card :body-style="{ padding: '0px' }" class="playlist-card content-card-hover">
                <router-link :to="`/playlist/${item.albumId}`" class="no-link-style">
                  <div class="playlist-cover-wrapper">
                    <el-image lazy fit="cover" :src="item.coverUrl" class="playlist-img" />
                    <div class="playlist-mask">
                      <i class="el-icon-collection"></i> <span>{{ item.total }}</span>
                    </div>
                  </div>
                  <div class="playlist-info">
                    <span class="playlist-title">{{ item.albumName }}</span>
                  </div>
                </router-link>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>

      <el-empty v-if="showEmpty && !loading" :image-size="200" description="该分类下空空如也" />

      <div class="pagination-wrapper" v-if="totalSize > pageSize">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="totalSize"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import VideoCard from '@/components/card/VideoCard'
import ImageAlbumCard from '@/components/card/ImageAlbumCard'
import { getUserInfo, checkRelation, followUser, unfollowUser } from '@/api/user'
import { getUserContentData, getUserVideos } from '@/api/video'
import { getAlbumImage1 } from '@/api/image'
import { getUserPlaylist } from '@/api/collect'

export default {
  name: 'UserHome',
  components: { VideoCard, ImageAlbumCard },
  data() {
    return {
      user: null,
      userId: null,
      followButton: { icon: 'el-icon-plus', text: '关注' },
      activeName: 'video',
      currentPage: 1,
      pageSize: 12,
      totalSize: 0,
      dataList: [],
      userContentData: null,
      loading: false,
      showEmpty: false
    }
  },
  watch: {
    '$route.query': {
      handler() {
        this.loadDataFromRoute();
      },
      deep: true
    }
  },
  created() {
    this.userId = this.$route.params.id;
    this.initUserContext();
  },
  methods: {
    initUserContext() {
      Promise.all([
        getUserInfo(this.userId),
        checkRelation(this.userId),
        getUserContentData(this.userId)
      ]).then(([info, relation, content]) => {
        if (info.code === 0) {
          this.user = info.data;
          this.loadDataFromRoute();
        }
        if (relation.code === 0 && relation.data) {
          this.followButton = { icon: 'el-icon-check', text: '已关注' };
        }
        if (content.code === 0) {
          this.userContentData = content.data;
        }
      });
    },
    loadDataFromRoute() {
      const query = this.$route.query;
      this.activeName = query.tab || 'video';
      this.currentPage = query.page ? parseInt(query.page) : 1;
      this.updatePageTitle();
      this.fetchContentList();
    },
    syncStateToURL() {
      this.$router.push({
        path: this.$route.path,
        query: { tab: this.activeName, page: this.currentPage }
      }).catch(err => {
        if (err.name !== 'NavigationDuplicated') throw err;
      });
    },
    fetchContentList() {
      this.loading = true;
      this.dataList = [];
      this.showEmpty = false;
      let apiCall;
      if (this.activeName === 'video') {
        apiCall = getUserVideos(this.userId, this.currentPage);
      } else if (this.activeName === 'image') {
        apiCall = getAlbumImage1(this.currentPage, this.userId);
      } else if (this.activeName === 'album') {
        apiCall = getUserPlaylist({ userId: this.userId, pn: this.currentPage });
      }
      apiCall.then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list;
          this.totalSize = resp.data.totalSize;
          this.showEmpty = this.dataList.length === 0;
        }
      }).finally(() => { this.loading = false; });
    },
    tabClick(tab) {
      this.activeName = tab.name;
      this.currentPage = 1;
      this.syncStateToURL();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.syncStateToURL();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    updatePageTitle() {
      if (!this.user) return;
      const suffix = { video: '的视频', image: '的图片', album: '的收藏夹' };
      document.title = `${this.user.screenName}${suffix[this.activeName] || '的主页'}`;
    },
    followUser(userId) {
      const isFollowing = this.followButton.text === '已关注';
      const api = isFollowing ? unfollowUser : followUser;
      api(userId).then(resp => {
        if (resp.code === 0) {
          this.followButton = isFollowing ? { icon: 'el-icon-plus', text: '关注' } : { icon: 'el-icon-check', text: '已关注' };
          this.$message.success(isFollowing ? '已取消关注' : '关注成功');
        }
      });
    },
    sendMessage() { this.$message.info('私信功能暂未开放'); }
  }
}
</script>

<style scoped>
.user-home-container {
  background-color: #f4f5f7;
  min-height: 100vh;
  padding: 20px 0 50px 0;
}

.user-header-wrapper {
  max-width: 1100px;
  margin: 0 auto 20px;
  padding: 0 15px;
}

.user-info-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.info-content-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-section {
  position: relative;
  display: flex;
}

.user-avatar-main {
  border: 2px solid #fff;
  background: #fff;
}

/* 会员 Tag 覆盖在头像上的样式 */
.vip-tag-overlay {
  position: absolute;
  bottom: 0;
  right: -10px;
  border-radius: 4px;
  border: 1px solid #fff;
  font-weight: bold;
  transform: scale(0.9);
}

.name-vip-tag {
  margin-left: 5px;
  font-weight: normal;
  vertical-align: middle;
}

.action-section {
  display: flex;
  gap: 10px;
}

.user-name {
  margin: 0 0 8px 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-signature {
  color: #9499a0;
  font-size: 14px;
  margin-bottom: 20px;
}

.user-stats {
  display: flex;
  align-items: center;
  gap: 30px;
}

.stat-item {
  text-decoration: none;
  display: flex;
  gap: 5px;
  font-size: 14px;
}

.stat-value { font-weight: bold; color: #18191c; }
.stat-label { color: #9499a0; }
.stat-divider { width: 1px; height: 14px; background: #e3e5e7; }

.user-content-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

.custom-tabs /deep/ .el-tabs__header {
  background: #fff;
  padding: 0 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.tab-count { font-size: 12px; color: #9499a0; margin-left: 4px; }
.content-card-hover { transition: all 0.3s ease; margin-bottom: 20px; }
.content-card-hover:hover { transform: translateY(-5px); }
.no-link-style { text-decoration: none; color: inherit; }

.playlist-card { border-radius: 8px; overflow: hidden; }
.playlist-cover-wrapper { position: relative; aspect-ratio: 16/9; }
.playlist-img { width: 100%; height: 100%; }
.playlist-mask { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.6); color: #fff; padding: 2px 8px; font-size: 12px; border-top-left-radius: 8px; }
.playlist-info { padding: 10px; text-align: left; }
.playlist-title { font-size: 14px; color: #18191c; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagination-wrapper { margin-top: 30px; display: flex; justify-content: center; }

@media screen and (max-width: 768px) {
  .user-home-container { padding-top: 10px; }
  .user-avatar-main { width: 70px !important; height: 70px !important; }
  .user-name { font-size: 20px; }
  .vip-tag-overlay { right: -5px; bottom: -2px; }
  .action-section .el-button { padding: 8px 12px; font-size: 12px; }
  .more-btn { display: none; }
}
</style>