From 50a04e3856e8e42e1fd33970756c81dc5506fbeb 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 18:14:01 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=B0=D1=86=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 59 +++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 44 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index c7f1ebe..7353f53 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,9 @@ - **4 режима отображения**: плитки, список, компактные плитки, компактный список - **Темы**: светлая / тёмная, 4 пресета акцента + свой градиент - **Настройки** через popup (иконка ⚙) -- **Изменяемая ширина** бокового меню (drag) +- **Изменяемая ширина** бокового меню и **высота** верхней шапки (drag, можно скрыть ручки) +- **Габариты** — лимиты ширины контента, меню и шапки (⚙, для администратора) +- **Колонки каталога** — число элементов в строке для каждого из 4 режимов отображения - **Сохранение состояния** в `localStorage` (настройки UI, раскрытие веток) - **Конфигурация через JSON** — локальный объект или загрузка по URL - **Гибкая иерархия**: полная вложенность, раздел без подраздела, плоский список @@ -119,6 +121,8 @@ ecosystem/ "dataUrl": "./panel-data.json", "defaults": { "navLayout": "sidebar", + "showTree": true, + "showResizeHandles": true, "theme": "dark", "view": "cards", "accent": "violet", @@ -138,6 +142,10 @@ ecosystem/ "treeSidebarColumnWidth": 120, "topBarMinHeight": 80, "topBarMaxHeight": 560, + "catalogCardsColumns": 3, + "catalogListColumns": 1, + "catalogCompactCardsColumns": 5, + "catalogCompactListColumns": 3, "searchPlaceholder": "Grafana, S3, журнал, сервер..." }, "limits": { @@ -148,12 +156,18 @@ ecosystem/ "treeSidebarBaseWidth": { "min": 280, "max": 720 }, "treeSidebarColumnWidth": { "min": 60, "max": 200 }, "topBarMinHeight": { "min": 64, "max": 240 }, - "topBarMaxHeight": { "min": 160, "max": 800 } + "topBarMaxHeight": { "min": 160, "max": 800 }, + "catalogCardsColumns": { "min": 1, "max": 6 }, + "catalogListColumns": { "min": 1, "max": 4 }, + "catalogCompactCardsColumns": { "min": 2, "max": 8 }, + "catalogCompactListColumns": { "min": 1, "max": 6 } }, "features": { "allowNavLayoutChange": true, + "allowShowTreeChange": true, "allowSearch": true, "allowViewChange": true, + "allowCatalogColumnsChange": true, "allowShowNumbers": true, "allowTreeOptions": true, "allowSidebarResize": true, @@ -168,6 +182,7 @@ ecosystem/ |------------|----------|----------| | `navLayout` | `"sidebar"`, `"top"` | `"sidebar"` — панель слева; `"top"` — шапка с названием и поиском | | `showTree` | `true`, `false` | Показывать дерево навигации (в любом режиме макета) | +| `showResizeHandles` | `true`, `false` | Показывать ручки drag-resize меню / шапки | | `theme` | `"dark"`, `"light"` | Стартовая цветовая тема | | `view` | `"cards"`, `"list"`, `"compact-cards"`, `"compact-list"` | Режим отображения каталога | | `accent` | `"violet"`, `"cyan"`, `"lime"`, `"amber"`, `"custom"` | Пресет акцента; при `"custom"` используются поля градиента ниже | @@ -190,6 +205,10 @@ ecosystem/ | `treeSidebarColumnWidth` | см. `limits.treeSidebarColumnWidth` | Прирост ширины меню за каждую колонку дерева | | `topBarMinHeight` | см. `limits.topBarMinHeight` | Минимальная высота шапки в режиме «Сверху» | | `topBarMaxHeight` | см. `limits.topBarMaxHeight` | Максимальная высота шапки (также ограничена ~75% окна) | +| `catalogCardsColumns` | см. `limits.catalogCardsColumns` | Колонок в строке в режиме «Плитки» | +| `catalogListColumns` | см. `limits.catalogListColumns` | Колонок в строке в режиме «Список» | +| `catalogCompactCardsColumns` | см. `limits.catalogCompactCardsColumns` | Колонок в строке в режиме «Компакт плитки» | +| `catalogCompactListColumns` | см. `limits.catalogCompactListColumns` | Колонок в строке в режиме «Компакт список» | | `searchPlaceholder` | произвольная строка | Текст-подсказка в поле поиска | | `limits` | Формат | Описание | @@ -202,6 +221,10 @@ ecosystem/ | `treeSidebarColumnWidth` | `{ "min", "max" }` | Диапазон «Дерево: ширина колонки» | | `topBarMinHeight` | `{ "min", "max" }` | Диапазон «Шапка: мин. высота» | | `topBarMaxHeight` | `{ "min", "max" }` | Диапазон «Шапка: макс. высота» | +| `catalogCardsColumns` | `{ "min", "max" }` | Диапазон колонок каталога «Плитки» | +| `catalogListColumns` | `{ "min", "max" }` | Диапазон колонок каталога «Список» | +| `catalogCompactCardsColumns` | `{ "min", "max" }` | Диапазон колонок «Компакт плитки» | +| `catalogCompactListColumns` | `{ "min", "max" }` | Диапазон колонок «Компакт список» | При `treeColumns > 1` фактический потолок ширины меню: `min(sidebarMaxWidthWide, treeSidebarBaseWidth + treeColumns × treeSidebarColumnWidth)`. @@ -210,12 +233,13 @@ ecosystem/ | `features` | Варианты | Описание | |------------|----------|----------| | `allowNavLayoutChange` | `true`, `false` | Переключатель «Сбоку / Сверху» | -| `allowShowTreeChange` | `true`, `false` | Показ/скрытие дерева и кнопка «Скрыть дерево» в панели | +| `allowShowTreeChange` | `true`, `false` | Toggle «Показывать дерево» в ⚙ → Макет | | `allowSearch` | `true`, `false` | Поле поиска | -| `allowViewChange` | `true`, `false` | Режимы каталога | +| `allowViewChange` | `true`, `false` | Режимы каталога (плитки / список / компакт) | +| `allowCatalogColumnsChange` | `true`, `false` | Слайдеры «колонок в строке» для каждого вида каталога | | `allowShowNumbers` | `true`, `false` | Нумерация | -| `allowTreeOptions` | `true`, `false` | Колонки, теги, тип, расположение мета, авто-раскрытие дерева | -| `allowSidebarResize` | `true`, `false` | Drag-resize боковой панели (ширина) или верхней шапки (высота) | +| `allowTreeOptions` | `true`, `false` | Колонки дерева (1–6), теги, тип, расположение мета, авто-раскрытие | +| `allowSidebarResize` | `true`, `false` | Drag-resize и toggle «Ручки изменения размера» | | `allowLayoutLimitsChange` | `true`, `false` | Раздел ⚙ «Габариты»: лимиты ширины контента и навигации | | `allowThemeChange` | `true`, `false` | Светлая / тёмная тема | | `allowAccentChange` | `true`, `false` | Пресеты и свой градиент | @@ -380,9 +404,10 @@ Popup сгруппирован по разделам. Доступные бло | Раздел | Настройки | |--------|-----------| -| **Макет** | **Сбоку** / **Сверху**; при «Сбоку» — toggle «Показывать дерево» и кнопка «Скрыть/Показать дерево» в панели | -| **Каталог** | Вид карточек, нумерация | -| **Дерево** | Теги, 2 колонки, авто-раскрытие (при `showTree: true`; 2 колонки — только «Сбоку») | +| **Макет** | **Сбоку** / **Сверху**; toggle «Показывать дерево»; toggle «Ручки изменения размера» | +| **Габариты** | Лимиты ширины контента, меню и шапки (сворачиваемый блок; при `allowLayoutLimitsChange`) | +| **Каталог** | Вид карточек, колонок в строке для каждого вида, нумерация | +| **Дерево** | Колонок 1–6, теги, тип, расположение мета, авто-раскрытие (при `showTree: true`) | | **Оформление** | Тема, акцент, свой градиент | ### Режим «Сверху» @@ -391,7 +416,7 @@ Popup сгруппирован по разделам. Доступные бло ### Скрытие дерева -Дерево управляется отдельно от макета (`showTree`). Переключение — в ⚙ → **Макет** или кнопкой **Скрыть/Показать дерево** под поиском. +Дерево управляется отдельно от макета (`showTree`). Переключение — в ⚙ → **Макет**. ### Свой градиент @@ -422,14 +447,18 @@ Popup сгруппирован по разделам. Доступные бло ### Адаптив -- **Touch-устройства** (`pointer: coarse` / `hover: none`): stacked-layout, меню сверху +- **Touch-устройства** (`pointer: coarse` / `hover: none`): stacked-layout, меню сверху, ручки resize скрыты - **Мышь** (`pointer: fine` + `hover: hover`): sidebar + resizer + каталог в колонках -- **2 колонки в дереве на touch**: в portrait или при ширине от 520px +- На узких экранах число колонок каталога дополнительно ограничивается в CSS (чтобы сетка не ломалась) -### Ширина layout +### Ширина и габариты layout -- Обычный режим: max **1560px**, sidebar до **560px** -- Режим «2 колонки в дереве»: max **1920px**, sidebar до **760px** +Лимиты задаются в `settings.json` → `defaults` и `limits`, настраиваются пользователем в ⚙ → **Габариты** (если `allowLayoutLimitsChange: true`): + +- **`shellMaxWidth`** — максимальная ширина всей панели (по умолчанию до 2800px) +- **`sidebarMaxWidth`** / **`sidebarMaxWidthWide`** — потолок ширины меню (1 колонка дерева / несколько) +- **`topBarMinHeight`** / **`topBarMaxHeight`** — диапазон высоты шапки в режиме «Сверху» +- Текущие **`sidebarWidth`** и **`topBarHeight`** — drag-resize; сохраняются в `localStorage` ## localStorage