Обновление документации
This commit is contained in:
parent
459fc98bf1
commit
50a04e3856
59
README.md
59
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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user