PWA модуль

Теперь проект может быть установлен как приложение на телефон
2026-01-16 16:12:34 +07:00
parent 25663a7aa4
commit c46fd3952e
16 changed files with 5388 additions and 52 deletions
--- a/front_vue/index.html
+++ b/front_vue/index.html
@@ -3,6 +3,17 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  
+  <!-- PWA -->
+  <meta name="theme-color" content="#111113">
+  <meta name="description" content="Task management application">
+  
+  <!-- iOS PWA -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="TaskBoard">
+  <link rel="apple-touch-icon" href="/icon_phone/apple-touch-icon.png">
+  
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <title>TaskBoard</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
--- a/front_vue/package-lock.json
+++ b/front_vue/package-lock.json
--- a/front_vue/package.json
+++ b/front_vue/package.json
@@ -15,5 +15,8 @@
    "vite": "^7.3.1",
    "vue": "^3.5.26",
    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "vite-plugin-pwa": "^1.2.0"
  }
 }
--- a/front_vue/public/icon_phone/apple-touch-icon.png
+++ b/front_vue/public/icon_phone/apple-touch-icon.png
--- a/front_vue/public/icon_phone/pwa-192x192.png
+++ b/front_vue/public/icon_phone/pwa-192x192.png
--- a/front_vue/public/icon_phone/pwa-512x512.png
+++ b/front_vue/public/icon_phone/pwa-512x512.png
--- a/front_vue/src/App.vue
+++ b/front_vue/src/App.vue
@@ -1,5 +1,7 @@
 <template>
+  <div class="pwa-safe-wrapper">
    <router-view />
+  </div>
 </template>

 <script setup>
@@ -63,33 +65,70 @@ body {
  background: var(--bg-gradient);
 }

-/* Мобильный режим — фиксируем body */
+/* Мобильный режим */
 body.is-mobile {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  height: 100dvh; /* Динамическая высота для iOS */
  overflow: hidden;
  touch-action: none;
 }

 body.is-mobile #app {
-  height: 100%;
  height: 100dvh;
  overflow: hidden;
 }

 /* Safe area для iPhone (notch и home indicator) */
 :root {
+  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
 }

+/* ========== PWA Safe Area Wrapper ========== */
+/* Обёртка для iOS PWA - решает проблему safe area глобально */
+.pwa-safe-wrapper {
+  min-height: 100vh;
+  background: var(--bg-gradient);
+}
+
+/* На мобильных: wrapper становится containing block для всех fixed элементов */
+body.is-mobile .pwa-safe-wrapper {
+  position: fixed;
+  top: var(--safe-area-top);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  min-height: auto;
+  height: calc(100dvh - var(--safe-area-top));
+  overflow: hidden;
+  /* transform создаёт containing block - fixed элементы внутри 
+     теперь позиционируются относительно wrapper, а не viewport */
+  transform: translateZ(0);
+  /* Смещаем градиент вверх чтобы он продолжал ::before без шва */
+  background-size: 100vw 100vh;
+  background-position: 0 calc(-1 * var(--safe-area-top));
+}
+
+/* Полоска с градиентом под статус-баром iPhone */
+@supports (padding-top: env(safe-area-inset-top)) {
+  body.is-mobile::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--safe-area-top);
+    /* Тот же градиент что и на странице, но растянутый на весь viewport */
+    background: var(--bg-gradient);
+    background-size: 100vw 100vh;
+    background-position: top center;
+    z-index: 99999;
+    pointer-events: none;
+  }
+}
+
 /* Блокировка скролла когда панель открыта */
+/* Убрали position: fixed - он конфликтует с pwa-safe-wrapper */
 body.panel-open {
  overflow: hidden !important;
-  position: fixed !important;
-  width: 100% !important;
-  height: 100% !important;
  touch-action: none !important;
 }
 </style>
--- a/front_vue/src/api.js
+++ b/front_vue/src/api.js
@@ -10,10 +10,22 @@ export const getFullUrl = (url) => {
  return API_BASE + url
 }

-// Базовая функция запроса
+// Базовая функция запроса с глобальной проверкой сессии
 const request = async (endpoint, options = {}) => {
  const res = await fetch(`${API_BASE}${endpoint}`, options)
-  return res.json()
+  const data = await res.json()
+  
+  // Глобальная проверка: если сессия истекла — редирект на логин
+  if (data.success === false && data.errors?.session) {
+    // Очищаем кэш авторизации (через window чтобы избежать циклической зависимости)
+    if (window.__clearAuthCache) window.__clearAuthCache()
+    // Редирект на логин (если ещё не там)
+    if (window.location.pathname !== '/login') {
+      window.location.href = '/login'
+    }
+  }
+  
+  return data
 }

 // ==================== AUTH ====================
--- a/front_vue/src/components/Board.vue
+++ b/front_vue/src/components/Board.vue
@@ -394,6 +394,8 @@ defineExpose({ saveTask, deleteTask, archiveTask })
  display: flex;
  flex-direction: column;
  overflow: hidden;
+  /* Отступ снизу для footer (70px) + навигации (64px) + safe-area */
+  padding-bottom: calc(70px + 64px + var(--safe-area-bottom, 0px));
 }

 .board.mobile .columns {
@@ -417,16 +419,19 @@ defineExpose({ saveTask, deleteTask, archiveTask })
  display: none;
 }

-/* Мобильный футер с индикатором колонок */
+/* Мобильный футер с индикатором колонок - фиксированный над навигацией */
 .mobile-column-footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: calc(64px + var(--safe-area-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-body);
-  flex-shrink: 0;
-  min-height: 60px;
+  z-index: 100;
 }

 .current-column-title {
--- a/front_vue/src/components/PageLayout.vue
+++ b/front_vue/src/components/PageLayout.vue
@@ -157,7 +157,7 @@ const { isMobile } = useMobile()
  margin-left: 0;
  flex: 1;
  min-height: 0;
-  padding-bottom: calc(64px + var(--safe-area-bottom, 0px));
+  /* Убрали padding-bottom - каждая страница сама управляет отступом для навигации */
  overflow: hidden;
  display: flex;
  flex-direction: column;
--- a/front_vue/src/components/ui/SlidePanel.vue
+++ b/front_vue/src/components/ui/SlidePanel.vue
@@ -151,11 +151,23 @@ const unlockBodyScroll = () => {
  document.body.classList.remove('panel-open')
 }

+// Принудительный reflow для iOS PWA - исправляет баг с safe-area при первом рендере
+const forceReflow = () => {
+  if (panelRef.value) {
+    // Читаем offsetHeight чтобы вызвать reflow
+    void panelRef.value.offsetHeight
+  }
+}
+
 // Восстановление ширины при открытии (из localStorage или дефолтная)
 watch(() => props.show, (newVal) => {
  if (newVal) {
    panelWidth.value = getSavedWidth()
    lockBodyScroll()
+    // Два requestAnimationFrame для гарантированного reflow после рендера
+    requestAnimationFrame(() => {
+      requestAnimationFrame(forceReflow)
+    })
  } else {
    unlockBodyScroll()
  }
@@ -326,14 +338,25 @@ onUnmounted(() => {
  transform: scale(0.98);
 }

+/* На мобильных убираем transform из анимации - он ломает layout в iOS PWA */
+.panel-enter-from .panel.mobile,
+.panel-leave-to .panel.mobile {
+  transform: none;
+}
+
 /* ========== MOBILE: Fullscreen ========== */
+/* height: 100% вместо 100dvh - потому что wrapper уже учитывает safe-area */
 .panel.mobile {
  width: 100% !important;
  max-width: 100%;
+  height: 100%; /* Занимаем всю высоту wrapper, не viewport */
  border-radius: 0;
-  /* Блокируем горизонтальные свайпы, чтобы не срабатывала навигация браузера */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
+  /* Градиент как на основной странице */
+  background: var(--bg-gradient);
+  background-size: 100vw 100vh;
+  background-position: 0 calc(-1 * var(--safe-area-top));
 }

 .panel.mobile .resize-handle {
@@ -346,15 +369,13 @@ onUnmounted(() => {

 .panel.mobile .panel-body {
  padding: 16px;
-  padding-bottom: calc(16px + var(--safe-area-bottom, 0px));
  min-height: 0;
-  gap: 0; /* Убираем gap — он создаёт пустое место */
+  gap: 0;
  overflow-y: auto;
 }

 .panel.mobile .panel-footer {
  padding: 16px;
-  padding-bottom: calc(16px + var(--safe-area-bottom, 0px));
 }

 .panel.mobile .header-content :deep(h2) {
--- a/front_vue/src/main.js
+++ b/front_vue/src/main.js
@@ -3,10 +3,14 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import { serverSettings } from './api'
+import { registerSW } from 'virtual:pwa-register'

 // Инициализация серверных настроек (timezone и т.д.)
 serverSettings.init()

+// Регистрация Service Worker для PWA
+registerSW({ immediate: true })
+
 const app = createApp(App)
 app.use(createPinia())
 app.use(router)
--- a/front_vue/src/router.js
+++ b/front_vue/src/router.js
@@ -8,6 +8,7 @@ import { authApi } from './api'
 // Кэш авторизации (чтобы не делать запрос при каждой навигации)
 let authCache = {
  isAuthenticated: null,  // null = не проверяли, true/false = результат
+  user: null,             // Данные пользователя
  lastCheck: 0
 }

@@ -26,6 +27,7 @@ const checkAuth = async (forceCheck = false) => {
  try {
    const data = await authApi.check()
    authCache.isAuthenticated = data.success === true
+    authCache.user = data.user || null
    authCache.lastCheck = now
    return authCache.isAuthenticated
  } catch {
@@ -39,14 +41,19 @@ const checkAuth = async (forceCheck = false) => {

 // Сброс кэша (вызывать при logout)
 export const clearAuthCache = () => {
-  authCache = { isAuthenticated: null, lastCheck: 0 }
+  authCache = { isAuthenticated: null, user: null, lastCheck: 0 }
 }
+// Глобальный доступ для api.js (избегаем циклической зависимости)
+window.__clearAuthCache = clearAuthCache

 // Установка кэша (вызывать при успешном login)
-export const setAuthCache = (isAuth) => {
-  authCache = { isAuthenticated: isAuth, lastCheck: Date.now() }
+export const setAuthCache = (isAuth, user = null) => {
+  authCache = { isAuthenticated: isAuth, user, lastCheck: Date.now() }
 }

+// Получить закэшированного пользователя
+export const getCachedUser = () => authCache.user
+
 const routes = [
  {
    path: '/',
--- a/front_vue/src/stores/projects.js
+++ b/front_vue/src/stores/projects.js
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import { projectsApi, usersApi, authApi, cardsApi } from '../api'
+import { projectsApi, usersApi, cardsApi } from '../api'
+import { getCachedUser } from '../router'

 export const useProjectsStore = defineStore('projects', () => {
  // ==================== СОСТОЯНИЕ ====================
@@ -94,12 +95,14 @@ export const useProjectsStore = defineStore('projects', () => {
      const usersData = await usersApi.getAll()
      if (usersData.success) users.value = usersData.data
      
-      // Загружаем текущего пользователя
-      const authData = await authApi.check()
-      if (authData.success && authData.user) {
+      // Получаем текущего пользователя из кэша роутера (без повторного запроса)
+      if (!currentUser.value) {
+        const cachedUser = getCachedUser()
+        if (cachedUser) {
          // Находим полные данные пользователя (с id) из списка users
-        const fullUser = users.value.find(u => u.username === authData.user.username)
-        currentUser.value = fullUser || authData.user
+          const fullUser = users.value.find(u => u.username === cachedUser.username)
+          currentUser.value = fullUser || cachedUser
+        }
      }
      
      initialized.value = true
--- a/front_vue/src/views/TeamPage.vue
+++ b/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()
+// Загружаем при входе на страницу
+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>
--- a/front_vue/vite.config.js
+++ b/front_vue/vite.config.js
@@ -1,8 +1,51 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'

 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      // filename в корне - Android требует SW в scope приложения
+      includeAssets: ['favicon.ico', 'icon_phone/apple-touch-icon.png'],
+      manifest: {
+        id: '/',
+        name: 'TaskBoard',
+        short_name: 'TaskBoard',
+        description: 'Task management application',
+        theme_color: '#111113',
+        background_color: '#111113',
+        display: 'standalone',
+        orientation: 'portrait',
+        scope: '/',
+        start_url: '/',
+        icons: [
+          {
+            src: 'icon_phone/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: 'icon_phone/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          },
+          {
+            src: 'icon_phone/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable'
+          }
+        ]
+      },
+      workbox: {
+        // Полностью отключаем кеширование - как в браузере
+        globPatterns: [],
+        runtimeCaching: []
+      }
+    })
+  ],
  server: {
    host: '0.0.0.0',
    port: 5173