xiangqinxiangmu/LiangZhiYUMao/pages/mine/my-dynamics.vue

<template>
  <view class="my-dynamics-page">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="nav-title">我的动态</view>
      <view class="nav-right"></view>
    </view>

    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
      <view class="user-details">
        <text class="nickname">{{ userInfo.nickname }}</text>
        <text class="dynamic-count">{{ userInfo.dynamicCount }} 动态</text>
      </view>
    </view>

    <!-- 标签页导航 -->
    <view class="tab-nav">
      <view
          class="tab-item"
          :class="{ active: activeTab === 'dynamic' }"
          @click="switchTab('dynamic')"
      >
        <text>动态</text>
      </view>
      <view
          class="tab-item"
          :class="{ active: activeTab === 'interaction' }"
          @click="switchTab('interaction')"
      >
        <text>互动</text>
      </view>
      <view
          class="tab-item"
          :class="{ active: activeTab === 'browse' }"
          @click="switchTab('browse')"
      >
        <text>浏览记录</text>
      </view>
    </view>

    <!-- 互动子标签 -->
    <view class="sub-tab-nav" v-if="activeTab === 'interaction'">
      <view
          class="sub-tab-item"
          :class="{ active: activeSubTab === 'like' }"
          @click="switchSubTab('like')"
      >
        <text>点赞</text>
      </view>
      <view
          class="sub-tab-item"
          :class="{ active: activeSubTab === 'collect' }"
          @click="switchSubTab('collect')"
      >
        <text>收藏</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 动态列表 -->
      <view v-if="activeTab === 'dynamic'" class="dynamic-list">
        <view class="empty-tip" v-if="dynamicList.length === 0">
          <text>暂无动态</text>
        </view>
        <view class="dynamic-item" v-for="item in dynamicList" :key="item.dynamicId">
          <!-- 操作菜单按钮 -->
          <view class="dynamic-menu" @click.stop="showActionMenu(item)">
            <text class="menu-icon">⋯</text>
          </view>
          <view @click="goToDetail(item.dynamicId)">
            <!-- 动态内容 -->
            <view class="dynamic-content">
              <text class="dynamic-text">{{ item.content }}</text>
            </view>
            <!-- 动态图片 -->
            <view class="dynamic-images" v-if="item.mediaUrls">
              <image
                  class="dynamic-image"
                  v-for="(img, index) in getMediaUrls(item.mediaUrls)"
                  :key="index"
                  :src="img"
                  mode="aspectFill"
                  @click.stop="previewImage(getMediaUrls(item.mediaUrls), index)"
              ></image>
            </view>
            <!-- 动态信息 -->
            <view class="dynamic-info">
              <text class="dynamic-time">{{ formatTime(item.createdAt) }}</text>
              <view class="dynamic-stats">
                <text class="stat-item">{{ item.likeCount || 0 }} 赞</text>
                <text class="stat-item">{{ item.commentCount || 0 }} 评论</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 互动列表 -->
      <view v-else-if="activeTab === 'interaction'" class="interaction-list">
        <view class="empty-tip" v-if="interactionList.length === 0">
          <text>暂无互动</text>
        </view>
        <view class="interaction-item" v-for="item in interactionList" :key="item.dynamicId">
          <!-- 操作菜单按钮 -->
          <view class="interaction-menu" @click.stop="showInteractionMenu(item)">
            <text class="menu-icon">⋯</text>
          </view>
          <view @click="goToDetail(item.dynamicId)">
            <!-- 用户信息 -->
            <view class="user-info">
              <image class="avatar" :src="getAvatar(item)" mode="aspectFill"></image>
              <view class="user-details">
                <text class="nickname">{{ getNickname(item) }}</text>
              </view>
            </view>
            <!-- 互动内容 -->
            <view class="interaction-content">
              <text class="interaction-text">{{ item.content }}</text>
            </view>
            <!-- 互动图片 -->
            <view class="interaction-images" v-if="item.mediaUrls">
              <image
                  class="interaction-image"
                  v-for="(img, index) in getMediaUrls(item.mediaUrls)"
                  :key="index"
                  :src="img"
                  mode="aspectFill"
                  @click.stop="previewImage(getMediaUrls(item.mediaUrls), index)"
              ></image>
            </view>
            <!-- 互动信息 -->
            <view class="interaction-info">
              <text class="interaction-time">{{ formatTime(item.createdAt) }}</text>
              <view class="interaction-stats">
                <text class="stat-item">{{ item.likeCount || 0 }} 赞</text>
                <text class="stat-item">{{ item.commentCount || 0 }} 评论</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 浏览记录列表 -->
      <view v-else-if="activeTab === 'browse'" class="browse-list">
        <view class="empty-tip" v-if="browseList.length === 0">
          <text>暂无浏览记录</text>
        </view>
        <view class="browse-item" v-for="item in browseList" :key="item.dynamicId" @click="goToDetail(item.dynamicId)">
          <!-- 用户信息 -->
          <view class="user-info">
            <image class="avatar" :src="getAvatar(item)" mode="aspectFill"></image>
            <view class="user-details">
              <text class="nickname">{{ getNickname(item) }}</text>
            </view>
          </view>
          <!-- 浏览内容 -->
          <view class="browse-content">
            <text class="browse-text">{{ item.content }}</text>
          </view>
          <!-- 浏览图片 -->
          <view class="browse-images" v-if="item.mediaUrls">
            <image
                class="browse-image"
                v-for="(img, index) in getMediaUrls(item.mediaUrls)"
                :key="index"
                :src="img"
                mode="aspectFill"
                @click.stop="previewImage(getMediaUrls(item.mediaUrls), index)"
            ></image>
          </view>
          <!-- 浏览信息 -->
          <view class="browse-info">
            <text class="browse-time">{{ formatTime(item.createdAt) }}</text>
            <view class="browse-stats">
              <text class="stat-item">{{ item.likeCount || 0 }} 赞</text>
              <text class="stat-item">{{ item.commentCount || 0 }} 评论</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 发布动态按钮 -->
    <view class="publish-btn" @click="goPublish">
      <text class="publish-icon">+</text>
    </view>
  </view>
</template>

<script>
import api from '../../utils/api.js'

export default {
  data() {
        return {
            // 用户信息
            userInfo: {
                avatar: 'https://via.placeholder.com/100',
                nickname: '用户',
                dynamicCount: 0
            },
            // 活跃标签页
            activeTab: 'dynamic',
            // 活跃子标签（互动下的点赞/收藏）
            activeSubTab: 'like',
            // 动态列表数据
            dynamicList: [],
            // 互动列表数据
            interactionList: [],
            // 浏览记录列表数据
            browseList: [],
            // 默认头像
            defaultAvatar: 'https://via.placeholder.com/100x100.png?text=头像',
            // 我的动态分页相关
            dynamicPageNum: 1,
            dynamicPageSize: 10,
            dynamicLoading: false,
            dynamicNoMore: false
        }
    },
  onLoad() {
    // 页面加载时获取用户信息和动态数据
    this.loadUserInfo();
    // 初始化分页状态并加载第一页数据
    this.dynamicPageNum = 1;
    this.dynamicNoMore = false;
    this.dynamicList = [];
    this.loadDynamicData();
  },
  // 页面触底加载更多
  onReachBottom() {
    // 仅在“动态”标签下并且还有更多数据时加载
    if (this.activeTab === 'dynamic' && !this.dynamicNoMore && !this.dynamicLoading) {
      this.loadDynamicData();
    }
  },
  methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack();
        },
        // 获取头像
        getAvatar(item) {
            if (item && item.user && item.user.avatarUrl) {
                return item.user.avatarUrl;
            }
            return this.defaultAvatar;
        },
        // 获取昵称
        getNickname(item) {
            if (item && item.user && item.user.nickname) {
                return item.user.nickname;
            }
            return '匿名用户';
        },
    // 切换标签页
    switchTab(tab) {
      this.activeTab = tab;
      // 根据标签页加载对应数据
      if (tab === 'dynamic') {
        // 切换回“动态”时，如果还没有数据或之前已经加载完一部分，继续使用当前分页状态
        if (this.dynamicList.length === 0) {
          this.dynamicPageNum = 1;
          this.dynamicNoMore = false;
        }
        this.loadDynamicData();
      } else if (tab === 'interaction') {
        this.loadInteractionData();
      } else if (tab === 'browse') {
        this.loadBrowseData();
      }
    },
    // 切换互动子标签
    switchSubTab(subTab) {
      if (this.activeSubTab === subTab) {
        return; // 如果点击的是当前标签，不重复加载
      }
      this.activeSubTab = subTab;
      // 先清空列表
      this.interactionList = [];
      // 根据子标签加载对应数据
      this.loadInteractionData();
    },
    // 加载用户信息
    loadUserInfo() {
      // 从本地存储获取用户信息
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo) {
        this.userInfo = {
          avatar: userInfo.avatarUrl || userInfo.avatar || 'https://via.placeholder.com/100',
          nickname: userInfo.nickname || '用户',
          dynamicCount: 0 // 后续从接口获取
        };
        // 加载用户动态数量
        this.loadUserDynamicCount();
      }
    },
    // 加载用户动态数量
    loadUserDynamicCount() {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.userId) {
        // 获取用户动态数量
        api.dynamic.getUserDynamics(userInfo.userId, { pageNum: 1, pageSize: 1 }).then(res => {
          if (res && res.total) {
            this.userInfo.dynamicCount = res.total;
          }
        }).catch(err => {
          console.error('获取用户动态数量失败:', err);
        });
      }
    },
    // 加载动态数据
    async loadDynamicData() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo || !userInfo.userId) {
        return;
      }
      if (this.dynamicLoading || this.dynamicNoMore) {
        return;
      }

      this.dynamicLoading = true;
      try {
        // 获取用户发布的动态列表（分页）
        const res = await api.dynamic.getUserDynamics(userInfo.userId, {
          pageNum: this.dynamicPageNum,
          pageSize: this.dynamicPageSize
        });

        if (res && res.records) {
          const records = res.records || [];
          if (this.dynamicPageNum === 1) {
            this.dynamicList = records;
          } else {
            this.dynamicList = [...this.dynamicList, ...records];
          }

          // 根据返回数量判断是否还有更多
          if (!records || records.length < this.dynamicPageSize) {
            this.dynamicNoMore = true;
          } else {
            this.dynamicPageNum += 1;
          }
        }
      } catch (err) {
        console.error('获取用户动态列表失败:', err);
      } finally {
        this.dynamicLoading = false;
      }
    },
    // 加载互动数据
    loadInteractionData() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo || !userInfo.userId) {
        console.warn('用户信息不存在，无法加载互动数据');
        this.interactionList = [];
        return;
      }
      
      // 先清空列表，避免显示旧数据
      this.interactionList = [];
      
      if (this.activeSubTab === 'like') {
        // 获取用户点赞的动态列表
        console.log('开始加载点赞列表，userId:', userInfo.userId);
        api.dynamic.getLikedList(userInfo.userId, 1, 10).then(res => {
          console.log('点赞列表API返回数据:', res);
          if (res) {
            // 处理返回数据，支持多种可能的数据结构
            const records = res.records || res.list || (Array.isArray(res) ? res : []);
            this.interactionList = records || [];
            console.log('设置点赞列表，数量:', this.interactionList.length);
          } else {
            this.interactionList = [];
            console.log('点赞列表返回数据为空');
          }
        }).catch(err => {
          console.error('获取用户点赞列表失败:', err);
          this.interactionList = [];
          uni.showToast({
            title: '加载点赞列表失败',
            icon: 'none'
          });
        });
      } else if (this.activeSubTab === 'collect') {
        // 获取用户收藏的动态列表
        console.log('开始加载收藏列表，userId:', userInfo.userId);
        api.dynamic.getFavoritesList(userInfo.userId, 1, 10).then(res => {
          console.log('收藏列表API返回数据:', res);
          if (res) {
            // 处理返回数据，支持多种可能的数据结构
            const records = res.records || res.list || (Array.isArray(res) ? res : []);
            this.interactionList = records || [];
            console.log('设置收藏列表，数量:', this.interactionList.length);
          } else {
            this.interactionList = [];
            console.log('收藏列表返回数据为空');
          }
        }).catch(err => {
          console.error('获取用户收藏列表失败:', err);
          this.interactionList = [];
          uni.showToast({
            title: '加载收藏列表失败',
            icon: 'none'
          });
        });
      }
    },
    // 加载浏览记录数据
    loadBrowseData() {
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && userInfo.userId) {
        // 获取用户浏览记录列表
        api.dynamic.getBrowseHistoryList(userInfo.userId, 1, 10).then(res => {
          if (res && res.records) {
            this.browseList = res.records;
          }
        }).catch(err => {
          console.error('获取用户浏览记录失败:', err);
        });
      }
    },
    // 跳转到发布动态页面
    goPublish() {
      uni.navigateTo({
        url: '/pages/plaza/publish'
      });
    },
    // 跳转到动态详情页
    goToDetail(dynamicId) {
      uni.navigateTo({
        url: `/pages/plaza/detail?id=${dynamicId}`
      });
    },
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      const now = new Date();
      const diff = now - date;
      const minute = 60 * 1000;
      const hour = minute * 60;
      const day = hour * 24;
      const month = day * 30;
      const year = day * 365;
      
      if (diff < minute) {
        return '刚刚';
      } else if (diff < hour) {
        return Math.floor(diff / minute) + '分钟前';
      } else if (diff < day) {
        return Math.floor(diff / hour) + '小时前';
      } else if (diff < month) {
        return Math.floor(diff / day) + '天前';
      } else if (diff < year) {
        return Math.floor(diff / month) + '个月前';
      } else {
        return Math.floor(diff / year) + '年前';
      }
    },
    // 处理媒体URL，支持数组、JSON字符串、逗号分隔等多种格式
    getMediaUrls(mediaUrls) {
      if (!mediaUrls) return [];
      
      const isLikelyImage = (u) => {
        if (typeof u !== 'string' || !u.trim()) return false;
        const url = u.trim();
        const hasExt = /(\.png|\.jpg|\.jpeg|\.gif|\.webp|\.bmp)(\?|$)/i.test(url);
        const isHttp = /^https?:\/\//i.test(url);
        return hasExt || isHttp;
      };
      
      try {
        if (Array.isArray(mediaUrls)) {
          return mediaUrls.filter(isLikelyImage);
        }
        if (typeof mediaUrls === 'string') {
          const s = mediaUrls.trim();
          // JSON数组字符串: ["url1", "url2"]
          if (s.startsWith('[')) {
            const arr = JSON.parse(s);
            return Array.isArray(arr) ? arr.filter(isLikelyImage) : [];
          }
          // 逗号分隔或带引号
          return s.split(',')
                  .map(x => x.trim().replace(/^\[|\]$/g, '').replace(/^['"]|['"]$/g, ''))
                  .filter(isLikelyImage);
        }
      } catch (e) {
        // ignore parse error
        console.error('解析媒体URL失败:', e);
      }
      return [];
    },
    // 预览图片
    previewImage(urls, current) {
      uni.previewImage({
        urls: urls,
        current: current,
        longPressActions: {
          itemList: ['保存图片'],
          success: function(data) {
            console.log('长按图片操作结果:', data);
          },
          fail: function(err) {
            console.error('长按图片操作失败:', err);
          }
        }
      });
    },
    // 显示操作菜单
    showActionMenu(item) {
      uni.showActionSheet({
        itemList: ['编辑动态', '删除动态'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 编辑动态
            this.editDynamic(item);
          } else if (res.tapIndex === 1) {
            // 删除动态
            this.deleteDynamic(item);
          }
        }
      });
    },
    // 编辑动态
    editDynamic(item) {
      // 跳转到编辑页面，传递动态信息
      uni.navigateTo({
        url: `/pages/plaza/publish?edit=true&dynamicId=${item.dynamicId}&content=${encodeURIComponent(item.content || '')}&mediaUrls=${encodeURIComponent(JSON.stringify(item.mediaUrls || []))}&mediaType=${item.mediaType || 0}&visibility=${item.visibility || 1}`
      });
    },
    // 删除动态
    deleteDynamic(item) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条动态吗？删除后无法恢复。',
        confirmText: '删除',
        confirmColor: '#E91E63',
        success: async (res) => {
          if (res.confirm) {
            try {
              const userInfo = uni.getStorageSync('userInfo');
              if (!userInfo || !userInfo.userId) {
                uni.showToast({
                  title: '请先登录',
                  icon: 'none'
                });
                return;
              }
              
              uni.showLoading({
                title: '删除中...'
              });
              
              await api.dynamic.deleteUserDynamic(item.dynamicId, userInfo.userId);
              
              uni.hideLoading();
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              });
              
              // 重新加载动态列表
              this.loadDynamicData();
            } catch (error) {
              uni.hideLoading();
              console.error('删除动态失败:', error);
              uni.showToast({
                title: error.message || '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    // 显示互动操作菜单
    showInteractionMenu(item) {
      const menuItems = [];
      if (this.activeSubTab === 'like') {
        menuItems.push('取消点赞');
      } else if (this.activeSubTab === 'collect') {
        menuItems.push('取消收藏');
      }
      
      if (menuItems.length === 0) return;
      
      uni.showActionSheet({
        itemList: menuItems,
        success: (res) => {
          if (res.tapIndex === 0) {
            if (this.activeSubTab === 'like') {
              this.cancelLike(item);
            } else if (this.activeSubTab === 'collect') {
              this.cancelFavorite(item);
            }
          }
        }
      });
    },
    // 取消点赞
    async cancelLike(item) {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (!userInfo || !userInfo.userId) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
          return;
        }
        
        uni.showLoading({
          title: '处理中...'
        });
        
        await api.dynamic.unlike(item.dynamicId, userInfo.userId);
        
        uni.hideLoading();
        uni.showToast({
          title: '已取消点赞',
          icon: 'success'
        });
        
        // 通知其他页面更新状态（如首页、详情页）
        uni.$emit('dynamic-updated', {
          dynamicId: item.dynamicId,
          isLiked: false,
          likeCount: Math.max(0, (item.likeCount || 0) - 1)
        });
        
        // 从列表中移除该项
        const index = this.interactionList.findIndex(i => i.dynamicId === item.dynamicId);
        if (index !== -1) {
          this.interactionList.splice(index, 1);
        }
      } catch (error) {
        uni.hideLoading();
        console.error('取消点赞失败:', error);
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        });
      }
    },
    // 取消收藏
    async cancelFavorite(item) {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (!userInfo || !userInfo.userId) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
          return;
        }
        
        uni.showLoading({
          title: '处理中...'
        });
        
        await api.dynamic.unfavorite(item.dynamicId, userInfo.userId);
        
        uni.hideLoading();
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        });
        
        // 通知其他页面更新状态（如首页、详情页）
        uni.$emit('dynamic-updated', {
          dynamicId: item.dynamicId,
          isFavorited: false,
          favoriteCount: Math.max(0, (item.favoriteCount || 0) - 1)
        });
        
        // 从列表中移除该项
        const index = this.interactionList.findIndex(i => i.dynamicId === item.dynamicId);
        if (index !== -1) {
          this.interactionList.splice(index, 1);
        }
      } catch (error) {
        uni.hideLoading();
        console.error('取消收藏失败:', error);
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-dynamics-page {
  min-height: 100vh;
  background: #F5F5F5;
  padding-bottom: 100rpx;
}

/* 顶部导航栏 */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx 30rpx 20rpx;
  background: #FFFFFF;
  position: relative;
  z-index: 10;

  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .back-icon {
      font-size: 48rpx;
      color: #333333;
      font-weight: bold;
    }
  }

  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }

  .nav-right {
    width: 60rpx;
  }
}

/* 用户信息区域 */
.user-info-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #FFFFFF;
  margin-bottom: 20rpx;

  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    margin-right: 20rpx;
    background-color: #E0E0E0;
  }

  .user-details {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .nickname {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 8rpx;
    }

    .dynamic-count {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

/* 标签页导航 */
.tab-nav {
  display: flex;
  background: #FFFFFF;
  border-bottom: 2rpx solid #F0F0F0;
  margin-bottom: 20rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 30rpx 0;
    position: relative;

    text {
      font-size: 30rpx;
      color: #666666;
    }

    &.active {
      text {
        color: #E91E63;
        font-weight: bold;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 6rpx;
        background: #E91E63;
        border-radius: 3rpx;
      }
    }
  }
}

/* 互动子标签导航 */
.sub-tab-nav {
  display: flex;
  background: #FFFFFF;
  padding: 0 30rpx;
  margin-bottom: 20rpx;

  .sub-tab-item {
    padding: 20rpx 30rpx;
    margin-right: 40rpx;

    text {
      font-size: 26rpx;
      color: #999999;
    }

    &.active {
      text {
        color: #E91E63;
        font-weight: bold;
      }
    }
  }
}

/* 内容区域 */
.content-area {
  padding: 0 30rpx;
}

/* 列表通用样式 */
.dynamic-list,
.interaction-list,
.browse-list {
  background: #FFFFFF;
  border-radius: 12rpx;
  overflow: hidden;
}

.dynamic-item,
.interaction-item,
.browse-item {
  padding: 30rpx;
  border-bottom: 2rpx solid #F5F5F5;
  position: relative;

  &:last-child {
    border-bottom: none;
  }
}

/* 动态操作菜单 */
.dynamic-menu {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;

  .menu-icon {
    font-size: 40rpx;
    color: #999999;
    font-weight: bold;
    line-height: 1;
  }
}

/* 互动操作菜单 */
.interaction-menu {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;

  .menu-icon {
    font-size: 40rpx;
    color: #999999;
    font-weight: bold;
    line-height: 1;
  }
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin-right: 20rpx;
    background-color: #E0E0E0;
  }

  .user-details {
    display: flex;
    flex-direction: column;

    .nickname {
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 4rpx;
    }
  }
}

/* 内容文本 */
.dynamic-content,
.interaction-content,
.browse-content {
  margin-bottom: 20rpx;

  .dynamic-text,
  .interaction-text,
  .browse-text {
    font-size: 28rpx;
    color: #333333;
    line-height: 44rpx;
  }
}

/* 图片列表 */
.dynamic-images,
.interaction-images,
.browse-images {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 20rpx;

  .dynamic-image,
  .interaction-image,
  .browse-image {
    width: calc((100% - 30rpx) / 3);
    height: 200rpx;
    border-radius: 8rpx;
    background-color: #E0E0E0;
  }
}

/* 信息栏 */
.dynamic-info,
.interaction-info,
.browse-info {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .dynamic-time,
  .interaction-time,
  .browse-time {
    font-size: 22rpx;
    color: #999999;
  }

  .dynamic-stats,
  .interaction-stats,
  .browse-stats {
    display: flex;
    align-items: center;

    .stat-item {
      font-size: 22rpx;
      color: #999999;
      margin-left: 30rpx;
    }
  }
}

/* 空状态提示 */
.empty-tip {
  padding: 100rpx 0;
  text-align: center;

  text {
    font-size: 28rpx;
    color: #999999;
  }
}

/* 发布动态按钮 */
.publish-btn {
  position: fixed;
  bottom: 80rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background: #E91E63;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 20rpx rgba(233, 30, 99, 0.3);
  z-index: 999;

  .publish-icon {
    font-size: 60rpx;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 1;
  }
}

/* 页面背景色 */
.my-dynamics-page {
  background-color: #F5F5F5;
}
</style>