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

src/views/BootVolumeListView.vue

@@ -5,14 +5,14 @@ import {
   NIcon,
   NInputGroup,
   NInputGroupLabel,
-  NPopconfirm,
-  NSelect,
   type DataTableColumns,
 } from 'naive-ui'
 import { computed, h, ref, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import { deleteBootVolume, listBootVolumes } from '@/api/bootVolumes'
+import CompartmentSelect from '@/components/CompartmentSelect.vue'
+import ConfirmPop from '@/components/ConfirmPop.vue'
 import DeadPlaceholder from '@/components/DeadPlaceholder.vue'
 import FootNote from '@/components/FootNote.vue'
 import LifecycleBadge from '@/components/LifecycleBadge.vue'
@@ -152,12 +152,16 @@ function renderActions(row: BvRow) {
           { default: () => '删除' },
         )
       : h(
-          NPopconfirm,
-          { onPositiveClick: () => remove(row) },
+          ConfirmPop,
+          {
+            title: '删除该引导卷？',
+            content: '数据不可恢复。',
+            confirmText: '删除',
+            onConfirm: () => remove(row),
+          },
           {
             trigger: () =>
               h(NButton, { size: 'tiny', type: 'error', ghost: true }, { default: () => '删除' }),
-            default: () => '删除该引导卷？数据不可恢复',
           },
         )
   return h('div', { class: 'flex items-center gap-1.5' }, [
@@ -255,12 +259,12 @@ const columns = computed<DataTableColumns<BvRow>>(() => [
       <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
+          <CompartmentSelect
             v-model:value="scope.compartmentId"
-            :options="scope.compOptions"
+            :compartments="scope.compartments.data ?? []"
+            :root-label="scope.rootLabel"
             :loading="scope.compartments.loading"
             :disabled="scope.compDisabled"
-            size="small"
           />
         </NInputGroup>
       </div>