feat: #1790 添加设置项，切换程序和操作系统的标题栏和边框

src-tauri/src/config/verge.rs

@@ -62,6 +62,9 @@ pub struct IVerge {
     /// not show the window on launch
     pub enable_silent_start: Option<bool>,
 
+    /// switch draw or system title bar
+    pub enable_draw_title_bar: Option<bool>,
+
     /// set system proxy
     pub enable_system_proxy: Option<bool>,
 
@@ -205,6 +208,8 @@ impl IVerge {
             tun_tray_icon: Some(false),
             enable_auto_launch: Some(false),
             enable_silent_start: Some(false),
+            #[cfg(not(target_os = "macos"))]
+            enable_draw_title_bar: Some(true),
             enable_system_proxy: Some(false),
             proxy_auto_config: Some(false),
             pac_file_content: Some(DEFAULT_PAC.into()),
@@ -269,6 +274,8 @@ impl IVerge {
         patch!(enable_tun_mode);
         patch!(enable_auto_launch);
         patch!(enable_silent_start);
+        #[cfg(not(target_os = "macos"))]
+        patch!(enable_draw_title_bar);
         patch!(enable_random_port);
         #[cfg(not(target_os = "windows"))]
         patch!(verge_redir_port);

src-tauri/src/lib.rs

@@ -33,7 +33,6 @@ pub fn run() {
 
     #[allow(unused_mut)]
     let mut builder = tauri::Builder::default()
-        .plugin(tauri_plugin_window_state::Builder::new().build())
         .plugin(tauri_plugin_updater::Builder::new().build())
         .plugin(tauri_plugin_clipboard_manager::init())
         .plugin(tauri_plugin_process::init())
@@ -43,7 +42,11 @@ pub fn run() {
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_deep_link::init())
-        .plugin(tauri_plugin_window_state::Builder::default().build())
+        .plugin(
+            tauri_plugin_window_state::Builder::default()
+            .with_state_flags(StateFlags::all() & !StateFlags::DECORATIONS)
+            .build()
+        )
         .setup(|app| {
             #[cfg(target_os = "linux")]
             {
@@ -124,8 +127,33 @@ pub fn run() {
             cmds::service::check_service,
             // clash api
             cmds::clash_api_get_proxy_delay
-        ]);
+        ])
+        .on_window_event(|window, event| match event {
 
+            // 保持APP后台运行
+            tauri::WindowEvent::CloseRequested { api, .. } => {
+                window.hide().unwrap();
+                api.prevent_close();
+            }
+
+            // 窗口失焦保存窗口的状态信息
+            tauri::WindowEvent::Focused(focused) => {
+                if *focused {
+                    return;
+                }
+                // println!("save window state ...");
+
+                let app_hanele: tauri::AppHandle = core::handle::Handle::global().app_handle().unwrap();
+                match app_hanele.save_window_state(StateFlags::all()){
+                    Ok(_) => {}
+                    Err(e) => {
+                        println!("save window state failed: {}", e);
+                    }
+                };
+            }
+
+            _ => {}
+          });
     #[cfg(debug_assertions)]
     {
         builder = builder.plugin(devtools);
@@ -141,17 +169,13 @@ pub fn run() {
                 api.prevent_exit();
             }
         }
+
         tauri::RunEvent::WindowEvent { label, event, .. } => {
-            if label == "main" {
-                match event {
-                    tauri::WindowEvent::CloseRequested { api, .. } => {
-                        println!("closing window...");
-                        api.prevent_close();
-                        let app_hanele = core::handle::Handle::global().app_handle().unwrap();
-                        let _ = app_hanele.save_window_state(StateFlags::default());
-                        let window = core::handle::Handle::global().get_window().unwrap();
-                        log_err!(window.hide());
+            if label != "main" {
+                return;
             }
+
+            match event {
                 tauri::WindowEvent::Focused(true) => {
                     #[cfg(target_os = "macos")]
                     {
@@ -162,6 +186,7 @@ pub fn run() {
                     {
                         log_err!(hotkey::Hotkey::global().register("Control+Q", "quit"));
                     };
+
                 }
                 tauri::WindowEvent::Focused(false) => {
                     #[cfg(target_os = "macos")]
@@ -187,7 +212,6 @@ pub fn run() {
                 _ => {}
             }
         }
-        }
         _ => {}
     });
 }

src-tauri/src/utils/resolve.rs

@@ -121,7 +121,12 @@ pub fn resolve_reset() {
 pub fn create_window() {
     let app_handle = handle::Handle::global().app_handle().unwrap();
 
+   // 是否开启tauri窗口装饰
+   #[cfg(not(target_os = "macos"))]
+   let enable_decoration = !{ Config::verge().data().enable_draw_title_bar }.unwrap();
+
     if let Some(window) = handle::Handle::global().get_window() {
+        trace_err!(window.set_decorations(enable_decoration), "set win decorations");
         trace_err!(window.show(), "set win visible");
         trace_err!(window.set_focus(), "set win focus");
         return;
@@ -139,7 +144,7 @@ pub fn create_window() {
 
     #[cfg(target_os = "windows")]
     let window = builder
-        .decorations(false)
+        .decorations(enable_decoration)
         .additional_browser_args("--enable-features=msWebView2EnableDraggableRegions --disable-features=OverscrollHistoryNavigation,msExperimentalScrolling")
         .transparent(true)
         .inner_size(800.0, 636.0)
@@ -157,7 +162,7 @@ pub fn create_window() {
 
     #[cfg(target_os = "linux")]
     let window = builder
-        .decorations(false)
+        .decorations(enable_decoration)
         .transparent(true)
         .inner_size(800.0, 642.0)
         .build()

src/assets/styles/layout.scss

@@ -127,17 +127,11 @@
 
     .layout__left .the-logo {
       flex: 1 0 58px;
-      margin-top: 10px;
       margin-left: 10px;
-      padding-top: 30px;
       padding-left: 10px;
       padding-right: 20px;
       padding-bottom: 16px;
     }
-
-    .layout__right .the-content {
-      top: 24px;
-    }
   }
 }
 

src/components/setting/setting-system.tsx

@@ -10,6 +10,8 @@ import { GuardState } from "./mods/guard-state";
 import { SysproxyViewer } from "./mods/sysproxy-viewer";
 import { TunViewer } from "./mods/tun-viewer";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
+import getSystem from "@/utils/get-system";
+import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -38,6 +40,7 @@ const SettingSystem = ({ onError }: Props) => {
     enable_auto_launch,
     enable_silent_start,
     enable_system_proxy,
+    enable_draw_title_bar,
   } = verge ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
@@ -45,6 +48,9 @@ const SettingSystem = ({ onError }: Props) => {
     mutateVerge({ ...verge, ...patch }, false);
   };
 
+  const OS = getSystem();
+  const appWindow = getCurrentWebviewWindow();
+
   return (
     <SettingList title={t("System Setting")}>
       <SysproxyViewer ref={sysproxyRef} />
@@ -127,6 +133,27 @@ const SettingSystem = ({ onError }: Props) => {
           <Switch edge="end" />
         </GuardState>
       </SettingItem>
+
+      {OS !== "macos" && (
+        <SettingItem
+          label={t("Use Draw Title Bar")}
+          extra={<TooltipIcon title={t("Use Draw Title Bar Info")} />}
+        >
+          <GuardState
+            value={enable_draw_title_bar ?? false}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => {
+              onChangeData({ enable_draw_title_bar: e });
+              appWindow.setDecorations(!e);
+            }}
+            onGuard={(e) => patchVerge({ enable_draw_title_bar: e })}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </SettingItem>
+      )}
     </SettingList>
   );
 };

src/locales/en.json

@@ -237,6 +237,8 @@
   "Auto Launch": "Auto Launch",
   "Silent Start": "Silent Start",
   "Silent Start Info": "Start the program in background mode without displaying the panel",
+  "Use Draw Title Bar": "Use Drawn Title Bar",
+  "Use Draw Title Bar Info": "Use the drawn title bar instead of the system title bar",
   "TG Channel": "Telegram Channel",
   "Manual": "Manual",
   "Github Repo": "Github Repo",

src/locales/fa.json

@@ -235,6 +235,8 @@
   "Auto Launch": "راه‌اندازی خودکار",
   "Silent Start": "شروع بی‌صدا",
   "Silent Start Info": "برنامه را در حالت پس‌زمینه بدون نمایش پانل اجرا کنید",
+  "Use Draw Title Bar": "Use drawn title bar",
+  "Use Draw Title Bar Info": "Use the drawn title bar instead of the system title bar",
   "Clash Setting": "تنظیمات Clash",
   "Allow Lan": "اجازه LAN",
   "Network Interface": "رابط شبکه",

src/locales/ru.json

@@ -235,6 +235,8 @@
   "Auto Launch": "Автозапуск",
   "Silent Start": "Тихий запуск",
   "Silent Start Info": "Запускать программу в фоновом режиме без отображения панели",
+  "Use Draw Title Bar": "Use drawn title bar",
+  "Use Draw Title Bar Info": "Use the drawn title bar instead of the system title bar",
   "TG Channel": "Канал Telegram",
   "Manual": "Документация",
   "Github Repo": "GitHub репозиторий",

src/locales/zh.json

@@ -237,6 +237,8 @@
   "Auto Launch": "开机自启",
   "Silent Start": "静默启动",
   "Silent Start Info": "程序启动时以后台模式运行，不显示程序面板",
+  "Use Draw Title Bar": "使用绘制的标题栏",
+  "Use Draw Title Bar Info": "开启后将使用软件绘制的标题栏和边框",
   "TG Channel": "Telegram 频道",
   "Manual": "使用手册",
   "Github Repo": "GitHub 项目地址",

src/pages/_layout.tsx

@@ -42,7 +42,7 @@ const Layout = () => {
   const { theme } = useCustomTheme();
 
   const { verge } = useVerge();
-  const { language, start_page } = verge || {};
+  const { language, start_page, enable_draw_title_bar } = verge || {};
   const navigate = useNavigate();
   const location = useLocation();
   const routersEles = useRoutes(routers);
@@ -106,6 +106,15 @@ const Layout = () => {
     }
   }, [language, start_page]);
 
+  const logoStyle = {
+    paddingTop: enable_draw_title_bar ? "30px" : "16px",
+    marginTop: enable_draw_title_bar ? "10px" : "0px",
+  };
+
+  const rightContentStyle = {
+    top: enable_draw_title_bar ? "24px" : "3px",
+  };
+
   return (
     <SWRConfig value={{ errorRetryCount: 3 }}>
       <ThemeProvider theme={theme}>
@@ -131,7 +140,7 @@ const Layout = () => {
             ({ palette }) => ({
               bgcolor: palette.background.paper,
             }),
-            OS === "linux"
+            OS === "linux" && enable_draw_title_bar
               ? {
                   borderRadius: "8px",
                   border: "2px solid var(--divider-color)",
@@ -142,7 +151,11 @@ const Layout = () => {
           ]}
         >
           <div className="layout__left">
-            <div className="the-logo" data-tauri-drag-region="true">
+            <div
+              className="the-logo"
+              data-tauri-drag-region="true"
+              style={logoStyle}
+            >
               <div
                 style={{
                   height: "27px",
@@ -184,18 +197,18 @@ const Layout = () => {
           </div>
 
           <div className="layout__right">
-            {
+            {enable_draw_title_bar && (
               <div className="the-bar">
                 <div
                   className="the-dragbar"
                   data-tauri-drag-region="true"
                   style={{ width: "100%" }}
                 ></div>
-                {OS !== "macos" && <LayoutControl />}
+                <LayoutControl />
               </div>
-            }
+            )}
 
-            <TransitionGroup className="the-content">
+            <TransitionGroup className="the-content" style={rightContentStyle}>
               <CSSTransition
                 key={location.pathname}
                 timeout={300}

src/services/types.d.ts

@@ -704,6 +704,7 @@ interface IVergeConfig {
   enable_auto_launch?: boolean;
   enable_service_mode?: boolean;
   enable_silent_start?: boolean;
+  enable_draw_title_bar?: boolean;
   enable_system_proxy?: boolean;
   proxy_auto_config?: boolean;
   pac_file_content?: string;