13 lines
15 KiB
HTML
13 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>VDI Cloud · 百工万象 UI 设计稿</title><style>
|
||
:root{--bg:#f5f7fa;--panel:#fff;--panel2:#f0f3f7;--line:#e5e9ef;--text:#1b2533;--muted:#7e8b9c;--accent:#bd713b;--accent2:#f1ad62;--accent-soft:#fff0e4;--ok:#25ad7a;--warn:#e2a62d;--danger:#dc5a63;--shadow:0 16px 40px rgba(27,37,51,.08)}
|
||
[data-theme=dark]{--bg:#151d27;--panel:#1d2733;--panel2:#253241;--line:#314050;--text:#edf1f6;--muted:#98a7b9;--accent:#bd713b;--accent2:#eda457;--accent-soft:#493323;--shadow:0 18px 45px rgba(0,0,0,.24)}
|
||
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button{font:inherit;border:0;cursor:pointer}.app{min-height:100vh;display:flex}.rail{width:248px;background:var(--panel);border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;gap:26px}.brand{display:flex;align-items:center;gap:10px;padding:0 10px}.brand img{width:34px;height:34px}.brand b{font-size:21px;letter-spacing:1px}.tenant{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:14px}.tenant small{color:var(--muted);display:block;margin-bottom:5px}.tenant strong{font-size:15px}.nav{display:grid;gap:7px}.nav button{background:transparent;color:var(--muted);text-align:left;border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:12px}.nav button.active{color:var(--accent2);background:var(--accent-soft);font-weight:700}.nav i{font-style:normal;width:22px;text-align:center}.profile{margin-top:auto;background:var(--accent-soft);border-radius:16px;padding:14px;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#f5ca91,#c97235);display:grid;place-items:center;color:#fff;font-weight:700}.profile small{display:block;color:var(--muted);margin-top:2px}.content{flex:1;padding:30px 42px;overflow:auto}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{color:var(--muted);font-size:13px;margin-bottom:7px}.title{font-size:30px;font-weight:800;letter-spacing:.5px}.actions{display:flex;gap:10px;align-items:center}.btn{padding:11px 16px;border-radius:11px;color:var(--text);background:var(--panel2);border:1px solid var(--line)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.theme{width:42px;height:42px;border-radius:11px;background:var(--panel2);color:var(--text);border:1px solid var(--line)}.page{display:none}.page.active{display:block}.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.stat{padding:20px}.stat .label{color:var(--muted);font-size:13px}.stat .value{font-size:30px;font-weight:800;margin:8px 0}.trend{font-size:12px;color:var(--ok)}.overview{grid-template-columns:1.35fr .85fr}.card-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 0}.card-title{font-size:17px;font-weight:700}.subtle{color:var(--muted);font-size:12px}.chart{padding:20px 22px 22px;height:260px;display:flex;align-items:flex-end;gap:15px}.bar{flex:1;background:linear-gradient(180deg,var(--accent2),var(--accent));border-radius:9px 9px 3px 3px;min-height:35px;position:relative}.bar span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted)}.health{padding:22px}.health-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.health-row:last-child{border-bottom:0}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;background:var(--ok)}.dot.warn{background:var(--warn)}.desktop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.desktop{padding:0;overflow:hidden}.desktop-top{height:88px;padding:18px 20px;background:linear-gradient(135deg,var(--accent),#e4a15a);color:#fff;position:relative}.desktop-top:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-26px;top:-55px;background:rgba(255,255,255,.14)}.desktop-icon{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:18px}.desktop-body{padding:18px 20px}.desktop-name{font-weight:800;font-size:17px}.chips{display:flex;gap:7px;margin:12px 0;flex-wrap:wrap}.chip{padding:5px 8px;border-radius:7px;font-size:11px;color:var(--muted);background:var(--panel2)}.desktop-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.status{font-size:12px;color:var(--ok)}.session{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.stream{min-height:500px;background:#101821;border-radius:18px;position:relative;overflow:hidden;border:1px solid var(--line);background-image:radial-gradient(circle at 20% 20%,rgba(237,164,87,.12),transparent 28%),linear-gradient(145deg,#16212d,#0e141c)}.stream .window{position:absolute;background:#253241;border:1px solid #435364;border-radius:12px;box-shadow:0 16px 35px #0005}.window.w1{left:10%;top:14%;width:44%;height:46%}.window.w2{right:8%;top:25%;width:32%;height:32%}.window.w3{left:22%;bottom:9%;width:56%;height:20%}.window-bar{height:30px;background:#2f3e4e;border-radius:12px 12px 0 0}.window-line{height:9px;border-radius:5px;background:#4a6072;margin:15px}.sidepanel{padding:22px}.metric{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line)}.progress{height:8px;border-radius:99px;background:var(--panel2);overflow:hidden;margin-top:8px}.progress i{display:block;height:100%;border-radius:99px;background:var(--accent2)}.settings{display:grid;grid-template-columns:230px 1fr;gap:18px}.tabs{padding:12px;display:grid;align-content:start;gap:5px}.tabs button{padding:12px;border-radius:10px;background:transparent;color:var(--muted);text-align:left}.tabs button.active{background:var(--accent-soft);color:var(--accent2);font-weight:700}.form{padding:24px}.form-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}.form-row:last-child{border-bottom:0}.toggle{width:46px;height:26px;background:var(--accent);border-radius:99px;padding:3px}.toggle i{display:block;width:20px;height:20px;background:#fff;border-radius:50%;margin-left:17px}.footer-note{margin-top:20px;color:var(--muted);font-size:12px}
|
||
@media(max-width:900px){.rail{width:190px}.content{padding:24px}.stats{grid-template-columns:repeat(2,1fr)}.overview,.session,.settings{grid-template-columns:1fr}.desktop-grid{grid-template-columns:repeat(2,1fr)}}
|
||
</style></head><body data-theme="dark"><div class="app"><aside class="rail"><div class="brand"><img src="assets/brand-mark.svg"><b>百工万象</b></div><div class="tenant"><small>当前组织</small><strong>星河制造 · 信息中心</strong></div><nav class="nav"><button class="active" data-page="overview"><i>▦</i>云桌面总览</button><button data-page="desktops"><i>▣</i>桌面资源池</button><button data-page="session"><i>◈</i>远程会话</button><button data-page="settings"><i>⚙</i>终端与策略</button></nav><div class="profile"><div class="avatar">王</div><div><b>王工</b><small>管理员</small></div></div></aside><main class="content"><div class="topbar"><div><div class="eyebrow">VDI CLOUD / WORKSPACE</div><div class="title" id="page-title">云桌面总览</div></div><div class="actions"><button class="btn">导出报告</button><button class="theme" id="theme">☼</button><button class="btn primary" data-page="desktops">＋ 新建桌面</button></div></div>
|
||
<section class="page active" id="overview"><div class="grid stats"><div class="card stat"><div class="label">在线桌面</div><div class="value">128</div><div class="trend">↑ 12.4% 较昨日</div></div><div class="card stat"><div class="label">活跃会话</div><div class="value">86</div><div class="trend">↑ 8.1% 运行稳定</div></div><div class="card stat"><div class="label">平均延迟</div><div class="value">18<span style="font-size:15px"> ms</span></div><div class="trend">↓ 3.6 ms 本周优化</div></div><div class="card stat"><div class="label">异常告警</div><div class="value" style="color:var(--warn)">03</div><div class="trend" style="color:var(--warn)">需要关注</div></div></div><div class="grid overview"><div class="card"><div class="card-head"><div><div class="card-title">桌面使用趋势</div><div class="subtle">近 7 日连接与运行时长</div></div><span class="chip">最近 7 天⌄</span></div><div class="chart"><div class="bar" style="height:48%"><span>周一</span></div><div class="bar" style="height:63%"><span>周二</span></div><div class="bar" style="height:55%"><span>周三</span></div><div class="bar" style="height:76%"><span>周四</span></div><div class="bar" style="height:68%"><span>周五</span></div><div class="bar" style="height:86%"><span>周六</span></div><div class="bar" style="height:92%"><span>周日</span></div></div></div><div class="card"><div class="card-head"><div class="card-title">资源健康度</div><span class="status">● 全部正常</span></div><div class="health"><div class="health-row"><span><span class="dot"></span>计算节点</span><b>24 / 24</b></div><div class="health-row"><span><span class="dot"></span>串流网关</span><b>12 / 12</b></div><div class="health-row"><span><span class="dot warn"></span>存储容量</span><b>76%</b></div><div class="health-row"><span><span class="dot"></span>认证服务</span><b>正常</b></div></div></div></div></section>
|
||
<section class="page" id="desktops"><div class="card" style="padding:20px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center"><div><div class="card-title">桌面资源池</div><div class="subtle">统一管理 Windows / Linux 云桌面与分配策略</div></div><div class="actions"><span class="chip">全部 128</span><span class="chip">运行中 86</span><span class="chip">待分配 42</span></div></div><div class="grid desktop-grid"><div class="card desktop"><div class="desktop-top"><div class="desktop-icon">▣</div></div><div class="desktop-body"><div class="desktop-name">设计工作站 · 2K</div><div class="subtle">Windows 11 · NVIDIA GPU</div><div class="chips"><span class="chip">2K / 60 FPS</span><span class="chip">低延迟</span></div><div class="desktop-foot"><span class="status">● 运行中</span><button class="btn primary">连接</button></div></div></div><div class="card desktop"><div class="desktop-top" style="background:linear-gradient(135deg,#7568a8,#9889d0)"><div class="desktop-icon">◈</div></div><div class="desktop-body"><div class="desktop-name">研发环境 · Ubuntu</div><div class="subtle">Ubuntu 24.04 · 开发工具链</div><div class="chips"><span class="chip">GPU 加速</span><span class="chip">USB 重定向</span></div><div class="desktop-foot"><span class="status">● 运行中</span><button class="btn primary">连接</button></div></div></div><div class="card desktop"><div class="desktop-top" style="background:linear-gradient(135deg,#3c9e90,#72c6ad)"><div class="desktop-icon">⌘</div></div><div class="desktop-body"><div class="desktop-name">办公桌面 · 标准</div><div class="subtle">Windows 10 · 通用办公模板</div><div class="chips"><span class="chip">1080p / 45 FPS</span><span class="chip">自动休眠</span></div><div class="desktop-foot"><span class="status" style="color:var(--warn)">● 待分配</span><button class="btn">查看配置</button></div></div></div></div></section>
|
||
<section class="page" id="session"><div class="session"><div class="stream"><div class="window w1"><div class="window-bar"></div><div class="window-line" style="width:60%"></div><div class="window-line" style="width:78%"></div><div class="window-line" style="width:45%"></div></div><div class="window w2"><div class="window-bar"></div><div class="window-line" style="width:70%"></div><div class="window-line" style="width:52%"></div></div><div class="window w3"><div class="window-bar"></div><div class="window-line" style="width:83%"></div></div><div style="position:absolute;left:20px;bottom:18px;color:#c8d3df;font-size:12px">远程画面预览 · 2K / 60 FPS · 18 ms</div></div><div class="card sidepanel"><div class="card-title">远程会话</div><div class="subtle" style="margin-top:6px">设计工作站 · 王工</div><div class="metric"><span>连接状态</span><span class="status">● 已连接</span></div><div class="metric"><span>串流质量</span><b>优秀</b></div><div class="metric"><span>帧率</span><b>60 FPS</b></div><div class="metric"><span>网络延迟</span><b>18 ms</b></div><div style="margin-top:20px"><div class="subtle">GPU 使用率 <b style="float:right;color:var(--text)">64%</b></div><div class="progress"><i style="width:64%"></i></div></div><div style="margin-top:18px"><div class="subtle">显存使用 <b style="float:right;color:var(--text)">42%</b></div><div class="progress"><i style="width:42%"></i></div></div><button class="btn" style="width:100%;margin-top:28px">打开会话设置</button><button class="btn" style="width:100%;margin-top:10px;color:var(--danger)">断开连接</button></div></div></section>
|
||
<section class="page" id="settings"><div class="settings"><div class="card tabs"><button class="active">终端外观</button><button>串流策略</button><button>输入与光标</button><button>USB 设备</button><button>系统维护</button></div><div class="card form"><div class="card-title">终端与策略</div><div class="subtle" style="margin-top:6px">为不同网络与终端设备选择合适的默认体验。</div><div class="form-row"><div><b>默认显示规格</b><div class="subtle">优先使用 2K 分辨率与 60 FPS</div></div><span class="chip">2K · 60 FPS⌄</span></div><div class="form-row"><div><b>自动恢复会话</b><div class="subtle">终端重启后自动恢复上一次连接</div></div><span class="toggle"><i></i></span></div><div class="form-row"><div><b>独立鼠标光标</b><div class="subtle">降低远程画面中的指针延迟</div></div><span class="toggle"><i></i></span></div><div class="form-row"><div><b>USB 设备即插即用</b><div class="subtle">允许白名单设备自动映射到云桌面</div></div><span class="toggle"><i></i></span></div><div class="form-row"><div><b>断线保护</b><div class="subtle">网络短暂中断时保留会话 15 分钟</div></div><span class="toggle"><i></i></span></div><div class="footer-note">最近保存：2026-11-06 10:22 · 策略由管理员统一下发</div></div></div></section>
|
||
</main></div><script>const pages=[...document.querySelectorAll('.page')],title=document.querySelector('#page-title');const names={overview:'云桌面总览',desktops:'桌面资源池',session:'远程会话',settings:'终端与策略'};document.querySelectorAll('[data-page]').forEach(b=>b.addEventListener('click',()=>{const p=b.dataset.page;pages.forEach(x=>x.classList.toggle('active',x.id===p));document.querySelectorAll('.nav button').forEach(x=>x.classList.toggle('active',x.dataset.page===p));title.textContent=names[p]}));document.querySelector('#theme').onclick=()=>{const d=document.body.dataset.theme==='dark';document.body.dataset.theme=d?'light':'dark';document.querySelector('#theme').textContent=d?'☾':'☼'};</script></body></html>
|