set always on top

changelog.md

@@ -5,5 +5,6 @@
 ### New Features
 
 - 支持使用外部编辑器打开文件
+- 添加窗口置顶按钮
 - 允许禁用系统标题栏
 - 重写连接页面

src/main/utils/ipc.ts

@@ -182,6 +182,12 @@ export function registerIpcMainHandlers(): void {
   ipcMain.handle('setTitleBarOverlay', (_e, overlay) => {
     mainWindow?.setTitleBarOverlay(overlay)
   })
+  ipcMain.handle('setAlwaysOnTop', (_e, alwaysOnTop) => {
+    mainWindow?.setAlwaysOnTop(alwaysOnTop)
+  })
+  ipcMain.handle('isAlwaysOnTop', () => {
+    return mainWindow?.isAlwaysOnTop()
+  })
   ipcMain.handle('openFile', (_e, type, id, ext) => openFile(type, id, ext))
   ipcMain.handle('copyEnv', ipcErrorWrapper(copyEnv))
   ipcMain.handle('alert', (_e, msg) => {

src/renderer/src/App.tsx

@@ -5,6 +5,7 @@ import OutboundModeSwitcher from '@renderer/components/sider/outbound-mode-switc
 import SysproxySwitcher from '@renderer/components/sider/sysproxy-switcher'
 import TunSwitcher from '@renderer/components/sider/tun-switcher'
 import { Button, Divider } from '@nextui-org/react'
+import { BsFillPinFill } from 'react-icons/bs'
 import { IoSettings } from 'react-icons/io5'
 import routes from '@renderer/routes'
 import {
@@ -28,7 +29,7 @@ import MihomoCoreCard from '@renderer/components/sider/mihomo-core-card'
 import ResourceCard from '@renderer/components/sider/resource-card'
 import UpdaterButton from '@renderer/components/updater/updater-button'
 import { useAppConfig } from './hooks/use-app-config'
-import { setNativeTheme, setTitleBarOverlay } from './utils/ipc'
+import { isAlwaysOnTop, setAlwaysOnTop, setNativeTheme, setTitleBarOverlay } from './utils/ipc'
 import { platform } from './utils/init'
 import { TitleBarOverlayOptions } from 'electron'
 
@@ -56,11 +57,16 @@ const App: React.FC = () => {
   } = appConfig || {}
   const [order, setOrder] = useState(siderOrder)
   const sensors = useSensors(useSensor(PointerSensor))
+  const [onTop, setOnTop] = useState(false)
   const { setTheme, systemTheme } = useTheme()
   const navigate = useNavigate()
   const location = useLocation()
   const page = useRoutes(routes)
 
+  const updateAlwaysOnTop = async (): Promise<void> => {
+    setOnTop(await isAlwaysOnTop())
+  }
+
   useEffect(() => {
     setOrder(siderOrder)
   }, [siderOrder])
@@ -141,6 +147,19 @@ const App: React.FC = () => {
               Mihomo Party
             </h3>
             <UpdaterButton />
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                className="app-nodrag"
+                isIconOnly
+                color={onTop ? 'primary' : 'default'}
+                variant={onTop ? 'solid' : 'light'}
+                onPress={async () => {
+                  await setAlwaysOnTop(!onTop)
+                  await updateAlwaysOnTop()
+                }}
+                startContent={<BsFillPinFill className="text-[20px]" />}
+              />
               <Button
                 size="sm"
                 className="app-nodrag"
@@ -153,6 +172,7 @@ const App: React.FC = () => {
                 startContent={<IoSettings className="text-[20px]" />}
               />
             </div>
+          </div>
           {/* <Divider /> */}
         </div>
         <div className="mt-2 mx-2">

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

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

src/renderer/src/utils/ipc.ts

@@ -295,6 +295,14 @@ export async function setTitleBarOverlay(overlay: TitleBarOverlayOptions): Promi
   return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('setTitleBarOverlay', overlay))
 }
 
+export async function setAlwaysOnTop(alwaysOnTop: boolean): Promise<void> {
+  return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('setAlwaysOnTop', alwaysOnTop))
+}
+
+export async function isAlwaysOnTop(): Promise<boolean> {
+  return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('isAlwaysOnTop'))
+}
+
 export async function relaunchApp(): Promise<void> {
   return ipcErrorWrapper(await window.electron.ipcRenderer.invoke('relaunchApp'))
 }