fix: eliminate top gap by removing global drag overlay

The 38px absolute drag overlay was blocking tab clicks, requiring
padding that created a visible gap. Sidebar already handles its own
drag region, and TabBar uses data-tauri-drag-region directly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
程序员阿江(Relakkes) 2026-04-09 09:21:45 +08:00
parent ed7b0b2629
commit e249c7ab76
2 changed files with 5 additions and 36 deletions

View File

@ -1,4 +1,4 @@
import { useEffect, useState, useCallback, useRef } from 'react'
import { useEffect, useState } from 'react'
import { Sidebar } from './Sidebar'
import { ContentRouter } from './ContentRouter'
import { ToastContainer } from '../shared/Toast'
@ -9,13 +9,10 @@ import { TabBar } from './TabBar'
import { useTabStore } from '../../stores/tabStore'
import { useChatStore } from '../../stores/chatStore'
const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
export function AppShell() {
const fetchSettings = useSettingsStore((s) => s.fetchAll)
const [ready, setReady] = useState(false)
const [startupError, setStartupError] = useState<string | null>(null)
const startDraggingRef = useRef<(() => Promise<void>) | null>(null)
useEffect(() => {
let cancelled = false
@ -48,22 +45,6 @@ export function AppShell() {
}
}, [fetchSettings])
// Pre-cache Tauri window drag function
useEffect(() => {
if (!isTauri) return
import(/* @vite-ignore */ '@tauri-apps/api/window')
.then(({ getCurrentWindow }) => {
const win = getCurrentWindow()
startDraggingRef.current = () => win.startDragging()
})
.catch(() => {})
}, [])
const handleDragMouseDown = useCallback((e: React.MouseEvent) => {
if ((e.target as HTMLElement).closest('button, input, textarea, select, a, [role="button"]')) return
startDraggingRef.current?.()
}, [])
useKeyboardShortcuts()
if (startupError) {
@ -90,17 +71,9 @@ export function AppShell() {
}
return (
<div className="h-screen flex overflow-hidden relative">
{/* Drag region for macOS Overlay title bar — full width strip at the top */}
{isTauri && (
<div
data-tauri-drag-region
onMouseDown={handleDragMouseDown}
className="absolute top-0 left-0 right-0 h-[38px] z-[9999]"
/>
)}
<div className="h-screen flex overflow-hidden">
<Sidebar />
<main id="content-area" className="flex-1 flex flex-col overflow-hidden relative">
<main id="content-area" className="flex-1 flex flex-col overflow-hidden">
<TabBar />
<ContentRouter />
</main>

View File

@ -4,7 +4,6 @@ import { useChatStore } from '../../stores/chatStore'
import { useTranslation } from '../../i18n'
const TAB_WIDTH = 180
const isTauri = typeof window !== 'undefined' && ('__TAURI_INTERNALS__' in window || '__TAURI__' in window)
export function TabBar() {
const tabs = useTabStore((s) => s.tabs)
@ -97,13 +96,10 @@ export function TabBar() {
}
}
if (tabs.length === 0) {
// Still need drag region space in Tauri even with no tabs
return isTauri ? <div className="h-[38px] flex-shrink-0" data-tauri-drag-region /> : null
}
if (tabs.length === 0) return null
return (
<div className={`flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] min-h-[36px] select-none ${isTauri ? 'pt-[38px]' : ''}`} data-tauri-drag-region>
<div className="flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] min-h-[36px] select-none" data-tauri-drag-region>
{canScrollLeft && (
<button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
<span className="material-symbols-outlined text-[16px]">chevron_left</span>