1266 lines
62 KiB
TypeScript
1266 lines
62 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useEffect } from 'react'
|
||
import { TemplatesSelector } from './TemplatesSelector'
|
||
import { ExportDataModal } from './ExportDataModal'
|
||
import { ImportDataModal } from './ImportDataModal'
|
||
import { designTemplates, DesignTemplate } from '../constants/designTemplates'
|
||
import { useLocale } from '../contexts/LocaleContext'
|
||
|
||
interface DesignSettings {
|
||
id?: number
|
||
template_id?: string
|
||
theme_color: string
|
||
background_image?: string
|
||
background_image_url?: string
|
||
dashboard_layout: 'sidebar' | 'grid' | 'list' | 'cards' | 'compact' | 'masonry' | 'timeline' | 'magazine'
|
||
groups_default_expanded: boolean
|
||
show_group_icons: boolean
|
||
show_link_icons: boolean
|
||
dashboard_background_color: string
|
||
font_family: string
|
||
custom_css: string
|
||
group_text_color?: string
|
||
link_text_color?: string
|
||
header_text_color?: string
|
||
cover_overlay_enabled?: boolean
|
||
cover_overlay_color?: string
|
||
cover_overlay_opacity?: number
|
||
// Новые опции кастомизации
|
||
group_overlay_enabled?: boolean
|
||
group_overlay_color?: string
|
||
group_overlay_opacity?: number
|
||
show_groups_title?: boolean
|
||
group_description_text_color?: string
|
||
body_font_family?: string
|
||
heading_font_family?: string
|
||
// Новые поля для цветового оверлея кнопок ссылок
|
||
link_overlay_enabled?: boolean
|
||
link_overlay_color?: string
|
||
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, user, groups = [], onDataUpdate }: CustomizationPanelProps) {
|
||
const { t } = useLocale()
|
||
const [settings, setSettings] = useState<DesignSettings>({
|
||
theme_color: '#ffffff',
|
||
dashboard_layout: 'list',
|
||
groups_default_expanded: true,
|
||
show_group_icons: true,
|
||
show_link_icons: true,
|
||
dashboard_background_color: '#f8f9fa',
|
||
font_family: 'sans-serif',
|
||
custom_css: '',
|
||
group_text_color: '#333333',
|
||
link_text_color: '#666666',
|
||
header_text_color: '#000000'
|
||
})
|
||
const [loading, setLoading] = useState(false)
|
||
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) {
|
||
loadSettings()
|
||
}
|
||
}, [isOpen])
|
||
|
||
const loadSettings = async () => {
|
||
try {
|
||
const token = localStorage.getItem('token')
|
||
const API = process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'
|
||
const response = await fetch(`${API}/api/customization/settings/`, {
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`
|
||
}
|
||
})
|
||
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setSettings(data)
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading settings:', error)
|
||
}
|
||
}
|
||
|
||
const saveSettings = async () => {
|
||
setLoading(true)
|
||
try {
|
||
const token = localStorage.getItem('token')
|
||
const API = process.env.NEXT_PUBLIC_API_URL || 'https://links.shareon.kr'
|
||
|
||
// Если есть новый файл фоновой картинки, отправляем через FormData
|
||
if (backgroundImageFile) {
|
||
const formData = new FormData()
|
||
|
||
// Добавляем все настройки
|
||
formData.append('template_id', settings.template_id || '')
|
||
formData.append('theme_color', settings.theme_color)
|
||
formData.append('dashboard_layout', settings.dashboard_layout)
|
||
formData.append('groups_default_expanded', settings.groups_default_expanded.toString())
|
||
formData.append('show_group_icons', settings.show_group_icons.toString())
|
||
formData.append('show_link_icons', settings.show_link_icons.toString())
|
||
formData.append('dashboard_background_color', settings.dashboard_background_color)
|
||
formData.append('font_family', settings.font_family)
|
||
formData.append('custom_css', settings.custom_css)
|
||
formData.append('header_text_color', settings.header_text_color || '#000000')
|
||
formData.append('group_text_color', settings.group_text_color || '#333333')
|
||
formData.append('link_text_color', settings.link_text_color || '#666666')
|
||
formData.append('cover_overlay_enabled', (settings.cover_overlay_enabled || false).toString())
|
||
formData.append('cover_overlay_color', settings.cover_overlay_color || '#000000')
|
||
formData.append('cover_overlay_opacity', (settings.cover_overlay_opacity || 0.3).toString())
|
||
formData.append('group_overlay_enabled', (settings.group_overlay_enabled || false).toString())
|
||
formData.append('group_overlay_color', settings.group_overlay_color || '#000000')
|
||
formData.append('group_overlay_opacity', (settings.group_overlay_opacity || 0.3).toString())
|
||
formData.append('show_groups_title', (settings.show_groups_title !== false).toString())
|
||
formData.append('group_description_text_color', settings.group_description_text_color || '#666666')
|
||
formData.append('body_font_family', settings.body_font_family || 'sans-serif')
|
||
formData.append('heading_font_family', settings.heading_font_family || 'sans-serif')
|
||
formData.append('link_overlay_enabled', (settings.link_overlay_enabled || false).toString())
|
||
formData.append('link_overlay_color', settings.link_overlay_color || '#000000')
|
||
formData.append('link_overlay_opacity', (settings.link_overlay_opacity || 0.2).toString())
|
||
formData.append('background_image', backgroundImageFile)
|
||
|
||
const response = await fetch(`${API}/api/customization/settings/`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: formData
|
||
})
|
||
|
||
if (response.ok) {
|
||
const updatedSettings = await response.json()
|
||
onSettingsUpdate(updatedSettings)
|
||
setBackgroundImageFile(null) // Сбрасываем выбранный файл
|
||
onClose()
|
||
} else {
|
||
const errorData = await response.json()
|
||
console.error('Server error:', errorData)
|
||
}
|
||
} else {
|
||
// Если файл не выбран, отправляем только JSON настройки (картинка остается прежней)
|
||
const editableSettings = {
|
||
template_id: settings.template_id,
|
||
theme_color: settings.theme_color,
|
||
dashboard_layout: settings.dashboard_layout,
|
||
groups_default_expanded: settings.groups_default_expanded,
|
||
show_group_icons: settings.show_group_icons,
|
||
show_link_icons: settings.show_link_icons,
|
||
dashboard_background_color: settings.dashboard_background_color,
|
||
font_family: settings.font_family,
|
||
custom_css: settings.custom_css,
|
||
header_text_color: settings.header_text_color || '#000000',
|
||
group_text_color: settings.group_text_color || '#333333',
|
||
link_text_color: settings.link_text_color || '#666666',
|
||
cover_overlay_enabled: settings.cover_overlay_enabled || false,
|
||
cover_overlay_color: settings.cover_overlay_color || '#000000',
|
||
cover_overlay_opacity: settings.cover_overlay_opacity || 0.3,
|
||
group_overlay_enabled: settings.group_overlay_enabled || false,
|
||
group_overlay_color: settings.group_overlay_color || '#000000',
|
||
group_overlay_opacity: settings.group_overlay_opacity || 0.3,
|
||
show_groups_title: settings.show_groups_title !== false,
|
||
group_description_text_color: settings.group_description_text_color || '#666666',
|
||
body_font_family: settings.body_font_family || 'sans-serif',
|
||
heading_font_family: settings.heading_font_family || 'sans-serif',
|
||
link_overlay_enabled: settings.link_overlay_enabled || false,
|
||
link_overlay_color: settings.link_overlay_color || '#000000',
|
||
link_overlay_opacity: settings.link_overlay_opacity || 0.2
|
||
}
|
||
|
||
const response = await fetch(`${API}/api/customization/settings/`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify(editableSettings)
|
||
})
|
||
|
||
if (response.ok) {
|
||
const updatedSettings = await response.json()
|
||
onSettingsUpdate(updatedSettings)
|
||
onClose()
|
||
} else {
|
||
const errorData = await response.json()
|
||
console.error('Server error:', errorData)
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Error saving settings:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const handleChange = (field: keyof DesignSettings, value: any) => {
|
||
setSettings(prev => ({
|
||
...prev,
|
||
[field]: value
|
||
}))
|
||
}
|
||
|
||
const handleTemplateSelect = (template: DesignTemplate) => {
|
||
setSettings(prev => ({
|
||
...prev,
|
||
...template.settings,
|
||
id: prev.id, // Сохраняем оригинальный ID
|
||
template_id: template.id // Добавляем ID шаблона для отслеживания
|
||
}))
|
||
}
|
||
|
||
// Определяем текущий шаблон
|
||
const getCurrentTemplateId = () => {
|
||
// Если есть сохраненный template_id
|
||
if ((settings as any).template_id) {
|
||
return (settings as any).template_id
|
||
}
|
||
|
||
// Или пытаемся определить по совпадению настроек
|
||
for (const template of designTemplates) {
|
||
if (
|
||
template.settings.theme_color === settings.theme_color &&
|
||
template.settings.background_color === settings.dashboard_background_color &&
|
||
template.settings.dashboard_layout === settings.dashboard_layout
|
||
) {
|
||
return template.id
|
||
}
|
||
}
|
||
return undefined
|
||
}
|
||
|
||
if (!isOpen) return null
|
||
|
||
return (
|
||
<div className="modal fade show d-block" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||
<div className="modal-dialog modal-lg">
|
||
<div className="modal-content">
|
||
<div className="modal-header">
|
||
<h5 className="modal-title">
|
||
<i className="bi bi-palette me-2"></i>
|
||
{t('customization.title')}
|
||
</h5>
|
||
<button
|
||
type="button"
|
||
className="btn-close"
|
||
onClick={onClose}
|
||
></button>
|
||
</div>
|
||
|
||
<div className="modal-body">
|
||
{/* Вкладки */}
|
||
<ul className="nav nav-tabs mb-3">
|
||
<li className="nav-item">
|
||
<button
|
||
className={`nav-link ${activeTab === 'layout' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('layout')}
|
||
>
|
||
<i className="bi bi-layout-sidebar me-1"></i>
|
||
{t('customization.layout')}
|
||
</button>
|
||
</li>
|
||
<li className="nav-item">
|
||
<button
|
||
className={`nav-link ${activeTab === 'colors' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('colors')}
|
||
>
|
||
<i className="bi bi-palette-fill me-1"></i>
|
||
{t('customization.colors')}
|
||
</button>
|
||
</li>
|
||
<li className="nav-item">
|
||
<button
|
||
className={`nav-link ${activeTab === 'groups' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('groups')}
|
||
>
|
||
<i className="bi bi-collection me-1"></i>
|
||
{t('customization.groups')}
|
||
</button>
|
||
</li>
|
||
<li className="nav-item">
|
||
<button
|
||
className={`nav-link ${activeTab === 'templates' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('templates')}
|
||
>
|
||
<i className="bi bi-palette me-1"></i>
|
||
{t('customization.templates')}
|
||
</button>
|
||
</li>
|
||
<li className="nav-item">
|
||
<button
|
||
className={`nav-link ${activeTab === 'advanced' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('advanced')}
|
||
>
|
||
<i className="bi bi-gear me-1"></i>
|
||
{t('customization.advanced')}
|
||
</button>
|
||
</li>
|
||
<li className="nav-item">
|
||
<button
|
||
className={`nav-link ${activeTab === 'data' ? 'active' : ''}`}
|
||
onClick={() => setActiveTab('data')}
|
||
>
|
||
<i className="bi bi-database me-1"></i>
|
||
{t('customization.data')}
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
|
||
{/* Содержимое вкладок */}
|
||
<div className="tab-content">
|
||
|
||
{/* Вкладка: Макет */}
|
||
{activeTab === 'layout' && (
|
||
<div className="tab-pane fade show active">
|
||
<div className="row">
|
||
<div className="col-12 mb-4">
|
||
<label className="form-label fs-5 mb-3">
|
||
<i className="bi bi-layout-text-window-reverse me-2"></i>
|
||
{t('customization.layout.style')}
|
||
</label>
|
||
<div className="row g-3">
|
||
{[
|
||
{
|
||
value: 'list',
|
||
labelKey: 'customization.layout.list',
|
||
icon: 'bi-list-ul',
|
||
descriptionKey: 'customization.layout.listDescription'
|
||
},
|
||
{
|
||
value: 'grid',
|
||
labelKey: 'customization.layout.grid',
|
||
icon: 'bi-grid-3x3',
|
||
descriptionKey: 'customization.layout.gridDescription'
|
||
},
|
||
{
|
||
value: 'cards',
|
||
labelKey: 'customization.layout.cards',
|
||
icon: 'bi-card-heading',
|
||
descriptionKey: 'customization.layout.cardsDescription'
|
||
},
|
||
{
|
||
value: 'compact',
|
||
labelKey: 'customization.layout.compact',
|
||
icon: 'bi-layout-text-sidebar',
|
||
descriptionKey: 'customization.layout.compactDescription'
|
||
},
|
||
{
|
||
value: 'sidebar',
|
||
labelKey: 'customization.layout.sidebar',
|
||
icon: 'bi-layout-sidebar',
|
||
descriptionKey: 'customization.layout.sidebarDescription'
|
||
},
|
||
{
|
||
value: 'masonry',
|
||
labelKey: 'customization.layout.masonry',
|
||
icon: 'bi-bricks',
|
||
descriptionKey: 'customization.layout.masonryDescription'
|
||
},
|
||
{
|
||
value: 'timeline',
|
||
labelKey: 'customization.layout.timeline',
|
||
icon: 'bi-clock-history',
|
||
descriptionKey: 'customization.layout.timelineDescription'
|
||
},
|
||
{
|
||
value: 'magazine',
|
||
labelKey: 'customization.layout.magazine',
|
||
icon: 'bi-newspaper',
|
||
descriptionKey: 'customization.layout.magazineDescription'
|
||
},
|
||
{
|
||
value: 'test-list',
|
||
labelKey: 'customization.layout.testList',
|
||
icon: 'bi-list-check',
|
||
descriptionKey: 'customization.layout.testListDescription'
|
||
}
|
||
].map((layout) => (
|
||
<div key={layout.value} className="col-md-6 col-lg-4">
|
||
<div
|
||
className={`card text-center h-100 layout-option ${settings.dashboard_layout === layout.value ? 'border-primary bg-primary bg-opacity-10 selected' : 'border-secondary'}`}
|
||
style={{ cursor: 'pointer', transition: 'all 0.2s ease' }}
|
||
onClick={() => handleChange('dashboard_layout', layout.value)}
|
||
>
|
||
<div className="card-body d-flex flex-column">
|
||
<i className={`${layout.icon} fs-1 mb-3 text-primary`}></i>
|
||
<h6 className="card-title mb-2">{t(layout.labelKey)}</h6>
|
||
<p className="card-text small text-muted flex-grow-1">{t(layout.descriptionKey)}</p>
|
||
{settings.dashboard_layout === layout.value && (
|
||
<div className="mt-2">
|
||
<span className="badge bg-primary">
|
||
<i className="bi bi-check-lg me-1"></i>
|
||
Выбрано
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-12 mb-3">
|
||
<div className="alert alert-info">
|
||
<i className="bi bi-info-circle me-2"></i>
|
||
<strong>{t('customization.layout.tip')}</strong> {t('customization.layout.tipText')}
|
||
Каждый стиль имеет свои преимущества в зависимости от количества ссылок и их типа.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Вкладка: Цвета */}
|
||
{activeTab === 'colors' && (
|
||
<div className="tab-pane fade show active">
|
||
<div className="row">
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">{t('customization.colors.theme')}</label>
|
||
<div className="input-group">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.theme_color}
|
||
onChange={(e) => handleChange('theme_color', e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.theme_color}
|
||
onChange={(e) => handleChange('theme_color', e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">{t('customization.colors.background')}</label>
|
||
<div className="input-group">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.dashboard_background_color}
|
||
onChange={(e) => handleChange('dashboard_background_color', e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.dashboard_background_color}
|
||
onChange={(e) => handleChange('dashboard_background_color', e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 mb-3">
|
||
<label className="form-label">{t('customization.colors.backgroundImage')}</label>
|
||
<div className="mb-2">
|
||
<input
|
||
type="file"
|
||
className="form-control"
|
||
accept="image/*"
|
||
onChange={(e) => {
|
||
const file = e.target.files?.[0]
|
||
if (file) {
|
||
setBackgroundImageFile(file)
|
||
}
|
||
}}
|
||
/>
|
||
<div className="form-text">
|
||
{t('customization.colors.backgroundImageHelp')}
|
||
</div>
|
||
</div>
|
||
{settings.background_image_url && (
|
||
<div className="mb-2">
|
||
<label className="form-label small">{t('customization.colors.currentImage')}</label>
|
||
<div className="d-flex align-items-center gap-2">
|
||
<img
|
||
src={settings.background_image_url}
|
||
alt={t('customization.colors.currentBackgroundAlt')}
|
||
className="img-thumbnail"
|
||
style={{ maxWidth: '200px', maxHeight: '100px', objectFit: 'cover' }}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="btn btn-outline-danger btn-sm"
|
||
onClick={() => {
|
||
handleChange('background_image_url', '')
|
||
}}
|
||
title={t('customization.colors.removeBackground')}
|
||
>
|
||
<i className="bi bi-trash"></i> {t('customization.colors.removeBackground')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{backgroundImageFile && (
|
||
<div className="mb-2">
|
||
<label className="form-label small">{t('customization.colors.newImage')}</label>
|
||
<div className="text-success">
|
||
<i className="bi bi-file-earmark-image me-1"></i>
|
||
{backgroundImageFile.name}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="col-md-4 mb-3">
|
||
<label className="form-label">{t('customization.colors.header')}</label>
|
||
<div className="input-group">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.header_text_color || '#000000'}
|
||
onChange={(e) => handleChange('header_text_color', e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.header_text_color || '#000000'}
|
||
onChange={(e) => handleChange('header_text_color', e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-4 mb-3">
|
||
<label className="form-label">{t('customization.colors.group')}</label>
|
||
<div className="input-group">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.group_text_color || '#333333'}
|
||
onChange={(e) => handleChange('group_text_color', e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.group_text_color || '#333333'}
|
||
onChange={(e) => handleChange('group_text_color', e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-4 mb-3">
|
||
<label className="form-label">{t('customization.colors.link')}</label>
|
||
<div className="input-group">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.link_text_color || '#666666'}
|
||
onChange={(e) => handleChange('link_text_color', e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.link_text_color || '#666666'}
|
||
onChange={(e) => handleChange('link_text_color', e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Вкладка: Группы */}
|
||
{activeTab === 'groups' && (
|
||
<div className="tab-pane fade show active">
|
||
<div className="row">
|
||
<div className="col-12 mb-3">
|
||
<h6 className="text-muted">{t('customization.groups.displaySettings')}</h6>
|
||
</div>
|
||
<div className="col-12 mb-3">
|
||
<div className="form-check form-switch">
|
||
<input
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
checked={settings.groups_default_expanded}
|
||
onChange={(e) => handleChange('groups_default_expanded', e.target.checked)}
|
||
/>
|
||
<label className="form-check-label">
|
||
Развернуть группы по умолчанию
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 mb-3">
|
||
<div className="form-check form-switch">
|
||
<input
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
checked={settings.show_group_icons}
|
||
onChange={(e) => handleChange('show_group_icons', e.target.checked)}
|
||
/>
|
||
<label className="form-check-label">
|
||
Показывать иконки групп
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div className="col-12 mb-3">
|
||
<div className="form-check form-switch">
|
||
<input
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
checked={settings.show_link_icons}
|
||
onChange={(e) => handleChange('show_link_icons', e.target.checked)}
|
||
/>
|
||
<label className="form-check-label">
|
||
Показывать иконки ссылок
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Новые настройки */}
|
||
<div className="col-12 mb-3">
|
||
<div className="form-check form-switch">
|
||
<input
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
checked={settings.show_groups_title !== false}
|
||
onChange={(e) => handleChange('show_groups_title', e.target.checked)}
|
||
/>
|
||
<label className="form-check-label">
|
||
{t('customization.colors.showGroupsTitle')}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">{t('customization.colors.groupDescription')}</label>
|
||
<div className="input-group">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.group_description_text_color || '#666666'}
|
||
onChange={(e) => handleChange('group_description_text_color', e.target.value)}
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.group_description_text_color || '#666666'}
|
||
onChange={(e) => handleChange('group_description_text_color', e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Перекрытие групп цветом */}
|
||
<div className="col-12 mb-3">
|
||
<div className="card">
|
||
<div className="card-header">
|
||
<h6 className="mb-0">{t('customization.colors.groupOverlay')}</h6>
|
||
</div>
|
||
<div className="card-body">
|
||
<div className="form-check mb-3">
|
||
<input
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
id="groupOverlayEnabled"
|
||
checked={settings.group_overlay_enabled || false}
|
||
onChange={(e) => handleChange('group_overlay_enabled', e.target.checked)}
|
||
/>
|
||
<label className="form-check-label" htmlFor="groupOverlayEnabled">
|
||
Включить цветовое перекрытие групп
|
||
</label>
|
||
</div>
|
||
|
||
{settings.group_overlay_enabled && (
|
||
<>
|
||
<div className="row">
|
||
<div className="col-6 mb-3">
|
||
<label className="form-label">Цвет перекрытия</label>
|
||
<div className="d-flex gap-2">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.group_overlay_color || '#000000'}
|
||
onChange={(e) => handleChange('group_overlay_color', e.target.value)}
|
||
title={t('customization.colors.chooseOverlayColor')}
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.group_overlay_color || '#000000'}
|
||
onChange={(e) => handleChange('group_overlay_color', e.target.value)}
|
||
placeholder="#000000"
|
||
title={t('customization.colors.hexColorCode')}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-6 mb-3">
|
||
<label className="form-label">
|
||
Прозрачность ({Math.round((settings.group_overlay_opacity || 0.3) * 100)}%)
|
||
</label>
|
||
<input
|
||
type="range"
|
||
className="form-range"
|
||
min="0"
|
||
max="1"
|
||
step="0.1"
|
||
value={settings.group_overlay_opacity || 0.3}
|
||
onChange={(e) => handleChange('group_overlay_opacity', parseFloat(e.target.value))}
|
||
title="Настройка прозрачности перекрытия"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Preview */}
|
||
<div className="mb-3">
|
||
<label className="form-label">Предварительный просмотр</label>
|
||
<div className="position-relative rounded" style={{ height: '80px', border: '1px solid #dee2e6', overflow: 'hidden' }}>
|
||
<div
|
||
className="w-100 h-100 d-flex align-items-center justify-content-center text-white fw-bold"
|
||
style={{
|
||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
||
}}
|
||
>
|
||
Пример группы
|
||
</div>
|
||
<div
|
||
className="position-absolute top-0 start-0 w-100 h-100"
|
||
style={{
|
||
backgroundColor: settings.group_overlay_color || '#000000',
|
||
opacity: settings.group_overlay_opacity || 0.3
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-12">
|
||
<div className="alert alert-info">
|
||
<i className="bi bi-info-circle me-2"></i>
|
||
<strong>{t('customization.advanced.individualGroupSettings')}</strong><br/>
|
||
Чтобы настроить конкретную группу (публичность, избранное, разворачивание), используйте кнопку редактирования рядом с названием группы в основном списке.
|
||
</div>
|
||
</div>
|
||
|
||
{/* Секция цветового оверлея кнопок ссылок */}
|
||
<div className="col-12 mt-4">
|
||
<div className="border rounded p-3">
|
||
<div className="d-flex align-items-center justify-content-between mb-3">
|
||
<h6 className="mb-0">{t('customization.colors.linkOverlay')}</h6>
|
||
<div className="form-check form-switch">
|
||
<input
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
id="linkOverlay"
|
||
checked={settings.link_overlay_enabled || false}
|
||
onChange={(e) => {
|
||
console.log('Link overlay enabled:', e.target.checked)
|
||
handleChange('link_overlay_enabled', e.target.checked)
|
||
}}
|
||
/>
|
||
<label className="form-check-label" htmlFor="linkOverlay">
|
||
Включить цветовое перекрытие кнопок ссылок
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
{settings.link_overlay_enabled && (
|
||
<>
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">Цвет перекрытия</label>
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.link_overlay_color || '#000000'}
|
||
onChange={(e) => {
|
||
console.log('Link overlay color:', e.target.value)
|
||
handleChange('link_overlay_color', e.target.value)
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">
|
||
Прозрачность ({Math.round((settings.link_overlay_opacity || 0.2) * 100)}%)
|
||
</label>
|
||
<input
|
||
type="range"
|
||
className="form-range"
|
||
min="0"
|
||
max="1"
|
||
step="0.1"
|
||
value={settings.link_overlay_opacity || 0.2}
|
||
onChange={(e) => {
|
||
const value = parseFloat(e.target.value)
|
||
console.log('Link overlay opacity:', value)
|
||
handleChange('link_overlay_opacity', value)
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="col-12">
|
||
<label className="form-label">Предварительный просмотр</label>
|
||
<div className="position-relative rounded" style={{ height: '60px', border: '1px solid #dee2e6', overflow: 'hidden' }}>
|
||
<div
|
||
className="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
|
||
style={{
|
||
backgroundColor: '#f8f9fa',
|
||
color: '#333',
|
||
fontSize: '14px',
|
||
fontWeight: '500'
|
||
}}
|
||
>
|
||
Кнопка ссылки
|
||
</div>
|
||
<div
|
||
className="position-absolute top-0 start-0 w-100 h-100"
|
||
style={{
|
||
backgroundColor: settings.link_overlay_color || '#000000',
|
||
opacity: settings.link_overlay_opacity || 0.2,
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Вкладка: Шаблоны */}
|
||
{activeTab === 'templates' && (
|
||
<div className="tab-pane fade show active">
|
||
<TemplatesSelector
|
||
onTemplateSelect={handleTemplateSelect}
|
||
currentTemplate={getCurrentTemplateId()}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Вкладка: Дополнительно */}
|
||
{activeTab === 'advanced' && (
|
||
<div className="tab-pane fade show active">
|
||
<div className="row">
|
||
<div className="col-12 mb-4">
|
||
<h6 className="text-muted">{t('customization.advanced.fontSettings')}</h6>
|
||
</div>
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">{t('customization.advanced.mainFont')}</label>
|
||
<select
|
||
className="form-select"
|
||
value={settings.font_family}
|
||
onChange={(e) => handleChange('font_family', e.target.value)}
|
||
>
|
||
<option value="sans-serif">{t('customization.advanced.systemSansSerif')}</option>
|
||
<option value="serif">{t('customization.advanced.systemSerif')}</option>
|
||
<option value="monospace">Monospace</option>
|
||
<option value="'PT Sans', sans-serif">PT Sans</option>
|
||
<option value="'PT Serif', serif">PT Serif</option>
|
||
<option value="'Roboto', sans-serif">Roboto</option>
|
||
<option value="'Open Sans', sans-serif">Open Sans</option>
|
||
<option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
|
||
<option value="'Fira Sans', sans-serif">Fira Sans</option>
|
||
<option value="'Ubuntu', sans-serif">Ubuntu</option>
|
||
<option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
|
||
<option value="'Inter', sans-serif">Inter</option>
|
||
<option value="'Manrope', sans-serif">Manrope</option>
|
||
<option value="'Nunito Sans', sans-serif">Nunito Sans</option>
|
||
</select>
|
||
</div>
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">{t('customization.advanced.headingFont')}</label>
|
||
<select
|
||
className="form-select"
|
||
value={settings.heading_font_family || settings.font_family}
|
||
onChange={(e) => handleChange('heading_font_family', e.target.value)}
|
||
>
|
||
<option value="">{t('customization.advanced.sameAsMain')}</option>
|
||
<option value="'PT Sans', sans-serif">PT Sans</option>
|
||
<option value="'PT Serif', serif">PT Serif</option>
|
||
<option value="'Roboto', sans-serif">Roboto</option>
|
||
<option value="'Open Sans', sans-serif">Open Sans</option>
|
||
<option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
|
||
<option value="'Fira Sans', sans-serif">Fira Sans</option>
|
||
<option value="'Ubuntu', sans-serif">Ubuntu</option>
|
||
<option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
|
||
<option value="'Inter', sans-serif">Inter</option>
|
||
<option value="'Manrope', sans-serif">Manrope</option>
|
||
<option value="'Montserrat', sans-serif">Montserrat</option>
|
||
<option value="'Playfair Display', serif">Playfair Display</option>
|
||
<option value="'Merriweather', serif">Merriweather</option>
|
||
<option value="'Oswald', sans-serif">Oswald</option>
|
||
<option value="'Russo One', sans-serif">Russo One</option>
|
||
<option value="'Comfortaa', cursive">Comfortaa</option>
|
||
<option value="'Philosopher', sans-serif">Philosopher</option>
|
||
<option value="'Cormorant Garamond', serif">Cormorant Garamond</option>
|
||
<option value="'Marck Script', cursive">Marck Script</option>
|
||
</select>
|
||
</div>
|
||
<div className="col-md-6 mb-3">
|
||
<label className="form-label">{t('customization.advanced.bodyFont')}</label>
|
||
<select
|
||
className="form-select"
|
||
value={settings.body_font_family || settings.font_family}
|
||
onChange={(e) => handleChange('body_font_family', e.target.value)}
|
||
>
|
||
<option value="">{t('customization.advanced.sameAsMain')}</option>
|
||
<option value="'PT Sans', sans-serif">PT Sans</option>
|
||
<option value="'PT Serif', serif">PT Serif</option>
|
||
<option value="'Roboto', sans-serif">Roboto</option>
|
||
<option value="'Open Sans', sans-serif">Open Sans</option>
|
||
<option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
|
||
<option value="'Fira Sans', sans-serif">Fira Sans</option>
|
||
<option value="'Ubuntu', sans-serif">Ubuntu</option>
|
||
<option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
|
||
<option value="'Inter', sans-serif">Inter</option>
|
||
<option value="'Manrope', sans-serif">Manrope</option>
|
||
<option value="'Nunito Sans', sans-serif">Nunito Sans</option>
|
||
<option value="'Lato', sans-serif">Lato</option>
|
||
<option value="'Source Serif Pro', serif">Source Serif Pro</option>
|
||
<option value="'Crimson Text', serif">Crimson Text</option>
|
||
<option value="Inter, sans-serif">Inter</option>
|
||
<option value="Roboto, sans-serif">Roboto</option>
|
||
<option value="Open Sans, sans-serif">Open Sans</option>
|
||
<option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
|
||
<option value="Lato, sans-serif">Lato</option>
|
||
<option value="Nunito, sans-serif">Nunito</option>
|
||
<option value="Georgia, serif">Georgia</option>
|
||
<option value="Times New Roman, serif">Times New Roman</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="col-12 mb-4">
|
||
<hr />
|
||
<h6 className="text-muted">{t('customization.advanced.additionalSettings')}</h6>
|
||
</div>
|
||
|
||
<div className="col-12 mb-3">
|
||
<label className="form-label">{t('customization.advanced.customCSS')}</label>
|
||
<textarea
|
||
className="form-control font-monospace"
|
||
rows={6}
|
||
value={settings.custom_css}
|
||
onChange={(e) => handleChange('custom_css', e.target.value)}
|
||
placeholder="/* Ваш дополнительный CSS */ .my-custom-class { color: #333; }"
|
||
/>
|
||
</div>
|
||
|
||
{/* Cover Overlay Section */}
|
||
<div className="col-12 mb-3">
|
||
<div className="card">
|
||
<div className="card-header">
|
||
<h6 className="mb-0">Перекрытие обложки</h6>
|
||
</div>
|
||
<div className="card-body">
|
||
<div className="form-check mb-3">
|
||
<input
|
||
className="form-check-input"
|
||
type="checkbox"
|
||
id="coverOverlayEnabled"
|
||
checked={settings.cover_overlay_enabled || false}
|
||
onChange={(e) => handleChange('cover_overlay_enabled', e.target.checked)}
|
||
/>
|
||
<label className="form-check-label" htmlFor="coverOverlayEnabled">
|
||
Включить цветовое перекрытие обложки
|
||
</label>
|
||
</div>
|
||
|
||
{settings.cover_overlay_enabled && (
|
||
<>
|
||
<div className="row">
|
||
<div className="col-6 mb-3">
|
||
<label className="form-label">Цвет перекрытия</label>
|
||
<div className="d-flex gap-2">
|
||
<input
|
||
type="color"
|
||
className="form-control form-control-color"
|
||
value={settings.cover_overlay_color || '#000000'}
|
||
onChange={(e) => handleChange('cover_overlay_color', e.target.value)}
|
||
title="Выберите цвет перекрытия"
|
||
/>
|
||
<input
|
||
type="text"
|
||
className="form-control"
|
||
value={settings.cover_overlay_color || '#000000'}
|
||
onChange={(e) => handleChange('cover_overlay_color', e.target.value)}
|
||
placeholder="#000000"
|
||
title="Hex код цвета"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-6 mb-3">
|
||
<label className="form-label">
|
||
Прозрачность ({Math.round((settings.cover_overlay_opacity || 0.3) * 100)}%)
|
||
</label>
|
||
<input
|
||
type="range"
|
||
className="form-range"
|
||
min="0"
|
||
max="1"
|
||
step="0.1"
|
||
value={settings.cover_overlay_opacity || 0.3}
|
||
onChange={(e) => handleChange('cover_overlay_opacity', parseFloat(e.target.value))}
|
||
title="Настройка прозрачности перекрытия"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Preview */}
|
||
<div className="mb-3">
|
||
<label className="form-label">Предварительный просмотр</label>
|
||
<div className="position-relative" style={{ height: '100px', border: '1px solid #dee2e6', borderRadius: '0.375rem', overflow: 'hidden' }}>
|
||
<div
|
||
className="w-100 h-100"
|
||
style={{
|
||
background: 'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)',
|
||
backgroundSize: '20px 20px',
|
||
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px'
|
||
}}
|
||
></div>
|
||
<div
|
||
className="position-absolute top-0 start-0 w-100 h-100"
|
||
style={{
|
||
backgroundColor: settings.cover_overlay_color || '#000000',
|
||
opacity: settings.cover_overlay_opacity || 0.3
|
||
}}
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<div className="modal-footer">
|
||
<button
|
||
type="button"
|
||
className="btn btn-secondary"
|
||
onClick={onClose}
|
||
>
|
||
Отмена
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-outline-warning"
|
||
onClick={() => {
|
||
if (confirm(t('customization.advanced.resetConfirm'))) {
|
||
// Сброс к дефолтным настройкам
|
||
const defaultSettings = {
|
||
theme_color: '#007bff',
|
||
background_image_url: '',
|
||
dashboard_layout: 'list' as const,
|
||
groups_default_expanded: true,
|
||
show_group_icons: true,
|
||
show_link_icons: true,
|
||
dashboard_background_color: '#ffffff',
|
||
font_family: 'Inter, sans-serif',
|
||
custom_css: '',
|
||
group_text_color: '',
|
||
link_text_color: '',
|
||
header_text_color: '',
|
||
cover_overlay_enabled: false,
|
||
cover_overlay_color: '#000000',
|
||
cover_overlay_opacity: 0.3,
|
||
group_overlay_enabled: false,
|
||
group_overlay_color: '#000000',
|
||
group_overlay_opacity: 0.3,
|
||
show_groups_title: true,
|
||
group_description_text_color: '',
|
||
body_font_family: 'Inter, sans-serif',
|
||
heading_font_family: 'Inter, sans-serif',
|
||
link_overlay_enabled: false,
|
||
link_overlay_color: '#000000',
|
||
link_overlay_opacity: 0.3
|
||
}
|
||
setSettings(defaultSettings)
|
||
onSettingsUpdate(defaultSettings)
|
||
}
|
||
}}
|
||
disabled={loading}
|
||
title={t('customization.resetSettings')}
|
||
>
|
||
<i className="bi bi-arrow-counterclockwise me-2"></i>
|
||
{t('customization.resetSettings')}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary"
|
||
onClick={saveSettings}
|
||
disabled={loading}
|
||
>
|
||
{loading ? (
|
||
<>
|
||
<span className="spinner-border spinner-border-sm me-2"></span>
|
||
{t('common.saving')}
|
||
</>
|
||
) : (
|
||
<>
|
||
<i className="bi bi-check-lg me-2"></i>
|
||
{t('common.save')}
|
||
</>
|
||
)}
|
||
</button>
|
||
</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>
|
||
)
|
||
} |