From c2a4613e32e62d3d4458c8661eab67df55b304e2 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sun, 18 Aug 2024 23:37:09 +0800
Subject: [PATCH] fix: windows minapp control button

---
 src/renderer/src/assets/styles/index.scss    | 25 +++-----
 src/renderer/src/components/MinApp/index.tsx | 65 +++++++++++++-------
 src/renderer/src/components/app/Sidebar.tsx  |  2 +-
 3 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss
index ebcf6a45..93492afe 100644
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -44,7 +44,7 @@
   --input-bar-background: rgba(255, 255, 255, 0.02);
 
   --navbar-height: 42px;
-  --sidebar-width: 50px;
+  --sidebar-width: 52px;
   --status-bar-height: 40px;
   --input-bar-height: 85px;
 
@@ -166,37 +166,28 @@ body,
   gap: 4px;
 }
 
-.dragable {
+.drag {
   -webkit-app-region: drag;
 }
 
-.dragdisable {
+.nodrag {
   -webkit-app-region: no-drag;
 }
 
 .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 {
-    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);
     width: calc(100vw - var(--sidebar-width));
-    padding-right: 10px !important;
     border-bottom: 0.5px solid var(--color-border);
     margin-top: -0.5px;
   }
   .ant-drawer-body {
     padding: 0;
+    margin-top: var(--navbar-height);
+    overflow: hidden;
   }
   .minapp-mask {
     background-color: transparent !important;
diff --git a/src/renderer/src/components/MinApp/index.tsx b/src/renderer/src/components/MinApp/index.tsx
index 62f711ee..0741acab 100644
--- a/src/renderer/src/components/MinApp/index.tsx
+++ b/src/renderer/src/components/MinApp/index.tsx
@@ -1,4 +1,5 @@
 import { CloseOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons'
+import { isMac, isWindows } from '@renderer/config/constant'
 import { useBridge } from '@renderer/hooks/useBridge'
 import store from '@renderer/store'
 import { setMinappShow } from '@renderer/store/runtime'
@@ -40,9 +41,30 @@ const PopupContainer: React.FC<Props> = ({ title, url, resolve }) => {
     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 (
     <Drawer
-      title={title || <Title />}
+      title={<Title />}
       placement="bottom"
       onClose={onClose}
       open={open}
@@ -54,19 +76,6 @@ const PopupContainer: React.FC<Props> = ({ title, url, resolve }) => {
       closeIcon={null}
       style={{ marginLeft: 'var(--sidebar-width)' }}>
       <Frame src={url} ref={iframeRef} />
-      <ButtonsGroup>
-        <Button onClick={onReload}>
-          <ReloadOutlined />
-        </Button>
-        {canOpenExternalLink && (
-          <Button onClick={onOpenLink}>
-            <ExportOutlined />
-          </Button>
-        )}
-        <Button onClick={onClose}>
-          <CloseOutlined />
-        </Button>
-      </ButtonsGroup>
     </Drawer>
   )
 }
@@ -77,24 +86,36 @@ const Frame = styled.iframe`
   border: none;
 `
 
-const Title = styled.div`
-  min-height: var(--navbar-height);
+const TitleContainer = styled.div`
+  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`
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: var(--navbar-height);
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 5px;
-  padding: 0 10px;
+  -webkit-app-region: no-drag;
 `
 
 const Button = styled.div`
-  -webkit-app-region: no-drag;
   cursor: pointer;
   width: 30px;
   height: 30px;
diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index 32e3f1cb..c73d871e 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -25,7 +25,7 @@ const Sidebar: FC = () => {
 
   return (
     <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>
         <Menus>
           <StyledLink to="/">