de98d11d65
This commit standardizes the card header design across multiple edit pages to create a consistent and modern UI experience. Changes made: - Add gradient background colors to card headers - Implement decorative circular elements for visual appeal - Update icon colors to white with semi-transparent backgrounds - Standardize text colors and opacity for better readability - Add consistent padding and border radius - Maintain unique color schemes for different functional sections Modified files: - EditChannel.js - EditRedemption.js - EditToken.js - EditUser.js - AddUser.js The new design features: - Blue gradient for basic information sections - Green gradient for quota/permission settings - Purple gradient for access restrictions - Orange gradient for binding/group information - Consistent layout structure across all edit pages This update improves visual hierarchy and maintains brand consistency while enhancing the overall user experience.
598 lines
21 KiB
JavaScript
598 lines
21 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import {
|
||
API,
|
||
isMobile,
|
||
showError,
|
||
showSuccess,
|
||
timestamp2string,
|
||
} from '../../helpers';
|
||
import { renderGroupOption, renderQuotaWithPrompt } from '../../helpers/render';
|
||
import {
|
||
AutoComplete,
|
||
Banner,
|
||
Button,
|
||
Checkbox,
|
||
DatePicker,
|
||
Input,
|
||
Select,
|
||
SideSheet,
|
||
Space,
|
||
Spin,
|
||
TextArea,
|
||
Typography,
|
||
Card,
|
||
Tag,
|
||
} from '@douyinfe/semi-ui';
|
||
import {
|
||
IconClock,
|
||
IconCalendar,
|
||
IconCreditCard,
|
||
IconLink,
|
||
IconServer,
|
||
IconUserGroup,
|
||
IconSave,
|
||
IconClose,
|
||
IconPlusCircle,
|
||
} from '@douyinfe/semi-icons';
|
||
import { useTranslation } from 'react-i18next';
|
||
|
||
const { Text, Title } = Typography;
|
||
|
||
const EditToken = (props) => {
|
||
const { t } = useTranslation();
|
||
const [isEdit, setIsEdit] = useState(false);
|
||
const [loading, setLoading] = useState(isEdit);
|
||
const originInputs = {
|
||
name: '',
|
||
remain_quota: isEdit ? 0 : 500000,
|
||
expired_time: -1,
|
||
unlimited_quota: false,
|
||
model_limits_enabled: false,
|
||
model_limits: [],
|
||
allow_ips: '',
|
||
group: '',
|
||
};
|
||
const [inputs, setInputs] = useState(originInputs);
|
||
const {
|
||
name,
|
||
remain_quota,
|
||
expired_time,
|
||
unlimited_quota,
|
||
model_limits_enabled,
|
||
model_limits,
|
||
allow_ips,
|
||
group,
|
||
} = inputs;
|
||
const [models, setModels] = useState([]);
|
||
const [groups, setGroups] = useState([]);
|
||
const navigate = useNavigate();
|
||
|
||
const handleInputChange = (name, value) => {
|
||
setInputs((inputs) => ({ ...inputs, [name]: value }));
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
props.handleClose();
|
||
};
|
||
|
||
const setExpiredTime = (month, day, hour, minute) => {
|
||
let now = new Date();
|
||
let timestamp = now.getTime() / 1000;
|
||
let seconds = month * 30 * 24 * 60 * 60;
|
||
seconds += day * 24 * 60 * 60;
|
||
seconds += hour * 60 * 60;
|
||
seconds += minute * 60;
|
||
if (seconds !== 0) {
|
||
timestamp += seconds;
|
||
setInputs({ ...inputs, expired_time: timestamp2string(timestamp) });
|
||
} else {
|
||
setInputs({ ...inputs, expired_time: -1 });
|
||
}
|
||
};
|
||
|
||
const setUnlimitedQuota = () => {
|
||
setInputs({ ...inputs, unlimited_quota: !unlimited_quota });
|
||
};
|
||
|
||
const loadModels = async () => {
|
||
let res = await API.get(`/api/user/models`);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
let localModelOptions = data.map((model) => ({
|
||
label: model,
|
||
value: model,
|
||
}));
|
||
setModels(localModelOptions);
|
||
} else {
|
||
showError(t(message));
|
||
}
|
||
};
|
||
|
||
const loadGroups = async () => {
|
||
let res = await API.get(`/api/user/self/groups`);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
let localGroupOptions = Object.entries(data).map(([group, info]) => ({
|
||
label: info.desc,
|
||
value: group,
|
||
ratio: info.ratio,
|
||
}));
|
||
setGroups(localGroupOptions);
|
||
} else {
|
||
showError(t(message));
|
||
}
|
||
};
|
||
|
||
const loadToken = async () => {
|
||
setLoading(true);
|
||
let res = await API.get(`/api/token/${props.editingToken.id}`);
|
||
const { success, message, data } = res.data;
|
||
if (success) {
|
||
if (data.expired_time !== -1) {
|
||
data.expired_time = timestamp2string(data.expired_time);
|
||
}
|
||
if (data.model_limits !== '') {
|
||
data.model_limits = data.model_limits.split(',');
|
||
} else {
|
||
data.model_limits = [];
|
||
}
|
||
setInputs(data);
|
||
} else {
|
||
showError(message);
|
||
}
|
||
setLoading(false);
|
||
};
|
||
|
||
useEffect(() => {
|
||
setIsEdit(props.editingToken.id !== undefined);
|
||
}, [props.editingToken.id]);
|
||
|
||
useEffect(() => {
|
||
if (!isEdit) {
|
||
setInputs(originInputs);
|
||
} else {
|
||
loadToken().then(() => {
|
||
// console.log(inputs);
|
||
});
|
||
}
|
||
loadModels();
|
||
loadGroups();
|
||
}, [isEdit]);
|
||
|
||
// 新增 state 变量 tokenCount 来记录用户想要创建的令牌数量，默认为 1
|
||
const [tokenCount, setTokenCount] = useState(1);
|
||
|
||
// 新增处理 tokenCount 变化的函数
|
||
const handleTokenCountChange = (value) => {
|
||
// 确保用户输入的是正整数
|
||
const count = parseInt(value, 10);
|
||
if (!isNaN(count) && count > 0) {
|
||
setTokenCount(count);
|
||
}
|
||
};
|
||
|
||
// 生成一个随机的四位字母数字字符串
|
||
const generateRandomSuffix = () => {
|
||
const characters =
|
||
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||
let result = '';
|
||
for (let i = 0; i < 6; i++) {
|
||
result += characters.charAt(
|
||
Math.floor(Math.random() * characters.length),
|
||
);
|
||
}
|
||
return result;
|
||
};
|
||
|
||
const submit = async () => {
|
||
setLoading(true);
|
||
if (isEdit) {
|
||
// 编辑令牌的逻辑保持不变
|
||
let localInputs = { ...inputs };
|
||
localInputs.remain_quota = parseInt(localInputs.remain_quota);
|
||
if (localInputs.expired_time !== -1) {
|
||
let time = Date.parse(localInputs.expired_time);
|
||
if (isNaN(time)) {
|
||
showError(t('过期时间格式错误！'));
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
localInputs.expired_time = Math.ceil(time / 1000);
|
||
}
|
||
localInputs.model_limits = localInputs.model_limits.join(',');
|
||
let res = await API.put(`/api/token/`, {
|
||
...localInputs,
|
||
id: parseInt(props.editingToken.id),
|
||
});
|
||
const { success, message } = res.data;
|
||
if (success) {
|
||
showSuccess(t('令牌更新成功！'));
|
||
props.refresh();
|
||
props.handleClose();
|
||
} else {
|
||
showError(t(message));
|
||
}
|
||
} else {
|
||
// 处理新增多个令牌的情况
|
||
let successCount = 0; // 记录成功创建的令牌数量
|
||
for (let i = 0; i < tokenCount; i++) {
|
||
let localInputs = { ...inputs };
|
||
if (i !== 0) {
|
||
// 如果用户想要创建多个令牌，则给每个令牌一个序号后缀
|
||
localInputs.name = `${inputs.name}-${generateRandomSuffix()}`;
|
||
}
|
||
localInputs.remain_quota = parseInt(localInputs.remain_quota);
|
||
|
||
if (localInputs.expired_time !== -1) {
|
||
let time = Date.parse(localInputs.expired_time);
|
||
if (isNaN(time)) {
|
||
showError(t('过期时间格式错误！'));
|
||
setLoading(false);
|
||
break;
|
||
}
|
||
localInputs.expired_time = Math.ceil(time / 1000);
|
||
}
|
||
localInputs.model_limits = localInputs.model_limits.join(',');
|
||
let res = await API.post(`/api/token/`, localInputs);
|
||
const { success, message } = res.data;
|
||
|
||
if (success) {
|
||
successCount++;
|
||
} else {
|
||
showError(t(message));
|
||
break; // 如果创建失败，终止循环
|
||
}
|
||
}
|
||
|
||
if (successCount > 0) {
|
||
showSuccess(t('令牌创建成功，请在列表页面点击复制获取令牌！'));
|
||
props.refresh();
|
||
props.handleClose();
|
||
}
|
||
}
|
||
setLoading(false);
|
||
setInputs(originInputs); // 重置表单
|
||
setTokenCount(1); // 重置数量为默认值
|
||
};
|
||
|
||
return (
|
||
<SideSheet
|
||
placement={isEdit ? 'right' : 'left'}
|
||
title={
|
||
<Space>
|
||
{isEdit ?
|
||
<Tag color="blue" shape="circle">{t('更新')}</Tag> :
|
||
<Tag color="green" shape="circle">{t('新建')}</Tag>
|
||
}
|
||
<Title heading={4} className="m-0">
|
||
{isEdit ? t('更新令牌信息') : t('创建新的令牌')}
|
||
</Title>
|
||
</Space>
|
||
}
|
||
headerStyle={{
|
||
borderBottom: '1px solid var(--semi-color-border)',
|
||
padding: '24px'
|
||
}}
|
||
bodyStyle={{
|
||
backgroundColor: 'var(--semi-color-bg-0)',
|
||
padding: '0'
|
||
}}
|
||
visible={props.visiable}
|
||
width={isMobile() ? '100%' : 600}
|
||
footer={
|
||
<div className="flex justify-end bg-white">
|
||
<Space>
|
||
<Button
|
||
theme="solid"
|
||
size="large"
|
||
className="!rounded-full"
|
||
onClick={submit}
|
||
icon={<IconSave />}
|
||
loading={loading}
|
||
>
|
||
{t('提交')}
|
||
</Button>
|
||
<Button
|
||
theme="light"
|
||
size="large"
|
||
className="!rounded-full"
|
||
type="primary"
|
||
onClick={handleCancel}
|
||
icon={<IconClose />}
|
||
>
|
||
{t('取消')}
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
}
|
||
closeIcon={null}
|
||
onCancel={() => handleCancel()}
|
||
>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Text strong className="block mb-2">{t('名称')}</Text>
|
||
<Input
|
||
placeholder={t('请输入名称')}
|
||
onChange={(value) => handleInputChange('name', value)}
|
||
value={name}
|
||
autoComplete="new-password"
|
||
size="large"
|
||
className="!rounded-lg"
|
||
showClear
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<Text strong className="block mb-2">{t('过期时间')}</Text>
|
||
<div className="mb-2">
|
||
<DatePicker
|
||
placeholder={t('请选择过期时间')}
|
||
onChange={(value) => handleInputChange('expired_time', value)}
|
||
value={expired_time}
|
||
autoComplete="new-password"
|
||
type="dateTime"
|
||
className="w-full !rounded-lg"
|
||
size="large"
|
||
prefix={<IconCalendar />}
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button
|
||
theme="light"
|
||
type="primary"
|
||
onClick={() => setExpiredTime(0, 0, 0, 0)}
|
||
className="!rounded-full"
|
||
>
|
||
{t('永不过期')}
|
||
</Button>
|
||
<Button
|
||
theme="light"
|
||
type="tertiary"
|
||
onClick={() => setExpiredTime(0, 0, 1, 0)}
|
||
className="!rounded-full"
|
||
icon={<IconClock />}
|
||
>
|
||
{t('一小时')}
|
||
</Button>
|
||
<Button
|
||
theme="light"
|
||
type="tertiary"
|
||
onClick={() => setExpiredTime(0, 1, 0, 0)}
|
||
className="!rounded-full"
|
||
icon={<IconCalendar />}
|
||
>
|
||
{t('一天')}
|
||
</Button>
|
||
<Button
|
||
theme="light"
|
||
type="tertiary"
|
||
onClick={() => setExpiredTime(1, 0, 0, 0)}
|
||
className="!rounded-full"
|
||
icon={<IconCalendar />}
|
||
>
|
||
{t('一个月')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<Banner
|
||
type="warning"
|
||
description={t('注意，令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。')}
|
||
className="mb-4 !rounded-lg"
|
||
/>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<div className="flex justify-between mb-2">
|
||
<Text strong>{t('额度')}</Text>
|
||
<Text type="tertiary">{renderQuotaWithPrompt(remain_quota)}</Text>
|
||
</div>
|
||
<AutoComplete
|
||
placeholder={t('请输入额度')}
|
||
onChange={(value) => handleInputChange('remain_quota', value)}
|
||
value={remain_quota}
|
||
autoComplete="new-password"
|
||
type="number"
|
||
size="large"
|
||
className="w-full !rounded-lg"
|
||
prefix={<IconCreditCard />}
|
||
data={[
|
||
{ value: 500000, label: '1$' },
|
||
{ value: 5000000, label: '10$' },
|
||
{ value: 25000000, label: '50$' },
|
||
{ value: 50000000, label: '100$' },
|
||
{ value: 250000000, label: '500$' },
|
||
{ value: 500000000, label: '1000$' },
|
||
]}
|
||
disabled={unlimited_quota}
|
||
/>
|
||
</div>
|
||
|
||
{!isEdit && (
|
||
<div>
|
||
<Text strong className="block mb-2">{t('新建数量')}</Text>
|
||
<AutoComplete
|
||
placeholder={t('请选择或输入创建令牌的数量')}
|
||
onChange={(value) => handleTokenCountChange(value)}
|
||
onSelect={(value) => handleTokenCountChange(value)}
|
||
value={tokenCount.toString()}
|
||
autoComplete="off"
|
||
type="number"
|
||
className="w-full !rounded-lg"
|
||
size="large"
|
||
prefix={<IconPlusCircle />}
|
||
data={[
|
||
{ value: 10, label: t('10个') },
|
||
{ value: 20, label: t('20个') },
|
||
{ value: 30, label: t('30个') },
|
||
{ value: 100, label: t('100个') },
|
||
]}
|
||
disabled={unlimited_quota}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-end">
|
||
<Button
|
||
theme="light"
|
||
type={unlimited_quota ? "danger" : "warning"}
|
||
onClick={setUnlimitedQuota}
|
||
className="!rounded-full"
|
||
>
|
||
{unlimited_quota ? t('取消无限额度') : t('设为无限额度')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Text strong className="block mb-2">{t('IP白名单')}</Text>
|
||
<TextArea
|
||
placeholder={t('允许的IP，一行一个，不填写则不限制')}
|
||
onChange={(value) => handleInputChange('allow_ips', value)}
|
||
value={inputs.allow_ips}
|
||
style={{ fontFamily: 'JetBrains Mono, Consolas' }}
|
||
className="!rounded-lg"
|
||
rows={4}
|
||
/>
|
||
<Text type="tertiary" className="mt-1 block text-xs">{t('请勿过度信任此功能，IP可能被伪造')}</Text>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center mb-2">
|
||
<Checkbox
|
||
checked={model_limits_enabled}
|
||
onChange={(e) => handleInputChange('model_limits_enabled', e.target.checked)}
|
||
>
|
||
<Text strong>{t('模型限制')}</Text>
|
||
</Checkbox>
|
||
</div>
|
||
<Select
|
||
placeholder={model_limits_enabled ? t('请选择该渠道所支持的模型') : t('勾选启用模型限制后可选择')}
|
||
onChange={(value) => handleInputChange('model_limits', value)}
|
||
value={inputs.model_limits}
|
||
multiple
|
||
size="large"
|
||
className="w-full !rounded-lg"
|
||
prefix={<IconServer />}
|
||
optionList={models}
|
||
disabled={!model_limits_enabled}
|
||
maxTagCount={3}
|
||
/>
|
||
<Text type="tertiary" className="mt-1 block text-xs">{t('非必要，不建议启用模型限制')}</Text>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<Text strong className="block mb-2">{t('令牌分组')}</Text>
|
||
{groups.length > 0 ? (
|
||
<Select
|
||
placeholder={t('令牌分组，默认为用户的分组')}
|
||
onChange={(value) => handleInputChange('group', value)}
|
||
renderOptionItem={renderGroupOption}
|
||
value={inputs.group}
|
||
size="large"
|
||
className="w-full !rounded-lg"
|
||
prefix={<IconUserGroup />}
|
||
optionList={groups}
|
||
/>
|
||
) : (
|
||
<Select
|
||
placeholder={t('管理员未设置用户可选分组')}
|
||
disabled={true}
|
||
size="large"
|
||
className="w-full !rounded-lg"
|
||
prefix={<IconUserGroup />}
|
||
/>
|
||
)}
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</Spin>
|
||
</SideSheet>
|
||
);
|
||
};
|
||
|
||
export default EditToken;
|