diff --git a/README.md b/README.md index 67d99a2..332a2e3 100644 --- a/README.md +++ b/README.md @@ -230,6 +230,11 @@ const { t } = useI18n() - 前端封装:`src/utils/window.ts`(`minimizeWindow` / `toggleMaximizeWindow` / `closeWindow` / `startDragging` 等),在非 Tauri 环境(浏览器)下自动空转。 - 自定义标题栏依赖无边框窗口(`src-tauri/tauri.conf.json` 中 `decorations: false`),拖拽区域通过 `data-tauri-drag-region` 实现。 +- **窗口圆角(8px)**:Windows 11 由系统 DWM 自动裁切;macOS 的无边框窗口系统不会裁圆角,因此: + - `src-tauri/tauri.macos.conf.json` 中把窗口设为 `transparent: true`(**Tauri 2.12.1+ 无需再开启 `macOSPrivateApi`**); + - `src/assets/main.css` 中在 `html.is-macos` 下把背景从 `` 移到 `#app`,由 `#app` 裁出 8px 圆角,并让 `html`/`body` 透明以透出桌面; + - `src/main.ts` 在挂载前根据 UA 给 `` 打上 `is-macos` 标记。 + - ⚠️ 平台配置文件按 **JSON Merge Patch** 合并,且**数组整体替换**,因此 `tauri.macos.conf.json` 里必须完整重复 `app.windows` 的字段;**修改基础配置的窗口参数时,记得同步这份文件**。 - 相关权限在 `src-tauri/capabilities/default.json` 中声明(`core:window:*`、`updater:default`、`process:default` 等)。**新增窗口 / 插件 API 调用时需同步补充对应权限**,否则会报 `not allowed` 错误。 ### 发布与自动更新 diff --git a/src-tauri/tauri.macos.conf.json b/src-tauri/tauri.macos.conf.json new file mode 100644 index 0000000..0765e33 --- /dev/null +++ b/src-tauri/tauri.macos.conf.json @@ -0,0 +1,16 @@ +{ + "$schema": "https://schema.tauri.app/config/2", + "app": { + "windows": [ + { + "title": "Frpilot", + "width": 1100, + "height": 720, + "minWidth": 900, + "minHeight": 600, + "decorations": false, + "transparent": true + } + ] + } +} diff --git a/src/assets/main.css b/src/assets/main.css index aec953f..e14c6bd 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -11,28 +11,35 @@ body, padding: 0; } -/* - * 背景统一绘制在 上: - * 根元素的背景会被绘制到整个画布(canvas)上,铺满窗口的每一个像素, - * 不会出现“元素高度(100vh) 与实际窗口差几个像素”导致的上下留白。 - */ -html { - background-color: #eef2ff; - background-image: +/* 窗口背景色与渐变(供 html / #app 复用,避免重复定义) */ +:root { + --app-bg-color: #eef2ff; + --app-bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.28), transparent 60%), radial-gradient(1000px 500px at 110% 10%, rgba(34, 211, 238, 0.28), transparent 55%), linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #eef7ff 100%); - background-repeat: no-repeat; } html.dark { - background-color: #0b1220; - background-image: + --app-bg-color: #0b1220; + --app-bg-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.35), transparent 60%), radial-gradient(1000px 500px at 110% 10%, rgba(14, 165, 233, 0.28), transparent 55%), linear-gradient(160deg, #0b1220 0%, #0f172a 45%, #111827 100%); } +/* + * 默认(Windows / Linux):背景绘制在 上。 + * 根元素的背景会被绘制到整个画布(canvas)上,铺满窗口的每一个像素, + * 不会出现“元素高度(100vh) 与实际窗口差几个像素”导致的上下留白; + * 窗口圆角交给系统裁切(Windows 11 的 DWM 默认就是 8px 圆角)。 + */ +html { + background-color: var(--app-bg-color); + background-image: var(--app-bg-gradient); + background-repeat: no-repeat; +} + /* 选中自定义背景图时替换为图片:等比缩放铺满,不拉伸变形 */ html.has-bg-image { background-image: var(--app-bg-image, none); @@ -41,11 +48,44 @@ html.has-bg-image { background-repeat: no-repeat; } +/* + * macOS:无边框窗口系统不会自动裁圆角(不像 Windows 11 的 DWM), + * 因此通过 tauri.macos.conf.json 开启 transparent 窗口, + * 再把背景从 移到 #app 上并由 #app 裁出 8px 圆角, + * html/body 保持完全透明,让圆角之外的区域透出桌面壁纸。 + */ +html.is-macos, +html.is-macos body { + background: transparent !important; +} + +html.is-macos #app { + position: fixed; + inset: 0; + border-radius: 8px; + overflow: hidden; + background-color: var(--app-bg-color); + background-image: var(--app-bg-gradient); + background-repeat: no-repeat; +} + +html.is-macos.has-bg-image #app { + background-image: var(--app-bg-image, none); + background-size: cover; + background-position: center center; + background-repeat: no-repeat; +} + +/* 全屏遮罩跟随窗口圆角,避免弹窗打开时遮罩把圆角「填方」 */ +html.is-macos .ant-modal-mask { + border-radius: 8px; +} + body { overflow: hidden; font-family: 'Inter', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; -webkit-font-smoothing: antialiased; - /* 背景交由 绘制,body 保持透明避免覆盖画布背景 */ + /* 背景交由 (或 macOS 下的 #app)绘制,body 保持透明避免覆盖画布背景 */ background-color: transparent; } diff --git a/src/composables/usePlatform.ts b/src/composables/usePlatform.ts index efff9ff..3bddf1d 100644 --- a/src/composables/usePlatform.ts +++ b/src/composables/usePlatform.ts @@ -5,15 +5,17 @@ export type Platform = "windows" | "macos" | "linux" | "unknown" * 判断当前运行的操作系统类型。 * 通过 navigator.userAgent 推断,避免额外引入 @tauri-apps/plugin-os。 */ -export function usePlatform() { +export function detectPlatform(): Platform { const ua = (navigator.userAgent || "").toLowerCase() + if (ua.includes("mac") || ua.includes("darwin")) return "macos" + if (ua.includes("win")) return "windows" + if (ua.includes("linux") || ua.includes("x11")) return "linux" + return "unknown" +} - const platform = computed(() => { - if (ua.includes("mac") || ua.includes("darwin")) return "macos" - if (ua.includes("win")) return "windows" - if (ua.includes("linux") || ua.includes("x11")) return "linux" - return "unknown" - }) +/** 在组件中响应式地获取当前平台 */ +export function usePlatform() { + const platform = ref(detectPlatform()) const isMac = computed(() => platform.value === "macos") const isWindows = computed(() => platform.value === "windows") diff --git a/src/main.ts b/src/main.ts index 4ee5b9c..56ab20e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -9,6 +9,16 @@ import "ant-design-vue/dist/reset.css" import router from "@/router/router" // 引入国际化 import i18n from "@/i18n" +import { detectPlatform } from "@/composables/usePlatform" + +/* + * macOS 的无边框窗口系统不会自动裁圆角,需要配合 transparent 窗口, + * 由 #app 自身裁出 8px 圆角(见 assets/main.css)。这里在挂载前打上平台标记, + * 避免首帧出现方角闪烁。 + */ +if (detectPlatform() === "macos") { + document.documentElement.classList.add("is-macos") +} const app = createApp(App) app.use(createPinia())