🖼️feat(ui): unify card header styles across edit pages

This commit standardizes the card header design across multiple edit pages
to create a consistent and modern UI experience.

Changes made:
- Add gradient background colors to card headers
- Implement decorative circular elements for visual appeal
- Update icon colors to white with semi-transparent backgrounds
- Standardize text colors and opacity for better readability
- Add consistent padding and border radius
- Maintain unique color schemes for different functional sections

Modified files:
- EditChannel.js
- EditRedemption.js
- EditToken.js
- EditUser.js
- AddUser.js

The new design features:
- Blue gradient for basic information sections
- Green gradient for quota/permission settings
- Purple gradient for access restrictions
- Orange gradient for binding/group information
- Consistent layout structure across all edit pages

This update improves visual hierarchy and maintains brand consistency
while enhancing the overall user experience.

web/src/pages/Redemption/EditRedemption.js

@@ -191,13 +191,20 @@ 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">
-                <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
-                  <IconGift size="large" className="text-blue-500" />
+              <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>
-                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
-                  <div className="text-gray-500 text-sm">{t('设置兑换码的基本信息')}</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>
                 </div>
               </div>
 
@@ -219,13 +226,20 @@ const EditRedemption = (props) => {
             </Card>
 
             <Card className="!rounded-2xl shadow-sm border-0">
-              <div className="flex items-center mb-4">
-                <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
-                  <IconCreditCard size="large" className="text-green-500" />
+              <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>
-                  <Text className="text-lg font-medium">{t('额度设置')}</Text>
-                  <div className="text-gray-500 text-sm">{t('设置兑换码的额度和数量')}</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>
                 </div>
               </div>
 

web/src/pages/Token/EditToken.js

@@ -312,13 +312,20 @@ 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">
-              <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
-                <IconPlusCircle size="large" className="text-blue-500" />
+            <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>
-                <Text className="text-lg font-medium">{t('基本信息')}</Text>
-                <div className="text-gray-500 text-sm">{t('设置令牌的基本信息')}</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>
               </div>
             </div>
 
@@ -394,13 +401,20 @@ const EditToken = (props) => {
           </Card>
 
           <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-            <div className="flex items-center mb-4">
-              <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
-                <IconCreditCard size="large" className="text-green-500" />
+            <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>
-                <Text className="text-lg font-medium">{t('额度设置')}</Text>
-                <div className="text-gray-500 text-sm">{t('设置令牌可用额度和数量')}</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>
               </div>
             </div>
 
@@ -475,13 +489,20 @@ const EditToken = (props) => {
           </Card>
 
           <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-            <div className="flex items-center mb-4">
-              <div className="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center mr-4">
-                <IconLink size="large" className="text-purple-500" />
+            <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>
-                <Text className="text-lg font-medium">{t('访问限制')}</Text>
-                <div className="text-gray-500 text-sm">{t('设置令牌的访问限制')}</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>
               </div>
             </div>
 
@@ -526,13 +547,20 @@ const EditToken = (props) => {
           </Card>
 
           <Card className="!rounded-2xl shadow-sm border-0">
-            <div className="flex items-center mb-4">
-              <div className="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center mr-4">
-                <IconUserGroup size="large" className="text-orange-500" />
+            <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>
-                <Text className="text-lg font-medium">{t('分组信息')}</Text>
-                <div className="text-gray-500 text-sm">{t('设置令牌的分组')}</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>
               </div>
             </div>
 

web/src/pages/User/AddUser.js

@@ -114,13 +114,20 @@ 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">
-                <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
-                  <IconUserAdd size="large" className="text-green-500" />
+              <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>
-                  <Text className="text-lg font-medium">{t('用户信息')}</Text>
-                  <div className="text-gray-500 text-sm">{t('创建新用户账户')}</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>
               </div>
 

web/src/pages/User/EditUser.js

@@ -191,13 +191,20 @@ 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">
-                <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-4">
-                  <IconUser size="large" className="text-blue-500" />
+              <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>
-                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
-                  <div className="text-gray-500 text-sm">{t('用户的基本账户信息')}</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>
                 </div>
               </div>
 
@@ -246,13 +253,20 @@ const EditUser = (props) => {
 
             {userId && (
               <Card className="!rounded-2xl shadow-sm border-0 mb-6">
-                <div className="flex items-center mb-4">
-                  <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-4">
-                    <IconUserGroup size="large" className="text-green-500" />
+                <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>
-                    <Text className="text-lg font-medium">{t('权限设置')}</Text>
-                    <div className="text-gray-500 text-sm">{t('用户分组和额度管理')}</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>
                   </div>
                 </div>
 
@@ -307,13 +321,20 @@ const EditUser = (props) => {
             )}
 
             <Card className="!rounded-2xl shadow-sm border-0">
-              <div className="flex items-center mb-4">
-                <div className="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center mr-4">
-                  <IconLink size="large" className="text-orange-500" />
+              <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>
-                  <Text className="text-lg font-medium">{t('绑定信息')}</Text>
-                  <div className="text-gray-500 text-sm">{t('第三方账户绑定状态（只读）')}</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>
                 </div>
               </div>