mirror of
https://github.com/afoim/fuwari.git
synced 2026-01-31 09:03:18 +08:00
fix(通知组件): 修复查看更新按钮点击失效问题并优化滚动条样式
- 将 data-diff-toggle 事件委托改为直接 onclick 绑定,解决 Astro 组件重渲染时事件监听失效问题 - 为更新列表添加 overflow-x: hidden 防止水平滚动 - 在组件内定义自定义滚动条样式,统一各浏览器显示效果 - 调整通知级别从 warning 改为 info 以匹配实际使用场景
This commit is contained in:
@@ -1,3 +1,26 @@
|
|||||||
|
<style>
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--primary);
|
||||||
|
border-radius: 20px;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: var(--primary);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
/* Firefox */
|
||||||
|
.custom-scrollbar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--primary) transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<div id="new-post-notification" class="fixed bottom-4 right-4 z-50 flex flex-col items-end pointer-events-none">
|
<div id="new-post-notification" class="fixed bottom-4 right-4 z-50 flex flex-col items-end pointer-events-none">
|
||||||
<!-- Minimized State (Bell Icon) -->
|
<!-- Minimized State (Bell Icon) -->
|
||||||
<button id="notification-minimized" class="pointer-events-auto bg-[var(--card-bg)] border border-[var(--primary)] text-[var(--primary)] p-3 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 flex items-center justify-center relative group">
|
<button id="notification-minimized" class="pointer-events-auto bg-[var(--card-bg)] border border-[var(--primary)] text-[var(--primary)] p-3 rounded-full shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 flex items-center justify-center relative group">
|
||||||
@@ -16,7 +39,7 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="new-post-list" class="text-sm text-black/80 dark:text-white/80 transition-colors space-y-1 max-h-[60vh] overflow-y-auto custom-scrollbar"></div>
|
<div id="new-post-list" class="text-sm text-black/80 dark:text-white/80 transition-colors space-y-1 max-h-[60vh] overflow-y-auto overflow-x-hidden custom-scrollbar"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -198,7 +221,7 @@
|
|||||||
|
|
||||||
if (isUpdated && post.diff) {
|
if (isUpdated && post.diff) {
|
||||||
diffButton = `
|
diffButton = `
|
||||||
<button data-diff-toggle="${safeId}" class="ml-auto text-xs text-[var(--primary)] hover:underline focus:outline-none">
|
<button onclick="window.toggleDiff('${safeId}')" class="ml-auto text-xs text-[var(--primary)] hover:underline focus:outline-none pointer-events-auto">
|
||||||
View Changes
|
View Changes
|
||||||
</button>`;
|
</button>`;
|
||||||
}
|
}
|
||||||
@@ -329,16 +352,22 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Add event delegation for toggles
|
// Add event delegation for toggles
|
||||||
list.addEventListener('click', (e) => {
|
// Remove and re-add to ensure freshness
|
||||||
const btn = e.target.closest('[data-diff-toggle]');
|
// Or better, just use one listener on the container that always works
|
||||||
if (btn) {
|
// The previous check if (!list.hasAttribute('data-listening')) might be persisting across re-renders improperly if Astro keeps DOM
|
||||||
const targetId = btn.getAttribute('data-diff-toggle');
|
// Let's make it robust:
|
||||||
const target = document.getElementById(targetId);
|
|
||||||
if (target) {
|
// Remove existing listener if possible? No easy way without reference.
|
||||||
target.classList.toggle('hidden');
|
// Instead, let's use a unique attribute or just replace the node (expensive)
|
||||||
}
|
// Or simpler: assign onclick handler to the list container which bubbles up
|
||||||
|
|
||||||
|
// Use a window-level handler for maximum robustness, filtering by ID
|
||||||
|
window.toggleDiff = function(safeId) {
|
||||||
|
const target = document.getElementById(safeId);
|
||||||
|
if (target) {
|
||||||
|
target.classList.toggle('hidden');
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
|
||||||
// Auto-open panel on first load if it's high priority?
|
// Auto-open panel on first load if it's high priority?
|
||||||
// Or keep it minimized to be less intrusive?
|
// Or keep it minimized to be less intrusive?
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import { LinkPreset } from "./types/config";
|
|||||||
|
|
||||||
export const noticeConfig: NoticeConfig = {
|
export const noticeConfig: NoticeConfig = {
|
||||||
enable: true,
|
enable: true,
|
||||||
level: "warning",
|
level: "info",
|
||||||
content: "我们刚刚添加了文章更新系统,自此之后的每次文章更新都会通过右下角的小铃铛提醒您。",
|
content: "我们刚刚添加了文章更新系统,自此之后的每次文章更新都会通过右下角的小铃铛提醒您。",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -25,6 +25,8 @@ description: 关于如何联系二叉树树~
|
|||||||
|
|
||||||
# 非官方
|
# 非官方
|
||||||
|
|
||||||
|
123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312123123123121231231231212312312312
|
||||||
|
|
||||||
> 粉丝自建
|
> 粉丝自建
|
||||||
|
|
||||||
[Telegram: View @blog2x](https://t.me/blog2x)
|
[Telegram: View @blog2x](https://t.me/blog2x)
|
||||||
Reference in New Issue
Block a user