Skip to content

phsl / new-api

Go to a project
Commit f80eb958 by t0ng7u
Options

🎨 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.
parent a976d9d3
Showing with 185 additions and 372 deletions
web/src/helpers/render.js
...@@ -883,7 +883,7 @@ function getEffectiveRatio(groupRatio, user_group_ratio) { ...@@ -883,7 +883,7 @@ function getEffectiveRatio(groupRatio, user_group_ratio) {
? i18next.t('专属倍率') ? i18next.t('专属倍率')
: i18next.t('分组倍率'); : i18next.t('分组倍率');
const effectiveRatio = useUserGroupRatio ? user_group_ratio : groupRatio; const effectiveRatio = useUserGroupRatio ? user_group_ratio : groupRatio;
return { return {
ratio: effectiveRatio, ratio: effectiveRatio,
label: ratioLabel, label: ratioLabel,
...@@ -1074,25 +1074,25 @@ export function renderModelPrice( ...@@ -1074,25 +1074,25 @@ export function renderModelPrice(
const extraServices = [ const extraServices = [
webSearch && webSearchCallCount > 0 webSearch && webSearchCallCount > 0
? i18next.t( ? i18next.t(
' + Web搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}', ' + Web搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}',
{ {
count: webSearchCallCount, count: webSearchCallCount,
price: webSearchPrice, price: webSearchPrice,
ratio: groupRatio, ratio: groupRatio,
ratioType: ratioLabel, ratioType: ratioLabel,
}, },
) )
: '', : '',
fileSearch && fileSearchCallCount > 0 fileSearch && fileSearchCallCount > 0
? i18next.t( ? i18next.t(
' + 文件搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}', ' + 文件搜索 {{count}}次 / 1K 次 * ${{price}} * {{ratioType}} {{ratio}}',
{ {
count: fileSearchCallCount, count: fileSearchCallCount,
price: fileSearchPrice, price: fileSearchPrice,
ratio: groupRatio, ratio: groupRatio,
ratioType: ratioLabel, ratioType: ratioLabel,
}, },
) )
: '', : '',
].join(''); ].join('');
...@@ -1281,10 +1281,10 @@ export function renderAudioModelPrice( ...@@ -1281,10 +1281,10 @@ export function renderAudioModelPrice(
let audioPrice = let audioPrice =
(audioInputTokens / 1000000) * inputRatioPrice * audioRatio * groupRatio + (audioInputTokens / 1000000) * inputRatioPrice * audioRatio * groupRatio +
(audioCompletionTokens / 1000000) * (audioCompletionTokens / 1000000) *
inputRatioPrice * inputRatioPrice *
audioRatio * audioRatio *
audioCompletionRatio * audioCompletionRatio *
groupRatio; groupRatio;
let price = textPrice + audioPrice; let price = textPrice + audioPrice;
return ( return (
<> <>
...@@ -1340,27 +1340,27 @@ export function renderAudioModelPrice( ...@@ -1340,27 +1340,27 @@ export function renderAudioModelPrice(
<p> <p>
{cacheTokens > 0 {cacheTokens > 0
? i18next.t( ? i18next.t(
'文字提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}', '文字提示 {{nonCacheInput}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
{ {
nonCacheInput: inputTokens - cacheTokens, nonCacheInput: inputTokens - cacheTokens,
cacheInput: cacheTokens, cacheInput: cacheTokens,
cachePrice: inputRatioPrice * cacheRatio, cachePrice: inputRatioPrice * cacheRatio,
price: inputRatioPrice, price: inputRatioPrice,
completion: completionTokens, completion: completionTokens,
compPrice: completionRatioPrice, compPrice: completionRatioPrice,
total: textPrice.toFixed(6), total: textPrice.toFixed(6),
}, },
) )
: i18next.t( : i18next.t(
'文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}', '文字提示 {{input}} tokens / 1M tokens * ${{price}} + 文字补全 {{completion}} tokens / 1M tokens * ${{compPrice}} = ${{total}}',
{ {
input: inputTokens, input: inputTokens,
price: inputRatioPrice, price: inputRatioPrice,
completion: completionTokens, completion: completionTokens,
compPrice: completionRatioPrice, compPrice: completionRatioPrice,
total: textPrice.toFixed(6), total: textPrice.toFixed(6),
}, },
)} )}
</p> </p>
<p> <p>
{i18next.t( {i18next.t(
...@@ -1397,7 +1397,7 @@ export function renderQuotaWithPrompt(quota, digits) { ...@@ -1397,7 +1397,7 @@ export function renderQuotaWithPrompt(quota, digits) {
displayInCurrency = displayInCurrency === 'true'; displayInCurrency = displayInCurrency === 'true';
if (displayInCurrency) { if (displayInCurrency) {
return ( return (
' | ' + i18next.t('等价金额') + ': ' + renderQuota(quota, digits) + '' i18next.t('等价金额：') + renderQuota(quota, digits)
); );
} }
return ''; return '';
...@@ -1499,35 +1499,35 @@ export function renderClaudeModelPrice( ...@@ -1499,35 +1499,35 @@ export function renderClaudeModelPrice(
<p> <p>
{cacheTokens > 0 || cacheCreationTokens > 0 {cacheTokens > 0 || cacheCreationTokens > 0
? i18next.t( ? 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}} tokens / 1M tokens * ${{price}} + 缓存 {{cacheInput}} tokens / 1M tokens * ${{cachePrice}} + 缓存创建 {{cacheCreationInput}} tokens / 1M tokens * ${{cacheCreationPrice}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * {{ratioType}} {{ratio}} = ${{total}}',
{ {
nonCacheInput: nonCachedTokens, nonCacheInput: nonCachedTokens,
cacheInput: cacheTokens, cacheInput: cacheTokens,
cacheRatio: cacheRatio, cacheRatio: cacheRatio,
cacheCreationInput: cacheCreationTokens, cacheCreationInput: cacheCreationTokens,
cacheCreationRatio: cacheCreationRatio, cacheCreationRatio: cacheCreationRatio,
cachePrice: cacheRatioPrice, cachePrice: cacheRatioPrice,
cacheCreationPrice: cacheCreationRatioPrice, cacheCreationPrice: cacheCreationRatioPrice,
price: inputRatioPrice, price: inputRatioPrice,
completion: completionTokens, completion: completionTokens,
compPrice: completionRatioPrice, compPrice: completionRatioPrice,
ratio: groupRatio, ratio: groupRatio,
ratioType: ratioLabel, ratioType: ratioLabel,
total: price.toFixed(6), total: price.toFixed(6),
}, },
) )
: i18next.t( : i18next.t(
'提示 {{input}} tokens / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * {{ratioType}} {{ratio}} = ${{total}}', '提示 {{input}} tokens / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * {{ratioType}} {{ratio}} = ${{total}}',
{ {
input: inputTokens, input: inputTokens,
price: inputRatioPrice, price: inputRatioPrice,
completion: completionTokens, completion: completionTokens,
compPrice: completionRatioPrice, compPrice: completionRatioPrice,
ratio: groupRatio, ratio: groupRatio,
ratioType: ratioLabel, ratioType: ratioLabel,
total: price.toFixed(6), total: price.toFixed(6),
}, },
)} )}
</p> </p>
<p>{i18next.t('仅供参考，以实际扣费为准')}</p> <p>{i18next.t('仅供参考，以实际扣费为准')}</p>
</article> </article>
......
web/src/i18n/locales/en.json
...@@ -397,7 +397,7 @@ ...@@ -397,7 +397,7 @@
"删除用户": "Delete User", "删除用户": "Delete User",
"添加新的用户": "Add New User", "添加新的用户": "Add New User",
"自定义": "Custom", "自定义": "Custom",
"等价金额": "Equivalent Amount", "等价金额：": "Equivalent Amount: ",
"未登录或登录已过期，请重新登录": "Not logged in or login has expired, please log in again", "未登录或登录已过期，请重新登录": "Not logged in or login has expired, please log in again",
"请求次数过多，请稍后再试": "Too many requests, please try again later", "请求次数过多，请稍后再试": "Too many requests, please try again later",
"服务器内部错误，请联系管理员": "Server internal error, please contact the administrator", "服务器内部错误，请联系管理员": "Server internal error, please contact the administrator",
......
web/src/pages/Channel/EditTagModal.js
...@@ -19,6 +19,7 @@ import { ...@@ -19,6 +19,7 @@ import {
TextArea, TextArea,
Card, Card,
Tag, Tag,
Avatar,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IconSave, IconSave,
...@@ -277,10 +278,7 @@ const EditTagModal = (props) => { ...@@ -277,10 +278,7 @@ const EditTagModal = (props) => {
borderBottom: '1px solid var(--semi-color-border)', borderBottom: '1px solid var(--semi-color-border)',
padding: '24px' padding: '24px'
}} }}
bodyStyle={{ bodyStyle={{ padding: '0' }}
backgroundColor: 'var(--semi-color-bg-0)',
padding: '0'
}}
visible={visible} visible={visible}
width={600} width={600}
onCancel={handleClose} onCancel={handleClose}
...@@ -289,7 +287,6 @@ const EditTagModal = (props) => { ...@@ -289,7 +287,6 @@ const EditTagModal = (props) => {
<Space> <Space>
<Button <Button
theme="solid" theme="solid"
size="large"
className="!rounded-full" className="!rounded-full"
onClick={handleSave} onClick={handleSave}
loading={loading} loading={loading}
...@@ -299,7 +296,6 @@ const EditTagModal = (props) => { ...@@ -299,7 +296,6 @@ const EditTagModal = (props) => {
</Button> </Button>
<Button <Button
theme="light" theme="light"
size="large"
className="!rounded-full" className="!rounded-full"
type="primary" type="primary"
onClick={handleClose} onClick={handleClose}
...@@ -315,20 +311,14 @@ const EditTagModal = (props) => { ...@@ -315,20 +311,14 @@ const EditTagModal = (props) => {
<Spin spinning={loading}> <Spin spinning={loading}>
<div className="p-6"> <div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0 mb-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>
</div> </div>
...@@ -345,7 +335,6 @@ const EditTagModal = (props) => { ...@@ -345,7 +335,6 @@ const EditTagModal = (props) => {
value={inputs.new_tag} value={inputs.new_tag}
onChange={(value) => setInputs({ ...inputs, new_tag: value })} onChange={(value) => setInputs({ ...inputs, new_tag: value })}
placeholder={t('请输入新标签，留空则解散标签')} placeholder={t('请输入新标签，留空则解散标签')}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
...@@ -353,20 +342,14 @@ const EditTagModal = (props) => { ...@@ -353,20 +342,14 @@ const EditTagModal = (props) => {
</Card> </Card>
<Card className="!rounded-2xl shadow-sm border-0 mb-6"> <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>
</div> </div>
...@@ -387,7 +370,6 @@ const EditTagModal = (props) => { ...@@ -387,7 +370,6 @@ const EditTagModal = (props) => {
onChange={(value) => handleInputChange('models', value)} onChange={(value) => handleInputChange('models', value)}
value={inputs.models} value={inputs.models}
optionList={modelOptions} optionList={modelOptions}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
...@@ -402,7 +384,6 @@ const EditTagModal = (props) => { ...@@ -402,7 +384,6 @@ const EditTagModal = (props) => {
placeholder={t('输入自定义模型名称')} placeholder={t('输入自定义模型名称')}
value={customModel} value={customModel}
onChange={(value) => setCustomModel(value.trim())} onChange={(value) => setCustomModel(value.trim())}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
...@@ -442,20 +423,14 @@ const EditTagModal = (props) => { ...@@ -442,20 +423,14 @@ const EditTagModal = (props) => {
</Card> </Card>
<Card className="!rounded-2xl shadow-sm border-0"> <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>
</div> </div>
...@@ -471,7 +446,6 @@ const EditTagModal = (props) => { ...@@ -471,7 +446,6 @@ const EditTagModal = (props) => {
onChange={(value) => handleInputChange('groups', value)} onChange={(value) => handleInputChange('groups', value)}
value={inputs.groups} value={inputs.groups}
optionList={groupOptions} optionList={groupOptions}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
......
web/src/pages/Redemption/EditRedemption.js
...@@ -22,6 +22,7 @@ import { ...@@ -22,6 +22,7 @@ import {
Tag, Tag,
Form, Form,
DatePicker, DatePicker,
Avatar,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IconCreditCard, IconCreditCard,
...@@ -157,10 +158,7 @@ const EditRedemption = (props) => { ...@@ -157,10 +158,7 @@ const EditRedemption = (props) => {
borderBottom: '1px solid var(--semi-color-border)', borderBottom: '1px solid var(--semi-color-border)',
padding: '24px' padding: '24px'
}} }}
bodyStyle={{ bodyStyle={{ padding: '0' }}
backgroundColor: 'var(--semi-color-bg-0)',
padding: '0'
}}
visible={props.visiable} visible={props.visiable}
width={isMobile() ? '100%' : 600} width={isMobile() ? '100%' : 600}
footer={ footer={
...@@ -168,7 +166,6 @@ const EditRedemption = (props) => { ...@@ -168,7 +166,6 @@ const EditRedemption = (props) => {
<Space> <Space>
<Button <Button
theme="solid" theme="solid"
size="large"
className="!rounded-full" className="!rounded-full"
onClick={submit} onClick={submit}
icon={<IconSave />} icon={<IconSave />}
...@@ -178,7 +175,6 @@ const EditRedemption = (props) => { ...@@ -178,7 +175,6 @@ const EditRedemption = (props) => {
</Button> </Button>
<Button <Button
theme="light" theme="light"
size="large"
className="!rounded-full" className="!rounded-full"
type="primary" type="primary"
onClick={handleCancel} onClick={handleCancel}
...@@ -195,20 +191,14 @@ const EditRedemption = (props) => { ...@@ -195,20 +191,14 @@ const EditRedemption = (props) => {
<Spin spinning={loading}> <Spin spinning={loading}>
<div className="p-6"> <div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0 mb-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>
</div> </div>
...@@ -220,7 +210,6 @@ const EditRedemption = (props) => { ...@@ -220,7 +210,6 @@ const EditRedemption = (props) => {
onChange={(value) => handleInputChange('name', value)} onChange={(value) => handleInputChange('name', value)}
value={name} value={name}
autoComplete="new-password" autoComplete="new-password"
size="large"
className="!rounded-lg" className="!rounded-lg"
showClear showClear
required={!isEdit} required={!isEdit}
...@@ -241,7 +230,6 @@ const EditRedemption = (props) => { ...@@ -241,7 +230,6 @@ const EditRedemption = (props) => {
handleInputChange('expired_time', timestamp); handleInputChange('expired_time', timestamp);
} }
}} }}
size="large"
className="!rounded-lg w-full" className="!rounded-lg w-full"
/> />
</div> </div>
...@@ -249,20 +237,14 @@ const EditRedemption = (props) => { ...@@ -249,20 +237,14 @@ const EditRedemption = (props) => {
</Card> </Card>
<Card className="!rounded-2xl shadow-sm border-0"> <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>
</div> </div>
...@@ -278,7 +260,6 @@ const EditRedemption = (props) => { ...@@ -278,7 +260,6 @@ const EditRedemption = (props) => {
value={quota} value={quota}
autoComplete="new-password" autoComplete="new-password"
type="number" type="number"
size="large"
className="w-full !rounded-lg" className="w-full !rounded-lg"
prefix={<IconCreditCard />} prefix={<IconCreditCard />}
data={[ data={[
...@@ -301,7 +282,6 @@ const EditRedemption = (props) => { ...@@ -301,7 +282,6 @@ const EditRedemption = (props) => {
value={count} value={count}
autoComplete="new-password" autoComplete="new-password"
type="number" type="number"
size="large"
className="!rounded-lg" className="!rounded-lg"
prefix={<IconPlusCircle />} prefix={<IconPlusCircle />}
/> />
......
web/src/pages/User/AddUser.js
...@@ -8,7 +8,8 @@ import { ...@@ -8,7 +8,8 @@ import {
Spin, Spin,
Typography, Typography,
Card, Card,
Tag Tag,
Avatar
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IconUser, IconUser,
...@@ -78,10 +79,7 @@ const AddUser = (props) => { ...@@ -78,10 +79,7 @@ const AddUser = (props) => {
borderBottom: '1px solid var(--semi-color-border)', borderBottom: '1px solid var(--semi-color-border)',
padding: '24px' padding: '24px'
}} }}
bodyStyle={{ bodyStyle={{ padding: '0' }}
backgroundColor: 'var(--semi-color-bg-0)',
padding: '0'
}}
visible={props.visible} visible={props.visible}
width={isMobile() ? '100%' : 600} width={isMobile() ? '100%' : 600}
footer={ footer={
...@@ -89,7 +87,6 @@ const AddUser = (props) => { ...@@ -89,7 +87,6 @@ const AddUser = (props) => {
<Space> <Space>
<Button <Button
theme="solid" theme="solid"
size="large"
className="!rounded-full" className="!rounded-full"
onClick={submit} onClick={submit}
icon={<IconSave />} icon={<IconSave />}
...@@ -99,7 +96,6 @@ const AddUser = (props) => { ...@@ -99,7 +96,6 @@ const AddUser = (props) => {
</Button> </Button>
<Button <Button
theme="light" theme="light"
size="large"
className="!rounded-full" className="!rounded-full"
type="primary" type="primary"
onClick={handleCancel} onClick={handleCancel}
...@@ -116,20 +112,13 @@ const AddUser = (props) => { ...@@ -116,20 +112,13 @@ const AddUser = (props) => {
<Spin spinning={loading}> <Spin spinning={loading}>
<div className="p-6"> <div className="p-6">
<Card className="!rounded-2xl shadow-sm border-0"> <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>
</div> </div>
...@@ -141,7 +130,6 @@ const AddUser = (props) => { ...@@ -141,7 +130,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('username', value)} onChange={(value) => handleInputChange('username', value)}
value={username} value={username}
autoComplete="off" autoComplete="off"
size="large"
className="!rounded-lg" className="!rounded-lg"
prefix={<IconUser />} prefix={<IconUser />}
showClear showClear
...@@ -156,7 +144,6 @@ const AddUser = (props) => { ...@@ -156,7 +144,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('display_name', value)} onChange={(value) => handleInputChange('display_name', value)}
value={display_name} value={display_name}
autoComplete="off" autoComplete="off"
size="large"
className="!rounded-lg" className="!rounded-lg"
prefix={<IconUser />} prefix={<IconUser />}
showClear showClear
...@@ -171,7 +158,6 @@ const AddUser = (props) => { ...@@ -171,7 +158,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('password', value)} onChange={(value) => handleInputChange('password', value)}
value={password} value={password}
autoComplete="off" autoComplete="off"
size="large"
className="!rounded-lg" className="!rounded-lg"
prefix={<IconKey />} prefix={<IconKey />}
required required
...@@ -185,7 +171,6 @@ const AddUser = (props) => { ...@@ -185,7 +171,6 @@ const AddUser = (props) => {
onChange={(value) => handleInputChange('remark', value)} onChange={(value) => handleInputChange('remark', value)}
value={remark} value={remark}
autoComplete="off" autoComplete="off"
size="large"
className="!rounded-lg" className="!rounded-lg"
prefix={<IconEdit />} prefix={<IconEdit />}
showClear showClear
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment