butubb/auto_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 前端整体改版（仪表控制台主题：自托管 Bricolage Grotesque+IBM Plex Mono 字体、暖纸底+墨色+深青主色、卡片/表格/徽章/模态框/Toast 全面细化、Tab 切换动画）+ fix: showTab 硬编码 tab 列表移除维护后索引错位、tools 分支调用已删的 loadStfDevMgmt、导航移除失效维护Tab

Browse Source
This commit is contained in:
butubb
2026-08-19 14:03:02 +08:00
parent 2d1b10c7f3
commit 83ba489f57
8 changed files with 211 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/admin/base.js
+5 -3
View File
@@ -87,15 +87,17 @@ function showTab(name){
_activeTab=name; _activeTab=name;
document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active')); document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
document.querySelectorAll('.navbar .tab').forEach(t=>t.classList.remove('active')); document.querySelectorAll('.navbar .tab').forEach(t=>t.classList.remove('active'));
document.getElementById('tab-'+name).classList.add('active'); const panel=document.getElementById('tab-'+name);
document.querySelectorAll('.navbar .tab')[['monitor','tasks','groups','logs','users','maintenance','tools'].indexOf(name)].classList.add('active'); if(panel)panel.classList.add('active');
const btn=document.querySelector('.navbar .tab[data-tab="'+name+'"]');
if(btn)btn.classList.add('active');
// 停止所有定时器 // 停止所有定时器
if(_monitorTimer){clearInterval(_monitorTimer);_monitorTimer=null;} if(_monitorTimer){clearInterval(_monitorTimer);_monitorTimer=null;}
if(_logTimer){clearInterval(_logTimer);_logTimer=null;} if(_logTimer){clearInterval(_logTimer);_logTimer=null;}
// 按需加载数据 // 按需加载数据
if(name==='monitor'){loadMonitor();_monitorTimer=setInterval(loadMonitor,5000);} if(name==='monitor'){loadMonitor();_monitorTimer=setInterval(loadMonitor,5000);}
if(name==='tasks'){showSubTab('tasks',_activeSubs.tasks);loadTasks();loadCustomActions();} if(name==='tasks'){showSubTab('tasks',_activeSubs.tasks);loadTasks();loadCustomActions();}
if(name==='tools'){showSubTab('tools',_activeSubs.tools);loadToolsDevices();loadAdbDevices();loadTailscaleDevices();loadApks();loadStfDevMgmt();} if(name==='tools'){showSubTab('tools',_activeSubs.tools);loadToolsDevices();loadAdbDevices();loadTailscaleDevices();loadApks();}
if(name==='groups')loadGroups(); if(name==='groups')loadGroups();
if(name==='logs'){loadLogs();if(document.getElementById('log-auto').checked)_logTimer=setInterval(loadLogs,3000);} if(name==='logs'){loadLogs();if(document.getElementById('log-auto').checked)_logTimer=setInterval(loadLogs,3000);}
if(name==='users')loadUsers(); if(name==='users')loadUsers();
static/fonts/bricolage-500.woff2
BIN
View File
Binary file not shown.
static/fonts/bricolage-700.woff2
BIN
View File
Binary file not shown.
static/fonts/bricolage-800.woff2
BIN
View File
Binary file not shown.
static/fonts/plexmono-400.woff2
BIN
View File
Binary file not shown.
static/fonts/plexmono-500.woff2
BIN
View File
Binary file not shown.
static/fonts/plexmono-600.woff2
BIN
View File
Binary file not shown.
templates/admin/monitor.html
+206 -180
View File
@@ -5,210 +5,246 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备自动化后台</title> <title>设备自动化后台</title>
<style> <style>
/* ========== 仪表控制台主题（Instrument Console） ==========
自托管字体：Bricolage Grotesque（展示/数字）+ IBM Plex Mono（数据/串号）
配色：暖纸底 + 墨色文字 + 深青主色；状态色 = 绿/红/琥珀/靛 */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/bricolage-500.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/bricolage-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/bricolage-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/plexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/plexmono-600.woff2') format('woff2')}
:root{ :root{
--primary:#3b82f6; --primary-dark:#2563eb; --success:#10b981; --danger:#ef4444; --primary:#0f766e; --primary-dark:#115e59; --primary-soft:#e6f4f1;
--warning:#f59e0b; --bg:#f8fafc; --card:#ffffff; --border:#e2e8f0; --success:#16a34a; --success-soft:#e8f7ee;
--text:#1e293b; --text-muted:#64748b; --text-light:#94a3b8; --danger:#dc2626; --danger-soft:#fdecec;
--warning:#d97706; --warning-soft:#fdf3e3;
--info:#4f46e5; --info-soft:#ecebfb;
--bg:#f5f4ef; --card:#ffffff; --border:#e6e3da; --border-strong:#d8d4c8;
--text:#1b1e24; --text-muted:#69707c; --text-light:#9aa1ab;
--ink:#14161a; --ink-2:#1e2127; --ink-line:#2a2e37;
--display:'Bricolage Grotesque','PingFang SC','Microsoft YaHei',sans-serif;
--mono:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
--body:-apple-system,'PingFang SC','Microsoft YaHei','Segoe UI',sans-serif;
--shadow-sm:0 1px 2px rgba(27,30,36,.05),0 1px 3px rgba(27,30,36,.06);
--shadow-md:0 4px 14px rgba(27,30,36,.08),0 2px 4px rgba(27,30,36,.05);
--shadow-lg:0 20px 50px rgba(20,22,26,.18);
--radius:10px;
} }
*{box-sizing:border-box;margin:0;padding:0} *{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);font-size:14px} html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);font-family:var(--body);color:var(--text);font-size:14px;line-height:1.5}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9c5b9;border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b0ab9d}
::-webkit-scrollbar-track{background:transparent}
/* 顶部导航 */ /* 顶部导航：墨色 + 顶部青线 + 品牌脉冲点 */
.navbar{background:linear-gradient(135deg,#1e293b 0%,#334155 100%);padding:0 28px;display:flex;align-items:center;height:56px;box-shadow:0 2px 8px rgba(0,0,0,.15)} .navbar{background:linear-gradient(180deg,#1a1d23 0%,#14161a 100%);border-top:3px solid var(--primary);padding:0 28px;display:flex;align-items:center;height:58px;box-shadow:0 2px 10px rgba(0,0,0,.2);position:sticky;top:0;z-index:500}
.navbar .brand{color:#fff;font-weight:700;font-size:16px;margin-right:32px;white-space:nowrap} .navbar .brand{color:#f3f4f6;font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:.3px;margin-right:34px;white-space:nowrap;display:flex;align-items:center;gap:9px}
.navbar .tabs{display:flex;gap:4px;flex:1} .brand-dot{width:9px;height:9px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 rgba(15,118,110,.6);animation:brandPulse 2.4s infinite}
.navbar .tab{padding:8px 18px;color:#cbd5e1;font-size:14px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .15s;border:none;background:none} @keyframes brandPulse{0%{box-shadow:0 0 0 0 rgba(15,118,110,.45)}70%{box-shadow:0 0 0 8px rgba(15,118,110,0)}100%{box-shadow:0 0 0 0 rgba(15,118,110,0)}}
.navbar .tab:hover{color:#fff;background:rgba(255,255,255,.08)} .navbar .tabs{display:flex;gap:2px;flex:1;align-self:stretch}
.navbar .tab.active{background:rgba(59,130,246,.25);color:#fff} .navbar .tab{position:relative;padding:0 18px;color:#9aa3af;font-size:14px;font-weight:500;cursor:pointer;border:none;background:none;transition:color .15s;letter-spacing:.2px}
.navbar .user-info{color:#94a3b8;font-size:13px;display:flex;align-items:center;gap:12px} .navbar .tab::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--primary);transform:scaleX(0);transition:transform .18s}
.navbar .user-info a{color:#cbd5e1;text-decoration:none;font-size:13px} .navbar .tab:hover{color:#e5e7eb}
.navbar .tab.active{color:#fff}
.navbar .tab.active::after{transform:scaleX(1)}
.navbar .user-info{color:#8a93a0;font-size:13px;display:flex;align-items:center;gap:14px}
.navbar .user-info a{color:#c2c9d3;text-decoration:none;font-size:13px;transition:color .15s}
.navbar .user-info a:hover{color:#fff} .navbar .user-info a:hover{color:#fff}
/* 内容区 */ /* 内容区 */
.content{max-width:1600px;margin:0 auto;padding:24px 28px} .content{max-width:1600px;margin:0 auto;padding:26px 30px 60px}
.tab-panel{display:none} .tab-panel{display:none}
.tab-panel.active{display:block} .tab-panel.active{display:block;animation:panelIn .22s ease-out}
.page-title{font-size:20px;font-weight:700;color:var(--text);margin:0 0 4px} @keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-sub{font-size:13px;color:var(--text-light);margin-bottom:20px} .page-title{font-family:var(--display);font-size:21px;font-weight:800;letter-spacing:.2px;color:var(--text);margin:0 0 4px}
.page-sub{font-size:13px;color:var(--text-light);margin-bottom:22px}
/* 统计卡片 */ /* 统计卡片：左侧色条 + 等宽数字 */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:24px} .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:26px}
.stat-card{background:var(--card);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid var(--border);position:relative;overflow:hidden} .stat-card{background:var(--card);border-radius:var(--radius);padding:15px 18px;box-shadow:var(--shadow-sm);border:1px solid var(--border);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#3b82f6)} .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card .stat-num{font-size:24px;font-weight:700;line-height:1;margin-bottom:4px;color:var(--accent,#3b82f6)} .stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,#0f766e);border-radius:0 3px 3px 0}
.stat-card .stat-lbl{font-size:12px;color:var(--text-muted);font-weight:500} .stat-card .stat-num{font-family:var(--mono);font-size:25px;font-weight:600;line-height:1.1;margin-bottom:5px;color:var(--accent,#0f766e);font-variant-numeric:tabular-nums}
.stat-card .stat-lbl{font-size:12px;color:var(--text-muted);font-weight:500;letter-spacing:.2px}
/* 工具栏 */ /* 工具栏 */
.toolbar{display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap} .toolbar{display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.toolbar .hint{color:var(--text-light);font-size:12px;margin-left:auto} .toolbar .hint{color:var(--text-light);font-size:12px;margin-left:auto}
/* 按钮 */ /* 按钮 */
.btn{border-radius:8px;font-weight:500;border:1px solid var(--border);padding:7px 16px;font-size:13px;transition:all .15s;cursor:pointer;background:var(--card);color:var(--text)} .btn{border-radius:8px;font-weight:500;border:1px solid var(--border-strong);padding:7px 16px;font-size:13px;transition:all .15s;cursor:pointer;background:var(--card);color:var(--text);box-shadow:var(--shadow-sm)}
.btn:hover{background:#f1f5f9;border-color:#cbd5e1} .btn:hover{background:#faf9f5;border-color:#c4bfb2;transform:translateY(-1px)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff} .btn:active{transform:none}
.btn-primary:hover{background:var(--primary-dark)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff} .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 1px 4px rgba(15,118,110,.35)}
.btn-danger:hover{background:#dc2626} .btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:0 1px 4px rgba(220,38,38,.3)}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
.btn-success{background:var(--success);border-color:var(--success);color:#fff} .btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover{background:#059669} .btn-success:hover{background:#15803d;border-color:#15803d}
.btn-sm{padding:4px 12px;font-size:12px} .btn-sm{padding:4px 12px;font-size:12px}
.btn-xs{padding:3px 10px;font-size:12px} .btn-xs{padding:3px 10px;font-size:12px;border-radius:6px}
/* 表单 */
.form-control{background:#fff;border:1px solid var(--border-strong);border-radius:8px;padding:7px 12px;font-size:13px;color:var(--text);transition:border-color .15s,box-shadow .15s;outline:none;font-family:var(--body)}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.form-control::placeholder{color:var(--text-light)}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-check{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px}
.form-check input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}
/* 通用列表分页栏 */ /* 通用列表分页栏 */
.list-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 20px} .list-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 22px}
.list-pager .lp-total{font-size:12px;color:var(--text-light);margin-right:auto} .list-pager .lp-total{font-size:12px;color:var(--text-light);margin-right:auto}
.list-search{width:240px} .list-search{width:240px}
.adb-console{background:#0f172a;color:#e2e8f0;font-family:monospace;font-size:12px;padding:12px;border-radius:8px;min-height:200px;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-all}
/* 控制台/日志（墨色终端） */
.adb-console{background:var(--ink);color:#d5dae1;font-family:var(--mono);font-size:12.5px;padding:14px;border-radius:10px;min-height:200px;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-all;box-shadow:inset 0 1px 6px rgba(0,0,0,.4);border:1px solid var(--ink-line)}
.log-content{background:var(--ink);color:#d5dae1;border-radius:10px;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.65;max-height:600px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;border:1px solid var(--ink-line);box-shadow:inset 0 1px 6px rgba(0,0,0,.4)}
.log-content .log-err{color:#f87171}
.log-content .log-warn{color:#fbbf24}
.log-content .log-info{color:#67e8f9}
.log-toolbar{display:flex;gap:10px;margin-bottom:12px;align-items:center}
/* 区块标题 */ /* 区块标题 */
.section-title{font-size:15px;font-weight:600;color:var(--text);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--primary);display:inline-block} .section-title{font-family:var(--display);font-size:15px;font-weight:700;color:var(--text);margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid var(--primary);display:inline-block;letter-spacing:.2px}
/* 页内子分栏（维护页用） */ /* 页内子分栏 */
.sub-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:2px solid var(--border)} .sub-tabs{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--border-strong)}
.sub-tab{padding:9px 16px;font-size:13px;font-weight:600;color:var(--text-muted);background:none;border:none;cursor:pointer;border-radius:8px 8px 0 0;transition:all .15s;position:relative} .sub-tab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--text-muted);background:none;border:none;cursor:pointer;border-radius:8px 8px 0 0;transition:all .15s;position:relative}
.sub-tab:hover{color:var(--text);background:#f1f5f9} .sub-tab:hover{color:var(--text);background:#efede6}
.sub-tab.active{color:var(--primary);background:#eff6ff} .sub-tab.active{color:var(--primary)}
.sub-tab.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-2px;height:2px;background:var(--primary);border-radius:1px} .sub-tab.active::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--primary);border-radius:2px}
.sub-panel{display:none} .sub-panel{display:none}
.sub-panel.active{display:block} .sub-panel.active{display:block;animation:panelIn .2s ease-out}
/* 表格 */ /* 表格 */
.table{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06);border:1px solid var(--border);width:100%;border-collapse:collapse;margin-bottom:24px} .table{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);width:100%;border-collapse:collapse;margin-bottom:26px}
.table thead th{background:#f1f5f9;border-bottom:2px solid var(--border);font-weight:600;color:var(--text-muted);font-size:12px;letter-spacing:.3px;padding:12px 14px;text-align:left} .table thead th{background:#faf9f5;border-bottom:1px solid var(--border-strong);font-weight:600;color:var(--text-muted);font-size:12px;letter-spacing:.4px;padding:12px 14px;text-align:left;white-space:nowrap}
.table tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px} .table tbody td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px}
.table tbody tr:last-child td{border-bottom:none} .table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:#f8fafc} .table tbody tr{transition:background .1s}
.table tbody tr:hover td{background:#faf9f4}
.table thead th.sortable{cursor:pointer;user-select:none}
.table thead th.sortable:hover{background:#f3f1e9}
.table thead th.sortable::after{content:" ⇅";color:#c6c1b4;font-weight:400;font-size:11px}
.table thead th.sortable.sort-asc::after{content:" ↑";color:var(--primary);font-weight:700}
.table thead th.sortable.sort-desc::after{content:" ↓";color:var(--primary);font-weight:700}
.table tbody tr.row-checked td{background:var(--primary-soft)}
.table .col-cb{width:38px;text-align:center}
.table .col-cb input,.form-check input[type=checkbox],.device-list input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}
/* 徽章 */ /* 徽章（柔和底 + 深色字） */
.label{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;display:inline-block} .label{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;display:inline-block;line-height:1.5;letter-spacing:.2px}
.label-success{background:#dcfce7;color:#166534} .label-success{background:var(--success-soft);color:#15803d}
.label-default{background:#f1f5f9;color:#64748b} .label-default{background:#f1efe8;color:var(--text-muted)}
.label-warning{background:#fef3c7;color:#92400e} .label-warning{background:var(--warning-soft);color:#b45309}
.label-primary{background:#dbeafe;color:#1e40af} .label-primary{background:var(--primary-soft);color:#0f766e}
.label-info{background:#e0e7ff;color:#3730a3} .label-info{background:var(--info-soft);color:#4338ca}
.label-danger{background:#fee2e2;color:#991b1b} .label-danger{background:var(--danger-soft);color:#b91c1c}
/* 进度条 */ /* 进度条 */
.progress{background:#e2e8f0;border-radius:4px;height:6px;overflow:hidden;display:inline-block;vertical-align:middle;width:70px} .progress{background:#e9e6dd;border-radius:99px;height:6px;overflow:hidden;display:inline-block;vertical-align:middle;width:70px}
.progress-bar{background:var(--primary);height:100%;border-radius:4px;transition:width .3s} .progress-bar{background:var(--primary);height:100%;border-radius:99px;transition:width .3s}
/* 圆点 */ /* 圆点 */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px} .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.dot-on{background:var(--success);box-shadow:0 0 6px rgba(16,185,129,.5)} .dot-on{background:var(--success);box-shadow:0 0 6px rgba(22,163,74,.55)}
.dot-off{background:var(--danger);opacity:.5} .dot-off{background:var(--danger);opacity:.55}
/* 任务卡片 */ /* 任务卡片 */
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px} .jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:14px}
.job-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:all .15s} .job-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow-sm);transition:all .18s;position:relative}
.job-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)} .job-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.job-card.running{border-color:var(--success);box-shadow:0 0 0 1px var(--success)} .job-card.running{border-color:rgba(22,163,74,.55);box-shadow:0 0 0 1px rgba(22,163,74,.35),var(--shadow-sm)}
.job-card .job-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px} .job-card .job-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:9px}
.job-card .job-name{font-size:14px;font-weight:600;color:var(--text)} .job-card .job-name{font-size:14px;font-weight:600;color:var(--text)}
.job-card .job-type{font-size:11px;color:var(--text-light);background:#f1f5f9;padding:2px 8px;border-radius:4px;margin-top:2px;display:inline-block} .job-card .job-type{font-size:11px;color:var(--text-muted);background:#f1efe8;padding:2px 8px;border-radius:99px;margin-top:3px;display:inline-block;font-weight:500}
.job-card .job-body{font-size:12px;color:var(--text-muted);margin-bottom:10px;line-height:1.6} .job-card .job-body{font-size:12px;color:var(--text-muted);margin-bottom:11px;line-height:1.65}
.job-card .job-body .kv{display:inline-block;background:#f8fafc;border:1px solid var(--border);border-radius:4px;padding:1px 6px;margin:2px 2px 0 0} .job-card .job-body .kv{display:inline-block;background:#faf9f5;border:1px solid var(--border);border-radius:6px;padding:1px 7px;margin:2px 3px 0 0;font-family:var(--mono);font-size:11px}
.job-card .job-actions{display:flex;gap:6px;flex-wrap:wrap} .job-card .job-actions{display:flex;gap:6px;flex-wrap:wrap}
/* 空状态 */ /* 空状态 / 辅助文本 */
.empty{text-align:center;padding:40px;color:var(--text-light)} .empty{text-align:center;padding:42px;color:var(--text-light);font-size:13px}
.text-muted{color:var(--text-light)!important} .text-muted{color:var(--text-light)!important}
.err-text{color:var(--danger);font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .err-text{color:var(--danger);font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pulse{animation:pulse 2s infinite} .pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.help{font-size:12px;color:var(--text-light);line-height:1.7;background:#faf9f4;border:1px dashed var(--border-strong);border-radius:8px;padding:10px 12px;margin:10px 0}
.help code{font-family:var(--mono);background:#f1efe8;padding:1px 5px;border-radius:4px;font-size:11px;color:var(--primary-dark)}
/* 模态框 */ /* 模态框 */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:1000;justify-content:center;align-items:flex-start;padding:40px 20px;overflow-y:auto} .modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(20,22,26,.5);backdrop-filter:blur(2px);z-index:1000;justify-content:center;align-items:flex-start;padding:40px 20px;overflow-y:auto}
.modal-overlay.show{display:flex} .modal-overlay.show{display:flex}
.modal{background:var(--card);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:100%;max-width:640px;margin-bottom:40px} .modal{background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);width:100%;max-width:640px;margin-bottom:40px;border:1px solid var(--border);animation:modalIn .18s ease-out}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.modal-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .modal-header{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:17px;font-weight:700;color:var(--text)} .modal-header h3{font-size:17px;font-weight:700;color:var(--text);font-family:var(--display)}
.modal-header .close{background:none;border:none;font-size:22px;color:var(--text-light);cursor:pointer;padding:0;width:28px;height:28px;line-height:1} .modal-header .btn{background:none;border:none;font-size:20px;color:var(--text-light);padding:0 6px;box-shadow:none}
.modal-header .close:hover{color:var(--text)} .modal-header .btn:hover{color:var(--text)}
.modal-body{padding:24px;max-height:60vh;overflow-y:auto} .modal-body{padding:20px 24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px} .modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
/* 表单 */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.form-group .help{font-size:12px;color:var(--text-light);margin-top:4px}
.form-control{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:var(--text);transition:all .15s}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
textarea.form-control{font-family:monospace;resize:vertical;min-height:100px}
select.form-control{cursor:pointer}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-check{display:flex;align-items:center;gap:8px}
.form-check input{width:16px;height:16px;cursor:pointer}
.form-check label{margin:0;cursor:pointer}
/* 设备多选列表 */
.device-list{max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:8px}
.device-list label{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:13px;font-weight:400;cursor:pointer;border-radius:4px}
.device-list label:hover{background:#f1f5f9}
.device-list input{width:14px;height:14px}
/* 日志 */
.log-toolbar{display:flex;gap:10px;margin-bottom:12px;align-items:center}
.log-content{background:#1e293b;color:#e2e8f0;border-radius:10px;padding:16px;font-family:"Cascadia Code",Consolas,monospace;font-size:12px;line-height:1.6;max-height:600px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
.log-content .log-err{color:#fca5a5}
.log-content .log-warn{color:#fcd34d}
.log-content .log-info{color:#93c5fd}
/* Toast */
.toast{position:fixed;top:20px;right:20px;z-index:2000;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;max-width:400px}
.toast.show{display:block}
.toast-success{background:#dcfce7;color:#166534;border:1px solid #86efac}
.toast-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
/* 截图弹窗 */
.shot-modal{max-width:none;width:min(440px,95vw)} .shot-modal{max-width:none;width:min(440px,95vw)}
/* 宽弹窗（任务编辑器：步骤编辑需要横向空间） */
.wide-modal{max-width:1000px} .wide-modal{max-width:1000px}
.shot-modal .modal-body{text-align:center;padding:14px} .shot-modal .modal-body{text-align:center;padding:14px}
.shot-img{max-width:100%;max-height:calc(100vh - 240px);width:auto;height:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.15);background:#1e293b;min-height:200px;display:block;margin:0 auto} .shot-img{max-width:100%;max-height:calc(100vh - 240px);width:auto;height:auto;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.2);background:var(--ink);min-height:200px;display:block;margin:0 auto}
.shot-loading{color:var(--text-light);padding:60px 0;font-size:13px} .shot-loading{color:var(--text-light);padding:60px 0;font-size:13px}
.shot-err{color:var(--danger);padding:40px 0;font-size:13px;white-space:pre-wrap;word-break:break-all} .shot-err{color:var(--danger);padding:40px 0;font-size:13px;white-space:pre-wrap;word-break:break-all}
.shot-info{font-size:12px;color:var(--text-muted);margin-top:10px} .shot-info{font-size:12px;color:var(--text-muted);margin-top:10px}
.shot-toolbar{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap} .shot-toolbar{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}
.shot-toolbar .auto-label{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:4px} .shot-toolbar .auto-label{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:4px}
.shot-toolbar .auto-label input{width:14px;height:14px}
/* 表头排序 */ /* Toast */
.table thead th.sortable{cursor:pointer;user-select:none;white-space:nowrap} .toast{position:fixed;top:20px;right:20px;z-index:2000;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);display:none;max-width:400px;border-left:4px solid;animation:toastIn .18s ease-out}
.table thead th.sortable:hover{background:#e2e8f0} .toast.show{display:block}
.table thead th.sortable::after{content:" ⇅";color:#cbd5e1;font-weight:400;font-size:11px} @keyframes toastIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.table thead th.sortable.sort-asc::after{content:" ↑";color:var(--primary);font-weight:700} .toast-success{background:#f0faf4;color:#166534;border-color:var(--success)}
.table thead th.sortable.sort-desc::after{content:" ↓";color:var(--primary);font-weight:700} .toast-error{background:#fef2f2;color:#991b1b;border-color:var(--danger)}
.table tbody tr.row-checked td{background:#eff6ff}
.table .col-cb{width:36px;text-align:center} /* 设备多选列表 */
.table .col-cb input{width:14px;height:14px;cursor:pointer;vertical-align:middle} .device-list{max-height:200px;overflow-y:auto;border:1px solid var(--border-strong);border-radius:8px;padding:8px;background:#fff}
.device-list label{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:13px;font-weight:400;cursor:pointer;border-radius:6px}
.device-list label:hover{background:#f5f3ec}
/* 步骤编辑器 */ /* 步骤编辑器 */
.step-editor{display:none;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:8px} .step-editor{display:none;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:8px;background:#fff;box-shadow:var(--shadow-sm)}
.step-editor.show{display:block} .step-editor.show{display:block}
.step-editor .se-head{background:#f1f5f9;padding:10px 14px;font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center} .step-editor .se-head{background:#faf9f5;padding:10px 14px;font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)}
.step-editor .se-body{display:grid;grid-template-columns:200px 1fr;min-height:280px} .step-editor .se-body{display:grid;grid-template-columns:200px 1fr;min-height:280px}
.step-editor .se-lib{border-right:1px solid var(--border);padding:8px;background:#f8fafc;overflow-y:auto;max-height:520px} .step-editor .se-lib{border-right:1px solid var(--border);padding:8px;background:#faf9f4;overflow-y:auto;max-height:520px}
.step-editor .se-lib .lib-title{font-size:11px;color:var(--text-light);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px} .step-editor .se-lib .lib-title{font-size:11px;color:var(--text-light);font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}
.step-editor .se-lib .lib-item{padding:6px 8px;border-radius:6px;cursor:grab;font-size:12px;color:var(--text);display:flex;align-items:center;gap:6px;margin-bottom:2px;transition:background .1s;white-space:nowrap;overflow:hidden} .step-editor .se-lib .lib-item{padding:6px 8px;border-radius:6px;cursor:grab;font-size:12px;color:var(--text);display:flex;align-items:center;gap:6px;margin-bottom:2px;transition:background .1s;white-space:nowrap;overflow:hidden}
.step-editor .se-lib .lib-item span:last-child{overflow:hidden;text-overflow:ellipsis} .step-editor .se-lib .lib-item span:last-child{overflow:hidden;text-overflow:ellipsis}
.step-editor .se-lib .lib-item:hover{background:#e2e8f0} .step-editor .se-lib .lib-item:hover{background:#ece9e0}
.step-editor .se-lib .lib-item:active{cursor:grabbing} .step-editor .se-lib .lib-item:active{cursor:grabbing}
.step-editor .se-lib .lib-item .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:4px;font-size:11px;flex-shrink:0} .step-editor .se-lib .lib-item .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:5px;font-size:11px;flex-shrink:0}
.step-editor .se-lib .lib-section{margin-top:8px;padding-top:6px;border-top:1px solid var(--border)}
.step-editor .se-lib .lib-item.custom .ico{background:#7c3aed}
.step-editor .se-lib .lib-item.custom .del-btn{margin-left:auto;background:none;border:none;color:var(--text-light);cursor:pointer;font-size:13px;padding:0 2px}
.step-editor .se-lib .lib-item.custom .del-btn:hover{color:var(--danger)}
.step-editor .se-canvas{padding:8px;overflow-y:auto;max-height:480px} .step-editor .se-canvas{padding:8px;overflow-y:auto;max-height:480px}
.step-editor .se-empty{text-align:center;color:var(--text-light);padding:40px 20px;font-size:13px} .step-editor .se-empty{text-align:center;color:var(--text-light);padding:40px 20px;font-size:13px}
.step-editor .se-empty .hint{font-size:11px;margin-top:4px} .step-editor .se-empty .hint{font-size:11px;margin-top:4px}
.se-toolbar{display:flex;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border);background:#faf9f5}
.se-toolbar .btn{padding:4px 10px;font-size:12px}
.step-card{background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;transition:box-shadow .15s} .step-card{background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;transition:box-shadow .15s}
.step-card.drag-over{border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.15)} .step-card.drag-over{border-color:var(--primary);box-shadow:0 0 0 2px rgba(15,118,110,.18)}
.step-card.dragging{opacity:.5} .step-card.dragging{opacity:.5}
.step-card .sc-head{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:grab} .step-card .sc-head{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:grab}
.step-card .sc-head:active{cursor:grabbing} .step-card .sc-head:active{cursor:grabbing}
.step-card .sc-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:5px;font-size:12px;flex-shrink:0} .step-card .sc-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;border-radius:6px;font-size:12px;flex-shrink:0}
.step-card .sc-label{flex:1;font-size:13px;font-weight:500;color:var(--text)} .step-card .sc-label{flex:1;font-size:13px;font-weight:500;color:var(--text)}
.step-card .sc-type{font-size:11px;color:var(--text-light);background:#f1f5f9;padding:1px 6px;border-radius:3px} .step-card .sc-type{font-size:11px;color:var(--text-light);background:#f1efe8;padding:1px 6px;border-radius:4px}
.step-card .sc-actions{display:flex;gap:2px} .step-card .sc-actions{display:flex;gap:2px}
.step-card .sc-actions button{background:none;border:none;color:var(--text-light);cursor:pointer;padding:2px 5px;font-size:14px;border-radius:3px;line-height:1} .step-card .sc-actions button{background:none;border:none;color:var(--text-light);cursor:pointer;padding:2px 5px;font-size:14px;border-radius:4px;line-height:1}
.step-card .sc-actions button:hover{background:#f1f5f9;color:var(--text)} .step-card .sc-actions button:hover{background:#f1efe8;color:var(--text)}
.step-card .sc-body{display:none;padding:8px 10px;border-top:1px solid var(--border);background:#f8fafc} .step-card .sc-body{display:none;padding:8px 10px;border-top:1px solid var(--border);background:#faf9f4}
.step-card.expanded .sc-body{display:block} .step-card.expanded .sc-body{display:block}
.step-card .sc-body .form-row{grid-template-columns:1fr 1fr 1fr;gap:8px} .step-card .sc-body .form-row{grid-template-columns:1fr 1fr 1fr;gap:8px}
.step-card .sc-body .form-group{margin-bottom:8px} .step-card .sc-body .form-group{margin-bottom:8px}
@@ -216,81 +252,71 @@ select.form-control{cursor:pointer}
.step-card .sc-body .form-control{padding:5px 8px;font-size:12px} .step-card .sc-body .form-control{padding:5px 8px;font-size:12px}
.step-card.loop-block{border-left:3px solid var(--success)} .step-card.loop-block{border-left:3px solid var(--success)}
.step-card.loop-block .sc-ico{background:var(--success)} .step-card.loop-block .sc-ico{background:var(--success)}
.step-card.group-block{border-left:3px solid #8b5cf6} .step-card.group-block{border-left:3px solid #7c3aed}
.step-card.group-block .sc-ico{background:#8b5cf6} .step-card.group-block .sc-ico{background:#7c3aed}
.step-card.if-block{border-left:3px solid #f59e0b} .step-card.if-block{border-left:3px solid var(--warning)}
.step-card.if-block .sc-ico{background:#f59e0b} .step-card.if-block .sc-ico{background:var(--warning)}
.step-card.selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.2)} .step-card.selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(15,118,110,.22)}
.step-children{margin-left:20px;margin-top:6px;border-left:2px dashed var(--border);padding-left:8px} .step-children{margin-left:20px;margin-top:6px;border-left:2px dashed var(--border-strong);padding-left:8px}
.if-branch{margin-top:6px} .if-branch{margin-top:6px}
.if-branch .branch-title{font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;margin-bottom:4px;display:inline-block} .if-branch .branch-title{font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;margin-bottom:4px;display:inline-block}
.if-branch .branch-title.then{color:#166534;background:#dcfce7} .if-branch .branch-title.then{color:#15803d;background:var(--success-soft)}
.if-branch .branch-title.else{color:#991b1b;background:#fee2e2} .if-branch .branch-title.else{color:#b91c1c;background:var(--danger-soft)}
.step-children.drag-over{border-left-color:var(--primary);background:rgba(59,130,246,.06);border-radius:6px} .step-children.drag-over{border-left-color:var(--primary);background:rgba(15,118,110,.06);border-radius:6px}
#se-canvas.drag-over{outline:2px dashed var(--primary);outline-offset:2px;border-radius:8px} #se-canvas.drag-over{outline:2px dashed var(--primary);outline-offset:2px;border-radius:8px}
.sel-picker{display:flex;gap:4px;align-items:center} .sel-picker{display:flex;gap:4px;align-items:center}
.sel-picker input{flex:1} .sel-picker input{flex:1}
.sel-picker .btn-pick{padding:5px 8px;font-size:11px;white-space:nowrap} .sel-picker .btn-pick{padding:5px 8px;font-size:11px;white-space:nowrap}
.se-lib .lib-section{margin-top:8px;padding-top:6px;border-top:1px solid var(--border)}
.se-lib .lib-item.custom .ico{background:#8b5cf6}
.se-lib .lib-item.custom .del-btn{margin-left:auto;background:none;border:none;color:var(--text-light);cursor:pointer;font-size:13px;padding:0 2px}
.se-lib .lib-item.custom .del-btn:hover{color:var(--danger)}
.se-toolbar{display:flex;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border);background:#f8fafc}
.se-toolbar .btn{padding:4px 10px;font-size:12px}
/* 元素抓取弹窗（独立模态框，样式已内联在 HTML 中）*/ /* 元素抓取弹窗 */
/* 设备选择页 */
.el-device-grid{padding:16px;overflow-y:auto;flex:1} .el-device-grid{padding:16px;overflow-y:auto;flex:1}
.el-device-grid .egd-title{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--text)} .el-device-grid .egd-title{font-size:14px;font-weight:600;margin-bottom:12px;color:var(--text)}
.el-device-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;margin-bottom:8px} .el-device-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;margin-bottom:8px;box-shadow:var(--shadow-sm)}
.el-device-card:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(59,130,246,.12)} .el-device-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.el-device-card .edc-icon{width:36px;height:36px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .el-device-card .edc-icon{width:36px;height:36px;background:#f1efe8;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.el-device-card .edc-info{flex:1} .el-device-card .edc-info{flex:1}
.el-device-card .edc-serial{font-size:13px;font-weight:600;color:var(--text)} .el-device-card .edc-serial{font-size:13px;font-weight:600;color:var(--text);font-family:var(--mono)}
.el-device-card .edc-model{font-size:12px;color:var(--text-light);margin-top:2px} .el-device-card .edc-model{font-size:12px;color:var(--text-light);margin-top:2px}
.el-device-card .edc-status{font-size:11px;padding:2px 8px;border-radius:4px;background:#dcfce7;color:#166534;flex-shrink:0} .el-device-card .edc-status{font-size:11px;padding:2px 10px;border-radius:99px;background:var(--success-soft);color:#15803d;flex-shrink:0;font-weight:600}
/* 截图+元素树页 */
.el-picker-main{display:flex;flex:1;overflow:hidden} .el-picker-main{display:flex;flex:1;overflow:hidden}
.el-shot-wrap{flex:0 0 320px;border-right:1px solid var(--border);background:#1e293b;display:flex;flex-direction:column} .el-shot-wrap{flex:0 0 320px;border-right:1px solid var(--border);background:var(--ink);display:flex;flex-direction:column}
.el-shot-toolbar{padding:6px 10px;background:#334155;display:flex;gap:6px;align-items:center} .el-shot-toolbar{padding:6px 10px;background:var(--ink-2);display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--ink-line)}
.el-shot-toolbar .btn{padding:3px 10px;font-size:12px;background:#475569;color:#fff;border:none} .el-shot-toolbar .btn{padding:3px 10px;font-size:12px;background:#39414d;color:#e5e7eb;border:none;box-shadow:none}
.el-shot-toolbar .btn:hover{background:#64748b} .el-shot-toolbar .btn:hover{background:#4b5563}
.el-shot-toolbar .el-shot-info{color:#cbd5e1;font-size:11px;flex:1} .el-shot-toolbar .el-shot-info{color:#9aa3af;font-size:11px;flex:1}
.el-shot-container{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:8px;position:relative} .el-shot-container{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:8px;position:relative}
.el-shot-container img{max-width:100%;height:auto;border-radius:4px;display:block} .el-shot-container img{max-width:100%;height:auto;border-radius:4px;display:block}
.el-shot-container .el-shot-loading{color:#94a3b8;font-size:13px;padding:40px} .el-shot-container .el-shot-loading{color:#8a93a0;font-size:13px;padding:40px}
.el-shot-overlay{position:absolute;border:1px solid rgba(59,130,246,.3);background:transparent;cursor:pointer;border-radius:2px;transition:all .1s} .el-shot-overlay{position:absolute;border:1px solid rgba(103,232,249,.35);background:transparent;cursor:pointer;border-radius:2px;transition:all .1s}
.el-shot-overlay:hover{border-color:#3b82f6;background:rgba(59,130,246,.2)} .el-shot-overlay:hover{border-color:#67e8f9;background:rgba(103,232,249,.18)}
.el-shot-overlay.active{border:2px solid #ef4444;background:rgba(239,68,68,.2)} .el-shot-overlay.active{border:2px solid #f87171;background:rgba(248,113,113,.22)}
/* 右侧元素列表 */
.el-list-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden} .el-list-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.el-picker-search{width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border);font-size:13px;outline:none} .el-picker-search{width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border);font-size:13px;outline:none;font-family:var(--body)}
.el-picker-list{flex:1;overflow-y:auto} .el-picker-list{flex:1;overflow-y:auto}
.el-picker-item{padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12px;display:flex;gap:8px;align-items:flex-start} .el-picker-item{padding:8px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:12px;display:flex;gap:8px;align-items:flex-start}
.el-picker-item:hover{background:#eff6ff} .el-picker-item:hover{background:var(--primary-soft)}
.el-picker-item.active{background:#dbeafe} .el-picker-item.active{background:var(--primary-soft);border-left:3px solid var(--primary)}
.el-picker-item:last-child{border-bottom:none} .el-picker-item:last-child{border-bottom:none}
.el-picker-item .ep-depth{color:var(--text-light);font-family:monospace;flex-shrink:0;width:28px} .el-picker-item .ep-depth{color:var(--text-light);font-family:var(--mono);flex-shrink:0;width:28px}
.el-picker-item .ep-info{flex:1;min-width:0} .el-picker-item .ep-info{flex:1;min-width:0}
.el-picker-item .ep-info .ep-name{color:var(--text);font-weight:500;word-break:break-all} .el-picker-item .ep-info .ep-name{color:var(--text);font-weight:500;word-break:break-all}
.el-picker-item .ep-info .ep-attrs{color:var(--text-light);font-size:11px;margin-top:2px;word-break:break-all} .el-picker-item .ep-info .ep-attrs{color:var(--text-light);font-size:11px;margin-top:2px;word-break:break-all}
.el-picker-item .ep-info .ep-attrs span{margin-right:8px} .el-picker-item .ep-info .ep-attrs span{margin-right:8px}
.el-picker-item .ep-sel{font-size:10px;color:var(--primary);background:#dbeafe;padding:1px 6px;border-radius:3px;flex-shrink:0} .el-picker-item .ep-sel{font-size:10px;color:#fff;background:var(--primary);padding:1px 7px;border-radius:99px;flex-shrink:0;font-weight:600}
</style> </style>
</head> </head>
<body> <body>
<!-- 顶部导航 --> <!-- 顶部导航 -->
<nav class="navbar"> <nav class="navbar">
<div class="brand">设备自动化后台</div> <div class="brand"><span class="brand-dot"></span>设备自动化后台</div>
<div class="tabs"> <div class="tabs">
<button class="tab active" onclick="showTab('monitor')">监控</button> <button class="tab active" data-tab="monitor" onclick="showTab('monitor')">监控</button>
<button class="tab" onclick="showTab('tasks')">任务</button> <button class="tab" data-tab="tasks" onclick="showTab('tasks')">任务</button>
<button class="tab" onclick="showTab('groups')">分组</button> <button class="tab" data-tab="groups" onclick="showTab('groups')">分组</button>
<button class="tab" onclick="showTab('logs')" data-perm="logs">日志</button> <button class="tab" data-tab="logs" onclick="showTab('logs')" data-perm="logs">日志</button>
<button class="tab" onclick="showTab('users')" data-perm="admin">用户</button> <button class="tab" data-tab="users" onclick="showTab('users')" data-perm="admin">用户</button>
<button class="tab" onclick="showTab('maintenance')" data-perm="admin">维护</button> <button class="tab" data-tab="tools" onclick="showTab('tools')" data-perm="admin">工具</button>
<button class="tab" onclick="showTab('tools')" data-perm="admin">工具</button>
</div> </div>
<div class="user-info"> <div class="user-info">
<span id="me-username">...</span> <span id="me-username">...</span>