CheckInApp/frontend/src/App.vue

<template>
  <a-config-provider :theme="antdTheme" :locale="zhCN">
    <router-view />
  </a-config-provider>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import { ConfigProvider as AConfigProvider } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { useAuthStore } from '@/stores/auth';
import getAntdTheme from './antd-theme';
import { useTheme, initTheme, watchSystemTheme } from '@/composables/useTheme';

const authStore = useAuthStore();

// 初始化主题（全局）
initTheme();
watchSystemTheme();

// 使用主题
const { isDark } = useTheme();

// 动态生成 Ant Design 主题
const antdTheme = computed(() => getAntdTheme(isDark.value));

// 应用启动时验证 Token
onMounted(async () => {
  if (authStore.isAuthenticated) {
    try {
      await authStore.fetchCurrentUser();
    } catch (error) {
      console.error('验证用户信息失败:', error);
      // Token 可能已过期，清除认证状态
      authStore.clearAuth();
    }
  }
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

#app {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 修复按钮图标与文本的垂直对齐 */
.ant-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-btn .anticon {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.ant-btn > span {
  display: inline-flex !important;
  align-items: center !important;
}
</style>