<!--
 * @Date: 2025-03-20 19:53:12
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-25 10:56:11
 * @FilePath: /mlaj/src/App.vue
 * @Description: 入口文件
-->
<script setup>
import { RouterView } from "vue-router";
import { provideAuth } from "@/contexts/auth";
import { provideCart } from "@/contexts/cart";
import { ConfigProvider as VanConfigProvider } from 'vant';
import { themeVars } from './vant.config';
// 会根据配置判断是否显示调试控件
// eslint-disable-next-line no-unused-vars
import vConsole from "@/utils/vconsole";
// 初始化WX环境
import wx from "weixin-js-sdk";
import { wxJsAPI } from "@/api/wx/config";
import { apiList } from "@/api/wx/jsApiList.js";
import { wxInfo, getUrlParams, stringifyQuery } from "@/utils/tools";

import 'vant/es/toast/style'

provideAuth(); // 提供全局认证状态
provideCart('single'); // 提供全局购物车状态，单一商品模式
</script>

<template>
  <van-config-provider :theme-vars="themeVars">
    <!-- 通过v-slot获取当前路由组件。使用component是为了实现动态组件渲染和加载状态的控制：当Component存在时渲染路由组件，不存在时显示加载动画。直接使用 -->
    <router-view v-slot="{ Component }">
      <div v-if="Component">
        <component :is="Component" />
      </div>
      <div v-else class="flex items-center justify-center h-screen bg-gradient-to-br from-green-50 via-teal-50 to-blue-50">
        <div class="bg-white/20 backdrop-blur-md rounded-xl p-6 shadow-lg">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto"></div>
          <p class="mt-4 text-gray-700">加载中...</p>
        </div>
      </div>
    </router-view>
  </van-config-provider>
</template>

<style>
#app {
  width: 100%;
  min-height: 100vh;
}
</style>