35 lines
1.3 KiB
Vue
35 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
/** 日志详情弹窗的摘要头(放 NModal #header):kind 小标签 + 标题(旁徽章 slot)
|
|
* + mono 副行 + chips 行;三个日志详情共用同构头部。 */
|
|
export interface HeroChip {
|
|
label: string
|
|
value: string
|
|
mono?: boolean
|
|
}
|
|
|
|
defineProps<{ kind: string; title: string; sub?: string; chips?: HeroChip[]; titleMono?: boolean }>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-w-0 pb-1">
|
|
<div class="text-[11px] font-semibold tracking-[0.08em] text-ink-3 uppercase">{{ kind }}</div>
|
|
<div class="mt-1 flex flex-wrap items-center gap-2 text-base leading-6 font-semibold">
|
|
<span class="break-all" :class="titleMono ? 'mono' : ''">{{ title }}</span>
|
|
<slot />
|
|
</div>
|
|
<div v-if="sub" class="mono mt-1 text-[11.5px] font-normal break-all text-ink-3">
|
|
{{ sub }}
|
|
</div>
|
|
<div v-if="chips?.length" class="mt-2.5 flex flex-wrap gap-1.5">
|
|
<span
|
|
v-for="c in chips"
|
|
:key="c.label"
|
|
class="inline-flex items-center gap-1.5 rounded-full border border-line bg-white px-2.5 py-[3px] text-[11.5px] font-normal text-ink-2"
|
|
>
|
|
<span class="text-ink-3">{{ c.label }}</span>
|
|
<span :class="c.mono ? 'mono' : ''">{{ c.value }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|