111

_locales/en/messages.json

@@ -260,8 +260,8 @@
     "description": "Update config button"
   },
   "configuredDomainsTitle": {
-    "message": "Configured Domains",
+    "message": "Domain List",
-    "description": "Configured domains section title"
+    "description": "Domain list section title"
   },
   "exportBtn": {
     "message": "Export",

_locales/zh_CN/messages.json

@@ -260,8 +260,8 @@
     "description": "更新配置按钮"
   },
   "configuredDomainsTitle": {
-    "message": "已配置域名",
+    "message": "域名清单",
-    "description": "已配置域名区标题"
+    "description": "域名清单区标题"
   },
   "exportBtn": {
     "message": "导出",

background.js

@@ -7,6 +7,8 @@ const AUTO_LOCK_MS = 10 * 60 * 1000; // 10 分钟无操作自动锁定
 chrome.runtime.onInstalled.addListener(() => {
   chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
     .catch((err) => console.warn("[AutoLogin] 设置 sidePanel 行为失败:", err));
+  chrome.sidePanel.setOptions({ panelWidth: 340 })
+    .catch((err) => console.warn("[AutoLogin] 设置 sidePanel 宽度失败:", err));
   migrateLegacyVault();
   console.log("[AutoLogin] 扩展已安装");
 });

popup.css

@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 body {
   width: 100%;
   min-width: 0;
@@ -214,35 +218,37 @@ h2 {
   line-height: 0;
 }
 
-/* 悬浮搜索框 */
+/* 内联展开式搜索框：点击搜索图标后向左展开 */
-.search-box {
+.search-box-inline {
-  position: absolute;
-  top: 38px;
-  right: 0;
-  z-index: 50;
   align-items: center;
-  gap: 4px;
+  gap: 0;
   background: #16213e;
   border: 1px solid #0f3460;
   border-radius: 6px;
-  padding: 6px 8px;
+  padding: 0 2px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  width: 190px;
-  width: 220px;
+  height: 24px;
   box-sizing: border-box;
+  overflow: hidden;
 }
 
-.search-box:not([hidden]) {
+.search-box-inline:not([hidden]) {
   display: flex;
 }
 
-.search-box input {
+.search-box-inline .btn-icon {
+  padding: 2px;
+}
+
+.search-box-inline input {
   flex: 1;
   min-width: 0;
   background: transparent;
   border: none;
   color: #e0e0e0;
-  font-size: 13px;
+  font-size: 12px;
   outline: none;
+  padding: 2px 2px;
 }
 
 .search-clear {
@@ -251,7 +257,7 @@ h2 {
   color: #888;
   cursor: pointer;
   font-size: 16px;
-  padding: 0 4px;
+  padding: 0 2px;
   line-height: 1;
 }
 
@@ -746,12 +752,13 @@ h2 {
 
 .list-actions {
   display: flex;
+  align-items: center;
   gap: 6px;
 }
 
 .btn-io {
   padding: 4px 10px;
-  background: #0f3460;
+  background: transparent;
   border: none;
   border-radius: 6px;
   color: #e0e0e0;
@@ -761,7 +768,7 @@ h2 {
 }
 
 .btn-io:hover {
-  background: #1a4a8a;
+  background: #0f3460;
 }
 
 .config-item {

popup.html

@@ -129,6 +129,13 @@
           <button type="button" id="searchBtn" class="btn-io btn-icon" data-i18n-title="searchBtnTitle" title="搜索">
             <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
           </button>
+          <div id="searchBox" class="search-box-inline" hidden>
+            <input type="text" id="searchInput" data-i18n-placeholder="searchPlaceholder" placeholder="搜索域名 / 用户名 / 别名">
+            <button type="button" id="searchClear" class="search-clear" title="清除">×</button>
+            <button type="button" id="searchToggleBtn" class="btn-io btn-icon" data-i18n-title="searchBtnTitle" title="搜索">
+              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+            </button>
+          </div>
           <button type="button" id="exportBtn" class="btn-io btn-icon" data-i18n-title="exportBtn" title="导出">
             <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M7 8l5-5 5 5"/><path d="M5 17v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2"/></svg>
           </button>
@@ -138,10 +145,6 @@
           <input type="file" id="importFile" accept="application/json,.json" hidden>
         </div>
       </div>
-      <div id="searchBox" class="search-box" hidden>
-        <input type="text" id="searchInput" data-i18n-placeholder="searchPlaceholder" placeholder="搜索域名 / 用户名 / 别名">
-        <button type="button" id="searchClear" class="search-clear">×</button>
-      </div>
       <div id="configList" class="config-list">
       </div>
     </section>

popup.js

@@ -88,6 +88,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const searchBox = $("searchBox");
   const searchInput = $("searchInput");
   const searchClear = $("searchClear");
+  const searchToggleBtn = $("searchToggleBtn");
   let searchKeyword = "";
 
   // 锁定界面
@@ -925,10 +926,20 @@ document.addEventListener("DOMContentLoaded", () => {
     editDomainInput.focus();
   });
 
-  // 搜索按钮：切换悬浮搜索框
+  // 搜索按钮：展开内联搜索框
   searchBtn.addEventListener("click", () => {
-    searchBox.hidden = !searchBox.hidden;
+    searchBtn.hidden = true;
-    if (!searchBox.hidden) searchInput.focus();
+    searchBox.hidden = false;
+    searchInput.focus();
+  });
+
+  // 搜索框内搜索图标：收起回图标按钮
+  searchToggleBtn.addEventListener("click", () => {
+    searchInput.value = "";
+    searchKeyword = "";
+    searchBox.hidden = true;
+    searchBtn.hidden = false;
+    renderConfigList();
   });
 
   // 搜索输入：实时过滤