vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-05-31 19:04:39 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: 修复设计文件列表行菜单被裁剪的问题 (#561)

Browse source
This commit is contained in:
bojie.hbj 2026-05-06 00:46:18 +08:00 committed by GitHub
parent 6b2792b03a
commit 29e1ed5f28
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 24 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/web/src/components/DesignFilesPanel.tsx
View file

@ -61,6 +61,8 @@ export function DesignFilesPanel({
const dragDepthRef = useRef(0); const dragDepthRef = useRef(0);
const [hover, setHover] = useState<string | null>(null); const [hover, setHover] = useState<string | null>(null);
const [menuPos, setMenuPos] = useState<{ name: string; top: number; left: number } | null>(null); const [menuPos, setMenuPos] = useState<{ name: string; top: number; left: number } | null>(null);
const MENU_ESTIMATED_HEIGHT = 115;
const MENU_SAFE_PADDING = 8;
const [preview, setPreview] = useState<string | null>(null); const [preview, setPreview] = useState<string | null>(null);
const [sectionLimits, setSectionLimits] = useState<Partial<Record<Section, number>>>({}); const [sectionLimits, setSectionLimits] = useState<Partial<Record<Section, number>>>({});
const [isSectionExpansionPending, startSectionExpansion] = useTransition(); const [isSectionExpansionPending, startSectionExpansion] = useTransition();
@ -379,10 +381,30 @@ export function DesignFilesPanel({
const rect = (e.target as HTMLElement) const rect = (e.target as HTMLElement)
.closest('.df-row-menu') .closest('.df-row-menu')
?.getBoundingClientRect(); ?.getBoundingClientRect();
if (!rect) return;
const viewportHeight = window.innerHeight;
const spaceBelow = viewportHeight - rect.bottom;
const spaceAbove = rect.top;
let top: number;
if (spaceBelow >= MENU_ESTIMATED_HEIGHT + MENU_SAFE_PADDING) {
top = rect.bottom + 4;
} else if (spaceAbove >= MENU_ESTIMATED_HEIGHT + MENU_SAFE_PADDING) {
top = rect.top - MENU_ESTIMATED_HEIGHT - 4;
} else {
top = Math.max(
MENU_SAFE_PADDING,
viewportHeight - MENU_ESTIMATED_HEIGHT - MENU_SAFE_PADDING,
);
}
const left = Math.max(MENU_SAFE_PADDING, rect.right - 160);
setMenuPos({ setMenuPos({
name: f.name, name: f.name,
top: (rect?.bottom ?? 0) + 4, top,
left: (rect?.right ?? 0) - 160, left,
}); });
}} }}
> >