refactor: 主题切换移到⚙️设置下拉菜单
Nexus CI/CD / test (push) Waiting to run
Nexus CI/CD / deploy (push) Blocked by required conditions
Nexus Pre-commit Checks / quick-check (push) Waiting to run

- 移除标题栏独立主题按钮(🌙/☀️)
- 新增⚙️设置按钮 → 下拉菜单
- 菜单项: 「☀️ 亮色主题」/「🌙 暗色主题」动态文字
- 点击菜单外自动关闭
- 菜单样式: bg-slate-800, rounded, shadow, 最小宽度200px
This commit is contained in:
Your Name
2026-05-31 02:42:24 +08:00
parent e65c9993a2
commit 94fbdf7b2d
+26 -4
View File
@@ -70,12 +70,20 @@
<!-- Tabs (clickable, not draggable) -->
<div id="editorTabBar" class="flex flex-1 overflow-x-auto min-w-0"></div>
<!-- Right buttons -->
<div class="flex items-center shrink-0">
<button onclick="toggleEditorTheme()" id="themeBtn" class="text-slate-500 hover:text-white px-2 py-2 text-sm hover:bg-slate-700" title="切换亮色/暗色主题">🌙</button>
<div class="flex items-center shrink-0 relative">
<!-- Settings menu -->
<button onclick="toggleEditorMenu(event)" class="text-slate-500 hover:text-white px-2 py-2 text-sm hover:bg-slate-700" title="设置">⚙️</button>
<button onclick="toggleEditorSize()" id="sizeBtn" class="text-slate-500 hover:text-white px-2 py-2 text-sm hover:bg-slate-700" title="最大化/还原"></button>
<button onclick="toggleEditorFullscreen()" id="fsBtn" class="text-slate-500 hover:text-white px-2 py-2 text-sm hover:bg-slate-700" title="全屏"></button>
<button onclick="minimizeEditor()" class="text-slate-500 hover:text-white px-2 py-2 text-sm hover:bg-slate-700" title="最小化"></button>
<button onclick="closeAllTabs()" class="text-slate-500 hover:text-red-400 px-2 py-2 text-sm hover:bg-red-900/30" title="关闭全部"></button>
<!-- Settings dropdown menu -->
<div id="editorMenu" class="hidden absolute right-0 top-full mt-1 bg-slate-800 border border-slate-700 rounded-lg shadow-xl py-2 min-w-[200px] z-50">
<div class="px-4 py-2 text-xs text-slate-500 font-medium border-b border-slate-700 mb-1">编辑器设置</div>
<button onclick="toggleEditorTheme()" class="w-full text-left px-4 py-2 text-sm text-slate-200 hover:bg-slate-700 flex items-center gap-2">
<span id="themeIcon">☀️</span> <span id="themeLabel">亮色主题</span>
</button>
</div>
</div>
</div>
<!-- Body: file tree + editor -->
@@ -650,8 +658,21 @@
loadEditorTheme();
function updateThemeBtn(){
const btn=document.getElementById('themeBtn');
if(btn)btn.textContent=_editorTheme==='vs-dark'?'🌙':'☀️';
const icon=document.getElementById('themeIcon');
const label=document.getElementById('themeLabel');
if(icon)icon.textContent=_editorTheme==='vs-dark'?'🌙':'☀️';
if(label)label.textContent=_editorTheme==='vs-dark'?'暗色主题':'亮色主题';
}
function toggleEditorMenu(e){
e.stopPropagation();
const menu=document.getElementById('editorMenu');
menu.classList.toggle('hidden');
// Close on outside click
if(!menu.classList.contains('hidden')){
const close=()=>{menu.classList.add('hidden');document.removeEventListener('click',close)};
setTimeout(()=>document.addEventListener('click',close),10);
}
}
function toggleEditorTheme(){
@@ -659,6 +680,7 @@
_openTabs.forEach(t=>{if(t.editor)t.editor.updateOptions({theme:_editorTheme})});
updateThemeBtn();
apiFetch(API+'/settings/editor_theme',{method:'PUT',headers:apiHeadersJSON(),body:JSON.stringify({value:_editorTheme})});
document.getElementById('editorMenu').classList.add('hidden');
}
function openFileInEditor(path,name,content){