Falknat/TaskBoard
1
0
Fork 0
Code Activity

PWA модуль

Browse Source 
Теперь проект может быть установлен как приложение на телефон
This commit is contained in:
Роман Суманеев
2026-01-16 16:12:34 +07:00
parent 25663a7aa4
commit c46fd3952e
16 changed files with 5388 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front_vue/index.html
View File

@@ -3,6 +3,17 @@
<head> <head>
<meta charset="UTF-8"> <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"> <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"> <link rel="icon" type="image/x-icon" href="/favicon.ico">
<title>TaskBoard</title> <title>TaskBoard</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">

5166
front_vue/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
front_vue/package.json
View File

@@ -15,5 +15,8 @@
"vite": "^7.3.1", "vite": "^7.3.1",
"vue": "^3.5.26", "vue": "^3.5.26",
"vue-router": "^4.6.4" "vue-router": "^4.6.4"
},
"devDependencies": {
"vite-plugin-pwa": "^1.2.0"
} }
} }

BIN
front_vue/public/icon_phone/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

BIN
front_vue/public/icon_phone/pwa-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
front_vue/public/icon_phone/pwa-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 684 KiB

57
front_vue/src/App.vue
View File

@@ -1,5 +1,7 @@
<template> <template>
<div class="pwa-safe-wrapper">
<router-view /> <router-view />
</div>
</template> </template>
<script setup> <script setup>
@@ -63,33 +65,70 @@ body {
background: var(--bg-gradient); background: var(--bg-gradient);
} }
/* Мобильный режим — фиксируем body */ /* Мобильный режим */
body.is-mobile { body.is-mobile {
position: fixed;
width: 100%;
height: 100%;
height: 100dvh; /* Динамическая высота для iOS */
overflow: hidden; overflow: hidden;
touch-action: none; touch-action: none;
} }
body.is-mobile #app { body.is-mobile #app {
height: 100%;
height: 100dvh; height: 100dvh;
overflow: hidden; overflow: hidden;
} }
/* Safe area для iPhone (notch и home indicator) */ /* Safe area для iPhone (notch и home indicator) */
:root { :root {
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 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 { body.panel-open {
overflow: hidden !important; overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
touch-action: none !important; touch-action: none !important;
} }
</style> </style>

16
front_vue/src/api.js
View File

@@ -10,10 +10,22 @@ export const getFullUrl = (url) => {
return API_BASE + url return API_BASE + url
} }
// Базовая функция запроса // Базовая функция запроса с глобальной проверкой сессии
const request = async (endpoint, options = {}) => { const request = async (endpoint, options = {}) => {
const res = await fetch(`${API_BASE}${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 ==================== // ==================== AUTH ====================

11
front_vue/src/components/Board.vue
View File

@@ -394,6 +394,8 @@ defineExpose({ saveTask, deleteTask, archiveTask })
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
/* Отступ снизу для footer (70px) + навигации (64px) + safe-area */
padding-bottom: calc(70px + 64px + var(--safe-area-bottom, 0px));
} }
.board.mobile .columns { .board.mobile .columns {
@@ -417,16 +419,19 @@ defineExpose({ saveTask, deleteTask, archiveTask })
display: none; display: none;
} }
/* Мобильный футер с индикатором колонок */ /* Мобильный футер с индикатором колонок - фиксированный над навигацией */
.mobile-column-footer { .mobile-column-footer {
position: fixed;
left: 0;
right: 0;
bottom: calc(64px + var(--safe-area-bottom, 0px));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 12px 16px; padding: 12px 16px;
background: var(--bg-body); background: var(--bg-body);
flex-shrink: 0; z-index: 100;
min-height: 60px;
} }
.current-column-title { .current-column-title {

2
front_vue/src/components/PageLayout.vue
View File

@@ -157,7 +157,7 @@ const { isMobile } = useMobile()
margin-left: 0; margin-left: 0;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
padding-bottom: calc(64px + var(--safe-area-bottom, 0px)); /* Убрали padding-bottom - каждая страница сама управляет отступом для навигации */
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

29
front_vue/src/components/ui/SlidePanel.vue
View File

@@ -151,11 +151,23 @@ const unlockBodyScroll = () => {
document.body.classList.remove('panel-open') document.body.classList.remove('panel-open')
} }
// Принудительный reflow для iOS PWA - исправляет баг с safe-area при первом рендере
const forceReflow = () => {
if (panelRef.value) {
// Читаем offsetHeight чтобы вызвать reflow
void panelRef.value.offsetHeight
}
}
// Восстановление ширины при открытии (из localStorage или дефолтная) // Восстановление ширины при открытии (из localStorage или дефолтная)
watch(() => props.show, (newVal) => { watch(() => props.show, (newVal) => {
if (newVal) { if (newVal) {
panelWidth.value = getSavedWidth() panelWidth.value = getSavedWidth()
lockBodyScroll() lockBodyScroll()
// Два requestAnimationFrame для гарантированного reflow после рендера
requestAnimationFrame(() => {
requestAnimationFrame(forceReflow)
})
} else { } else {
unlockBodyScroll() unlockBodyScroll()
} }
@@ -326,14 +338,25 @@ onUnmounted(() => {
transform: scale(0.98); transform: scale(0.98);
} }
/* На мобильных убираем transform из анимации - он ломает layout в iOS PWA */
.panel-enter-from .panel.mobile,
.panel-leave-to .panel.mobile {
transform: none;
}
/* ========== MOBILE: Fullscreen ========== */ /* ========== MOBILE: Fullscreen ========== */
/* height: 100% вместо 100dvh - потому что wrapper уже учитывает safe-area */
.panel.mobile { .panel.mobile {
width: 100% !important; width: 100% !important;
max-width: 100%; max-width: 100%;
height: 100%; /* Занимаем всю высоту wrapper, не viewport */
border-radius: 0; border-radius: 0;
/* Блокируем горизонтальные свайпы, чтобы не срабатывала навигация браузера */
touch-action: pan-y pinch-zoom; touch-action: pan-y pinch-zoom;
overscroll-behavior: contain; overscroll-behavior: contain;
/* Градиент как на основной странице */
background: var(--bg-gradient);
background-size: 100vw 100vh;
background-position: 0 calc(-1 * var(--safe-area-top));
} }
.panel.mobile .resize-handle { .panel.mobile .resize-handle {
@@ -346,15 +369,13 @@ onUnmounted(() => {
.panel.mobile .panel-body { .panel.mobile .panel-body {
padding: 16px; padding: 16px;
padding-bottom: calc(16px + var(--safe-area-bottom, 0px));
min-height: 0; min-height: 0;
gap: 0; /* Убираем gap — он создаёт пустое место */ gap: 0;
overflow-y: auto; overflow-y: auto;
} }
.panel.mobile .panel-footer { .panel.mobile .panel-footer {
padding: 16px; padding: 16px;
padding-bottom: calc(16px + var(--safe-area-bottom, 0px));
} }
.panel.mobile .header-content :deep(h2) { .panel.mobile .header-content :deep(h2) {

4
front_vue/src/main.js
View File

@@ -3,10 +3,14 @@ import { createPinia } from 'pinia'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import { serverSettings } from './api' import { serverSettings } from './api'
import { registerSW } from 'virtual:pwa-register'
// Инициализация серверных настроек (timezone и т.д.) // Инициализация серверных настроек (timezone и т.д.)
serverSettings.init() serverSettings.init()
// Регистрация Service Worker для PWA
registerSW({ immediate: true })
const app = createApp(App) const app = createApp(App)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)

13
front_vue/src/router.js
View File

@@ -8,6 +8,7 @@ import { authApi } from './api'
// Кэш авторизации (чтобы не делать запрос при каждой навигации) // Кэш авторизации (чтобы не делать запрос при каждой навигации)
let authCache = { let authCache = {
isAuthenticated: null, // null = не проверяли, true/false = результат isAuthenticated: null, // null = не проверяли, true/false = результат
user: null, // Данные пользователя
lastCheck: 0 lastCheck: 0
} }
@@ -26,6 +27,7 @@ const checkAuth = async (forceCheck = false) => {
try { try {
const data = await authApi.check() const data = await authApi.check()
authCache.isAuthenticated = data.success === true authCache.isAuthenticated = data.success === true
authCache.user = data.user || null
authCache.lastCheck = now authCache.lastCheck = now
return authCache.isAuthenticated return authCache.isAuthenticated
} catch { } catch {
@@ -39,14 +41,19 @@ const checkAuth = async (forceCheck = false) => {
// Сброс кэша (вызывать при logout) // Сброс кэша (вызывать при logout)
export const clearAuthCache = () => { export const clearAuthCache = () => {
authCache = { isAuthenticated: null, lastCheck: 0 } authCache = { isAuthenticated: null, user: null, lastCheck: 0 }
} }
// Глобальный доступ для api.js (избегаем циклической зависимости)
window.__clearAuthCache = clearAuthCache
// Установка кэша (вызывать при успешном login) // Установка кэша (вызывать при успешном login)
export const setAuthCache = (isAuth) => { export const setAuthCache = (isAuth, user = null) => {
authCache = { isAuthenticated: isAuth, lastCheck: Date.now() } authCache = { isAuthenticated: isAuth, user, lastCheck: Date.now() }
} }
// Получить закэшированного пользователя
export const getCachedUser = () => authCache.user
const routes = [ const routes = [
{ {
path: '/', path: '/',

15
front_vue/src/stores/projects.js
View File

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

62
front_vue/src/views/TeamPage.vue
View File

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

45
front_vue/vite.config.js
View File

@@ -1,8 +1,51 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({ 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: { server: {
host: '0.0.0.0', host: '0.0.0.0',
port: 5173 port: 5173