Skip to content

Commit

Permalink
fix: 窗口较小时,工具显示适配问题
Browse files Browse the repository at this point in the history
  • Loading branch information
yangtb2024 authored and kangfenmao committed Feb 16, 2025
1 parent 9e128d2 commit 4eb0c25
Showing 1 changed file with 22 additions and 5 deletions.
27 changes: 22 additions & 5 deletions src/renderer/src/components/Popups/MinAppsPopover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import App from '@renderer/pages/apps/App'
import { Popover } from 'antd'
import { Empty } from 'antd'
import { isEmpty } from 'lodash'
import { FC, useState } from 'react'
import { FC, useState, useEffect } from 'react'
import { useHotkeys } from 'react-hotkeys-hook'
import styled from 'styled-components'

Expand All @@ -26,8 +26,22 @@ const MinAppsPopover: FC<Props> = ({ children }) => {
setOpen(false)
}

const [maxHeight, setMaxHeight] = useState(window.innerHeight - 100);

useEffect(() => {
const handleResize = () => {
setMaxHeight(window.innerHeight - 100);
};

window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

const content = (
<PopoverContent>
<PopoverContent maxHeight={maxHeight}>
<AppsContainer>
{minapps.map((app) => (
<App key={app.id} app={app} onClick={handleClose} size={50} />
Expand All @@ -54,12 +68,15 @@ const MinAppsPopover: FC<Props> = ({ children }) => {
)
}

const PopoverContent = styled(Scrollbar)``
const PopoverContent = styled(Scrollbar)<{ maxHeight: number }>`
max-height: ${(props) => props.maxHeight}px;
overflow-y: auto;
`

const AppsContainer = styled.div`
display: grid;
display: grid;
grid-template-columns: repeat(6, minmax(90px, 1fr));
gap: 18px;
`
`;

export default MinAppsPopover

0 comments on commit 4eb0c25

Please sign in to comment.