merge: 合并 origin 主题图标改动(backend/dist/admin.html)与本地K线/AI分析五提交

This commit is contained in:
Sakurasan
2026-09-02 13:26:18 +08:00
+41 -17
View File
@@ -129,7 +129,8 @@ tr:hover td{background:color-mix(in oklch,var(--accent) 40%,transparent)}
.modal-box h3{font-size:16px;font-weight:600;margin-bottom:16px}
/* Theme toggle */
.theme-toggle{position:fixed;bottom:16px;right:16px;z-index:50;display:flex;padding:3px;background:var(--muted);border-radius:var(--radius);box-shadow:0 2px 8px oklch(0 0 0 / .08);gap:3px}
.theme-toggle{position:fixed;bottom:16px;right:16px;z-index:50}
.theme-toggle-inner{display:flex;padding:3px;background:var(--muted);border-radius:var(--radius);box-shadow:0 2px 8px oklch(0 0 0 / .08);gap:3px}
.theme-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:calc(var(--radius) - 2px);cursor:pointer;background:transparent;color:var(--muted-foreground);font-size:16px;transition:all .15s;padding:0}
.theme-btn:hover{color:var(--foreground)}
.theme-btn.active{background:var(--background);color:var(--foreground);box-shadow:0 1px 3px oklch(0 0 0 / .08)}
@@ -202,15 +203,7 @@ tr:hover td{background:color-mix(in oklch,var(--accent) 40%,transparent)}
<!-- Theme Toggle -->
<div class="theme-toggle" id="themeToggle">
<button class="theme-btn active" onclick="setTheme('light')" id="themeLight" title="浅色">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
</button>
<button class="theme-btn" onclick="setTheme('dark')" id="themeDark" title="深色">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
</button>
<button class="theme-btn" onclick="setTheme('system')" id="themeSystem" title="自动">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
</button>
<button class="theme-btn" id="themeBtn" onclick="toggleThemeExpand()" title="切换主题"></button>
</div>
<script>
@@ -218,21 +211,52 @@ const API = location.origin;
let token = localStorage.getItem('admin_token');
// Theme
(function initTheme(){
const themeIcons = {
light: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>',
dark: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>',
system: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>'
};
let themeExpanded = false;
function initTheme(){
const t = localStorage.getItem('theme') || 'system';
setTheme(t, false);
})();
document.addEventListener('mousedown', e => {
if (themeExpanded && !document.getElementById('themeToggle').contains(e.target)) {
themeExpanded = false;
renderThemeBtn();
}
});
}
function setTheme(mode, save=true) {
if (save) localStorage.setItem('theme', mode);
const dark = mode === 'dark' || (mode === 'system' && matchMedia('(prefers-color-scheme:dark)').matches);
document.documentElement.classList.toggle('dark', dark);
document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
document.getElementById(mode === 'light' ? 'themeLight' : mode === 'dark' ? 'themeDark' : 'themeSystem').classList.add('active');
themeExpanded = false;
renderThemeBtn();
}
matchMedia('(prefers-color-scheme:dark)').addEventListener('change', () => {
if ((localStorage.getItem('theme') || 'system') === 'system') setTheme('system', false);
});
function renderThemeBtn() {
const current = localStorage.getItem('theme') || 'system';
const toggle = document.getElementById('themeToggle');
if (!themeExpanded) {
toggle.innerHTML = `<button class="theme-btn" id="themeBtn" onclick="toggleThemeExpand()" title="切换主题">${themeIcons[current]}</button>`;
} else {
toggle.innerHTML = `<div class="theme-toggle-inner">
<button class="theme-btn ${current==='light'?'active':''}" onclick="setTheme('light')" title="浅色">${themeIcons.light}</button>
<button class="theme-btn ${current==='dark'?'active':''}" onclick="setTheme('dark')" title="深色">${themeIcons.dark}</button>
<button class="theme-btn ${current==='system'?'active':''}" onclick="setTheme('system')" title="自动">${themeIcons.system}</button>
</div>`;
}
}
function toggleThemeExpand() {
themeExpanded = !themeExpanded;
renderThemeBtn();
}
initTheme();
// Init
if (token) showDashboard();