cfc/cfc-frontend/components/OnboardingGuide.vue

<template>
  <view class="onboarding-overlay" v-if="show">
    <view class="onboarding-card">
      <!-- 顶部品牌条 -->
      <view class="onboarding-topbar"></view>

      <!-- 步骤内容 -->
      <view class="onboarding-content" :key="currentStep" :class="{ 'onboarding-content--intro': steps[currentStep].isIntro }">
        <text class="onboarding-icon">{{ steps[currentStep].icon }}</text>
        <text class="onboarding-title" :class="{ 'onboarding-title--intro': steps[currentStep].isIntro }">{{ steps[currentStep].title }}</text>
        <text class="onboarding-desc">{{ steps[currentStep].desc }}</text>
      </view>

      <!-- 步进器 -->
      <view class="onboarding-dots">
        <view
          v-for="(s, i) in steps"
          :key="i"
          class="dot"
          :class="{ active: i === currentStep }">
        </view>
      </view>

      <!-- 按钮 -->
      <view class="onboarding-action">
        <view
          class="onboarding-btn"
          :class="{ 'onboarding-btn--last': currentStep === steps.length - 1 }"
          @click="handleNext">
          <text>{{ currentStep < steps.length - 1 ? '下一步' : '开始体验！' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var PARENT_STEPS = [
  {
    icon: '🔍',
    title: '你真的了解孩子的状态吗？',
    desc: '情绪低落没察觉、习惯变化没注意、能力短板没发现——很多问题等爆发了才看见。浠艾福帮你在问题发生前，看清孩子真实的身心状态。',
    isIntro: true
  },
  {
    icon: '🌏',
    title: '五维沙盘，看见全家',
    desc: '身·心·智·行·富，一张全景图看清每个维度。孩子身体好不好、情绪怎么样、能力到哪了——不用猜，看得见。'
  },
  {
    icon: '📋',
    title: '小任务，大改变',
    desc: '布置每日小任务，完成就能攒星星。每天一点点积累，好习惯自然养成。'
  },
  {
    icon: '🎁',
    title: '心愿墙，看得见努力',
    desc: '孩子攒够星星就能兑换心愿。努力有回报，目标感和坚持力一起培养。'
  }
]

var CHILD_STEPS = [
  {
    icon: '🔍',
    title: '你的每一点成长，都被看见',
    desc: '今天完成了几个任务？比昨天进步了多少？浠艾福帮你记录每一点努力，让成长看得见。',
    isIntro: true
  },
  {
    icon: '🌟',
    title: '赚星星',
    desc: '完成爸爸妈妈布置的任务，就能获得星星积分，越努力越多！'
  },
  {
    icon: '🎮',
    title: '玩中学',
    desc: '完成任务后可以玩小游戏、兑换心愿，学习和快乐两不误！'
  },
  {
    icon: '🏆',
    title: '升级挑战',
    desc: '从星星宝宝到宇宙小英雄，一步步升级，看看你能走多远！'
  }
]

export default {
  name: 'OnboardingGuide',
  props: {
    role: { type: String, default: 'parent' },
    show: { type: Boolean, default: false }
  },
  data() {
    return {
      currentStep: 0
    }
  },
  computed: {
    steps() {
      if (this.role === 'child') return CHILD_STEPS
      return PARENT_STEPS
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.currentStep = 0
      }
    }
  },
  methods: {
    handleNext() {
      if (this.currentStep < this.steps.length - 1) {
        this.currentStep++
      } else {
        uni.setStorageSync('_onboardingDone', true)
        this.$emit('close')
      }
    }
  }
}
</script>

<style scoped>
/* ============================================================
   OnboardingGuide — 首次登录引导浮层
   设计体系：统一使用 uni.scss design tokens
   ============================================================ */

.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  animation: fadeIn 0.25s ease;
}

.onboarding-card {
  width: 640rpx;
  min-height: 680rpx;
  background: var(--surface, #FFFFFF);
  border-radius: var(--radius-xl, 32rpx);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-lg, 0 8rpx 32rpx rgba(91, 155, 213, 0.10));
  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 顶部品牌装饰条 — 暖珊瑚色 */
.onboarding-topbar {
  width: 100%;
  height: 12rpx;
  background: var(--color-primary, #F97316);
  flex-shrink: 0;
}

/* ============================================================
   内容区 — flex 居中，带淡入动画
   ============================================================ */
.onboarding-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 56rpx 48rpx;
  animation: fadeIn 0.3s ease;
}

.onboarding-icon {
  font-size: 80rpx;
  margin-bottom: 32rpx;
  display: block;
}

.onboarding-title {
  font-size: 36rpx;
  font-weight: 700;
  color: var(--text, #1E293B);
  text-align: center;
  margin-bottom: 20rpx;
  display: block;
  line-height: 1.3;
}

.onboarding-desc {
  font-size: 28rpx;
  color: var(--text-secondary, #64748B);
  text-align: center;
  line-height: 1.6;
  display: block;
  padding: 0 16rpx;
}

/* ============================================================
   介绍步骤 — 开场身份定义页
   ============================================================ */
.onboarding-content--intro {
  padding: 64rpx 56rpx 48rpx;
}

.onboarding-title--intro {
  font-size: 32rpx;
  font-weight: 800;
  color: var(--color-primary, #F97316);
  line-height: 1.4;
}

/* ============================================================
   步进器圆点
   ============================================================ */
.onboarding-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  padding: 0 56rpx 40rpx;
  flex-shrink: 0;
}

.dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: var(--border, #CBD5E1);
  transition: background 0.3s ease, transform 0.3s ease;
}

.dot.active {
  background: var(--color-primary, #F97316);
  transform: scale(1.3);
}

/* ============================================================
   底部按钮
   ============================================================ */
.onboarding-action {
  width: 100%;
  padding: 0 56rpx 48rpx;
  flex-shrink: 0;
  box-sizing: border-box;
}

.onboarding-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 999rpx;
  background: var(--color-primary, #5B9BD5);
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.15s ease;
  box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.25);
}

.onboarding-btn:active {
  opacity: 0.85;
  transform: scale(0.97);
}

/* 最后一步：暖珊瑚色按钮 */
.onboarding-btn--last {
  background: var(--color-primary, #F97316);
  box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.30);
}
</style>