39-%E5%B8%83%E5%B1%80%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%E5%BC%80%E5%8F%91.md

目标

完成布局用户信息界面的开发

开发

在layouts目录下创建一个select-user的文件夹，然后再创建一个index.vue的文件如下：

<script lang="ts" setup>

</script>

<template>
  <div>
    <!---->
  </div>
</template>

<style scoped>

</style>

首先我们先来实现一下头像部分：

<script lang="ts" setup>
import type { DropdownOption } from 'naive-ui'

defineProps<{
  avatar?: string
  nickname?: string
  options?: DropdownOption[]
  onSelect?: (value: string) => void
}>()
</script>

<template>
  <n-dropdown :options="options" @select="onSelect">
    <div class="flex items-center cursor-pointer">
      <n-avatar
        v-if="avatar"
        round
        size="small"
        :src="avatar"
      />
      <span v-if="nickname" class="ml-2">{{ nickname }}</span>
    </div>
  </n-dropdown>
</template>

首先我们在实现right-content中的内容前，我们先支持一下我们的多语言部分，
在locales/global文件夹中分别添加中英文：

'global.layout.header.right.logout': '退出登录',
'global.layout.header.right.logout.success': '退出成功',
'global.layout.header.right.user.setting': '个人设置',
'global.layout.header.right.user.center': '个人中心',

'global.layout.header.right.logout': 'Logout',
'global.layout.header.right.logout.success': 'Logout successfully',
'global.layout.header.right.user.setting': 'User Setting',
'global.layout.header.right.user.center': 'User Center',

接下来我们实现一下下拉内容部分，在right-content.vue中：

<script lang="ts" setup>
import type { DropdownOption } from 'naive-ui'
import type { Component } from 'vue'
const renderIcon = (icon: Component): VNodeChild => h(NIcon, null, {
  default: () => h(icon),
})
const userOptions = ref<DropdownOption[]>([
  {
    label: () => t('global.layout.header.right.user.center'),
    key: 'user-center',
    icon: () => renderIcon(UserOutlined),
  },
  {
    label: () => t('global.layout.header.right.user.setting'),
    key: 'user-setting',
    icon: () => renderIcon(SettingOutlined),
  },
  {
    key: 'header-divider',
    type: 'divider',
  },
  {
    label: () => t('global.layout.header.right.logout'),
    icon: () => renderIcon(LogoutOutlined),
    key: 'logout',
  },
])
const handleSelect = (value: string) => {
  // TODO
  console.log(value)
}
</script>

<template>
  <n-space align="center">
    <SelectUser :avatar="avatar" :nickname="nickname" :options="userOptions" @select="handleSelect" />
  </n-space>
</template>

实现退出登录功能
首先我们先在stores/user.ts的文件中实现退出登录的功能：

import { useGlobalConfig } from '~/composables/global-config'
import i18n from '~/locales'
import router from '~/routes'

const t = i18n.global.t
const { message } = useGlobalConfig()

const setUserInfo = (info: UserInfo | undefined) => {
  userInfo.value = info
}

const setToken = (key: string | null) => {
  token.value = key
}

const logout = async () => {
  setToken(null)
  setUserInfo(undefined)
  message?.success(t('global.layout.header.right.logout.success'), { duration: 3000 })
  await router.replace({
    path: '/login',
    query: {
      redirect: router.currentRoute.value.path,
    },
  })
}

最后在handleSelect中使用如下：

const handleSelect = (value: string) => {
  if (value === 'logout')
    userStore.logout()
}

功能测试