新增对象存储/账单/保留IP页面,成本今天视图与样式收敛

src/views/NetworkListView.vue

@@ -4,17 +4,17 @@ import {
   NDataTable,
   NInputGroup,
   NInputGroupLabel,
-  NSelect,
   type DataTableColumns,
 } from 'naive-ui'
 import { computed, h, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import { listSubnets, listVcns } from '@/api/networks'
+import CompartmentSelect from '@/components/CompartmentSelect.vue'
 import DeadPlaceholder from '@/components/DeadPlaceholder.vue'
-import FootNote from '@/components/FootNote.vue'
 import LifecycleBadge from '@/components/LifecycleBadge.vue'
 import CreateVcnModal from '@/components/network/CreateVcnModal.vue'
+import ReservedIpPanel from '@/components/network/ReservedIpPanel.vue'
 import StatusBadge from '@/components/StatusBadge.vue'
 import { useRegionAlias } from '@/composables/useRegionAlias'
 import { useAsync } from '@/composables/useAsync'
@@ -132,24 +132,30 @@ const columns = computed<DataTableColumns<VcnRow>>(() => [
           {{ scope.currentConfig?.alias ?? '…' }}
         </span>
       </div>
-      <NButton v-if="!isDead" size="small" type="primary" @click="showCreate = true">
-        创建 VCN
-      </NButton>
+      <NInputGroup v-if="!isDead" class="!w-72 max-md:!w-full">
+        <NInputGroupLabel size="small">区间</NInputGroupLabel>
+        <CompartmentSelect
+          v-model:value="scope.compartmentId"
+          :compartments="scope.compartments.data ?? []"
+          :root-label="scope.rootLabel"
+          :loading="scope.compartments.loading"
+          :disabled="scope.compDisabled"
+        />
+      </NInputGroup>
     </div>
 
     <DeadPlaceholder v-if="isDead" :last-error="scope.currentConfig?.lastError" />
     <div v-else class="panel">
-      <div class="flex flex-wrap items-center gap-2 px-4.5 py-3">
-        <NInputGroup class="!w-72 max-md:!w-full">
-          <NInputGroupLabel size="small">区间</NInputGroupLabel>
-          <NSelect
-            v-model:value="scope.compartmentId"
-            :options="scope.compOptions"
-            :loading="scope.compartments.loading"
-            :disabled="scope.compDisabled"
-            size="small"
-          />
-        </NInputGroup>
+      <div class="flex items-center justify-between gap-3 border-b border-line-soft px-4.5 py-3.5">
+        <div>
+          <div class="text-sm font-semibold">
+            VCN
+          </div>
+          <div class="mt-0.5 text-xs text-ink-3">
+            创建 VCN 默认启用 IPv6（Oracle GUA /56）并将默认安全列表替换为出入全放行；如需收紧请再更新安全列表
+          </div>
+        </div>
+        <NButton size="small" type="primary" @click="showCreate = true">创建 VCN</NButton>
       </div>
       <NDataTable
         :columns="columns"
@@ -158,11 +164,15 @@ const columns = computed<DataTableColumns<VcnRow>>(() => [
         :scroll-x="920"
         :row-key="(r: VcnRow) => r.id"
       />
-      <FootNote>
-        创建 VCN 默认启用 IPv6（Oracle GUA /56）并将默认安全列表替换为出入全放行；如需收紧请再更新安全列表
-      </FootNote>
     </div>
 
+    <ReservedIpPanel
+      v-if="!isDead"
+      :cfg-id="scope.currentConfig?.id ?? null"
+      :region="scope.region || undefined"
+      :compartment-id="scope.compartmentId || undefined"
+    />
+
     <CreateVcnModal
       v-model:show="showCreate"
       :cfg-id="scope.currentConfig?.id ?? null"