EmailBill/Web/src/components/Global/GlobalAddBill.vue

<template>
  <div class="global-add-bill">
    <!-- Floating Add Bill Button -->
    <div class="floating-add" @click="openAddBill">
      <van-icon name="plus" />
    </div>

    <!-- Add Bill Modal -->
    <PopupContainer
      v-model="showAddBill"
      title="记一笔"
      height="75%"
    >
      <van-tabs v-model:active="activeTab" shrink>
        <van-tab title="一句话录账" name="one">
          <OneLineBillAdd :key="componentKey" @success="handleSuccess" />
        </van-tab>
        <van-tab title="手动录账" name="manual">
          <ManualBillAdd :key="componentKey" @success="handleSuccess" />
        </van-tab>
      </van-tabs>
    </PopupContainer>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue'
import PopupContainer from '@/components/PopupContainer.vue'
import OneLineBillAdd from '@/components/Bill/OneLineBillAdd.vue'
import ManualBillAdd from '@/components/Bill/ManualBillAdd.vue'

const emit = defineEmits(['success'])

const showAddBill = ref(false)
const activeTab = ref('one')
const componentKey = ref(0)

const openAddBill = () => {
  showAddBill.value = true
  // 清理状态，默认选中一句话录账
  activeTab.value = 'one'

  // 清理子组件状态通过 key 强制重渲染
  componentKey.value++
}

const handleSuccess = () => {
  showAddBill.value = false

  emit('success')
}
</script>

<style scoped>
.floating-add {
  position: fixed;
  bottom: 95px; /* Above tabbar */
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--van-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 999;
  cursor: pointer;
  transition: transform 0.2s;
}

.floating-add:active {
  transform: scale(0.9);
}

:deep(.van-tabs__wrap) {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--van-background-2);
}
</style>