codexmate 0.0.39 → 0.0.41

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

@@ -1,344 +1,344 @@
-        <div v-if="showOpenclawConfigModal" class="modal-overlay" @click.self="!(openclawSaving || openclawApplying) && closeOpenclawConfigModal()">
-            <div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="openclaw-config-modal-title">
-                <div class="modal-title" id="openclaw-config-modal-title">{{ openclawEditorTitle }}</div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.configName') }}</label>
-                    <input v-model="openclawEditing.name" class="form-input" :readonly="openclawEditing.lockName" :placeholder="t('placeholder.openclawConfigNameExample')">
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('field.targetFile') }}</label>
-                    <div class="form-hint">
-                        {{ openclawConfigPath || t('common.notLoaded') }}
-                        <span v-if="openclawConfigPath">
-                            （{{ openclawConfigExists ? t('common.exists') : t('common.notExistsWillCreateOnApply') }}）
-                        </span>
-                    </div>
-                    <div class="btn-group" style="justify-content:flex-start;">
-                        <button class="btn btn-confirm secondary" @click="loadOpenclawConfigFromFile" :disabled="openclawFileLoading">
-                            {{ openclawFileLoading ? t('common.loading') : t('modal.openclaw.loadCurrent') }}
-                        </button>
-                    </div>
-                </div>
-
-                <div class="quick-section">
-                    <div class="quick-header">
-                        <div>
-                            <div class="quick-title">{{ t('modal.openclaw.quick.title') }}</div>
-                            <div class="form-hint">{{ t('modal.openclaw.quick.subtitle') }}</div>
-                        </div>
-                        <div class="quick-actions">
-                            <button class="btn-mini" @click="syncOpenclawQuickFromText">{{ t('modal.openclaw.quick.readFromEditor') }}</button>
-                            <button class="btn-mini" @click="resetOpenclawQuick">{{ t('common.clear') }}</button>
-                        </div>
-                    </div>
-
-                    <!-- Accordion Stepper -->
-                    <div class="quick-accordion">
-                        <!-- Step 1: Provider -->
-                        <div :class="['accordion-panel', { active: openclawAccordionStep === 1, completed: openclawAccordionStep > 1 }]">
-                            <button class="accordion-trigger" @click="toggleAccordionStep(1)" type="button">
-                                <span class="accordion-step-badge">
-                                    <template v-if="openclawAccordionStep > 1">✓</template>
-                                    <template v-else>1</template>
-                                </span>
-                                <span class="accordion-title">Provider</span>
-                                <span class="accordion-status" v-if="openclawQuick.providerName">{{ openclawQuick.providerName }}</span>
-                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M6 9l6 6 6-6"/>
-                                </svg>
-                            </button>
-                            <div class="accordion-content" v-show="openclawAccordionStep === 1">
-                                <div class="form-group">
-                                    <label class="form-label">{{ t('field.providerName') }}</label>
-                                    <input v-model="openclawQuick.providerName" class="form-input" placeholder="例如: custom-myapi" @input="validateProviderName">
-                                    <div class="form-hint" :class="{ 'hint-error': !openclawValidation.providerName.valid }">
-                                        {{ openclawValidation.providerName.message || t('modal.openclaw.quick.providerHint') }}
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="form-label">{{ t('field.baseUrl') }}</label>
-                                    <input v-model="openclawQuick.baseUrl" class="form-input" placeholder="https://api.example.com/v1" :readonly="openclawQuick.baseUrlReadOnly">
-                                    <div v-if="openclawQuick.baseUrlDisplayKind === 'builtin-default'" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintDefault') }}</div>
-                                    <div v-else-if="openclawQuick.baseUrlReadOnly" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintReadonly') }}</div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="form-label">API Key</label>
-                                    <div class="list-row">
-                                        <input v-model="openclawQuick.apiKey" class="form-input" :readonly="openclawQuick.apiKeyReadOnly" :type="(openclawQuick.apiKeyReadOnly || openclawQuick.showKey) ? 'text' : 'password'" placeholder="sk-...">
-                                        <button v-if="!openclawQuick.apiKeyReadOnly" class="btn-mini" @click="toggleOpenclawQuickKey">
-                                            {{ openclawQuick.showKey ? t('common.hide') : t('common.show') }}
-                                        </button>
-                                    </div>
-                                    <div v-if="openclawQuick.apiKeyDisplayKind === 'auth-profile-value'" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintFromAuth') }}</div>
-                                    <div v-else-if="openclawQuick.apiKeyReadOnly" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintReadonly') }}</div>
-                                    <div v-else class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintKeep') }}</div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="form-label">{{ t('field.apiType') }}</label>
-                                    <input v-model="openclawQuick.apiType" class="form-input" list="openclawApiTypeList" :placeholder="t('placeholder.apiTypeExample')">
-                                    <datalist id="openclawApiTypeList">
-                                        <option value="openai-responses"></option>
-                                        <option value="openai-chat"></option>
-                                        <option value="anthropic"></option>
-                                        <option value="custom"></option>
-                                    </datalist>
-                                </div>
-                                <div class="accordion-actions">
-                                    <button class="btn btn-confirm btn-sm" @click="nextAccordionStep" :disabled="!openclawQuick.providerName">
-                                        下一步 →
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Step 2: Model -->
-                        <div :class="['accordion-panel', { active: openclawAccordionStep === 2, completed: openclawAccordionStep > 2 }]">
-                            <button class="accordion-trigger" @click="toggleAccordionStep(2)" type="button">
-                                <span class="accordion-step-badge">
-                                    <template v-if="openclawAccordionStep > 2">✓</template>
-                                    <template v-else>2</template>
-                                </span>
-                                <span class="accordion-title">{{ t('modal.openclaw.quick.modelTitle') }}</span>
-                                <span class="accordion-status" v-if="openclawQuick.modelId">{{ openclawQuick.modelName || openclawQuick.modelId }}</span>
-                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M6 9l6 6 6-6"/>
-                                </svg>
-                            </button>
-                            <div class="accordion-content" v-show="openclawAccordionStep === 2">
-                                <div class="form-group">
-                                    <label class="form-label">{{ t('field.modelId') }}</label>
-                                    <input v-model="openclawQuick.modelId" class="form-input" :placeholder="t('placeholder.modelIdExample')" @input="validateModelId">
-                                    <div class="form-hint" :class="{ 'hint-error': !openclawValidation.modelId.valid }">
-                                        {{ openclawValidation.modelId.message || '必填，例如: gpt-4' }}
-                                    </div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="form-label">{{ t('field.displayName') }}</label>
-                                    <input v-model="openclawQuick.modelName" class="form-input" :placeholder="t('placeholder.modelNameOptional')">
-                                    <div class="form-hint">可选，用于显示</div>
-                                </div>
-                                <div class="form-group">
-                                    <label class="form-label">{{ t('field.contextAndMaxOutput') }}</label>
-                                    <div class="list-row">
-                                        <input v-model="openclawQuick.contextWindow" class="form-input" :placeholder="t('field.contextWindow')">
-                                        <input v-model="openclawQuick.maxTokens" class="form-input" :placeholder="t('field.maxOutput')">
-                                    </div>
-                                    <div class="form-hint">{{ t('hint.emptyNoChange') }}</div>
-                                </div>
-                                <div class="accordion-actions">
-                                    <button class="btn btn-cancel btn-sm" @click="prevAccordionStep">
-                                        ← 上一步
-                                    </button>
-                                    <button class="btn btn-confirm btn-sm" @click="nextAccordionStep" :disabled="!openclawQuick.modelId">
-                                        下一步 →
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Step 3: Options -->
-                        <div :class="['accordion-panel', { active: openclawAccordionStep === 3, completed: openclawAccordionStep > 3 }]">
-                            <button class="accordion-trigger" @click="toggleAccordionStep(3)" type="button">
-                                <span class="accordion-step-badge">
-                                    <template v-if="openclawAccordionStep > 3">✓</template>
-                                    <template v-else>3</template>
-                                </span>
-                                <span class="accordion-title">{{ t('modal.openclaw.quick.optionsTitle') }}</span>
-                                <span class="accordion-status">高级选项</span>
-                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                    <path d="M6 9l6 6 6-6"/>
-                                </svg>
-                            </button>
-                            <div class="accordion-content" v-show="openclawAccordionStep === 3">
-                                <label class="quick-option">
-                                    <input type="checkbox" v-model="openclawQuick.setPrimary">
-                                    {{ t('modal.openclaw.quick.setPrimary') }}
-                                </label>
-                                <label class="quick-option">
-                                    <input type="checkbox" v-model="openclawQuick.overrideProvider">
-                                    {{ t('modal.openclaw.quick.overrideProvider') }}
-                                </label>
-                                <label class="quick-option">
-                                    <input type="checkbox" v-model="openclawQuick.overrideModels">
-                                    {{ t('modal.openclaw.quick.overrideModels') }}
-                                </label>
-                                <div class="form-hint">{{ t('modal.openclaw.quick.optionsHint') }}</div>
-                                <div class="accordion-actions">
-                                    <button class="btn btn-cancel btn-sm" @click="prevAccordionStep">
-                                        ← 上一步
-                                    </button>
-                                    <button class="btn btn-confirm btn-sm" @click="finishAccordionStep">
-                                        完成 ✓
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="btn-group">
-                        <button class="btn btn-confirm" @click="applyOpenclawQuickToText">{{ t('modal.openclaw.quick.writeToEditor') }}</button>
-                    </div>
-                </div>
-
-                <div class="structured-section">
-                    <div class="structured-header">
-                        <span class="structured-title">结构化配置（高级）</span>
-                        <span class="form-hint">{{ t('modal.openclaw.structured.writeHint') }}</span>
-                    </div>
-                    <div class="structured-grid">
-                        <div class="structured-card">
-                            <div class="structured-card-title">Agents Defaults</div>
-                            <div class="form-group">
-                                <label class="form-label">主模型</label>
-                                <input v-model="openclawStructured.agentPrimary" class="form-input" placeholder="例如: provider/model">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">备选模型</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.agentFallbacks" :key="'fallback-' + index">
-                                    <input v-model="openclawStructured.agentFallbacks[index]" class="form-input" placeholder="例如: provider/model">
-                                    <button class="btn-mini delete" @click="removeOpenclawFallback(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawFallback">添加备选</button>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Workspace</label>
-                                <input v-model="openclawStructured.workspace" class="form-input" placeholder="例如: ~/.openclaw/workspace">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Timeout(s)</label>
-                                <input v-model="openclawStructured.timeout" class="form-input" placeholder="例如: 600">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Context Tokens</label>
-                                <input v-model="openclawStructured.contextTokens" class="form-input" placeholder="例如: 4096">
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Max Concurrent</label>
-                                <input v-model="openclawStructured.maxConcurrent" class="form-input" placeholder="例如: 2">
-                            </div>
-                        </div>
-
-                        <div class="structured-card">
-                            <div class="structured-card-title">Env</div>
-                            <div class="form-group">
-                                <label class="form-label">环境变量</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.envItems" :key="'env-' + index">
-                                    <input v-model="item.key" class="form-input" placeholder="KEY">
-                                    <input v-model="item.value" class="form-input" :type="item.show ? 'text' : 'password'" placeholder="VALUE">
-                                    <button class="btn-mini" @click="toggleOpenclawEnvItem(index)">
-                                        {{ item.show ? '隐藏' : '显示' }}
-                                    </button>
-                                    <button class="btn-mini delete" @click="removeOpenclawEnvItem(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawEnvItem">添加变量</button>
-                            </div>
-                        </div>
-
-                        <div class="structured-card">
-                            <div class="structured-card-title">Tools</div>
-                            <div class="form-group">
-                                <label class="form-label">Profile</label>
-                                <select v-model="openclawStructured.toolsProfile" class="form-input">
-                                    <option value="default">default</option>
-                                    <option value="strict">strict</option>
-                                    <option value="permissive">permissive</option>
-                                    <option value="custom">custom</option>
-                                </select>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Allow</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsAllow" :key="'allow-' + index">
-                                    <input v-model="openclawStructured.toolsAllow[index]" class="form-input" placeholder="例如: fs.read*">
-                                    <button class="btn-mini delete" @click="removeOpenclawToolsAllow(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawToolsAllow">添加 allow</button>
-                            </div>
-                            <div class="form-group">
-                                <label class="form-label">Deny</label>
-                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsDeny" :key="'deny-' + index">
-                                    <input v-model="openclawStructured.toolsDeny[index]" class="form-input" placeholder="例如: net.*">
-                                    <button class="btn-mini delete" @click="removeOpenclawToolsDeny(index)">删除</button>
-                                </div>
-                                <button class="btn-mini" @click="addOpenclawToolsDeny">添加 deny</button>
-                            </div>
-                        </div>
-
-                        <div class="structured-card">
-                            <div class="structured-card-title">Providers（只读）</div>
-                            <div v-if="openclawProviders.length === 0" class="form-hint">
-                                未发现 providers 配置（可能使用环境变量或外部配置）。
-                            </div>
-                            <div v-else class="provider-list">
-                                <div class="provider-item" v-for="(provider, index) in openclawProviders" :key="provider.key + '-' + provider.source + '-' + index">
-                                    <div class="provider-header">
-                                        <span class="provider-name">{{ provider.key }}</span>
-                                        <span class="provider-source">来源: {{ provider.source }}</span>
-                                        <span v-if="provider.isActive" class="pill configured">使用中</span>
-                                    </div>
-                                    <div v-if="provider.fields.length === 0" class="form-hint">未配置字段</div>
-                                    <div v-else class="provider-fields">
-                                        <div class="provider-field" v-for="field in provider.fields" :key="provider.key + '-' + field.key">
-                                            <span class="provider-field-key">{{ field.key }}</span>
-                                            <span class="provider-field-value">{{ field.value }}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div v-if="openclawMissingProviders.length" class="form-hint">
-                                使用中的 provider 未在配置中显示：{{ openclawMissingProviders.join(', ') }}。
-                            </div>
-                        </div>
-
-                        <div class="structured-card">
-                            <div class="structured-card-title">Agents（只读）</div>
-                            <div v-if="openclawAgentsList.length === 0" class="form-hint">
-                                未发现 agents.list 配置。
-                            </div>
-                            <div v-else class="agent-list">
-                                <div class="agent-item" v-for="(agent, index) in openclawAgentsList" :key="agent.key + '-' + index">
-                                    <div class="agent-header">
-                                        <span class="agent-name">{{ agent.name }}</span>
-                                        <span class="agent-id">ID: {{ agent.id }}</span>
-                                    </div>
-                                    <div class="agent-meta" v-if="agent.theme || agent.emoji || agent.avatar">
-                                        <span v-if="agent.theme">主题: {{ agent.theme }}</span>
-                                        <span v-if="agent.emoji">表情: {{ agent.emoji }}</span>
-                                        <span v-if="agent.avatar">头像: {{ agent.avatar }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="btn-group">
-                        <button class="btn btn-confirm secondary" @click="syncOpenclawStructuredFromText">从文本刷新</button>
-                        <button class="btn btn-confirm" @click="applyOpenclawStructuredToText">{{ t('common.writeToEditor') }}</button>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">OpenClaw 配置（JSON5）</label>
-                    <textarea
-                        v-model="openclawEditing.content"
-                        class="form-input template-editor"
-                        spellcheck="false"
-                        :readonly="openclawSaving || openclawApplying"
-                        placeholder="在这里编辑 OpenClaw 配置（JSON5）"></textarea>
-                    <div class="template-editor-warning">
-                        <span v-if="openclawEditing.lockName && isDefaultOpenclawConfig(openclawEditing.name)">默认配置始终映射当前 openclaw.json，请直接使用“保存并应用”。</span>
-                        <span v-else>保存仅写入本地配置库。点击“保存并应用”后会写入 openclaw.json。</span>
-                    </div>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeOpenclawConfigModal" :disabled="openclawSaving || openclawApplying">取消</button>
-                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving || openclawApplying || (openclawEditing.lockName && isDefaultOpenclawConfig(openclawEditing.name))">
-                        {{ openclawSaving ? '保存中...' : '保存' }}
-                    </button>
-                    <button class="btn btn-confirm secondary" @click="saveAndApplyOpenclawConfig" :disabled="openclawSaving || openclawApplying">
-                        {{ openclawApplying ? '应用中...' : '保存并应用' }}
-                    </button>
-                </div>
-            </div>
-        </div>
+        <div v-if="showOpenclawConfigModal" class="modal-overlay" @click.self="!(openclawSaving || openclawApplying) && closeOpenclawConfigModal()">
+            <div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="openclaw-config-modal-title">
+                <div class="modal-title" id="openclaw-config-modal-title">{{ openclawEditorTitle }}</div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.configName') }}</label>
+                    <input v-model="openclawEditing.name" class="form-input" :readonly="openclawEditing.lockName" :placeholder="t('placeholder.openclawConfigNameExample')">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('field.targetFile') }}</label>
+                    <div class="form-hint">
+                        {{ openclawConfigPath || t('common.notLoaded') }}
+                        <span v-if="openclawConfigPath">
+                            （{{ openclawConfigExists ? t('common.exists') : t('common.notExistsWillCreateOnApply') }}）
+                        </span>
+                    </div>
+                    <div class="btn-group" style="justify-content:flex-start;">
+                        <button class="btn btn-confirm secondary" @click="loadOpenclawConfigFromFile" :disabled="openclawFileLoading">
+                            {{ openclawFileLoading ? t('common.loading') : t('modal.openclaw.loadCurrent') }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="quick-section">
+                    <div class="quick-header">
+                        <div>
+                            <div class="quick-title">{{ t('modal.openclaw.quick.title') }}</div>
+                            <div class="form-hint">{{ t('modal.openclaw.quick.subtitle') }}</div>
+                        </div>
+                        <div class="quick-actions">
+                            <button class="btn-mini" @click="syncOpenclawQuickFromText">{{ t('modal.openclaw.quick.readFromEditor') }}</button>
+                            <button class="btn-mini" @click="resetOpenclawQuick">{{ t('common.clear') }}</button>
+                        </div>
+                    </div>
+
+                    <!-- Accordion Stepper -->
+                    <div class="quick-accordion">
+                        <!-- Step 1: Provider -->
+                        <div :class="['accordion-panel', { active: openclawAccordionStep === 1, completed: openclawAccordionStep > 1 }]">
+                            <button class="accordion-trigger" @click="toggleAccordionStep(1)" type="button">
+                                <span class="accordion-step-badge">
+                                    <template v-if="openclawAccordionStep > 1">✓</template>
+                                    <template v-else>1</template>
+                                </span>
+                                <span class="accordion-title">Provider</span>
+                                <span class="accordion-status" v-if="openclawQuick.providerName">{{ openclawQuick.providerName }}</span>
+                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M6 9l6 6 6-6"/>
+                                </svg>
+                            </button>
+                            <div class="accordion-content" v-show="openclawAccordionStep === 1">
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.providerName') }}</label>
+                                    <input v-model="openclawQuick.providerName" class="form-input" placeholder="例如: custom-myapi" @input="validateProviderName">
+                                    <div class="form-hint" :class="{ 'hint-error': !openclawValidation.providerName.valid }">
+                                        {{ openclawValidation.providerName.message || t('modal.openclaw.quick.providerHint') }}
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.baseUrl') }}</label>
+                                    <input v-model="openclawQuick.baseUrl" class="form-input" placeholder="https://api.example.com/v1" :readonly="openclawQuick.baseUrlReadOnly">
+                                    <div v-if="openclawQuick.baseUrlDisplayKind === 'builtin-default'" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintDefault') }}</div>
+                                    <div v-else-if="openclawQuick.baseUrlReadOnly" class="form-hint">{{ t('modal.openclaw.quick.baseUrlHintReadonly') }}</div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">API Key</label>
+                                    <div class="list-row">
+                                        <input v-model="openclawQuick.apiKey" class="form-input" :readonly="openclawQuick.apiKeyReadOnly" :type="(openclawQuick.apiKeyReadOnly || openclawQuick.showKey) ? 'text' : 'password'" placeholder="sk-...">
+                                        <button v-if="!openclawQuick.apiKeyReadOnly" class="btn-mini" @click="toggleOpenclawQuickKey">
+                                            {{ openclawQuick.showKey ? t('common.hide') : t('common.show') }}
+                                        </button>
+                                    </div>
+                                    <div v-if="openclawQuick.apiKeyDisplayKind === 'auth-profile-value'" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintFromAuth') }}</div>
+                                    <div v-else-if="openclawQuick.apiKeyReadOnly" class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintReadonly') }}</div>
+                                    <div v-else class="form-hint">{{ t('modal.openclaw.quick.apiKeyHintKeep') }}</div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.apiType') }}</label>
+                                    <input v-model="openclawQuick.apiType" class="form-input" list="openclawApiTypeList" :placeholder="t('placeholder.apiTypeExample')">
+                                    <datalist id="openclawApiTypeList">
+                                        <option value="openai-responses"></option>
+                                        <option value="openai-chat"></option>
+                                        <option value="anthropic"></option>
+                                        <option value="custom"></option>
+                                    </datalist>
+                                </div>
+                                <div class="accordion-actions">
+                                    <button class="btn btn-confirm btn-sm" @click="nextAccordionStep" :disabled="!openclawQuick.providerName">
+                                        下一步 →
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Step 2: Model -->
+                        <div :class="['accordion-panel', { active: openclawAccordionStep === 2, completed: openclawAccordionStep > 2 }]">
+                            <button class="accordion-trigger" @click="toggleAccordionStep(2)" type="button">
+                                <span class="accordion-step-badge">
+                                    <template v-if="openclawAccordionStep > 2">✓</template>
+                                    <template v-else>2</template>
+                                </span>
+                                <span class="accordion-title">{{ t('modal.openclaw.quick.modelTitle') }}</span>
+                                <span class="accordion-status" v-if="openclawQuick.modelId">{{ openclawQuick.modelName || openclawQuick.modelId }}</span>
+                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M6 9l6 6 6-6"/>
+                                </svg>
+                            </button>
+                            <div class="accordion-content" v-show="openclawAccordionStep === 2">
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.modelId') }}</label>
+                                    <input v-model="openclawQuick.modelId" class="form-input" :placeholder="t('placeholder.modelIdExample')" @input="validateModelId">
+                                    <div class="form-hint" :class="{ 'hint-error': !openclawValidation.modelId.valid }">
+                                        {{ openclawValidation.modelId.message || '必填，例如: gpt-4' }}
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.displayName') }}</label>
+                                    <input v-model="openclawQuick.modelName" class="form-input" :placeholder="t('placeholder.modelNameOptional')">
+                                    <div class="form-hint">可选，用于显示</div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">{{ t('field.contextAndMaxOutput') }}</label>
+                                    <div class="list-row">
+                                        <input v-model="openclawQuick.contextWindow" class="form-input" :placeholder="t('field.contextWindow')">
+                                        <input v-model="openclawQuick.maxTokens" class="form-input" :placeholder="t('field.maxOutput')">
+                                    </div>
+                                    <div class="form-hint">{{ t('hint.emptyNoChange') }}</div>
+                                </div>
+                                <div class="accordion-actions">
+                                    <button class="btn btn-cancel btn-sm" @click="prevAccordionStep">
+                                        ← 上一步
+                                    </button>
+                                    <button class="btn btn-confirm btn-sm" @click="nextAccordionStep" :disabled="!openclawQuick.modelId">
+                                        下一步 →
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Step 3: Options -->
+                        <div :class="['accordion-panel', { active: openclawAccordionStep === 3, completed: openclawAccordionStep > 3 }]">
+                            <button class="accordion-trigger" @click="toggleAccordionStep(3)" type="button">
+                                <span class="accordion-step-badge">
+                                    <template v-if="openclawAccordionStep > 3">✓</template>
+                                    <template v-else>3</template>
+                                </span>
+                                <span class="accordion-title">{{ t('modal.openclaw.quick.optionsTitle') }}</span>
+                                <span class="accordion-status">高级选项</span>
+                                <svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M6 9l6 6 6-6"/>
+                                </svg>
+                            </button>
+                            <div class="accordion-content" v-show="openclawAccordionStep === 3">
+                                <label class="quick-option">
+                                    <input type="checkbox" v-model="openclawQuick.setPrimary">
+                                    {{ t('modal.openclaw.quick.setPrimary') }}
+                                </label>
+                                <label class="quick-option">
+                                    <input type="checkbox" v-model="openclawQuick.overrideProvider">
+                                    {{ t('modal.openclaw.quick.overrideProvider') }}
+                                </label>
+                                <label class="quick-option">
+                                    <input type="checkbox" v-model="openclawQuick.overrideModels">
+                                    {{ t('modal.openclaw.quick.overrideModels') }}
+                                </label>
+                                <div class="form-hint">{{ t('modal.openclaw.quick.optionsHint') }}</div>
+                                <div class="accordion-actions">
+                                    <button class="btn btn-cancel btn-sm" @click="prevAccordionStep">
+                                        ← 上一步
+                                    </button>
+                                    <button class="btn btn-confirm btn-sm" @click="finishAccordionStep">
+                                        完成 ✓
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="btn-group">
+                        <button class="btn btn-confirm" @click="applyOpenclawQuickToText">{{ t('modal.openclaw.quick.writeToEditor') }}</button>
+                    </div>
+                </div>
+
+                <div class="structured-section">
+                    <div class="structured-header">
+                        <span class="structured-title">结构化配置（高级）</span>
+                        <span class="form-hint">{{ t('modal.openclaw.structured.writeHint') }}</span>
+                    </div>
+                    <div class="structured-grid">
+                        <div class="structured-card">
+                            <div class="structured-card-title">Agents Defaults</div>
+                            <div class="form-group">
+                                <label class="form-label">主模型</label>
+                                <input v-model="openclawStructured.agentPrimary" class="form-input" placeholder="例如: provider/model">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">备选模型</label>
+                                <div class="list-row" v-for="(item, index) in openclawStructured.agentFallbacks" :key="'fallback-' + index">
+                                    <input v-model="openclawStructured.agentFallbacks[index]" class="form-input" placeholder="例如: provider/model">
+                                    <button class="btn-mini delete" @click="removeOpenclawFallback(index)">删除</button>
+                                </div>
+                                <button class="btn-mini" @click="addOpenclawFallback">添加备选</button>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Workspace</label>
+                                <input v-model="openclawStructured.workspace" class="form-input" placeholder="例如: ~/.openclaw/workspace">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Timeout(s)</label>
+                                <input v-model="openclawStructured.timeout" class="form-input" placeholder="例如: 600">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Context Tokens</label>
+                                <input v-model="openclawStructured.contextTokens" class="form-input" placeholder="例如: 4096">
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Max Concurrent</label>
+                                <input v-model="openclawStructured.maxConcurrent" class="form-input" placeholder="例如: 2">
+                            </div>
+                        </div>
+
+                        <div class="structured-card">
+                            <div class="structured-card-title">Env</div>
+                            <div class="form-group">
+                                <label class="form-label">环境变量</label>
+                                <div class="list-row" v-for="(item, index) in openclawStructured.envItems" :key="'env-' + index">
+                                    <input v-model="item.key" class="form-input" placeholder="KEY">
+                                    <input v-model="item.value" class="form-input" :type="item.show ? 'text' : 'password'" placeholder="VALUE">
+                                    <button class="btn-mini" @click="toggleOpenclawEnvItem(index)">
+                                        {{ item.show ? '隐藏' : '显示' }}
+                                    </button>
+                                    <button class="btn-mini delete" @click="removeOpenclawEnvItem(index)">删除</button>
+                                </div>
+                                <button class="btn-mini" @click="addOpenclawEnvItem">添加变量</button>
+                            </div>
+                        </div>
+
+                        <div class="structured-card">
+                            <div class="structured-card-title">Tools</div>
+                            <div class="form-group">
+                                <label class="form-label">Profile</label>
+                                <select v-model="openclawStructured.toolsProfile" class="form-input">
+                                    <option value="default">default</option>
+                                    <option value="strict">strict</option>
+                                    <option value="permissive">permissive</option>
+                                    <option value="custom">custom</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Allow</label>
+                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsAllow" :key="'allow-' + index">
+                                    <input v-model="openclawStructured.toolsAllow[index]" class="form-input" placeholder="例如: fs.read*">
+                                    <button class="btn-mini delete" @click="removeOpenclawToolsAllow(index)">删除</button>
+                                </div>
+                                <button class="btn-mini" @click="addOpenclawToolsAllow">添加 allow</button>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Deny</label>
+                                <div class="list-row" v-for="(item, index) in openclawStructured.toolsDeny" :key="'deny-' + index">
+                                    <input v-model="openclawStructured.toolsDeny[index]" class="form-input" placeholder="例如: net.*">
+                                    <button class="btn-mini delete" @click="removeOpenclawToolsDeny(index)">删除</button>
+                                </div>
+                                <button class="btn-mini" @click="addOpenclawToolsDeny">添加 deny</button>
+                            </div>
+                        </div>
+
+                        <div class="structured-card">
+                            <div class="structured-card-title">Providers（只读）</div>
+                            <div v-if="openclawProviders.length === 0" class="form-hint">
+                                未发现 providers 配置（可能使用环境变量或外部配置）。
+                            </div>
+                            <div v-else class="provider-list">
+                                <div class="provider-item" v-for="(provider, index) in openclawProviders" :key="provider.key + '-' + provider.source + '-' + index">
+                                    <div class="provider-header">
+                                        <span class="provider-name">{{ provider.key }}</span>
+                                        <span class="provider-source">来源: {{ provider.source }}</span>
+                                        <span v-if="provider.isActive" class="pill configured">使用中</span>
+                                    </div>
+                                    <div v-if="provider.fields.length === 0" class="form-hint">未配置字段</div>
+                                    <div v-else class="provider-fields">
+                                        <div class="provider-field" v-for="field in provider.fields" :key="provider.key + '-' + field.key">
+                                            <span class="provider-field-key">{{ field.key }}</span>
+                                            <span class="provider-field-value">{{ field.value }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="openclawMissingProviders.length" class="form-hint">
+                                使用中的 provider 未在配置中显示：{{ openclawMissingProviders.join(', ') }}。
+                            </div>
+                        </div>
+
+                        <div class="structured-card">
+                            <div class="structured-card-title">Agents（只读）</div>
+                            <div v-if="openclawAgentsList.length === 0" class="form-hint">
+                                未发现 agents.list 配置。
+                            </div>
+                            <div v-else class="agent-list">
+                                <div class="agent-item" v-for="(agent, index) in openclawAgentsList" :key="agent.key + '-' + index">
+                                    <div class="agent-header">
+                                        <span class="agent-name">{{ agent.name }}</span>
+                                        <span class="agent-id">ID: {{ agent.id }}</span>
+                                    </div>
+                                    <div class="agent-meta" v-if="agent.theme || agent.emoji || agent.avatar">
+                                        <span v-if="agent.theme">主题: {{ agent.theme }}</span>
+                                        <span v-if="agent.emoji">表情: {{ agent.emoji }}</span>
+                                        <span v-if="agent.avatar">头像: {{ agent.avatar }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="btn-group">
+                        <button class="btn btn-confirm secondary" @click="syncOpenclawStructuredFromText">从文本刷新</button>
+                        <button class="btn btn-confirm" @click="applyOpenclawStructuredToText">{{ t('common.writeToEditor') }}</button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">OpenClaw 配置（JSON5）</label>
+                    <textarea
+                        v-model="openclawEditing.content"
+                        class="form-input template-editor"
+                        spellcheck="false"
+                        :readonly="openclawSaving || openclawApplying"
+                        placeholder="在这里编辑 OpenClaw 配置（JSON5）"></textarea>
+                    <div class="template-editor-warning">
+                        <span v-if="openclawEditing.lockName && isDefaultOpenclawConfig(openclawEditing.name)">默认配置始终映射当前 openclaw.json，请直接使用“保存并应用”。</span>
+                        <span v-else>保存仅写入本地配置库。点击“保存并应用”后会写入 openclaw.json。</span>
+                    </div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeOpenclawConfigModal" :disabled="openclawSaving || openclawApplying">取消</button>
+                    <button class="btn btn-confirm" @click="saveOpenclawConfig" :disabled="openclawSaving || openclawApplying || (openclawEditing.lockName && isDefaultOpenclawConfig(openclawEditing.name))">
+                        {{ openclawSaving ? '保存中...' : '保存' }}
+                    </button>
+                    <button class="btn btn-confirm secondary" @click="saveAndApplyOpenclawConfig" :disabled="openclawSaving || openclawApplying">
+                        {{ openclawApplying ? '应用中...' : '保存并应用' }}
+                    </button>
+                </div>
+            </div>
+        </div>