引用全局组件

src/components/AvatarWrap/index.less

 .head {
   display: flex;
   align-items: center;
-  font-size: 20px;
-  font-weight: 500;
 
   &-prefix {
     width: 48px;
@@ -18,5 +16,7 @@
   &-name {
     color: #172B4D;
     margin: 0 8px 0 12px;
+    font-size: 20px;
+    font-weight: 500;
   }
 }

src/pages/member/components/HeadInfo/index.less

-.head {
-  display: flex;
-  align-items: center;
-  font-size: 20px;
-  font-weight: 500;
-
-  &-prefix {
-    width: 48px;
-    height: 48px;
-    line-height: 48px;
-    border-radius: 4px;
-    border: 1px solid #DFE1E6;
-    color: #fff;
-    text-align: center;
-    background-color: #8777D9;
-  }
-
-  &-name {
-    color: #172B4D;
-    margin: 0 8px 0 12px;
-  }
-}

src/pages/member/components/HeadInfo/index.tsx

-import React from 'react';
-import LevelBrand from '../LevelBrand';
-import styles from './index.less';
-
-export interface HeadInfoProps {
-  info: {
-    name: string, 
-    level?: number, 
-  };
-  extra?: React.ReactNode;
-};
-
-const HeadInfo: React.FC<HeadInfoProps> = ({ info, extra }) => (
-  <div className={styles.head}>
-    <div className={styles['head-prefix']}>
-      { info && info.name && info.name.length ? info.name[0] : '' }
-    </div>
-    <div className={styles['head-name']}>
-      {info.name || ''}
-    </div>
-    {!extra ? (
-      <LevelBrand level={info.level} />
-    ) : extra}
-  </div>
-);
-
-export default HeadInfo;
\ No newline at end of file

src/pages/member/memberImport/importDetail.tsx

@@ -6,8 +6,8 @@ import { usePageStatus } from '@/hooks/usePageStatus';
 import { PublicApi } from '@/services/api';
 import { GetMemberAbilitySubGetResponse } from '@/services/MemberApi';
 import MellowCard from '@/components/MellowCard';
+import AvatarWrap from '@/components/AvatarWrap';
 import { STATUS_COLOR_MAP, MEMBER_STATUS_TAG_MAP, MEMBER_OUTER_STATUS_TYPE } from '../constant';
-import HeadInfo from '../components/HeadInfo';
 import BasicInfo from '../components/BasicInfo';
 import StatusTag from '../components/StatusTag';
 import styles from './index.less';
@@ -47,11 +47,13 @@ const ImportDetail: React.FC<{}> = () => {
               style={{ padding: '0' }}
               onBack={() => history.goBack()}
               title={
-                <HeadInfo 
+                <AvatarWrap 
                   info={{
                     name: memberInfo?.name, 
-                    level: 1,
                   }} 
+                  extra={(
+                    <span style={{ fontSize: 14, fontWeight: 'normal' }}>{memberInfo?.levelTag}</span>
+                  )}
                 />
               }
             >

src/pages/member/memberMaintain/detailed/index.tsx

@@ -7,12 +7,12 @@ import { usePageStatus } from '@/hooks/usePageStatus';
 import { PublicApi } from '@/services/api';
 import { GetMemberAbilityMaintenanceDetailBasicResponse } from '@/services/MemberApi';
 import { IMemberModule } from '@/module/memberModule';
+import AvatarWrap from '@/components/AvatarWrap';
 import { 
   MEMBER_STATUS_TAG_MAP, 
   MEMBER_INNER_STATUS_BADGE_COLOR, 
   MEMBER_OUTER_STATUS_TYPE, 
 } from '../../constant';
-import HeadInfo from '../../components/HeadInfo';
 import StatusTag from '../../components/StatusTag';
 import styles from './index.less';
 
@@ -123,11 +123,13 @@ const MemberMaintainDetailed: React.FC<QueryProps> = props => {
               style={{ padding: '0' }}
               onBack={() => history.goBack()}
               title={
-                <HeadInfo 
+                <AvatarWrap 
                   info={{
                     name: basicInfo?.name, 
-                    level: 1,
                   }} 
+                  extra={(
+                    <span style={{ fontSize: 12, fontWeight: 'normal' }}>{basicInfo?.levelTag}</span>
+                  )}
                 />
               }
             >

src/pages/member/memberPr1/auditPr1.tsx

@@ -16,9 +16,9 @@ import { PublicApi } from '@/services/api';
 import { GetMemberAbilityValidateStep1DetailResponse } from '@/services/MemberApi';
 import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
 import NiceForm from '@/components/NiceForm';
+import AvatarWrap from '@/components/AvatarWrap';
 import { MEMBER_INNER_STATUS_BADGE_COLOR, MEMBER_STATUS_TAG_MAP, MEMBER_OUTER_STATUS_TYPE } from '../constant';
 import { auditModalSchema } from '../schema/auditSchema';
-import HeadInfo from '../components/HeadInfo';
 import AuditProcess from '../components/AuditProcess';
 import BasicInfo from '../components/BasicInfo';
 import StatusTag from '../components/StatusTag';
@@ -129,11 +129,13 @@ const AuditPr1: React.FC<{}> = () => {
               style={{ padding: 0 }}
               onBack={() => history.goBack()}
               title={
-                <HeadInfo 
+                <AvatarWrap 
                   info={{
                     name: memberInfo?.name, 
-                    level: 1,
                   }} 
+                  extra={(
+                    <span style={{ fontSize: 12, fontWeight: 'normal' }}>{memberInfo?.levelTag}</span>
+                  )}
                 />
               }
               extra={(

src/pages/member/memberPr2/auditPr2.tsx

@@ -16,6 +16,7 @@ import { PublicApi } from '@/services/api';
 import { GetMemberAbilityValidateStep1DetailResponse } from '@/services/MemberApi';
 import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
 import NiceForm from '@/components/NiceForm';
+import AvatarWrap from '@/components/AvatarWrap';
 import { MEMBER_INNER_STATUS_BADGE_COLOR, MEMBER_STATUS_TAG_MAP, MEMBER_OUTER_STATUS_TYPE } from '../constant';
 import { auditModalSchema } from '../schema/auditSchema';
 import HeadInfo from '../components/HeadInfo';
@@ -129,11 +130,14 @@ const AuditPr2: React.FC<{}> = () => {
               style={{ padding: 0 }}
               onBack={() => history.goBack()}
               title={
-                <HeadInfo 
+                <AvatarWrap 
                   info={{
                     name: memberInfo?.name, 
                     level: 1,
                   }} 
+                  extra={(
+                    <span style={{ fontSize: 12, fontWeight: 'normal' }}>{memberInfo?.levelTag}</span>
+                  )}
                 />
               }
               extra={(

src/pages/member/memberPrConfirm/auditPrComfirm.tsx

@@ -16,10 +16,10 @@ import { PublicApi } from '@/services/api';
 import { GetMemberAbilityValidateStep1DetailResponse } from '@/services/MemberApi';
 import { createAsyncFormActions, FormEffectHooks, FormPath } from '@formily/antd';
 import NiceForm from '@/components/NiceForm';
+import AvatarWrap from '@/components/AvatarWrap';
 import { MEMBER_INNER_STATUS_SUCCESS } from '@/constants';
 import { MEMBER_INNER_STATUS_BADGE_COLOR, MEMBER_STATUS_TAG_MAP, MEMBER_OUTER_STATUS_TYPE } from '../constant';
 import { auditModalSchema } from '../schema/auditSchema';
-import HeadInfo from '../components/HeadInfo';
 import AuditProcess from '../components/AuditProcess';
 import BasicInfo from '../components/BasicInfo';
 import StatusTag from '../components/StatusTag';
@@ -145,11 +145,13 @@ const AuditPrComfirm: React.FC<{}> = () => {
               style={{ padding: 0 }}
               onBack={() => history.goBack()}
               title={
-                <HeadInfo 
+                <AvatarWrap 
                   info={{
                     name: memberInfo?.name, 
-                    level: 1,
                   }} 
+                  extra={(
+                    <span style={{ fontSize: 12, fontWeight: 'normal' }}>{memberInfo?.levelTag}</span>
+                  )}
                 />
               }
               extra={(

src/pages/member/memberPrSubmit/auditPrSubmit.tsx

@@ -16,6 +16,7 @@ import { PublicApi } from '@/services/api';
 import { GetMemberAbilityValidateCommitDetailResponse } from '@/services/MemberApi';
 import { createAsyncFormActions, createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
 import NiceForm from '@/components/NiceForm';
+import AvatarWrap from '@/components/AvatarWrap';
 import { 
   MEMBER_TYPE_CHANNEL_CORPORATE, 
   MEMBER_TYPE_CHANNEL_INDIVIDUAL, 
@@ -23,7 +24,6 @@ import {
 import { MEMBER_INNER_STATUS_BADGE_COLOR, MEMBER_STATUS_TAG_MAP, MEMBER_OUTER_STATUS_TYPE } from '../constant';
 import { channelSchema } from './schema';
 import { auditModalSchema } from '../schema/auditSchema';
-import HeadInfo from '../components/HeadInfo';
 import AuditProcess from '../components/AuditProcess';
 import BasicInfo from '../components/BasicInfo';
 import StatusTag from '../components/StatusTag';
@@ -211,11 +211,13 @@ const AuditPrSubmit: React.FC<{}> = () => {
               style={{ padding: 0 }}
               onBack={() => history.goBack()}
               title={
-                <HeadInfo 
+                <AvatarWrap 
                   info={{
                     name: memberInfo?.name, 
-                    level: 1,
                   }} 
+                  extra={(
+                    <span style={{ fontSize: 12, fontWeight: 'normal' }}>{memberInfo?.levelTag}</span>
+                  )}
                 />
               }
               extra={(

src/pages/member/memberQuery/index.tsx

@@ -114,7 +114,6 @@ const MemberQuery: React.FC<{}> = () => {
       title: '会员等级类型',
       dataIndex: 'levelTypeName',
       align: 'center',
-      render: (text, record) => <LevelBrand level={2} />,
     },
     {
       title: '申请时间',