Системный редактор

system.html • /srv/myhost/app/templates/system.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Система</title>
  
  
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest"></script>

<header class="sticky top-0 h-16 border-b border-gray-200 dark:border-gray-700 px-4 md:px-6 flex items-center justify-between shrink-0 bg-white dark:bg-gray-800 shadow-sm z-50">
    <div class="flex items-center gap-2 sm:gap-4 overflow-hidden">
      <a href="/" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition p-2 -ml-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1 shrink-0" title="Назад в панель">
        <i data-lucide="arrow-left" class="w-5 h-5"></i>
        <span class="text-sm font-medium hidden sm:inline">В панель</span>
      </a>
      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 hidden sm:block shrink-0"></div>
      <h1 class="font-bold text-lg flex items-center gap-2 text-gray-900 dark:text-white truncate">
        <i data-lucide="settings" class="w-5 h-5 text-blue-500 shrink-0"></i>
        <span class="truncate">Система</span>
      </h1>
    </div>
    
    <button type="button" onclick="toggleTheme()" class="p-2 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full text-gray-600 dark:text-gray-300 transition shadow-sm shrink-0 ml-2">
      <i data-lucide="moon" class="w-4 h-4 hidden dark:block"></i>
      <i data-lucide="sun" class="w-4 h-4 block dark:hidden"></i>
    </button>
  </header>

<main class="flex-1 p-4 md:p-6 lg:p-8">
    <div class="max-w-4xl mx-auto space-y-6">

<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden flex flex-col">
        
        
        <div class="p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
          <div>
            <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2">
              <i data-lucide="folder-cog" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i> Системные файлы
            </h2>
            <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 mt-2">
              Редактируются только разрешённые конфигурационные файлы проекта. Будьте осторожны при внесении изменений.
            </p>
          </div>
          
          <button type="button" onclick="exportAllSystemFiles(this)" class="shrink-0 px-4 py-2.5 bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white rounded-md text-xs sm:text-sm font-medium transition shadow-sm flex items-center justify-center gap-2" title="Скопировать все файлы разом">
            <i data-lucide="clipboard-copy" class="w-4 h-4"></i>
            Экспорт всех файлов
          </button>
        </div>

<div id="grouped-files-container" class="opacity-0 transition-opacity duration-300 hidden">
          
          {% if system_files %}
            
            <div id="flat-files-source" class="hidden">
              {% for item in system_files %}
              <div class="file-item p-3 sm:p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition flex items-center justify-between gap-3 w-full overflow-hidden" data-path="{{ item.path }}">
                
                <div class="flex items-center gap-3 min-w-0 flex-1">
                  <div class="w-8 h-8 rounded bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
                    <i data-lucide="file-code-2" class="w-4 h-4"></i>
                  </div>
                  
                  <div class="min-w-0 flex-1">
                    <div class="font-medium text-gray-900 dark:text-white text-sm truncate">{{ item.key }}</div>
                    <div class="flex items-center gap-2 mt-0.5 text-[11px] text-gray-500 dark:text-gray-400">
                      <span class="truncate font-mono">{{ item.path }}</span>
                      <span class="shrink-0 flex items-center gap-1"><i data-lucide="hard-drive" class="w-3 h-3"></i>{{ item.size_h }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="shrink-0">
                  <a href="/system/edit/{{ item.key }}" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-xs font-medium transition flex items-center gap-1.5 shadow-sm">
                    <i data-lucide="edit-3" class="w-3.5 h-3.5"></i> Открыть
                  </a>
                </div>
                
              </div>
              {% endfor %}
            </div>
            
            <div id="folders-render-target" class="flex flex-col"></div>
            
          {% else %}
            <div class="p-12 text-center flex flex-col items-center justify-center">
              <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
                <i data-lucide="file-x-2" class="w-8 h-8 text-gray-400 dark:text-gray-500"></i>
              </div>
              <p class="text-base font-medium text-gray-800 dark:text-gray-200">Файлы не найдены</p>
              <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Нет доступных системных файлов для редактирования.</p>
            </div>
          {% endif %}

</div>

</section>

</div>
  </main>

// === СКРИПТ ГРУППИРОВКИ ФАЙЛОВ ПО ПАПКАМ ===
    document.addEventListener("DOMContentLoaded", () => {
      const container = document.getElementById("grouped-files-container");
      const source = document.getElementById("flat-files-source");
      const target = document.getElementById("folders-render-target");
      
      if (!container || !source || !target) return;

const items = Array.from(source.querySelectorAll('.file-item'));
      
      if (items.length > 0) {
        const groups = {};

items.forEach(item => {
          const fullPath = item.getAttribute('data-path');
          const lastSlash = fullPath.lastIndexOf('/');
          const dir = lastSlash !== -1 ? fullPath.substring(0, lastSlash) : '/';
          
          if (!groups[dir]) groups[dir] = [];
          groups[dir].push(item);
        });

Object.keys(groups).sort().forEach(dir => {
          
          const groupWrapper = document.createElement('div');
          groupWrapper.className = "flex flex-col border-b border-gray-100 dark:border-gray-700/50 last:border-0";

const header = document.createElement('div');
          header.className = "px-4 py-2.5 bg-gray-100/80 dark:bg-[#1a1c23] border-b border-gray-200 dark:border-gray-700 flex items-center gap-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors sticky top-16 z-10 backdrop-blur-sm";
          header.innerHTML = `
              <i data-lucide="folder-open" class="folder-icon w-4 h-4 text-blue-500 shrink-0"></i>
              <span class="font-mono text-xs font-bold text-gray-700 dark:text-gray-300 truncate">${dir}</span>
              <span class="ml-auto text-[10px] font-medium text-gray-500 bg-white dark:bg-gray-800 px-2 py-0.5 rounded-full border border-gray-200 dark:border-gray-600 shadow-sm">${groups[dir].length}</span>
          `;

const itemsContainer = document.createElement('div');
          itemsContainer.className = "divide-y divide-gray-100 dark:divide-gray-700/50";
          
          groups[dir].forEach(item => {
              item.style.paddingLeft = "1.5rem";
              itemsContainer.appendChild(item);
          });

header.addEventListener('click', () => {
              const isHidden = itemsContainer.style.display === 'none';
              const icon = header.querySelector('.folder-icon');
              if (isHidden) {
                  itemsContainer.style.display = 'block';
                  icon.setAttribute('data-lucide', 'folder-open');
              } else {
                  itemsContainer.style.display = 'none';
                  icon.setAttribute('data-lucide', 'folder');
              }
              lucide.createIcons();
          });

groupWrapper.appendChild(header);
          groupWrapper.appendChild(itemsContainer);
          target.appendChild(groupWrapper);
        });
      }

container.classList.remove('hidden');
      lucide.createIcons();
      
      setTimeout(() => {
          container.classList.remove('opacity-0');
      }, 50);
    });

// === СКРИПТ ПОЛНОГО ЭКСПОРТА ФАЙЛОВ ===
    
    // Создаём массив путей и ключей из Jinja контекста
    const sysFilesList = [
      {% for item in system_files %}
      { key: "{{ item.key }}", path: "{{ item.path }}" }{{ "," if not loop.last else "" }}
      {% endfor %}
    ];

async function exportAllSystemFiles(btn) {
      const originalHTML = btn.innerHTML;
      
      // Показываем загрузку (так как стягивание всех файлов займёт секунду-две)
      btn.innerHTML = `<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Собираем код...`;
      btn.disabled = true;
      lucide.createIcons();

try {
        // Параллельно загружаем все файлы
        const promises = sysFilesList.map(async (f) => {
          const res = await fetch(`/system/edit/${f.key}`);
          const html = await res.text();
          
          // Парсим HTML и достаем содержимое из textarea
          const doc = new DOMParser().parseFromString(html, "text/html");
          const textarea = doc.getElementById('code-editor');
          const content = textarea ? textarea.value : "";
          
          // Форматируем: путь \n содержимое
          return `${f.path}\n${content}`;
        });

const results = await Promise.all(promises);
        
        // Склеиваем всё с помощью двух переносов строк
        const finalString = results.join('\n\n\n');

// Копируем в буфер
        if (navigator.clipboard && navigator.clipboard.writeText) {
          await navigator.clipboard.writeText(finalString);
        } else {
          const ta = document.createElement("textarea");
          ta.value = finalString;
          ta.style.position = "fixed";
          document.body.appendChild(ta);
          ta.select();
          document.execCommand('copy');
          document.body.removeChild(ta);
        }

// Показываем успех
        btn.classList.replace('bg-gray-800', 'bg-green-600');
        btn.classList.replace('dark:bg-gray-700', 'dark:bg-green-600');
        btn.classList.replace('hover:bg-gray-900', 'hover:bg-green-700');
        btn.classList.replace('dark:hover:bg-gray-600', 'dark:hover:bg-green-700');
        
        btn.innerHTML = `<i data-lucide="check" class="w-4 h-4"></i> Скопировано!`;
        lucide.createIcons();
        
      } catch (err) {
        console.error(err);
        alert("Ошибка при чтении файлов.");
        btn.innerHTML = originalHTML;
        lucide.createIcons();
      }

// Возвращаем кнопку в исходное состояние через 2 секунды
      setTimeout(() => {
        btn.innerHTML = originalHTML;
        btn.classList.replace('bg-green-600', 'bg-gray-800');
        btn.classList.replace('dark:bg-green-600', 'dark:bg-gray-700');
        btn.classList.replace('hover:bg-green-700', 'hover:bg-gray-900');
        btn.classList.replace('dark:hover:bg-green-700', 'dark:hover:bg-gray-600');
        lucide.createIcons();
        btn.disabled = false;
      }, 2500);
    }
  </script>
</body>
</html>

Ручной бэкап

Прошлые версии

system.html-20260315-130005-StableV2-system.html

6.69 KB 2026-03-15T12:59:46

system.html-20260315-125927-Stable-system.html

949.00 B 2026-03-15T12:59:04