| <template> | 
|   <a-col class="banner"> | 
|     <a-col :span="8"> | 
|       <a-typography-title :heading="5" style="margin-top: 0"> | 
|         {{ $t('workplace.welcome') }} {{ userInfo.name }} | 
|       </a-typography-title> | 
|     </a-col> | 
|     <a-divider class="panel-border" /> | 
|   </a-col> | 
| </template> | 
|   | 
| <script lang="ts" setup> | 
|   import { computed } from 'vue'; | 
|   import { useUserStore } from '@/store'; | 
|   | 
|   const userStore = useUserStore(); | 
|   const userInfo = computed(() => { | 
|     return { | 
|       name: userStore.name, | 
|     }; | 
|   }); | 
| </script> | 
|   | 
| <style scoped lang="less"> | 
|   .banner { | 
|     width: 100%; | 
|     padding: 20px 20px 0 20px; | 
|     background-color: var(--color-bg-2); | 
|     border-radius: 4px 4px 0 0; | 
|   } | 
|   | 
|   :deep(.arco-icon-home) { | 
|     margin-right: 6px; | 
|   } | 
| </style> |