Web 界面交互优化技能

为 AI Agent 创建流畅、稳定的 Web 监控面板界面。

功能特性

适用场景

快速开始

1. 创建基础 HTML 文件

cd /workspace/tools
cat > dashboard.html << 'EOF'



    
    
    
    


    

        

            
📊 监控面板
            

                自动刷新 (60 秒)
                🔄 刷新
            
        
        
        

            

                
-
                
统计 1
            
            

                
-
                
统计 2
            
        
        
        

            
📋 列表
            

        
    
    
    
    

        

            

                
标题
                ×
            
            
内容
        
    
    
    


EOF

2. 创建 Node.js 服务器

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. 创建带自动重启的启动脚本

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. 运行

./run-monitor.sh

访问：http://localhost:18790

关键优化点

1. 智能刷新

// 只在数据变化时重新渲染
const hasChanges = newDataHash !== lastDataHash;
if (hasChanges) {
    render(data);
    // 恢复滚动位置
    window.scrollTo(0, scrollY);
}

2. 滚动位置保持

// 刷新前保存
const scrollY = window.scrollY;
// 渲染后恢复
window.scrollTo(0, scrollY);

3. 弹窗交互

// 打开时保存位置
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. 服务自动重启

while true; do
    node server.js
    sleep 5  # 5 秒后自动重启
done

自定义

修改数据源

编辑 server.js 中的 getData() 函数：

function getData() {
    // 从数据库、API 或文件读取数据
    const data = fs.readFileSync('/path/to/data.json');
    return JSON.parse(data);
}

修改样式

编辑 dashboard.html 中的