The_evening_detective/evening_detective_frontend
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-20 22:49:45 +07:00
parent c314e4f329
commit db558c87d1
24 changed files with 1464 additions and 1362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeaderMenu.vue
+108 -98
View File
@@ -1,155 +1,165 @@
<script setup lang="ts">
const props = defineProps({
addLogin: {
type: Boolean,
required: false
},
addLogout: {
type: Boolean,
required: false
},
isFoundKey: {
type: Boolean,
required: false
},
active: {
type: String,
required: false
}
addLogin: {
type: Boolean,
required: false,
},
addLogout: {
type: Boolean,
required: false,
},
isFoundKey: {
type: Boolean,
required: false,
},
active: {
type: String,
required: false,
},
})
import { DoorOpen } from '@vicons/fa'
import { Key24Regular } from '@vicons/fluent'
import { DoorFrontFilled } from '@vicons/material'
import { Icon } from '@vicons/utils'
import { useMessage } from 'naive-ui';
import { useMessage } from 'naive-ui'
import { NIcon } from 'naive-ui'
import { ref } from 'vue';
import { ref } from 'vue'
import { h } from 'vue'
import { useRouter } from 'vue-router';
import { useRouter } from 'vue-router'
import { getAuthClient } from '@/api/auth_client';
import { useAuthStore } from '@/stores/auth';
import { getAuthClient } from '@/api/auth_client'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore();
const authStore = useAuthStore()
authStore.initFromStorage()
const router = useRouter()
const client = getAuthClient();
const client = getAuthClient()
const message = useMessage()
const permissions = ref<string[]>([]);
const permissions = ref<string[]>([])
async function getPermissions() {
permissions.value = []
const res = await client.GetPermissions({})
permissions.value = res.permissions!
permissions.value = []
const res = await client.GetPermissions({})
permissions.value = res.permissions!
}
getPermissions()
function hasPermission(permission: string): boolean {
return permissions.value.includes(permission)
return permissions.value.includes(permission)
}
const goToLogin = () => {
if (props.isFoundKey) {
router.push('/login')
return
}
message.create(
"Дверь закрыта, куда же подевался ключ?",
{
icon: () => h(NIcon, null, { default: () => h(Key24Regular) })
}
)
if (props.isFoundKey) {
router.push('/login')
return
}
message.create('Дверь закрыта, куда же подевался ключ?', {
icon: () => h(NIcon, null, { default: () => h(Key24Regular) }),
})
}
const goToLogout = () => {
authStore.logout()
router.push('/login')
authStore.logout()
router.push('/login')
}
</script>
<template>
<div class="menu-block">
<div class="left-group">
<div class="menu-item-block" :class="{ active: props.active == 'office' }" v-if="authStore.hasRole('user')"
@click="router.push('/office')">
Кабинет
</div>
<div class="menu-item-block" :class="{ active: props.active == 'games' }" v-if="hasPermission('games_page')"
@click="router.push('/games')">
Игры
</div>
<div class="menu-item-block" :class="{ active: props.active == 'scenarios' }"
v-if="hasPermission('scenarios_page')" @click="router.push('/scenarios')">
Мои сценарии
</div>
<div class="menu-item-block" :class="{ active: props.active == 'users' }" v-if="hasPermission('users_page')"
@click="router.push('/users')">
Пользователи
</div>
</div>
<div class="right-group">
<div v-if="props.addLogin" class="menu-item-block right" @click="goToLogin">
<Icon v-if="isFoundKey" class="door-icon">
<DoorOpen />
</Icon>
<Icon v-else class="door-icon">
<DoorFrontFilled />
</Icon>
Войти
</div>
<div v-if="props.addLogout" class="menu-item-block right" @click="goToLogout">
Выйти
</div>
</div>
<div class="menu-block">
<div class="left-group">
<div
class="menu-item-block"
:class="{ active: props.active == 'office' }"
v-if="authStore.hasRole('user')"
@click="router.push('/office')"
>
Кабинет
</div>
<div
class="menu-item-block"
:class="{ active: props.active == 'games' }"
v-if="hasPermission('games_page')"
@click="router.push('/games')"
>
Игры
</div>
<div
class="menu-item-block"
:class="{ active: props.active == 'scenarios' }"
v-if="hasPermission('scenarios_page')"
@click="router.push('/scenarios')"
>
Мои сценарии
</div>
<div
class="menu-item-block"
:class="{ active: props.active == 'users' }"
v-if="hasPermission('users_page')"
@click="router.push('/users')"
>
Пользователи
</div>
</div>
<div class="right-group">
<div v-if="props.addLogin" class="menu-item-block right" @click="goToLogin">
<Icon v-if="isFoundKey" class="door-icon">
<DoorOpen />
</Icon>
<Icon v-else class="door-icon">
<DoorFrontFilled />
</Icon>
Войти
</div>
<div v-if="props.addLogout" class="menu-item-block right" @click="goToLogout">Выйти</div>
</div>
</div>
</template>
<style scoped>
.menu-block {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
/* background-color: brown; */
/* background-color: brown; */
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-item-block {
display: inline-block;
margin-left: 10px;
cursor: pointer;
padding: 5px;
font-size: 1.1em;
display: inline-block;
margin-left: 10px;
cursor: pointer;
padding: 5px;
font-size: 1.1em;
}
.menu-item-block:hover {
color: #63e2b7;
opacity: 0.8;
color: #63e2b7;
opacity: 0.8;
}
.right {
margin-left: auto;
margin-left: auto;
}
.door-icon {
float: left;
width: 25px;
padding-top: 3px;
padding-right: 5px;
float: left;
width: 25px;
padding-top: 3px;
padding-right: 5px;
}
.active {
color: #63e2b7;
color: #63e2b7;
}
</style>