@if (fixed() && placeholder()) {
  <div class="h-12" aria-hidden="true"></div>
}
<div [class]="classes()">
  <div class="flex w-14 shrink-0 items-center">
    @if (leftArrow()) {
      <button
        type="button"
        class="-ml-1 flex h-10 w-10 items-center justify-center rounded-lg text-ink active:bg-surface-hover"
        (click)="onBack()"
        aria-label="返回"
      >
        <i class="fa-solid fa-chevron-left text-base" aria-hidden="true"></i>
      </button>
    } @else if (leftText()) {
      <span class="text-sm text-primary">{{ leftText() }}</span>
    }
  </div>
  <div class="min-w-0 flex-1 truncate text-center text-[16px] font-medium">{{ title() }}</div>
  <div class="flex w-14 shrink-0 items-center justify-end">
    <ng-content />
  </div>
</div>