Files
MeowOS-For-R3P2/patch_v2/meowpanel/web/index.html
T
MeowOS d8eeef5c57 feat(panel, netmgr §11): MeowPanel 网络管理页—netmgrd 期2 面板侧
后端(patch_v2/meowpanel/meowpanel.c,/api/audio 同款透传模式):
- GET /api/net/status    → 0xE0 概览 JSON(接口表 + WiFi/BT 摘要 + 速率)
- GET /api/net/conns?entity= → 0xE8 连接表(解析 entity|本端|远端|状态|寿命|域名 → JSON,transit 截断标记)
- GET /api/net/dns       → 0xEC status(mode/enabled/upstream/缓存命中/查询/deny/resolv_modified)
- POST /api/net/dns/flush → 0xEC flush(写级:HTTP 层走 require_auth;IPC 身份由 netmgrd 判定)
- GET /api/net/log       → TF MeowOS/logs/ 最新 net_*.log tail(256KB 上限,1000 行)
- netmgrd 不在/超时/应答异常 → 503 降级 JSON(NET_UNAVAILABLE),面板其它页不受影响
- 新增 --sock-net / env MEOW_NET_SOCK(宿主/qemu 测试用)

前端(web/,MD3/MIUIx 双主题沿用 270 落地件):
- 侧栏新增「网络」入口(#/net);接口卡 + WiFi 摘要 + 蓝牙摘要 + 每实体连接表
  (entity 前缀筛选 + 5s 轮询)+ DNS 代理卡(统计 + 清缓存按钮)+ 日志查看器
- netmgrd 不在 → 显示「网络管理服务不可用」占位 + 重试,不白屏不报错栈

验证:宿主 cc -Wall -Wextra 0 warning;mipsel 交叉编译 0 warning;假 netmgrd IPC 桩
(Python 帧级桩)联调五端点含 entity 过滤/flush 成功与 403/503 降级全通过;headless
Chromium 渲染 #/net(服务在线/离线两态)与 #/perf #/audio 无回归。
后端起二进制 md5: 21c70046476d3bf63e76f3d63e9eca2c(mipsel 静态)。

遗留(主会话部署时决策):netmgrd flush 写级依 SO_PEERCRED 判系统身份,面板 exe 位于
/usr/data/mnt/sd_0/MeowOS/opt/MeowPanel/(非 /usr/bin/meow_* 亦非 os.meow.* 包)→ 真机
上 flush 会被 netmgrd 拒(403)。需在 netmgrd classify_exe 增认面板路径,或接受 403 只读。
不部署到设备(留主会话热更)。
2026-09-01 21:01:00 +08:00

148 lines
9.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN" data-style="md3" data-mode="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="color-scheme" content="dark light">
<title>MeowPanel · MeowOS 面板</title>
<link rel="stylesheet" href="meowpanel.css">
</head>
<body>
<!-- 顶部横幅:后端未连接 / 网络错误 -->
<div id="offline-banner" class="offline-banner" hidden>⚠️ 后端未连接 — 请确认设备上的 MeowPanel 后端已启动(<code>http://&lt;host&gt;.local:8080</code>)</div>
<div id="app" class="app">
<!-- 左侧导航(宝塔式) -->
<aside class="sidebar" id="sidebar">
<div class="brand">
<span class="brand-mark">M</span>
<span class="brand-name">MeowPanel</span>
</div>
<nav class="nav" id="nav">
<button class="nav-item" data-route="perf" title="实时性能">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M3 13h4l2-5 3 9 2-4h5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<span class="nav-label">性能</span>
</button>
<button class="nav-item" data-route="bright" title="亮度 / 音量">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/></svg></span>
<span class="nav-label">亮度·音量</span>
</button>
<button class="nav-item" data-route="audio" title="音频服务状态(meow_audiod)">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M4 10v4h3l5 4V6l-5 4H4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M15.5 9.5a3.5 3.5 0 0 1 0 5M18 7a7 7 0 0 1 0 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="nav-label">音频</span>
</button>
<button class="nav-item" data-route="net" title="网络管理(meow_netmgrd)">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M2.5 9a15 15 0 0 1 19 0M5.5 12.5a10 10 0 0 1 13 0M8.5 16a5 5 0 0 1 7 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="19" r="1.4" fill="currentColor"/></svg></span>
<span class="nav-label">网络</span>
</button>
<button class="nav-item" data-route="files" title="文件管理">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span>
<span class="nav-label">文件</span>
</button>
<button class="nav-item" data-route="apps" title="MeowAPPs 管理">
<span class="nav-ico"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="13" y="4" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="4" y="13" width="7" height="7" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="13" y="13" width="7" height="7" rx="4" fill="none" stroke="currentColor" stroke-width="2"/></svg></span>
<span class="nav-label">应用</span>
</button>
<button class="nav-item" data-route="fonts" title="字体库管理">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M5 18L10 5h1.4L16.5 18h-2.2l-1.2-3.2H8.3L7.1 18H5zm4-5h3.4l-1.7-4.7L9 13z" fill="currentColor"/><path d="M17 19h4v1.6h-4z" fill="currentColor"/></svg></span>
<span class="nav-label">字体</span>
</button>
<button class="nav-item" data-route="settings" title="设置镜像">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="9" cy="6" r="2" fill="var(--bg)"/><circle cx="15" cy="12" r="2" fill="var(--bg)"/><circle cx="7" cy="18" r="2" fill="var(--bg)"/></svg></span>
<span class="nav-label">设置</span>
</button>
<button class="nav-item" data-route="remote" title="远程控制">
<span class="nav-ico"><svg viewBox="0 0 24 24"><rect x="7" y="3" width="10" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="15" r="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M10 7h4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="nav-label">远程</span>
</button>
<button class="nav-item" data-route="screen" title="实时画面 / 点击遥控">
<span class="nav-ico"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 21h8M12 17v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="8.5" cy="11" r="1.2" fill="currentColor"/><path d="M12 11l3.5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></span>
<span class="nav-label">屏幕</span>
</button>
<button class="nav-item" data-route="system" title="系统信息 / 升级">
<span class="nav-ico"><svg viewBox="0 0 24 24"><rect x="6" y="3" width="12" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M9 8h6M9 12h6M9 16h3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="nav-label">系统</span>
</button>
<button class="nav-item" data-route="logs" title="系统日志">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M5 4h14v16l-2-2-2 2-2-2-2 2-2-2-2 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M8 9h8M8 13h5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="nav-label">日志</span>
</button>
<button class="nav-item" data-route="notif" title="通知中心">
<span class="nav-ico"><svg viewBox="0 0 24 24"><path d="M6 9a6 6 0 0 1 12 0v4l2 3H4l2-3z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M10 20a2 2 0 0 0 4 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="nav-label">通知</span>
</button>
</nav>
</aside>
<!-- 右侧:顶栏 + 内容 -->
<div class="main">
<header class="topbar">
<button class="icon-btn menu-btn" id="menu-btn" title="展开/收起导航" aria-label="菜单">
<svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
</button>
<h1 class="topbar-title" id="page-title">实时性能</h1>
<div class="topbar-actions">
<span class="conn" id="conn-dot" data-state="unknown" title="后端连接">
<span class="conn-dot"></span><span class="conn-text" id="conn-text">检测中…</span>
</span>
<div class="seg" id="style-seg" title="风格">
<button class="seg-btn" data-style="md3">MD3</button>
<button class="seg-btn" data-style="miuix">MIUIx</button>
</div>
<div class="seg" id="theme-seg" title="明暗">
<button class="seg-btn" data-mode="dark">深色</button>
<button class="seg-btn" data-mode="light">浅色</button>
</div>
</div>
</header>
<main class="content" id="content">
<p class="placeholder">加载中…</p>
</main>
</div>
</div>
<!-- 通用确认弹窗 -->
<div id="modal" class="modal-scrim" hidden>
<div class="modal">
<h2 class="modal-title" id="modal-title">确认</h2>
<p class="modal-body" id="modal-body"></p>
<div class="modal-actions">
<button class="btn" id="modal-no">取消</button>
<button class="btn btn-primary btn-danger" id="modal-yes">确定</button>
</div>
</div>
</div>
<!-- 登录页(面板鉴权启用后显示) -->
<div id="login" class="login-scrim" hidden>
<div class="login-box">
<div class="login-brand"><span class="login-brand-mark">M</span><span>MeowPanel</span></div>
<p class="login-sub">此面板已开启密码鉴权,请输入密码后使用。</p>
<input type="password" id="login-password" class="login-input" placeholder="面板密码" autocomplete="current-password">
<p class="login-err" id="login-err" hidden></p>
<button class="btn btn-primary login-btn" id="login-btn">登 录</button>
</div>
</div>
<!-- 设置面板密码对话框 -->
<div id="pwdlg" class="modal-scrim" hidden>
<div class="modal">
<h2 class="modal-title" id="pwdlg-title">设置面板密码</h2>
<p class="modal-body" id="pwdlg-body">请输入新密码(留空则清除密码)。</p>
<input type="password" id="pwdlg-input" class="login-input" placeholder="新密码" autocomplete="new-password">
<div class="modal-actions">
<button class="btn" id="pwdlg-cancel">取消</button>
<button class="btn btn-primary" id="pwdlg-ok">确定</button>
</div>
</div>
</div>
<div id="toast" class="toast" hidden></div>
<script src="meowpanel.js"></script>
</body>
</html>