PWA модуль

Теперь проект может быть установлен как приложение на телефон

front_vue/src/views/TeamPage.vue

@@ -16,15 +16,17 @@
             class="team-card"
           >
             <div class="card-avatar">
-              <img :src="getFullUrl(user.avatar_url)" :alt="user.name">
+              <img v-if="user.avatar_url" :src="getFullUrl(user.avatar_url)" :alt="user.name || ''">
+              <span v-else class="avatar-placeholder">{{ (user.name || '?')[0] }}</span>
             </div>
             <div class="card-info">
-              <h3 class="card-name">{{ user.name }}</h3>
+              <h3 class="card-name">{{ user.name || 'Без имени' }}</h3>
               <div class="card-meta">
                 <span v-if="user.department" class="card-department">{{ user.department }}</span>
-                <span class="card-username">@{{ user.username }}</span>
+                <span v-if="user.username" class="card-username">@{{ user.username }}</span>
               </div>
               <a 
+                v-if="user.telegram"
                 :href="'https://t.me/' + user.telegram.replace('@', '')" 
                 target="_blank" 
                 class="card-telegram"
@@ -45,16 +47,18 @@
               class="mobile-card"
             >
               <div class="mobile-avatar">
-                <img :src="getFullUrl(user.avatar_url)" :alt="user.name">
+                <img v-if="user.avatar_url" :src="getFullUrl(user.avatar_url)" :alt="user.name || ''">
+                <span v-else class="avatar-placeholder">{{ (user.name || '?')[0] }}</span>
               </div>
               
               <div class="mobile-info">
-                <h2 class="mobile-name">{{ user.name }}</h2>
-                <span class="mobile-username">@{{ user.username }}</span>
+                <h2 class="mobile-name">{{ user.name || 'Без имени' }}</h2>
+                <span v-if="user.username" class="mobile-username">@{{ user.username }}</span>
                 <span v-if="user.department" class="mobile-department">{{ user.department }}</span>
               </div>
 
               <a 
+                v-if="user.telegram"
                 :href="'https://t.me/' + user.telegram.replace('@', '')" 
                 target="_blank" 
                 class="mobile-telegram"
@@ -78,7 +82,8 @@
           :class="{ active: currentUserIndex === index }"
           @click="scrollToUser(index)"
         >
-          <img :src="getFullUrl(user.avatar_url)" :alt="user.name">
+          <img v-if="user.avatar_url" :src="getFullUrl(user.avatar_url)" :alt="user.name || ''">
+          <span v-else class="avatar-placeholder-small">{{ (user.name || '?')[0] }}</span>
         </button>
       </div>
     </div>
@@ -86,13 +91,15 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUpdated } from 'vue'
+import { ref, watch, onUpdated } from 'vue'
+import { useRoute } from 'vue-router'
 import Sidebar from '../components/Sidebar.vue'
 import Header from '../components/Header.vue'
 import Loader from '../components/ui/Loader.vue'
 import { usersApi, getFullUrl } from '../api'
 import { useMobile } from '../composables/useMobile'
 
+const route = useRoute()
 const { isMobile } = useMobile()
 
 const users = ref([])
@@ -101,6 +108,7 @@ const mobileCardsRef = ref(null)
 const currentUserIndex = ref(0)
 
 const fetchUsers = async () => {
+  loading.value = true
   try {
     const data = await usersApi.getAll()
     if (data.success) {
@@ -137,10 +145,13 @@ const refreshIcons = () => {
   }
 }
 
-onMounted(() => {
-  fetchUsers()
-  refreshIcons()
-})
+// Загружаем при входе на страницу
+watch(() => route.path, async (path) => {
+  if (path === '/team') {
+    await fetchUsers()
+    refreshIcons()
+  }
+}, { immediate: true })
 
 onUpdated(refreshIcons)
 </script>
@@ -221,6 +232,19 @@ onUpdated(refreshIcons)
   object-fit: cover;
 }
 
+.avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.1);
+  text-transform: uppercase;
+}
+
 .card-info {
   display: flex;
   flex-direction: column;
@@ -366,6 +390,10 @@ onUpdated(refreshIcons)
   object-fit: cover;
 }
 
+.mobile-avatar .avatar-placeholder {
+  font-size: 64px;
+}
+
 .mobile-info {
   display: flex;
   flex-direction: column;
@@ -471,4 +499,16 @@ onUpdated(refreshIcons)
   transform: scale(1.15);
   box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
 }
+
+.avatar-placeholder-small {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+}
 </style>