a

2026-07-03 16:58:28 +08:00
commit 32b43f85bd
6240 changed files with 1987678 additions and 0 deletions
@@ -0,0 +1,138 @@
+<template>
+  <view class="empty-container">
+    <view class="empty-icon">
+      <image 
+        v-if="icon" 
+        :src="icon" 
+        mode="aspectFit" 
+        class="icon-image"
+      />
+      <text v-else class="icon-text">{{ defaultIcon }}</text>
+    </view>
+    <text class="empty-title">{{ title }}</text>
+    <text class="empty-description" v-if="description">{{ description }}</text>
+    <view class="empty-action" v-if="showAction">
+      <button 
+        class="action-button" 
+        @click="handleAction"
+        :type="actionType"
+        size="mini"
+      >
+        {{ actionText }}
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'EmptyState',
+  props: {
+    // 图标（图片路径或文字）
+    icon: {
+      type: String,
+      default: ''
+    },
+    // 标题
+    title: {
+      type: String,
+      default: '暂无数据'
+    },
+    // 描述
+    description: {
+      type: String,
+      default: ''
+    },
+    // 是否显示操作按钮
+    showAction: {
+      type: Boolean,
+      default: false
+    },
+    // 操作按钮文本
+    actionText: {
+      type: String,
+      default: '刷新'
+    },
+    // 操作按钮类型
+    actionType: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  data() {
+    return {
+      defaultIcon: '📭'
+    }
+  },
+  methods: {
+    handleAction() {
+      this.$emit('action')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 40rpx;
+  text-align: center;
+}
+
+.empty-icon {
+  margin-bottom: 40rpx;
+  font-size: 120rpx;
+  color: #ccc;
+}
+
+.icon-image {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.icon-text {
+  font-size: 120rpx;
+  line-height: 1;
+}
+
+.empty-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.empty-description {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 40rpx;
+  max-width: 500rpx;
+}
+
+.empty-action {
+  margin-top: 20rpx;
+}
+
+.action-button {
+  min-width: 200rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  border-radius: 35rpx;
+  font-size: 28rpx;
+}
+
+.action-button[type="primary"] {
+  background-color: #3cc51f;
+  color: #fff;
+}
+
+.action-button[type="default"] {
+  background-color: #f8f8f8;
+  color: #333;
+  border: 1rpx solid #e5e5e5;
+}
+</style>