feat(webui): Add Models tab and refactor model configuration
- Add standalone Models tab with real-time quota/status display - Move model identity table from Dashboard to Models tab - Slim down Dashboard to KPI cards and charts only - Dashboard charts now use unfiltered data (independent of Models filters) Settings > Models improvements: - Remove redundant Alias column (only Mapping is functional) - Fix column misalignment bug (empty td) - Add column widths and hidden row opacity styling - Single row edit constraint (only one Mapping editable at a time) - showHiddenModels toggle now only affects Settings (not Models tab) - Update description text to match current functionality i18n: - Add 'models' and 'modelsPageDesc' keys (EN/ZH) - Add 'modelMappingHint' for Claude CLI guidance - Update 'modelsDesc' to reflect new functionality
This commit is contained in:
58
public/js/components/models.js
Normal file
58
public/js/components/models.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/**
|
||||
* Models Component
|
||||
* Displays model quota/status list
|
||||
* Registers itself to window.Components for Alpine.js to consume
|
||||
*/
|
||||
window.Components = window.Components || {};
|
||||
|
||||
window.Components.models = () => ({
|
||||
init() {
|
||||
// Ensure data is fetched when this tab becomes active
|
||||
this.$watch('$store.global.activeTab', (val) => {
|
||||
if (val === 'models') {
|
||||
// Trigger recompute to ensure filters are applied
|
||||
this.$nextTick(() => {
|
||||
Alpine.store('data').computeQuotaRows();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Initial compute if already on models tab
|
||||
if (this.$store.global.activeTab === 'models') {
|
||||
this.$nextTick(() => {
|
||||
Alpine.store('data').computeQuotaRows();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update model configuration (Pin/Hide quick actions)
|
||||
* @param {string} modelId - The model ID to update
|
||||
* @param {object} configUpdates - Configuration updates (pinned, hidden)
|
||||
*/
|
||||
async updateModelConfig(modelId, configUpdates) {
|
||||
const store = Alpine.store('global');
|
||||
try {
|
||||
const { response, newPassword } = await window.utils.request('/api/models/config', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ modelId, config: configUpdates })
|
||||
}, store.webuiPassword);
|
||||
|
||||
if (newPassword) store.webuiPassword = newPassword;
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update model config');
|
||||
}
|
||||
|
||||
// Optimistic update
|
||||
Alpine.store('data').modelConfig[modelId] = {
|
||||
...Alpine.store('data').modelConfig[modelId],
|
||||
...configUpdates
|
||||
};
|
||||
Alpine.store('data').computeQuotaRows();
|
||||
} catch (e) {
|
||||
store.showToast('Failed to update: ' + e.message, 'error');
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user