fix(theme): strengthen popover header separation

Promote structured popover headers from the tertiary fill to the secondary fill so they remain visually distinct from striped and hovered table rows in both light and dark themes.

Keep the health timeline arrow matched to its header surface when the popover placement flips.

Validated across all preset light and dark palettes, frontend lint, typecheck and production build.

Co-authored-by: Codex <noreply@openai.com>
This commit is contained in:
Zyy
2026-09-06 14:14:53 +08:00
co-authored by Codex
parent a704fbc3f3
commit 4441b577c3
4 changed files with 4 additions and 4 deletions
@@ -104,7 +104,7 @@ function quotaWindowCode(windowSeconds: number | null, role: AccountQuotaWindow[
</template>
<section class="w-84 overflow-hidden rounded-cp-lg" role="dialog" :aria-label="`${detailTitle}详情`">
<header v-if="detailHeading" class="bg-cp-fill-tertiary px-3 py-2.5">
<header v-if="detailHeading" class="bg-cp-fill-secondary px-3 py-2.5">
<h3 class="m-0 truncate text-cp leading-5 font-heavy text-cp-text" :title="detailHeading">
{{ detailHeading }}
</h3>
@@ -68,7 +68,7 @@ const presentation = computed(() =>
</template>
<section class="w-88 overflow-hidden rounded-cp-lg">
<header class="flex items-start gap-3 bg-cp-fill-tertiary px-4 py-3">
<header class="flex items-start gap-3 bg-cp-fill-secondary px-4 py-3">
<span
class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp"
:class="presentation.statusStyle.icon"
@@ -62,7 +62,7 @@ const metricItems = outcomeMeta
:aria-label="`${point.time} 请求健康详情`"
class="overflow-hidden rounded-cp-lg bg-cp-bg-elevated"
>
<header class="flex items-center justify-between gap-3 bg-cp-fill-tertiary px-3.5 py-3">
<header class="flex items-center justify-between gap-3 bg-cp-fill-secondary px-3.5 py-3">
<div class="flex min-w-0 items-center gap-2">
<span class="size-2 shrink-0 rounded-full" :class="status.cellClass" />
<strong class="font-mono text-cp leading-none font-heavy text-cp-text">
@@ -14,7 +14,7 @@ const props = defineProps<{
}>()
const healthPopoverArrowSurfaceClasses = {
top: 'bg-cp-fill-tertiary',
top: 'bg-cp-fill-secondary',
bottom: 'bg-cp-bg-elevated',
}