feat: 为 macOS 适配无边框窗口圆角效果

新增 macOS 平台配置文件，修改平台检测逻辑，在 macOS 时给 html 加标记，调整 CSS 让 #app 绘制背景并裁切 8px 圆角，避免首帧方角闪烁，同时适配弹窗遮罩圆角。

src/assets/main.css

@@ -11,28 +11,35 @@ body,
   padding: 0;
 }
 
-/*
- * 背景统一绘制在 <html> 上：
- * 根元素的背景会被绘制到整个画布（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）：背景绘制在 <html> 上。
+ * 根元素的背景会被绘制到整个画布（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 窗口，
+ * 再把背景从 <html> 移到 #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;
-  /* 背景交由 <html> 绘制，body 保持透明避免覆盖画布背景 */
+  /* 背景交由 <html>（或 macOS 下的 #app）绘制，body 保持透明避免覆盖画布背景 */
   background-color: transparent;
 }
 

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<Platform>(() => {
-    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<Platform>(detectPlatform())
 
   const isMac = computed(() => platform.value === "macos")
   const isWindows = computed(() => platform.value === "windows")

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())