134 lines
5.6 KiB
Markdown
134 lines
5.6 KiB
Markdown
# Рефакторинг UI: монолит → модули
|
|
|
|
Дата: 2026-05-02
|
|
Ветка: второмая
|
|
Файл-источник: console/ui/index.html (1651 строк, 73 функции)
|
|
|
|
---
|
|
|
|
## Целевая структура
|
|
|
|
```
|
|
console/ui/
|
|
├── index.html # только HTML-скелет + <script src="..."> теги
|
|
├── cron.html # без изменений
|
|
├── css/
|
|
│ └── styles.css # все стили (сейчас в <style> блоке index.html)
|
|
└── js/
|
|
├── config.js # константы (DEFAULT_CODE, язык-шаблоны)
|
|
├── api.js # authHeaders, getJSON, requestJSON
|
|
├── auth.js # showLoginOverlay, hideLoginOverlay, doLogin, jwtEmail, setUserAvatar, doLogout, checkAuth
|
|
├── ui.js # setText, showStatus, clearStatus, h, formatTimestamp, timestampCell
|
|
├── functions.js # openCreate, closeCreate, submitCreate, openEdit, closeEdit, submitEdit, removeFn, parseMethods, parseTimeout, onLangChange
|
|
├── triggers.js # httpTriggerByFn, timeTriggerByFn, toggleScheduleFields, schedulePayload, syncScheduleForFunction
|
|
├── modals.js # openHelp, closeHelp, openInvoke, closeInvoke, submitInvoke
|
|
├── ai.js # aiCheck, aiGenerate, aiExplain, askAssistant, toggleAssistant, showGenPrompt, llmGeneratedWarning, addLLMWarning
|
|
├── init.js # initLog, pollNSStatus, formatSeconds, setInitElapsed, setInitCurrentStage, setBox, missingKeys, firstPendingStage, describeInitReason, summarizeInit, explainDelay, startTimedStatus, renderInitStages
|
|
└── app.js # reloadAll, главный контроллер, window.S = {}
|
|
```
|
|
|
|
embed.go: `//go:embed index.html cron.html css js`
|
|
|
|
---
|
|
|
|
## Порядок загрузки в index.html (критично!)
|
|
|
|
```html
|
|
<script src="js/config.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/ui.js"></script>
|
|
<script src="js/auth.js"></script>
|
|
<script src="js/functions.js"></script>
|
|
<script src="js/triggers.js"></script>
|
|
<script src="js/modals.js"></script>
|
|
<script src="js/ai.js"></script>
|
|
<script src="js/init.js"></script>
|
|
<script src="js/app.js"></script>
|
|
```
|
|
|
|
---
|
|
|
|
## Шаги (пошагово, с билдом после каждого)
|
|
|
|
### Шаг 1 — CSS
|
|
- Вынести `<style>` блок из index.html в `css/styles.css`
|
|
- Заменить на `<link rel="stylesheet" href="css/styles.css">`
|
|
- Обновить embed.go
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 2 — config.js
|
|
- Вынести: объект `DEFAULT_CODE` (шаблоны кода по языкам)
|
|
- Самый изолированный, без зависимостей
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 3 — api.js
|
|
- Вынести: `authHeaders`, `getJSON`, `requestJSON`
|
|
- Зависит от: ничего (только localStorage)
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 4 — ui.js
|
|
- Вынести: `setText`, `showStatus`, `clearStatus`, `h`, `formatTimestamp`, `timestampCell`
|
|
- Зависит от: ничего
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 5 — auth.js
|
|
- Вынести: `showLoginOverlay`, `hideLoginOverlay`, `doLogin`, `jwtEmail`, `setUserAvatar`, `doLogout`, `checkAuth`
|
|
- Зависит от: api.js, ui.js
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 6 — triggers.js
|
|
- Вынести: `httpTriggerByFn`, `timeTriggerByFn`, `toggleScheduleFields`, `schedulePayload`, `syncScheduleForFunction`
|
|
- Зависит от: api.js, ui.js
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 7 — modals.js
|
|
- Вынести: `openHelp`, `closeHelp`, `openInvoke`, `closeInvoke`, `submitInvoke`
|
|
- Зависит от: api.js, ui.js
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 8 — functions.js
|
|
- Вынести: `openCreate`, `closeCreate`, `submitCreate`, `openEdit`, `closeEdit`, `submitEdit`, `removeFn`, `parseMethods`, `parseTimeout`, `onLangChange`
|
|
- Зависит от: api.js, ui.js, triggers.js, config.js
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 9 — ai.js
|
|
- Вынести: `aiCheck`, `aiGenerate`, `aiExplain`, `askAssistant`, `toggleAssistant`, `showGenPrompt`, `llmGeneratedWarning`, `addLLMWarning`
|
|
- Зависит от: api.js, ui.js
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 10 — init.js
|
|
- Вынести: `initLog`, `pollNSStatus`, `formatSeconds`, `setInitElapsed`, `setInitCurrentStage`, `setBox`, `missingKeys`, `firstPendingStage`, `describeInitReason`, `summarizeInit`, `explainDelay`, `startTimedStatus`, `renderInitStages`
|
|
- Зависит от: api.js, ui.js, auth.js
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
### Шаг 11 — app.js
|
|
- Вынести: `reloadAll`, `window.S = {}`, DOMContentLoaded инициализация
|
|
- Зависит от: всё выше
|
|
- **BUILD + DEPLOY + ПРОВЕРКА**
|
|
|
|
---
|
|
|
|
## Правила
|
|
|
|
1. После каждого шага index.html должен уменьшиться ровно на то что вынесли
|
|
2. Никаких дублирований — функция живёт только в одном файле
|
|
3. Глобальные переменные (window.S) остаются в app.js
|
|
4. Порядок `<script>` тегов строго по зависимостям
|
|
5. Старый код из index.html удалять только после проверки билда
|
|
|
|
---
|
|
|
|
## Статус
|
|
|
|
- [ ] Шаг 1: CSS
|
|
- [ ] Шаг 2: config.js
|
|
- [ ] Шаг 3: api.js
|
|
- [ ] Шаг 4: ui.js
|
|
- [ ] Шаг 5: auth.js
|
|
- [ ] Шаг 6: triggers.js
|
|
- [ ] Шаг 7: modals.js
|
|
- [ ] Шаг 8: functions.js
|
|
- [ ] Шаг 9: ai.js
|
|
- [ ] Шаг 10: init.js
|
|
- [ ] Шаг 11: app.js
|