perf: update linux ui

Author: ibuler

src-tauri/src/setup/menu.rs

@@ -186,12 +186,14 @@ pub fn open_settings_window<R: Runtime>(app: &tauri::AppHandle<R>) {
 
     match builder.build() {
         Ok(_win) => {
-            #[cfg(target_os = "windows")]
+            #[cfg(any(target_os = "windows", target_os = "linux"))]
             {
-                // Windows 下禁用原生装饰（标题栏/菜单栏），与主窗口保持一致
+                // Windows / Linux 下禁用原生装饰，与主窗口保持一致
                 if let Err(e) = _win.set_decorations(false) {
                     warn!("Failed to disable decorations for settings window: {}", e);
                 }
+
+                #[cfg(target_os = "windows")]
                 if let Err(e) = _win.set_shadow(false) {
                     warn!("Failed to disable shadow for settings window: {}", e);
                 }

src-tauri/src/setup/window_effects.rs

@@ -41,12 +41,12 @@ pub fn apply_windows_blur(_win: &WebviewWindow) -> Result<(), Box<dyn std::error
     Ok(())
 }
 
-/// 为 Linux 窗口保留原生标题栏，使用桌面环境自己的窗口按钮
+/// 为 Linux 窗口隐藏原生标题栏，使用应用内自定义按钮
 #[cfg(target_os = "linux")]
 pub fn apply_linux_window(win: &WebviewWindow) -> Result<(), Box<dyn std::error::Error>> {
-    info!("Keeping Linux native window decorations enabled");
-    if let Err(e) = win.set_decorations(true) {
-        error!("Failed to enable Linux window decorations: {}", e);
+    info!("Disabling Linux window decorations for custom header");
+    if let Err(e) = win.set_decorations(false) {
+        error!("Failed to disable Linux window decorations: {}", e);
     }
     Ok(())
 }

ui/components/Header/ActionButtons.vue

@@ -5,7 +5,7 @@ import type { ActionItem } from "~/types/index";
 import { LogicalPosition } from "@tauri-apps/api/dpi";
 
 const { t, locale } = useI18n();
-const { isWindows } = usePlatform();
+const { isLinux, isMacOS } = usePlatform();
 const { layouts, sort, setSort, setLayouts } = useSettingManager();
 
 const localePath = useLocalePath();
@@ -17,6 +17,8 @@ const commonButtonProps = {
   color: "neutral" as const
 };
 
+const showCustomWindowControls = computed(() => !isMacOS.value);
+
 // 窗口控制按钮配置
 const windowControlButtons = computed(() => {
   // Windows 下显示窗口控制按钮
@@ -50,15 +52,20 @@ const windowControlButtons = computed(() => {
 
 // 获取窗口控制按钮的样式类
 const getWindowControlButtonClass = (buttonKey: string) => {
-  const baseClass = "rounded-none w-12 h-13 p-1 flex items-center justify-center";
+  const isLinuxStyle = isLinux.value;
+  const baseClass = isLinuxStyle
+    ? "h-9 w-9 rounded-full p-1 flex items-center justify-center transition-colors"
+    : "rounded-none w-12 h-13 p-1 flex items-center justify-center";
 
   switch (buttonKey) {
     case "minimize":
-      return `${baseClass} `;
+      return isLinuxStyle ? `${baseClass} hover:bg-black/6 dark:hover:bg-white/10` : `${baseClass} `;
     case "maximize":
-      return `${baseClass} `;
+      return isLinuxStyle ? `${baseClass} hover:bg-black/6 dark:hover:bg-white/10` : `${baseClass} `;
     case "close":
-      return `${baseClass} hover:bg-red-500 hover:text-white active:bg-red-600`;
+      return isLinuxStyle
+        ? `${baseClass} hover:bg-red-500/12 hover:text-red-600 dark:hover:bg-red-500/18 dark:hover:text-red-300`
+        : `${baseClass} hover:bg-red-500 hover:text-white active:bg-red-600`;
     default:
       return baseClass;
   }
@@ -195,7 +202,7 @@ const actionItems = computed<ActionItem[]>(() => [
 
       // 直接创建窗口
 
-      const useNativeWindowFrame = !isWindows.value;
+      const useNativeWindowFrame = isMacOS.value;
       new useTauriWebviewWindowWebviewWindow(label, {
         title: t("Common.ConnectionSettings"),
         url: localePath({ path: "/setting" }),
@@ -242,7 +249,7 @@ const actionItems = computed<ActionItem[]>(() => [
     </div>
 
     <!-- 窗口控制按钮 -->
-    <div v-if="isWindows" class="flex items-center">
+    <div v-if="showCustomWindowControls" class="flex items-center" :class="isLinux ? 'gap-1.5' : ''">
       <template v-for="button of windowControlButtons" :key="button.key">
         <UButton
           size="sm"

ui/components/SideBar/profile.vue

@@ -30,7 +30,7 @@ const userInfoStore = useUserInfoStore();
 
 const { t, locales, locale } = useI18n();
 const { loggedIn, currentSite, userMap, currentUser } = storeToRefs(userInfoStore);
-const { isWindows } = usePlatform();
+const { isMacOS } = usePlatform();
 
 const {
   setLang,
@@ -294,7 +294,7 @@ async function openToolWindow(
       return;
     }
 
-    const useNativeWindowFrame = !isWindows.value;
+    const useNativeWindowFrame = isMacOS.value;
 
     // eslint-disable-next-line no-new
     new useTauriWebviewWindowWebviewWindow(label, {

ui/components/Window/ResizeFrame.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+type ResizeDirection = "East" | "North" | "NorthEast" | "NorthWest" | "South" | "SouthEast" | "SouthWest" | "West";
+
+const props = withDefaults(
+  defineProps<{
+    enabled?: boolean
+    inset?: number
+  }>(),
+  {
+    enabled: true,
+    inset: 6
+  }
+);
+
+const handles = computed(() => {
+  const inset = `${props.inset}px`;
+
+  return [
+    { key: "north", direction: "North" as ResizeDirection, class: "absolute left-3 right-3 top-0 h-1.5 cursor-ns-resize" },
+    { key: "south", direction: "South" as ResizeDirection, class: "absolute left-3 right-3 bottom-0 h-1.5 cursor-ns-resize" },
+    { key: "west", direction: "West" as ResizeDirection, class: "absolute left-0 top-3 bottom-3 w-1.5 cursor-ew-resize" },
+    { key: "east", direction: "East" as ResizeDirection, class: "absolute right-0 top-3 bottom-3 w-1.5 cursor-ew-resize" },
+    { key: "north-west", direction: "NorthWest" as ResizeDirection, class: "absolute left-0 top-0 h-3 w-3 cursor-nwse-resize" },
+    { key: "north-east", direction: "NorthEast" as ResizeDirection, class: "absolute right-0 top-0 h-3 w-3 cursor-nesw-resize" },
+    { key: "south-west", direction: "SouthWest" as ResizeDirection, class: "absolute left-0 bottom-0 h-3 w-3 cursor-nesw-resize" },
+    { key: "south-east", direction: "SouthEast" as ResizeDirection, class: "absolute right-0 bottom-0 h-3 w-3 cursor-nwse-resize" }
+  ].map(handle => ({
+    ...handle,
+    style: { margin: inset }
+  }));
+});
+
+async function startResize(direction: ResizeDirection) {
+  if (!props.enabled) return;
+
+  try {
+    await useTauriWindowGetCurrentWindow().startResizeDragging(direction);
+  } catch {
+    // ignore outside desktop runtime
+  }
+}
+</script>
+
+<template>
+  <div v-if="enabled" class="pointer-events-none absolute inset-0 z-40">
+    <div
+      v-for="handle of handles"
+      :key="handle.key"
+      class="pointer-events-auto select-none"
+      :class="handle.class"
+      :style="handle.style"
+      @mousedown.left.prevent="startResize(handle.direction)"
+    />
+  </div>
+</template>

ui/layouts/default.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 const { initialTheme, listenOSThemeChange } = useThemeAdapter();
-const { isWindows } = usePlatform();
+const { isLinux, isWindows } = usePlatform();
 
 const cardUi = computed(() => {
   const base = ["rounded-none", "overflow-visible"];
@@ -29,7 +29,8 @@ onMounted(() => {
     :ui="cardUi"
     :style="{ backgroundColor: isWindows ? 'transparent' : 'var(--ui-bg)' }"
   >
-    <div class="flex gap-0 w-full h-screen border-none">
+    <div class="relative flex gap-0 w-full h-screen border-none">
+      <WindowResizeFrame :enabled="isLinux" />
       <SideBar />
 
       <Main class="flex-1 min-w-0">

ui/layouts/setting.vue

@@ -4,7 +4,7 @@ import type { NavigationMenuItem } from "@nuxt/ui";
 const localePath = useLocalePath();
 
 const { t } = useI18n();
-const { isWindows } = usePlatform();
+const { isLinux, isMacOS, isWindows } = usePlatform();
 const { theme } = useSettingManager();
 const { initialTheme, listenOSThemeChange } = useThemeAdapter();
 
@@ -14,6 +14,8 @@ const commonButtonProps = {
   color: "neutral" as const
 };
 
+const showCustomWindowControls = computed(() => !isMacOS.value);
+
 const windowControlButtons = computed(() => {
   return [
     {
@@ -44,19 +46,26 @@ const windowControlButtons = computed(() => {
 });
 
 const windowControlRailClass = computed(() => {
-  return isWindows.value ? "w-36" : "w-0";
+  if (isWindows.value) return "w-36";
+  if (isLinux.value) return "w-32";
+  return "w-0";
 });
 
 const getWindowControlButtonClass = (buttonKey: string) => {
-  const baseClass = "rounded-none w-12 h-13 p-1 flex items-center justify-center";
+  const isLinuxStyle = isLinux.value;
+  const baseClass = isLinuxStyle
+    ? "h-9 w-9 rounded-full p-1 flex items-center justify-center transition-colors"
+    : "rounded-none w-12 h-13 p-1 flex items-center justify-center";
 
   switch (buttonKey) {
     case "minimize":
-      return `${baseClass} `;
+      return isLinuxStyle ? `${baseClass} hover:bg-black/6 dark:hover:bg-white/10` : `${baseClass} `;
     case "maximize":
-      return `${baseClass} `;
+      return isLinuxStyle ? `${baseClass} hover:bg-black/6 dark:hover:bg-white/10` : `${baseClass} `;
     case "close":
-      return `${baseClass} hover:bg-red-500 hover:text-white active:bg-red-600`;
+      return isLinuxStyle
+        ? `${baseClass} hover:bg-red-500/12 hover:text-red-600 dark:hover:bg-red-500/18 dark:hover:text-red-300`
+        : `${baseClass} hover:bg-red-500 hover:text-white active:bg-red-600`;
     default:
       return baseClass;
   }
@@ -95,14 +104,15 @@ onMounted(() => {
 
 <template>
   <UPage
-    class="h-screen flex flex-col"
+    class="relative h-screen flex flex-col"
     :ui="{
       center: 'flex flex-col h-full min-h-0'
     }"
     :style="{
       backgroundColor: theme === 'dark' ? '#2C2C2C' : '#F5F5F5'
     }"
   >
+    <WindowResizeFrame :enabled="isLinux" />
     <UPageHeader
       :ui="{
         root: 'p-0'
@@ -131,7 +141,7 @@ onMounted(() => {
               :class="windowControlRailClass"
               data-tauri-drag-region="false"
             >
-              <template v-if="isWindows">
+              <template v-if="showCustomWindowControls">
                 <template v-for="button of windowControlButtons" :key="button.key">
                   <UButton
                     :icon="button.iconName"