Saas-voc/src/modules/shared/components/global-context-bar/global-context-bar.component.html

<section class="global-context-bar" aria-label="工作台上下文">
  <div class="context-fields">
    <label class="context-field scope-field">
      <span>工作空间</span>
      <select
        aria-label="选择工作空间"
        [disabled]="disabled"
        [value]="context.workspaceId"
        (change)="onSelection('workspaceId', $event)"
      >
        <option value="">请选择</option>
        @if (isMissingOption(workspaceOptions, context.workspaceId)) {
          <option [value]="context.workspaceId">{{ context.workspaceId }}</option>
        }
        @for (option of workspaceOptions; track option.value) {
          <option [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
        }
      </select>
    </label>

    <label class="context-field compact-field">
      <span>平台</span>
      <select
        aria-label="选择平台"
        [disabled]="disabled"
        [value]="context.platform"
        (change)="onSelection('platform', $event)"
      >
        <option value="">请选择</option>
        @if (isMissingOption(platformOptions, context.platform)) {
          <option [value]="context.platform">{{ context.platform }}</option>
        }
        @for (option of platformOptions; track option.value) {
          <option [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
        }
      </select>
    </label>

    <span class="context-divider" aria-hidden="true"></span>

    <label class="context-field">
      <span>店铺</span>
      <select
        aria-label="选择店铺"
        [disabled]="disabled"
        [value]="context.shopId"
        (change)="onSelection('shopId', $event)"
      >
        <option value="">全部店铺</option>
        @if (isMissingOption(shopOptions, context.shopId)) {
          <option [value]="context.shopId">{{ context.shopId }}</option>
        }
        @for (option of shopOptions; track option.value) {
          <option [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
        }
      </select>
    </label>

    <label class="context-field">
      <span>类目</span>
      <select
        aria-label="选择类目"
        [disabled]="disabled"
        [value]="context.categoryId"
        (change)="onSelection('categoryId', $event)"
      >
        <option value="">全部类目</option>
        @if (isMissingOption(categoryOptions, context.categoryId)) {
          <option [value]="context.categoryId">{{ context.categoryId }}</option>
        }
        @for (option of categoryOptions; track option.value) {
          <option [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
        }
      </select>
    </label>

    <label class="context-field product-field">
      <span>商品</span>
      <select
        aria-label="选择商品"
        [disabled]="disabled"
        [value]="context.productId"
        (change)="onSelection('productId', $event)"
      >
        <option value="">全部商品</option>
        @if (isMissingOption(productOptions, context.productId)) {
          <option [value]="context.productId">{{ context.productId }}</option>
        }
        @for (option of productOptions; track option.value) {
          <option [value]="option.value" [disabled]="option.disabled">{{ option.label }}</option>
        }
      </select>
    </label>

    <div class="context-field date-field">
      <span>日期</span>
      @for (renderKey of dateRangeRenderKeys; track renderKey) {
        <app-date-range-picker
          [initialRange]="initialDateRange"
          (rangeConfirm)="onDateRangeConfirm($event)"
        />
      }
    </div>

    <label class="context-field comparison-field">
      <span>对比</span>
      <select
        aria-label="选择对比周期"
        [disabled]="disabled"
        [value]="context.comparisonPeriod"
        (change)="onComparisonChange($event)"
      >
        @for (option of comparisonOptions; track option.value) {
          <option [value]="option.value">{{ option.label }}</option>
        }
      </select>
    </label>
  </div>

  <div class="context-meta">
    <div
      class="availability"
      [attr.data-status]="effectiveStatus || 'unknown'"
      [title]="effectiveStatusDetail || statusLabel"
    >
      @if (effectiveStatus === 'ready') {
        <lucide-icon [img]="icons.check" [size]="15" aria-hidden="true" />
      } @else if (effectiveStatus === 'stale') {
        <lucide-icon [img]="icons.clock" [size]="15" aria-hidden="true" />
      } @else {
        <lucide-icon [img]="icons.alert" [size]="15" aria-hidden="true" />
      }
      <span>{{ statusLabel }}</span>
    </div>

    <span class="last-updated">
      @if (effectiveLastUpdated) {
        更新于 {{ effectiveLastUpdated | date:'yyyy-MM-dd HH:mm' }}
      } @else {
        更新时间未上报
      }
    </span>

    <div class="context-actions">
      <button
        type="button"
        class="icon-command"
        title="清空筛选"
        aria-label="清空筛选"
        [disabled]="disabled || !hasActiveFilters"
        (click)="clearFilters()"
      >
        <lucide-icon [img]="icons.reset" [size]="16" aria-hidden="true" />
      </button>
      <button
        type="button"
        class="refresh-command"
        [class.is-loading]="refreshing"
        [disabled]="disabled || refreshing"
        (click)="requestRefresh()"
      >
        <lucide-icon [img]="icons.refresh" [size]="16" aria-hidden="true" />
        <span>{{ refreshing ? '刷新中' : '刷新' }}</span>
      </button>
    </div>
  </div>
</section>