try hide titlebar

src/main/index.ts

@@ -155,6 +155,13 @@ export function createWindow(show = false): void {
     x: mainWindowState.x,
     y: mainWindowState.y,
     show: false,
+    frame: false,
+    titleBarStyle: 'hidden',
+    titleBarOverlay: {
+      color: '#00000000',
+      symbolColor: '#8D8D8D',
+      height: 48
+    },
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon: icon } : {}),
     webPreferences: {

src/renderer/src/App.tsx

@@ -106,12 +106,13 @@ const App: React.FC = () => {
   return (
     <div className="w-full h-[100vh] flex">
       <div className="side w-[250px] h-full overflow-y-auto no-scrollbar">
-        <div className="sticky top-0 z-40 backdrop-blur bg-background/40 h-[49px]">
+        <div className="app-drag sticky top-0 z-40 backdrop-blur bg-background/40 h-[49px]">
           <div className="flex justify-between p-2">
             <h3 className="text-lg font-bold leading-[32px]">Mihomo Party</h3>
             <UpdaterButton />
             <Button
               size="sm"
+              className="app-nodrag"
               isIconOnly
               color={location.pathname.includes('/settings') ? 'primary' : 'default'}
               variant={location.pathname.includes('/settings') ? 'solid' : 'light'}

src/renderer/src/assets/main.css

@@ -7,6 +7,13 @@
   src: url('./NotoColorEmoji.ttf');
 }
 
+.app-nodrag {
+  -webkit-app-region: none;
+}
+.app-drag {
+  -webkit-app-region: drag;
+}
+
 * {
   user-select: none;
 }

src/renderer/src/components/base/base-page.tsx

@@ -16,10 +16,11 @@ const BasePage = forwardRef<HTMLDivElement, Props>((props, ref) => {
   return (
     <div ref={contentRef} className="w-full h-full overflow-y-auto custom-scrollbar">
       <div className="sticky top-0 z-40 h-[49px] w-full backdrop-blur bg-background/40">
-        <div className="p-2 flex justify-between h-[48px]">
+        <div className="app-drag p-2 flex justify-between h-[48px]">
           <div className="title h-full text-lg leading-[32px]">{props.title}</div>
-          <div className="header h-full">{props.header}</div>
+          <div className="header h-full mr-[130px]">{props.header}</div>
         </div>
+
         <Divider />
       </div>
       <div className="content">{props.children}</div>

src/renderer/src/components/updater/updater-button.tsx

@@ -30,6 +30,7 @@ const UpdaterButton: React.FC = () => {
         />
       )}
       <Button
+        className="app-nodrag"
         color="danger"
         size="sm"
         onPress={() => {

src/renderer/src/pages/connections.tsx

@@ -102,7 +102,7 @@ const Connections: React.FC = () => {
             </span>
           </div>
           <Button
-            className="ml-1"
+            className="app-nodrag ml-1"
             size="sm"
             color="primary"
             onPress={() => {

src/renderer/src/pages/dns.tsx

@@ -122,6 +122,7 @@ const DNS: React.FC = () => {
       header={
         <Button
           size="sm"
+          className="app-nodrag"
           color="primary"
           onPress={() => {
             const hostsObject = Object.fromEntries(

src/renderer/src/pages/override.tsx

@@ -115,7 +115,7 @@ const Override: React.FC = () => {
         <>
           <Button
             size="sm"
-            className="mr-2"
+            className="app-nodrag mr-2"
             onPress={() => {
               open('https://mihomo.party/guides/function/override/yaml/')
             }}
@@ -123,6 +123,7 @@ const Override: React.FC = () => {
             使用文档
           </Button>
           <Button
+            className="app-nodrag"
             size="sm"
             onPress={() => {
               open('https://github.com/pompurin404/override-hub')

src/renderer/src/pages/profiles.tsx

@@ -103,6 +103,7 @@ const Profiles: React.FC = () => {
       header={
         <Button
           size="sm"
+          className="app-nodrag"
           color="primary"
           isLoading={updating}
           onPress={async () => {

src/renderer/src/pages/proxies.tsx

@@ -110,7 +110,7 @@ const Proxies: React.FC = () => {
     <BasePage
       title="代理组"
       header={
-        <div>
+        <div className="app-nodrag">
           <Button
             size="sm"
             isIconOnly

src/renderer/src/pages/settings.tsx

@@ -18,7 +18,7 @@ const Settings: React.FC = () => {
             isIconOnly
             size="sm"
             title="官方文档"
-            className="mr-2"
+            className="app-nodrag mr-2"
             onPress={() => {
               window.open('https://mihomo.party')
             }}
@@ -28,6 +28,7 @@ const Settings: React.FC = () => {
           <Button
             isIconOnly
             size="sm"
+            className="app-nodrag"
             title="GitHub仓库"
             onPress={() => {
               window.open('https://github.com/pompurin404/mihomo-party')

src/renderer/src/pages/sniffer.tsx

@@ -71,6 +71,7 @@ const Sniffer: React.FC = () => {
       header={
         <Button
           size="sm"
+          className="app-nodrag"
           color="primary"
           onPress={() =>
             onSave({

src/renderer/src/pages/syspeoxy.tsx

@@ -100,7 +100,7 @@ const Sysproxy: React.FC = () => {
     <BasePage
       title="系统代理设置"
       header={
-        <Button size="sm" color="primary" onPress={onSave}>
+        <Button className="app-nodrag" size="sm" color="primary" onPress={onSave}>
           保存
         </Button>
       }

src/renderer/src/pages/tun.tsx

@@ -62,6 +62,7 @@ const Tun: React.FC = () => {
         header={
           <Button
             size="sm"
+            className="app-nodrag"
             color="primary"
             onPress={() =>
               onSave({