<!-- SPEC: PJ2026-010405 云端控制台. -->
<!-- Implementation reference: draft-2026-07-13-p0-cloud-console. -->

<script setup lang="ts">
withDefaults(defineProps<{ eyebrow?: string; title: string; description?: string; sticky?: boolean }>(), {
  eyebrow: "",
  description: "",
  sticky: false
});
</script>

<template>
  <header class="page-command-bar" :data-sticky="sticky ? 'true' : 'false'">
    <div class="page-command-copy">
      <slot name="breadcrumbs" />
      <span v-if="eyebrow" class="page-command-eyebrow">{{ eyebrow }}</span>
      <h1 class="page-command-title">{{ title }}</h1>
      <p v-if="description" class="page-command-description">{{ description }}</p>
    </div>
    <div v-if="$slots.actions" class="page-command-actions">
      <slot name="actions" />
    </div>
    <div v-if="$slots.filters" class="page-command-filters">
      <slot name="filters" />
    </div>
  </header>
</template>
