way/pigway-device-agent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

style: integrate globe icon into language selector

Browse Source
This commit is contained in:
way
2026-09-27 21:44:03 +08:00
parent 0dac42cd64
commit 1f581087b2
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+2 -1
View File
@@ -14,10 +14,11 @@
.plugin-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
#mainSavebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.action-row,.savebar,.plugin-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.action-row>button{flex-shrink:0}.bulk-tools{column-gap:16px}.group-head{column-gap:16px}
.language-preference{position:relative}.language-preference .language-icon{position:absolute;left:10px;width:16px;height:16px;pointer-events:none;color:var(--text)}.language-preference select{padding-left:34px;min-width:110px}
</style>
</head>
<body><main>
<header><div><h1>PIGWay Pi Control</h1><div class="sub" id="identity">正在连接树莓派…</div></div><div class="header-actions"><label class="preference"><span>语言</span><select id="language"><option value="zh">中文</option><option value="en">English</option></select></label><label class="preference theme-preference"><span class="sr-only">颜色模式</span><select id="theme" aria-label="颜色模式"><option value="auto">◐ 跟随系统</option><option value="light">☀ 浅色模式</option><option value="dark">☾ 深色模式</option></select></label><div class="live"><span class="dot" id="dot"></span><span id="liveText">离线</span></div></div></header>
<header><div><h1>PIGWay Pi Control</h1><div class="sub" id="identity">正在连接树莓派…</div></div><div class="header-actions"><label class="preference language-preference"><span class="sr-only">Language / 语言</span><svg class="language-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="4" ry="9"/><path d="M3 12h18M5 6h14M5 18h14"/></svg><select id="language" aria-label="Language / 语言" title="Language / 语言"><option value="zh">中文</option><option value="en">English</option></select></label><label class="preference theme-preference"><span class="sr-only">颜色模式</span><select id="theme" aria-label="颜色模式"><option value="auto">◐ 跟随系统</option><option value="light">☀ 浅色模式</option><option value="dark">☾ 深色模式</option></select></label><div class="live"><span class="dot" id="dot"></span><span id="liveText">离线</span></div></div></header>
<nav><button class="active" data-tab="overview">运行状态</button><button data-tab="logs">事件日志</button><button data-tab="machines">机器管理</button><button data-tab="config">系统配置</button></nav>
<section id="overview"><div id="hostCards"><div class="panel muted">正在读取主机状态…</div></div></section>
<section id="logs" class="hidden"><div class="panel"><h2>事件日志</h2><p class="muted">查询 systemd journal 中仍在保留的全部硬件 Agent 事件。</p><div class="log-filter-top"><label>开始日期<input id="logStart" type="date"></label><label>结束日期<input id="logEnd" type="date"></label><div class="quick-range"><button data-log-range="today">今天</button><button data-log-range="yesterday">昨天</button><button data-log-range="week">本周</button><button data-log-range="month">本月</button><button data-log-range="all">全部</button></div><label>关键词<input id="logSearch" placeholder="搜索日志内容"></label></div><div class="log-filter-bottom"><label>严重程度<select id="logSeverity"><option value="">全部程度</option><option value="DEBUG">调试</option><option value="INFO">信息</option><option value="NOTICE">注意</option><option value="WARN">警告</option><option value="ERROR">错误</option><option value="CRITICAL">严重</option><option value="ALERT,EMERGENCY">紧急</option></select></label><label>机器标识<select id="logMachine"><option value="">全部机器</option></select></label><label>事件类型<select id="logEvent"><option value="">全部事件</option></select></label><div class="log-actions"><span class="muted" id="logSummary"></span><button id="refreshLogs">查询</button><button id="resetLogs">重置</button></div></div><div class="log-table-wrap"><table class="log-table"><thead><tr><th><button class="sort-button" data-log-sort="timestamp">时间</button></th><th><button class="sort-button" data-log-sort="machine">机器</button></th><th><button class="sort-button" data-log-sort="severity">程度</button></th><th><button class="sort-button" data-log-sort="event">事件类型</button></th><th><button class="sort-button" data-log-sort="message">内容</button></th></tr></thead><tbody id="logRows"></tbody></table></div><div class="log-pager"><button id="logPrev">上一页</button><span class="muted" id="logPage"></span><button id="logNext">下一页</button></div></div></section>