实例表格展示 Token/路径，Token 默认打码编辑时明文，页宽上限 1800，统一右上按钮尺寸。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+32
-14
@@ -83,20 +83,13 @@ body.page-desk .main {
|
||||
margin: 0;
|
||||
padding: 10px 12px 14px;
|
||||
}
|
||||
/* 实例页:普通屏用满;带鱼屏锁 1800 */
|
||||
/* 实例页:最大 1800;小于 1800 时按可用宽度铺满 */
|
||||
body.page-instances .main {
|
||||
max-width: none;
|
||||
max-width: 1800px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 12px clamp(12px, 2vw, 28px) 20px;
|
||||
}
|
||||
@media (min-aspect-ratio: 21/9) {
|
||||
body.page-instances .main {
|
||||
max-width: 1800px;
|
||||
padding-left: clamp(16px, 3vw, 48px);
|
||||
padding-right: clamp(16px, 3vw, 48px);
|
||||
}
|
||||
}
|
||||
body.page-login {
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -373,11 +366,23 @@ button, .btn {
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.inst-add-trigger {
|
||||
.inst-page-head-actions .inst-head-btn {
|
||||
box-sizing: border-box;
|
||||
min-width: 7.5rem;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
border-radius: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.inst-add-trigger {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
.inst-add-check {
|
||||
position: absolute;
|
||||
@@ -430,16 +435,29 @@ button, .btn {
|
||||
.inst-table tr.inst-row:hover td {
|
||||
background: rgba(34, 211, 238, 0.04);
|
||||
}
|
||||
.inst-td-name { min-width: 7rem; }
|
||||
.inst-td-name { min-width: 6rem; }
|
||||
.inst-td-url {
|
||||
max-width: 28rem;
|
||||
max-width: 18rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.inst-td-token {
|
||||
white-space: nowrap;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.inst-token-mask {
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.08em;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.inst-td-path code {
|
||||
font-size: 0.8rem;
|
||||
color: #b6c7da;
|
||||
}
|
||||
.inst-td-tags {
|
||||
max-width: 10rem;
|
||||
max-width: 8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -32,6 +32,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
function setTokenVisible(input, toggleBtn, visible) {
|
||||
if (!input) return;
|
||||
input.type = visible ? "text" : "password";
|
||||
if (toggleBtn) toggleBtn.textContent = visible ? "隐藏" : "显示";
|
||||
}
|
||||
|
||||
function bindTokenToggles(root) {
|
||||
(root || document).querySelectorAll(".inst-token-toggle").forEach(function (btn) {
|
||||
if (btn.dataset.bound) return;
|
||||
@@ -40,15 +46,31 @@
|
||||
const wrap = btn.closest(".inst-token-wrap");
|
||||
const input = wrap && wrap.querySelector(".inst-token-input");
|
||||
if (!input) return;
|
||||
const show = input.type === "password";
|
||||
input.type = show ? "text" : "password";
|
||||
btn.textContent = show ? "隐藏" : "显示";
|
||||
setTokenVisible(input, btn, input.type === "password");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function bindEditReveal() {
|
||||
document.querySelectorAll(".inst-edit-check[data-reveal-token]").forEach(function (cb) {
|
||||
if (cb.dataset.bound) return;
|
||||
cb.dataset.bound = "1";
|
||||
const sync = function () {
|
||||
const panel = cb.nextElementSibling;
|
||||
if (!panel) return;
|
||||
const input = panel.querySelector("[data-edit-token]");
|
||||
const toggle = panel.querySelector(".inst-token-toggle");
|
||||
// 展开编辑时明文显示 Token；收起后恢复打码
|
||||
setTokenVisible(input, toggle, !!cb.checked);
|
||||
};
|
||||
cb.addEventListener("change", sync);
|
||||
sync();
|
||||
});
|
||||
}
|
||||
|
||||
function boot() {
|
||||
bindTokenToggles(document);
|
||||
bindEditReveal();
|
||||
document.querySelectorAll("tr.inst-row[data-id]").forEach(function (row) {
|
||||
refreshVersion(row);
|
||||
const btn = row.querySelector("[data-inst-refresh-ver]");
|
||||
|
||||
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}期权中控{% endblock %}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=13">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=14">
|
||||
</head>
|
||||
<body class="{% if request.path.startswith('/login') %}page-login{% elif request.path.startswith('/desk') %}page-desk{% elif request.path.startswith('/stats') %}page-stats{% elif request.path.startswith('/instances') %}page-instances{% elif request.path == '/' %}page-dashboard{% endif %}">
|
||||
{% if session.get('logged_in') %}
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
<p class="muted settings-lead">登记各交易机地址与 Bridge Token；远程更新请到系统设置。</p>
|
||||
</div>
|
||||
<div class="inst-page-head-actions">
|
||||
<a class="btn btn-secondary" href="/settings?tab=update">系统更新</a>
|
||||
<label for="inst-add-toggle" class="settings-primary inst-add-trigger">添加实例</label>
|
||||
<a class="btn btn-secondary inst-head-btn" href="/settings?tab=update">系统更新</a>
|
||||
<label for="inst-add-toggle" class="settings-primary inst-add-trigger inst-head-btn">添加实例</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
<div class="settings-card-head inst-list-head">
|
||||
<span class="settings-badge">Registry</span>
|
||||
<h2>已登记 · {{ instances|length }}</h2>
|
||||
<p class="muted">表格查看；点「编辑」展开修改。Token 默认隐藏。</p>
|
||||
<p class="muted">表格查看；Token 默认打码，点「编辑」展开后显示明文。</p>
|
||||
</div>
|
||||
|
||||
<div class="inst-table-wrap">
|
||||
@@ -77,6 +77,8 @@
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<th>URL</th>
|
||||
<th>Token</th>
|
||||
<th>路径</th>
|
||||
<th>状态</th>
|
||||
<th>版本</th>
|
||||
<th>标签</th>
|
||||
@@ -88,6 +90,10 @@
|
||||
<tr class="inst-row" data-id="{{ inst.id }}" data-name="{{ inst.name }}">
|
||||
<td class="inst-td-name"><strong>{{ inst.name }}</strong></td>
|
||||
<td class="inst-td-url muted" title="{{ inst.base_url }}">{{ inst.base_url }}</td>
|
||||
<td class="inst-td-token">
|
||||
<code class="inst-token-mask" title="已打码">••••••••••••</code>
|
||||
</td>
|
||||
<td class="inst-td-path muted"><code>{{ inst.embed_path or '/embed' }}</code></td>
|
||||
<td>
|
||||
{% if inst.enabled %}
|
||||
<span class="inst-pill inst-pill--on">启用</span>
|
||||
@@ -109,8 +115,8 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="inst-edit-row">
|
||||
<td colspan="6">
|
||||
<input type="checkbox" id="inst-edit-{{ inst.id }}" class="inst-edit-check">
|
||||
<td colspan="8">
|
||||
<input type="checkbox" id="inst-edit-{{ inst.id }}" class="inst-edit-check" data-reveal-token>
|
||||
<div class="inst-edit-panel">
|
||||
<form method="post" class="settings-form inst-form" autocomplete="off">
|
||||
<input type="hidden" name="action" value="update">
|
||||
@@ -129,8 +135,8 @@
|
||||
<div class="settings-row-2">
|
||||
<label class="settings-field">Bridge Token
|
||||
<span class="inst-token-wrap">
|
||||
<input type="password" name="bridge_token" value="{{ inst.bridge_token }}" required autocomplete="new-password" class="inst-token-input">
|
||||
<button type="button" class="btn btn-sm btn-secondary inst-token-toggle" aria-label="显示 Token">显示</button>
|
||||
<input type="password" name="bridge_token" value="{{ inst.bridge_token }}" required autocomplete="new-password" class="inst-token-input" data-edit-token>
|
||||
<button type="button" class="btn btn-sm btn-secondary inst-token-toggle" aria-label="显示 Token">隐藏</button>
|
||||
</span>
|
||||
</label>
|
||||
<label class="settings-field">Embed 路径
|
||||
@@ -162,5 +168,5 @@
|
||||
</section>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script src="{{ url_for('static', filename='instances_page.js') }}?v=2"></script>
|
||||
<script src="{{ url_for('static', filename='instances_page.js') }}?v=3"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user