64 lines
8.4 KiB
Markdown
64 lines
8.4 KiB
Markdown
# Файловая структура проекта My Speaker
|
||
|
||
Ниже представлена скорректированная файловая структура проекта веб-приложения My Speaker. Корректировки включают:
|
||
- Добавление `main-params.html` в папку `components/` для постоянной левой части (Main Parameters) на главном экране.
|
||
- Добавление `footer.html` в папку `components/` для футера с логами.
|
||
- Добавление `graphics.html` в папку `pages/` для правой части с графиками (как указано в макетах).
|
||
- Обновление модулей JavaScript для соответствия новым компонентам (например, добавление `graphics.js` для логики графиков).
|
||
- Уточнение папок для лучшей организации: `pages/` для динамически подгружаемых правых частей, `components/` для общих элементов (шапка, навигация, Main Parameters, футер).
|
||
- Обеспечение модульности в соответствии с `FRONTEND_REQUIREMENTS.md`: использование чистого JavaScript (ES6+), без фреймворков.
|
||
- Учёт ретро-стиля и адаптивности в `style.css`.
|
||
|
||
Структура проекта оптимизирована для SPA (Single Page Application), где `index.html` служит точкой входа, а контент подгружается динамически через `router.js`.
|
||
|
||
## Полная структура
|
||
|
||
```
|
||
webapp/
|
||
├── index.html # Основная страница приложения (SPA): содержит контейнеры для шапки, основного экрана и футера
|
||
├── style.css # Основные стили в ретро-стилистике (пиксельные рамки, шрифт "Press Start 2P", адаптивность)
|
||
├── api.js # Модуль для работы с API (авторизация, получение данных, обновление настроек)
|
||
├── app.js # Точка входа: инициализация приложения, подключение модулей и запуск маршрутизации
|
||
├── modules/ # Папка для JavaScript-модулей (логика страниц и компонентов)
|
||
│ ├── router.js # Маршрутизация: динамическая загрузка HTML в правую часть основного экрана
|
||
│ ├── login.js # Логика страницы авторизации (обработка формы, настройки интерфейса)
|
||
│ ├── dashboard.js # Логика главного экрана: инициализация Main Parameters, футера и общей структуры
|
||
│ ├── graphics.js # Логика для `graphics.html` (инициализация и обновление графиков с использованием Chart.js или Canvas)
|
||
│ ├── settings.js # Логика для `settings.html` (формы настроек, валидация, отправка на API)
|
||
│ ├── commands.js # Логика для `commands.html` (список команд, редактирование файла команд)
|
||
│ ├── header.js # Логика для `header.html` (имя пользователя, кнопка выхода, запрос на /api/auth/me)
|
||
│ ├── nav.js # Логика для `nav.html` (переключение разделов, подсветка активного)
|
||
│ └── utils.js # Общие утилиты (обработка ошибок, валидация форм, форматирование данных, DOM-манипуляции)
|
||
├── pages/ # Папка для динамически подгружаемых HTML-страниц (правая часть основного экрана)
|
||
│ ├── login.html # Разметка страницы авторизации (форма входа, настройки интерфейса)
|
||
│ ├── graphics.html # Разметка для графиков (canvas для speech_prob и energy)
|
||
│ ├── settings.html # Разметка для настроек (раскрывающиеся формы с <details>, поля ввода, кнопки сохранения)
|
||
│ └── commands.html # Разметка для команд (поле для commands_file, список команд, кнопки редактирования)
|
||
└── components/ # Папка для общих HTML-компонентов (шапка, навигация, левая часть, футер)
|
||
├── header.html # Разметка верхней панели (имя пользователя, кнопка выхода)
|
||
├── nav.html # Разметка навигационной панели (кнопки Dashboard, Settings, Commands)
|
||
├── main-params.html# Разметка левой части (Main Parameters: статус, индикаторы, статистика CPU/MEM/TEMP)
|
||
└── footer.html # Разметка футера (список последних фраз из recent-phrases)
|
||
|
||
```
|
||
|
||
## Объяснение корректировок
|
||
- **Добавления**:
|
||
- `graphics.html` и `graphics.js` — для отдельного раздела с графиками, как в макетах PAGE_LAYOUTS.md.
|
||
- `main-params.html` — для постоянной левой части (40%), чтобы избежать дублирования разметки в каждом разделе.
|
||
- `footer.html` — для футера с логами, чтобы сделать его переиспользуемым и легко обновляемым.
|
||
- **Изменения**:
|
||
- `dashboard.js` теперь отвечает за инициализацию всего главного экрана (загрузка `main-params.html`, футера и динамической правой части).
|
||
- `pages/login.html` — остается отдельной, но теперь явно отделена от динамических страниц главного экрана.
|
||
- Убраны ненужные файлы (если были ранее); структура оптимизирована для модульности (каждый модуль экспортирует функции для ES6 import).
|
||
- **Соответствие требованиям**:
|
||
- Структура соответствует `FRONTEND_REQUIREMENTS.md`: модульный JS-код, отдельные файлы для логики (app.js, api.js), стили в style.css.
|
||
- Поддержка адаптивности: в style.css используются медиа-запросы для мобильных устройств (вертикальное расположение карточек).
|
||
- Масштабируемость: Легко добавить новые страницы (например, `analytics.html` и `analytics.js`) в `pages/` и зарегистрировать в `router.js`.
|
||
- **Рекомендации по реализации**:
|
||
- В `index.html` добавить контейнеры: `<header id="header"></header>`, `<nav id="nav"></nav>`, `<main><div id="main-params"></div><div id="content"></div></main>`, `<footer id="footer"></footer>`.
|
||
- В `router.js` загружать контент в `#content` на основе маршрута (например, `#/graphics` → `graphics.html`).
|
||
- В `utils.js` добавить функции для показа ошибок в ретро-стиле (красный текст на темном фоне).
|
||
- Для графиков в `graphics.js` использовать Chart.js (подключить через CDN в `index.html`) или Canvas API.
|
||
|
||
Эта структура готова к реализации. Если нужны дополнительные корректировки (например, добавление папок для ассетов или тестов), уточните. |