up

src/components/HeaderMenu.vue

@@ -1,35 +1,41 @@
 <script setup lang="ts">
 import { MenuOutlined } from '@vicons/material'
 import { Icon } from '@vicons/utils'
-import { useMessage } from 'naive-ui'
-import { ref, watch } from 'vue'
+import { NTag, useMessage } from 'naive-ui'
+import { storeToRefs } from 'pinia'
+import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { getAuthClient } from '@/api/auth_client'
 import { useAuthStore } from '@/stores/auth'
+import { useUIStore } from '@/stores/ui'
 
 const props = defineProps<{ active?: string }>()
 const authStore = useAuthStore()
 
 const router = useRouter()
-const client = getAuthClient()
+const uiStore = useUIStore()
 const message = useMessage()
 
-const permissions = ref<string[]>([])
+const { permissions, environment, isLoadingEnvironment } = storeToRefs(uiStore)
+const environmentLabel = computed(() => {
+  if (isLoadingEnvironment.value) return 'Среда: …'
+  if (environment.value === 'prod') return 'Сервер'
+  if (environment.value === 'venue') return 'Локальная сеть'
+  return 'Среда: ?'
+})
 
-async function getPermissions() {
-  permissions.value = []
-  if (!authStore.user) return
-  const token = authStore.getToken()
-  try {
-    const res = await client.GetPermissions({})
-    if (token === authStore.getToken()) permissions.value = res.permissions || []
-  } catch (err) {
-    message.error('Не удалось загрузить права доступа')
-    console.error('Failed to load permissions:', err)
-  }
-}
-watch(() => authStore.user, getPermissions, { immediate: true })
+watch(
+  () => authStore.user,
+  async () => {
+    try {
+      await uiStore.load()
+    } catch (err) {
+      message.error('Не удалось загрузить сведения сервера')
+      console.error('Failed to load server information:', err)
+    }
+  },
+  { immediate: true },
+)
 
 function hasPermission(permission: string): boolean {
   return permissions.value.includes(permission)
@@ -90,13 +96,7 @@ const openMenu = ref(false)
       >
         Игры
       </button>
-      <button
-        type="button"
-        class="menu-item-block"
-        @click="router.push('/screen')"
-      >
-        Экран
-      </button>
+      <button type="button" class="menu-item-block" @click="router.push('/screen')">Экран</button>
       <button
         type="button"
         class="menu-item-block"
@@ -144,6 +144,14 @@ const openMenu = ref(false)
     </div>
 
     <div class="right-group">
+      <NTag
+        size="small"
+        :type="environment === 'venue' ? 'warning' : 'default'"
+        :title="environment ? 'Среда подключённого сервера' : 'Среда сервера не определена'"
+        role="status"
+      >
+        {{ environmentLabel }}
+      </NTag>
       <button
         v-if="!authStore.isAuthenticated"
         type="button"
@@ -196,6 +204,13 @@ const openMenu = ref(false)
   opacity: 0.8;
 }
 
+.right-group {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 10px;
+}
+
 .right {
   margin-left: auto;
 }