116 lines
4.4 KiB
Vue
116 lines
4.4 KiB
Vue
<script setup>
|
||
import AppLayout from "../../Layouts/AppLayout.vue"
|
||
import { useAuthStore } from "../../Stores/auth.js"
|
||
import { NEl, NFlex, NText, NTag, NAvatar } from 'naive-ui'
|
||
import ActionTile from "../../Components/ActionTile.vue"
|
||
import { TbUsers, TbChartBar, TbLayoutDashboard } from "vue-icons-plus/tb"
|
||
import { Link } from "@inertiajs/vue3"
|
||
import { computed } from "vue"
|
||
import { useThemeVars } from "naive-ui"
|
||
|
||
const authStore = useAuthStore()
|
||
const themeVars = useThemeVars()
|
||
|
||
const initials = computed(() => {
|
||
const parts = (authStore.user?.name ?? '').trim().split(/\s+/)
|
||
return parts.slice(0, 2).map(p => p[0]?.toUpperCase() ?? '').join('')
|
||
})
|
||
|
||
const cardColor = computed(() => themeVars.value.cardColor)
|
||
const dividerColor = computed(() => themeVars.value.dividerColor)
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<div class="flex flex-col justify-center items-center" style="min-height: calc(100vh - 48px);">
|
||
<NFlex vertical :size="10" class="max-w-xl w-full" style="padding: 0 16px 24px;">
|
||
|
||
<!-- Шапка -->
|
||
<NEl class="panel-card rounded-2xl" style="padding: 18px 22px;">
|
||
<NFlex align="center" :size="14" :wrap="false">
|
||
<NEl
|
||
style="
|
||
width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: color-mix(in srgb, var(--primary-color) 18%, transparent);
|
||
"
|
||
>
|
||
<NTag
|
||
type="default"
|
||
:bordered="false"
|
||
style="background: transparent; padding: 0;"
|
||
>
|
||
<NAvatar
|
||
round :size="40"
|
||
style="
|
||
background: color-mix(in srgb, var(--primary-color) 22%, transparent);
|
||
color: var(--primary-color);
|
||
font-size: 15px; font-weight: 700;
|
||
"
|
||
>{{ initials }}</NAvatar>
|
||
</NTag>
|
||
</NEl>
|
||
|
||
<div style="min-width: 0;">
|
||
<NText style="font-size: 15px; font-weight: 700; display: block; line-height: 1.2;">
|
||
Панель администратора
|
||
</NText>
|
||
<NText depth="3" style="font-size: 12px; display: block; margin-top: 4px;">
|
||
{{ authStore.user?.name }}
|
||
</NText>
|
||
</div>
|
||
</NFlex>
|
||
</NEl>
|
||
|
||
<!-- Разделы -->
|
||
<div class="bento-grid">
|
||
<ActionTile
|
||
:icon="TbUsers"
|
||
title="Учётные записи"
|
||
description="Создание и редактирование пользователей"
|
||
:tag="Link"
|
||
href="/admin/users"
|
||
/>
|
||
<ActionTile
|
||
:icon="TbChartBar"
|
||
title="Метрики"
|
||
description="Группы и показатели измерений"
|
||
:tag="Link"
|
||
href="/admin/metrics"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Назад -->
|
||
<component :is="Link" href="/" class="exit-link">
|
||
<NFlex align="center" justify="center" :size="6">
|
||
<NText style="font-size: 13px;">← На главную</NText>
|
||
</NFlex>
|
||
</component>
|
||
|
||
</NFlex>
|
||
</div>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.panel-card {
|
||
background: v-bind(cardColor);
|
||
border: 1px solid v-bind(dividerColor);
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.exit-link {
|
||
text-decoration: none;
|
||
opacity: 0.45;
|
||
transition: opacity .15s;
|
||
}
|
||
.exit-link:hover {
|
||
opacity: 0.85;
|
||
}
|
||
</style>
|