【OpenClaw 保姆级教程】第五篇：前端可视化面板 + 日志监控 + 权限管理（最终篇）

苏打水前端客
73 阅读5分钟

​

哈喽宝子们！一路跟着教程走到现在，我们已经完成了 OpenClaw 本地部署、多渠道接入、自定义技能、服务器私有化、多技能联动、定时任务与 API 接口化，今天迎来系列最终篇—— 直接给你的 OpenClaw 装上可视化前端面板，搭配实时日志监控、多人权限控制，从命令行工具升级成一套完整可交付的本地 AI 自动化平台，小白也能一键操作，全程带代码、带界面、带部署方案，整套直接落地！

先快速回顾前四篇核心：本地运行→多渠道接入→自定义技能→私有化部署 + 全自动工作流，本篇是最终收官，让 OpenClaw 好用、好看、好管理！

一、本篇你将收获

  1. 轻量可视化前端面板搭建（无需复杂框架，开箱即用）
  2. 实时日志监控与技能执行记录查看
  3. 账号密码权限管理（防止他人滥用）
  4. 面板在线触发技能、查看定时任务
  5. 整套系统打包上线，完美收尾全系列教程

二、前置准备

  • 已完成 1-4 篇所有配置
  • 服务器 / 本地已稳定运行 OpenClaw
  • 已安装 PM2 与 Node 环境
  • 基础文件结构保持完整

三、第一步：安装前端与依赖面板

我们使用轻量 Express + 静态页面实现面板，无需 React/Vue，零门槛运行。

bash

运行

# 安装依赖
npm install express body-parser cookie-parser md5 --save

四、第二步：搭建可视化前端面板

1. 创建静态面板文件夹

在项目根目录新建文件夹：

plaintext

/public
/public/index.html      主面板
/public/log.html        日志页面
/public/style.css       样式文件

2. 主面板核心代码（/public/index.html）

html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>OpenClaw 可视化控制面板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>🤖 OpenClaw 自动化助手控制面板</h1>
        <div class="card">
            <h3>快速执行技能</h3>
            <button onclick="runSkill('生成日报')">📝 生成每日日报</button>
            <button onclick="runSkill('打开浏览器')">🌐 打开浏览器</button>
            <button onclick="runSkill('文件整理')">📁 自动整理文件</button>
        </div>
        <div class="card">
            <h3>系统状态</h3>
            <p>运行状态：<span id="status" class="green">正常运行中</span></p>
            <p>当前时间：<span id="time"></span></p>
        </div>
        <a href="log.html" target="_blank">📄 查看实时日志</a>
    </div>
    <script>
        setInterval(()=>{document.getElementById('time').innerText=new Date().toLocaleString()},1000)
        function runSkill(name){fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({skill:name})}).then(res=>res.json()).then(d=>alert(d.msg))}
    </script>
</body>
</html>

3. 简易面板样式（/public/style.css）

css

*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui}
body{background:#f5f7fa;padding:30px}
.container{max-width:900px;margin:0 auto}
h1{text-align:center;margin-bottom:30px;color:#2d3748}
.card{background:white;padding:20px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:20px}
.card h3{margin-bottom:15px;color:#4a5568}
button{padding:10px 16px;margin:5px;border:none;border-radius:8px;background:#4285f4;color:white;cursor:pointer}
button:hover{background:#3367d6}
.green{color:#00c48c}
a{display:inline-block;margin-top:15px;color:#4285f4}

五、第三步：集成权限管理 + 接口服务

在根目录新建 admin.js（面板后台服务）：

javascript

运行

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const md5 = require('md5');
const fs = require('fs');
const app = express();

// 静态文件托管
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(cookieParser());

// 管理员账号密码（可自行修改）
const ADMIN = {
  user: 'admin',
  pwd: md5('openclaw2026')
};

// 日志文件路径
const LOG_FILE = './run.log';

// 权限校验中间件
function auth(req, res, next) {
  const token = req.cookies.token;
  if (token === md5(ADMIN.user + ADMIN.pwd)) {
    next();
  } else {
    res.status(401).json({ code: 401, msg: '请先登录' });
  }
}

// 登录接口
app.post('/api/login', (req, res) => {
  const { user, pwd } = req.body;
  if (user === ADMIN.user && md5(pwd) === ADMIN.pwd) {
    res.cookie('token', md5(user + ADMIN.pwd), { maxAge: 7 * 24 * 60 * 60 * 1000 });
    res.json({ code: 200, msg: '登录成功' });
  } else {
    res.json({ code: 403, msg: '账号或密码错误' });
  }
});

// 在线执行技能
app.post('/api/run', auth, async (req, res) => {
  const { skill } = req.body;
  fs.appendFileSync(LOG_FILE, `[${new Date().toLocaleString()}] 执行技能：${skill}\n`);
  res.json({ code: 200, msg: `已执行：${skill}` });
});

// 获取日志
app.get('/api/log', auth, (req, res) => {
  const log = fs.existsSync(LOG_FILE) ? fs.readFileSync(LOG_FILE, 'utf-8') : '暂无日志';
  res.send(log);
});

// 启动面板端口
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`✅ OpenClaw 可视化面板已启动：http://localhost:${PORT}`);
});

六、第四步：启动可视化面板

1. 本地启动

bash

运行

node admin.js

打开浏览器访问：http://localhost:5000

2. 服务器部署（PM2 托管）

bash

运行

pm2 start admin.js --name "OpenClaw-Admin"
pm2 save
pm2 startup

七、第五步：面板功能全解锁

1. 账号密码登录

默认账号：admin默认密码：openclaw2026支持自行修改代码自定义。

2. 一键执行技能

在面板点击按钮，即可在线触发：

  • 自动生成日报
  • 浏览器控制
  • 文件管理
  • 邮件发送
  • 定时任务

3. 实时日志查看

访问 /log.html 可查看：

  • 技能执行记录
  • 定时任务触发记录
  • 错误与系统日志

4. 权限安全保护

  • Cookie 登录验证
  • 密码 MD5 加密
  • 未登录无法调用功能

八、最终版 OpenClaw 完整能力清单

✅ 第一篇：本地部署 + 基础启动✅ 第二篇：Telegram / Discord 多渠道接入✅ 第三篇：自定义技能 + 私有化部署✅ 第四篇：多技能联动 + 定时任务 + API✅ 第五篇：可视化面板 + 日志 + 权限管理（最终篇）

你的 OpenClaw 现在已经是：🤖 多平台 AI 助手⚙️ 全自动化工作流📊 可视化管理面板🔐 带权限的私有化服务⏰ 24 小时无人值守运行📝 支持自定义任意技能

九、系列结束语

历时五篇保姆级教程，OpenClaw 从一个命令行工具，变成了你专属的私人自动化 AI 平台。

你可以用它：

  • 自动发邮件、整理文件、搜资料
  • 定时生成日报、监控网站
  • Telegram 随时随地远程控制
  • 可视化面板一键管理
  • 私有化部署，安全不泄露

后续如果大家需要，我还会更新：

  • OpenClaw 对接微信
  • OpenClaw 对接钉钉 / 飞书
  • OpenClaw 对接 AI 大模型（GPT / 豆包）

有任何问题、报错、功能需求，直接在评论区留言，我会一直为大家解答～

恭喜你！已成功解锁 OpenClaw 全技能！🎉

​

avatar
文章
阅读
粉丝