feat(meowpanel): MeowPanel 后端(HTTP/JSON单进程, 内嵌静态托管, 对接meow_svc_perf/power IPC, 设置镜像, 文件/应用/按键注入) + 前端(蓝牙栏) + 服务配置 + README (agent-164/165)
This commit is contained in:
1 parent
fc0ed4938f
commit
ae51fe9f70
8 files changed
+4277
No files matched your search
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-style="md3" data-theme="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://<host>.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="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="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="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-theme="dark">深色</button>
|
||||
<button class="seg-btn" data-theme="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="toast" class="toast" hidden></div>
|
||||
|
||||
<script src="meowpanel.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,311 @@
|
||||
/* MeowPanel — 前端样式
|
||||
* 主题模型:风格族(ui.style: md3 / miuix)× 明暗(display.theme: dark / light)
|
||||
* 双层变量:
|
||||
* [data-style] 定形状(radius / spacing / outline 宽)+ 主色(--primary)——对齐 SDK §8.1.3
|
||||
* [data-theme] 定中性色 / 语义色(bg/surface/on-surface/outline/error/...)
|
||||
* 默认(:root 无覆盖)= MD3 dark;MD3 中立形状再显式声明便于对照。
|
||||
*/
|
||||
|
||||
/* ---------- 结构基线 ---------- */
|
||||
:root{
|
||||
--space:8px;
|
||||
--radius-s:8px; /* 小:chip/内嵌 */
|
||||
--radius-m:12px; /* 中:按钮/输入 */
|
||||
--radius-l:16px; /* 大:卡片 */
|
||||
--outline-w:0px; /* MD3 无描边 */
|
||||
--nav-w:212px;
|
||||
--topbar-h:56px;
|
||||
--font: -apple-system, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
|
||||
--mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
|
||||
--speed:.16s;
|
||||
}
|
||||
|
||||
/* 风格族:MIUIx 更大圆角 / 略大间距 / 细描边 / 偏品牌主色(更饱和) */
|
||||
:root[data-style="miuix"]{
|
||||
--space:10px;
|
||||
--radius-s:12px;
|
||||
--radius-m:18px; /* 按钮 ≈18px */
|
||||
--radius-l:24px; /* 卡片 ≈24px */
|
||||
--outline-w:1px; /* 细描边 */
|
||||
}
|
||||
|
||||
/* ---------- 深色(默认主深色) ---------- */
|
||||
:root[data-theme="dark"]{
|
||||
--bg:#0a0a0a; /* 背景底(黑)*/
|
||||
--surface:#141414;
|
||||
--surface-variant:#1e1e1e;
|
||||
--surface-dim:#000000;
|
||||
--on-surface:#ececec;
|
||||
--on-surface-variant:#a3a3a3;
|
||||
--outline:#3a3a3a;
|
||||
--outline-variant:#2a2a2a;
|
||||
--error:#cf6679; --on-error:#0a0a0a;
|
||||
--success:#4caf50; --warning:#ffb300;
|
||||
--shadow:0 2px 10px rgba(0,0,0,.5);
|
||||
--scrim:rgba(0,0,0,.55);
|
||||
--hover:rgba(255,255,255,.06);
|
||||
}
|
||||
/* 深色 × MIUIx 主色更饱和 */
|
||||
:root[data-theme="dark"][data-style="md3"]{ --primary:#4a8bf5; --on-primary:#fff; }
|
||||
:root[data-theme="dark"][data-style="miuix"]{--primary:#ff7a00; --on-primary:#fff; }
|
||||
|
||||
/* ---------- 浅色 ---------- */
|
||||
:root[data-theme="light"]{
|
||||
--bg:#f4f5f7;
|
||||
--surface:#ffffff;
|
||||
--surface-variant:#ececee;
|
||||
--surface-dim:#e1e1e4;
|
||||
--on-surface:#1b1b1d;
|
||||
--on-surface-variant:#5c5c60;
|
||||
--outline:#d2d2d6;
|
||||
--outline-variant:#e4e4e8;
|
||||
--error:#ba1a1a; --on-error:#ffffff;
|
||||
--success:#2e7d32; --warning:#ed6c02;
|
||||
--shadow:0 2px 10px rgba(0,0,0,.12);
|
||||
--scrim:rgba(0,0,0,.35);
|
||||
--hover:rgba(0,0,0,.05);
|
||||
}
|
||||
:root[data-theme="light"][data-style="md3"]{ --primary:#2f6fe0; --on-primary:#fff; }
|
||||
:root[data-theme="light"][data-style="miuix"]{--primary:#f57200; --on-primary:#fff; }
|
||||
|
||||
/* ---------- 布局 ---------- */
|
||||
*{ box-sizing:border-box; }
|
||||
html,body{ height:100%; margin:0; }
|
||||
body{
|
||||
background:var(--bg); color:var(--on-surface);
|
||||
font-family:var(--font); font-size:14px; line-height:1.5;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
.app{ display:flex; height:100vh; overflow:hidden; }
|
||||
|
||||
/* 侧栏 */
|
||||
.sidebar{
|
||||
width:var(--nav-w); flex:0 0 var(--nav-w);
|
||||
background:var(--surface); border-right:1px solid var(--outline-variant);
|
||||
display:flex; flex-direction:column; transition:margin-left var(--speed) ease;
|
||||
}
|
||||
.brand{ display:flex; align-items:center; gap:10px; padding:16px 18px; }
|
||||
.brand-mark{
|
||||
width:30px; height:30px; border-radius:var(--radius-m);
|
||||
background:var(--primary); color:var(--on-primary);
|
||||
display:flex; align-items:center; justify-content:center; font-weight:700;
|
||||
}
|
||||
.brand-name{ font-weight:600; font-size:15px; }
|
||||
.nav{ flex:1; overflow-y:auto; padding:8px 10px; display:flex; flex-direction:column; gap:2px; }
|
||||
.nav-item{
|
||||
display:flex; align-items:center; gap:12px; padding:10px 12px;
|
||||
border:none; background:transparent; color:var(--on-surface-variant);
|
||||
border-radius:var(--radius-m); cursor:pointer; text-align:left;
|
||||
font:inherit; font-size:14px; transition:background var(--speed), color var(--speed);
|
||||
}
|
||||
.nav-item:hover{ background:var(--hover); color:var(--on-surface); }
|
||||
.nav-item.active{ background:var(--primary); color:var(--on-primary); }
|
||||
.nav-ico{ width:22px; height:22px; flex:0 0 22px; }
|
||||
.nav-ico svg{ width:100%; height:100%; display:block; }
|
||||
.nav-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
|
||||
/* 主区 */
|
||||
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
|
||||
.topbar{
|
||||
height:var(--topbar-h); flex:0 0 var(--topbar-h);
|
||||
display:flex; align-items:center; gap:12px; padding:0 16px;
|
||||
background:var(--surface); border-bottom:1px solid var(--outline-variant);
|
||||
}
|
||||
.topbar-title{ font-size:17px; font-weight:600; margin:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.icon-btn{
|
||||
width:38px; height:38px; border:none; border-radius:var(--radius-m);
|
||||
background:transparent; color:var(--on-surface-variant); cursor:pointer;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
}
|
||||
.icon-btn:hover{ background:var(--hover); color:var(--on-surface); }
|
||||
.icon-btn svg{ width:22px; height:22px; }
|
||||
.menu-btn{ display:none; }
|
||||
|
||||
/* 顶栏分段控件(风格/明暗) */
|
||||
.seg{ display:inline-flex; background:var(--surface-variant); border-radius:var(--radius-m); padding:3px; }
|
||||
.seg-btn{
|
||||
border:none; background:transparent; color:var(--on-surface-variant);
|
||||
padding:6px 12px; border-radius:calc(var(--radius-m) - 2px);
|
||||
cursor:pointer; font:inherit; font-size:13px; white-space:nowrap;
|
||||
transition:background var(--speed), color var(--speed);
|
||||
}
|
||||
.seg-btn.active{ background:var(--surface); color:var(--on-surface); box-shadow:var(--shadow); }
|
||||
|
||||
/* 连接状态点 */
|
||||
.conn{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-m); background:var(--surface-variant); color:var(--on-surface-variant); font-size:12px; }
|
||||
.conn-dot{ width:9px; height:9px; border-radius:50%; background:var(--on-surface-variant); }
|
||||
.conn[data-state="ok"] .conn-dot{ background:var(--success); }
|
||||
.conn[data-state="bad"] .conn-dot{ background:var(--error); }
|
||||
.conn[data-state="ok"]{ color:var(--success); }
|
||||
.conn[data-state="bad"]{ color:var(--error); }
|
||||
|
||||
/* 内容区 */
|
||||
.content{ flex:1; overflow-y:auto; padding:20px; }
|
||||
.page{ max-width:1100px; margin:0 auto; }
|
||||
.placeholder{ color:var(--on-surface-variant); text-align:center; padding:60px 0; }
|
||||
|
||||
/* 卡片 */
|
||||
.card{
|
||||
background:var(--surface); border-radius:var(--radius-l);
|
||||
border:var(--outline-w) solid var(--outline); /* MD3 无描边;MIUIx 1px */
|
||||
box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px;
|
||||
overflow-x:auto; /* 窄屏表格/内容横向滚动,避免整页外溢 */
|
||||
}
|
||||
.card-title{ font-size:15px; font-weight:600; margin:0 0 14px; }
|
||||
|
||||
/* 统计格子(性能页) */
|
||||
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
|
||||
.stat{
|
||||
background:var(--surface-variant); border-radius:var(--radius-m);
|
||||
padding:14px 16px; border:var(--outline-w) solid var(--outline-variant);
|
||||
}
|
||||
.stat-label{ color:var(--on-surface-variant); font-size:12px; margin-bottom:6px; }
|
||||
.stat-value{ font-size:22px; font-weight:700; letter-spacing:.3px; }
|
||||
.stat-unit{ font-size:13px; font-weight:400; color:var(--on-surface-variant); margin-left:4px; }
|
||||
.stat-sub{ font-size:12px; color:var(--on-surface-variant); margin-top:6px; }
|
||||
|
||||
/* 进度条 */
|
||||
.bar{ height:8px; border-radius:99px; background:var(--surface-dim); overflow:hidden; margin-top:8px; }
|
||||
.bar > span{ display:block; height:100%; border-radius:99px; background:var(--primary); transition:width .4s ease; }
|
||||
.bar.warn > span{ background:var(--warning); }
|
||||
.bar.danger > span{ background:var(--error); }
|
||||
|
||||
/* 按钮 */
|
||||
.btn{
|
||||
border:none; padding:9px 16px; border-radius:var(--radius-m);
|
||||
background:var(--surface-variant); color:var(--on-surface);
|
||||
cursor:pointer; font:inherit; font-size:14px;
|
||||
display:inline-flex; align-items:center; gap:6px;
|
||||
transition:filter var(--speed), background var(--speed), transform .05s;
|
||||
}
|
||||
.btn:hover{ filter:brightness(1.08); }
|
||||
.btn:active{ transform:scale(.98); }
|
||||
.btn:disabled{ opacity:.5; cursor:not-allowed; }
|
||||
.btn-primary{ background:var(--primary); color:var(--on-primary); }
|
||||
.btn-danger{ background:var(--error); color:var(--on-error); }
|
||||
.btn-ghost{ background:transparent; }
|
||||
.icon-txt{ font-size:16px; }
|
||||
|
||||
/* 表格(文件/日志) */
|
||||
.table{ width:100%; border-collapse:collapse; }
|
||||
.table th, .table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--outline-variant); }
|
||||
.table th{ color:var(--on-surface-variant); font-weight:500; font-size:12px; }
|
||||
.table tr:hover td{ background:var(--hover); }
|
||||
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
|
||||
.muted{ color:var(--on-surface-variant); font-size:12px; }
|
||||
.mono{ font-family:var(--mono); font-size:12px; word-break:break-all; }
|
||||
|
||||
/* 面包屑 */
|
||||
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-bottom:12px; }
|
||||
.crumbs a{ color:var(--primary); cursor:pointer; text-decoration:none; }
|
||||
.crumbs a:hover{ text-decoration:underline; }
|
||||
|
||||
/* 表单行 */
|
||||
.field{ margin-bottom:16px; }
|
||||
.field-label{ display:block; margin-bottom:6px; color:var(--on-surface-variant); font-size:13px; }
|
||||
.field-row{ display:flex; align-items:center; gap:12px; }
|
||||
.field-row.wrap{ flex-wrap:wrap; }
|
||||
input[type=text], input[type=number], select, textarea{
|
||||
width:100%; padding:9px 12px; border-radius:var(--radius-m);
|
||||
border:var(--outline-w) solid var(--outline); background:var(--surface-variant);
|
||||
color:var(--on-surface); font:inherit; font-size:14px; border:0;
|
||||
}
|
||||
textarea{ resize:vertical; font-family:var(--mono); font-size:12px; }
|
||||
input[type=range]{ width:100%; accent-color:var(--primary); }
|
||||
.field-row input[type=range]{ flex:1; min-width:0; }
|
||||
|
||||
/* 开关 */
|
||||
.switch{ position:relative; width:46px; height:26px; flex:0 0 46px; }
|
||||
.switch input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
|
||||
.switch .track{ position:absolute; inset:0; border-radius:99px; background:var(--surface-dim); transition:background var(--speed); border:var(--outline-w) solid var(--outline-variant); }
|
||||
.switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow); transition:left var(--speed); }
|
||||
.switch input:checked + .track{ background:var(--primary); }
|
||||
.switch input:checked + .track .thumb{ left:23px; background:var(--on-primary); }
|
||||
|
||||
/* 应用卡片 */
|
||||
.app-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
|
||||
.app-card{
|
||||
background:var(--surface-variant); border-radius:var(--radius-l);
|
||||
border:var(--outline-w) solid var(--outline-variant); padding:16px;
|
||||
display:flex; flex-direction:column; gap:8px;
|
||||
}
|
||||
.app-card .app-head{ display:flex; align-items:center; gap:12px; }
|
||||
.app-card .app-ico{ width:40px; height:40px; border-radius:var(--radius-m); background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex:0 0 40px; }
|
||||
.app-card .app-name{ font-weight:600; }
|
||||
.app-card .app-pkg{ font-size:12px; color:var(--on-surface-variant); font-family:var(--mono); }
|
||||
.app-card .app-meta{ font-size:12px; color:var(--on-surface-variant); }
|
||||
.app-card .app-actions{ display:flex; gap:6px; margin-top:auto; flex-wrap:wrap; }
|
||||
|
||||
/* 远程按键区 */
|
||||
.key-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
|
||||
.key-btn{
|
||||
padding:14px; border:none; border-radius:var(--radius-m);
|
||||
background:var(--surface-variant); color:var(--on-surface);
|
||||
border:var(--outline-w) solid var(--outline-variant);
|
||||
cursor:pointer; font:inherit; text-align:center; transition:background var(--speed);
|
||||
}
|
||||
.key-btn:hover{ background:var(--hover); }
|
||||
.key-btn .k-ico{ font-size:20px; display:block; margin-bottom:4px; }
|
||||
|
||||
/* 危险区 */
|
||||
.danger-box{ border:1px solid var(--error); border-radius:var(--radius-l); padding:16px 18px; }
|
||||
.danger-box .card-title{ color:var(--error); }
|
||||
.warn-note{ color:var(--warning); font-size:12px; margin-top:8px; }
|
||||
|
||||
/* 日志查看 */
|
||||
.log-view{ background:var(--surface-dim); border-radius:var(--radius-m); padding:12px; max-height:60vh; overflow:auto; font-family:var(--mono); font-size:12px; white-space:pre-wrap; color:var(--on-surface); }
|
||||
|
||||
/* 通知列表 */
|
||||
.notif{ display:flex; gap:12px; padding:12px; border-radius:var(--radius-m); background:var(--surface-variant); margin-bottom:10px; align-items:flex-start; border:var(--outline-w) solid var(--outline-variant); }
|
||||
.notif .n-ico{ width:36px; height:36px; border-radius:var(--radius-m); background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; flex:0 0 36px; font-weight:700; }
|
||||
.notif .n-body{ flex:1; min-width:0; }
|
||||
.notif .n-title{ font-weight:600; }
|
||||
.notif .n-text{ color:var(--on-surface-variant); font-size:13px; margin-top:2px; }
|
||||
.notif .n-meta{ display:flex; gap:8px; margin-top:6px; color:var(--on-surface-variant); font-size:11px; }
|
||||
.urgency-hi{ color:var(--error); }
|
||||
|
||||
/* 横幅 / toast / modal */
|
||||
.offline-banner{
|
||||
position:sticky; top:0; z-index:30; padding:10px 16px;
|
||||
background:var(--error); color:var(--on-error); font-size:13px;
|
||||
}
|
||||
.offline-banner code{ background:rgba(0,0,0,.2); padding:1px 5px; border-radius:4px; }
|
||||
|
||||
.toast{
|
||||
position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
|
||||
z-index:60; background:var(--surface); color:var(--on-surface);
|
||||
padding:11px 18px; border-radius:var(--radius-m); box-shadow:var(--shadow);
|
||||
border:var(--outline-w) solid var(--outline-variant); font-size:13px;
|
||||
max-width:80vw;
|
||||
}
|
||||
|
||||
.modal-scrim{
|
||||
position:fixed; inset:0; z-index:50; background:var(--scrim);
|
||||
display:flex; align-items:center; justify-content:center; padding:20px;
|
||||
}
|
||||
.modal-scrim[hidden]{ display:none; } /* 覆盖上方 display:flex,否则 hidden 失效 */
|
||||
.modal{ background:var(--surface); border-radius:var(--radius-l); width:min(420px,100%); padding:22px; box-shadow:var(--shadow); border:var(--outline-w) solid var(--outline-variant); }
|
||||
.modal-title{ font-size:16px; margin:0 0 10px; }
|
||||
.modal-body{ color:var(--on-surface-variant); margin:0 0 18px; word-break:break-all; }
|
||||
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; }
|
||||
|
||||
/* 空态 / 加载 */
|
||||
.empty{ text-align:center; color:var(--on-surface-variant); padding:48px 0; }
|
||||
.skel{ color:var(--on-surface-variant); }
|
||||
.spinner{ display:inline-block; width:18px; height:18px; border:2px solid var(--outline-variant); border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; }
|
||||
@keyframes spin{ to{ transform:rotate(360deg); } }
|
||||
|
||||
/* 响应式:窄屏收起侧栏 */
|
||||
@media (max-width:820px){
|
||||
:root{ --nav-w:216px; }
|
||||
.sidebar{ position:fixed; left:0; top:0; bottom:0; z-index:40; margin-left:calc(-1 * var(--nav-w)); }
|
||||
.sidebar.open{ margin-left:0; box-shadow:var(--shadow); }
|
||||
.menu-btn{ display:flex; }
|
||||
.brand-name{ display:none; }
|
||||
.conn-text{ display:none; }
|
||||
}
|
||||
@media (max-width:520px){
|
||||
.content{ padding:14px; }
|
||||
.topbar{ padding:0 10px; gap:8px; }
|
||||
.seg-btn{ padding:6px 9px; }
|
||||
}
|
||||
@@ -0,0 +1,751 @@
|
||||
/* MeowPanel — 前端逻辑(纯静态,零第三方依赖)
|
||||
*
|
||||
* 对接协议:devdocs/plan/MEOWPANEL_PROTOCOL.md(草案,后端未实现)。
|
||||
* 所有 fetch 失败都优雅降级为「后端未连接」,不假设后端就绪。
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* ---------------- 小工具 ---------------- */
|
||||
const $ = (sel, root) => (root || document).querySelector(sel);
|
||||
const $$ = (sel, root) => Array.prototype.slice.call((root || document).querySelectorAll(sel));
|
||||
|
||||
function esc(s) {
|
||||
return String(s == null ? '' : s).replace(/[&<>"']/g, m => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
|
||||
}[m]));
|
||||
}
|
||||
function fmtBytes(n) {
|
||||
if (n == null || isNaN(n)) return '—';
|
||||
const u = ['B', 'KB', 'MB', 'GB', 'TB']; let v = Number(n), i = 0;
|
||||
while (v >= 1024 && i < u.length - 1) { v /= 1024; i++; }
|
||||
return (i === 0 ? v : v.toFixed(1)) + ' ' + u[i];
|
||||
}
|
||||
function fmtUptime(sec) {
|
||||
if (sec == null || isNaN(sec)) return '—';
|
||||
sec = Math.floor(sec);
|
||||
const d = Math.floor(sec / 86400), h = Math.floor((sec % 86400) / 3600), m = Math.floor((sec % 3600) / 60);
|
||||
return (d > 0 ? d + ' 天 ' : '') + h + ' 小时 ' + m + ' 分';
|
||||
}
|
||||
function fmtTime(ts) { return ts ? new Date(ts * 1000).toLocaleString() : '—'; }
|
||||
function debounce(fn, ms) { let t = null; return function () { const a = arguments, c = this; clearTimeout(t); t = setTimeout(() => fn.apply(c, a), ms); }; }
|
||||
function pct(p) { return Math.max(0, Math.min(100, p)); }
|
||||
|
||||
/* ---------------- 全局状态 ---------------- */
|
||||
const state = {
|
||||
style: 'md3', theme: 'dark',
|
||||
conn: 'unknown',
|
||||
filesRel: '/', filesAbs: null,
|
||||
perfTimer: null, // 性能页轮询
|
||||
route: 'perf',
|
||||
downloadNonce: 0
|
||||
};
|
||||
|
||||
/* ---------------- 后端连接状态 ---------------- */
|
||||
function setConn(ok) {
|
||||
state.conn = ok ? 'ok' : 'bad';
|
||||
const dot = $('#conn-dot');
|
||||
dot.dataset.state = state.conn;
|
||||
$('#conn-text').textContent = ok ? '在线' : '离线';
|
||||
$('#offline-banner').hidden = !!ok;
|
||||
}
|
||||
|
||||
/* ---------------- API 客户端 ---------------- */
|
||||
// 返回 {code,message,status} 形异常;网络/非 JSON → 视为断连
|
||||
async function api(method, path, body) {
|
||||
let res;
|
||||
const init = { method: method || 'GET' };
|
||||
if (body instanceof FormData) {
|
||||
init.body = body;
|
||||
} else if (body !== undefined && body !== null) {
|
||||
init.headers = { 'Content-Type': 'application/json' };
|
||||
init.body = JSON.stringify(body);
|
||||
}
|
||||
try {
|
||||
res = await fetch(path, init);
|
||||
} catch (e) {
|
||||
setConn(false);
|
||||
throw { code: 'NETWORK', message: '后端未连接', status: 0 };
|
||||
}
|
||||
let json = null;
|
||||
try { json = await res.json(); } catch (e) { json = null; }
|
||||
if (!json || typeof json.ok !== 'boolean') {
|
||||
// 静态服务器返回 HTML / 404 等
|
||||
setConn(res.ok ? true : false);
|
||||
throw { code: 'NOT_JSON', message: '后端返回了非 JSON 响应(HTTP ' + res.status + ')', status: res.status };
|
||||
}
|
||||
if (!json.ok) {
|
||||
setConn(true);
|
||||
const code = (json.error && json.error.code) || 'ERROR';
|
||||
throw { code: code, message: (json.error && json.error.message) || ('后端错误 ' + code), status: res.status };
|
||||
}
|
||||
setConn(true);
|
||||
return json.data;
|
||||
}
|
||||
|
||||
// 下载(返回 blob URL)
|
||||
async function apiDownload(path) {
|
||||
let res;
|
||||
try { res = await fetch(path); }
|
||||
catch (e) { setConn(false); throw { code: 'NETWORK', message: '后端未连接' }; }
|
||||
if (!res.ok) { setConn(true); throw { code: 'HTTP_' + res.status, message: '下载失败(HTTP ' + res.status + ')' }; }
|
||||
setConn(true);
|
||||
return URL.createObjectURL(await res.blob());
|
||||
}
|
||||
|
||||
/* ---------------- toast / 确认弹窗 ---------------- */
|
||||
let toastTimer = null;
|
||||
function toast(msg, ms) {
|
||||
const t = $('#toast');
|
||||
t.textContent = msg; t.hidden = false;
|
||||
clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => { t.hidden = true; }, ms || 2600);
|
||||
}
|
||||
function confirmDlg(title, body, danger) {
|
||||
return new Promise(res => {
|
||||
$('#modal-title').textContent = title || '确认';
|
||||
$('#modal-body').textContent = body || '';
|
||||
const yes = $('#modal-yes'), no = $('#modal-no');
|
||||
yes.className = 'btn btn-primary' + (danger ? ' btn-danger' : '');
|
||||
const scrim = $('#modal'); scrim.hidden = false;
|
||||
const done = v => { scrim.hidden = true; yes.onclick = no.onclick = scrim.onclick = null; res(v); };
|
||||
yes.onclick = () => done(true);
|
||||
no.onclick = () => done(false);
|
||||
scrim.onclick = e => { if (e.target === scrim) done(false); };
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- 主题(MD3/MIUIx × 深/浅) ---------------- */
|
||||
function applyTheme(style, theme) {
|
||||
state.style = style; state.theme = theme;
|
||||
const root = document.documentElement;
|
||||
root.dataset.style = style; root.dataset.theme = theme;
|
||||
$$('#style-seg .seg-btn').forEach(b => b.classList.toggle('active', b.dataset.style === style));
|
||||
$$('#theme-seg .seg-btn').forEach(b => b.classList.toggle('active', b.dataset.theme === theme));
|
||||
try { localStorage.setItem('meowpanel.style', style); localStorage.setItem('meowpanel.theme', theme); } catch (e) {}
|
||||
}
|
||||
async function sendTheme(patch) {
|
||||
try { await api('PUT', '/api/theme', patch); }
|
||||
catch (e) { toast('主题已本地切换(后端未同步:' + e.message + ')'); }
|
||||
}
|
||||
async function initTheme() {
|
||||
let style = 'md3', theme = 'dark';
|
||||
try { style = localStorage.getItem('meowpanel.style') || 'md3'; theme = localStorage.getItem('meowpanel.theme') || 'dark'; } catch (e) {}
|
||||
applyTheme(style, theme);
|
||||
try {
|
||||
const t = await api('GET', '/api/theme');
|
||||
applyTheme(t.style || style, t.theme || theme);
|
||||
} catch (e) { /* 后端离线,保持本地 */ }
|
||||
}
|
||||
// 顶栏「风格 / 明暗」切换器:本地立即切换 + 同步后端
|
||||
function bindThemeUi() {
|
||||
$('#style-seg').addEventListener('click', function (e) {
|
||||
const b = e.target.closest('.seg-btn'); if (!b) return;
|
||||
applyTheme(b.dataset.style, state.theme);
|
||||
sendTheme({ style: b.dataset.style });
|
||||
});
|
||||
$('#theme-seg').addEventListener('click', function (e) {
|
||||
const b = e.target.closest('.seg-btn'); if (!b) return;
|
||||
applyTheme(state.style, b.dataset.theme);
|
||||
sendTheme({ theme: b.dataset.theme });
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- 页面空态 / 错误提示 ---------------- */
|
||||
function emptyState(msg, code) {
|
||||
const t = code === 'NO_CARD' ? '未识别到 TF 卡' : (code === 'NOT_IMPLEMENTED' ? '该功能后端尚未实现' : msg);
|
||||
return '<div class="empty">' + esc(t) + '</div>';
|
||||
}
|
||||
function errText(e) {
|
||||
if (e && e.code === 'NO_CARD') return '未识别到 TF 卡';
|
||||
if (e && e.code === 'NOT_IMPLEMENTED') return '该功能后端尚未实现';
|
||||
return (e && e.message) ? e.message : '未知错误';
|
||||
}
|
||||
|
||||
/* ---------------- 1. 性能页(2s 轮询 /api/perf) ---------------- */
|
||||
function barHtml(p) {
|
||||
p = pct(p);
|
||||
const c = p >= 90 ? 'danger' : (p >= 70 ? 'warn' : '');
|
||||
return '<div class="bar ' + c + '"><span style="width:' + p + '%"></span></div>';
|
||||
}
|
||||
function stat(label, valueHtml, sub, barPct) {
|
||||
return '<div class="stat"><div class="stat-label">' + esc(label) + '</div>' + valueHtml +
|
||||
(sub ? '<div class="stat-sub">' + sub + '</div>' : '') +
|
||||
(barPct != null ? barHtml(barPct) : '') + '</div>';
|
||||
}
|
||||
function renderPerfData(page, d) {
|
||||
const cpu = d.cpu || {};
|
||||
const mem = d.memory || {}, st = d.storage || {}, tf = d.tfcard || {}, tmp = d.temp;
|
||||
let h = '<div class="card"><h3 class="card-title">实时性能</h3>';
|
||||
h += '<div class="muted">运行时间:' + fmtUptime(d.uptime_sec) + '</div><div class="stat-grid">';
|
||||
h += stat('CPU', '<span class="stat-value">' + (cpu.usage == null ? '—' : +cpu.usage.toFixed(1)) + '<span class="stat-unit">%</span></span>',
|
||||
cpu.cores != null ? cpu.cores + ' 核 · 负载 ' + (cpu.load ? cpu.load.map(x => (+x).toFixed(2)).join(' / ') : '—') : '',
|
||||
cpu.usage || 0);
|
||||
const memP = mem.total ? (mem.used / mem.total) * 100 : 0;
|
||||
h += stat('内存', '<span class="stat-value">' + fmtBytes((mem.used || 0) * 1024) + '</span><span class="stat-unit">/ ' + fmtBytes((mem.total || 0) * 1024) + '</span>',
|
||||
'可用 ' + fmtBytes((mem.available || (mem.free || 0)) * 1024), memP);
|
||||
const stP = st.total ? (st.used / st.total) * 100 : 0;
|
||||
h += stat('存储 (rootfs)', '<span class="stat-value">' + fmtBytes((st.used || 0) * 1024) + '</span><span class="stat-unit">/ ' + fmtBytes((st.total || 0) * 1024) + '</span>', st.path || '', stP);
|
||||
if (tf) {
|
||||
if (tf.present) {
|
||||
const tfP = tf.total ? (tf.used / tf.total) * 100 : 0;
|
||||
h += stat('TF 卡', '<span class="stat-value">' + fmtBytes((tf.used || 0) * 1024) + '</span><span class="stat-unit">/ ' + fmtBytes((tf.total || 0) * 1024) + '</span>',
|
||||
fmtBytes((tf.avail || 0) * 1024) + ' 可用 · ' + (tf.filesystem || ''), tfP);
|
||||
} else {
|
||||
h += stat('TF 卡', '<span class="stat-value">未插卡</span>', '');
|
||||
}
|
||||
}
|
||||
const tmpCpu = tmp && tmp.cpu != null ? +tmp.cpu.toFixed(1) : null;
|
||||
h += stat('温度', '<span class="stat-value">' + (tmpCpu == null ? '—' : tmpCpu) + '<span class="stat-unit">℃</span></span>',
|
||||
tmp && tmp.board != null ? '板载 ' + (+tmp.board.toFixed(1)) + ' ℃' : '');
|
||||
h += '</div></div>';
|
||||
page.innerHTML = h;
|
||||
}
|
||||
async function fetchPerfOnce() {
|
||||
const page = $('#perf-page');
|
||||
if (!page || state.route !== 'perf') return;
|
||||
let d;
|
||||
try { d = await api('GET', '/api/perf'); }
|
||||
catch (e) { if (page && state.route === 'perf') page.innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
if (state.route === 'perf') renderPerfData(page, d);
|
||||
}
|
||||
function stopPerf() { if (state.perfTimer) { clearInterval(state.perfTimer); state.perfTimer = null; } }
|
||||
function renderPerf() {
|
||||
$('#content').innerHTML = '<div class="page" id="perf-page"><p class="placeholder">加载中…</p></div>';
|
||||
if (state.perfTimer) stopPerf();
|
||||
fetchPerfOnce();
|
||||
state.perfTimer = setInterval(fetchPerfOnce, 2000);
|
||||
}
|
||||
|
||||
/* ---------------- 2. 亮度 / 音量页 ---------------- */
|
||||
let volTimer = null;
|
||||
function slur(step) { // step: {key,label,min,max,val}
|
||||
return '<div class="card"><h3 class="card-title">' + esc(step.label) + '</h3>' +
|
||||
'<div class="field-row"><span class="muted" style="width:44px">' + step.val + '</span>' +
|
||||
'<input type="range" min="' + step.min + '" max="' + step.max + '" value="' + step.val + '" data-slider data-key="' + esc(step.key) + '">' +
|
||||
'<span class="muted" style="width:44px;text-align:right">' + step.max + '</span></div></div>';
|
||||
}
|
||||
async function renderBright() {
|
||||
$('#content').innerHTML = '<div class="page" id="bright-page"><p class="placeholder">加载设置…</p></div>';
|
||||
let bright, vol;
|
||||
try {
|
||||
bright = await api('GET', '/api/settings/display.brightness');
|
||||
} catch (e) { $('#content').innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
try { vol = await api('GET', '/api/settings/audio.volume'); } catch (e) { vol = null; }
|
||||
if (state.route !== 'bright') return;
|
||||
let h = '<div class="page" id="bright-page">';
|
||||
h += slur({ key: 'display.brightness', label: '亮度', min: bright.min || 1, max: bright.max || 100, val: bright.value });
|
||||
if (vol) h += slur({ key: 'audio.volume', label: '音量', min: vol.min || 0, max: vol.max || 100, val: vol.value });
|
||||
else h += '<p class="muted">音量设置项不可用(后端未实现 audio.volume)</p>';
|
||||
h += '<p class="muted">滑条改动自动保存到系统(走 meow_settings_*),与实体设置页同步。</p></div>';
|
||||
$('#content').innerHTML = h;
|
||||
}
|
||||
const saveSetting = debounce(async function (key, value, type) {
|
||||
try {
|
||||
await api('PUT', '/api/settings/' + key, { value: value });
|
||||
toast('已保存 ' + key + ' = ' + value);
|
||||
} catch (e) { toast('保存失败:' + errText(e)); }
|
||||
}, 400);
|
||||
function bindSlider() {
|
||||
$('#content').addEventListener('input', function (e) {
|
||||
const r = e.target.closest('[data-slider]');
|
||||
if (!r) return;
|
||||
const row = r.closest('.field-row');
|
||||
if (row) row.querySelector('.muted').textContent = r.value;
|
||||
saveSetting(r.dataset.key, +r.value, 'int');
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- 3. 文件管理页 ---------------- */
|
||||
// 返回带索引的 rel 显示面包屑
|
||||
function joinRel(a, b) {
|
||||
if (!a || a === '/') return '/' + b;
|
||||
return (a.endsWith('/') ? a.slice(0, -1) : a) + '/' + b;
|
||||
}
|
||||
function crumbHtml(items, cur) { // items: [{name,rel}]
|
||||
let h = '<div class="crumbs" id="crumbs">';
|
||||
h += '<a data-rel="/" id="crumb-root">根目录</a>';
|
||||
items.forEach(it => { h += '<span>/</span><a data-rel="' + esc(it.rel) + '">' + esc(it.name) + '</a>'; });
|
||||
return h + '</div>';
|
||||
}
|
||||
async function navFiles(rel) {
|
||||
const page = $('#files-page');
|
||||
if (!page) return;
|
||||
let relPath = rel || '/';
|
||||
page.innerHTML = '<p class="placeholder">加载中…</p>';
|
||||
let d;
|
||||
try { d = await api('GET', '/api/files?path=' + encodeURIComponent(relPath)); }
|
||||
catch (e) { page.innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
state.filesRel = d.rel || relPath; state.filesAbs = d.path;
|
||||
let h = crumbHtml(segments(d.rel), d.rel);
|
||||
// 白名单快捷入口(根目录下)
|
||||
if (d.rel === '/' && d.allowed) {
|
||||
h += '<div class="field-row wrap" style="margin-bottom:12px">' +
|
||||
d.allowed.map(a => '<button class="btn" data-nav="' + esc('/' + a) + '">' + esc(a) + '</button>').join(' ') + '</div>';
|
||||
}
|
||||
h += '<div class="field-row wrap" style="margin-bottom:12px">' +
|
||||
'<button class="btn" id="file-newdir">新建目录</button>' +
|
||||
'<button class="btn" id="file-upload">上传文件</button>' +
|
||||
'<button class="btn" id="file-refresh">刷新</button>' +
|
||||
'<input type="file" id="file-input" multiple hidden></div>';
|
||||
h += '<div class="card"><table class="table"><thead><tr><th>名称</th><th>大小</th><th>修改时间</th><th style="text-align:right">操作</th></tr></thead><tbody>';
|
||||
if (!d.items.length) h += '<tr><td colspan="4" class="empty">空目录</td></tr>';
|
||||
d.items.forEach(function (it) {
|
||||
const isDir = it.type === 'dir';
|
||||
const icon = isDir ? '📁' : (it.type === 'file' ? '📄' : '❔');
|
||||
h += '<tr><td>' + (isDir ? '<a class="dirlink" data-dir="' + esc(it.name) + '">' : '') + icon + ' ' + esc(it.name) + (isDir ? '</a>' : '') +
|
||||
'</td><td class="muted">' + (isDir ? '—' : fmtBytes(it.size)) + '</td><td class="muted">' + fmtTime(it.mtime) + '</td>' +
|
||||
'<td><div class="row-actions">' +
|
||||
(isDir ? '<button class="btn btn-ghost" data-enter="' + esc(it.name) + '">打开</button>' : '<a class="btn btn-ghost" data-dl="' + esc(it.name) + '" href="#">下载</a>') +
|
||||
'<button class="btn btn-ghost" data-ren="' + esc(it.name) + '">重命名</button>' +
|
||||
'<button class="btn btn-ghost btn-danger" data-del="' + esc(it.name) + '">删除</button>' +
|
||||
'</div></td></tr>';
|
||||
});
|
||||
h += '</tbody></table></div>';
|
||||
page.innerHTML = h;
|
||||
}
|
||||
function segments(rel) {
|
||||
const parts = (rel || '').split('/').filter(Boolean); const out = []; let cur = '';
|
||||
parts.forEach(p => { cur += '/' + p; out.push({ name: p, rel: cur }); });
|
||||
return out;
|
||||
}
|
||||
function renderFiles() { $('#content').innerHTML = '<div class="page" id="files-page"></div>'; navFiles(state.filesRel || '/'); }
|
||||
function absFor(name) { return state.filesAbs ? (state.filesAbs.endsWith('/') ? state.filesAbs + name : state.filesAbs + '/' + name) : null; }
|
||||
function bindFiles() {
|
||||
const c = $('#content');
|
||||
c.addEventListener('click', async function (e) {
|
||||
const t = e.target;
|
||||
const enter = t.closest('[data-enter]'); const dl = t.closest('[data-dl]');
|
||||
const ren = t.closest('[data-ren]'); const del = t.closest('[data-del]');
|
||||
const dirlink = t.closest('[data-dir]'); const nav = t.closest('[data-nav]');
|
||||
const crumb = t.closest('[data-rel]');
|
||||
const btn = t.closest('button[id]');
|
||||
if (crumb) { navFiles(crumb.dataset.rel); return; }
|
||||
if (nav) { navFiles(nav.dataset.nav); return; }
|
||||
if (dirlink || enter) { const n = (dirlink || enter).dataset.directory || (dirlink || enter).dataset.dir || (dirlink || enter).dataset.enter; navFiles(joinRel(state.filesRel, n)); return; }
|
||||
if (dl) {
|
||||
const abs = absFor(dl.dataset.dl); if (!abs) return toast('无当前目录');
|
||||
doDownload('/api/files/download?path=' + encodeURIComponent(abs), dl.dataset.dl);
|
||||
return;
|
||||
}
|
||||
if (ren) { renameFile(ren.dataset.ren); return; }
|
||||
if (del) { removeFile(del.dataset.del); return; }
|
||||
if (btn && btn.id === 'file-newdir') { mkdirFile(); return; }
|
||||
if (btn && btn.id === 'file-upload') { const fi = $('#file-input'); if (fi) { fi.value = ''; fi.click(); } return; }
|
||||
if (btn && btn.id === 'file-refresh') { navFiles(state.filesRel); return; }
|
||||
});
|
||||
c.addEventListener('change', function (e) {
|
||||
if (e.target.id === 'file-input') uploadFiles(e.target.files);
|
||||
});
|
||||
}
|
||||
function doDownload(url, name) {
|
||||
apiDownload(url).then(blobUrl => {
|
||||
const a = document.createElement('a'); a.href = blobUrl; a.download = name || 'file';
|
||||
document.body.appendChild(a); a.click(); a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(blobUrl), 5000);
|
||||
}).catch(e => toast('下载失败:' + errText(e)));
|
||||
}
|
||||
async function removeFile(name) {
|
||||
const abs = absFor(name); if (!abs) return;
|
||||
const ok = await confirmDlg('删除 ' + name, '此操作不可撤销,确认删除?\n' + abs, true);
|
||||
if (!ok) return;
|
||||
try {
|
||||
await api('DELETE', '/api/files?path=' + encodeURIComponent(abs));
|
||||
toast('已删除 ' + name); navFiles(state.filesRel);
|
||||
} catch (e) { toast('删除失败:' + errText(e)); }
|
||||
}
|
||||
async function renameFile(name) {
|
||||
const abs = absFor(name); if (!abs) return;
|
||||
const nn = prompt('将「' + name + '」重命名为:', name);
|
||||
if (!nn || nn === name) return;
|
||||
try {
|
||||
await api('POST', '/api/files/rename', { path: abs, new_name: nn });
|
||||
toast('已重命名'); navFiles(state.filesRel);
|
||||
} catch (e) { toast('重命名失败:' + errText(e)); }
|
||||
}
|
||||
async function mkdirFile() {
|
||||
const abs = state.filesAbs; if (!abs) return;
|
||||
const nn = prompt('新建目录名称(将创建于 ' + state.filesRel + '):', 'newdir');
|
||||
if (!nn) return;
|
||||
try {
|
||||
await api('POST', '/api/files/mkdir', { path: joinRel(abs, nn) });
|
||||
toast('已创建 ' + nn); navFiles(state.filesRel);
|
||||
} catch (e) { toast('创建失败:' + errText(e)); }
|
||||
}
|
||||
async function uploadFiles(files) {
|
||||
if (!files || !files.length) return;
|
||||
const abs = state.filesAbs; if (!abs) return toast('无当前目录');
|
||||
const fd = new FormData(); fd.append('path', abs);
|
||||
Array.prototype.forEach.call(files, f => fd.append('file', f));
|
||||
const n = files.length;
|
||||
toast('正在上传 ' + n + ' 个文件…');
|
||||
try {
|
||||
await api('POST', '/api/files/upload', fd);
|
||||
toast('上传完成'); navFiles(state.filesRel);
|
||||
} catch (e) { toast('上传失败:' + errText(e)); }
|
||||
}
|
||||
|
||||
/* ---------------- 4. 应用管理页 ---------------- */
|
||||
function renderApps() {
|
||||
$('#content').innerHTML = '<div class="page" id="apps-page"><p class="placeholder">加载应用列表…</p></div>';
|
||||
(async function () {
|
||||
let d;
|
||||
try { d = await api('GET', '/api/apps'); }
|
||||
catch (e) { if (state.route === 'apps') $('#content').innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
if (state.route !== 'apps') return;
|
||||
let h = '<div class="page" id="apps-page">';
|
||||
h += '<div class="field-row" style="margin-bottom:14px">' +
|
||||
'<button class="btn btn-primary" id="app-install">导入 .mpk 安装</button>' +
|
||||
'<button class="btn" id="app-refresh">刷新</button>' +
|
||||
'<input type="file" id="app-file" accept=".mpk" hidden></div>';
|
||||
h += '<div class="app-grid">';
|
||||
if (!d.apps.length) h += '<div class="empty" style="grid-column:1/-1">尚未安装任何 MeowAPP</div>';
|
||||
d.apps.forEach(a => {
|
||||
const ino = esc((a.name || a.package || '?').charAt(0).toUpperCase());
|
||||
h += '<div class="app-card" data-pkg="' + esc(a.package || '') + '">' +
|
||||
'<div class="app-head"><div class="app-ico">' + ino + '</div>' +
|
||||
'<div><div class="app-name">' + esc(a.name || a.package || '未命名') + '</div>' +
|
||||
'<div class="app-pkg">' + esc(a.package || '') + '</div></div></div>' +
|
||||
'<div class="app-meta">版本 ' + esc(a.version || '—') + (a.invalid ? ' · <span style="color:var(--error)">无效</span>' : '') +
|
||||
(a.size ? ' · ' + fmtBytes(a.size) : '') + '</div>' +
|
||||
'<div class="app-actions">' +
|
||||
'<button class="btn btn-ghost" data-ainfo="' + esc(a.package) + '">详情</button>' +
|
||||
'<a class="btn btn-ghost" data-aexport="' + esc(a.package) + '" href="#">导出 .mpk</a>' +
|
||||
'<button class="btn btn-danger" data-auninst="' + esc(a.package) + '">卸载</button>' +
|
||||
'</div></div>';
|
||||
});
|
||||
h += '</div>';
|
||||
// 本地源 .mpk 安装(后端支持 path 形式)
|
||||
h += '<div class="card"><h3 class="card-title">从卡上路径安装</h3>' +
|
||||
'<div class="field-row"><input type="text" id="app-install-path" placeholder="如 /MeowOS/tmp/os.meow.hello.mpk">' +
|
||||
'<button class="btn" id="app-install-path-go">安装</button></div></div>';
|
||||
$('#content').innerHTML = h;
|
||||
})();
|
||||
}
|
||||
function bindApps() {
|
||||
const c = $('#content');
|
||||
c.addEventListener('click', async function (e) {
|
||||
const t = e.target;
|
||||
const install = t.closest('#app-install'); const refresh = t.closest('#app-refresh');
|
||||
const info = t.closest('[data-ainfo]'); const exp = t.closest('[data-aexport]');
|
||||
const uninst = t.closest('[data-auninst]'); const goPath = t.closest('#app-install-path-go');
|
||||
if (install) { const fi = $('#app-file'); if (fi) { fi.value = ''; fi.click(); } return; }
|
||||
if (refresh) { renderApps(); return; }
|
||||
if (info) { appInfo(info.dataset.ainfo); return; }
|
||||
if (exp) { e.preventDefault(); doDownload('/api/apps/' + exp.dataset.aexport + '/export', exp.dataset.aexport + '.mpk'); return; }
|
||||
if (uninst) { appUninstall(uninst.dataset.auninst); return; }
|
||||
if (goPath) { installFromPath($('#app-install-path').value); return; }
|
||||
});
|
||||
c.addEventListener('change', function (e) {
|
||||
if (e.target.id === 'app-file') installFromFile(e.target.files);
|
||||
});
|
||||
}
|
||||
async function installFromFile(files) {
|
||||
if (!files || !files.length) return;
|
||||
const fd = new FormData(); fd.append('file', files[0]);
|
||||
toast('正在安装 ' + files[0].name + '…');
|
||||
try {
|
||||
const d = await api('POST', '/api/apps/install', fd);
|
||||
toast('已安装 ' + (d.package || '应用') + (d.version ? ' v' + d.version : ''));
|
||||
renderApps();
|
||||
} catch (e) { toast('安装失败:' + errText(e)); }
|
||||
}
|
||||
async function installFromPath(p) {
|
||||
if (!p) return toast('请输入 .mpk 路径');
|
||||
toast('正在安装 ' + p + '…');
|
||||
try {
|
||||
const d = await api('POST', '/api/apps/install', { path: p });
|
||||
toast('已安装 ' + (d.package || '应用')); renderApps();
|
||||
} catch (e) { toast('安装失败:' + errText(e)); }
|
||||
}
|
||||
async function appUninstall(pkg) {
|
||||
const ok = await confirmDlg('卸载 ' + pkg, '将移除应用与数据预留(数据默认保留)。确认卸载?', true);
|
||||
if (!ok) return;
|
||||
try { await api('DELETE', '/api/apps/' + pkg); toast('已卸载 ' + pkg); renderApps(); }
|
||||
catch (e) { toast('卸载失败:' + errText(e)); }
|
||||
}
|
||||
async function appInfo(pkg) {
|
||||
try {
|
||||
const d = await api('GET', '/api/apps/' + pkg);
|
||||
let txt = '包名: ' + d.package + '\n名称: ' + d.name + '\n版本: ' + d.version + '\nexec: ' + d.exec +
|
||||
'\nsize: ' + fmtBytes(d.size) + '\n路径: ' + d.path;
|
||||
if (d.description) txt += '\n描述: ' + d.description;
|
||||
alert(txt);
|
||||
} catch (e) { toast('获取详情失败:' + errText(e)); }
|
||||
}
|
||||
|
||||
/* ---------------- 5. 设置镜像页 ---------------- */
|
||||
function settingControl(it) {
|
||||
const key = it.key;
|
||||
if (it.type === 'bool') {
|
||||
return '<div class="field-row"><div style="flex:1" class="field-label"><div style="margin:0">' + esc(key) + '</div></div>' +
|
||||
'<label class="switch"><input type="checkbox" data-skey="' + esc(key) + '" data-stype="bool" ' + (it.value ? 'checked' : '') + '>' +
|
||||
'<span class="track"><span class="thumb"></span></span></label></div>';
|
||||
}
|
||||
if (it.type === 'int') {
|
||||
const mn = (it.min == null ? 0 : it.min), mx = (it.max == null ? 100 : it.max);
|
||||
return '<div class="field"><label class="field-label">' + esc(key) + '(' + mn + '–' + mx + ')</label>' +
|
||||
'<div class="field-row"><span class="muted" style="width:44px">' + esc(it.value == null ? '' : it.value) + '</span>' +
|
||||
'<input type="range" min="' + mn + '" max="' + mx + '" value="' + esc(it.value == null ? mn : it.value) + '" data-skey="' + esc(key) + '" data-stype="int"></div></div>';
|
||||
}
|
||||
if (it.type === 'enum') {
|
||||
const opts = (it.options || []).map(o => '<option value="' + esc(o.name) + '" ' + (o.name === it.value ? 'selected' : '') + '>' + esc(o.label || o.name) + '</option>').join('');
|
||||
return '<div class="field"><label class="field-label">' + esc(key) + '</label><select data-skey="' + esc(key) + '" data-stype="enum">' + opts + '</select></div>';
|
||||
}
|
||||
return '<div class="field"><label class="field-label">' + esc(key) + '</label><input type="text" value="' + esc(it.value == null ? '' : it.value) + '" data-skey="' + esc(key) + '" data-stype="str"></div>';
|
||||
}
|
||||
async function renderSettings() {
|
||||
$('#content').innerHTML = '<div class="page" id="settings-page"><p class="placeholder">加载设置…</p></div>';
|
||||
let d;
|
||||
try { d = await api('GET', '/api/settings'); }
|
||||
catch (e) { if (state.route === 'settings') $('#content').innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
if (state.route !== 'settings') return;
|
||||
let h = '<div class="page" id="settings-page">';
|
||||
h += '<div class="field-row" style="margin-bottom:14px">' +
|
||||
'<button class="btn btn-danger" id="set-restore">恢复全部默认</button>' +
|
||||
'<button class="btn" id="set-refresh">刷新</button></div>';
|
||||
const items = d.items || [];
|
||||
// 按类型分组展示(bool 独立一卡,int/enum/str 各自卡片),便于查看
|
||||
const groups = [['开关/布尔', items.filter(x => x.type === 'bool')],
|
||||
['数值/滑条', items.filter(x => x.type === 'int')],
|
||||
['枚举/选择', items.filter(x => x.type === 'enum')],
|
||||
['字符串/路径', items.filter(x => x.type === 'str')]];
|
||||
groups.forEach(function (g) {
|
||||
if (!g[1].length) return;
|
||||
h += '<div class="card"><h3 class="card-title">' + g[0] + '</h3>' + g[1].map(settingControl).join('') + '</div>';
|
||||
});
|
||||
h += '</div>';
|
||||
$('#content').innerHTML = h;
|
||||
}
|
||||
function bindSettings() {
|
||||
const c = $('#content');
|
||||
c.addEventListener('input', function (e) {
|
||||
const r = e.target.closest('[data-stype="int"]'); if (!r) return;
|
||||
const row = r.closest('.field-row'); if (row) row.querySelector('.muted').textContent = r.value;
|
||||
updateSetting(r.dataset.skey, +r.value, 'int');
|
||||
});
|
||||
c.addEventListener('change', function (e) {
|
||||
const t = e.target;
|
||||
const sk = t.dataset.skey; if (!sk) return;
|
||||
if (t.dataset.stype === 'bool') updateSetting(sk, t.checked, 'bool');
|
||||
else if (t.dataset.stype === 'enum') updateSetting(sk, t.value, 'enum');
|
||||
else if (t.dataset.stype === 'str') updateSetting(sk, t.value, 'str');
|
||||
});
|
||||
c.addEventListener('click', async function (e) {
|
||||
if (e.target.closest('#set-restore')) {
|
||||
const ok = await confirmDlg('恢复全部默认', '将把全部设置恢复为出厂默认(含主题/亮度/音量)。继续?', true);
|
||||
if (!ok) return;
|
||||
try { await api('POST', '/api/settings/restore'); toast('已恢复默认'); renderSettings(); }
|
||||
catch (err) { toast('恢复失败:' + errText(err)); }
|
||||
} else if (e.target.closest('#set-refresh')) { renderSettings(); }
|
||||
});
|
||||
}
|
||||
const updateSetting = debounce(async function (key, value, type) {
|
||||
try { await api('PUT', '/api/settings/' + key, { value: value }); toast('已保存 ' + key); }
|
||||
catch (e) { toast('保存失败:' + errText(e)); }
|
||||
}, 350);
|
||||
|
||||
/* ---------------- 6. 远程控制页 ---------------- */
|
||||
function renderRemote() {
|
||||
const keys = [
|
||||
{ code: 115, label: '音量 +', ico: '🔊' },
|
||||
{ code: 114, label: '音量 −', ico: '🔉' },
|
||||
{ code: 116, label: '电源(单击)', ico: '⏻' },
|
||||
{ code: 164, label: '播放/暂停', ico: '⏯' },
|
||||
{ code: 163, label: '下一曲', ico: '⏭' },
|
||||
{ code: 165, label: '上一曲', ico: '⏮' },
|
||||
{ code: 158, label: '返回', ico: '↩' },
|
||||
{ code: 172, label: '主页', ico: '⌂' }
|
||||
];
|
||||
let h = '<div class="page" id="remote-page">';
|
||||
h += '<div class="card"><h3 class="card-title">模拟按键</h3>' +
|
||||
'<p class="muted">行为与本地按键一致(设备端系统统一接管)。长按电源将触发电源菜单。</p>' +
|
||||
'<div class="key-grid">' + keys.map(k =>
|
||||
'<button class="key-btn" data-code="' + k.code + '"><span class="k-ico">' + k.ico + '</span>' + esc(k.label) + '</button>'
|
||||
).join('') + '</div></div>';
|
||||
h += '<div class="card"><h3 class="card-title">电源长按(电源菜单)</h3>' +
|
||||
'<div class="field-row" style="gap:10px"><button class="btn btn-primary" data-powerlong="1">长按电源 3s(电源菜单)</button>' +
|
||||
'<span class="muted">发送 code=116 · press=long · ms=3000</span></div></div>';
|
||||
h += '</div>';
|
||||
$('#content').innerHTML = h;
|
||||
}
|
||||
async function sendKey(code, press, ms) {
|
||||
try { await api('POST', '/api/key/' + code, { press: press || 'tap', ms: ms }); toast('已发送 键 ' + code); }
|
||||
catch (e) { toast('发送失败:' + errText(e)); }
|
||||
}
|
||||
function bindRemote() {
|
||||
$('#content').addEventListener('click', function (e) {
|
||||
const kb = e.target.closest('[data-code]'); if (kb) { sendKey(kb.dataset.code, 'tap'); return; }
|
||||
const pl = e.target.closest('[data-powerlong]'); if (pl) { sendKey(116, 'long', 3000); return; }
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- 7. 系统信息 / OTA 页 ---------------- */
|
||||
async function renderSystem() {
|
||||
$('#content').innerHTML = '<div class="page" id="system-page"><p class="placeholder">加载系统信息…</p></div>';
|
||||
let d;
|
||||
try { d = await api('GET', '/api/system'); }
|
||||
catch (e) { if (state.route === 'system') $('#content').innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
if (state.route !== 'system') return;
|
||||
const net = d.network || {}; const wf = net.wifi || {}; const bt = net.bluetooth || {}; const ota = d.ota || {};
|
||||
let h = '<div class="page" id="system-page">';
|
||||
h += '<div class="card"><h3 class="card-title">系统信息</h3><table class="table"><tbody>' +
|
||||
row('MeowOS 版本', esc(d.version || '—')) + row('内核', esc(d.kernel || '—')) + row('架构', esc(d.arch || '—')) +
|
||||
row('主机名', esc(d.hostname || '—')) + row('运行时间', fmtUptime(d.uptime_sec)) +
|
||||
row('默认启动', esc((d.boot && d.boot.default) || '—')) +
|
||||
'</tbody></table></div>';
|
||||
h += '<div class="card"><h3 class="card-title">网络</h3><table class="table"><tbody>' +
|
||||
row('WiFi', wf.connected ? esc(wf.ssid || '已连接') + ' · ' + esc(wf.ip || '—') + (wf.rssi != null ? ' · ' + wf.rssi + 'dBm' : '') : '未连接') +
|
||||
row('蓝牙', bt.available ? ((bt.powered ? '已开启' : '已关闭') + (bt.connected ? ' · 已连接' : '')) : '无蓝牙') +
|
||||
row('mDNS', esc(net.hostname_local || '—')) +
|
||||
'</tbody></table></div>';
|
||||
h += '<div class="card"><h3 class="card-title">升级</h3>' +
|
||||
'<p class="muted">当前 ' + esc(ota.current || d.version || '—') +
|
||||
(ota.available ? ' · 发现新版本 ' + esc(ota.latest || '') : ' · 已是最新') + '</p>' +
|
||||
'<div class="field-row" style="gap:10px"><button class="btn btn-primary" id="sys-ota-check">检查升级</button>' +
|
||||
'<button class="btn btn-danger" id="sys-ota">⚠️ 升级</button></div></div>';
|
||||
h += '<div class="card danger-box"><h3 class="card-title">危险操作</h3>' +
|
||||
'<div class="field-row" style="gap:10px"><button class="btn btn-danger" id="sys-reboot">重启</button>' +
|
||||
'<button class="btn btn-danger" id="sys-shutdown">关机</button></div>' +
|
||||
'<p class="warn-note">⚠️ 重启/关机/升级均为高风险操作,请先保存好正在进行的任务。</p></div>';
|
||||
h += '</div>';
|
||||
$('#content').innerHTML = h;
|
||||
}
|
||||
function row(k, v) { return '<tr><td class="muted" style="width:120px">' + k + '</td><td>' + v + '</td></tr>'; }
|
||||
function bindSystem() { // init 一次性委托绑定(不随渲染累积)
|
||||
$('#content').addEventListener('click', async function (e) {
|
||||
if (e.target.closest('#sys-reboot')) {
|
||||
if (await confirmDlg('确认重启', '系统将立即重启,请在浏览器中关闭本页。', true))
|
||||
try { await api('POST', '/api/system/reboot', {}); toast('已请求重启'); } catch (err) { toast('重启失败:' + errText(err)); }
|
||||
return;
|
||||
}
|
||||
if (e.target.closest('#sys-shutdown')) {
|
||||
if (await confirmDlg('确认关机', '系统将立即关机,请在浏览器中关闭本页。', true))
|
||||
try { await api('POST', '/api/system/shutdown', {}); toast('已请求关机'); } catch (err) { toast('关机失败:' + errText(err)); }
|
||||
return;
|
||||
}
|
||||
if (e.target.closest('#sys-ota')) {
|
||||
if (await confirmDlg('确认升级', '⚠️ 升级中断可能导致系统无法启动,请确保已连接电源。确认开始升级?', true))
|
||||
try { await api('POST', '/api/system/ota', {}); toast('已触发升级任务'); } catch (err) { toast('升级失败:' + errText(err)); }
|
||||
return;
|
||||
}
|
||||
if (e.target.closest('#sys-ota-check')) {
|
||||
// 检查升级只读,用 GET /api/system 读 ota.available/latest;勿 POST /api/system/ota(那是触发升级)
|
||||
try { const r = await api('GET', '/api/system'); const o = r.ota || {}; toast(o.available ? '发现新版本 ' + o.latest : '已是最新版本'); }
|
||||
catch (err) { toast('检查失败:' + errText(err)); }
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- 8. 日志页 ---------------- */
|
||||
async function renderLogs() {
|
||||
$('#content').innerHTML = '<div class="page" id="logs-page"><p class="placeholder">加载日志列表…</p></div>';
|
||||
let d;
|
||||
try { d = await api('GET', '/api/logs'); }
|
||||
catch (e) { if (state.route === 'logs') $('#content').innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
if (state.route !== 'logs') return;
|
||||
let h = '<div class="page" id="logs-page">';
|
||||
h += '<div class="card"><h3 class="card-title">日志文件(MeowOS/logs)</h3>';
|
||||
h += '<div class="field-row" style="margin-bottom:12px"><span class="muted">' + esc(d.dir || '') + '</span></div>';
|
||||
h += '<table class="table"><thead><tr><th>文件</th><th>大小</th><th>修改时间</th><th style="text-align:right">操作</th></tr></thead><tbody>';
|
||||
if (!d.files.length) h += '<tr><td colspan="4" class="empty">暂无日志</td></tr>';
|
||||
d.files.forEach(f => {
|
||||
h += '<tr><td class="mono">' + esc(f.name) + '</td><td class="muted">' + fmtBytes(f.size) + '</td><td class="muted">' + fmtTime(f.mtime) + '</td>' +
|
||||
'<td><div class="row-actions"><button class="btn btn-ghost" data-log="' + esc(f.name) + '">查看</button></div></td></tr>';
|
||||
});
|
||||
h += '</tbody></table></div><pre class="log-view" id="log-view" hidden></pre></div>';
|
||||
$('#content').innerHTML = h;
|
||||
}
|
||||
function bindLogs() {
|
||||
$('#content').addEventListener('click', async function (e) {
|
||||
const t = e.target.closest('[data-log]'); if (!t) return;
|
||||
const p = $('#log-view');
|
||||
try {
|
||||
const d = await api('GET', '/api/logs/read?file=' + encodeURIComponent(t.dataset.log) + '&lines=400');
|
||||
p.hidden = false; p.textContent = (d.lines || []).join('\n') + (d.truncated ? '\n…(更多行被截断)' : '');
|
||||
} catch (err) { toast('查看失败:' + errText(err)); }
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- 9. 通知页 ---------------- */
|
||||
async function renderNotif() {
|
||||
$('#content').innerHTML = '<div class="page" id="notif-page"><p class="placeholder">加载通知…</p></div>';
|
||||
let d;
|
||||
try { d = await api('GET', '/api/notifications'); }
|
||||
catch (e) { if (state.route === 'notif') $('#content').innerHTML = emptyState('加载失败:' + errText(e), e.code); return; }
|
||||
if (state.route !== 'notif') return;
|
||||
let h = '<div class="page" id="notif-page">';
|
||||
h += '<div class="field-row" style="margin-bottom:14px"><button class="btn" id="notif-refresh">刷新</button>' +
|
||||
'<button class="btn btn-danger" id="notif-clear">清空通知</button></div>';
|
||||
const list = d.notifications || [];
|
||||
if (!list.length) h += '<div class="empty">暂无通知</div>';
|
||||
list.forEach(n => {
|
||||
const urg = n.urgency >= 2 ? '高' : (n.urgency === 1 ? '中' : '低');
|
||||
h += '<div class="notif" data-id="' + esc(n.id) + '"><div class="n-ico">' + esc((n.app_name || '?').charAt(0).toUpperCase()) + '</div>' +
|
||||
'<div class="n-body"><div class="n-title">' + esc(n.summary || n.app_name || '通知') + '</div>' +
|
||||
(n.body ? '<div class="n-text">' + esc(n.body) + '</div>' : '') +
|
||||
'<div class="n-meta"><span>' + esc(n.app_name || '') + '</span><span>' + fmtTime(n.ts) + '</span>' +
|
||||
'<span class="' + (n.urgency >= 2 ? 'urgency-hi' : '') + '">紧急度 ' + urg + '</span>' +
|
||||
(n.progress != null ? '<span>进度 ' + n.progress + '%</span>' : '') +
|
||||
(n.ongoing ? '<span>进行中</span>' : '') + '</div></div>' +
|
||||
'<button class="btn btn-ghost" data-ndel="' + esc(n.id) + '">清除</button></div>';
|
||||
});
|
||||
h += '</div>';
|
||||
$('#content').innerHTML = h;
|
||||
}
|
||||
function bindNotif() {
|
||||
$('#content').addEventListener('click', async function (e) {
|
||||
if (e.target.closest('#notif-refresh')) { renderNotif(); return; }
|
||||
if (e.target.closest('#notif-clear')) {
|
||||
if (await confirmDlg('清空通知', '将清空全部通知。确认?', true))
|
||||
try { await api('POST', '/api/notifications/dismiss_all'); toast('已清空'); renderNotif(); }
|
||||
catch (err) { toast('清空失败:' + errText(err)); }
|
||||
return;
|
||||
}
|
||||
const del = e.target.closest('[data-ndel]'); if (del) {
|
||||
try { await api('DELETE', '/api/notifications/' + del.dataset.ndel); toast('已清除'); renderNotif(); }
|
||||
catch (err) { toast('清除失败:' + errText(err)); }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------------- 路由 ---------------- */
|
||||
const ROUTES = {
|
||||
perf: { title: '实时性能', render: renderPerf, bind: null },
|
||||
bright: { title: '亮度 · 音量', render: renderBright, bind: null },
|
||||
files: { title: '文件管理', render: renderFiles, bind: bindFiles },
|
||||
apps: { title: 'MeowAPPs 管理', render: renderApps, bind: bindApps },
|
||||
settings: { title: '设置镜像', render: renderSettings, bind: bindSettings },
|
||||
remote: { title: '远程控制', render: renderRemote, bind: bindRemote },
|
||||
system: { title: '系统信息 / 升级', render: renderSystem, bind: bindSystem },
|
||||
logs: { title: '系统日志', render: renderLogs, bind: bindLogs },
|
||||
notif: { title: '通知中心', render: renderNotif, bind: bindNotif }
|
||||
};
|
||||
// 一次性绑定(各菜单 click / 侧栏);页面内交互用 #content 事件委托(已各自绑定)
|
||||
function bindNav() {
|
||||
$$('.nav-item').forEach(b => b.addEventListener('click', () => { location.hash = '#/' + b.dataset.route; }));
|
||||
$('#menu-btn').addEventListener('click', () => $('#sidebar').classList.toggle('open'));
|
||||
}
|
||||
function route() {
|
||||
const id = (location.hash || '#/perf').replace('#/', '').split('?')[0] || 'perf';
|
||||
const r = ROUTES[id] || ROUTES.perf;
|
||||
state.route = id;
|
||||
stopPerf();
|
||||
$$('.nav-item').forEach(b => b.classList.toggle('active', b.dataset.route === id));
|
||||
$('#page-title').textContent = r.title;
|
||||
r.render();
|
||||
}
|
||||
|
||||
/* ---------------- 启动 ---------------- */
|
||||
function init() {
|
||||
bindNav();
|
||||
bindThemeUi();
|
||||
bindSlider();
|
||||
bindFiles(); bindApps(); bindSettings(); bindRemote(); bindSystem(); bindLogs(); bindNotif();
|
||||
initTheme();
|
||||
window.addEventListener('hashchange', route);
|
||||
route();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
})();
|
||||
Reference in new issue
Block a user