FranklinWH-Toolbox/src/views/despatch-config/touTemplateTest.vue

<template>
  <div class="main-wrap p-4 flex flex-col gap-y-4">
    <NCard
      ref="mainCardRef"
      class="h-full"
      content-class="h-full flex flex-col"
      :style="cardHeight"
    >
    </NCard>
  </div>
</template>

<script setup lang="ts">
import { NCard } from 'naive-ui'
import { useFullCard } from '@/composable/comp/useFullCard'

const mainCardRef = useTemplateRef<InstanceType<typeof NCard>>('mainCardRef')

const { height } = useFullCard(mainCardRef)

const cardHeight = computed(() => {
  return { height: `${height.value === undefined || height.value === 0 ? 480 : height.value}px` }
})
</script>