continew-admin/continew-admin-ui/src/views/demo/profile/basic/components/profile-item.vue

<template>
  <div class="item-container">
    <a-space :size="16" direction="vertical" fill>
      <a-descriptions
        v-for="(item, idx) in blockDataList"
        :key="idx"
        :label-style="{
          textAlign: 'right',
          width: '200px',
          paddingRight: '10px',
          color: 'rgb(var(--gray-8))',
        }"
        :value-style="{ width: '400px' }"
        :title="item.title"
        :data="item.data"
      >
        <template #value="{ value }">
          <a-skeleton v-if="loading" :animation="true">
            <a-skeleton-line :widths="['200px']" :rows="1" />
          </a-skeleton>
          <span v-else>{{ value }}</span>
        </template>
      </a-descriptions>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import { computed, PropType } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { ProfileBasicRes } from '@/api/demo/profile';

  type BlockList = {
    title: string;
    data: {
      label: string;
      value: string;
    }[];
  }[];

  const props = defineProps({
    type: {
      type: String,
      default: '',
    },
    renderData: {
      type: Object as PropType<ProfileBasicRes>,
      required: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  });
  const { t } = useI18n();
  const blockDataList = computed<BlockList>(() => {
    const { renderData } = props;
    const result = [];
    result.push({
      title:
        props.type === 'pre'
          ? t('basicProfile.title.preVideo')
          : t('basicProfile.title.video'),
      data: [
        {
          label: t('basicProfile.label.video.mode'),
          value: renderData?.video?.mode || '-',
        },
        {
          label: t('basicProfile.label.video.acquisition.resolution'),
          value: renderData?.video?.acquisition.resolution || '-',
        },
        {
          label: t('basicProfile.label.video.acquisition.frameRate'),
          value: `${renderData?.video?.acquisition.frameRate || '-'} fps`,
        },
        {
          label: t('basicProfile.label.video.encoding.resolution'),
          value: renderData?.video?.encoding.resolution || '-',
        },
        {
          label: t('basicProfile.label.video.encoding.rate.min'),
          value: `${renderData?.video?.encoding.rate.min || '-'} bps`,
        },
        {
          label: t('basicProfile.label.video.encoding.rate.max'),
          value: `${renderData?.video?.encoding.rate.max || '-'} bps`,
        },
        {
          label: t('basicProfile.label.video.encoding.rate.default'),
          value: `${renderData?.video?.encoding.rate.default || '-'} bps`,
        },
        {
          label: t('basicProfile.label.video.encoding.frameRate'),
          value: `${renderData?.video?.encoding.frameRate || '-'} fpx`,
        },
        {
          label: t('basicProfile.label.video.encoding.profile'),
          value: renderData?.video?.encoding.profile || '-',
        },
      ],
    });

    result.push({
      title:
        props.type === 'pre'
          ? t('basicProfile.title.preAudio')
          : t('basicProfile.title.audio'),
      data: [
        {
          label: t('basicProfile.label.audio.mode'),
          value: renderData?.audio?.mode || '-',
        },
        {
          label: t('basicProfile.label.audio.acquisition.channels'),
          value: `${renderData?.audio?.acquisition.channels || '-'} ${t(
            'basicProfile.unit.audio.channels'
          )}`,
        },
        {
          label: t('basicProfile.label.audio.encoding.channels'),
          value: `${renderData?.audio?.encoding.channels || '-'} ${t(
            'basicProfile.unit.audio.channels'
          )}`,
        },
        {
          label: t('basicProfile.label.audio.encoding.rate'),
          value: `${renderData?.audio?.encoding.rate || '-'} kbps`,
        },
        {
          label: t('basicProfile.label.audio.encoding.profile'),
          value: renderData?.audio?.encoding.profile || '-',
        },
      ],
    });

    return result;
  });
</script>

<style scoped lang="less">
  .item-container {
    padding-top: 20px;
    :deep(.arco-descriptions-item-label) {
      font-weight: normal;
    }
  }
</style>