xiaoshu-app/src/app/admin/pages/admin-resource-catalog.component.html

<header class="page-header"><div><p>DATA DIRECTORY</p><h1>全部数据类</h1><span>只展示管理员云函数白名单内的规范化业务类</span></div><strong>{{ catalog()?.total ?? '—' }} 类</strong></header>

<label class="search-box"><lucide-icon [img]="icons.Search" [size]="18" /><input [ngModel]="query()" (ngModelChange)="query.set($event)" placeholder="搜索中文名称或 Parse Class" /></label>

@if (loading()) {
  <div class="state"><lucide-icon class="spin" [img]="icons.LoaderCircle" [size]="25" />正在通过云函数读取目录…</div>
} @else if (error()) {
  <div class="state error"><strong>目录加载失败</strong><span>{{ error() }}</span><button type="button" (click)="load()">重新加载</button></div>
} @else {
  <section class="resource-grid">
    @for (item of resources(); track item.className) {
      <a [routerLink]="item.route">
        <div class="resource-icon"><lucide-icon [img]="icons.Database" [size]="20" /></div>
        <div><strong>{{ item.label }}</strong><code>{{ item.className }}</code></div>
        <span [class.readonly]="!item.writable">{{ item.writable ? '可管理' : '只读' }}</span>
        <lucide-icon class="arrow" [img]="icons.ArrowRight" [size]="18" />
      </a>
    } @empty {
      <div class="state">没有匹配的数据类</div>
    }
  </section>
}