<!-- 用户认证组件 -->
<div
  th:fragment="user-auth"
  class="user-auth"
  x-data="userAuth()"
  @click.outside="showMenu = false"
  th:if="${theme.config.header.userAuth}"
>
  <div x-show="!ready" class="user-entry loading">
    <div class="avatar-wrapper">
      <span class="icon-[ph--spinner] animate-spin"></span>
    </div>
    <div class="user-info">
      <span class="user-name">加载中...</span>
    </div>
  </div>

  <a x-show="ready && !currentUser" x-cloak href="/login" class="user-entry">
    <div class="avatar-wrapper">
      <span class="icon-[ph--user-circle-bold] default-avatar-icon"></span>
    </div>
    <div class="user-info">
      <span class="user-name">登录</span>
      <span class="user-desc">点击登录账号</span>
    </div>
  </a>

  <div x-show="ready && currentUser" x-cloak class="user-entry" @click="handleClick()">
    <div class="avatar-wrapper">
      <img :src="currentUser?.avatar" :alt="currentUser?.name" class="user-avatar" />
    </div>
    <div class="user-info">
      <span class="user-name" x-text="currentUser?.name"></span>
      <span class="user-desc" x-text="currentUser?.roleDisplayName || '用户角色'"></span>
    </div>
    <span class="icon-[ph--caret-down-bold] menu-arrow" :class="{ 'rotate': showMenu }"></span>
  </div>

  <div x-show="ready && showMenu" x-cloak x-transition class="user-menu">
    <a href="/uc" class="user-menu-item" data-no-swup>
      <span class="icon-[ph--user-bold]"></span>
      <span>个人中心</span>
    </a>
    <a sec:authorize="hasRole('super-role')" href="/console" class="user-menu-item" data-no-swup>
      <span class="icon-[ph--gear-six-bold]"></span>
      <span>管理中心</span>
    </a>
    <a href="/logout" class="user-menu-item logout">
      <span class="icon-[ph--sign-out-bold]"></span>
      <span>退出登录</span>
    </a>
  </div>
</div>
