codexmate 0.0.39 → 0.0.41

package/web-ui/partials/index/modals-basic.html

@@ -1,263 +1,263 @@
-        <!-- 添加提供商模态框 -->
-        <div v-if="showAddModal" class="modal-overlay" @click.self="closeAddModal">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-provider-modal-title">
-                <div class="modal-title" id="add-provider-modal-title">{{ t('modal.providerAdd.title') }}</div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.name') }}</label>
-                    <input
-                        v-model="newProvider.name"
-                        :class="['form-input', { invalid: !!providerFieldError('add', 'name') }]"
-                        :placeholder="t('placeholder.providerNameExample')"
-                        autocomplete="off"
-                        spellcheck="false"
-                        @blur="normalizeProviderDraft('add')">
-                    <div v-if="providerFieldError('add', 'name')" class="form-hint form-error">{{ providerFieldError('add', 'name') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.apiEndpoint') }}</label>
-                    <input
-                        v-model="newProvider.url"
-                        :class="['form-input', { invalid: !!providerFieldError('add', 'url') }]"
-                        :placeholder="t('placeholder.apiEndpointExample')"
-                        autocomplete="off"
-                        spellcheck="false"
-                        @blur="normalizeProviderDraft('add')">
-                    <div v-if="providerFieldError('add', 'url')" class="form-hint form-error">{{ providerFieldError('add', 'url') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.modelName') }}</label>
-                    <input
-                        v-model="newProvider.model"
-                        :class="['form-input', { invalid: !!providerFieldError('add', 'model') }]"
-                        :placeholder="t('placeholder.modelExample')"
-                        autocomplete="off"
-                        spellcheck="false"
-                        @blur="normalizeProviderDraft('add')">
-                    <div v-if="providerFieldError('add', 'model')" class="form-hint form-error">{{ providerFieldError('add', 'model') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.apiKey') }}</label>
-                    <div class="input-with-toggle">
-                        <input v-model="newProvider.key" :class="['form-input', { invalid: !!providerFieldError('add', 'key') }]" :type="showAddProviderKey ? 'text' : 'password'" placeholder="sk-..." autocomplete="off" spellcheck="false" @blur="normalizeProviderDraft('add')">
-                        <button type="button" class="input-toggle-btn" @click="toggleAddProviderKey" :title="showAddProviderKey ? t('common.hide') : t('common.show')" :aria-label="showAddProviderKey ? t('common.hide') : t('common.show')">
-                            <svg v-if="!showAddProviderKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
-                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
-                        </button>
-                    </div>
-                    <div v-if="providerFieldError('add', 'key')" class="form-hint form-error">{{ providerFieldError('add', 'key') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">
-                        <input type="checkbox" v-model="newProvider.useTransform">
-                        {{ t('field.useBuiltinTransform') }}
-                    </label>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeAddModal">{{ t('common.cancel') }}</button>
-                    <button class="btn btn-confirm" @click="addProvider" :disabled="!canSubmitProvider('add')">{{ t('common.add') }}</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- 编辑提供商模态框 -->
-        <div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-provider-modal-title">
-                <div class="modal-title" id="edit-provider-modal-title">{{ t('modal.providerEdit.title') }}</div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.name') }}</label>
-                    <input v-model="editingProvider.name" class="form-input" :placeholder="t('placeholder.providerName')" readonly>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.apiEndpoint') }}</label>
-                    <input
-                        v-model="editingProvider.url"
-                        :class="['form-input', { invalid: !!providerFieldError('edit', 'url') }]"
-                        :placeholder="t('placeholder.apiEndpointExample')"
-                        autocomplete="off"
-                        spellcheck="false"
-                        @blur="normalizeProviderDraft('edit')">
-                    <div v-if="providerFieldError('edit', 'url')" class="form-hint form-error">{{ providerFieldError('edit', 'url') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.apiKey') }}</label>
-                    <div class="input-with-toggle">
-                        <input v-model="editingProvider.key" class="form-input" :type="showEditProviderKey ? 'text' : 'password'" placeholder="sk-..." autocomplete="off" spellcheck="false">
-                        <button type="button" class="input-toggle-btn" @click="toggleEditProviderKey" :title="showEditProviderKey ? t('common.hide') : t('common.show')" :aria-label="showEditProviderKey ? t('common.hide') : t('common.show')">
-                            <svg v-if="!showEditProviderKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
-                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
-                        </button>
-                    </div>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeEditModal">{{ t('common.cancel') }}</button>
-                    <button class="btn btn-confirm" @click="updateProvider" :disabled="!canSubmitProvider('edit')">{{ t('common.save') }}</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- 添加模型模态框 -->
-        <div v-if="showModelModal" class="modal-overlay" @click.self="closeModelModal">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-model-modal-title">
-                <div class="modal-title" id="add-model-modal-title">{{ t('modal.modelAdd.title') }}</div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.modelName') }}</label>
-                    <input v-model="newModelName" class="form-input" :placeholder="t('placeholder.modelExample')">
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeModelModal">{{ t('common.cancel') }}</button>
-                    <button class="btn btn-confirm" @click="addModel">{{ t('common.add') }}</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- 模型列表模态框 -->
-        <div v-if="showModelListModal" class="modal-overlay" @click.self="showModelListModal = false">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="manage-models-modal-title">
-                <div class="modal-title" id="manage-models-modal-title">{{ t('modal.modelManage.title') }}</div>
-
-                <div class="model-list">
-                    <div v-for="model in models" :key="model" class="model-item">
-                        <span>{{ model }}</span>
-                        <button type="button" class="btn-remove-model" @click="removeModel(model)">{{ t('common.delete') }}</button>
-                    </div>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-confirm" @click="showModelListModal = false">{{ t('common.close') }}</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- 添加Claude配置模态框 -->
-        <div v-if="showClaudeConfigModal" class="modal-overlay" @click.self="closeClaudeConfigModal">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-claude-config-modal-title">
-                <div class="modal-title" id="add-claude-config-modal-title">{{ t('modal.claudeConfigAdd.title') }}</div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.configName') }}</label>
-                    <input v-model="newClaudeConfig.name" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'name') }]" :placeholder="t('placeholder.configNameExample')">
-                    <div v-if="claudeConfigFieldError('add', 'name')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'name') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API Key</label>
-                    <div class="input-with-toggle">
-                        <input v-model="newClaudeConfig.apiKey" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'apiKey') }]" :type="showAddClaudeConfigKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
-                        <button type="button" class="input-toggle-btn" @click="toggleAddClaudeConfigKey" :title="showAddClaudeConfigKey ? t('common.hide') : t('common.show')" :aria-label="showAddClaudeConfigKey ? t('common.hide') : t('common.show')">
-                            <svg v-if="!showAddClaudeConfigKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
-                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
-                        </button>
-                    </div>
-                    <div v-if="claudeConfigFieldError('add', 'apiKey')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'apiKey') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.baseUrl') }}</label>
-                    <input v-model="newClaudeConfig.baseUrl" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'baseUrl') }]" :placeholder="t('placeholder.baseUrlExampleClaude')">
-                    <div v-if="claudeConfigFieldError('add', 'baseUrl')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'baseUrl') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.modelName') }}</label>
-                    <input v-model="newClaudeConfig.model" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'model') }]" :placeholder="t('placeholder.modelExample')" autocomplete="off" spellcheck="false">
-                    <div v-if="claudeConfigFieldError('add', 'model')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'model') }}</div>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeClaudeConfigModal">{{ t('common.cancel') }}</button>
-                    <button class="btn btn-confirm" @click="addClaudeConfig" :disabled="!canSubmitClaudeConfig('add')">{{ t('common.add') }}</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- 编辑Claude配置模态框 -->
-        <div v-if="showEditConfigModal" class="modal-overlay" @click.self="closeEditConfigModal">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-claude-config-modal-title">
-                <div class="modal-title" id="edit-claude-config-modal-title">{{ t('modal.claudeConfigEdit.title') }}</div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.configName') }}</label>
-                    <input v-model="editingConfig.name" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'name') }]" :placeholder="t('field.configName')" readonly>
-                    <div v-if="claudeConfigFieldError('edit', 'name')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'name') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">API Key</label>
-                    <div class="input-with-toggle">
-                        <input v-model="editingConfig.apiKey" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'apiKey') }]" :type="showEditClaudeConfigKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
-                        <button type="button" class="input-toggle-btn" @click="toggleEditClaudeConfigKey" :title="showEditClaudeConfigKey ? t('common.hide') : t('common.show')" :aria-label="showEditClaudeConfigKey ? t('common.hide') : t('common.show')">
-                            <svg v-if="!showEditClaudeConfigKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
-                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
-                        </button>
-                    </div>
-                    <div v-if="claudeConfigFieldError('edit', 'apiKey')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'apiKey') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.baseUrl') }}</label>
-                    <input v-model="editingConfig.baseUrl" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'baseUrl') }]" :placeholder="t('placeholder.baseUrlExampleClaude')">
-                    <div v-if="claudeConfigFieldError('edit', 'baseUrl')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'baseUrl') }}</div>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.modelName') }}</label>
-                    <input v-model="editingConfig.model" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'model') }]" :placeholder="t('placeholder.modelExample')" autocomplete="off" spellcheck="false">
-                    <div v-if="claudeConfigFieldError('edit', 'model')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'model') }}</div>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeEditConfigModal">{{ t('common.cancel') }}</button>
-                    <button class="btn btn-confirm" @click="saveAndApplyConfig" :disabled="!canSubmitClaudeConfig('edit')">{{ t('common.saveApply') }}</button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Codex bridge pool modal -->
-        <div v-if="showCodexBridgePoolModal" class="modal-overlay" @click.self="showCodexBridgePoolModal = false">
-            <div class="modal modal-bridge-pool" role="dialog" aria-modal="true" aria-labelledby="codex-bridge-pool-modal-title">
-                <div class="modal-title" id="codex-bridge-pool-modal-title">
-                    <svg class="modal-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
-                    {{ t('config.localBridge.poolSettings') }}
-                </div>
-                <div class="bridge-pool-modal-hint">{{ t('config.localBridge.poolHint') }}</div>
-                <div v-if="localBridgeCandidateProviders().length === 0" class="bridge-pool-empty">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
-                    <span>{{ t('config.localBridge.noProviders') }}</span>
-                </div>
-                <div v-else class="bridge-pool-list">
-                    <label v-for="cp in localBridgeCandidateProviders()" :key="cp.name" class="bridge-pool-item">
-                        <span class="bridge-pool-item-name">{{ cp.name }}</span>
-                        <span class="bridge-pool-item-status" :class="{ active: !isLocalBridgeExcluded(cp.name) }">{{ isLocalBridgeExcluded(cp.name) ? t('common.disabled') : t('common.enabled') }}</span>
-                        <input type="checkbox" :checked="!isLocalBridgeExcluded(cp.name)" @change="toggleLocalBridgeExcluded(cp.name)" />
-                    </label>
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-confirm" @click="showCodexBridgePoolModal = false">{{ t('common.close') }}</button>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="showClaudeBridgePoolModal" class="modal-overlay" @click.self="showClaudeBridgePoolModal = false">
-            <div class="modal modal-bridge-pool" role="dialog" aria-modal="true" aria-labelledby="claude-bridge-pool-modal-title">
-                <div class="modal-title" id="claude-bridge-pool-modal-title">
-                    <svg class="modal-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
-                    {{ t('claude.localBridge.poolTitle') }}
-                </div>
-                <div class="bridge-pool-modal-hint">{{ t('claude.localBridge.poolHint') }}</div>
-                <div v-if="claudeLocalBridgeCandidateProviders().length === 0" class="bridge-pool-empty">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
-                    <span>{{ t('claude.localBridge.noProviders') }}</span>
-                </div>
-                <div v-else class="bridge-pool-list">
-                    <label v-for="cp in claudeLocalBridgeCandidateProviders()" :key="cp.name" class="bridge-pool-item">
-                        <span class="bridge-pool-item-name">{{ cp.name }}</span>
-                        <span class="bridge-pool-item-status" :class="{ active: !isClaudeLocalBridgeExcluded(cp.name) }">{{ isClaudeLocalBridgeExcluded(cp.name) ? t('claude.localBridge.disabled') : t('claude.localBridge.enabled') }}</span>
-                        <input type="checkbox" :checked="!isClaudeLocalBridgeExcluded(cp.name)" @change="toggleClaudeLocalBridgeExcluded(cp.name)" />
-                    </label>
-                </div>
-                <div class="btn-group">
-                    <button class="btn btn-confirm" @click="showClaudeBridgePoolModal = false">{{ t('common.close') }}</button>
-                </div>
-            </div>
-        </div>
-
+        <!-- 添加提供商模态框 -->
+        <div v-if="showAddModal" class="modal-overlay" @click.self="closeAddModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-provider-modal-title">
+                <div class="modal-title" id="add-provider-modal-title">{{ t('modal.providerAdd.title') }}</div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.name') }}</label>
+                    <input
+                        v-model="newProvider.name"
+                        :class="['form-input', { invalid: !!providerFieldError('add', 'name') }]"
+                        :placeholder="t('placeholder.providerNameExample')"
+                        autocomplete="off"
+                        spellcheck="false"
+                        @blur="normalizeProviderDraft('add')">
+                    <div v-if="providerFieldError('add', 'name')" class="form-hint form-error">{{ providerFieldError('add', 'name') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.apiEndpoint') }}</label>
+                    <input
+                        v-model="newProvider.url"
+                        :class="['form-input', { invalid: !!providerFieldError('add', 'url') }]"
+                        :placeholder="t('placeholder.apiEndpointExample')"
+                        autocomplete="off"
+                        spellcheck="false"
+                        @blur="normalizeProviderDraft('add')">
+                    <div v-if="providerFieldError('add', 'url')" class="form-hint form-error">{{ providerFieldError('add', 'url') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.modelName') }}</label>
+                    <input
+                        v-model="newProvider.model"
+                        :class="['form-input', { invalid: !!providerFieldError('add', 'model') }]"
+                        :placeholder="t('placeholder.modelExample')"
+                        autocomplete="off"
+                        spellcheck="false"
+                        @blur="normalizeProviderDraft('add')">
+                    <div v-if="providerFieldError('add', 'model')" class="form-hint form-error">{{ providerFieldError('add', 'model') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.apiKey') }}</label>
+                    <div class="input-with-toggle">
+                        <input v-model="newProvider.key" :class="['form-input', { invalid: !!providerFieldError('add', 'key') }]" :type="showAddProviderKey ? 'text' : 'password'" placeholder="sk-..." autocomplete="off" spellcheck="false" @blur="normalizeProviderDraft('add')">
+                        <button type="button" class="input-toggle-btn" @click="toggleAddProviderKey" :title="showAddProviderKey ? t('common.hide') : t('common.show')" :aria-label="showAddProviderKey ? t('common.hide') : t('common.show')">
+                            <svg v-if="!showAddProviderKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
+                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
+                        </button>
+                    </div>
+                    <div v-if="providerFieldError('add', 'key')" class="form-hint form-error">{{ providerFieldError('add', 'key') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">
+                        <input type="checkbox" v-model="newProvider.useTransform">
+                        {{ t('field.useBuiltinTransform') }}
+                    </label>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeAddModal">{{ t('common.cancel') }}</button>
+                    <button class="btn btn-confirm" @click="addProvider" :disabled="!canSubmitProvider('add')">{{ t('common.add') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 编辑提供商模态框 -->
+        <div v-if="showEditModal" class="modal-overlay" @click.self="closeEditModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-provider-modal-title">
+                <div class="modal-title" id="edit-provider-modal-title">{{ t('modal.providerEdit.title') }}</div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.name') }}</label>
+                    <input v-model="editingProvider.name" class="form-input" :placeholder="t('placeholder.providerName')" readonly>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.apiEndpoint') }}</label>
+                    <input
+                        v-model="editingProvider.url"
+                        :class="['form-input', { invalid: !!providerFieldError('edit', 'url') }]"
+                        :placeholder="t('placeholder.apiEndpointExample')"
+                        autocomplete="off"
+                        spellcheck="false"
+                        @blur="normalizeProviderDraft('edit')">
+                    <div v-if="providerFieldError('edit', 'url')" class="form-hint form-error">{{ providerFieldError('edit', 'url') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.apiKey') }}</label>
+                    <div class="input-with-toggle">
+                        <input v-model="editingProvider.key" class="form-input" :type="showEditProviderKey ? 'text' : 'password'" placeholder="sk-..." autocomplete="off" spellcheck="false">
+                        <button type="button" class="input-toggle-btn" @click="toggleEditProviderKey" :title="showEditProviderKey ? t('common.hide') : t('common.show')" :aria-label="showEditProviderKey ? t('common.hide') : t('common.show')">
+                            <svg v-if="!showEditProviderKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
+                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeEditModal">{{ t('common.cancel') }}</button>
+                    <button class="btn btn-confirm" @click="updateProvider" :disabled="!canSubmitProvider('edit')">{{ t('common.save') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 添加模型模态框 -->
+        <div v-if="showModelModal" class="modal-overlay" @click.self="closeModelModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-model-modal-title">
+                <div class="modal-title" id="add-model-modal-title">{{ t('modal.modelAdd.title') }}</div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.modelName') }}</label>
+                    <input v-model="newModelName" class="form-input" :placeholder="t('placeholder.modelExample')">
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeModelModal">{{ t('common.cancel') }}</button>
+                    <button class="btn btn-confirm" @click="addModel">{{ t('common.add') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 模型列表模态框 -->
+        <div v-if="showModelListModal" class="modal-overlay" @click.self="showModelListModal = false">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="manage-models-modal-title">
+                <div class="modal-title" id="manage-models-modal-title">{{ t('modal.modelManage.title') }}</div>
+
+                <div class="model-list">
+                    <div v-for="model in models" :key="model" class="model-item">
+                        <span>{{ model }}</span>
+                        <button type="button" class="btn-remove-model" @click="removeModel(model)">{{ t('common.delete') }}</button>
+                    </div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-confirm" @click="showModelListModal = false">{{ t('common.close') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 添加Claude配置模态框 -->
+        <div v-if="showClaudeConfigModal" class="modal-overlay" @click.self="closeClaudeConfigModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="add-claude-config-modal-title">
+                <div class="modal-title" id="add-claude-config-modal-title">{{ t('modal.claudeConfigAdd.title') }}</div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.configName') }}</label>
+                    <input v-model="newClaudeConfig.name" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'name') }]" :placeholder="t('placeholder.configNameExample')">
+                    <div v-if="claudeConfigFieldError('add', 'name')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'name') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">API Key</label>
+                    <div class="input-with-toggle">
+                        <input v-model="newClaudeConfig.apiKey" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'apiKey') }]" :type="showAddClaudeConfigKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
+                        <button type="button" class="input-toggle-btn" @click="toggleAddClaudeConfigKey" :title="showAddClaudeConfigKey ? t('common.hide') : t('common.show')" :aria-label="showAddClaudeConfigKey ? t('common.hide') : t('common.show')">
+                            <svg v-if="!showAddClaudeConfigKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
+                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
+                        </button>
+                    </div>
+                    <div v-if="claudeConfigFieldError('add', 'apiKey')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'apiKey') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.baseUrl') }}</label>
+                    <input v-model="newClaudeConfig.baseUrl" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'baseUrl') }]" :placeholder="t('placeholder.baseUrlExampleClaude')">
+                    <div v-if="claudeConfigFieldError('add', 'baseUrl')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'baseUrl') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.modelName') }}</label>
+                    <input v-model="newClaudeConfig.model" :class="['form-input', { invalid: !!claudeConfigFieldError('add', 'model') }]" :placeholder="t('placeholder.modelExample')" autocomplete="off" spellcheck="false">
+                    <div v-if="claudeConfigFieldError('add', 'model')" class="form-hint form-error">{{ claudeConfigFieldError('add', 'model') }}</div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeClaudeConfigModal">{{ t('common.cancel') }}</button>
+                    <button class="btn btn-confirm" @click="addClaudeConfig" :disabled="!canSubmitClaudeConfig('add')">{{ t('common.add') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 编辑Claude配置模态框 -->
+        <div v-if="showEditConfigModal" class="modal-overlay" @click.self="closeEditConfigModal">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="edit-claude-config-modal-title">
+                <div class="modal-title" id="edit-claude-config-modal-title">{{ t('modal.claudeConfigEdit.title') }}</div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.configName') }}</label>
+                    <input v-model="editingConfig.name" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'name') }]" :placeholder="t('field.configName')" readonly>
+                    <div v-if="claudeConfigFieldError('edit', 'name')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'name') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">API Key</label>
+                    <div class="input-with-toggle">
+                        <input v-model="editingConfig.apiKey" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'apiKey') }]" :type="showEditClaudeConfigKey ? 'text' : 'password'" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
+                        <button type="button" class="input-toggle-btn" @click="toggleEditClaudeConfigKey" :title="showEditClaudeConfigKey ? t('common.hide') : t('common.show')" :aria-label="showEditClaudeConfigKey ? t('common.hide') : t('common.show')">
+                            <svg v-if="!showEditClaudeConfigKey" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M10 4C5 4 1.73 8.11 1 10c.73 1.89 4 6 9 6s8.27-4.11 9-6c-.73-1.89-4-6-9-6z"/><circle cx="10" cy="10" r="3"/></svg>
+                            <svg v-else viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M2 2l16 16M8.2 4.2A9.9 9.9 0 0 1 10 4c5 0 8.27 4.11 9 6-.44.94-1.5 2.7-3.2 4.2M14.5 14.5A5.9 5.9 0 0 1 10 16c-5 0-8.27-4.11-9-6 .76-1.66 2.2-3.6 4.3-5"/></svg>
+                        </button>
+                    </div>
+                    <div v-if="claudeConfigFieldError('edit', 'apiKey')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'apiKey') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.baseUrl') }}</label>
+                    <input v-model="editingConfig.baseUrl" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'baseUrl') }]" :placeholder="t('placeholder.baseUrlExampleClaude')">
+                    <div v-if="claudeConfigFieldError('edit', 'baseUrl')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'baseUrl') }}</div>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.modelName') }}</label>
+                    <input v-model="editingConfig.model" :class="['form-input', { invalid: !!claudeConfigFieldError('edit', 'model') }]" :placeholder="t('placeholder.modelExample')" autocomplete="off" spellcheck="false">
+                    <div v-if="claudeConfigFieldError('edit', 'model')" class="form-hint form-error">{{ claudeConfigFieldError('edit', 'model') }}</div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeEditConfigModal">{{ t('common.cancel') }}</button>
+                    <button class="btn btn-confirm" @click="saveAndApplyConfig" :disabled="!canSubmitClaudeConfig('edit')">{{ t('common.saveApply') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Codex bridge pool modal -->
+        <div v-if="showCodexBridgePoolModal" class="modal-overlay" @click.self="showCodexBridgePoolModal = false">
+            <div class="modal modal-bridge-pool" role="dialog" aria-modal="true" aria-labelledby="codex-bridge-pool-modal-title">
+                <div class="modal-title" id="codex-bridge-pool-modal-title">
+                    <svg class="modal-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
+                    {{ t('config.localBridge.poolSettings') }}
+                </div>
+                <div class="bridge-pool-modal-hint">{{ t('config.localBridge.poolHint') }}</div>
+                <div v-if="localBridgeCandidateProviders().length === 0" class="bridge-pool-empty">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
+                    <span>{{ t('config.localBridge.noProviders') }}</span>
+                </div>
+                <div v-else class="bridge-pool-list">
+                    <label v-for="cp in localBridgeCandidateProviders()" :key="cp.name" class="bridge-pool-item">
+                        <span class="bridge-pool-item-name">{{ cp.name }}</span>
+                        <span class="bridge-pool-item-status" :class="{ active: !isLocalBridgeExcluded(cp.name) }">{{ isLocalBridgeExcluded(cp.name) ? t('common.disabled') : t('common.enabled') }}</span>
+                        <input type="checkbox" :checked="!isLocalBridgeExcluded(cp.name)" @change="toggleLocalBridgeExcluded(cp.name)" />
+                    </label>
+                </div>
+                <div class="btn-group">
+                    <button class="btn btn-confirm" @click="showCodexBridgePoolModal = false">{{ t('common.close') }}</button>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="showClaudeBridgePoolModal" class="modal-overlay" @click.self="showClaudeBridgePoolModal = false">
+            <div class="modal modal-bridge-pool" role="dialog" aria-modal="true" aria-labelledby="claude-bridge-pool-modal-title">
+                <div class="modal-title" id="claude-bridge-pool-modal-title">
+                    <svg class="modal-title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M6 8v4h6v4"/><path d="M18 8v4h-6v4"/></svg>
+                    {{ t('claude.localBridge.poolTitle') }}
+                </div>
+                <div class="bridge-pool-modal-hint">{{ t('claude.localBridge.poolHint') }}</div>
+                <div v-if="claudeLocalBridgeCandidateProviders().length === 0" class="bridge-pool-empty">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
+                    <span>{{ t('claude.localBridge.noProviders') }}</span>
+                </div>
+                <div v-else class="bridge-pool-list">
+                    <label v-for="cp in claudeLocalBridgeCandidateProviders()" :key="cp.name" class="bridge-pool-item">
+                        <span class="bridge-pool-item-name">{{ cp.name }}</span>
+                        <span class="bridge-pool-item-status" :class="{ active: !isClaudeLocalBridgeExcluded(cp.name) }">{{ isClaudeLocalBridgeExcluded(cp.name) ? t('claude.localBridge.disabled') : t('claude.localBridge.enabled') }}</span>
+                        <input type="checkbox" :checked="!isClaudeLocalBridgeExcluded(cp.name)" @change="toggleClaudeLocalBridgeExcluded(cp.name)" />
+                    </label>
+                </div>
+                <div class="btn-group">
+                    <button class="btn btn-confirm" @click="showClaudeBridgePoolModal = false">{{ t('common.close') }}</button>
+                </div>
+            </div>
+        </div>
+