1.`App.vue`代码

<template><ConfigProvider :locale="locale"><ThemeProvider is-root v-bind="themeConfig" :apply-style="false" :color="{ primary: { DEFAULT: '#f90' } }"><stepin-viewsystem-name=""logo-src="@/assets/logo.png":class="`${contentClass}`":user="user":navMode="navigation":useTabs="useTabs":themeList="themeList"v-model:show-setting="showSetting"v-model:theme="theme"@themeSelect="configTheme"><template #headerActions><HeaderActions @showSetting="showSetting = true" /></template></stepin-view></ThemeProvider></ConfigProvider>
</template>

2.`js`代码

<script lang="ts" setup>import { ConfigProvider } from 'ant-design-vue';import { reactive, ref, computed } from 'vue';import { useRouter } from 'vue-router';import { useAccountStore, useSettingStore, storeToRefs } from '@/store';import avatar from '@/assets/avatar.png';import { HeaderActions } from '@/components/layout';import { configTheme, themeList } from '@/theme';import { ThemeProvider } from 'stepin';const { logout, profile } = useAccountStore();import dayjs from 'dayjs';import 'dayjs/locale/zh-cn';import 'dayjs/locale/ar';import 'dayjs/locale/en';dayjs.locale('zh-cn');import zhCN from 'ant-design-vue/es/locale/zh_CN.js';const showSetting = ref(false);const router = useRouter();const locale = zhCN;// 获取个人信息profile((response, account) => {});let user = computed(() => {const { account } = storeToRefs(useAccountStore());return {name: account?.value?.name,avatar: account?.value?.headPhoto || avatar,menuList: [{ title: '个人中心', key: 'personal', icon: 'UserOutlined', onClick: () => router.push('/userInfo') },{ type: 'divider' },{title: '退出登录',key: 'logout',icon: 'LogoutOutlined',onClick: () =>logout().then(() => {router.replace('/login');}),},],};});const { navigation, useTabs, theme, contentClass } = storeToRefs(useSettingStore());const themeConfig = computed(() => themeList.find((item) => item.key === theme.value).config);
</script>

重要的代码如下：

  // 获取个人信息,只要是刷新整个系统，也就是刷新浏览器的时候，就会触发这个`profile`的方法来获取权限。import { useAccountStore, useSettingStore, storeToRefs } from '@/store';const { logout, profile } = useAccountStore();profile((response, account) => {});//为了实时获取用户信息，则需要通过这个`computed`计算属性来处理。let user = computed(() => {const { account } = storeToRefs(useAccountStore());return {name: account?.value?.name,avatar: account?.value?.headPhoto || avatar,menuList: [{ title: '个人中心', key: 'personal', icon: 'UserOutlined', onClick: () => router.push('/userInfo') },{ type: 'divider' },{title: '退出登录',key: 'logout',icon: 'LogoutOutlined',onClick: () =>logout().then(() => {router.replace('/login');}),},],};});