fix(system): 🐛 修复mac端右键菜单透明度问题

修复mac端图标过大问题

BREAKING CHANGE: 新增mac端弹出框的关闭按钮

src-tauri/capabilities/default.json

@@ -42,6 +42,8 @@
     "http:allow-fetch-cancel",
     "http:allow-fetch-read-body",
     "http:allow-fetch-send",
+    "core:tray:default",
+    "core:tray:allow-get-by-id",
     {
       "identifier": "http:default",
       "allow": [

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"default":{"identifier":"default","description":"Capability for the main window","local":true,"windows":["*"],"permissions":["core:window:default","core:window:allow-create","core:window:allow-start-dragging","core:window:allow-close","core:window:allow-hide","core:window:allow-center","core:window:allow-show","core:window:allow-maximize","core:window:allow-minimize","core:window:allow-destroy","core:window:allow-is-focused","core:window:allow-is-fullscreen","core:window:allow-set-focus","core:window:allow-set-position","core:window:allow-scale-factor","core:window:allow-unminimize","core:window:allow-set-always-on-top","core:window:allow-set-size","core:window:allow-unmaximize","core:window:allow-set-fullscreen","core:webview:allow-create-webview","core:webview:allow-create-webview-window","core:webview:allow-internal-toggle-devtools","core:event:default","core:event:allow-listen","os:default","os:allow-os-type","os:allow-arch","os:allow-version","os:allow-hostname","process:default","process:allow-exit","clipboard-manager:allow-clear","clipboard-manager:allow-write-image","http:allow-fetch","http:allow-fetch-cancel","http:allow-fetch-read-body","http:allow-fetch-send",{"identifier":"http:default","allow":[{"url":"http://**"},{"url":"https://**"},{"url":"http://*:*"},{"url":"https://*:*"}]}]}}
+{"default":{"identifier":"default","description":"Capability for the main window","local":true,"windows":["*"],"permissions":["core:window:default","core:window:allow-create","core:window:allow-start-dragging","core:window:allow-close","core:window:allow-hide","core:window:allow-center","core:window:allow-show","core:window:allow-maximize","core:window:allow-minimize","core:window:allow-destroy","core:window:allow-is-focused","core:window:allow-is-fullscreen","core:window:allow-set-focus","core:window:allow-set-position","core:window:allow-scale-factor","core:window:allow-unminimize","core:window:allow-set-always-on-top","core:window:allow-set-size","core:window:allow-unmaximize","core:window:allow-set-fullscreen","core:webview:allow-create-webview","core:webview:allow-create-webview-window","core:webview:allow-internal-toggle-devtools","core:event:default","core:event:allow-listen","os:default","os:allow-os-type","os:allow-arch","os:allow-version","os:allow-hostname","process:default","process:allow-exit","clipboard-manager:allow-clear","clipboard-manager:allow-write-image","http:allow-fetch","http:allow-fetch-cancel","http:allow-fetch-read-body","http:allow-fetch-send","core:tray:default","core:tray:allow-get-by-id",{"identifier":"http:default","allow":[{"url":"http://**"},{"url":"https://**"},{"url":"http://*:*"},{"url":"https://*:*"}]}]}}

src/components/common/ContextMenu.vue

@@ -174,6 +174,7 @@ const handleAfterEnter = (el: any) => {
     }
   }
   .menu-list {
+    -webkit-backdrop-filter: blur(10px);
     padding: 5px;
     display: flex;
     flex-direction: column;

src/components/rightBox/chatBox/ChatHeader.vue

@@ -99,7 +99,16 @@
   <!-- 弹出框 -->
   <n-modal v-model:show="modalShow" class="w-350px rounded-8px">
     <div class="bg-[--bg-popover] w-360px h-full p-6px box-border flex flex-col">
-      <svg @click="modalShow = false" class="size-12px ml-a cursor-pointer select-none">
+      <div
+        v-if="type() === 'macos'"
+        @click="modalShow = false"
+        class="mac-close z-999 size-13px shadow-inner bg-#ed6a5eff rounded-50% select-none absolute left-6px">
+        <svg class="hidden size-7px color-#000 font-bold select-none absolute top-3px left-3px">
+          <use href="#close"></use>
+        </svg>
+      </div>
+
+      <svg v-if="type() === 'windows'" @click="modalShow = false" class="size-12px ml-a cursor-pointer select-none">
         <use href="#close"></use>
       </svg>
       <div class="flex flex-col gap-30px p-[22px_10px_10px_22px] select-none">
@@ -123,6 +132,7 @@ import { IsAllUserEnum, SessionItem } from '@/services/types.ts'
 import { useDisplayMedia } from '@vueuse/core'
 import { EventEnum } from '@/enums'
 import { emit, listen } from '@tauri-apps/api/event'
+import { type } from '@tauri-apps/plugin-os'
 
 // 使用useDisplayMedia获取屏幕共享的媒体流
 const { stream, start, stop } = useDisplayMedia()

src/components/rightBox/chatBox/ChatMain.vue

@@ -284,7 +284,16 @@
   <!-- 弹出框 -->
   <n-modal v-model:show="modalShow" class="w-350px border-rd-8px">
     <div class="bg-[--bg-popover] w-360px h-full p-6px box-border flex flex-col">
-      <svg @click="modalShow = false" class="w-12px h-12px ml-a cursor-pointer select-none">
+      <div
+        v-if="type() === 'macos'"
+        @click="modalShow = false"
+        class="mac-close z-999 size-13px shadow-inner bg-#ed6a5eff rounded-50% select-none absolute left-6px">
+        <svg class="hidden size-7px color-#000 font-bold select-none absolute top-3px left-3px">
+          <use href="#close"></use>
+        </svg>
+      </div>
+
+      <svg v-if="type() === 'windows'" @click="modalShow = false" class="w-12px h-12px ml-a cursor-pointer select-none">
         <use href="#close"></use>
       </svg>
       <div class="flex flex-col gap-30px p-[22px_10px_10px_22px] select-none">
@@ -344,6 +353,7 @@ import { storeToRefs } from 'pinia'
 import { formatTimestamp } from '@/utils/ComputedTime.ts'
 import { useUserInfo, useBadgeInfo } from '@/hooks/useCached.ts'
 import { useChatStore } from '@/stores/chat.ts'
+import { type } from '@tauri-apps/plugin-os'
 
 const { activeItem } = defineProps<{
   activeItem: SessionItem

src/layout/left/components/InfoPopover.vue

@@ -2,8 +2,21 @@
   <n-modal v-model:show="editInfo.show" :mask-closable="false" class="rounded-8px" transform-origin="center">
     <div class="bg-[--bg-edit] w-480px h-fit box-border flex flex-col">
       <n-flex :size="6" vertical>
+        <div
+          v-if="type() === 'macos'"
+          @click="editInfo.show = false"
+          class="mac-close size-13px shadow-inner bg-#ed6a5eff rounded-50% mt-6px select-none absolute left-6px">
+          <svg class="hidden size-7px color-#000 font-bold select-none absolute top-3px left-3px">
+            <use href="#close"></use>
+          </svg>
+        </div>
+
         <n-flex class="text-(14px --text-color) select-none pt-6px" justify="center">编辑资料</n-flex>
-        <svg class="size-14px ml-a cursor-pointer pt-6px select-none absolute right-6px" @click="editInfo.show = false">
+
+        <svg
+          v-if="type() === 'windows'"
+          class="size-14px cursor-pointer pt-6px select-none absolute right-6px"
+          @click="editInfo.show = false">
           <use href="#close"></use>
         </svg>
         <span class="h-1px w-full bg-[--line-color]"></span>
@@ -88,6 +101,7 @@ import { IsYetEnum, MittEnum } from '@/enums'
 import { leftHook } from '@/layout/left/hook.ts'
 import Mitt from '@/utils/Bus.ts'
 import apis from '@/services/apis.ts'
+import { type } from '@tauri-apps/plugin-os'
 
 const { login, editInfo, currentBadge, saveEditInfo, toggleWarningBadge, countGraphemes } = leftHook()
 
@@ -117,4 +131,9 @@ onMounted(() => {
     @apply opacity-100;
   }
 }
+.mac-close:hover {
+  svg {
+    display: block;
+  }
+}
 </style>

src/layout/left/model.tsx

@@ -19,6 +19,8 @@ import { emit } from '@tauri-apps/api/event'
 import { EventEnum } from '@/enums'
 import pkg from '~/package.json'
 import { handRelativeTime } from '@/utils/Day.ts'
+import './style.scss'
+import { type } from '@tauri-apps/plugin-os'
 
 const formRef = ref<FormInst | null>()
 const formValue = ref({
@@ -62,9 +64,19 @@ export const LockScreen = defineComponent(() => {
   return () => (
     <NModal v-model:show={lock.value.modalShow} maskClosable={false} class="w-350px border-rd-8px">
       <div class="bg-[--bg-popover] w-360px h-full p-6px box-border flex flex-col">
-        <svg onClick={() => (lock.value.modalShow = false)} class="w-12px h-12px ml-a cursor-pointer select-none">
-          <use href="#close"></use>
-        </svg>
+        {type() === 'macos' ? (
+          <div
+            onClick={() => (lock.value.modalShow = false)}
+            class="mac-close relative size-13px shadow-inner bg-#ed6a5eff rounded-50% select-none">
+            <svg class="hidden size-7px color-#000 font-bold select-none absolute top-3px left-3px">
+              <use href="#close"></use>
+            </svg>
+          </div>
+        ) : (
+          <svg onClick={() => (lock.value.modalShow = false)} class="w-12px h-12px ml-a cursor-pointer select-none">
+            <use href="#close"></use>
+          </svg>
+        )}
         <div class="flex flex-col gap-10px p-10px select-none">
           <NFlex vertical justify="center" align="center" size={20}>
             <span class="text-(14px center)">锁定屏幕</span>
@@ -196,11 +208,21 @@ export const CheckUpdate = defineComponent(() => {
   return () => (
     <NModal v-model:show={lock.value.modalShow} maskClosable={false} class="w-350px border-rd-8px">
       <div class="bg-[--bg-popover] w-500px h-full p-6px box-border flex flex-col">
-        <svg onClick={() => (lock.value.modalShow = false)} class="w-12px h-12px ml-a cursor-pointer select-none">
-          <use href="#close"></use>
-        </svg>
+        {type() === 'macos' ? (
+          <div
+            onClick={() => (lock.value.modalShow = false)}
+            class="mac-close relative size-13px shadow-inner bg-#ed6a5eff rounded-50% select-none">
+            <svg class="hidden size-7px color-#000 font-bold select-none absolute top-3px left-3px">
+              <use href="#close"></use>
+            </svg>
+          </div>
+        ) : (
+          <svg onClick={() => (lock.value.modalShow = false)} class="w-12px h-12px ml-a cursor-pointer select-none">
+            <use href="#close"></use>
+          </svg>
+        )}
         {loading.value ? (
-          <NFlex vertical justify={'center'} size={10}>
+          <NFlex vertical justify={'center'} size={10} class="mt-6px">
             <NSkeleton text repeat={1} class="rounded-8px h-30px w-120px" />
             <NSkeleton text repeat={1} class="rounded-8px h-300px" />
             <NSkeleton text repeat={1} class="rounded-8px w-80px h-30px m-[0_0_0_auto]" />

src/layout/left/style.scss

@@ -32,6 +32,12 @@
   @include menu-list();
 }
 
+.mac-close:hover {
+  svg {
+    display: block;
+  }
+}
+
 .item-hover {
   @apply select-none hover:bg-[--info-hover] cursor-pointer w-fit rounded-10px p-4px;
   transition: all 0.4s ease-in-out;

src/styles/scss/chat-header.scss

@@ -28,6 +28,12 @@
   font-size: 14px;
 }
 
+.mac-close:hover {
+  svg {
+    display: block;
+  }
+}
+
 @keyframes slideIn {
   from {
     transform: translateX(100%);

src/styles/scss/chat-main.scss

@@ -47,6 +47,11 @@
     background-color: rgb(195, 221, 216);
   }
 }
+.mac-close:hover {
+  svg {
+    display: block;
+  }
+}
 /** 浮标达到最大值时候的样式 */
 .max:hover {
   background-color: #f5dce1;

src/styles/scss/global/variable.scss

@@ -82,6 +82,8 @@ html, body {
   --chat-right-bg: #f1f1f1;
   --chat-text-color: #505050;
   --chat-hover-color: #e3e3e3;
+  // 搜索框内样式
+  --search-color: #eee;
 }
 
 html[data-theme='dark'] {
@@ -154,6 +156,8 @@ html[data-theme='dark'] {
   --chat-right-bg: #161616;
   --chat-text-color: #b1b1b1;
   --chat-hover-color: #262626;
+  // 搜索框内样式
+  --search-color: #333;
 }
 /**! end */
 // 线性动画
@@ -241,6 +245,7 @@ html[data-theme='dark'] {
   background: var(--bg-menu);
   color: var(--text-color);
   border-radius: 6px;
+  -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   box-shadow:
     0 0 0 1px rgba(255, 255, 255, 0.08),

src/views/Tray.vue

@@ -59,6 +59,7 @@ import { useWsLoginStore } from '@/stores/ws.ts'
 import { setting } from '@/stores/setting.ts'
 import { storeToRefs } from 'pinia'
 import { PhysicalPosition } from '@tauri-apps/api/dpi'
+import { TrayIcon } from '@tauri-apps/api/tray'
 
 const appWindow = WebviewWindow.getCurrent()
 const { checkWinExist, createWebviewWindow, resizeWindow } = useWindow()
@@ -88,21 +89,22 @@ const toggleStatus = (url: string, title: string) => {
 }
 
 onMounted(async () => {
-  await listen('tray_leave', async () => {
-    const trayWindow = WebviewWindow.getByLabel('tray')
-    trayWindow?.hide()
-  })
-  await listen('tray_enter', async () => {
-    const trayWindow = WebviewWindow.getByLabel('tray')
-    trayWindow?.show()
-    trayWindow?.setFocus()
-  })
+  const tray = await TrayIcon.getById('tray')
+  tray?.setIcon('/Users/nyh/Desktop/HuLa/HuLa-IM-Tauri/src-tauri/stateless/hula.png')
+  // await listen('tray_leave', async () => {
+  //   const trayWindow = WebviewWindow.getByLabel('tray')
+  //   trayWindow?.hide()
+  // })
+  // await listen('tray_enter', async () => {
+  //   const trayWindow = WebviewWindow.getByLabel('tray')
+  //   trayWindow?.show()
+  //   trayWindow?.setFocus()
+  // })
   await listen('tray_menu', async (event) => {
-    console.log(event.payload)
     const homeWindow = WebviewWindow.getByLabel('tray')
     if (!homeWindow) return
 
-    let position = event.payload
+    const position = event.payload as any
     let scaleFactor = await homeWindow.scaleFactor()
     let logicalPosition = new PhysicalPosition(position.x, position.y).toLogical(scaleFactor)
     logicalPosition.y = logicalPosition.y - 360

src/views/homeWindow/Dynamic.vue

@@ -7,11 +7,7 @@
       :current-label="WebviewWindow.getCurrent().label" />
 
     <!-- 头部用户信息栏 -->
-    <n-flex
-      align="center"
-      justify="center"
-      :size="20"
-      class="relative bg-[--left-active-color] h-160px w-full select-none">
+    <n-flex align="center" justify="center" :size="20" class="login-box relative h-160px w-full select-none">
       <n-avatar :size="120" round bordered :src="login.accountInfo.avatar" />
       <n-flex vertical justify="center" :size="20">
         <p class="text-(24px [--chat-text-color]) font-500">{{ login.accountInfo.name }}</p>
@@ -96,13 +92,25 @@
     <!-- 弹出框 -->
     <n-modal v-model:show="infoTip.modalShow" class="w-450px border-rd-8px">
       <div class="bg-[--bg-popover] h-full p-6px box-border flex flex-col">
-        <svg @click="infoTip.modalShow = false" class="w-12px h-12px ml-a cursor-pointer select-none">
+        <div
+          v-if="type() === 'macos'"
+          @click="infoTip.modalShow = false"
+          class="mac-close relative size-13px shadow-inner bg-#ed6a5eff rounded-50% select-none">
+          <svg class="hidden size-7px color-#000 font-bold select-none absolute top-3px left-3px">
+            <use href="#close"></use>
+          </svg>
+        </div>
+
+        <svg
+          v-if="type() === 'windows'"
+          @click="infoTip.modalShow = false"
+          class="w-12px h-12px ml-a cursor-pointer select-none">
           <use href="#close"></use>
         </svg>
         <n-virtual-list
           :items="dynamicCommentList"
           :item-size="40"
-          class="max-h-500px w-full p-10px box-border select-none">
+          class="max-h-500px w-full p-[0_10px] box-border select-none">
           <template #default="{ item }">
             <n-flex align="center" justify="space-between" class="mt-18px">
               <n-flex align="center">
@@ -125,6 +133,7 @@ import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { useWindowState } from '@/hooks/useWindowState.ts'
 import { setting } from '@/stores/setting.ts'
 import { storeToRefs } from 'pinia'
+import { type } from '@tauri-apps/plugin-os'
 
 useWindowState(WebviewWindow.getCurrent().label)
 const settingStore = setting()
@@ -155,3 +164,11 @@ const handleInfoTip = () => {
   infoTip.value.modalShow = true
 }
 </script>
+<style scoped lang="scss">
+@import '@/styles/scss/global/login-bg';
+.mac-close:hover {
+  svg {
+    display: block;
+  }
+}
+</style>

src/views/homeWindow/SearchDetails.vue

@@ -3,8 +3,8 @@
     <p>搜索建议</p>
 
     <n-flex align="center" class="text-(12px #909090)">
-      <p class="p-6px bg-#eee rounded-8px cursor-pointer">@我</p>
-      <p class="p-6px bg-#eee rounded-8px cursor-pointer">特别关心</p>
+      <p class="p-6px bg-[--search-color] rounded-8px cursor-pointer">@我</p>
+      <p class="p-6px bg-[--search-color] rounded-8px cursor-pointer">特别关心</p>
     </n-flex>
 
     <span class="w-full h-1px bg-[--line-color]"></span>