feat: 实现 OpenClaw Mission Control 仪表盘框架
- 创建 API Blueprint 模块结构 - 实现系统状态 API (CPU/内存/磁盘/进程) - 实现服务状态 API - 创建仪表盘页面模板 - 添加仪表盘 CSS 样式 - 添加仪表盘 JavaScript 交互 - 登录后自动跳转到仪表盘
This commit is contained in:
小白
197
templates/dashboard/index.html
Normal file
197
templates/dashboard/index.html
Normal file
@@ -0,0 +1,197 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mission Control - {{ username }}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}?v=20260312a">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部导航栏 -->
|
||||
<nav class="top-nav">
|
||||
<div class="nav-brand">
|
||||
<span class="logo">🚀</span>
|
||||
<span class="title">OpenClaw Mission Control</span>
|
||||
</div>
|
||||
<div class="nav-user">
|
||||
<span class="username">{{ username }}</span>
|
||||
<a href="{{ url_for('logout') }}" class="btn-logout">退出</a>
|
||||
<button class="theme-toggle" aria-label="切换主题">🌙</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<a href="#" class="nav-item active" data-page="dashboard">
|
||||
<span class="icon">📊</span>
|
||||
<span class="text">仪表盘</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="sessions">
|
||||
<span class="icon">💬</span>
|
||||
<span class="text">会话管理</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="nodes">
|
||||
<span class="icon">📱</span>
|
||||
<span class="text">节点管理</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="skills">
|
||||
<span class="icon">🎯</span>
|
||||
<span class="text">技能管理</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="memory">
|
||||
<span class="icon">🧠</span>
|
||||
<span class="text">记忆管理</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="settings">
|
||||
<span class="icon">⚙️</span>
|
||||
<span class="text">系统设置</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<!-- 快捷链接 -->
|
||||
<div class="quick-links">
|
||||
<div class="section-title">快捷链接</div>
|
||||
<a href="http://1.14.58.157:6806" target="_blank" class="link-item">
|
||||
<span class="icon">📝</span> 思源笔记
|
||||
</a>
|
||||
<a href="http://1.14.58.157:3000" target="_blank" class="link-item">
|
||||
<span class="icon">📦</span> Gitea
|
||||
</a>
|
||||
<a href="http://1.14.58.157:8080" target="_blank" class="link-item">
|
||||
<span class="icon">📊</span> NocoDB
|
||||
</a>
|
||||
<a href="http://1.14.58.157:18798" target="_blank" class="link-item">
|
||||
<span class="icon">🧠</span> 记忆面板
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<!-- 仪表盘页面 -->
|
||||
<div id="page-dashboard" class="page active">
|
||||
<h1 class="page-title">📊 系统仪表盘</h1>
|
||||
|
||||
<!-- 状态卡片 -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card cpu">
|
||||
<div class="stat-icon">💻</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">CPU 使用率</div>
|
||||
<div class="stat-value" id="cpu-percent">--</div>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" id="cpu-progress" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card memory">
|
||||
<div class="stat-icon">🧠</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">内存使用</div>
|
||||
<div class="stat-value" id="memory-value">-- / --</div>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" id="memory-progress" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card disk">
|
||||
<div class="stat-icon">💾</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">磁盘使用</div>
|
||||
<div class="stat-value" id="disk-value">-- / --</div>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" id="disk-progress" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card processes">
|
||||
<div class="stat-icon">⚡</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">运行进程</div>
|
||||
<div class="stat-value" id="process-count">--</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务状态 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">🔌 服务状态</h2>
|
||||
<div class="services-grid" id="services-grid">
|
||||
<div class="loading">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">⚡ 快捷操作</h2>
|
||||
<div class="actions-grid">
|
||||
<button class="action-btn" onclick="location.href='http://1.14.58.157:6806'">
|
||||
<span class="icon">📝</span>
|
||||
<span>打开思源笔记</span>
|
||||
</button>
|
||||
<button class="action-btn" onclick="location.href='http://1.14.58.157:3000'">
|
||||
<span class="icon">📦</span>
|
||||
<span>打开 Gitea</span>
|
||||
</button>
|
||||
<button class="action-btn" onclick="location.href='http://1.14.58.157:18798'">
|
||||
<span class="icon">🧠</span>
|
||||
<span>记忆面板</span>
|
||||
</button>
|
||||
<button class="action-btn" onclick="refreshStatus()">
|
||||
<span class="icon">🔄</span>
|
||||
<span>刷新状态</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他页面占位 -->
|
||||
<div id="page-sessions" class="page">
|
||||
<h1 class="page-title">💬 会话管理</h1>
|
||||
<div class="coming-soon">
|
||||
<span class="icon">🚧</span>
|
||||
<p>功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-nodes" class="page">
|
||||
<h1 class="page-title">📱 节点管理</h1>
|
||||
<div class="coming-soon">
|
||||
<span class="icon">🚧</span>
|
||||
<p>功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-skills" class="page">
|
||||
<h1 class="page-title">🎯 技能管理</h1>
|
||||
<div class="coming-soon">
|
||||
<span class="icon">🚧</span>
|
||||
<p>功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-memory" class="page">
|
||||
<h1 class="page-title">🧠 记忆管理</h1>
|
||||
<div class="coming-soon">
|
||||
<span class="icon">🚧</span>
|
||||
<p>功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page-settings" class="page">
|
||||
<h1 class="page-title">⚙️ 系统设置</h1>
|
||||
<div class="coming-soon">
|
||||
<span class="icon">🚧</span>
|
||||
<p>功能开发中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user