From 4d53ee0337f2846b02e75414e8980136a8a81f60 Mon Sep 17 00:00:00 2001 From: caoqianming Date: Mon, 23 Mar 2026 14:14:19 +0800 Subject: [PATCH] refactor(web): split index html into flat fragments --- web/api-md.html | 31 ----- web/html/api-doc-drawer.html | 15 +++ web/html/chart-panel.html | 10 ++ web/html/equipment-panel.html | 11 ++ web/html/logs-panel.html | 6 + web/html/modals.html | 131 +++++++++++++++++++ web/html/points-panel.html | 37 ++++++ web/html/source-panel.html | 7 + web/html/topbar.html | 8 ++ web/index.html | 240 ++-------------------------------- web/js/index.js | 20 +++ 11 files changed, 254 insertions(+), 262 deletions(-) delete mode 100644 web/api-md.html create mode 100644 web/html/api-doc-drawer.html create mode 100644 web/html/chart-panel.html create mode 100644 web/html/equipment-panel.html create mode 100644 web/html/logs-panel.html create mode 100644 web/html/modals.html create mode 100644 web/html/points-panel.html create mode 100644 web/html/source-panel.html create mode 100644 web/html/topbar.html create mode 100644 web/js/index.js diff --git a/web/api-md.html b/web/api-md.html deleted file mode 100644 index f673ed4..0000000 --- a/web/api-md.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - PLC Control API.md - - - -
-
PLC Control
-
- 返回监控 -
加载中...
-
-
- -
-
-
-

API.md

-
-
- 
加载中...
-
-
-
- - - - diff --git a/web/html/api-doc-drawer.html b/web/html/api-doc-drawer.html new file mode 100644 index 0000000..0dbb319 --- /dev/null +++ b/web/html/api-doc-drawer.html @@ -0,0 +1,15 @@ + diff --git a/web/html/chart-panel.html b/web/html/chart-panel.html new file mode 100644 index 0000000..6d4ba12 --- /dev/null +++ b/web/html/chart-panel.html @@ -0,0 +1,10 @@ +
+
+

点位曲线

+ +
+
+
点击上方点位表中的一行查看曲线
+ +
+
diff --git a/web/html/equipment-panel.html b/web/html/equipment-panel.html new file mode 100644 index 0000000..7601075 --- /dev/null +++ b/web/html/equipment-panel.html @@ -0,0 +1,11 @@ +
+
+

设备

+ +
+
+ + +
+
+
diff --git a/web/html/logs-panel.html b/web/html/logs-panel.html new file mode 100644 index 0000000..ec3db03 --- /dev/null +++ b/web/html/logs-panel.html @@ -0,0 +1,6 @@ +
+
+

实时日志

+
+
+
diff --git a/web/html/modals.html b/web/html/modals.html new file mode 100644 index 0000000..5a2c345 --- /dev/null +++ b/web/html/modals.html @@ -0,0 +1,131 @@ + + + + + + + + + diff --git a/web/html/points-panel.html b/web/html/points-panel.html new file mode 100644 index 0000000..458022a --- /dev/null +++ b/web/html/points-panel.html @@ -0,0 +1,37 @@ +
+
+

点位

+
+ + 1 / 1 + +
+
+
+ +
当前筛选: 全部点位
+
已选中 0 个点位
+ + + +
+
+ + + + + + + + + + + + + +
名称值质量设备/角色更新时间
+
+
diff --git a/web/html/source-panel.html b/web/html/source-panel.html new file mode 100644 index 0000000..2ea65a6 --- /dev/null +++ b/web/html/source-panel.html @@ -0,0 +1,7 @@ +
+
+

数据源

+ +
+
+
diff --git a/web/html/topbar.html b/web/html/topbar.html new file mode 100644 index 0000000..8ace3f9 --- /dev/null +++ b/web/html/topbar.html @@ -0,0 +1,8 @@ +
+
PLC Control
+
+ + +
Ready
+
+
diff --git a/web/index.html b/web/index.html index 1ae822c..26175d2 100644 --- a/web/index.html +++ b/web/index.html @@ -7,241 +7,19 @@ -
-
PLC Control
-
- - -
Ready
-
-
+
-
-
-

设备

- -
-
- - -
-
-
- -
-
-

点位

-
- - 1 / 1 - -
-
-
- -
当前筛选: 全部点位
-
已选中 0 个点位
- - - -
-
- - - - - - - - - - - - - -
名称值质量设备/角色更新时间
-
-
- -
-
-

数据源

- -
-
-
- -
-
-

实时日志

-
-
-
- -
-
-

点位曲线

- -
-
-
点击上方点位表中的一行查看曲线
- -
-
+
+
+
+
+
- +
+
- - - - - - - - - - - + diff --git a/web/js/index.js b/web/js/index.js new file mode 100644 index 0000000..727497c --- /dev/null +++ b/web/js/index.js @@ -0,0 +1,20 @@ +async function loadPartial(slot) { + const response = await fetch(slot.dataset.partial); + if (!response.ok) { + throw new Error(`Failed to load partial: ${slot.dataset.partial}`); + } + + const html = await response.text(); + slot.insertAdjacentHTML("beforebegin", html); + slot.remove(); +} + +async function bootstrapPage() { + const slots = Array.from(document.querySelectorAll("[data-partial]")); + await Promise.all(slots.map((slot) => loadPartial(slot))); + await import("./app.js"); +} + +bootstrapPage().catch((error) => { + document.body.innerHTML = `
${error.message || String(error)}
`; +});