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.
This commit is contained in:
Supra4E8C
2025-11-11 18:28:56 +08:00
parent a4fd672458
commit 5b1be05eb9

View File

@@ -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">