1

components/hr-tip/hr-tip.uvue

@@ -0,0 +1,59 @@
+<template>
+	<!-- 提示条：内部统一由组件库 xAlert 渲染（thin 浅色模式） -->
+	<x-alert :status="status" :icon="resolvedIcon" :show-close="false" skin="thin" font-size="25.8rpx"
+		:round="alertRound" :padding="alertPadding" :margin="emptyMargin">
+		<text class="hr-tip-tx">{{ text }}</text>
+		<slot></slot>
+	</x-alert>
+</template>
+
+<script lang="uts" setup>
+	import { computed } from 'vue'
+	import { toRemixIcon } from '@/utils/icon.uts'
+
+	/**
+	 * 提示条
+	 * theme：info / warn / err / ok  —— 映射到 xAlert 的 status
+	 */
+	const props = defineProps({
+		theme : { type: String, default: 'info' },
+		icon : { type: String, default: '' },
+		text : { type: String, default: '' }
+	})
+
+	const status = computed(() : string => {
+		if (props.theme == 'warn') { return 'warn' }
+		if (props.theme == 'err') { return 'error' }
+		if (props.theme == 'ok') { return 'success' }
+		return 'info'
+	})
+
+	/** 未传图标时交给 xAlert 按 status 取默认图标 */
+	const resolvedIcon = computed(() : string => {
+		return props.icon == '' ? '' : toRemixIcon(props.icon)
+	})
+
+	/**
+	 * xAlert 的 round / margin / padding 都是「数组」prop，
+	 * 传字符串会在内部 val.map 处抛 `val.map is not a function`，务必用数组。
+	 */
+	const alertRound = computed(() : string[] => {
+		return ['22rpx']
+	})
+
+	/** 两元素约定 = [左右, 上下]（内部按 CSS 上右下左 重排） */
+	const alertPadding = computed(() : string[] => {
+		return ['24rpx', '20rpx']
+	})
+
+	const emptyMargin = computed(() : string[] => {
+		return ['0', '0']
+	})
+</script>
+
+<style>
+	.hr-tip-tx {
+		font-size: 25.8rpx;
+		line-height: 1.55;
+	}
+</style>