<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>
