🐛 fix(custom): 修复跨标签页没有判断类型的问题

2024-11-29 18:28:30 +08:00 · 2024-03-08 00:16:37 +08:00 · 2024-03-08 00:16:37 +08:00 · e4acbd567d
commit e4acbd567d
parent 2394aa27b8
10 changed files with 88 additions and 46 deletions
--- a/src/common/WindowEvent.ts
+++ b/src/common/WindowEvent.ts
@ -1,4 +1,5 @@
 import { appWindow, WebviewWindow } from '@tauri-apps/api/window'
+import { NativeListenEnum } from '@/enums'

 /** 最小化 */
 export const minimizeWindow = async () => {
@ -15,12 +16,12 @@ export const maximizeWindow = async () => {
 * @param label 窗口标签
 * @example
 * 传入窗口标签后开启窗口关闭的监听事件，使用appWindow.emit事件
- * 事件名称: windowsClose
+ * @see NativeListenEnum.CLOSE
 */
 export const closeWindow = async (label: string) => {
  if (label !== void 0) {
    const win = WebviewWindow.getByLabel(label)
-    win?.emit('windowsClose', label)
+    await win?.emit(NativeListenEnum.CLOSE, label)
  }
  await appWindow.close()
 }
--- a/src/components/common/NaiveProvider.vue
+++ b/src/components/common/NaiveProvider.vue
@ -18,6 +18,7 @@ import { theme } from '@/stores/theme.ts'
 import { storeToRefs } from 'pinia'
 import { dateZhCN, darkTheme, lightTheme, GlobalThemeOverrides, zhCN } from 'naive-ui'
 import { listenMsg } from '@/common/CrossTabMsg.ts'
+import { CrossTabTypeEnum, ThemeEnum } from '@/enums'

 const themeStore = theme()
 const { THEME, PATTERN } = storeToRefs(themeStore)
@ -28,29 +29,35 @@ const prefers = matchMedia('(prefers-color-scheme: dark)')
 /* 跟随系统主题模式切换主题 */
 const followOS = () => {
  globalTheme.value = prefers.matches ? darkTheme : lightTheme
-  document.documentElement.dataset.theme = prefers.matches ? 'dark' : 'light'
-  THEME.value = prefers.matches ? 'dark' : 'light'
+  document.documentElement.dataset.theme = prefers.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT
+  THEME.value = prefers.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT
 }

 /* 监听其他标签页的变化 */
 listenMsg((msgInfo: any) => {
-  if (msgInfo.content === 'os') {
-    globalTheme.value = prefers.matches ? darkTheme : lightTheme
-    document.documentElement.dataset.theme = prefers.matches ? 'dark' : 'light'
-    THEME.value = prefers.matches ? 'dark' : 'light'
-    PATTERN.value = 'os'
-  } else {
-    globalTheme.value = msgInfo.content === 'dark' ? darkTheme : lightTheme
-    document.documentElement.dataset.theme = msgInfo.content === 'dark' ? 'dark' : 'light'
+  if (msgInfo.type === CrossTabTypeEnum.THEME) {
+    if (msgInfo.content === ThemeEnum.OS) {
+      // 赋值给ui组件库的主题
+      globalTheme.value = prefers.matches ? darkTheme : lightTheme
+      // 给全局的dataset.theme赋值主题
+      document.documentElement.dataset.theme = prefers.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT
+      // 修改localStorage中的THEME和设置中选择(PATTERN)
+      THEME.value = prefers.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT
+      PATTERN.value = ThemeEnum.OS
+    } else {
+      globalTheme.value = msgInfo.content === ThemeEnum.DARK ? darkTheme : lightTheme
+      // 判断msgInfo.content是否是深色还是浅色
+      document.documentElement.dataset.theme = msgInfo.content || ThemeEnum.LIGHT
+    }
  }
 })

 watchEffect(() => {
-  if (PATTERN.value === 'os') {
+  if (PATTERN.value === ThemeEnum.OS) {
    followOS()
    prefers.addEventListener('change', followOS)
  } else {
-    globalTheme.value = THEME.value === 'dark' ? darkTheme : lightTheme
+    globalTheme.value = THEME.value === ThemeEnum.DARK ? darkTheme : lightTheme
    prefers.removeEventListener('change', followOS)
  }
 })
--- a/src/components/rightBox/chatBox/chatMain.vue
+++ b/src/components/rightBox/chatBox/chatMain.vue
@ -11,7 +11,7 @@
      <main
        :key="item.key"
        class="flex-y-center min-h-58px"
-        :class="activeItem.type === RoomTypeEnum.Group ? 'p-[18px_20px]' : 'chat-single p-[2px_20px]'">
+        :class="activeItem.type === RoomTypeEnum.GROUP ? 'p-[18px_20px]' : 'chat-single p-[2px_20px]'">
        <!-- 好友或者群聊的信息 -->
        <article class="flex flex-col w-full gap-18px" :class="item.accountId === userId ? 'items-end' : ''">
          <div
@ -28,7 +28,7 @@
              :data-key="item.key"
              class="flex flex-col gap-8px color-[--text-color]"
              :class="item.accountId === userId ? 'items-end mr-10px' : ''">
-              <span class="text-13px select-none" v-if="activeItem.type === RoomTypeEnum.Group">
+              <span class="text-13px select-none" v-if="activeItem.type === RoomTypeEnum.GROUP">
                {{ item.accountId === userId ? item.value : activeItem.accountName }}
              </span>
              <!--  右键菜单及其气泡样式  -->
@ -44,7 +44,7 @@
                  v-if="item.type === MsgEnum.TEXT"
                  :class="[
                    { active: activeBubble === item.key },
-                    activeItem.type === RoomTypeEnum.Group ? '' : 'm-[10px_0]',
+                    activeItem.type === RoomTypeEnum.GROUP ? '' : 'm-[10px_0]',
                    item.accountId === userId ? 'bubble-oneself' : 'bubble'
                  ]"
                  v-html="item.content"></div>
@ -54,7 +54,7 @@
                  <n-space
                    class="photo-wall"
                    vertical
-                    :class="activeItem.type === RoomTypeEnum.Group ? '' : 'm-[10px_0]'">
+                    :class="activeItem.type === RoomTypeEnum.GROUP ? '' : 'm-[10px_0]'">
                    <n-image
                      v-for="(src, index) in item.content"
                      :key="index"
@ -71,7 +71,7 @@
                  :img-props="{ style: { maxWidth: '325px', maxHeight: '165px' } }"
                  show-toolbar-tooltip
                  style="border-radius: 8px"
-                  :class="activeItem.type === RoomTypeEnum.Group ? '' : 'm-[10px_0]'"
+                  :class="activeItem.type === RoomTypeEnum.GROUP ? '' : 'm-[10px_0]'"
                  :src="item.content"></n-image>
              </ContextMenu>
            </div>
--- a/src/enums/index.ts
+++ b/src/enums/index.ts
@ -25,6 +25,30 @@ export enum URLEnum {
  ARTICLE = '/article'
 }

+/** 跨标签页通信时传输的类型 */
+export enum CrossTabTypeEnum {
+  /** 主题 */
+  THEME = 'theme',
+  /** 窗口显示 */
+  WINDOWSSHOW = 'windowsShow'
+}
+
+/** tauri原生跨窗口通信时传输的类型 */
+export enum NativeListenEnum {
+  /** 窗口关闭事件 */
+  CLOSE = 'windowsClose'
+}
+
+/** 主题类型 */
+export enum ThemeEnum {
+  /** 亮色 */
+  LIGHT = 'light',
+  /** 暗色 */
+  DARK = 'dark',
+  /** 跟随系统 */
+  OS = 'os'
+}
+
 /**
 * 消息类型
 */
@ -48,7 +72,7 @@ export enum MsgEnum {
 /** 房间类型 1群聊 2单聊 */
 export enum RoomTypeEnum {
  /** 1群聊 */
-  Group = 1,
+  GROUP = 1,
  /** 2单聊 */
-  Single
+  SINGLE
 }
--- a/src/hooks/useWindowState.ts
+++ b/src/hooks/useWindowState.ts
@ -1,20 +1,22 @@
 import { WebviewWindow } from '@tauri-apps/api/window'
 import { sendMsg } from '@/common/CrossTabMsg.ts'
+import { CrossTabTypeEnum, NativeListenEnum } from '@/enums'

 export const useWindowState = (label: string) => {
  const win = WebviewWindow.getByLabel(label)

  // TODO 可以尝试使用win.emit来取代自定义封装的跨标签页通信 (nyh -> 2024-03-05 07:15:42)
  watchEffect(() => {
-    win?.listen('windowsClose', (e) => {
-      sendMsg('windowsShow', e)
+    // once一次性监听事件
+    win?.once(NativeListenEnum.CLOSE, (e) => {
+      sendMsg(CrossTabTypeEnum.WINDOWSSHOW, e)
    })
  })

  onMounted(async () => {
    const isShow = await win?.isVisible()
    if (isShow) {
-      sendMsg('windowsShow', label)
+      sendMsg(CrossTabTypeEnum.WINDOWSSHOW, label)
    }
  })
 }
--- a/src/layout/left/index.vue
+++ b/src/layout/left/index.vue
@ -59,6 +59,7 @@ import { useWindow } from '@/hooks/useWindow.ts'
 import router from '@/router'
 import Mitt from '@/utils/Bus.ts'
 import { listenMsg } from '@/common/CrossTabMsg.ts'
+import { CrossTabTypeEnum } from '@/enums'

 type TopActive = {
  url: string
@ -173,10 +174,12 @@ watchEffect(() => {
    })
  })
  listenMsg((msgInfo: any) => {
-    if (msgInfo.content.payload !== void 0) {
-      openWindowsList.value.delete(msgInfo.content.payload)
-    } else if (!openWindowsList.value.has(msgInfo.content)) {
-      openWindowsList.value.add(msgInfo.content)
+    if (msgInfo.type === CrossTabTypeEnum.WINDOWSSHOW) {
+      if (msgInfo.content.payload !== void 0) {
+        openWindowsList.value.delete(msgInfo.content.payload)
+      } else if (!openWindowsList.value.has(msgInfo.content)) {
+        openWindowsList.value.add(msgInfo.content)
+      }
    }
  })
 })
--- a/src/layout/right/index.vue
+++ b/src/layout/right/index.vue
@ -8,7 +8,7 @@

    <!-- 聊天界面背景图标 -->
    <div v-else class="flex-center wh-full select-none">
-      <img v-if="imgTheme === 'dark'" class="w-130px h-100px" src="@/assets/img/hula_bg_dark.png" alt="" />
+      <img v-if="imgTheme === ThemeEnum.DARK" class="w-130px h-100px" src="@/assets/img/hula_bg_dark.png" alt="" />
      <img v-else class="w-130px h-100px" src="@/assets/img/hula_bg_light.png" alt="" />
    </div>
  </main>
@ -19,6 +19,7 @@ import router from '@/router'
 import { listenMsg } from '@/common/CrossTabMsg.ts'
 import { theme } from '@/stores/theme.ts'
 import { storeToRefs } from 'pinia'
+import { CrossTabTypeEnum, ThemeEnum } from '@/enums'

 const themeStore = theme()
 const { THEME, PATTERN } = storeToRefs(themeStore)
@ -39,26 +40,28 @@ const isDetails = computed(() => {

 /* 跟随系统主题模式切换主题 */
 const followOS = () => {
-  imgTheme.value = prefers.matches ? 'dark' : 'light'
+  imgTheme.value = prefers.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT
 }

 /* 监听其他标签页的变化 */
 listenMsg((msgInfo: any) => {
-  if (msgInfo.content === 'os') {
-    followOS()
-    prefers.addEventListener('change', followOS)
-  } else {
-    imgTheme.value = msgInfo.content === 'dark' ? 'dark' : 'light'
-    prefers.removeEventListener('change', followOS)
+  if (msgInfo.type === CrossTabTypeEnum.THEME) {
+    if (msgInfo.content === ThemeEnum.OS) {
+      followOS()
+      prefers.addEventListener('change', followOS)
+    } else {
+      imgTheme.value = msgInfo.content || ThemeEnum.LIGHT
+      prefers.removeEventListener('change', followOS)
+    }
  }
 })

 watchEffect(() => {
-  if (PATTERN.value === 'os') {
+  if (PATTERN.value === ThemeEnum.OS) {
    followOS()
    prefers.addEventListener('change', followOS)
  } else {
-    imgTheme.value = THEME.value === 'dark' ? 'dark' : 'light'
+    imgTheme.value = THEME.value || ThemeEnum.LIGHT
    prefers.removeEventListener('change', followOS)
  }
 })
--- a/src/stores/theme.ts
+++ b/src/stores/theme.ts
@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { ThemeEnum } from '@/enums'

 export const theme = defineStore('theme', {
  state: () => {
@ -17,9 +18,9 @@ export const theme = defineStore('theme', {
      localStorage.setItem('theme', JSON.stringify({ THEME: theme, PATTERN: theme }))
    },
    toggleTheme(theme: string) {
-      if (theme === 'os') {
+      if (theme === ThemeEnum.OS) {
        this.PATTERN = theme
-        const os = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        const os = matchMedia('(prefers-color-scheme: dark)').matches ? ThemeEnum.DARK : ThemeEnum.LIGHT
        document.documentElement.dataset.theme = os
        this.THEME = os
      } else {
--- a/src/views/home-window/more/About.vue
+++ b/src/views/home-window/more/About.vue
@ -1,5 +1,5 @@
 <template>
-  <main class="wh-full">
+  <main class="wh-full bg-[--right-bg-color]">
    <ActionBar :shrink="false" :max-w="false" />

    <div>123</div>
--- a/src/views/home-window/more/settings/general.vue
+++ b/src/views/home-window/more/settings/general.vue
@ -23,6 +23,7 @@
 import { theme } from '@/stores/theme.ts'
 import { storeToRefs } from 'pinia'
 import { sendMsg } from '@/common/CrossTabMsg.ts'
+import { CrossTabTypeEnum, ThemeEnum } from '@/enums'

 const themeStore = theme()
 const { PATTERN } = storeToRefs(themeStore)
@ -31,7 +32,7 @@ const activeItem = ref<string>(PATTERN.value)
 const titleList = [
  {
    title: '白天模式',
-    code: 'light',
+    code: ThemeEnum.LIGHT,
    model: (() => (
      <div class="wh-full flex">
        <div class="bg-#f1f1f1 flex-[1] rounded-[6px_0_0_6px]"></div>
@ -70,7 +71,7 @@ const titleList = [
  },
  {
    title: '夜间模式',
-    code: 'dark',
+    code: ThemeEnum.DARK,
    model: (() => (
      <div class="wh-full flex">
        <div class="bg-#454545 flex-[1] rounded-[6px_0_0_6px]"></div>
@ -109,7 +110,7 @@ const titleList = [
  },
  {
    title: '跟随系统',
-    code: 'os',
+    code: ThemeEnum.OS,
    model: (() => (
      <div class="wh-full flex">
        <div class="bg-#f1f1f1 flex-[1] rounded-[6px_0_0_6px]"></div>
@ -166,11 +167,11 @@ const handleTheme = (event: MouseEvent, code: string) => {
  let isDark: boolean

  themeStore.toggleTheme(code)
-  sendMsg('theme', code)
+  sendMsg(CrossTabTypeEnum.THEME, code)
  /*判断当前浏览器是否支持startViewTransition API*/
  if (document.startViewTransition) {
    const transition = document.startViewTransition(() => {
-      isDark = code.includes('dark')
+      isDark = code.includes(ThemeEnum.DARK)
    })
    // TODO 从亮色主题切换到暗色主题的时候没有动画效果 (nyh -> 2024-02-12 23:07:54)
    transition.ready.then(() => {