feat: proxy download image

front/src/app/app.component.html

@@ -0,0 +1,97 @@
+<div>
+  <mat-toolbar color="primary">
+    <button mat-icon-button class="favorite-icon" aria-label="icon-button with heart icon">
+      <mat-icon>favorite</mat-icon>
+    </button>
+    <span>NF Repo</span>
+
+    <div style="margin-left:auto;">
+      <button mat-icon-button matTooltip="帮我下载镜像" (click)="downloadImage()">
+        <mat-icon>cloud_download</mat-icon>
+      </button>
+    </div>
+  </mat-toolbar>
+</div>
+<div>
+
+  <mat-form-field class="search-field" appearance="outline" subscriptSizing="dynamic">
+    <mat-label>搜索镜像</mat-label>
+    <input matInput type="text" [formControl]="keyword" (change)="search()">
+    <button matSuffix mat-icon-button matTooltip="搜索" (click)="search()">
+      <mat-icon>search</mat-icon>
+    </button>
+  </mat-form-field>
+
+  <table mat-table [dataSource]="repo_svc.catalog().list" multiTemplateDataRows>
+
+    <ng-container matColumnDef="expand">
+      <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-icon-button aria-label="expand row" (click)="showTags($event, element)">
+          @if (expandedElement === element) {
+            <mat-icon>keyboard_arrow_up</mat-icon>
+          } @else {
+            <mat-icon>keyboard_arrow_down</mat-icon>
+          }
+        </button>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef>ID</th>
+      <td mat-cell *matCellDef="let element"> {{ element.id }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="updated_at">
+      <th mat-header-cell *matHeaderCellDef>更新时间</th>
+      <td mat-cell *matCellDef="let element"> {{ element.updated_at | date:'yy-MM-dd HH:mm:ss' }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="repo">
+      <th mat-header-cell *matHeaderCellDef>镜像</th>
+      <td mat-cell *matCellDef="let element"> {{ element.repo }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="tag">
+      <th mat-header-cell *matHeaderCellDef>标签</th>
+      <td mat-cell *matCellDef="let element"> {{ element.tag }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="size">
+      <th mat-header-cell *matHeaderCellDef>占用</th>
+      <td mat-cell *matCellDef="let element"> {{ element.size | capacity }}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="operation">
+      <th mat-header-cell *matHeaderCellDef>操作</th>
+      <td mat-cell *matCellDef="let element" style="padding-left: 4px !important;">
+        <button mat-icon-button matTooltip="复制镜像地址" (click)="copyImageCommand(element)">
+          <mat-icon>file_copy</mat-icon>
+        </button>
+      </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="expandedDetail">
+      <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+        <div class="repo-element-detail"
+             [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+          @if (element.Tags) {
+            @for (tag of element.Tags.list; track tag) {
+              <mat-chip-option color="primary">{{ tag.tag }}</mat-chip-option>
+            }
+          }
+        </div>
+      </td>
+    </ng-container>
+
+
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+    <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+        class="repo-element-row"
+        [class.repo-expanded-row]="expandedElement === element"
+        (click)="expandedElement = expandedElement === element ? null : element">
+    </tr>
+    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="repo-detail-row"></tr>
+  </table>
+</div>