codexmate 0.0.20 → 0.0.22

package/web-ui/partials/index/modal-skills.html

@@ -2,11 +2,11 @@
             <div class="modal modal-wide skills-modal" role="dialog" aria-modal="true" aria-labelledby="skills-modal-title">
                 <div class="modal-header skills-modal-header">
                     <div>
-                        <div class="modal-title" id="skills-modal-title">Skills 管理</div>
-                        <div class="skills-modal-subtitle">集中管理当前宿主的本地技能目录，支持检索筛选、多选删除、跨应用导入、ZIP 导入与导出。</div>
+                        <div class="modal-title" id="skills-modal-title">{{ t('modal.skills.title') }}</div>
+                        <div class="skills-modal-subtitle">{{ t('modal.skills.subtitle') }}</div>
                     </div>
                     <div class="modal-header-actions skills-modal-actions">
-                        <div class="market-target-switch market-target-switch-compact" role="group" aria-label="选择 Skills 管理目标">
+                        <div class="market-target-switch market-target-switch-compact" role="group" :aria-label="t('modal.skills.target.aria')">
                             <button
                                 type="button"
                                 :class="['market-target-chip', { active: skillsTargetApp === 'codex' }]"
@@ -25,154 +25,170 @@
                             </button>
                         </div>
                         <button class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
-                            {{ skillsLoading ? '刷新中...' : '刷新' }}
+                            {{ skillsLoading ? t('common.refreshing') : t('common.refresh') }}
                         </button>
                     </div>
                 </div>
 
                 <div class="form-group skills-root-group">
-                    <label class="form-label">Skills 目录（{{ skillsTargetLabel }}）</label>
+                    <label class="form-label">{{ t('modal.skills.rootDir', { label: skillsTargetLabel }) }}</label>
                     <div class="skills-root-box">{{ skillsRootPath || skillsDefaultRootPath }}</div>
                 </div>
 
                 <div class="skills-summary-strip">
                     <div class="skills-summary-item">
-                        <span class="skills-summary-label">安装目标</span>
+                        <span class="skills-summary-label">{{ t('modal.skills.summary.target') }}</span>
                         <strong class="skills-summary-value">{{ skillsTargetLabel }}</strong>
                     </div>
                     <div class="skills-summary-item">
-                        <span class="skills-summary-label">本地总数</span>
+                        <span class="skills-summary-label">{{ t('modal.skills.summary.total') }}</span>
                         <strong class="skills-summary-value">{{ skillsList.length }}</strong>
                     </div>
                     <div class="skills-summary-item">
-                        <span class="skills-summary-label">含 SKILL.md</span>
+                        <span class="skills-summary-label">{{ t('modal.skills.summary.withSkill') }}</span>
                         <strong class="skills-summary-value">{{ skillsConfiguredCount }}</strong>
                     </div>
                     <div class="skills-summary-item">
-                        <span class="skills-summary-label">缺少 SKILL.md</span>
+                        <span class="skills-summary-label">{{ t('modal.skills.summary.missingSkill') }}</span>
                         <strong class="skills-summary-value">{{ skillsMissingSkillFileCount }}</strong>
                     </div>
                     <div class="skills-summary-item">
-                        <span class="skills-summary-label">可导入</span>
+                        <span class="skills-summary-label">{{ t('modal.skills.summary.importable') }}</span>
                         <strong class="skills-summary-value">{{ skillsImportList.length }}</strong>
                     </div>
                 </div>
 
-                <div class="skills-panel">
-                    <div class="skills-panel-header">
-                        <div class="skills-panel-title-wrap">
-                            <div class="skills-panel-title">本地 Skills</div>
-                            <div class="skills-panel-note">支持关键词检索与状态筛选，勾选后可批量删除当前 {{ skillsTargetLabel }} 本地 skill。</div>
-                        </div>
-                        <button
-                            class="btn-mini"
-                            @click="resetSkillsFilters"
-                            :disabled="skillsLoading || skillsDeleting || !skillsFilterDirty">
-                            重置筛选
-                        </button>
-                    </div>
+                <div class="skills-manager-grid" :aria-label="t('modal.skills.panel.aria')">
+                    <div class="skills-manager-col skills-manager-left">
+                        <div class="skills-panel">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">{{ t('modal.skills.local.title') }}</div>
+                                    <div class="skills-panel-note">{{ t('modal.skills.local.note') }}</div>
+                                </div>
+                                <button
+                                    class="btn-mini"
+                                    @click="resetSkillsFilters"
+                                    :disabled="skillsLoading || skillsDeleting || !skillsFilterDirty">
+                                    {{ t('common.resetFilters') }}
+                                </button>
+                            </div>
 
-                    <div class="skills-filter-row">
-                        <input
-                            class="form-input"
-                            type="text"
-                            v-model.trim="skillsKeyword"
-                            aria-label="按名称或描述筛选 skill"
-                            placeholder="按目录名/显示名/描述检索">
-                        <select class="form-select skills-status-select" v-model="skillsStatusFilter" aria-label="按 SKILL.md 状态筛选 skill">
-                            <option value="all">全部状态</option>
-                            <option value="with-skill-file">仅含 SKILL.md</option>
-                            <option value="missing-skill-file">仅缺少 SKILL.md</option>
-                        </select>
-                    </div>
+                            <div class="skills-filter-row">
+                                <input
+                                    class="form-input"
+                                    type="text"
+                                    v-model.trim="skillsKeyword"
+                                    :aria-label="t('modal.skills.filter.keywordAria')"
+                                    :placeholder="t('modal.skills.filter.keywordPlaceholder')">
+                                <select class="form-select skills-status-select" v-model="skillsStatusFilter" :aria-label="t('modal.skills.filter.statusAria')">
+                                    <option value="all">{{ t('modal.skills.filter.status.all') }}</option>
+                                    <option value="with-skill-file">{{ t('modal.skills.filter.status.withSkill') }}</option>
+                                    <option value="missing-skill-file">{{ t('modal.skills.filter.status.missingSkill') }}</option>
+                                </select>
+                            </div>
 
-                    <div class="skill-toolbar">
-                        <label class="skill-select-all">
-                            <input type="checkbox" :checked="skillsAllSelected" @change="toggleAllSkillsSelection" :disabled="skillsLoading || skillsDeleting || skillsSelectableNames.length === 0">
-                            <span>{{ skillsAllSelected ? '取消全选' : '全选' }}</span>
-                        </label>
-                        <span class="skill-toolbar-count">已选 {{ skillsSelectedCount }}（筛选命中 {{ filteredSkillsList.length }} / {{ skillsList.length }}，筛选内已选 {{ skillsVisibleSelectedCount }}）</span>
-                    </div>
+                            <div class="skill-toolbar">
+                                <label class="skill-select-all">
+                                    <input type="checkbox" :checked="skillsAllSelected" @change="toggleAllSkillsSelection" :disabled="skillsLoading || skillsDeleting || skillsSelectableNames.length === 0">
+                                    <span>{{ skillsAllSelected ? t('common.unselectAll') : t('common.selectAll') }}</span>
+                                </label>
+                                <span class="skill-toolbar-count">{{ t('modal.skills.selection.stats', { selected: skillsSelectedCount, filtered: filteredSkillsList.length, total: skillsList.length, visibleSelected: skillsVisibleSelectedCount }) }}</span>
+                            </div>
 
-                    <div v-if="skillsList.length === 0" class="skills-empty-state">暂无可管理的 skill。</div>
-                    <div v-else-if="filteredSkillsList.length === 0" class="skills-empty-state">当前筛选条件下没有匹配的 skill。</div>
-                    <div v-else class="skill-list">
-                        <label
-                            class="skill-item"
-                            :class="{ selected: skillsSelectedNames.includes(skill.name) }"
-                            v-for="skill in filteredSkillsList"
-                            :key="'skill-' + skill.name">
-                            <input type="checkbox" v-model="skillsSelectedNames" :value="skill.name" :disabled="skillsDeleting">
-                            <div class="skill-item-main">
-                                <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
-                                <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
-                                <div class="skill-item-meta">
-                                    <span class="skill-item-path" :title="skill.path">{{ skill.path }}</span>
-                                    <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
-                                        {{ skill.hasSkillFile ? '含 SKILL.md' : '缺少 SKILL.md' }}
-                                    </span>
-                                    <span class="pill source">{{ skill.sourceType === 'symlink' ? '符号链接' : '目录' }}</span>
-                                </div>
+                            <div v-if="skillsList.length === 0" class="skills-empty-state">{{ t('modal.skills.empty.local') }}</div>
+                            <div v-else-if="filteredSkillsList.length === 0" class="skills-empty-state">{{ t('modal.skills.empty.filtered') }}</div>
+                            <div v-else class="skill-list">
+                                <label
+                                    class="skill-item"
+                                    :class="{ selected: skillsSelectedNames.includes(skill.name) }"
+                                    v-for="skill in filteredSkillsList"
+                                    :key="'skill-' + skill.name">
+                                    <input type="checkbox" v-model="skillsSelectedNames" :value="skill.name" :disabled="skillsDeleting">
+                                    <div class="skill-item-main">
+                                        <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
+                                        <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
+                                        <div class="skill-item-meta">
+                                            <span class="skill-item-path" :title="skill.path">{{ skill.path }}</span>
+                                            <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
+                                                {{ skill.hasSkillFile ? t('modal.skills.pill.hasSkillFile') : t('modal.skills.pill.missingSkillFile') }}
+                                            </span>
+                                            <span class="pill source">{{ skill.sourceType === 'symlink' ? t('modal.skills.pill.symlink') : t('modal.skills.pill.dir') }}</span>
+                                        </div>
+                                    </div>
+                                </label>
                             </div>
-                        </label>
+                        </div>
                     </div>
-                </div>
 
-                <div class="skills-panel skills-import-block">
-                    <div class="skills-panel-header">
-                        <div class="skills-panel-title-wrap">
-                            <div class="skills-import-title">跨应用导入</div>
-                            <div class="skills-panel-note">从其他应用扫描并导入未托管技能，支持多选批量导入到当前 {{ skillsTargetLabel }}。</div>
+                    <div class="skills-manager-col skills-manager-right">
+                        <div class="skills-panel skills-import-block">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-import-title">{{ t('modal.skills.import.title') }}</div>
+                                    <div class="skills-panel-note">{{ t('modal.skills.import.note', { label: skillsTargetLabel }) }}</div>
+                                </div>
+                                <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
+                                    {{ skillsScanningImports ? t('common.scanning') : t('modal.skills.import.scan') }}
+                                </button>
+                            </div>
+                            <div class="skill-toolbar">
+                                <label class="skill-select-all">
+                                    <input type="checkbox" :checked="skillsImportAllSelected" @change="toggleAllSkillsImportSelection" :disabled="skillsScanningImports || skillsImporting || skillsImportSelectableKeys.length === 0">
+                                    <span>{{ skillsImportAllSelected ? t('common.unselectAll') : t('common.selectAll') }}</span>
+                                </label>
+                                <span class="skill-toolbar-count">{{ t('modal.skills.import.stats', { selected: skillsImportSelectedCount, total: skillsImportSelectableKeys.length, configured: skillsImportConfiguredCount, missing: skillsImportMissingSkillFileCount }) }}</span>
+                            </div>
+                            <div v-if="skillsImportList.length === 0" class="skills-empty-state skills-import-empty">{{ t('modal.skills.import.emptyHint') }}</div>
+                            <div v-else class="skill-list skills-import-list">
+                                <label
+                                    class="skill-item"
+                                    :class="{ selected: skillsImportSelectedKeys.includes(buildSkillImportKey(skill)) }"
+                                    v-for="skill in skillsImportList"
+                                    :key="'import-skill-' + buildSkillImportKey(skill)">
+                                    <input type="checkbox" v-model="skillsImportSelectedKeys" :value="buildSkillImportKey(skill)" :disabled="skillsImporting">
+                                    <div class="skill-item-main">
+                                        <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
+                                        <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
+                                        <div class="skill-item-meta">
+                                            <span class="skill-item-path" :title="skill.sourcePath">{{ skill.sourcePath }}</span>
+                                            <span class="pill source">{{ skill.sourceLabel }}</span>
+                                            <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
+                                                {{ skill.hasSkillFile ? t('modal.skills.pill.hasSkillFile') : t('modal.skills.pill.missingSkillFile') }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </label>
+                            </div>
                         </div>
-                        <button class="btn-mini" @click="scanImportableSkills" :disabled="skillsLoading || skillsDeleting || skillsScanningImports || skillsImporting || skillsZipImporting || skillsExporting">
-                            {{ skillsScanningImports ? '扫描中...' : '扫描可导入' }}
-                        </button>
-                    </div>
-                    <div class="skill-toolbar">
-                        <label class="skill-select-all">
-                            <input type="checkbox" :checked="skillsImportAllSelected" @change="toggleAllSkillsImportSelection" :disabled="skillsScanningImports || skillsImporting || skillsImportSelectableKeys.length === 0">
-                            <span>{{ skillsImportAllSelected ? '取消全选' : '全选' }}</span>
-                        </label>
-                        <span class="skill-toolbar-count">已选 {{ skillsImportSelectedCount }} / {{ skillsImportSelectableKeys.length }}，含 SKILL.md {{ skillsImportConfiguredCount }}，缺失 {{ skillsImportMissingSkillFileCount }}</span>
-                    </div>
-                    <div v-if="skillsImportList.length === 0" class="skills-empty-state skills-import-empty">暂无可导入 skill，点击“扫描可导入”。</div>
-                    <div v-else class="skill-list skills-import-list">
-                        <label
-                            class="skill-item"
-                            :class="{ selected: skillsImportSelectedKeys.includes(buildSkillImportKey(skill)) }"
-                            v-for="skill in skillsImportList"
-                            :key="'import-skill-' + buildSkillImportKey(skill)">
-                            <input type="checkbox" v-model="skillsImportSelectedKeys" :value="buildSkillImportKey(skill)" :disabled="skillsImporting">
-                            <div class="skill-item-main">
-                                <div class="skill-item-title">{{ skill.displayName || skill.name }}</div>
-                                <div v-if="skill.description" class="skill-item-description">{{ skill.description }}</div>
-                                <div class="skill-item-meta">
-                                    <span class="skill-item-path" :title="skill.sourcePath">{{ skill.sourcePath }}</span>
-                                    <span class="pill source">{{ skill.sourceLabel }}</span>
-                                    <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
-                                        {{ skill.hasSkillFile ? '含 SKILL.md' : '缺少 SKILL.md' }}
-                                    </span>
+
+                        <div class="skills-panel skills-actions-panel">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">{{ t('modal.skills.bulk.title') }}</div>
+                                    <div class="skills-panel-note">{{ t('modal.skills.bulk.note') }}</div>
                                 </div>
                             </div>
-                        </label>
+                            <div class="skills-actions-grid">
+                                <button class="btn btn-cancel" @click="triggerSkillsZipImport" :disabled="skillsZipImporting || skillsDeleting || skillsImporting || skillsScanningImports || skillsExporting">
+                                    {{ skillsZipImporting ? t('modal.skills.actions.zipImporting') : t('modal.skills.actions.zipImport') }}
+                                </button>
+                                <button class="btn btn-confirm" @click="exportSelectedSkills" :disabled="skillsExporting || skillsSelectedCount === 0 || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting">
+                                    {{ skillsExporting ? t('modal.skills.actions.exporting') : t('modal.skills.actions.exportSelected') }}
+                                </button>
+                                <button class="btn btn-confirm secondary" @click="importSelectedSkills" :disabled="skillsImporting || skillsScanningImports || skillsImportSelectedCount === 0 || skillsZipImporting || skillsExporting || skillsDeleting">
+                                    {{ skillsImporting ? t('modal.skills.actions.importing') : t('modal.skills.actions.importSelected') }}
+                                </button>
+                                <button class="btn btn-confirm btn-danger" @click="deleteSelectedSkills" :disabled="skillsDeleting || skillsSelectedCount === 0 || skillsImporting || skillsZipImporting || skillsExporting">
+                                    {{ skillsDeleting ? t('modal.skills.actions.deleting') : t('modal.skills.actions.deleteSelected') }}
+                                </button>
+                                <button class="btn btn-cancel skills-close-btn" @click="closeSkillsModal" :disabled="skillsLoading || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting || skillsExporting">
+                                    {{ t('common.close') }}
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeSkillsModal" :disabled="skillsLoading || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting || skillsExporting">关闭</button>
-                    <button class="btn btn-cancel" @click="triggerSkillsZipImport" :disabled="skillsZipImporting || skillsDeleting || skillsImporting || skillsScanningImports || skillsExporting">
-                        {{ skillsZipImporting ? 'ZIP 导入中...' : '导入 ZIP' }}
-                    </button>
-                    <button class="btn btn-confirm" @click="exportSelectedSkills" :disabled="skillsExporting || skillsSelectedCount === 0 || skillsDeleting || skillsImporting || skillsScanningImports || skillsZipImporting">
-                        {{ skillsExporting ? '导出中...' : '导出选中' }}
-                    </button>
-                    <button class="btn btn-confirm" @click="importSelectedSkills" :disabled="skillsImporting || skillsScanningImports || skillsImportSelectedCount === 0 || skillsZipImporting || skillsExporting || skillsDeleting">
-                        {{ skillsImporting ? '导入中...' : '导入选中' }}
-                    </button>
-                    <button class="btn btn-confirm btn-danger" @click="deleteSelectedSkills" :disabled="skillsDeleting || skillsSelectedCount === 0 || skillsImporting || skillsZipImporting || skillsExporting">
-                        {{ skillsDeleting ? '删除中...' : '删除选中' }}
-                    </button>
-                </div>
             </div>
         </div>
 

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

@@ -1,85 +1,47 @@
         <!-- 添加提供商模态框 -->
         <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">添加提供商</div>
+                <div class="modal-title" id="add-provider-modal-title">{{ t('modal.providerAdd.title') }}</div>
 
                 <div class="form-group">
-                    <label class="form-label">名称</label>
-                    <input v-model="newProvider.name" class="form-input" placeholder="例如: myapi">
+                    <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">API 端点</label>
-                    <input v-model="newProvider.url" class="form-input" placeholder="https://api.example.com/v1">
+                    <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">认证密钥</label>
+                    <label class="form-label">{{ t('field.apiKey') }}</label>
                     <input v-model="newProvider.key" class="form-input" type="password" placeholder="sk-...">
                 </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeAddModal">取消</button>
-                    <button class="btn btn-confirm" @click="addProvider">添加</button>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="showInstallModal" class="modal-overlay" @click.self="closeInstallModal">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="install-cli-modal-title">
-                <div class="modal-header">
-                    <div class="modal-title" id="install-cli-modal-title">CLI 安装</div>
-                </div>
-
-                <div class="list-row">
-                    <label class="form-label">包管理器</label>
-                    <select class="form-input" v-model="installPackageManager">
-                        <option value="npm">npm</option>
-                        <option value="pnpm">pnpm</option>
-                        <option value="bun">bun</option>
-                    </select>
-                    <label class="form-label">镜像源</label>
-                    <div class="install-action-tabs">
-                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'default' }" @click="setInstallRegistryPreset('default')">官方</button>
-                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
-                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'tencent' }" @click="setInstallRegistryPreset('tencent')">腾讯云</button>
-                        <button class="btn-mini" :class="{ active: installRegistryPreset === 'custom' }" @click="setInstallRegistryPreset('custom')">自定义</button>
-                    </div>
-                    <input
-                        v-if="installRegistryPreset === 'custom'"
-                        v-model="installRegistryCustom"
-                        class="form-input install-registry-input"
-                        placeholder="https://registry.example.com">
-                    <div class="form-hint install-registry-hint" v-if="installRegistryPreview">
-                        命令将附加：--registry={{ installRegistryPreview }}
-                    </div>
-                    <div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">
-                        请输入完整 URL（含 http/https），将自动附加到命令。
-                    </div>
-                    <label class="form-label">操作</label>
-                    <div class="install-action-tabs">
-                        <button class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">安装</button>
-                        <button class="btn-mini" :class="{ active: installCommandAction === 'update' }" @click="setInstallCommandAction('update')">升级</button>
-                        <button class="btn-mini" :class="{ active: installCommandAction === 'uninstall' }" @click="setInstallCommandAction('uninstall')">卸载</button>
-                    </div>
-                </div>
-
-                <div class="install-list">
-                    <div
-                        class="install-row"
-                        v-for="target in installTargetCards"
-                        :key="'install-command-' + target.id + '-' + installCommandAction">
-                        <div class="install-row-main">
-                            <div class="install-row-title">{{ target.name }}</div>
-                            <code class="install-command">{{ target.command }}</code>
-                        </div>
-                        <button class="btn-mini" :disabled="!target.command" @click="copyInstallCommand(target.command)">复制</button>
+                <div class="form-group">
+                    <label class="form-label">
+                        <input type="checkbox" v-model="newProvider.useTransform">
+                        {{ t('field.useBuiltinTransform') }}
+                    </label>
+                    <div class="form-hint">
+                        {{ t('hint.useBuiltinTransform') }}
                     </div>
                 </div>
 
-                <div class="install-help">
-                    <div class="form-label">常见问题</div>
-                    <ul class="install-help-list">
-                        <li v-for="tip in installTroubleshootingTips" :key="tip">{{ tip }}</li>
-                    </ul>
+                <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>
@@ -87,25 +49,32 @@
         <!-- 编辑提供商模态框 -->
         <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">编辑提供商</div>
+                <div class="modal-title" id="edit-provider-modal-title">{{ t('modal.providerEdit.title') }}</div>
 
                 <div class="form-group">
-                    <label class="form-label">名称</label>
-                    <input v-model="editingProvider.name" class="form-input" placeholder="提供商名称" readonly>
+                    <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">API 端点</label>
-                    <input v-model="editingProvider.url" class="form-input" placeholder="https://api.example.com/v1">
+                    <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">认证密钥</label>
-                    <input v-model="editingProvider.key" class="form-input" type="password" placeholder="留空则保持不变">
-                    <div class="form-hint">留空表示不修改密钥</div>
+                    <label class="form-label">{{ t('field.apiKey') }}</label>
+                    <input v-model="editingProvider.key" class="form-input" type="password" :placeholder="t('placeholder.keepUnchanged')">
+                    <div class="form-hint">{{ t('hint.keepKeyUnchanged') }}</div>
                 </div>
 
                 <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeEditModal">取消</button>
-                    <button class="btn btn-confirm" @click="updateProvider">保存</button>
+                    <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>
@@ -113,16 +82,16 @@
         <!-- 添加模型模态框 -->
         <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">添加模型</div>
+                <div class="modal-title" id="add-model-modal-title">{{ t('modal.modelAdd.title') }}</div>
 
                 <div class="form-group">
-                    <label class="form-label">模型名称</label>
-                    <input v-model="newModelName" class="form-input" placeholder="例如: gpt-5">
+                    <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">取消</button>
-                    <button class="btn btn-confirm" @click="addModel">添加</button>
+                    <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>
@@ -130,17 +99,17 @@
         <!-- 模型列表模态框 -->
         <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">管理模型</div>
+                <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)">删除</button>
+                        <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">关闭</button>
+                    <button class="btn btn-confirm" @click="showModelListModal = false">{{ t('common.close') }}</button>
                 </div>
             </div>
         </div>
@@ -148,24 +117,24 @@
         <!-- 添加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">添加 Claude Code 配置</div>
+                <div class="modal-title" id="add-claude-config-modal-title">{{ t('modal.claudeConfigAdd.title') }}</div>
 
                 <div class="form-group">
-                    <label class="form-label">配置名称</label>
-                    <input v-model="newClaudeConfig.name" class="form-input" placeholder="例如: 智谱GLM">
+                    <label class="form-label">{{ t('field.configName') }}</label>
+                    <input v-model="newClaudeConfig.name" class="form-input" :placeholder="t('placeholder.configNameExample')">
                 </div>
                 <div class="form-group">
                     <label class="form-label">API Key</label>
-                    <input v-model="newClaudeConfig.apiKey" class="form-input" type="password" autocomplete="off" spellcheck="false" placeholder="sk-ant-...">
+                    <input v-model="newClaudeConfig.apiKey" class="form-input" type="password" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
                 </div>
                 <div class="form-group">
-                    <label class="form-label">Base URL</label>
-                    <input v-model="newClaudeConfig.baseUrl" class="form-input" placeholder="https://open.bigmodel.cn/api/anthropic">
+                    <label class="form-label">{{ t('field.baseUrl') }}</label>
+                    <input v-model="newClaudeConfig.baseUrl" class="form-input" :placeholder="t('placeholder.baseUrlExampleClaude')">
                 </div>
 
                 <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeClaudeConfigModal">取消</button>
-                    <button class="btn btn-confirm" @click="addClaudeConfig">添加</button>
+                    <button class="btn btn-cancel" @click="closeClaudeConfigModal">{{ t('common.cancel') }}</button>
+                    <button class="btn btn-confirm" @click="addClaudeConfig">{{ t('common.add') }}</button>
                 </div>
             </div>
         </div>
@@ -173,24 +142,24 @@
         <!-- 编辑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">编辑 Claude Code 配置</div>
+                <div class="modal-title" id="edit-claude-config-modal-title">{{ t('modal.claudeConfigEdit.title') }}</div>
 
                 <div class="form-group">
-                    <label class="form-label">配置名称</label>
-                    <input v-model="editingConfig.name" class="form-input" placeholder="配置名称" readonly>
+                    <label class="form-label">{{ t('field.configName') }}</label>
+                    <input v-model="editingConfig.name" class="form-input" :placeholder="t('field.configName')" readonly>
                 </div>
                 <div class="form-group">
                     <label class="form-label">API Key</label>
-                    <input v-model="editingConfig.apiKey" class="form-input" type="password" autocomplete="off" spellcheck="false" placeholder="sk-ant-...">
+                    <input v-model="editingConfig.apiKey" class="form-input" type="password" autocomplete="off" spellcheck="false" :placeholder="t('placeholder.apiKeyExampleClaude')">
                 </div>
                 <div class="form-group">
-                    <label class="form-label">Base URL</label>
-                    <input v-model="editingConfig.baseUrl" class="form-input" placeholder="https://open.bigmodel.cn/api/anthropic">
+                    <label class="form-label">{{ t('field.baseUrl') }}</label>
+                    <input v-model="editingConfig.baseUrl" class="form-input" :placeholder="t('placeholder.baseUrlExampleClaude')">
                 </div>
 
                 <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeEditConfigModal">取消</button>
-                    <button class="btn btn-confirm" @click="saveAndApplyConfig">保存并应用</button>
+                    <button class="btn btn-cancel" @click="closeEditConfigModal">{{ t('common.cancel') }}</button>
+                    <button class="btn btn-confirm" @click="saveAndApplyConfig">{{ t('common.saveApply') }}</button>
                 </div>
             </div>
         </div>