mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-08 14:29:15 +08:00
fix: windows minapp control button
This commit is contained in:
parent
26570a24bf
commit
d0f002bb3e
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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="/">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user