codexmate 0.0.21 → 0.0.22

package/web-ui/partials/index/panel-config-codex.html

@@ -1,237 +1,234 @@
-                    <!-- Provider 配置模式（Codex） -->
-                    <div
-                        v-show="mainTab === 'config' && isProviderConfigMode"
-                        class="mode-content mode-cards"
-                        id="panel-config-provider"
-                        role="tabpanel"
-                        :aria-labelledby="'tab-config-' + configMode">
-                <!-- 添加提供商按钮 -->
-                <button class="btn-add" @click="showAddModal = true" v-if="!loading && !initError">
-                    <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
-                        <path d="M10 4v12M4 10h12"/>
-                    </svg>
-                    新增提供商
-                </button>
-
-                <!-- 模型选择器 -->
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">模型</span>
-                        <div class="selector-actions">
-                            <button class="btn-icon" @click="showModelModal = true" aria-label="Add model" title="添加模型" v-if="modelsSource === 'legacy'">+</button>
-                            <button class="btn-icon" @click="showModelListModal = true" aria-label="Manage models" title="管理模型" v-if="modelsSource === 'legacy'">≡</button>
-                        </div>
-                    </div>
-                    <select
-                        v-if="codexModelsLoading || modelsSource === 'remote'"
-                        class="model-select"
-                        v-model="currentModel"
-                        @change="onModelChange"
-                        :disabled="codexModelsLoading"
-                    >
-                        <option v-if="codexModelsLoading" value="">加载中...</option>
-                        <option v-else v-for="model in models" :key="model" :value="model">{{ model }}</option>
-                    </select>
-                    <input
-                        v-if="!codexModelsLoading && (modelsSource !== 'remote' || !modelsHasCurrent)"
-                        class="model-input"
-                        v-model="currentModel"
-                        @blur="onModelChange"
-                        :placeholder="activeProviderModelPlaceholder"
-                    >
-                    <div class="config-template-hint" v-if="modelsSource === 'unlimited'">
-                        当前无模型列表，可手填。
-                    </div>
-                    <div class="config-template-hint" v-if="modelsSource === 'error'">
-                        模型列表获取失败，可手填。
-                    </div>
-                    <div class="config-template-hint" v-if="modelsSource === 'remote' && !modelsHasCurrent">
-                        {{ isCodexConfigMode ? '当前模型不在列表，可手填或改模板。' : '当前模型不在列表，可手填。' }}
-                    </div>
-                    <div class="config-template-hint" v-if="isCodexConfigMode">
-                        先改模板，再应用。
-                    </div>
-                    <div class="config-template-hint" v-else-if="activeProviderBridgeHint">
-                        {{ activeProviderBridgeHint }} 模板仅限 Codex 编辑。
-                    </div>
-                    <button class="btn-tool btn-template-editor" v-if="isCodexConfigMode" @click="openConfigTemplateEditor" :disabled="loading || !!initError">
-                        打开模板编辑器
-                    </button>
-                </div>
-
-                <template v-if="isCodexConfigMode">
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">服务档</span>
-                    </div>
-                    <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
-                        <option value="fast">fast（默认）</option>
-                        <option value="standard">standard</option>
-                    </select>
-                    <div class="config-template-hint">
-                        仅 fast 写入 <code>service_tier</code>。
-                    </div>
-                </div>
-
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">推理强度</span>
-                    </div>
-                    <select class="model-select" v-model="modelReasoningEffort" @change="onReasoningEffortChange">
-                        <option value="high">high</option>
-                        <option value="medium">medium（默认）</option>
-                        <option value="low">low</option>
-                        <option value="xhigh">xhigh</option>
-                    </select>
-                    <div class="config-template-hint">
-                        控制推理深度；high 更深。
-                    </div>
-                </div>
-
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">压缩阈值</span>
-                        <div class="selector-actions">
-                            <button
-                                class="btn-tool btn-tool-compact"
-                                @click="resetCodexContextBudgetDefaults"
-                                :disabled="loading || !!initError || codexApplying">
-                                重置
-                            </button>
-                        </div>
-                    </div>
-                    <div class="codex-config-grid">
-                        <div class="form-group codex-config-field">
-                            <label class="form-label" for="codex-model-context-window">model_context_window</label>
-                            <input
-                                id="codex-model-context-window"
-                                v-model="modelContextWindowInput"
-                                class="form-input"
-                                inputmode="numeric"
-                                autocomplete="off"
-                                placeholder="例如: 190000"
-                                @focus="editingCodexBudgetField = 'modelContextWindowInput'"
-                                @input="sanitizePositiveIntegerDraft('modelContextWindowInput')"
-                                @blur="onModelContextWindowBlur"
-                                @keydown.enter.prevent="onModelContextWindowBlur">
-                            <div class="form-hint">上下文上限，默认 190000。</div>
-                        </div>
-                        <div class="form-group codex-config-field">
-                            <label class="form-label" for="codex-model-auto-compact-token-limit">model_auto_compact_token_limit</label>
-                            <input
-                                id="codex-model-auto-compact-token-limit"
-                                v-model="modelAutoCompactTokenLimitInput"
-                                class="form-input"
-                                inputmode="numeric"
-                                autocomplete="off"
-                                placeholder="例如: 185000"
-                                @focus="editingCodexBudgetField = 'modelAutoCompactTokenLimitInput'"
-                                @input="sanitizePositiveIntegerDraft('modelAutoCompactTokenLimitInput')"
-                                @blur="onModelAutoCompactTokenLimitBlur"
-                                @keydown.enter.prevent="onModelAutoCompactTokenLimitBlur">
-                            <div class="form-hint">自动压缩阈值，默认 185000。</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">AGENTS.md</span>
-                    </div>
-                    <button class="btn-tool" @click="openAgentsEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md' }}
-                    </button>
-                </div>
-
-                </template>
-
-                <div class="selector-section">
-                    <div class="selector-header">
-                        <span class="selector-title">健康检测</span>
-                    </div>
-                    <button class="btn-tool" @click="openHealthCheckDialog()" :disabled="loading || !!initError">
-                        检测对话
-                    </button>
-                </div>
-
-                <div v-if="!loading && !initError" class="card-list">
-                    <div v-for="provider in displayProvidersList" :key="provider.name"
-                         :class="['card', { active: displayCurrentProvider === provider.name }]"
-                         @click="switchProvider(provider.name)"
-                         @keydown.enter.self.prevent="switchProvider(provider.name)"
-                         @keydown.space.self.prevent="switchProvider(provider.name)"
-                         tabindex="0"
-                         role="button"
-                         :aria-current="displayCurrentProvider === provider.name ? 'true' : null">
-                        <div class="card-leading">
-                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}</div>
-                            <div class="card-content">
-                                <div class="card-title">
-                                    <span>{{ provider.name }}</span>
-                                    <span v-if="provider.readOnly" class="provider-readonly-badge">系统</span>
-                                </div>
-                                <div class="card-subtitle">
-                                    {{ provider.url || '未设 URL' }}
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card-trailing">
-                            <span :class="['pill', providerPillConfigured(provider) ? 'configured' : 'empty']">
-                                {{ providerPillText(provider) }}
-                            </span>
-                            <span v-if="speedResults[provider.name]" :class="['latency', speedResults[provider.name].ok ? 'ok' : 'error']">
-                                {{ formatLatency(speedResults[provider.name]) }}
-                            </span>
-                            <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openHealthCheckDialog({ providerName: provider.name, locked: true })" :aria-label="`Open health dialog for ${provider.name}`" title="检测对话">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-                                        <path d="M8 9h8"/>
-                                        <path d="M8 13h5"/>
-                                    </svg>
-                                </button>
-                                <button
-                                    v-if="!provider.readOnly"
-                                    class="card-action-btn"
-                                    :class="{ loading: providerShareLoading[provider.name], disabled: !shouldAllowProviderShare(provider) }"
-                                    :disabled="providerShareLoading[provider.name] || !shouldAllowProviderShare(provider)"
-                                    @click="copyProviderShareCommand(provider)"
-                                    :title="shouldAllowProviderShare(provider) ? '分享命令' : '不可分享'"
-                                    aria-label="Share import command">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
-                                        <path d="M16 6l-4-4-4 4"/>
-                                        <path d="M12 2v14"/>
-                                    </svg>
-                                </button>
-                                <button
-                                    v-if="!provider.readOnly"
-                                    class="card-action-btn"
-                                    :class="{ disabled: !shouldShowProviderEdit(provider) }"
-                                    :disabled="!shouldShowProviderEdit(provider)"
-                                    @click="openEditModal(provider)"
-                                    :aria-label="`Edit provider ${provider.name}`"
-                                    :title="shouldShowProviderEdit(provider) ? '编辑' : '不可编辑'">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-                                    </svg>
-                                </button>
-                                <button
-                                    v-if="!provider.readOnly"
-                                    class="card-action-btn delete"
-                                    :class="{ disabled: !shouldShowProviderDelete(provider) }"
-                                    :disabled="!shouldShowProviderDelete(provider)"
-                                    @click="deleteProvider(provider.name)"
-                                    :aria-label="`Delete provider ${provider.name}`"
-                                    :title="shouldShowProviderDelete(provider) ? '删除' : '不可删除'">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <path d="M3 6h18"/>
-                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+                    <!-- Provider 配置模式（Codex） -->
+                    <div
+                        v-show="mainTab === 'config' && isProviderConfigMode"
+                        class="mode-content mode-cards"
+                        id="panel-config-provider"
+                        role="tabpanel"
+                        :aria-labelledby="'tab-config-' + configMode">
+                <!-- 添加提供商按钮 -->
+                <button class="btn-add" @click="showAddModal = true" v-if="!loading && !initError">
+                    <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M10 4v12M4 10h12"/>
+                    </svg>
+                    {{ t('config.addProvider') }}
+                </button>
+
+                <!-- 模型选择器 -->
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.models') }}</span>
+                        <div class="selector-actions">
+                            <button class="btn-icon" @click="showModelModal = true" aria-label="Add model" title="添加模型" v-if="modelsSource === 'legacy'">+</button>
+                            <button class="btn-icon" @click="showModelListModal = true" aria-label="Manage models" title="管理模型" v-if="modelsSource === 'legacy'">≡</button>
+                        </div>
+                    </div>
+                    <select
+                        v-if="codexModelsLoading || modelsSource === 'remote'"
+                        class="model-select"
+                        v-model="currentModel"
+                        @change="onModelChange"
+                        :disabled="codexModelsLoading"
+                    >
+                        <option v-if="codexModelsLoading" value="">{{ t('config.modelLoading') }}</option>
+                        <option v-else v-for="model in models" :key="model" :value="model">{{ model }}</option>
+                    </select>
+                    <input
+                        v-if="!codexModelsLoading && (modelsSource !== 'remote' || !modelsHasCurrent)"
+                        class="model-input"
+                        v-model="currentModel"
+                        @blur="onModelChange"
+                        :placeholder="activeProviderModelPlaceholder"
+                    >
+                    <div class="config-template-hint" v-if="modelsSource === 'unlimited'">
+                        {{ t('config.models.unlimited') }}
+                    </div>
+                    <div class="config-template-hint" v-if="modelsSource === 'error'">
+                        {{ t('config.models.error') }}
+                    </div>
+                    <div class="config-template-hint" v-if="modelsSource === 'remote' && !modelsHasCurrent">
+                        {{ isCodexConfigMode ? t('config.models.notInList.codex') : t('config.models.notInList.other') }}
+                    </div>
+                    <div class="config-template-hint" v-if="isCodexConfigMode">
+                        {{ t('config.template.editFirst') }}
+                    </div>
+                    <div class="config-template-hint" v-else-if="activeProviderBridgeHint">
+                        {{ t('config.template.bridgeCodexOnly', { hint: activeProviderBridgeHint }) }}
+                    </div>
+                    <button class="btn-tool btn-template-editor" v-if="isCodexConfigMode" @click="openConfigTemplateEditor" :disabled="loading || !!initError">
+                        {{ t('config.template.openEditor') }}
+                    </button>
+                </div>
+
+                <template v-if="isCodexConfigMode">
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.serviceTier') }}</span>
+                    </div>
+                    <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
+                        <option value="fast">{{ t('config.serviceTier.fast') }}</option>
+                        <option value="standard">standard</option>
+                    </select>
+                    <div class="config-template-hint">
+                        {{ t('config.serviceTier.hint', { field: 'service_tier' }) }}
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.reasoningEffort') }}</span>
+                    </div>
+                    <select class="model-select" v-model="modelReasoningEffort" @change="onReasoningEffortChange">
+                        <option value="high">high</option>
+                        <option value="medium">{{ t('config.reasoningEffort.medium') }}</option>
+                        <option value="low">low</option>
+                        <option value="xhigh">xhigh</option>
+                    </select>
+                    <div class="config-template-hint">
+                        {{ t('config.reasoningEffort.hint') }}
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('config.contextBudget') }}</span>
+                        <div class="selector-actions">
+                            <button
+                                class="btn-tool btn-tool-compact"
+                                @click="resetCodexContextBudgetDefaults"
+                                :disabled="loading || !!initError || codexApplying">
+                                {{ t('config.reset') }}
+                            </button>
+                        </div>
+                    </div>
+                    <div class="codex-config-grid">
+                        <div class="form-group codex-config-field">
+                            <label class="form-label" for="codex-model-context-window">model_context_window</label>
+                            <input
+                                id="codex-model-context-window"
+                                v-model="modelContextWindowInput"
+                                class="form-input"
+                                inputmode="numeric"
+                                autocomplete="off"
+                                :placeholder="t('config.example', { value: 190000 })"
+                                @focus="editingCodexBudgetField = 'modelContextWindowInput'"
+                                @input="sanitizePositiveIntegerDraft('modelContextWindowInput')"
+                                @blur="onModelContextWindowBlur"
+                                @keydown.enter.prevent="onModelContextWindowBlur">
+                            <div class="form-hint">{{ t('config.contextWindow.hint') }}</div>
+                        </div>
+                        <div class="form-group codex-config-field">
+                            <label class="form-label" for="codex-model-auto-compact-token-limit">model_auto_compact_token_limit</label>
+                            <input
+                                id="codex-model-auto-compact-token-limit"
+                                v-model="modelAutoCompactTokenLimitInput"
+                                class="form-input"
+                                inputmode="numeric"
+                                autocomplete="off"
+                                :placeholder="t('config.example', { value: 185000 })"
+                                @focus="editingCodexBudgetField = 'modelAutoCompactTokenLimitInput'"
+                                @input="sanitizePositiveIntegerDraft('modelAutoCompactTokenLimitInput')"
+                                @blur="onModelAutoCompactTokenLimitBlur"
+                                @keydown.enter.prevent="onModelAutoCompactTokenLimitBlur">
+                            <div class="form-hint">{{ t('config.autoCompact.hint') }}</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">AGENTS.md</span>
+                    </div>
+                    <button class="btn-tool" @click="openAgentsEditor" :disabled="loading || !!initError || agentsLoading">
+                        {{ agentsLoading ? t('config.modelLoading') : t('config.agents.open') }}
+                    </button>
+                </div>
+
+                </template>
+
+                <div v-if="!loading && !initError" class="card-list">
+                    <div v-for="provider in displayProvidersList" :key="provider.name"
+                         :class="['card', { active: displayCurrentProvider === provider.name }]"
+                         @click="switchProvider(provider.name)"
+                         @keydown.enter.self.prevent="switchProvider(provider.name)"
+                         @keydown.space.self.prevent="switchProvider(provider.name)"
+                         tabindex="0"
+                         role="button"
+                         :aria-current="displayCurrentProvider === provider.name ? 'true' : null">
+                        <div class="card-leading">
+                            <div class="card-icon">{{ provider.name.charAt(0).toUpperCase() }}</div>
+                            <div class="card-content">
+                                <div class="card-title">
+                                    <span>{{ provider.name }}</span>
+                                    <span v-if="provider.readOnly" class="provider-readonly-badge">{{ t('config.badge.system') }}</span>
+                                </div>
+                                <div class="card-subtitle">
+                                    {{ provider.url || t('config.url.unset') }}
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-trailing">
+                            <span :class="['pill', providerPillConfigured(provider) ? 'configured' : 'empty']">
+                                {{ providerPillText(provider) }}
+                            </span>
+                            <span v-if="speedResults[provider.name]" :class="['latency', speedResults[provider.name].ok ? 'ok' : 'error']">
+                                {{ formatLatency(speedResults[provider.name]) }}
+                            </span>
+                            <div class="card-actions" @click.stop>
+                                <button
+                                    class="card-action-btn"
+                                    @click="openHealthCheckDialog({ providerName: provider.name, locked: true })"
+                                    :disabled="displayCurrentProvider !== provider.name"
+                                    :aria-label="`Open health dialog for ${provider.name}`"
+                                    :title="displayCurrentProvider === provider.name ? t('config.healthTest') : t('config.switchProviderFirst')"
+                                >
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                                        <path d="M8 9h8"/>
+                                        <path d="M8 13h5"/>
+                                    </svg>
+                                </button>
+                                <button
+                                    v-if="!provider.readOnly"
+                                    class="card-action-btn"
+                                    :class="{ loading: providerShareLoading[provider.name], disabled: !shouldAllowProviderShare(provider) }"
+                                    :disabled="providerShareLoading[provider.name] || !shouldAllowProviderShare(provider)"
+                                    @click="copyProviderShareCommand(provider)"
+                                    :title="shouldAllowProviderShare(provider) ? t('config.shareCommand') : t('config.shareDisabled')"
+                                    aria-label="Share import command">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
+                                        <path d="M16 6l-4-4-4 4"/>
+                                        <path d="M12 2v14"/>
+                                    </svg>
+                                </button>
+                                <button
+                                    v-if="!provider.readOnly"
+                                    class="card-action-btn"
+                                    :class="{ disabled: !shouldShowProviderEdit(provider) }"
+                                    :disabled="!shouldShowProviderEdit(provider)"
+                                    @click="openEditModal(provider)"
+                                    :aria-label="`Edit provider ${provider.name}`"
+                                    :title="shouldShowProviderEdit(provider) ? '编辑' : '不可编辑'">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                                    </svg>
+                                </button>
+                                <button
+                                    v-if="!provider.readOnly"
+                                    class="card-action-btn delete"
+                                    :class="{ disabled: !shouldShowProviderDelete(provider) }"
+                                    :disabled="!shouldShowProviderDelete(provider)"
+                                    @click="deleteProvider(provider.name)"
+                                    :aria-label="`Delete provider ${provider.name}`"
+                                    :title="shouldShowProviderDelete(provider) ? '删除' : '不可删除'">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M3 6h18"/>
+                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>