codexmate 0.0.20 → 0.0.22

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

@@ -10,15 +10,41 @@
                     <svg class="icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M10 4v12M4 10h12"/>
                     </svg>
-                    添加提供商
+                    {{ t('claude.addProvider') }}
                 </button>
                 <div class="config-template-hint">
-                    默认应用到 <code>~/.claude/settings.json</code>。
+                    {{ t('claude.applyDefault') }}
                 </div>
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">模型</span>
+                        <span class="selector-title">{{ t('claude.presetProviders') }}</span>
+                    </div>
+                    <div class="btn-group" style="flex-wrap: wrap; gap: 8px;">
+                        <button type="button" class="btn-mini" @click="closeClaudeConfigModal(); showClaudeConfigModal = true">{{ t('claude.customConfig') }}</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Claude Official'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.anthropic.com'; newClaudeConfig.model = 'claude-sonnet-4'; showClaudeConfigModal = true">Claude Official</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'DeepSeek'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.deepseek.com/anthropic'; newClaudeConfig.model = 'DeepSeek-V3.2'; showClaudeConfigModal = true">DeepSeek</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Zhipu GLM'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://open.bigmodel.cn/api/anthropic'; newClaudeConfig.model = 'glm-5'; showClaudeConfigModal = true">Zhipu GLM</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Z.ai GLM'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.z.ai/api/anthropic'; newClaudeConfig.model = 'glm-5'; showClaudeConfigModal = true">Z.ai GLM</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Qwen Coder'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://coding.dashscope.aliyuncs.com/apps/anthropic'; newClaudeConfig.model = 'qwen3-coder'; showClaudeConfigModal = true">Qwen Coder</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Kimi k2'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.moonshot.cn/anthropic'; newClaudeConfig.model = 'kimi-k2.5'; showClaudeConfigModal = true">Kimi k2</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Kimi For Coding'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.kimi.com/coding/'; newClaudeConfig.model = 'kimi-k2.5'; showClaudeConfigModal = true">Kimi For Coding</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'KAT-Coder'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://vanchin.streamlake.ai/api/gateway/v1/endpoints/${ENDPOINT_ID}/claude-code-proxy'; newClaudeConfig.model = 'KAT-Coder-Pro V1'; showClaudeConfigModal = true">KAT-Coder</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'Longcat'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.longcat.chat/anthropic'; newClaudeConfig.model = 'LongCat-Flash-Chat'; showClaudeConfigModal = true">Longcat</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'MiniMax'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.minimaxi.com/anthropic'; newClaudeConfig.model = 'MiniMax-M2.7'; showClaudeConfigModal = true">MiniMax</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'MiniMax en'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.minimax.io/anthropic'; newClaudeConfig.model = 'MiniMax-M2.7'; showClaudeConfigModal = true">MiniMax en</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'DouBaoSeed'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://ark.cn-beijing.volces.com/api/coding'; newClaudeConfig.model = 'doubao-seed-2-0-code-preview-latest'; showClaudeConfigModal = true">DouBaoSeed</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'BaiLing'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api.tbox.cn/api/anthropic'; newClaudeConfig.model = 'Ling-2.5-1T'; showClaudeConfigModal = true">BaiLing</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'ModelScope'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://api-inference.modelscope.cn'; newClaudeConfig.model = 'ZhipuAI/GLM-5'; showClaudeConfigModal = true">ModelScope</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'AiHubMix'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://aihubmix.com'; newClaudeConfig.model = 'glm-4.7'; showClaudeConfigModal = true">AiHubMix</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'DMXAPI'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://www.dmxapi.cn'; newClaudeConfig.model = 'glm-4.7'; showClaudeConfigModal = true">DMXAPI</button>
+                        <button type="button" class="btn-mini" @click="newClaudeConfig.name = 'PackyCode'; newClaudeConfig.apiKey = ''; newClaudeConfig.baseUrl = 'https://www.packyapi.com'; newClaudeConfig.model = 'glm-4.7'; showClaudeConfigModal = true">PackyCode</button>
+                    </div>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">{{ t('claude.model') }}</span>
                     </div>
                     <select
                         v-if="claudeModelHasList"
@@ -34,20 +60,32 @@
                         v-model="currentClaudeModel"
                         @blur="onClaudeModelChange"
                         @keyup.enter="onClaudeModelChange"
-                        placeholder="例如: claude-3-7-sonnet"
+                        :placeholder="t('claude.model.placeholder')"
                     >
                     <div class="config-template-hint">
-                        模型修改后会自动保存并应用到当前配置。
+                        {{ t('claude.model.hint') }}
                     </div>
                 </div>
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">配置健康检查</span>
+                        <span class="selector-title">{{ t('claude.health.title') }}</span>
                     </div>
                     <button class="btn-tool" @click="runHealthCheck" :disabled="healthCheckLoading || loading || !!initError">
-                        {{ healthCheckLoading ? '检查中...' : '运行检查' }}
+                        {{ healthCheckLoading ? t('claude.health.running') : t('claude.health.run') }}
+                    </button>
+                </div>
+
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">CLAUDE.md</span>
+                    </div>
+                    <button class="btn-tool" @click="openClaudeMdEditor" :disabled="loading || !!initError || agentsLoading">
+                        {{ agentsLoading ? t('config.modelLoading') : t('claude.md.open') }}
                     </button>
+                    <div class="config-template-hint">
+                        {{ t('claude.md.hint') }}
+                    </div>
                 </div>
 
                 <div class="card-list">
@@ -63,31 +101,31 @@
                             <div class="card-icon">{{ name.charAt(0).toUpperCase() }}</div>
                             <div class="card-content">
                                 <div class="card-title">{{ name }}</div>
-                                <div class="card-subtitle">{{ config.model || '未设置模型' }}</div>
+                                <div class="card-subtitle">{{ config.model || t('claude.model.unset') }}</div>
                             </div>
                         </div>
                         <div class="card-trailing">
                             <span :class="['pill', config.hasKey ? 'configured' : 'empty']">
-                                {{ config.hasKey ? '已配置' : '未配置' }}
+                                {{ config.hasKey ? t('claude.configured') : t('claude.notConfigured') }}
                             </span>
                             <span v-if="claudeSpeedResults[name]" :class="['latency', claudeSpeedResults[name].ok ? 'ok' : 'error']">
                                 {{ formatLatency(claudeSpeedResults[name]) }}
                             </span>
                             <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openEditConfigModal(name)" :aria-label="`Edit Claude config ${name}`" title="编辑">
+                                <button class="card-action-btn" @click="openEditConfigModal(name)" :aria-label="`Edit Claude config ${name}`" :title="t('claude.action.edit')">
                                     <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 class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" disabled title="分享导入命令（暂时禁用）" aria-label="Share import command">
+                                <button class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" disabled :title="t('claude.action.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 class="card-action-btn delete" @click="deleteClaudeConfig(name)" :aria-label="`Delete Claude config ${name}`" title="删除">
+                                <button class="card-action-btn delete" @click="deleteClaudeConfig(name)" :aria-label="`Delete Claude config ${name}`" :title="t('claude.action.delete')">
                                     <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"/>

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

@@ -10,13 +10,13 @@
                     <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">模型</span>
+                        <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>
@@ -29,7 +29,7 @@
                         @change="onModelChange"
                         :disabled="codexModelsLoading"
                     >
-                        <option v-if="codexModelsLoading" value="">加载中...</option>
+                        <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
@@ -40,63 +40,63 @@
                         :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 ? '当前模型不在列表，可手填或改模板。' : '当前模型不在列表，可手填。' }}
+                        {{ 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">
-                        {{ activeProviderBridgeHint }} 模板仅限 Codex 编辑。
+                        {{ 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">服务档</span>
+                        <span class="selector-title">{{ t('config.serviceTier') }}</span>
                     </div>
                     <select class="model-select" v-model="serviceTier" @change="onServiceTierChange">
-                        <option value="fast">fast（默认）</option>
+                        <option value="fast">{{ t('config.serviceTier.fast') }}</option>
                         <option value="standard">standard</option>
                     </select>
                     <div class="config-template-hint">
-                        仅 fast 写入 <code>service_tier</code>。
+                        {{ t('config.serviceTier.hint', { field: 'service_tier' }) }}
                     </div>
                 </div>
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">推理强度</span>
+                        <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">medium（默认）</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">
-                        控制推理深度；high 更深。
+                        {{ t('config.reasoningEffort.hint') }}
                     </div>
                 </div>
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <span class="selector-title">压缩阈值</span>
+                        <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>
@@ -109,12 +109,12 @@
                                 class="form-input"
                                 inputmode="numeric"
                                 autocomplete="off"
-                                placeholder="例如: 190000"
+                                :placeholder="t('config.example', { value: 190000 })"
                                 @focus="editingCodexBudgetField = 'modelContextWindowInput'"
                                 @input="sanitizePositiveIntegerDraft('modelContextWindowInput')"
                                 @blur="onModelContextWindowBlur"
                                 @keydown.enter.prevent="onModelContextWindowBlur">
-                            <div class="form-hint">上下文上限，默认 190000。</div>
+                            <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>
@@ -124,12 +124,12 @@
                                 class="form-input"
                                 inputmode="numeric"
                                 autocomplete="off"
-                                placeholder="例如: 185000"
+                                :placeholder="t('config.example', { value: 185000 })"
                                 @focus="editingCodexBudgetField = 'modelAutoCompactTokenLimitInput'"
                                 @input="sanitizePositiveIntegerDraft('modelAutoCompactTokenLimitInput')"
                                 @blur="onModelAutoCompactTokenLimitBlur"
                                 @keydown.enter.prevent="onModelAutoCompactTokenLimitBlur">
-                            <div class="form-hint">自动压缩阈值，默认 185000。</div>
+                            <div class="form-hint">{{ t('config.autoCompact.hint') }}</div>
                         </div>
                     </div>
                 </div>
@@ -139,21 +139,12 @@
                         <span class="selector-title">AGENTS.md</span>
                     </div>
                     <button class="btn-tool" @click="openAgentsEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md' }}
+                        {{ agentsLoading ? t('config.modelLoading') : t('config.agents.open') }}
                     </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 }]"
@@ -168,10 +159,10 @@
                             <div class="card-content">
                                 <div class="card-title">
                                     <span>{{ provider.name }}</span>
-                                    <span v-if="provider.readOnly" class="provider-readonly-badge">系统</span>
+                                    <span v-if="provider.readOnly" class="provider-readonly-badge">{{ t('config.badge.system') }}</span>
                                 </div>
                                 <div class="card-subtitle">
-                                    {{ provider.url || '未设 URL' }}
+                                    {{ provider.url || t('config.url.unset') }}
                                 </div>
                             </div>
                         </div>
@@ -183,7 +174,13 @@
                                 {{ 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="检测对话">
+                                <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"/>
@@ -193,10 +190,10 @@
                                 <button
                                     v-if="!provider.readOnly"
                                     class="card-action-btn"
-                                    :class="{ loading: providerShareLoading[provider.name] }"
-                                    disabled
+                                    :class="{ loading: providerShareLoading[provider.name], disabled: !shouldAllowProviderShare(provider) }"
+                                    :disabled="providerShareLoading[provider.name] || !shouldAllowProviderShare(provider)"
                                     @click="copyProviderShareCommand(provider)"
-                                    title="分享命令（暂不可用）"
+                                    :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"/>

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

@@ -5,14 +5,8 @@
                     id="panel-config-openclaw"
                     role="tabpanel"
                     :aria-labelledby="'tab-config-openclaw'">
-                <button class="btn-add" @click="openOpenclawAddModal" 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>
-                    新增 OpenClaw 配置
-                </button>
                 <div class="config-template-hint">
-                    写入 <code>~/.openclaw/openclaw.json</code>，支持 JSON5。
+                    {{ t('openclaw.applyHint') }}
                 </div>
 
                 <div class="selector-section">
@@ -20,27 +14,27 @@
                         <span class="selector-title">AGENTS.md</span>
                     </div>
                     <div class="config-template-hint">
-                        读写 Workspace 的 <code>AGENTS.md</code>，默认路径 <code>~/.openclaw/workspace/AGENTS.md</code>。
+                        {{ t('openclaw.agents.hint') }}
                     </div>
                     <button class="btn-tool" @click="openOpenclawAgentsEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开 AGENTS.md' }}
+                        {{ agentsLoading ? t('config.modelLoading') : t('openclaw.agents.open') }}
                     </button>
                 </div>
 
                 <div class="selector-section">
                     <div class="selector-header">
-                        <label class="selector-title" for="openclaw-workspace-file">工作区文件</label>
+                        <label class="selector-title" for="openclaw-workspace-file">{{ t('openclaw.workspaceFile') }}</label>
                     </div>
                     <input
                         id="openclaw-workspace-file"
                         class="form-input"
                         v-model="openclawWorkspaceFileName"
-                        placeholder="例如: SOUL.md">
+                        :placeholder="t('openclaw.workspace.placeholder')">
                     <div class="config-template-hint">
-                        仅限 Workspace 内的 <code>.md</code> 文件。
+                        {{ t('openclaw.workspace.hint') }}
                     </div>
                     <button class="btn-tool" @click="openOpenclawWorkspaceEditor" :disabled="loading || !!initError || agentsLoading">
-                        {{ agentsLoading ? '加载中...' : '打开工作区文件' }}
+                        {{ agentsLoading ? t('config.modelLoading') : t('openclaw.workspace.open') }}
                     </button>
                 </div>
 
@@ -62,16 +56,16 @@
                         </div>
                         <div class="card-trailing">
                             <span :class="['pill', openclawHasContent(config) ? 'configured' : 'empty']">
-                                {{ openclawHasContent(config) ? '已配置' : '未配置' }}
+                                {{ openclawHasContent(config) ? t('openclaw.configured') : t('openclaw.notConfigured') }}
                             </span>
                             <div class="card-actions" @click.stop>
-                                <button class="card-action-btn" @click="openOpenclawEditModal(name)" :aria-label="`Edit OpenClaw config ${name}`" title="编辑">
+                                <button class="card-action-btn" @click="openOpenclawEditModal(name)" :aria-label="`Edit OpenClaw config ${name}`" :title="t('openclaw.action.edit')">
                                     <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 class="card-action-btn delete" @click="deleteOpenclawConfig(name)" :aria-label="`Delete OpenClaw config ${name}`" title="删除">
+                                <button v-if="name !== '默认配置'" class="card-action-btn delete" @click="deleteOpenclawConfig(name)" :aria-label="`Delete OpenClaw config ${name}`" :title="t('openclaw.action.delete')">
                                     <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"/>

package/web-ui/partials/index/panel-docs.html

@@ -0,0 +1,147 @@
+                <div
+                    v-show="mainTab === 'docs'"
+                    class="mode-content docs-mode-content"
+                    id="panel-docs"
+                    role="tabpanel"
+                    aria-labelledby="tab-docs">
+                    <div class="selector-section docs-overview-section">
+                        <div class="selector-header docs-overview-header">
+                            <div>
+                                <span class="selector-title">{{ t('docs.title') }}</span>
+                                <div class="skills-panel-note docs-section-note">{{ t('docs.subtitle') }}</div>
+                            </div>
+                        </div>
+
+                        <div class="docs-toolbar-grid">
+                            <div class="docs-toolbar-card">
+                                <label class="form-label" for="docs-install-package-manager">{{ t('common.packageManager') }}</label>
+                                <select id="docs-install-package-manager" class="form-input" v-model="installPackageManager">
+                                    <option value="npm">npm</option>
+                                    <option value="pnpm">pnpm</option>
+                                    <option value="bun">bun</option>
+                                </select>
+                            </div>
+
+                            <div class="docs-toolbar-card docs-toolbar-card-wide">
+                                <label class="form-label">{{ t('common.mirror') }}</label>
+                                <div class="install-action-tabs">
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'default' }" @click="setInstallRegistryPreset('default')">{{ t('common.official') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'tencent' }" @click="setInstallRegistryPreset('tencent')">{{ t('docs.registry.tencent') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'custom' }" @click="setInstallRegistryPreset('custom')">{{ t('common.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">
+                                    {{ t('docs.registryHintPrefix') }} --registry={{ installRegistryPreview }}
+                                </div>
+                                <div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">
+                                    {{ t('docs.registryHintCustom') }}
+                                </div>
+                            </div>
+
+                            <div class="docs-toolbar-card docs-toolbar-card-wide">
+                                <label class="form-label">{{ t('common.action') }}</label>
+                                <div class="install-action-tabs">
+                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">{{ t('common.install') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'update' }" @click="setInstallCommandAction('update')">{{ t('common.update') }}</button>
+                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'uninstall' }" @click="setInstallCommandAction('uninstall')">{{ t('common.uninstall') }}</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="docs-summary-strip">
+                            <div class="docs-summary-item">
+                                <span class="docs-summary-label">{{ t('common.targets') }}</span>
+                                <strong class="docs-summary-value">{{ installTargetCards.length }}</strong>
+                            </div>
+                            <div class="docs-summary-item">
+                                <span class="docs-summary-label">{{ t('common.currentPm') }}</span>
+                                <strong class="docs-summary-value">{{ String(installPackageManager || 'npm').toUpperCase() }}</strong>
+                            </div>
+                            <div class="docs-summary-item">
+                                <span class="docs-summary-label">{{ t('common.currentAction') }}</span>
+                                <strong class="docs-summary-value">{{ installCommandAction === 'update' ? t('common.update') : (installCommandAction === 'uninstall' ? t('common.uninstall') : t('common.install')) }}</strong>
+                            </div>
+                            <div class="docs-summary-item docs-summary-item-wide">
+                                <span class="docs-summary-label">{{ t('common.mirrorActive') }}</span>
+                                <strong class="docs-summary-value">{{ installRegistryPreview || t('common.defaultOfficial') }}</strong>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="selector-section docs-command-section">
+                        <div class="selector-header docs-section-header">
+                            <div>
+                                <span class="selector-title">{{ t('docs.section.commands') }}</span>
+                                <div class="skills-panel-note docs-section-note">{{ t('docs.section.commandsNote') }}</div>
+                            </div>
+                        </div>
+
+                        <div class="install-list docs-install-list">
+                            <div
+                                class="install-row docs-install-row"
+                                v-for="target in installTargetCards"
+                                :key="'docs-install-command-' + target.id + '-' + installCommandAction">
+                                <div class="install-row-main">
+                                    <div class="docs-command-head">
+                                        <div class="install-row-title">{{ target.name }}</div>
+                                        <div class="docs-command-meta">
+                                            <span class="docs-meta-pill">{{ target.packageName }}</span>
+                                            <span class="docs-meta-pill">bin: {{ target.bin }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="docs-command-row">
+                                        <div class="docs-command-box" role="group" :aria-label="`${target.name} command`">
+                                            <code class="install-command">{{ target.command }}</code>
+                                            <button
+                                                type="button"
+                                                class="btn-mini docs-copy-btn"
+                                                :disabled="!target.command"
+                                                @click="copyInstallCommand(target.command)">{{ t('common.copy') }}</button>
+                                        </div>
+                                    </div>
+                                    <div
+                                        v-if="target.id === 'codex' && target.termuxCommand && target.termuxCommand !== target.command"
+                                        class="docs-command-row docs-command-row-secondary">
+                                        <div class="docs-command-box" role="group" :aria-label="t('docs.termuxAria')">
+                                            <code class="install-command"><span class="docs-command-prefix">{{ t('docs.termuxLabel') }}</span>{{ target.termuxCommand }}</code>
+                                            <button
+                                                type="button"
+                                                class="btn-mini docs-copy-btn"
+                                                @click="copyInstallCommand(target.termuxCommand)">{{ t('common.copy') }}</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="selector-section docs-help-section">
+                        <div class="selector-header docs-section-header">
+                            <div>
+                                <span class="selector-title">{{ t('docs.section.faq') }}</span>
+                                <div class="skills-panel-note docs-section-note">{{ t('docs.section.faqNote') }}</div>
+                            </div>
+                        </div>
+
+                        <div class="docs-help-grid">
+                            <div class="docs-note-card">
+                                <div class="docs-note-title">{{ t('common.troubleshooting') }}</div>
+                                <ul class="install-help-list docs-help-list">
+                                    <li v-for="tip in installTroubleshootingTips" :key="tip">{{ tip }}</li>
+                                </ul>
+                            </div>
+                            <div class="docs-note-card">
+                                <div class="docs-note-title">{{ t('common.rules') }}</div>
+                                <ul class="docs-static-list">
+                                    <li>{{ t('docs.rule.1') }}</li>
+                                    <li>{{ t('docs.rule.2') }}</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>