From f3508bf7f99d1561849c2a0ae91a9a1071720266 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F=20=D0=91=D1=80=D0=B0=D1=82=D1=81?= =?UTF-8?q?=D0=BA=D0=B8=D1=85?= Date: Sun, 28 Jun 2026 16:44:11 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B5=D1=84=D0=BE=D0=BB=D1=82=D0=BD?= =?UTF-8?q?=D1=8B=D1=85=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B5=D0=BA?= =?UTF-8?q?,=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81?= =?UTF-8?q?=D1=82=D1=8C=20=D0=BC=D0=B5=D0=BD=D1=8E=20=D1=81=D0=B1=D0=BE?= =?UTF-8?q?=D0=BA=D1=83=20=D0=B8=20=D1=81=D0=B2=D0=B5=D1=80=D1=85=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 88 +++++++- examples/README.md | 2 +- examples/flat/index.html | 158 ++++++++++--- examples/flat/settings.json | 24 +- examples/full/index.html | 158 ++++++++++--- examples/full/settings.json | 24 +- examples/mixed/index.html | 158 ++++++++++--- examples/mixed/settings.json | 24 +- examples/section-items/index.html | 158 ++++++++++--- examples/section-items/settings.json | 24 +- examples/shared/script.js | 323 ++++++++++++++++++++++----- examples/shared/styles.css | 67 ++++++ index.html | 56 +++-- script.js | 323 ++++++++++++++++++++++----- settings-top-bar.example.json | 26 +++ settings.json | 27 ++- styles.css | 67 ++++++ 17 files changed, 1468 insertions(+), 239 deletions(-) create mode 100644 settings-top-bar.example.json diff --git a/README.md b/README.md index 945d38f..fbc183a 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ - [Структура проекта](#структура-проекта) - [Конфигурация](#конфигурация) - [`settings.json`](#settingsjson) + - [Пресет организации (`defaults` + `features`)](#пресет-организации-defaults--features) - [Форматы иерархии](#форматы-иерархии) - [Схема `panel-data`](#схема-panel-data) - [Поля данных](#поля-данных) @@ -56,7 +57,8 @@ ecosystem/ ├── index.html # Разметка страницы ├── styles.css # Стили, темы, адаптив ├── script.js # Логика, рендер, примеры структур -├── settings.json # Источник данных (URL или inline) +├── settings.json # Данные + пресет UI организации +├── settings-top-bar.example.json # Пример пресета «шапка сверху» ├── panel-data.json # Данные навигации (рабочий файл) ├── examples/ # Готовые демо-страницы (см. examples/README.md) │ ├── index.html # Оглавление примеров @@ -108,6 +110,69 @@ ecosystem/ При ошибке загрузки или невалидном JSON на странице показывается экран с описанием проблемы. +#### Пресет организации (`defaults` + `features`) + +В `settings.json` можно задать дефолтный вид панели для организации и ограничить, что пользователь может менять в ⚙. + +```json +{ + "dataUrl": "./panel-data.json", + "defaults": { + "navLayout": "sidebar", + "theme": "dark", + "view": "cards", + "accent": "violet", + "showNumbers": false, + "showTreeTags": true, + "treeTwoColumn": false, + "autoCollapseSearch": true, + "sidebarWidth": 390, + "searchPlaceholder": "Grafana, S3, журнал, сервер..." + }, + "features": { + "allowNavLayoutChange": true, + "allowSearch": true, + "allowViewChange": true, + "allowShowNumbers": true, + "allowTreeOptions": true, + "allowSidebarResize": true, + "allowThemeChange": true, + "allowAccentChange": true + } +} +``` + +| `defaults` | Варианты | Описание | +|------------|----------|----------| +| `navLayout` | `"sidebar"`, `"top"` | `"sidebar"` — дерево слева; `"top"` — шапка с названием и поиском, без дерева | +| `theme` | `"dark"`, `"light"` | Стартовая цветовая тема | +| `view` | `"cards"`, `"list"`, `"compact-cards"`, `"compact-list"` | Режим отображения каталога | +| `accent` | `"violet"`, `"cyan"`, `"lime"`, `"amber"`, `"custom"` | Пресет акцента; при `"custom"` используются поля градиента ниже | +| `customAccentFrom` | `#rrggbb` | Цвет «от» для `accent: "custom"` (по умолчанию `#8b5cf6`) | +| `customAccentTo` | `#rrggbb` | Цвет «до» для `accent: "custom"` (по умолчанию `#22d3ee`) | +| `customAccentAngle` | `0`–`360` | Угол градиента в градусах (по умолчанию `135`) | +| `showNumbers` | `true`, `false` | Показывать номера разделов, подразделов и элементов | +| `showTreeTags` | `true`, `false` | Теги рядом с элементами в дереве (взаимоисключимо с `treeTwoColumn`) | +| `treeTwoColumn` | `true`, `false` | Элементы папок дерева в 2 колонки (взаимоисключимо с `showTreeTags`) | +| `autoCollapseSearch` | `true`, `false` | При поиске сворачивать ветки дерева без совпадений | +| `sidebarWidth` | `260`–`560` (`760` при `treeTwoColumn: true`) | Ширина боковой панели в px; игнорируется при `navLayout: "top"` | +| `searchPlaceholder` | произвольная строка | Текст-подсказка в поле поиска | + +| `features` | Варианты | Описание | +|------------|----------|----------| +| `allowNavLayoutChange` | `true`, `false` | Переключатель «Сбоку / Сверху» | +| `allowSearch` | `true`, `false` | Поле поиска | +| `allowViewChange` | `true`, `false` | Режимы каталога | +| `allowShowNumbers` | `true`, `false` | Нумерация | +| `allowTreeOptions` | `true`, `false` | Теги, 2 колонки, авто-раскрытие дерева | +| `allowSidebarResize` | `true`, `false` | Drag-resize боковой панели | +| `allowThemeChange` | `true`, `false` | Светлая / тёмная тема | +| `allowAccentChange` | `true`, `false` | Пресеты и свой градиент | + +Пользовательские изменения сохраняются в `localStorage`, но заблокированные `features` всегда возвращаются к `defaults`. + +Пример пресета «только шапка»: [`settings-top-bar.example.json`](settings-top-bar.example.json) — `navLayout: "top"`, дерево и resize отключены. + ### Форматы иерархии Панель поддерживает три базовых формата. Старый **section → group → item** работает без изменений. @@ -257,17 +322,18 @@ npx serve . ## Настройки интерфейса (⚙) -Доступны в popup-окне и сохраняются в `localStorage` (`ecosystem-panel-preferences`): +Popup сгруппирован по разделам. Доступные блоки зависят от `features` в `settings.json`. Изменения пользователя сохраняются в `localStorage` (`ecosystem-panel-preferences`). -| Настройка | Описание | -|-----------|----------| -| **Тема** | Светлая / тёмная | -| **Вид** | Плитки, список, компакт плитки, компакт список | -| **Нумерация** | Показывать номера разделов, подразделов и элементов | -| **Теги дерева** | Поисковые теги рядом с элементами в дереве | -| **2 колонки в дереве** | Элементы папок в 2 колонки (взаимоисключимо с тегами) | -| **Авто раскрывать поиск** | При поиске сворачивать ветки без совпадений | -| **Акцент** | violet, cyan, lime, amber или свой градиент | +| Раздел | Настройки | +|--------|-----------| +| **Макет** | Панель навигации: **Сбоку** (дерево + поиск) или **Сверху** (только название и поиск) | +| **Каталог** | Вид карточек, нумерация | +| **Дерево** | Теги, 2 колонки, авто-раскрытие поиска (только при `navLayout: sidebar`) | +| **Оформление** | Тема, акцент, свой градиент | + +### Режим «Сверху» + +Компактная шапка над каталогом: заголовок панели, поиск и ⚙. Дерево навигации скрыто — переход только через карточки каталога. Подходит для простых порталов и когда дерево избыточно. ### Свой градиент diff --git a/examples/README.md b/examples/README.md index 1610df3..14d0986 100644 --- a/examples/README.md +++ b/examples/README.md @@ -51,7 +51,7 @@ npx serve . | Файл | Назначение | |------|------------| | `index.html` | Страница панели, подключает `../shared/` | -| `settings.json` | Указывает `./panel-data.json` | +| `settings.json` | Указывает `./panel-data.json` и пресет UI (`defaults`, `features`) | | `panel-data.json` | Демо-данные выбранного формата | ## Обновление shared/ diff --git a/examples/flat/index.html b/examples/flat/index.html index 3554015..2a6f59d 100644 --- a/examples/flat/index.html +++ b/examples/flat/index.html @@ -1,4 +1,4 @@ - + @@ -17,13 +17,21 @@ +
+
+ + +
+
@@ -70,28 +91,57 @@
-
- Тема - - -
+ +
+

Макет

+
+ Панель навигации + + +
+

+ Режим «Сверху» — компактная шапка с названием и поиском, без дерева. +

+
-
+
+

Каталог

+ + +
Вид - - - - + + + +
-
+
+

Дерево

+ + + + +
-
+
+

Оформление

+ +
+ Тема + + +
+ + +
Акцент - - - - - + + + +
-
+
+ +