coder/snippet-notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 操作按钮隐藏在···下拉菜单中

Browse Source 
- 置顶、导出、删除三个按钮合并到'更多'菜单
- 点击···图标展开/收起菜单
- 点击其他地方自动关闭菜单
This commit is contained in:
hubian
2026-04-08 18:55:38 +08:00
parent cbe014e10d
commit a30514e6da
1 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
templates/index.html
View File

@@ -145,19 +145,25 @@
<p class="text-xs text-gray-400 mt-1">${n.updated_at}</p> <p class="text-xs text-gray-400 mt-1">${n.updated_at}</p>
<!-- 操作按钮组 --> <!-- 操作按钮组 -->
<div class="action-btn absolute right-2 top-1/2 -translate-y-1/2 flex gap-1"> <div class="action-btn absolute right-2 top-1/2 -translate-y-1/2">
<button onclick="event.stopPropagation(); exportItem('${n.id}')" <button onclick="event.stopPropagation(); toggleMenu('${n.id}')"
class="p-1.5 rounded hover:bg-gray-200 text-gray-500" title="导出"> class="p-1.5 rounded hover:bg-gray-200 text-gray-500" title="更多操作">
<i class="ri-download-line"></i> <i class="ri-more-fill"></i>
</button> </button>
<button onclick="event.stopPropagation(); togglePinItem('${n.id}')" <div id="menu-${n.id}" class="hidden absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg border z-10 min-w-[100px]">
class="p-1.5 rounded hover:bg-gray-200 text-gray-500 ${n.pinned ? 'text-yellow-500' : ''}" title="${n.pinned ? '取消置顶' : '置顶'}"> <button onclick="event.stopPropagation(); exportItem('${n.id}'); hideMenu('${n.id}')"
<i class="${n.pinned ? 'ri-pushpin-fill' : 'ri-pushpin-line'}"></i> class="w-full px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-50 flex items-center gap-2">
<i class="ri-download-line"></i> 导出
</button> </button>
<button onclick="event.stopPropagation(); deleteItem('${n.id}')" <button onclick="event.stopPropagation(); togglePinItem('${n.id}'); hideMenu('${n.id}')"
class="p-1.5 rounded hover:bg-red-100 text-gray-500 hover:text-red-500" title="删除"> class="w-full px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-50 flex items-center gap-2">
<i class="ri-delete-bin-line"></i> <i class="ri-pushpin-line"></i> ${n.pinned ? '取消置顶' : '置顶'}
</button> </button>
<button onclick="event.stopPropagation(); deleteItem('${n.id}'); hideMenu('${n.id}')"
class="w-full px-3 py-2 text-left text-sm text-red-500 hover:bg-red-50 flex items-center gap-2">
<i class="ri-delete-bin-line"></i> 删除
</button>
</div>
</div> </div>
</div> </div>
`).join(''); `).join('');
@@ -340,6 +346,28 @@
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
} }
// 显示/隐藏菜单
function toggleMenu(id) {
const menu = document.getElementById(`menu-${id}`);
if (menu) {
// 先隐藏其他所有菜单
document.querySelectorAll('[id^="menu-"]').forEach(m => {
if (m.id !== `menu-${id}`) m.classList.add('hidden');
});
menu.classList.toggle('hidden');
}
}
function hideMenu(id) {
const menu = document.getElementById(`menu-${id}`);
if (menu) menu.classList.add('hidden');
}
// 点击其他地方关闭所有菜单
document.addEventListener('click', () => {
document.querySelectorAll('[id^="menu-"]').forEach(m => m.classList.add('hidden'));
});
// 删除当前笔记 // 删除当前笔记
async function deleteCurrentNote() { async function deleteCurrentNote() {
if (!currentNoteId) return; if (!currentNoteId) return;