feat: 对macos支持浅色和深色模式切换模型功能

src-tauri/src/core/setup/mod.rs

@@ -17,8 +17,5 @@ pub fn default(
     main_window: WebviewWindow,
     preference_window: WebviewWindow,
 ) {
-    #[cfg(debug_assertions)]
-    main_window.open_devtools();
-
     platform(app_handle, main_window.clone(), preference_window.clone());
 }

src/App.vue

@@ -7,7 +7,7 @@ import { useEventListener } from '@vueuse/core'
 import { ConfigProvider, theme } from 'antdv-next'
 import { isString } from 'es-toolkit'
 import isURL from 'is-url'
-import { onMounted, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView } from 'vue-router'
 
@@ -31,6 +31,35 @@ const appWindow = getCurrentWebviewWindow()
 const { isRestored, restoreState } = useWindowState()
 const { darkAlgorithm, defaultAlgorithm } = theme
 const { locale } = useI18n()
+const themeReady = ref(false)
+let unlistenTheme: (() => void) | undefined
+
+function applyThemeModel(isDark: boolean) {
+  if (appWindow.label !== 'main') return
+  if (generalStore.appearance.theme !== 'auto') return
+
+  const modelId = isDark ? modelStore.darkModelId : modelStore.lightModelId
+  const model = modelStore.models.find(item => item.id === modelId)
+
+  if (!model || model.id === modelStore.currentModel?.id) return
+
+  modelStore.modelReady = false
+  modelStore.currentModel = model
+}
+
+function applyResolvedTheme(isDark: boolean) {
+  generalStore.appearance.isDark = isDark
+  document.documentElement.classList.toggle('dark', isDark)
+  applyThemeModel(isDark)
+}
+
+async function applyTheme(value: 'auto' | 'light' | 'dark') {
+  const nextTheme = value === 'auto' ? null : value
+
+  await appWindow.setTheme(nextTheme)
+
+  applyResolvedTheme((nextTheme ?? (await appWindow.theme())) === 'dark')
+}
 
 onMounted(async () => {
   await appStore.$tauri.start()
@@ -42,7 +71,30 @@ onMounted(async () => {
   await generalStore.$tauri.start()
   await generalStore.init()
   await shortcutStore.$tauri.start()
+
+  themeReady.value = true
+  await applyTheme(generalStore.appearance.theme)
   await restoreState()
+
+  unlistenTheme = await appWindow.onThemeChanged(({ payload }) => {
+    if (generalStore.appearance.theme !== 'auto') return
+
+    applyResolvedTheme(payload === 'dark')
+  })
+})
+
+onUnmounted(() => unlistenTheme?.())
+
+watch(() => generalStore.appearance.theme, (value) => {
+  if (!themeReady.value) return
+
+  applyTheme(value)
+})
+
+watch([() => modelStore.lightModelId, () => modelStore.darkModelId], () => {
+  if (!themeReady.value) return
+
+  applyThemeModel(generalStore.appearance.isDark)
 })
 
 watch(() => generalStore.appearance.language, (value) => {
@@ -62,7 +114,7 @@ useTauriListen(LISTEN_KEY.HIDE_WINDOW, ({ payload }) => {
 })
 
 useEventListener('unhandledrejection', ({ reason }) => {
-  const message = isString(reason) ? reason : JSON.stringify(reason)
+  const message = isString(reason) ? reason : reason instanceof Error ? `${reason.name}: ${reason.message}\n${reason.stack ?? ''}` : JSON.stringify(reason)
 
   error(message)
 })

src/locales/en-US.json

@@ -97,6 +97,8 @@
           "clickOrDragToImport": "Click or drag here to import"
         },
         "tooltips": {
+          "lightModel": "Use in light mode (click again to clear)",
+          "darkModel": "Use in dark mode (click again to clear)",
           "createModel": "Create Model",
           "convertModel": "Convert Model",
           "moreModels": "More Models"

src/locales/pt-BR.json

@@ -97,6 +97,8 @@
           "clickOrDragToImport": "Clique ou arraste para importar"
         },
         "tooltips": {
+          "lightModel": "Usar no modo claro (clique novamente para limpar)",
+          "darkModel": "Usar no modo escuro (clique novamente para limpar)",
           "createModel": "Criar modelo",
           "convertModel": "Converter modelo",
           "moreModels": "Mais modelos"

src/locales/vi-VN.json

@@ -97,6 +97,8 @@
           "clickOrDragToImport": "Nhấp hoặc kéo tệp vào đây"
         },
         "tooltips": {
+          "lightModel": "Dùng ở chế độ sáng (nhấp lại để bỏ chọn)",
+          "darkModel": "Dùng ở chế độ tối (nhấp lại để bỏ chọn)",
           "createModel": "Tạo mô hình",
           "convertModel": "Chuyển đổi mô hình",
           "moreModels": "Khám phá mô hình khác"

src/locales/zh-CN.json

@@ -97,6 +97,8 @@
           "clickOrDragToImport": "点击或拖动至此区域导入"
         },
         "tooltips": {
+          "lightModel": "设为浅色模式桌宠（再次点击取消）",
+          "darkModel": "设为深色模式桌宠（再次点击取消）",
           "createModel": "制作模型",
           "convertModel": "转换模型",
           "moreModels": "更多模型"

src/locales/zh-TW.json

@@ -97,6 +97,8 @@
           "clickOrDragToImport": "點擊或拖曳至此區域匯入"
         },
         "tooltips": {
+          "lightModel": "設為淺色模式桌寵（再次點擊取消）",
+          "darkModel": "設為深色模式桌寵（再次點擊取消）",
           "createModel": "製作模型",
           "convertModel": "轉換模型",
           "moreModels": "更多模型"

src/pages/preference/components/general/components/theme-mode/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { Select } from 'antdv-next'
-import { computed, onMounted, watch } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { Theme } from '@/stores/general'
@@ -10,40 +9,13 @@ import ProListItem from '@/components/pro-list-item/index.vue'
 import { useGeneralStore } from '@/stores/general'
 
 const generalStore = useGeneralStore()
-const appWindow = getCurrentWebviewWindow()
 const { t } = useI18n()
 
 const options = computed<Array<{ label: string, value: Theme }>>(() => [
   { label: t('pages.preference.general.options.auto'), value: 'auto' },
   { label: t('pages.preference.general.options.lightMode'), value: 'light' },
   { label: t('pages.preference.general.options.darkMode'), value: 'dark' },
 ])
-
-onMounted(() => {
-  appWindow.onThemeChanged(async ({ payload }) => {
-    if (generalStore.appearance.theme !== 'auto') return
-
-    generalStore.appearance.isDark = payload === 'dark'
-  })
-})
-
-watch(() => generalStore.appearance.theme, async (value) => {
-  let nextTheme = value === 'auto' ? null : value
-
-  await appWindow.setTheme(nextTheme)
-
-  nextTheme = nextTheme ?? (await appWindow.theme())
-
-  generalStore.appearance.isDark = nextTheme === 'dark'
-}, { immediate: true })
-
-watch(() => generalStore.appearance.isDark, (value) => {
-  if (value) {
-    document.documentElement.classList.add('dark')
-  } else {
-    document.documentElement.classList.remove('dark')
-  }
-}, { immediate: true })
 </script>
 
 <template>

src/pages/preference/components/model/index.vue

@@ -3,7 +3,7 @@ import { convertFileSrc } from '@tauri-apps/api/core'
 import { remove } from '@tauri-apps/plugin-fs'
 import { revealItemInDir } from '@tauri-apps/plugin-opener'
 import { useElementSize } from '@vueuse/core'
-import { Card, Masonry, message, Popconfirm } from 'antdv-next'
+import { Card, Masonry, message, Popconfirm, Tooltip } from 'antdv-next'
 import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -43,6 +43,14 @@ function handleToggle(nextModel: Model) {
   modelStore.currentModel = nextModel
 }
 
+function handleThemeModel(model: Model, theme: 'light' | 'dark') {
+  if (theme === 'light') {
+    modelStore.lightModelId = modelStore.lightModelId === model.id ? null : model.id
+  } else {
+    modelStore.darkModelId = modelStore.darkModelId === model.id ? null : model.id
+  }
+}
+
 async function handleDelete(item: Model) {
   const { id, path } = item
 
@@ -55,6 +63,9 @@ async function handleDelete(item: Model) {
   } finally {
     modelStore.models = modelStore.models.filter(item => item.id !== id)
 
+    if (modelStore.lightModelId === id) modelStore.lightModelId = null
+    if (modelStore.darkModelId === id) modelStore.darkModelId = null
+
     if (id === modelStore.currentModel?.id) {
       modelStore.currentModel = modelStore.models[0]
     }
@@ -102,6 +113,24 @@ async function handleDelete(item: Model) {
             @click.stop="openBehaviorModal = true"
           />
 
+          <Tooltip :title="$t('pages.preference.model.tooltips.lightModel')">
+            <i
+              :aria-label="$t('pages.preference.model.tooltips.lightModel')"
+              class="i-lucide:sun"
+              :class="{ 'text-orange-5': data.id === modelStore.lightModelId }"
+              @click.stop="handleThemeModel(data, 'light')"
+            />
+          </Tooltip>
+
+          <Tooltip :title="$t('pages.preference.model.tooltips.darkModel')">
+            <i
+              :aria-label="$t('pages.preference.model.tooltips.darkModel')"
+              class="i-lucide:moon"
+              :class="{ 'text-blue-5': data.id === modelStore.darkModelId }"
+              @click.stop="handleThemeModel(data, 'dark')"
+            />
+          </Tooltip>
+
           <i
             class="i-lucide:folder-open"
             @click.stop="revealItemInDir(data.path)"

src/stores/model.ts

@@ -21,6 +21,8 @@ export const useModelStore = defineStore('model', () => {
   const modelReady = ref(true)
   const models = ref<Model[]>([])
   const currentModel = ref<Model>()
+  const lightModelId = ref<string | null>(null)
+  const darkModelId = ref<string | null>(null)
   const supportKeys = reactive<Record<string, string>>({})
   const pressedKeys = reactive<Record<string, string>>({})
   const currentMotions = ref<Array<[string, MotionInfo[]]>>([])
@@ -49,6 +51,8 @@ export const useModelStore = defineStore('model', () => {
     const matched = find(nextModels, { id: currentModel.value?.id })
 
     currentModel.value = matched ?? nextModels[0]
+    if (!nextModels.some(item => item.id === lightModelId.value)) lightModelId.value = null
+    if (!nextModels.some(item => item.id === darkModelId.value)) darkModelId.value = null
 
     models.value = nextModels
   }
@@ -57,6 +61,8 @@ export const useModelStore = defineStore('model', () => {
     modelReady,
     models,
     currentModel,
+    lightModelId,
+    darkModelId,
     supportKeys,
     pressedKeys,
     currentMotions,