video-workflow/src/app/pages/templates/templates.component.html

<section class="templates-page">
  <header class="templates-header">
    <div>
      <span class="templates-eyebrow">效率资产</span>
      <h1>模板库</h1>
      <p>保存常用生成配置，后续用于批量生产、资产追溯和作品复盘。</p>
    </div>
    <button class="btn" type="button" (click)="refresh()">刷新</button>
  </header>

  <div class="templates-message" *ngIf="message()">{{ message() }}</div>

  <div class="templates-stats">
    <button class="template-stat" type="button" [class.is-active]="scopeFilter() === 'all'" (click)="setScopeFilter('all')">
      <span>全部模板</span>
      <strong>{{ stats().all }}</strong>
    </button>
    <button class="template-stat" type="button" [class.is-active]="scopeFilter() === 'system'" (click)="setScopeFilter('system')">
      <span>系统模板</span>
      <strong>{{ stats().system }}</strong>
    </button>
    <button class="template-stat" type="button" [class.is-active]="scopeFilter() === 'user'" (click)="setScopeFilter('user')">
      <span>我的模板</span>
      <strong>{{ stats().user }}</strong>
    </button>
    <button class="template-stat" type="button" [class.is-active]="pipelineFilter() === 'topic-to-video'" (click)="pipelineFilter.set('topic-to-video')">
      <span>主题生视频</span>
      <strong>{{ stats().topic }}</strong>
    </button>
  </div>

  <div class="templates-toolbar">
    <div class="template-search">
      <span class="icon">search</span>
      <input
        type="text"
        placeholder="搜索模板名称、分类、标签"
        [ngModel]="searchTerm()"
        (ngModelChange)="searchTerm.set($event)">
    </div>

    <select [ngModel]="scopeFilter()" (ngModelChange)="scopeFilter.set($event)">
      <option value="all">全部来源</option>
      <option value="system">系统模板</option>
      <option value="user">我的模板</option>
    </select>

    <select [ngModel]="pipelineFilter()" (ngModelChange)="pipelineFilter.set($event)">
      <option value="all">全部 Pipeline</option>
      <option *ngFor="let pipeline of pipelines" [value]="pipeline.route">{{ pipeline.displayName }}</option>
    </select>

    <select [ngModel]="categoryFilter()" (ngModelChange)="categoryFilter.set($event)">
      <option value="all">全部分类</option>
      <option *ngFor="let category of categories" [value]="category">{{ category }}</option>
    </select>
  </div>

  <div class="templates-list" *ngIf="filteredTemplates().length > 0; else emptyState">
    <article class="template-card" *ngFor="let template of filteredTemplates(); trackBy: trackByTemplate">
      <div class="template-card-main">
        <div class="template-card-head">
          <div>
            <span class="template-source">{{ scopeLabel(template.scope) }}</span>
            <h3>{{ template.name }}</h3>
          </div>
          <span class="template-status">{{ pipelineLabel(template.pipelineId) }}</span>
        </div>

        <p class="template-desc">{{ template.description || '未填写模板说明' }}</p>

        <div class="template-edit-form" *ngIf="editingId() === template.id">
          <label>
            名称
            <input type="text" [ngModel]="editDraft().name" (ngModelChange)="updateEditDraft({ name: $event })">
          </label>
          <label>
            说明
            <textarea rows="3" [ngModel]="editDraft().description" (ngModelChange)="updateEditDraft({ description: $event })"></textarea>
          </label>
          <label>
            分类
            <select [ngModel]="editDraft().category" (ngModelChange)="updateEditDraft({ category: $event })">
              <option *ngFor="let category of categories" [value]="category">{{ category }}</option>
            </select>
          </label>
          <label>
            标签
            <input type="text" placeholder="用逗号分隔" [ngModel]="editDraft().tagsText" (ngModelChange)="updateEditDraft({ tagsText: $event })">
          </label>
          <div class="template-edit-actions">
            <button class="btn btn-primary" type="button" (click)="saveEdit(template)">保存修改</button>
            <button class="btn" type="button" (click)="cancelEdit()">取消</button>
          </div>
        </div>

        <div class="template-config">
          <strong>配置摘要</strong>
          <pre>{{ template.config | json }}</pre>
        </div>

        <div class="template-tags">
          <span class="template-tag">{{ template.category }}</span>
          <span class="template-tag" *ngFor="let tag of template.tags">{{ tag }}</span>
        </div>

        <div class="template-meta">
          <span>使用 {{ template.usageCount || 0 }} 次</span>
          <span>更新 {{ formatTime(template.updatedAt) }}</span>
        </div>
      </div>

      <div class="template-actions">
        <button class="btn btn-primary" type="button" (click)="markUsed(template)">使用模板</button>
        <button class="btn" type="button" (click)="cloneTemplate(template)">复制到我的模板</button>
        <button class="btn" type="button" (click)="startEdit(template)" [disabled]="template.scope !== 'user'">编辑</button>
        <button class="btn btn-warn" type="button" (click)="deleteTemplate(template)" [disabled]="template.scope !== 'user'">删除</button>
      </div>
    </article>
  </div>

  <ng-template #emptyState>
    <div class="templates-empty">
      <h3>还没有匹配的模板</h3>
      <p>可以调整筛选条件，或先从系统模板复制一份作为你的常用模板。</p>
    </div>
  </ng-template>
</section>