36 lines
1.3 KiB
Vue
36 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { NTooltip } from 'naive-ui'
|
|
|
|
/** hint：静态说明，label 后问号图标悬浮显示；error：校验 / 阻塞提示，控件下方红字；
|
|
* feedback：中性状态反馈（如「已读取文件」），控件下方灰字，error 存在时让位。 */
|
|
defineProps<{
|
|
label: string
|
|
hint?: string
|
|
required?: boolean
|
|
error?: string
|
|
feedback?: string
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-3.5">
|
|
<div class="mb-1.5 flex items-center gap-[5px] text-[12.5px] font-medium text-ink-2">
|
|
<span>{{ label }}<span v-if="required" class="ml-0.5 text-err">*</span></span>
|
|
<NTooltip v-if="hint" trigger="hover" placement="top" :style="{ maxWidth: '320px' }">
|
|
<template #trigger>
|
|
<span
|
|
class="flex h-[15px] w-[15px] flex-none cursor-help items-center justify-center rounded-full border border-ink-3/70 text-[10.5px] font-semibold text-ink-3 hover:border-accent hover:text-accent"
|
|
aria-label="字段说明"
|
|
>
|
|
?
|
|
</span>
|
|
</template>
|
|
<span class="text-xs leading-relaxed">{{ hint }}</span>
|
|
</NTooltip>
|
|
</div>
|
|
<slot />
|
|
<div v-if="error" class="mt-1 text-xs leading-relaxed text-err">{{ error }}</div>
|
|
<div v-else-if="feedback" class="mt-1 text-xs leading-relaxed text-ink-3">{{ feedback }}</div>
|
|
</div>
|
|
</template>
|