xiaoshu-app/src/app/admin/pages/admin-dashboard.component.html

<header class="page-header">
  <div><p>ADMIN OVERVIEW</p><h1>管理概览</h1><span>查看核心业务数据与迁移运行状态</span></div>
  <button type="button" (click)="load()" [disabled]="loading()"><lucide-icon [img]="icons.RefreshCw" [size]="17" [class.spin]="loading()" />刷新数据</button>
</header>

@if (loading() && !data()) {
  <div class="state"><lucide-icon class="spin" [img]="icons.LoaderCircle" [size]="28" />正在通过云函数汇总数据…</div>
} @else if (error()) {
  <div class="state error"><strong>暂时无法载入概览</strong><span>{{ error() }}</span><button type="button" (click)="load()">重新加载</button></div>
} @else {
  @if (data(); as dashboard) {
  <section class="welcome">
    <div><span>欢迎回来</span><h2>{{ dashboard.identity.displayName || dashboard.identity.username }}</h2><p>当前数据范围：{{ dashboard.identity.company ? '所属帐套' : (dashboard.identity.isSuperAdmin ? '全部帐套' : '未分配帐套') }}</p></div>
    <div class="migration-progress"><span>规范化迁移登记</span><strong>{{ dashboard.migration.registeredRecords | number }}</strong><small>SQL Server 来源记录</small></div>
  </section>

  <section class="metric-grid">
    @for (metric of dashboard.metrics; track metric.className) {
      <a [routerLink]="metric.route" class="metric-card">
        <span>{{ metric.label }}</span><strong>{{ metric.count | number }}</strong><small>{{ metric.className }}</small><lucide-icon [img]="icons.ArrowRight" [size]="18" />
      </a>
    }
  </section>

  <section class="status-grid">
    <article>
      <div class="status-icon blue"><lucide-icon [img]="icons.Database" [size]="22" /></div>
      <div><span>来源对象</span><strong>{{ dashboard.migration.sourceObjects }}</strong><small>表、视图与函数审计登记</small></div>
    </article>
    <article>
      <div class="status-icon green"><lucide-icon [img]="icons.TableProperties" [size]="22" /></div>
      <div><span>已迁移业务类</span><strong>{{ dashboard.migration.migratedClasses }}</strong><small>Parse 规范化类</small></div>
    </article>
    <article>
      <div class="status-icon amber"><lucide-icon [img]="icons.FunctionSquare" [size]="22" /></div>
      <div><span>已部署云函数</span><strong>{{ dashboard.migration.cloudFunctions }}</strong><small>Function 表有效记录</small></div>
    </article>
  </section>
  }
}