change protocol display

web/src/app/dashboard/dashboard.component.html

-<h1 class="mat-h1">Dashboard</h1>
+<h1 class='mat-h1'>Dashboard</h1>
 
-<mat-card class="mat-elevation-z8">
+<mat-card class='mat-elevation-z8'>
   <mat-card-header>
     <mat-card-title>
       <span>直接相邻链路</span>
-      <mat-slide-toggle [(ngModel)]="routed">路由后</mat-slide-toggle>
-      <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
+      <mat-slide-toggle [(ngModel)]='routed'>路由后</mat-slide-toggle>
+      <button mat-icon-button class='more-button' [matMenuTriggerFor]='menu' aria-label='Toggle menu'>
         <mat-icon>more_vert</mat-icon>
       </button>
-      <mat-menu #menu="matMenu" xPosition="before">
+      <mat-menu #menu='matMenu' xPosition='before'>
         <button mat-menu-item>Expand</button>
         <button mat-menu-item>Remove</button>
       </mat-menu>
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <table mat-table [dataSource]="links" *ngIf="api.routers" fixedLayout [trackBy]="trackById">
-      <ng-container matColumnDef="name">
+    <table mat-table [dataSource]='links' *ngIf='api.routers' fixedLayout [trackBy]='trackById'>
+      <ng-container matColumnDef='name'>
         <th mat-header-cell *matHeaderCellDef>name</th>
-        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        <td mat-cell *matCellDef='let element'> {{element.name}} </td>
       </ng-container>
-      <ng-container matColumnDef="id">
+      <ng-container matColumnDef='id'>
         <th mat-header-cell *matHeaderCellDef>id</th>
-        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+        <td mat-cell *matCellDef='let element'> {{element.id}} </td>
       </ng-container>
-      <ng-container *ngFor="let router of api.routers">
-        <ng-container [matColumnDef]="router.name">
-          <th mat-header-cell *matHeaderCellDef><span class="id">{{router.id}}</span><span
-            class="head">{{router.name}}</span></th>
-          <td mat-cell *matCellDef="let element"
-              [style.color]="element.peers[router.id]?.color"
-              [style.text-decoration]="element.peers[router.id]?.decoration"
-          > {{element.peers[router.id]?.delay}} </td>
+      <ng-container *ngFor='let router of api.routers'>
+        <ng-container [matColumnDef]='router.name'>
+          <th mat-header-cell *matHeaderCellDef><span class='id'>{{router.id}}</span><span
+            class='head'>{{router.name}}</span></th>
+          <td mat-cell *matCellDef='let element'
+              [style.color]='element.peers[router.id]?.color'
+              [style.text-decoration]='element.peers[router.id]?.decoration'
+          > {{element.peers[router.id]?.delay}}<sup>{{element.peers[router.id]?.protocol}}</sup></td>
         </ng-container>
       </ng-container>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-header-row *matHeaderRowDef='displayedColumns'></tr>
+      <tr mat-row *matRowDef='let row; columns: displayedColumns;'></tr>
     </table>
   </mat-card-content>
 </mat-card>

web/src/app/dashboard/dashboard.component.ts

@@ -55,13 +55,14 @@ export class DashboardComponent implements OnInit {
       const decorations: Record<string, string> = {
         oc: 'underline blue',
         wg: 'underline red',
-        tun: 'underline greed'
+        tun: 'underline green'
       };
 
       return {
         delay: quality.reliability <= 0.01 ? 'x' : quality.delay,
         color: `hsl(${this.mapNumber(quality.reliability, 0.9, 1, 0, 120)}, 100%, 40%)`,
-        decoration: decorations[link.protocol]
+        // decoration: decorations[link.protocol],
+        protocol: link.protocol.slice(0, 1)
       };
     }
   }