cfc/cfc-frontend/pages/wishes/index.vue

<template>
  <view class="page">
    <!-- 加载状态 -->
    <BaseLoading :loading="loading" text="加载心愿中..." />

    <!-- 积分卡片 -->
    <view class="points-card" v-if="!loading">
      <view class="points-card__glow"></view>
      <view class="points-card__inner">
        <view class="points-card__header">
          <text class="points-card__icon">⭐</text>
          <text class="points-card__label">我的积分</text>
        </view>
        <text class="points-card__value">{{ formattedPoints }}</text>
        <view class="milestone">
          <view class="milestone__track">
            <view
              class="milestone__fill"
              :style="{ width: milestoneInfo.progress + '%' }"
            ></view>
          </view>
          <text class="milestone__text">🎯 距离下一个奖励还差 {{ milestoneInfo.remaining }} 分</text>
        </view>
      </view>
    </view>

    <!-- 筛选标签 -->
    <scroll-view
      class="filter-tabs"
      scroll-x="true"
      show-scrollbar="false"
      v-if="!loading && wishes.length > 0"
    >
      <view class="filter-tabs__inner">
        <view
          v-for="tab in filterTabs"
          :key="tab.key"
          class="filter-tab"
          :class="{ 'filter-tab--active': activeFilter === tab.key }"
          @click="onFilterChange(tab.key)"
        >
          <text class="filter-tab__label">{{ tab.emoji }} {{ tab.label }}</text>
          <view class="filter-tab__count" v-if="getFilterCount(tab.key) > 0">{{ getFilterCount(tab.key) }}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 空状态：无任何心愿 -->
    <BaseEmpty
      v-if="!loading && wishes.length === 0"
      icon="🗺️"
      title="还没有心愿呢"
      description="点击 + 添加第一个心愿吧！"
    >
      <template v-slot:action>
        <PlayfulButton variant="clay" size="lg" @click="showAddModal = true">
          ✨ 添加第一个心愿
        </PlayfulButton>
      </template>
    </BaseEmpty>

    <!-- 空状态：筛选后无结果 -->
    <BaseEmpty
      v-else-if="!loading && filteredWishes.length === 0 && wishes.length > 0"
      icon="🔍"
      title="没有找到"
      :description="'还没有' + getActiveTabLabel + '的心愿哦'"
    />

    <!-- 心愿列表（宝箱卡片） -->
    <view class="wish-list" v-if="!loading && wishes.length > 0">
      <view
        v-for="(wish, index) in filteredWishes"
        :key="wish.id"
        class="wish-item"
        :class="['animate-slide-up', 'animate-stagger-' + (index + 1)]"
      >
        <PlayfulCard variant="clay" padding="0" :clickable="false">
          <view class="wish-card">
            <!-- 左侧 emoji 图标 -->
            <view class="wish-card__icon-wrap">
              <text class="wish-card__emoji">{{ getCategoryEmoji(wish.category) }}</text>
            </view>

            <!-- 中间内容 -->
            <view class="wish-card__body">
              <view class="wish-card__top">
                <text class="wish-card__title">{{ wish.title }}</text>
                <BaseBadge :variant="getStatusBadgeVariant(wish.status)" size="xs">
                  <text>{{ getStatusEmoji(wish.status) }} {{ wish.statusText || wish.status }}</text>
                </BaseBadge>
              </view>
              <view class="wish-card__points-row">
                <text class="wish-card__points-label">需要</text>
                <text class="wish-card__points-value">{{ wish.pointsRequired || '???' }}</text>
                <text class="wish-card__points-unit">⭐</text>
              </view>

              <!-- 根据不同状态显示操作区域 -->
              <view class="wish-card__actions">
                <!-- draft：等待定价 -->
                <view class="wish-card__status-text" v-if="wish.status === 'draft'">
                  <text class="wish-card__status-emoji">⏳</text>
                  <text class="wish-card__status-msg">等待妈妈定价中</text>
                </view>

                <!-- active + 积分足够 → 兑换按钮 -->
                <PlayfulButton
                  v-if="wish.status === 'active'"
                  :variant="canRedeem(wish) ? 'primary' : 'secondary'"
                  size="sm"
                  :disabled="!canRedeem(wish)"
                  @click="onRedeem(wish)"
                >
                  {{ canRedeem(wish) ? '🎁 兑换' : '还差 ' + (wish.pointsRequired - currentPoints) + ' ⭐' }}
                </PlayfulButton>

                <!-- pending_exchange：审批中 -->
                <view class="wish-card__status-text wish-card__status-text--warning" v-if="wish.status === 'pending_exchange'">
                  <text class="wish-card__status-emoji">⏳</text>
                  <text class="wish-card__status-msg">等待妈妈审批</text>
                </view>

                <!-- approved：已批准 -->
                <view class="wish-card__status-text wish-card__status-text--info" v-if="wish.status === 'approved'">
                  <text class="wish-card__status-emoji">📦</text>
                  <text class="wish-card__status-msg">妈妈准备中</text>
                </view>

                <!-- exchanging：确认收货 -->
                <PlayfulButton
                  v-if="wish.status === 'exchanging'"
                  variant="success"
                  size="sm"
                  @click="onConfirmReceived(wish)"
                >
                  📦 确认收货
                </PlayfulButton>

                <!-- fulfilled：已完成 -->
                <view class="wish-card__status-text wish-card__status-text--success" v-if="wish.status === 'fulfilled'">
                  <text class="wish-card__status-emoji">🎉</text>
                  <text class="wish-card__status-msg">已兑换</text>
                </view>

                <!-- rejected：未通过 -->
                <view class="wish-card__status-text wish-card__status-text--error" v-if="wish.status === 'rejected'">
                  <text class="wish-card__status-emoji">😢</text>
                  <text class="wish-card__status-msg">未通过</text>
                </view>
              </view>
            </view>

            <!-- 右侧删除按钮（仅可取消状态） -->
            <view
              class="wish-card__delete"
              v-if="wish.status === 'draft' || wish.status === 'active'"
              @click.stop="onDeleteWish(wish)"
            >
              <text class="wish-card__delete-icon">✕</text>
            </view>
          </view>
        </PlayfulCard>
      </view>

      <!-- 底部间距（给 FAB 让位） -->
      <view class="wish-list__spacer"></view>
    </view>

    <!-- 浮动操作按钮 -->
    <view class="fab" @click="showAddModal = true">
      <view class="fab__pulse"></view>
      <text class="fab__icon">+</text>
    </view>

    <!-- 添加心愿弹窗 -->
    <view class="modal-overlay" v-if="showAddModal" @click="closeAddModal">
      <view class="modal" @click.stop>
        <view class="modal__header">
          <text class="modal__title">✨ 添加新心愿</text>
          <text class="modal__close" @click="closeAddModal">✕</text>
        </view>

        <!-- 表情/分类选择 -->
        <view class="form-group">
          <text class="form-group__label">选择分类</text>
          <view class="emoji-grid">
            <view
              v-for="cat in categories"
              :key="cat.value"
              class="emoji-item"
              :class="{ 'emoji-item--active': addForm.category === cat.value }"
              @click="addForm.category = cat.value; addForm.emoji = cat.emoji"
            >
              <text class="emoji-item__icon">{{ cat.emoji }}</text>
              <text class="emoji-item__label">{{ cat.label }}</text>
            </view>
          </view>
        </view>

        <!-- 心愿名称 -->
        <view class="form-group">
          <text class="form-group__label">心愿名称</text>
          <input
            class="form-input"
            v-model="addForm.title"
            placeholder="写下你的心愿吧~"
            maxlength="20"
            @input="onTitleInput"
          />
          <text class="form-input__counter">{{ addForm.title.length }}/20</text>
        </view>

        <!-- 所需积分 -->
        <view class="form-group">
          <text class="form-group__label">所需积分（给妈妈参考）</text>
          <view class="form-input__wrapper">
            <input
              class="form-input form-input--number"
              v-model="addForm.pointsRequired"
              placeholder="建议积分"
              type="number"
              maxlength="4"
            />
            <text class="form-input__suffix">⭐</text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <PlayfulButton variant="clay" size="lg" block :disabled="!canSubmit" @click="onAddWish">
          ✨ 许下心愿
        </PlayfulButton>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getWishes,
  createWish,
  requestWishExchange,
  confirmWishReceived,
  cancelWish,
  getPointsBalance
} from '../../utils/api.js'

import PlayfulCard from '../../components/PlayfulCard.vue'
import PlayfulButton from '../../components/PlayfulButton.vue'
import BaseBadge from '../../components/BaseBadge.vue'
import BaseEmpty from '../../components/BaseEmpty.vue'
import BaseLoading from '../../components/BaseLoading.vue'

export default {
  components: {
    PlayfulCard,
    PlayfulButton,
    BaseBadge,
    BaseEmpty,
    BaseLoading
  },
  data() {
    return {
      wishes: [],
      currentPoints: 0,
      memberId: '',
      loading: true,
      activeFilter: 'all',

      // 添加心愿弹窗
      showAddModal: false,
      addForm: {
        title: '',
        category: '',
        emoji: '🎁',
        pointsRequired: ''
      },
      submittingWish: false,

      // 筛选标签配置
      filterTabs: [
        { key: 'all', emoji: '📋', label: '全部' },
        { key: 'redeemable', emoji: '🎯', label: '可兑换' },
        { key: 'pending', emoji: '⏳', label: '审核中' },
        { key: 'completed', emoji: '✅', label: '已兑换' },
        { key: 'rejected', emoji: '❌', label: '未通过' }
      ],

      // 分类配置
      categories: [
        { value: '玩具', emoji: '🎮', label: '玩具' },
        { value: '图书', emoji: '📚', label: '图书' },
        { value: '美食', emoji: '🍕', label: '美食' },
        { value: '娱乐', emoji: '🎪', label: '娱乐' },
        { value: '活动', emoji: '🏕️', label: '活动' },
        { value: '其他', emoji: '🎁', label: '其他' }
      ],

      // 状态 → badge 颜色映射
      statusBadgeMap: {
        draft: 'warning',
        active: 'accent',
        pending_exchange: 'warning',
        approved: 'accent',
        exchanging: 'primary',
        fulfilled: 'success',
        rejected: 'error'
      },

      // 状态 → emoji 映射
      statusEmojiMap: {
        draft: '⏳',
        active: '🎯',
        pending_exchange: '⏳',
        approved: '📦',
        exchanging: '🚚',
        fulfilled: '✅',
        rejected: '😢'
      },

      // 分类 → emoji 映射
      categoryEmojiMap: {
        '玩具': '🎮',
        '图书': '📚',
        '美食': '🍕',
        '娱乐': '🎪',
        '活动': '🏕️',
        '其他': '🎁'
      },

      // 用于触发列表重绘（筛选切换时重新触发动画）
      listKey: 0
    }
  },
  computed: {
    formattedPoints() {
      if (!this.currentPoints) return '0'
      return this.currentPoints.toLocaleString()
    },

    milestoneInfo() {
      const step = 200
      const current = this.currentPoints || 0
      const next = Math.ceil(current / step) * step
      const remaining = next - current
      const progress = step > 0 ? (current % step) / step * 100 : 0
      return { nextMilestone: next, remaining, progress }
    },

    filteredWishes() {
      return this.getFilteredWishes(this.activeFilter)
    },

    getActiveTabLabel() {
      var activeFilter = this.activeFilter
      var tab = this.filterTabs.find(function(t) { return t.key === activeFilter })
      return tab ? tab.label : ''
    },

    canSubmit() {
      var title = this.addForm.title || ''
      return title.trim().length > 0 && !this.submittingWish
    }
  },
  onShow() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      var currentRole
      var results
      try {
        currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role')
        if (currentRole !== 'child') {
          uni.reLaunch({ url: '/pages/index-home/index' })
          return
        }

        this.memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('userId')

        // 并行获取心愿列表和积分
        results = await Promise.all([
          getWishes({ memberId: this.memberId }),
          getPointsBalance(this.memberId)
        ])

        this.wishes = (results[0] && results[0].data) || []
        this.currentPoints = (results[1] && results[1].data && results[1].data.balance) || 0
      } catch (e) {
        console.error('加载心愿列表失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },

    // 筛选切换（触发重动画）
    onFilterChange(key) {
      this.activeFilter = key
      this.listKey++
    },

    getFilteredWishes(filterKey) {
      var list = this.wishes || []
      if (filterKey === 'all') return list
      if (filterKey === 'redeemable') {
        return list.filter(function(w) {
          return w.status === 'active'
        })
      }
      if (filterKey === 'pending') {
        return list.filter(function(w) {
          return w.status === 'draft' || w.status === 'pending_exchange'
        })
      }
      if (filterKey === 'completed') {
        return list.filter(function(w) {
          return w.status === 'fulfilled' || w.status === 'exchanging' || w.status === 'approved'
        })
      }
      if (filterKey === 'rejected') {
        return list.filter(function(w) {
          return w.status === 'rejected'
        })
      }
      return list
    },

    getFilterCount(filterKey) {
      return this.getFilteredWishes(filterKey).length
    },

    canRedeem(wish) {
      return this.currentPoints >= (wish.pointsRequired || 0)
    },

    getCategoryEmoji(category) {
      var map = this.categoryEmojiMap
      if (category && map[category]) {
        return map[category]
      }
      return '🎁'
    },

    getStatusBadgeVariant(status) {
      var map = this.statusBadgeMap
      return (status && map[status]) || 'muted'
    },

    getStatusEmoji(status) {
      var map = this.statusEmojiMap
      return (status && map[status]) || '📋'
    },

    // 兑换操作
    onRedeem(wish) {
      var self = this
      uni.showModal({
        title: '兑换心愿',
        content: '确定要兑换"' + wish.title + '"吗？\n将消耗 ' + wish.pointsRequired + ' 积分',
        success: function(res) {
          if (res.confirm) {
            self.doRedeem(wish)
          }
        }
      })
    },

    async doRedeem(wish) {
      try {
        await requestWishExchange(wish.id)
        uni.showToast({ title: '已提交申请 🎉', icon: 'success' })
        this.loadData()
      } catch (e) {
        uni.showToast({ title: e.message || '申请失败', icon: 'none' })
      }
    },

    // 确认收货
    onConfirmReceived(wish) {
      var self = this
      uni.showModal({
        title: '确认收货',
        content: '确定已收到"' + wish.title + '"吗？',
        success: function(res) {
          if (res.confirm) {
            self.doConfirmReceived(wish)
          }
        }
      })
    },

    async doConfirmReceived(wish) {
      try {
        await confirmWishReceived(wish.id)
        uni.showToast({ title: '心愿完成！🎉', icon: 'success' })
        this.loadData()
      } catch (e) {
        uni.showToast({ title: '确认失败', icon: 'none' })
      }
    },

    // 删除/取消心愿
    onDeleteWish(wish) {
      var self = this
      uni.showModal({
        title: '取消心愿',
        content: '确定要取消"' + wish.title + '"吗？',
        success: function(res) {
          if (res.confirm) {
            self.doDeleteWish(wish)
          }
        }
      })
    },

    async doDeleteWish(wish) {
      try {
        await cancelWish(wish.id, '不想兑换了')
        uni.showToast({ title: '已取消', icon: 'success' })
        this.loadData()
      } catch (e) {
        uni.showToast({ title: '取消失败', icon: 'none' })
      }
    },

    // 添加心愿弹窗
    closeAddModal() {
      this.showAddModal = false
      this.resetAddForm()
    },

    resetAddForm() {
      this.addForm = {
        title: '',
        category: '',
        emoji: '🎁',
        pointsRequired: ''
      }
    },

    onTitleInput() {
      // 仅用于触发字符计数更新（vue 双向绑定已处理）
    },

    async onAddWish() {
      if (!this.canSubmit) return

      var title = (this.addForm.title || '').trim()
      if (!title) {
        uni.showToast({ title: '请输入心愿名称', icon: 'none' })
        return
      }

      this.submittingWish = true
      var data
      try {
        data = {
          memberId: this.memberId,
          title: title,
          category: this.addForm.category || '其他'
        }

        // 如果填写了积分建议，一并提交
        if (this.addForm.pointsRequired) {
          data.pointsRequired = parseInt(this.addForm.pointsRequired, 10) || 0
        }

        await createWish(data)
        uni.showToast({ title: '心愿已许下 ✨', icon: 'success' })
        this.closeAddModal()
        this.loadData()
      } catch (e) {
        uni.showToast({ title: e.message || '添加失败', icon: 'none' })
      } finally {
        this.submittingWish = false
      }
    }
  }
}
</script>

<style scoped>
/* ============================================================
   页面容器
   ============================================================ */
.page {
  min-height: 100vh;
  background: var(--bg, #F5F9FC);
  padding-bottom: 180rpx;
}

/* ============================================================
   积分卡片
   ============================================================ */
.points-card {
  position: relative;
  margin: 24rpx 32rpx 16rpx;
  border-radius: 32rpx;
  overflow: hidden;
}

.points-card__glow {
  position: absolute;
  top: -50%;
  right: -30%;
  width: 300rpx;
  height: 300rpx;
  background: radial-gradient(circle, rgba(91, 155, 213, 0.15), transparent 70%);
  pointer-events: none;
}

.points-card__inner {
  position: relative;
  padding: 32rpx 36rpx 28rpx;
  border-radius: 32rpx;
  border: 4rpx solid var(--border, #CBD5E1);
  background: linear-gradient(145deg, #FFFFFF, var(--bg-grey, #EDF2F7));
  box-shadow:
    inset -4rpx -4rpx 12rpx rgba(91, 155, 213, 0.05),
    6rpx 6rpx 18rpx rgba(91, 155, 213, 0.10);
}

.points-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.points-card__icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.points-card__label {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--text-secondary, #64748B);
}

.points-card__value {
  display: block;
  font-size: 72rpx;
  font-weight: 800;
  color: var(--color-primary, #5B9BD5);
  line-height: 1.1;
  margin-bottom: 20rpx;
  letter-spacing: -2rpx;
}

/* 里程碑进度条 */
.milestone {
  display: flex;
  flex-direction: column;
}

.milestone__track {
  height: 12rpx;
  background: var(--border-light, #E2E8F0);
  border-radius: 999rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.milestone__fill {
  height: 100%;
  border-radius: 999rpx;
  background: linear-gradient(90deg, var(--color-primary-light, #8FC5E8), var(--color-primary, #5B9BD5));
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.milestone__text {
  font-size: 24rpx;
  color: var(--text-secondary, #64748B);
  line-height: 1.5;
}

/* ============================================================
   筛选标签
   ============================================================ */
.filter-tabs {
  margin: 8rpx 0 16rpx;
  white-space: nowrap;
  padding: 0 24rpx;
}

.filter-tabs__inner {
  display: flex;
  gap: 16rpx;
  padding: 4rpx 8rpx;
}

.filter-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 16rpx 28rpx;
  border-radius: 999rpx;
  background: var(--surface, #FFFFFF);
  border: 2rpx solid var(--border-light, #E2E8F0);
  font-size: 26rpx;
  font-weight: 500;
  color: var(--text-secondary, #64748B);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.filter-tab--active {
  background: var(--color-primary, #5B9BD5);
  border-color: var(--color-primary, #5B9BD5);
  color: #FFFFFF;
  box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.25);
}

.filter-tab:active {
  transform: scale(0.96);
}

.filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  margin-left: 8rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  font-size: 20rpx;
  font-weight: 700;
}

.filter-tab--active .filter-tab__count {
  background: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

/* ============================================================
   心愿列表
   ============================================================ */
.wish-list {
  padding: 8rpx 32rpx 0;
}

.wish-item {
  margin-bottom: 24rpx;
}

.wish-list__spacer {
  height: 160rpx;
}

/* ============================================================
   心愿卡片（内部布局）
   ============================================================ */
.wish-card {
  display: flex;
  align-items: stretch;
  padding: 24rpx;
  min-height: 160rpx;
}

/* 左侧 emoji 区域 */
.wish-card__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  min-height: 120rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.wish-card__emoji {
  font-size: 56rpx;
  line-height: 1;
}

/* 中间内容区域 */
.wish-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 8rpx;
}

.wish-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
  gap: 12rpx;
}

.wish-card__title {
  font-size: 32rpx;
  font-weight: 700;
  color: var(--text, #1E293B);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

/* 积分行 */
.wish-card__points-row {
  display: flex;
  align-items: baseline;
  margin-bottom: 12rpx;
  gap: 6rpx;
}

.wish-card__points-label {
  font-size: 24rpx;
  color: var(--text-secondary, #64748B);
}

.wish-card__points-value {
  font-size: 40rpx;
  font-weight: 800;
  color: var(--color-accent, #0EA5E9);
  line-height: 1;
}

.wish-card__points-unit {
  font-size: 28rpx;
  color: var(--color-accent, #0EA5E9);
  font-weight: 600;
}

/* 操作区域 */
.wish-card__actions {
  display: flex;
  align-items: center;
}

/* 状态文本 */
.wish-card__status-text {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.wish-card__status-emoji {
  font-size: 28rpx;
}

.wish-card__status-msg {
  font-size: 24rpx;
  font-weight: 500;
  color: var(--text-secondary, #64748B);
}

.wish-card__status-text--warning .wish-card__status-msg {
  color: var(--color-warning, #F59E0B);
}

.wish-card__status-text--info .wish-card__status-msg {
  color: var(--color-accent, #0EA5E9);
}

.wish-card__status-text--success .wish-card__status-msg {
  color: var(--color-success, #22C55E);
}

.wish-card__status-text--error .wish-card__status-msg {
  color: var(--color-error, #EF4444);
}

/* 右侧删除按钮 */
.wish-card__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48rpx;
  flex-shrink: 0;
  margin-left: 8rpx;
}

.wish-card__delete-icon {
  font-size: 28rpx;
  color: var(--muted, #94A3B8);
  padding: 12rpx;
}

.wish-card__delete-icon:active {
  opacity: 0.5;
}

/* ============================================================
   浮动操作按钮 (FAB)
   ============================================================ */
.fab {
  position: fixed;
  right: 40rpx;
  bottom: 80rpx;
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--color-primary-light, #8FC5E8), var(--color-primary, #5B9BD5));
  border: 4rpx solid var(--border, #CBD5E1);
  box-shadow:
    inset -3rpx -3rpx 10rpx rgba(255, 255, 255, 0.3),
    4rpx 4rpx 16rpx rgba(91, 155, 213, 0.3);
  z-index: 100;
  transition: transform 0.15s ease;
}

.fab:active {
  transform: scale(0.92);
}

.fab__pulse {
  position: absolute;
  inset: -8rpx;
  border-radius: 50%;
  background: rgba(91, 155, 213, 0.15);
  animation: pulseGlow 2s ease-in-out infinite;
  pointer-events: none;
}

.fab__icon {
  font-size: 56rpx;
  color: #FFFFFF;
  font-weight: 300;
  line-height: 1;
  margin-top: -4rpx;
}

/* ============================================================
   添加心愿弹窗
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease both;
}

.modal {
  width: 100%;
  max-height: 80vh;
  background: var(--surface, #FFFFFF);
  border-radius: 40rpx 40rpx 0 0;
  padding: 40rpx 36rpx;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  overflow-y: auto;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 36rpx;
}

.modal__title {
  font-size: 36rpx;
  font-weight: 700;
  color: var(--text, #1E293B);
}

.modal__close {
  font-size: 36rpx;
  color: var(--muted, #94A3B8);
  padding: 12rpx;
  min-width: 60rpx;
  text-align: center;
}

.modal__close:active {
  opacity: 0.5;
}

/* 表单组 */
.form-group {
  margin-bottom: 32rpx;
}

.form-group__label {
  display: block;
  font-size: 26rpx;
  font-weight: 600;
  color: var(--text, #1E293B);
  margin-bottom: 16rpx;
}

/* 分类/表情选择器 */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.emoji-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 12rpx;
  border-radius: 20rpx;
  background: var(--bg, #F5F9FC);
  border: 2rpx solid var(--border-light, #E2E8F0);
  transition: all 0.2s ease;
}

.emoji-item--active {
  background: linear-gradient(145deg, #FFFFFF, var(--bg-grey, #EDF2F7));
  border-color: var(--color-primary, #5B9BD5);
  box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.15);
}

.emoji-item:active {
  transform: scale(0.95);
}

.emoji-item__icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
  line-height: 1;
}

.emoji-item__label {
  font-size: 24rpx;
  color: var(--text-secondary, #64748B);
  font-weight: 500;
}

.emoji-item--active .emoji-item__label {
  color: var(--color-primary, #5B9BD5);
  font-weight: 600;
}

/* 输入框 */
.form-input {
  width: 100%;
  background: var(--bg, #F5F9FC);
  border: 2rpx solid var(--border-light, #E2E8F0);
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  font-size: 30rpx;
  color: var(--text, #1E293B);
  box-sizing: border-box;
}

.form-input--number {
  padding-right: 80rpx;
}

.form-input__wrapper {
  position: relative;
}

.form-input__suffix {
  position: absolute;
  right: 28rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32rpx;
  color: var(--color-accent, #0EA5E9);
  font-weight: 700;
}

.form-input__counter {
  display: block;
  text-align: right;
  font-size: 22rpx;
  color: var(--muted, #94A3B8);
  margin-top: 8rpx;
}
</style>