cfc/cfc-frontend/components/DimensionPageSkeleton.vue

<template>
  <!--
    五维页首屏加载骨架。
    用途：已登录用户进入五维页、首屏数据请求期间的占位，避免「空白 -> 内容」硬跳变。
    稳态视觉零变化：仅在 pageLoading && isLoggedIn 为真时渲染，真实 section 由各自的数据守卫控制。
    触摸目标与 a11y 不适用（纯占位，不可交互）。
  -->
  <view class="dim-skeleton">
    <!-- 品牌定位语占位 -->
    <view class="dim-skeleton-strap skeleton" />

    <!-- 画像卡占位 -->
    <view class="dim-skeleton-card">
      <view class="skeleton dim-skeleton-line dim-skeleton-line-title" />
      <view class="dim-skeleton-row">
        <view class="skeleton dim-skeleton-line dim-skeleton-line-w70" />
        <view class="skeleton dim-skeleton-line dim-skeleton-line-w30" />
      </view>
      <view class="skeleton dim-skeleton-line dim-skeleton-line-w90" />
      <view class="skeleton dim-skeleton-line dim-skeleton-line-w60" />
    </view>

    <!-- 概览卡占位 -->
    <view class="dim-skeleton-card">
      <view class="skeleton dim-skeleton-line dim-skeleton-line-title" />
      <view class="dim-skeleton-grid">
        <view class="skeleton dim-skeleton-tile" />
        <view class="skeleton dim-skeleton-tile" />
        <view class="skeleton dim-skeleton-tile" />
        <view class="skeleton dim-skeleton-tile" />
      </view>
    </view>

    <!-- 功能区占位 -->
    <view class="dim-skeleton-card">
      <view class="skeleton dim-skeleton-line dim-skeleton-line-title" />
      <view class="dim-skeleton-grid">
        <view class="skeleton dim-skeleton-tile" />
        <view class="skeleton dim-skeleton-tile" />
        <view class="skeleton dim-skeleton-tile" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DimensionPageSkeleton',
  props: {
    // 维度码：body / mind / wisdom / action / wealth。预留给后续按维度着色，当前为中性骨架。
    dimCode: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss">
/* 骨架走 uni.scss §11 的 .skeleton（shimmer 动画 + 中性渐变底） */
.dim-skeleton {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 24rpx 30rpx 0;
}

.dim-skeleton-strap {
  height: 64rpx;
  border-radius: $uni-radius-sm;
}

.dim-skeleton-card {
  background: $app-surface;
  border-radius: 16rpx;
  padding: 28rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.dim-skeleton-line {
  height: 28rpx;
  border-radius: $uni-radius-sm;
}

.dim-skeleton-line-title {
  height: 36rpx;
  width: 45%;
}

.dim-skeleton-line-w90 { width: 90%; }
.dim-skeleton-line-w70 { width: 70%; }
.dim-skeleton-line-w60 { width: 60%; }
.dim-skeleton-line-w30 { width: 30%; }

.dim-skeleton-row {
  display: flex;
  gap: 20rpx;
}

.dim-skeleton-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.dim-skeleton-tile {
  width: calc((100% - 40rpx) / 3);
  height: 120rpx;
  border-radius: $uni-radius-sm;
}
</style>