feat: uniform modal style (#150)

.eslintrc-auto-import.json

@@ -111,6 +111,7 @@
     "useCssVars": true,
     "useDisableShortcuts": true,
     "useInit": true,
+    "useModalStyle": true,
     "useObserverLink": true,
     "useRoleStore": true,
     "useSessionStore": true,

src/components/Settings/index.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import { listen } from '@tauri-apps/api/event'
-import { type, OsType } from '@tauri-apps/api/os'
 
-const platform = ref<OsType>('Darwin')
+const { modalMaskStyle } = useModalStyle()
 
 const visible = ref(false)
 
 onMounted(async () => {
   listen('open-settings', () => {
     visible.value = true
   })
-
-  platform.value = await type()
 })
 </script>
 
@@ -21,9 +18,7 @@ onMounted(async () => {
     class="settings-modal"
     :visible="visible"
     width="70%"
-    :mask-style="{
-      borderRadius: platform === 'Darwin' ? '0.75rem' : '0'
-    }"
+    :mask-style="modalMaskStyle"
     :footer="false"
     @ok="visible = false"
     @cancel="visible = false"

src/components/Update/index.vue

@@ -8,6 +8,8 @@ import { getVersion } from '@tauri-apps/api/app'
 import { relaunch } from '@tauri-apps/api/process'
 import { listen } from '@tauri-apps/api/event'
 
+const { modalMaskStyle } = useModalStyle()
+
 const visible = ref(false)
 
 const isDownload = ref(false)
@@ -85,6 +87,7 @@ onMounted(() => {
     :visible="visible"
     simple
     title="发现新版本可用 🥳"
+    :mask-style="modalMaskStyle"
     :ok-text="isDownload ? '正在更新' : '立即更新'"
     :cancel-text="isDownload ? '取消更新' : '稍后更新'"
     :mask-closable="false"

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useObserverLink'
 export * from './useDisableShortcuts'
 export * from './useInit'
+export * from './useModalStyle'

src/hooks/useModalStyle.ts

@@ -0,0 +1,18 @@
+import { type, OsType } from '@tauri-apps/api/os'
+import type { CSSProperties } from 'vue'
+
+export const useModalStyle = () => {
+  const platform = ref<OsType>('Darwin')
+
+  const modalMaskStyle = computed<CSSProperties>(() => ({
+    borderRadius: platform.value === 'Darwin' ? '0.75rem' : 0
+  }))
+
+  onMounted(async () => {
+    platform.value = await type()
+  })
+
+  return {
+    modalMaskStyle
+  }
+}