ваше сообщение коммита

frontend/src/views/ContactsView.vue

@@ -0,0 +1,74 @@
+<template>
+  <BaseLayout>
+    <div class="contacts-tabs">
+      <button :class="{active: tab==='all'}" @click="tab='all'">Все контакты</button>
+      <button :class="{active: tab==='newContacts'}" @click="tab='newContacts'; markContactsAsRead()">
+        Новые контакты
+        <span v-if="newContacts.length" class="badge">{{ newContacts.length }}</span>
+      </button>
+      <button :class="{active: tab==='newMessages'}" @click="tab='newMessages'; markMessagesAsRead()">
+        Новые сообщения
+        <span v-if="newMessages.length" class="badge">{{ newMessages.length }}</span>
+      </button>
+    </div>
+    <ContactTable v-if="tab==='all'" :contacts="contacts" />
+    <ContactTable v-if="tab==='newContacts'" :contacts="newContacts" />
+    <MessagesTable v-if="tab==='newMessages'" :messages="newMessages" />
+  </BaseLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import BaseLayout from '../components/BaseLayout.vue';
+import ContactTable from '../components/ContactTable.vue';
+import MessagesTable from '../components/MessagesTable.vue';
+import { useContactsAndMessagesWebSocket } from '../composables/useContactsWebSocket';
+
+const tab = ref('all');
+const {
+  contacts, newContacts, newMessages,
+  markContactsAsRead, markMessagesAsRead
+} = useContactsAndMessagesWebSocket();
+const router = useRouter();
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back();
+  } else {
+    router.push({ name: 'crm' });
+  }
+}
+</script>
+
+<style scoped>
+.contacts-tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.contacts-tabs button {
+  background: #f5f7fa;
+  border: none;
+  border-radius: 8px 8px 0 0;
+  padding: 10px 22px;
+  font-size: 1.08rem;
+  cursor: pointer;
+  position: relative;
+  transition: background 0.18s, color 0.18s;
+}
+.contacts-tabs button.active {
+  background: #fff;
+  color: #17a2b8;
+  font-weight: 600;
+  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
+}
+.badge {
+  background: #dc3545;
+  color: #fff;
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-size: 0.95em;
+  margin-left: 7px;
+}
+</style> 

frontend/src/views/CrmView.vue

@@ -9,18 +9,16 @@
     <div class="crm-view-container">
       <div class="dle-management-block">
         <h2>Управление DLE</h2>
-        <button class="btn btn-info" @click="showDleManagement = true">
+        <button class="btn btn-info" @click="goToDleManagement">
           <i class="fas fa-cogs"></i> Подробнее
         </button>
       </div>
-      <DleManagement v-if="showDleManagement" :dle-list="dleList" :selected-dle-index="selectedDleIndex" @close="showDleManagement = false" />
       <div class="crm-contacts-block">
         <h2>Контакты</h2>
-        <button class="btn btn-info" @click="showContacts = true">
+        <button class="btn btn-info" @click="goToContactsList">
           <i class="fas fa-address-book"></i> Подробнее
         </button>
       </div>
-      <ContactTable v-if="showContacts" :contacts="contacts" @close="showContacts = false" @show-details="openContactDetails" />
       <div class="crm-tables-block">
         <h2>Таблицы</h2>
         <button class="btn btn-info" @click="goToTables">
@@ -189,6 +187,14 @@ function onContactDeleted() {
 function goToTables() {
   router.push({ name: 'tables-list' });
 }
+
+function goToDleManagement() {
+  router.push({ name: 'dle-management' });
+}
+
+function goToContactsList() {
+  router.push({ name: 'contacts-list' });
+}
 </script>
 
 <style scoped>

frontend/src/views/DleManagementView.vue

@@ -0,0 +1,47 @@
+<template>
+  <BaseLayout>
+    <DleManagement
+      :dle-list="dleList"
+      :selected-dle-index="selectedDleIndex"
+      @close="goBack"
+      class="dle-management-root"
+    />
+  </BaseLayout>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import BaseLayout from '../components/BaseLayout.vue';
+import DleManagement from '../components/DleManagement.vue';
+import dleService from '../services/dleService';
+
+const dleList = ref([]);
+const selectedDleIndex = ref(0);
+const router = useRouter();
+
+function goBack() {
+  if (window.history.length > 1) {
+    router.back();
+  } else {
+    router.push({ name: 'crm' });
+  }
+}
+
+onMounted(async () => {
+  dleList.value = await dleService.getAllDLEs() || [];
+});
+</script>
+
+<style scoped>
+.dle-management-root {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
+  padding: 32px 24px 24px 24px;
+  width: 100%;
+  margin-top: 40px;
+  position: relative;
+  overflow-x: auto;
+}
+</style> 

frontend/src/views/contacts/ContactDetailsView.vue

@@ -1,109 +1,110 @@
 <template>
-  <div class="contact-details-page">
-    <Header :isSidebarOpen="isSidebarOpen" @toggle-sidebar="toggleSidebar" />
-    <div v-if="isLoading">Загрузка...</div>
-    <div v-else-if="!contact">Контакт не найден</div>
-    <div v-else class="contact-details-content">
-      <div class="contact-details-header">
-        <h2>Детали контакта</h2>
-        <router-link class="back-btn" :to="{ name: 'crm' }">← Назад к списку</router-link>
-      </div>
-      <div class="contact-info-block">
-        <div>
-          <strong>Имя:</strong>
-          <input v-model="editableName" class="edit-input" @blur="saveName" @keyup.enter="saveName" />
-          <span v-if="isSavingName" class="saving">Сохранение...</span>
+  <BaseLayout>
+    <div class="contact-details-page">
+      <div v-if="isLoading">Загрузка...</div>
+      <div v-else-if="!contact">Контакт не найден</div>
+      <div v-else class="contact-details-content">
+        <div class="contact-details-header">
+          <h2>Детали контакта</h2>
+          <button class="close-btn" @click="goBack">×</button>
         </div>
-        <div><strong>Email:</strong> {{ contact.email || '-' }}</div>
-        <div><strong>Telegram:</strong> {{ contact.telegram || '-' }}</div>
-        <div><strong>Кошелек:</strong> {{ contact.wallet || '-' }}</div>
-        <div>
-          <strong>Язык:</strong>
-          <div class="multi-select">
-            <div class="selected-langs">
-              <span v-for="lang in selectedLanguages" :key="lang" class="lang-tag">
-                {{ getLanguageLabel(lang) }}
-                <span class="remove-tag" @click="removeLanguage(lang)">×</span>
-              </span>
-              <input
-                v-model="langInput"
-                @focus="showLangDropdown = true"
-                @input="showLangDropdown = true"
-                @keydown.enter.prevent="addLanguageFromInput"
-                class="lang-input"
-                placeholder="Добавить язык..."
-              />
+        <div class="contact-info-block">
+          <div>
+            <strong>Имя:</strong>
+            <input v-model="editableName" class="edit-input" @blur="saveName" @keyup.enter="saveName" />
+            <span v-if="isSavingName" class="saving">Сохранение...</span>
+          </div>
+          <div><strong>Email:</strong> {{ contact.email || '-' }}</div>
+          <div><strong>Telegram:</strong> {{ contact.telegram || '-' }}</div>
+          <div><strong>Кошелек:</strong> {{ contact.wallet || '-' }}</div>
+          <div>
+            <strong>Язык:</strong>
+            <div class="multi-select">
+              <div class="selected-langs">
+                <span v-for="lang in selectedLanguages" :key="lang" class="lang-tag">
+                  {{ getLanguageLabel(lang) }}
+                  <span class="remove-tag" @click="removeLanguage(lang)">×</span>
+                </span>
+                <input
+                  v-model="langInput"
+                  @focus="showLangDropdown = true"
+                  @input="showLangDropdown = true"
+                  @keydown.enter.prevent="addLanguageFromInput"
+                  class="lang-input"
+                  placeholder="Добавить язык..."
+                />
+              </div>
+              <ul v-if="showLangDropdown" class="lang-dropdown">
+                <li
+                  v-for="lang in filteredLanguages"
+                  :key="lang.value"
+                  @mousedown.prevent="addLanguage(lang.value)"
+                  :class="{ selected: selectedLanguages.includes(lang.value) }"
+                >
+                  {{ lang.label }}
+                </li>
+              </ul>
             </div>
-            <ul v-if="showLangDropdown" class="lang-dropdown">
-              <li
-                v-for="lang in filteredLanguages"
-                :key="lang.value"
-                @mousedown.prevent="addLanguage(lang.value)"
-                :class="{ selected: selectedLanguages.includes(lang.value) }"
-              >
-                {{ lang.label }}
-              </li>
-            </ul>
+            <span v-if="isSavingLangs" class="saving">Сохранение...</span>
           </div>
-          <span v-if="isSavingLangs" class="saving">Сохранение...</span>
-        </div>
-        <div><strong>Дата создания:</strong> {{ formatDate(contact.created_at) }}</div>
-        <div><strong>Дата последнего сообщения:</strong> {{ formatDate(lastMessageDate) }}</div>
-        <div class="user-tags-block">
-          <strong>Теги пользователя:</strong>
-          <span v-for="tag in userTags" :key="tag.id" class="user-tag">
-            {{ tag.name }}
-            <span class="remove-tag" @click="removeUserTag(tag.id)">×</span>
-          </span>
-          <button class="add-tag-btn" @click="openTagModal">Добавить тег</button>
-        </div>
-        <button class="delete-btn" @click="deleteContact">Удалить контакт</button>
-      </div>
-      <div class="messages-block">
-        <h3>История сообщений</h3>
-        <div v-if="isLoadingMessages" class="loading">Загрузка...</div>
-        <div v-else-if="messages.length === 0" class="empty">Нет сообщений</div>
-        <div v-else class="messages-list">
-          <Message v-for="msg in messages" :key="msg.id" :message="msg" />
-        </div>
-      </div>
-      <el-dialog v-model="showTagModal" title="Добавить тег пользователю">
-        <div v-if="allTags.length">
-          <el-select
-            v-model="selectedTags"
-            multiple
-            filterable
-            placeholder="Выберите теги"
-            @change="addTagsToUser"
-          >
-            <el-option
-              v-for="tag in allTags"
-              :key="tag.id"
-              :label="tag.name"
-              :value="tag.id"
-            />
-          </el-select>
-          <div style="margin-top: 1em; color: #888; font-size: 0.95em;">
-            <strong>Существующие теги:</strong>
-            <span v-for="tag in allTags" :key="'list-' + tag.id" style="margin-right: 0.7em;">
-              {{ tag.name }}<span v-if="tag.description"> ({{ tag.description }})</span>
+          <div><strong>Дата создания:</strong> {{ formatDate(contact.created_at) }}</div>
+          <div><strong>Дата последнего сообщения:</strong> {{ formatDate(lastMessageDate) }}</div>
+          <div class="user-tags-block">
+            <strong>Теги пользователя:</strong>
+            <span v-for="tag in userTags" :key="tag.id" class="user-tag">
+              {{ tag.name }}
+              <span class="remove-tag" @click="removeUserTag(tag.id)">×</span>
             </span>
+            <button class="add-tag-btn" @click="openTagModal">Добавить тег</button>
+          </div>
+          <button class="delete-btn" @click="deleteContact">Удалить контакт</button>
+        </div>
+        <div class="messages-block">
+          <h3>История сообщений</h3>
+          <div v-if="isLoadingMessages" class="loading">Загрузка...</div>
+          <div v-else-if="messages.length === 0" class="empty">Нет сообщений</div>
+          <div v-else class="messages-list">
+            <Message v-for="msg in messages" :key="msg.id" :message="msg" />
           </div>
         </div>
-        <div style="margin-top: 1em;">
-          <el-input v-model="newTagName" placeholder="Новый тег" />
-          <el-input v-model="newTagDescription" placeholder="Описание" />
-          <el-button type="primary" @click="createTag">Создать тег</el-button>
-        </div>
-      </el-dialog>
+        <el-dialog v-model="showTagModal" title="Добавить тег пользователю">
+          <div v-if="allTags.length">
+            <el-select
+              v-model="selectedTags"
+              multiple
+              filterable
+              placeholder="Выберите теги"
+              @change="addTagsToUser"
+            >
+              <el-option
+                v-for="tag in allTags"
+                :key="tag.id"
+                :label="tag.name"
+                :value="tag.id"
+              />
+            </el-select>
+            <div style="margin-top: 1em; color: #888; font-size: 0.95em;">
+              <strong>Существующие теги:</strong>
+              <span v-for="tag in allTags" :key="'list-' + tag.id" style="margin-right: 0.7em;">
+                {{ tag.name }}<span v-if="tag.description"> ({{ tag.description }})</span>
+              </span>
+            </div>
+          </div>
+          <div style="margin-top: 1em;">
+            <el-input v-model="newTagName" placeholder="Новый тег" />
+            <el-input v-model="newTagDescription" placeholder="Описание" />
+            <el-button type="primary" @click="createTag">Создать тег</el-button>
+          </div>
+        </el-dialog>
+      </div>
     </div>
-  </div>
+  </BaseLayout>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import Header from '../../components/Header.vue';
+import BaseLayout from '../../components/BaseLayout.vue';
 import Message from '../../components/Message.vue';
 import contactsService from '../../services/contactsService.js';
 import messagesService from '../../services/messagesService.js';
@@ -125,7 +126,6 @@ const showTagModal = ref(false);
 const newTagName = ref('');
 const newTagDescription = ref('');
 const messages = ref([]);
-const isSidebarOpen = ref(false);
 
 function toggleSidebar() {
   isSidebarOpen.value = !isSidebarOpen.value;
@@ -288,6 +288,14 @@ async function reloadContact() {
   }
 }
 
+function goBack() {
+  if (window.history.length > 1) {
+    router.back();
+  } else {
+    router.push({ name: 'crm' });
+  }
+}
+
 onMounted(async () => {
   await reloadContact();
   await loadMessages();
@@ -302,19 +310,17 @@ watch(userId, async () => {
 
 <style scoped>
 .contact-details-page {
-  max-width: 900px;
-  margin: 0 auto;
   padding: 32px 0;
 }
 .contact-details-content {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
   padding: 32px 24px 24px 24px;
-  max-width: 700px;
-  margin: 40px auto;
+  width: 100%;
+  margin-top: 40px;
   position: relative;
   overflow-x: auto;
-  background: none;
-  border-radius: 0;
-  box-shadow: none;
 }
 .contact-details-header {
   display: flex;
@@ -322,17 +328,16 @@ watch(userId, async () => {
   align-items: center;
   margin-bottom: 18px;
 }
-.back-btn {
+.close-btn {
   background: none;
   border: none;
-  color: #17a2b8;
-  font-size: 1.1rem;
+  font-size: 2rem;
   cursor: pointer;
-  text-decoration: underline;
-  padding: 0;
+  color: #bbb;
+  transition: color 0.2s;
 }
-.back-btn:hover {
-  color: #138496;
+.close-btn:hover {
+  color: #333;
 }
 .contact-info-block {
   margin-bottom: 18px;

frontend/src/views/tables/TableView.vue

@@ -1,13 +1,15 @@
 <template>
   <BaseLayout>
-    <div class="tableview-header-row">
-      <button class="nav-btn" @click="goToTables">Таблицы</button>
-      <button class="nav-btn" @click="goToCreate">Создать таблицу</button>
-      <button class="close-btn" @click="closeTable">Закрыть</button>
-      <button class="action-btn" @click="goToEdit">Редактировать</button>
-      <button class="danger-btn" @click="goToDelete">Удалить</button>
+    <div class="table-block-wrapper">
+      <div class="tableview-header-row">
+        <button class="nav-btn" @click="goToTables">Таблицы</button>
+        <button class="nav-btn" @click="goToCreate">Создать таблицу</button>
+        <button class="close-btn" @click="closeTable">Закрыть</button>
+        <button class="action-btn" @click="goToEdit">Редактировать</button>
+        <button class="danger-btn" @click="goToDelete">Удалить</button>
+      </div>
+      <UserTableView :table-id="Number($route.params.id)" />
     </div>
-    <UserTableView :table-id="Number($route.params.id)" />
   </BaseLayout>
 </template>
 
@@ -44,6 +46,16 @@ function goToCreate() {
 </script>
 
 <style scoped>
+.table-block-wrapper {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
+  padding: 32px 24px 24px 24px;
+  max-width: 950px;
+  margin: 40px auto;
+  position: relative;
+  overflow-x: auto;
+}
 .tableview-header-row {
   display: flex;
   justify-content: flex-end;

frontend/src/views/tables/TablesListView.vue

@@ -1,11 +1,51 @@
 <template>
   <BaseLayout>
-    <h2>Список таблиц</h2>
-    <UserTablesList />
+    <div class="tables-list-block">
+      <button class="close-btn" @click="goBack">×</button>
+      <h2>Список таблиц</h2>
+      <UserTablesList />
+    </div>
   </BaseLayout>
 </template>
 
 <script setup>
 import BaseLayout from '../../components/BaseLayout.vue';
 import UserTablesList from '../../components/tables/UserTablesList.vue';
-</script> 
+import { useRouter } from 'vue-router';
+// import TagsTableView from '../../components/tables/TagsTableView.vue'; // больше не используется
+const router = useRouter();
+function goBack() {
+  if (window.history.length > 1) {
+    router.back();
+  } else {
+    router.push({ name: 'crm' });
+  }
+}
+</script>
+
+<style scoped>
+.tables-list-block {
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
+  padding: 32px 24px 24px 24px;
+  width: 100%;
+  margin-top: 40px;
+  position: relative;
+  overflow-x: auto;
+}
+.close-btn {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  background: none;
+  border: none;
+  font-size: 2rem;
+  cursor: pointer;
+  color: #bbb;
+  transition: color 0.2s;
+}
+.close-btn:hover {
+  color: #333;
+}
+</style> 

frontend/src/views/tables/TagsTableViewPage.vue

@@ -0,0 +1,10 @@
+<template>
+  <BaseLayout>
+    <TagsTableView />
+  </BaseLayout>
+</template>
+
+<script setup>
+import BaseLayout from '../../components/BaseLayout.vue';
+import TagsTableView from '../../components/tables/TagsTableView.vue';
+</script>