# Web 界面交互优化技能为 AI Agent 创建流畅、稳定的 Web 监控面板界面。 ## 功能特性 - 📊 数据监控面板模板 - 🔄 智能刷新（数据变化才更新） - 📜 滚动位置保持 - 🎨 弹窗交互优化 - 🚀 服务自动重启 - 📱 响应式设计 ## 适用场景 - 任务执行监控 - 数据可视化展示 - 实时状态面板 - 后台管理界面 ## 快速开始 ### 1. 创建基础 HTML 文件 ```bash cd /workspace/tools cat > dashboard.html << 'EOF' 监控面板

📊 监控面板

自动刷新 (60 秒)

统计 1

统计 2

📋 列表

EOF ``` ### 2. 创建 Node.js 服务器 ```bash cat > server.js << 'EOF' const http = require('http'); const fs = require('fs'); const path = require('path'); const PORT = process.env.PORT || 18790; // 读取 HTML 文件 const htmlPath = path.join(__dirname, 'dashboard.html'); const html = fs.readFileSync(htmlPath, 'utf-8'); // 模拟数据 function getData() { return { timestamp: Date.now(), items: [ { id: 1, name: '任务 1', status: 'success' }, { id: 2, name: '任务 2', status: 'pending' }, ] }; } const server = http.createServer((req, res) => { // CORS res.setHeader('Access-Control-Allow-Origin', '*'); if (req.url === '/' || req.url === '/index.html') { res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(html); return; } if (req.url === '/api/data') { res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(getData())); return; } res.writeHead(404); res.end('Not Found'); }); server.listen(PORT, () => { console.log(`📊 监控面板已启动`); console.log(` 访问地址：http://localhost:${PORT}`); console.log(` API: http://localhost:${PORT}/api/data`); }); EOF ``` ### 3. 创建带自动重启的启动脚本 ```bash cat > run-monitor.sh << 'EOF' #!/bin/bash SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" LOG_DIR="/tmp/openclaw-monitor" PID_FILE="$LOG_DIR/monitor.pid" LOG_FILE="$LOG_DIR/monitor.log" mkdir -p "$LOG_DIR" # 检查是否已在运行 if [ -f "$PID_FILE" ]; then PID=$(cat "$PID_FILE") if ps -p $PID > /dev/null 2>&1; then echo "✅ 监控面板已在运行 (PID: $PID)" exit 0 fi fi # 启动服务（带自动重启） echo "🚀 启动监控面板..." cd "$SCRIPT_DIR" ( while true; do node server.js >> "$LOG_FILE" 2>&1 echo "⚠️ 服务意外停止，5 秒后重启..." >> "$LOG_FILE" sleep 5 done ) > /dev/null 2>&1 & echo $! > "$PID_FILE" sleep 3 if ps -p $(cat "$PID_FILE") > /dev/null 2>&1; then echo "✅ 监控面板已启动" echo " 访问地址：http://localhost:18790" echo " 日志文件：$LOG_FILE" echo " 进程 PID: $(cat $PID_FILE)" else echo "❌ 启动失败" rm -f "$PID_FILE" fi EOF chmod +x run-monitor.sh ``` ### 4. 运行 ```bash ./run-monitor.sh ``` 访问：http://localhost:18790 ## 关键优化点 ### 1. 智能刷新 ```javascript // 只在数据变化时重新渲染 const hasChanges = newDataHash !== lastDataHash; if (hasChanges) { render(data); // 恢复滚动位置 window.scrollTo(0, scrollY); } ``` ### 2. 滚动位置保持 ```javascript // 刷新前保存 const scrollY = window.scrollY; // 渲染后恢复 window.scrollTo(0, scrollY); ``` ### 3. 弹窗交互 ```javascript // 打开时保存位置 const scrollY = window.scrollY; document.body.style.top = -scrollY + 'px'; document.body.classList.add('modal-open'); // 关闭时恢复 const scrollY = parseInt(document.body.style.top || '0'); document.body.classList.remove('modal-open'); window.scrollTo(0, Math.abs(scrollY)); ``` ### 4. 服务自动重启 ```bash while true; do node server.js sleep 5 # 5 秒后自动重启 done ``` ## 自定义 ### 修改数据源编辑 `server.js` 中的 `getData()` 函数： ```javascript function getData() { // 从数据库、API 或文件读取数据 const data = fs.readFileSync('/path/to/data.json'); return JSON.parse(data); } ``` ### 修改样式编辑 `dashboard.html` 中的 `

📋 列表

标题

Web Dashboard Optimizer

Description

Latest Changes

Install Web Dashboard Optimizer with One Click