vue3 后台管理框架geeker admin -- 纵向header ToolBarRight组件概述
0 环境
1 参考文档
2 正文
主要介绍header右边，那一排的图标按钮。先看LayoutVertical/index.vue第26行，点进去。
3 总的布局样式
如下图：
总的样式不多，主要样式tool-bar-ri+header-icon。
header-icon被div包裹，tool-bar-ri包裹header-icon+用户名+头像。tool-bar-ri水平垂直居中，内填充设置。header-icon垂直居中，并且所有直接子元素，这些元素的左边外边距被设置为21px，颜色被设为CSS变量--el-header-text-color。username设置左右边距，大小，以及颜色(CSS变量--el-header-text-color)。
4 获取用户名
这里的代码我们可以看到核心代码是4-12行，除了11行是span包裹的用户名变量，其余的都是封装的组件。所以先将用户名的变量整完(这里的用户名的出处来自于userStore.userInfo.name)，其它的组件，到时候挨个点进去看。
看header ToolBarRight第27行，然后找到useUserStore点进去，当然你可以通过src/stores/modules/user.ts找到。如下图：
先找到我圈出来的那个红色框框内的对象，它就是我们需要的。还有一点，需要声明一下，这里的username，在useUserStore里应该算是写死的，我没找到对应axios对应的请求，那么它就是默认值。如果不想它是默认值，怎么办，该在哪里请求后端，比较合适。比如在登录页中做，见到的比较多，现在作者的逻辑是先登录表单校验、没问题的情况，然后在请求后台，并得到成功的结果，也就是返回的token，useUserStore也只是设置了token(这里是用了setToken，不知道的自己找到LoginForm.vue里的setToken，简单了解下即可)。如果是要从后端中拿到用户信息，一般是放在设置token的附近位置即可，也就是设置了token的同时，顺带设置下setUserInfo。
5 总结
主要是它们位置的排布，还有从
useUserStore()中得到userInfo.name的值。
转载自:https://juejin.cn/post/7394792228217946127