初始提交：OCI 面板前端（含 GenAI 网关一期）

2026-07-09 15:31:29 +08:00
commit db45a669e3
135 changed files with 25220 additions and 0 deletions
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { NCheckbox, NInput, useMessage } from 'naive-ui'
+import { computed, reactive, ref, watch } from 'vue'
+
+import { createVcn } from '@/api/networks'
+import FormField from '@/components/FormField.vue'
+import FormModal from '@/components/FormModal.vue'
+import { defaultResourceName } from '@/composables/useFormat'
+
+/** 租户 / 区间 / 区域直接使用父页面当前值，不在表单中出现 */
+const props = defineProps<{
+  show: boolean
+  cfgId: number | null
+  compartmentId?: string
+  region?: string
+}>()
+const emit = defineEmits<{ 'update:show': [boolean]; created: [] }>()
+
+const message = useMessage()
+const submitting = ref(false)
+
+const blank = {
+  displayName: '',
+  cidrBlock: '10.0.0.0/16',
+  dnsLabel: '',
+  enableIpv6: true,
+}
+const form = reactive({ ...blank })
+
+watch(
+  () => props.show,
+  (v) => {
+    if (!v) return
+    Object.assign(form, blank)
+    form.displayName = defaultResourceName('vcn')
+  },
+)
+
+const cidrOk = computed(() => /^\d{1,3}(\.\d{1,3}){3}\/\d{1,2}$/.test(form.cidrBlock.trim()))
+const canSubmit = computed(() => props.cfgId !== null && !!form.displayName.trim() && cidrOk.value)
+
+async function submit() {
+  if (props.cfgId === null) return
+  submitting.value = true
+  try {
+    const created = await createVcn(props.cfgId, {
+      region: props.region || undefined,
+      compartmentId: props.compartmentId || undefined,
+      displayName: form.displayName.trim(),
+      cidrBlock: form.cidrBlock.trim(),
+      dnsLabel: form.dnsLabel.trim() || undefined,
+      enableIpv6: form.enableIpv6,
+    })
+    message.success(`VCN「${created.displayName}」已创建`)
+    emit('update:show', false)
+    emit('created')
+  } catch (e) {
+    message.error(e instanceof Error ? e.message : '创建失败')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <FormModal
+    :show="show"
+    title="创建 VCN"
+    :submitting="submitting"
+    :submit-disabled="!canSubmit"
+    submit-text="创建"
+    @update:show="emit('update:show', $event)"
+    @submit="submit"
+  >
+    <div class="grid grid-cols-2 gap-3 max-md:grid-cols-1">
+      <FormField label="名称" required>
+        <NInput v-model:value="form.displayName" placeholder="vcn-20260703-2136" />
+      </FormField>
+      <FormField label="IPv4 CIDR" required :error="cidrOk ? undefined : '格式如 10.0.0.0/16'">
+        <NInput v-model:value="form.cidrBlock" class="mono" placeholder="10.0.0.0/16" />
+      </FormField>
+    </div>
+    <FormField label="DNS 标签" hint="留空不启用 VCN 内 DNS；仅小写字母数字，15 字符内">
+      <NInput v-model:value="form.dnsLabel" class="mono" placeholder="可选" />
+    </FormField>
+    <NCheckbox v-model:checked="form.enableIpv6">同时分配 Oracle IPv6 前缀（/56）</NCheckbox>
+  </FormModal>
+</template>