bfg-common 1.5.558 → 1.5.559

package/components/common/vm/actions/common/select/template/old/Old.vue

@@ -1,50 +1,50 @@
-<template>
-  <div class="select-template">
-    <atoms-alert
-      v-show="props.errors.length"
-      :items="props.errors"
-      status="alert-danger"
-      test-id="template-alert"
-      @remove="emits('remove')"
-    />
-
-    <p class="template-description">
-      {{ localization.vmWizard.selectTemplateForCreatingVm }}
-    </p>
-    <div class="tree-view-wrap">
-      <common-vm-actions-common-select-template-tree-view
-        :templates-tree="props.templatesTree"
-        @select-node="emits('select', $event)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-const props = defineProps<{
-  templatesTree: UI_I_TreeNode[]
-  errors: string[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'remove'): void
-  (event: 'select', value: UI_I_TreeNode): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-.tree-view-wrap {
-  position: relative;
-  border: 1px solid #000;
-  padding: 5px;
-  max-height: 300px;
-  min-height: 200px;
-  overflow: auto;
-  margin-bottom: 10px;
-}
-</style>
+<template>
+  <div class="select-template">
+    <atoms-alert
+      v-show="props.errors.length"
+      :items="props.errors"
+      status="alert-danger"
+      test-id="template-alert"
+      @remove="emits('remove')"
+    />
+
+    <p class="template-description">
+      {{ localization.vmWizard.selectTemplateForCreatingVm }}
+    </p>
+    <div class="tree-view-wrap">
+      <common-vm-actions-common-select-template-tree-view
+        :templates-tree="props.templatesTree"
+        @select-node="emits('select', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+const props = defineProps<{
+  templatesTree: UI_I_TreeNode[]
+  errors: string[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'remove'): void
+  (event: 'select', value: UI_I_TreeNode): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.tree-view-wrap {
+  position: relative;
+  border: 1px solid #000;
+  padding: 5px;
+  max-height: 300px;
+  min-height: 200px;
+  overflow: auto;
+  margin-bottom: 10px;
+}
+</style>

package/components/common/vm/actions/editSettings/EditSettings.vue

@@ -1,6 +1,7 @@
 <template>
   <common-vm-actions-edit-settings-new
     v-if="isNewView"
+    v-model:vm-name="vmName"
     v-model:vm-settings="vmSettingsLocal"
     :nodes="props.nodes"
     :files="props.files"
@@ -12,6 +13,9 @@
     :selected-nav-item="selectedNavItem"
     :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
     :error-validation-fields="props.errorValidationFields"
+    :virtual-hardware-networks="virtualHardwareNetworksLocal"
+    :virtual-hardware-hard-disks="virtualHardwareHardDisksLocal"
+    :virtual-hardware-cd-dvd-drives="virtualHardwareCdDvdDrivesLocal"
     :state="props.state"
     :vm-name-old="props.vmSettings?.name"
     :passthrough-devices="props.passthroughDevices"
@@ -19,19 +23,21 @@
     :get-datastore-table-func="props.getDatastoreTableFunc"
     :customize-hardware-submit="customizeHardwareSubmit"
     :is-vmt="props.isVmt"
-    :max-memory="maxMemory"
-    :cpu-models="cpuModels"
     @hide="emits('hide')"
     @validate="validateSendData"
+    @update-vm="emits('update-vm')"
     @get-storage="emits('get-storage', $event)"
     @get-pci-devices="emits('get-pci-devices')"
+    @change-boot-order="onChangeBootOrder"
     @get-networks-table="emits('get-networks-table', $event)"
     @get-folders-or-files="emits('get-folders-or-files', $event)"
     @show-datastore-child="emits('show-datastore-child', $event)"
     @get-active-device-child="emits('get-active-device-child', $event)"
+    @change-customize-hardware="onChangeCustomizeHardware"
   />
   <common-vm-actions-edit-settings-old
     v-else
+    v-model:vm-name="vmName"
     v-model:vm-settings="vmSettingsLocal"
     :nodes="props.nodes"
     :files="props.files"
@@ -43,6 +49,9 @@
     :selected-nav-item="selectedNavItem"
     :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
     :error-validation-fields="props.errorValidationFields"
+    :virtual-hardware-networks="virtualHardwareNetworksLocal"
+    :virtual-hardware-hard-disks="virtualHardwareHardDisksLocal"
+    :virtual-hardware-cd-dvd-drives="virtualHardwareCdDvdDrivesLocal"
     :state="props.state"
     :vm-name-old="props.vmSettings?.name"
     :passthrough-devices="props.passthroughDevices"
@@ -50,16 +59,17 @@
     :get-datastore-table-func="props.getDatastoreTableFunc"
     :customize-hardware-submit="customizeHardwareSubmit"
     :is-vmt="props.isVmt"
-    :max-memory="maxMemory"
-    :cpu-models="cpuModels"
     @hide="emits('hide')"
     @validate="validateSendData"
+    @update-vm="emits('update-vm')"
     @get-storage="emits('get-storage', $event)"
     @get-pci-devices="emits('get-pci-devices')"
+    @change-boot-order="onChangeBootOrder"
     @get-networks-table="emits('get-networks-table', $event)"
     @get-folders-or-files="emits('get-folders-or-files', $event)"
     @show-datastore-child="emits('show-datastore-child', $event)"
     @get-active-device-child="emits('get-active-device-child', $event)"
+    @change-customize-hardware="onChangeCustomizeHardware"
   />
 </template>
 
@@ -88,11 +98,10 @@ import type {
   UI_I_DatastoreTableItem,
   UI_I_FolderOrFileTreePayload,
 } from '~/lib/models/store/storage/interfaces'
+import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
 import type { UI_T_EditVmFinishFunc } from '~/components/common/vm/actions/editSettings/lib/models/types'
 import type { UI_I_Capabilities } from '~/components/common/vm/actions/common/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import { mapCapabilities } from '~/components/common/vm/actions/common/lib/utils/capabilities'
-import { capabilities } from '~/components/common/vm/actions/common/lib/config/capabilities'
 
 const props = withDefaults(
   defineProps<{
@@ -149,9 +158,6 @@ watch(
   { deep: true, immediate: true }
 )
 
-const cpuModels = ref<UI_I_OptionItem[]>(capabilities.value.cpuModels)
-const maxMemory = ref<number>(capabilities.value.maxMemory)
-
 const selectedNavItem = ref<UI_T_SelectedNavItem>(0)
 
 const loadingLocal = ref<boolean>(false)
@@ -168,26 +174,34 @@ const vmSettingsLocal = computed<UI_I_VmSettings | null>(() => props.vmSettings)
 const vmName = ref<string>(vmSettingsLocal.value?.name || '')
 watch(vmSettingsLocal, (newValue) => {
   vmName.value = newValue?.name || ''
-  console.log(newValue, 11111111111);
-}, {deep: true})
+})
 
 const virtualHardwareHardDisks = ref<UI_I_SendDataNewHardDisk[] | null>(null)
 const virtualHardwareCdDvdDrives = ref<UI_I_SendDataNewCdDvdDrive[] | null>(
   null
 )
 const virtualHardwareNetworks = ref<UI_I_SendDataNewNetwork[] | null>(null)
-// const onChangeBootOrder = (data: UI_T_ChangeBootOrder): void => {
-//   virtualHardwareHardDisks.value = data[0]
-//   virtualHardwareCdDvdDrives.value = data[1]
-//   virtualHardwareNetworks.value = data[2]
-// }
+const onChangeBootOrder = (data: UI_T_ChangeBootOrder): void => {
+  virtualHardwareHardDisks.value = data[0]
+  virtualHardwareCdDvdDrives.value = data[1]
+  virtualHardwareNetworks.value = data[2]
+}
 
 const customizeHardware = ref<UI_I_SendDataCustomizeHardware | null>(null)
-// const onChangeCustomizeHardware = (
-//   data: UI_I_SendDataCustomizeHardware
-// ): void => {
-//   customizeHardware.value = data
-// }
+const onChangeCustomizeHardware = (
+  data: UI_I_SendDataCustomizeHardware
+): void => {
+  customizeHardware.value = data
+}
+const virtualHardwareHardDisksLocal = computed<
+  UI_I_SendDataNewHardDisk[] | null
+>(() => customizeHardware.value?.virtualHardware?.hardDisks || null)
+const virtualHardwareNetworksLocal = computed<UI_I_SendDataNewNetwork[] | null>(
+  () => customizeHardware.value?.virtualHardware?.networks || null
+)
+const virtualHardwareCdDvdDrivesLocal = computed<
+  UI_I_SendDataNewCdDvdDrive[] | null
+>(() => customizeHardware.value?.virtualHardware?.cdDvdDrives || null)
 
 const virtualHardwareCpu = computed<UI_I_SendDataCpu | null>(
   () => customizeHardware.value?.virtualHardware?.cpu || null

package/components/common/vm/actions/editSettings/EditSettingsOld.vue

@@ -17,19 +17,29 @@
         />
         <div v-if="vmSettings" class="vm-context">
           <common-vm-actions-common-customize-hardware
-            v-model="vmSettings"
+            v-model:vm-name="vmName"
+            v-model:guest-machine-type="vmSettings.guestMachineType"
+            v-model:guest-os-family="vmSettings.guestOsFamily"
+            v-model:guest-os-version="vmSettings.guestOsVersion"
             :project="props.project"
             :storage="vmSettings.storage"
-            :cd-dvd-drives="vmSettings.disk_devices.filter((disk) => disk.device_type === 'cdrom')"
-            :hard-disks="vmSettings.disk_devices.filter((disk) => disk.device_type !== 'cdrom')"
-            :max-memory="props.maxMemory"
-            :cpu-models="props.cpuModels"
-            :video-card="vmSettings.video_card"
-            :usb-controller="vmSettings.usb_controllers"
-            :pci-devices="vmSettings.passthrough_pci_devices"
-            :hard-disks-for-edit="vmSettings.disk_devices.filter((disk) => disk.device_type !== 'cdrom')"
+            :hard-disks-for-boot-options="props.virtualHardwareHardDisks"
+            :cd-dvd-drives-for-boot-options="props.virtualHardwareCdDvdDrives"
+            :networks-for-boot-options="props.virtualHardwareNetworks"
+            :cd-dvd-drives="vmSettings.cdDvdDrives"
+            :hard-disks="vmSettings.hardDisks"
+            :networks="vmSettings.networks"
+            :max-cpus="vmSettings.maxCpus"
+            :max-memory="vmSettings.maxMemory"
+            :cpu-models="vmSettings.cpuModels"
+            :cpu="vmSettings.cpu"
+            :memory="vmSettings.memory"
+            :video-card="vmSettings.videoCard"
+            :usb-controller="vmSettings.usbController"
+            :pci-devices="vmSettings.pciDevices"
+            :selected-nav-item="selectedNavItem"
+            :hard-disks-for-edit="vmSettings.hardDisks"
             :options="vmSettings.options"
-            :selected-nav-item="props.selectedNavItem"
             :nodes="props.nodes"
             :files="props.files"
             :networks-table="props.networksTable"
@@ -50,6 +60,8 @@
             @show-datastore-child="emits('show-datastore-child', $event)"
             @get-networks-table="emits('get-networks-table', $event)"
             @get-pci-devices="emits('get-pci-devices')"
+            @change-boot-order="emits('change-boot-order', $event)"
+            @send-data="emits('change-customize-hardware', $event)"
           />
         </div>
       </template>
@@ -66,6 +78,12 @@ import type {
   UI_I_VmSettings,
 } from '~/lib/models/store/vm/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
 import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
 import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
@@ -73,7 +91,9 @@ import type {
   UI_I_DatastoreTableItem,
   UI_I_FolderOrFileTreePayload,
 } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
+
+const vmName = defineModel<string>('vmName', { required: true })
 
 const vmSettings = defineModel<UI_I_VmSettings | null>('vmSettings', {
   required: true,
@@ -90,9 +110,10 @@ const props = withDefaults(
     networksTable: UI_I_NetworkTableItem[]
     selectedNavItem: UI_T_SelectedNavItem
     vmCpuHelpTextSecond: string
-    errorValidationFields: UI_I_ErrorValidationField[]
-    maxMemory: number
-    cpuModels: UI_I_OptionItem[]
+    errorValidationFields: UI_I_ErrorValidationField<string>[]
+    virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
+    virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
+    virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
     state?: string | number
     vmNameOld?: string
     passthroughDevices?: UI_I_PciDevice[]
@@ -115,12 +136,18 @@ const props = withDefaults(
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'validate'): void
+  (event: 'update-vm'): void
   (event: 'get-storage', value: UI_I_TablePayload): void
   (event: 'get-pci-devices'): void
+  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
   (event: 'get-networks-table', value: UI_I_TablePayload): void
   (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
   (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
   (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (
+    event: 'change-customize-hardware',
+    value: UI_I_SendDataCustomizeHardware
+  ): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/vm/actions/editSettings/new/New.vue

@@ -20,19 +20,29 @@
 
         <div v-else class="vm-context px-8">
           <common-vm-actions-common-customize-hardware
-            v-model="vmSettings"
+            v-model:vm-name="vmName"
+            v-model:guest-machine-type="vmSettings.guestMachineType"
+            v-model:guest-os-family="vmSettings.guestOsFamily"
+            v-model:guest-os-version="vmSettings.guestOsVersion"
             :project="props.project"
             :storage="vmSettings.storage"
-            :cd-dvd-drives="vmSettings.disk_devices.filter((disk) => disk.device_type === 'cdrom')"
-            :hard-disks="vmSettings.disk_devices.filter((disk) => disk.device_type !== 'cdrom')"
-            :max-memory="props.maxMemory"
-            :cpu-models="props.cpuModels"
-            :video-card="vmSettings.video_card"
-            :usb-controller="vmSettings.usb_controllers"
-            :pci-devices="vmSettings.passthrough_pci_devices"
-            :hard-disks-for-edit="vmSettings.disk_devices.filter((disk) => disk.device_type !== 'cdrom')"
-            :options="vmSettings.options"
+            :hard-disks-for-boot-options="props.virtualHardwareHardDisks"
+            :cd-dvd-drives-for-boot-options="props.virtualHardwareCdDvdDrives"
+            :networks-for-boot-options="props.virtualHardwareNetworks"
+            :cd-dvd-drives="vmSettings.cdDvdDrives"
+            :hard-disks="vmSettings.hardDisks"
+            :networks="vmSettings.networks"
+            :max-cpus="vmSettings.maxCpus"
+            :max-memory="vmSettings.maxMemory"
+            :cpu-models="vmSettings.cpuModels"
+            :cpu="vmSettings.cpu"
+            :memory="vmSettings.memory"
+            :video-card="vmSettings.videoCard"
+            :usb-controller="vmSettings.usbController"
+            :pci-devices="vmSettings.pciDevices"
             :selected-nav-item="props.selectedNavItem"
+            :hard-disks-for-edit="vmSettings.hardDisks"
+            :options="vmSettings.options"
             :nodes="props.nodes"
             :files="props.files"
             :networks-table="props.networksTable"
@@ -53,6 +63,8 @@
             @show-datastore-child="emits('show-datastore-child', $event)"
             @get-networks-table="emits('get-networks-table', $event)"
             @get-pci-devices="emits('get-pci-devices')"
+            @change-boot-order="emits('change-boot-order', $event)"
+            @send-data="emits('change-customize-hardware', $event)"
           />
         </div>
       </template>
@@ -72,6 +84,12 @@ import type {
   UI_I_VmSettings,
 } from '~/lib/models/store/vm/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
 import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
 import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
@@ -79,9 +97,11 @@ import type {
   UI_I_DatastoreTableItem,
   UI_I_FolderOrFileTreePayload,
 } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
 import { modalTexts } from '~/components/common/vm/actions/editSettings/lib/config/modal'
 
+const vmName = defineModel<string>('vmName', { required: true })
+
 const vmSettings = defineModel<UI_I_VmSettings | null>('vmSettings', {
   required: true,
 })
@@ -97,9 +117,10 @@ const props = withDefaults(
     networksTable: UI_I_NetworkTableItem[]
     selectedNavItem: UI_T_SelectedNavItem
     vmCpuHelpTextSecond: string
-    errorValidationFields: UI_I_ErrorValidationField[]
-    maxMemory: number
-    cpuModels: UI_I_OptionItem[]
+    errorValidationFields: UI_I_ErrorValidationField<string>[]
+    virtualHardwareNetworks: UI_I_SendDataNewNetwork[] | null
+    virtualHardwareHardDisks: UI_I_SendDataNewHardDisk[] | null
+    virtualHardwareCdDvdDrives: UI_I_SendDataNewCdDvdDrive[] | null
     state?: string | number
     vmNameOld?: string
     passthroughDevices?: UI_I_PciDevice[]
@@ -122,12 +143,18 @@ const props = withDefaults(
 const emits = defineEmits<{
   (event: 'hide'): void
   (event: 'validate'): void
+  (event: 'update-vm'): void
   (event: 'get-storage', value: UI_I_TablePayload): void
   (event: 'get-pci-devices'): void
+  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
   (event: 'get-networks-table', value: UI_I_TablePayload): void
   (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
   (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
   (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (
+    event: 'change-customize-hardware',
+    value: UI_I_SendDataCustomizeHardware
+  ): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

package/components/common/vm/actions/editSettings/new/Skeleton.vue

@@ -1,88 +1,88 @@
-<template>
-  <div class="skeleton-wrap">
-    <div class="tabs">
-      <ui-skeleton-item width="64px" height="16px" />
-      <ui-skeleton-item width="64px" height="16px" />
-    </div>
-    <div class="actions">
-      <ui-skeleton-item width="80px" height="16px" />
-      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
-    </div>
-    <div class="stack-block-wrap">
-      <div class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 2" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
-          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-
-      <div v-for="item in 5" :key="item" class="stack-block">
-        <div class="stack-label flex-1">
-          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
-          <ui-skeleton-item height="16px" />
-        </div>
-        <div class="stack-value flex-1">
-          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  padding: 0 32px;
-
-  .tabs {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-    padding: 8px 0 12px;
-    border-bottom: 1px solid var(--divider-color);
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: 12px 0;
-  }
-
-  .stack-block-wrap {
-    display: grid;
-    grid-gap: 12px;
-
-    .stack-block {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 8px 12px;
-      background: var(--stack-block-bg-color);
-      border-radius: 6px;
-
-      .stack-label,
-      .stack-value {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <div class="tabs">
+      <ui-skeleton-item width="64px" height="16px" />
+      <ui-skeleton-item width="64px" height="16px" />
+    </div>
+    <div class="actions">
+      <ui-skeleton-item width="80px" height="16px" />
+      <ui-skeleton-item width="152px" height="32px" border-radius="6px" />
+    </div>
+    <div class="stack-block-wrap">
+      <div class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 2" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="102px" height="32px" border-radius="8px" />
+          <ui-skeleton-item width="80px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+
+      <div v-for="item in 5" :key="item" class="stack-block">
+        <div class="stack-label flex-1">
+          <ui-skeleton-item width="16px" height="16px" border-radius="50%" />
+          <ui-skeleton-item height="16px" />
+        </div>
+        <div class="stack-value flex-1">
+          <ui-skeleton-item width="196px" height="32px" border-radius="8px" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  padding: 0 32px;
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    padding: 8px 0 12px;
+    border-bottom: 1px solid var(--divider-color);
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 12px 0;
+  }
+
+  .stack-block-wrap {
+    display: grid;
+    grid-gap: 12px;
+
+    .stack-block {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 12px;
+      background: var(--stack-block-bg-color);
+      border-radius: 6px;
+
+      .stack-label,
+      .stack-value {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+}
+</style>