feat(dashboard): unify icons with Lucide Icons library

- Introduce Lucide Icons via CDN for consistent SVG icons
- Replace emoji icons with Lucide SVG icons in sidebar navigation
- Fix Sessions/Explorer icon confusion (📁/📂 → history/folder-tree)
- Update top bar icons (logo, theme toggle, search, refresh)
- Update stats section icons with colored Lucide icons
- Add icon animations support (animate-spin for loading states)
- Update Explorer view with Lucide folder/file icons
- Support dark/light theme icon adaptation

Icon mapping:
- Explorer: folder-tree (was 📂)
- Sessions: history (was 📁)
- Overview: bar-chart-3
- Active: play-circle
- Archived: archive
- Lite Plan: file-edit
- Lite Fix: wrench
- MCP Servers: plug
- Hooks: webhook
This commit is contained in:
catlog22
2025-12-08 22:58:42 +08:00
parent 818d9f3f5d
commit 5f31c9ad7e
9 changed files with 2882 additions and 27 deletions

View File

@@ -6,6 +6,7 @@ function initTheme() {
const saved = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', saved);
updateThemeIcon(saved);
updateHljsTheme(saved);
document.getElementById('themeToggle').addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
@@ -13,9 +14,36 @@ function initTheme() {
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
updateThemeIcon(next);
updateHljsTheme(next);
});
}
function updateThemeIcon(theme) {
document.getElementById('themeToggle').textContent = theme === 'light' ? '🌙' : '☀️';
const darkIcon = document.querySelector('.theme-icon-dark');
const lightIcon = document.querySelector('.theme-icon-light');
if (darkIcon && lightIcon) {
if (theme === 'light') {
darkIcon.classList.remove('hidden');
lightIcon.classList.add('hidden');
} else {
darkIcon.classList.add('hidden');
lightIcon.classList.remove('hidden');
}
}
}
function updateHljsTheme(theme) {
// Toggle highlight.js theme stylesheets
const darkTheme = document.getElementById('hljs-theme-dark');
const lightTheme = document.getElementById('hljs-theme-light');
if (darkTheme && lightTheme) {
if (theme === 'dark') {
darkTheme.disabled = false;
lightTheme.disabled = true;
} else {
darkTheme.disabled = true;
lightTheme.disabled = false;
}
}
}