shanxia2.0/miniprogram/components/mp-empty/mp-empty.vue

<script setup>
/**
 * 全局空态（方案 B · 插画文件夹）
 * 用法：
 *   <mp-empty title="暂无产品分类" description="可先新增一个顶级分类" action-text="新增分类" @action="goAdd" />
 *   <mp-empty title="暂无线索" />
 *   <mp-empty compact title="暂无跟进" />
 */
defineProps({
  /** 主文案 */
  title: { type: String, default: '暂无数据' },
  /** 辅助说明，可选 */
  description: { type: String, default: '' },
  /** 主按钮文案；空则不展示按钮 */
  actionText: { type: String, default: '' },
  /** 次要按钮文案，可选 */
  secondaryText: { type: String, default: '' },
  /** 详情内嵌等紧凑场景 */
  compact: { type: Boolean, default: false }
})

const emit = defineEmits(['action', 'secondary'])
</script>

<template>
  <view class="mp-empty" :class="{ 'mp-empty--compact': compact }">
    <view class="mp-empty__art" aria-hidden="true">
      <view class="mp-empty__shadow" />
      <view class="mp-empty__folder">
        <view class="mp-empty__folder-tab" />
        <view class="mp-empty__folder-back" />
        <view class="mp-empty__folder-front">
          <view class="mp-empty__lines">
            <view class="mp-empty__line" />
            <view class="mp-empty__line mp-empty__line--mid" />
            <view class="mp-empty__line mp-empty__line--short" />
          </view>
        </view>
      </view>
    </view>
    <text class="mp-empty__title">{{ title }}</text>
    <text v-if="description" class="mp-empty__desc">{{ description }}</text>
    <view v-if="actionText || secondaryText" class="mp-empty__actions">
      <view
        v-if="secondaryText"
        class="mp-btn mp-btn--ghost"
        @click="emit('secondary')"
      >
        {{ secondaryText }}
      </view>
      <view
        v-if="actionText"
        class="mp-btn mp-btn--primary"
        @click="emit('action')"
      >
        {{ actionText }}
      </view>
    </view>
  </view>
</template>