|
|
@@ -1,108 +1,280 @@
|
|
|
<template>
|
|
|
- <el-affix :offset="0">
|
|
|
+ <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">
|
|
|
- <a v-for="item in navigation" :key="item.name" :href="item.href"
|
|
|
- :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 }}</a>
|
|
|
- </div>
|
|
|
+ <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">
|
|
|
+ <a
|
|
|
+ v-for="item in navigation"
|
|
|
+ :key="item.name"
|
|
|
+ :href="item.href"
|
|
|
+ :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 }}</a
|
|
|
+ >
|
|
|
+ </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 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>
|
|
|
- <MenuButton
|
|
|
- class="relative flex rounded-full bg-gray-800 text-sm 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">Open user menu</span>
|
|
|
- <img class="h-8 w-8 rounded-full"
|
|
|
- src="../assets/images/商务职业男.png"
|
|
|
- alt="" />
|
|
|
- </MenuButton>
|
|
|
- </div>
|
|
|
- <transition enter-active-class="transition ease-out duration-100"
|
|
|
- enter-from-class="transform opacity-0 scale-95"
|
|
|
- enter-to-class="transform opacity-100 scale-100"
|
|
|
- leave-active-class="transition ease-in duration-75"
|
|
|
- leave-from-class="transform opacity-100 scale-100"
|
|
|
- leave-to-class="transform opacity-0 scale-95">
|
|
|
- <MenuItems
|
|
|
- class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
|
- <MenuItem v-slot="{ active }">
|
|
|
- <a href="#"
|
|
|
- :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Your
|
|
|
- Profile</a>
|
|
|
- </MenuItem>
|
|
|
- <MenuItem v-slot="{ active }">
|
|
|
- <a href="#"
|
|
|
- :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Settings</a>
|
|
|
- </MenuItem>
|
|
|
- <MenuItem v-slot="{ active }">
|
|
|
- <a href="#"
|
|
|
- :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Sign
|
|
|
- out</a>
|
|
|
- </MenuItem>
|
|
|
- </MenuItems>
|
|
|
- </transition>
|
|
|
- </Menu>
|
|
|
- </div>
|
|
|
- </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>
|
|
|
+ <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>
|
|
|
+ </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 {
|
|
|
+ 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";
|
|
|
+const userInfoStore = useUserInfoStore(pinia);
|
|
|
+const router = useRouter();
|
|
|
// Initialization for ES Users
|
|
|
-
|
|
|
+const username = ref("");
|
|
|
+const phone = ref("");
|
|
|
+const LogOut = () => {
|
|
|
+ username.value = "";
|
|
|
+ userInfoStore.initUserInfo();
|
|
|
+ router.push({ path: "/home" });
|
|
|
+};
|
|
|
|
|
|
const navigation = [
|
|
|
- { name: 'Dashboard', href: '#', current: false },
|
|
|
- { name: 'Team', href: '#', current: false },
|
|
|
- { name: 'Projects', href: '#', current: false },
|
|
|
- { name: 'Calendar', href: '#', current: true },
|
|
|
-]
|
|
|
+ { name: "Dashboard", href: "#", current: false },
|
|
|
+ { name: "Team", href: "#", current: false },
|
|
|
+ { name: "Projects", href: "#", current: false },
|
|
|
+ { name: "Calendar", href: "#", current: true },
|
|
|
+];
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ userInfoStore.getInfo().then(
|
|
|
+ (response) => {
|
|
|
+ username.value = userInfoStore.username;
|
|
|
+ phone.value = userInfoStore.phone;
|
|
|
+ }
|
|
|
+ );
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-a{
|
|
|
- text-decoration: none;
|
|
|
+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>
|
PrettyCat1
