RunForge-Frontend/src/components/skeleton/StoreStackSkeleton.vue

<template>
  <div class="store-stack-skeleton">
    <div v-for="n in count" :key="n" class="store-stack-skeleton__item">
      <a-skeleton-shape size="small" />
      <div class="store-stack-skeleton__content">
        <a-skeleton-line :widths="headerWidths" :rows="1" />
        <a-skeleton-line :widths="['100%', '70%']" :rows="2" />
        <a-skeleton-line v-if="showMeta" :widths="['28%', '32%', '24%']" :rows="1" />
      </div>
      <a-skeleton-line v-if="showAction" :widths="['72px']" :rows="1" class="store-stack-skeleton__action" />
    </div>
  </div>
</template>

<script setup>
defineProps({
  count: { type: Number, default: 4 },
  showMeta: { type: Boolean, default: true },
  showAction: { type: Boolean, default: true },
  headerWidths: {
    type: Array,
    default: () => ['35%', '55%']
  }
})
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.store-stack-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  &__item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: @store-card-bg;
    border: 1px solid @store-card-border;
    border-radius: @store-radius;
  }

  &__content {
    flex: 1 1 200px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__action {
    flex-shrink: 0;
    align-self: center;
  }
}
</style>