🎨 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.

web/src/components/table/usage-logs/modals/UserInfoModal.jsx

@@ -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>

web/src/i18n/locales/en.json

@@ -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"
 }