<template>
  <!-- 创建一个带有 "user-wrapper" 类名的 div 容器，用于包裹整个用户相关菜单的结构，方便后续通过 CSS 对这个区域进行样式设置，统一管理其布局和外观表现 -->
  <div class="user-wrapper">
    <!-- 在 "user-wrapper" 内部再创建一个带有 "content-box" 类名的 div 容器，进一步细化布局结构，后续相关的用户菜单交互组件等都放置在这个容器内 -->
    <div class="content-box">
      <!-- 使用 Ant Design Vue 库中的 a-dropdown 组件创建一个下拉菜单组件，用于展示用户相关的操作选项，如账户设置、退出登录等，点击后会弹出相应的菜单选项供用户选择操作 -->
      <a-dropdown>
        <!-- 创建一个带有 "action ant-dropdown-link user-dropdown-menu" 类名的 span 元素，作为触发下拉菜单显示的操作区域，它内部包含用户头像（通过 a-avatar 组件展示）和用户昵称（通过双括号插值语法展示），用户点击这个区域时会弹出下拉菜单 -->
        <span class="action ant-dropdown-link user-dropdown-menu">
          <!-- 使用 Ant Design Vue 库中的 a-avatar 组件展示用户头像，设置其 class 属性为 "avatar"，size 属性为 "small" 表示以小尺寸展示头像，通过 :src 属性绑定一个函数（从脚本部分可知是从全局变量获取头像地址的函数）来动态获取并显示用户头像 -->
          <a-avatar class="avatar" size="small" :src="avatar()"/>
          <!-- 使用双括号插值语法展示用户昵称，昵称的值同样是通过函数（从全局变量获取昵称的函数）动态获取得到，具体函数的实现和数据来源看脚本部分代码 -->
          <span>{{ nickname() }}</span>
        </span>
        <!-- 使用 slot="overlay" 插槽来定义下拉菜单弹出时显示的具体内容，也就是具体的菜单选项列表，将其包裹在带有 "user-dropdown-menu-wrapper" 类名的 a-menu 组件中，使其呈现为一个菜单的样式结构 -->
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <!-- 创建一个 a-menu-item 菜单子项组件，设置 key 属性为 "1"，用于在菜单中唯一标识这个选项，方便 Vue 在进行虚拟 DOM 操作等场景下进行区分和管理 -->
          <a-menu-item key="1">
            <!-- 使用 router-link 组件创建一个路由链接，通过 :to 属性绑定一个对象，指定链接的目标路由为名为 'settings' 的路由（具体该路由对应的页面和功能需要看路由配置文件中的定义），点击这个选项会跳转到账户设置相关的页面，在这个菜单子项内部还包含了一个 a-icon 组件用于展示设置图标以及一个 span 元素用于显示 "账户设置" 文本内容 -->
            <router-link :to="{ name: 'settings' }">
              <a-icon type="setting"/>
              <span>账户设置</span>
            </router-link>
          </a-menu-item>
          <!-- 使用 a-menu-divider 组件创建一个菜单分隔线，用于在菜单选项之间进行视觉上的分隔，使不同功能的选项分组更加清晰，这里将账户设置选项和退出登录选项进行了分隔 -->
          <a-menu-divider/>
          <!-- 再创建一个 a-menu-item 菜单子项组件，设置 key 属性为 "3"，同样用于唯一标识这个选项，用于展示退出登录相关的操作选项 -->
          <a-menu-item key="3">
            <!-- 使用普通的 <a> 标签创建一个链接（这里使用 "javascript:;" 作为 href 属性值，阻止默认的页面跳转行为，因为实际的退出登录操作是通过绑定的 @click 事件来处理），绑定 @click 事件为 handleLogout 方法，点击这个选项会调用 handleLogout 方法来执行退出登录相关的逻辑，在这个菜单子项内部同样包含了一个 a-icon 组件用于展示退出图标以及一个 span 元素用于显示 "退出登录" 文本内容 -->
            <a href="javascript:;" @click="handleLogout">
              <a-icon type="logout"/>
              <span>退出登录</span>
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
// 从 Vuex 库中导入 mapActions 和 mapGetters 两个辅助函数，mapActions 用于将 Vuex 中的 action 映射为组件的方法，方便在组件中直接调用这些 action 来触发异步操作（比如修改全局状态、向服务器发送请求等）；mapGetters 用于将 Vuex 中的 getters 映射为组件的计算属性，使得组件可以方便地获取 Vuex 中存储的全局数据状态（比如从 store 中获取用户信息等）。
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'UserMenu',
  methods: {
    // 使用扩展运算符将 Vuex 中的 Logout action 映射为组件的方法，这样在组件内部就可以直接通过 this.Logout() 来调用这个 action，从注释可知其功能大概率是清除 token 和 localStorage 中的相关信息，用于实现退出登录时清理用户认证相关数据的操作。
    ...mapActions(['Logout']),
    // 使用扩展运算符将 Vuex 中的 nickname 和 avatar 两个 getters 映射为组件的计算属性，组件内部可以像调用普通函数一样通过 this.nickname() 和 this.avatar() 来获取对应的全局数据，分别用于获取用户昵称和用户头像的相关信息，方便在模板中展示。
    ...mapGetters(['nickname', 'avatar']),
    handleLogout () {
      const that = this;
      // 使用 this.$confirm 方法（通常是 Ant Design Vue 库提供的确认框组件相关的方法）弹出一个确认框，用于提示用户是否真的要注销登录，显示的标题为 "提示"，内容为 "真的要注销登录吗?"，并根据用户在确认框上的操作（点击确定或取消按钮）执行不同的逻辑。
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗?',
        onOk () {
          // 当用户点击确认框的确定按钮时，调用 this.Logout({}) 方法（前面通过 mapActions 映射过来的退出登录相关的 action），这个方法返回一个 Promise 对象（通常用于处理异步操作，比如向服务器发送退出登录请求等），然后通过.then 方法在 Promise 成功 resolve 时执行后续逻辑，这里是调用 window.location.reload() 刷新页面，可能是为了让页面重新加载后展示未登录的状态或者更新相关界面显示；如果 Promise 被 reject（即出现错误情况），则通过.catch 方法捕获错误，并使用 this.$message.error 方法（Ant Design Vue 库提供的显示错误消息的组件相关方法）显示错误提示信息，包含标题为 "错误" 以及具体的错误描述（从 err.message 获取）。
          return that.Logout({}).then(() => {
            window.location.reload();
          }).catch(err => {
            that.$message.error({
              title: '错误',
              description: err.message
            });
          });
        },
        onCancel () {
          // 当用户点击确认框的取消按钮时，这里暂时没有添加具体的逻辑处理，通常情况下就是不执行任何与退出登录相关的操作，直接关闭确认框即可。
        }
      });
    }
  }
}
</script>
