merge: 合并 origin 主题图标改动(backend/dist/admin.html)与本地K线/AI分析五提交
This commit is contained in:
Vendored
+41
-17
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user