support multiple accounts things

src/app/app.component.html

@@ -77,7 +77,7 @@
       </table>
     </div>
   </div>
-  <div class="row grid" *ngIf="whitelistResult?.length">
+  <div class="row grid" *ngIf="whitelistDisplayResult?.length">
     <br>
     <div class="col-lg-12">
       <table class="table table-striped">
@@ -92,17 +92,23 @@
         </tr>
         </thead>
         <tbody>
-        <tr *ngFor="let item of whitelistResult">
-          <td>{{item.name || ''}}</td>
-          <td>{{item.account || ''}}</td>
+        <tr *ngFor="let row of whitelistDisplayResult">
+          <td>{{row.item.name || ''}}</td>
           <td>
-            <a *ngIf="item.twitter" [href]="getTwitterLink(item.twitter)" target="_blank">
-              {{ truncateMiddle(item.twitter, 15) }}
-            </a>
+            <div *ngFor="let account of row.accounts">
+              {{account}}
+            </div>
           </td>
-          <td>{{item.fee || ''}}</td>
-          <td>{{item.type || ''}}</td>
-          <td>{{item.forbidden || ''}}</td>
+          <td>
+            <div *ngFor="let twitter of row.twitters">
+              <a [href]="getTwitterLink(twitter)" target="_blank">
+                {{ truncateMiddle(twitter, 15) }}
+              </a>
+            </div>
+          </td>
+          <td>{{row.item.fee || ''}}</td>
+          <td>{{row.item.type || ''}}</td>
+          <td>{{row.item.forbidden || ''}}</td>
         </tr>
         </tbody>
       </table>

src/app/app.component.ts

 import { AfterViewInit, Component } from '@angular/core';
 import { ToastService } from './toast.service';
-import { ApiService } from './api/services/api.service';
 import { lastValueFrom } from 'rxjs';
 import * as moment from 'moment';
 import {
   Ad,
   BlacklistAccountResultDto,
   WhitelistAccountResultDto,
+  WhitelistAccountRefResultDto,
 } from './api/models';
+import {
+  AdService,
+  BlacklistAccountService,
+  WhitelistAccountService,
+} from './api/services';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +26,17 @@ export class AppComponent implements AfterViewInit {
   ad: Ad | null = null;
   blacklistResult?: BlacklistAccountResultDto[];
   whitelistResult?: WhitelistAccountResultDto[];
-  constructor(public toast: ToastService, private api: ApiService) {}
+  whitelistDisplayResult?: Array<{
+    item: WhitelistAccountResultDto | WhitelistAccountRefResultDto;
+    accounts: string[];
+    twitters: string[];
+  }>;
+  constructor(
+    public toast: ToastService,
+    private adService: AdService,
+    private blacklistAccountService: BlacklistAccountService,
+    private whitelistAccountService: WhitelistAccountService
+  ) {}
 
   ngAfterViewInit() {
     this.initAd();
@@ -35,7 +50,9 @@ export class AppComponent implements AfterViewInit {
     try {
       const adId = new URLSearchParams(window.location.search).get('ad');
       const { data: ad } = await lastValueFrom(
-        this.api.adControllerGetAd(adId ? { id: parseInt(adId) } : undefined)
+        this.adService.adControllerGetAd(
+          adId ? { id: parseInt(adId) } : undefined
+        )
       );
       if (ad) {
         this.ad = ad;
@@ -55,7 +72,7 @@ export class AppComponent implements AfterViewInit {
 
   async onAdClick() {
     const clickResult = await lastValueFrom(
-      this.api.adControllerClickAd({ id: this.ad!.id! })
+      this.adService.adControllerClickAd({ id: this.ad!.id! })
     );
     if (clickResult?.data) {
       this.openInNewTab(clickResult.data);
@@ -70,14 +87,16 @@ export class AppComponent implements AfterViewInit {
 
   async searchWhitelist(account?: string) {
     this.whitelistResult = undefined;
+    this.whitelistDisplayResult = undefined;
     const { data } = await lastValueFrom(
-      this.api.whitelistAccountControllerFindAll({
+      this.whitelistAccountService.whitelistAccountControllerFindAll({
         recordsPerPage: 5,
         account: account || undefined,
         random: account ? 0 : 1,
       })
     );
     this.whitelistResult = data;
+    this.whitelistDisplayResult = this.buildWhitelistDisplayResult(data);
   }
 
   async checkSearch(allowEmpty = false) {
@@ -102,13 +121,14 @@ export class AppComponent implements AfterViewInit {
   async onBlacklistSearch() {
     this.blacklistResult = undefined;
     this.whitelistResult = undefined;
+    this.whitelistDisplayResult = undefined;
     const search = this.search.trim();
     if (!(await this.checkSearch())) {
       return;
     }
     try {
       const { data } = await lastValueFrom(
-        this.api.blacklistAccountControllerFindAll({
+        this.blacklistAccountService.blacklistAccountControllerFindAll({
           recordsPerPage: 100,
           account: search,
         })
@@ -126,6 +146,7 @@ export class AppComponent implements AfterViewInit {
   async onWhitelistSearch() {
     this.blacklistResult = undefined;
     this.whitelistResult = undefined;
+    this.whitelistDisplayResult = undefined;
     const search = this.search.trim();
     if (!(await this.checkSearch())) {
       return;
@@ -141,6 +162,7 @@ export class AppComponent implements AfterViewInit {
   async onRandomSearch() {
     this.blacklistResult = undefined;
     this.whitelistResult = undefined;
+    this.whitelistDisplayResult = undefined;
 
     try {
       await this.searchWhitelist();
@@ -157,4 +179,40 @@ export class AppComponent implements AfterViewInit {
     const keep = Math.floor((maxLength - 3) / 2); // -3 for '...'
     return text.slice(0, keep) + '...' + text.slice(-keep);
   }
+
+  private buildWhitelistDisplayResult(data?: WhitelistAccountResultDto[]):
+    | Array<{
+        item: WhitelistAccountResultDto | WhitelistAccountRefResultDto;
+        accounts: string[];
+        twitters: string[];
+      }>
+    | undefined {
+    if (!data) {
+      return undefined;
+    }
+    return data.map((entry) => {
+      const item = entry.ref ?? entry;
+      const accounts = this.uniqueNonEmptyStrings([
+        item.account,
+        ...(item.refs?.map((refEntry) => refEntry.account) || []),
+      ]);
+      const twitters = this.uniqueNonEmptyStrings([
+        item.twitter,
+        ...(item.refs?.map((refEntry) => refEntry.twitter) || []),
+      ]).filter((s) => s && !s.includes('无'));
+      return { item, accounts, twitters };
+    });
+  }
+
+  private uniqueNonEmptyStrings(values: Array<string | undefined>): string[] {
+    const seen = new Set<string>();
+    for (const value of values) {
+      const normalized = value?.trim();
+      if (!normalized) {
+        continue;
+      }
+      seen.add(normalized);
+    }
+    return Array.from(seen);
+  }
 }