Полный UI для экспорта/импорта данных профиля

✨ Новые возможности:
- Добавлена вкладка 'Данные' в панель настроек
- Интерактивный модал экспорта с деревом выбора элементов
- Модал импорта с превью архива и селективным восстановлением
- Автоматическая обработка ZIP архивов и медиафайлов

🎯 Функционал экспорта:
- Древовидный выбор: профиль, группы, конкретные ссылки
- Чекбоксы для типов данных: стили, медиа
- Прогресс-индикаторы и автозагрузка файлов
- Подсчет выбранных элементов в реальном времени

📥 Функционал импорта:
- Drag&Drop загрузка ZIP архивов
- Детальное превью содержимого файла
- Селективный выбор данных для восстановления
- Защита от перезаписи с опциональным режимом

🔗 Интеграция:
- Полная интеграция с существующими API endpoints
- Автообновление данных после импорта
- Обработка ошибок и пользовательские уведомления
- Responsive дизайн для всех устройств

frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx

@@ -2,6 +2,8 @@
 
 import React, { useState, useEffect } from 'react'
 import { TemplatesSelector } from './TemplatesSelector'
+import { ExportDataModal } from './ExportDataModal'
+import { ImportDataModal } from './ImportDataModal'
 import { designTemplates, DesignTemplate } from '../constants/designTemplates'
 
 interface DesignSettings {
@@ -37,13 +39,44 @@ interface DesignSettings {
   link_overlay_opacity?: number
 }
 
+interface UserProfile {
+  id: number
+  username: string
+  email: string
+  full_name: string
+  bio?: string
+  avatar_url?: string
+}
+
+interface LinkItem {
+  id: number
+  title: string
+  url: string
+  icon_url?: string
+  group: number
+}
+
+interface Group {
+  id: number
+  name: string
+  description?: string
+  icon_url?: string
+  background_image_url?: string
+  is_public?: boolean
+  is_favorite?: boolean
+  links: LinkItem[]
+}
+
 interface CustomizationPanelProps {
   isOpen: boolean
   onClose: () => void
   onSettingsUpdate: (settings: DesignSettings) => void
+  user?: UserProfile | null
+  groups?: Group[]
+  onDataUpdate?: () => void
 }
 
-export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: CustomizationPanelProps) {
+export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate, user, groups = [], onDataUpdate }: CustomizationPanelProps) {
   const [settings, setSettings] = useState<DesignSettings>({
     theme_color: '#ffffff',
     dashboard_layout: 'list',
@@ -58,8 +91,12 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
     header_text_color: '#000000'
   })
   const [loading, setLoading] = useState(false)
-  const [activeTab, setActiveTab] = useState<'layout' | 'colors' | 'groups' | 'templates' | 'advanced'>('templates')
+  const [activeTab, setActiveTab] = useState<'layout' | 'colors' | 'groups' | 'templates' | 'advanced' | 'data'>('templates')
   const [backgroundImageFile, setBackgroundImageFile] = useState<File | null>(null)
+  
+  // Состояния для модалов экспорта/импорта
+  const [showExportModal, setShowExportModal] = useState(false)
+  const [showImportModal, setShowImportModal] = useState(false)
 
   useEffect(() => {
     if (isOpen) {
@@ -298,6 +335,15 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
                   Дополнительно
                 </button>
               </li>
+              <li className="nav-item">
+                <button 
+                  className={`nav-link ${activeTab === 'data' ? 'active' : ''}`}
+                  onClick={() => setActiveTab('data')}
+                >
+                  <i className="bi bi-database me-1"></i>
+                  Данные
+                </button>
+              </li>
             </ul>
 
             {/* Содержимое вкладок */}
@@ -1018,6 +1064,108 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
                   </div>
                 </div>
               )}
+
+              {/* Вкладка: Данные */}
+              {activeTab === 'data' && (
+                <div className="tab-pane fade show active">
+                  <div className="row">
+                    <div className="col-12 mb-4">
+                      <h6 className="text-muted">
+                        <i className="bi bi-database me-2"></i>
+                        Экспорт и импорт данных профиля
+                      </h6>
+                      <p className="text-muted small">
+                        Создавайте резервные копии данных профиля или восстанавливайте их из архива
+                      </p>
+                    </div>
+
+                    {/* Экспорт данных */}
+                    <div className="col-12 mb-4">
+                      <div className="card">
+                        <div className="card-header">
+                          <h6 className="card-title mb-0">
+                            <i className="bi bi-upload me-2"></i>
+                            Экспорт данных
+                          </h6>
+                        </div>
+                        <div className="card-body">
+                          <p className="text-muted small mb-3">
+                            Создать архив с данными профиля для резервного копирования или переноса
+                          </p>
+                          
+                          <button 
+                            type="button"
+                            className="btn btn-outline-primary"
+                            onClick={() => setShowExportModal(true)}
+                          >
+                            <i className="bi bi-download me-2"></i>
+                            Создать экспорт
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Импорт данных */}
+                    <div className="col-12 mb-4">
+                      <div className="card">
+                        <div className="card-header">
+                          <h6 className="card-title mb-0">
+                            <i className="bi bi-upload me-2"></i>
+                            Импорт данных
+                          </h6>
+                        </div>
+                        <div className="card-body">
+                          <p className="text-muted small mb-3">
+                            Загрузить и восстановить данные из архива экспорта
+                          </p>
+                          
+                          <div className="mb-3">
+                            <label className="form-label">Выберите файл архива (.zip)</label>
+                            <input
+                              type="file"
+                              className="form-control"
+                              accept=".zip"
+                              onChange={(e) => {
+                                // TODO: Обработать загрузку файла и показать превью
+                                const file = e.target.files?.[0]
+                                if (file) {
+                                  console.log('Файл выбран:', file.name)
+                                }
+                              }}
+                            />
+                          </div>
+                          
+                          <button 
+                            type="button"
+                            className="btn btn-outline-success"
+                            onClick={() => setShowImportModal(true)}
+                          >
+                            <i className="bi bi-upload me-2"></i>
+                            Открыть мастер импорта
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* История операций */}
+                    <div className="col-12">
+                      <div className="card">
+                        <div className="card-header">
+                          <h6 className="card-title mb-0">
+                            <i className="bi bi-clock-history me-2"></i>
+                            История операций
+                          </h6>
+                        </div>
+                        <div className="card-body">
+                          <p className="text-muted">
+                            Здесь будет отображаться история экспортов и импортов
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
           
@@ -1093,6 +1241,24 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
           </div>
         </div>
       </div>
+
+      {/* Модалы экспорта и импорта */}
+      <ExportDataModal
+        isOpen={showExportModal}
+        onClose={() => setShowExportModal(false)}
+        user={user || null}
+        groups={groups}
+      />
+
+      <ImportDataModal
+        isOpen={showImportModal}
+        onClose={() => setShowImportModal(false)}
+        onImportComplete={() => {
+          if (onDataUpdate) {
+            onDataUpdate()
+          }
+        }}
+      />
     </div>
   )
 }