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

src/composables/useActionLabel.ts

@@ -32,6 +32,21 @@ const exact: Record<string, string> = {
   'POST /api/v1/oci-configs/:id/instances/:instanceId/ipv6-addresses': '添加 IPv6 地址',
   'DELETE /api/v1/oci-configs/:id/instances/:instanceId/ipv6-addresses': '删除 IPv6 地址',
   'POST /api/v1/oci-configs/:id/instances/:instanceId/replace-boot-volume': '更换引导卷',
+  'PUT /api/v1/oci-configs/:id/buckets/:bucket/objects/content': '保存对象内容',
+  'POST /api/v1/oci-configs/:id/buckets/:bucket/objects/rename': '重命名对象',
+  'POST /api/v1/oci-configs/:id/buckets/:bucket/objects/restore': '恢复归档对象',
+  'DELETE /api/v1/oci-configs/:id/reserved-ips/:publicIpId': '释放预留公网 IP',
+  'POST /api/v1/oci-configs/:id/vnics/:vnicId/change-public-ip': '更换公网 IP',
+  'POST /api/v1/oci-configs/:id/vnics/:vnicId/ipv6-addresses': '添加 IPv6 地址',
+  'POST /api/v1/oci-configs/:id/instances/:instanceId/vnics': '附加 VNIC',
+  'DELETE /api/v1/oci-configs/:id/vnic-attachments/:attachmentId': '分离 VNIC',
+  'POST /api/v1/oci-configs/:id/instances/:instanceId/volume-attachments': '挂载块卷',
+  'DELETE /api/v1/oci-configs/:id/volume-attachments/:attachmentId': '分离块卷',
+  'POST /api/v1/oci-configs/:id/instances/:instanceId/boot-volume-attachments': '挂载引导卷',
+  'DELETE /api/v1/oci-configs/:id/boot-volume-attachments/:attachmentId': '分离引导卷',
+  'POST /api/v1/oci-configs/:id/invoices/:internalId/pay': '支付账单',
+  'POST /api/v1/oci-configs/:id/vcns/:vcnId/enable-ipv6': '启用 VCN IPv6',
+  'POST /api/v1/oci-configs/:id/identity-providers/:idpId/activate': '激活身份提供方',
   'POST /api/v1/oci-configs/:id/users': '创建租户用户',
   'PUT /api/v1/oci-configs/:id/users/:userId': '修改租户用户',
   'DELETE /api/v1/oci-configs/:id/users/:userId': '删除租户用户',
@@ -85,6 +100,13 @@ const nouns: Record<string, string> = {
   'identity-providers': '身份提供方',
   'sign-on-exemptions': 'MFA 豁免',
   proxies: '代理',
+  buckets: '桶',
+  objects: '对象',
+  pars: '分享链接',
+  'reserved-ips': '预留公网 IP',
+  vnics: 'VNIC',
+  'vnic-attachments': 'VNIC 挂载',
+  invoices: '账单',
 }
 
 const verbs: Record<string, string> = { POST: '创建', PUT: '修改', DELETE: '删除' }

src/composables/useIsMobile.ts

@@ -0,0 +1,22 @@
+import { readonly, ref } from 'vue'
+
+/** 移动/桌面切换线与 CSS 断点同源:≤767px 为移动形态(Tailwind md 之下) */
+const QUERY = '(max-width: 767px)'
+
+const isMobile = ref(false)
+let started = false
+
+/** 模块级单例监听:任意组件首次调用时启动,全应用共享一个 matchMedia */
+function ensureWatcher() {
+  if (started || typeof window === 'undefined') return
+  started = true
+  const mq = window.matchMedia(QUERY)
+  isMobile.value = mq.matches
+  mq.addEventListener('change', (e) => (isMobile.value = e.matches))
+}
+
+/** 响应式返回「当前是否移动形态」;JS 层条件渲染(表格换卡片、弹窗全屏)用它 */
+export function useIsMobile() {
+  ensureWatcher()
+  return readonly(isMobile)
+}

src/composables/useMobileModal.ts

@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+
+import { useIsMobile } from './useIsMobile'
+
+/** 弹窗移动端全屏化:桌面定宽居中,移动端 100vw/100dvh 满屏。
+    返回的 class 配合 main.css 的 .form-modal-mobile 布局规则,
+    与 FormModal 同形态;直接用原生 NModal 的弹窗接入此组合式即可 */
+export function useMobileModal(width: number) {
+  const isMobile = useIsMobile()
+  const modalStyle = computed(() =>
+    isMobile.value
+      ? { width: '100vw', height: '100dvh', maxWidth: '100vw', margin: '0', borderRadius: '0' }
+      : { width: `${width}px`, maxWidth: 'calc(100vw - 24px)' },
+  )
+  const modalClass = computed(() => (isMobile.value ? 'form-modal-mobile' : ''))
+  return { modalStyle, modalClass }
+}