cfc/cfc-frontend/components/AIFloatingAvatar.vue

<template>
  <view class="ai-float-wrapper" @click="goToChat">
    <view class="ai-float-avatar" :class="mascotCode">
      <text class="ai-float-icon">{{ mascotIcon }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AIFloatingAvatar',
  data() {
    return {
      mascotCode: 'xibao',
      mascotIcon: '🌟'
    }
  },
  mounted() {
    this.loadMascot()
  },
  methods: {
    loadMascot() {
      var userInfo = uni.getStorageSync('userInfo')
      if (userInfo && userInfo.mascot) {
        if (userInfo.mascot === 'xibao') {
          this.mascotCode = 'xibao'
          this.mascotIcon = '🌟'
        } else if (userInfo.mascot === 'fubao') {
          this.mascotCode = 'fubao'
          this.mascotIcon = '💪'
        }
      } else {
        // 默认浠宝
        this.mascotCode = 'xibao'
        this.mascotIcon = '🌟'
      }
    },
    goToChat() {
      // 获取当前页面路径作为来源标识
      var pages = getCurrentPages()
      var currentPage = pages[pages.length - 1]
      var fromPage = ''
      if (currentPage) {
        fromPage = currentPage.route || ''
      }
      var url = '/pages/ai/chat'
      if (fromPage) {
        url += '?fromPage=' + encodeURIComponent(fromPage)
      }
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style scoped>
.ai-float-wrapper {
  position: fixed;
  right: 32rpx;
  bottom: calc(160rpx + constant(safe-area-inset-bottom));
  bottom: calc(160rpx + env(safe-area-inset-bottom));
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112rpx;
  height: 112rpx;
}

.ai-float-avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15), 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  animation: floatBounce 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
  transition: transform 0.2s;
}

.ai-float-avatar:active {
  transform: scale(0.92);
}

.ai-float-avatar.xibao {
  background: linear-gradient(135deg, #FFF7ED 0%, #FFE4CC 100%);
  border: 3rpx solid #FF8C42;
}

.ai-float-avatar.fubao {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 3rpx solid #F59E0B;
}

.ai-float-icon {
  font-size: 48rpx;
  line-height: 1;
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8rpx); }
}
</style>