工作台左侧客户端支持折叠，带鱼屏两侧留边。
折叠状态本地记住；总览/工作台内容限宽居中。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+91
-5
@@ -28,11 +28,13 @@ a { color: #9ec1ff; text-decoration: none; }
|
||||
.topbar nav a.active { color: #fff; }
|
||||
.brand { font-weight: 700; }
|
||||
.main { padding: 16px; max-width: 1200px; margin: 0 auto; }
|
||||
/* 总览/工作台:带鱼屏两侧留边,内容区限宽居中 */
|
||||
body.page-desk .main,
|
||||
body.page-dashboard .main {
|
||||
max-width: none;
|
||||
max-width: 1680px;
|
||||
width: 100%;
|
||||
padding: 12px 16px 20px;
|
||||
margin: 0 auto;
|
||||
padding: 12px clamp(16px, 3vw, 48px) 20px;
|
||||
}
|
||||
.page-head { display: flex; align-items: center; gap: 12px; }
|
||||
.muted { color: var(--muted); font-size: 0.9rem; }
|
||||
@@ -139,16 +141,88 @@ button, .btn {
|
||||
.card .status-off { color: var(--bad); }
|
||||
.card table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
|
||||
.card td, .card th { border-bottom: 1px solid var(--line); padding: 4px 2px; text-align: left; }
|
||||
.desk { display: grid; grid-template-columns: 200px 1fr; gap: 12px; min-height: calc(100vh - 70px); max-width: none; }
|
||||
.desk {
|
||||
display: grid;
|
||||
grid-template-columns: 220px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
min-height: calc(100vh - 70px);
|
||||
max-width: none;
|
||||
transition: grid-template-columns 0.18s ease;
|
||||
}
|
||||
.desk.is-side-collapsed {
|
||||
grid-template-columns: 48px minmax(0, 1fr);
|
||||
}
|
||||
.desk-side {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.desk-side-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.desk-side-title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.desk-side-toggle {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: #12161f;
|
||||
color: var(--text);
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.desk-side-toggle:hover { border-color: var(--accent); }
|
||||
.desk-side-toggle--bar {
|
||||
display: none;
|
||||
}
|
||||
.desk.is-side-collapsed .desk-side-title,
|
||||
.desk.is-side-collapsed .desk-list-name,
|
||||
.desk.is-side-collapsed .desk-list-empty {
|
||||
display: none;
|
||||
}
|
||||
.desk.is-side-collapsed .desk-side {
|
||||
padding: 8px 6px;
|
||||
}
|
||||
.desk.is-side-collapsed .desk-side-head {
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.desk.is-side-collapsed .desk-side-toggle {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.desk.is-side-collapsed .desk-list {
|
||||
display: none;
|
||||
}
|
||||
.desk.is-side-collapsed .desk-side-toggle--bar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.desk-list { list-style: none; padding: 0; margin: 0; }
|
||||
.desk-list li { margin: 6px 0; }
|
||||
.desk-list li.active a { color: #fff; font-weight: 600; }
|
||||
.desk-list li a {
|
||||
display: block;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.desk-list li a:hover { background: rgba(108, 92, 231, 0.12); color: #fff; }
|
||||
.desk-list li.active a { color: #fff; font-weight: 600; background: rgba(108, 92, 231, 0.22); }
|
||||
.desk-main { display: flex; flex-direction: column; min-height: calc(100vh - 70px); min-width: 0; }
|
||||
.desk-toolbar {
|
||||
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
|
||||
@@ -170,5 +244,17 @@ input.readonly {
|
||||
cursor: default;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.desk { grid-template-columns: 1fr; }
|
||||
.desk,
|
||||
.desk.is-side-collapsed {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.desk-side-toggle--bar { display: none !important; }
|
||||
}
|
||||
@media (min-width: 2000px) {
|
||||
body.page-desk .main,
|
||||
body.page-dashboard .main {
|
||||
max-width: 1760px;
|
||||
padding-left: clamp(32px, 6vw, 96px);
|
||||
padding-right: clamp(32px, 6vw, 96px);
|
||||
}
|
||||
}
|
||||
|
||||
+38
-6
@@ -1,22 +1,28 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}工作台 · 期权中控{% endblock %}
|
||||
{% block body %}
|
||||
<section class="desk">
|
||||
<aside class="desk-side">
|
||||
<h2>客户端</h2>
|
||||
<section class="desk" id="desk-root">
|
||||
<aside class="desk-side" id="desk-side">
|
||||
<div class="desk-side-head">
|
||||
<h2 class="desk-side-title">客户端</h2>
|
||||
<button type="button" class="desk-side-toggle" id="desk-side-toggle" title="折叠/展开" aria-label="折叠客户端列表">‹</button>
|
||||
</div>
|
||||
<ul class="desk-list">
|
||||
{% for inst in instances %}
|
||||
<li class="{% if current and current.id == inst.id %}active{% endif %}">
|
||||
<a href="/desk?id={{ inst.id }}">{{ inst.name }}</a>
|
||||
<li class="{% if current and current.id == inst.id %}active{% endif %}" title="{{ inst.name }}">
|
||||
<a href="/desk?id={{ inst.id }}">
|
||||
<span class="desk-list-name">{{ inst.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="muted">无启用实例</li>
|
||||
<li class="muted desk-list-empty">无启用实例</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</aside>
|
||||
<div class="desk-main">
|
||||
{% if current and open_url %}
|
||||
<div class="desk-toolbar">
|
||||
<button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
|
||||
<strong>{{ current.name }}</strong>
|
||||
<span class="muted">{{ current.base_url }}</span>
|
||||
<a class="btn" href="{{ open_url }}" target="_blank" rel="noopener">新标签打开</a>
|
||||
@@ -24,8 +30,34 @@
|
||||
</div>
|
||||
<iframe class="desk-frame" src="{{ open_url }}" title="{{ current.name }}"></iframe>
|
||||
{% else %}
|
||||
<div class="desk-toolbar">
|
||||
<button type="button" class="desk-side-toggle desk-side-toggle--bar" id="desk-side-toggle-bar" title="展开客户端列表" aria-label="展开客户端列表">›</button>
|
||||
</div>
|
||||
<div class="empty">请从左侧选择客户端,或到「实例」添加公网 crypto_okx.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script>
|
||||
(function () {
|
||||
var KEY = "hub_desk_side_collapsed";
|
||||
var root = document.getElementById("desk-root");
|
||||
if (!root) return;
|
||||
function apply(collapsed) {
|
||||
root.classList.toggle("is-side-collapsed", !!collapsed);
|
||||
try { localStorage.setItem(KEY, collapsed ? "1" : "0"); } catch (e) {}
|
||||
}
|
||||
function toggle() {
|
||||
apply(!root.classList.contains("is-side-collapsed"));
|
||||
}
|
||||
var btn = document.getElementById("desk-side-toggle");
|
||||
var bar = document.getElementById("desk-side-toggle-bar");
|
||||
if (btn) btn.addEventListener("click", toggle);
|
||||
if (bar) bar.addEventListener("click", toggle);
|
||||
var saved = false;
|
||||
try { saved = localStorage.getItem(KEY) === "1"; } catch (e) {}
|
||||
apply(saved);
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user