Мобильная версия

1. Адаптация и разработка мобильного варианта.

front_vue/src/views/MainApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app">
+  <div class="app" :class="{ mobile: isMobile }">
     <!-- Боковая панель навигации -->
     <Sidebar />
 
@@ -7,14 +7,11 @@
     <div class="main-wrapper">
       <!-- Шапка с заголовком, фильтрами и статистикой -->
       <Header title="Доска задач">
+        <!-- Десктоп: фильтры в одну строку -->
         <template #filters>
           <div class="filters">
-            <!-- Выбор проекта -->
             <ProjectSelector @change="onProjectChange" />
-
             <div class="filter-divider"></div>
-
-            <!-- Фильтр по отделам -->
             <button 
               class="filter-tag"
               :class="{ active: activeDepartment === null }"
@@ -33,6 +30,28 @@
             </button>
           </div>
         </template>
+
+        <!-- Мобильный: Проект (текст) + Отделы (иконка) -->
+        <template #mobile-filters>
+          <MobileSelect
+            v-model="mobileProjectId"
+            :options="projectOptions"
+            title="Выберите проект"
+            placeholder="Проект"
+            variant="accent"
+            @update:model-value="onMobileProjectChange"
+          />
+          <MobileSelect
+            v-model="activeDepartment"
+            :options="departmentOptions"
+            title="Фильтр по отделам"
+            placeholder="Все отделы"
+            icon="filter"
+            compact
+          />
+        </template>
+
+        <!-- Десктоп: статистика -->
         <template #stats>
           <div class="header-stats">
             <div class="stat">
@@ -90,18 +109,44 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import Sidebar from '../components/Sidebar.vue'
 import Header from '../components/Header.vue'
 import Board from '../components/Board.vue'
 import TaskPanel from '../components/TaskPanel'
 import ProjectSelector from '../components/ProjectSelector.vue'
+import MobileSelect from '../components/ui/MobileSelect.vue'
 import { useProjectsStore } from '../stores/projects'
 import { cardsApi } from '../api'
+import { useMobile } from '../composables/useMobile'
+
+const { isMobile } = useMobile()
 
 // ==================== STORE ====================
 const store = useProjectsStore()
 
+// ==================== МОБИЛЬНЫЕ СЕЛЕКТОРЫ ====================
+const mobileProjectId = ref(null)
+
+const projectOptions = computed(() => 
+  store.projects.map(p => ({ id: p.id, label: p.name }))
+)
+
+const departmentOptions = computed(() => [
+  { id: null, label: 'Все отделы' },
+  ...store.departments.map(d => ({ id: d.id, label: d.name_departments }))
+])
+
+const onMobileProjectChange = async (projectId) => {
+  await store.selectProject(projectId)
+  await onProjectChange()
+}
+
+// Синхронизируем с текущим проектом
+watch(() => store.currentProjectId, (id) => {
+  mobileProjectId.value = id
+}, { immediate: true })
+
 // ==================== КАРТОЧКИ ====================
 const cards = ref([])
 
@@ -225,6 +270,21 @@ onUnmounted(() => {
   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;
@@ -233,12 +293,26 @@ onUnmounted(() => {
   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;
 }
 
 /* Кнопка фильтра */
@@ -255,6 +329,8 @@ onUnmounted(() => {
   letter-spacing: 0.3px;
   cursor: pointer;
   transition: all 0.15s;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .filter-tag:hover {
@@ -302,6 +378,11 @@ onUnmounted(() => {
   background: rgba(255, 255, 255, 0.1);
 }
 
+/* ========== MOBILE: статистика ========== */
+.app.mobile .header-stats {
+  display: none;
+}
+
 /* Основная область с доской */
 .main {
   flex: 1;
@@ -331,4 +412,14 @@ onUnmounted(() => {
 .main::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 212, 170, 0.6);
 }
+
+/* ========== MOBILE: доска ========== */
+.app.mobile .main {
+  flex: 1;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Важно для flex children с overflow */
+}
 </style>