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

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

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

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

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

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

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

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

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

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

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

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

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