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

🎨 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.
f80eb958 · t0ng7u · a976d9d3 · f80eb958 · f80eb958 · f80eb958
Commit f80eb958 authored Jun 26, 2025 by t0ng7u
8 changed files
--- a/web/src/helpers/render.js
+++ b/web/src/helpers/render.js
@@ -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 '';

--- a/web/src/i18n/locales/en.json
+++ b/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",

--- a/web/src/pages/Channel/EditChannel.js
+++ b/web/src/pages/Channel/EditChannel.js
--- a/web/src/pages/Channel/EditTagModal.js
+++ b/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={{
+      bodyStyle={{ padding: '0' }}
-        backgroundColor: 'var(--semi-color-bg-0)',
-        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={{
+            {/* Header: Tag Info */}
-              background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
+            <div className="flex items-center mb-2">
-              position: 'relative'
+              <Avatar size="small" color="blue" className="mr-2 shadow-md">
-            }}>
+                <IconBookmark size={16} />
-              <div className="absolute inset-0 overflow-hidden">
+              </Avatar>
-                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+              <div>
-                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                <Text className="text-lg font-medium">{t('标签信息')}</Text>
-              </div>
+                <div className="text-xs text-gray-600">{t('标签的基本配置')}</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>
              </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={{
+            {/* Header: Model Config */}
-              background: 'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)',
+            <div className="flex items-center mb-2">
-              position: 'relative'
+              <Avatar size="small" color="purple" className="mr-2 shadow-md">
-            }}>
+                <IconCode size={16} />
-              <div className="absolute inset-0 overflow-hidden">
+              </Avatar>
-                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+              <div>
-                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                <Text className="text-lg font-medium">{t('模型配置')}</Text>
-              </div>
+                <div className="text-xs text-gray-600">{t('模型选择和映射设置')}</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>
              </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={{
+            {/* Header: Group Settings */}
-              background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
+            <div className="flex items-center mb-2">
-              position: 'relative'
+              <Avatar size="small" color="green" className="mr-2 shadow-md">
-            }}>
+                <IconUser size={16} />
-              <div className="absolute inset-0 overflow-hidden">
+              </Avatar>
-                <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+              <div>
-                <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                <Text className="text-lg font-medium">{t('分组设置')}</Text>
-              </div>
+                <div className="text-xs text-gray-600">{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>
@@ -471,7 +446,6 @@ const EditTagModal = (props) => {
                  onChange={(value) => handleInputChange('groups', value)}
                  value={inputs.groups}
                  optionList={groupOptions}
-                  size="large"
                  className="!rounded-lg"
                />
              </div>

--- a/web/src/pages/Redemption/EditRedemption.js
+++ b/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={{
+        bodyStyle={{ padding: '0' }}
-          backgroundColor: 'var(--semi-color-bg-0)',
-          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={{
+              {/* Header: Basic Info */}
-                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
+              <div className="flex items-center mb-2">
-                position: 'relative'
+                <Avatar size="small" color="blue" className="mr-2 shadow-md">
-              }}>
+                  <IconGift size={16} />
-                <div className="absolute inset-0 overflow-hidden">
+                </Avatar>
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                <div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                  <Text className="text-lg font-medium">{t('基本信息')}</Text>
-                </div>
+                  <div className="text-xs text-gray-600">{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>
@@ -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={{
+              {/* Header: Quota Settings */}
-                background: 'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)',
+              <div className="flex items-center mb-2">
-                position: 'relative'
+                <Avatar size="small" color="green" className="mr-2 shadow-md">
-              }}>
+                  <IconCreditCard size={16} />
-                <div className="absolute inset-0 overflow-hidden">
+                </Avatar>
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                <div>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                  <Text className="text-lg font-medium">{t('额度设置')}</Text>
-                </div>
+                  <div className="text-xs text-gray-600">{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>
@@ -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 />}
                    />

--- a/web/src/pages/Token/EditToken.js
+++ b/web/src/pages/Token/EditToken.js
--- a/web/src/pages/User/AddUser.js
+++ b/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={{
+        bodyStyle={{ padding: '0' }}
-          backgroundColor: 'var(--semi-color-bg-0)',
-          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={{
+              <div className="flex items-center mb-2">
-                background: 'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)',
+                <Avatar size="small" color="blue" className="mr-2 shadow-md">
-                position: 'relative'
+                  <IconUserAdd size={16} />
-              }}>
+                </Avatar>
-                <div className="absolute inset-0 overflow-hidden">
+                <div>
-                  <div className="absolute -top-10 -right-10 w-40 h-40 bg-white opacity-5 rounded-full"></div>
+                  <Text className="text-lg font-medium">{t('用户信息')}</Text>
-                  <div className="absolute -bottom-8 -left-8 w-24 h-24 bg-white opacity-10 rounded-full"></div>
+                  <div className="text-xs text-gray-600">{t('创建新用户账户')}</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>
              </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

--- a/web/src/pages/User/EditUser.js
+++ b/web/src/pages/User/EditUser.js