增加搜索

README.md

@@ -13,7 +13,9 @@
 
 ## 功能
 
-- 账户数量不限，每项含 `username` / `api_key` / `api_secret`
+- 交易所：`binance` / `okx` / `gate`（OKX 额外保存密码 Passphrase）
+- 账户数量不限，每项含 `exchange` / `username` / `api_key` / `api_secret`
+- 添加后默认不展示列表，需选择交易所点击「确认」查询
 - 黑色专业界面，列表展示 + 每项 3 个复制按钮（**复制始终为明文**）
 - 可选界面打码显示，不影响复制内容
 - 数据持久化至 `data.json`
@@ -76,9 +78,11 @@ PM2 守护：`./pm2-start.sh`（Linux）或 `.\pm2-start.ps1`（Windows）
 ```json
 {
   "id": "uuid",
+  "exchange": "binance",
   "username": "账户名称",
   "api_key": "API Key",
-  "api_secret": "API Secret"
+  "api_secret": "API Secret",
+  "password": "仅 OKX 需要"
 }
 ```
 
@@ -90,6 +94,7 @@ PM2 守护：`./pm2-start.sh`（Linux）或 `.\pm2-start.ps1`（Windows）
 |------|------|------|
 | GET | `/` | 前端页面 |
 | GET | `/api/accounts` | 获取全部账户 |
+| GET | `/api/accounts?exchange=binance` | 按交易所筛选 |
 | POST | `/api/accounts` | 新增账户 |
 | DELETE | `/api/accounts/<id>` | 删除账户 |
 

app.py

@@ -12,6 +12,7 @@ app = Flask(__name__)
 
 BASE_DIR = Path(__file__).resolve().parent
 DATA_FILE = BASE_DIR / "data.json"
+VALID_EXCHANGES = frozenset({"binance", "okx", "gate"})
 
 
 def load_accounts():
@@ -33,16 +34,34 @@ def save_accounts(accounts):
 
 
 def validate_account_payload(payload):
+    exchange = (payload.get("exchange") or "").strip().lower()
     username = (payload.get("username") or "").strip()
     api_key = (payload.get("api_key") or "").strip()
     api_secret = (payload.get("api_secret") or "").strip()
+
+    if exchange not in VALID_EXCHANGES:
+        return None, "请选择交易所：binance / okx / gate"
     if not username:
         return None, "账户名称不能为空"
     if not api_key:
         return None, "API Key 不能为空"
     if not api_secret:
         return None, "API Secret 不能为空"
-    return {"username": username, "api_key": api_key, "api_secret": api_secret}, None
+
+    account = {
+        "exchange": exchange,
+        "username": username,
+        "api_key": api_key,
+        "api_secret": api_secret,
+    }
+
+    if exchange == "okx":
+        password = (payload.get("password") or "").strip()
+        if not password:
+            return None, "OKX 密码（Passphrase）不能为空"
+        account["password"] = password
+
+    return account, None
 
 
 @app.route("/")
@@ -52,7 +71,13 @@ def index():
 
 @app.route("/api/accounts", methods=["GET"])
 def list_accounts():
-    return jsonify(load_accounts())
+    accounts = load_accounts()
+    exchange = (request.args.get("exchange") or "").strip().lower()
+    if exchange:
+        if exchange not in VALID_EXCHANGES:
+            return jsonify({"error": "无效交易所"}), 400
+        accounts = [a for a in accounts if a.get("exchange") == exchange]
+    return jsonify(accounts)
 
 
 @app.route("/api/accounts", methods=["POST"])
@@ -80,5 +105,4 @@ def delete_account(account_id):
 
 
 if __name__ == "__main__":
-    # 0.0.0.0：本机 + 局域网均可访问（如 http://192.168.1.100:5200）
     app.run(host="0.0.0.0", port=5200, debug=False)

index.html

@@ -43,17 +43,8 @@
       border-bottom: 1px solid var(--border);
     }
 
-    header h1 {
+    header h1 { font-size: 1.5rem; font-weight: 600; }
-      font-size: 1.5rem;
+    header p { margin-top: 6px; font-size: 0.875rem; color: var(--text-muted); }
-      font-weight: 600;
-      letter-spacing: -0.02em;
-    }
-
-    header p {
-      margin-top: 6px;
-      font-size: 0.875rem;
-      color: var(--text-muted);
-    }
 
     .panel {
       background: var(--surface);
@@ -72,14 +63,12 @@
       margin-bottom: 16px;
     }
 
-    .form-grid {
+    .form-grid { display: grid; gap: 12px; }
-      display: grid;
-      gap: 12px;
-    }
 
-    @media (min-width: 640px) {
+    @media (min-width: 720px) {
-      .form-grid { grid-template-columns: 1fr 1fr 1fr; }
+      .form-grid { grid-template-columns: repeat(3, 1fr); }
-      .form-actions { grid-column: 1 / -1; }
+      .form-grid .span-3 { grid-column: span 3; }
+      .form-grid .span-2 { grid-column: span 2; }
     }
 
     label {
@@ -89,55 +78,43 @@
       margin-bottom: 4px;
     }
 
-    input {
+    input, select {
       width: 100%;
       padding: 10px 12px;
       background: var(--bg);
       border: 1px solid var(--border);
       border-radius: 6px;
       color: var(--text);
-      font-family: var(--mono);
       font-size: 0.8125rem;
     }
 
-    input:focus {
+    input { font-family: var(--mono); }
+    select { font-family: var(--font); cursor: pointer; }
+
+    input:focus, select:focus {
       outline: none;
       border-color: var(--accent);
     }
 
+    .hidden { display: none !important; }
+
     .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      gap: 6px;
       padding: 8px 14px;
       font-size: 0.8125rem;
       font-weight: 500;
       border: none;
       border-radius: 6px;
       cursor: pointer;
-      transition: background 0.15s, color 0.15s;
       font-family: var(--font);
+      white-space: nowrap;
     }
 
-    .btn-primary {
+    .btn-primary { background: var(--accent); color: #fff; }
-      background: var(--accent);
-      color: #fff;
-    }
-
     .btn-primary:hover { background: var(--accent-hover); }
 
-    .btn-ghost {
-      background: transparent;
-      color: var(--text-muted);
-      border: 1px solid var(--border);
-    }
-
-    .btn-ghost:hover {
-      background: var(--surface-hover);
-      color: var(--text);
-    }
-
     .btn-copy {
       background: var(--bg);
       color: var(--text-muted);
@@ -147,40 +124,36 @@
       flex-shrink: 0;
     }
 
-    .btn-copy:hover {
+    .btn-copy:hover { color: var(--text); border-color: var(--accent); }
-      color: var(--text);
+    .btn-copy.copied { color: var(--success); border-color: var(--success); }
-      border-color: var(--accent);
-    }
-
-    .btn-copy.copied {
-      color: var(--success);
-      border-color: var(--success);
-    }
 
     .btn-danger {
       background: transparent;
       color: var(--danger);
-      border: 1px solid transparent;
       padding: 4px 8px;
       font-size: 0.75rem;
     }
 
-    .btn-danger:hover {
+    .btn-danger:hover { background: rgba(239, 68, 68, 0.1); }
-      background: rgba(239, 68, 68, 0.1);
+
-      border-color: var(--danger);
+    .search-row {
+      display: flex;
+      gap: 10px;
+      align-items: flex-end;
     }
 
+    .search-row .search-select { flex: 1; }
+
     .toolbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 12px;
       margin-bottom: 16px;
     }
 
-    .toolbar .count {
+    .toolbar .count { font-size: 0.8125rem; color: var(--text-muted); }
-      font-size: 0.8125rem;
-      color: var(--text-muted);
-    }
 
     .toggle-mask {
       display: flex;
@@ -189,7 +162,6 @@
       font-size: 0.8125rem;
       color: var(--text-muted);
       cursor: pointer;
-      user-select: none;
     }
 
     .toggle-mask input { width: auto; accent-color: var(--accent); }
@@ -203,8 +175,6 @@
       padding: 16px;
     }
 
-    .account-card:hover { border-color: #3f3f48; }
-
     .account-header {
       display: flex;
       align-items: center;
@@ -214,11 +184,25 @@
       border-bottom: 1px solid var(--border);
     }
 
-    .account-name {
+    .account-title {
-      font-weight: 600;
+      display: flex;
-      font-size: 0.9375rem;
+      align-items: center;
+      gap: 8px;
     }
 
+    .badge {
+      font-size: 0.6875rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      padding: 2px 8px;
+      border-radius: 4px;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      color: var(--accent);
+    }
+
+    .account-name { font-weight: 600; font-size: 0.9375rem; }
+
     .field {
       display: flex;
       align-items: center;
@@ -229,7 +213,7 @@
     .field:last-child { margin-bottom: 0; }
 
     .field-label {
-      width: 88px;
+      width: 100px;
       flex-shrink: 0;
       font-size: 0.75rem;
       color: var(--text-muted);
@@ -241,7 +225,6 @@
       font-family: var(--mono);
       font-size: 0.8125rem;
       word-break: break-all;
-      color: var(--text);
     }
 
     .empty {
@@ -264,62 +247,85 @@
       border-radius: 6px;
       font-size: 0.8125rem;
       opacity: 0;
-      transform: translateY(8px);
+      transition: opacity 0.2s;
-      transition: opacity 0.2s, transform 0.2s;
       pointer-events: none;
       z-index: 100;
     }
 
-    .toast.show {
+    .toast.show { opacity: 1; }
-      opacity: 1;
-      transform: translateY(0);
-    }
 
-    .error-msg {
+    .error-msg { color: var(--danger); font-size: 0.8125rem; margin-top: 8px; }
-      color: var(--danger);
-      font-size: 0.8125rem;
-      margin-top: 8px;
-    }
   </style>
 </head>
 <body>
   <div class="wrap">
     <header>
       <h1>API 密钥管理</h1>
-      <p>本地多账户存储 · 数据保存在 data.json</p>
+      <p>按交易所分类存储 · 查询后显示 · 复制始终为明文</p>
     </header>
 
     <section class="panel">
       <h2>添加账户</h2>
       <form id="addForm" class="form-grid">
+        <div>
+          <label for="exchange">交易所</label>
+          <select id="exchange" name="exchange" required>
+            <option value="">请选择</option>
+            <option value="binance">Binance</option>
+            <option value="okx">OKX</option>
+            <option value="gate">Gate</option>
+          </select>
+        </div>
         <div>
           <label for="username">账户名称 (username)</label>
-          <input type="text" id="username" name="username" placeholder="例如: main_account" autocomplete="off" required>
+          <input type="text" id="username" placeholder="例如: main_account" autocomplete="off" required>
+        </div>
+        <div id="okxPasswordWrap" class="hidden">
+          <label for="password">OKX 密码 (Passphrase)</label>
+          <input type="text" id="password" placeholder="OKX API 密码" autocomplete="off">
         </div>
         <div>
           <label for="api_key">API Key</label>
-          <input type="text" id="api_key" name="api_key" placeholder="输入 API Key" autocomplete="off" required>
+          <input type="text" id="api_key" placeholder="输入 API Key" autocomplete="off" required>
         </div>
         <div>
           <label for="api_secret">API Secret</label>
-          <input type="text" id="api_secret" name="api_secret" placeholder="输入 API Secret" autocomplete="off" required>
+          <input type="text" id="api_secret" placeholder="输入 API Secret" autocomplete="off" required>
         </div>
-        <div class="form-actions">
+        <div class="span-3">
           <button type="submit" class="btn btn-primary">添加账户</button>
           <p id="formError" class="error-msg" hidden></p>
         </div>
       </form>
     </section>
 
+    <section class="panel">
+      <h2>查询账户</h2>
+      <div class="search-row">
+        <div class="search-select">
+          <label for="searchExchange">选择交易所</label>
+          <select id="searchExchange">
+            <option value="">请选择交易所</option>
+            <option value="binance">Binance</option>
+            <option value="okx">OKX</option>
+            <option value="gate">Gate</option>
+          </select>
+        </div>
+        <button type="button" id="searchConfirm" class="btn btn-primary">确认</button>
+      </div>
+    </section>
+
     <section>
       <div class="toolbar">
-        <span class="count" id="accountCount">共 0 个账户</span>
+        <span class="count" id="accountCount">未查询</span>
         <label class="toggle-mask">
-          <input type="checkbox" id="maskToggle">
+          <input type="checkbox" id="maskToggle" checked>
           隐藏敏感字段（复制仍为明文）
         </label>
       </div>
-      <div id="accountList" class="account-list"></div>
+      <div id="accountList" class="account-list">
+        <div class="empty" id="listPlaceholder">请选择交易所并点击「确认」查看账户</div>
+      </div>
     </section>
   </div>
 
@@ -327,8 +333,12 @@
 
   <script>
     const API = "/api/accounts";
+    const EXCHANGE_LABEL = { binance: "Binance", okx: "OKX", gate: "Gate" };
+
     let accounts = [];
-    let masked = false;
+    let displayed = [];
+    let activeExchange = null;
+    let masked = true;
 
     const listEl = document.getElementById("accountList");
     const countEl = document.getElementById("accountCount");
@@ -336,10 +346,15 @@
     const toast = document.getElementById("toast");
     const form = document.getElementById("addForm");
     const formError = document.getElementById("formError");
+    const exchangeSelect = document.getElementById("exchange");
+    const okxPasswordWrap = document.getElementById("okxPasswordWrap");
+    const passwordInput = document.getElementById("password");
+    const searchExchange = document.getElementById("searchExchange");
+    const searchConfirm = document.getElementById("searchConfirm");
 
     function maskValue(value) {
-      if (!masked || !value) return value;
+      if (!masked || !value) return value || "";
-      return "•".repeat(Math.min(value.length, 24));
+      return "•".repeat(Math.min(String(value).length, 24));
     }
 
     function showToast(msg) {
@@ -352,13 +367,6 @@
     async function copyText(text, btn) {
       try {
         await navigator.clipboard.writeText(text);
-        btn.classList.add("copied");
-        btn.textContent = "已复制";
-        showToast("已复制到剪贴板");
-        setTimeout(() => {
-          btn.classList.remove("copied");
-          btn.textContent = "复制";
-        }, 1500);
       } catch {
         const ta = document.createElement("textarea");
         ta.value = text;
@@ -366,25 +374,26 @@
         ta.select();
         document.execCommand("copy");
         document.body.removeChild(ta);
-        showToast("已复制到剪贴板");
       }
+      btn.classList.add("copied");
+      btn.textContent = "已复制";
+      showToast("已复制到剪贴板");
+      setTimeout(() => {
+        btn.classList.remove("copied");
+        btn.textContent = "复制";
+      }, 1500);
     }
 
     function renderField(label, value, copyLabel) {
       const row = document.createElement("div");
       row.className = "field";
-      row.innerHTML = `
+      row.innerHTML = `<span class="field-label">${label}</span><span class="field-value"></span>`;
-        <span class="field-label">${label}</span>
-        <span class="field-value"></span>
-      `;
       row.querySelector(".field-value").textContent = maskValue(value);
-
       const btn = document.createElement("button");
       btn.type = "button";
       btn.className = "btn btn-copy";
       btn.textContent = "复制";
-      btn.title = `复制${copyLabel}`;
+      btn.addEventListener("click", () => copyText(value || "", btn));
-      btn.addEventListener("click", () => copyText(value, btn));
       row.appendChild(btn);
       return row;
     }
@@ -392,41 +401,74 @@
     function renderAccount(acc) {
       const card = document.createElement("article");
       card.className = "account-card";
-      card.dataset.id = acc.id;
 
       const header = document.createElement("div");
       header.className = "account-header";
-      header.innerHTML = `<span class="account-name"></span>`;
+      const title = document.createElement("div");
-      header.querySelector(".account-name").textContent = maskValue(acc.username);
+      title.className = "account-title";
+      const badge = document.createElement("span");
+      badge.className = "badge";
+      badge.textContent = EXCHANGE_LABEL[acc.exchange] || acc.exchange || "—";
+      const name = document.createElement("span");
+      name.className = "account-name";
+      name.textContent = maskValue(acc.username);
+      title.appendChild(badge);
+      title.appendChild(name);
 
       const delBtn = document.createElement("button");
       delBtn.type = "button";
       delBtn.className = "btn btn-danger";
       delBtn.textContent = "删除";
       delBtn.addEventListener("click", () => deleteAccount(acc.id));
+      header.appendChild(title);
       header.appendChild(delBtn);
       card.appendChild(header);
 
       card.appendChild(renderField("账户名称", acc.username, "账户名称"));
       card.appendChild(renderField("API Key", acc.api_key, "API Key"));
       card.appendChild(renderField("API Secret", acc.api_secret, "API Secret"));
-
+      if (acc.exchange === "okx" && acc.password) {
+        card.appendChild(renderField("OKX 密码", acc.password, "OKX 密码"));
+      }
       return card;
     }
 
+    function showPlaceholder(msg) {
+      listEl.innerHTML = `<div class="empty">${msg}</div>`;
+      countEl.textContent = "未查询";
+    }
+
     function renderList() {
-      countEl.textContent = `共 ${accounts.length} 个账户`;
       listEl.innerHTML = "";
-      if (accounts.length === 0) {
+      if (!activeExchange) {
-        listEl.innerHTML = '<div class="empty">暂无账户，请在上方添加</div>';
+        showPlaceholder("请选择交易所并点击「确认」查看账户");
         return;
       }
-      accounts.forEach(acc => listEl.appendChild(renderAccount(acc)));
+
+      const label = EXCHANGE_LABEL[activeExchange] || activeExchange;
+      countEl.textContent = `${label} · 共 ${displayed.length} 个账户`;
+
+      if (displayed.length === 0) {
+        listEl.innerHTML = `<div class="empty">${label} 暂无账户</div>`;
+        return;
+      }
+      displayed.forEach(acc => listEl.appendChild(renderAccount(acc)));
     }
 
     async function loadAccounts() {
       const res = await fetch(API);
       accounts = await res.json();
+    }
+
+    async function queryByExchange() {
+      const ex = searchExchange.value;
+      if (!ex) {
+        showToast("请先选择交易所");
+        return;
+      }
+      activeExchange = ex;
+      const res = await fetch(`${API}?exchange=${encodeURIComponent(ex)}`);
+      displayed = await res.json();
       renderList();
     }
 
@@ -434,17 +476,34 @@
       if (!confirm("确定删除该账户？")) return;
       await fetch(`${API}/${id}`, { method: "DELETE" });
       accounts = accounts.filter(a => a.id !== id);
+      displayed = displayed.filter(a => a.id !== id);
       renderList();
+      showToast("已删除");
     }
 
+    function toggleOkxField() {
+      const isOkx = exchangeSelect.value === "okx";
+      okxPasswordWrap.classList.toggle("hidden", !isOkx);
+      passwordInput.required = isOkx;
+      if (!isOkx) passwordInput.value = "";
+    }
+
+    exchangeSelect.addEventListener("change", toggleOkxField);
+
     form.addEventListener("submit", async (e) => {
       e.preventDefault();
       formError.hidden = true;
+
       const payload = {
+        exchange: exchangeSelect.value,
         username: document.getElementById("username").value,
         api_key: document.getElementById("api_key").value,
         api_secret: document.getElementById("api_secret").value,
       };
+      if (payload.exchange === "okx") {
+        payload.password = passwordInput.value;
+      }
+
       const res = await fetch(API, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -456,17 +515,26 @@
         formError.hidden = false;
         return;
       }
+
       accounts.push(data);
       form.reset();
-      renderList();
+      toggleOkxField();
+      masked = true;
+      maskToggle.checked = true;
+      activeExchange = null;
+      displayed = [];
+      showPlaceholder("添加成功，请选择交易所并点击「确认」查看");
       showToast("账户已添加");
     });
 
+    searchConfirm.addEventListener("click", queryByExchange);
+
     maskToggle.addEventListener("change", () => {
       masked = maskToggle.checked;
-      renderList();
+      if (activeExchange) renderList();
     });
 
+    toggleOkxField();
     loadAccounts();
   </script>
 </body>