From 5b1be05eb90169ffa5a2f422ffb8ca21c1a57a15 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Tue, 11 Nov 2025 18:28:56 +0800
Subject: [PATCH] feat(index.html): add Vertex AI credential import UI

- Implemented the UI for importing Vertex AI credentials, including file selection and input fields for location and JSON key.
- Enhanced internationalization support with appropriate labels and hints in both English and Chinese.
- Removed the previous implementation of the Vertex AI credential import section to streamline the code.
---
 index.html | 90 +++++++++++++++++++++++++++---------------------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index 3be665e..2f9ddd2 100644
--- a/index.html
+++ b/index.html
@@ -428,6 +428,51 @@
                                     <div id="openai-providers-list" class="provider-list"></div>
                                 </div>
                             </div>
+
+                            <!-- Vertex AI Credential Import -->
+                            <div class="card" id="vertex-import-card">
+                                <div class="card-header">
+                                    <h3><i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.title">Vertex AI 凭证导入</span></h3>
+                                </div>
+                                <div class="card-content">
+                                    <p class="form-hint" data-i18n="vertex_import.description">
+                                        上传 Google 服务账号 JSON 并保存为 vertex-<project>.json。
+                                    </p>
+                                    <div class="form-group">
+                                        <label for="vertex-location" data-i18n="vertex_import.location_label">区域 (可选)</label>
+                                        <input type="text" id="vertex-location" data-i18n-placeholder="vertex_import.location_placeholder" value="us-central1">
+                                        <p class="form-hint" data-i18n="vertex_import.location_hint">留空则使用默认 us-central1。</p>
+                                    </div>
+                                    <div class="form-group">
+                                        <label data-i18n="vertex_import.file_label">服务账号密钥 JSON</label>
+                                        <div class="input-group">
+                                            <input type="text" id="vertex-file-display" readonly data-i18n-placeholder="vertex_import.file_placeholder" placeholder="尚未选择文件">
+                                            <input type="file" id="vertex-file-input" accept=".json" style="display: none;">
+                                            <button type="button" id="vertex-select-file" class="btn btn-secondary">
+                                                <i class="fas fa-file-upload"></i> <span data-i18n="vertex_import.choose_file">选择文件</span>
+                                            </button>
+                                        </div>
+                                        <p class="form-hint" data-i18n="vertex_import.file_hint">仅支持 Google Cloud service account JSON。</p>
+                                    </div>
+                                    <div class="form-actions vertex-import-actions">
+                                        <button type="button" id="vertex-import-btn" class="btn btn-primary" disabled>
+                                            <i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.import_button">导入 Vertex 凭证</span>
+                                        </button>
+                                    </div>
+                                    <div id="vertex-import-result" class="vertex-import-result" style="display: none;">
+                                        <div class="vertex-import-result-header">
+                                            <i class="fas fa-check-circle"></i>
+                                            <span data-i18n="vertex_import.result_title">凭证已保存</span>
+                                        </div>
+                                        <ul>
+                                            <li><span data-i18n="vertex_import.result_project">项目 ID</span>: <code id="vertex-result-project">-</code></li>
+                                            <li><span data-i18n="vertex_import.result_email">服务账号</span>: <code id="vertex-result-email">-</code></li>
+                                            <li><span data-i18n="vertex_import.result_location">区域</span>: <code id="vertex-result-location">-</code></li>
+                                            <li><span data-i18n="vertex_import.result_file">存储文件</span>: <code id="vertex-result-file">-</code></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
                         </section>
 
                         <!-- 认证文件管理 -->
@@ -479,51 +524,6 @@
                                 </div>
                             </div>
 
-                            <!-- Vertex AI Credential Import -->
-                            <div class="card" id="vertex-import-card">
-                                <div class="card-header">
-                                    <h3><i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.title">Vertex AI 凭证导入</span></h3>
-                                </div>
-                                <div class="card-content">
-                                    <p class="form-hint" data-i18n="vertex_import.description">
-                                        上传 Google 服务账号 JSON 并保存为 vertex-<project>.json。
-                                    </p>
-                                    <div class="form-group">
-                                        <label for="vertex-location" data-i18n="vertex_import.location_label">区域 (可选)</label>
-                                        <input type="text" id="vertex-location" data-i18n-placeholder="vertex_import.location_placeholder" value="us-central1">
-                                        <p class="form-hint" data-i18n="vertex_import.location_hint">留空则使用默认 us-central1。</p>
-                                    </div>
-                                    <div class="form-group">
-                                        <label data-i18n="vertex_import.file_label">服务账号密钥 JSON</label>
-                                        <div class="input-group">
-                                            <input type="text" id="vertex-file-display" readonly data-i18n-placeholder="vertex_import.file_placeholder" placeholder="尚未选择文件">
-                                            <input type="file" id="vertex-file-input" accept=".json" style="display: none;">
-                                            <button type="button" id="vertex-select-file" class="btn btn-secondary">
-                                                <i class="fas fa-file-upload"></i> <span data-i18n="vertex_import.choose_file">选择文件</span>
-                                            </button>
-                                        </div>
-                                        <p class="form-hint" data-i18n="vertex_import.file_hint">仅支持 Google Cloud service account JSON。</p>
-                                    </div>
-                                    <div class="form-actions vertex-import-actions">
-                                        <button type="button" id="vertex-import-btn" class="btn btn-primary" disabled>
-                                            <i class="fas fa-cloud-upload-alt"></i> <span data-i18n="vertex_import.import_button">导入 Vertex 凭证</span>
-                                        </button>
-                                    </div>
-                                    <div id="vertex-import-result" class="vertex-import-result" style="display: none;">
-                                        <div class="vertex-import-result-header">
-                                            <i class="fas fa-check-circle"></i>
-                                            <span data-i18n="vertex_import.result_title">凭证已保存</span>
-                                        </div>
-                                        <ul>
-                                            <li><span data-i18n="vertex_import.result_project">项目 ID</span>: <code id="vertex-result-project">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_email">服务账号</span>: <code id="vertex-result-email">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_location">区域</span>: <code id="vertex-result-location">-</code></li>
-                                            <li><span data-i18n="vertex_import.result_file">存储文件</span>: <code id="vertex-result-file">-</code></li>
-                                        </ul>
-                                    </div>
-                                </div>
-                            </div>
-
                             <!-- Codex OAuth -->
                             <div class="card" id="codex-oauth-card">
                                 <div class="card-header">