src/frontend/index.html

@@ -4,6 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hadoop故障检测与自动恢复系统</title>
+    
+    <!-- 网站图标 -->
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+    
     <!-- 样式文件 -->
     <link rel="stylesheet" href="styles/main.css">
     <link rel="stylesheet" href="styles/dark.css">
@@ -313,27 +318,9 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     
     <!-- 应用脚本 -->
-    <script src="utils/request.js"></script>
-    <script src="utils/auth.js"></script>
-    <script src="utils/format.js"></script>
-    <script src="router/index.js"></script>
-    <script src="components/Layout/Header.js"></script>
-    <script src="components/Layout/Sidebar.js"></script>
-    <script src="components/Common/Loading.js"></script>
-    <script src="components/Common/ErrorTip.js"></script>
-    <script src="components/Common/Confirm.js"></script>
-    <script src="components/Chart/ResourceTrend.js"></script>
-    <script src="views/Login/Index.js"></script>
-    <script src="views/ClusterMonitor/Index.js"></script>
-    <script src="views/FaultManage/List.js"></script>
-    <script src="views/FaultManage/Detail.js"></script>
-    <script src="views/LogAnalysis/Index.js"></script>
-    <script src="api/user.js"></script>
-    <script src="api/cluster.js"></script>
-    <script src="api/fault.js"></script>
-    <script src="api/log.js"></script>
+    <script src="js/components.js"></script>
     <script src="js/charts.js"></script>
     <script src="js/demo-data.js"></script>
-    <script src="app.js"></script>
+    <script src="js/app.js"></script>
 </body>
 </html>

src/frontend/js/app.js

@@ -13,6 +13,7 @@ class ErrorDetectingApp {
         this.loadStoredSettings();
         this.bindEvents();
         this.initializeRouter();
+        this.loadPageComponents();
         this.checkAuthStatus();
     }
 
@@ -69,6 +70,26 @@ class ErrorDetectingApp {
         window.addEventListener('resize', () => this.handleResize());
     }
 
+    // 加载页面组件
+    async loadPageComponents() {
+        try {
+            // 加载登录页面内容
+            await this.loadPageContent('views/Login/Login.html', '.login-page-wrapper');
+            
+            // 加载布局组件
+            await this.loadPageContent('components/Layout/Header.html', '#header');
+            await this.loadPageContent('components/Layout/Sidebar.html', '#sidebar');
+            
+            // 加载其他页面内容
+            await this.loadPageContent('views/ClusterMonitor/ClusterMonitor.html', '#clusterMonitorPage');
+            await this.loadPageContent('views/FaultManage/FaultManage.html', '#faultManagePage');
+            await this.loadPageContent('views/LogAnalysis/LogAnalysis.html', '#logAnalysisPage');
+            
+        } catch (error) {
+            console.error('加载页面组件失败:', error);
+        }
+    }
+
     // 初始化路由
     initializeRouter() {
         // 监听浏览器前进后退
@@ -399,8 +420,14 @@ class ErrorDetectingApp {
     }
 
     // 动态加载页面内容的辅助方法
-    async loadPageContent(url, container) {
+    async loadPageContent(url, containerSelector) {
         try {
+            const container = document.querySelector(containerSelector);
+            if (!container) {
+                console.warn(`容器不存在: ${containerSelector}`);
+                return;
+            }
+            
             const response = await fetch(url);
             if (response.ok) {
                 const html = await response.text();
@@ -411,7 +438,10 @@ class ErrorDetectingApp {
             }
         } catch (error) {
             console.error(`加载页面内容时出错: ${url}`, error);
-            container.innerHTML = '<div class="error-message">页面加载出错</div>';
+            const container = document.querySelector(containerSelector);
+            if (container) {
+                container.innerHTML = '<div class="error-message">页面加载出错</div>';
+            }
         }
     }
 }