1

2026-09-24 16:25:22 +08:00
commit 7428184f01
1198 changed files with 314515 additions and 0 deletions
@@ -0,0 +1,96 @@
+<template>
+	<view class="hr-empty">
+		<view class="hr-empty-ic">
+			<x-icon :name="iconName" color="#9CA3AF" font-size="52rpx"></x-icon>
+		</view>
+		<text class="hr-empty-b">{{ title }}</text>
+		<text v-if="sub != ''" class="hr-empty-s">{{ sub }}</text>
+		<view v-if="action != ''" class="hr-empty-btn" @click="onAction">
+			<text class="hr-empty-btn-t">{{ action }}</text>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="uts" setup>
+	import { computed } from 'vue'
+	import { toRemixIcon } from '@/utils/icon.uts'
+
+	/**
+	 * 空状态 / 异常态
+	 * icon 支持字符图标（设计稿沿用）或 RemixIcon 名，统一由 xIcon 渲染
+	 */
+	const props = defineProps({
+		icon : { type: String, default: 'file-list-3-line' },
+		title : { type: String, default: '暂无数据' },
+		sub : { type: String, default: '' },
+		/** 操作按钮文案，为空则不显示 */
+		action : { type: String, default: '' }
+	})
+
+	const emits = defineEmits<{
+		(e : 'action') : void
+	}>()
+
+	const iconName = computed(() : string => {
+		return toRemixIcon(props.icon)
+	})
+
+	function onAction() : void {
+		emits('action')
+	}
+</script>
+
+<style>
+	.hr-empty {
+		padding: 88rpx 40rpx 88rpx 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.hr-empty-ic {
+		width: 112rpx;
+		height: 112rpx;
+		border-radius: 36rpx;
+		background-color: #F3F4F6;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 16rpx;
+	}
+
+	.hr-empty-b {
+		font-size: 31.4rpx;
+		font-weight: bold;
+		color: #6B7280;
+	}
+
+	.hr-empty-s {
+		font-size: 25.8rpx;
+		color: #9CA3AF;
+		margin-top: 10rpx;
+		text-align: center;
+		lines: 2;
+	}
+
+	.hr-empty-btn {
+		margin-top: 24rpx;
+		height: 72rpx;
+		padding-left: 36rpx;
+		padding-right: 36rpx;
+		border-radius: 20rpx;
+		background-color: #EFF6FF;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.hr-empty-btn-t {
+		font-size: 29.2rpx;
+		font-weight: bold;
+		color: #2563EB;
+	}
+</style>