Правка фронта

1. Улучшения мобильной версии 2. Улучшения комментариев фронта 3. Единый лоадер UI
2026-01-16 05:41:30 +07:00
parent 36e844d4ea
commit cb075e56be
11 changed files with 246 additions and 162 deletions
--- a/front_vue/public/config.js
+++ b/front_vue/public/config.js
@@ -6,6 +6,6 @@ window.APP_CONFIG = {
  IDLE_REFRESH_SECONDS: 1,
  
  // Брейкпоинт для мобильной версии (px)
-  MOBILE_BREAKPOINT: 768
+  MOBILE_BREAKPOINT: 1400
 }

--- a/front_vue/src/components/ArchiveCard.vue
+++ b/front_vue/src/components/ArchiveCard.vue
@@ -38,8 +38,12 @@
        >
          {{ cardDepartment.name_departments }}
        </span>
-        <span v-if="card.files && card.files.length" class="files-badge" :title="card.files.length + ' файлов'">
-          <i data-lucide="image"></i>
+        <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
+          <i data-lucide="message-circle"></i>
+          <span class="indicator-count">{{ card.comments_count }}</span>
+        </span>
+        <span v-if="card.files && card.files.length" class="files-indicator" :title="card.files.length + ' файлов'">
+          <i data-lucide="image-plus"></i>
        </span>
      </div>

@@ -96,6 +100,10 @@
          >
            <i data-lucide="trash-2"></i>
          </button>
+          <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
+            <i data-lucide="message-circle"></i>
+            <span class="indicator-count">{{ card.comments_count }}</span>
+          </span>
          <span v-if="card.files && card.files.length" class="files-indicator">
            <i data-lucide="image-plus"></i>
          </span>
@@ -299,7 +307,8 @@ const closedDateText = computed(() => {
  letter-spacing: 0.4px;
 }

-.files-badge {
+.comments-indicator,
+.files-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
@@ -307,11 +316,18 @@ const closedDateText = computed(() => {
  color: var(--text-muted);
 }

-.files-badge i {
+.comments-indicator i,
+.comments-indicator svg,
+.files-indicator i,
+.files-indicator svg {
  width: 14px;
  height: 14px;
 }

+.indicator-count {
+  font-size: 11px;
+}
+
 /* Аватарка */
 .card-assignee {
  flex-shrink: 0;
@@ -373,19 +389,20 @@ const closedDateText = computed(() => {
  display: flex;
  align-items: center;
  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: rgba(255, 255, 255, 0.08);
+  width: 24px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
  border: none;
-  border-radius: 8px;
-  color: var(--text-secondary);
+  border-radius: 6px;
+  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
 }

-.btn-action i {
-  width: 16px;
-  height: 16px;
+.btn-action i,
+.btn-action svg {
+  width: 18px;
+  height: 18px;
 }

 .btn-restore:hover {
@@ -445,22 +462,32 @@ const closedDateText = computed(() => {
  height: 24px;
 }

-.archive-card.mobile .btn-action i {
+.archive-card.mobile .btn-action i,
+.archive-card.mobile .btn-action svg {
  width: 14px;
  height: 14px;
 }

+.archive-card.mobile .comments-indicator,
 .archive-card.mobile .files-indicator {
  display: flex;
  align-items: center;
+  gap: 3px;
  color: var(--text-muted);
 }

-.archive-card.mobile .files-indicator i {
+.archive-card.mobile .comments-indicator i,
+.archive-card.mobile .comments-indicator svg,
+.archive-card.mobile .files-indicator i,
+.archive-card.mobile .files-indicator svg {
  width: 14px;
  height: 14px;
 }

+.archive-card.mobile .indicator-count {
+  font-size: 11px;
+}
+
 .archive-card.mobile .assignee {
  width: 24px;
  height: 24px;
--- a/front_vue/src/components/Card.vue
+++ b/front_vue/src/components/Card.vue
@@ -35,6 +35,10 @@
        >
          <i data-lucide="archive"></i>
        </button>
+        <span v-if="card.comments_count" class="comments-indicator" :title="card.comments_count + ' комментариев'">
+          <i data-lucide="message-circle"></i>
+          <span class="indicator-count">{{ card.comments_count }}</span>
+        </span>
        <span v-if="card.files && card.files.length" class="files-indicator" :title="card.files.length + ' изображений'">
          <i data-lucide="image-plus"></i>
        </span>
@@ -405,17 +409,27 @@ const handleArchive = () => {
  gap: 8px;
 }

+.comments-indicator,
 .files-indicator {
  display: flex;
  align-items: center;
+  gap: 3px;
  color: var(--text-muted);
 }

-.files-indicator i {
+.comments-indicator i,
+.comments-indicator svg,
+.files-indicator i,
+.files-indicator svg {
  width: 14px;
  height: 14px;
 }

+.indicator-count {
+  font-size: 11px;
+  font-weight: 500;
+}
+
 .due-date {
  font-size: 11px;
  color: var(--text-muted);
--- a/front_vue/src/components/TaskPanel/CommentItem.vue
+++ b/front_vue/src/components/TaskPanel/CommentItem.vue
@@ -3,7 +3,8 @@
    class="comment"
    :class="{ 
      'comment--own': isOwn, 
-      'comment--reply': level > 0
+      'comment--reply': level > 0,
+      'is-mobile': isMobile
    }"
    :style="{ marginLeft: level * 24 + 'px' }"
  >
@@ -14,8 +15,10 @@
    
    <div class="comment-body">
      <div class="comment-header">
+        <div class="comment-meta" :class="{ 'is-mobile': isMobile }">
          <span class="comment-author">{{ comment.author_name }}</span>
          <span class="comment-date">{{ formattedDate }}</span>
+        </div>
        
        <div class="comment-actions">
          <IconButton 
@@ -82,6 +85,9 @@
 import { computed, onMounted, onUpdated } from 'vue'
 import IconButton from '../ui/IconButton.vue'
 import { serverSettings } from '../../api'
+import { useMobile } from '../../composables/useMobile'
+
+const { isMobile } = useMobile()

 const props = defineProps({
  comment: {
@@ -225,13 +231,17 @@ onUpdated(refreshIcons)

 .comment-header {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
 }

-.comment-header .comment-date {
-  margin-right: auto;
+.comment-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
 }

 .comment-author {
@@ -245,6 +255,13 @@ onUpdated(refreshIcons)
  color: var(--text-muted);
 }

+/* Mobile: дата под ником (MOBILE_BREAKPOINT из config.js) */
+.comment-meta.is-mobile {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
 .comment-text {
  font-size: 14px;
  color: var(--text-secondary);
@@ -261,17 +278,6 @@ onUpdated(refreshIcons)
 .comment-actions {
  display: flex;
  gap: 4px;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.comment:hover .comment-actions {
-  opacity: 1;
-}
-
-/* Mobile: иконки видны всегда */
-:global(body.is-mobile) .comment-actions {
-  opacity: 1;
 }

 .comment-btn-delete:hover {
@@ -364,4 +370,9 @@ onUpdated(refreshIcons)
  width: 12px;
  height: 12px;
 }
+
+/* Mobile: скрыть кнопку скачивания на миниатюре */
+.comment.is-mobile .comment-file-download {
+  display: none;
+}
 </style>
--- a/front_vue/src/components/TaskPanel/TaskCommentsTab.vue
+++ b/front_vue/src/components/TaskPanel/TaskCommentsTab.vue
@@ -2,10 +2,7 @@
  <div class="comments-tab">
    <!-- Список комментариев -->
    <div class="comments-list" ref="commentsListRef">
-      <div v-if="loading" class="comments-loading">
-        <span class="loader"></span>
-        Загрузка комментариев...
-      </div>
+      <Loader v-if="loading" text="Загрузка комментариев..." :inline="true" />
      
      <div v-else-if="flatCommentsWithLevel.length === 0" class="comments-empty">
        <i data-lucide="message-circle"></i>
@@ -207,6 +204,7 @@ import CommentForm from './CommentForm.vue'
 import ConfirmDialog from '../ConfirmDialog.vue'
 import SlidePanel from '../ui/SlidePanel.vue'
 import RichTextEditor from '../ui/RichTextEditor.vue'
+import Loader from '../ui/Loader.vue'
 import { commentsApi, commentImageApi, getFullUrl } from '../../api'
 import { useMobile } from '../../composables/useMobile'

@@ -316,14 +314,26 @@ const loadComments = async (silent = false) => {
      if (hasChanges) {
        comments.value = newData
        emit('comments-loaded', newData.length)
+        
+        // Для первичной загрузки: убираем loading, ждём рендер, прокручиваем мгновенно
+        if (!silent) {
+          loading.value = false
          await nextTick()
          refreshIcons()
+          // Мгновенная прокрутка к последнему комментарию
+          if (commentsListRef.value) {
+            commentsListRef.value.scrollTop = commentsListRef.value.scrollHeight
+          }
+        } else {
+          await nextTick()
+          refreshIcons()
+        }
      }
    }
  } catch (e) {
    console.error('Ошибка загрузки комментариев:', e)
  } finally {
-    if (!silent) {
+    if (!silent && loading.value) {
      loading.value = false
    }
  }
@@ -618,9 +628,11 @@ const previewFile = (file, comment) => {

 // Хелперы
 const scrollToBottom = () => {
+  setTimeout(() => {
    if (commentsListRef.value) {
      commentsListRef.value.scrollTop = commentsListRef.value.scrollHeight
    }
+  }, 100)
 }

 const refreshIcons = () => {
@@ -683,10 +695,11 @@ defineExpose({

 <style scoped>
 .comments-tab {
-  height: 100%;
  display: flex;
  flex-direction: column;
-  min-height: 0; /* Важно для flex overflow */
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
 }

 .comments-list {
@@ -695,21 +708,29 @@ defineExpose({
  display: flex;
  flex-direction: column;
  gap: 12px;
-  padding: 2px;  /* Для outline при редактировании */
-  padding-right: 6px;
-  margin-bottom: 16px;
-  min-height: 100px;
-  max-height: calc(100vh - 400px);
+  padding: 0 6px 16px 2px;
+  min-height: 0;
 }

-/* Mobile: убираем max-height, используем flex */
-:global(body.is-mobile) .comments-list {
-  max-height: none;
-  min-height: 50px;
-  margin-bottom: 12px;
+/* Стилизация скроллбара */
+.comments-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.comments-list::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 3px;
+}
+
+.comments-list::-webkit-scrollbar-thumb {
+  background: rgba(0, 212, 170, 0.3);
+  border-radius: 3px;
+}
+
+.comments-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 212, 170, 0.5);
 }

-.comments-loading,
 .comments-empty {
  display: flex;
  flex-direction: column;
@@ -727,21 +748,6 @@ defineExpose({
  opacity: 0.5;
 }

-.loader {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 /* ========== Edit Panel Styles ========== */
 .edit-panel-header {
  display: flex;
--- a/front_vue/src/components/ui/Loader.vue
+++ b/front_vue/src/components/ui/Loader.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="loader-container" :class="{ 'loader--inline': inline }">
+    <div class="loader-spinner"></div>
+    <span v-if="text" class="loader-text">{{ text }}</span>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: 'Загрузка...'
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<style scoped>
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 80px;
+  color: var(--text-secondary);
+}
+
+.loader-container.loader--inline {
+  flex-direction: row;
+  padding: 40px;
+  gap: 12px;
+}
+
+.loader-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loader--inline .loader-spinner {
+  width: 24px;
+  height: 24px;
+  border-width: 2px;
+}
+
+.loader-text {
+  font-size: 14px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
--- a/front_vue/src/components/ui/SlidePanel.vue
+++ b/front_vue/src/components/ui/SlidePanel.vue
@@ -354,8 +354,9 @@ onUnmounted(() => {
 .panel.mobile .panel-body {
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-area-bottom, 0px));
-  min-height: 0; /* Важно для flex overflow */
-  gap: 16px;
+  min-height: 0;
+  gap: 0; /* Убираем gap — он создаёт пустое место */
+  overflow-y: auto;
 }

 .panel.mobile .panel-footer {
--- a/front_vue/src/views/ArchivePage.vue
+++ b/front_vue/src/views/ArchivePage.vue
@@ -88,10 +88,7 @@
          </div>
          
          <!-- Загрузка -->
-          <div v-if="loading" class="loading-state">
-            <i data-lucide="loader-2" class="spin"></i>
-            <span>Загрузка...</span>
-          </div>
+          <Loader v-if="loading" />
        </div>
      </main>
    </div>
@@ -137,6 +134,7 @@ import TaskPanel from '../components/TaskPanel'
 import ConfirmDialog from '../components/ConfirmDialog.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'
@@ -469,30 +467,6 @@ onMounted(async () => {
  font-size: 13px;
 }

-/* Загрузка */
-.loading-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 60px 20px;
-  color: var(--text-muted);
-}
-
-.loading-state i {
-  width: 20px;
-  height: 20px;
-}
-
-.spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
 /* ========== MOBILE ========== */
 .app.mobile {
  flex-direction: column;
--- a/front_vue/src/views/LoginPage.vue
+++ b/front_vue/src/views/LoginPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login-page">
+  <div class="login-page" :class="{ 'is-mobile': isMobile }">
    <!-- Левитирующие иконки на фоне -->
    <div class="floating-icons">
      <div class="float-icon icon-1"><i data-lucide="check-square"></i></div>
@@ -117,6 +117,9 @@ import { ref, onMounted, nextTick, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { authApi, cardsApi } from '../api'
 import { useProjectsStore } from '../stores/projects'
+import { useMobile } from '../composables/useMobile'
+
+const { isMobile } = useMobile()

 const router = useRouter()
 const store = useProjectsStore()
@@ -681,29 +684,27 @@ watch(showSuccess, () => {
  100% { transform: translateX(0); }
 }

-/* Мобильная адаптация (MOBILE_BREAKPOINT: 768px) */
-@media (max-width: 768px) {
-  .login-title {
+/* Мобильная адаптация (MOBILE_BREAKPOINT из config.js) */
+.login-page.is-mobile .login-title {
  font-size: 26px;
 }

-  .login-subtitle {
+.login-page.is-mobile .login-subtitle {
  font-size: 14px;
 }

-  .logo-icon {
+.login-page.is-mobile .logo-icon {
  width: 64px;
  height: 64px;
 }

-  .logo-icon i,
-  .logo-icon svg {
+.login-page.is-mobile .logo-icon i,
+.login-page.is-mobile .logo-icon svg {
  width: 32px;
  height: 32px;
 }

-  .float-icon {
+.login-page.is-mobile .float-icon {
  opacity: 0.5;
 }
-}
 </style>
--- a/front_vue/src/views/MainApp.vue
+++ b/front_vue/src/views/MainApp.vue
@@ -67,7 +67,9 @@
      
      <!-- Доска с колонками и карточками -->
      <main class="main">
+        <Loader v-if="loading" />
        <Board 
+          v-else
          ref="boardRef"
          :active-department="activeDepartment"
          :departments="store.departments"
@@ -109,6 +111,7 @@ 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 Loader from '../components/ui/Loader.vue'
 import { useProjectsStore } from '../stores/projects'
 import { cardsApi } from '../api'
 import { useMobile } from '../composables/useMobile'
@@ -126,18 +129,32 @@ const departmentOptions = computed(() => [

 // ==================== КАРТОЧКИ ====================
 const cards = ref([])
+const loading = ref(true)

-// Загрузка карточек текущего проекта
-const fetchCards = async () => {
-  if (!store.currentProjectId) return
+// Загрузка карточек текущего проекта (silent = тихое обновление без Loader)
+const fetchCards = async (silent = false) => {
+  if (!store.currentProjectId) {
+    loading.value = false
+    return
+  }
  
+  if (!silent) {
+    loading.value = true
+  }
+  try {
    const result = await cardsApi.getAll(store.currentProjectId)
    if (result.success) cards.value = result.data
+  } finally {
+    if (!silent) {
+      loading.value = false
+    }
+  }
 }

 // При смене проекта — перезагружаем карточки
 const onProjectChange = async () => {
  activeDepartment.value = null
+  loading.value = true
  await fetchCards()
 }

@@ -206,7 +223,7 @@ const startPolling = () => {
  if (pollTimer) clearInterval(pollTimer)
  pollTimer = setInterval(async () => {
    console.log('[AutoRefresh] Обновление данных...')
-    await fetchCards()
+    await fetchCards(true) // silent = true, без Loader
  }, REFRESH_INTERVAL)
 }

@@ -228,6 +245,7 @@ onMounted(async () => {
    try {
      cards.value = JSON.parse(prefetchedCards)
      sessionStorage.removeItem('prefetchedCards')
+      loading.value = false
    } catch (e) {
      await fetchCards()
    }
--- a/front_vue/src/views/TeamPage.vue
+++ b/front_vue/src/views/TeamPage.vue
@@ -6,10 +6,7 @@
      <Header title="Команда" subtitle="Наша команда специалистов" />

      <main class="main">
-        <div v-if="loading" class="loading">
-          <div class="spinner"></div>
-          <span>Загрузка...</span>
-        </div>
+        <Loader v-if="loading" />

        <!-- Desktop: grid -->
        <div v-else-if="!isMobile" class="team-grid">
@@ -92,6 +89,7 @@
 import { ref, onMounted, onUpdated } from 'vue'
 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'

@@ -187,28 +185,6 @@ onUpdated(refreshIcons)
  background: rgba(255, 255, 255, 0.25);
 }

-.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 80px;
-  color: var(--text-secondary);
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(255, 255, 255, 0.1);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}

 .team-grid {
  display: grid;
@@ -341,10 +317,6 @@ onUpdated(refreshIcons)
  overflow: hidden;
 }

-.app.mobile .loading {
-  padding: 40px;
-}
-
 /* Mobile swipe cards */
 .mobile-cards {
  width: 100%;