131 lines
5.4 KiB
Markdown
131 lines
5.4 KiB
Markdown
# Configucci — Документация проекта
|
||
|
||
## 📋 Обзор
|
||
|
||
**Configucci** — это веб-приложение на React для управления конфигурационными файлами в формате XML. Приложение позволяет загружать, редактировать и визуализировать конфигурации с поддержкой множественных окружений (environments) и шаблонизации параметров.
|
||
|
||
---
|
||
|
||
## 🛠 Технологический стек
|
||
|
||
| Категория | Технология |
|
||
|-----------|------------|
|
||
| **Фреймворк** | React 19.2.0 |
|
||
| **Язык** | TypeScript 5.9 |
|
||
| **Сборка** | Vite 7.2.4 |
|
||
| **UI-библиотека** | Bootstrap 5.3.3 |
|
||
| **Тестирование** | Vitest 4.0.16 + jsdom |
|
||
| **Линтинг** | ESLint 9.17.0 |
|
||
| **Подсветка кода** | react-highlight + highlight.js |
|
||
|
||
---
|
||
|
||
## 📁 Структура проекта
|
||
|
||
```
|
||
configucci/
|
||
├── src/
|
||
│ ├── models/ # Модели данных
|
||
│ │ ├── Config.tsx # Config, ConfigTemplate
|
||
│ │ ├── ConfigReader.tsx # Парсер XML
|
||
│ │ ├── Env.ts # Env, AppEvent, AddEvent, DelEvent, UpdateEvent
|
||
│ │ ├── EnvParam.ts # EnvParam
|
||
│ │ └── NamedId.ts # Интерфейс NamedId
|
||
│ ├── componets/ # React-компоненты (орфография оригинала)
|
||
│ │ ├── env/
|
||
│ │ │ ├── Environment.tsx # Список окружений
|
||
│ │ │ └── EnvironmentParam.tsx # Параметр окружения
|
||
│ │ ├── content/
|
||
│ │ │ └── Content.tsx # Вкладки с контентом
|
||
│ │ └── FileChooser.tsx # Загрузка файлов
|
||
│ ├── builders/ # Построители XML
|
||
│ │ ├── EnvBuilder.ts
|
||
│ │ └── index.ts
|
||
│ ├── assets/ # Статические ресурсы
|
||
│ │ └── cgg.png
|
||
│ ├── test/ # Тесты
|
||
│ │ └── ConfigReader.test.ts
|
||
│ ├── App.tsx # Главный компонент
|
||
│ ├── App.css # Стили приложения
|
||
│ ├── main.tsx # Точка входа
|
||
│ └── index.css # Глобальные стили
|
||
├── docs/
|
||
│ └── config.json.xml # Пример конфигурации
|
||
├── public/ # Публичные ресурсы
|
||
├── index.html
|
||
├── package.json
|
||
├── tsconfig.json
|
||
├── vite.config.ts
|
||
└── vitest.config.ts
|
||
```
|
||
|
||
---
|
||
|
||
## 📦 Модели данных
|
||
|
||
### `Config`
|
||
Основной класс конфигурации:
|
||
- `envs: Env[]` — массив окружений
|
||
- `template: ConfigTemplate` — шаблон конфигурации
|
||
- Методы: `addEnvs()`, `addTemplate()`, `getTemplateAsJson()`, `validateParams()`
|
||
|
||
### `ConfigTemplate`
|
||
Шаблон с параметрами в формате `@paramName@`:
|
||
- Извлекает параметры из текста через regex `/@(\w+)@/g`
|
||
- Свойства: `content` (исходный текст), `Params` (массив имён параметров)
|
||
|
||
### `Env`
|
||
Окружение с параметрами:
|
||
- `id: number`, `name: string`, `params: EnvParam[]`
|
||
- Методы: `addParams()`, `delParam()`, `updateParams()`, `isDefault()`
|
||
|
||
### `EnvParam`
|
||
Параметр окружения:
|
||
- `id: number`, `name: string`, `value: string`, `isChanged: boolean`
|
||
- Методы: `Changed()`, `sanitize()` (HTML-экранирование)
|
||
|
||
### `AppEvent<T>`
|
||
Базовый класс событий для операций CRUD:
|
||
- `AddEvent<T>` — добавление
|
||
- `UpdateEvent<T>` — обновление
|
||
- `DelEvent<T>` — удаление
|
||
|
||
---
|
||
|
||
## 🔧 Основные компоненты
|
||
|
||
### `App` (App.tsx)
|
||
Корневой компонент с управлением состоянием через `AppState`:
|
||
- Загрузка конфигурации из файла
|
||
- Редактирование окружений
|
||
- Сохранение с искусственной задержкой 1 секунда
|
||
|
||
### `FileChooser`
|
||
Компонент загрузки файлов:
|
||
- Поддерживает только XML-файлы (`text/xml`)
|
||
- Кнопка "Create new" создаёт конфигурацию с окружением DEFAULT
|
||
|
||
### `Environment`
|
||
Список окружений с возможностью:
|
||
- Выбор окружения из dropdown
|
||
- Добавление/удаление/редактирование параметров
|
||
- Визуальное отображение изменений (жёлтая рамка)
|
||
|
||
### `Content`
|
||
Вкладки для просмотра данных:
|
||
|
||
| Вкладка | Описание |
|
||
|---------|----------|
|
||
| **Env** | XML-представление текущего окружения |
|
||
| **Content Template** | JSON-шаблон с подсветкой синтаксиса |
|
||
| **Raw template** | Полный XML с окружениями и шаблоном |
|
||
| **Test-filled template** | Тестовый JavaScript-код (заглушка) |
|
||
|
||
---
|
||
|
||
## 📄 Формат конфигурационного файла
|
||
|
||
```xml
|
||
<engine>
|
||
<environment name="DEFAULT">
|
||
|