App.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <a-config-provider :locale="zhCN">
  3. <BasicLayout
  4. v-if="showLayout"
  5. :userName="authStore.user?.name"
  6. @logout="handleLogout"
  7. >
  8. <router-view />
  9. </BasicLayout>
  10. <router-view v-else />
  11. </a-config-provider>
  12. </template>
  13. <script setup lang="ts">
  14. import { computed, onMounted } from 'vue';
  15. import { useRouter, useRoute } from 'vue-router';
  16. import { message } from 'ant-design-vue';
  17. import zhCN from 'ant-design-vue/es/locale/zh_CN';
  18. import { DashboardOutlined, ShopOutlined, UserOutlined } from '@ant-design/icons-vue';
  19. import BasicLayout from '@/layouts/BasicLayout.vue';
  20. import { useAuthStore } from '@/stores/auth';
  21. import { useLayoutStore } from '@/stores/layout';
  22. const router = useRouter();
  23. const route = useRoute();
  24. const authStore = useAuthStore();
  25. const layoutStore = useLayoutStore();
  26. // 初始化布局配置
  27. onMounted(() => {
  28. layoutStore.init({
  29. menuItems: [
  30. { key: 'dashboard', label: '主页看板', icon: DashboardOutlined, path: '/' },
  31. { key: 'factories', label: '工厂管理', icon: ShopOutlined, path: '/factories' },
  32. { key: 'users', label: '系统用户', icon: UserOutlined, path: '/users' }
  33. ]
  34. });
  35. });
  36. // 根据路由 meta 判断是否显示布局
  37. const showLayout = computed(() => {
  38. return route.meta.showLayout !== false;
  39. });
  40. // 登出处理
  41. async function handleLogout() {
  42. await authStore.logout();
  43. message.success('已退出登录');
  44. router.push('/login');
  45. }
  46. </script>
  47. <style>
  48. #app {
  49. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  50. 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  51. 'Noto Color Emoji';
  52. -webkit-font-smoothing: antialiased;
  53. -moz-osx-font-smoothing: grayscale;
  54. }
  55. </style>