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

src/components/proxy/ProxyTenantsModal.vue

@@ -7,6 +7,7 @@ import { setProxyTenants } from '@/api/proxies'
 import FormField from '@/components/FormField.vue'
 import TenantPicker from '@/components/TenantPicker.vue'
 import { useAsync } from '@/composables/useAsync'
+import { useMobileModal } from '@/composables/useMobileModal'
 import type { ProxyInfo } from '@/types/api'
 import { useToast } from '@/composables/useToast'
 
@@ -16,6 +17,7 @@ const props = defineProps<{ show: boolean; proxy: ProxyInfo | null }>()
 const emit = defineEmits<{ 'update:show': [boolean]; saved: [] }>()
 
 const message = useToast()
+const { modalStyle, modalClass } = useMobileModal(480)
 const configs = useAsync(listConfigs, false)
 const selected = ref<number[]>([])
 const saving = ref(false)
@@ -66,7 +68,8 @@ async function save() {
     :show="show"
     preset="card"
     :title="`关联租户 · ${proxy?.name ?? ''}`"
-    :style="{ width: '480px', maxWidth: 'calc(100vw - 24px)' }"
+    :style="modalStyle"
+    :class="modalClass"
     @update:show="emit('update:show', $event)"
   >
     <FormField label="关联租户" hint="选中即关联,取消选中即解除;关联后租户全部 SDK 请求经此代理出站">