ai-interview/src/App.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useJobStore } from './stores/jobStore'
import JobManagementView from './views/JobManagementView.vue'
import CandidateView from './views/CandidateView.vue'
import DashboardView from './views/DashboardView.vue'
import BottomNavigation from './components/BottomNavigation.vue'

const jobStore = useJobStore()
const currentView = ref('jobs')

const views = {
  jobs: JobManagementView,
  candidates: CandidateView,
  dashboard: DashboardView
}

const handleNavChange = (view: string) => {
  currentView.value = view
}

onMounted(() => {
  // 初始化应用数据
  jobStore.initializeData()
})
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50/30 to-purple-50/30 flex flex-col">
    <!-- 主内容区域 -->
    <main class="flex-1 pb-20 safe-area-top">
      <Transition
        name="page"
        mode="out-in"
        appear
      >
        <component 
          :is="views[currentView]" 
          :key="currentView"
          class="min-h-full"
        />
      </Transition>
    </main>
    
    <!-- 底部导航栏 -->
    <BottomNavigation 
      :current-view="currentView"
      @change="handleNavChange"
      class="safe-area-bottom"
    />
  </div>
</template>

<style scoped>
/* 页面切换动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>