重做实例页 UI:列表卡片为主,添加收起,Token 默认隐藏,风格对齐系统设置。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-10-04 07:35:57 +08:00
parent bce446178d
commit 2e460efb73
4 changed files with 394 additions and 49 deletions
+1 -1
View File
@@ -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=11">
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=12">
</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 == '/' %}page-dashboard{% endif %}">
{% if session.get('logged_in') %}
+143 -47
View File
@@ -1,55 +1,151 @@
{% extends "base.html" %}
{% block title %}实例 · 期权中控{% endblock %}
{% block body %}
<section class="page-head"><h1>客户端实例</h1></section>
<section class="panel">
<h2>添加实例</h2>
<form method="post" class="form-grid">
<input type="hidden" name="action" value="create">
<label>名称 <input name="name" required placeholder="ETH-主策略"></label>
<label>公网 URL <input name="base_url" required placeholder="https://okx-eth.example.com"></label>
<label>Bridge Token <input name="bridge_token" required placeholder="与客户端 HUB_BRIDGE_TOKEN 一致"></label>
<label>Embed 路径 <input name="embed_path" value="/embed"></label>
<label>标签 <input name="tags" placeholder="eth,sim"></label>
<label class="check"><input type="checkbox" name="enabled" value="1" checked> 启用拉取</label>
<button type="submit">添加</button>
</form>
{% set open_add = (not instances) or ((request.args.get('add') or '') == '1') %}
<section class="page-head settings-head inst-page-head">
<div>
<p class="settings-eyebrow">Instances</p>
<h1>客户端实例</h1>
<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>
</div>
</section>
<section class="panel">
<h2>已登记 ({{ instances|length }})</h2>
{% if not instances %}
<p class="muted">暂无实例.先在 crypto_okx 配置 HUB_BRIDGE_TOKEN 并公网可访问.</p>
{% endif %}
{% for inst in instances %}
<details class="inst-row">
<summary>
<strong>{{ inst.name }}</strong>
<span class="muted">{{ inst.base_url }}</span>
{% if inst.enabled %}启用{% else %}停用{% endif %}
</summary>
<form method="post" class="form-grid">
<input type="hidden" name="action" value="update">
<input type="hidden" name="id" value="{{ inst.id }}">
<label>名称 <input name="name" value="{{ inst.name }}" required></label>
<label>公网 URL <input name="base_url" value="{{ inst.base_url }}" required></label>
<label>Bridge Token <input name="bridge_token" value="{{ inst.bridge_token }}" required></label>
<label>Embed 路径 <input name="embed_path" value="{{ inst.embed_path }}"></label>
<label>标签 <input name="tags" value="{{ inst.tags or '' }}"></label>
<label class="check"><input type="checkbox" name="enabled" value="1" {% if inst.enabled %}checked{% endif %}> 启用</label>
<button type="submit">保存</button>
<input type="checkbox" id="inst-add-toggle" class="inst-add-check"{% if open_add %} checked{% endif %}>
<section class="settings-shell panel inst-shell">
<div class="inst-add-panel">
<div class="settings-card-head">
<span class="settings-badge">New</span>
<h2>添加实例</h2>
<p class="muted">Token 需与客户端 <code>HUB_BRIDGE_TOKEN</code> 一致;公网 URL 需可被中控访问。</p>
</div>
<form method="post" class="settings-form inst-form" autocomplete="off">
<input type="hidden" name="action" value="create">
<div class="settings-row-2">
<label class="settings-field">名称
<input name="name" required placeholder="ETH-主策略" autocomplete="off">
</label>
<label class="settings-field">标签
<input name="tags" placeholder="eth,sim" autocomplete="off">
</label>
</div>
<label class="settings-field">公网 URL
<input name="base_url" required placeholder="https://okx-eth.example.com" autocomplete="off">
</label>
<div class="settings-row-2">
<label class="settings-field">Bridge Token
<span class="inst-token-wrap">
<input type="password" name="bridge_token" required placeholder="与客户端 HUB_BRIDGE_TOKEN 一致" autocomplete="new-password" class="inst-token-input">
<button type="button" class="btn btn-sm btn-secondary inst-token-toggle" aria-label="显示 Token">显示</button>
</span>
</label>
<label class="settings-field">Embed 路径
<input name="embed_path" value="/embed" autocomplete="off">
</label>
</div>
<label class="settings-switch">
<input type="checkbox" name="enabled" value="1" checked>
<span class="settings-switch-ui" aria-hidden="true"></span>
<span class="settings-switch-text">
<strong>启用拉取</strong>
<small>关闭后总览不再巡检此机</small>
</span>
</label>
<div class="settings-actions">
<button type="submit" class="settings-primary">添加</button>
<label for="inst-add-toggle" class="btn btn-secondary">取消</label>
</div>
</form>
<form method="post" class="inline" onsubmit="return confirm('确认删除?')">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="id" value="{{ inst.id }}">
<button type="submit" class="btn-danger">删除</button>
</form>
<p>
<a class="btn" href="/desk?id={{ inst.id }}">内嵌打开</a>
<a class="btn btn-secondary" href="/settings?tab=update">系统更新</a>
</p>
</details>
{% endfor %}
</div>
<div class="settings-card-head inst-list-head">
<span class="settings-badge">Registry</span>
<h2>已登记 · {{ instances|length }}</h2>
<p class="muted">点击卡片展开编辑;Token 默认隐藏。</p>
</div>
<div class="inst-card-list">
{% if not instances %}
<p class="muted inst-empty">暂无实例。先在客户端配置 <code>HUB_BRIDGE_TOKEN</code> 并保证公网可访问,再点右上角「添加实例」。</p>
{% endif %}
{% for inst in instances %}
<details class="inst-card" data-id="{{ inst.id }}" data-name="{{ inst.name }}">
<summary class="inst-card-summary">
<div class="inst-card-main">
<div class="inst-card-title-row">
<strong class="inst-card-name">{{ inst.name }}</strong>
{% if inst.enabled %}
<span class="inst-pill inst-pill--on">启用</span>
{% else %}
<span class="inst-pill inst-pill--off">停用</span>
{% endif %}
{% if inst.tags %}
<span class="inst-pill inst-pill--tag">{{ inst.tags }}</span>
{% endif %}
</div>
<div class="inst-card-url muted">{{ inst.base_url }}</div>
</div>
<div class="inst-card-aside">
<span class="update-version muted" data-inst-version title="点击卡片展开后可刷新">—</span>
<span class="inst-card-chevron" aria-hidden="true"></span>
</div>
</summary>
<div class="inst-card-body">
<form method="post" class="settings-form inst-form" autocomplete="off">
<input type="hidden" name="action" value="update">
<input type="hidden" name="id" value="{{ inst.id }}">
<div class="settings-row-2">
<label class="settings-field">名称
<input name="name" value="{{ inst.name }}" required autocomplete="off">
</label>
<label class="settings-field">标签
<input name="tags" value="{{ inst.tags or '' }}" autocomplete="off">
</label>
</div>
<label class="settings-field">公网 URL
<input name="base_url" value="{{ inst.base_url }}" required autocomplete="off">
</label>
<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>
</span>
</label>
<label class="settings-field">Embed 路径
<input name="embed_path" value="{{ inst.embed_path }}" autocomplete="off">
</label>
</div>
<label class="settings-switch">
<input type="checkbox" name="enabled" value="1" {% if inst.enabled %}checked{% endif %}>
<span class="settings-switch-ui" aria-hidden="true"></span>
<span class="settings-switch-text">
<strong>启用拉取</strong>
<small>关闭后总览不再巡检此机</small>
</span>
</label>
<div class="inst-card-actions">
<button type="submit" class="settings-primary">保存</button>
<a class="btn" href="/desk?id={{ inst.id }}">内嵌打开</a>
<a class="btn btn-secondary" href="/settings?tab=update">系统更新</a>
<button type="button" class="btn btn-secondary btn-sm" data-inst-refresh-ver>刷新版本</button>
</div>
</form>
<form method="post" class="inst-delete-form" onsubmit="return confirm('确认删除「{{ inst.name }}」?')">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="id" value="{{ inst.id }}">
<button type="submit" class="btn-danger btn-sm">删除实例</button>
</form>
</div>
</details>
{% endfor %}
</div>
</section>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='instances_page.js') }}?v=1"></script>
{% endblock %}