WebProject/vue_project/src/components/indexNav.vue

<template>
  <el-affix :offset="0">
    <Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
      <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
        <div class="relative flex h-16 items-center justify-between">
          <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
            <!-- Mobile menu button-->
            <DisclosureButton
              class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
            >
              <span class="absolute -inset-0.5" />
              <span class="sr-only">Open main menu</span>
              <Bars3Icon
                v-if="!open"
                class="block h-6 w-6"
                aria-hidden="true"
              />
              <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
            </DisclosureButton>
          </div>
          <div
            class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
          >
            <div class="flex flex-shrink-0 items-center">
              <img
                class="h-8 w-auto"
                src="../assets/images/苹果.png"
                alt="Your Company"
              />
            </div>
            <div class="hidden sm:ml-6 sm:block">
              <div class="flex space-x-4">
                <router-link
                  to="/home"
                  v-for="item in navigation"
                  :key="item.name"
                  :class="[
                    item.current
                      ? 'bg-gray-900 text-white'
                      : 'text-gray-300 hover:bg-gray-700 hover:text-white',
                    'rounded-md px-3 py-2 text-sm font-medium',
                  ]"
                  :aria-current="item.current ? 'page' : undefined"
                  >{{ item.name }}</router-link
                >
              </div>
            </div>
          </div>
          <div
            class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
          >
            <button
              type="button"
              class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
            >
              <span class="absolute -inset-1.5" />
              <span class="sr-only">View notifications</span>
              <BellIcon class="h-6 w-6" aria-hidden="true" />
            </button>

            <!-- Profile dropdown -->
            <Menu as="div" class="relative ml-3">
              <div class="relative ml-3">
                <div>
                  <button
                    @click="showMenu = !showMenu"
                    class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none"
                  >
                    <span class="absolute -inset-1.5" />
                    <span class="sr-only">Open user menu</span>
                    <img
                      class="h-8 w-8 rounded-full"
                      src="../assets/images/商务职业男.png"
                      alt="User Avatar"
                    />
                  </button>

                  <transition name="fade-scale" appear>
                    <div
                      v-if="showMenu"
                      class="absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                    >
                      <!-- 在这里添加头像 -->
                      <img
                        class="h-12 w-12 rounded-full mx-auto mb-2"
                        src="../assets/images/商务职业男.png"
                        alt="User Avatar"
                      />

                      <!-- 用户名和修改按钮 -->
                      <div
                        class="dropdown-menu-item flex items-center justify-between px-4 py-2"
                      >
                        <div class="flex-1 text-center ml-2">
                          {{ username }}
                        </div>
                        <!-- 名字居中显示 -->
                        <button class="flex items-center justify-center ml-1">
                          <!-- 减少左边距 -->
                          <img
                            src="../assets/images/修改.png"
                            alt="Edit"
                            class="h-6 w-6 mr-2"
                          />
                        </button>
                      </div>

                      <!-- 添加的两个按钮 -->
                      <div class="dropdown-menu-item px-4 py-2">
                        <button
                          class="flex items-center justify-between w-full dropdown-button"
                        >
                          <!-- 左侧文本和图标 -->
                          <div class="flex items-center">
                            <span>电话号码:{{ phone }}</span>
                          </div>
                        </button>
                      </div>

                      <!-- 退出登录按钮 -->
                      <div class="dropdown-menu-item px-1 py-1 text-left">
                        <button class="btn-logout" @click="LogOut">
                          <span
                            class="iconify"
                            data-icon="mdi:logout"
                            data-inline="false"
                            >退出登录</span
                          >
                        </button>
                      </div>
                    </div>
                  </transition>
                </div>
              </div>
            </Menu>
          </div>
        </div>
      </div>

      <DisclosurePanel class="sm:hidden">
        <div class="space-y-1 px-2 pb-3 pt-2">
          <DisclosureButton
            v-for="item in navigation"
            :key="item.name"
            as="a"
            :href="item.href"
            :class="[
              item.current
                ? 'bg-gray-900 text-white'
                : 'text-gray-300 hover:bg-gray-700 hover:text-white',
              'block rounded-md px-3 py-2 text-base font-medium',
            ]"
            :aria-current="item.current ? 'page' : undefined"
            >{{ item.name }}</DisclosureButton
          >
        </div>
      </DisclosurePanel>
    </Disclosure>
  </el-affix>
</template>
<script>
export default {
  // ... 其他选项 ...
  data() {
    return {
      showMenu: false, // 假设这是控制下拉菜单显示与否的数据属性
      menuItems: [],
      // ... 其他数据属性 ...
    };
  },
};
</script>
<script setup>
import {
  Disclosure,
  DisclosureButton,
  DisclosurePanel,
  Menu,
  MenuButton,
  MenuItem,
  MenuItems,
} from "@headlessui/vue";
import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/vue/24/outline";
import { useUserInfoStore } from "@/stores/userInfo";
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import pinia from "../stores/index";
import { manLoginOut } from "../api/index";
import { ElMessage } from 'element-plus';
const userInfoStore = useUserInfoStore(pinia);
const router = useRouter();
// Initialization for ES Users
const username = ref("");
const phone = ref("");
const LogOut = () => {
  username.value = "";
  manLoginOut().then(
    (response)=>{
      userInfoStore.initUserInfo();
    }
  )
  router.push({ path: "/home" });
};

const navigation = [
  { name: "首页", current: false },
  { name: "Calendar", current: true },
];

onMounted(() => {
  userInfoStore.getInfo().then((response) => {
    username.value = userInfoStore.username;
    phone.value = userInfoStore.phone;
  });
});
</script>

<style scoped>
a {
  text-decoration: none;
}
.dropdown-menu {
  /* 其他样式 */
}

.dropdown-button {
  /* 您的按钮样式 */
  background-color: white; /* 默认背景色 */
  color: #403d3d; /* 默认文字颜色 */
  border: none;
  padding: 0.5em 1em; /* 根据需要调整 */
  transition: all 0.3s ease; /* 添加过渡效果 */
  cursor: pointer;
  /* 其他样式... */
}

/* 添加悬浮效果 */
.dropdown-button:hover {
  background-color: #f5f1f1; /* 悬浮时的背景色 */
  color: black; /* 悬浮时的文字颜色 */
  /* 如果有其他样式也想改变，可以在这里添加 */
}

.ml-1 {
  /* 修改图标 */
  /* 或者你想要的任何值 */
  margin-right: 70px;
}

.ml-2 {
  /* 用户名 */
  margin-left: 100px;
  font-size: 18px;
}

.mt-2 {
  /* 下拉菜单 */
  height: 330px;
}

.mb-2 {
  /* 头像 */
  width: 80px;
  height: 80px;
}

.btn-logout {
  padding: 0.5rem 1rem;
  background-color: #f44336;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  margin-top: 10px;
  margin-left: 110px;
}

.btn-logout:hover {
  background-color: #e53935;
  /* 悬停时的颜色 */
}
</style>