666 lines
31 KiB
TypeScript
666 lines
31 KiB
TypeScript
import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
|
||
import { applyNodedcTheme, type NodedcTheme, type RgbTuple } from "@nodedc/ui-core";
|
||
import {
|
||
AdminNavigationPanel,
|
||
AppHeader,
|
||
ApplicationPanel,
|
||
ApplicationShell,
|
||
Button,
|
||
Checker,
|
||
ColorField,
|
||
ConfirmationModal,
|
||
ControlRow,
|
||
Dropdown,
|
||
FieldFrame,
|
||
GlassSurface,
|
||
HeaderAvatar,
|
||
HeaderNavigation,
|
||
HeaderProfile,
|
||
HeaderProfileButton,
|
||
HeaderWorkspace,
|
||
Icon,
|
||
IconButton,
|
||
Inspector,
|
||
MediaSourceField,
|
||
RangeControl,
|
||
Select,
|
||
SettingsCard,
|
||
StatusBadge,
|
||
Switch,
|
||
TextAreaField,
|
||
TextField,
|
||
useApplicationWorkspace,
|
||
Window,
|
||
WindowFooterActions,
|
||
type IconName,
|
||
} from "@nodedc/ui-react";
|
||
|
||
type CatalogSection = "foundation" | "controls" | "media" | "windows" | "modals" | "inspector" | "icons";
|
||
|
||
const engineAccentStyle = {
|
||
"--nodedc-accent-rgb": "148 123 219",
|
||
"--nodedc-on-accent-rgb": "247 248 244",
|
||
} as CSSProperties;
|
||
|
||
const accents: Array<{ label: string; value: RgbTuple; hex: string }> = [
|
||
{ label: "Hub", value: [195, 255, 102], hex: "#c3ff66" },
|
||
{ label: "Engine", value: [148, 123, 219], hex: "#947bdb" },
|
||
{ label: "BIM", value: [78, 164, 255], hex: "#4ea4ff" },
|
||
{ label: "SEO", value: [32, 32, 34], hex: "#202022" },
|
||
];
|
||
|
||
const selectOptions = [
|
||
{ value: "active", label: "Активен", description: "Сервис доступен пользователям" },
|
||
{ value: "maintenance", label: "Техработы", description: "Временно недоступен" },
|
||
{ value: "disabled", label: "Отключён", description: "Запуск запрещён" },
|
||
] as const;
|
||
|
||
const sectionDefinitions: Record<CatalogSection, { eyebrow: string; title: string; description: string; icon: IconName }> = {
|
||
foundation: {
|
||
eyebrow: "01 / FOUNDATION",
|
||
title: "Основа",
|
||
description: "Тема, акцент, стекло и неизменяемая геометрия приложения.",
|
||
icon: "panel",
|
||
},
|
||
controls: {
|
||
eyebrow: "02 / CONTROLS",
|
||
title: "Контролы",
|
||
description: "Кнопки, поля, selection, Engine-настройки и понятные статусы операций.",
|
||
icon: "sliders",
|
||
},
|
||
media: {
|
||
eyebrow: "03 / MEDIA & SETTINGS",
|
||
title: "Медиа и настройки",
|
||
description: "Общий CMS/Launcher-контракт файла, URL, превью и нейтральных карточек настроек.",
|
||
icon: "image",
|
||
},
|
||
windows: {
|
||
eyebrow: "04 / WINDOWS",
|
||
title: "Окна",
|
||
description: "Обычные окна и modeless-панели с единым portal- и focus-контрактом.",
|
||
icon: "apps",
|
||
},
|
||
modals: {
|
||
eyebrow: "05 / MODALS",
|
||
title: "Модалки",
|
||
description: "Создание, подтверждение и разрушительные действия в адаптивном формате.",
|
||
icon: "clipboard",
|
||
},
|
||
inspector: {
|
||
eyebrow: "06 / INSPECTOR",
|
||
title: "Инспектор",
|
||
description: "Точный новый Engine Environment Settings без legacy-инспекторов.",
|
||
icon: "settings",
|
||
},
|
||
icons: {
|
||
eyebrow: "07 / ICONS",
|
||
title: "Иконки",
|
||
description: "Канонический общий набор по Launcher, SEO, BIM Viewer и новым участкам Engine.",
|
||
icon: "grid",
|
||
},
|
||
};
|
||
|
||
const iconGroups: Array<{ title: string; note: string; icons: IconName[] }> = [
|
||
{
|
||
title: "Окно и слой",
|
||
note: "Launcher / Hub",
|
||
icons: ["close", "plus", "expand", "minimize", "refresh", "panel", "apps"],
|
||
},
|
||
{
|
||
title: "Навигация",
|
||
note: "Launcher / Engine / BIM",
|
||
icons: ["chevron-left", "chevron-right", "chevron-down", "grid", "list", "sliders", "search"],
|
||
},
|
||
{
|
||
title: "Редактирование",
|
||
note: "Launcher / SEO",
|
||
icons: ["save", "edit", "trash", "copy", "upload", "download", "external"],
|
||
},
|
||
{
|
||
title: "Состояние и доступ",
|
||
note: "Вся платформа",
|
||
icons: ["check", "alert", "activity", "lock", "key", "shield", "circle"],
|
||
},
|
||
{
|
||
title: "Сущности",
|
||
note: "Общий словарь",
|
||
icons: ["profile", "users", "building", "globe", "database", "network", "inbox", "mail"],
|
||
},
|
||
{
|
||
title: "Контент",
|
||
note: "SEO / BIM / Engine",
|
||
icons: ["image", "video", "file", "folder", "clipboard", "settings"],
|
||
},
|
||
];
|
||
|
||
const iconLabels: Record<IconName, string> = {
|
||
activity: "Активность",
|
||
alert: "Предупреждение",
|
||
apps: "Приложения",
|
||
building: "Компания",
|
||
check: "Готово",
|
||
"chevron-down": "Раскрыть",
|
||
"chevron-left": "Назад",
|
||
"chevron-right": "Вперёд",
|
||
circle: "Маркер",
|
||
clipboard: "Список",
|
||
close: "Закрыть",
|
||
copy: "Копировать",
|
||
database: "База данных",
|
||
download: "Скачать",
|
||
edit: "Редактировать",
|
||
expand: "Развернуть",
|
||
external: "Открыть снаружи",
|
||
file: "Файл",
|
||
folder: "Папка",
|
||
globe: "Публичный контур",
|
||
grid: "Обзор",
|
||
image: "Изображение",
|
||
inbox: "Уведомления",
|
||
key: "Ключ",
|
||
list: "Список задач",
|
||
lock: "Закрыто",
|
||
mail: "Приглашение",
|
||
minimize: "Свернуть",
|
||
network: "Связи",
|
||
panel: "Панель",
|
||
plus: "Добавить",
|
||
profile: "Профиль",
|
||
refresh: "Обновить",
|
||
save: "Сохранить",
|
||
search: "Поиск",
|
||
settings: "Настройки",
|
||
shield: "Доступ",
|
||
sliders: "Параметры",
|
||
trash: "Удалить",
|
||
upload: "Загрузить",
|
||
users: "Участники",
|
||
video: "Видео",
|
||
};
|
||
|
||
function rgbFromHex(hex: string): RgbTuple | null {
|
||
const normalized = hex.trim().replace(/^#/, "");
|
||
if (!/^[0-9a-f]{6}$/i.test(normalized)) return null;
|
||
return [
|
||
Number.parseInt(normalized.slice(0, 2), 16),
|
||
Number.parseInt(normalized.slice(2, 4), 16),
|
||
Number.parseInt(normalized.slice(4, 6), 16),
|
||
];
|
||
}
|
||
|
||
function Preview({ title, note, children, className }: {
|
||
title: string;
|
||
note?: string;
|
||
children: ReactNode;
|
||
className?: string;
|
||
}) {
|
||
return (
|
||
<GlassSurface className={`catalog-preview ${className ?? ""}`} padding="lg">
|
||
<div className="catalog-preview__head">
|
||
<strong>{title}</strong>
|
||
{note ? <span>{note}</span> : null}
|
||
</div>
|
||
<div className="catalog-preview__body">{children}</div>
|
||
</GlassSurface>
|
||
);
|
||
}
|
||
|
||
export function CatalogApp() {
|
||
const [theme, setTheme] = useState<NodedcTheme>("dark");
|
||
const [accentHex, setAccentHex] = useState("#c3ff66");
|
||
const workspace = useApplicationWorkspace<CatalogSection>();
|
||
const { navigationOpen: guidelineOpen, activeView: activeSection, contentExpanded: panelExpanded } = workspace;
|
||
const [selectedStatus, setSelectedStatus] = useState<(typeof selectOptions)[number]["value"]>("active");
|
||
const [checker, setChecker] = useState(true);
|
||
const [brightness, setBrightness] = useState(49);
|
||
const [glowDistance, setGlowDistance] = useState(105);
|
||
const [usePortColors, setUsePortColors] = useState(false);
|
||
const [connectionType, setConnectionType] = useState("spline");
|
||
const [lightColor, setLightColor] = useState("#7a3cff");
|
||
const [connectionColor, setConnectionColor] = useState("#404040");
|
||
const [fillColor, setFillColor] = useState("#8f83ff");
|
||
const [strokeColor, setStrokeColor] = useState("#2b2b36");
|
||
const [windowOpen, setWindowOpen] = useState(false);
|
||
const [inspectorOpen, setInspectorOpen] = useState(false);
|
||
const [createModalOpen, setCreateModalOpen] = useState(false);
|
||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||
const [projectName, setProjectName] = useState("NODE.DC Platform");
|
||
const [notes, setNotes] = useState("Общий контракт компонентов без доменной логики приложения.");
|
||
const [mediaSource, setMediaSource] = useState<"file" | "url">("file");
|
||
const [mediaUrl, setMediaUrl] = useState("");
|
||
const [mediaFileName, setMediaFileName] = useState("hub_vitrina-mqv7yd7k.mov");
|
||
const [mediaVisible, setMediaVisible] = useState(true);
|
||
|
||
const accent = useMemo(() => rgbFromHex(accentHex) ?? accents[0].value, [accentHex]);
|
||
|
||
useEffect(() => {
|
||
applyNodedcTheme(document.documentElement, { theme, accent });
|
||
}, [accent, theme]);
|
||
|
||
const openSection = (next: string) => {
|
||
workspace.openView(next as CatalogSection);
|
||
};
|
||
|
||
const closeGuideline = workspace.closeNavigation;
|
||
|
||
const inspectorSections = [
|
||
{
|
||
id: "illumination",
|
||
label: "Подсветка",
|
||
tone: "accent" as const,
|
||
content: (
|
||
<>
|
||
<ControlRow label="Цвет"><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
|
||
<RangeControl label="Яркость" value={brightness} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setBrightness} />
|
||
<RangeControl label="Дистанция свечения" value={glowDistance} min={0} max={200} formatValue={(value) => `${value}%`} onChange={setGlowDistance} />
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
id: "connections",
|
||
label: "Связи",
|
||
tone: "accent" as const,
|
||
content: (
|
||
<>
|
||
<ControlRow label="Связи по умолчанию" layout="stack">
|
||
<Select
|
||
variant="split"
|
||
label="Тип связи"
|
||
value={connectionType}
|
||
options={[
|
||
{ value: "spline", label: "Сплайн" },
|
||
{ value: "straight", label: "Прямая" },
|
||
{ value: "step", label: "Ступенчатая" },
|
||
]}
|
||
onChange={setConnectionType}
|
||
/>
|
||
</ControlRow>
|
||
<Checker checked={usePortColors} label="Использовать цвет портов" onChange={setUsePortColors} />
|
||
<ControlRow label="Цвет связей по умолчанию"><ColorField value={connectionColor} onChange={setConnectionColor} /></ControlRow>
|
||
<ControlRow label="Применить ко всем"><Button variant="accent" shape="pill" width="full">Применить</Button></ControlRow>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
id: "ports",
|
||
label: "Порты",
|
||
tone: "accent" as const,
|
||
content: (
|
||
<>
|
||
<ControlRow label="Заливка"><ColorField value={fillColor} onChange={setFillColor} /></ControlRow>
|
||
<RangeControl label="Прозрачность" value={100} min={0} max={100} formatValue={(value) => `${value}%`} onChange={() => undefined} />
|
||
<ControlRow label="Обводка"><ColorField value={strokeColor} onChange={setStrokeColor} /></ControlRow>
|
||
<RangeControl label="Прозрачность" value={100} min={0} max={100} formatValue={(value) => `${value}%`} onChange={() => undefined} />
|
||
</>
|
||
),
|
||
},
|
||
];
|
||
|
||
const renderSectionContent = () => {
|
||
switch (activeSection) {
|
||
case "foundation":
|
||
return (
|
||
<div className="catalog-grid catalog-grid--foundation">
|
||
<Preview title="Тема приложения" note={theme === "dark" ? "dark glass" : "light glass"}>
|
||
<div className="catalog-theme-row">
|
||
<Button variant={theme === "dark" ? "accent" : "secondary"} shape="pill" onClick={() => setTheme("dark")}>Dark</Button>
|
||
<Button variant={theme === "light" ? "accent" : "secondary"} shape="pill" onClick={() => setTheme("light")}>Light</Button>
|
||
</div>
|
||
<div className="catalog-swatches">
|
||
{accents.map((item) => (
|
||
<button
|
||
key={item.label}
|
||
type="button"
|
||
className="catalog-swatch"
|
||
data-active={item.hex.toLowerCase() === accentHex.toLowerCase() ? "true" : undefined}
|
||
style={{ "--swatch": item.hex } as CSSProperties}
|
||
onClick={() => setAccentHex(item.hex)}
|
||
>
|
||
<span />{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<ColorField label="Свой accent" value={accentHex} onChange={setAccentHex} />
|
||
</Preview>
|
||
<Preview title="Иерархия стекла" note="default / strong / soft">
|
||
<div className="catalog-surface-stack">
|
||
<GlassSurface padding="md">Default surface</GlassSurface>
|
||
<GlassSurface tone="strong" padding="md">Strong floating surface</GlassSurface>
|
||
<GlassSurface tone="soft" padding="md">Soft nested surface</GlassSurface>
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Каркас Launcher" note="fixed header / stage / panels" className="catalog-preview--wide">
|
||
<div className="catalog-shell-diagram" aria-label="Схема каркаса приложения">
|
||
<span className="catalog-shell-diagram__header">Header</span>
|
||
<span className="catalog-shell-diagram__nav">Navigation</span>
|
||
<span className="catalog-shell-diagram__content">Content window</span>
|
||
<span className="catalog-shell-diagram__stage">Stage</span>
|
||
</div>
|
||
</Preview>
|
||
</div>
|
||
);
|
||
case "controls":
|
||
return (
|
||
<div className="catalog-grid">
|
||
<Preview title="Действия" note="общая геометрия">
|
||
<div className="catalog-inline catalog-inline--wrap">
|
||
<Button variant="accent" shape="pill" icon={<Icon name="save" />}>Сохранить</Button>
|
||
<Button icon={<Icon name="refresh" />}>Обновить</Button>
|
||
<Button variant="ghost" icon={<Icon name="external" />}>Открыть</Button>
|
||
<Button variant="danger" icon={<Icon name="trash" />}>Удалить</Button>
|
||
<IconButton label="Добавить"><Icon name="plus" /></IconButton>
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Поля" note="label / hint / control">
|
||
<div className="catalog-form">
|
||
<TextField label="Название проекта" hint="обязательно" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
|
||
<TextAreaField label="Описание" value={notes} onChange={(event) => setNotes(event.target.value)} />
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Selection" note="integrated / split">
|
||
<div className="catalog-form">
|
||
<FieldFrame label="Hub / integrated select">
|
||
<Select label="Статус" value={selectedStatus} options={[...selectOptions]} searchable onChange={setSelectedStatus} />
|
||
</FieldFrame>
|
||
<FieldFrame label="Engine / split select">
|
||
<div style={engineAccentStyle}>
|
||
<Select
|
||
variant="split"
|
||
label="Тип связи"
|
||
value={connectionType}
|
||
options={[
|
||
{ value: "spline", label: "Сплайн" },
|
||
{ value: "straight", label: "Прямая" },
|
||
{ value: "step", label: "Ступенчатая" },
|
||
]}
|
||
onChange={setConnectionType}
|
||
/>
|
||
</div>
|
||
</FieldFrame>
|
||
<Dropdown
|
||
trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
|
||
<Button ref={setTriggerRef} aria-expanded={open} aria-controls={surfaceId} icon={<Icon name="chevron-down" />} onClick={toggle}>Действия</Button>
|
||
)}
|
||
>
|
||
{({ close }) => (
|
||
<>
|
||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><Icon name="edit" /><span className="nodedc-dropdown-option__label">Переименовать</span></button>
|
||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><Icon name="copy" /><span className="nodedc-dropdown-option__label">Дублировать</span></button>
|
||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><Icon name="folder" /><span className="nodedc-dropdown-option__label">Архивировать</span></button>
|
||
</>
|
||
)}
|
||
</Dropdown>
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Environment controls" note="точная геометрия Engine">
|
||
<div className="catalog-engine-control-stack" style={engineAccentStyle}>
|
||
<ControlRow label="Цвет"><ColorField value={lightColor} onChange={setLightColor} /></ControlRow>
|
||
<RangeControl label="Яркость" value={brightness} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setBrightness} />
|
||
<Checker checked={checker} label="Использовать цвет портов" onChange={setChecker} />
|
||
<ControlRow label="Применить ко всем"><Button variant="accent" shape="pill" width="full">Применить</Button></ControlRow>
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Статусы операций" note="не цвет приложения" className="catalog-preview--wide">
|
||
<p className="catalog-preview__explanation">Статус сообщает результат операции: нейтрально, успешно, требуется внимание или ошибка. Акцент приложения для этого не переиспользуется.</p>
|
||
<div className="catalog-inline catalog-inline--wrap">
|
||
<StatusBadge>Черновик</StatusBadge>
|
||
<StatusBadge tone="success">Синхронизировано</StatusBadge>
|
||
<StatusBadge tone="warning">Нужна проверка</StatusBadge>
|
||
<StatusBadge tone="danger">Ошибка</StatusBadge>
|
||
</div>
|
||
</Preview>
|
||
</div>
|
||
);
|
||
case "media":
|
||
return (
|
||
<div className="catalog-grid catalog-grid--single">
|
||
<SettingsCard
|
||
eyebrow="CONTENT"
|
||
title="Видео-окно"
|
||
description="Окно демо-видео и подключённый медиа-файл. Хранилище и загрузка остаются в приложении; геометрия и переключение источника — в библиотеке."
|
||
actions={<Switch checked={mediaVisible} label="Показать" onChange={setMediaVisible} />}
|
||
>
|
||
<MediaSourceField
|
||
label="Видео / картинка"
|
||
source={mediaSource}
|
||
url={mediaUrl}
|
||
fileName={mediaFileName}
|
||
previewSrc={mediaSource === "url" && mediaUrl ? mediaUrl : "/launcher-stage-poster.png"}
|
||
previewKind={mediaSource === "file" ? "image" : undefined}
|
||
path="content.videoSrc → assets/uploads/media/component-library"
|
||
hint="Адаптер приложения сохраняет файл и возвращает URL; компонент не знает API storage."
|
||
onSourceChange={setMediaSource}
|
||
onUrlChange={setMediaUrl}
|
||
onFileChange={(file) => {
|
||
if (file) setMediaFileName(file.name);
|
||
}}
|
||
/>
|
||
</SettingsCard>
|
||
<Preview title="Граница ответственности" note="component / adapter" className="catalog-preview--wide">
|
||
<p className="catalog-preview__explanation">
|
||
`MediaSourceField` владеет пикселями, доступностью и состояниями file/URL. Конкретный проект передаёт upload-обработчик, storage-path и результат валидации — поэтому компонент можно подключить к CMS, Launcher или будущему приложению без копирования его вёрстки.
|
||
</p>
|
||
</Preview>
|
||
</div>
|
||
);
|
||
case "windows":
|
||
return (
|
||
<div className="catalog-grid catalog-grid--single">
|
||
<Preview title="Управляемые окна" note="center / modeless end">
|
||
<p className="catalog-preview__explanation">Обычное окно блокирует фон и удерживает фокус. Правый инспектор не затемняет, не блокирует stage и не превращается в modal.</p>
|
||
<div className="catalog-inline catalog-inline--wrap">
|
||
<Button variant="accent" shape="pill" icon={<Icon name="apps" />} onClick={() => setWindowOpen(true)}>Открыть окно</Button>
|
||
<Button shape="pill" icon={<Icon name="panel" />} onClick={() => setInspectorOpen(true)}>Открыть инспектор</Button>
|
||
</div>
|
||
</Preview>
|
||
<Preview title="Оконные действия" note="круг `46 px`">
|
||
<div className="catalog-window-actions-demo">
|
||
<Button shape="pill" icon={<Icon name="refresh" />}>Обновить источник</Button>
|
||
<IconButton label="Добавить"><Icon name="plus" /></IconButton>
|
||
<IconButton label="Развернуть"><Icon name="expand" /></IconButton>
|
||
<IconButton label="Закрыть"><Icon name="close" /></IconButton>
|
||
</div>
|
||
</Preview>
|
||
</div>
|
||
);
|
||
case "modals":
|
||
return (
|
||
<div className="catalog-grid">
|
||
<Preview title="Создание" note="форма адаптируется по ширине">
|
||
<p className="catalog-preview__explanation">Поля переходят в одну колонку на узком viewport; footer остаётся видимым, прокручивается только тело окна.</p>
|
||
<Button variant="accent" shape="pill" icon={<Icon name="plus" />} onClick={() => setCreateModalOpen(true)}>Создать проект</Button>
|
||
</Preview>
|
||
<Preview title="Подтверждение удаления" note="async-safe">
|
||
<p className="catalog-preview__explanation">Destructive-цвет появляется у подтверждения, а не окрашивает всё окно заранее.</p>
|
||
<Button variant="danger" shape="pill" icon={<Icon name="trash" />} onClick={() => setConfirmOpen(true)}>Проверить удаление</Button>
|
||
</Preview>
|
||
</div>
|
||
);
|
||
case "inspector":
|
||
return (
|
||
<div className="catalog-inspector-stage">
|
||
<GlassSurface tone="strong" radius="panel" className="catalog-inspector-card" style={engineAccentStyle}>
|
||
<div className="catalog-inspector-title"><strong>Настройки окружения</strong><span>ENGINE / новый канон</span></div>
|
||
<Inspector sections={inspectorSections} defaultOpen={["illumination", "connections", "ports"]} />
|
||
</GlassSurface>
|
||
</div>
|
||
);
|
||
case "icons":
|
||
return (
|
||
<div className="catalog-icon-catalog">
|
||
<Preview title="Размеры и поверхности" note="16 / 18 / 20 px" className="catalog-preview--wide">
|
||
<div className="catalog-window-actions-demo">
|
||
<IconButton label="Добавить"><Icon name="plus" size={16} /></IconButton>
|
||
<IconButton label="Обновить"><Icon name="refresh" size={18} /></IconButton>
|
||
<IconButton label="Развернуть"><Icon name="expand" size={20} /></IconButton>
|
||
<IconButton label="Закрыть"><Icon name="close" size={18} /></IconButton>
|
||
</div>
|
||
<p className="catalog-preview__explanation">Иконка наследует `currentColor`; фон, размер кнопки и active-state задаёт компонент поверхности, а не SVG.</p>
|
||
</Preview>
|
||
{iconGroups.map((group) => (
|
||
<section className="catalog-icon-group" key={group.title}>
|
||
<header><strong>{group.title}</strong><span>{group.note}</span></header>
|
||
<div className="catalog-icon-grid">
|
||
{group.icons.map((name) => (
|
||
<div className="catalog-icon-tile" key={name}>
|
||
<span className="catalog-icon-tile__surface"><Icon name={name} size={20} /></span>
|
||
<span><strong>{iconLabels[name]}</strong><code>{name}</code></span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
))}
|
||
</div>
|
||
);
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
const activeDefinition = activeSection ? sectionDefinitions[activeSection] : null;
|
||
|
||
return (
|
||
<>
|
||
<ApplicationShell
|
||
className="catalog-app nodedc-ui-root"
|
||
style={{ "--catalog-accent": accentHex } as CSSProperties}
|
||
navigationOpen={guidelineOpen}
|
||
contentOpen={workspace.contentOpen}
|
||
contentExpanded={panelExpanded}
|
||
header={
|
||
<AppHeader
|
||
brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
|
||
brandHref="/"
|
||
center={
|
||
<>
|
||
<HeaderWorkspace kind="mark" label="NODE.DC Design" imageUrl="/nodedc-mark.svg" />
|
||
<HeaderNavigation
|
||
label="Навигация приложения"
|
||
value={guidelineOpen ? "guideline" : undefined}
|
||
items={[{ value: "guideline", label: "Guideline" }]}
|
||
onChange={() => guidelineOpen ? closeGuideline() : workspace.openNavigation()}
|
||
/>
|
||
</>
|
||
}
|
||
right={
|
||
<HeaderProfile>
|
||
<IconButton label="Уведомления"><Icon name="inbox" size={20} /></IconButton>
|
||
<HeaderProfileButton>Профиль</HeaderProfileButton>
|
||
<HeaderAvatar label="DC" />
|
||
</HeaderProfile>
|
||
}
|
||
/>
|
||
}
|
||
stage={
|
||
<section className="catalog-launcher-stage">
|
||
<video className="catalog-launcher-stage__media" autoPlay muted loop playsInline poster="/launcher-stage-poster.png" aria-hidden="true">
|
||
<source src="/launcher-stage.mp4" type="video/mp4" />
|
||
</video>
|
||
<div className="catalog-launcher-stage__shade" />
|
||
<div className="catalog-launcher-stage__title">
|
||
<span>NODE.DC</span>
|
||
<strong>DESIGN<br />GUIDELINE</strong>
|
||
<p>Общий форм-фактор приложений, компоненты и оконная механика платформы.</p>
|
||
</div>
|
||
</section>
|
||
}
|
||
navigation={
|
||
<AdminNavigationPanel
|
||
eyebrow="NODE.DC"
|
||
title="Visual Guideline"
|
||
closeLabel="Закрыть Guideline"
|
||
navigationLabel="Разделы Guideline"
|
||
onClose={closeGuideline}
|
||
items={(Object.entries(sectionDefinitions) as Array<[CatalogSection, (typeof sectionDefinitions)[CatalogSection]]>).map(([id, item]) => ({
|
||
id,
|
||
label: item.title,
|
||
icon: <Icon name={item.icon} />,
|
||
}))}
|
||
activeId={activeSection ?? undefined}
|
||
onItemChange={openSection}
|
||
footer={
|
||
<>
|
||
<span className="nodedc-admin-panel__nav-icon" aria-hidden="true"><Icon name="shield" /></span>
|
||
<span>Design System 0.4</span>
|
||
</>
|
||
}
|
||
/>
|
||
}
|
||
content={activeDefinition ? (
|
||
<ApplicationPanel
|
||
key={activeSection}
|
||
eyebrow={activeDefinition.eyebrow}
|
||
title={activeDefinition.title}
|
||
description={activeDefinition.description}
|
||
expanded={panelExpanded}
|
||
onExpandedChange={workspace.setContentExpanded}
|
||
onClose={workspace.closeView}
|
||
>
|
||
<div className="catalog-panel-content">{renderSectionContent()}</div>
|
||
</ApplicationPanel>
|
||
) : null}
|
||
/>
|
||
|
||
<Window
|
||
open={windowOpen}
|
||
title="Настройки сервиса"
|
||
subtitle="Launcher / CMS / SEO"
|
||
onClose={() => setWindowOpen(false)}
|
||
footer={
|
||
<>
|
||
<Button variant="ghost" onClick={() => setWindowOpen(false)}>Отмена</Button>
|
||
<WindowFooterActions><Button variant="accent" shape="pill" onClick={() => setWindowOpen(false)}>Сохранить</Button></WindowFooterActions>
|
||
</>
|
||
}
|
||
>
|
||
<div className="catalog-form">
|
||
<TextField label="Название" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
|
||
<FieldFrame label="Статус"><Select label="Статус" value={selectedStatus} options={[...selectOptions]} onChange={setSelectedStatus} /></FieldFrame>
|
||
<Checker checked={checker} label="Сервис активен" onChange={setChecker} />
|
||
</div>
|
||
</Window>
|
||
|
||
<Window
|
||
open={inspectorOpen}
|
||
title="Настройки окружения"
|
||
subtitle="ENGINE / новый канон"
|
||
placement="end"
|
||
style={engineAccentStyle}
|
||
onClose={() => setInspectorOpen(false)}
|
||
>
|
||
<Inspector sections={inspectorSections} defaultOpen={["illumination", "connections", "ports"]} />
|
||
</Window>
|
||
|
||
<Window
|
||
open={createModalOpen}
|
||
title="Создать проект"
|
||
subtitle="Адаптивная форма"
|
||
size="sm"
|
||
onClose={() => setCreateModalOpen(false)}
|
||
footer={
|
||
<>
|
||
<Button variant="ghost" onClick={() => setCreateModalOpen(false)}>Отмена</Button>
|
||
<WindowFooterActions><Button variant="accent" shape="pill" icon={<Icon name="plus" />} onClick={() => setCreateModalOpen(false)}>Создать</Button></WindowFooterActions>
|
||
</>
|
||
}
|
||
>
|
||
<div className="catalog-form">
|
||
<TextField label="Название проекта" hint="обязательно" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
|
||
<TextAreaField label="Описание" value={notes} onChange={(event) => setNotes(event.target.value)} />
|
||
<FieldFrame label="Статус"><Select label="Статус" value={selectedStatus} options={[...selectOptions]} onChange={setSelectedStatus} /></FieldFrame>
|
||
</div>
|
||
</Window>
|
||
|
||
<ConfirmationModal
|
||
open={confirmOpen}
|
||
title="Удалить конфигурацию?"
|
||
description={<>Конфигурация будет удалена. Это действие нельзя отменить.</>}
|
||
confirmLabel="Удалить"
|
||
danger
|
||
onClose={() => setConfirmOpen(false)}
|
||
onConfirm={() => setConfirmOpen(false)}
|
||
/>
|
||
</>
|
||
);
|
||
}
|