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

<script setup lang="ts">
withDefaults(defineProps<{ title: string; description?: string; tone?: "default" | "inset"; bodyPadding?: boolean }>(), {
  description: "",
  tone: "default",
  bodyPadding: true
});
</script>

<template>
  <section class="console-section-frame" :data-tone="tone">
    <header class="console-section-header">
      <div class="console-section-heading">
        <h2>{{ title }}</h2>
        <p v-if="description">{{ description }}</p>
      </div>
      <div v-if="$slots.actions" class="page-command-actions"><slot name="actions" /></div>
    </header>
    <div class="console-section-body" :style="bodyPadding ? undefined : { padding: '0' }">
      <slot />
    </div>
  </section>
</template>
