feat(webui): add configuration presets for Claude CLI
- Add backend storage logic in `src/utils/claude-config.js` to save/load/delete presets - Add API endpoints (`GET`, `POST`, `DELETE`) for presets in `src/webui/index.js` - Update `public/views/settings.html` with new Presets UI card and modals - Update `public/js/components/claude-config.js` with auto-load logic and unsaved changes protection - Add translations (EN/ZH) for new UI elements in `public/js/store.js` - Add integration tests in `tests/frontend/test-frontend-settings.cjs` - Update compiled CSS Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
simon-ami
2
public/css/style.css
generated
2
public/css/style.css
generated
File diff suppressed because one or more lines are too long
@@ -12,6 +12,13 @@ window.Components.claudeConfig = () => ({
|
||||
restoring: false,
|
||||
gemini1mSuffix: false,
|
||||
|
||||
// Presets state
|
||||
presets: [],
|
||||
selectedPresetName: '',
|
||||
savingPreset: false,
|
||||
deletingPreset: false,
|
||||
pendingPresetName: '', // For unsaved changes confirmation
|
||||
|
||||
// Model fields that may contain Gemini model names
|
||||
geminiModelFields: [
|
||||
'ANTHROPIC_MODEL',
|
||||
@@ -25,12 +32,14 @@ window.Components.claudeConfig = () => ({
|
||||
// Only fetch config if this is the active sub-tab
|
||||
if (this.activeTab === 'claude') {
|
||||
this.fetchConfig();
|
||||
this.fetchPresets();
|
||||
}
|
||||
|
||||
// Watch local activeTab (from parent settings scope, skip initial trigger)
|
||||
this.$watch('activeTab', (tab, oldTab) => {
|
||||
if (tab === 'claude' && oldTab !== undefined) {
|
||||
this.fetchConfig();
|
||||
this.fetchPresets();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -171,5 +180,237 @@ window.Components.claudeConfig = () => ({
|
||||
} finally {
|
||||
this.restoring = false;
|
||||
}
|
||||
},
|
||||
|
||||
// ==========================================
|
||||
// Presets Management
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* Fetch all saved presets from the server
|
||||
*/
|
||||
async fetchPresets() {
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request('/api/claude/presets', {}, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
this.presets = data.presets || [];
|
||||
// Auto-select first preset if none selected
|
||||
if (this.presets.length > 0 && !this.selectedPresetName) {
|
||||
this.selectedPresetName = this.presets[0].name;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to fetch presets:', e);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load the selected preset into the form (does not save to Claude CLI)
|
||||
*/
|
||||
loadSelectedPreset() {
|
||||
const preset = this.presets.find(p => p.name === this.selectedPresetName);
|
||||
if (!preset) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Merge preset config into current config.env
|
||||
this.config.env = { ...this.config.env, ...preset.config };
|
||||
|
||||
// Update Gemini 1M toggle based on merged config (not just preset)
|
||||
this.gemini1mSuffix = this.detectGemini1mSuffix();
|
||||
|
||||
Alpine.store('global').showToast(
|
||||
Alpine.store('global').t('presetLoaded') || `Preset "${preset.name}" loaded. Click "Apply to Claude CLI" to save.`,
|
||||
'success'
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if current config matches any saved preset
|
||||
* @returns {boolean} True if current config matches a preset
|
||||
*/
|
||||
currentConfigMatchesPreset() {
|
||||
const relevantKeys = [
|
||||
'ANTHROPIC_BASE_URL',
|
||||
'ANTHROPIC_AUTH_TOKEN',
|
||||
'ANTHROPIC_MODEL',
|
||||
'CLAUDE_CODE_SUBAGENT_MODEL',
|
||||
'ANTHROPIC_DEFAULT_OPUS_MODEL',
|
||||
'ANTHROPIC_DEFAULT_SONNET_MODEL',
|
||||
'ANTHROPIC_DEFAULT_HAIKU_MODEL',
|
||||
'ENABLE_EXPERIMENTAL_MCP_CLI'
|
||||
];
|
||||
|
||||
for (const preset of this.presets) {
|
||||
let matches = true;
|
||||
for (const key of relevantKeys) {
|
||||
const currentVal = this.config.env[key] || '';
|
||||
const presetVal = preset.config[key] || '';
|
||||
if (currentVal !== presetVal) {
|
||||
matches = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (matches) return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle preset selection change - auto-load with unsaved changes warning
|
||||
* @param {string} newPresetName - The newly selected preset name
|
||||
*/
|
||||
async onPresetSelect(newPresetName) {
|
||||
if (!newPresetName || newPresetName === this.selectedPresetName) return;
|
||||
|
||||
// Check if current config has unsaved changes (doesn't match any preset)
|
||||
const hasUnsavedChanges = !this.currentConfigMatchesPreset();
|
||||
|
||||
if (hasUnsavedChanges) {
|
||||
// Store pending preset and show confirmation modal
|
||||
this.pendingPresetName = newPresetName;
|
||||
document.getElementById('unsaved_changes_modal').showModal();
|
||||
return;
|
||||
}
|
||||
|
||||
this.selectedPresetName = newPresetName;
|
||||
this.loadSelectedPreset();
|
||||
},
|
||||
|
||||
/**
|
||||
* Confirm loading preset despite unsaved changes
|
||||
*/
|
||||
confirmLoadPreset() {
|
||||
document.getElementById('unsaved_changes_modal').close();
|
||||
this.selectedPresetName = this.pendingPresetName;
|
||||
this.pendingPresetName = '';
|
||||
this.loadSelectedPreset();
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancel loading preset - revert dropdown selection
|
||||
*/
|
||||
cancelLoadPreset() {
|
||||
document.getElementById('unsaved_changes_modal').close();
|
||||
// Revert the dropdown to current selection
|
||||
const select = document.querySelector('[aria-label="Select preset"]');
|
||||
if (select) select.value = this.selectedPresetName;
|
||||
this.pendingPresetName = '';
|
||||
},
|
||||
|
||||
/**
|
||||
* Save the current config as a new preset
|
||||
*/
|
||||
async saveCurrentAsPreset() {
|
||||
// Show the save preset modal
|
||||
document.getElementById('save_preset_modal').showModal();
|
||||
},
|
||||
|
||||
/**
|
||||
* Execute preset save after user enters name
|
||||
*/
|
||||
async executeSavePreset(name) {
|
||||
if (!name || !name.trim()) {
|
||||
Alpine.store('global').showToast('Preset name is required', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.savingPreset = true;
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
|
||||
try {
|
||||
// Save only relevant env vars
|
||||
const relevantKeys = [
|
||||
'ANTHROPIC_BASE_URL',
|
||||
'ANTHROPIC_AUTH_TOKEN',
|
||||
'ANTHROPIC_MODEL',
|
||||
'CLAUDE_CODE_SUBAGENT_MODEL',
|
||||
'ANTHROPIC_DEFAULT_OPUS_MODEL',
|
||||
'ANTHROPIC_DEFAULT_SONNET_MODEL',
|
||||
'ANTHROPIC_DEFAULT_HAIKU_MODEL',
|
||||
'ENABLE_EXPERIMENTAL_MCP_CLI'
|
||||
];
|
||||
const presetConfig = {};
|
||||
relevantKeys.forEach(k => {
|
||||
if (this.config.env[k]) {
|
||||
presetConfig[k] = this.config.env[k];
|
||||
}
|
||||
});
|
||||
|
||||
const { response, newPassword } = await window.utils.request('/api/claude/presets', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: name.trim(), config: presetConfig })
|
||||
}, password);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
this.presets = data.presets || [];
|
||||
this.selectedPresetName = name.trim();
|
||||
Alpine.store('global').showToast(
|
||||
Alpine.store('global').t('presetSaved') || `Preset "${name}" saved`,
|
||||
'success'
|
||||
);
|
||||
document.getElementById('save_preset_modal').close();
|
||||
} else {
|
||||
throw new Error(data.error || 'Save failed');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Failed to save preset: ' + e.message, 'error');
|
||||
} finally {
|
||||
this.savingPreset = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete the selected preset
|
||||
*/
|
||||
async deleteSelectedPreset() {
|
||||
if (!this.selectedPresetName) {
|
||||
Alpine.store('global').showToast('No preset selected', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirm deletion
|
||||
if (!confirm(`Delete preset "${this.selectedPresetName}"?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.deletingPreset = true;
|
||||
const password = Alpine.store('global').webuiPassword;
|
||||
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request(
|
||||
`/api/claude/presets/${encodeURIComponent(this.selectedPresetName)}`,
|
||||
{ method: 'DELETE' },
|
||||
password
|
||||
);
|
||||
if (newPassword) Alpine.store('global').webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const data = await response.json();
|
||||
if (data.status === 'ok') {
|
||||
this.presets = data.presets || [];
|
||||
// Select first available preset or clear selection
|
||||
this.selectedPresetName = this.presets.length > 0 ? this.presets[0].name : '';
|
||||
Alpine.store('global').showToast(
|
||||
Alpine.store('global').t('presetDeleted') || 'Preset deleted',
|
||||
'success'
|
||||
);
|
||||
} else {
|
||||
throw new Error(data.error || 'Delete failed');
|
||||
}
|
||||
} catch (e) {
|
||||
Alpine.store('global').showToast('Failed to delete preset: ' + e.message, 'error');
|
||||
} finally {
|
||||
this.deletingPreset = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -131,6 +131,24 @@ document.addEventListener('alpine:init', () => {
|
||||
claudeSettingsAlertPrefix: "Settings below directly modify",
|
||||
claudeSettingsAlertSuffix: "Restart Claude CLI to apply.",
|
||||
applyToClaude: "Apply to Claude CLI",
|
||||
// Presets
|
||||
configPresets: "Configuration Presets",
|
||||
saveAsPreset: "Save as Preset",
|
||||
deletePreset: "Delete Preset",
|
||||
loadPreset: "Load preset into form",
|
||||
load: "Load",
|
||||
presetHint: "Select a preset to load it. Click \"Apply to Claude CLI\" to save changes.",
|
||||
presetLoaded: "Preset loaded. Click \"Apply to Claude CLI\" to save.",
|
||||
presetSaved: "Preset saved",
|
||||
presetDeleted: "Preset deleted",
|
||||
unsavedChangesTitle: "Unsaved Changes",
|
||||
unsavedChangesMessage: "Your current configuration doesn't match any saved preset. If you switch, your current unsaved settings will be lost.",
|
||||
loadAnyway: "Load Anyway",
|
||||
savePresetTitle: "Save Preset",
|
||||
savePresetDesc: "Save the current configuration as a reusable preset.",
|
||||
presetName: "Preset Name",
|
||||
presetNamePlaceholder: "e.g., My Work Setup",
|
||||
savePreset: "Save Preset",
|
||||
// Settings - Server
|
||||
port: "Port",
|
||||
uiVersion: "UI Version",
|
||||
@@ -389,6 +407,24 @@ document.addEventListener('alpine:init', () => {
|
||||
claudeSettingsAlertPrefix: "以下设置直接修改",
|
||||
claudeSettingsAlertSuffix: "重启 Claude CLI 生效。",
|
||||
applyToClaude: "应用到 Claude CLI",
|
||||
// Presets
|
||||
configPresets: "配置预设",
|
||||
saveAsPreset: "另存为预设",
|
||||
deletePreset: "删除预设",
|
||||
loadPreset: "加载预设到表单",
|
||||
load: "加载",
|
||||
presetHint: "选择预设以加载。点击“应用到 Claude CLI”以保存更改。",
|
||||
presetLoaded: "预设已加载。点击“应用到 Claude CLI”以保存。",
|
||||
presetSaved: "预设已保存",
|
||||
presetDeleted: "预设已删除",
|
||||
unsavedChangesTitle: "未保存的更改",
|
||||
unsavedChangesMessage: "当前配置与任何已保存的预设都不匹配。如果切换预设，当前未保存的设置将会丢失。",
|
||||
loadAnyway: "仍然加载",
|
||||
savePresetTitle: "保存预设",
|
||||
savePresetDesc: "将当前配置保存为可重复使用的预设。",
|
||||
presetName: "预设名称",
|
||||
presetNamePlaceholder: "例如：工作配置",
|
||||
savePreset: "保存预设",
|
||||
// Settings - Server
|
||||
port: "端口",
|
||||
uiVersion: "UI 版本",
|
||||
|
||||
@@ -204,6 +204,52 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Presets -->
|
||||
<div class="card bg-space-900/30 border border-neon-cyan/30 p-5">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neon-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
|
||||
</svg>
|
||||
<label class="text-xs uppercase text-neon-cyan font-semibold" x-text="$store.global.t('configPresets') || 'Configuration Presets'">Configuration Presets</label>
|
||||
</div>
|
||||
<button class="btn btn-xs btn-ghost text-neon-cyan hover:bg-neon-cyan/10 gap-1"
|
||||
@click="saveCurrentAsPreset()"
|
||||
:disabled="savingPreset">
|
||||
<svg x-show="!savingPreset" xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<span x-show="!savingPreset" x-text="$store.global.t('saveAsPreset') || 'Save as Preset'">Save as Preset</span>
|
||||
<span x-show="savingPreset" class="loading loading-spinner loading-xs"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<select
|
||||
class="select select-sm bg-space-800 border-space-border text-white flex-1 font-mono text-xs"
|
||||
:disabled="presets.length === 0"
|
||||
:value="selectedPresetName"
|
||||
@change="onPresetSelect($event.target.value)"
|
||||
aria-label="Select preset">
|
||||
<option value="" disabled x-show="presets.length === 0">No presets available</option>
|
||||
<template x-for="preset in presets" :key="preset.name">
|
||||
<option :value="preset.name" x-text="preset.name" :selected="preset.name === selectedPresetName"></option>
|
||||
</template>
|
||||
</select>
|
||||
<button class="btn btn-sm btn-ghost text-red-400 hover:bg-red-500/10"
|
||||
@click="deleteSelectedPreset()"
|
||||
:disabled="!selectedPresetName || presets.length === 0 || deletingPreset"
|
||||
:title="$store.global.t('deletePreset') || 'Delete preset'">
|
||||
<span x-show="!deletingPreset">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</span>
|
||||
<span x-show="deletingPreset" class="loading loading-spinner loading-xs"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-[10px] text-gray-600 mt-2" x-text="$store.global.t('presetHint') || 'Select a preset to load it. Click \"Apply to Claude CLI\" to save changes.'">Select a preset to load it. Click "Apply to Claude CLI" to save changes.</p>
|
||||
</div>
|
||||
|
||||
<!-- Base URL -->
|
||||
<div class="card bg-space-900/30 border border-space-border/50 p-5">
|
||||
<label class="label text-xs uppercase text-gray-500 font-semibold mb-2"
|
||||
@@ -570,6 +616,72 @@
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- Unsaved Changes Confirmation Modal -->
|
||||
<dialog id="unsaved_changes_modal" class="modal">
|
||||
<div class="modal-box bg-space-900 border-2 border-yellow-500/50">
|
||||
<h3 class="font-bold text-lg text-yellow-400 flex items-center gap-2">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<span x-text="$store.global.t('unsavedChangesTitle') || 'Unsaved Changes'">Unsaved Changes</span>
|
||||
</h3>
|
||||
<p class="py-4 text-gray-300">
|
||||
<span x-text="$store.global.t('unsavedChangesMessage') || 'Your current configuration doesn\'t match any saved preset.'">Your current configuration doesn't match any saved preset.</span>
|
||||
<br><br>
|
||||
<span class="text-yellow-400/80" x-text="'Load \"' + pendingPresetName + '\" and lose current changes?'"></span>
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost text-gray-400" @click="cancelLoadPreset()"
|
||||
x-text="$store.global.t('cancel')">Cancel</button>
|
||||
<button class="btn bg-yellow-500 hover:bg-yellow-600 border-none text-black" @click="confirmLoadPreset()">
|
||||
<span x-text="$store.global.t('loadAnyway') || 'Load Anyway'">Load Anyway</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button @click="cancelLoadPreset()">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<!-- Save Preset Modal -->
|
||||
<dialog id="save_preset_modal" class="modal" x-data="{ presetName: '' }">
|
||||
<div class="modal-box bg-space-900 border-2 border-neon-cyan/50">
|
||||
<h3 class="font-bold text-lg text-neon-cyan flex items-center gap-2">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
|
||||
</svg>
|
||||
<span x-text="$store.global.t('savePresetTitle') || 'Save Preset'">Save Preset</span>
|
||||
</h3>
|
||||
<p class="py-2 text-gray-400 text-sm" x-text="$store.global.t('savePresetDesc') || 'Save the current configuration as a reusable preset.'">
|
||||
Save the current configuration as a reusable preset.
|
||||
</p>
|
||||
<div class="form-control mt-4">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-300" x-text="$store.global.t('presetName') || 'Preset Name'">Preset Name</span>
|
||||
</label>
|
||||
<input type="text" x-model="presetName"
|
||||
class="input input-sm input-bordered bg-space-800 border-space-border text-white w-full"
|
||||
:placeholder="$store.global.t('presetNamePlaceholder') || 'e.g., My Work Setup'"
|
||||
@keydown.enter="$root.executeSavePreset(presetName); presetName = ''"
|
||||
x-init="$watch('$el.closest(\'dialog\').open', open => { if (open) { presetName = ''; $nextTick(() => $el.focus()) } })"
|
||||
aria-label="Preset name">
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost text-gray-400" @click="presetName = ''; document.getElementById('save_preset_modal').close()"
|
||||
x-text="$store.global.t('cancel')">Cancel</button>
|
||||
<button class="btn bg-neon-cyan hover:bg-cyan-600 border-none text-black"
|
||||
@click="$root.executeSavePreset(presetName); presetName = ''"
|
||||
:disabled="!presetName.trim() || $root.savingPreset"
|
||||
:class="{ 'loading': $root.savingPreset }">
|
||||
<span x-show="!$root.savingPreset" x-text="$store.global.t('savePreset') || 'Save Preset'">Save Preset</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button @click="presetName = ''">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3: Models Configuration -->
|
||||
|
||||
Reference in New Issue
Block a user