提交

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

@@ -0,0 +1,60 @@
+<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>