emall-web/src/views/Profile.vue

<template>
  <div class="profile-container">
    <!-- 深空背景 -->
    <div class="space-background">
      <div class="stars" ref="stars"></div>
    </div>
    
    <!-- 顶部导航 -->
    <div class="header glass-card">
      <van-icon name="arrow-left" size="24" @click="goBack" />
      <h2>个人中心</h2>
      <van-icon name="setting-o" size="24" @click="goToSettings" />
    </div>
    
    <!-- 用户信息卡片 -->
    <div class="user-card glass-card p-20">
      <div class="user-avatar">
        <img :src="userAvatar" alt="用户头像" />
      </div>
      <div class="user-info">
        <h3>{{ userName }}</h3>
        <p>{{ userEmail }}</p>
        <p class="user-motto">{{ userMotto }}</p>
      </div>
      <van-icon name="edit" size="20" @click="editProfile" />
    </div>
    
    <!-- 核心数据卡片 -->
    <div class="stats-container">
      <div class="stats-card glass-card">
        <div class="stat-item">
          <div class="stat-number">{{ sentCount }}</div>
          <div class="stat-label">寄出的信</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <div class="stat-number">{{ receivedCount }}</div>
          <div class="stat-label">收到的信</div>
        </div>
        <div class="stat-divider"></div>
        <div class="stat-item">
          <div class="stat-number">{{ totalDays }}</div>
          <div class="stat-label">时间旅行(天)</div>
        </div>
      </div>
    </div>
    
    <!-- 功能列表 -->
    <div class="function-list">
      <van-cell-group class="glass-card">
        <van-cell
          title="我的时间线"
          icon="chart-trending-o"
          is-link
          @click="goToTimeline"
        />
        <van-cell
          title="数据统计"
          icon="bar-chart-o"
          is-link
          @click="goToStats"
        />
        <van-cell
          title="AI助手"
          icon="bulb-o"
          is-link
          @click="goToAIAssistant"
        />
      </van-cell-group>
      
      <van-cell-group class="glass-card mt-20">
        <van-cell
          title="数据备份"
          icon="folder-o"
          is-link
          @click="goToBackup"
        />
        <van-cell
          title="隐私设置"
          icon="shield-o"
          is-link
          @click="goToPrivacy"
        />
        <van-cell
          title="通知管理"
          icon="bell"
          is-link
          @click="goToNotifications"
        />
      </van-cell-group>
      
      <van-cell-group class="glass-card mt-20">
        <van-cell
          title="帮助与反馈"
          icon="question-o"
          is-link
          @click="goToHelp"
        />
        <van-cell
          title="关于ChronoMail"
          icon="info-o"
          is-link
          @click="showAbout"
        />
      </van-cell-group>
    </div>
    
    <!-- 退出登录按钮 -->
    <div class="logout-container">
      <van-button round block class="logout-button" @click="logout">
        退出登录
      </van-button>
    </div>
    
    <!-- 底部导航 -->
    <van-tabbar v-model="active" class="custom-tabbar">
      <van-tabbar-item icon="home-o" to="/home">时光胶囊</van-tabbar-item>
      <van-tabbar-item icon="envelop-o" to="/inbox">收件箱</van-tabbar-item>
      <van-tabbar-item icon="send-o" to="/sent">发件箱</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/profile">个人中心</van-tabbar-item>
    </van-tabbar>
    
    <!-- 关于弹窗 -->
    <van-popup v-model:show="showAboutPopup" position="bottom" :style="{ height: '40%' }">
      <div class="about-popup">
        <div class="about-logo">
          <div class="time-capsule"></div>
          <h3>ChronoMail</h3>
          <p>版本 1.0.0</p>
        </div>
        <div class="about-content">
          <p>ChronoMail 是一款可以发送邮件到未来的应用，帮助您与未来的自己进行对话，记录成长与蜕变。</p>
          <p class="about-slogan">"写给未来，不负当下"</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showFailToast, showSuccessToast, Dialog } from 'vant'
import { userActions, mailActions, userState } from '../store'

export default {
  name: 'Profile',
  setup() {
    const router = useRouter()
    const active = ref(3)
    const stars = ref(null)
    const showAboutPopup = ref(false)
    
    // 使用直接导入的状态和操作
    const user = computed(() => userState.userInfo)
    
    // 用户信息
    const userName = ref(user.value?.username || '时光旅人')
    const userEmail = ref(user.value?.email || 'traveler@chronomail.com')
    const userMotto = ref('穿越时空，与未来的自己对话')
    const userAvatar = ref(user.value?.avatar || 'https://picsum.photos/seed/user123/100/100.jpg')
    
    // 统计数据
    const sentCount = ref(0)
    const receivedCount = ref(0)
    const totalDays = ref(0)
    
    // 获取用户统计数据
    const fetchStatistics = async () => {
      try {
        const response = await mailActions.getStatistics()
        const data = response.data
        
        sentCount.value = data.totalSent || 0
        receivedCount.value = data.totalReceived || 0
        totalDays.value = data.timeTravelDuration || 0
      } catch (error) {
        console.error('获取统计数据失败:', error)
      }
    }
    
    // 获取用户信息
    const fetchUserProfile = async () => {
      try {
        const response = await userActions.getProfile()
        const userData = response.data
        
        userName.value = userData.username || '时光旅人'
        userEmail.value = userData.email || 'traveler@chronomail.com'
        userAvatar.value = userData.avatar || 'https://picsum.photos/seed/user123/100/100.jpg'
      } catch (error) {
        console.error('获取用户信息失败:', error)
      }
    }
    
    // 生成星空背景
    const generateStars = () => {
      if (!stars.value) return
      
      const starsContainer = stars.value
      const starCount = 100
      
      for (let i = 0; i < starCount; i++) {
        const star = document.createElement('div')
        star.className = 'star'
        
        // 随机位置
        const left = Math.random() * 100
        const top = Math.random() * 100
        
        // 随机大小
        const size = Math.random() * 3 + 1
        
        // 随机动画延迟
        const delay = Math.random() * 4
        
        star.style.left = `${left}%`
        star.style.top = `${top}%`
        star.style.width = `${size}px`
        star.style.height = `${size}px`
        star.style.animationDelay = `${delay}s`
        
        starsContainer.appendChild(star)
      }
    }
    
    // 返回上一页
    const goBack = () => {
      router.back()
    }
    
    // 跳转到设置页面
    const goToSettings = () => {
      showFailToast('设置页面开发中')
    }
    
    // 编辑个人资料
    const editProfile = () => {
      showFailToast('编辑个人资料功能开发中')
    }
    
    // 跳转到时间线
    const goToTimeline = () => {
      router.push('/timeline')
    }
    
    // 跳转到数据统计
    const goToStats = () => {
      showFailToast('数据统计功能开发中')
    }
    
    // 跳转到AI助手
    const goToAIAssistant = () => {
      showFailToast('AI助手功能开发中')
    }
    
    // 跳转到数据备份
    const goToBackup = () => {
      showFailToast('数据备份功能开发中')
    }
    
    // 跳转到隐私设置
    const goToPrivacy = () => {
      showFailToast('隐私设置功能开发中')
    }
    
    // 跳转到通知管理
    const goToNotifications = () => {
      showFailToast('通知管理功能开发中')
    }
    
    // 跳转到帮助与反馈
    const goToHelp = () => {
      showFailToast('帮助与反馈功能开发中')
    }
    
    // 显示关于弹窗
    const showAbout = () => {
      showAboutPopup.value = true
    }
    
    // 退出登录
    const logout = () => {
      Dialog.confirm({
        title: '确认退出',
        message: '确定要退出登录吗？',
      })
        .then(() => {
          // 清除登录状态
          localStorage.removeItem('token')
          localStorage.removeItem('user')
          
          showSuccessToast('已退出登录')
          
          // 跳转到登录页
          router.push('/login')
        })
        .catch(() => {
          // 取消操作
        })
    }
    
    onMounted(() => {
      generateStars()
      fetchUserProfile()
      fetchStatistics()
      
      // 获取用户信息
      const userStr = localStorage.getItem('user')
      if (userStr) {
        const user = JSON.parse(userStr)
        userName.value = user.name || '时光旅人'
        userEmail.value = user.email || 'traveler@chronomail.com'
      }
    })
    
    return {
      active,
      stars,
      userName,
      userEmail,
      userMotto,
      userAvatar,
      sentCount,
      receivedCount,
      totalDays,
      showAboutPopup,
      goBack,
      goToSettings,
      editProfile,
      goToTimeline,
      goToStats,
      goToAIAssistant,
      goToBackup,
      goToPrivacy,
      goToNotifications,
      goToHelp,
      showAbout,
      logout
    }
  }
}
</script>

<style scoped>
.profile-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
}

.user-card {
  display: flex;
  align-items: center;
  margin: 0 15px 20px;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info {
  flex: 1;
}

.user-info h3 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: bold;
}

.user-info p {
  margin: 0 0 5px;
  font-size: 14px;
  color: var(--text-secondary);
}

.user-motto {
  font-style: italic;
  color: var(--accent-color) !important;
}

.stats-container {
  margin: 0 15px 20px;
}

.stats-card {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--accent-color);
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.stat-divider {
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.2);
}

.function-list {
  margin: 0 15px 20px;
}

.function-list .van-cell-group {
  border-radius: 12px;
  overflow: hidden;
}

.function-list .van-cell {
  background-color: transparent;
  color: var(--text-primary);
}

.function-list .van-cell::after {
  border-color: rgba(255, 255, 255, 0.1);
}

.logout-container {
  margin: 0 15px 20px;
}

.logout-button {
  background: linear-gradient(135deg, #ff4d4f, #c41e3a);
  border: none;
  height: 50px;
  font-size: 16px;
  font-weight: bold;
  margin-top: 20px;
  box-shadow: 0 8px 20px rgba(255, 77, 79, 0.3);
  transition: all 0.3s ease;
}

.logout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(255, 77, 79, 0.4);
}

.logout-button:active {
  transform: translateY(0);
  box-shadow: 0 5px 15px rgba(255, 77, 79, 0.3);
}

.about-popup {
  padding: 30px 20px;
  text-align: center;
}

.about-logo {
  margin-bottom: 20px;
}

.about-logo h3 {
  margin: 10px 0 5px;
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(135deg, #00D4FF, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-logo p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.about-content {
  text-align: left;
}

.about-content p {
  margin: 10px 0;
  line-height: 1.6;
}

.about-slogan {
  text-align: center;
  font-style: italic;
  color: var(--accent-color);
  margin-top: 20px;
}
</style>