fix: windows minapp control button

This commit is contained in:
kangfenmao 2024-08-18 23:37:09 +08:00
parent 26570a24bf
commit d0f002bb3e
3 changed files with 52 additions and 40 deletions

View File

@ -44,7 +44,7 @@
--input-bar-background: rgba(255, 255, 255, 0.02); --input-bar-background: rgba(255, 255, 255, 0.02);
--navbar-height: 42px; --navbar-height: 42px;
--sidebar-width: 50px; --sidebar-width: 52px;
--status-bar-height: 40px; --status-bar-height: 40px;
--input-bar-height: 85px; --input-bar-height: 85px;
@ -166,37 +166,28 @@ body,
gap: 4px; gap: 4px;
} }
.dragable { .drag {
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.dragdisable { .nodrag {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.minapp-drawer { .minapp-drawer {
.ant-drawer-header-title {
flex-direction: row-reverse;
}
.ant-drawer-close {
position: absolute;
top: 6px;
right: 15px;
padding: 15px;
margin-right: -5px;
-webkit-app-region: no-drag;
z-index: 100000;
}
.ant-drawer-header { .ant-drawer-header {
height: calc(var(--navbar-height) + 0.5px); position: absolute;
-webkit-app-region: drag;
min-height: calc(var(--navbar-height) + 0.5px);
background: var(--navbar-background); background: var(--navbar-background);
width: calc(100vw - var(--sidebar-width)); width: calc(100vw - var(--sidebar-width));
padding-right: 10px !important;
border-bottom: 0.5px solid var(--color-border); border-bottom: 0.5px solid var(--color-border);
margin-top: -0.5px; margin-top: -0.5px;
} }
.ant-drawer-body { .ant-drawer-body {
padding: 0; padding: 0;
margin-top: var(--navbar-height);
overflow: hidden;
} }
.minapp-mask { .minapp-mask {
background-color: transparent !important; background-color: transparent !important;

View File

@ -1,4 +1,5 @@
import { CloseOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons' import { CloseOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons'
import { isMac, isWindows } from '@renderer/config/constant'
import { useBridge } from '@renderer/hooks/useBridge' import { useBridge } from '@renderer/hooks/useBridge'
import store from '@renderer/store' import store from '@renderer/store'
import { setMinappShow } from '@renderer/store/runtime' import { setMinappShow } from '@renderer/store/runtime'
@ -40,9 +41,30 @@ const PopupContainer: React.FC<Props> = ({ title, url, resolve }) => {
window.api.openWebsite(url) window.api.openWebsite(url)
} }
const Title = () => {
return (
<TitleContainer style={{ justifyContent: isWindows ? 'flex-start' : 'space-between' }}>
<TitleText>{title}</TitleText>
<ButtonsGroup>
<Button onClick={onReload}>
<ReloadOutlined />
</Button>
{canOpenExternalLink && (
<Button onClick={onOpenLink}>
<ExportOutlined />
</Button>
)}
<Button onClick={onClose}>
<CloseOutlined />
</Button>
</ButtonsGroup>
</TitleContainer>
)
}
return ( return (
<Drawer <Drawer
title={title || <Title />} title={<Title />}
placement="bottom" placement="bottom"
onClose={onClose} onClose={onClose}
open={open} open={open}
@ -54,19 +76,6 @@ const PopupContainer: React.FC<Props> = ({ title, url, resolve }) => {
closeIcon={null} closeIcon={null}
style={{ marginLeft: 'var(--sidebar-width)' }}> style={{ marginLeft: 'var(--sidebar-width)' }}>
<Frame src={url} ref={iframeRef} /> <Frame src={url} ref={iframeRef} />
<ButtonsGroup>
<Button onClick={onReload}>
<ReloadOutlined />
</Button>
{canOpenExternalLink && (
<Button onClick={onOpenLink}>
<ExportOutlined />
</Button>
)}
<Button onClick={onClose}>
<CloseOutlined />
</Button>
</ButtonsGroup>
</Drawer> </Drawer>
) )
} }
@ -77,24 +86,36 @@ const Frame = styled.iframe`
border: none; border: none;
` `
const Title = styled.div` const TitleContainer = styled.div`
min-height: var(--navbar-height); display: flex;
flex-direction: row;
align-items: center;
padding-left: ${isMac ? '20px' : '15px'};
padding-right: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
`
const TitleText = styled.div`
font-weight: bold;
font-size: 14px;
color: var(--color-text-1);
margin-right: 10px;
user-select: none;
` `
const ButtonsGroup = styled.div` const ButtonsGroup = styled.div`
position: absolute;
top: 0;
right: 0;
height: var(--navbar-height);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
padding: 0 10px; -webkit-app-region: no-drag;
` `
const Button = styled.div` const Button = styled.div`
-webkit-app-region: no-drag;
cursor: pointer; cursor: pointer;
width: 30px; width: 30px;
height: 30px; height: 30px;

View File

@ -25,7 +25,7 @@ const Sidebar: FC = () => {
return ( return (
<Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBackgroundColor }}> <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBackgroundColor }}>
<AvatarImg src={avatar || Logo} draggable={false} className="dragdisable" onClick={onEditUser} /> <AvatarImg src={avatar || Logo} draggable={false} className="nodrag" onClick={onEditUser} />
<MainMenus> <MainMenus>
<Menus> <Menus>
<StyledLink to="/"> <StyledLink to="/">