实例表单:默认 2C12G、去免费文案、配额按 AD 联动

This commit is contained in:
2026-07-17 16:53:03 +08:00
parent fbed8d1ea4
commit c0229b60c1
5 changed files with 132 additions and 49 deletions
+35
View File
@@ -509,6 +509,7 @@ export const mockRegionSubs: RegionSubscription[] = [
]
export const mockLimits: LimitItem[] = [
// A1:三个 AD 均有配额 + 区域总额(镜像真实免费租户形态)
{
name: 'standard-a1-core-count',
scopeType: 'AD',
@@ -517,6 +518,19 @@ export const mockLimits: LimitItem[] = [
used: 4,
available: 0,
},
{
name: 'standard-a1-core-count',
scopeType: 'AD',
availabilityDomain: 'RssO:EU-FRANKFURT-1-AD-2',
value: 4,
},
{
name: 'standard-a1-core-count',
scopeType: 'AD',
availabilityDomain: 'RssO:EU-FRANKFURT-1-AD-3',
value: 4,
},
{ name: 'standard-a1-core-regional-count', scopeType: 'REGION', value: 4 },
{
name: 'standard-a1-memory-count',
scopeType: 'AD',
@@ -525,14 +539,27 @@ export const mockLimits: LimitItem[] = [
used: 24,
available: 0,
},
// Micro:仅 AD-2 有配额(AD 受限 shape,驱动创建表单自动落位)
{
name: 'standard-e2-micro-core-count',
scopeType: 'AD',
availabilityDomain: 'RssO:EU-FRANKFURT-1-AD-1',
value: 0,
},
{
name: 'standard-e2-micro-core-count',
scopeType: 'AD',
availabilityDomain: 'RssO:EU-FRANKFURT-1-AD-2',
value: 2,
used: 1,
available: 1,
},
{
name: 'standard-e2-micro-core-count',
scopeType: 'AD',
availabilityDomain: 'RssO:EU-FRANKFURT-1-AD-3',
value: 0,
},
{
name: 'standard-e4-core-count',
scopeType: 'AD',
@@ -1374,6 +1401,12 @@ export const mockShapes: ComputeShape[] = [
memoryMinGBs: 1,
memoryMaxGBs: 512,
processorDescription: '3.0 GHz Ampere® Altra™',
quotaNames: [
'standard-a1-memory-count',
'standard-a1-memory-regional-count',
'standard-a1-core-count',
'standard-a1-core-regional-count',
],
},
{
name: 'VM.Standard.E2.1.Micro',
@@ -1382,6 +1415,7 @@ export const mockShapes: ComputeShape[] = [
ocpus: 1,
memoryInGBs: 1,
processorDescription: '2.0 GHz AMD EPYC™ 7551',
quotaNames: ['standard-e2-micro-core-count'],
},
{
name: 'VM.Standard.E4.Flex',
@@ -1392,6 +1426,7 @@ export const mockShapes: ComputeShape[] = [
memoryMinGBs: 1,
memoryMaxGBs: 1024,
processorDescription: '2.55 GHz AMD EPYC™ 7J13',
quotaNames: ['standard-e4-core-count', 'standard-e4-memory-count'],
},
{
name: 'VM.Standard.E5.Flex',
@@ -56,12 +56,13 @@ async function submit() {
// 后端 errors / instances 为空时序列化为 null,判空防炸
const ok = result.instances?.length ?? 0
const failed = result.errors?.length ?? 0
if (failed) message.warning(`${ok} 台创建成功,${failed} 台失败${result.errors![0]}`)
if (failed) message.warning(`${ok} 台创建成功,${failed} 台失败`, result.errors!.join('\n'))
else message.success(`已创建 ${ok} 台实例`)
emit('update:show', false)
emit('created')
} catch (e) {
message.error(e instanceof Error ? e.message : '创建失败')
// 逐台错误(可能多行)收进「展开详情」,标题保持简短
message.error('创建实例失败', e instanceof Error && e.message ? e.message : undefined)
} finally {
submitting.value = false
}
@@ -90,17 +91,18 @@ async function submit() {
<InstanceSpecForm
ref="specForm"
sectioned
auto-pick-ad
:cfg-id="cfgId"
:region="region"
:compartment-id="compartmentId"
/>
<div
class="mt-3 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-line-soft bg-wash px-3 py-2 text-xs leading-relaxed text-ink-3"
v-if="specForm?.summary"
class="mt-3 rounded-lg border border-line-soft bg-wash px-3 py-2 text-xs leading-relaxed"
>
<span v-if="specForm?.summary" class="font-medium text-ink-2">
<span class="font-medium text-ink-2">
预估规格:{{ form.count }} · {{ specForm.summary }}
</span>
<span>容量不足Out of host capacity时可改用抢机任务反复尝试</span>
</div>
</FormModal>
</template>
+86 -34
View File
@@ -10,6 +10,7 @@ import FormField from '@/components/FormField.vue'
import FormSection from '@/components/FormSection.vue'
import { shortAd } from '@/composables/useFormat'
import { useAsync } from '@/composables/useAsync'
import type { ComputeShape, LimitItem } from '@/types/api'
/** 实例规格表单(创建实例弹窗与抢机任务共用):
* Shape / 可用域 / 规格 / 镜像 / VCN 子网 / 引导卷 / 登录方式 / IP 分配。
@@ -22,6 +23,9 @@ const props = defineProps<{
sectioned?: boolean
/** 可用域字段说明;抢机任务留空为轮询语义,与手动创建(固定 AD-1)不同 */
adHint?: string
/** 创建场景:AD 留空(默认 AD-1)而所选 shape 在 AD-1 无配额时,自动落位首个有配额 AD;
* 抢机表单留空 = 轮询语义,勿开 */
autoPickAd?: boolean
}>()
/** VCN 选择的「自动创建」哨兵:提交时不传 subnetId,由后端建 VCN 与子网 */
@@ -30,8 +34,8 @@ const AUTO_VCN = '__auto__'
const blank = {
availabilityDomain: null as string | null,
shape: 'VM.Standard.A1.Flex',
ocpus: 4,
memoryInGBs: 24,
ocpus: 2,
memoryInGBs: 12,
imageId: null as string | null,
vcnId: AUTO_VCN,
subnetId: null as string | null,
@@ -194,51 +198,82 @@ watch(
},
)
/** shape → OCI compute 配额名(官方 Limits by Service 命名);已知映射用于配额标注,
* 清单外的 shape 不判定配额。AD 维度多行求和 > 0 才认为有配额。 */
const SHAPE_QUOTAS: Record<string, string> = {
'VM.Standard.A1.Flex': 'standard-a1-core-count',
'VM.Standard.A2.Flex': 'standard-a2-core-count',
'VM.Standard.A4.Flex': 'standard-a4-core-count',
'VM.Standard.E2.1.Micro': 'standard-e2-micro-core-count',
'VM.Standard.E3.Flex': 'standard-e3-core-ad-count',
'VM.Standard.E4.Flex': 'standard-e4-core-count',
'VM.Standard.E5.Flex': 'standard-e5-core-count',
'VM.Standard.E6.Flex': 'standard-e6-core-count',
'VM.Standard3.Flex': 'standard3-core-count',
/** 免费类计费类型:仅用于排序置顶,不在选项文案中标注 */
const FREE_BILLING = new Set(['ALWAYS_FREE', 'LIMITED_FREE'])
/** shape 的核数配额名:quotaNames 排除 memory / reserved / reservable 变体,
* 剩余为核数(或实例数)限额名,与 compute limits 的 name 同名 */
function coreQuotaNames(s: ComputeShape): string[] {
return (s.quotaNames ?? []).filter(
(n) => !n.includes('memory') && !n.includes('reserved') && !n.includes('reservable'),
)
}
const BILLING_LABEL: Record<string, string> = {
ALWAYS_FREE: '永久免费',
LIMITED_FREE: '免费额度',
/** 单个 shape 的配额汇总:AD 行按 AD 求和,REGION 行累计为区域总额;无匹配行返回 null */
function shapeQuotaEntry(names: Set<string>, rows: LimitItem[]): ShapeQuota | null {
const byAd = new Map<string, number>()
let regional: number | null = null
let matched = false
for (const r of rows) {
if (!names.has(r.name)) continue
matched = true
if (r.scopeType === 'AD' && r.availabilityDomain) {
byAd.set(r.availabilityDomain, (byAd.get(r.availabilityDomain) ?? 0) + Math.max(r.value, 0))
} else if (r.scopeType === 'REGION') {
regional = (regional ?? 0) + Math.max(r.value, 0)
}
}
return matched ? { byAd, regional } : null
}
/** 已知映射 shape 的核数配额合计;未知映射或配额未加载返回 null(不判定) */
function quotaOf(shape: string): number | null {
const quota = SHAPE_QUOTAS[shape]
const items = limits.data.value ?? []
if (!quota || !items.length) return null
return items.filter((l) => l.name === quota).reduce((sum, l) => sum + (l.value > 0 ? l.value : 0), 0)
interface ShapeQuota {
byAd: Map<string, number> // AD 全名 → 核数配额
regional: number | null // 区域级总额,null = 无区域行
}
/** 全部 shape 的配额汇总;quotaNames 缺失或 limits 无匹配行的 shape 无条目(不判定) */
const quotaByShape = computed(() => {
const rows = limits.data.value ?? []
const out = new Map<string, ShapeQuota>()
if (!rows.length) return out
for (const s of shapes.data.value ?? []) {
const names = new Set(coreQuotaNames(s))
if (!names.size) continue
const entry = shapeQuotaEntry(names, rows)
if (entry) out.set(s.name, entry)
}
return out
})
/** shape 在指定 AD(null = 任一 AD)是否有配额;null = 数据不足不判定 */
function quotaInAd(name: string, ad: string | null): boolean | null {
const q = quotaByShape.value.get(name)
if (!q) return null
if (q.regional !== null && q.regional <= 0) return false
if (!q.byAd.size) return true // 仅区域级限额且 > 0
if (ad === null) return [...q.byAd.values()].some((v) => v > 0)
return (q.byAd.get(ad) ?? 0) > 0
}
/** 排序:免费 shape 优先 → VM.Standard 系列 → 其他 VM → 裸金属等 */
function shapeRank(s: { billingType: string; name: string }): number {
if (BILLING_LABEL[s.billingType]) return 0
if (FREE_BILLING.has(s.billingType)) return 0
if (s.name.startsWith('VM.Standard')) return 1
if (s.name.startsWith('VM.')) return 2
return 3
}
const shapeOptions = computed(() => {
// 清单全部来自 shapes 接口,不做本地预设;接口不可用时仍可手输(tag 模式)
// 清单全部来自 shapes 接口,不做本地预设;接口不可用时仍可手输(tag 模式);
// 选定 AD 时按该 AD 判定配额,未选时看任一 AD
const list = shapes.data.value ?? []
const ad = form.availabilityDomain
return [...list]
.sort((a, b) => shapeRank(a) - shapeRank(b) || a.name.localeCompare(b.name))
.map((s) => {
const free = BILLING_LABEL[s.billingType]
const quota = quotaOf(s.name)
const suffix = (free ? `${free}` : '') + (quota === 0 ? ' · 无配额' : '')
return { label: s.name + suffix, value: s.name, disabled: quota === 0 }
const ok = quotaInAd(s.name, ad)
const suffix = ok === false ? (ad ? ' · 该 AD 无配额' : ' · 无配额') : ''
return { label: s.name + suffix, value: s.name, disabled: ok === false }
})
})
@@ -288,10 +323,29 @@ const imageOptions = computed(() => {
.map((i) => ({ label: i.displayName, value: i.id }))
})
/** AD 选项按当前 shape 的配额标注并禁用无配额项;数据不足时不标注 */
const adOptions = computed(
() => ads.data.value?.map((ad) => ({ label: shortAd(ad), value: ad })) ?? [],
() =>
ads.data.value?.map((ad) => {
const ok = quotaInAd(form.shape, ad)
return {
label: shortAd(ad) + (ok === false ? '(无配额)' : ''),
value: ad,
disabled: ok === false,
}
}) ?? [],
)
// 创建场景(autoPickAd):AD 留空将由后端取 AD-1;所选 shape 在 AD-1 无配额
// 而其他 AD 有配额时,自动落位首个有配额 AD(字段可见,用户可改)
watch([() => form.shape, quotaByShape, () => ads.data.value], () => {
if (!props.autoPickAd || form.availabilityDomain !== null) return
const list = ads.data.value ?? []
if (!list.length || quotaInAd(form.shape, list[0]) !== false) return
const target = list.find((ad) => quotaInAd(form.shape, ad) === true)
if (target) form.availabilityDomain = target
})
const vcnOptions = computed(() => [
{ label: '自动创建(oci-portal-auto-vcn', value: AUTO_VCN },
...(vcns.data.value ?? []).map((v) => ({ label: v.displayName, value: v.id })),
@@ -325,12 +379,10 @@ const valid = computed(() => {
return !isFlex.value || form.ocpus > 0
})
/** 规格摘要(父表单底部预估条用):shape 短名 + 弹性核内存 + 免费标注 */
/** 规格摘要(父表单底部预估条用):shape 短名 + 弹性核内存 */
const summary = computed(() => {
const parts = [form.shape.replace(/^VM\.Standard\.?/, '') || form.shape]
if (isFlex.value) parts.push(`${form.ocpus} OCPU · ${form.memoryInGBs} GB`)
const free = selectedShape.value && BILLING_LABEL[selectedShape.value.billingType]
if (free) parts.push(free)
return parts.join(' · ')
})
@@ -366,7 +418,7 @@ defineExpose({ valid, buildSpec, reset, applySpec, summary })
<FormField
label="Shape"
required
hint="清单来自租户当前区域实际提供的 shape(免费与无配额已标注),可手输其他"
hint="清单来自租户当前区域实际提供的 shape(无配额已标注),可手输其他"
>
<NSelect
v-model:value="form.shape"
+2 -10
View File
@@ -37,18 +37,10 @@ watch(
},
)
const BILLING_LABEL: Record<string, string> = {
ALWAYS_FREE: '永久免费',
LIMITED_FREE: '免费额度',
}
const shapeOptions = computed(() => {
const list = shapes.data.value ?? []
if (!list.length) return [{ label: form.shape, value: form.shape }]
return list.map((s) => {
const free = BILLING_LABEL[s.billingType]
return { label: s.name + (free ? `${free}` : ''), value: s.name }
})
return list.map((s) => ({ label: s.name, value: s.name }))
})
const selectedShape = computed(
@@ -141,7 +133,7 @@ async function submit() {
</div>
<div class="text-xs leading-relaxed text-ink-3">
运行中实例 OCI 会自动重启完成变更更换 shape 要求镜像与目标 shape 架构兼容 aarch64
镜像不能换到 x86 shapeA1 免费额度上限 4 OCPU / 24 GB
镜像不能换到 x86 shape
</div>
</FormModal>
</template>
+2
View File
@@ -489,6 +489,8 @@ export interface ComputeShape {
memoryMaxGBs?: number
gpus?: number
processorDescription?: string
/** 该 shape 对应的配额名(与 compute limits 的 name 同名),用于配额与 AD 可用性判定 */
quotaNames?: string[]
}
// ---- 引导卷 ----