diff --git a/XNSimHtml/assets/icons/png/network.png b/XNSimHtml/assets/icons/png/network.png
new file mode 100644
index 0000000..6487c72
Binary files /dev/null and b/XNSimHtml/assets/icons/png/network.png differ
diff --git a/XNSimHtml/assets/icons/png/network_b.png b/XNSimHtml/assets/icons/png/network_b.png
new file mode 100644
index 0000000..22d120f
Binary files /dev/null and b/XNSimHtml/assets/icons/png/network_b.png differ
diff --git a/XNSimHtml/assets/icons/png/flask.png b/XNSimHtml/assets/icons/png/qtg.png
similarity index 100%
rename from XNSimHtml/assets/icons/png/flask.png
rename to XNSimHtml/assets/icons/png/qtg.png
diff --git a/XNSimHtml/assets/icons/png/flask_b.png b/XNSimHtml/assets/icons/png/qtg_b.png
similarity index 100%
rename from XNSimHtml/assets/icons/png/flask_b.png
rename to XNSimHtml/assets/icons/png/qtg_b.png
diff --git a/XNSimHtml/components/content-area.js b/XNSimHtml/components/content-area.js
index 8e7aa0f..d1fc394 100644
--- a/XNSimHtml/components/content-area.js
+++ b/XNSimHtml/components/content-area.js
@@ -126,6 +126,12 @@ class ContentArea extends HTMLElement {
case 'data-collection':
contentElement = document.createElement('data-collection');
break;
+ case 'network-monitor':
+ contentElement = document.createElement('network-monitor');
+ break;
+ case 'qtg':
+ contentElement = document.createElement('qtg-monitor');
+ break;
case 'profile':
contentElement = document.createElement('profile-center');
break;
diff --git a/XNSimHtml/components/network-monitor.js b/XNSimHtml/components/network-monitor.js
new file mode 100644
index 0000000..b7aee06
--- /dev/null
+++ b/XNSimHtml/components/network-monitor.js
@@ -0,0 +1,107 @@
+/**
+ * @class NetworkMonitor
+ * @description 网络监控组件，用于监控系统网络状态
+ */
+class NetworkMonitor extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ }
+
+ connectedCallback() {
+ this.render();
+ this.initialize();
+ }
+
+ render() {
+ this.shadowRoot.innerHTML = `
+
+
+ `;
+ }
+
+ initialize() {
+ // 初始化网络监控逻辑
+ console.log('网络监控组件已初始化');
+ }
+
+ reactivate() {
+ // 重新激活组件时的逻辑
+ console.log('网络监控组件已重新激活');
+ }
+}
+
+customElements.define('network-monitor', NetworkMonitor);
\ No newline at end of file
diff --git a/XNSimHtml/components/qtg-monitor.js b/XNSimHtml/components/qtg-monitor.js
new file mode 100644
index 0000000..982aab4
--- /dev/null
+++ b/XNSimHtml/components/qtg-monitor.js
@@ -0,0 +1,107 @@
+/**
+ * @class QTGMonitor
+ * @description QTG监控组件，用于监控QTG相关状态
+ */
+class QTGMonitor extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+ }
+
+ connectedCallback() {
+ this.render();
+ this.initialize();
+ }
+
+ render() {
+ this.shadowRoot.innerHTML = `
+
+
+ `;
+ }
+
+ initialize() {
+ // 初始化QTG监控逻辑
+ console.log('QTG监控组件已初始化');
+ }
+
+ reactivate() {
+ // 重新激活组件时的逻辑
+ console.log('QTG监控组件已重新激活');
+ }
+}
+
+customElements.define('qtg-monitor', QTGMonitor);
\ No newline at end of file
diff --git a/XNSimHtml/components/sub-toolbar.js b/XNSimHtml/components/sub-toolbar.js
index b71c0ea..9d1624f 100644
--- a/XNSimHtml/components/sub-toolbar.js
+++ b/XNSimHtml/components/sub-toolbar.js
@@ -270,6 +270,14 @@ class SubToolbar extends HTMLElement {
数据采集
+
+
+ 网络监控
+
+
+ QTG
+