Исправления фронта
Множество оптимизаций по фронту
This commit is contained in:
@@ -1,34 +1,13 @@
|
||||
<template>
|
||||
<div class="app" :class="{ mobile: isMobile }">
|
||||
<!-- Боковая панель навигации -->
|
||||
<Sidebar />
|
||||
|
||||
<!-- Основной контент -->
|
||||
<div class="main-wrapper">
|
||||
<PageLayout>
|
||||
<!-- Шапка с заголовком, фильтрами и статистикой -->
|
||||
<Header title="Доска задач">
|
||||
<!-- Десктоп: фильтры в одну строку -->
|
||||
<template #filters>
|
||||
<div class="filters">
|
||||
<ProjectSelector @change="onProjectChange" />
|
||||
<div class="filter-divider"></div>
|
||||
<button
|
||||
class="filter-tag"
|
||||
:class="{ active: activeDepartment === null }"
|
||||
@click="activeDepartment = null"
|
||||
>
|
||||
Все
|
||||
</button>
|
||||
<button
|
||||
v-for="dept in store.departments"
|
||||
:key="dept.id"
|
||||
class="filter-tag"
|
||||
:class="{ active: activeDepartment === dept.id }"
|
||||
@click="activeDepartment = activeDepartment === dept.id ? null : dept.id"
|
||||
>
|
||||
{{ dept.name_departments }}
|
||||
</button>
|
||||
</div>
|
||||
<DepartmentTags
|
||||
v-model="activeDepartment"
|
||||
@project-change="onProjectChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- Мобильный: Проект + Отделы -->
|
||||
@@ -66,66 +45,56 @@
|
||||
</Header>
|
||||
|
||||
<!-- Доска с колонками и карточками -->
|
||||
<main class="main">
|
||||
<main class="main" :class="{ mobile: isMobile }">
|
||||
<Loader v-if="loading" />
|
||||
<Board
|
||||
v-else
|
||||
ref="boardRef"
|
||||
:active-department="activeDepartment"
|
||||
:departments="store.departments"
|
||||
:labels="store.labels"
|
||||
:columns="store.columns"
|
||||
:cards="cards"
|
||||
:done-column-id="store.doneColumnId"
|
||||
@stats-updated="stats = $event"
|
||||
@open-task="openTaskPanel"
|
||||
@create-task="openNewTaskPanel"
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Панель редактирования/создания задачи -->
|
||||
<TaskPanel
|
||||
:show="panelOpen"
|
||||
:card="editingCard"
|
||||
:column-id="editingColumnId"
|
||||
:done-column-id="store.doneColumnId"
|
||||
:departments="store.departments"
|
||||
:labels="store.labels"
|
||||
:users="store.users"
|
||||
:current-user-id="store.currentUserId"
|
||||
:is-project-admin="store.isProjectAdmin"
|
||||
:on-save="handleSaveTask"
|
||||
@close="closePanel"
|
||||
@delete="handleDeleteTask"
|
||||
@archive="handleArchiveTask"
|
||||
/>
|
||||
</div>
|
||||
<!-- Модальные окна -->
|
||||
<template #modals>
|
||||
<TaskPanel
|
||||
:show="panelOpen"
|
||||
:card="editingCard"
|
||||
:column-id="editingColumnId"
|
||||
:on-save="handleSaveTask"
|
||||
:on-archive="handleArchiveTask"
|
||||
@close="closePanel"
|
||||
@delete="handleDeleteTask"
|
||||
/>
|
||||
</template>
|
||||
</PageLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||||
import Sidebar from '../components/Sidebar.vue'
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import PageLayout from '../components/PageLayout.vue'
|
||||
import Header from '../components/Header.vue'
|
||||
import Board from '../components/Board.vue'
|
||||
import TaskPanel from '../components/TaskPanel'
|
||||
import DepartmentTags from '../components/DepartmentTags.vue'
|
||||
import ProjectSelector from '../components/ProjectSelector.vue'
|
||||
import MobileSelect from '../components/ui/MobileSelect.vue'
|
||||
import Loader from '../components/ui/Loader.vue'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
import { cardsApi } from '../api'
|
||||
import { useMobile } from '../composables/useMobile'
|
||||
import { useDepartmentFilter } from '../composables/useDepartmentFilter'
|
||||
|
||||
const { isMobile } = useMobile()
|
||||
|
||||
// ==================== STORE ====================
|
||||
const store = useProjectsStore()
|
||||
|
||||
// ==================== МОБИЛЬНЫЕ СЕЛЕКТОРЫ ====================
|
||||
const departmentOptions = computed(() => [
|
||||
{ id: null, label: 'Все отделы' },
|
||||
...store.departments.map(d => ({ id: d.id, label: d.name_departments }))
|
||||
])
|
||||
// ==================== ФИЛЬТР ПО ОТДЕЛАМ ====================
|
||||
const { activeDepartment, departmentOptions, resetFilter } = useDepartmentFilter()
|
||||
|
||||
// ==================== КАРТОЧКИ ====================
|
||||
const cards = ref([])
|
||||
@@ -153,23 +122,11 @@ const fetchCards = async (silent = false) => {
|
||||
|
||||
// При смене проекта — перезагружаем карточки
|
||||
const onProjectChange = async () => {
|
||||
activeDepartment.value = null
|
||||
resetFilter()
|
||||
loading.value = true
|
||||
await fetchCards()
|
||||
}
|
||||
|
||||
// ==================== ФИЛЬТР ПО ОТДЕЛАМ ====================
|
||||
const savedDepartment = localStorage.getItem('activeDepartment')
|
||||
const activeDepartment = ref(savedDepartment ? parseInt(savedDepartment) : null)
|
||||
|
||||
watch(activeDepartment, (newVal) => {
|
||||
if (newVal === null) {
|
||||
localStorage.removeItem('activeDepartment')
|
||||
} else {
|
||||
localStorage.setItem('activeDepartment', newVal.toString())
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== СТАТИСТИКА ====================
|
||||
const stats = ref({ total: 0, inProgress: 0, done: 0 })
|
||||
|
||||
@@ -264,171 +221,14 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Контейнер приложения */
|
||||
.app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Основная область контента */
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
margin-left: 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
/* ========== MOBILE ========== */
|
||||
.app.mobile {
|
||||
height: 100vh;
|
||||
height: 100dvh; /* Динамическая высота для iOS */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app.mobile .main-wrapper {
|
||||
margin-left: 0;
|
||||
padding-bottom: calc(64px + var(--safe-area-bottom, 0px)); /* место для нижней навигации + safe area */
|
||||
height: 100vh;
|
||||
height: 100dvh; /* Динамическая высота для iOS */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Контейнер фильтров */
|
||||
.filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* На мобильных — горизонтальный скролл */
|
||||
.app.mobile .filters {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.app.mobile .filters::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Разделитель между проектом и отделами */
|
||||
.filter-divider {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 0 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Кнопка фильтра */
|
||||
.filter-tag {
|
||||
padding: 6px 12px;
|
||||
background: var(--bg-card);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-secondary);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-tag:hover {
|
||||
background: var(--bg-card-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Активный фильтр */
|
||||
.filter-tag.active {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Блок статистики */
|
||||
.header-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 10px 20px;
|
||||
background: var(--bg-card);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Разделитель между статами */
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ========== MOBILE: статистика ========== */
|
||||
.app.mobile .header-stats {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Основная область с доской */
|
||||
/* Специфичные стили для доски (горизонтальный скролл) */
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 0 36px 36px;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Стилизация горизонтального скроллбара */
|
||||
.main::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 5px;
|
||||
margin: 0 36px;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 212, 170, 0.4);
|
||||
border-radius: 5px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.main::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 212, 170, 0.6);
|
||||
}
|
||||
|
||||
/* ========== MOBILE: доска ========== */
|
||||
.app.mobile .main {
|
||||
flex: 1;
|
||||
/* Мобильная доска — без padding, Board сам управляет layout */
|
||||
.main.mobile {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; /* Важно для flex children с overflow */
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user