@snack-kit/lib 0.1.0 → 0.2.0

package/dist/umd/index.global.js

@@ -11625,7 +11625,7 @@ var SnackKit = (function (exports, crypto2, url, http, https, http2, util2, zlib
   });
 
   // package.json
-  var version = "0.1.0";
+  var version = "0.2.0";
 
   // node_modules/axios/lib/helpers/bind.js
   function bind(fn, thisArg) {
@@ -15574,95 +15574,530 @@ var SnackKit = (function (exports, crypto2, url, http, https, http2, util2, zlib
   var KEY_GATEWAY = `${STORAGE_PREFIX}gateway`;
   var KEY_TYPE = `${STORAGE_PREFIX}type`;
   var KEY_SERVER = `${STORAGE_PREFIX}server`;
+  function isChinese() {
+    return /^zh/i.test(navigator.language ?? "");
+  }
+  var T = {
+    gateway: () => isChinese() ? "\u7F51\u5173" : "Gateway",
+    tag: () => isChinese() ? "\u6807\u7B7E" : "Tag",
+    server: () => isChinese() ? "\u670D\u52A1" : "Server",
+    ctx: () => isChinese() ? "\u4E0A\u4E0B\u6587" : "Ctx",
+    ctxLabel: () => isChinese() ? "\u4E0A\u4E0B\u6587  \u2014  \u70B9\u51FB\u884C\u590D\u5236 key" : "Ctx  \u2014  click row to copy key",
+    search: () => isChinese() ? "\u641C\u7D22..." : "Search...",
+    noMatch: () => isChinese() ? "\u65E0\u5339\u914D\u9879" : "No results",
+    allTags: () => isChinese() ? "\u5168\u90E8\u6807\u7B7E" : "All tags",
+    selectGateway: () => isChinese() ? "\u9009\u62E9\u7F51\u5173" : "Select gateway",
+    selectServer: () => isChinese() ? "\u9009\u62E9\u670D\u52A1" : "Select server",
+    filterCtx: () => isChinese() ? "\u8FC7\u6EE4\u8DEF\u7531..." : "Filter routes...",
+    selectFirst: () => isChinese() ? "\u2190 \u8BF7\u5148\u9009\u62E9\u670D\u52A1" : "\u2190 Select a server first",
+    loading: () => isChinese() ? "\u52A0\u8F7D\u670D\u52A1\u5217\u8868..." : "Loading...",
+    loadFailed: (m) => isChinese() ? `\u52A0\u8F7D\u5931\u8D25: ${m}` : `Failed: ${m}`,
+    loaded: (n) => isChinese() ? `\u5DF2\u52A0\u8F7D ${n} \u4E2A\u670D\u52A1` : `${n} servers loaded`,
+    switching: () => isChinese() ? "\u5207\u6362\u670D\u52A1\u4E2D..." : "Switching...",
+    switchFailed: (m) => isChinese() ? `\u5207\u6362\u5931\u8D25: ${m}` : `Failed: ${m}`,
+    routes: (name, n) => isChinese() ? `${name} \xB7 ${n} \u6761\u8DEF\u7531` : `${name} \xB7 ${n} routes`,
+    copied: (k) => isChinese() ? `\u5DF2\u590D\u5236: ${k}` : `Copied: ${k}`,
+    copyAll: () => isChinese() ? "\u590D\u5236\u5168\u90E8 JSON" : "Copy all JSON",
+    copyAllDone: () => isChinese() ? "\u5DF2\u590D\u5236\u4E3A JSON" : "Copied as JSON"
+  };
   var PANEL_STYLE = `
   #__snackkit_debugger__ {
     position: fixed;
-    bottom: 16px;
-    right: 16px;
+    bottom: 20px;
+    right: 20px;
     z-index: 99999;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
     font-size: 13px;
-    color: #e2e8f0;
+    color: #b8ccec;
+    user-select: none;
   }
+
+  /* \u2500\u2500 \u6D6E\u52A8\u6309\u94AE \u2500\u2500 */
   #__snackkit_debugger__ .dbg-toggle {
-    width: 40px;
-    height: 40px;
+    width: 42px;
+    height: 42px;
     border-radius: 50%;
-    background: #3b82f6;
+    background: linear-gradient(135deg, #4f8ef7, #6d6ff5);
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    box-shadow: 0 4px 14px rgba(79,142,247,0.45);
     margin-left: auto;
-    color: #fff;
-    font-size: 18px;
+    font-size: 20px;
+    transition: transform 0.15s, box-shadow 0.15s;
   }
+  #__snackkit_debugger__ .dbg-toggle:hover {
+    transform: scale(1.08);
+    box-shadow: 0 6px 20px rgba(79,142,247,0.55);
+  }
+  #__snackkit_debugger__ .dbg-toggle:active { transform: scale(0.94); }
+
+  /* \u2500\u2500 \u9762\u677F\u4E3B\u4F53 \u2500\u2500 */
   #__snackkit_debugger__ .dbg-panel {
-    background: #1e293b;
-    border: 1px solid #334155;
-    border-radius: 8px;
-    padding: 12px;
-    width: 320px;
-    margin-bottom: 8px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-    display: none;
+    background: #1e2638;
+    border: 1px solid #2d3a55;
+    border-radius: 12px;
+    width: 440px;
+    margin-bottom: 10px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
+    overflow: visible;
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+    pointer-events: none;
+    transition: opacity 0.18s ease, transform 0.18s ease;
+  }
+  #__snackkit_debugger__ .dbg-panel.open {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
   }
-  #__snackkit_debugger__ .dbg-panel.open { display: block; }
-  #__snackkit_debugger__ .dbg-row {
-    margin-bottom: 8px;
+
+  /* \u2500\u2500 \u9762\u677F Header \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-header {
     display: flex;
-    flex-direction: column;
-    gap: 4px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    background: #171e2e;
+    border-bottom: 1px solid #2d3a55;
+    border-radius: 12px 12px 0 0;
+  }
+  #__snackkit_debugger__ .dbg-header-left {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+  }
+  #__snackkit_debugger__ .dbg-header-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #34d399;
+    box-shadow: 0 0 6px rgba(52,211,153,0.6);
   }
-  #__snackkit_debugger__ label {
+  #__snackkit_debugger__ .dbg-header-dot.loading {
+    background: #fbbf24;
+    box-shadow: 0 0 6px rgba(251,191,36,0.6);
+    animation: dbg-pulse 1s ease-in-out infinite;
+  }
+  #__snackkit_debugger__ .dbg-header-dot.err {
+    background: #f87171;
+    box-shadow: 0 0 6px rgba(248,113,113,0.6);
+  }
+  #__snackkit_debugger__ .dbg-header-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #dce8fa;
+    letter-spacing: 0.03em;
+  }
+  #__snackkit_debugger__ .dbg-header-meta {
     font-size: 11px;
-    color: #94a3b8;
+    color: #4d6080;
+  }
+
+  /* \u2500\u2500 \u9762\u677F\u5185\u5BB9\u533A \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-body {
+    padding: 12px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: 420px;
+    overflow: visible;
+  }
+
+  /* \u2500\u2500 \u5B57\u6BB5\u884C \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-field {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  #__snackkit_debugger__ .dbg-field-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  #__snackkit_debugger__ .dbg-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: #5e72a0;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.07em;
   }
-  #__snackkit_debugger__ select {
-    background: #0f172a;
-    border: 1px solid #334155;
+
+  /* \u2500\u2500 \u4E00\u952E\u590D\u5236\u5168\u90E8 JSON \u6309\u94AE \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-copy-all {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: 1px solid #2d3a55;
     border-radius: 4px;
-    color: #e2e8f0;
-    padding: 4px 8px;
-    font-size: 13px;
-    width: 100%;
+    padding: 2px 7px;
+    color: #5e72a0;
+    font-size: 10px;
+    font-family: inherit;
     cursor: pointer;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
   }
-  #__snackkit_debugger__ .dbg-ctx-list {
+  #__snackkit_debugger__ .dbg-copy-all:hover {
+    border-color: #4f8ef7;
+    color: #7aacfa;
+    background: rgba(79,142,247,0.08);
+  }
+  #__snackkit_debugger__ .dbg-copy-all.done {
+    border-color: #34d399;
+    color: #34d399;
+  }
+
+  /* \u2500\u2500 \u81EA\u5B9A\u4E49\u4E0B\u62C9 \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-select {
+    position: relative;
+  }
+  #__snackkit_debugger__ .dbg-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    background: #252f45;
+    border: 1px solid #2d3a55;
+    border-radius: 6px;
+    padding: 6px 10px;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+    min-height: 32px;
+  }
+  #__snackkit_debugger__ .dbg-select-trigger:hover { border-color: #3d5070; background: #2d3a55; }
+  #__snackkit_debugger__ .dbg-select.open .dbg-select-trigger {
+    border-color: #4f8ef7;
+    background: #2d3a55;
+  }
+  #__snackkit_debugger__ .dbg-select-val {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    color: #b8ccec;
+  }
+  #__snackkit_debugger__ .dbg-select-val.placeholder { color: #3d5070; }
+  #__snackkit_debugger__ .dbg-select-arrow {
+    color: #3d5070;
+    font-size: 10px;
+    flex-shrink: 0;
+    transition: transform 0.15s, color 0.15s;
+  }
+  #__snackkit_debugger__ .dbg-select.open .dbg-select-arrow {
+    transform: rotate(180deg);
+    color: #4f8ef7;
+  }
+  #__snackkit_debugger__ .dbg-select-dropdown {
+    position: absolute;
+    bottom: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    background: #1e2638;
+    border: 1px solid #2d3a55;
+    border-radius: 8px;
+    box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
+    overflow: hidden;
+    opacity: 0;
+    transform: translateY(4px);
+    pointer-events: none;
+    transition: opacity 0.14s, transform 0.14s;
+    z-index: 100000;
+  }
+  #__snackkit_debugger__ .dbg-select.open .dbg-select-dropdown {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+  #__snackkit_debugger__ .dbg-select-search {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    border-bottom: 1px solid #2d3a55;
+  }
+  #__snackkit_debugger__ .dbg-select-search-icon { color: #3d5070; font-size: 11px; flex-shrink: 0; }
+  #__snackkit_debugger__ .dbg-select-search input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #b8ccec;
+    font-size: 12px;
+    font-family: inherit;
+  }
+  #__snackkit_debugger__ .dbg-select-search input::placeholder { color: #3d5070; }
+  #__snackkit_debugger__ .dbg-select-list {
     max-height: 160px;
     overflow-y: auto;
-    border: 1px solid #334155;
-    border-radius: 4px;
-    background: #0f172a;
   }
-  #__snackkit_debugger__ .dbg-ctx-item {
-    padding: 4px 8px;
-    border-bottom: 1px solid #1e293b;
+  #__snackkit_debugger__ .dbg-select-list::-webkit-scrollbar { width: 3px; }
+  #__snackkit_debugger__ .dbg-select-list::-webkit-scrollbar-track { background: transparent; }
+  #__snackkit_debugger__ .dbg-select-list::-webkit-scrollbar-thumb { background: #2d3a55; border-radius: 2px; }
+  #__snackkit_debugger__ .dbg-select-option {
+    padding: 7px 10px;
     cursor: pointer;
+    font-size: 12px;
+    color: #8aa4c8;
+    transition: background 0.1s, color 0.1s;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #__snackkit_debugger__ .dbg-select-option:hover { background: #2d3a55; color: #dce8fa; }
+  #__snackkit_debugger__ .dbg-select-option.active { color: #7aacfa; background: #1e3060; }
+  #__snackkit_debugger__ .dbg-select-option.hidden { display: none; }
+  #__snackkit_debugger__ .dbg-select-empty {
+    padding: 12px 10px;
+    font-size: 12px;
+    color: #3d5070;
+    text-align: center;
+  }
+
+  /* \u2500\u2500 \u8DEF\u7531\u5217\u8868 \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-ctx-field {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+  #__snackkit_debugger__ .dbg-ctx-wrap {
+    flex: 1;
+    min-height: 0;
+    border: 1px solid #2d3a55;
+    border-radius: 6px;
+    overflow: hidden;
+    background: #252f45;
+    display: flex;
+    flex-direction: column;
+  }
+  #__snackkit_debugger__ .dbg-ctx-search {
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border-bottom: 1px solid #2d3a55;
+    background: #1e2638;
+  }
+  #__snackkit_debugger__ .dbg-ctx-search input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #b8ccec;
+    font-size: 12px;
+    font-family: inherit;
+  }
+  #__snackkit_debugger__ .dbg-ctx-search input::placeholder { color: #3d5070; }
+  #__snackkit_debugger__ .dbg-ctx-list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+  }
+  #__snackkit_debugger__ .dbg-ctx-list::-webkit-scrollbar { width: 3px; }
+  #__snackkit_debugger__ .dbg-ctx-list::-webkit-scrollbar-track { background: transparent; }
+  #__snackkit_debugger__ .dbg-ctx-list::-webkit-scrollbar-thumb { background: #2d3a55; border-radius: 2px; }
+  #__snackkit_debugger__ .dbg-ctx-item {
+    padding: 5px 10px;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: minmax(80px, 148px) 1fr auto;
+    gap: 8px;
+    align-items: center;
+    border-bottom: 1px solid #1e2638;
+    transition: background 0.1s;
   }
   #__snackkit_debugger__ .dbg-ctx-item:last-child { border-bottom: none; }
-  #__snackkit_debugger__ .dbg-ctx-item:hover { background: #1e293b; }
-  #__snackkit_debugger__ .dbg-ctx-key { color: #60a5fa; }
-  #__snackkit_debugger__ .dbg-ctx-val { color: #94a3b8; font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  #__snackkit_debugger__ .dbg-status {
+  #__snackkit_debugger__ .dbg-ctx-item:hover { background: #2d3a55; }
+  #__snackkit_debugger__ .dbg-ctx-item.hidden { display: none; }
+  #__snackkit_debugger__ .dbg-ctx-key {
+    font-size: 12px;
+    color: #7aacfa;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #__snackkit_debugger__ .dbg-ctx-val {
+    font-size: 11px;
+    color: #4d6080;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: color 0.1s;
+  }
+  #__snackkit_debugger__ .dbg-ctx-item:hover .dbg-ctx-val { color: #7a90b0; }
+  #__snackkit_debugger__ .dbg-ctx-copy {
+    font-size: 11px;
+    color: #3d5070;
+    opacity: 0;
+    flex-shrink: 0;
+    transition: opacity 0.1s, color 0.1s;
+  }
+  #__snackkit_debugger__ .dbg-ctx-item:hover .dbg-ctx-copy { opacity: 1; color: #5e72a0; }
+  #__snackkit_debugger__ .dbg-ctx-item.copied .dbg-ctx-copy { color: #34d399; opacity: 1; }
+  #__snackkit_debugger__ .dbg-ctx-empty {
+    padding: 16px 10px;
+    font-size: 12px;
+    color: #3d5070;
+    text-align: center;
+  }
+
+  /* \u2500\u2500 \u5E95\u90E8\u72B6\u6001\u680F \u2500\u2500 */
+  #__snackkit_debugger__ .dbg-footer {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 14px;
+    background: #171e2e;
+    border-top: 1px solid #2d3a55;
+    border-radius: 0 0 12px 12px;
     font-size: 11px;
-    color: #64748b;
-    margin-top: 4px;
-    min-height: 16px;
+    color: #4d6080;
+    min-height: 30px;
+  }
+  #__snackkit_debugger__ .dbg-footer.ok { color: #34d399; }
+  #__snackkit_debugger__ .dbg-footer.err { color: #f87171; }
+  #__snackkit_debugger__ .dbg-footer-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: currentColor;
+    flex-shrink: 0;
+  }
+
+  @keyframes dbg-pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.35; }
   }
-  #__snackkit_debugger__ .dbg-status.ok { color: #22c55e; }
-  #__snackkit_debugger__ .dbg-status.err { color: #ef4444; }
 `;
+  var SearchSelect = class {
+    constructor(onChange) {
+      this.options = [];
+      this.selected = "";
+      this.onChange = onChange;
+      this.el = document.createElement("div");
+      this.el.className = "dbg-select";
+      this.trigger = document.createElement("div");
+      this.trigger.className = "dbg-select-trigger";
+      this.valEl = document.createElement("span");
+      this.valEl.className = "dbg-select-val placeholder";
+      const arrow = document.createElement("span");
+      arrow.className = "dbg-select-arrow";
+      arrow.textContent = "\u25BE";
+      this.trigger.appendChild(this.valEl);
+      this.trigger.appendChild(arrow);
+      this.dropdown = document.createElement("div");
+      this.dropdown.className = "dbg-select-dropdown";
+      const searchWrap = document.createElement("div");
+      searchWrap.className = "dbg-select-search";
+      const searchIcon = document.createElement("span");
+      searchIcon.className = "dbg-select-search-icon";
+      searchIcon.textContent = "\u2315";
+      this.searchInput = document.createElement("input");
+      this.searchInput.type = "text";
+      this.searchInput.placeholder = T.search();
+      searchWrap.appendChild(searchIcon);
+      searchWrap.appendChild(this.searchInput);
+      this.listEl = document.createElement("div");
+      this.listEl.className = "dbg-select-list";
+      this.dropdown.appendChild(searchWrap);
+      this.dropdown.appendChild(this.listEl);
+      this.el.appendChild(this.trigger);
+      this.el.appendChild(this.dropdown);
+      this.bindEvents();
+    }
+    bindEvents() {
+      this.trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = this.el.classList.contains("open");
+        document.querySelectorAll("#__snackkit_debugger__ .dbg-select.open").forEach((el) => {
+          if (el !== this.el) el.classList.remove("open");
+        });
+        this.el.classList.toggle("open", !isOpen);
+        if (!isOpen) {
+          this.searchInput.value = "";
+          this.filterOptions("");
+          setTimeout(() => this.searchInput.focus(), 50);
+        }
+      });
+      this.searchInput.addEventListener("input", () => {
+        this.filterOptions(this.searchInput.value);
+      });
+      this.searchInput.addEventListener("click", (e) => e.stopPropagation());
+      document.addEventListener("click", () => {
+        this.el.classList.remove("open");
+      });
+    }
+    filterOptions(query) {
+      const q = query.toLowerCase();
+      let visibleCount = 0;
+      this.listEl.querySelectorAll(".dbg-select-option").forEach((opt) => {
+        const match = !q || opt.textContent.toLowerCase().includes(q);
+        opt.classList.toggle("hidden", !match);
+        if (match) visibleCount++;
+      });
+      let emptyEl = this.listEl.querySelector(".dbg-select-empty");
+      if (visibleCount === 0) {
+        if (!emptyEl) {
+          emptyEl = document.createElement("div");
+          emptyEl.className = "dbg-select-empty";
+          emptyEl.textContent = T.noMatch();
+          this.listEl.appendChild(emptyEl);
+        }
+      } else {
+        emptyEl?.remove();
+      }
+    }
+    /** 更新选项列表 */
+    setOptions(options, placeholder) {
+      this.options = options;
+      this.listEl.innerHTML = "";
+      this.valEl.textContent = placeholder;
+      this.valEl.className = "dbg-select-val placeholder";
+      this.selected = "";
+      options.forEach(({ value, label }) => {
+        const opt = document.createElement("div");
+        opt.className = "dbg-select-option";
+        opt.dataset["value"] = value;
+        opt.textContent = label;
+        opt.setAttribute("title", label);
+        opt.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.select(value, label);
+          this.el.classList.remove("open");
+        });
+        this.listEl.appendChild(opt);
+      });
+    }
+    /** 选中某个值（不触发 onChange） */
+    setValue(value) {
+      const opt = this.options.find((o) => o.value === value);
+      if (opt) this.select(opt.value, opt.label, false);
+    }
+    select(value, label, emit = true) {
+      this.selected = value;
+      this.valEl.textContent = label;
+      this.valEl.className = "dbg-select-val";
+      this.listEl.querySelectorAll(".dbg-select-option").forEach((el) => {
+        el.classList.toggle("active", el.dataset["value"] === value);
+      });
+      if (emit) this.onChange(value);
+    }
+    getValue() {
+      return this.selected;
+    }
+    getElement() {
+      return this.el;
+    }
+  };
   var Debugger = class _Debugger {
     constructor(options) {
       this.servers = [];
+      this.currentCtxMap = {};
       this.options = options;
       this.gateways = Array.isArray(options.gateways) ? options.gateways : [options.gateways];
     }
@@ -15725,146 +16160,167 @@ var SnackKit = (function (exports, crypto2, url, http, https, http2, util2, zlib
       const panel = document.createElement("div");
       panel.className = "dbg-panel";
       this.panelEl = panel;
-      const gwRow = this.createRow("\u7F51\u5173 (Gateway)");
-      const gwSelect = document.createElement("select");
-      this.gateways.forEach((gw) => {
-        const opt = document.createElement("option");
-        opt.value = gw;
-        opt.textContent = gw;
-        gwSelect.appendChild(opt);
+      const header = document.createElement("div");
+      header.className = "dbg-header";
+      const headerLeft = document.createElement("div");
+      headerLeft.className = "dbg-header-left";
+      this.headerDot = document.createElement("span");
+      this.headerDot.className = "dbg-header-dot loading";
+      const headerTitle = document.createElement("span");
+      headerTitle.className = "dbg-header-title";
+      headerTitle.textContent = "Snack Kit Debugger";
+      headerLeft.appendChild(this.headerDot);
+      headerLeft.appendChild(headerTitle);
+      header.appendChild(headerLeft);
+      panel.appendChild(header);
+      const body = document.createElement("div");
+      body.className = "dbg-body";
+      this.gwVersion = document.createElement("span");
+      this.gwVersion.className = "dbg-header-meta";
+      this.gwSelect = new SearchSelect((val) => this.onGatewayChange(val));
+      this.gwSelect.setOptions(this.gateways.map((g) => ({ value: g, label: g })), T.selectGateway());
+      body.appendChild(this.createFieldWithAction(T.gateway(), this.gwVersion, this.gwSelect.getElement()));
+      this.typeSelect = new SearchSelect((val) => this.onTypeChange(val));
+      body.appendChild(this.createField(T.tag(), this.typeSelect.getElement()));
+      this.serverSelect = new SearchSelect((val) => this.onServerChange(val));
+      body.appendChild(this.createField(T.server(), this.serverSelect.getElement()));
+      const ctxWrap = document.createElement("div");
+      ctxWrap.className = "dbg-ctx-wrap";
+      const ctxSearch = document.createElement("div");
+      ctxSearch.className = "dbg-ctx-search";
+      const ctxSearchIcon = document.createElement("span");
+      ctxSearchIcon.className = "dbg-select-search-icon";
+      ctxSearchIcon.textContent = "\u2315";
+      this.ctxSearchInput = document.createElement("input");
+      this.ctxSearchInput.type = "text";
+      this.ctxSearchInput.placeholder = T.filterCtx();
+      this.ctxSearchInput.addEventListener("input", () => this.filterCtx(this.ctxSearchInput.value));
+      ctxSearch.appendChild(ctxSearchIcon);
+      ctxSearch.appendChild(this.ctxSearchInput);
+      this.ctxList = document.createElement("div");
+      this.ctxList.className = "dbg-ctx-list";
+      ctxWrap.appendChild(ctxSearch);
+      ctxWrap.appendChild(this.ctxList);
+      this.copyAllBtn = document.createElement("button");
+      this.copyAllBtn.className = "dbg-copy-all";
+      this.copyAllBtn.textContent = T.copyAll();
+      this.copyAllBtn.setAttribute("title", isChinese() ? "\u5C06\u5168\u90E8\u4E0A\u4E0B\u6587\u590D\u5236\u4E3A JSON\uFF0C\u53EF\u4F5C\u4E3A Context.load({...}) \u7684\u53C2\u6570" : "Copy all ctx entries as JSON for Context.load({...})");
+      this.copyAllBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.copyAllCtx();
       });
-      gwSelect.addEventListener("change", () => this.onGatewayChange());
-      gwRow.appendChild(gwSelect);
-      this.gwSelect = gwSelect;
-      panel.appendChild(gwRow);
-      const typeRow = this.createRow("\u670D\u52A1\u7C7B\u578B (Type)");
-      const typeSelect = document.createElement("select");
-      typeSelect.addEventListener("change", () => this.onTypeChange());
-      typeRow.appendChild(typeSelect);
-      this.typeSelect = typeSelect;
-      panel.appendChild(typeRow);
-      const serverRow = this.createRow("\u670D\u52A1 (Server)");
-      const serverSelect = document.createElement("select");
-      serverSelect.addEventListener("change", () => this.onServerChange());
-      serverRow.appendChild(serverSelect);
-      this.serverSelect = serverSelect;
-      panel.appendChild(serverRow);
-      const ctxRow = this.createRow("\u8DEF\u7531 (Ctx) - \u70B9\u51FB\u590D\u5236");
-      const ctxList = document.createElement("div");
-      ctxList.className = "dbg-ctx-list";
-      ctxRow.appendChild(ctxList);
-      this.ctxList = ctxList;
-      panel.appendChild(ctxRow);
-      const status = document.createElement("div");
-      status.className = "dbg-status";
-      this.statusEl = status;
-      panel.appendChild(status);
+      const ctxField = this.createFieldWithAction(T.ctxLabel(), this.copyAllBtn, ctxWrap);
+      ctxField.classList.add("dbg-ctx-field");
+      body.appendChild(ctxField);
+      panel.appendChild(body);
+      const footer = document.createElement("div");
+      footer.className = "dbg-footer";
+      this.footerEl = footer;
+      panel.appendChild(footer);
       const toggle = document.createElement("button");
       toggle.className = "dbg-toggle";
       toggle.textContent = "\u{1F41B}";
       toggle.setAttribute("title", "Snack Debugger");
-      toggle.addEventListener("click", () => panel.classList.toggle("open"));
+      toggle.addEventListener("click", (e) => {
+        e.stopPropagation();
+        panel.classList.toggle("open");
+      });
       root.appendChild(panel);
       root.appendChild(toggle);
       document.body.appendChild(root);
     }
-    createRow(label) {
-      const row = document.createElement("div");
-      row.className = "dbg-row";
-      const lbl = document.createElement("label");
+    /** 创建普通字段行（label + content） */
+    createField(label, content) {
+      const field = document.createElement("div");
+      field.className = "dbg-field";
+      const lbl = document.createElement("div");
+      lbl.className = "dbg-label";
+      lbl.textContent = label;
+      field.appendChild(lbl);
+      field.appendChild(content);
+      return field;
+    }
+    /** 创建带操作按钮的字段行（label + action button + content） */
+    createFieldWithAction(label, action, content) {
+      const field = document.createElement("div");
+      field.className = "dbg-field";
+      const fieldHeader = document.createElement("div");
+      fieldHeader.className = "dbg-field-header";
+      const lbl = document.createElement("div");
+      lbl.className = "dbg-label";
       lbl.textContent = label;
-      row.appendChild(lbl);
-      return row;
+      fieldHeader.appendChild(lbl);
+      fieldHeader.appendChild(action);
+      field.appendChild(fieldHeader);
+      field.appendChild(content);
+      return field;
     }
     /** 恢复上次持久化的状态 */
     async restoreState() {
       const savedGw = localStorage.getItem(KEY_GATEWAY);
-      if (savedGw && this.gateways.includes(savedGw)) {
-        this.gwSelect.value = savedGw;
-      }
-      await this.loadServers(this.gwSelect.value);
+      const gw = savedGw && this.gateways.includes(savedGw) ? savedGw : this.gateways[0];
+      this.gwSelect.setValue(gw);
+      await this.loadServers(gw);
       const savedType = localStorage.getItem(KEY_TYPE);
       if (savedType) {
-        this.typeSelect.value = savedType;
+        this.typeSelect.setValue(savedType);
         this.renderServerOptions(savedType);
       }
       const savedServer = localStorage.getItem(KEY_SERVER);
-      if (savedServer && this.serverSelect.querySelector(`option[value="${savedServer}"]`)) {
-        this.serverSelect.value = savedServer;
+      if (savedServer && this.servers.find((s) => s.key === savedServer)) {
+        this.serverSelect.setValue(savedServer);
         await this.applyServer(savedServer);
       }
     }
-    /** 网关切换处理 */
-    async onGatewayChange() {
-      const gw = this.gwSelect.value;
+    async onGatewayChange(gw) {
       localStorage.setItem(KEY_GATEWAY, gw);
+      this.gwVersion.textContent = "";
       await this.loadServers(gw);
     }
-    /** 服务类型切换处理 */
-    onTypeChange() {
-      const type = this.typeSelect.value;
+    onTypeChange(type) {
       localStorage.setItem(KEY_TYPE, type);
       this.renderServerOptions(type);
     }
-    /** 服务切换处理 */
-    async onServerChange() {
-      const key = this.serverSelect.value;
+    async onServerChange(key) {
       localStorage.setItem(KEY_SERVER, key);
       await this.applyServer(key);
     }
-    /**
-     * 从网关加载服务列表
-     * @param gwUrl 网关 URL
-     */
+    /** 从网关加载服务列表 */
     async loadServers(gwUrl) {
-      this.setStatus("\u52A0\u8F7D\u4E2D...", "");
+      this.setHeader("loading");
+      this.setFooter(T.loading(), "");
       const result = await Get(`${gwUrl}/web-debug/host/list`, {
         cache: true,
         timeout: this.options.timeout
       });
       if (result.error) {
-        this.setStatus(`\u52A0\u8F7D\u5931\u8D25: ${result.error.message}`, "err");
+        this.setHeader("err");
+        this.setFooter(T.loadFailed(result.error.message), "err");
         return;
       }
       this.servers = result.data ?? [];
       this.renderTypeOptions();
-      this.setStatus(`\u5DF2\u52A0\u8F7D ${this.servers.length} \u4E2A\u670D\u52A1`, "ok");
+      this.setHeader("ok");
+      this.setFooter(T.loaded(this.servers.length), "ok");
     }
-    /** 渲染服务类型选项 */
+    /** 渲染标签选项 */
     renderTypeOptions() {
-      const types = [...new Set(this.servers.map((s) => s.type))];
-      this.typeSelect.innerHTML = "";
-      const allOpt = document.createElement("option");
-      allOpt.value = "";
-      allOpt.textContent = "\u5168\u90E8";
-      this.typeSelect.appendChild(allOpt);
-      types.forEach((t) => {
-        const opt = document.createElement("option");
-        opt.value = t;
-        opt.textContent = t;
-        this.typeSelect.appendChild(opt);
-      });
-      this.renderServerOptions(this.typeSelect.value);
+      const types = [...new Set(this.servers.map((s) => s.type).filter(Boolean))];
+      const opts = [{ value: "", label: T.allTags() }, ...types.map((t) => ({ value: t, label: t }))];
+      this.typeSelect.setOptions(opts, T.allTags());
+      this.typeSelect.setValue("");
+      this.renderServerOptions("");
     }
-    /** 根据类型渲染服务选项 */
+    /** 根据标签渲染服务选项 */
     renderServerOptions(type) {
       const filtered = type ? this.servers.filter((s) => s.type === type) : this.servers;
-      this.serverSelect.innerHTML = "";
-      const emptyOpt = document.createElement("option");
-      emptyOpt.value = "";
-      emptyOpt.textContent = "\u8BF7\u9009\u62E9\u670D\u52A1";
-      this.serverSelect.appendChild(emptyOpt);
-      filtered.forEach((s) => {
-        const opt = document.createElement("option");
-        opt.value = s.key;
-        opt.textContent = `${s.name} (${s.key})`;
-        this.serverSelect.appendChild(opt);
-      });
+      this.serverSelect.setOptions(
+        filtered.map((s) => ({ value: s.key, label: `${s.name}  (${s.key})` })),
+        T.selectServer()
+      );
+      this.renderCtxList({});
     }
-    /**
-     * 切换目标服务，重新加载 Context 路由映射
-     * @param key 服务 key
-     */
+    /** 切换目标服务，重新加载 Context 路由映射 */
     async applyServer(key) {
       if (!key) {
         this.renderCtxList({});
@@ -15872,56 +16328,105 @@ var SnackKit = (function (exports, crypto2, url, http, https, http2, util2, zlib
       }
       const server = this.servers.find((s) => s.key === key);
       if (!server) return;
-      this.setStatus("\u5207\u6362\u670D\u52A1\u4E2D...", "");
+      this.setFooter(T.switching(), "");
       try {
         await Context.load(server.origin, this.options.timeout);
-        const ctxMap = {};
         const res = await fetch(`${server.origin}/ngw/context`);
         const raw = res.ok ? await res.json() : {};
+        const ctxMap = {};
         for (const [k, v] of Object.entries(raw)) {
           if (k !== "$info" && typeof v === "string") ctxMap[k] = v;
         }
+        const info = Context.info;
+        if (info) this.gwVersion.textContent = `v${info.version}`;
         this.renderCtxList(ctxMap);
-        this.setStatus(`\u5DF2\u5207\u6362\u81F3 ${server.name}`, "ok");
+        const count = Object.keys(ctxMap).length;
+        this.setFooter(T.routes(server.name, count), "ok");
       } catch (err) {
         const msg = err instanceof Error ? err.message : String(err);
-        this.setStatus(`\u5207\u6362\u5931\u8D25: ${msg}`, "err");
+        this.setFooter(T.switchFailed(msg), "err");
       }
     }
     /** 渲染路由列表 */
     renderCtxList(ctxMap) {
+      this.currentCtxMap = ctxMap;
       this.ctxList.innerHTML = "";
+      this.ctxSearchInput.value = "";
       const entries = Object.entries(ctxMap);
       if (entries.length === 0) {
-        this.ctxList.textContent = "\u6682\u65E0\u8DEF\u7531";
+        const empty = document.createElement("div");
+        empty.className = "dbg-ctx-empty";
+        empty.textContent = T.selectFirst();
+        this.ctxList.appendChild(empty);
         return;
       }
       entries.forEach(([k, v]) => {
         const item = document.createElement("div");
         item.className = "dbg-ctx-item";
+        item.dataset["key"] = k;
         const keySpan = document.createElement("span");
         keySpan.className = "dbg-ctx-key";
         keySpan.textContent = k;
+        keySpan.setAttribute("title", k);
         const valSpan = document.createElement("span");
         valSpan.className = "dbg-ctx-val";
         valSpan.textContent = v;
-        valSpan.setAttribute("title", v);
+        valSpan.setAttribute("title", `${k}  \u2192  ${v}`);
+        const copyIcon = document.createElement("span");
+        copyIcon.className = "dbg-ctx-copy";
+        copyIcon.textContent = "\u2398";
         item.appendChild(keySpan);
         item.appendChild(valSpan);
-        item.addEventListener("click", () => this.copyText(k));
+        item.appendChild(copyIcon);
+        item.addEventListener("click", () => this.copyCtxItem(item, k));
         this.ctxList.appendChild(item);
       });
     }
-    /** 复制文本到剪贴板 */
-    copyText(text) {
+    /** 过滤路由列表 */
+    filterCtx(query) {
+      const q = query.toLowerCase();
+      this.ctxList.querySelectorAll(".dbg-ctx-item").forEach((item) => {
+        const key = item.dataset["key"] ?? "";
+        item.classList.toggle("hidden", !!q && !key.toLowerCase().includes(q));
+      });
+    }
+    /** 复制单个 ctx key */
+    copyCtxItem(item, text) {
       navigator.clipboard.writeText(text).then(() => {
-        this.setStatus(`\u5DF2\u590D\u5236: ${text}`, "ok");
-        setTimeout(() => this.setStatus("", ""), 2e3);
+        item.classList.add("copied");
+        const icon = item.querySelector(".dbg-ctx-copy");
+        if (icon) icon.textContent = "\u2713";
+        setTimeout(() => {
+          item.classList.remove("copied");
+          const ic = item.querySelector(".dbg-ctx-copy");
+          if (ic) ic.textContent = "\u2398";
+        }, 1500);
+        this.setFooter(T.copied(text), "ok");
+        setTimeout(() => this.setFooter("", ""), 2e3);
+      });
+    }
+    /** 一键复制全部上下文为 JSON */
+    copyAllCtx() {
+      const entries = Object.keys(this.currentCtxMap);
+      if (entries.length === 0) return;
+      const json = JSON.stringify(this.currentCtxMap, null, 2);
+      navigator.clipboard.writeText(json).then(() => {
+        this.copyAllBtn.textContent = "\u2713 " + T.copyAllDone();
+        this.copyAllBtn.classList.add("done");
+        setTimeout(() => {
+          this.copyAllBtn.textContent = T.copyAll();
+          this.copyAllBtn.classList.remove("done");
+        }, 2e3);
+        this.setFooter(T.copyAllDone(), "ok");
+        setTimeout(() => this.setFooter("", ""), 2500);
       });
     }
-    setStatus(msg, cls) {
-      this.statusEl.textContent = msg;
-      this.statusEl.className = `dbg-status${cls ? ` ${cls}` : ""}`;
+    setHeader(state) {
+      this.headerDot.className = `dbg-header-dot${state !== "ok" ? ` ${state}` : ""}`;
+    }
+    setFooter(msg, cls) {
+      this.footerEl.innerHTML = msg ? `<span class="dbg-footer-dot"></span>${msg}` : "";
+      this.footerEl.className = `dbg-footer${cls ? ` ${cls}` : ""}`;
     }
   };
   /*! Bundled license information: