<script setup>
/**
 * 关于页面
 * 展示应用 Logo 和版本号
 */
import { ref, onMounted } from 'vue'
import { getAbout } from '@/api/system.js'

// 页面数据
const loading = ref(true)
const aboutInfo = ref({
  logo: '/static/logo.png',
  appName: '学业邑规划',
  version: '1.0.0',
  description: ''
})

/**
 * 获取关于信息
 */
async function fetchAboutInfo() {
  loading.value = true
  try {
    const res = await getAbout()
    if (res.code === 0 && res.data) {
      // 合并后端返回的数据
      aboutInfo.value = {
        ...aboutInfo.value,
        ...res.data
      }
    }
  } catch (error) {
    console.error('获取关于信息失败:', error)
  } finally {
    loading.value = false
  }
}

/**
 * 页面加载
 */
onMounted(() => {
  fetchAboutInfo()
})
</script>

<template>
  <view class="about-page">
    <!-- 内容区域 -->
    <view class="about-content">
      <!-- Logo 区域 -->
      <view class="logo-section">
        <image 
          class="logo" 
          :src="aboutInfo.logo || '/static/logo.png'" 
          mode="aspectFit"
        />
      </view>
      
      <!-- 应用名称 -->
      <view class="app-name">
        <text>{{ aboutInfo.appName }}</text>
      </view>
      
      <!-- 版本号 -->
      <view class="version">
        <text>版本号 {{ aboutInfo.version }}</text>
      </view>
      
      <!-- 描述信息（如果有） -->
      <view v-if="aboutInfo.description" class="description">
        <text>{{ aboutInfo.description }}</text>
      </view>
    </view>
    
    <!-- 底部版权信息 -->
    <view class="footer">
      <text class="copyright">© 2025 学业邑规划</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.about-page {
  min-height: 100vh;
  background-color: $bg-white;
  display: flex;
  flex-direction: column;
}

// 内容区域
.about-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-xl;
}

// Logo 区域
.logo-section {
  margin-bottom: $spacing-lg;
  
  .logo {
    width: 180rpx;
    height: 180rpx;
    border-radius: $border-radius-lg;
  }
}

// 应用名称
.app-name {
  margin-bottom: $spacing-md;
  
  text {
    font-size: $font-size-xl;
    font-weight: $font-weight-bold;
    color: $text-color;
  }
}

// 版本号
.version {
  margin-bottom: $spacing-lg;
  
  text {
    font-size: $font-size-md;
    color: $text-secondary;
  }
}

// 描述信息
.description {
  max-width: 600rpx;
  text-align: center;
  
  text {
    font-size: $font-size-sm;
    color: $text-placeholder;
    line-height: 1.6;
  }
}

// 底部版权
.footer {
  padding: $spacing-xl;
  padding-bottom: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
  text-align: center;
  
  .copyright {
    font-size: $font-size-xs;
    color: $text-placeholder;
  }
}
</style>
