feat(api-keys): enhance API key display with new layout and styling

i18n.js

@@ -272,6 +272,7 @@ const i18n = {
             'auth_files.filter_aistudio': 'AIStudio',
             'auth_files.filter_claude': 'Claude',
             'auth_files.filter_codex': 'Codex',
+            'auth_files.filter_antigravity': 'Antigravity',
             'auth_files.filter_iflow': 'iFlow',
             'auth_files.filter_vertex': 'Vertex',
             'auth_files.filter_empty': '空文件',
@@ -282,6 +283,7 @@ const i18n = {
             'auth_files.type_aistudio': 'AIStudio',
             'auth_files.type_claude': 'Claude',
             'auth_files.type_codex': 'Codex',
+            'auth_files.type_antigravity': 'Antigravity',
             'auth_files.type_iflow': 'iFlow',
             'auth_files.type_vertex': 'Vertex',
             'auth_files.type_empty': '空文件',
@@ -792,6 +794,7 @@ const i18n = {
             'auth_files.filter_aistudio': 'AIStudio',
             'auth_files.filter_claude': 'Claude',
             'auth_files.filter_codex': 'Codex',
+            'auth_files.filter_antigravity': 'Antigravity',
             'auth_files.filter_iflow': 'iFlow',
             'auth_files.filter_vertex': 'Vertex',
             'auth_files.filter_empty': 'Empty',
@@ -802,6 +805,7 @@ const i18n = {
             'auth_files.type_aistudio': 'AIStudio',
             'auth_files.type_claude': 'Claude',
             'auth_files.type_codex': 'Codex',
+            'auth_files.type_antigravity': 'Antigravity',
             'auth_files.type_iflow': 'iFlow',
             'auth_files.type_vertex': 'Vertex',
             'auth_files.type_empty': 'Empty',

index.html

@@ -502,6 +502,7 @@
                                             <button class="filter-btn" data-type="aistudio" data-i18n-text="auth_files.filter_aistudio">AIStudio</button>
                                             <button class="filter-btn" data-type="claude" data-i18n-text="auth_files.filter_claude">Claude</button>
                                             <button class="filter-btn" data-type="codex" data-i18n-text="auth_files.filter_codex">Codex</button>
+                                            <button class="filter-btn" data-type="antigravity" data-i18n-text="auth_files.filter_antigravity">Antigravity</button>
                                             <button class="filter-btn" data-type="iflow" data-i18n-text="auth_files.filter_iflow">iFlow</button>
                                             <button class="filter-btn" data-type="vertex" data-i18n-text="auth_files.filter_vertex">Vertex</button>
                                             <button class="filter-btn" data-type="empty" data-i18n-text="auth_files.filter_empty">Empty</button>

src/modules/api-keys.js

@@ -26,27 +26,34 @@ export const apiKeysModule = {
             return;
         }
 
-        container.innerHTML = keys.map((key, index) => {
+        const rows = keys.map((key, index) => {
             const normalizedKey = typeof key === 'string' ? key : String(key ?? '');
             const maskedDisplay = this.escapeHtml(this.maskApiKey(normalizedKey));
             const keyArgument = encodeURIComponent(normalizedKey);
             return `
-            <div class="key-item">
-                <div class="item-content">
-                    <div class="item-title">${i18n.t('api_keys.item_title')} #${index + 1}</div>
-                    <div class="item-value">${maskedDisplay}</div>
-                </div>
-                <div class="item-actions">
-                    <button class="btn btn-secondary" data-action="edit-api-key" data-index="${index}" data-key="${keyArgument}">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                    <button class="btn btn-danger" data-action="delete-api-key" data-index="${index}">
-                        <i class="fas fa-trash"></i>
-                    </button>
+                <div class="key-table-row">
+                    <div class="key-badge">#${index + 1}</div>
+                    <div class="key-table-value">
+                        <div class="item-title">${i18n.t('api_keys.item_title')}</div>
+                        <div class="key-value">${maskedDisplay}</div>
+                    </div>
+                    <div class="item-actions compact">
+                        <button class="btn btn-secondary" data-action="edit-api-key" data-index="${index}" data-key="${keyArgument}">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button class="btn btn-danger" data-action="delete-api-key" data-index="${index}">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    </div>
                 </div>
+            `;
+        }).join('');
+
+        container.innerHTML = `
+            <div class="key-table">
+                ${rows}
             </div>
         `;
-        }).join('');
 
         this.bindApiKeyListEvents(container);
     },

src/modules/auth-files.js

@@ -172,6 +172,9 @@ export const authFilesModule = {
             case 'codex':
                 typeDisplayKey = 'auth_files.type_codex';
                 break;
+            case 'antigravity':
+                typeDisplayKey = 'auth_files.type_antigravity';
+                break;
             case 'iflow':
                 typeDisplayKey = 'auth_files.type_iflow';
                 break;
@@ -467,6 +470,7 @@ export const authFilesModule = {
             { type: 'aistudio', labelKey: 'auth_files.filter_aistudio' },
             { type: 'claude', labelKey: 'auth_files.filter_claude' },
             { type: 'codex', labelKey: 'auth_files.filter_codex' },
+            { type: 'antigravity', labelKey: 'auth_files.filter_antigravity' },
             { type: 'iflow', labelKey: 'auth_files.filter_iflow' },
             { type: 'vertex', labelKey: 'auth_files.filter_vertex' },
             { type: 'empty', labelKey: 'auth_files.filter_empty' }

styles.css

@@ -1552,6 +1552,118 @@ input:checked+.slider:before {
     overflow-y: auto;
 }
 
+
+/* API 密钥列表压缩布局 */
+.key-table {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.key-table-row {
+    display: grid;
+    grid-template-columns: 72px 1fr auto;
+    align-items: center;
+    background: var(--bg-quaternary);
+    border: 1px solid var(--border-primary);
+    border-radius: 10px;
+    padding: 10px 12px;
+    transition: all 0.2s ease;
+}
+
+.key-table-row:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--border-secondary);
+    transform: translateY(-1px);
+}
+
+.key-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    min-width: 52px;
+    padding: 0 10px;
+    border-radius: 10px;
+    background: var(--bg-secondary);
+    color: var(--primary-color);
+    font-weight: 700;
+    font-size: 14px;
+    border: 1px solid var(--border-primary);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.key-table-value {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+}
+
+.key-table .item-title {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.key-value {
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: 7px 10px;
+    font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+    font-size: 13px;
+    color: var(--text-primary);
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.4;
+}
+
+.item-actions.compact {
+    position: static;
+    transform: none;
+    gap: 6px;
+    justify-content: flex-end;
+}
+
+.item-actions.compact .btn {
+    min-width: 34px;
+    height: 34px;
+    padding: 0;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.item-actions.compact .btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
+}
+
+.item-actions.compact .btn i {
+    font-size: 14px;
+}
+
+@media (max-width: 768px) {
+    .key-table-row {
+        grid-template-columns: 1fr;
+        row-gap: 10px;
+    }
+
+    .item-actions.compact {
+        justify-content: flex-start;
+    }
+
+    .key-badge {
+        width: fit-content;
+    }
+
+    .key-value {
+        white-space: normal;
+        word-break: break-all;
+    }
+}
+
 .file-list {
     /* 认证文件列表填满页面，保留版本信息空间 */
     max-height: calc(100vh - 300px); /* 减去导航栏、padding和版本信息的高度 */
@@ -1816,6 +1928,16 @@ input:checked+.slider:before {
     color: #ffb74d;
 }
 
+.file-type-badge.antigravity {
+    background: #e0f7fa;
+    color: #006064;
+}
+
+[data-theme="dark"] .file-type-badge.antigravity {
+    background: #004d40;
+    color: #80deea;
+}
+
 .file-type-badge.iflow {
     background: #f3e5f5;
     color: #7b1fa2;
@@ -1837,13 +1959,13 @@ input:checked+.slider:before {
 }
 
 /* 未知类型通用样式 */
-.file-type-badge:not(.qwen):not(.gemini):not(.gemini-cli):not(.aistudio):not(.claude):not(.codex):not(.iflow):not(.empty) {
+.file-type-badge:not(.qwen):not(.gemini):not(.gemini-cli):not(.aistudio):not(.claude):not(.codex):not(.antigravity):not(.iflow):not(.empty) {
     background: #f0f0f0;
     color: #666666;
     border: 1px dashed #999999;
 }
 
-[data-theme="dark"] .file-type-badge:not(.qwen):not(.gemini):not(.gemini-cli):not(.aistudio):not(.claude):not(.codex):not(.iflow):not(.empty) {
+[data-theme="dark"] .file-type-badge:not(.qwen):not(.gemini):not(.gemini-cli):not(.aistudio):not(.claude):not(.codex):not(.antigravity):not(.iflow):not(.empty) {
     background: #3a3a3a;
     color: #aaaaaa;
     border: 1px dashed #666666;