🎨 feat(ui): enhance UserInfoModal with improved layout and additional fields
- Redesign modal layout from single column to responsive two-column grid - Add new user information fields: display name, user group, invitation code, invitation count, invitation quota, and remarks - Implement Badge components with color-coded categories for better visual hierarchy: * Primary (blue): basic identity info (username, display name) * Success (green): positive/earning info (balance, invitation quota) * Warning (orange): usage/consumption info (used quota, request count) * Tertiary (gray): supplementary info (user group, invitation details, remarks) - Optimize spacing and typography for better readability: * Reduce row spacing from 24px to 16px * Decrease font size from 16px to 14px for values * Adjust label margins from 4px to 2px - Implement conditional rendering for optional fields - Add proper text wrapping for long remarks content - Reduce overall modal height while maintaining information clarity This update significantly improves the user experience by presenting comprehensive user information in a more organized and visually appealing format.
This commit is contained in:
t0ng7u
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Modal } from '@douyinfe/semi-ui';
|
||||
import { Modal, Badge } from '@douyinfe/semi-ui';
|
||||
import { renderQuota, renderNumber } from '../../../../helpers';
|
||||
|
||||
const UserInfoModal = ({
|
||||
@@ -27,28 +27,130 @@ const UserInfoModal = ({
|
||||
userInfoData,
|
||||
t,
|
||||
}) => {
|
||||
const infoItemStyle = {
|
||||
marginBottom: '16px'
|
||||
};
|
||||
|
||||
const labelStyle = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: '2px',
|
||||
fontSize: '12px',
|
||||
color: 'var(--semi-color-text-2)',
|
||||
gap: '6px'
|
||||
};
|
||||
|
||||
const renderLabel = (text, type = 'tertiary') => (
|
||||
<div style={labelStyle}>
|
||||
<Badge dot type={type} />
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
|
||||
const valueStyle = {
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
color: 'var(--semi-color-text-0)'
|
||||
};
|
||||
|
||||
const rowStyle = {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '16px',
|
||||
gap: '20px'
|
||||
};
|
||||
|
||||
const colStyle = {
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={t('用户信息')}
|
||||
visible={showUserInfo}
|
||||
onCancel={() => setShowUserInfoModal(false)}
|
||||
footer={null}
|
||||
centered={true}
|
||||
centered
|
||||
closable
|
||||
maskClosable
|
||||
width={600}
|
||||
>
|
||||
{userInfoData && (
|
||||
<div style={{ padding: 12 }}>
|
||||
<p>
|
||||
{t('用户名')}: {userInfoData.username}
|
||||
</p>
|
||||
<p>
|
||||
{t('余额')}: {renderQuota(userInfoData.quota)}
|
||||
</p>
|
||||
<p>
|
||||
{t('已用额度')}：{renderQuota(userInfoData.used_quota)}
|
||||
</p>
|
||||
<p>
|
||||
{t('请求次数')}：{renderNumber(userInfoData.request_count)}
|
||||
</p>
|
||||
<div style={{ padding: 20 }}>
|
||||
{/* 基本信息 */}
|
||||
<div style={rowStyle}>
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('用户名'), 'primary')}
|
||||
<div style={valueStyle}>{userInfoData.username}</div>
|
||||
</div>
|
||||
{userInfoData.display_name && (
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('显示名称'), 'primary')}
|
||||
<div style={valueStyle}>{userInfoData.display_name}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 余额信息 */}
|
||||
<div style={rowStyle}>
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('余额'), 'success')}
|
||||
<div style={valueStyle}>{renderQuota(userInfoData.quota)}</div>
|
||||
</div>
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('已用额度'), 'warning')}
|
||||
<div style={valueStyle}>{renderQuota(userInfoData.used_quota)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 统计信息 */}
|
||||
<div style={rowStyle}>
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('请求次数'), 'warning')}
|
||||
<div style={valueStyle}>{renderNumber(userInfoData.request_count)}</div>
|
||||
</div>
|
||||
{userInfoData.group && (
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('用户组'), 'tertiary')}
|
||||
<div style={valueStyle}>{userInfoData.group}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 邀请信息 */}
|
||||
{(userInfoData.aff_code || userInfoData.aff_count !== undefined) && (
|
||||
<div style={rowStyle}>
|
||||
{userInfoData.aff_code && (
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('邀请码'), 'tertiary')}
|
||||
<div style={valueStyle}>{userInfoData.aff_code}</div>
|
||||
</div>
|
||||
)}
|
||||
{userInfoData.aff_count !== undefined && (
|
||||
<div style={colStyle}>
|
||||
{renderLabel(t('邀请人数'), 'tertiary')}
|
||||
<div style={valueStyle}>{renderNumber(userInfoData.aff_count)}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 邀请获得额度 */}
|
||||
{userInfoData.aff_quota !== undefined && userInfoData.aff_quota > 0 && (
|
||||
<div style={infoItemStyle}>
|
||||
{renderLabel(t('邀请获得额度'), 'success')}
|
||||
<div style={valueStyle}>{renderQuota(userInfoData.aff_quota)}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 备注 */}
|
||||
{userInfoData.remark && (
|
||||
<div style={{ marginBottom: 0 }}>
|
||||
{renderLabel(t('备注'), 'tertiary')}
|
||||
<div style={{ ...valueStyle, wordBreak: 'break-all', lineHeight: '1.4' }}>{userInfoData.remark}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
@@ -1780,5 +1780,7 @@
|
||||
"美元汇率（非充值汇率，仅用于定价页面换算）": "USD exchange rate (not recharge rate, only used for pricing page conversion)",
|
||||
"美元汇率": "USD exchange rate",
|
||||
"隐藏操作项": "Hide actions",
|
||||
"显示操作项": "Show actions"
|
||||
"显示操作项": "Show actions",
|
||||
"用户组": "User group",
|
||||
"邀请获得额度": "Invitation quota"
|
||||
}
|
||||
Reference in New Issue
Block a user