refactor: Split demo into 4 separate features with individual buttons

index.js

@@ -23,56 +23,59 @@ const LARGE_JSON_PATH = path.join(DATA_DIR, 'large_data.json');
 // Global lock to prevent concurrent demos
 global.isDemoRunning = false;
 
-async function runDemo() {
-    console.log('=== Node.js 性能优化与大文件处理演示 ===\n');
-
+// Feature 1: Large File Stream
+async function runLargeFileDemo() {
+    console.log('=== 1. 大文件流式处理演示 ===');
     try {
-        // 1. Large File Processing Demo
-        console.log('--- 1. 大文件流式处理 ---');
         const largeFileHandler = new LargeFileHandler(LARGE_FILE_PATH);
-        
-        // Generate 100k lines
-        const lineCount = 100000; 
+        const lineCount = 100000;
         console.log(`正在生成测试数据 (${lineCount} 行)...`);
-        await largeFileHandler.generateTestFile(lineCount); 
-        
-        // Stream processing
+        await largeFileHandler.generateTestFile(lineCount);
         console.log('开始流式处理...');
         await largeFileHandler.processFileStream();
-        
-        console.log('\n--- 2. XML 处理 ---');
-        // Generate XML
-        const xmlContent = xmlJsonHandler.generateXml(1000); 
+        logMemoryUsage();
+    } catch (err) {
+        console.error('发生错误:', err);
+    }
+}
+
+// Feature 2: XML Processing
+async function runXmlDemo() {
+    console.log('=== 2. XML 处理演示 ===');
+    try {
+        const xmlContent = xmlJsonHandler.generateXml(1000);
         fs.writeFileSync(XML_FILE_PATH, xmlContent);
         console.log(`XML 文件已保存: ${XML_FILE_PATH}`);
-        
-        // Parse XML
         const parsedXml = xmlJsonHandler.parseXml(xmlContent);
         console.log('XML 解析完成');
-        
-        console.log('\n--- 3. JSON 大文件流式处理 ---');
-        // Generate large JSON
+        logMemoryUsage();
+    } catch (err) {
+        console.error('发生错误:', err);
+    }
+}
+
+// Feature 3: JSON Stream
+async function runJsonDemo() {
+    console.log('=== 3. JSON 大文件流式处理演示 ===');
+    try {
         console.log('正在生成 JSON 数据...');
         await xmlJsonHandler.generateLargeJson(LARGE_JSON_PATH, 10000);
-        
-        // Stream parse JSON
         console.log('开始流式解析 JSON...');
         await xmlJsonHandler.processLargeJsonStream(LARGE_JSON_PATH);
-
-        console.log('\n=== 演示结束 ===');
-        
-        // Capture memory usage
-        const used = process.memoryUsage();
-        console.log('Memory Usage:');
-        for (let key in used) {
-            console.log(`${key}: ${Math.round(used[key] / 1024 / 1024 * 100) / 100} MB`);
-        }
-
+        logMemoryUsage();
     } catch (err) {
         console.error('发生错误:', err);
     }
 }
 
+function logMemoryUsage() {
+    const used = process.memoryUsage();
+    console.log('Memory Usage:');
+    for (let key in used) {
+        console.log(`${key}: ${Math.round(used[key] / 1024 / 1024 * 100) / 100} MB`);
+    }
+}
+
 // Serve the main page
 app.get('/', (req, res) => {
     res.send(`
@@ -85,10 +88,14 @@ app.get('/', (req, res) => {
                     body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #f0f2f5; padding: 40px; color: #333; }
                     .container { max-width: 900px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
                     h1 { color: #2c3e50; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px; }
-                    .controls { margin-bottom: 20px; display: flex; gap: 10px; }
-                    button { padding: 10px 20px; font-size: 16px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 5px; transition: background 0.3s; }
+                    .controls { margin-bottom: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
+                    button { padding: 15px; font-size: 16px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 5px; transition: background 0.3s; font-weight: bold; }
                     button:hover { background: #0056b3; }
                     button:disabled { background: #ccc; cursor: not-allowed; }
+                    .btn-system { background: #28a745; }
+                    .btn-system:hover { background: #218838; }
+                    .btn-clear { background: #6c757d; grid-column: span 2; }
+                    .btn-clear:hover { background: #5a6268; }
                     #output { background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 5px; font-family: "Menlo", "Monaco", "Courier New", monospace; height: 500px; overflow-y: auto; white-space: pre-wrap; font-size: 14px; line-height: 1.5; border: 1px solid #333; }
                     .status { margin-top: 10px; font-style: italic; color: #666; }
                 </style>
@@ -97,21 +104,23 @@ app.get('/', (req, res) => {
                 <div class="container">
                     <h1>Node.js Performance Demo</h1>
                     <div class="controls">
-                        <button id="runBtn" onclick="runDemo()">▶ 运行性能演示</button>
-                        <button onclick="getSystemInfo()" style="background: #28a745;">🖥 获取系统信息</button>
-                        <button onclick="clearOutput()" style="background: #6c757d;">🗑 清空输出</button>
+                        <button onclick="runDemo('large-file')">📄 1. 大文件流式处理</button>
+                        <button onclick="runDemo('xml')">🏷️ 2. XML 解析处理</button>
+                        <button onclick="runDemo('json')">📦 3. JSON 流式解析</button>
+                        <button onclick="getSystemInfo()" class="btn-system">🖥️ 4. 系统信息 (child_process)</button>
+                        <button onclick="clearOutput()" class="btn-clear">🗑 清空输出</button>
                     </div>
-                    <div id="output">等待操作...</div>
+                    <div id="output">点击上方按钮开始测试...</div>
                     <div id="status" class="status"></div>
                 </div>
 
                 <script>
                     const outputDiv = document.getElementById('output');
                     const statusDiv = document.getElementById('status');
-                    const runBtn = document.getElementById('runBtn');
+                    let isRunning = false;
 
                     function log(msg, isError = false) {
-                        if (outputDiv.innerHTML === '等待操作...') {
+                        if (outputDiv.innerHTML === '点击上方按钮开始测试...') {
                             outputDiv.innerHTML = '';
                         }
                         const span = document.createElement('div');
@@ -122,18 +131,18 @@ app.get('/', (req, res) => {
                     }
 
                     function clearOutput() {
-                        outputDiv.innerHTML = '等待操作...';
+                        outputDiv.innerHTML = '点击上方按钮开始测试...';
                         statusDiv.textContent = '';
                     }
 
-                    function runDemo() {
-                        if (runBtn.disabled) return;
+                    function runDemo(type) {
+                        if (isRunning) return;
                         
-                        runBtn.disabled = true;
+                        isRunning = true;
+                        updateButtons(true);
                         statusDiv.textContent = '正在运行演示...';
-                        outputDiv.innerHTML = ''; // Clear previous output
                         
-                        const eventSource = new EventSource('/api/run-demo');
+                        const eventSource = new EventSource('/api/run-demo?type=' + type);
                         
                         eventSource.onmessage = function(event) {
                             try {
@@ -144,7 +153,8 @@ app.get('/', (req, res) => {
                                     log(data.message, true);
                                 } else if (data.type === 'end') {
                                     eventSource.close();
-                                    runBtn.disabled = false;
+                                    isRunning = false;
+                                    updateButtons(false);
                                     statusDiv.textContent = '演示完成';
                                 }
                             } catch (e) {
@@ -155,18 +165,25 @@ app.get('/', (req, res) => {
                         eventSource.onerror = function(err) {
                             console.error('EventSource failed:', err);
                             eventSource.close();
-                            runBtn.disabled = false;
+                            isRunning = false;
+                            updateButtons(false);
                             statusDiv.textContent = '连接中断';
                             log('Error: Connection to server lost.', true);
                         };
                     }
 
+                    function updateButtons(disabled) {
+                        const btns = document.querySelectorAll('button:not(.btn-clear)');
+                        btns.forEach(btn => btn.disabled = disabled);
+                    }
+
                     async function getSystemInfo() {
+                        if (isRunning) return;
                         statusDiv.textContent = '正在获取系统信息...';
                         try {
                             const res = await fetch('/api/system-info');
                             const text = await res.text();
-                            log('\\n=== 系统信息 ===');
+                            log('\\n=== 4. 系统信息 ===');
                             log(text);
                             statusDiv.textContent = '获取成功';
                         } catch (e) {
@@ -181,6 +198,8 @@ app.get('/', (req, res) => {
 
 // SSE Endpoint for running the demo
 app.get('/api/run-demo', async (req, res) => {
+    const type = req.query.type;
+
     if (global.isDemoRunning) {
         res.writeHead(200, {
             'Content-Type': 'text/event-stream',
@@ -222,7 +241,19 @@ app.get('/api/run-demo', async (req, res) => {
     };
 
     try {
-        await runDemo();
+        switch (type) {
+            case 'large-file':
+                await runLargeFileDemo();
+                break;
+            case 'xml':
+                await runXmlDemo();
+                break;
+            case 'json':
+                await runJsonDemo();
+                break;
+            default:
+                console.log('未知的任务类型');
+        }
     } catch (e) {
         console.error('Unhandled error:', e);
     } finally {