oadmin/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
t0ng7u
2025-06-26 16:05:13 +08:00
parent 05d9aa53ef
commit 39cb45c11c
8 changed files with 219 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
web/src/helpers/render.js
View File

@@ -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(
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(
<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) {
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(
<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>

2
web/src/i18n/locales/en.json
View File

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

122
web/src/pages/Channel/EditChannel.js
View File

@@ -25,6 +25,7 @@ import {
ImagePreview, ImagePreview,
Card, Card,
Tag, Tag,
Avatar,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { getChannelModels, copy } from '../../helpers'; import { getChannelModels, copy } from '../../helpers';
import { import {
@@ -452,10 +453,7 @@ const EditChannel = (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={
@@ -463,7 +461,6 @@ const EditChannel = (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 />}
@@ -472,7 +469,6 @@ const EditChannel = (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}
@@ -489,20 +485,14 @@ const EditChannel = (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">
}}> <IconServer 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">
<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>
</div> </div>
</div> </div>
@@ -519,7 +509,6 @@ const EditChannel = (props) => {
filter filter
searchPosition='dropdown' searchPosition='dropdown'
placeholder={t('请选择渠道类型')} placeholder={t('请选择渠道类型')}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -535,7 +524,6 @@ const EditChannel = (props) => {
}} }}
value={inputs.name} value={inputs.name}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -594,7 +582,6 @@ const EditChannel = (props) => {
}} }}
value={inputs.key} value={inputs.key}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
)} )}
@@ -616,20 +603,14 @@ const EditChannel = (props) => {
{/* API Configuration Card */} {/* API Configuration 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: API Config */}
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">
}}> <IconGlobe 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('API 配置')}</Text>
</div> <div className="text-xs text-gray-600">{t('API 地址和相关配置')}</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>
</div> </div>
</div> </div>
@@ -669,7 +650,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('base_url', value)} onChange={(value) => handleInputChange('base_url', value)}
value={inputs.base_url} value={inputs.base_url}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -681,7 +661,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('other', value)} onChange={(value) => handleInputChange('other', value)}
value={inputs.other} value={inputs.other}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -703,7 +682,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('base_url', value)} onChange={(value) => handleInputChange('base_url', value)}
value={inputs.base_url} value={inputs.base_url}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -727,7 +705,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('base_url', value)} onChange={(value) => handleInputChange('base_url', value)}
value={inputs.base_url} value={inputs.base_url}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
<Text type="tertiary" className="mt-1 text-xs"> <Text type="tertiary" className="mt-1 text-xs">
@@ -745,7 +722,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('base_url', value)} onChange={(value) => handleInputChange('base_url', value)}
value={inputs.base_url} value={inputs.base_url}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -762,7 +738,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('base_url', value)} onChange={(value) => handleInputChange('base_url', value)}
value={inputs.base_url} value={inputs.base_url}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -772,20 +747,14 @@ const EditChannel = (props) => {
{/* Model Configuration Card */} {/* Model Configuration 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>
@@ -804,7 +773,6 @@ const EditChannel = (props) => {
value={inputs.models} value={inputs.models}
autoComplete='new-password' autoComplete='new-password'
optionList={modelOptions} optionList={modelOptions}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -813,7 +781,6 @@ const EditChannel = (props) => {
<Button <Button
type='primary' type='primary'
onClick={() => handleInputChange('models', basicModels)} onClick={() => handleInputChange('models', basicModels)}
size="large"
className="!rounded-lg" className="!rounded-lg"
> >
{t('填入相关模型')} {t('填入相关模型')}
@@ -821,7 +788,6 @@ const EditChannel = (props) => {
<Button <Button
type='secondary' type='secondary'
onClick={() => handleInputChange('models', fullModels)} onClick={() => handleInputChange('models', fullModels)}
size="large"
className="!rounded-lg" className="!rounded-lg"
> >
{t('填入所有模型')} {t('填入所有模型')}
@@ -829,7 +795,6 @@ const EditChannel = (props) => {
<Button <Button
type='tertiary' type='tertiary'
onClick={() => fetchUpstreamModelList('models')} onClick={() => fetchUpstreamModelList('models')}
size="large"
className="!rounded-lg" className="!rounded-lg"
> >
{t('获取模型列表')} {t('获取模型列表')}
@@ -837,7 +802,6 @@ const EditChannel = (props) => {
<Button <Button
type='warning' type='warning'
onClick={() => handleInputChange('models', [])} onClick={() => handleInputChange('models', [])}
size="large"
className="!rounded-lg" className="!rounded-lg"
> >
{t('清除所有模型')} {t('清除所有模型')}
@@ -856,7 +820,6 @@ const EditChannel = (props) => {
showError(t('复制失败')); showError(t('复制失败'));
} }
}} }}
size="large"
className="!rounded-lg" className="!rounded-lg"
> >
{t('复制所有模型')} {t('复制所有模型')}
@@ -873,7 +836,6 @@ const EditChannel = (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>
@@ -907,7 +869,6 @@ const EditChannel = (props) => {
placeholder={t('不填则为模型列表第一个')} placeholder={t('不填则为模型列表第一个')}
onChange={(value) => handleInputChange('test_model', value)} onChange={(value) => handleInputChange('test_model', value)}
value={inputs.test_model} value={inputs.test_model}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -916,20 +877,14 @@ const EditChannel = (props) => {
{/* Advanced Settings Card */} {/* Advanced Settings 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: Advanced Settings */}
background: 'linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%)', <div className="flex items-center mb-2">
position: 'relative' <Avatar size="small" color="orange" className="mr-2 shadow-md">
}}> <IconSetting 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">
<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>
</div> </div>
</div> </div>
@@ -948,7 +903,6 @@ const EditChannel = (props) => {
value={inputs.groups} value={inputs.groups}
autoComplete='new-password' autoComplete='new-password'
optionList={groupOptions} optionList={groupOptions}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -962,7 +916,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('other', value)} onChange={(value) => handleInputChange('other', value)}
value={inputs.other} value={inputs.other}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -1004,7 +957,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('other', value)} onChange={(value) => handleInputChange('other', value)}
value={inputs.other} value={inputs.other}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -1019,7 +971,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('other', value)} onChange={(value) => handleInputChange('other', value)}
value={inputs.other} value={inputs.other}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -1034,7 +985,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('other', value)} onChange={(value) => handleInputChange('other', value)}
value={inputs.other} value={inputs.other}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -1048,7 +998,6 @@ const EditChannel = (props) => {
onChange={(value) => handleInputChange('tag', value)} onChange={(value) => handleInputChange('tag', value)}
value={inputs.tag} value={inputs.tag}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -1068,7 +1017,6 @@ const EditChannel = (props) => {
}} }}
value={inputs.priority} value={inputs.priority}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -1088,7 +1036,6 @@ const EditChannel = (props) => {
}} }}
value={inputs.weight} value={inputs.weight}
autoComplete='new-password' autoComplete='new-password'
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -1156,7 +1103,6 @@ const EditChannel = (props) => {
placeholder={t('请输入组织org-xxx')} placeholder={t('请输入组织org-xxx')}
onChange={(value) => handleInputChange('openai_organization', value)} onChange={(value) => handleInputChange('openai_organization', value)}
value={inputs.openai_organization} value={inputs.openai_organization}
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
<Text type="tertiary" className="mt-1 text-xs"> <Text type="tertiary" className="mt-1 text-xs">

78
web/src/pages/Channel/EditTagModal.js
View File

@@ -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) => {
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) => {
<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) => {
</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) => {
<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) => {
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) => {
</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) => {
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) => {
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) => {
</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) => {
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>

56
web/src/pages/Redemption/EditRedemption.js
View File

@@ -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) => {
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) => {
<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) => {
</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) => {
<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) => {
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) => {
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) => {
</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) => {
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) => {
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 />}
/> />

159
web/src/pages/Token/EditToken.js
View File

@@ -24,6 +24,7 @@ import {
Typography, Typography,
Card, Card,
Tag, Tag,
Avatar,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IconClock, IconClock,
@@ -300,10 +301,7 @@ const EditToken = (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={
@@ -311,7 +309,6 @@ const EditToken = (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 />}
@@ -321,7 +318,6 @@ const EditToken = (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}
@@ -338,34 +334,14 @@ const EditToken = (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 {/* Header: Basic Info */}
className='flex items-center mb-4 p-6 rounded-xl' <div className='flex items-center mb-2'>
style={{ <Avatar size='small' color='blue' className='mr-2 shadow-md'>
background: <IconPlusCircle size={16} />
'linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%)', </Avatar>
position: 'relative', <div>
}} <Text className='text-lg font-medium'>{t('基本信息')}</Text>
> <div className='text-xs text-gray-600'>{t('设置令牌的基本信息')}</div>
<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>
</div> </div>
</div> </div>
@@ -379,7 +355,6 @@ const EditToken = (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 required
@@ -400,7 +375,6 @@ const EditToken = (props) => {
autoComplete='new-password' autoComplete='new-password'
type='dateTime' type='dateTime'
className='w-full !rounded-lg' className='w-full !rounded-lg'
size='large'
prefix={<IconCalendar />} prefix={<IconCalendar />}
/> />
</div> </div>
@@ -447,34 +421,14 @@ const EditToken = (props) => {
</Card> </Card>
<Card className='!rounded-2xl shadow-sm border-0 mb-6'> <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
<div {/* Header: Quota Settings */}
className='flex items-center mb-4 p-6 rounded-xl' <div className='flex items-center mb-2'>
style={{ <Avatar size='small' color='green' className='mr-2 shadow-md'>
background: <IconCreditCard size={16} />
'linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)', </Avatar>
position: 'relative', <div>
}} <Text className='text-lg font-medium'>{t('额度设置')}</Text>
> <div className='text-xs text-gray-600'>{t('设置令牌可用额度和数量')}</div>
<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>
</div> </div>
</div> </div>
@@ -500,7 +454,6 @@ const EditToken = (props) => {
value={remain_quota} value={remain_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={[
@@ -528,7 +481,6 @@ const EditToken = (props) => {
autoComplete='off' autoComplete='off'
type='number' type='number'
className='w-full !rounded-lg' className='w-full !rounded-lg'
size='large'
prefix={<IconPlusCircle />} prefix={<IconPlusCircle />}
data={[ data={[
{ value: 10, label: t('10个') }, { value: 10, label: t('10个') },
@@ -555,34 +507,14 @@ const EditToken = (props) => {
</Card> </Card>
<Card className='!rounded-2xl shadow-sm border-0 mb-6'> <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
<div {/* Header: Access Limits */}
className='flex items-center mb-4 p-6 rounded-xl' <div className='flex items-center mb-2'>
style={{ <Avatar size='small' color='purple' className='mr-2 shadow-md'>
background: <IconLink size={16} />
'linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%)', </Avatar>
position: 'relative', <div>
}} <Text className='text-lg font-medium'>{t('访问限制')}</Text>
> <div className='text-xs text-gray-600'>{t('设置令牌的访问限制')}</div>
<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>
</div> </div>
</div> </div>
@@ -627,7 +559,6 @@ const EditToken = (props) => {
onChange={(value) => handleInputChange('model_limits', value)} onChange={(value) => handleInputChange('model_limits', value)}
value={inputs.model_limits} value={inputs.model_limits}
multiple multiple
size='large'
className='w-full !rounded-lg' className='w-full !rounded-lg'
prefix={<IconServer />} prefix={<IconServer />}
optionList={models} optionList={models}
@@ -642,34 +573,14 @@ const EditToken = (props) => {
</Card> </Card>
<Card className='!rounded-2xl shadow-sm border-0'> <Card className='!rounded-2xl shadow-sm border-0'>
<div {/* Header: Group Info */}
className='flex items-center mb-4 p-6 rounded-xl' <div className='flex items-center mb-2'>
style={{ <Avatar size='small' color='orange' className='mr-2 shadow-md'>
background: <IconUserGroup size={16} />
'linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%)', </Avatar>
position: 'relative', <div>
}} <Text className='text-lg font-medium'>{t('分组信息')}</Text>
> <div className='text-xs text-gray-600'>{t('设置令牌的分组')}</div>
<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>
</div> </div>
</div> </div>
@@ -683,7 +594,6 @@ const EditToken = (props) => {
onChange={(value) => handleInputChange('group', value)} onChange={(value) => handleInputChange('group', value)}
renderOptionItem={renderGroupOption} renderOptionItem={renderGroupOption}
value={inputs.group} value={inputs.group}
size='large'
className='w-full !rounded-lg' className='w-full !rounded-lg'
prefix={<IconUserGroup />} prefix={<IconUserGroup />}
optionList={groups} optionList={groups}
@@ -692,7 +602,6 @@ const EditToken = (props) => {
<Select <Select
placeholder={t('管理员未设置用户可选分组')} placeholder={t('管理员未设置用户可选分组')}
disabled={true} disabled={true}
size='large'
className='w-full !rounded-lg' className='w-full !rounded-lg'
prefix={<IconUserGroup />} prefix={<IconUserGroup />}
/> />

35
web/src/pages/User/AddUser.js
View File

@@ -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) => {
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) => {
<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) => {
</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) => {
<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) => {
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) => {
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) => {
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) => {
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

87
web/src/pages/User/EditUser.js
View File

@@ -12,6 +12,7 @@ import {
Typography, Typography,
Card, Card,
Tag, Tag,
Avatar,
} from '@douyinfe/semi-ui'; } from '@douyinfe/semi-ui';
import { import {
IconUser, IconUser,
@@ -155,10 +156,7 @@ const EditUser = (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={
@@ -166,7 +164,6 @@ const EditUser = (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 />}
@@ -176,7 +173,6 @@ const EditUser = (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}
@@ -193,20 +189,14 @@ const EditUser = (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">
}}> <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>
@@ -218,7 +208,6 @@ const EditUser = (props) => {
onChange={(value) => handleInputChange('username', value)} onChange={(value) => handleInputChange('username', value)}
value={username} value={username}
autoComplete="new-password" autoComplete="new-password"
size="large"
className="!rounded-lg" className="!rounded-lg"
showClear showClear
/> />
@@ -232,7 +221,6 @@ const EditUser = (props) => {
onChange={(value) => handleInputChange('password', value)} onChange={(value) => handleInputChange('password', value)}
value={password} value={password}
autoComplete="new-password" autoComplete="new-password"
size="large"
className="!rounded-lg" className="!rounded-lg"
prefix={<IconKey />} prefix={<IconKey />}
/> />
@@ -245,7 +233,6 @@ const EditUser = (props) => {
onChange={(value) => handleInputChange('display_name', value)} onChange={(value) => handleInputChange('display_name', value)}
value={display_name} value={display_name}
autoComplete="new-password" autoComplete="new-password"
size="large"
className="!rounded-lg" className="!rounded-lg"
showClear showClear
/> />
@@ -258,7 +245,6 @@ const EditUser = (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
@@ -269,20 +255,14 @@ const EditUser = (props) => {
{userId && ( {userId && (
<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: Permission 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">
}}> <IconUserGroup 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">
<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>
</div> </div>
@@ -300,7 +280,6 @@ const EditUser = (props) => {
value={inputs.group} value={inputs.group}
autoComplete="new-password" autoComplete="new-password"
optionList={groupOptions} optionList={groupOptions}
size="large"
className="w-full !rounded-lg" className="w-full !rounded-lg"
prefix={<IconUserGroup />} prefix={<IconUserGroup />}
/> />
@@ -318,13 +297,11 @@ const EditUser = (props) => {
value={quota} value={quota}
type="number" type="number"
autoComplete="new-password" autoComplete="new-password"
size="large"
className="flex-1 !rounded-lg" className="flex-1 !rounded-lg"
prefix={<IconCreditCard />} prefix={<IconCreditCard />}
/> />
<Button <Button
onClick={openAddQuotaModal} onClick={openAddQuotaModal}
size="large"
className="!rounded-lg" className="!rounded-lg"
icon={<IconPlus />} icon={<IconPlus />}
> >
@@ -337,20 +314,14 @@ const EditUser = (props) => {
)} )}
<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: Bindings */}
background: 'linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%)', <div className="flex items-center mb-2">
position: 'relative' <Avatar size="small" color="purple" className="mr-2 shadow-md">
}}> <IconLink 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">
<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>
</div> </div>
@@ -364,7 +335,6 @@ const EditUser = (props) => {
'此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改', '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
)} )}
readonly readonly
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -377,7 +347,6 @@ const EditUser = (props) => {
'此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改', '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
)} )}
readonly readonly
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -391,7 +360,6 @@ const EditUser = (props) => {
'此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改', '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
)} )}
readonly readonly
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -405,7 +373,6 @@ const EditUser = (props) => {
'此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改', '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
)} )}
readonly readonly
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -419,7 +386,6 @@ const EditUser = (props) => {
'此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改', '此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改',
)} )}
readonly readonly
size="large"
className="!rounded-lg" className="!rounded-lg"
/> />
</div> </div>
@@ -458,7 +424,6 @@ const EditUser = (props) => {
value={addQuotaLocal} value={addQuotaLocal}
type="number" type="number"
autoComplete="new-password" autoComplete="new-password"
size="large"
className="!rounded-lg" className="!rounded-lg"
prefix={<IconCreditCard />} prefix={<IconCreditCard />}
/> />