ng-devui-materials/user-center/src/user-center.component.html

Materials of DevUI Admin

<div class="da-user-center">
  <da-layout-row [daGutter]="[24, 24]">
    <da-col-item [daSpan]="24" [daXs]="8">
      <div class="da-about-me da-content-card">
        <div class="da-user-info da-floor" *ngIf="user?.name">
          <div class="da-info-top">
            <d-avatar
              [name]="'DevUI'"
              [width]="104"
              [height]="104"
              [imgSrc]="user?.imgSrc"
              [isRound]="false"
            ></d-avatar>
            <div class="da-name">{{ user?.name }}</div>
          </div>
          <div class="da-info-detail">
            <div class="da-detail-floor">
              <i class="icon icon-member"></i>{{ user?.assign }}
            </div>
            <div class="da-detail-floor">
              <i class="icon icon-management"></i>{{ user?.title }}
            </div>
            <div class="da-detail-floor">
              <i class="icon icon-b-tree"></i>{{ user?.group }}
            </div>
            <div class="da-detail-floor">
              <i class="icon icon-homepage"></i>{{ user?.address }}
            </div>
          </div>
        </div>
        <div class="da-floor">
          <div class="da-floor-title">标签</div>
          <d-tags [tags]="user?.tags"> </d-tags>
        </div>
        <div class="da-floor">
          <div class="da-floor-title">团队</div>
          <div class="da-team" *ngFor="let item of workGroups">
            <d-avatar
              [name]="item?.departmentTitle[0]"
              [width]="30"
              [height]="30"
              [imgSrc]="item?.imgSrc"
            ></d-avatar>
            <div class="da-team-title">{{ item?.departmentTitle }}</div>
          </div>
        </div>
      </div>
    </da-col-item>
    <da-col-item [daSpan]="24" [daXs]="16">
      <div class="da-space" dLoading [loading]="spaceBusy" [backdrop]="true">
        <d-tabs
          [type]="'tabs'"
          [(activeTab)]="activeTab"
          (activeTabChange)="activeTabChange($event)"
        >
          <d-tab
            [id]="tab.id"
            [title]="tab.label"
            [tabId]="tab.id"
            *ngFor="let tab of tabs"
          >
            <ng-template dTabContent>
              <ng-template
                *ngIf="tab.id === 'first'"
                [ngTemplateOutlet]="articleTemp"
                [ngTemplateOutletContext]="{ listData: articles }"
              ></ng-template>
              <ng-template
                *ngIf="tab.id === 'second'"
                [ngTemplateOutlet]="projectTemp"
                [ngTemplateOutletContext]="{ listData: projects }"
              ></ng-template>
            </ng-template>
          </d-tab>
        </d-tabs>
      </div>
    </da-col-item>
  </da-layout-row>
</div>

<ng-template #articleTemp let-listData="listData">
  <div class="da-articles" *ngFor="let item of listData">
    <a class="da-title" routerLink="#">{{ item?.title }}</a>
    <div class="da-desc mt-12">{{ item?.desc }}</div>
    <div class="da-sub-row mt-12">
      <d-avatar [name]="item?.author" [width]="26" [height]="26"></d-avatar>
      <a class="da-is-link ml6" [routerLink]="item?.authorUrl">{{
        item?.author
      }}</a>
      <span class="da-gray-text"> 发布在 </span>
      <a class="da-is-link" [routerLink]="item?.articleUrl">{{
        item?.articlePlatform
      }}</a>
    </div>
    <div class="da-actions mt-12">
      <div
        class="da-action"
        (click)="actionHandler('starNum', item)"
        [ngClass]="{ 'is-attached': item.starNumAttached }"
      >
        <i class="icon icon-star-o"></i>
        <div class="gray-text">{{ item?.starNum }}</div>
      </div>
      <div
        class="da-action"
        [ngClass]="{ 'is-attached': item.agreeAttached }"
        (click)="actionHandler('agree', item)"
      >
        <i class="icon icon-like"></i>
        <div class="da-gray-text">{{ item?.agree }}</div>
      </div>

      <div
        class="da-action"
        [ngClass]="{ 'is-attached': item.messageAttached }"
        (click)="actionHandler('message', item)"
      >
        <i class="icon icon-message"></i>
        <div class="da-gray-text">{{ item?.message }}</div>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #projectTemp let-listData="listData">
  <div class="da-projects">
    <d-card class="da-card-container" *ngFor="let item of listData">
      <d-card-header>
        <d-avatar dCardAvatar [name]="item.title[0]"></d-avatar>
        <d-card-title>{{ item.title }}</d-card-title>
      </d-card-header>
      <!-- <img dCardMeta [src]="item.imgSrc" /> -->
      <d-card-content>{{ item.desc }}</d-card-content>
    </d-card>
  </div>
</ng-template>