ng-configure/src/app/pages/tenant-list/tenant-list.component.html

<div class="h-full flex flex-col p-4 min-w-0">
   <app-sticky-header
    [title]="'租户管理'"
    [buttonText]="'新增租户'"
    [buttonIcon]="'add'"
    [buttonColor]="'primary'"
    [autoDetect]="true"
    [scrollContainer]="'.content-area'"
     [scrollThreshold]="20"
    [compactThreshold]="80"
    [widthTarget]="'#tenantMatCard'"
    (buttonClick)="openAddDialog()">
  </app-sticky-header>

   <mat-card id="tenantMatCard" class="h-[400px]">
     <mat-card-content class="overflow-auto">
      <table mat-table [dataSource]="tenants" class="w-full">
        <!-- ID列 -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef>ID</th>
          <td mat-cell *matCellDef="let tenant">{{ tenant.id }}</td>
        </ng-container>

        <!-- 租户名称列 -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>租户名称</th>
          <td mat-cell *matCellDef="let tenant">{{ tenant.name }}</td>
        </ng-container>

        <!-- 描述列 -->
        <ng-container matColumnDef="description">
          <th mat-header-cell *matHeaderCellDef>描述</th>
          <td mat-cell *matCellDef="let tenant">{{ tenant.description || '-' }}</td>
        </ng-container>

        <!-- 创建时间列 -->
        <ng-container matColumnDef="created_at">
          <th mat-header-cell *matHeaderCellDef>创建时间</th>
          <td mat-cell *matCellDef="let tenant">{{ tenant.created_at | date:'yyyy-MM-dd HH:mm' }}</td>
        </ng-container>

        <!-- 更新时间列 -->
        <ng-container matColumnDef="updated_at">
          <th mat-header-cell *matHeaderCellDef>更新时间</th>
          <td mat-cell *matCellDef="let tenant">{{ tenant.updated_at | date:'yyyy-MM-dd HH:mm' }}</td>
        </ng-container>

        <!-- 操作列 -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>操作</th>
          <td mat-cell *matCellDef="let tenant">
            <button mat-icon-button color="primary" (click)="openEditDialog(tenant)">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button color="warn" (click)="deleteTenant(tenant.id)">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>

      <div *ngIf="loading" class="text-center py-4">
        <mat-progress-spinner [diameter]="40" mode="indeterminate" class="mx-auto"></mat-progress-spinner>
      </div>

      <div *ngIf="!loading && tenants.length === 0" class="text-center py-8 text-gray-500">
        暂无租户数据
      </div>
    </mat-card-content>
  </mat-card>

  <!-- 新增/编辑对话框 -->
  <div *ngIf="showDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
      <div class="px-6 py-4 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-800">{{ editMode ? '编辑租户' : '新增租户' }}</h2>
      </div>
      
      <form (ngSubmit)="saveTenant()" class="p-6">
        <!-- 租户名称 -->
        <mat-form-field class="w-full mb-4">
          <mat-label>租户名称</mat-label>
          <input matInput id="name" [(ngModel)]="tenantForm.name" name="name" required>
        </mat-form-field>

        <!-- 描述 -->
        <mat-form-field class="w-full mb-6">
          <mat-label>描述</mat-label>
          <textarea matInput id="description" [(ngModel)]="tenantForm.description" name="description" rows="3"></textarea>
        </mat-form-field>

        <div class="flex justify-end gap-2">
          <button mat-button type="button" (click)="showDialog = false">取消</button>
          <button mat-raised-button color="primary" type="submit">
            {{ editMode ? '更新' : '创建' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</div>