yumoqing
ffdc7fc983
Phase 1-2 deliverables: - shell.ui: Global layout framework (topbar + collapsible sidebar + main content) - shell_theme.css: Dark/light theme CSS custom properties system - shell_theme.js: Theme toggle + sidebar collapse with localStorage persistence - global_menu.ui: Unified module navigation menu with RBAC visibility - index.ui: Redesigned dashboard homepage with modern stat cards + quick links - Stat card widgets: today_usage, today_amount, total_users, concurrent, errors - chart_top_models.ui + api/top_models.dspy: ChartBar with data_url pattern - table_top_users_amount.ui: Jinja2-rendered user ranking table - build.sh: Added .css file linking support Design system: - Dark theme (default): slate color palette (#0B1120, #111827, #1E293B) - Light theme: clean white palette with matching structure - Theme persisted in localStorage, toggled via topbar button - Sidebar collapsible with icon-only mode, state persisted in localStorage - Responsive stat cards with hover effects and trend indicators - Quick link cards for model management, users, knowledge base, errors
88 lines
3.5 KiB
JavaScript
88 lines
3.5 KiB
JavaScript
/* Sage Modern UI Shell Theme & Layout Controller
|
|
Handles: theme switching (dark/light), sidebar collapse, localStorage persistence
|
|
*/
|
|
(function() {
|
|
'use strict';
|
|
|
|
var THEME_KEY = 'sage_ui_theme';
|
|
var SIDEBAR_KEY = 'sage_sidebar_collapsed';
|
|
|
|
// Initialize theme on page load
|
|
function initTheme() {
|
|
var saved = null;
|
|
try { saved = localStorage.getItem(THEME_KEY); } catch(e) {}
|
|
var theme = saved || 'dark';
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
updateThemeIcon(theme);
|
|
}
|
|
|
|
// Toggle between dark and light
|
|
function toggleTheme() {
|
|
var current = document.documentElement.getAttribute('data-theme') || 'dark';
|
|
var next = current === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
try { localStorage.setItem(THEME_KEY, next); } catch(e) {}
|
|
updateThemeIcon(next);
|
|
}
|
|
|
|
// Update the theme toggle icon based on current theme
|
|
function updateThemeIcon(theme) {
|
|
var btn = document.getElementById('theme_toggle_btn');
|
|
if (!btn) return;
|
|
if (theme === 'light') {
|
|
// Show moon icon (switch to dark)
|
|
btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
|
|
} else {
|
|
// Show sun icon (switch to light)
|
|
btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
|
|
}
|
|
}
|
|
|
|
// Initialize sidebar state
|
|
function initSidebar() {
|
|
var collapsed = false;
|
|
try { collapsed = localStorage.getItem(SIDEBAR_KEY) === 'true'; } catch(e) {}
|
|
var sidebar = document.getElementById('sage_sidebar');
|
|
if (sidebar && collapsed) {
|
|
sidebar.classList.add('collapsed');
|
|
}
|
|
}
|
|
|
|
// Toggle sidebar collapse
|
|
function toggleSidebar() {
|
|
var sidebar = document.getElementById('sage_sidebar');
|
|
if (!sidebar) return;
|
|
sidebar.classList.toggle('collapsed');
|
|
var isCollapsed = sidebar.classList.contains('collapsed');
|
|
try { localStorage.setItem(SIDEBAR_KEY, isCollapsed); } catch(e) {}
|
|
|
|
// Update toggle icon
|
|
var btn = document.getElementById('sidebar_toggle_btn');
|
|
if (btn) {
|
|
if (isCollapsed) {
|
|
btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/></svg>';
|
|
} else {
|
|
btn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/></svg>';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Run on DOM ready
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initTheme();
|
|
initSidebar();
|
|
});
|
|
} else {
|
|
initTheme();
|
|
initSidebar();
|
|
}
|
|
|
|
// Expose global functions for bricks bind access
|
|
window.sageToggleTheme = toggleTheme;
|
|
window.sageToggleSidebar = toggleSidebar;
|
|
window.sageInitTheme = initTheme;
|
|
window.sageInitSidebar = initSidebar;
|
|
|
|
})();
|