sionrui/frontend/app/web-gold/src/views/user/Profile.vue

<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useUserStore } from '@/stores/user'
import { getPointRecordPage } from '@/api/pointRecord'
import {
  UserOutlined,
  DatabaseOutlined,
  WalletOutlined,
  PayCircleOutlined,
  ClockCircleOutlined,
  SafetyCertificateOutlined,
  PlusOutlined,
  MinusOutlined
} from '@ant-design/icons-vue'

const userStore = useUserStore()

// 积分记录数据
const pointRecords = ref([])
const recordsLoading = ref(false)
const recordsPagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// 存储空间数据
const GB_TO_MB = 1024
const totalStorage = computed(() => userStore.totalStorage * GB_TO_MB)
const usedStorage = computed(() => userStore.usedStorage * GB_TO_MB)
const storagePercent = computed(() => {
  if (totalStorage.value === 0) return 0
  return Math.min(100, (usedStorage.value / totalStorage.value) * 100)
})

// 格式化函数
function formatStorage(mb) {
  if (mb >= 1024) {
    return (mb / 1024).toFixed(1) + ' GB'
  }
  return Math.round(mb) + ' MB'
}

function formatMoney(amount) {
  return amount?.toFixed(2) || '0.00'
}

function formatCredits(credits) {
  return credits?.toLocaleString() || '0'
}

// 格式化日期
function formatDate(dateStr) {
  if (!dateStr) return '未设置'
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-')
}

// 脱敏手机号
function maskMobile(mobile) {
  if (!mobile) return '未设置'
  return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

// 获取积分记录（只显示已完成的记录）
async function fetchPointRecords() {
  recordsLoading.value = true
  try {
    const res = await getPointRecordPage({
      pageNo: recordsPagination.current,
      pageSize: recordsPagination.pageSize,
      status: 'confirmed'
    })
    if (res.data) {
      pointRecords.value = res.data.list || []
      recordsPagination.total = res.data.total || 0
    }
  } catch (e) {
    console.error('获取积分记录失败:', e)
  } finally {
    recordsLoading.value = false
  }
}

// 分页变化
function handleTableChange(page, pageSize) {
  recordsPagination.current = page
  recordsPagination.pageSize = pageSize
  fetchPointRecords()
}

// 格式化积分记录时间
function formatRecordTime(dateStr) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取业务类型显示名称
function getBizTypeName(bizType) {
  const typeMap = {
    'signin': '签到',
    'recharge': '充值',
    'exchange': '兑换',
    'admin': '后台调整',
    'gift': '礼包赠送',
    'dify_chat': 'AI文案',
    'digital_human': '数字人',
    'voice_tts': '语音克隆',
    'tikhub_fetch': '数据采集',
    'forecast_rewrite': '文案改写'
  }
  return typeMap[bizType] || bizType || '其他'
}

// 获取状态显示
function getStatusInfo(status) {
  const statusMap = {
    'pending': { text: '处理中', color: 'orange' },
    'confirmed': { text: '已完成', color: 'green' },
    'canceled': { text: '已取消', color: 'default' }
  }
  return statusMap[status] || { text: status, color: 'default' }
}

onMounted(async () => {
  if (userStore.isLoggedIn) {
    // 获取用户基本信息和档案信息
    if (!userStore.mobile) {
      await userStore.fetchUserInfo()
    }
    if (!userStore.profile) {
      await userStore.fetchUserProfile()
    }
    // 获取积分记录
    await fetchPointRecords()
  }
})
</script>

<template>
  <div class="profile-container">
    <div class="page-header">
      <h1 class="page-title">个人中心</h1>
      <p class="page-subtitle">管理您的账户信息和资源使用情况</p>
    </div>

    <a-row :gutter="[24, 24]">
      <!-- 左侧：用户信息卡片 -->
      <a-col :xs="24" :lg="8">
        <a-card class="user-card" :bordered="false">
          <div class="user-info-header">
            <div class="avatar-wrapper">
              <img 
                v-if="userStore.displayAvatar" 
                class="user-avatar" 
                :src="userStore.displayAvatar" 
                alt="avatar" 
              />
              <div v-else class="user-avatar-placeholder">
                {{ userStore.displayName?.charAt(0) || 'U' }}
              </div>
            </div>
            <h2 class="user-name">{{ userStore.displayName }}</h2>
            <div class="user-role-badge">普通用户</div>
          </div>
          
          <a-divider />
          
          <div class="user-details">
            <div class="detail-item">
              <span class="detail-label">注册时间</span>
              <span class="detail-value">{{ formatDate(userStore.profile?.registerTime || userStore.profile?.createTime) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">绑定手机</span>
              <span class="detail-value">{{ maskMobile(userStore.mobile || userStore.profile?.mobile) }}</span>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 右侧：资源统计与活动 -->
      <a-col :xs="24" :lg="16">
        <!-- 资源概览卡片 -->
        <a-row :gutter="[24, 24]">
          <a-col :xs="24" :sm="12" :md="8">
            <a-card class="stat-card" :bordered="false">
              <div class="stat-icon-wrapper blue">
                <DatabaseOutlined />
              </div>
              <div class="stat-content">
                <div class="stat-label">存储空间</div>
                <div class="stat-value">{{ formatStorage(usedStorage) }} <span class="stat-unit">/ {{ formatStorage(totalStorage) }}</span></div>
                <a-progress 
                  :percent="storagePercent" 
                  :show-info="false" 
                  :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }" 
                  size="small"
                  class="stat-progress"
                />
              </div>
            </a-card>
          </a-col>

          <a-col :xs="24" :sm="12" :md="8">
            <a-card class="stat-card" :bordered="false">
              <div class="stat-icon-wrapper purple">
                <WalletOutlined />
              </div>
              <div class="stat-content">
                <div class="stat-label">剩余积分</div>
                <div class="stat-value">{{ formatCredits(userStore.remainingPoints) }}</div>
                <div class="stat-desc">用于生成消耗</div>
              </div>
            </a-card>
          </a-col>

          <a-col :xs="24" :sm="12" :md="8">
            <a-card class="stat-card" :bordered="false">
              <div class="stat-icon-wrapper orange">
                <PayCircleOutlined />
              </div>
              <div class="stat-content">
                <div class="stat-label">账户余额</div>
                <div class="stat-value">¥{{ formatMoney(userStore.totalRecharge) }}</div>
                <div class="stat-desc">累计充值金额</div>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <!-- 积分记录 -->
        <a-card title="积分记录" :bordered="false" class="activity-card mt-6">
          <template #extra>
            <span class="record-count">共 {{ recordsPagination.total }} 条记录</span>
          </template>
          <a-spin :spinning="recordsLoading">
            <a-list
              v-if="pointRecords.length > 0"
              item-layout="horizontal"
              :data-source="pointRecords"
              class="point-record-list"
            >
              <template #renderItem="{ item }">
                <a-list-item>
                  <a-list-item-meta>
                    <template #avatar>
                      <div :class="['record-icon', item.type === 'increase' ? 'increase' : 'decrease']">
                        <PlusOutlined v-if="item.type === 'increase'" />
                        <MinusOutlined v-else />
                      </div>
                    </template>
                    <template #title>
                      <div class="record-title">
                        <span class="record-reason">{{ getBizTypeName(item.bizType) }}</span>
                      </div>
                    </template>
                    <template #description>
                      <div class="record-desc">
                        <span>{{ formatRecordTime(item.createTime) }}</span>
                      </div>
                    </template>
                  </a-list-item-meta>
                  <div :class="['record-amount', item.type === 'increase' ? 'increase' : 'decrease']">
                    {{ item.type === 'increase' ? '+' : '-' }}{{ Math.abs(item.pointAmount) }}
                  </div>
                </a-list-item>
              </template>
            </a-list>
            <a-pagination
              v-if="recordsPagination.total > recordsPagination.pageSize"
              v-model:current="recordsPagination.current"
              v-model:page-size="recordsPagination.pageSize"
              :total="recordsPagination.total"
              :show-size-changer="false"
              :show-total="total => `共 ${total} 条`"
              size="small"
              class="record-pagination"
              @change="handleTableChange"
            />
            <div v-if="pointRecords.length === 0 && !recordsLoading" class="empty-state">
              <ClockCircleOutlined class="empty-icon" />
              <p>暂无积分记录</p>
            </div>
          </a-spin>
        </a-card>

      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.profile-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

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

/* User Card */
.user-card {
  text-align: center;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  background: var(--color-bg-container, #fff);
  height: 100%;
}

.user-info-header {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-wrapper {
  margin-bottom: 16px;
  position: relative;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(var(--primary-color-rgb, 24, 144, 255), 0.1);
}

.user-avatar-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  border: 4px solid rgba(24, 144, 255, 0.1);
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--color-text);
}

.user-role-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(24, 144, 255, 0.1);
  color: #1890ff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.user-details {
  padding: 16px 0;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-secondary, #f0f0f0);
}

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

.detail-label {
  color: var(--color-text-secondary);
}

.detail-value {
  color: var(--color-text);
  font-weight: 500;
}

/* Stat Cards */
.stat-card {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.stat-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.stat-icon-wrapper.blue {
  background: rgba(24, 144, 255, 0.1);
  color: #1890ff;
}

.stat-icon-wrapper.purple {
  background: rgba(114, 46, 209, 0.1);
  color: #722ed1;
}

.stat-icon-wrapper.orange {
  background: rgba(250, 173, 20, 0.1);
  color: #faad14;
}

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

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.stat-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-third);
}

.stat-desc {
  font-size: 12px;
  color: var(--color-text-third);
}

.stat-progress {
  margin-top: 8px;
}

.mt-6 {
  margin-top: 24px;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 40px 0;
  color: var(--color-text-third);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.security-icon {
  font-size: 24px;
  color: #52c41a;
  margin-right: 12px;
}

/* Point Record List */
.activity-card {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.record-count {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.point-record-list {
  max-height: 400px;
  overflow-y: auto;
}

.record-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.record-icon.increase {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.record-icon.decrease {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.record-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.record-reason {
  font-weight: 500;
  color: var(--color-text);
}

.record-desc {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.record-biz-type {
  padding: 1px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

.record-amount {
  font-size: 18px;
  font-weight: 600;
}

.record-amount.increase {
  color: #52c41a;
}

.record-amount.decrease {
  color: #ff4d4f;
}

.record-pagination {
  margin-top: 16px;
  text-align: center;
}
</style>