refactor: 主题切换移到⚙️设置下拉菜单
- 移除标题栏独立主题按钮(🌙/☀️) - 新增⚙️设置按钮 → 下拉菜单 - 菜单项: 「☀️ 亮色主题」/「🌙 暗色主题」动态文字 - 点击菜单外自动关闭 - 菜单样式: bg-slate-800, rounded, shadow, 最小宽度200px
This commit is contained in:
+26
-4
@@ -70,12 +70,20 @@
|
|||||||
<!-- Tabs (clickable, not draggable) -->
|
<!-- Tabs (clickable, not draggable) -->
|
||||||
<div id="editorTabBar" class="flex flex-1 overflow-x-auto min-w-0"></div>
|
<div id="editorTabBar" class="flex flex-1 overflow-x-auto min-w-0"></div>
|
||||||
<!-- Right buttons -->
|
<!-- Right buttons -->
|
||||||
<div class="flex items-center shrink-0">
|
<div class="flex items-center shrink-0 relative">
|
||||||
<button onclick="toggleEditorTheme()" id="themeBtn" class="text-slate-500 hover:text-white px-2 py-2 text-sm hover:bg-slate-700" title="切换亮色/暗色主题">🌙</button>
|
<!-- 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="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="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="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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<!-- Body: file tree + editor -->
|
<!-- Body: file tree + editor -->
|
||||||
@@ -650,8 +658,21 @@
|
|||||||
loadEditorTheme();
|
loadEditorTheme();
|
||||||
|
|
||||||
function updateThemeBtn(){
|
function updateThemeBtn(){
|
||||||
const btn=document.getElementById('themeBtn');
|
const icon=document.getElementById('themeIcon');
|
||||||
if(btn)btn.textContent=_editorTheme==='vs-dark'?'🌙':'☀️';
|
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(){
|
function toggleEditorTheme(){
|
||||||
@@ -659,6 +680,7 @@
|
|||||||
_openTabs.forEach(t=>{if(t.editor)t.editor.updateOptions({theme:_editorTheme})});
|
_openTabs.forEach(t=>{if(t.editor)t.editor.updateOptions({theme:_editorTheme})});
|
||||||
updateThemeBtn();
|
updateThemeBtn();
|
||||||
apiFetch(API+'/settings/editor_theme',{method:'PUT',headers:apiHeadersJSON(),body:JSON.stringify({value:_editorTheme})});
|
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){
|
function openFileInEditor(path,name,content){
|
||||||
|
|||||||
Reference in New Issue
Block a user