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

src/components/network/ReservedIpPanel.vue

@@ -8,11 +8,13 @@ import ConfirmPop from '@/components/ConfirmPop.vue'
 import StatusBadge from '@/components/StatusBadge.vue'
 import { fmtTime } from '@/composables/useFormat'
 import { useAsync } from '@/composables/useAsync'
+import { useMobileModal } from '@/composables/useMobileModal'
 import type { ReservedIp } from '@/types/api'
 import { useToast } from '@/composables/useToast'
 
 const props = defineProps<{ cfgId: number | null; region?: string; compartmentId?: string }>()
 const message = useToast()
+const { modalStyle, modalClass } = useMobileModal(420)
 
 const ips = useAsync<ReservedIp[]>(async () => {
   if (!props.cfgId) return []
@@ -194,11 +196,11 @@ const columns = computed<DataTableColumns<ReservedIp>>(() => [
 
 <template>
   <div class="panel">
-    <div class="flex items-center justify-between border-b border-line-soft px-4.5 py-3.5">
+    <div class="flex flex-wrap items-center justify-between gap-y-2 border-b border-line-soft px-4.5 py-3.5">
       <div>
         <div class="text-sm font-semibold">保留 IP</div>
         <div class="mt-0.5 text-xs text-ink-3">
-          区域级固定公网 IP;换绑会先释放实例原临时 IP,创建实例时也可直接选用
+          区域级固定公网 IP,可换绑实例或创建实例时选用
         </div>
       </div>
       <NButton size="small" type="primary" :loading="creating" @click="create">创建保留 IP</NButton>
@@ -215,7 +217,8 @@ const columns = computed<DataTableColumns<ReservedIp>>(() => [
       v-model:show="showBind"
       preset="card"
       title="绑定保留 IP 到实例"
-      :style="{ width: '420px', maxWidth: 'calc(100vw - 24px)' }"
+      :style="modalStyle"
+      :class="modalClass"
     >
       <div class="flex flex-col gap-3">
         <div class="text-[13px] text-ink-2">