fix: increase the width of member table

[hujiahao-hjh]

What this PR does / why we need it:

increase the width of member table.

Does this PR introduce a user interface change?

✅ Yes(screenshot is required)

ChangeLog

Language	Changelog
🇺🇸 English	increase the width of member table.
🇨🇳 中文	增加了成员表格的宽度。

Which versions should be patched?

release/1.1

Which issue(s) this PR fixes:

Fixes # increase the width of member table.

[daskyrk]

/cherry-pick release/1.1

[erda-bot]

Automated cherry pick failed, please resolve the confilcts and create PR manually.
Details:

Auto-merging shell/app/common/components/members-table.tsx
CONFLICT (content): Merge conflict in shell/app/common/components/members-table.tsx
diff --cc shell/app/common/components/members-table.tsx
index 43f9293f,e1fddea0..00000000
--- a/shell/app/common/components/members-table.tsx
+++ b/shell/app/common/components/members-table.tsx
@@@ -331,90 -332,76 +331,99 @@@ export const MembersTable = (
    );
  
    const columns = React.useMemo(
 -    () =>
 -      [
 -        {
 -          title: i18n.t('nickname'),
 -          dataIndex: 'nick',
 -          width: 200,
 -          render: (nick: string, record: IMember) => {
 -            const { userId, removed } = record;
 -            return (
 -              <div
 -                className="member-username nowrap"
 -                title={`${nick} ${(currentUserId === userId && i18n.t('current user')) || ''} ${
 -                  (removed && i18n.t('exit the organization')) || ''
 -                }`}
 -              >
 -                <span>{nick || i18n.t('common:none')}</span>
 -                <IF check={currentUserId === userId}>
 -                  <span className="member-username-info"> [{i18n.t('current user')}]</span>
 -                </IF>
 -                <IF check={removed}>
 -                  <span className="member-username-info"> [{i18n.t('exit the organization')}]</span>
 -                </IF>
 -              </div>
 -            );
 -          },
 -        },
 -        {
 -          title: i18n.t('user name'),
 -          dataIndex: 'name',
 -          width: 200,
 -          render: (name: string) => {
 -            return (
 -              <div className="member-username nowrap" title={name || i18n.t('common:none')}>
 -                <span>{name || i18n.t('common:none')}</span>
 -              </div>
 -            );
 -          },
 +    () => [
 +      {
 +        title: i18n.t('nickname'),
 +        dataIndex: 'nick',
 +        render: (nick: string, record: IMember) => {
 +          const { userId, removed } = record;
 +          return (
 +            <div className="member-username nowrap">
 +              <span>{nick || i18n.t('common:none')}</span>
 +              <IF check={currentUserId === userId}>
 +                <span className="member-username-info"> [{i18n.t('current user')}]</span>
 +              </IF>
 +              <IF check={removed}>
 +                <span className="member-username-info"> [{i18n.t('exit the organization')}]</span>
 +              </IF>
 +            </div>
 +          );
          },
 -        {
 -          title: 'Email',
 -          dataIndex: 'email',
 -          width: 200,
 -          render: (value: string) => (
 -            <Tooltip title={value}>
 -              <span className="for-copy" data-clipboard-tip="Email" data-clipboard-text={value}>
 -                {value || i18n.t('common:none')}
 -              </span>
 -            </Tooltip>
 -          ),
 +      },
 +      {
 +        title: i18n.t('user name'),
 +        dataIndex: 'name',
 +        render: (name: string) => {
 +          return (
 +            <div className="member-username nowrap">
 +              <span>{name || i18n.t('common:none')}</span>
 +            </div>
 +          );
          },
++<<<<<<< HEAD
 +      },
 +      {
 +        title: 'Email',
 +        dataIndex: 'email',
 +        render: (value: string) => (
 +          <Tooltip title={value}>
 +            <span className="for-copy" data-clipboard-tip="Email" data-clipboard-text={value}>
++=======
+         {
+           title: i18n.t('cellphone'),
+           dataIndex: 'mobile',
+           width: 160,
+           render: (value: string | number) => (
+             <span className="for-copy" data-clipboard-tip={i18n.t('cellphone')} data-clipboard-text={value}>
++>>>>>>> e6e8d821 (fix: increase the width of member table (#767))
                {value || i18n.t('common:none')}
              </span>
 -          ),
 +          </Tooltip>
 +        ),
 +      },
 +      {
 +        title: i18n.t('cellphone'),
 +        dataIndex: 'mobile',
 +        render: (value: string | number) => (
 +          <span className="for-copy" data-clipboard-tip={i18n.t('cellphone')} data-clipboard-text={value}>
 +            {value || i18n.t('common:none')}
 +          </span>
 +        ),
 +      },
 +      {
 +        title: i18n.t('role'),
 +        dataIndex: 'roles',
 +        render: (roles: string[]) => {
 +          const rolesStr = map(roles, (role) => roleMap[role] || i18n.t('common:other')).join(',');
 +          return (
 +            <div className="members-list-role-operate nowrap">
 +              <Tooltip title={rolesStr}>
 +                <span className="role-tag">{rolesStr}</span>
 +              </Tooltip>
 +            </div>
 +          );
          },
 +      },
 +      ...insertWhen(scope.type === MemberScope.ORG, [
          {
 -          title: i18n.t('role'),
 -          dataIndex: 'roles',
 -          width: 200,
 -          render: (roles: string[]) => {
 -            const rolesStr = map(roles, (role) => roleMap[role] || i18n.t('common:other')).join(',');
 +          title: i18n.t('member label'),
 +          dataIndex: 'labels',
 +          render: (val: string[]) => {
 +            const curLabels = map(val, (item) => {
 +              const labelObj = find(memberLabels, { label: item }) || { name: item, label: item };
 +              return (
 +                <div className="members-list-label-item" key={labelObj.label}>
 +                  {labelObj.name}
 +                </div>
 +              );
 +            });
              return (
 -              <div className="members-list-role-operate nowrap">
 -                <Tooltip title={rolesStr}>
 -                  <span className="role-tag">{rolesStr}</span>
 +              <div className="members-list-label nowrap">
 +                <Tooltip
 +                  title={curLabels}
 +                  getPopupContainer={(triggerNode: unknown) => get(triggerNode, 'parentElement')}
 +                >
 +                  {curLabels}
                  </Tooltip>
                </div>
              );
@@@ -498,8 -514,7 +507,12 @@@
          pagination={{ ...paging, onChange: onChangePage }}
          columns={columns}
          dataSource={list}
++<<<<<<< HEAD
 +        tableLayout="auto"
 +        scroll={{ x: '100%' }}
++=======
+         scroll={{ x: 1400 }}
++>>>>>>> e6e8d821 (fix: increase the width of member table (#767))
        />
      );
    }, [columns, list, onTableSelectChange, paging, state.queryParams, state.selectedKeys, updater, hideRowSelect]);