Situation-Awareness-Platform-Frontend/src/views/Jyh/Community/components/HMStatsBar.vue

<template>
  <div class="stats-glass-bar">
    <div class="stat-node">
      <span class="stat-value">{{ hmDevelopers }}</span>
      <span class="stat-desc">鸿蒙开发者</span>
    </div>
    <div class="stat-separator"></div>
    <div class="stat-node">
      <span class="stat-value">{{ hmCertificationDevelopers }}</span>
      <span class="stat-desc">鸿蒙认证开发者</span>
    </div>
    <div class="stat-separator"></div>
    <div class="stat-node">
      <span class="stat-value">{{ whHmCertificationDevelopers }}</span>
      <span class="stat-desc">武汉鸿蒙认证开发者</span>
    </div>
    <div class="stat-separator"></div>
    <div class="stat-node">
      <span class="stat-value">{{ hmProjects }}</span>
      <span class="stat-desc">鸿蒙开源项目</span>
    </div>
    <div class="stat-separator"></div>
    <div class="stat-node">
      <span class="stat-value">{{ hmCompanies }}</span>
      <span class="stat-desc">鸿蒙开源企业</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { hmStatsBarPage3 } from '@/api/jyh/situation';

// 定义响应式数据
const hmDevelopers = ref<string>('加载中...');
const hmCertificationDevelopers = ref<string>('加载中...');
const whHmCertificationDevelopers = ref<string>('加载中...');
const hmProjects = ref<string>('加载中...');
const hmCompanies = ref<string>('加载中...');

// 加载状态
const loading = ref(true);

// 格式化数字的工具函数
const formatNumber = (num: number, unit: string = '', forceUnit?: string): string => {
  if (forceUnit === 'wan') {
    // 强制以"万"为单位显示
    return Math.floor(num) + '万+';
  }
  
  if (num >= 100000000) {
    return Math.floor(num / 100000000) + '亿+';
  } else if (num >= 10000) {
    return Math.floor(num / 10000) + '万+';
  } else if (num >= 1000) {
    return Math.floor(num / 1000) + '千+';
  }
  return num.toString() + '+';
};

// 获取统计数据
const fetchStats = async () => {
  try {
    loading.value = true;
    const response = await hmStatsBarPage3();
    const businessData = response.data;
    
    if (businessData.code === 200 && businessData) {
      const { developer, certificationDeveloper, wuhanCertificationDeveloper, project, company } = businessData.data;
      
      // 格式化数据显示
      hmDevelopers.value = `${formatNumber(developer, '', 'wan')}`;
      hmCertificationDevelopers.value = `${formatNumber(certificationDeveloper, '', 'wan')}`;
      whHmCertificationDevelopers.value = `${formatNumber(wuhanCertificationDeveloper, '', 'wan')}`;
      hmProjects.value = `${project}`;  // 项目数不需要特殊格式化
      hmCompanies.value = `${company}+`;  // 公司数直接加+号
    } else {
      console.error('获取鸿蒙统计数据失败:', businessData.msg || '未知错误');
      // 设置默认值
      hmDevelopers.value = '1000万+';
      hmCertificationDevelopers.value = '60万+';
      whHmCertificationDevelopers.value = '1万+';
      hmProjects.value = '728';
      hmCompanies.value = '600+';
    }
  } catch (error) {
    console.error('获取鸿蒙统计数据异常:', error);
    // 设置默认值
    hmDevelopers.value = '1000万+';
    hmCertificationDevelopers.value = '60万+';
    whHmCertificationDevelopers.value = '1万+';
    hmProjects.value = '728';
    hmCompanies.value = '600+';
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchStats();
});
</script>

<style lang="scss" scoped>
.stats-glass-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* 布局控制：撑满容器并增加内边距 */
  width: 100%;
  padding: 2rem 4rem;
  margin: 0 0 1rem;

  /* 深色玻璃拟态背景 */
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* 极细微的边框勾勒 */
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);

  /* 外阴影与内发光，增加悬浮感 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3),
  inset 0 0 20px rgba(255, 255, 255, 0.02);

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
  }
}

.stat-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
    .stat-value {
      text-shadow: 0 0 25px rgba(56, 189, 248, 0.8);
    }
  }
}

.stat-value {
  /* 科技感亮蓝渐变 */
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  background: linear-gradient(180deg, #fff 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 基础发光效果 */
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3));
  letter-spacing: -1px;
}

.stat-desc {
  /* 在黑底上使用半透明白色，更有高级感 */
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

.stat-separator {
  /* 渐隐分割线 */
  width: 1px;
  height: 3rem;
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0)
  );
  margin: 0 1rem;
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .stats-glass-bar {
    padding: 2rem;
  }
  .stat-value {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .stats-glass-bar {
    flex-direction: column;
    gap: 2rem;
  }
  .stat-separator {
    width: 50%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  }
}
</style>