refactor(ui): step1+2 - extract CSS to styles.css, LANG_TEMPLATES to config.js
This commit is contained in:
“Naeel”
@@ -0,0 +1,320 @@
|
||||
:root {
|
||||
--bg-page: #001120;
|
||||
--bg-surface: #001929;
|
||||
--bg-navbar: #001c34;
|
||||
--border: #0b2d50;
|
||||
--accent: #1a7fd4;
|
||||
--text-primary: #e2ecf6;
|
||||
--text-secondary: #6b8eaa;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background: var(--bg-navbar);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #009dff 0%, #0055d4 100%);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .02em;
|
||||
box-shadow: 0 6px 18px rgba(0, 125, 255, .35);
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.brand-text .nubes {
|
||||
font-size: 12px;
|
||||
letter-spacing: .22em;
|
||||
font-weight: 800;
|
||||
color: #8bc7ff;
|
||||
}
|
||||
|
||||
.brand-text .product {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
background: #b43232;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: #0c2b49;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.v {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #0b2a48;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 10px;
|
||||
padding: 9px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
background: #0c2b49;
|
||||
border: 1px solid #1d486d;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status.ok {
|
||||
background: #103625;
|
||||
border-color: #236843;
|
||||
}
|
||||
|
||||
.status.err {
|
||||
background: #411d1d;
|
||||
border-color: #7a2f2f;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-block;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #1d486d;
|
||||
background: #0c2b49;
|
||||
font-size: 11px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, .45);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: min(820px, 100%);
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.field {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #1d486d;
|
||||
background: #03192c;
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 220px;
|
||||
resize: vertical;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #0b2a48;
|
||||
}
|
||||
|
||||
.help-section:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.help-section h4 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.help-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.help-code {
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #0b2a48;
|
||||
background: #021221;
|
||||
color: #d8e5f2;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
+1
-1
@@ -5,7 +5,7 @@ import (
|
||||
"net/http"
|
||||
)
|
||||
|
||||
//go:embed index.html cron.html
|
||||
//go:embed index.html cron.html css js
|
||||
var content embed.FS
|
||||
|
||||
func Handler() http.Handler {
|
||||
|
||||
+2
-341
@@ -12,328 +12,8 @@
|
||||
window.location.replace('https://' + window.location.host + window.location.pathname + window.location.search + window.location.hash);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--bg-page: #001120;
|
||||
--bg-surface: #001929;
|
||||
--bg-navbar: #001c34;
|
||||
--border: #0b2d50;
|
||||
--accent: #1a7fd4;
|
||||
--text-primary: #e2ecf6;
|
||||
--text-secondary: #6b8eaa;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
background: var(--bg-page);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
background: var(--bg-navbar);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
letter-spacing: .3px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #009dff 0%, #0055d4 100%);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .02em;
|
||||
box-shadow: 0 6px 18px rgba(0, 125, 255, .35);
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.brand-text .nubes {
|
||||
font-size: 12px;
|
||||
letter-spacing: .22em;
|
||||
font-weight: 800;
|
||||
color: #8bc7ff;
|
||||
}
|
||||
|
||||
.brand-text .product {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn.danger {
|
||||
background: #b43232;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
background: #0c2b49;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
}
|
||||
|
||||
.v {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #0b2a48;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 10px;
|
||||
padding: 9px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
background: #0c2b49;
|
||||
border: 1px solid #1d486d;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status.ok {
|
||||
background: #103625;
|
||||
border-color: #236843;
|
||||
}
|
||||
|
||||
.status.err {
|
||||
background: #411d1d;
|
||||
border-color: #7a2f2f;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-block;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #1d486d;
|
||||
background: #0c2b49;
|
||||
font-size: 11px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, .45);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.modal.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: min(820px, 100%);
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.field {
|
||||
flex: 1;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: 1px solid #1d486d;
|
||||
background: #03192c;
|
||||
color: var(--text-primary);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 220px;
|
||||
resize: vertical;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #0b2a48;
|
||||
}
|
||||
|
||||
.help-section:first-of-type {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.help-section h4 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.help-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.help-code {
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #0b2a48;
|
||||
background: #021221;
|
||||
color: #d8e5f2;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="js/config.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -912,25 +592,6 @@
|
||||
return '<span class="mono" title="' + h(ts || '') + '">' + h(text) + '</span>';
|
||||
}
|
||||
|
||||
const LANG_TEMPLATES = {
|
||||
python: {
|
||||
entrypoint: 'main.main',
|
||||
code: 'def main():\n return {"ok": True}'
|
||||
},
|
||||
nodejs: {
|
||||
entrypoint: 'main',
|
||||
code: 'module.exports = async function(context) {\n return {\n status: 200,\n body: "hello from fission"\n };\n}'
|
||||
},
|
||||
php: {
|
||||
entrypoint: 'main.php::handler',
|
||||
code: '<?php\nfunction handler($context)\n{\n $response = $context["response"];\n $response->getBody()->write("hello from fission");\n}'
|
||||
},
|
||||
ruby: {
|
||||
entrypoint: 'handler',
|
||||
code: '# frozen_string_literal: true\n\ndef handler\n "hello from fission"\nend'
|
||||
}
|
||||
};
|
||||
|
||||
function onLangChange() {
|
||||
var lang = document.getElementById('c-lang').value;
|
||||
var t = LANG_TEMPLATES[lang];
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
/* config.js — константы и шаблоны языков */
|
||||
|
||||
const LANG_TEMPLATES = {
|
||||
python: {
|
||||
entrypoint: 'main.main',
|
||||
code: 'def main():\n return {"ok": True}'
|
||||
},
|
||||
nodejs: {
|
||||
entrypoint: 'main',
|
||||
code: 'module.exports = async function(context) {\n return {\n status: 200,\n body: "hello from fission"\n };\n}'
|
||||
},
|
||||
php: {
|
||||
entrypoint: 'main.php::handler',
|
||||
code: '<?php\nfunction handler($context)\n{\n $response = $context["response"];\n $response->getBody()->write("hello from fission");\n}'
|
||||
},
|
||||
ruby: {
|
||||
entrypoint: 'handler',
|
||||
code: '# frozen_string_literal: true\n\ndef handler\n "hello from fission"\nend'
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,133 @@
|
||||
# Рефакторинг 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
|
||||
Reference in New Issue
Block a user