edu-textbook/projects/textbook/src/modules/nav-admin/user-edit/user-edit.component.html

<nz-page-header>
  <nz-breadcrumb nz-page-header-breadcrumb>
    <nz-breadcrumb-item>用户管理</nz-breadcrumb-item>
    <nz-breadcrumb-item>用户列表</nz-breadcrumb-item>
    <nz-breadcrumb-item><a>用户详情</a></nz-breadcrumb-item>
  </nz-breadcrumb>
  <nz-page-header-content>
    <div class="user-header">
      <div class="header-left">
        <nz-avatar
          nzSize="large"
          nzIcon="user"
          nzSrc="/img/avatar.png"
        ></nz-avatar>
        <div class="name-data">
          <div style="display: flex; align-items: center">
            <div class="name">{{ user?.get("name") }}</div>
            <div class="status">
              @switch (user?.get("accountState")) { @case ('待认证') {
              <nz-tag [nzBordered]="false" [nzColor]="'geekblue'"
                >待认证</nz-tag
              >
              } @case ('已认证') {
              <nz-tag [nzBordered]="false" [nzColor]="'green'">已认证</nz-tag>
              } @case ('已禁用') {
              <nz-tag [nzBordered]="false" [nzColor]="'red'">已禁用</nz-tag>
              } } @if (user?.get('isDeleted')) {
              <nz-tag nzColor="error">已删除</nz-tag>
              }
            </div>
          </div>
          <div class="id">ID:{{ user?.id }}</div>
        </div>
      </div>
      <div class="header-right">
        <div style="margin-right: 10px">
          <button
            nz-button
            nz-dropdown
            [nzDropdownMenu]="menu"
            [nzPlacement]="'bottomLeft'"
          >
            更多
            <span nz-icon nzType="down" nzTheme="outline"></span>
          </button>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu>
              <li nz-menu-item>
                @if (user?.get('accountState') == '待认证') {
                <button
                  nz-button
                  nzType="link"
                  style="color: #231c1f"
                  (click)="updateUser('已认证')"
                >
                  <span
                    nz-icon
                    nzType="safety-certificate"
                    nzTheme="outline"
                  ></span
                  >通过认证
                </button>
                }
              </li>
              <li nz-menu-item>
                @if (user?.get('accountState') != '已禁用') {
                <button
                  nz-button
                  nzType="link"
                  (click)="updateUser('已禁用')"
                  style="color: #231c1f"
                >
                  <span nz-icon nzType="stop" nzTheme="outline"></span>禁用账号
                </button>
                }
              </li>
              <li nz-menu-item>
                <button
                  (click)="updateUser('删除')"
                  nz-button
                  [disabled]="user?.get('isDeleted')"
                  nzType="link"
                  style="color: #231c1f"
                >
                  <span nz-icon nzType="delete" nzTheme="outline"></span
                  >删除账号
                </button>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
        <button
          style="background: #3e49b3; border: 1px #3e49b3"
          nz-button
          nzType="primary"
          (click)="isVisible = !isVisible"
        >
          修改密码
        </button>
      </div>
    </div>
  </nz-page-header-content>
</nz-page-header>
<div class="edit-content">
  <nz-tabset>
    <nz-tab nzTitle="用户信息">
      <div class="title">账号信息</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">创建时间</div>
            <div class="value">
              {{ user?.createdAt | date : "yyyy-MM-dd HH:MM:ss" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">最后登录时间</div>
            <div class="value">
              {{ user?.get("lastLogin") | date : "yyyy-MM-dd HH:MM:ss" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">最后登录IP</div>
            <div class="value">{{ user?.get("lastIP") }}</div>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">登录次数</div>
            <div class="value">{{ user?.get("loginsCount") }}</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">用户类型</div>
            <div class="value">{{ profile?.get("identity") || "未填写" }}</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">认证文件</div>
            <div class="value">
              @if (profile?.get('identityFile')) {
              <a [href]="profile?.get('identityFile')">查看文件</a>
              }@else { 未上传 }
            </div>
          </div>
        </div>
        <!-- <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">注册浏览器</div>
            <div class="value">360</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">注册设备</div>
            <div class="value">Mozilla/5.0 (Windows NT 10.0; Win64; x64)</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">用户来源</div>
            <div class="value">注册</div>
          </div>
        </div> -->
      </div>
      <div class="title">个人信息</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">手机号</div>
            <div class="value">
              {{ user?.get("phone") || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">邮箱</div>
            <div class="value">
              {{ user?.get("email") || profile?.get("email") || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">姓名</div>
            <div class="value">{{ user?.get("name") || "未填写" }}</div>
          </div>
        </div>
      </div>
      <div class="title">扩展信息</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">办公电话</div>
            <div class="value">{{ profile?.get("telephone") || "未填写" }}</div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">单位类型</div>
            <div class="value">
              {{ profile?.get("companyType") || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">省份</div>
            <div class="value">{{ profile?.get("province") || "未填写" }}</div>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="8">
            <div class="lable">所在部门</div>
            <div class="value">
              {{ user?.get("departmentName") || "未填写" }}
            </div>
          </div>
          <div nz-col nzSpan="8">
            <div class="lable">职务</div>
            <div class="value">{{ profile?.get("postName") || "未填写" }}</div>
          </div>
        </div>
      </div>
      <div class="title">所属组织部门</div>
      <div class="fill-template">
        <nz-tag [nzBordered]="false" style="color: black" [nzColor]="'#efefef'"
          >“十四五”高等教育国家规划教材申报系统</nz-tag
        >
        /
        <nz-tag
          [nzBordered]="false"
          style="color: black"
          [nzColor]="'#efefef'"
          >{{ profile?.get("companyType") }}</nz-tag
        >
        /
        <nz-tag [nzBordered]="false" [nzColor]="'geekblue'">{{
          user?.get("companyName")
        }}</nz-tag>
      </div>
      <div class="title">原始JSON数据</div>
      <div class="fill-template">
        <div nz-row>
          <div nz-col nzSpan="24">
            <!-- <div class="view-block">
              {{inputValue}}
            </div> -->
            <textarea
              rows="4"
              disabled="true"
              nz-input
              [(ngModel)]="inputValue"
              class="view-block"
            ></textarea>
          </div>
        </div>
      </div>
    </nz-tab>
  </nz-tabset>
</div>

<nz-modal
  [(nzVisible)]="isVisible"
  nzTitle="请输入新的密码"
  (nzOnCancel)="isVisible = false"
  (nzOnOk)="handleOk()"
>
  <ng-container *nzModalContent>
    <input
      nz-input
      placeholder="密码格式可以由大小写字母或英文符号及数字组成"
      [(ngModel)]="password"
      type="text"
    />
  </ng-container>
</nz-modal>