157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref, inject } from "vue";
|
|
import NavbarItem from "./NavbarItem.vue";
|
|
import NavbarBuilding from "./NavbarBuilding.vue";
|
|
import useUserInfoStore from "@/stores/useUserInfoStore";
|
|
import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";
|
|
|
|
const user = ref("");
|
|
const { forgeLock, toggleForgeLock } = inject("app_toggle");
|
|
const store = useUserInfoStore();
|
|
onMounted(() => {
|
|
const name = store.user.user_name;
|
|
if (name) {
|
|
user.value = name;
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<header class="navbar bg-dark text-success py-2 w-full relative z-50">
|
|
<div class="navbar-start">
|
|
<div class="dropdown">
|
|
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h8m-8 6h16"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<ul
|
|
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
|
|
>
|
|
<NavbarItem />
|
|
</ul>
|
|
</div>
|
|
<div class="rounded-lg pl-14 text-2xl flex items-center text-stone-100">
|
|
<img src="/logo.png" alt="logo" class="w-12 me-2" />百家珍
|
|
</div>
|
|
<NavbarBuilding class="hidden" />
|
|
</div>
|
|
|
|
<div class="navbar-center hidden lg:flex">
|
|
<NavbarItem />
|
|
</div>
|
|
<div class="navbar-end mr-4">
|
|
<ul class="menu-box">
|
|
<li>
|
|
<button
|
|
class="drawer-button flex flex-col justify-center items-center btn-group"
|
|
@click="toggleForgeLock"
|
|
>
|
|
<font-awesome-icon
|
|
v-if="forgeLock"
|
|
:icon="['fas', 'lock']"
|
|
size="2x"
|
|
class="text-white menu-icon"
|
|
/>
|
|
<font-awesome-icon
|
|
v-else
|
|
:icon="['fas', 'lock-open']"
|
|
size="2x"
|
|
class="text-white menu-icon"
|
|
/>
|
|
<span class="text-white">
|
|
模型{{ forgeLock ? "鎖定" : "解鎖" }}</span
|
|
>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<AlarmDrawer />
|
|
</li>
|
|
<li>
|
|
<div class="dropdown dropdown-bottom dropdown-end">
|
|
<button
|
|
tabindex="0"
|
|
type="link"
|
|
class="flex flex-col justify-center items-center btn-group"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', 'user-circle']"
|
|
size="2x"
|
|
class="text-white menu-icon"
|
|
/>
|
|
<span class="text-white"> {{ user || "webUser" }}</span>
|
|
</button>
|
|
<ul
|
|
tabindex="0"
|
|
class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
|
|
>
|
|
<li class="text-white">
|
|
<a
|
|
href="/logout"
|
|
class="flex flex-col justify-center items-center"
|
|
>登出</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="css">
|
|
.sub-drawer {
|
|
@apply bg-dark bg-opacity-80 shadow-xl !important;
|
|
}
|
|
/**menu**/
|
|
.menu-box {
|
|
@apply flex justify-center;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.menu-box::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -12px;
|
|
bottom: 0;
|
|
left: 25px;
|
|
right: 25px;
|
|
margin: auto;
|
|
display: block;
|
|
width: calc(100% - 50px);
|
|
height: 2px;
|
|
background-color: #7cedc1;
|
|
z-index: -10;
|
|
}
|
|
|
|
.menu-box .btn-group {
|
|
background: #111;
|
|
padding: 0 5px;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.menu-icon {
|
|
width: 40px;
|
|
margin: auto;
|
|
}
|
|
|
|
.menu-box .btn-group span {
|
|
color: #fff;
|
|
display: block;
|
|
margin-top: 0px;
|
|
}
|
|
</style>
|