logan
39f4d5addc
- icon.svg 取自 opsx-icon-options/api/B-brackets.svg，全套光栅重生成： icon.icns（iconutil）、icon.ico（PNG-in-ICO 6 尺寸）、16-1024 PNG、Windows Square*/StoreLogo - 替换 Tauri 脚手架默认五角星图标；GUI 重启实测 Dock 图标已生效 - 服务全量重启：server 8787（官网/文档 200）+ web 5173 + 桌面 GUI
111 lines
5.8 KiB
HTML
111 lines
5.8 KiB
HTML
<!doctype html>
|
||
<html lang="zh">
|
||
<meta charset="utf-8"/>
|
||
<title>OpsxAPI 左轨账号区线框</title>
|
||
<style>
|
||
:root{--bg:#0f1419;--panel:#171c22;--rail:#12171d;--line:#2a3340;--text:#e8eef4;--muted:#8b9aab;--accent:#3d8bfd;--ok:#22c55e}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:13px/1.4 ui-sans-serif,system-ui,sans-serif;background:#0a0e12;color:var(--text);padding:28px}
|
||
h1{font-size:16px;margin-bottom:6px}
|
||
.sub{color:var(--muted);margin-bottom:20px;font-size:12px}
|
||
.row{display:flex;gap:28px;flex-wrap:wrap}
|
||
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 16px 20px;width:280px}
|
||
.card h2{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--muted)}
|
||
.shell{display:flex;height:420px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
|
||
.rail{width:56px;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:10px 0}
|
||
.rail .ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:11px;margin:4px 0}
|
||
.rail .ico.on{background:#1e3a5f;color:#93c5fd}
|
||
.rail .spacer{flex:1}
|
||
.rail .acct{width:40px;height:40px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;position:relative}
|
||
.rail .acct.login{border:1px dashed #3d8bfd;color:#93c5fd;font-size:10px;border-radius:12px;width:44px;height:44px}
|
||
.rail .acct.avatar{background:linear-gradient(135deg,#3d8bfd,#6366f1);color:#fff;font-weight:700;font-size:14px}
|
||
.rail .badge{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--ok);border:2px solid var(--rail)}
|
||
.main{flex:1;padding:12px;color:var(--muted);font-size:12px}
|
||
.fake-top{height:28px;border-bottom:1px solid var(--line);margin:-12px -12px 12px;padding:6px 12px;display:flex;justify-content:flex-end;align-items:center}
|
||
.pill{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
|
||
.menu{position:absolute;left:52px;bottom:8px;width:168px;background:#1a222c;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 8px 24px #0008;z-index:2}
|
||
.menu .item{padding:8px 10px;border-radius:7px;font-size:12px;display:flex;align-items:center;gap:8px}
|
||
.menu .item.on{background:#243041}
|
||
.menu .item .dot{width:8px;height:8px;border-radius:50%}
|
||
.menu .sep{height:1px;background:var(--line);margin:4px 2px}
|
||
.menu .muted{color:var(--muted);font-size:11px;padding:4px 10px}
|
||
.note{margin-top:12px;font-size:11px;color:var(--muted);line-height:1.5}
|
||
.note b{color:var(--text);font-weight:600}
|
||
.tag{display:inline-block;background:#1e3a5f;color:#93c5fd;font-size:10px;padding:1px 6px;border-radius:4px;margin-left:4px}
|
||
</style>
|
||
<body>
|
||
<h1>OpsxAPI · 左轨账号 / 工作区线框 v1</h1>
|
||
<p class="sub">去掉「本」；本地/团队只在底部；已登录=头像菜单</p>
|
||
<div class="row">
|
||
<div class="card">
|
||
<h2>A · 未登录</h2>
|
||
<div class="shell">
|
||
<div class="rail">
|
||
<div class="ico on">接口</div>
|
||
<div class="ico">测试</div>
|
||
<div class="ico">Mock</div>
|
||
<div class="spacer"></div>
|
||
<div class="ico">文档</div>
|
||
<div class="ico">设置</div>
|
||
<div class="acct login">登录</div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="fake-top"><span class="pill">变量入口并入账号区 →</span></div>
|
||
左轨顶无「本」字标<br/>底栏仅「登录」入口
|
||
</div>
|
||
</div>
|
||
<p class="note"><b>点击</b> → 登录弹层。登录后变头像。</p>
|
||
</div>
|
||
<div class="card">
|
||
<h2>B · 已登录 · 菜单开<span class="tag">主方案</span></h2>
|
||
<div class="shell" style="position:relative">
|
||
<div class="rail">
|
||
<div class="ico on">接口</div>
|
||
<div class="ico">测试</div>
|
||
<div class="ico">Mock</div>
|
||
<div class="spacer"></div>
|
||
<div class="ico">文档</div>
|
||
<div class="ico">设置</div>
|
||
<div class="acct avatar" style="position:relative">L<span class="badge" title="本地"></span>
|
||
<div class="menu">
|
||
<div class="muted">工作区</div>
|
||
<div class="item on"><span class="dot" style="background:#22c55e"></span>本地工作区</div>
|
||
<div class="item"><span class="dot" style="background:#3d8bfd"></span>团队工作区</div>
|
||
<div class="sep"></div>
|
||
<div class="item">环境变量（1）</div>
|
||
<div class="item">账号设置</div>
|
||
<div class="sep"></div>
|
||
<div class="item" style="color:#f87171">退出</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="fake-top"><span class="pill" style="opacity:.45">顶栏变量可弱化/去掉</span></div>
|
||
头像角标：绿=本地 / 蓝=团队<br/>菜单内切工作区 + 变量入口
|
||
</div>
|
||
</div>
|
||
<p class="note"><b>角标</b>绿本地、蓝团队。变量进菜单。</p>
|
||
</div>
|
||
<div class="card">
|
||
<h2>C · 团队态（角标）</h2>
|
||
<div class="shell">
|
||
<div class="rail">
|
||
<div class="ico on">接口</div>
|
||
<div class="ico">测试</div>
|
||
<div class="ico">Mock</div>
|
||
<div class="spacer"></div>
|
||
<div class="ico">文档</div>
|
||
<div class="ico">设置</div>
|
||
<div class="acct avatar" style="background:linear-gradient(135deg,#6366f1,#3d8bfd)">L<span class="badge" style="background:#3d8bfd"></span></div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="fake-top"><span class="pill">团队 · 已同步</span></div>
|
||
切到团队后角标变蓝；配置鉴权同步（加密）
|
||
</div>
|
||
</div>
|
||
<p class="note">不登录也能用本地；登录后才可切团队。</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|