From 5e7f1050a085671320ab864f04a89386989f378e Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Sun, 4 Oct 2026 08:02:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E8=A1=A8=E6=A0=BC=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=20Token/=E8=B7=AF=E5=BE=84=EF=BC=8CToken=20=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E6=89=93=E7=A0=81=E7=BC=96=E8=BE=91=E6=97=B6=E6=98=8E?=
 =?UTF-8?q?=E6=96=87=EF=BC=8C=E9=A1=B5=E5=AE=BD=E4=B8=8A=E9=99=90=201800?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=9F=E4=B8=80=E5=8F=B3=E4=B8=8A=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 static/hub.css           | 46 ++++++++++++++++++++++++++++------------
 static/instances_page.js | 28 +++++++++++++++++++++---
 templates/base.html      |  2 +-
 templates/instances.html | 22 ++++++++++++-------
 4 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/static/hub.css b/static/hub.css
index 57156b0..3891137 100644
--- a/static/hub.css
+++ b/static/hub.css
@@ -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;
diff --git a/static/instances_page.js b/static/instances_page.js
index f9adfa3..108b2b7 100644
--- a/static/instances_page.js
+++ b/static/instances_page.js
@@ -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]");
diff --git a/templates/base.html b/templates/base.html
index 71e8af0..c20ec57 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -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') %}
diff --git a/templates/instances.html b/templates/instances.html
index d9fd2d9..bb0a406 100644
--- a/templates/instances.html
+++ b/templates/instances.html
@@ -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 %}