<nz-space class="sop">
  <a *nzSpaceItem href="https://haina.yuque.com/docs/share/d12df0ad-3ed7-422d-984f-75d6702aca0c?# 《图片仓库》"
    target="_blank" nz-button nzType="primary" nzSize="small" data-title="图片管理 Tips" data-intro="一些提升效率的小Tips。"
    data-step="99">
    <i nz-icon nzType="yuque" nzTheme="outline"></i>Tips
  </a>
  <button *nzSpaceItem nz-button nzType="primary" (click)="showIntro()" nzSize="small" data-title="图片管理 SOP"
    data-intro="最后：忘了怎么用？点这里再看一次。" data-step="100">
    <i nz-icon nzType="bulb" nzTheme="outline"></i>SOP
  </button>
</nz-space>
<!-- search框 -->
<form [formGroup]="pictureSearchForm" nz-form [nzLayout]="'inline'" class="search-picture" (ngSubmit)="searchPicture()">
  <nz-form-item data-title="图片管理SOP" data-intro="第1步：选择用户，通常使用所有用户即可。" data-step="1">
    <nz-form-label>用户</nz-form-label>
    <nz-form-control>
      <nz-select formControlName="user" [nzLoading]="userLoading" class="select-user">
        <nz-option nzValue="" nzLabel="所有人"></nz-option>
        <nz-option [nzValue]="user" [nzLabel]="user" *ngFor="let user of users"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>关键词</nz-form-label>
    <nz-form-control>
      <nz-input-group nzCompact style="width: 500px;">
        <input nz-input placeholder="例如：熊猫..." formControlName="keywords" [nzAutocomplete]="auto" style="width: 60%;"
          data-title="图片管理SOP" data-intro="第2步：输入关键词，注意不同图源，支持关键词的语种不一样。" data-step="2" />
        <nz-autocomplete [nzDataSource]="tags" [compareWith]="compareTag" nzBackfill #auto></nz-autocomplete>
        <nz-select formControlName="origin" style="width: 40%;" data-title="图片管理SOP"
          data-intro="第3步：选择图源，推荐：国内图片选国际事业部和摄图网，国外图片选Pixabay。" data-step="3">
          <nz-option nzValue="haina-int" nzLabel="图源：国际事业部，推荐"></nz-option>
          <nz-option nzValue="haina-video" nzLabel="图源：多媒体中心，推荐"></nz-option>
          <nz-option nzValue="shetu" nzLabel="图源：摄图网，推荐"></nz-option>
          <nz-option nzValue="pixabay" nzLabel="图源：Pixabay，推荐"></nz-option>
          <nz-option nzValue="unsplash" nzLabel="图源：Unsplash [英文]"></nz-option>
          <nz-option nzValue="pexels" nzLabel="图源：Pexels [英文]"></nz-option>
        </nz-select>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item data-title="图片管理SOP" data-intro="第4步：点击搜索按钮，下方搜索结果，点击图片预览、点击右下角可以编辑图片属性或再次裁剪。" data-step="4">
    <nz-form-control>
      <button nz-button nzType="primary">搜索</button>
    </nz-form-control>
  </nz-form-item>
  <span nz-tooltip nzTooltipTitle="图源：国际、多媒体、摄图、Pixabay支持中英文，其他仅支持英文。" class="img-tips">
    <i nz-icon nzType="question-circle" nzTheme="twotone"></i>
  </span>
</form>
<nz-divider nzDashed [nzText]="text">
  <ng-template #text><i nz-icon nzType="picture" nzTheme="outline"></i></ng-template>
</nz-divider>
<!-- 图片列表 -->
<section class="card-section" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
  (scrolled)="onScroll()">
  <div *ngFor="let item of pics;index as i" class="card-item lazyload"
    [ngStyle]="{'width':item.picture.width*250/item.picture.height+'px', 'flex-grow':item.picture.width*250/item.picture.height}"
    data-expand="-20">
    <i [ngStyle]="{'padding-bottom': item.picture.height/item.picture.width*100 + '%'}" class="zhanwei"></i>
    <img loading="lazy" class="card-img lazyload" [attr.data-src]="item.url" (click)="openPicture(item.picture.path)"
      alt="图片加载失败，如果是多媒体中心，那么只能使用办公室有效；如果不是，则请联系LMR。" (error)="errorPicture($event, item.picture.path)" />
    <div class="card-label">
      <p class="card-label-wh" nz-typography nzEllipsis
        [nzContent]="item.picture.width + ' x ' + item.picture.height + ' 🤣 ' + item.picture.user + ' 🐷 ' + item.picture.keywords.replace(re, ' ')">
      </p>
      <span *ngIf="!item.outside" nz-tooltip nzTooltipTitle="再次编辑">
        <i nz-icon [nzType]="'edit'" [nzTheme]="'fill'" class="card-img-edit edit-mr" (click)="toEditImage(item)"></i>
      </span>
      <span *ngIf="!item.outside" nz-tooltip nzTooltipTitle="查看或获取图片">
        <i nz-icon [nzType]="'instagram'" [nzTheme]="'fill'" class="card-img-edit"
          (click)="showPictureProp(item.picture, i)"></i>
      </span>
      <span *ngIf="item.outside" nz-tooltip nzTooltipTitle="编辑图片">
        <i nz-icon [nzType]="'edit'" [nzTheme]="'fill'" class="card-img-edit" (click)="toEditImage(item)"></i>
      </span>
    </div>
    <div class="card-label-top" *ngIf="(pictureSearchForm.get('origin').value === 'haina-int')"
      (click)="showPictureProp(item.picture, i)">
      <i nz-icon [nzType]="'heart'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#eb2f96'"></i>
      +{{item.picture.likes ? item.picture.likes+1 : 1}}
    </div>
  </div>
</section>
<div *ngIf="loading" class="images-spin">
  <nz-spin nzSimple></nz-spin>
</div>
<nz-empty *ngIf="!loading && !pics.length" nzNotFoundContent="无相关图片" class="empty-pics"></nz-empty>
<!-- 弹出层 -->
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="'图片：'+ picture?.name" (nzOnCancel)="handleCancelPictureProp()">
  <ng-template nzModalContent>
    <form nz-form [formGroup]="picturePropForm">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="site">图片站点</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="图片站点是必填项！" nzExtra="选择在哪个站点上面显示。">
          <nz-select formControlName="site" id="site">
            <nz-option nzLabel="日语站" nzValue="jp"></nz-option>
            <nz-option nzLabel="西语站" nzValue="vac"></nz-option>
            <nz-option nzLabel="法语站" nzValue="vc"></nz-option>
            <nz-option nzLabel="德语站" nzValue="gm"></nz-option>
            <nz-option nzLabel="俄语站" nzValue="ru"></nz-option>
            <nz-option nzLabel="意语站" nzValue="it"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="keywords">关键字</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="关键字是必填项，推荐中文关键词，方便日后搜索图片。" nzExtra="请输入依次输入关键词，推荐中文关键词。">
          <textarea formControlName="keywords" nz-input rows="3"
            placeholder="推荐中文关键词，使用 “#” 隔开。&#13;&#10;例如：西藏#桂林#雷峰塔#白娘子。" hidden></textarea>
          <app-picture-tag-input [tagString]="picture.keywords" (changeEvent)="handleTags($event)">
          </app-picture-tag-input>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-template>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="updateKeywords()" [nzLoading]="isUpdateLoading"
      class="fleft">更新关键词</button>
    <button nz-button nzType="default" (click)="handleCancelPictureProp()">关闭</button>
    <button nz-button nzType="primary" (click)="handleOkPictureProp()" [nzLoading]="isOkLoading">获取地址</button>
  </div>
</nz-modal>

./picture-storehouse.component.less

.card-section {
  display: flex;
  flex-wrap: wrap;
}

.card-section::after {
  content: '';
  flex-grow: 999999999;
}

.card-item {
  margin: 8px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 1px 1px 3px #888;

  i {
    display: block;
    transition: all 0.5s;
  }

  i:hover {
    color: aqua;
  }
}

.card-img {
  position: absolute;
  top: 0;
  width: 100%;
  vertical-align: bottom;
  vertical-align: bottom;
  cursor: pointer;
  transform: translateZ(5px);
  transition: all 0.3s;
  background-color: #fff;
}

.zhanwei {
  background: url(https://data.arachina.com/kcfinder/upload/jp/pic/ld4.gif) no-repeat center center;
  background-size: cover;
}

/*
.card-item:hover .card-img {
  transform: scale(1.1);
}
*/

.card-label,
.card-label-top {
  color: #fff;
  position: absolute;
  bottom: -36px;
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.card-label-top {
  bottom: auto;
  right: 0;
  top: 0;
  opacity: 0;
  width: auto;
  cursor: pointer;
  background: none;
  text-shadow: 1px 1px #ad1818;
}

.card-item:hover .card-label {
  bottom: 0;
}

.card-item:hover .card-label-top {
  opacity: 1;
}

.card-label-wh {
  flex-grow: 2;
  margin: 0;
  color: #fff;
}

.card-img-edit {
  cursor: pointer;
  font-size: 20px;
}

.edit-mr {
  margin-right: 12px;
}

.search-picture {
  padding: 0 6px;
}

.fleft {
  float: left;
}

.empty-pics {
  margin-top: 100px;
}

.images-spin {
  text-align: center;
  background: #f0f2f5;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 50px 50px;
  margin: 20px 0;
}

.img-tips {
  line-height: 36px;
  position: relative;
  right: 5px;
  width: 16px;
  display: block;

  [nz-icon] {
    font-size: 18px;
  }
}

.sop {
  position: absolute;
  right: 50px;
  top: 80px;
}

.select-user {
  min-width: 88px;
}