diff --git a/app/globals.css b/app/globals.css index 5531159..88aa02f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1600,6 +1600,18 @@ body { } } +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(8px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + @keyframes slideUp { from { opacity: 0; diff --git a/app/page.js b/app/page.js index d9c733c..b7fd04d 100644 --- a/app/page.js +++ b/app/page.js @@ -30,6 +30,7 @@ const SnapshotManager = dynamic(() => import('./components/SnapshotManager'), { const WelcomeModal = dynamic(() => import('./components/WelcomeModal'), { ssr: false }); export default function Home() { + const [showGitMenu, setShowGitMenu] = useState(false); const { chapters, setChapters, addChapter, updateChapter: updateChapterStore, activeChapterId, setActiveChapterId, @@ -352,27 +353,127 @@ export default function Home() { touchAction: 'none', }; if (btnKey === 'github') { + const gitBtnRef = { current: null }; return ( - e.preventDefault()} - style={{ ...commonStyle, display: 'flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none', color: 'inherit' }} - onPointerDown={makeDraggable} - onClick={(e) => { if (e.currentTarget.dataset.justDragged) e.preventDefault(); }} + style={{ ...commonStyle, touchAction: 'none' }} + onPointerDown={(e) => { + // Use the same drag logic but on this outer container + const el = e.currentTarget; + const parentRect = el.parentElement.getBoundingClientRect(); + const rect = el.getBoundingClientRect(); + const startX = e.clientX, startY = e.clientY; + const offsetX = e.clientX - rect.left; + const offsetY = e.clientY - rect.top; + let dragging = false; + const onMove = (ev) => { + if (!dragging && Math.abs(ev.clientX - startX) + Math.abs(ev.clientY - startY) < 5) return; + dragging = true; + ev.preventDefault(); + const r = Math.max(0, Math.min(parentRect.width - rect.width, parentRect.right - ev.clientX - (rect.width - offsetX))); + const b = Math.max(0, Math.min(parentRect.height - rect.height, parentRect.bottom - ev.clientY - (rect.height - offsetY))); + el.style.right = `${r}px`; + el.style.bottom = `${b}px`; + }; + const onUp = () => { + document.removeEventListener('pointermove', onMove); + document.removeEventListener('pointerup', onUp); + if (dragging) { + el.dataset.justDragged = '1'; + localStorage.setItem(storageKey, JSON.stringify({ right: parseInt(el.style.right), bottom: parseInt(el.style.bottom) })); + setTimeout(() => delete el.dataset.justDragged, 0); + } + }; + document.addEventListener('pointermove', onMove); + document.addEventListener('pointerup', onUp); + }} onMouseEnter={(e) => e.currentTarget.style.opacity = '1'} onMouseLeave={(e) => e.currentTarget.style.opacity = '0.8'} - title="GitHub" > - - - - + {/* Dropdown popup */} + {showGitMenu && ( + <> +
setShowGitMenu(false)} + /> +
+ setShowGitMenu(false)} + style={{ + display: 'flex', alignItems: 'center', gap: '10px', + padding: '10px 14px', borderRadius: '8px', + textDecoration: 'none', color: 'var(--text-primary)', + fontSize: '14px', fontWeight: 500, + transition: 'background 0.15s', + }} + onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-hover, rgba(0,0,0,0.05))'} + onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'} + > + + + + GitHub + + setShowGitMenu(false)} + style={{ + display: 'flex', alignItems: 'center', gap: '10px', + padding: '10px 14px', borderRadius: '8px', + textDecoration: 'none', color: 'var(--text-primary)', + fontSize: '14px', fontWeight: 500, + transition: 'background 0.15s', + }} + onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-hover, rgba(0,0,0,0.05))'} + onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'} + > + + + + Gitee（国内镜像） + +
+ + )} + {/* FAB button */} +
e.preventDefault()} + style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '44px', height: '44px', borderRadius: '50%', cursor: 'grab', userSelect: 'none' }} + onClick={(e) => { if (!e.currentTarget.parentElement.dataset.justDragged) setShowGitMenu(prev => !prev); }} + title="GitHub / Gitee" + > + + + +
+
); } return (