26 lines
1012 B
Vue
26 lines
1012 B
Vue
<script setup lang="ts">
|
|
/** 面板标准头:统一 px-4.5 py-3.5 内距、text-sm 标题、text-xs 弱化描述。
|
|
* 右侧动作放默认插槽——固定在标题行右端,desc 独立成行,窄屏下按钮
|
|
* 不随描述折行漂移(移动端按钮位置统一);标题行内的徽标/计数放
|
|
* #title-extra;富文本描述放 #desc。 */
|
|
defineProps<{ title: string; desc?: string }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="border-b border-line-soft px-4.5 py-3.5">
|
|
<div class="flex min-w-0 items-center justify-between gap-3">
|
|
<div class="flex min-w-0 items-center gap-2 text-sm font-semibold">
|
|
<span class="truncate">{{ title }}</span>
|
|
<slot name="title-extra" />
|
|
</div>
|
|
<div v-if="$slots.default" class="flex flex-none items-center gap-2">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
<div v-if="desc || $slots.desc" class="mt-0.5 text-xs text-ink-3">
|
|
<template v-if="desc">{{ desc }}</template>
|
|
<slot name="desc" />
|
|
</div>
|
|
</div>
|
|
</template>
|