🎨 style: unify card header UI, switch to Avatar icons & remove oversized props

Summary
• Replaced gradient header blocks with compact, neutral headers wrapped in `Avatar` across the following pages:
  - Channel / EditChannel.js
  - Channel / EditTagModal.js
  - Redemption / EditRedemption.js
  - Token / EditToken.js
  - User / EditUser.js
  - User / AddUser.js

Details
1. Added `Avatar` import and substituted raw icon elements, assigning semantic colors (`blue`, `green`, `purple`, `orange`, etc.) and consistent 16 px icons for a cleaner look.
2. Removed gradient backgrounds, decorative “blur-ball” shapes, and extra paddings from header containers to achieve a tight, flat design.
3. Stripped all `size="large"` attributes from `Button`, `Input`, `Select`, `DatePicker`, `AutoComplete`, and `Avatar` components, allowing default sizing for better visual density.
4. Eliminated redundant `bodyStyle` background overrides in some `SideSheet` components.
5. No business logic touched; all changes are purely presentational.

Result
The editing and creation dialogs now share a unified, compact style consistent with the latest design language, improving readability and user experience without altering functionality.

web/src/helpers/render.js

@@ -883,7 +883,7 @@ function getEffectiveRatio(groupRatio, user_group_ratio) {
     ? i18next.t('专属倍率')
     : i18next.t('分组倍率');
   const effectiveRatio = useUserGroupRatio ? user_group_ratio : groupRatio;
-  
+
   return {
     ratio: effectiveRatio,
     label: ratioLabel,
@@ -1074,25 +1074,25 @@ export function renderModelPrice(
               const extraServices = [
                 webSearch && webSearchCallCount > 0
                   ? i18next.t(
-                      ' + Web搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}',
-                      {
-                        count: webSearchCallCount,
-                        price: webSearchPrice,
-                        ratio: groupRatio,
-                        ratioType: ratioLabel,
-                      },
-                    )
+                    ' + Web搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}',
+                    {
+                      count: webSearchCallCount,
+                      price: webSearchPrice,
+                      ratio: groupRatio,
+                      ratioType: ratioLabel,
+                    },
+                  )
                   : '',
                 fileSearch && fileSearchCallCount > 0
                   ? i18next.t(
-                      ' + 文件搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}',
-                      {
-                        count: fileSearchCallCount,
-                        price: fileSearchPrice,
-                        ratio: groupRatio,
-                        ratioType: ratioLabel,
-                      },
-                    )
+                    ' + 文件搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}',
+                    {
+                      count: fileSearchCallCount,
+                      price: fileSearchPrice,
+                      ratio: groupRatio,
+                      ratioType: ratioLabel,
+                    },
+                  )
                   : '',
               ].join('');
 
@@ -1281,10 +1281,10 @@ export function renderAudioModelPrice(
     let audioPrice =
       (audioInputTokens / 1000000) * inputRatioPrice * audioRatio * groupRatio +
       (audioCompletionTokens / 1000000) *
-        inputRatioPrice *
-        audioRatio *
-        audioCompletionRatio *
-        groupRatio;
+      inputRatioPrice *
+      audioRatio *
+      audioCompletionRatio *
+      groupRatio;
     let price = textPrice + audioPrice;
     return (
       <>
@@ -1340,27 +1340,27 @@ export function renderAudioModelPrice(
           <p>
             {cacheTokens > 0
               ? i18next.t(
-                  '文字提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
-                  {
-                    nonCacheInput: inputTokens - cacheTokens,
-                    cacheInput: cacheTokens,
-                    cachePrice: inputRatioPrice * cacheRatio,
-                    price: inputRatioPrice,
-                    completion: completionTokens,
-                    compPrice: completionRatioPrice,
-                    total: textPrice.toFixed(6),
-                  },
-                )
+                '文字提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
+                {
+                  nonCacheInput: inputTokens - cacheTokens,
+                  cacheInput: cacheTokens,
+                  cachePrice: inputRatioPrice * cacheRatio,
+                  price: inputRatioPrice,
+                  completion: completionTokens,
+                  compPrice: completionRatioPrice,
+                  total: textPrice.toFixed(6),
+                },
+              )
               : i18next.t(
-                  '文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
-                  {
-                    input: inputTokens,
-                    price: inputRatioPrice,
-                    completion: completionTokens,
-                    compPrice: completionRatioPrice,
-                    total: textPrice.toFixed(6),
-                  },
-                )}
+                '文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
+                {
+                  input: inputTokens,
+                  price: inputRatioPrice,
+                  completion: completionTokens,
+                  compPrice: completionRatioPrice,
+                  total: textPrice.toFixed(6),
+                },
+              )}
           </p>
           <p>
             {i18next.t(
@@ -1397,7 +1397,7 @@ export function renderQuotaWithPrompt(quota, digits) {
   displayInCurrency = displayInCurrency === 'true';
   if (displayInCurrency) {
     return (
-      ' | ' + i18next.t('等价金额') + ': ' + renderQuota(quota, digits) + ''
+      i18next.t('等价金额：') + renderQuota(quota, digits)
     );
   }
   return '';
@@ -1499,35 +1499,35 @@ export function renderClaudeModelPrice(
           <p>
             {cacheTokens > 0 || cacheCreationTokens > 0
               ? i18next.t(
-                  '提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 缓存创建 {{cacheCreationInput}} tokens / 1M tokens * ${{cacheCreationPrice}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * {{ratioType}} {{ratio}} = ${{total}}',
-                  {
-                    nonCacheInput: nonCachedTokens,
-                    cacheInput: cacheTokens,
-                    cacheRatio: cacheRatio,
-                    cacheCreationInput: cacheCreationTokens,
-                    cacheCreationRatio: cacheCreationRatio,
-                    cachePrice: cacheRatioPrice,
-                    cacheCreationPrice: cacheCreationRatioPrice,
-                    price: inputRatioPrice,
-                    completion: completionTokens,
-                    compPrice: completionRatioPrice,
-                    ratio: groupRatio,
-                    ratioType: ratioLabel,
-                    total: price.toFixed(6),
-                  },
-                )
+                '提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 缓存创建 {{cacheCreationInput}} tokens / 1M tokens * ${{cacheCreationPrice}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * {{ratioType}} {{ratio}} = ${{total}}',
+                {
+                  nonCacheInput: nonCachedTokens,
+                  cacheInput: cacheTokens,
+                  cacheRatio: cacheRatio,
+                  cacheCreationInput: cacheCreationTokens,
+                  cacheCreationRatio: cacheCreationRatio,
+                  cachePrice: cacheRatioPrice,
+                  cacheCreationPrice: cacheCreationRatioPrice,
+                  price: inputRatioPrice,
+                  completion: completionTokens,
+                  compPrice: completionRatioPrice,
+                  ratio: groupRatio,
+                  ratioType: ratioLabel,
+                  total: price.toFixed(6),
+                },
+              )
               : i18next.t(
-                  '提示 {{input}} tokens / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * {{ratioType}} {{ratio}} = ${{total}}',
-                  {
-                    input: inputTokens,
-                    price: inputRatioPrice,
-                    completion: completionTokens,
-                    compPrice: completionRatioPrice,
-                    ratio: groupRatio,
-                    ratioType: ratioLabel,
-                    total: price.toFixed(6),
-                  },
-                )}
+                '提示 {{input}} tokens / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * {{ratioType}} {{ratio}} = ${{total}}',
+                {
+                  input: inputTokens,
+                  price: inputRatioPrice,
+                  completion: completionTokens,
+                  compPrice: completionRatioPrice,
+                  ratio: groupRatio,
+                  ratioType: ratioLabel,
+                  total: price.toFixed(6),
+                },
+              )}
           </p>
           <p>{i18next.t('仅供参考，以实际扣费为准')}</p>
         </article>

web/src/i18n/locales/en.json

@@ -397,7 +397,7 @@
   "删除用户": "Delete User",
   "添加新的用户": "Add New User",
   "自定义": "Custom",
-  "等价金额": "Equivalent Amount",
+  "等价金额：": "Equivalent Amount: ",
   "未登录或登录已过期，请重新登录": "Not logged in or login has expired, please log in again",
   "请求次数过多，请稍后再试": "Too many requests, please try again later",
   "服务器内部错误，请联系管理员": "Server internal error, please contact the administrator",

web/src/pages/Channel/EditChannel.js

@@ -25,6 +25,7 @@ import {
   ImagePreview,
   Card,
   Tag,
+  Avatar,
 } from '@douyinfe/semi-ui';
 import { getChannelModels, copy } from '../../helpers';
 import {
@@ -452,10 +453,7 @@ const EditChannel = (props) => {
           borderBottom: '1px solid var(--semi-color-border)',
           padding: '24px'
         }}
-        bodyStyle={{
-          backgroundColor: 'var(--semi-color-bg-0)',
-          padding: '0'
-        }}
+        bodyStyle={{ padding: '0' }}
         visible={props.visible}
         width={isMobile() ? '100%' : 600}
         footer={
@@ -463,7 +461,6 @@ const EditChannel = (props) => {
             <Space>
               <Button
                 theme="solid"
-                size="large"
                 className="!rounded-full"
                 onClick={submit}
                 icon={<IconSave />}
@@ -472,7 +469,6 @@ const EditChannel = (props) => {
               </Button>
               <Button
                 theme="light"
-                size="large"
                 className="!rounded-full"
                 type="primary"
                 onClick={handleCancel}
@@ -489,20 +485,14 @@ const EditChannel = (props) => {
         <Spin spinning={loading}>
           <div className="p-6">
             <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconServer size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('基本信息')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('渠道的基本配置信息')}</div>
+              {/* Header: Basic Info */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="blue" className="mr-2 shadow-md">
+                  <IconServer size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
+                  <div className="text-xs text-gray-600">{t('渠道的基本配置信息')}</div>
                 </div>
               </div>
 
@@ -519,7 +509,6 @@ const EditChannel = (props) => {
                     filter
                     searchPosition='dropdown'
                     placeholder={t('请选择渠道类型')}
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -535,7 +524,6 @@ const EditChannel = (props) => {
                     }}
                     value={inputs.name}
                     autoComplete='new-password'
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -594,7 +582,6 @@ const EditChannel = (props) => {
                           }}
                           value={inputs.key}
                           autoComplete='new-password'
-                          size="large"
                           className="!rounded-lg"
                         />
                       )}
@@ -616,20 +603,14 @@ const EditChannel = (props) => {
 
             {/* API Configuration Card */}
             <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconGlobe size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('API 配置')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('API 地址和相关配置')}</div>
+              {/* Header: API Config */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="green" className="mr-2 shadow-md">
+                  <IconGlobe size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('API 配置')}</Text>
+                  <div className="text-xs text-gray-600">{t('API 地址和相关配置')}</div>
                 </div>
               </div>
 
@@ -669,7 +650,6 @@ const EditChannel = (props) => {
                         onChange={(value) => handleInputChange('base_url', value)}
                         value={inputs.base_url}
                         autoComplete='new-password'
-                        size="large"
                         className="!rounded-lg"
                       />
                     </div>
@@ -681,7 +661,6 @@ const EditChannel = (props) => {
                         onChange={(value) => handleInputChange('other', value)}
                         value={inputs.other}
                         autoComplete='new-password'
-                        size="large"
                         className="!rounded-lg"
                       />
                     </div>
@@ -703,7 +682,6 @@ const EditChannel = (props) => {
                         onChange={(value) => handleInputChange('base_url', value)}
                         value={inputs.base_url}
                         autoComplete='new-password'
-                        size="large"
                         className="!rounded-lg"
                       />
                     </div>
@@ -727,7 +705,6 @@ const EditChannel = (props) => {
                       onChange={(value) => handleInputChange('base_url', value)}
                       value={inputs.base_url}
                       autoComplete='new-password'
-                      size="large"
                       className="!rounded-lg"
                     />
                     <Text type="tertiary" className="mt-1 text-xs">
@@ -745,7 +722,6 @@ const EditChannel = (props) => {
                       onChange={(value) => handleInputChange('base_url', value)}
                       value={inputs.base_url}
                       autoComplete='new-password'
-                      size="large"
                       className="!rounded-lg"
                     />
                   </div>
@@ -762,7 +738,6 @@ const EditChannel = (props) => {
                       onChange={(value) => handleInputChange('base_url', value)}
                       value={inputs.base_url}
                       autoComplete='new-password'
-                      size="large"
                       className="!rounded-lg"
                     />
                   </div>
@@ -772,20 +747,14 @@ const EditChannel = (props) => {
 
             {/* Model Configuration Card */}
             <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconCode size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('模型配置')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('模型选择和映射设置')}</div>
+              {/* Header: Model Config */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="purple" className="mr-2 shadow-md">
+                  <IconCode size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('模型配置')}</Text>
+                  <div className="text-xs text-gray-600">{t('模型选择和映射设置')}</div>
                 </div>
               </div>
 
@@ -804,7 +773,6 @@ const EditChannel = (props) => {
                     value={inputs.models}
                     autoComplete='new-password'
                     optionList={modelOptions}
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -813,7 +781,6 @@ const EditChannel = (props) => {
                   <Button
                     type='primary'
                     onClick={() => handleInputChange('models', basicModels)}
-                    size="large"
                     className="!rounded-lg"
                   >
                     {t('填入相关模型')}
@@ -821,7 +788,6 @@ const EditChannel = (props) => {
                   <Button
                     type='secondary'
                     onClick={() => handleInputChange('models', fullModels)}
-                    size="large"
                     className="!rounded-lg"
                   >
                     {t('填入所有模型')}
@@ -829,7 +795,6 @@ const EditChannel = (props) => {
                   <Button
                     type='tertiary'
                     onClick={() => fetchUpstreamModelList('models')}
-                    size="large"
                     className="!rounded-lg"
                   >
                     {t('获取模型列表')}
@@ -837,7 +802,6 @@ const EditChannel = (props) => {
                   <Button
                     type='warning'
                     onClick={() => handleInputChange('models', [])}
-                    size="large"
                     className="!rounded-lg"
                   >
                     {t('清除所有模型')}
@@ -856,7 +820,6 @@ const EditChannel = (props) => {
                         showError(t('复制失败'));
                       }
                     }}
-                    size="large"
                     className="!rounded-lg"
                   >
                     {t('复制所有模型')}
@@ -873,7 +836,6 @@ const EditChannel = (props) => {
                     placeholder={t('输入自定义模型名称')}
                     value={customModel}
                     onChange={(value) => setCustomModel(value.trim())}
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -907,7 +869,6 @@ const EditChannel = (props) => {
                     placeholder={t('不填则为模型列表第一个')}
                     onChange={(value) => handleInputChange('test_model', value)}
                     value={inputs.test_model}
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -916,20 +877,14 @@ const EditChannel = (props) => {
 
             {/* Advanced Settings Card */}
             <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconSetting size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('高级设置')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('渠道的高级配置选项')}</div>
+              {/* Header: Advanced Settings */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="orange" className="mr-2 shadow-md">
+                  <IconSetting size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('高级设置')}</Text>
+                  <div className="text-xs text-gray-600">{t('渠道的高级配置选项')}</div>
                 </div>
               </div>
 
@@ -948,7 +903,6 @@ const EditChannel = (props) => {
                     value={inputs.groups}
                     autoComplete='new-password'
                     optionList={groupOptions}
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -962,7 +916,6 @@ const EditChannel = (props) => {
                       onChange={(value) => handleInputChange('other', value)}
                       value={inputs.other}
                       autoComplete='new-password'
-                      size="large"
                       className="!rounded-lg"
                     />
                   </div>
@@ -1004,7 +957,6 @@ const EditChannel = (props) => {
                       onChange={(value) => handleInputChange('other', value)}
                       value={inputs.other}
                       autoComplete='new-password'
-                      size="large"
                       className="!rounded-lg"
                     />
                   </div>
@@ -1019,7 +971,6 @@ const EditChannel = (props) => {
                       onChange={(value) => handleInputChange('other', value)}
                       value={inputs.other}
                       autoComplete='new-password'
-                      size="large"
                       className="!rounded-lg"
                     />
                   </div>
@@ -1034,7 +985,6 @@ const EditChannel = (props) => {
                       onChange={(value) => handleInputChange('other', value)}
                       value={inputs.other}
                       autoComplete='new-password'
-                      size="large"
                       className="!rounded-lg"
                     />
                   </div>
@@ -1048,7 +998,6 @@ const EditChannel = (props) => {
                     onChange={(value) => handleInputChange('tag', value)}
                     value={inputs.tag}
                     autoComplete='new-password'
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -1068,7 +1017,6 @@ const EditChannel = (props) => {
                     }}
                     value={inputs.priority}
                     autoComplete='new-password'
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -1088,7 +1036,6 @@ const EditChannel = (props) => {
                     }}
                     value={inputs.weight}
                     autoComplete='new-password'
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -1156,7 +1103,6 @@ const EditChannel = (props) => {
                       placeholder={t('请输入组织org-xxx')}
                       onChange={(value) => handleInputChange('openai_organization', value)}
                       value={inputs.openai_organization}
-                      size="large"
                       className="!rounded-lg"
                     />
                     <Text type="tertiary" className="mt-1 text-xs">

web/src/pages/Channel/EditTagModal.js

@@ -19,6 +19,7 @@ import {
   TextArea,
   Card,
   Tag,
+  Avatar,
 } from '@douyinfe/semi-ui';
 import {
   IconSave,
@@ -277,10 +278,7 @@ const EditTagModal = (props) => {
         borderBottom: '1px solid var(--semi-color-border)',
         padding: '24px'
       }}
-      bodyStyle={{
-        backgroundColor: 'var(--semi-color-bg-0)',
-        padding: '0'
-      }}
+      bodyStyle={{ padding: '0' }}
       visible={visible}
       width={600}
       onCancel={handleClose}
@@ -289,7 +287,6 @@ const EditTagModal = (props) => {
           <Space>
             <Button
               theme="solid"
-              size="large"
               className="!rounded-full"
               onClick={handleSave}
               loading={loading}
@@ -299,7 +296,6 @@ const EditTagModal = (props) => {
             </Button>
             <Button
               theme="light"
-              size="large"
               className="!rounded-full"
               type="primary"
               onClick={handleClose}
@@ -315,20 +311,14 @@ const EditTagModal = (props) => {
       <Spin spinning={loading}>
         <div className="p-6">
           <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-            <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-              background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
-              position: 'relative'
-            }}>
-              <div className="absolute inset-0 overflow-hidden">
-                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-              </div>
-              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                <IconBookmark size="large" style={{ color: '#ffffff' }} />
-              </div>
-              <div className="relative">
-                <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('标签信息')}</Text>
-                <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('标签的基本配置')}</div>
+            {/* Header: Tag Info */}
+            <div className="flex items-center mb-2">
+              <Avatar size="small" color="blue" className="mr-2 shadow-md">
+                <IconBookmark size={16} />
+              </Avatar>
+              <div>
+                <Text className="text-lg font-medium">{t('标签信息')}</Text>
+                <div className="text-xs text-gray-600">{t('标签的基本配置')}</div>
               </div>
             </div>
 
@@ -345,7 +335,6 @@ const EditTagModal = (props) => {
                   value={inputs.new_tag}
                   onChange={(value) => setInputs({ ...inputs, new_tag: value })}
                   placeholder={t('请输入新标签，留空则解散标签')}
-                  size="large"
                   className="!rounded-lg"
                 />
               </div>
@@ -353,20 +342,14 @@ const EditTagModal = (props) => {
           </Card>
 
           <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-            <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-              background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
-              position: 'relative'
-            }}>
-              <div className="absolute inset-0 overflow-hidden">
-                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-              </div>
-              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                <IconCode size="large" style={{ color: '#ffffff' }} />
-              </div>
-              <div className="relative">
-                <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('模型配置')}</Text>
-                <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('模型选择和映射设置')}</div>
+            {/* Header: Model Config */}
+            <div className="flex items-center mb-2">
+              <Avatar size="small" color="purple" className="mr-2 shadow-md">
+                <IconCode size={16} />
+              </Avatar>
+              <div>
+                <Text className="text-lg font-medium">{t('模型配置')}</Text>
+                <div className="text-xs text-gray-600">{t('模型选择和映射设置')}</div>
               </div>
             </div>
 
@@ -387,7 +370,6 @@ const EditTagModal = (props) => {
                   onChange={(value) => handleInputChange('models', value)}
                   value={inputs.models}
                   optionList={modelOptions}
-                  size="large"
                   className="!rounded-lg"
                 />
               </div>
@@ -402,7 +384,6 @@ const EditTagModal = (props) => {
                   placeholder={t('输入自定义模型名称')}
                   value={customModel}
                   onChange={(value) => setCustomModel(value.trim())}
-                  size="large"
                   className="!rounded-lg"
                 />
               </div>
@@ -442,20 +423,14 @@ const EditTagModal = (props) => {
           </Card>
 
           <Card className="!rounded-2xl shadow-sm border-0">
-            <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-              background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
-              position: 'relative'
-            }}>
-              <div className="absolute inset-0 overflow-hidden">
-                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-              </div>
-              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                <IconUser size="large" style={{ color: '#ffffff' }} />
-              </div>
-              <div className="relative">
-                <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('分组设置')}</Text>
-                <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('用户分组配置')}</div>
+            {/* Header: Group Settings */}
+            <div className="flex items-center mb-2">
+              <Avatar size="small" color="green" className="mr-2 shadow-md">
+                <IconUser size={16} />
+              </Avatar>
+              <div>
+                <Text className="text-lg font-medium">{t('分组设置')}</Text>
+                <div className="text-xs text-gray-600">{t('用户分组配置')}</div>
               </div>
             </div>
 
@@ -471,7 +446,6 @@ const EditTagModal = (props) => {
                   onChange={(value) => handleInputChange('groups', value)}
                   value={inputs.groups}
                   optionList={groupOptions}
-                  size="large"
                   className="!rounded-lg"
                 />
               </div>

web/src/pages/Redemption/EditRedemption.js

@@ -22,6 +22,7 @@ import {
   Tag,
   Form,
   DatePicker,
+  Avatar,
 } from '@douyinfe/semi-ui';
 import {
   IconCreditCard,
@@ -157,10 +158,7 @@ const EditRedemption = (props) => {
           borderBottom: '1px solid var(--semi-color-border)',
           padding: '24px'
         }}
-        bodyStyle={{
-          backgroundColor: 'var(--semi-color-bg-0)',
-          padding: '0'
-        }}
+        bodyStyle={{ padding: '0' }}
         visible={props.visiable}
         width={isMobile() ? '100%' : 600}
         footer={
@@ -168,7 +166,6 @@ const EditRedemption = (props) => {
             <Space>
               <Button
                 theme="solid"
-                size="large"
                 className="!rounded-full"
                 onClick={submit}
                 icon={<IconSave />}
@@ -178,7 +175,6 @@ const EditRedemption = (props) => {
               </Button>
               <Button
                 theme="light"
-                size="large"
                 className="!rounded-full"
                 type="primary"
                 onClick={handleCancel}
@@ -195,20 +191,14 @@ const EditRedemption = (props) => {
         <Spin spinning={loading}>
           <div className="p-6">
             <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconGift size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('基本信息')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('设置兑换码的基本信息')}</div>
+              {/* Header: Basic Info */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="blue" className="mr-2 shadow-md">
+                  <IconGift size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
+                  <div className="text-xs text-gray-600">{t('设置兑换码的基本信息')}</div>
                 </div>
               </div>
 
@@ -220,7 +210,6 @@ const EditRedemption = (props) => {
                     onChange={(value) => handleInputChange('name', value)}
                     value={name}
                     autoComplete="new-password"
-                    size="large"
                     className="!rounded-lg"
                     showClear
                     required={!isEdit}
@@ -241,7 +230,6 @@ const EditRedemption = (props) => {
                         handleInputChange('expired_time', timestamp);
                       }
                     }}
-                    size="large"
                     className="!rounded-lg w-full"
                   />
                 </div>
@@ -249,20 +237,14 @@ const EditRedemption = (props) => {
             </Card>
 
             <Card className="!rounded-2xl shadow-sm border-0">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconCreditCard size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('额度设置')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('设置兑换码的额度和数量')}</div>
+              {/* Header: Quota Settings */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="green" className="mr-2 shadow-md">
+                  <IconCreditCard size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('额度设置')}</Text>
+                  <div className="text-xs text-gray-600">{t('设置兑换码的额度和数量')}</div>
                 </div>
               </div>
 
@@ -278,7 +260,6 @@ const EditRedemption = (props) => {
                     value={quota}
                     autoComplete="new-password"
                     type="number"
-                    size="large"
                     className="w-full !rounded-lg"
                     prefix={<IconCreditCard />}
                     data={[
@@ -301,7 +282,6 @@ const EditRedemption = (props) => {
                       value={count}
                       autoComplete="new-password"
                       type="number"
-                      size="large"
                       className="!rounded-lg"
                       prefix={<IconPlusCircle />}
                     />

web/src/pages/Token/EditToken.js

@@ -24,6 +24,7 @@ import {
   Typography,
   Card,
   Tag,
+  Avatar,
 } from '@douyinfe/semi-ui';
 import {
   IconClock,
@@ -300,10 +301,7 @@ const EditToken = (props) => {
         borderBottom: '1px solid var(--semi-color-border)',
         padding: '24px',
       }}
-      bodyStyle={{
-        backgroundColor: 'var(--semi-color-bg-0)',
-        padding: '0',
-      }}
+      bodyStyle={{ padding: '0' }}
       visible={props.visiable}
       width={isMobile() ? '100%' : 600}
       footer={
@@ -311,7 +309,6 @@ const EditToken = (props) => {
           <Space>
             <Button
               theme='solid'
-              size='large'
               className='!rounded-full'
               onClick={submit}
               icon={<IconSave />}
@@ -321,7 +318,6 @@ const EditToken = (props) => {
             </Button>
             <Button
               theme='light'
-              size='large'
               className='!rounded-full'
               type='primary'
               onClick={handleCancel}
@@ -338,34 +334,14 @@ const EditToken = (props) => {
       <Spin spinning={loading}>
         <div className='p-6'>
           <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-            <div
-              className='flex items-center mb-4 p-6 rounded-xl'
-              style={{
-                background:
-                  'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
-                position: 'relative',
-              }}
-            >
-              <div className='absolute inset-0 overflow-hidden'>
-                <div className='absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full'></div>
-                <div className='absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full'></div>
-              </div>
-              <div className='w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative'>
-                <IconPlusCircle size='large' style={{ color: '#ffffff' }} />
-              </div>
-              <div className='relative'>
-                <Text
-                  style={{ color: '#ffffff' }}
-                  className='text-lg font-medium'
-                >
-                  {t('基本信息')}
-                </Text>
-                <div
-                  style={{ color: '#ffffff' }}
-                  className='text-sm opacity-80'
-                >
-                  {t('设置令牌的基本信息')}
-                </div>
+            {/* Header: Basic Info */}
+            <div className='flex items-center mb-2'>
+              <Avatar size='small' color='blue' className='mr-2 shadow-md'>
+                <IconPlusCircle size={16} />
+              </Avatar>
+              <div>
+                <Text className='text-lg font-medium'>{t('基本信息')}</Text>
+                <div className='text-xs text-gray-600'>{t('设置令牌的基本信息')}</div>
               </div>
             </div>
 
@@ -379,7 +355,6 @@ const EditToken = (props) => {
                   onChange={(value) => handleInputChange('name', value)}
                   value={name}
                   autoComplete='new-password'
-                  size='large'
                   className='!rounded-lg'
                   showClear
                   required
@@ -400,7 +375,6 @@ const EditToken = (props) => {
                     autoComplete='new-password'
                     type='dateTime'
                     className='w-full !rounded-lg'
-                    size='large'
                     prefix={<IconCalendar />}
                   />
                 </div>
@@ -447,34 +421,14 @@ const EditToken = (props) => {
           </Card>
 
           <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-            <div
-              className='flex items-center mb-4 p-6 rounded-xl'
-              style={{
-                background:
-                  'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
-                position: 'relative',
-              }}
-            >
-              <div className='absolute inset-0 overflow-hidden'>
-                <div className='absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full'></div>
-                <div className='absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full'></div>
-              </div>
-              <div className='w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative'>
-                <IconCreditCard size='large' style={{ color: '#ffffff' }} />
-              </div>
-              <div className='relative'>
-                <Text
-                  style={{ color: '#ffffff' }}
-                  className='text-lg font-medium'
-                >
-                  {t('额度设置')}
-                </Text>
-                <div
-                  style={{ color: '#ffffff' }}
-                  className='text-sm opacity-80'
-                >
-                  {t('设置令牌可用额度和数量')}
-                </div>
+            {/* Header: Quota Settings */}
+            <div className='flex items-center mb-2'>
+              <Avatar size='small' color='green' className='mr-2 shadow-md'>
+                <IconCreditCard size={16} />
+              </Avatar>
+              <div>
+                <Text className='text-lg font-medium'>{t('额度设置')}</Text>
+                <div className='text-xs text-gray-600'>{t('设置令牌可用额度和数量')}</div>
               </div>
             </div>
 
@@ -500,7 +454,6 @@ const EditToken = (props) => {
                   value={remain_quota}
                   autoComplete='new-password'
                   type='number'
-                  size='large'
                   className='w-full !rounded-lg'
                   prefix={<IconCreditCard />}
                   data={[
@@ -528,7 +481,6 @@ const EditToken = (props) => {
                     autoComplete='off'
                     type='number'
                     className='w-full !rounded-lg'
-                    size='large'
                     prefix={<IconPlusCircle />}
                     data={[
                       { value: 10, label: t('10个') },
@@ -555,34 +507,14 @@ const EditToken = (props) => {
           </Card>
 
           <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-            <div
-              className='flex items-center mb-4 p-6 rounded-xl'
-              style={{
-                background:
-                  'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
-                position: 'relative',
-              }}
-            >
-              <div className='absolute inset-0 overflow-hidden'>
-                <div className='absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full'></div>
-                <div className='absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full'></div>
-              </div>
-              <div className='w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative'>
-                <IconLink size='large' style={{ color: '#ffffff' }} />
-              </div>
-              <div className='relative'>
-                <Text
-                  style={{ color: '#ffffff' }}
-                  className='text-lg font-medium'
-                >
-                  {t('访问限制')}
-                </Text>
-                <div
-                  style={{ color: '#ffffff' }}
-                  className='text-sm opacity-80'
-                >
-                  {t('设置令牌的访问限制')}
-                </div>
+            {/* Header: Access Limits */}
+            <div className='flex items-center mb-2'>
+              <Avatar size='small' color='purple' className='mr-2 shadow-md'>
+                <IconLink size={16} />
+              </Avatar>
+              <div>
+                <Text className='text-lg font-medium'>{t('访问限制')}</Text>
+                <div className='text-xs text-gray-600'>{t('设置令牌的访问限制')}</div>
               </div>
             </div>
 
@@ -627,7 +559,6 @@ const EditToken = (props) => {
                   onChange={(value) => handleInputChange('model_limits', value)}
                   value={inputs.model_limits}
                   multiple
-                  size='large'
                   className='w-full !rounded-lg'
                   prefix={<IconServer />}
                   optionList={models}
@@ -642,34 +573,14 @@ const EditToken = (props) => {
           </Card>
 
           <Card className='!rounded-2xl shadow-sm border-0'>
-            <div
-              className='flex items-center mb-4 p-6 rounded-xl'
-              style={{
-                background:
-                  'linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%)',
-                position: 'relative',
-              }}
-            >
-              <div className='absolute inset-0 overflow-hidden'>
-                <div className='absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full'></div>
-                <div className='absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full'></div>
-              </div>
-              <div className='w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative'>
-                <IconUserGroup size='large' style={{ color: '#ffffff' }} />
-              </div>
-              <div className='relative'>
-                <Text
-                  style={{ color: '#ffffff' }}
-                  className='text-lg font-medium'
-                >
-                  {t('分组信息')}
-                </Text>
-                <div
-                  style={{ color: '#ffffff' }}
-                  className='text-sm opacity-80'
-                >
-                  {t('设置令牌的分组')}
-                </div>
+            {/* Header: Group Info */}
+            <div className='flex items-center mb-2'>
+              <Avatar size='small' color='orange' className='mr-2 shadow-md'>
+                <IconUserGroup size={16} />
+              </Avatar>
+              <div>
+                <Text className='text-lg font-medium'>{t('分组信息')}</Text>
+                <div className='text-xs text-gray-600'>{t('设置令牌的分组')}</div>
               </div>
             </div>
 
@@ -683,7 +594,6 @@ const EditToken = (props) => {
                   onChange={(value) => handleInputChange('group', value)}
                   renderOptionItem={renderGroupOption}
                   value={inputs.group}
-                  size='large'
                   className='w-full !rounded-lg'
                   prefix={<IconUserGroup />}
                   optionList={groups}
@@ -692,7 +602,6 @@ const EditToken = (props) => {
                 <Select
                   placeholder={t('管理员未设置用户可选分组')}
                   disabled={true}
-                  size='large'
                   className='w-full !rounded-lg'
                   prefix={<IconUserGroup />}
                 />

web/src/pages/User/AddUser.js

@@ -8,7 +8,8 @@ import {
   Spin,
   Typography,
   Card,
-  Tag
+  Tag,
+  Avatar
 } from '@douyinfe/semi-ui';
 import {
   IconUser,
@@ -78,10 +79,7 @@ const AddUser = (props) => {
           borderBottom: '1px solid var(--semi-color-border)',
           padding: '24px'
         }}
-        bodyStyle={{
-          backgroundColor: 'var(--semi-color-bg-0)',
-          padding: '0'
-        }}
+        bodyStyle={{ padding: '0' }}
         visible={props.visible}
         width={isMobile() ? '100%' : 600}
         footer={
@@ -89,7 +87,6 @@ const AddUser = (props) => {
             <Space>
               <Button
                 theme="solid"
-                size="large"
                 className="!rounded-full"
                 onClick={submit}
                 icon={<IconSave />}
@@ -99,7 +96,6 @@ const AddUser = (props) => {
               </Button>
               <Button
                 theme="light"
-                size="large"
                 className="!rounded-full"
                 type="primary"
                 onClick={handleCancel}
@@ -116,20 +112,13 @@ const AddUser = (props) => {
         <Spin spinning={loading}>
           <div className="p-6">
             <Card className="!rounded-2xl shadow-sm border-0">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconUserAdd size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('用户信息')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('创建新用户账户')}</div>
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="blue" className="mr-2 shadow-md">
+                  <IconUserAdd size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('用户信息')}</Text>
+                  <div className="text-xs text-gray-600">{t('创建新用户账户')}</div>
                 </div>
               </div>
 
@@ -141,7 +130,6 @@ const AddUser = (props) => {
                     onChange={(value) => handleInputChange('username', value)}
                     value={username}
                     autoComplete="off"
-                    size="large"
                     className="!rounded-lg"
                     prefix={<IconUser />}
                     showClear
@@ -156,7 +144,6 @@ const AddUser = (props) => {
                     onChange={(value) => handleInputChange('display_name', value)}
                     value={display_name}
                     autoComplete="off"
-                    size="large"
                     className="!rounded-lg"
                     prefix={<IconUser />}
                     showClear
@@ -171,7 +158,6 @@ const AddUser = (props) => {
                     onChange={(value) => handleInputChange('password', value)}
                     value={password}
                     autoComplete="off"
-                    size="large"
                     className="!rounded-lg"
                     prefix={<IconKey />}
                     required
@@ -185,7 +171,6 @@ const AddUser = (props) => {
                     onChange={(value) => handleInputChange('remark', value)}
                     value={remark}
                     autoComplete="off"
-                    size="large"
                     className="!rounded-lg"
                     prefix={<IconEdit />}
                     showClear

web/src/pages/User/EditUser.js

@@ -12,6 +12,7 @@ import {
   Typography,
   Card,
   Tag,
+  Avatar,
 } from '@douyinfe/semi-ui';
 import {
   IconUser,
@@ -155,10 +156,7 @@ const EditUser = (props) => {
           borderBottom: '1px solid var(--semi-color-border)',
           padding: '24px'
         }}
-        bodyStyle={{
-          backgroundColor: 'var(--semi-color-bg-0)',
-          padding: '0'
-        }}
+        bodyStyle={{ padding: '0' }}
         visible={props.visible}
         width={isMobile() ? '100%' : 600}
         footer={
@@ -166,7 +164,6 @@ const EditUser = (props) => {
             <Space>
               <Button
                 theme="solid"
-                size="large"
                 className="!rounded-full"
                 onClick={submit}
                 icon={<IconSave />}
@@ -176,7 +173,6 @@ const EditUser = (props) => {
               </Button>
               <Button
                 theme="light"
-                size="large"
                 className="!rounded-full"
                 type="primary"
                 onClick={handleCancel}
@@ -193,20 +189,14 @@ const EditUser = (props) => {
         <Spin spinning={loading}>
           <div className="p-6">
             <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconUser size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('基本信息')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('用户的基本账户信息')}</div>
+              {/* Header: Basic Info */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="blue" className="mr-2 shadow-md">
+                  <IconUser size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
+                  <div className="text-xs text-gray-600">{t('用户的基本账户信息')}</div>
                 </div>
               </div>
 
@@ -218,7 +208,6 @@ const EditUser = (props) => {
                     onChange={(value) => handleInputChange('username', value)}
                     value={username}
                     autoComplete="new-password"
-                    size="large"
                     className="!rounded-lg"
                     showClear
                   />
@@ -232,7 +221,6 @@ const EditUser = (props) => {
                     onChange={(value) => handleInputChange('password', value)}
                     value={password}
                     autoComplete="new-password"
-                    size="large"
                     className="!rounded-lg"
                     prefix={<IconKey />}
                   />
@@ -245,7 +233,6 @@ const EditUser = (props) => {
                     onChange={(value) => handleInputChange('display_name', value)}
                     value={display_name}
                     autoComplete="new-password"
-                    size="large"
                     className="!rounded-lg"
                     showClear
                   />
@@ -258,7 +245,6 @@ const EditUser = (props) => {
                     onChange={(value) => handleInputChange('remark', value)}
                     value={remark}
                     autoComplete="off"
-                    size="large"
                     className="!rounded-lg"
                     prefix={<IconEdit />}
                     showClear
@@ -269,20 +255,14 @@ const EditUser = (props) => {
 
             {userId && (
               <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-                <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                  background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
-                  position: 'relative'
-                }}>
-                  <div className="absolute inset-0 overflow-hidden">
-                    <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                    <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                  </div>
-                  <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                    <IconUserGroup size="large" style={{ color: '#ffffff' }} />
-                  </div>
-                  <div className="relative">
-                    <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('权限设置')}</Text>
-                    <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('用户分组和额度管理')}</div>
+                {/* Header: Permission Settings */}
+                <div className="flex items-center mb-2">
+                  <Avatar size="small" color="green" className="mr-2 shadow-md">
+                    <IconUserGroup size={16} />
+                  </Avatar>
+                  <div>
+                    <Text className="text-lg font-medium">{t('权限设置')}</Text>
+                    <div className="text-xs text-gray-600">{t('用户分组和额度管理')}</div>
                   </div>
                 </div>
 
@@ -300,7 +280,6 @@ const EditUser = (props) => {
                       value={inputs.group}
                       autoComplete="new-password"
                       optionList={groupOptions}
-                      size="large"
                       className="w-full !rounded-lg"
                       prefix={<IconUserGroup />}
                     />
@@ -318,13 +297,11 @@ const EditUser = (props) => {
                         value={quota}
                         type="number"
                         autoComplete="new-password"
-                        size="large"
                         className="flex-1 !rounded-lg"
                         prefix={<IconCreditCard />}
                       />
                       <Button
                         onClick={openAddQuotaModal}
-                        size="large"
                         className="!rounded-lg"
                         icon={<IconPlus />}
                       >
@@ -337,20 +314,14 @@ const EditUser = (props) => {
             )}
 
             <Card className="!rounded-2xl shadow-sm border-0">
-              <div className="flex items-center mb-4 p-6 rounded-xl" style={{
-                background: 'linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%)',
-                position: 'relative'
-              }}>
-                <div className="absolute inset-0 overflow-hidden">
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
-                </div>
-                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 relative">
-                  <IconLink size="large" style={{ color: '#ffffff' }} />
-                </div>
-                <div className="relative">
-                  <Text style={{ color: '#ffffff' }} className="text-lg font-medium">{t('绑定信息')}</Text>
-                  <div style={{ color: '#ffffff' }} className="text-sm opacity-80">{t('第三方账户绑定状态（只读）')}</div>
+              {/* Header: Bindings */}
+              <div className="flex items-center mb-2">
+                <Avatar size="small" color="purple" className="mr-2 shadow-md">
+                  <IconLink size={16} />
+                </Avatar>
+                <div>
+                  <Text className="text-lg font-medium">{t('绑定信息')}</Text>
+                  <div className="text-xs text-gray-600">{t('第三方账户绑定状态（只读）')}</div>
                 </div>
               </div>
 
@@ -364,7 +335,6 @@ const EditUser = (props) => {
                       '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
                     )}
                     readonly
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -377,7 +347,6 @@ const EditUser = (props) => {
                       '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
                     )}
                     readonly
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -391,7 +360,6 @@ const EditUser = (props) => {
                       '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
                     )}
                     readonly
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -405,7 +373,6 @@ const EditUser = (props) => {
                       '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
                     )}
                     readonly
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -419,7 +386,6 @@ const EditUser = (props) => {
                       '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
                     )}
                     readonly
-                    size="large"
                     className="!rounded-lg"
                   />
                 </div>
@@ -458,7 +424,6 @@ const EditUser = (props) => {
           value={addQuotaLocal}
           type="number"
           autoComplete="new-password"
-          size="large"
           className="!rounded-lg"
           prefix={<IconCreditCard />}
         />