三页面重设计与移动端适配;接入 PWA 与构建分包

src/components/settings/NotifyTemplateModal.vue

@@ -3,6 +3,7 @@ import { NButton, NInput, NModal } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
 
 import { testNotifyTemplate, updateNotifyTemplate } from '@/api/settings'
+import { useMobileModal } from '@/composables/useMobileModal'
 import type { NotifyTemplateItem } from '@/types/api'
 import { useToast } from '@/composables/useToast'
 
@@ -20,6 +21,7 @@ const emit = defineEmits<{
 }>()
 
 const message = useToast()
+const { modalStyle, modalClass } = useMobileModal(600)
 const draft = ref('')
 const saving = ref(false)
 const testing = ref(false)
@@ -104,7 +106,8 @@ async function sendTest() {
     v-model:show="visible"
     preset="card"
     closable
-    :style="{ width: '600px', maxWidth: 'calc(100vw - 24px)' }"
+    :style="modalStyle"
+    :class="modalClass"
   >
     <template #header>
       <div class="flex flex-col gap-1">