OfficeSystem/components/my/My.vue

<template>
  <view class="mine-page">
    <!-- 个人资料卡片 -->
    <view class="profile-card" @click="goToProfile">
      <view class="profile-header">
        <view class="avatar-wrapper">
          <image 
            v-if="userInfo?.user?.avatar" 
            class="avatar-img" 
            :src="userInfo.user.avatar" 
            mode="aspectFill"
          />
          <view v-else class="avatar-placeholder">
            <text class="avatar-text">{{ getAvatarText(userInfo?.user?.nickName) }}</text>
          </view>
        </view>
        <view class="profile-info">
          <view class="name-row">
            <text class="user-name">{{ userInfo?.user?.nickName || '--' }}</text>
<!--            <text v-if="userInfo?.roles?.[0]" class="role-badge">{{ userInfo.roles[0] }}</text>-->
          </view>
          <text class="dept-name">{{ userInfo?.user?.deptName || '--' }}</text>
        </view>
        <view class="arrow-icon">›</view>
      </view>
<!--      <view class="profile-stats">-->
<!--        <view class="stat-item">-->
<!--          <text class="stat-value">{{ userInfo?.user?.taskCount || 0 }}</text>-->
<!--          <text class="stat-label">任务数</text>-->
<!--        </view>-->
<!--        <view class="stat-divider"></view>-->
<!--        <view class="stat-item">-->
<!--          <text class="stat-value">{{ userInfo?.user?.projectCount || 0 }}</text>-->
<!--          <text class="stat-label">项目数</text>-->
<!--        </view>-->
<!--        <view class="stat-divider"></view>-->
<!--        <view class="stat-item">-->
<!--          <text class="stat-value">{{ userInfo?.user?.taskNum || 0 }}</text>-->
<!--          <text class="stat-label">任务编号</text>-->
<!--        </view>-->
<!--      </view>-->
    </view>

    <view 
      class="card settings-card"
      v-if="showPrivateSwitch"
    >
      <view class="setting-row">
        <text class="setting-label">私有视角</text>
        <uv-switch v-model="filterSelf" />
      </view>
      <text class="setting-desc">开启后仅展示分配给我的客户和任务数据</text>
    </view>

    <!-- 版本管理 -->
    <view class="card version-card">
      <view class="version-header">
        <text class="version-title">版本管理</text>
      </view>
      
      <view class="version-info">
        <view class="version-item">
          <text class="version-label">当前版本</text>
          <text class="version-value">{{ currentVersion }}</text>
        </view>
        
        <view class="version-item" v-if="latestVersion">
          <text class="version-label">最新版本</text>
          <text class="version-value" :class="{ 'new-version': hasUpdate }">
            {{ latestVersion }}
            <text v-if="hasUpdate" class="update-badge">有新版本</text>
          </text>
        </view>
        <view class="version-item" v-else>
          <text class="version-label">最新版本</text>
          <text class="version-value">未检查</text>
        </view>
      </view>

      <view class="version-actions">
        <uv-button 
          type="primary" 
          :plain="true" 
          size="small"
          @click="checkUpdate"
          :loading="checking"
        >
          {{ checking ? '检查中...' : '检查更新' }}
        </uv-button>
        
        <uv-button 
          v-if="hasUpdate && updateInfo"
          type="error" 
          size="small"
          @click="handleUpdate"
          style="margin-left: 20rpx;"
        >
          立即更新
        </uv-button>
      </view>
    </view>

    <view class="card">

      <uv-button type="error" :plain="true" @click="onLogout" :loading="loading">
        退出登录
      </uv-button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'
import { logout } from '@/api/user'
import { getCurrentVersion, checkForUpdate, showUpdateDialog } from '@/utils/update'

const loading = ref(false)
const checking = ref(false)
const currentVersion = ref('')
const latestVersion = ref('')
const updateInfo = ref(null)
const hasUpdate = ref(false) // 直接使用 API 返回的 hasUpdate 值

const userStore = useUserStore()
const { privateView, userInfo } = storeToRefs(userStore)
const filterSelf = computed({
  get: () => privateView.value,
  set: (val) => userStore.setPrivateView(val)
})
const showPrivateSwitch = computed(() =>
  userInfo.value?.roles?.some(r => ['admin', 'sys_admin'].includes(r))
)

// 获取当前版本
onMounted(() => {
  const version = getCurrentVersion()
  currentVersion.value = version.versionName || '未知'
})

// 检查更新
const checkUpdate = async () => {
  if (checking.value) return
  checking.value = true
  
  try {
    const result = await checkForUpdate(true) // 静默检查，不显示提示
    
    console.log('检查更新结果:', result)
    
    if (result && result.hasUpdate) {
      // 确保版本号有值，即使 API 返回为空也显示一个默认值
      latestVersion.value = result.versionName || result.versionNumber || result.version || '未知版本'
      updateInfo.value = result
      hasUpdate.value = true // 设置更新标志
      
      // 检查下载地址是否存在（兼容 packageUrl、downloadUrl、download_url）
      if (!result.downloadUrl && !result.packageUrl && !result.download_url) {
        console.warn('更新信息缺少下载地址:', result)
        uni.showToast({
          title: '更新信息不完整',
          icon: 'none',
          duration: 2000
        })
      } else {
        uni.showToast({
          title: '发现新版本',
          icon: 'success',
          duration: 2000
        })
      }
    } else {
      // 没有新版本时，也显示当前版本号
      latestVersion.value = currentVersion.value
      updateInfo.value = null
      hasUpdate.value = false // 清除更新标志
      uni.showToast({
        title: '已是最新版本',
        icon: 'success',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('检查更新失败:', error)
    uni.showToast({
      title: '检查更新失败',
      icon: 'none',
      duration: 2000
    })
  } finally {
    checking.value = false
  }
}

// 处理更新
const handleUpdate = () => {
  if (!updateInfo.value) {
    uni.showToast({
      title: '更新信息无效',
      icon: 'none'
    })
    return
  }
  
  // 兼容不同的字段名（packageUrl、downloadUrl 或 download_url）
  const downloadUrl = updateInfo.value.downloadUrl || updateInfo.value.packageUrl || updateInfo.value.download_url
  
  if (!downloadUrl) {
    uni.showToast({
      title: '下载地址无效',
      icon: 'none'
    })
    return
  }
  
  // 确保 updateInfo 有 downloadUrl 字段
  const updateData = {
    ...updateInfo.value,
    downloadUrl: downloadUrl
  }
  
  // 显示更新确认对话框，用户确认后会自动下载和安装
  showUpdateDialog(updateData)
}

// 获取头像文字
const getAvatarText = (name) => {
  if (!name) return '?'
  return name.charAt(0).toUpperCase()
}

// 跳转到个人资料详情页
const goToProfile = () => {
  uni.navigateTo({
    url: '/pages/my/profile/index'
  })
}

const onLogout = async () => {
  if (loading.value) return
  loading.value = true
  try {
    await logout()
  } catch (e) {
    // 忽略错误
  } finally {
    userStore.logout()
    uni.$uv.toast('已退出登录')
    setTimeout(() => {
      uni.reLaunch({ url: '/pages/login/index' })
    }, 200)
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.mine-page {
  padding: 24rpx;
  background-color: #f6f7fb;
  min-height: 100vh;
  box-sizing: border-box;
}

.profile-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}

.profile-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  position: relative;
  z-index: 1;
}

.avatar-wrapper {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  margin-right: 24rpx;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
}

.avatar-text {
  font-size: 48rpx;
  font-weight: 600;
  color: #ffffff;
}

.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  margin-right: 16rpx;
}

.role-badge {
  font-size: 20rpx;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 500;
}

.dept-name {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}

.arrow-icon {
  font-size: 48rpx;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  margin-left: 16rpx;
}

.profile-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 32rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

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

.stat-value {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.8);
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 16rpx;
}

.card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
}


.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #111827;
}

.setting-desc {
  margin-top: 14rpx;
  font-size: 24rpx;
  color: #6b7280;
}


.version-header {
  margin-bottom: 24rpx;
}

.version-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.version-info {
  margin-bottom: 24rpx;
}

.version-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f3f4f6;
}

.version-item:last-child {
  border-bottom: none;
}

.version-label {
  font-size: 28rpx;
  color: #6b7280;
}

.version-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.version-value.new-version {
  color: #ef4444;
}

.update-badge {
  font-size: 20rpx;
  background: #fee2e2;
  color: #dc2626;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: normal;
}

.version-actions {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
}

.title {
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  color: #111827;
}
</style>